admin/MuMuAINovel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 大量前端页面/组件样式从硬编码颜色迁移到 antd token 主题变量

Browse Source
This commit is contained in:
xiamuceer-j
2026-03-06 14:14:57 +08:00
parent 7c9716b485
commit f1d7975ea4
40 changed files with 1755 additions and 1375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Sponsor.tsx
+81 -56
View File
@@ -1,12 +1,13 @@
import { useState } from 'react';
import { Card, Row, Col, Typography, Image, Divider, Modal, Button } from 'antd';
import { useState, type ReactNode } from 'react';
import { Card, Row, Col, Typography, Image, Divider, Modal, Button, theme } from 'antd';
import {
HeartOutlined,
CheckCircleOutlined,
FileTextOutlined,
RocketOutlined,
MessageOutlined,
StarOutlined
// StarOutlined,
WechatOutlined
} from '@ant-design/icons';
const { Title, Paragraph, Text } = Typography;
@@ -18,6 +19,13 @@ interface SponsorOption {
description: string;
}
interface SponsorBenefit {
icon: ReactNode;
title: string;
description: string;
price?: string;
}
const sponsorOptions: SponsorOption[] = [
{ amount: 5, label: '🌶️ 一包辣条', image: '/5.png', description: '¥5' },
{ amount: 10, label: '🍱 一顿拼好饭', image: '/10.png', description: '¥10' },
@@ -26,27 +34,39 @@ const sponsorOptions: SponsorOption[] = [
{ amount: 99, label: '🍲 一顿海底捞', image: '/99.png', description: '¥99' },
];
const benefits = [
const benefits: SponsorBenefit[] = [
{
icon: <FileTextOutlined style={{ fontSize: '32px', color: 'var(--color-primary)' }} />,
icon: <WechatOutlined style={{ fontSize: '32px', color: 'var(--ant-color-primary)' }} />,
title: '加入赞助群',
description: '进入内部群，获取项目第一手更新消息',
price: '（🌶️ 一包辣条）'
},
{
icon: <FileTextOutlined style={{ fontSize: '32px', color: 'var(--ant-color-primary)' }} />,
title: '优先需求响应',
description: '您的功能需求和问题反馈将获得优先处理'
description: '您的功能需求和问题反馈将获得优先处理',
price: '（🌶️ 一包辣条）'
},
{
icon: <RocketOutlined style={{ fontSize: '32px', color: 'var(--color-success)' }} />,
icon: <RocketOutlined style={{ fontSize: '32px', color: 'var(--ant-color-success)' }} />,
title: 'Windows一键启动',
description: '获取免安装一键启动包，开箱即可使用'
description: '获取免安装一键启动包，开箱即可使用',
price: '（🌶️ 一包辣条）'
},
{
icon: <MessageOutlined style={{ fontSize: '32px', color: 'var(--color-warning)' }} />,
icon: <MessageOutlined style={{ fontSize: '32px', color: 'var(--ant-color-warning)' }} />,
title: '专属技术支持',
description: '加入赞助者群，获得远程协助和配置指导（☕ 一杯咖啡）'
description: '获得远程协助和配置指导',
price: '（☕ 一杯咖啡）'
}
];
export default function Sponsor() {
const [modalVisible, setModalVisible] = useState(false);
const [selectedOption, setSelectedOption] = useState<SponsorOption | null>(null);
const { token } = theme.useToken();
const alphaColor = (color: string, alpha: number) =>
`color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
const handleCardClick = (option: SponsorOption) => {
setSelectedOption(option);
@@ -64,10 +84,11 @@ export default function Sponsor() {
flex: 1,
overflowY: 'auto',
overflowX: 'hidden',
padding: 'clamp(16px, 3vh, 24px) clamp(12px, 2vw, 16px)'
// padding: 'clamp(16px, 3vh, 24px) clamp(12px, 2vw, 16px)'
}}>
<div style={{
maxWidth: '1200px',
// maxWidth: '1200px',
height: '100%',
margin: '0 auto',
width: '100%',
display: 'flex',
@@ -76,46 +97,45 @@ export default function Sponsor() {
}}>
{/* 头部标题区域 */}
<div style={{ textAlign: 'center', marginBottom: 'clamp(20px, 4vh, 32px)' }}>
<Title level={1} style={{ marginBottom: '8px', fontSize: 'clamp(24px, 5vw, 32px)', fontWeight: 'bold' }}>
赞助 MuMuAINovel
</Title>
<Text type="secondary" style={{ fontSize: 'clamp(11px, 2vw, 13px)', letterSpacing: '2px' }}>
SUPPORT AI NOVEL CREATION
</Text>
<div style={{
marginTop: 'clamp(12px, 2vh, 16px)',
padding: 'clamp(12px, 2vh, 16px)',
background: 'var(--color-primary)',
background: token.colorPrimary,
borderRadius: '12px',
color: '#fff'
color: token.colorWhite
}}>
<Title level={4} style={{ color: '#fff', marginBottom: '8px' }}>
<Title level={1} style={{ color: token.colorWhite, marginBottom: '8px', fontSize: 'clamp(24px, 5vw, 32px)', fontWeight: 'bold' }}>
赞助 MuMuAINovel
</Title>
<Text type="secondary" style={{ color: token.colorWhite, fontSize: 'clamp(11px, 2vw, 13px)', letterSpacing: '2px' }}>
SUPPORT MuMuAINovel
</Text>
<Title level={4} style={{ color: token.colorWhite, marginTop: '8px', marginBottom: '8px' }}>
📚 MuMuAINovel - 基于 AI 的智能小说创作助手
</Title>
<Paragraph style={{ color: '#fff', fontSize: '14px', margin: 0 }}>
支持多AI模型、智能向导、角色管理、章节编辑等强大功能
</Paragraph>
</div>
</div>
{/* 赞助专属权益 */}
<div style={{ marginBottom: 'clamp(24px, 4vh, 32px)' }}>
<Title level={3} style={{ textAlign: 'center', marginBottom: 'clamp(16px, 3vh, 20px)', fontSize: 'clamp(18px, 3vw, 24px)' }}>
<CheckCircleOutlined style={{ color: 'var(--color-success)', marginRight: '8px' }} />
<CheckCircleOutlined style={{ color: token.colorSuccess, marginRight: '8px' }} />
赞助专属权益
</Title>
<Row gutter={[{ xs: 8, sm: 12, md: 16 }, { xs: 8, sm: 12, md: 16 }]}>
<Row
gutter={[{ xs: 8, sm: 12, md: 16 }, { xs: 8, sm: 12, md: 16 }]}
wrap={false}
style={{ overflowX: 'auto', paddingBottom: '4px' }}
>
{benefits.map((benefit, index) => (
<Col xs={24} md={8} key={index}>
<Col key={index} flex="1" style={{ minWidth: '200px' }}>
<Card
hoverable
style={{
height: '100%',
textAlign: 'center',
borderRadius: '10px',
boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
boxShadow: `0 2px 8px ${alphaColor(token.colorTextBase, 0.12)}`
}}
styles={{
body: { padding: 'clamp(16px, 3vh, 20px) clamp(12px, 2vw, 16px)' }
@@ -125,9 +145,14 @@ export default function Sponsor() {
{benefit.icon}
</div>
<Title level={5} style={{ marginBottom: '8px', fontSize: 'clamp(14px, 2.5vw, 16px)' }}>{benefit.title}</Title>
<Paragraph style={{ color: '#666', marginBottom: 0, fontSize: 'clamp(12px, 2vw, 13px)' }}>
<Paragraph style={{ color: token.colorTextSecondary, marginBottom: 0, fontSize: 'clamp(12px, 2vw, 13px)' }}>
{benefit.description}
</Paragraph>
{benefit.price && (
<Paragraph style={{ color: token.colorWarning, margin: '4px 0 0', fontSize: 'clamp(12px, 2vw, 13px)', fontWeight: 600 }}>
{benefit.price}
</Paragraph>
)}
</Card>
</Col>
))}
@@ -135,9 +160,9 @@ export default function Sponsor() {
</div>
{/* 选择金额 */}
<div style={{ marginBottom: 'clamp(24px, 4vh, 32px)' }}>
<div>
<Title level={3} style={{ textAlign: 'center', marginBottom: 'clamp(16px, 3vh, 20px)', fontSize: 'clamp(18px, 3vw, 24px)' }}>
<HeartOutlined style={{ color: '#f5222d', marginRight: '8px' }} />
<HeartOutlined style={{ color: token.colorError, marginRight: '8px' }} />
选择金额
</Title>
@@ -150,34 +175,34 @@ export default function Sponsor() {
style={{
textAlign: 'center',
borderRadius: '10px',
boxShadow: 'var(--shadow-card)',
boxShadow: `0 2px 8px ${alphaColor(token.colorTextBase, 0.12)}`,
cursor: 'pointer',
transition: 'all 0.3s',
border: '2px solid var(--color-border)'
border: `2px solid ${token.colorBorder}`
}}
styles={{
body: { padding: 'clamp(16px, 3vh, 20px) clamp(10px, 2vw, 12px)' }
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'translateY(-8px)';
e.currentTarget.style.boxShadow = 'var(--shadow-elevated)';
e.currentTarget.style.borderColor = 'var(--color-primary)';
e.currentTarget.style.boxShadow = `0 8px 24px ${alphaColor(token.colorPrimary, 0.3)}`;
e.currentTarget.style.borderColor = token.colorPrimary;
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = 'var(--shadow-card)';
e.currentTarget.style.borderColor = 'var(--color-border)';
e.currentTarget.style.boxShadow = `0 2px 8px ${alphaColor(token.colorTextBase, 0.12)}`;
e.currentTarget.style.borderColor = token.colorBorder;
}}
>
<Title level={3} style={{
color: 'var(--color-primary)',
color: token.colorPrimary,
marginBottom: '4px',
fontSize: 'clamp(20px, 4vw, 28px)',
fontWeight: 'bold'
}}>
{option.description}
</Title>
<Text style={{ fontSize: 'clamp(12px, 2vw, 14px)', color: '#666' }}>
<Text style={{ fontSize: 'clamp(12px, 2vw, 14px)', color: token.colorTextSecondary }}>
{option.label}
</Text>
</Card>
@@ -186,29 +211,29 @@ export default function Sponsor() {
</Row>
</div>
<Divider style={{ margin: 'clamp(16px, 3vh, 24px) 0' }} />
<Divider style={{ margin: 'clamp(16px, 3vh, 18px) 0' }} />
{/* 感谢文案 */}
<div style={{
textAlign: 'center',
padding: 'clamp(16px, 3vh, 24px) clamp(16px, 3vw, 20px)',
background: '#f9f9f9',
padding: 'clamp(16px, 3vw, 20px)',
background: token.colorFillQuaternary,
borderRadius: '10px',
marginTop: 'auto'
}}>
<Title level={4} style={{ marginBottom: '12px', fontSize: 'clamp(16px, 3vw, 20px)' }}>
💖 感谢您对 MuMuAINovel 项目的支持
</Title>
<Paragraph style={{ fontSize: 'clamp(12px, 2vw, 14px)', color: '#666', marginBottom: '12px' }}>
您的赞助将是我持续更新项目的动力，为大家提供更好的AI小说创作体验
<Paragraph style={{ fontSize: 'clamp(12px, 2vw, 14px)', color: token.colorTextSecondary, marginBottom: '12px' }}>
您的赞助将是我持续更新项目的动力，为大家提供更好的AI小说创作体验!
</Paragraph>
<div style={{ fontSize: 'clamp(18px, 3vw, 24px)' }}>
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
</div>
{/* <div style={{ fontSize: 'clamp(18px, 3vw, 24px)' }}>
<StarOutlined style={{ color: token.colorWarning, margin: '0 4px' }} />
<StarOutlined style={{ color: token.colorWarning, margin: '0 4px' }} />
<StarOutlined style={{ color: token.colorWarning, margin: '0 4px' }} />
<StarOutlined style={{ color: token.colorWarning, margin: '0 4px' }} />
<StarOutlined style={{ color: token.colorWarning, margin: '0 4px' }} />
</div> */}
</div>
</div>
</div>
@@ -240,14 +265,14 @@ export default function Sponsor() {
style={{
maxWidth: '280px',
borderRadius: '8px',
border: '1px solid #f0f0f0'
border: `1px solid ${token.colorBorderSecondary}`
}}
preview={false}
/>
<Paragraph style={{ marginTop: '20px', color: '#666' }}>
<Paragraph style={{ marginTop: '20px', color: token.colorTextSecondary }}>
扫描二维码完成支付
</Paragraph>
<Paragraph style={{ color: '#999', fontSize: '12px' }}>
<Paragraph style={{ color: token.colorTextTertiary, fontSize: '12px' }}>
支付后可添加微信/QQ联系我们获取权益
</Paragraph>
</div>