docs(standards): 新增表单布局紧凑设计规范
- 新增表单紧凑设计核心原则和配置标准 - 添加统一的表单样式类 compact-form 使用指南 - 规范表单布局配置：800px弹框宽度、90px标签宽度、10px列间距 - 提供完整的紧凑表单CSS样式实现 - 明确强制要求检查清单和严格禁止行为 - 确保所有表单页面具有统一的紧凑布局和优秀的用户体验
This commit is contained in:
Leo
parent
6dc0b0a10c
commit
1b3b14aa36
299
CLAUDE.md
299
CLAUDE.md
@ -1434,6 +1434,305 @@ import { coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
|
|||||||
|
|
||||||
**遵循此规范确保所有表格列表页面具有统一的按钮样式和用户体验！**
|
**遵循此规范确保所有表格列表页面具有统一的按钮样式和用户体验！**
|
||||||
|
|
||||||
|
## 📝 表单布局紧凑设计规范（强制要求）
|
||||||
|
|
||||||
|
**所有新创建的表单页面和弹框表单都必须严格遵循紧凑布局设计规范，确保界面的一致性和空间利用率**
|
||||||
|
|
||||||
|
### 表单紧凑设计核心原则
|
||||||
|
|
||||||
|
1. **统一紧凑样式类**：
|
||||||
|
- ✅ 所有表单必须使用 `class="compact-form"` 样式类
|
||||||
|
- ✅ 确保在所有弹框和表单页面中保持一致的视觉密度
|
||||||
|
- ✅ 参考菜单管理、用户管理、角色管理页面的标准样式
|
||||||
|
|
||||||
|
2. **标准化间距设置**：
|
||||||
|
- ✅ 表单项间距：`class="mb-2"`（8px 底部间距）
|
||||||
|
- ✅ 网格列间距：`:x-gap="10"`（10px 列间距）
|
||||||
|
- ✅ 标签宽度：`label-width="90px"`（90px 标签宽度）
|
||||||
|
- ✅ 容器内边距：`class="px-3 py-2"`（标准内边距）
|
||||||
|
|
||||||
|
3. **弹框尺寸标准**：
|
||||||
|
- ✅ 表单弹框宽度：`:width="800"`（800px 统一宽度）
|
||||||
|
- ✅ 弹框高度：`height="auto"`（自适应高度）
|
||||||
|
|
||||||
|
### 正确的表单布局实现
|
||||||
|
|
||||||
|
**✅ 标准CoiDialog弹框表单结构**：
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<CoiDialog
|
||||||
|
ref="dialogRef"
|
||||||
|
:title="modalTitle"
|
||||||
|
:width="800"
|
||||||
|
height="auto"
|
||||||
|
confirm-text="确定"
|
||||||
|
cancel-text="取消"
|
||||||
|
@coi-confirm="handleSubmit"
|
||||||
|
@coi-cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<template #content>
|
||||||
|
<div class="px-3 py-2">
|
||||||
|
<n-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
label-placement="left"
|
||||||
|
label-width="90px"
|
||||||
|
require-mark-placement="right-hanging"
|
||||||
|
class="compact-form"
|
||||||
|
>
|
||||||
|
<n-grid :cols="2" :x-gap="10">
|
||||||
|
<n-grid-item>
|
||||||
|
<n-form-item label="字段名称" path="fieldName" class="mb-2">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formData.fieldName"
|
||||||
|
placeholder="请输入字段名称"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-grid-item>
|
||||||
|
|
||||||
|
<n-grid-item>
|
||||||
|
<n-form-item label="字段类型" path="fieldType" class="mb-2">
|
||||||
|
<n-select
|
||||||
|
v-model:value="formData.fieldType"
|
||||||
|
placeholder="请选择字段类型"
|
||||||
|
:options="typeOptions"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<!-- 跨列表单项 -->
|
||||||
|
<n-form-item label="备注信息" path="remark" class="mb-2">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formData.remark"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入备注信息"
|
||||||
|
:rows="3"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</CoiDialog>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 必需的紧凑表单CSS样式
|
||||||
|
|
||||||
|
**✅ 每个包含表单的页面都必须包含以下CSS样式**：
|
||||||
|
```css
|
||||||
|
/* 紧凑表单样式 */
|
||||||
|
.compact-form :deep(.n-form-item) {
|
||||||
|
margin-bottom: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
|
||||||
|
min-height: 0 !important;
|
||||||
|
padding-top: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-form-item .n-form-item-label) {
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-input),
|
||||||
|
.compact-form :deep(.n-input-number),
|
||||||
|
.compact-form :deep(.n-select),
|
||||||
|
.compact-form :deep(.n-cascader),
|
||||||
|
.compact-form :deep(.n-radio-group) {
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-input .n-input__input-el),
|
||||||
|
.compact-form :deep(.n-input-number .n-input__input-el) {
|
||||||
|
padding: 2px 1px !important;
|
||||||
|
min-height: 32px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-select .n-base-selection) {
|
||||||
|
min-height: 32px !important;
|
||||||
|
padding: 2px 1px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
|
||||||
|
padding: 0 6px !important;
|
||||||
|
min-height: 30px !important;
|
||||||
|
line-height: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-cascader .n-cascader-trigger) {
|
||||||
|
min-height: 32px !important;
|
||||||
|
padding: 2px 1px !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 表单布局配置标准
|
||||||
|
|
||||||
|
| 配置项 | 标准值 | 说明 |
|
||||||
|
|--------|--------|------|
|
||||||
|
| 弹框宽度 | `:width="800"` | 统一800px宽度 |
|
||||||
|
| 弹框高度 | `height="auto"` | 自适应内容高度 |
|
||||||
|
| 表单样式类 | `class="compact-form"` | 紧凑表单样式类 |
|
||||||
|
| 标签宽度 | `label-width="90px"` | 统一90px标签宽度 |
|
||||||
|
| 标签位置 | `label-placement="left"` | 标签左对齐 |
|
||||||
|
| 必填标记 | `require-mark-placement="right-hanging"` | 必填标记右悬挂 |
|
||||||
|
| 网格列数 | `:cols="2"` | 双列布局 |
|
||||||
|
| 列间距 | `:x-gap="10"` | 10px列间距 |
|
||||||
|
| 表单项间距 | `class="mb-2"` | 8px底部间距 |
|
||||||
|
| 容器内边距 | `class="px-3 py-2"` | 标准内边距 |
|
||||||
|
|
||||||
|
### 已实现的标准参考页面
|
||||||
|
|
||||||
|
- ✅ 菜单管理页面：`src/views/system/menu/index.vue`
|
||||||
|
- ✅ 用户管理页面：`src/views/system/user/index.vue`
|
||||||
|
- ✅ 角色管理页面：`src/views/system/role/index.vue`
|
||||||
|
|
||||||
|
### 强制要求检查清单
|
||||||
|
|
||||||
|
开发新的表单页面时，必须确保：
|
||||||
|
- [ ] 使用 `class="compact-form"` 样式类
|
||||||
|
- [ ] 所有表单项都有 `class="mb-2"` 间距类
|
||||||
|
- [ ] 网格布局使用 `:x-gap="10"` 列间距
|
||||||
|
- [ ] 弹框宽度设置为 `:width="800"`
|
||||||
|
- [ ] 标签宽度设置为 `label-width="90px"`
|
||||||
|
- [ ] 包含完整的紧凑表单CSS样式
|
||||||
|
- [ ] 容器使用 `class="px-3 py-2"` 内边距
|
||||||
|
|
||||||
|
### 严格禁止行为
|
||||||
|
|
||||||
|
- ❌ 使用默认表单样式（不添加 `compact-form` 类）
|
||||||
|
- ❌ 表单项间距过大或不一致
|
||||||
|
- ❌ 弹框宽度不统一（非800px）
|
||||||
|
- ❌ 标签宽度不一致（非90px）
|
||||||
|
- ❌ 缺少必需的紧凑表单CSS样式
|
||||||
|
- ❌ 使用过大的列间距（超过10px）
|
||||||
|
- ❌ 忽略参考页面的布局标准
|
||||||
|
|
||||||
|
### 紧凑表单设计优势
|
||||||
|
|
||||||
|
1. **视觉一致性**：所有表单页面具有统一的外观和感觉
|
||||||
|
2. **空间利用率**：紧凑的布局提高了屏幕空间的利用效率
|
||||||
|
3. **用户体验**：减少了视觉噪音，提升了表单填写的效率
|
||||||
|
4. **响应式友好**：在不同屏幕尺寸下都有良好的显示效果
|
||||||
|
5. **维护便利性**：统一的样式类和配置便于后续维护和扩展
|
||||||
|
|
||||||
|
### 示例：完整的表单页面实现
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<!-- 表单弹框 -->
|
||||||
|
<CoiDialog
|
||||||
|
ref="formDialogRef"
|
||||||
|
:title="modalTitle"
|
||||||
|
:width="800"
|
||||||
|
height="auto"
|
||||||
|
confirm-text="确定"
|
||||||
|
cancel-text="取消"
|
||||||
|
@coi-confirm="handleSubmit"
|
||||||
|
@coi-cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<template #content>
|
||||||
|
<div class="px-3 py-2">
|
||||||
|
<n-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
label-placement="left"
|
||||||
|
label-width="90px"
|
||||||
|
require-mark-placement="right-hanging"
|
||||||
|
class="compact-form"
|
||||||
|
>
|
||||||
|
<!-- 双列布局 -->
|
||||||
|
<n-grid :cols="2" :x-gap="10">
|
||||||
|
<n-grid-item>
|
||||||
|
<n-form-item label="名称" path="name" class="mb-2">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formData.name"
|
||||||
|
placeholder="请输入名称"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-grid-item>
|
||||||
|
|
||||||
|
<n-grid-item>
|
||||||
|
<n-form-item label="状态" path="status" class="mb-2">
|
||||||
|
<n-select
|
||||||
|
v-model:value="formData.status"
|
||||||
|
placeholder="请选择状态"
|
||||||
|
:options="statusOptions"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<!-- 单列布局 -->
|
||||||
|
<n-form-item label="描述" path="description" class="mb-2">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formData.description"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入描述"
|
||||||
|
:rows="3"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</CoiDialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// 表单逻辑
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 紧凑表单样式 */
|
||||||
|
.compact-form :deep(.n-form-item) {
|
||||||
|
margin-bottom: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
|
||||||
|
min-height: 0 !important;
|
||||||
|
padding-top: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-form-item .n-form-item-label) {
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-input),
|
||||||
|
.compact-form :deep(.n-input-number),
|
||||||
|
.compact-form :deep(.n-select),
|
||||||
|
.compact-form :deep(.n-cascader),
|
||||||
|
.compact-form :deep(.n-radio-group) {
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-input .n-input__input-el),
|
||||||
|
.compact-form :deep(.n-input-number .n-input__input-el) {
|
||||||
|
padding: 2px 1px !important;
|
||||||
|
min-height: 32px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-select .n-base-selection) {
|
||||||
|
min-height: 32px !important;
|
||||||
|
padding: 2px 1px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
|
||||||
|
padding: 0 6px !important;
|
||||||
|
min-height: 30px !important;
|
||||||
|
line-height: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-form :deep(.n-cascader .n-cascader-trigger) {
|
||||||
|
min-height: 32px !important;
|
||||||
|
padding: 2px 1px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
**遵循此规范确保所有表单页面具有统一的紧凑布局和优秀的用户体验！**
|
||||||
|
|
||||||
## 文档资源
|
## 文档资源
|
||||||
|
|
||||||
项目包含完整的文档系统：
|
项目包含完整的文档系统：
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user