|
@@ -45,7 +45,17 @@
|
|
|
- 表单布局使用垂直布局，标签在上，输入框在下
|
|
- 表单布局使用垂直布局，标签在上，输入框在下
|
|
|
- 输入框聚焦状态：`focus:border-primary focus:ring-1 focus:ring-primary`
|
|
- 输入框聚焦状态：`focus:border-primary focus:ring-1 focus:ring-primary`
|
|
|
|
|
|
|
|
-### 3.5 日期表单组件
|
|
|
|
|
|
|
+### 3.3 搜索表单
|
|
|
|
|
+- 搜索表单应采用紧凑布局，减少垂直空间占用
|
|
|
|
|
+- 常用搜索项应放在同一行，充分利用水平空间
|
|
|
|
|
+- 高级搜索项应放在折叠面板中，按需展开
|
|
|
|
|
+- 搜索按钮和操作按钮应放在同一行，提高操作效率
|
|
|
|
|
+- 表单项标签宽度统一为80px，确保视觉对齐
|
|
|
|
|
+- 输入框高度统一为40px，与表单元素规范保持一致
|
|
|
|
|
+- 在小屏幕设备上，表单项应自动换行以适应屏幕宽度
|
|
|
|
|
+- 搜索表单应放置在数据展示区域之前，方便用户操作
|
|
|
|
|
+
|
|
|
|
|
+### 3.4 日期表单组件
|
|
|
- 日期选择器使用 `DatePicker` 组件，时间选择使用 `TimePicker` 组件
|
|
- 日期选择器使用 `DatePicker` 组件，时间选择使用 `TimePicker` 组件
|
|
|
- 日期选择器大小与输入框保持一致：`size="middle"`
|
|
- 日期选择器大小与输入框保持一致：`size="middle"`
|
|
|
- 日期格式统一为 `YYYY-MM-DD`，时间格式为 `HH:mm:ss`
|
|
- 日期格式统一为 `YYYY-MM-DD`，时间格式为 `HH:mm:ss`
|
|
@@ -90,13 +100,13 @@
|
|
|
};
|
|
};
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-### 3.3 表格样式
|
|
|
|
|
|
|
+### 3.5 表格样式
|
|
|
- 表格添加边框：`bordered`
|
|
- 表格添加边框：`bordered`
|
|
|
- 表头背景色使用浅灰(#f9fafb)
|
|
- 表头背景色使用浅灰(#f9fafb)
|
|
|
- 表格行添加交替背景色：`rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`
|
|
- 表格行添加交替背景色：`rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`
|
|
|
- 支持横向滚动：`scroll={{ x: 'max-content' }}`
|
|
- 支持横向滚动：`scroll={{ x: 'max-content' }}`
|
|
|
|
|
|
|
|
-### 3.4 卡片组件
|
|
|
|
|
|
|
+### 3.6 卡片组件
|
|
|
- 卡片标题区使用 `flex items-center justify-between` 布局
|
|
- 卡片标题区使用 `flex items-center justify-between` 布局
|
|
|
- 统计数字使用28px字体大小
|
|
- 统计数字使用28px字体大小
|
|
|
- 添加卡片图标时使用24px大小，颜色与统计项主题匹配
|
|
- 添加卡片图标时使用24px大小，颜色与统计项主题匹配
|
yourname