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

src/App.vue

@@ -9,7 +9,7 @@ import {
     NLayoutHeader,
     NLayoutSider,
     NMenu,
-    NSelect,
+    NScrollbar,
     NTooltip,
     zhCN,
     dateZhCN,
@@ -30,6 +30,7 @@ import {
 } from '@lucide/vue'
 import { AppDialog } from './components/ui'
 import { useTheme } from './composables/useTheme'
+import ThemeToggle from './components/ui/ThemeToggle.vue'
 
 /** 应用外壳固定在视口内，业务数据仍由各工作区自行加载。 */
 const route = useRoute()
@@ -38,11 +39,6 @@ const settingsOpen = ref(false)
 const { preference, theme, overrides } = useTheme()
 const projectId = computed(() => String(route.params.projectId || ''))
 const apiBase = import.meta.env.VITE_API_BASE_URL || '/api'
-const themeOptions = [
-    { label: '浅色模式', value: 'light' },
-    { label: '暗黑模式', value: 'dark' },
-    { label: '跟随系统', value: 'system' }
-]
 const workflowItems = [
     ['create-drama', '剧本创作', FileText],
     ['breakdown', '剧本拆解', Layers],
@@ -90,19 +86,40 @@ const menuOptions = computed<MenuOption[]>(() => [
                 :collapsed-width="64"
                 :native-scrollbar="false"
                 class="admin-sider"
+                content-class="admin-sider-content"
             >
                 <RouterLink to="/projects" class="admin-brand" aria-label="短剧工作台首页">
                     <Clapperboard :size="24" /><span v-if="!collapsed"
                         >短剧工作台<small>SHORT DRAMA STUDIO</small></span
                     >
                 </RouterLink>
-                <NMenu
-                    :value="route.path"
-                    :options="menuOptions"
-                    :collapsed="collapsed"
-                    :collapsed-width="64"
-                    :collapsed-icon-size="19"
-                />
+                <NScrollbar class="admin-nav-scroll">
+                    <NMenu
+                        :value="route.path"
+                        :options="menuOptions"
+                        :collapsed="collapsed"
+                        :collapsed-width="64"
+                        :collapsed-icon-size="19"
+                    />
+                </NScrollbar>
+                <footer class="admin-sider-footer">
+                    <NTooltip placement="right" :disabled="!collapsed">
+                        <template #trigger>
+                            <NButton
+                                quaternary
+                                block
+                                class="admin-settings-button"
+                                :class="{ 'is-collapsed': collapsed }"
+                                aria-label="后端连接"
+                                @click="settingsOpen = true"
+                            >
+                                <template #icon><Settings2 :size="18" /></template>
+                                <span v-if="!collapsed">后端连接</span>
+                            </NButton>
+                        </template>
+                        后端连接
+                    </NTooltip>
+                </footer>
             </NLayoutSider>
             <NLayout class="admin-main">
                 <NLayoutHeader class="admin-topbar">
@@ -117,22 +134,7 @@ const menuOptions = computed<MenuOption[]>(() => [
                         </NButton>
                         <span class="truncate text-sm">{{ route.meta.title || '工作空间' }}</span>
                     </div>
-                    <div class="flex items-center gap-3">
-                        <NSelect
-                            v-model:value="preference"
-                            :options="themeOptions"
-                            :virtual-scroll="false"
-                            size="small"
-                            class="theme-select"
-                            aria-label="主题模式"
-                        />
-                        <NTooltip
-                            ><template #trigger
-                                ><NButton quaternary circle aria-label="后端连接" @click="settingsOpen = true"
-                                    ><Settings2 :size="18" /></NButton></template
-                            >后端连接</NTooltip
-                        >
-                    </div>
+                    <ThemeToggle v-model="preference" />
                 </NLayoutHeader>
                 <main id="main-content" tabindex="-1" class="admin-content"><RouterView /></main>
             </NLayout>