feat: 开启应用

1. 从应用中心创建任务栏

src/App.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
 // import HelloWorld from './components/HelloWorld.vue'
 
-import {ComponentInternalInstance, getCurrentInstance, nextTick, onMounted, ref} from "vue";
+import {
+  ComponentInternalInstance,
+  defineComponent,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from "vue";
 import MacWindow from "./components/window/macWindow.vue";
 import MagnetView from "./components/magnets/magnetView.vue";
 import AppleBar from "@/components/appleBar/appleBar.vue";
@@ -14,7 +23,7 @@ import {ApplicationInfo} 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";
-import {runningApplications, testApplications} from "@/util/AppManag.ts";
+import {Applications, openApp, runNavComputed, runningApplications} from "@/util/AppManag.ts";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance
 onMounted(() => {
@@ -27,31 +36,11 @@ const settingPageKey = 'setting';
 const homePageKey = 'home';
 const imagePageKey = 'image';
 const musicPageKey = 'music';
-let navItems:NavItem[] = [
-  {
-    id: 3,
-    name: '影音中心',
-    actionCode: musicPageKey,
-    description: '影音中心',
-    icon: 'music',
-  },
-  {
-    id: 3,
-    name: '照片管理',
-    actionCode: imagePageKey,
-    description: '图库工具',
-    icon: 'photo',
-  },
-  {
-    id: 2,
-    name: '设置',
-    actionCode: settingPageKey,
-    description: '软件设置',
-    icon: 'setting',
-  },
-]
-
-const runningApplications = refrue;
+
+
+
+// 根据runningApplications 动态获取导航项
+
 
 
 
@@ -125,37 +114,13 @@ const navAction = (actionCode:string) => {
   if(editMode.value){
     return console.log('is edit mode')
   }
-  // message.info(`navAction: ${actionCode}`);
+  message.info(`navAction: ${actionCode}`);
   // 寻找actionCode对应的 index
   let index = navItems.findIndex((item) => item.actionCode === actionCode);
   if (index === -1) {
     return console.warn(`找不到actionCode: ${actionCode}`);
   }
   // 更改动画
-  if (index < activeIndex.value) {
-    transitionName.value = 'slide-left';
-  }else{
-    transitionName.value = 'slide-right';
-  }
-  activeIndex.value = index;
-  pageKey.value = navItems[index].actionCode;
-  switch (actionCode) {
-    case settingPageKey:
-      title.value = navItems[index].name;
-      break;
-    case musicPageKey:
-      title.value = navItems[index].name;
-      title.value = "音乐中心"
-      break;
-    case imagePageKey:
-      title.value = navItems[index].name;
-      title.value = "图库工具"
-      break;
-    default:
-      pageKey.value = homePageKey;
-      title.value = 'fc-ele';
-      break;
-  }
   // message.log(`pageKey: ${pageKey.value}`);
 }
 
@@ -178,6 +143,15 @@ function closeApplicationCenter() {
 function closeAppHandle(){
   console.log('close app');
 }
+
+function openApplication(key: string)
+{
+  message.log(`open app ${key}`);
+  console.log(runNavComputed);
+  console.log(runningApplications);
+  openApp(key);
+
+}
 </script>
 
 <template>
@@ -224,7 +198,7 @@ function closeAppHandle(){
 
     <div :class="`app-bar ${isBarHidden?'app-bar-hidden':''}`">
       <apple-bar
-          :nav-items="navItems"
+          :nav-items="runNavComputed"
           :active="pageKey"
           :hide-time="3000"
           :prevent-hide="isOpenApplicationCenter"
@@ -255,7 +229,10 @@ function closeAppHandle(){
          @click="closeApplicationCenter">
     </div>
     <div class="start-window" v-show="isOpenApplicationCenter">
-      <app-list :app-list="testApplications"></app-list>
+      <app-list
+          :app-list="Applications"
+          @open="openApplication"
+      ></app-list>
     </div>
   </mac-window>
 </template>

src/components/appleBar/appleBar.ts

@@ -1,5 +1,5 @@
 export interface NavItem {
-    id: number,
+    id: string,
     name: string,
     actionCode: string,
     description: string,

src/components/window/app-list.vue

@@ -25,9 +25,9 @@ const emits = defineEmits<{
   (e: "open", id: string): void
 }>()
 
-function openApp(id: string) {
+function openApp(key: string) {
   // emit
-  emits("open", id)
+  emits("open", key)
 }
 
 </script>
@@ -37,8 +37,8 @@ function openApp(id: string) {
   <div class="list-content">
     <div class="app-list-item"
          v-for="item in showAppList"
-         :key="item.id"
-         @click="openApp(item.id)"
+         :key="item.key"
+         @click="openApp(item.key)"
     >
       <div class="list-item-icon">
         <icon-svg :icon-name="item.icon" />

src/types/application.ts

@@ -8,6 +8,7 @@ export interface ApplicationInfo {
     allowMulti: boolean;
     minHeight: number;
     minWidth: number;
+    description: string;
 }
 
 export interface RunApplicationInfo {
@@ -16,5 +17,4 @@ export interface RunApplicationInfo {
     show: boolean;
     full: boolean;
     index: number;
-    name: string;
 }

src/util/AppManag.ts

@@ -1,6 +1,9 @@
 import {ApplicationInfo, RunApplicationInfo} from "@/types/application.ts";
+import {NavItem} from "@/components/appleBar/appleBar.ts";
+import message from "@/components/public/kui/message";
+import {computed, reactive} from "vue";
 
-export let testApplications:ApplicationInfo[] = [
+export let Applications:ApplicationInfo[] = [
     {
         key: 'music',
         name: '音乐',
@@ -10,6 +13,7 @@ export let testApplications:ApplicationInfo[] = [
         allowMulti: false,
         minHeight: 600,
         minWidth: 800,
+        description: '音乐播放器',
     },
     {
         key: 'setting',
@@ -20,12 +24,29 @@ export let testApplications:ApplicationInfo[] = [
         allowMulti: false,
         minHeight: 600,
         minWidth: 800,
+        description: '软件设置',
     },
 ]
 
 // 已经启动的app 列表
-export let runningApplications:RunApplicationInfo[] = []
+export let runningApplications:RunApplicationInfo[] = reactive([]);
 
+// 使用computed 根据 runningApplications 动态生成 navItems
+export const runNavComputed = computed(
+    () => runningApplications.map(item => {
+        let rawAppInfo = Applications.find(appInfo => appInfo.key === item.key)
+        if(!rawAppInfo)
+        {
+            throw new Error(`app not found: ${item.key}`)
+        }
+        return {
+            id: item.id,
+            name: rawAppInfo.name,
+            icon: rawAppInfo.icon,
+            description: rawAppInfo.description,
+            actionCode: item.id
+        } as NavItem;
+    }))
 
 function genAppId(key: string, num: number = 0): string {
     let appId = `${key}-${num}`
@@ -44,26 +65,34 @@ function runApp(appInfo: ApplicationInfo): RunApplicationInfo {
         show: true,
         full: false,
         index: 0,
-        name: appInfo.name,
     }
     return app
 }
 
 
-export function openApp(appInfo: ApplicationInfo) {
+export function openApp(key: string) {
+    let appInfo = Applications.find(item => item.key === key)
     let app = null;
+    if(!appInfo)
+    {
+        message.error(`应用不存在: ${key}`);
+        return
+    }
     if (appInfo.allowMulti) {
         // 允许多开
         app = runApp(appInfo)
         runningApplications.push(app)
     } else {
         // 不允许多开
-        app = runningApplications.find(item => item.id)
-    }
-    if(!app){
-        app = runApp(appInfo)
-        runningApplications.push(app)
+        app = runningApplications.find(item => item.key === appInfo.key)
+        if(!app){
+            app = runApp(appInfo)
+            runningApplications.push(app)
+        } else {
+            app.show = true
+        }
     }
+
 }
 
 export function closeApp(app: RunApplicationInfo) {
@@ -73,3 +102,21 @@ export function closeApp(app: RunApplicationInfo) {
     }
     runningApplications.splice(appIndex, 1)
 }
+
+
+export function getRunAppNavigation(): NavItem[] {
+    return runningApplications.map(item => {
+        let rawAppInfo = Applications.find(appInfo => appInfo.key === item.key)
+        if(!rawAppInfo)
+        {
+            throw new Error(`app not found: ${item.key}`)
+        }
+        return {
+            id: item.id,
+            name: rawAppInfo.name,
+            icon: rawAppInfo.icon,
+            description: rawAppInfo.description,
+            actionCode: item.id
+        } as NavItem;
+    })
+}