首页桌面动态效果

package.json

@@ -8,6 +8,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "mitt": "^3.0.0",
     "vue": "^3.2.32"
   },
   "devDependencies": {

public/index.html

@@ -5106,4 +5106,4 @@
     <script src="./index.js"></script>
 </body>
 
-</html>
+</html>

public/static/css/style/style.css

@@ -1466,9 +1466,9 @@ ul.sds-desktop-shortcut {
 
 
 /* 套件中心弹出框 */
-.tjDetail{
+/* .tjDetail{
     display: none;
-}
+} */
 
 .sds-window-v5 .x-tool-help {
     background-image: url("../../../image/index//wdheader_bt_help.png");
@@ -1532,16 +1532,3 @@ ul.sds-desktop-shortcut {
 .synopkg-toolbar .syno-ux-textfilter {
     width: 100%;
 }
-
-.syno-textfilter .x-form-field-wrap .syno-textfilter-text, .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-text.x-form-text {
-    background-image: url("../../../image/index/textfield_icn_search_filter.png");
-}
-
-.syno-textfilter .x-trigger-wrap-focus.x-form-field-wrap, .syno-ux-textfilter .x-trigger-wrap-focus.x-form-field-wrap {
-    border-color: #057FEB;
-}
-
-.synopkg-window .syno-ux-modulelist .x-tree-node-leaf .icon-installed {
-    background-image: url('../../../image/index/sprite-s19f0e38f3d.png');
-    background-position: 0 -156px;
-}

src/App.vue

@@ -10,12 +10,18 @@
 <script>
 import Header from './component/Header'
 import Desktop from './component/Desktop'
+
+import {getCurrentInstance} from 'vue';
+import mitt from "mitt"
 export default {
   data() {
     return {
-      num: 123456
     }
   },
+  beforeCreate() {
+    const ins = getCurrentInstance()
+    ins.appContext.config.globalProperties.$bus = mitt();
+  },
   components:{
     Header,
     Desktop

src/component/Desktop/FixWindow/Changelog/index.vue

@@ -64,7 +64,7 @@ export default {
             id: 1,
             title: '文件更新日志',
             titleImgUrl: '../../../../../../public/image/index/wdgt_icn_title_file_change_logs.png',
-            detailMessageList: []
+            detailMessageList: [],
             cls:'',
         }
     }
@@ -74,4 +74,4 @@ export default {
   name:'ChangeLog'
 
 }
-</script>
+</script>

src/component/Desktop/FixWindow/ResourceMonitor/index.vue

@@ -23,15 +23,18 @@
                         <div class="x-box-inner"
                             style="width: 296px; height: 164px;">
                             <div class=" resource-monitor-percentage-cmp horizontal x-box-item"
-                                style="width: 296px; height: 24px; left: 0px; top: 0px;">
-                                <div class="percentage-cmp-title">CPU</div>
+                                style="width: 296px; height: 24px; left: 0px;"
+                                :style="{top:`${detailMessageIndex*24}px`}"
+                                 v-for="(detailMessage,detailMessageIndex) in resourceMonitorDetail.detailMessageList" :key="detailMessage.id">
+                                <div class="percentage-cmp-title">{{detailMessage.title}}</div>
                                 <div class="percentage-cmp-hbar-background">
                                     <div class="percentage-cmp-hbar-fill"
-                                        style="width: 1.6px;"></div>
+                                        :style="{width:`${detailMessage.progressPrecent}`}"></div>
                                 </div>
-                                <div class="percentage-cmp-value">1%
+                                <div class="percentage-cmp-value">{{detailMessage.progressPrecent}}
                                 </div>
                             </div>
+                            <!--
                             <div class=" resource-monitor-percentage-cmp horizontal x-box-item"
                                 style="width: 296px; height: 24px; left: 0px; top: 24px;">
                                 <div class="percentage-cmp-title">RAM</div>
@@ -42,8 +45,11 @@
                                 <div class="percentage-cmp-value">
                                     28%</div>
                             </div>
+                            -->
                             <div class=" x-panel resource-Monitor-networkio-cmp x-panel-noborder x-box-item"
-                                style="width: 296px; left: 0px; top: 48px;">
+                                style="width: 296px; left: 0px;"
+                                :style="{top:`${(selectMessageIndex*24)+48}px`}"
+                                v-for="(selectMessage,selectMessageIndex) in resourceMonitorDetail.selectMessageList" :key="selectMessage.id">
                                 <div class="x-panel-bwrap">
                                     <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
                                         style="width: 296px; height: 24px;">
@@ -55,25 +61,22 @@
                                                 <em
                                                     class="x-btn-arrow x-unselectable"><button
                                                         type="button"
-                                                        aria-label="总计"
-                                                        class=" x-btn-text"
-                                                        aria-level="1"
-                                                        aria-expanded="false"
-                                                        aria-haspopup="true"
-                                                        aria-owns="ext-comp-1078">总计</button></em></span>
+                                                        class=" x-btn-text">{{selectMessage.title}}</button></em></span>
                                         </div>
                                         <div
-                                            class=" x-form-display-field networkio-cmp-icon out">
+                                            class=" x-form-display-field"
+                                            :class="selectMessage.cls">
                                         </div>
                                         <div
                                             class=" x-form-display-field networkio-cmp-label out">
-                                            1.2 KB/s</div>
+                                            {{selectMessage.text}}</div>
                                         <div
-                                            class=" x-form-display-field networkio-cmp-icon in">
+                                            class=" x-form-display-field"
+                                            :class="selectMessage.cls1">
                                         </div>
                                         <div
                                             class=" x-form-display-field networkio-cmp-label">
-                                            4.4 KB/s</div>
+                                            {{selectMessage.task}}</div>
                                         <div role="presentation"
                                             class="x-form-hidden-error-msg"></div>
                                         <div role="presentation"
@@ -85,54 +88,6 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="resource-Monitor-widget-panel resource-Monitor-widget-panel-noborder x-box-item"
-                                style="width: 296px; left: 0px; top: 72px;">
-                                <div class="resource-Monitor-widget-panel-bwrap">
-                                    <div class="resource-Monitor-widget-panel-body resource-Monitor-widget-panel-body-noheader resource-Monitor-widget-panel-body-noborder"
-                                        style="width: 296px; height: 92px;">
-                                        <div class=" resource-Monitor-widget-panel resource-Monitor-widget-panel-noborder"
-                                            style="width: 296px;">
-                                            <div
-                                                class="resource-Monitor-widget-panel-bwrap">
-                                                <div class="resource-Monitor-widget-panel-body resource-Monitor-widget-panel-body-noheader resource-Monitor-widget-panel-body-noborder"
-                                                    style="width: 296px; height: 92px;">
-                                                    <div class=" resource-Monitor-widget-base echarts-wrapper"
-                                                        _echarts_instance_="ec_1649731283195"
-                                                        style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
-                                                        <div
-                                                            style="position: relative; overflow: hidden; width: 296px; height: 92px; padding: 0px; margin: 0px; border-width: 0px;">
-                                                            <canvas width="296"
-                                                                height="92"
-                                                                style="position: absolute; left: 0px; top: 0px; width: 296px; height: 92px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
-                                                        </div>
-                                                        <div></div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class=" resource-Monitor-widget-panel resource-Monitor-widget-panel-noborder x-hide-display"
-                                            style="width: 296px;">
-                                            <div
-                                                class="resource-Monitor-widget-panel-bwrap">
-                                                <div class="resource-Monitor-widget-panel-body resource-Monitor-widget-panel-body-noheader resource-Monitor-widget-panel-body-noborder"
-                                                    style="width: 296px; height: 84px;">
-                                                    <div class=" resource-Monitor-widget-base echarts-wrapper"
-                                                        _echarts_instance_="ec_1649731283196"
-                                                        style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
-                                                        <div
-                                                            style="position: relative; overflow: hidden; width: 296px; height: 92px; padding: 0px; margin: 0px; border-width: 0px;">
-                                                            <canvas width="296"
-                                                                height="92"
-                                                                style="position: absolute; left: 0px; top: 0px; width: 296px; height: 92px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
-                                                        </div>
-                                                        <div></div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -150,6 +105,38 @@ export default {
             id: 1,
             title: '资源监控',
             titleImgUrl: '../../../../public/image/index/resource.png',
+            detailMessageList: [
+                {
+                    id: 10,
+                    title: 'CPU',
+                    text: '',
+                    task:  '',
+                    progressNumerator:0,
+                    progressDenominator:0,
+                    progressPrecent:'1%',
+                    cls: '',
+                },
+                {
+                    id: 11,
+                    title: 'RAM',
+                    text: '',
+                    task:  '',
+                    progressNumerator:0,
+                    progressDenominator:0,
+                    progressPrecent:'28%',
+                    cls: '',
+                },
+            ],
+            selectMessageList:[
+                {
+                    id: 20,
+                    title: '总计',
+                    text: '1.2KB/s',
+                    task:  '4.4KB/s',
+                    cls: 'networkio-cmp-icon out',
+                    cls1: 'networkio-cmp-icon in',
+                }
+            ],
         }
 
     }

src/component/Desktop/FixWindow/RunningState/index.vue

@@ -31,7 +31,7 @@
                                             style="width: 296px; height: 76px; left: 0px; top: 0px;">
                                             <div>
                                                 <div
-                                                    class="syno-sysinfo-system-health-west-normal">
+                                                    :class="runningStateDetail.centerDetail.cls">
                                                 </div>
                                             </div>
                                             <div>
@@ -39,10 +39,10 @@
                                                     class="syno-sysinfo-system-health-content-wrap">
                                                     <div
                                                         class="syno-sysinfo-system-health-summary syno-sysinfo-system-health-content-header-normal">
-                                                        正常</div>
+                                                        {{runningStateDetail.centerDetail.title}}</div>
                                                     <div
                                                         class="syno-sysinfo-system-health-content">
-                                                        您的 VirtualDSM 运转正常。</div>
+                                                        {{runningStateDetail.centerDetail.text}}</div>
                                                 </div>
                                             </div>
                                         </div>
@@ -60,13 +60,13 @@
                                                                     class="x-table-layout"
                                                                     cellspacing="0">
                                                                     <tbody>
-                                                                        <tr>
+                                                                        <tr v-for="detailMessage in runningStateDetail.detailMessageList" :key="detailMessage.id">
                                                                             <td
                                                                                 class="x-table-layout-cell">
                                                                                 <div>
                                                                                     <p
                                                                                         class="syno-sysinfo-system-health-south-title">
-                                                                                        服务器名称
+                                                                                        {{detailMessage.title}}
                                                                                     </p>
                                                                                 </div>
                                                                             </td>
@@ -75,11 +75,13 @@
                                                                                 <div>
                                                                                     <p
                                                                                         class="syno-sysinfo-system-health-south-data">
-                                                                                        DSM-Demo
+                                                                                       {{detailMessage.text}}
                                                                                     </p>
                                                                                 </div>
                                                                             </td>
                                                                         </tr>
+
+                                                                        <!-- 
                                                                         <tr>
                                                                             <td
                                                                                 class="x-table-layout-cell sys-info-row x-row-alt row-left">
@@ -92,16 +94,14 @@
                                                                                             <span
                                                                                                 cellspacing="0"
                                                                                                 class="x-btn sys-info-btn syno-ux-button syno-ux-button-default syno-ux-button-dropdown x-btn-noicon"
-                                                                                                style="width: auto; margin-left: 0px;"><em
+                                                                                                style="width: auto; margin-left: 0px;">
+                                                                                                <em
                                                                                                     class="x-btn-arrow x-unselectable"><button
                                                                                                         type="button"
-                                                                                                        aria-label="局域网 1"
-                                                                                                        class=" x-btn-text"
-                                                                                                        aria-level="1"
-                                                                                                        aria-expanded="false"
-                                                                                                        aria-haspopup="true"
-                                                                                                        aria-owns="ext-comp-1058">局域网
-                                                                                                    </button></em></span>
+                                                                                                        class=" x-btn-text">局域网
+                                                                                                    </button>
+                                                                                                </em>
+                                                                                            </span>
                                                                                         </div>
                                                                                     </div>
                                                                                 </div>
@@ -136,6 +136,7 @@
                                                                                 </div>
                                                                             </td>
                                                                         </tr>
+                                                                        -->
                                                                     </tbody>
                                                                 </table>
                                                             </div>
@@ -165,7 +166,7 @@ export default {
             title: '系统状况',
             titleImgUrl: '../../../../public/image/index/windowInfo.png',
             centerDetail:{
-                title:'正常状态',
+                title:'正常',
                 text:'您的 VirtualDSM 运转正常。',
                 cls:'syno-sysinfo-system-health-west-normal',
             },

src/component/Desktop/FixWindow/ScheduledTask/index.vue

@@ -111,7 +111,7 @@ export default {
                 },
                 {
                     id: 11,
-                     title: 'mailplus-demo',
+                    title: 'mailplus-demo',
                     text: '2022-04-14 00:00',
                     cls: 'syno-taskscheduler-enable-taskicon',
                 }

src/component/Desktop/Menu/index.vue

@@ -1,9 +1,10 @@
 <template>
   <!-- 打开的菜单图标显示区 -->
   <div class="menu sds-desktop">
-    <ul class="menushow">
-      <li :class="menu.spacialCls" v-for="menu in menuList" :key="menu.index" style="background:rgba(225,225,225,0.5);" :aria-label="menu.ariaLabel">
-        <div :class="menuItem" :style="{backgroundImage:`url(${menu.imgUrl})`}"></div>
+    <ul class="menushow" v-if="menuList.length">
+      <li :class="menu.spacialCls" v-for="(menu,menuIndex) in menuList" :key="menu.index" :style="{background:menu.backgroundColor}"
+      @click="clickMenuItem(menu.imgUrl,menuIndex)">
+        <div :class="menu.spacialCls" :style="{backgroundImage:`url(${menu.imgUrl})`}"></div>
       </li>
     </ul>
   </div>
@@ -13,17 +14,100 @@
 export default {
   data() {
     return {
-      menuList:[
-        {
-          id:'0',
-          spacialCls:'tjCenter',
-          ariaLabel:'套件中心',
-          imgUrl:'../../../../public/image/index/tjCenter.png',
+      menuList:[],
+      isHaveMenuItem: false,
+      menuIndex: -1,
+    }
+  },
+  mounted() {
+    this.$bus.on('clickShortcutItem',this.clickShortcutItem)
+    this.$bus.on("changeDialogWindow",this.changeDialogWindow)
+    this.$bus.on('closeDialogWindow',this.closeDialogWindow)
+  },
+  methods:{
+    // 点击大图标打开小图标
+    clickShortcutItem(obj){
+      let spacialCls  = obj.spacialCls 
+      if(this.menuList.length  > 0){
+        this.menuList.forEach(menu => {
+          if (menu.spacialCls === spacialCls) {
+              menu.backgroundColor = 'rgba(225,225,225,0.5)'
+          } else {
+              menu.backgroundColor = 'rgba(50,60,70,0.9)'
+          }
+        })
+        if(this.menuList.length){
+          this.isHaveMenuItem = this.menuList.some(menu => {
+            return menu.spacialCls === spacialCls 
+          })
+        }
+      }
+      if(!this.isHaveMenuItem){
+        let menuItem = {
+          id:new Date().getTime(),
+          spacialCls:spacialCls,
+          imgUrl:obj.imgUrl,
+          backgroundColor:'rgba(225,225,225,0.5)'
+        }
+        this.menuList.push(menuItem)
+      }
+      
+    },
+    // 点击小图标打开大图标
+    clickMenuItem(imgUrl,menuIndex){
+      this.$bus.emit('clickMenuItem',imgUrl)
+      this.menuList.forEach(menu => {
+        menu.backgroundColor = 'rgba(50,60,70,0.9)'
+      })
+       this.menuList[menuIndex].backgroundColor = 'rgba(225,225,225,0.5)'
+    },
+    // 点击弹出窗页面切换小图标选中状态
+    changeDialogWindow(menu){
+      if(typeof(menu) == 'string'){
+        this.getMenuItem(menu)
+        if(this.menuIndex != -1){
+          this.menuList.forEach(menu => {
+            menu.backgroundColor = 'rgba(50,60,70,0.9)'
+          })
+          this.menuList[this.menuIndex].backgroundColor = 'rgba(225,225,225,0.5)'
+        }
+      }else if (typeof(menu) == 'object'){
+        this.getMenuItem(menu.imgUrl)
+        this.menuList.forEach(menu => {
+          menu.backgroundColor = 'rgba(50,60,70,0.9)'
+        })
+        if(this.menuIndex == -1){
+          this.clickShortcutItem(menu)
+        }else{
+          this.menuList[this.menuIndex].backgroundColor = 'rgba(225,225,225,0.5)'
+        }
+        
+      }
+    },
+    // 点击弹出窗页面叉号删去小图标
+    closeDialogWindow(imgUrl){
+      this.getMenuItem(imgUrl)
+      this.menuList.splice(this.menuIndex,1)
+      if(!this.menuList.length){
+        this.isHaveMenuItem = false
+      }else{
+        let hasCheckedMenu = this.menuList.some(item=>{
+          return item.backgroundColor == 'rgba(225,225,225,0.5)' 
+        })
+        if (!hasCheckedMenu){
+          this.menuList[this.menuList.length - 1].backgroundColor = 'rgba(225,225,225,0.5)'
         }
-      ]
+      }
+    },
+    // 通过imgUrl获取对应的小图标下标
+    getMenuItem(imgUrl){
+      this.menuIndex = this.menuList.findIndex(item =>{
+        return item.imgUrl === imgUrl
+      })
     }
   },
   name:'Menu',
+  
 
 }
 </script>

src/component/Desktop/Shortcut/index.vue

@@ -1,82 +1,97 @@
 <template>
     <!-- 菜单区-->
-    <ul id="sds-desktop-shortcut" class="sds-desktop-shortcut">
-        <div class="sds-desktop-layout">
-            <li class="launch-icon icon-item" :class="launchIcon.spacialCls" :aria-label="launchIcon.ariaLabel" tabindex="0" v-for="launchIcon in launchIconList" :key="launchIcon.id">
-                <div class="image" :style="{backgroundImage:`url(${launchIcon.imgUrl})`}">
-                    <div class="sds-application-notify-badge-num-wrap">
-                        <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
-                    </div>
-                </div>
-                <div class="text">{{launchIcon.ariaLabel}}</div>
-
-            </li>
-            <!-- 
-                <li class="launch-icon icon-item controlCenter" aria-label="控制面板">
-                    <div class="image" style="background-image: url(../../../public//image/index/controlCenter.png)">
+    <div>
+        <ul id="sds-desktop-shortcut" class="sds-desktop-shortcut">
+            <div class="sds-desktop-layout">
+                <li class="launch-icon icon-item" :class="detailMessage.spacialCls" tabindex="0" 
+                v-for="(detailMessage,detailMessageIndex) in shortcutDetail.detailMessageList" :key="detailMessage.id"
+                @click="clickShortcutItem(detailMessageIndex,detailMessage.spacialCls,detailMessage.titleImgUrl)">
+                    <div class="image" :style="{backgroundImage:`url(${detailMessage.titleImgUrl})`}">
                         <div class="sds-application-notify-badge-num-wrap">
                             <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
                         </div>
                     </div>
-                    <div class="text">控制面板</div>
+                    <div class="text">{{detailMessage.title}}</div>
 
                 </li>
-                <li class="launch-icon icon-item file" aria-label="File Station">
-                    <div class="image" style="background-image: url(../../../public//image/index/file.png)">
-                        <div class="sds-application-notify-badge-num-wrap">
-                            <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                <!-- 
+                    <li class="launch-icon icon-item controlCenter">
+                        <div class="image" style="background-image: url(../../../public//image/index/controlCenter.png)">
+                            <div class="sds-application-notify-badge-num-wrap">
+                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="text">File Station</div>
+                        <div class="text">控制面板</div>
 
-                </li>
-                <li class="launch-icon icon-item question" aria-label="DSM说明">
-                    <div class="image" style="background-image: url(../../../public//image/index/question.png)">
-                        <div class="sds-application-notify-badge-num-wrap">
-                            <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                    </li>
+                    <li class="launch-icon icon-item file">
+                        <div class="image" style="background-image: url(../../../public//image/index/file.png)">
+                            <div class="sds-application-notify-badge-num-wrap">
+                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="text">DSM 说明</div>
+                        <div class="text">File Station</div>
 
-                </li>
-            -->
-        </div>
-    </ul>
+                    </li>
+                    <li class="launch-icon icon-item question">
+                        <div class="image" style="background-image: url(../../../public//image/index/question.png)">
+                            <div class="sds-application-notify-badge-num-wrap">
+                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
+                            </div>
+                        </div>
+                        <div class="text">DSM 说明</div>
+
+                    </li>
+                -->
+            </div>
+        </ul>
+        <ResizablePinned></ResizablePinned>
+    </div>
 </template>
 
 <script>
+import ResizablePinned from './ResizablePinned'
 export default {
   data() {
     return {
-        launchIconList:[
-            {
-                id:'0',
-                spacialCls:'tjCenter',
-                ariaLabel:'套件中心',
-                imgUrl:'../../../../public/image/index/tjCenter.png'
-            },
-            {
-                id:'1',
-                spacialCls:'controlCenter',
-                ariaLabel:'套件中心',
-                imgUrl:'../../../../public/image/index/controlCenter.png'
-            },
-            {
-                id:'2',
-                spacialCls:'file',
-                ariaLabel:'File Station',
-                imgUrl:'../../../../public/image/index/file.png'
-            },
-            {
-                id:'3',
-                spacialCls:'question',
-                ariaLabel:'DSM 说明',
-                imgUrl:'../../../../public/image/index/question.png'
-            }
-        ]
+        shortcutDetail:{
+            detailMessageList: [
+                {
+                    id:'0',
+                    title:'套件中心',
+                    spacialCls:'tjCenter',
+                    titleImgUrl:'../../../../public/image/index/tjCenter.png'
+                },
+                {
+                    id:'1',
+                    title:'控制中心',
+                    spacialCls:'controlCenter',
+                    titleImgUrl:'../../../../public/image/index/controlCenter.png'
+                },
+                {
+                    id:'2',
+                    title:'File Station',
+                    spacialCls:'file',
+                    titleImgUrl:'../../../../public/image/index/file.png'
+                },
+                {
+                    id:'3',
+                    title:'DSM 说明',
+                    spacialCls:'question',
+                    titleImgUrl:'../../../../public/image/index/question.png'
+                }
+            ],
+        },
     }
-  },
+  }, 
+  methods: {
+    clickShortcutItem(detailMessageIndex,spacialCls,imgUrl){
+        let obj = {detailMessageIndex,spacialCls,imgUrl}
+        this.$bus.emit('clickShortcutItem',obj)  
+    }
+}, 
   components:{
+      ResizablePinned 
   },
   name:'Shortcut',
 

src/component/Header/index.vue

@@ -2,8 +2,8 @@
     <!-- 头部 -->
     <div class="taskbar-wrapper">
         <div class="taskbar-left-wrapper">
-            <div class="show-all-button" aria-label="显示桌面"></div>
-            <div class="start-button" aria-label="主菜单">
+            <div class="show-all-button"></div>
+            <div class="start-button">
                 <button class="start-button-img">
                     <div class="sds-notify-badge-num"></div>
                 </button>

src/main.js

@@ -2,4 +2,5 @@ import { createApp } from 'vue';
 import App from './App.vue'
 const app = createApp(App);
 app.mount("#root");
-
+// import mitt from "mitt"
+// app.config.globalProperties.$bus = mitt();

yarn.lock

@@ -884,6 +884,11 @@ minimist@^1.2.6:
   resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+mitt@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
+  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
+
 mkdirp@^0.5.1:
   version "0.5.6"
   resolved "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"