优化 代码块主题

src/components/editor/WechatEditor.tsx

@@ -5,7 +5,7 @@ import { templates } from '@/config/wechat-templates'
 import { cn } from '@/lib/utils'
 import { useToast } from '@/components/ui/use-toast'
 import { ToastAction } from '@/components/ui/toast'
-import { convertToWechat } from '@/lib/markdown'
+import { convertToWechat, getCodeThemeStyles } from '@/lib/markdown'
 import { type RendererOptions } from '@/lib/types'
 import { useEditorSync } from './hooks/useEditorSync'
 import { useAutoSave } from './hooks/useAutoSave'
@@ -18,6 +18,7 @@ import { WechatStylePicker } from '@/components/template/WechatStylePicker'
 import { Copy, Clock, Type, Trash2 } from 'lucide-react'
 import { useLocalStorage } from '@/hooks/use-local-storage'
 import { codeThemes, type CodeThemeId } from '@/config/code-themes'
+import '@/styles/code-themes.css'
 
 // 计算阅读时间（假设每分钟阅读300字）
 const calculateReadingTime = (text: string): string => {
@@ -103,7 +104,11 @@ export default function WechatEditor() {
       block: {
         ...(template?.options?.block || {}),
         ...(styleOptions.block || {}),
-        // 合并标题样式，保留模版中的其他样式属性
+        code_pre: {
+          ...(template?.options?.block?.code_pre || {}),
+          ...(styleOptions.block?.code_pre || {}),
+          ...getCodeThemeStyles(codeTheme)
+        },
         h1: {
           ...(template?.options?.block?.h1 || {}),
           ...(styleOptions.block?.h1 || {}),
@@ -279,8 +284,7 @@ export default function WechatEditor() {
       }
     }
 
-    const timeoutId = setTimeout(updatePreview, 100)
-    return () => clearTimeout(timeoutId)
+    updatePreview()
   }, [value, selectedTemplate, styleOptions, codeTheme, getPreviewContent, toast])
 
   // 加载已保存的内容
@@ -562,6 +566,7 @@ export default function WechatEditor() {
                   previewSize={previewSize}
                   isConverting={isConverting}
                   previewContent={previewContent}
+                  codeTheme={codeTheme}
                   onPreviewSizeChange={setPreviewSize}
                 />
               </div>
@@ -603,6 +608,7 @@ export default function WechatEditor() {
               previewSize={previewSize}
               isConverting={isConverting}
               previewContent={previewContent}
+              codeTheme={codeTheme}
               onPreviewSizeChange={setPreviewSize}
             />
           )}

src/components/editor/components/EditorPreview.tsx

@@ -3,16 +3,16 @@ import { PREVIEW_SIZES, type PreviewSize } from '../constants'
 import { Loader2, ZoomIn, ZoomOut, Maximize2, Minimize2 } from 'lucide-react'
 import { templates } from '@/config/wechat-templates'
 import { useState, useRef, useEffect } from 'react'
-import { useLocalStorage } from '@/hooks/use-local-storage'
-import { codeThemes, type CodeThemeId } from '@/config/code-themes'
+import { type CodeThemeId } from '@/config/code-themes'
 import '@/styles/code-themes.css'
 
 interface EditorPreviewProps {
   previewRef: React.RefObject<HTMLDivElement>
-  selectedTemplate: string
+  selectedTemplate?: string
   previewSize: PreviewSize
   isConverting: boolean
   previewContent: string
+  codeTheme: CodeThemeId
   onPreviewSizeChange: (size: PreviewSize) => void
 }
 
@@ -22,12 +22,12 @@ export function EditorPreview({
   previewSize,
   isConverting,
   previewContent,
+  codeTheme,
   onPreviewSizeChange
 }: EditorPreviewProps) {
   const [zoom, setZoom] = useState(100)
   const [isFullscreen, setIsFullscreen] = useState(false)
   const isScrolling = useRef<boolean>(false)
-  const [codeTheme] = useLocalStorage<CodeThemeId>('code-theme', codeThemes[0].id)
 
   const handleZoomIn = () => {
     setZoom(prev => Math.min(prev + 10, 200))
@@ -57,6 +57,7 @@ export function EditorPreview({
         selectedTemplate && templates.find(t => t.id === selectedTemplate)?.styles,
         `code-theme-${codeTheme}`
       )}
+      key={codeTheme}
     >
       <div className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b flex items-center justify-between z-10 sticky top-0 left-0 right-0">
         <div className="text-sm text-muted-foreground px-2 py-1">预览效果</div>

src/lib/markdown.ts

@@ -128,7 +128,7 @@ const defaultOptions: RendererOptions = {
 }
 
 // 获取代码主题的样式
-function getCodeThemeStyles(theme: CodeThemeId): StyleOptions {
+export function getCodeThemeStyles(theme: CodeThemeId): StyleOptions {
   const themeConfig = codeThemes.find(t => t.id === theme)
   if (!themeConfig) return {}