From 4b57949d2fbcc6b3bdd2745c249468dd748fa364 Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@gmail.com>
Date: Sun, 19 Oct 2025 09:50:04 +0800
Subject: [PATCH] feat: add custom panel for editer

---
 .../web/src/components/editor/RightSlider.vue | 81 +---------------
 .../src/components/editor/ThemeCustomizer.vue | 96 +++++++++++++++++++
 .../components/editor/editor-header/index.vue | 14 ++-
 3 files changed, 112 insertions(+), 79 deletions(-)
 create mode 100644 apps/web/src/components/editor/ThemeCustomizer.vue

diff --git a/apps/web/src/components/editor/RightSlider.vue b/apps/web/src/components/editor/RightSlider.vue
index 4c584c2016..8f91e205e3 100644
--- a/apps/web/src/components/editor/RightSlider.vue
+++ b/apps/web/src/components/editor/RightSlider.vue
@@ -7,14 +7,12 @@ import {
   fontSizeOptions,
   legendOptions,
   themeOptions,
-  widthOptions,
 } from '@md/shared/configs'
-import { Moon, Sun, X } from 'lucide-vue-next'
+import { X } from 'lucide-vue-next'
 import PickColors from 'vue-pick-colors'
-import { useDisplayStore, useStore } from '@/stores'
+import { useStore } from '@/stores'
 
 const store = useStore()
-const displayStore = useDisplayStore()
 
 // 控制是否启用动画
 const enableAnimation = ref(false)
@@ -32,11 +30,7 @@ watch(() => store.isMobile, () => {
   enableAnimation.value = false
 })
 
-const { isDark, primaryColor } = storeToRefs(store)
-
-function customStyle() {
-  displayStore.toggleShowCssEditor()
-}
+const { primaryColor } = storeToRefs(store)
 
 const isOpen = ref(false)
 
@@ -282,75 +276,6 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
           </Button>
         </div>
       </div>
-      <div class="space-y-2">
-        <h2>自定义 CSS 面板</h2>
-        <div class="grid grid-cols-5 justify-items-center gap-2">
-          <Button
-            class="w-full" variant="outline" :class="{
-              'border-black dark:border-white border-2': displayStore.isShowCssEditor,
-            }" @click="!displayStore.isShowCssEditor && customStyle()"
-          >
-            开启
-          </Button>
-          <Button
-            class="w-full" variant="outline" :class="{
-              'border-black dark:border-white border-2': !displayStore.isShowCssEditor,
-            }" @click="displayStore.isShowCssEditor && customStyle()"
-          >
-            关闭
-          </Button>
-        </div>
-      </div>
-      <div class="space-y-2">
-        <h2>编辑区位置</h2>
-        <div class="grid grid-cols-5 justify-items-center gap-2">
-          <Button
-            class="w-full" variant="outline" :class="{
-              'border-black dark:border-white border-2': store.isEditOnLeft,
-            }" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
-          >
-            左侧
-          </Button>
-          <Button
-            class="w-full" variant="outline" :class="{
-              'border-black dark:border-white border-2': !store.isEditOnLeft,
-            }" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
-          >
-            右侧
-          </Button>
-        </div>
-      </div>
-      <div class="space-y-2">
-        <h2>预览模式</h2>
-        <div class="grid grid-cols-5 justify-items-center gap-2">
-          <Button
-            v-for="{ label, value } in widthOptions" :key="value" class="w-full" variant="outline" :class="{
-              'border-black dark:border-white border-2': store.previewWidth === value,
-            }" @click="store.previewWidthChanged(value)"
-          >
-            {{ label }}
-          </Button>
-        </div>
-      </div>
-      <div class="space-y-2">
-        <h2>模式</h2>
-        <div class="grid grid-cols-5 justify-items-center gap-2">
-          <Button
-            class="w-full" variant="outline" :class="{
-              'border-black dark:border-white border-2': !isDark,
-            }" @click="store.toggleDark(false)"
-          >
-            <Sun class="h-4 w-4" />
-          </Button>
-          <Button
-            class="w-full" variant="outline" :class="{
-              'border-black dark:border-white border-2': isDark,
-            }" @click="store.toggleDark(true)"
-          >
-            <Moon class="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
       <div class="space-y-2">
         <h2>样式配置</h2>
         <Button variant="destructive" @click="store.resetStyleConfirm">
diff --git a/apps/web/src/components/editor/ThemeCustomizer.vue b/apps/web/src/components/editor/ThemeCustomizer.vue
new file mode 100644
index 0000000000..71668cbab3
--- /dev/null
+++ b/apps/web/src/components/editor/ThemeCustomizer.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { widthOptions } from '@md/shared/configs'
+import { Moon, Sun } from 'lucide-vue-next'
+import { useDisplayStore, useStore } from '@/stores'
+
+const store = useStore()
+const displayStore = useDisplayStore()
+
+const { isDark } = storeToRefs(store)
+
+function customStyle() {
+  displayStore.toggleShowCssEditor()
+}
+</script>
+
+<template>
+  <div class="theme-customizer space-y-4">
+    <div class="space-y-2 hidden sm:block">
+      <h2 class="text-sm font-medium">
+        编辑区位置
+      </h2>
+      <div class="grid grid-cols-2 justify-items-center gap-2">
+        <Button
+          class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': store.isEditOnLeft,
+          }" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
+        >
+          左侧
+        </Button>
+        <Button
+          class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': !store.isEditOnLeft,
+          }" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
+        >
+          右侧
+        </Button>
+      </div>
+    </div>
+    <div class="space-y-2 hidden sm:block">
+      <h2 class="text-sm font-medium">
+        预览模式
+      </h2>
+      <div class="grid grid-cols-2 justify-items-center gap-2">
+        <Button
+          v-for="{ label, value } in widthOptions" :key="value" class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': store.previewWidth === value,
+          }" @click="store.previewWidthChanged(value)"
+        >
+          {{ label }}
+        </Button>
+      </div>
+    </div>
+    <div class="space-y-2">
+      <h2 class="text-sm font-medium">
+        自定义 CSS 面板
+      </h2>
+      <div class="grid grid-cols-2 justify-items-center gap-2">
+        <Button
+          class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': displayStore.isShowCssEditor,
+          }" @click="!displayStore.isShowCssEditor && customStyle()"
+        >
+          开启
+        </Button>
+        <Button
+          class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': !displayStore.isShowCssEditor,
+          }" @click="displayStore.isShowCssEditor && customStyle()"
+        >
+          关闭
+        </Button>
+      </div>
+    </div>
+    <div class="space-y-2">
+      <h2 class="text-sm font-medium">
+        模式
+      </h2>
+      <div class="grid grid-cols-2 justify-items-center gap-2">
+        <Button
+          class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': !isDark,
+          }" @click="store.toggleDark(false)"
+        >
+          <Sun class="h-4 w-4" />
+        </Button>
+        <Button
+          class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': isDark,
+          }" @click="store.toggleDark(true)"
+        >
+          <Moon class="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web/src/components/editor/editor-header/index.vue b/apps/web/src/components/editor/editor-header/index.vue
index 327483b4d5..a773d00eb1 100644
--- a/apps/web/src/components/editor/editor-header/index.vue
+++ b/apps/web/src/components/editor/editor-header/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ChevronDownIcon, Menu, Settings } from 'lucide-vue-next'
+import { ChevronDownIcon, Menu, Paintbrush, Settings } from 'lucide-vue-next'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { useDisplayStore, useStore } from '@/stores'
 import { addPrefix, generatePureHTML, processClipboardContent } from '@/utils'
 import FormatDropdown from './FormatDropdown.vue'
@@ -265,6 +266,17 @@ async function copy() {
       <!-- 文章信息（移动端隐藏） -->
       <PostInfo class="hidden md:inline-flex" />
 
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button variant="outline" size="icon" class="mr-1">
+            <Paintbrush class="size-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end">
+          <ThemeCustomizer />
+        </PopoverContent>
+      </Popover>
+
       <!-- 设置按钮 -->
       <Button
         variant="outline"