优化主题
This commit is contained in:
parent
c418033b97
commit
50f9a1c346
@ -47,24 +47,76 @@ export function WechatStylePicker({ value, onSelect }: WechatStylePickerProps) {
|
|||||||
>
|
>
|
||||||
<div className="aspect-[4/3] overflow-hidden rounded-md border bg-white">
|
<div className="aspect-[4/3] overflow-hidden rounded-md border bg-white">
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
"p-4 transform scale-[0.6] origin-top-left",
|
"transform scale-[0.45] origin-top-left",
|
||||||
template.styles
|
template.styles
|
||||||
)}>
|
)} style={{
|
||||||
|
backgroundColor: template.id === 'smartisan' ? 'rgb(251, 247, 238)' : 'transparent',
|
||||||
|
width: '220%',
|
||||||
|
minHeight: '220%',
|
||||||
|
padding: template.id === 'smartisan' ? '20px' : '16px',
|
||||||
|
fontFamily: template.id === 'smartisan' ? 'PingFangSC-regular, -apple-system, BlinkMacSystemFont, sans-serif' : 'inherit',
|
||||||
|
transform: 'scale(0.45)',
|
||||||
|
transformOrigin: 'top left',
|
||||||
|
position: 'relative'
|
||||||
|
}}>
|
||||||
<h1 style={{
|
<h1 style={{
|
||||||
...template.options?.block?.h1,
|
...template.options?.block?.h1,
|
||||||
fontSize: template.options?.block?.h1?.fontSize || '1.2em'
|
fontSize: '24px',
|
||||||
|
color: template.id === 'smartisan' ? '#333333' : undefined,
|
||||||
|
marginBottom: template.id === 'smartisan' ? '1.5em' : undefined,
|
||||||
|
textAlign: 'left',
|
||||||
|
padding: '0',
|
||||||
|
border: 'none'
|
||||||
} as React.CSSProperties}>
|
} as React.CSSProperties}>
|
||||||
标题示例
|
{template.id === 'smartisan' ? '锤子便签风格' : '标题示例'}
|
||||||
</h1>
|
</h1>
|
||||||
<p style={{
|
<p style={{
|
||||||
...template.options?.block?.p,
|
...template.options?.block?.p,
|
||||||
fontSize: template.options?.block?.p?.fontSize || '1em'
|
fontSize: '16px',
|
||||||
|
color: template.id === 'smartisan' ? '#333333' : undefined,
|
||||||
|
lineHeight: template.id === 'smartisan' ? '1.8' : undefined,
|
||||||
|
margin: '1em 0'
|
||||||
} as React.CSSProperties}>
|
} as React.CSSProperties}>
|
||||||
这是一段示例文本,展示不同样式模板的效果。
|
{template.id === 'smartisan'
|
||||||
|
? '这是锤子便签的经典样式,保持了简约、优雅的设计风格。文字的排版和间距都经过精心调整,让阅读体验更加舒适。'
|
||||||
|
: '这是一段示例文本,展示不同样式模板的效果。'
|
||||||
|
}
|
||||||
</p>
|
</p>
|
||||||
<blockquote style={template.options?.block?.blockquote as React.CSSProperties}>
|
<blockquote style={{
|
||||||
引用文本示例
|
...template.options?.block?.blockquote as React.CSSProperties,
|
||||||
|
borderLeft: template.id === 'smartisan' ? '4px solid rgba(0, 0, 0, 0.4)' : undefined,
|
||||||
|
background: template.id === 'smartisan' ? 'rgba(0, 0, 0, 0.05)' : undefined,
|
||||||
|
padding: template.id === 'smartisan' ? '1em 1.2em' : undefined,
|
||||||
|
margin: template.id === 'smartisan' ? '1.2em 0' : undefined,
|
||||||
|
color: template.id === 'smartisan' ? '#666666' : undefined,
|
||||||
|
fontSize: '14px'
|
||||||
|
}}>
|
||||||
|
{template.id === 'smartisan'
|
||||||
|
? '保持简单,保持优雅'
|
||||||
|
: '引用文本示例'
|
||||||
|
}
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
{template.id === 'smartisan' && (
|
||||||
|
<ul style={{
|
||||||
|
...template.options?.block?.ul as React.CSSProperties,
|
||||||
|
margin: '1em 0',
|
||||||
|
paddingLeft: '1.5em',
|
||||||
|
listStyle: 'disc',
|
||||||
|
color: '#333333',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}>
|
||||||
|
<li style={{
|
||||||
|
...template.options?.inline?.listitem as React.CSSProperties,
|
||||||
|
margin: '0.5em 0',
|
||||||
|
lineHeight: '1.8'
|
||||||
|
}}>精心设计的字体</li>
|
||||||
|
<li style={{
|
||||||
|
...template.options?.inline?.listitem as React.CSSProperties,
|
||||||
|
margin: '0.5em 0',
|
||||||
|
lineHeight: '1.8'
|
||||||
|
}}>舒适的行间距</li>
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
|
@ -404,7 +404,7 @@ export const templates: Template[] = [
|
|||||||
blockquote: {
|
blockquote: {
|
||||||
margin: '1.2em 0',
|
margin: '1.2em 0',
|
||||||
padding: '1em 1.2em',
|
padding: '1em 1.2em',
|
||||||
borderLeft: '4px solid #FF6E42',
|
borderLeft: '4px solid gba(0, 0, 0, 0.4)',
|
||||||
background: '#F8F9FA',
|
background: '#F8F9FA',
|
||||||
borderRadius: '0 4px 4px 0',
|
borderRadius: '0 4px 4px 0',
|
||||||
color: '#666666'
|
color: '#666666'
|
||||||
|
Loading…
Reference in New Issue
Block a user