zzh
25445bc146
统一暗色模式页面/顶栏/Handsontable 选中色，调整下单到仓方式文案与提示，CustomLeftMenu 卡片统一 60px；补充揽收单、问题件处理与 H5 相关页面。 Co-authored-by: Cursor <cursoragent@cursor.com>
47 lines
1.7 KiB
Plaintext
47 lines
1.7 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)`，不硬编码 `#1d7281`（默认主色）
|
||
|
||
### 组件
|
||
- 按钮 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`
|
||
- HandsontablePro 固定列序：操作（可选，内容自适应宽）→ 序号（50px）→ 复选框（可选，60px）→ 数据；`stretch-columns` 只拉宽数据列，勿再传 `action-column-position` / `action-column-width`
|
||
- 列表页高度：`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`。
|