开始主题设置

app/components/AppHeader.vue

@@ -1,65 +1,72 @@
 <script setup lang="ts">
-import type { ContentNavigationItem } from '@nuxt/content'
+const isSettingsOpen = ref(false)
 
-const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-
-const { header } = useAppConfig()
+const { header } = useAppConfig();
 </script>
 
 <template>
-  <UHeader
-  >
-
-    <template
-      v-if="header?.logo?.dark || header?.logo?.light || header?.title"
-      #title
-    >
-      <UColorModeImage
-        v-if="header?.logo?.dark || header?.logo?.light"
-        :light="header?.logo?.light!"
-        :dark="header?.logo?.dark!"
-        :alt="header?.logo?.alt"
-        class="h-6 w-auto shrink-0"
+  <UPage>
+    <template>
+      <header
+        class="header bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50"
+      >
+        <div class="px-2 sm:px-4 lg:px-6">
+          <div class="flex justify-between items-center h-12">
+            <UContentSearchButton v-if="header?.search" class="lg:hidden" />
+            <div class="ml-auto">
+              <UColorModeButton v-if="header?.colorMode" />
+              
+            <!-- Settings Button -->
+            <button
+              class="p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              title="页面设置"
+              @click="isSettingsOpen = !isSettingsOpen"
+            >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </button>
+              
+            </div>
+            <!-- User Actions - Mobile and Desktop -->
+            <div class="hidden sm:flex items-center space-x-2">
+              <NuxtLink
+                to="/login"
+                class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+              >
+                登录
+              </NuxtLink>
+              <NuxtLink
+                to="/register"
+                class="text-sm font-medium text-white bg-primary rounded-md"
+              >
+                <UButton icon="lucide-rocket">注册</UButton>
+              </NuxtLink>
+              <!-- Mobile Menu Button -->
+              <div class="sm:hidden">
+                <NuxtLink
+                  to="/login"
+                  class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                >
+                  登录
+                </NuxtLink>
+                <NuxtLink
+                  to="/register"
+                  class="ml-2 px-3 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
+                >
+                  注册
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+            <!-- Theme Settings Panel -->
+      <ThemeSettings 
+        :is-open="isSettingsOpen" 
+        @close="isSettingsOpen = false" 
       />
-
-      <span v-else-if="header?.title">
-        {{ header.title }}
-      </span>
+      </header>
     </template>
-
-    <template
-      v-else
-      #left
-    >
-      <NuxtLink :to="header?.to || '/'">
-        <LogoPro class="w-auto h-6 shrink-0" />
-      </NuxtLink>
-
-      <TemplateMenu />
-    </template>
-
-    <template #right>
-      <UContentSearchButton
-        v-if="header?.search"
-        class="lg:hidden"
-      />
-
-      <UColorModeButton v-if="header?.colorMode" />
-
-      <template v-if="header?.links">
-        <UButton
-          v-for="(link, index) of header.links"
-          :key="index"
-          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
-        />
-      </template>
-    </template>
-
-    <template #body>
-      <UContentNavigation
-        highlight
-        :navigation="navigation"
-      />
-    </template>
-  </UHeader>
+  </UPage>
 </template>

app/components/ThemeSettings.vue

@@ -0,0 +1,223 @@
+<template>
+  <!-- 设置面板 -->
+  <Transition
+    enter-active-class="transition-transform duration-300 ease-out"
+    enter-from-class="translate-x-full"
+    enter-to-class="translate-x-0"
+    leave-active-class="transition-transform duration-300 ease-in"
+    leave-from-class="translate-x-0"
+    leave-to-class="translate-x-full"
+  >
+    <div 
+      v-if="isOpen"
+      class="fixed right-0 top-16 h-[calc(100vh-4rem)] w-full sm:w-96 bg-white dark:bg-gray-900 shadow-2xl z-40 overflow-y-auto border-l border-gray-200 dark:border-gray-700 custom-scrollbar"
+    >
+      <!-- 头部 -->
+      <div class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">页面设置</h2>
+          <UButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-x"
+            square
+            @click="$emit('close')"
+          />
+        </div>
+      </div>
+
+      <!-- 设置内容 -->
+      <div class="p-6 space-y-8">
+        <!-- 主题 -->
+        <div>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">主题</h3>
+          <div class="grid grid-cols-3 gap-3">
+            <UButton
+              v-for="theme in themes"
+              :key="theme.value"
+              :label="theme.label"
+              :color="selectedTheme === theme.value ? 'primary' : 'neutral'"
+              :variant="selectedTheme === theme.value ? 'solid' : 'outline'"
+              size="sm"
+              class="justify-center"
+              @click="selectedTheme = theme.value"
+            />
+          </div>
+        </div>
+
+        <!-- 字体 -->
+        <div>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">字体</h3>
+          <div class="grid grid-cols-3 gap-3">
+            <UButton
+              v-for="font in fonts"
+              :key="font.value"
+              :label="font.label"
+              :color="selectedFont === font.value ? 'primary' : 'neutral'"
+              :variant="selectedFont === font.value ? 'solid' : 'outline'"
+              size="sm"
+              class="justify-center"
+              @click="selectedFont = font.value"
+            />
+          </div>
+        </div>
+
+        <!-- 字号 -->
+        <div>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">字号</h3>
+          <div class="grid grid-cols-5 gap-2">
+            <UButton
+              v-for="size in fontSizes"
+              :key="size.value"
+              :label="size.label"
+              :color="selectedFontSize === size.value ? 'primary' : 'neutral'"
+              :variant="selectedFontSize === size.value ? 'solid' : 'outline'"
+              size="xs"
+              class="justify-center"
+              @click="selectedFontSize = size.value"
+            />
+          </div>
+        </div>
+
+        <!-- 主题色 -->
+        <div>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">主题色</h3>
+          <div class="grid grid-cols-2 gap-3">
+            <UButton
+              v-for="color in themeColors"
+              :key="color.value"
+              :color="selectedThemeColor === color.value ? 'primary' : 'neutral'"
+              :variant="selectedThemeColor === color.value ? 'solid' : 'outline'"
+              size="sm"
+              class="justify-start"
+              @click="selectedThemeColor = color.value"
+            >
+              <template #leading>
+                <div 
+                  class="w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600"
+                  :style="{ backgroundColor: color.color }"
+                />
+              </template>
+              <span>{{ color.label }}</span>
+            </UButton>
+          </div>
+        </div>
+
+        <!-- 自定义主题色 -->
+        <div>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">自定义主题色</h3>
+          <div class="flex items-center space-x-3">
+            <input
+              v-model="customColor"
+              type="color"
+              class="w-12 h-10 rounded-md border border-gray-300 dark:border-gray-600 cursor-pointer"
+            >
+            <UButton
+              label="应用"
+              color="primary"
+              variant="solid"
+              size="sm"
+              @click="applyCustomColor"
+            />
+          </div>
+        </div>
+
+        <!-- 代码块主题 -->
+        <div>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">代码块主题</h3>
+          <USelect
+            v-model="selectedCodeTheme"
+            :options="codeThemes"
+            option-attribute="label"
+            value-attribute="value"
+            placeholder="选择代码主题"
+          />
+        </div>
+
+        <!-- 图注格式 -->
+        <div>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">图注格式</h3>
+          <div class="grid grid-cols-2 gap-3">
+            <UButton
+              v-for="format in captionFormats"
+              :key="format.value"
+              :label="format.label"
+              :color="selectedCaptionFormat === format.value ? 'primary' : 'neutral'"
+              :variant="selectedCaptionFormat === format.value ? 'solid' : 'outline'"
+              size="sm"
+              class="justify-center"
+              @click="selectedCaptionFormat = format.value"
+            />
+          </div>
+          <div class="mt-3">
+            <UButton
+              label="不显示"
+              :color="selectedCaptionFormat === 'none' ? 'primary' : 'neutral'"
+              :variant="selectedCaptionFormat === 'none' ? 'solid' : 'outline'"
+              size="sm"
+              class="w-full justify-center"
+              @click="selectedCaptionFormat = 'none'"
+            />
+          </div>
+        </div>
+
+        <!-- 重置按钮 -->
+        <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
+          <UButton
+            label="重置为默认设置"
+            color="neutral"
+            variant="soft"
+            size="sm"
+            class="w-full justify-center"
+            @click="resetSettings"
+          />
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+interface ThemeSettingsProps {
+  isOpen: boolean
+}
+
+defineProps<ThemeSettingsProps>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const {
+  themes,
+  fonts,
+  fontSizes,
+  themeColors,
+  codeThemes,
+  captionFormats,
+  selectedTheme,
+  selectedFont,
+  selectedFontSize,
+  selectedThemeColor,
+  customColor,
+  selectedCodeTheme,
+  selectedCaptionFormat,
+  applyCustomColor,
+  resetSettings
+} = useTheme();
+
+// 监听键盘事件（只监听 ESC 键）
+onMounted(() => {
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      emit('close')
+    }
+  }
+  
+  document.addEventListener('keydown', handleKeydown)
+  
+  onUnmounted(() => {
+    document.removeEventListener('keydown', handleKeydown)
+  })
+})
+</script>