style: 优化按钮禁用态与主题入口并将设置移至侧栏底部

src/components/ui/ThemeToggle.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed, h, ref } from 'vue'
+import { NButton, NDropdown, NTooltip } from 'naive-ui'
+import { Monitor, Moon, Sun } from '@lucide/vue'
+import type { ThemePreference } from '../../composables/useTheme'
+
+/** 图标表示用户偏好；保留系统跟随选项，不以简单二态切换覆盖偏好。 */
+const preference = defineModel<ThemePreference>({ required: true })
+const open = ref(false)
+const modes = [
+    { key: 'light', label: '浅色模式', icon: Sun },
+    { key: 'dark', label: '暗黑模式', icon: Moon },
+    { key: 'system', label: '跟随系统', icon: Monitor }
+] as const
+const current = computed(() => modes.find(mode => mode.key === preference.value) ?? modes[2])
+const options = modes.map(mode => ({ ...mode, icon: () => h(mode.icon, { size: 16 }) }))
+
+/** Dropdown 的键类型较宽，只接收受支持的主题值。 */
+function selectTheme(key: string | number) {
+    if (key === 'light' || key === 'dark' || key === 'system') preference.value = key
+}
+</script>
+
+<template>
+    <NDropdown v-model:show="open" trigger="click" :value="preference" :options="options" @select="selectTheme">
+        <NTooltip :disabled="open">
+            <template #trigger>
+                <NButton
+                    quaternary
+                    circle
+                    class="theme-toggle"
+                    :aria-label="`主题模式：${current.label}`"
+                    aria-haspopup="menu"
+                    :aria-expanded="open"
+                >
+                    <component :is="current.icon" :size="18" aria-hidden="true" />
+                </NButton>
+            </template>
+            {{ current.label }} · 切换主题
+        </NTooltip>
+    </NDropdown>
+</template>