refactor: 消息总线

web/package.json

@@ -38,6 +38,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^3.5.0",
     "marked": "^14.1.2",
+    "mitt": "^3.0.1",
     "pinia": "^2.2.4",
     "pinia-plugin-persistedstate": "^4.1.1",
     "remove": "^0.1.5",

web/pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       marked:
         specifier: ^14.1.2
         version: 14.1.3
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
       pinia:
         specifier: ^2.2.4
         version: 2.2.4(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
@@ -2431,6 +2434,9 @@ packages:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -5889,6 +5895,8 @@ snapshots:
       minipass: 3.3.6
       yallist: 4.0.0
 
+  mitt@3.0.1: {}
+
   mkdirp@1.0.4: {}
 
   mlly@1.7.2:

web/src/utils/common/naiveTools.ts

@@ -1,4 +1,5 @@
 import { useThemeStore } from '@/store'
+import mitt from 'mitt'
 import * as NaiveUI from 'naive-ui'
 
 export async function setupNaiveDiscreteApi() {
@@ -16,4 +17,5 @@ export async function setupNaiveDiscreteApi() {
   window.$notification = notification
   window.$message = message
   window.$dialog = dialog
+  window.$bus = mitt()
 }

web/src/utils/event/index.ts

@@ -1,35 +0,0 @@
-import { reactive } from 'vue'
-
-type EventCallback<T = any> = (payload: T) => void
-
-interface EventBusInterface {
-  events: Record<string, EventCallback[]>
-  emit<T = any>(event: string, data?: T): void
-  on<T = any>(event: string, callback: EventCallback<T>): void
-  off<T = any>(event: string, callback: EventCallback<T>): void
-}
-
-const EventBus: EventBusInterface = reactive({
-  events: {} as Record<string, EventCallback[]>,
-  emit<T>(event: string, data?: T): void {
-    if (this.events[event]) {
-      this.events[event].forEach((callback) => callback(data))
-    }
-  },
-  on<T>(event: string, callback: EventCallback<T> = () => {}): void {
-    if (!this.events[event]) {
-      this.events[event] = []
-    }
-    this.events[event].push(callback)
-  },
-  off<T>(event: string, callback: EventCallback<T>): void {
-    if (this.events[event]) {
-      const index = this.events[event].indexOf(callback)
-      if (index > -1) {
-        this.events[event].splice(index, 1)
-      }
-    }
-  }
-})
-
-export default EventBus

web/src/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './auth'
 export * from './common'
-export * from './event'
 export * from './file'
 export * from './http'
 export * from './storage'

web/src/views/file/CompressModal.vue

@@ -3,7 +3,6 @@ import { NButton, NInput } from 'naive-ui'
 
 import api from '@/api/panel/file'
 import { generateRandomString, getBase } from '@/utils'
-import EventBus from '@/utils/event'
 
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const path = defineModel<string>('path', { type: String, required: true })
@@ -43,7 +42,7 @@ const handleArchive = async () => {
     })
   message?.destroy()
   loading.value = false
-  EventBus.emit('file:refresh')
+  window.$bus.emit('file:refresh')
 }
 
 onMounted(() => {

web/src/views/file/ListTable.vue

@@ -6,7 +6,6 @@ import type { RowData } from 'naive-ui/es/data-table/src/interface'
 
 import file from '@/api/panel/file'
 import TheIcon from '@/components/custom/TheIcon.vue'
-import EventBus from '@/utils/event'
 import { checkName, checkPath, getExt, getFilename, getIconByExt, isCompress } from '@/utils/file'
 import EditModal from '@/views/file/EditModal.vue'
 import type { Marked } from '@/views/file/types'
@@ -233,7 +232,7 @@ const columns: DataTableColumns<RowData> = [
                 onPositiveClick: () => {
                   file.delete(row.full).then(() => {
                     window.$message.success('删除成功')
-                    EventBus.emit('file:refresh')
+                    window.$bus.emit('file:refresh')
                   })
                 },
                 onNegativeClick: () => {}
@@ -389,7 +388,7 @@ const handleRename = () => {
   file.move(source, target).then(() => {
     window.$message.success('重命名成功')
     renameModal.value = false
-    EventBus.emit('file:refresh')
+    window.$bus.emit('file:refresh')
   })
 }
 
@@ -411,7 +410,7 @@ const handleUnCompress = () => {
       message?.destroy()
       window.$message.success('解压成功')
       unCompressModal.value = false
-      EventBus.emit('file:refresh')
+      window.$bus.emit('file:refresh')
     })
     .catch(() => {
       message?.destroy()
@@ -476,7 +475,7 @@ const handleSelect = (key: string) => {
     case 'delete':
       file.delete(selectedRow.value.full).then(() => {
         window.$message.success('删除成功')
-        EventBus.emit('file:refresh')
+        window.$bus.emit('file:refresh')
       })
       break
   }
@@ -517,15 +516,15 @@ onMounted(() => {
     path,
     () => {
       handlePageChange(1)
-      EventBus.emit('push-history', path.value)
+      window.$bus.emit('push-history', path.value)
     },
     { immediate: true }
   )
-  EventBus.on('file:refresh', handleRefresh)
+  window.$bus.on('file:refresh', handleRefresh)
 })
 
 onUnmounted(() => {
-  EventBus.off('file:refresh', handleRefresh)
+  window.$bus.off('file:refresh', handleRefresh)
 })
 </script>
 

web/src/views/file/PathInput.vue

@@ -2,8 +2,8 @@
 import type { InputInst } from 'naive-ui'
 import { onUnmounted } from 'vue'
 
-import EventBus from '@/utils/event'
 import { checkPath } from '@/utils/file'
+import SearchModal from '@/views/file/SearchModal.vue'
 
 const path = defineModel<string>('path', { type: String, required: true })
 const isInput = ref(false)
@@ -13,7 +13,7 @@ const input = ref('www')
 const history: string[] = []
 let current = -1
 
-const searchModal = ref(false)
+const searchShow = ref(false)
 const search = ref({
   keyword: '',
   sub: false
@@ -38,7 +38,7 @@ const handleBlur = () => {
 }
 
 const handleRefresh = () => {
-  EventBus.emit('file:refresh')
+  window.$bus.emit('file:refresh')
 }
 
 const handleUp = () => {
@@ -90,7 +90,7 @@ const handlePushHistory = (path: string) => {
 }
 
 const handleSearch = () => {
-  searchModal.value = true
+  searchShow.value = true
 }
 
 watch(
@@ -102,11 +102,11 @@ watch(
 )
 
 onMounted(() => {
-  EventBus.on('push-history', handlePushHistory)
+  window.$bus.on('push-history', handlePushHistory)
 })
 
 onUnmounted(() => {
-  EventBus.off('push-history', handlePushHistory)
+  window.$bus.off('push-history', handlePushHistory)
 })
 </script>
 
@@ -158,7 +158,7 @@ onUnmounted(() => {
     </n-input-group>
   </n-flex>
   <search-modal
-    v-model:show="searchModal"
+    v-model:show="searchShow"
     v-model:path="path"
     v-model:keyword="search.keyword"
     v-model:sub="search.sub"

web/src/views/file/PermissionModal.vue

@@ -2,7 +2,6 @@
 import { NButton, NInput } from 'naive-ui'
 
 import file from '@/api/panel/file'
-import EventBus from '@/utils/event'
 
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const selected = defineModel<string[]>('selected', { type: Array, required: true })
@@ -29,7 +28,7 @@ const handlePermission = async () => {
         window.$message.error(`修改 ${path} 失败`)
       })
   }
-  EventBus.emit('file:refresh')
+  window.$bus.emit('file:refresh')
 }
 
 const calculateOctal = (permissions: string[]) => {

web/src/views/file/SearchModal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import file from '@/api/panel/file'
-import EventBus from '@/utils/event'
 import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui'
 
 import type { DataTableColumns } from 'naive-ui'
@@ -75,7 +74,7 @@ const columns: DataTableColumns<RowData> = [
                 onPositiveClick: () => {
                   file.delete(row.full).then(() => {
                     window.$message.success('删除成功')
-                    EventBus.emit('file:refresh')
+                    window.$bus.emit('file:refresh')
                   })
                 },
                 onNegativeClick: () => {}

web/src/views/file/ToolBar.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { NButton, NSpace } from 'naive-ui'
-
 import file from '@/api/panel/file'
-import EventBus from '@/utils/event'
 import { checkName, lastDirectory } from '@/utils/file'
 import UploadModal from '@/views/file/UploadModal.vue'
 import type { Marked } from '@/views/file/types'
@@ -41,7 +38,7 @@ const handleCreate = () => {
   file.create(fullPath, createModel.value.dir).then(() => {
     create.value = false
     window.$message.success('创建成功')
-    EventBus.emit('file:refresh')
+    window.$bus.emit('file:refresh')
   })
 }
 
@@ -56,7 +53,7 @@ const handleDownload = () => {
     .then(() => {
       download.value = false
       window.$message.success('下载任务创建成功')
-      EventBus.emit('file:refresh')
+      window.$bus.emit('file:refresh')
     })
 }
 
@@ -97,12 +94,12 @@ const handlePaste = async () => {
     if (type === 'copy') {
       await file.copy(source, target).then(() => {
         window.$message.success(`复制 ${source} 到 ${target} 成功`)
-        EventBus.emit('file:refresh')
+        window.$bus.emit('file:refresh')
       })
     } else {
       await file.move(source, target).then(() => {
         window.$message.success(`移动 ${source} 到 ${target} 成功`)
-        EventBus.emit('file:refresh')
+        window.$bus.emit('file:refresh')
       })
     }
   }
@@ -119,7 +116,7 @@ const bulkDelete = () => {
   for (const path of selected.value) {
     file.delete(path).then(() => {
       window.$message.success(`删除 ${path} 成功`)
-      EventBus.emit('file:refresh')
+      window.$bus.emit('file:refresh')
     })
   }
 }

web/src/views/file/UploadModal.vue

@@ -2,7 +2,6 @@
 import type { UploadCustomRequestOptions } from 'naive-ui'
 
 import api from '@/api/panel/file'
-import EventBus from '@/utils/event'
 
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const path = defineModel<string>('path', { type: String, required: true })
@@ -15,7 +14,7 @@ const uploadRequest = ({ file, onFinish, onError, onProgress }: UploadCustomRequ
     .upload(`${path.value}/${file.name}`, formData, onProgress)
     .then(() => {
       window.$message.success(`上传 ${file.name} 成功`)
-      EventBus.emit('file:refresh')
+      window.$bus.emit('file:refresh')
       onFinish()
     })
     .catch(() => {

web/types/global.d.ts

@@ -3,4 +3,5 @@ interface Window {
   $dialog: import('naive-ui').DialogProviderInst
   $message: import('naive-ui').MessageProviderInst
   $notification: import('naive-ui').NotificationProviderInst
+  $bus: import('mitt').Emitter
 }