From 6f82242d92d65fafe984bc4550b7f49be8f6ce7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <i@haozi.net>
Date: Sat, 19 Oct 2024 21:01:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/layout/header/IndexView.vue            |  4 +++-
 .../layout/header/components/FullScreen.vue    | 13 +++++++++----
 .../layout/header/components/MenuCollapse.vue  | 13 +++++++++----
 .../layout/header/components/ReloadPage.vue    | 11 ++++++++---
 web/src/layout/header/components/ThemeMode.vue | 13 +++++++++----
 .../layout/header/components/ThemeSetting.vue  | 18 ++++++++++++++++++
 .../layout/header/components/UserAvatar.vue    |  2 +-
 7 files changed, 57 insertions(+), 17 deletions(-)
 create mode 100644 web/src/layout/header/components/ThemeSetting.vue

diff --git a/web/src/layout/header/IndexView.vue b/web/src/layout/header/IndexView.vue
index 4bc124a6..483bc439 100644
--- a/web/src/layout/header/IndexView.vue
+++ b/web/src/layout/header/IndexView.vue
@@ -6,6 +6,7 @@ import ThemeMode from './components/ThemeMode.vue'
 import UserAvatar from './components/UserAvatar.vue'
 
 import MenuCollapse from '@/layout/header/components/MenuCollapse.vue'
+import ThemeSetting from '@/layout/header/components/ThemeSetting.vue'
 import { useThemeStore } from '@/store'
 
 const themeStore = useThemeStore()
@@ -20,8 +21,9 @@ const themeStore = useThemeStore()
     <span v-if="!themeStore.isMobile && themeStore.tab.visible" mx-6 opacity-20>|</span>
     <div ml-auto flex flex-shrink-0 items-center px-12>
       <ReloadPage />
-      <ThemeMode />
       <FullScreen />
+      <ThemeMode />
+      <ThemeSetting />
       <UserAvatar />
     </div>
   </div>
diff --git a/web/src/layout/header/components/FullScreen.vue b/web/src/layout/header/components/FullScreen.vue
index 8f000f66..32abd418 100644
--- a/web/src/layout/header/components/FullScreen.vue
+++ b/web/src/layout/header/components/FullScreen.vue
@@ -5,8 +5,13 @@ const { isFullscreen, toggle } = useFullscreen()
 </script>
 
 <template>
-  <n-icon mr-20 cursor-pointer size="18" @click="toggle">
-    <icon-ant-design:fullscreen-exit-outlined v-if="isFullscreen" />
-    <icon-ant-design:fullscreen-outlined v-else />
-  </n-icon>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-icon mr-20 cursor-pointer size="20" @click="toggle">
+        <icon-ant-design:fullscreen-exit-outlined v-if="isFullscreen" />
+        <icon-ant-design:fullscreen-outlined v-else />
+      </n-icon>
+    </template>
+    全屏显示
+  </n-tooltip>
 </template>
diff --git a/web/src/layout/header/components/MenuCollapse.vue b/web/src/layout/header/components/MenuCollapse.vue
index a940aca1..f81ebe0a 100644
--- a/web/src/layout/header/components/MenuCollapse.vue
+++ b/web/src/layout/header/components/MenuCollapse.vue
@@ -5,8 +5,13 @@ const themeStore = useThemeStore()
 </script>
 
 <template>
-  <n-icon cursor-pointer size="20" @click="themeStore.toggleCollapsed()">
-    <icon-mdi:format-indent-increase v-if="themeStore.sider.collapsed" />
-    <icon-mdi:format-indent-decrease v-else />
-  </n-icon>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-icon cursor-pointer size="20" @click="themeStore.toggleCollapsed()">
+        <icon-mdi:format-indent-increase v-if="themeStore.sider.collapsed" />
+        <icon-mdi:format-indent-decrease v-else />
+      </n-icon>
+    </template>
+    菜单缩放
+  </n-tooltip>
 </template>
diff --git a/web/src/layout/header/components/ReloadPage.vue b/web/src/layout/header/components/ReloadPage.vue
index 287383cc..a5a57632 100644
--- a/web/src/layout/header/components/ReloadPage.vue
+++ b/web/src/layout/header/components/ReloadPage.vue
@@ -9,7 +9,12 @@ const handleReloadPage = () => {
 </script>
 
 <template>
-  <n-icon mr-20 cursor-pointer size="18" @click="handleReloadPage">
-    <icon-mdi-refresh />
-  </n-icon>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-icon mr-20 cursor-pointer size="20" @click="handleReloadPage">
+        <icon-mdi-refresh />
+      </n-icon>
+    </template>
+    刷新标签页
+  </n-tooltip>
 </template>
diff --git a/web/src/layout/header/components/ThemeMode.vue b/web/src/layout/header/components/ThemeMode.vue
index 0d37608f..d10c14f7 100644
--- a/web/src/layout/header/components/ThemeMode.vue
+++ b/web/src/layout/header/components/ThemeMode.vue
@@ -5,8 +5,13 @@ const theme = useThemeStore()
 </script>
 
 <template>
-  <n-icon mr-20 cursor-pointer size="18" @click="theme.toggleDarkMode">
-    <icon-mdi-moon-waning-crescent v-if="theme.darkMode" />
-    <icon-mdi-white-balance-sunny v-else />
-  </n-icon>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-icon mr-20 cursor-pointer size="20" @click="theme.toggleDarkMode">
+        <icon-mdi-moon-waning-crescent v-if="theme.darkMode" />
+        <icon-mdi-white-balance-sunny v-else />
+      </n-icon>
+    </template>
+    切换主题
+  </n-tooltip>
 </template>
diff --git a/web/src/layout/header/components/ThemeSetting.vue b/web/src/layout/header/components/ThemeSetting.vue
new file mode 100644
index 00000000..a51e9422
--- /dev/null
+++ b/web/src/layout/header/components/ThemeSetting.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { useThemeStore } from '@/store'
+
+const themeStore = useThemeStore()
+</script>
+
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-color-picker
+        class="mr-16 h-24 w-24"
+        v-model:value="themeStore.primaryColor"
+        :render-label="() => ''"
+      />
+    </template>
+    设置主题色
+  </n-tooltip>
+</template>
diff --git a/web/src/layout/header/components/UserAvatar.vue b/web/src/layout/header/components/UserAvatar.vue
index 6ca99893..0480f583 100644
--- a/web/src/layout/header/components/UserAvatar.vue
+++ b/web/src/layout/header/components/UserAvatar.vue
@@ -50,7 +50,7 @@ const username = computed(() => {
 <template>
   <n-dropdown :options="options" @select="handleSelect">
     <div flex cursor-pointer items-center>
-      <span>{{ username }}</span>
+      <span text-16>{{ username }}</span>
     </div>
   </n-dropdown>
 </template>