feat: insert theme in css editor

Author: zeevenn

apps/web/src/components/CodemirrorEditor/CssEditor.vue

@@ -162,14 +162,16 @@ function tabChanged(tabName: string | number) {
             class="flex-1"
           >
             {{ item.title }}
-            <Edit3
-              v-show="store.cssContentConfig.active === item.name" class="inline size-4 rounded-full p-0.5 transition-color hover:bg-gray-200 dark:hover:bg-gray-600"
-              @click="rename(item.name)"
-            />
-            <X
-              v-show="store.cssContentConfig.active === item.name" class="inline size-4 rounded-full p-0.5 transition-color hover:bg-gray-200 dark:hover:bg-gray-600"
-              @click.self="removeHandler(item.name)"
-            />
+            <template v-if="!item.isBuiltIn">
+              <Edit3
+                v-show="store.cssContentConfig.active === item.name" class="inline size-4 rounded-full p-0.5 transition-color hover:bg-gray-200 dark:hover:bg-gray-600"
+                @click="rename(item.name)"
+              />
+              <X
+                v-show="store.cssContentConfig.active === item.name" class="inline size-4 rounded-full p-0.5 transition-color hover:bg-gray-200 dark:hover:bg-gray-600"
+                @click.self="removeHandler(item.name)"
+              />
+            </template>
           </TabsTrigger>
           <TabsTrigger value="add">
             <Plus class="h-5 w-5" />

apps/web/src/stores/index.ts

@@ -2,6 +2,7 @@ import { initRenderer } from '@md/core'
 import {
   defaultStyleConfig,
   themeMap,
+  themeOptionsMap,
   widthOptions,
 } from '@md/shared/configs'
 import CodeMirror from 'codemirror'
@@ -28,6 +29,7 @@ import {
   sanitizeTitle,
 } from '@/utils'
 import { copyPlain } from '@/utils/clipboard'
+import { generateThemeCSS } from '@/utils/themeHelpers'
 
 /**********************************
  * Post 结构接口
@@ -290,20 +292,57 @@ export const useStore = defineStore(`store`, () => {
    * @deprecated 在后续版本中将会移除
    */
   const cssContent = useStorage(`__css_content`, DEFAULT_CSS_CONTENT)
-  const cssContentConfig = useStorage(addPrefix(`css_content_config`), {
+  // 初始化默认配置
+  const defaultCssConfig = {
     active: `方案1`,
     tabs: [
+      ...Object.entries(themeMap).map(([key, value]) => ({
+        title: themeOptionsMap[key as keyof typeof themeOptionsMap].label,
+        name: themeOptionsMap[key as keyof typeof themeOptionsMap].label,
+        content: generateThemeCSS(value),
+        isBuiltIn: true,
+      })),
       {
         title: `方案1`,
         name: `方案1`,
         // 兼容之前的方案
         content: cssContent.value || DEFAULT_CSS_CONTENT,
+        isBuiltIn: false,
       },
     ],
-  })
+  }
+
+  const cssContentConfig = useStorage(addPrefix(`css_content_config`), defaultCssConfig)
   onMounted(() => {
     // 清空过往历史记录
     cssContent.value = ``
+
+    // 动态合并新增的内置主题
+    const existingBuiltInThemes = new Set(
+      cssContentConfig.value.tabs
+        .filter(tab => tab.isBuiltIn)
+        .map(tab => tab.name),
+    )
+
+    // 检查是否有新增的主题
+    const newThemes = Object.entries(themeMap)
+      .filter(([key]) => !existingBuiltInThemes.has(themeOptionsMap[key as keyof typeof themeOptionsMap].label))
+      .map(([key, value]) => ({
+        title: themeOptionsMap[key as keyof typeof themeOptionsMap].label,
+        name: themeOptionsMap[key as keyof typeof themeOptionsMap].label,
+        content: generateThemeCSS(value),
+        isBuiltIn: true,
+      }))
+
+    // 如果有新主题，将其插入到内置主题区域
+    if (newThemes.length > 0) {
+      // 找到第一个非内置主题的索引
+      const firstCustomThemeIndex = cssContentConfig.value.tabs.findIndex(tab => !tab.isBuiltIn)
+      const insertIndex = firstCustomThemeIndex === -1 ? cssContentConfig.value.tabs.length : firstCustomThemeIndex
+
+      // 插入新主题
+      cssContentConfig.value.tabs.splice(insertIndex, 0, ...newThemes)
+    }
   })
   const getCurrentTab = () =>
     cssContentConfig.value.tabs.find((tab) => {
@@ -330,6 +369,7 @@ export const useStore = defineStore(`store`, () => {
       name,
       title: name,
       content: DEFAULT_CSS_CONTENT,
+      isBuiltIn: false,
     })
     cssContentConfig.value.active = name
     setCssEditorValue(DEFAULT_CSS_CONTENT)
@@ -489,11 +529,18 @@ export const useStore = defineStore(`store`, () => {
     cssContentConfig.value = {
       active: `方案 1`,
       tabs: [
+        ...Object.entries(themeMap).map(([key, value]) => ({
+          title: themeOptionsMap[key as keyof typeof themeOptionsMap].label,
+          name: themeOptionsMap[key as keyof typeof themeOptionsMap].label,
+          content: generateThemeCSS(value),
+          isBuiltIn: true,
+        })),
         {
           title: `方案 1`,
           name: `方案 1`,
           // 兼容之前的方案
           content: cssContent.value || DEFAULT_CSS_CONTENT,
+          isBuiltIn: false,
         },
       ],
     }

apps/web/src/utils/themeHelpers.ts

@@ -0,0 +1,5 @@
+import type { Theme } from '@md/shared'
+
+export function generateThemeCSS(_theme: Theme) {
+  return ``
+}

packages/shared/src/configs/theme.ts

@@ -632,6 +632,24 @@ export const themeMap = {
   simple: simpleTheme,
 }
 
+export const themeOptionsMap = {
+  default: {
+    label: `经典`,
+    value: `default`,
+    desc: ``,
+  },
+  grace: {
+    label: `优雅`,
+    value: `grace`,
+    desc: `@brzhang`,
+  },
+  simple: {
+    label: `简洁`,
+    value: `simple`,
+    desc: `@okooo5km`,
+  },
+}
+
 export const themeOptions: IConfigOption<keyof typeof themeMap>[] = [
   {
     label: `经典`,