feat: 窗口内弹窗

1. 窗口内进行弹窗
2. 命令试弹窗组件

package.json

@@ -30,7 +30,7 @@
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vite-plugin-optimizer": "^1.4.2",
-    "vue": "^3.3.4",
+    "vue": "3.5",
     "vue-tsc": "^1.8.5"
   },
   "dependencies": {

src/App.vue

@@ -207,13 +207,16 @@ function openApplication(key: string)
                 :app-name="item.showTitle"
                 :hidden="!item.show"
                 :index="item.index"
+                :app-window-id="item.id"
                 @min="minAppHandle(item)"
                 @close="closeAppHandle(item)"
                 @focus-window="focusAppHandle(item)"
             >
 <!--              切换对应组件, 并且-->
               <component
-                  :is="getAppComponent(item.key)">
+                  :is="getAppComponent(item.key)"
+                  :windowId="item.id"
+              >
               </component>
             </app-window>
           </div>

src/components/music/common/mSettingScan.vue

@@ -1,12 +1,23 @@
 <script setup lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {MusicScanSetting} from "@/types/musicType.ts";
 import EmptyView from "@/components/public/emptyView.vue";
+import {KuiDialogCmd} from "@/components/public/kui-dialog-cmd.ts";
+
+import addScanDialog from "@/components/music/dialog/addScan.vue"
+import message from "@/components/public/kui/message";
 
 defineComponent({
   name: 'm-setting-scan'
 })
 
+const props  = defineProps({
+  windowId: {
+    type: String,
+    default: ''
+  }
+})
+
 const scanSetting: MusicScanSetting[] = [];
 scanSetting.push({
   name: '默认配置',
@@ -39,13 +50,36 @@ scanSetting.push({
   scanSubDir: true,
 })
 
+function testFn(){
+  message.info('test')
+}
+
+
+
+const kuiDialog = new KuiDialogCmd({
+  showContent: addScanDialog,
+  mountTarget: props.windowId,
+  className: 'dialog',
+  on: {
+    onSubmit: testFn
+  }
+});
+function openDialog()
+{
+  if(!kuiDialog.isShow())
+  {
+    kuiDialog.show();
+  } else {
+    kuiDialog.hide();
+  }
+}
 
 </script>
 
 <template>
   <div class="full scroll">
     <div class="btn-group">
-      <div class="btn">创建扫描配置</div>
+      <div class="btn" @click="openDialog">创建扫描配置</div>
     </div>
     <div class="scan-view scroll">
       <empty-view v-if="scanSetting.length === 0"/>
@@ -60,6 +94,8 @@ scanSetting.push({
         </div>
       </div>
     </div>
+
+
   </div>
 </template>
 
@@ -109,4 +145,4 @@ scanSetting.push({
 }
 
 
-</style>
+</style>

src/components/music/common/musicSetting.vue

@@ -7,6 +7,13 @@ defineComponent({
   name: 'musicSetting',
 })
 
+defineProps({
+  windowId: {
+    type: String,
+    default: ''
+  }
+})
+
 interface TabItem {
   name: string;
   key: string;
@@ -29,11 +36,14 @@ function changeTabHandle (item: TabItem)
   showTabKey.value = item.key
 }
 
+
+
+
 </script>
 
 <template>
   <div class="musicSetting">
-    <div class="title">音乐设置</div>
+    <div class="title">音乐设置{{windowId}}</div>
     <div class="head">
       <div v-for="(item, index) in tabList"
            :key="index"
@@ -44,9 +54,11 @@ function changeTabHandle (item: TabItem)
       </div>
     </div>
     <div class="view-con">
-      <m-setting-scan v-if="showTabKey === keyScan"/>
+      <m-setting-scan v-if="showTabKey === keyScan" :window-id="windowId"/>
       <m-setting-could v-else-if="showTabKey === keyCloud"/>
     </div>
+
+
   </div>
 </template>
 

src/components/music/dialog/addScan.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {defineComponent} from "vue";
+
+defineComponent({
+  name: "addScanDialog"
+})
+
+const emits = defineEmits<{
+    (e: 'close' ): void,
+    (e: 'submit'): void
+}>()
+
+function closeDialog() {
+  emits('close');
+}
+
+</script>
+
+<template>
+  <div class="dialog-content">
+    <div class="dialog-title">
+      添加扫描路径
+      <div
+          class="close-btn"
+          @click="closeDialog()">
+        X
+      </div>
+    </div>
+
+    <div class="dialog-show">
+
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/music/musicIndex.vue

@@ -10,6 +10,13 @@ defineComponent({
   name: "musicIndex"
 })
 
+defineProps({
+  windowId: {
+    type: String,
+    default: ''
+  }
+})
+
 const searchText = ref('');
 
 const playList: Ref<PlayList[]> = ref<PlayList[]>([
@@ -80,7 +87,7 @@ function showMusicSetting()
 </script>
 
 <template>
-  <div class="fc-app-window">
+  <div class="fc-app-window" >
     <div class="music-content">
       <div class="side-bar">
         <div class="side-title">
@@ -118,7 +125,8 @@ function showMusicSetting()
       </div>
       <div class="play-list-info">
         <play-list-info v-if="musicViewShow === showPlayList" :play-list="playList[selectIndex]"/>
-        <music-setting v-if="musicViewShow === showSetting"/>
+        <music-setting v-if="musicViewShow === showSetting"
+                       :window-id="windowId"/>
       </div>
 
     </div>

src/components/public/kui-dialog-cmd.ts

@@ -0,0 +1,97 @@
+import {Component, h, render} from "vue";
+
+enum KuiDialogType {
+    alert,
+    confirm,
+    prompt,
+    loading,
+    custom
+}
+interface KuiDialogCmdOptions {
+    dialogType?: KuiDialogType;
+    showContent: string | Component;
+    mountTarget?: string;
+    className?: string;
+    onClose?: () => void;
+    beforeClose?: () => boolean;
+    on?: Record<string, (...args: any[]) => void>;
+}
+export class KuiDialogCmd {
+    static defaultOptions: KuiDialogCmdOptions = {
+        dialogType: KuiDialogType.custom,
+        showContent: "kui-dialog",
+        mountTarget: "#kui-root",
+        beforeClose: (): boolean => {
+            return true;
+        },
+        onClose() {
+        },
+        className: "kui-dialog",
+    }
+    options: KuiDialogCmdOptions;
+    containerEl: HTMLElement;
+    targetEl: HTMLElement | null;
+    showFlag: boolean;
+    tmpVNode: any;
+
+    constructor(opt: KuiDialogCmdOptions) {
+        this.options = {
+            ...KuiDialogCmd.defaultOptions,
+            ...opt
+        };
+        this.containerEl = document.createElement('div');
+        this.containerEl.className = <string>this.options.className;
+        this.targetEl = null;
+        this.showFlag = false;
+    }
+
+    show( props?: any ) {
+        const eventListeners = {
+            onClose: () => this.hide(), // 绑定关闭事件
+        };
+        // 解析 option中的on
+        // 根据参数决定显示类型
+        let vNode =
+            h(this.options.showContent,  {
+            ...props,
+            // 这里会将所有其他事件（包括未明确绑定）传递给子组件
+            on: {
+                ...this.options.on, // 传递的自定义事件
+                ...this.getAllListeners(), // 获取所有未明确定义的事件
+            },
+            ...eventListeners,
+            ...this.options.on
+        });
+        render(vNode, this.containerEl);
+        let target = document.getElementById(<string>this.options.mountTarget);
+        if (!target) {
+            target = document.body;
+        }
+        target.appendChild(this.containerEl);
+        this.targetEl = target;
+        this.showFlag = true;
+    }
+
+    hide() {
+        let beforeCloseFn = this.options.beforeClose;
+        let closeFn = this.options.onClose;
+        if (beforeCloseFn && !beforeCloseFn()) {
+            // 被阻止关闭
+            return;
+        }
+        if (this.targetEl) {
+            this.targetEl.removeChild(this.containerEl);
+        }
+        render(null, this.containerEl);
+        if (closeFn) closeFn();
+        this.showFlag = false;
+    }
+
+    getAllListeners() {
+        // 获取所有从 options.on 传递过来的事件监听器
+        return this.options.on || {};
+    }
+    isShow() {
+        return this.showFlag;
+    }
+}

src/components/public/kui-dialog.vue

@@ -7,6 +7,11 @@ defineProps({
   className: {
     type: String,
     default: ''
+  },
+  // 挂载目标
+  mountTarget: {
+    type: String,
+    default: '#kui-root'
   }
 })
 defineEmits(['close'])
@@ -43,8 +48,8 @@ defineEmits(['close'])
 </script>
 
 <template>
-  <Teleport to="#kui-root" v-if="show">
-    <div :class="className">
+  <Teleport :defer="true" :to="mountTarget" >
+    <div v-if="show" :class="className">
       <slot></slot>
     </div>
   </Teleport>

src/components/window/app-window.vue

@@ -28,7 +28,10 @@ const props = defineProps({
     type: String,
     default: 'test'
   },
-
+  appWindowId: {
+    type: String,
+    default: ''
+  },
 })
 
 const isFull = ref(false)
@@ -271,13 +274,14 @@ watch(()=>props.parentWidth, (_newValue, _oldValue)=>{
         @move="(moveInfo: MoveInfo)=>{resizeHandle(item, moveInfo)}" >
     </vue-drag>
   </div>
-  <div class="app-window-show">
+  <div class="app-window-show" >
     <mac-window
         :title="'test212'"
         icon="home"
         :is-full="isFull"
         :disable-margin="true"
         :ding-show="false"
+        :app-window-id="appWindowId"
         @min="minHandle"
         @max="maxHandle"
         @close="closeHandle"

src/components/window/macWindow.vue

@@ -31,6 +31,10 @@ defineProps({
   disableMargin: {
     type: Boolean,
     default: false
+  },
+  appWindowId: {
+    type: String,
+    default: ''
   }
 })
 
@@ -100,7 +104,7 @@ const closeHandle = () => {
           </div>
         </div>
       </div>
-      <div class="window-content" >
+      <div class="window-content" :id="appWindowId" portal>
         <slot></slot>
       </div>
     </div>