优化 代码块主题

src/components/editor/WechatEditor.tsx

@@ -53,7 +53,7 @@ export default function WechatEditor() {
   const [readingTime, setReadingTime] = useState('1 分钟')
 
   // 添加 codeTheme 状态
-  const [codeTheme] = useLocalStorage<CodeThemeId>('code-theme', codeThemes[0].id)
+  const [codeTheme, setCodeTheme] = useLocalStorage<CodeThemeId>('code-theme', codeThemes[0].id)
 
   // 使用自定义 hooks
   const { handleScroll } = useEditorSync(editorRef)
@@ -484,6 +484,26 @@ export default function WechatEditor() {
     }
   }, [handleEditorChange, toast])
 
+  // 处理代码主题变化
+  const handleCodeThemeChange = useCallback((theme: CodeThemeId) => {
+    setCodeTheme(theme)
+    // 立即重新生成预览内容
+    setIsConverting(true)
+    try {
+      const content = getPreviewContent()
+      setPreviewContent(content)
+    } catch (error) {
+      console.error('Error updating preview:', error)
+      toast({
+        variant: "destructive",
+        title: "预览更新失败",
+        description: "生成预览内容时发生错误",
+      })
+    } finally {
+      setIsConverting(false)
+    }
+  }, [getPreviewContent, toast])
+
   return (
     <div className="h-screen flex flex-col overflow-hidden">
       <div className="hidden sm:block">
@@ -502,6 +522,10 @@ export default function WechatEditor() {
           onStyleOptionsChange={setStyleOptions}
           onPreviewToggle={() => setShowPreview(!showPreview)}
           styleOptions={styleOptions}
+          wordCount={wordCount}
+          readingTime={readingTime}
+          codeTheme={codeTheme}
+          onCodeThemeChange={handleCodeThemeChange}
         />
       </div>
       

src/components/editor/components/EditorToolbar.tsx

@@ -8,7 +8,7 @@ import { TemplateManager } from '../../template/TemplateManager'
 import { StyleConfigDialog } from '../StyleConfigDialog'
 import { ArticleList } from '../ArticleList'
 import { type Article } from '../constants'
-import { type RendererOptions } from '@/lib/markdown'
+import { type RendererOptions } from '@/lib/types'
 import { ThemeToggle } from '@/components/theme/ThemeToggle'
 import { Logo } from '@/components/icons/Logo'
 import Link from 'next/link'
@@ -24,16 +24,18 @@ interface EditorToolbarProps {
   isDraft: boolean
   showPreview: boolean
   selectedTemplate: string
+  styleOptions: RendererOptions
+  codeTheme: CodeThemeId
   onSave: () => void
   onCopy: () => Promise<boolean>
   onCopyPreview: () => Promise<boolean>
   onNewArticle: () => void
-  onArticleSelect: (article: Article) => void
+  onArticleSelect: (article: { content: string, template: string }) => void
-  onTemplateSelect: (template: string) => void
+  onTemplateSelect: (templateId: string) => void
   onTemplateChange: () => void
   onStyleOptionsChange: (options: RendererOptions) => void
   onPreviewToggle: () => void
-  styleOptions: RendererOptions
+  onCodeThemeChange: (theme: CodeThemeId) => void
 }
 
 export function EditorToolbar({
@@ -50,10 +52,11 @@ export function EditorToolbar({
   onTemplateChange,
   onStyleOptionsChange,
   onPreviewToggle,
-  styleOptions
+  styleOptions,
+  codeTheme,
+  onCodeThemeChange
 }: EditorToolbarProps) {
   const { toast } = useToast()
-  const [codeTheme, setCodeTheme] = useLocalStorage<CodeThemeId>('code-theme', codeThemes[0].id)
 
   const handleCopy = async () => {
     try {
@@ -128,7 +131,10 @@ export function EditorToolbar({
                 value={selectedTemplate} 
                 onSelect={onTemplateSelect} 
               /> 
-              <CodeThemeSelector value={codeTheme} onChange={setCodeTheme} />
+              <CodeThemeSelector 
+                value={codeTheme} 
+                onChange={onCodeThemeChange} 
+              />
               <StyleConfigDialog
                 value={styleOptions}
                 onChangeAction={onStyleOptionsChange}