优化模版样式

src/components/editor/StyleConfigDialog.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
@@ -33,6 +33,11 @@ export function StyleConfigDialog({ value, onChangeAction }: StyleConfigDialogPr
   const [currentOptions, setCurrentOptions] = useState<RendererOptions>(value)
   const [customizedFields, setCustomizedFields] = useState<Set<string>>(new Set())
 
+  useEffect(() => {
+    setCurrentOptions(value)
+    setCustomizedFields(new Set())
+  }, [value])
+
   const handleOptionChange = (
     category: keyof RendererOptions,
     subcategory: string,

src/components/editor/WechatEditor.tsx

@@ -81,18 +81,27 @@ export default function WechatEditor() {
       block: {
         ...(template?.options?.block || {}),
         ...(styleOptions.block || {}),
-        // 确保标题使用主题颜色和正确的字体大小
+        // 合并标题样式，保留模版中的其他样式属性
         h1: { 
-          fontSize: styleOptions.block?.h1?.fontSize || '24px',
-          color: styleOptions.base?.themeColor || '#1a1a1a'
+          ...(template?.options?.block?.h1 || {}),
+          ...(styleOptions.block?.h1 || {}),
+          fontSize: styleOptions.block?.h1?.fontSize || template?.options?.block?.h1?.fontSize || '24px',
+          color: styleOptions.base?.themeColor || template?.options?.base?.themeColor || '#1a1a1a',
+          borderBottom: `2px solid ${styleOptions.base?.themeColor || template?.options?.base?.themeColor || '#1a1a1a'}`
         },
         h2: { 
-          fontSize: styleOptions.block?.h2?.fontSize || '20px',
-          color: styleOptions.base?.themeColor || '#1a1a1a'
+          ...(template?.options?.block?.h2 || {}),
+          ...(styleOptions.block?.h2 || {}),
+          fontSize: styleOptions.block?.h2?.fontSize || template?.options?.block?.h2?.fontSize || '20px',
+          color: styleOptions.base?.themeColor || template?.options?.base?.themeColor || '#1a1a1a',
+          borderBottom: `2px solid ${styleOptions.base?.themeColor || template?.options?.base?.themeColor || '#1a1a1a'}`
         },
         h3: { 
-          fontSize: styleOptions.block?.h3?.fontSize || '18px',
-          color: styleOptions.base?.themeColor || '#1a1a1a'
+          ...(template?.options?.block?.h3 || {}),
+          ...(styleOptions.block?.h3 || {}),
+          fontSize: styleOptions.block?.h3?.fontSize || template?.options?.block?.h3?.fontSize || '18px',
+          color: styleOptions.base?.themeColor || template?.options?.base?.themeColor || '#1a1a1a',
+          borderLeft: `3px solid ${styleOptions.base?.themeColor || template?.options?.base?.themeColor || '#1a1a1a'}`
         }
       },
       inline: {
@@ -384,6 +393,13 @@ export default function WechatEditor() {
     })
   }, [value, handleEditorChange])
 
+  // 处理模版选择
+  const handleTemplateSelect = useCallback((templateId: string) => {
+    setSelectedTemplate(templateId)
+    // 重置样式设置为模版默认值
+    setStyleOptions({})
+  }, [])
+
   return (
     <div className="h-full flex flex-col">
       <div className="hidden sm:block">
@@ -397,7 +413,7 @@ export default function WechatEditor() {
           onCopyPreview={handleCopy}
           onNewArticle={handleNewArticle}
           onArticleSelect={handleArticleSelect}
-          onTemplateSelect={setSelectedTemplate}
+          onTemplateSelect={handleTemplateSelect}
           onTemplateChange={() => setValue(value)}
           onStyleOptionsChange={setStyleOptions}
           onPreviewToggle={() => setShowPreview(!showPreview)}
@@ -412,7 +428,7 @@ export default function WechatEditor() {
             <div className="flex-1 mr-2">
               <WechatStylePicker 
                 value={selectedTemplate} 
-                onSelect={setSelectedTemplate}
+                onSelect={handleTemplateSelect}
               />
             </div>
             <button

src/config/wechat-templates.ts

@@ -17,6 +17,7 @@ export const templates: Template[] = [
     styles: '',
     options: {
       base: {
+        themeColor: '#16a34a',
         primaryColor: '#000000',
         textAlign: 'left',
         lineHeight: '1.75',
@@ -44,7 +45,7 @@ export const templates: Template[] = [
           padding: '0 0.2em',
           margin: '4em auto 2em',
           color: '#fff',
-          background: 'var(--md-primary-color)',
+          borderBottom: '2px solid var(--md-primary-color)',
           fontSize: '1.2em',
           fontWeight: 'bold',
           textAlign: 'center'
@@ -183,6 +184,7 @@ export const templates: Template[] = [
     styles: 'prose-elegant',
     options: {
       base: {
+        themeColor: '#16a34a',
         primaryColor: '#16a34a',
         textAlign: 'justify',
         lineHeight: '1.8'
@@ -198,15 +200,13 @@ export const templates: Template[] = [
           textAlign: 'center'
         },
         h2: {
-          display: 'table',
-          padding: '0.2em 1em',
-          margin: '4em auto 2em',
-          color: '#fff',
-          background: '#16a34a',
-          fontSize: '1.2em',
-          fontWeight: 'bold',
-          textAlign: 'center',
-          borderRadius: '4px'
+            display: 'table',
+            padding: '0 1.5em',
+            borderBottom: '2px solid #16a34a',
+            margin: '2.5em auto 1.2em',
+            fontSize: '1.4em',
+            fontWeight: 'bold',
+            textAlign: 'center'
         },
         h3: {
           paddingLeft: '8px',