diff --git a/src/components/editor/StyleConfigDialog.tsx b/src/components/editor/StyleConfigDialog.tsx index 05f84c5..592da7c 100644 --- a/src/components/editor/StyleConfigDialog.tsx +++ b/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, diff --git a/src/components/editor/WechatEditor.tsx b/src/components/editor/WechatEditor.tsx index b0d1aa4..cf084b3 100644 --- a/src/components/editor/WechatEditor.tsx +++ b/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 diff --git a/src/config/wechat-templates.ts b/src/config/wechat-templates.ts index dbbb2b1..1ce48be 100644 --- a/src/config/wechat-templates.ts +++ b/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',