|
|
@@ -1,169 +0,0 @@
|
|
|
-# 管理后台界面开发规范
|
|
|
-
|
|
|
-## 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"错误
|
|
|
- ```typescript
|
|
|
- // 错误示例 - 使用原生Date对象
|
|
|
- form.setFieldsValue({
|
|
|
- noteDate: new Date(record.noteDate) // 导致验证失败
|
|
|
- });
|
|
|
-
|
|
|
- // 正确示例 - 使用dayjs对象
|
|
|
- form.setFieldsValue({
|
|
|
- noteDate: dayjs(record.noteDate) // 正常支持验证方法
|
|
|
- });
|
|
|
- ```
|
|
|
-- 日期时间转换规范：
|
|
|
- ```typescript
|
|
|
- // 日期对象转字符串（提交给后端）
|
|
|
- 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实例
|
|
|
- ```typescript
|
|
|
- import { App } from 'antd';
|
|
|
- const { message } = App.useApp();
|
|
|
- ```
|
|
|
-- 消息提示使用明确的类型区分：
|
|
|
- ```typescript
|
|
|
- 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"` 样式
|
yourname