feat: 音乐播放器制作

1. 制作音乐播放器

src/App.vue

@@ -16,7 +16,7 @@ import MagnetView from "./components/magnets/magnetView.vue";
 import AppleBar from "@/components/appleBar/appleBar.vue";
 import BarIconBtn from "@/components/appleBar/barIconBtn.vue";
 import message from "@/components/public/kui/message";
-import {RunApplicationInfo} from "@/types/application.ts";
+import {ApplicationInfo, RunApplicationInfo} from "@/types/application.ts";
 import AppList from "@/components/window/app-list.vue";
 import AppWindow from "@/components/window/app-window.vue";
 import {windowAction} from "@/tools/IpcCmd.ts";
@@ -28,7 +28,7 @@ import {
   openApp,
   runNavComputed,
   runningApplications,
-  setAppTop,
+  setAppTop, AppListNames,
 } from "@/util/AppManag.ts";
 
 import musicIndex from "@/components/music/musicIndex.vue"
@@ -77,6 +77,8 @@ function getParentSize() {
 onMounted(() => {
   getParentSize();
   // document.addEventListener('resize', getParentSize);
+  setAppComponent(AppListNames.musicIndex, musicIndex);
+
 })
 
 const dingHandle = () => {
@@ -121,7 +123,6 @@ const navAction = (actionCode:string) => {
   {
     return message.error(`${actionCode} is not exist`);
   }
-  setAppComponent(runningApp.key, musicIndex);
   runningApp.show = true;
   setAppTop(runningApp);
 

src/assets/public.css

@@ -6,5 +6,11 @@
 }
 
 .fc-app-window{
+    position: relative;
     width: 100%;
+    height: 100%;
 }
+
+.flex{
+    display: flex;
+}

src/components/music/musicIndex.vue

@@ -7,11 +7,36 @@ defineComponent({
 </script>
 
 <template>
-  <div class="fc-app-window">
-    music
+  <div class="fc-app-window flex">
+    <div class="side-bar">
+      <div class="side-title">
+        FC-MUSIC
+      </div>
+
+<!--      侧边栏 -->
+      <div class="search-input">
+
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
+@import "../../assets/public.css";
+.side-bar
+{
+  width: 210px;
+  height: 100%;
+  border-right: 1px solid var(--color-border);
+}
+
+.side-bar .side-title{
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  font-size: larger;
+  display: block;
+  padding-left: 0.8em;
+}
 
 </style>

src/util/AppManag.ts

@@ -3,6 +3,10 @@ import {NavItem} from "@/components/appleBar/appleBar.ts";
 import message from "@/components/public/kui/message";
 import {computed, reactive} from "vue";
 
+export const AppListNames = {
+    musicIndex: 'musicIndex',
+    setting: 'setting',
+}
 export let Applications:ApplicationInfo[] = [
     {
         key: 'musicIndex',
@@ -132,7 +136,12 @@ export function closeApp(app: RunApplicationInfo) {
 }
 
 
-export function getAppComponent  (key: string): any {
+export function getAppByKey(key: string)
+{
+    return runningApplications.find(item => item.key === key)
+}
+
+export function getAppComponent (key: string): any {
     let appInfo = Applications.find(item => item.key === key)
     if(!appInfo)
     {