46 lines
1.4 KiB
Plaintext
46 lines
1.4 KiB
Plaintext
---
|
||
description: 中后台前端页面设计规范 - 布局、色彩、组件、表单、表格、权限、命名
|
||
globs: src/**/*.vue, src/**/*.ts
|
||
alwaysApply: true
|
||
---
|
||
|
||
# 中后台前端设计规范（itfx-front）
|
||
|
||
开发新页面或修改现有页面时，必须遵循 `docs/前端页面设计规范.md` 中的约定。
|
||
|
||
## 关键规则速查
|
||
|
||
### 布局
|
||
- 页面容器使用 `[class$='-container']` 或 `xxx-container`，`padding: 16px`
|
||
- 主背景 `#f0f3f4`，内容区 `#fff`
|
||
- 工具栏：`table-toolbar` + `toolbar-left` + `toolbar-right`
|
||
|
||
### 色彩
|
||
- 使用 `var(--app-primary-color)`，不硬编码 `#007979`（默认主色）
|
||
|
||
### 组件
|
||
- 按钮 32px 高，border-radius 4px，间距 8px
|
||
- 优先 FormPro、TablePro、ModalPro、CustomList、HandsontablePro
|
||
|
||
### 表单
|
||
- label span 6，wrapper span 16
|
||
- FormPro：rowGutter 20，defaultSpan 6
|
||
|
||
### 表格
|
||
- TablePro：api 返回 totalCount + items
|
||
- HandsontablePro 列定义用 `key` + `label`，勿用 `data` + `title`
|
||
- 列表页高度：`flex: 1; min-height: 0`，`.list-wrap` 勿写死 min-height
|
||
- 分页 10/30/50/100，默认 30
|
||
- 新页面 path 与 API 前缀冲突时须配置 nginx SPA 回退（见规范 §十五）
|
||
|
||
### 权限
|
||
- `hasPermission('Module.Resource.Action')` 控制按钮/路由
|
||
- 路由 meta 配置 permission
|
||
|
||
### 命名
|
||
- 文件：views 用 index.vue，组件 PascalCase
|
||
- 路由 path：camelCase
|
||
- 变量：camelCase
|
||
|
||
完整规范见 `docs/前端页面设计规范.md`。
|