🎨加了一些组件数据监听优化

web/package.json

@@ -41,6 +41,7 @@
     "echarts": "^5.4.3",
     "lodash-es": "^4.17.21",
     "md-editor-v3": "^4.7.0",
+    "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.6",
     "vite": "^4.4.11",

web/pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       md-editor-v3:
         specifier: ^4.7.0
         version: 4.7.0(@codemirror/state@6.2.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(vue@3.3.4)
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
       mockjs:
         specifier: ^1.1.0
         version: 1.1.0
@@ -3014,6 +3017,9 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mixin-deep@1.3.2:
     resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
     engines: {node: '>=0.10.0'}
@@ -7599,6 +7605,8 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  mitt@3.0.1: {}
+
   mixin-deep@1.3.2:
     dependencies:
       for-in: 1.0.2

web/src/layout/components/header/components/Export.vue

@@ -47,6 +47,10 @@
 <script setup>
 import api from '@/api/setting'
 import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
+import { router } from '@/router'
+import event from '@/utils/event/event'
+
+const { $bus } = event();
 
 const showImportUploader = ref(false)
 const uploadRef = ref(null)
@@ -100,6 +104,14 @@ function customRequest(file) {
   }).then(response => {
     if (response.data.code === 200) {
       showImportUploader.value = false;
+      switch (router.options.history.location) {
+        case "/client":
+          $bus.emit('refreshClients',true);
+          break;
+        case "/setting":
+          $bus.emit('refreshSetting',true)
+          break;
+      }
     } else {
       $message.error(response.data.message);
     }

web/src/layout/components/header/components/UserAvatar.vue

@@ -72,8 +72,11 @@
 import { useUserStore } from '@/store'
 import { renderIcon } from '@/utils'
 import api from '@/api/user'
+import event from '@/utils/event/event'
+import { router } from '@/router'
 
 const userStore = useUserStore()
+const { $bus } = event();
 
 const options = [
   {
@@ -212,6 +215,9 @@ async function updateInfo() {
       infoFormModel.value = ref(null)
       showInfoModel.value = false
       await useUserStore().getUserInfo()
+      if (router.options.history.location === '/user') {
+        $bus.emit('refreshUserInfo',true);
+      }
     }
   })
 }

web/src/main.js

@@ -9,10 +9,14 @@ import { setupRouter } from '@/router'
 import { setupStore } from '@/store'
 import App from './App.vue'
 import { setupNaiveDiscreteApi } from './utils'
+import mitt from 'mitt'
+
+const EventMitt = mitt();
 
 async function setupApp() {
   const app = createApp(App)
   setupStore(app)
+  app.config.globalProperties.$bus = EventMitt;
   await setupRouter(app)
   app.mount('#app')
   setupNaiveDiscreteApi()

web/src/utils/event/event.js

@@ -0,0 +1,7 @@
+import { getCurrentInstance } from "vue";
+
+export default function event() {
+  const instance = getCurrentInstance();
+  const globalProperties = instance?.appContext.config.globalProperties;
+  return { ...globalProperties };
+}

web/src/utils/event/index.js

@@ -0,0 +1 @@
+export * from './event'

web/src/utils/index.js

@@ -2,3 +2,4 @@ export * from './common'
 export * from './storage'
 export * from './http'
 export * from './auth'
+export * from './event'

web/src/views/client/index.vue

@@ -335,6 +335,9 @@ import { NButton } from 'naive-ui'
 import { debounce, ellipsis } from '@/utils'
 import clientApi from '@/views/client/api'
 import QueryBar from '@/components/query-bar/QueryBar.vue'
+import event from '@/utils/event/event'
+
+const { $bus } = event();
 
 const selOptions = [
   {
@@ -658,6 +661,13 @@ function search() {
   getClientList()
 }
 
+// 监听事件
+$bus.on("refreshClients",value => {
+  if (value) {
+    getClientList();
+  }
+})
+
 getClientList()
 </script>
 <style lang="scss">

web/src/views/setting/index.vue

@@ -209,6 +209,10 @@ import AppPage from '@/components/page/AppPage.vue'
 import api from '@/views/setting/api'
 import { NButton } from 'naive-ui'
 import { renderIcon } from '@/utils'
+import event from '@/utils/event/event'
+
+const { $bus } = event();
+const tabCode = ref("")
 
 // 表头
 const tableColumns = [
@@ -401,12 +405,15 @@ function tabChange(code) {
   switch (code) {
     case "Server":
       getServerConfig()
+      tabCode.value = "Server"
       break;
     case "Global":
       getGlobalConfig()
+      tabCode.value = "Global"
       break;
     case "Other":
       allSetting()
+      tabCode.value = "Other"
       break;
   }
 }
@@ -480,6 +487,22 @@ async function addSetting() {
   }
 }
 
+$bus.on("refreshSetting",value => {
+  if (value) {
+    if (tabCode.value === "" || tabCode.value === undefined) {
+      getServerConfig()
+    } else {
+      switch (tabCode.value) {
+        case "Server":
+          getServerConfig()
+          break;
+        case "Global":
+          getGlobalConfig()
+          break;
+      }
+    }
+  }
+})
 getServerConfig()
 </script>
 <style lang="scss">

web/src/views/user/index.vue

@@ -106,6 +106,9 @@ import userApi from '@/api/user'
 import { NAvatar,NTag,NButton } from 'naive-ui'
 import { renderIcon } from '@/utils'
 import { useUserStore } from '@/store'
+import event from '@/utils/event/event'
+
+const { $bus } = event();
 
 const infoFormRef = ref()
 
@@ -400,6 +403,12 @@ function addUser() {
   showInfoModel.value = true
 }
 
+$bus.on('refreshUserInfo',value => {
+  if (value) {
+    getUserList();
+  }
+})
+
 getUserList()
 </script>
 <style></style>