管理后台界面开发规范

1. 布局规范

1.1 整体布局结构

采用三栏布局：侧边导航栏 + 顶部操作栏 + 主内容区
侧边栏固定宽度240px，支持折叠功能
顶部导航栏高度固定为64px
主内容区边距统一为24px

1.2 响应式设计

桌面端：完整三栏布局
平板端：可折叠侧边栏
移动端：侧边栏转为抽屉式导航

1.3 容器样式

卡片容器使用白色背景(#ffffff)
卡片阴影使用 shadow-sm transition-all duration-300 hover:shadow-md
卡片边框使用 border: none
卡片圆角统一为 border-radius: 6px

2. 色彩规范

2.1 主色调

主色：蓝色(#1890ff)，用于主要按钮、选中状态和关键交互元素
辅助色：绿色(#52c41a)用于成功状态，红色(#ff4d4f)用于错误状态，黄色(#faad14)用于警告状态

2.2 中性色

背景色：浅灰(#f5f5f5)用于页面背景，白色(#ffffff)用于卡片背景
文本色：深灰(#1f2937)用于主要文本，中灰(#6b7280)用于次要文本，浅灰(#9ca3af)用于提示文本

3. 组件样式规范

3.1 按钮样式

主要按钮：使用主色调背景，白色文字
按钮高度统一为40px，大型按钮使用48px
按钮圆角统一为4px
按钮文本使用14px字体
按钮添加悬停效果：hover:shadow-lg transition-all duration-200

3.2 表单元素

输入框高度统一为40px
输入框前缀图标颜色使用主色调
表单标签宽度统一为80px
表单布局使用垂直布局，标签在上，输入框在下
输入框聚焦状态：focus:border-primary focus:ring-1 focus:ring-primary

3.5 日期表单组件

日期选择器使用 DatePicker 组件，时间选择使用 TimePicker 组件
日期选择器大小与输入框保持一致：size="middle"
日期格式统一为 YYYY-MM-DD，时间格式为 HH:mm:ss
日期范围选择使用 RangePicker 组件，格式为 [YYYY-MM-DD, YYYY-MM-DD]
日期选择器添加清除按钮：allowClear
日期选择器添加占位提示：placeholder="请选择日期"
日期选择器禁用未来日期：disabledDate={(current) => current && current > dayjs().endOf('day')}（根据业务需求调整）

日期对象规范：始终使用dayjs对象而非原生Date对象，避免出现"isValid is not a function"错误

// 错误示例 - 使用原生Date对象
form.setFieldsValue({
noteDate: new Date(record.noteDate) // 导致验证失败
});
  
// 正确示例 - 使用dayjs对象
form.setFieldsValue({
noteDate: dayjs(record.noteDate) // 正常支持验证方法
});

日期时间转换规范：

// 日期对象转字符串（提交给后端）
const formatDate = (date: Dayjs | null) => {
return date ? date.format('YYYY-MM-DD') : '';
};
  
// 字符串转日期对象（从后端接收）
const parseDate = (str: string) => {
return str ? dayjs(str) : null;
};
  
// 日期时间对象转字符串
const formatDateTime = (date: Dayjs | null) => {
return date ? date.format('YYYY-MM-DD HH:mm:ss') : '';
};
  
// 日期范围转换
const formatDateRange = (range: [Dayjs | null, Dayjs | null]) => {
return range && range[0] && range[1]
  ? [range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD')]
  : [];
};

3.3 表格样式

表格添加边框：bordered
表头背景色使用浅灰(#f9fafb)
表格行添加交替背景色：rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
支持横向滚动：scroll={{ x: 'max-content' }}

3.4 卡片组件

卡片标题区使用 flex items-center justify-between 布局
统计数字使用28px字体大小
添加卡片图标时使用24px大小，颜色与统计项主题匹配
卡片底部添加辅助信息，使用12px浅灰色字体

4. 页面规范

4.1 页面标题

页面标题使用 Title level={2} 组件
标题区添加 mb-6 flex justify-between items-center 样式
标题右侧可放置操作按钮组

4.2 登录页面

使用渐变背景：bg-gradient-to-br from-blue-50 to-indigo-100
登录卡片居中显示，添加阴影效果：shadow-lg
登录表单添加图标前缀增强可读性
底部添加版权信息和测试账号提示

4.3 数据展示页面

数据卡片使用响应式布局，在不同屏幕尺寸下自动调整列数
关键数据使用 Statistic 组件展示
添加数据趋势指示和环比增长信息
数据加载状态使用 loading 属性

5. 交互规范

5.1 悬停效果

可交互元素添加悬停效果
卡片悬停效果：hover:shadow-md transition-all duration-300
按钮悬停效果：hover:shadow-lg transition-all duration-200

5.2 模态框

模态框使用 destroyOnClose 属性确保每次打开都是新实例
模态框居中显示：centered
禁止点击遮罩关闭：maskClosable={false}
表单模态框使用垂直布局

5.3 反馈机制

操作成功/失败使用 message 组件提供反馈
加载状态使用 loading 属性显示加载指示器
删除等危险操作使用 Popconfirm 组件二次确认

5.4 消息提示规范

统一使用App.useApp()获取message实例

import { App } from 'antd';
const { message } = App.useApp();

消息提示使用明确的类型区分：

message.success('操作成功');
message.error('操作失败');
message.warning('警告信息');
message.info('提示信息');

消息显示时长统一使用默认值，重要操作可适当延长：message.success('操作成功', 3);

6. 图标规范

6.1 图标选择

用户相关：UserOutlined
密码相关：LockOutlined
搜索相关：SearchOutlined
消息相关：BellOutlined
眼睛相关：EyeOutlined/EyeInvisibleOutlined

6.2 图标样式

功能图标大小统一为24px
前缀图标颜色与主题匹配
操作图标使用 Button type="link" 样式

13-ui-style.md 5.9 KB Permalink Lịch sử Raw

管理后台界面开发规范

1. 布局规范

1.1 整体布局结构

1.2 响应式设计

1.3 容器样式

2. 色彩规范

2.1 主色调

2.2 中性色

3. 组件样式规范

3.1 按钮样式

3.2 表单元素

3.5 日期表单组件

3.3 表格样式

3.4 卡片组件

4. 页面规范

4.1 页面标题

4.2 登录页面

4.3 数据展示页面

5. 交互规范

5.1 悬停效果

5.2 模态框

5.3 反馈机制

5.4 消息提示规范

6. 图标规范

6.1 图标选择

6.2 图标样式

13-ui-style.md 5.9 KB

Permalink Lịch sử Raw