Menu
创建符合 Ant Design 规范的企业级中后台界面。使用此技能构建专业、规范、高效的管理系统界面。遵循蚂蚁金服设计语言，确保一致性和可用性，同时通过美学设计提升用户体验。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
本技能指导创建符合 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 规范的同时，注重排版、色彩、间距的细节打磨，让界面既专业又有温度。