feat: add more style option (doocs#414)

src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue

@@ -52,11 +52,6 @@ function showPicker() {
 // 自定义CSS样式
 function customStyle() {
   toggleShowCssEditor()
-  nextTick(() => {
-    if (!cssEditor.value) {
-      cssEditor.value!.refresh()
-    }
-  })
   setTimeout(() => {
     cssEditor.value!.refresh()
   }, 50)

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -43,7 +43,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Button } from '@/components/ui/button'
 
 import { mergeCss, solveWeChatImage } from '@/utils'
-import { useStore } from '@/stores'
+import { useDisplayStore, useStore } from '@/stores'
 
 const emit = defineEmits([`addFormat`, `formatContent`, `startCopy`, `endCopy`])
 
@@ -81,6 +81,7 @@ const formatItems = [
 ] as const
 
 const store = useStore()
+const displayStore = useDisplayStore()
 
 const { isDark, isCiteStatus, output, primaryColor } = storeToRefs(store)
 
@@ -153,6 +154,13 @@ function copy() {
     })
   }, 350)
 }
+
+function customStyle() {
+  displayStore.toggleShowCssEditor()
+  setTimeout(() => {
+    store.cssEditor!.refresh()
+  }, 50)
+}
 </script>
 
 <template>
@@ -371,6 +379,31 @@ function copy() {
               </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': displayStore.isShowCssEditor,
+                }"
+                @click="!displayStore.isShowCssEditor && customStyle()"
+              >
+                开启
+              </Button>
+              <Button
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white': !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">
@@ -421,6 +454,17 @@ function copy() {
               </Button>
             </div>
           </div>
+          <div class="space-y-2">
+            <h2>样式配置</h2>
+            <div>
+              <Button
+                class="w-full"
+                @click="store.resetStyleConfirm()"
+              >
+                重置
+              </Button>
+            </div>
+          </div>
         </div>
       </PopoverContent>
     </Popover>

src/utils/index.ts

@@ -111,8 +111,6 @@ export function css2json(css: string): Partial<Record<Block | Inline, Properties
     css = css.slice(rbracket + 1).trim()
   }
 
-  console.log(`json`, json)
-
   return json
 }