管理后台界面开发规范

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.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 组件二次确认

6. 图标规范

6.1 图标选择

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

6.2 图标样式

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