estel_docs/app/components/ThemeSettings.vue

<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="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>