Menü
创建符合 Ant Design 规范的企业级中后台界面。使用此技能构建专业、规范、高效的管理系统界面。遵循蚂蚁金服设计语言，确保一致性和可用性，同时通过美学设计提升用户体验。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
本技能指导创建符合 Ant Design 设计体系的企业级中后台界面，确保专业性、一致性和高可用性。实现真实可用的代码，严格遵循 Ant Design 设计原则和最佳实践，同时通过美学设计提升界面质感和信息传达效率。
用户提供前端需求：组件、页面、应用或界面。可能包括业务场景、用户角色或技术约束。
在编码前，理解业务场景并遵循 Ant Design 设计原则：
核心原则: 遵循 Ant Design 的「自然」、「确定性」、「意义感」、「生长性」四大设计价值观。
然后实现符合以下标准的生产级代码：
数据展示类:
数据录入类:
反馈类:
导航类:
色彩体系:
字体规范:
圆角规范:
阴影规范:
动效:
反馈:
响应式:
在遵循 Ant Design 规范的基础上，通过精细的美学设计提升界面品质感和用户体验。企业级应用不应该是冰冷的工具，而应该是优雅高效的工作伙伴。
视觉层级的建立:
// 通过字号、字重、颜色建立清晰的信息层级
<div style={{
fontSize: 20,
fontWeight: 600,
color: 'rgba(0, 0, 0, 0.85)',
marginBottom: 8
}}>
主标题 - 引导注意力
</div>
<div style={{
fontSize: 14,
color: 'rgba(0, 0, 0, 0.65)',
lineHeight: 1.5715,
marginBottom: 16
}}>
正文内容 - 核心信息传达，使用合适的行高确保可读性
</div>
<div style={{
fontSize: 12,
color: 'rgba(0, 0, 0, 0.45)'
}}>
辅助说明 - 次要信息
</div>
文字排版原则:
表格排版优化:
// 优化表格可读性
<Table
columns={[
{
title: '订单号',
dataIndex: 'orderNo',
width: 180,
// 使用等宽字体显示编号，提升对齐感
render: (text) => <span style={{ fontFamily: 'Monaco, Consolas, monospace' }}>{text}</span>
},
{
title: '金额',
dataIndex: 'amount',
width: 120,
align: 'right', // 数字右对齐
render: (value) => (
<span style={{
fontFamily: 'DIN, Helvetica Neue, Arial',
fontWeight: 600,
color: value > 10000 ? '#f5222d' : 'rgba(0, 0, 0, 0.85)'
}}>
¥{value.toLocaleString()}
</span>
)
}
]}
// 适当增加行高，避免拥挤
rowClassName={() => 'custom-table-row'}
/>
<style>{`
.custom-table-row td {
padding: 16px !important;
}
`}</style>
色彩层次系统:
// 基于 Ant Design 色板，建立更细腻的色彩层次
const colorSystem = {
// 主色调 - 品牌感与重要操作
primary: {
default: '#1890ff',
hover: '#40a9ff',
active: '#096dd9',
light: '#e6f7ff', // 用于背景提示
lighter: '#f0f9ff' // 用于大面积背景
},
// 功能色 - 状态传达
status: {
success: '#52c41a',
successBg: '#f6ffed',
warning: '#faad14',
warningBg: '#fffbe6',
error: '#f5222d',
errorBg: '#fff1f0',
info: '#1890ff',
infoBg: '#e6f7ff'
},
// 中性色 - 信息层级
neutral: {
title: 'rgba(0, 0, 0, 0.85)', // 主标题
primary: 'rgba(0, 0, 0, 0.65)', // 正文
secondary: 'rgba(0, 0, 0, 0.45)', // 次要信息
disabled: 'rgba(0, 0, 0, 0.25)', // 禁用状态
border: '#d9d9d9', // 边框
divider: '#f0f0f0', // 分割线
background: '#fafafa', // 背景
container: '#ffffff' // 容器背景
}
};
色彩使用原则:
色彩应用示例:
// 状态标签的精细化色彩设计
const StatusTag = ({ status }) => {
const statusConfig = {
success: {
bg: 'linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%)',
color: '#52c41a',
border: '#b7eb8f'
},
warning: {
bg: 'linear-gradient(135deg, #fffbe6 0%, #fff1b8 100%)',
color: '#faad14',
border: '#ffe58f'
},
error: {
bg: 'linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%)',
color: '#f5222d',
border: '#ffa39e'
}
};
const config = statusConfig[status];
return (
<span style={{
display: 'inline-block',
padding: '2px 12px',
background: config.bg,
color: config.color,
border: `1px solid ${config.border}`,
borderRadius: 2,
fontSize: 12,
fontWeight: 500
}}>
{status}
</span>
);
};
数据可视化色彩:
// 图表配色 - 使用和谐的色彩组合
const chartColors = {
// 分类色板 - 用于饼图、柱状图等
categorical: [
'#1890ff', '#52c41a', '#faad14', '#f5222d',
'#722ed1', '#13c2c2', '#eb2f96', '#fa8c16'
],
// 渐进色板 - 用于热力图、渐变区域图
sequential: {
blue: ['#e6f7ff', '#bae7ff', '#91d5ff', '#69c0ff', '#40a9ff', '#1890ff', '#096dd9'],
green: ['#f6ffed', '#d9f7be', '#b7eb8f', '#95de64', '#73d13d', '#52c41a', '#389e0d']
}
};
间距系统:
// 基于 8px 基准的间距体系
const spacing = {
xs: 4, // 极小间距 - 图标与文字
sm: 8, // 小间距 - 表单项内部、按钮组
md: 16, // 标准间距 - 卡片内边距、表单项之间
lg: 24, // 大间距 - 卡片之间、区块之间
xl: 32, // 超大间距 - 页面区域之间
xxl: 48 // 极大间距 - 页面顶部、重要区块分隔
};
留白原则:
间距应用示例:
// 优雅的卡片布局
<Card
style={{
marginBottom: 24,
padding: 0 // 重置默认padding
}}
bodyStyle={{
padding: '24px 32px' // 自定义内边距，增加宽松感
}}
>
{/* 标题区 */}
<div style={{ marginBottom: 24 }}>
<h3 style={{
fontSize: 16,
fontWeight: 600,
marginBottom: 8,
color: 'rgba(0, 0, 0, 0.85)'
}}>
数据概览
</h3>
<p style={{
fontSize: 14,
color: 'rgba(0, 0, 0, 0.45)',
marginBottom: 0
}}>
最近 30 天的业务数据统计
</p>
</div>
{/* 数据区 - 使用栅格控制间距 */}
<Row gutter={[24, 16]}>
<Col span={6}>
<Statistic title="总销售额" value={112893} prefix="¥" />
</Col>
<Col span={6}>
<Statistic title="订单数" value={1234} />
</Col>
<Col span={6}>
<Statistic title="新增用户" value={567} />
</Col>
<Col span={6}>
<Statistic title="转化率" value={25.8} suffix="%" />
</Col>
</Row>
</Card>
// 表单的韵律感
<Form
layout="vertical" // 垂直布局增加呼吸感
style={{ maxWidth: 600 }}
>
<Form.Item
label="项目名称"
name="name"
style={{ marginBottom: 24 }} // 增加表单项间距
>
<Input placeholder="请输入项目名称" />
</Form.Item>
<Form.Item
label="项目描述"
name="description"
style={{ marginBottom: 24 }}
>
<Input.TextArea
rows={4}
placeholder="请输入项目描述"
style={{ resize: 'none' }} // 禁止拉伸，保持整洁
/>
</Form.Item>
{/* 操作按钮区 - 顶部留出更多空间 */}
<Form.Item style={{ marginTop: 32, marginBottom: 0 }}>
<Space size={12}>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button>
取消
</Button>
</Space>
</Form.Item>
</Form>
1. 微妙的投影与边框:
// 不同层级的卡片阴影
const elevationStyles = {
// 平面 - 仅边框
flat: {
border: '1px solid #f0f0f0',
boxShadow: 'none'
},
// 轻微抬起 - 用于普通卡片
low: {
border: '1px solid #f0f0f0',
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02)'
},
// 中度抬起 - 用于悬浮卡片
medium: {
border: 'none',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.09), 0 4px 16px rgba(0, 0, 0, 0.06)'
},
// 高度抬起 - 用于模态框
high: {
border: 'none',
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.12), 0 9px 28px rgba(0, 0, 0, 0.08)'
}
};
// 悬浮交互
<Card
style={{
...elevationStyles.low,
transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
cursor: 'pointer'
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'translateY(-2px)';
e.currentTarget.style.boxShadow = elevationStyles.medium.boxShadow;
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = elevationStyles.low.boxShadow;
}}
>
内容
</Card>
2. 精致的分割线:
// 多样化的分割方式
// 细线分割 - 轻量
<Divider style={{ margin: '24px 0', borderColor: '#f0f0f0' }} />
// 带文字分割 - 语义化
<Divider orientation="left" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.45)' }}>
基本信息
</Divider>
// 空间分割 - 使用背景色
<div style={{
height: 8,
background: '#fafafa',
margin: '24px -24px' // 负边距延伸到卡片边缘
}} />
// 渐变分割 - 高级感
<div style={{
height: 1,
background: 'linear-gradient(90deg, transparent 0%, #d9d9d9 50%, transparent 100%)',
margin: '24px 0'
}} />
3. 数据的视觉化强调:
// 关键数据的强调展示
<div style={{
display: 'inline-flex',
alignItems: 'baseline',
gap: 4
}}>
<span style={{
fontSize: 32,
fontWeight: 600,
fontFamily: 'DIN, Helvetica Neue, Arial',
color: '#1890ff',
lineHeight: 1
}}>
1,234
</span>
<span style={{
fontSize: 14,
color: 'rgba(0, 0, 0, 0.45)'
}}>
订单
</span>
<span style={{
fontSize: 12,
color: '#52c41a',
marginLeft: 8
}}>
↑ 12.5%
</span>
</div>
// 进度条的精细设计
<div style={{
width: '100%',
height: 6,
background: '#f0f0f0',
borderRadius: 3,
overflow: 'hidden',
position: 'relative'
}}>
<div style={{
position: 'absolute',
left: 0,
top: 0,
height: '100%',
width: '68%',
background: 'linear-gradient(90deg, #1890ff 0%, #36cfc9 100%)',
borderRadius: 3,
transition: 'width 0.6s cubic-bezier(0.645, 0.045, 0.355, 1)'
}} />
</div>
4. 图标与文字的和谐组合:
// 图标与文字的对齐
<Space size={8} align="center">
<UserOutlined style={{ fontSize: 16, color: '#1890ff' }} />
<span style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.65)' }}>
管理员
</span>
</Space>
// 图标按钮的精致设计
<button style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: 32,
height: 32,
border: '1px solid #d9d9d9',
borderRadius: 2,
background: '#fff',
cursor: 'pointer',
transition: 'all 0.3s',
':hover': {
borderColor: '#1890ff',
color: '#1890ff'
}
}}>
<SettingOutlined style={{ fontSize: 16 }} />
</button>
5. 加载与骨架屏的优雅过渡:
// 使用骨架屏保持布局稳定
{loading ? (
<Card>
<Skeleton
active
paragraph={{ rows: 4 }}
title={{ width: '40%' }}
/>
</Card>
) : (
<Card>
<h3>{data.title}</h3>
<p>{data.content}</p>
</Card>
)}
// 自定义加载动画
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minHeight: 200,
color: 'rgba(0, 0, 0, 0.25)'
}}>
<Spin
indicator={<LoadingOutlined style={{ fontSize: 32 }} spin />}
tip="数据加载中..."
/>
</div>
在完成界面设计后，使用以下清单检查美学细节：
排版检查:
色彩检查:
间距检查:
质感检查:
列表页:
<Card
bordered={false}
style={{
borderRadius: 4,
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03)'
}}
>
{/* 筛选区 - 增加垂直间距 */}
<Form layout="inline" style={{ marginBottom: 24 }}>
<Form.Item label="状态" style={{ marginBottom: 16 }}>
<Select style={{ width: 120 }} placeholder="请选择" />
</Form.Item>
<Form.Item label="日期" style={{ marginBottom: 16 }}>
<RangePicker />
</Form.Item>
<Form.Item style={{ marginBottom: 16 }}>
<Space size={12}>
<Button type="primary">查询</Button>
<Button>重置</Button>
</Space>
</Form.Item>
</Form>
{/* 操作区 - 使用分割线分隔 */}
<div style={{
marginBottom: 16,
paddingBottom: 16,
borderBottom: '1px solid #f0f0f0'
}}>
<Space size={12}>
<Button type="primary" icon={<PlusOutlined />}>
新建
</Button>
<Button icon={<UploadOutlined />}>
批量导入
</Button>
<Button icon={<DownloadOutlined />}>
导出
</Button>
</Space>
</div>
{/* 表格区 - 优化行高和边距 */}
<Table
columns={columns}
dataSource={data}
pagination={{
pageSize: 10,
showSizeChanger: true,
showTotal: (total) => `共 ${total} 条`
}}
rowSelection={rowSelection}
size="middle" // 使用适中的行高
/>
</Card>
表单页:
<Card
title="基本信息"
bordered={false}
style={{
maxWidth: 800,
margin: '0 auto',
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03)'
}}
>
<Form
layout="horizontal"
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
requiredMark={false} // 使用自定义必填标记
>
<Form.Item
label={
<span>
<span style={{ color: '#f5222d', marginRight: 4 }}>*</span>
项目名称
</span>
}
name="name"
rules={[{ required: true }]}
style={{ marginBottom: 24 }}
>
<Input placeholder="请输入项目名称" />
</Form.Item>
<Form.Item
label="项目描述"
name="description"
style={{ marginBottom: 24 }}
>
<Input.TextArea
rows={4}
placeholder="请输入项目描述"
showCount
maxLength={200}
/>
</Form.Item>
{/* 分组标题 */}
<Divider orientation="left" style={{
fontSize: 14,
color: 'rgba(0, 0, 0, 0.85)',
fontWeight: 600
}}>
高级设置
</Divider>
<Form.Item
label="项目类型"
name="type"
style={{ marginBottom: 24 }}
>
<Select placeholder="请选择项目类型">
<Select.Option value="web">Web 应用</Select.Option>
<Select.Option value="mobile">移动应用</Select.Option>
</Select>
</Form.Item>
{/* 操作按钮 - 顶部留白 */}
<Form.Item
wrapperCol={{ offset: 4, span: 16 }}
style={{ marginTop: 40, marginBottom: 0 }}
>
<Space size={12}>
<Button type="primary" htmlType="submit" size="large">
提交
</Button>
<Button size="large">
取消
</Button>
</Space>
</Form.Item>
</Form>
</Card>
详情页:
<>
{/* 页头 - 增加视觉层次 */}
<div style={{
background: '#fff',
padding: '24px 32px',
marginBottom: 24,
borderRadius: 2,
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03)'
}}>
<div style={{ marginBottom: 16 }}>
<Space size={8}>
<ArrowLeftOutlined style={{ fontSize: 16, cursor: 'pointer' }} />
<span style={{ fontSize: 20, fontWeight: 600 }}>订单详情</span>
</Space>
</div>
<div style={{
fontSize: 14,
color: 'rgba(0, 0, 0, 0.45)',
marginBottom: 16
}}>
订单编号：#20230615001
</div>
<Space size={12}>
<Button type="primary">审核通过</Button>
<Button>驳回</Button>
<Button icon={<DownloadOutlined />}>导出</Button>
</Space>
</div>
{/* 基本信息卡片 */}
<Card
title="基本信息"
bordered={false}
style={{
marginBottom: 24,
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03)'
}}
>
<Descriptions column={2} colon={false}>
<Descriptions.Item
label={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>订单号</span>}
>
<span style={{ fontFamily: 'Monaco, Consolas, monospace' }}>
20230615001
</span>
</Descriptions.Item>
<Descriptions.Item
label={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>状态</span>}
>
<Badge status="success" text="已完成" />
</Descriptions.Item>
<Descriptions.Item
label={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>创建时间</span>}
>
2023-06-15 14:30:00
</Descriptions.Item>
<Descriptions.Item
label={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>订单金额</span>}
>
<span style={{
fontSize: 16,
fontWeight: 600,
fontFamily: 'DIN, Helvetica Neue, Arial',
color: '#f5222d'
}}>
¥1,234.00
</span>
</Descriptions.Item>
</Descriptions>
</Card>
{/* 订单明细 */}
<Card
title="订单明细"
bordered={false}
style={{
marginBottom: 24,
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03)'
}}
>
<Table
columns={columns}
dataSource={data}
pagination={false}
size="middle"
/>
</Card>
</>
记住：企业级中后台的核心是效率、可靠性与美感的平衡。界面应当清晰、规范、高效，同时通过精细的美学设计提升用户体验。遵循 Ant Design 规范的同时，注重排版、色彩、间距的细节打磨，让界面既专业又有温度。