feat: 颜色选择器

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>

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>

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>

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>

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>

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>

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>