refactor: 大量前端页面/组件样式从硬编码颜色迁移到 antd token 主题变量
This commit is contained in:
xiamuceer-j
@@ -15,7 +15,8 @@ import {
|
||||
Alert,
|
||||
Upload,
|
||||
Spin,
|
||||
Empty
|
||||
Empty,
|
||||
theme
|
||||
} from 'antd';
|
||||
import {
|
||||
EditOutlined,
|
||||
@@ -27,7 +28,7 @@ import {
|
||||
InfoCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import { cardStyles, cardHoverHandlers, gridConfig } from '../components/CardStyles';
|
||||
import { promptTemplateCardStyles, promptTemplateCardHoverHandlers, promptTemplateGridConfig } from '../components/CardStyles';
|
||||
|
||||
const { TextArea } = Input;
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
@@ -54,6 +55,7 @@ interface CategoryGroup {
|
||||
}
|
||||
|
||||
export default function PromptTemplates() {
|
||||
const { token } = theme.useToken();
|
||||
const [modal, contextHolder] = Modal.useModal();
|
||||
const [categories, setCategories] = useState<CategoryGroup[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('0');
|
||||
@@ -246,13 +248,15 @@ export default function PromptTemplates() {
|
||||
};
|
||||
|
||||
const currentTemplates = getCurrentTemplates();
|
||||
const pageBackground = `linear-gradient(180deg, ${token.colorBgLayout} 0%, ${token.colorFillSecondary} 100%)`;
|
||||
const headerBackground = `linear-gradient(135deg, ${token.colorPrimary} 0%, ${token.colorPrimaryHover} 100%)`;
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<div style={{
|
||||
minHeight: '90vh',
|
||||
background: 'linear-gradient(180deg, var(--color-bg-base) 0%, #EEF2F3 100%)',
|
||||
background: pageBackground,
|
||||
padding: isMobile ? '20px 16px 70px' : '24px 24px 70px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -269,9 +273,9 @@ export default function PromptTemplates() {
|
||||
<Card
|
||||
variant="borderless"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, var(--color-primary) 0%, #5A9BA5 50%, var(--color-primary-hover) 100%)',
|
||||
background: headerBackground,
|
||||
borderRadius: isMobile ? 16 : 24,
|
||||
boxShadow: '0 12px 40px rgba(77, 128, 136, 0.25), 0 4px 12px rgba(0, 0, 0, 0.06)',
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
marginBottom: isMobile ? 20 : 24,
|
||||
border: 'none',
|
||||
position: 'relative',
|
||||
@@ -279,18 +283,18 @@ export default function PromptTemplates() {
|
||||
}}
|
||||
>
|
||||
{/* 装饰性背景元素 */}
|
||||
<div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.08)', pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', bottom: -40, left: '30%', width: 120, height: 120, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.05)', pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', top: '50%', right: '15%', width: 80, height: 80, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.06)', pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: token.colorWhite, opacity: 0.08, pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', bottom: -40, left: '30%', width: 120, height: 120, borderRadius: '50%', background: token.colorWhite, opacity: 0.05, pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', top: '50%', right: '15%', width: 80, height: 80, borderRadius: '50%', background: token.colorWhite, opacity: 0.06, pointerEvents: 'none' }} />
|
||||
|
||||
<Row align="middle" justify="space-between" gutter={[16, 16]} style={{ position: 'relative', zIndex: 1 }}>
|
||||
<Col xs={24} sm={12} md={14}>
|
||||
<Space direction="vertical" size={4}>
|
||||
<Title level={isMobile ? 3 : 2} style={{ margin: 0, color: '#fff', textShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
|
||||
<FileSearchOutlined style={{ color: 'rgba(255,255,255,0.9)', marginRight: 8 }} />
|
||||
<Title level={isMobile ? 3 : 2} style={{ margin: 0, color: token.colorWhite, textShadow: `0 2px 4px ${token.colorBgMask}` }}>
|
||||
<FileSearchOutlined style={{ color: token.colorWhite, opacity: 0.9, marginRight: 8 }} />
|
||||
提示词模板管理
|
||||
</Title>
|
||||
<Text style={{ fontSize: isMobile ? 12 : 14, color: 'rgba(255,255,255,0.85)', marginLeft: isMobile ? 40 : 48 }}>
|
||||
<Text style={{ fontSize: isMobile ? 12 : 14, color: token.colorTextLightSolid, opacity: 0.85, marginLeft: isMobile ? 40 : 48 }}>
|
||||
自定义AI生成提示词，打造个性化创作体验
|
||||
</Text>
|
||||
</Space>
|
||||
@@ -303,10 +307,11 @@ export default function PromptTemplates() {
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
background: 'rgba(255, 255, 255, 0.15)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
color: '#fff',
|
||||
background: token.colorWhite,
|
||||
border: `1px solid ${token.colorWhite}`,
|
||||
boxShadow: token.boxShadow,
|
||||
color: token.colorPrimary,
|
||||
fontWeight: 600,
|
||||
backdropFilter: 'blur(10px)',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
@@ -323,10 +328,11 @@ export default function PromptTemplates() {
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
background: 'rgba(255, 255, 255, 0.15)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
color: '#fff',
|
||||
background: token.colorWhite,
|
||||
border: `1px solid ${token.colorWhite}`,
|
||||
boxShadow: token.boxShadow,
|
||||
color: token.colorPrimary,
|
||||
fontWeight: 600,
|
||||
backdropFilter: 'blur(10px)',
|
||||
}}
|
||||
>
|
||||
@@ -341,7 +347,7 @@ export default function PromptTemplates() {
|
||||
<Alert
|
||||
message={
|
||||
<Space align="center">
|
||||
<InfoCircleOutlined style={{ fontSize: 16, color: 'var(--color-primary)' }} />
|
||||
<InfoCircleOutlined style={{ fontSize: 16, color: token.colorPrimary }} />
|
||||
<Text strong style={{ fontSize: isMobile ? 13 : 14 }}>使用说明</Text>
|
||||
</Space>
|
||||
}
|
||||
@@ -360,8 +366,8 @@ export default function PromptTemplates() {
|
||||
style={{
|
||||
marginTop: isMobile ? 16 : 24,
|
||||
borderRadius: 12,
|
||||
background: 'var(--color-info-bg)',
|
||||
border: '1px solid var(--color-info-border)'
|
||||
background: token.colorInfoBg,
|
||||
border: `1px solid ${token.colorInfoBorder}`
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
@@ -374,9 +380,9 @@ export default function PromptTemplates() {
|
||||
<Card
|
||||
variant="borderless"
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0.95)',
|
||||
background: token.colorBgContainer,
|
||||
borderRadius: isMobile ? 12 : 16,
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
marginBottom: isMobile ? 16 : 24
|
||||
}}
|
||||
styles={{ body: { padding: isMobile ? '12px' : '16px' } }}
|
||||
@@ -400,9 +406,9 @@ export default function PromptTemplates() {
|
||||
<Card
|
||||
variant="borderless"
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0.95)',
|
||||
background: token.colorBgContainer,
|
||||
borderRadius: isMobile ? 12 : 16,
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
}}
|
||||
>
|
||||
<Empty
|
||||
@@ -413,25 +419,25 @@ export default function PromptTemplates() {
|
||||
) : (
|
||||
<Row gutter={[16, 16]}>
|
||||
{currentTemplates.map(template => (
|
||||
<Col {...gridConfig} key={template.id}>
|
||||
<Col {...promptTemplateGridConfig} key={template.id}>
|
||||
<Card
|
||||
hoverable
|
||||
variant="borderless"
|
||||
style={cardStyles.project}
|
||||
style={promptTemplateCardStyles.templateCard}
|
||||
styles={{ body: { padding: 0, overflow: 'hidden' } }}
|
||||
{...cardHoverHandlers}
|
||||
{...promptTemplateCardHoverHandlers}
|
||||
>
|
||||
{/* 头部 */}
|
||||
<div style={{
|
||||
background: template.is_system_default
|
||||
? 'var(--color-bg-layout)'
|
||||
: 'var(--color-primary)',
|
||||
? token.colorFillTertiary
|
||||
: token.colorPrimary,
|
||||
padding: isMobile ? '16px' : '20px',
|
||||
position: 'relative'
|
||||
}}>
|
||||
<Space direction="vertical" size={8} style={{ width: '100%' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Title level={isMobile ? 5 : 4} style={{ margin: 0, color: template.is_system_default ? 'var(--color-text-primary)' : '#fff', flex: 1 }} ellipsis>
|
||||
<Title level={isMobile ? 5 : 4} style={{ margin: 0, color: template.is_system_default ? token.colorText : token.colorWhite, flex: 1 }} ellipsis>
|
||||
{template.template_name}
|
||||
</Title>
|
||||
{!template.is_system_default && (
|
||||
@@ -444,10 +450,10 @@ export default function PromptTemplates() {
|
||||
)}
|
||||
</div>
|
||||
<Space wrap>
|
||||
<Tag color={template.is_system_default ? 'default' : 'rgba(255,255,255,0.3)'} style={{ color: template.is_system_default ? 'var(--color-text-secondary)' : '#fff', border: 'none' }}>
|
||||
<Tag color={template.is_system_default ? 'default' : 'rgba(255,255,255,0.3)'} style={{ color: template.is_system_default ? token.colorTextSecondary : token.colorWhite, border: 'none' }}>
|
||||
{template.category}
|
||||
</Tag>
|
||||
<Tag color={template.is_system_default ? 'default' : 'rgba(255,255,255,0.3)'} style={{ color: template.is_system_default ? 'var(--color-text-secondary)' : '#fff', border: 'none' }}>
|
||||
<Tag color={template.is_system_default ? 'default' : 'rgba(255,255,255,0.3)'} style={{ color: template.is_system_default ? token.colorTextSecondary : token.colorWhite, border: 'none' }}>
|
||||
{template.is_system_default ? '系统默认' : '已自定义'}
|
||||
</Tag>
|
||||
</Space>
|
||||
|
||||
Reference in New Issue
Block a user