From 72540884fa1ca27199ad196b461f19e8af021751 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Sun, 6 Jul 2025 00:59:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E4=BC=98=E5=8C=96=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E7=BB=84=E4=BB=B6=E5=92=8C=E5=B7=A5=E5=85=B7=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

提升用户界面交互体验
---
 src/directives/copy.ts                        |  7 ++---
 src/hooks/useTabScroll.ts                     |  3 ++-
 .../components/common/SettingDrawer.vue       | 27 +++++++++++--------
 src/layouts/components/header/Notices.vue     |  3 ++-
 src/layouts/components/header/UserCenter.vue  | 25 ++++++++++-------
 src/layouts/components/tab/TabBar.vue         |  1 -
 6 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/directives/copy.ts b/src/directives/copy.ts
index 76fd5db..783435b 100644
--- a/src/directives/copy.ts
+++ b/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) {
diff --git a/src/hooks/useTabScroll.ts b/src/hooks/useTabScroll.ts
index 4923c36..f40e364 100644
--- a/src/hooks/useTabScroll.ts
+++ b/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>) {
diff --git a/src/layouts/components/common/SettingDrawer.vue b/src/layouts/components/common/SettingDrawer.vue
index 96e93ee..b50d5b4 100644
--- a/src/layouts/components/common/SettingDrawer.vue
+++ b/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() {
-  window.$dialog.warning({
-    title: t('app.resetSettingTitle'),
-    content: t('app.resetSettingContent'),
-    positiveText: t('common.confirm'),
-    negativeText: t('common.cancel'),
-    onPositiveClick: () => {
-      appStore.resetAlltheme()
-      window.$message.success(t('app.resetSettingMeaasge'))
-    },
-  })
+async function resetSetting() {
+  try {
+    await coiMsgBox(
+      t('app.resetSettingContent'),
+      t('app.resetSettingTitle'),
+      t('common.confirm'),
+      t('common.cancel'),
+      'warning',
+    )
+    appStore.resetAlltheme()
+    coiMsgSuccess(t('app.resetSettingMeaasge'))
+  }
+  catch {
+    // 用户取消操作，不需要处理
+  }
 }
 </script>
 
diff --git a/src/layouts/components/header/Notices.vue b/src/layouts/components/header/Notices.vue
index c068621..fa851f2 100644
--- a/src/layouts/components/header/Notices.vue
+++ b/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
diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue
index 50f3350..c3df11e 100644
--- a/src/layouts/components/header/UserCenter.vue
+++ b/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({
-      title: t('app.loginOutTitle'),
-      content: t('app.loginOutContent'),
-      positiveText: t('common.confirm'),
-      negativeText: t('common.cancel'),
-      onPositiveClick: () => {
-        logout()
-      },
-    })
+    try {
+      await coiMsgBox(
+        t('app.loginOutContent'),
+        t('app.loginOutTitle'),
+        t('common.confirm'),
+        t('common.cancel'),
+        'info',
+      )
+      logout()
+    }
+    catch {
+      // 用户取消操作，不需要处理
+    }
   }
   if (key === 'userCenter')
     router.push('/userCenter')
diff --git a/src/layouts/components/tab/TabBar.vue b/src/layouts/components/tab/TabBar.vue
index 3a087ca..b20339d 100644
--- a/src/layouts/components/tab/TabBar.vue
+++ b/src/layouts/components/tab/TabBar.vue
@@ -102,7 +102,6 @@ function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) {
 function onClickoutside() {
   showDropdown.value = false
 }
-
 </script>
 
 <template>