feat(components): 优化布局组件和工具函数

- 更新布局组件(layouts/components/)
  * 优化设置抽屉组件(SettingDrawer.vue)
  * 完善头部通知组件(Notices.vue)
  * 改进用户中心组件(UserCenter.vue)
  * 优化标签栏组件(TabBar.vue)

- 完善工具指令和Hooks
  * 更新复制指令(directives/copy.ts)
  * 优化标签滚动Hook(hooks/useTabScroll.ts)

提升用户界面交互体验

src/directives/copy.ts

@@ -1,5 +1,6 @@
 import type { App, Directive } from 'vue'
 import { $t } from '@/utils'
+import { coiMsgError, coiMsgSuccess } from '@/utils/coi'
 
 interface CopyHTMLElement extends HTMLElement {
   _copyText: string
@@ -11,12 +12,12 @@ export function install(app: App) {
 
   function clipboardEnable() {
     if (!isSupported.value) {
-      window.$message.error($t('components.copyText.unsupportedError'))
+      coiMsgError($t('components.copyText.unsupportedError'))
       return false
     }
 
     if (permissionWrite.value === 'denied') {
-      window.$message.error($t('components.copyText.unpermittedError'))
+      coiMsgError($t('components.copyText.unpermittedError'))
       return false
     }
     return true
@@ -26,7 +27,7 @@ export function install(app: App) {
     if (!clipboardEnable())
       return
     copy(this._copyText)
-    window.$message.success($t('components.copyText.message'))
+    coiMsgSuccess($t('components.copyText.message'))
   }
 
   function updataClipboard(el: CopyHTMLElement, text: string) {

src/hooks/useTabScroll.ts

@@ -1,5 +1,6 @@
 import type { NScrollbar } from 'naive-ui'
-import { ref, type Ref, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
+import type { Ref } from 'vue'
 import { throttle } from 'radash'
 
 export function useTabScroll(currentTabPath: Ref<string>) {

src/layouts/components/common/SettingDrawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAppStore } from '@/store'
+import { coiMsgBox, coiMsgSuccess } from '@/utils/coi'
 import LayoutSelector from './LayoutSelector.vue'
 
 const appStore = useAppStore()
@@ -58,17 +59,21 @@ const palette = [
   '#4b4b4b',
 ]
 
-function resetSetting() {
+async function resetSetting() {
-  window.$dialog.warning({
+  try {
-    title: t('app.resetSettingTitle'),
+    await coiMsgBox(
-    content: t('app.resetSettingContent'),
+      t('app.resetSettingContent'),
-    positiveText: t('common.confirm'),
+      t('app.resetSettingTitle'),
-    negativeText: t('common.cancel'),
+      t('common.confirm'),
-    onPositiveClick: () => {
+      t('common.cancel'),
-      appStore.resetAlltheme()
+      'warning',
-      window.$message.success(t('app.resetSettingMeaasge'))
+    )
-    },
+    appStore.resetAlltheme()
-  })
+    coiMsgSuccess(t('app.resetSettingMeaasge'))
+  }
+  catch {
+    // 用户取消操作，不需要处理
+  }
 }
 </script>
 

src/layouts/components/header/Notices.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { group } from 'radash'
+import { coiMsgSuccess } from '@/utils/coi'
 import NoticeList from '../common/NoticeList.vue'
 
 const MassageData = ref<Entity.Message[]>([
@@ -84,7 +85,7 @@ function handleRead(id: number) {
   const data = MassageData.value.find(i => i.id === id)
   if (data)
     data.isRead = true
-  window.$message.success(`id: ${id}`)
+  coiMsgSuccess(`id: ${id}`)
 }
 const massageCount = computed(() => {
   return MassageData.value.filter(i => !i.isRead).length

src/layouts/components/header/UserCenter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/store'
 import { renderIcon } from '@/utils/icon'
+import { coiMsgBox } from '@/utils/coi'
 import IconBookOpen from '~icons/icon-park-outline/book-open'
 import IconGithub from '~icons/icon-park-outline/github'
 import IconLogout from '~icons/icon-park-outline/logout'
@@ -48,17 +49,21 @@ const options = computed(() => {
     },
   ]
 })
-function handleSelect(key: string | number) {
+async function handleSelect(key: string | number) {
   if (key === 'loginOut') {
-    window.$dialog?.info({
+    try {
-      title: t('app.loginOutTitle'),
+      await coiMsgBox(
-      content: t('app.loginOutContent'),
+        t('app.loginOutContent'),
-      positiveText: t('common.confirm'),
+        t('app.loginOutTitle'),
-      negativeText: t('common.cancel'),
+        t('common.confirm'),
-      onPositiveClick: () => {
+        t('common.cancel'),
-        logout()
+        'info',
-      },
+      )
-    })
+      logout()
+    }
+    catch {
+      // 用户取消操作，不需要处理
+    }
   }
   if (key === 'userCenter')
     router.push('/userCenter')

src/layouts/components/tab/TabBar.vue

@@ -102,7 +102,6 @@ function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) {
 function onClickoutside() {
   showDropdown.value = false
 }
-
 </script>
 
 <template>