Skip to content

A
ai-box
Commit c756def8 authored by fisherdaddy's avatar fisherdaddy
Browse files
Options

chore: 优化手写字体生成器和名言卡片生成器的样式

parent 581157d2
Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 296 deletions
src/components/HandwriteGen.jsx
View file @ c756def8
......@@ -145,178 +145,176 @@ function HandwritingGenerator() {
const backgroundOffset = -(lineSpacing * fontSize - fontSize);
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider width={300} className="site-layout-background">
<Menu mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1">手写字体生成器</Menu.Item>
</Menu>
<div className="settings-section">
<div className="form-group">
<label>手写字体</label>
<Select value={font} onChange={setFont} style={{ width: '100%' }}>
<Option value="'XINYE'">新叶念体</Option>
<Option value="'cicada'">CC 字体</Option>
<Option value="'xiongdi'">兄弟字体</Option>
<Option value="'qishan-zhong'">Zhong Qi Shan 体</Option>
</Select>
</div>
<div className="handwrite-container">
<Layout>
<Sider width={300} className="site-layout-background">
<div className="settings-section">
<h2 className="title-label">手写字体生成器</h2>
<div className="form-group">
<label>手写字体</label>
<Select value={font} onChange={setFont} style={{ width: '100%' }}>
<Option value="'XINYE'">新叶念体</Option>
<Option value="'cicada'">CC 字体</Option>
<Option value="'xiongdi'">兄弟字体</Option>
<Option value="'qishan-zhong'">Zhong Qi Shan 体</Option>
</Select>
</div>
<div className="form-group">
<label>纸张类型</label>
<Select value={paperType} onChange={setPaperType} style={{ width: '100%' }}>
<Option value="No Paper">无纸张</Option>
<Option value="Lined Paper">横线纸</Option>
</Select>
</div>
<div className="form-group">
<label>纸张类型</label>
<Select value={paperType} onChange={setPaperType} style={{ width: '100%' }}>
<Option value="No Paper">无纸张</Option>
<Option value="Lined Paper">横线纸</Option>
</Select>
</div>
{/* 新增纸张背景选项 */}
<div className="form-group">
<label>纸张背景</label>
<Select value={paperBackground} onChange={setPaperBackground} style={{ width: '100%' }}>
<Option value="None">无背景</Option>
<Option value="Style1">样式1</Option>
<Option value="Style2">样式2</Option>
<Option value="Style3">样式3</Option>
</Select>
</div>
{/* 新增纸张背景选项 */}
<div className="form-group">
<label>纸张背景</label>
<Select value={paperBackground} onChange={setPaperBackground} style={{ width: '100%' }}>
<Option value="None">无背景</Option>
<Option value="Style1">样式1</Option>
<Option value="Style2">样式2</Option>
<Option value="Style3">样式3</Option>
</Select>
</div>
<div className="form-group">
<Checkbox checked={borderEnabled} onChange={() => setBorderEnabled(!borderEnabled)}>
边框
</Checkbox>
</div>
<div className="form-group">
<label>边距设置 (px)</label>
<Row gutter={8}>
<Col span={8}>
<Input
type="number"
value={topMargin}
onChange={(e) => setTopMargin(e.target.value)}
placeholder="上"
/>
</Col>
<Col span={8}>
<Input
type="number"
value={leftMargin}
onChange={(e) => setLeftMargin(e.target.value)}
placeholder="左"
/>
</Col>
<Col span={8}>
<Input
type="number"
value={rightMargin}
onChange={(e) => setRightMargin(e.target.value)}
placeholder="右"
/>
</Col>
</Row>
</div>
<div className="form-group">
<Checkbox checked={borderEnabled} onChange={() => setBorderEnabled(!borderEnabled)}>
边框
</Checkbox>
</div>
<div className="form-group">
<label>字体大小 (px)</label>
<Slider
min={12}
max={72}
value={fontSize}
onChange={setFontSize}
/>
</div>
<div className="form-group">
<label>边距设置 (px)</label>
<Row gutter={8}>
<Col span={8}>
<Input
type="number"
value={topMargin}
onChange={(e) => setTopMargin(e.target.value)}
placeholder="上"
/>
</Col>
<Col span={8}>
<Input
type="number"
value={leftMargin}
onChange={(e) => setLeftMargin(e.target.value)}
placeholder="左"
/>
</Col>
<Col span={8}>
<Input
type="number"
value={rightMargin}
onChange={(e) => setRightMargin(e.target.value)}
placeholder="右"
/>
</Col>
</Row>
</div>
<div className="form-group">
<label>字体颜色</label>
<Input
type="color"
value={fontColor}
onChange={(e) => setFontColor(e.target.value)}
style={{ width: '100%' }}
/>
</div>
<div className="form-group">
<label>字体大小 (px)</label>
<Slider
min={12}
max={72}
value={fontSize}
onChange={setFontSize}
/>
</div>
<div className="form-group">
<label>文字对齐</label>
<Select value={textAlign} onChange={setTextAlign} style={{ width: '100%' }}>
<Option value="left">居左</Option>
<Option value="center">居中</Option>
<Option value="right">居右</Option>
</Select>
</div>
<div className="form-group">
<label>字体颜色</label>
<Input
type="color"
value={fontColor}
onChange={(e) => setFontColor(e.target.value)}
style={{ width: '100%' }}
/>
</div>
<div className="form-group">
<label>行间距</label>
<Slider
min={1}
max={3}
step={0.1}
value={lineSpacing}
onChange={setLineSpacing}
/>
</div>
<div className="form-group">
<label>文字对齐</label>
<Select value={textAlign} onChange={setTextAlign} style={{ width: '100%' }}>
<Option value="left">居左</Option>
<Option value="center">居中</Option>
<Option value="right">居右</Option>
</Select>
</div>
<div className="form-group">
<label>字符间距 (px)</label>
<Slider
min={0}
max={10}
value={charSpacing}
onChange={setCharSpacing}
/>
</div>
<div className="form-group">
<label>行间距</label>
<Slider
min={1}
max={3}
step={0.1}
value={lineSpacing}
onChange={setLineSpacing}
/>
</div>
<Button type="primary" onClick={handleGenerate} style={{ width: '100%' }}>
生成图片
</Button>
</div>
</Sider>
<Layout>
<Content style={{ margin: '16px' }}>
<Row gutter={16}>
<Col xs={24} lg={12}>
<Title level={4}>输入文本</Title>
<TextArea
rows={15}
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="请输入您的文本..."
<div className="form-group">
<label>字符间距 (px)</label>
<Slider
min={0}
max={10}
value={charSpacing}
onChange={setCharSpacing}
/>
</Col>
<Col xs={24} lg={12}>
<Title level={4}>预览</Title>
<div
className="preview-area"
style={{
fontFamily: font,
fontSize: `${fontSize}px`,
color: fontColor,
textAlign: textAlign,
marginTop: `${topMargin}px`,
marginLeft: `${leftMargin}px`,
marginRight: `${rightMargin}px`,
lineHeight: `${lineSpacing * fontSize}px`,
letterSpacing: `${charSpacing}px`,
border: borderEnabled ? '1px solid #000' : 'none',
backgroundImage: getPaperBackground(),
backgroundSize: getBackgroundSize(),
backgroundRepeat: getBackgroundRepeat(),
padding: '20px',
minHeight: '400px',
boxSizing: 'border-box',
backgroundPosition: `left ${backgroundOffset}px`,
}}
>
{text.split('\n').map((line, index) => (
<p key={index} style={{ margin: 0 }}>{line}</p>
))}
</div>
</div>
</Col>
</Row>
</Content>
<Button type="primary" onClick={handleGenerate} style={{ width: '100%' }}>
生成图片
</Button>
</div>
</Sider>
<Layout>
<Content style={{ padding: '1rem' }}>
<Row gutter={24}>
<Col xs={24} lg={12}>
<div className="section-title">输入文本</div>
<TextArea
rows={15}
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="请输入您的文本..."
style={{ borderRadius: '16px', padding: '1rem' }}
/>
</Col>
<Col xs={24} lg={12}>
<div className="section-title">预览</div>
<div
className="preview-area"
style={{
fontFamily: font,
fontSize: `${fontSize}px`,
color: fontColor,
textAlign: textAlign,
paddingTop: `${topMargin}px`,
paddingLeft: `${leftMargin}px`,
paddingRight: `${rightMargin}px`,
lineHeight: `${lineSpacing * fontSize}px`,
letterSpacing: `${charSpacing}px`,
border: borderEnabled ? '1px solid #000' : 'none',
backgroundImage: getPaperBackground(),
backgroundSize: getBackgroundSize(),
backgroundRepeat: getBackgroundRepeat(),
backgroundPosition: `left ${backgroundOffset}px`,
minHeight: '400px',
}}
>
{text.split('\n').map((line, index) => (
<p key={index} style={{ margin: 0 }}>{line}</p>
))}
</div>
</Col>
</Row>
</Content>
</Layout>
</Layout>
</Layout>
</div>
);
}
......
src/components/QuoteCard.jsx
View file @ c756def8
......@@ -28,42 +28,88 @@ const backgroundOptions = [
];
const Container = styled.div`
display: flex;
flex-direction: row;
gap: 20px;
padding: 20px;
justify-content: center;
background-color: #f5f5f5;
min-height: 100vh;
background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
padding: 2rem;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
`;
const TitleLabel = styled.label`
font-size: 16px; // 增大字体大小
color: #1677FF; // 设置字体颜色为深色
`;
const ContentWrapper = styled.div`
display: flex;
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
@media (max-width: 768px) {
flex-direction: column;
}
`;
const InputContainer = styled.div`
flex: 1;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
gap: 15px;
gap: 1rem;
`;
const TitleLabel = styled.h2`
font-size: 1.8rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.02em;
`;
const PreviewContainer = styled.div`
flex: 1;
background-color: ${(props) => props.$bgColor || '#333333'}; // 使用短暂属性
padding: 20px;
border-radius: 12px;
border: 1px solid #333;
color: ${(props) => props.$fontColor || '#b8b83b'}; // 使用短暂属性
background: ${(props) => props.$bgColor || '#333333'};
padding: 2rem;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
min-height: 200px;
height: fit-content;
align-self: flex-start;
transition: all 0.3s ease;
margin-top: 1rem;
&:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
}
@media (max-width: 768px) {
margin-top: 2rem;
width: 100%;
}
`;
const QuoteText = styled.div`
......@@ -98,19 +144,31 @@ const InputText = styled.textarea`
const InputField = styled.input`
width: 100%;
padding: 10px;
padding: 0.8rem;
border-radius: 8px;
border: 1px solid #dadce0;
font-size: 16px;
border: 1px solid rgba(99, 102, 241, 0.2);
font-size: 1rem;
transition: all 0.3s ease;
&:hover, &:focus {
border-color: rgba(99, 102, 241, 0.4);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
`;
const Select = styled.select`
width: 100%;
padding: 10px;
padding: 0.8rem;
border-radius: 8px;
border: 1px solid #dadce0;
font-size: 16px;
background-color: #fff;
border: 1px solid rgba(99, 102, 241, 0.2);
font-size: 1rem;
transition: all 0.3s ease;
background: white;
cursor: pointer;
&:hover {
border-color: rgba(99, 102, 241, 0.4);
}
`;
const ColorInput = styled.input`
......@@ -121,22 +179,26 @@ const ColorInput = styled.input`
`;
const Label = styled.label`
font-size: 14px;
margin-bottom: 5px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0.5rem;
display: block;
`;
const DownloadButton = styled.button`
padding: 10px 20px;
background-color: #1677ff;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
padding: 1rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
transition: all 0.3s ease;
margin-top: 1rem;
&:hover {
background-color: #2f86ff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
`;
......@@ -179,110 +241,112 @@ function QuoteCard() {
return (
<Container>
{/* 左侧输入区域 */}
<InputContainer>
<TitleLabel>名言卡片生成器</TitleLabel>
<InputText
placeholder="请输入中文名人名言"
value={chineseText}
onChange={(e) => setChineseText(e.target.value)}
/>
<InputText
placeholder="请输入英文翻译"
value={englishText}
onChange={(e) => setEnglishText(e.target.value)}
/>
<InputField
placeholder="请输入作者姓名"
value={author}
onChange={(e) => setAuthor(e.target.value)}
/>
{/* 字体选择 */}
<Label>选择中文字体:</Label>
<Select value={chineseFont} onChange={(e) => setChineseFont(e.target.value)}>
{chineseFonts.map((font) => (
<option key={font.value} value={font.value}>
{font.name}
</option>
))}
</Select>
<Label>选择英文字体:</Label>
<Select value={englishFont} onChange={(e) => setEnglishFont(e.target.value)}>
{englishFonts.map((font) => (
<option key={font.value} value={font.value}>
{font.name}
</option>
))}
</Select>
{/* 字体颜色选择 */}
<Label>选择字体颜色:</Label>
<ColorInput
type="color"
value={fontColor}
onChange={(e) => setFontColor(e.target.value)}
/>
{/* 作者颜色选择 */}
<Label>选择作者颜色:</Label>
<ColorInput
type="color"
value={authorColor}
onChange={(e) => setAuthorColor(e.target.value)}
/>
{/* 背景色选择 */}
<Label>选择背景颜色:</Label>
<Select
value={
backgroundOptions.some((option) => option.value === bgColor)
? bgColor
: 'custom'
}
onChange={handleBackgroundChange}
<ContentWrapper>
{/* 左侧输入区域 */}
<InputContainer>
<TitleLabel>名言卡片生成器</TitleLabel>
<InputText
placeholder="请输入中文名人名言"
value={chineseText}
onChange={(e) => setChineseText(e.target.value)}
/>
<InputText
placeholder="请输入英文翻译"
value={englishText}
onChange={(e) => setEnglishText(e.target.value)}
/>
<InputField
placeholder="请输入作者姓名"
value={author}
onChange={(e) => setAuthor(e.target.value)}
/>
{/* 字体选择 */}
<Label>选择中文字体:</Label>
<Select value={chineseFont} onChange={(e) => setChineseFont(e.target.value)}>
{chineseFonts.map((font) => (
<option key={font.value} value={font.value}>
{font.name}
</option>
))}
</Select>
<Label>选择英文字体:</Label>
<Select value={englishFont} onChange={(e) => setEnglishFont(e.target.value)}>
{englishFonts.map((font) => (
<option key={font.value} value={font.value}>
{font.name}
</option>
))}
</Select>
{/* 字体颜色选择 */}
<Label>选择字体颜色:</Label>
<ColorInput
type="color"
value={fontColor}
onChange={(e) => setFontColor(e.target.value)}
/>
{/* 作者颜色选择 */}
<Label>选择作者颜色:</Label>
<ColorInput
type="color"
value={authorColor}
onChange={(e) => setAuthorColor(e.target.value)}
/>
{/* 背景色选择 */}
<Label>选择背景颜色:</Label>
<Select
value={
backgroundOptions.some((option) => option.value === bgColor)
? bgColor
: 'custom'
}
onChange={handleBackgroundChange}
>
{backgroundOptions.map((option) => (
<option key={option.name} value={option.value}>
{option.name}
</option>
))}
</Select>
{bgColor === 'custom' && (
<>
<Label>选择自定义背景颜色:</Label>
<ColorInput
type="color"
value={customBgColor}
onChange={(e) => setBgColor(e.target.value)}
title="选择自定义背景颜色"
/>
</>
)}
{/* 下载按钮 */}
<DownloadButton onClick={handleDownload}>
下载图片
</DownloadButton>
</InputContainer>
{/* 右侧预览区域 */}
<PreviewContainer
$bgColor={bgColor}
$fontColor={fontColor}
ref={previewRef}
>
{backgroundOptions.map((option) => (
<option key={option.name} value={option.value}>
{option.name}
</option>
))}
</Select>
{bgColor === 'custom' && (
<>
<Label>选择自定义背景颜色:</Label>
<ColorInput
type="color"
value={customBgColor}
onChange={(e) => setBgColor(e.target.value)}
title="选择自定义背景颜色"
/>
</>
)}
{/* 下载按钮 */}
<DownloadButton onClick={handleDownload}>
下载图片
</DownloadButton>
</InputContainer>
{/* 右侧预览区域 */}
<PreviewContainer
$bgColor={bgColor}
$fontColor={fontColor}
ref={previewRef}
>
<QuoteText $color={fontColor} $fontFamily={chineseFont}>
{chineseText || '请输入中文名人名言'}
</QuoteText>
<QuoteText $color={fontColor} $fontFamily={englishFont}>
{englishText || 'Enter the English translation here.'}
</QuoteText>
<QuoteAuthor $color={authorColor} $fontFamily={englishFont}>
—— {author || '作者姓名'}
</QuoteAuthor>
</PreviewContainer>
<QuoteText $color={fontColor} $fontFamily={chineseFont}>
{chineseText || '请输入中文名人名言'}
</QuoteText>
<QuoteText $color={fontColor} $fontFamily={englishFont}>
{englishText || 'Enter the English translation here.'}
</QuoteText>
<QuoteAuthor $color={authorColor} $fontFamily={englishFont}>
—— {author || '作者姓名'}
</QuoteAuthor>
</PreviewContainer>
</ContentWrapper>
</Container>
);
}
......
src/styles/HandwriteGen.css
View file @ c756def8
......@@ -58,3 +58,92 @@ body, html, #root {
.ant-btn {
margin-top: 16px;
}
.handwrite-container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
}
.settings-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
margin: 1rem;
}
.preview-area {
background: rgba(255, 255, 255, 0.9);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
overflow: auto;
padding: 2rem;
}
.preview-area:hover {
box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.3);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0.5rem;
display: block;
}
.ant-select-selector,
.ant-input,
.ant-input-number,
.ant-slider {
border-radius: 8px !important;
border: 1px solid rgba(99, 102, 241, 0.2) !important;
}
.ant-select-selector:hover,
.ant-input:hover,
.ant-input-number:hover {
border-color: rgba(99, 102, 241, 0.4) !important;
}
.ant-btn-primary {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
border: none !important;
border-radius: 8px !important;
height: 40px !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.ant-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.section-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.01em;
}
.title-label {
font-size: 1.8rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.02em;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment