feat: 设置页官方化改造并升级 1.0.8

- 设置页改用 Halo 官方 VPageHeader / VCard / VDescription / VTag 组件
- 精简 variables.css 为设置页实际使用的变量
- 同步 README 更新日志与本地说明文档

ui/src/styles/variables.css

@@ -6,56 +6,14 @@
 /* 说明：data-halo-theme 为兼容性遗留标记，当前已无 CSS 消费方，保留给外部脚本与验证工具。 */
 /* ===== 浅色模式（Halo 默认，此处定义为显式回退） ===== */
 :root {
-  --halo-bg-body: oklch(97% 0.005 250);
-  --halo-bg-sidebar: oklch(100% 0 0);
-  --halo-bg-content: oklch(97% 0.005 250);
-  --halo-bg-card: oklch(100% 0 0);
-  --halo-bg-input: oklch(100% 0 0);
-  --halo-bg-hover: oklch(95% 0.01 250);
-  --halo-bg-active: oklch(90% 0.02 160);
-  --halo-bg-disabled: oklch(95% 0.005 250);
-  --halo-bg-tooltip: oklch(20% 0.01 250);
-  --halo-bg-modal: oklch(0% 0 0 / 60%);
-  --halo-bg-dropdown: oklch(100% 0 0);
-
   --halo-text-primary: oklch(20% 0.01 250);
-  --halo-text-secondary: oklch(45% 0.01 250);
   --halo-text-tertiary: oklch(60% 0.01 250);
-  --halo-text-link: oklch(45% 0.15 160);
-  --halo-text-inverse: oklch(100% 0 0);
+
+  --halo-bg-hover: oklch(95% 0.01 250);
 
   --halo-border-base: oklch(88% 0.01 250);
-  --halo-border-light: oklch(93% 0.005 250);
-  --halo-border-input: oklch(80% 0.01 250);
-  --halo-border-focus: oklch(55% 0.15 160);
 
   --halo-accent-primary: oklch(55% 0.14 160);
-  --halo-accent-primary-hover: oklch(48% 0.15 160);
-  --halo-accent-primary-text: oklch(100% 0 0);
-  --halo-accent-danger: oklch(45% 0.18 25);
-  --halo-accent-danger-hover: oklch(40% 0.19 25);
-  --halo-accent-success: oklch(50% 0.16 150);
-  --halo-accent-warning: oklch(60% 0.16 85);
 
-  --halo-shadow-sm: 0 1px 2px oklch(0% 0 0 / 6%);
-  --halo-shadow-base: 0 2px 8px oklch(0% 0 0 / 10%);
-  --halo-shadow-lg: 0 4px 16px oklch(0% 0 0 / 14%);
-
-  --halo-scrollbar-thumb: oklch(80% 0.01 250);
-  --halo-scrollbar-track: oklch(95% 0.005 250);
-
-  --halo-search-bg: oklch(95% 0.01 250);
-  --halo-search-text: oklch(45% 0.01 250);
-  --halo-search-placeholder: oklch(60% 0.01 250);
-
-  --halo-menu-item-hover: oklch(93% 0.02 160);
   --halo-menu-item-active: oklch(88% 0.03 160);
-  --halo-menu-group-title: oklch(55% 0.01 250);
-
-  --halo-table-header-bg: oklch(96% 0.005 250);
-  --halo-table-row-hover: oklch(93% 0.015 250);
-  --halo-table-border: oklch(88% 0.01 250);
-
-  --halo-tag-bg: oklch(90% 0.04 160);
-  --halo-tag-text: oklch(40% 0.1 160);
 }

ui/src/views/SettingsView.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import type { ThemeMode } from '../composables/useDarkMode'
 import { useDarkMode } from '../composables/useDarkMode'
+import {
+  IconPalette,
+  VCard,
+  VDescription,
+  VDescriptionItem,
+  VPageHeader,
+  VTag,
+} from '@halo-dev/components'
 import { computed } from 'vue'
 
 const { theme, isDark, setTheme } = useDarkMode()
@@ -20,79 +28,47 @@ const modeOptions: { value: ThemeMode; label: string; description: string }[] =
 </script>
 
 <template>
-  <div class="dark-mode-settings">
-    <div class="dark-mode-settings__header">
-      <h1 class="dark-mode-settings__title">深色模式设置</h1>
-      <p class="dark-mode-settings__desc">选择后台管理面板的显示模式</p>
-    </div>
+  <div>
+    <VPageHeader title="深色模式设置">
+      <template #icon>
+        <IconPalette />
+      </template>
+    </VPageHeader>
 
-    <div class="dark-mode-settings__card">
-      <div class="dark-mode-settings__current">
-        当前生效：<strong>{{ currentEffectiveMode }}</strong>
-      </div>
+    <div class="m-0 md:m-4">
+      <VCard :body-class="['!p-0']">
+        <div class="p-4">
+          <VDescription>
+            <VDescriptionItem label="当前生效">
+              <VTag>{{ currentEffectiveMode }}</VTag>
+            </VDescriptionItem>
+          </VDescription>
 
-      <div class="dark-mode-settings__options">
-        <button
-          v-for="option in modeOptions"
-          :key="option.value"
-          type="button"
-          class="dark-mode-settings__option"
-          :class="{ 'is-active': theme === option.value }"
-          @click="setTheme(option.value)"
-        >
-          <div class="dark-mode-settings__option-label">{{ option.label }}</div>
-          <div class="dark-mode-settings__option-desc">{{ option.description }}</div>
-        </button>
-      </div>
+          <div class="dark-mode-settings__options">
+            <button
+              v-for="option in modeOptions"
+              :key="option.value"
+              type="button"
+              class="dark-mode-settings__option"
+              :class="{ 'is-active': theme === option.value }"
+              @click="setTheme(option.value)"
+            >
+              <div class="dark-mode-settings__option-label">{{ option.label }}</div>
+              <div class="dark-mode-settings__option-desc">{{ option.description }}</div>
+            </button>
+          </div>
+        </div>
+      </VCard>
     </div>
   </div>
 </template>
 
 <style scoped>
-.dark-mode-settings {
-  max-width: 640px;
-  padding: 1.5rem;
-}
-
-.dark-mode-settings__header {
-  margin-bottom: 1.5rem;
-}
-
-.dark-mode-settings__title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--halo-text-primary);
-  margin-bottom: 0.25rem;
-}
-
-.dark-mode-settings__desc {
-  font-size: 0.875rem;
-  color: var(--halo-text-secondary);
-}
-
-.dark-mode-settings__card {
-  padding: 1.25rem;
-  background-color: var(--halo-bg-card);
-  border: 1px solid var(--halo-border-base);
-  border-radius: 0.25rem;
-}
-
-.dark-mode-settings__current {
-  font-size: 0.875rem;
-  color: var(--halo-text-secondary);
-  margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--halo-border-light);
-}
-
-.dark-mode-settings__current strong {
-  color: var(--halo-accent-primary);
-}
-
 .dark-mode-settings__options {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  margin-top: 1rem;
 }
 
 .dark-mode-settings__option {