refactor(layout): 重构基础布局头部组件结构

src/layouts/base-layout/base-layout-header/components/ThemeSwitchButton.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const appStore = useAppStore();
+
+const themeLabels: Record<AppThemeMode, string> = {
+  light: '浅色',
+  dark: '深色',
+  system: '跟随系统',
+};
+</script>
+
+<template>
+  <NTooltip :disabled="appStore.isMobile" placement="bottom-end">
+    {{ themeLabels[appStore.themeMode] }}
+    <template #trigger>
+      <NButton quaternary @click="appStore.cycleTheme">
+        <icon-line-md:sunny-filled-loop-to-moon-filled-loop-transition
+          v-if="appStore.themeMode === 'light'"
+          w-4.5
+          h-4.5
+        />
+        <icon-line-md:moon-filled-to-sunny-filled-loop-transition
+          v-else-if="appStore.themeMode === 'dark'"
+          w-4.5
+          h-4.5
+        />
+        <icon-line-md:computer v-else w-4.5 h-4.5 />
+      </NButton>
+    </template>
+  </NTooltip>
+</template>