zzh
c6723ab476
Some checks failed
Build and Deploy Front / deploy (push) Failing after 32m20s
生产不再内置 nginx/`__cos__`；镜像用 serve -s，HTTPS 由 Traefik+cert-manager；面单预览走 stream。 Co-authored-by: Cursor <cursoragent@cursor.com>
48 lines
1.9 KiB
Plaintext
48 lines
1.9 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
|
||
- **禁止** `a-button type="outline"`（Arco 默认描边与主题不搭）；主操作用 `primary` / `app-btn-primary-soft`，查询用 `app-btn-search`，次要用默认按钮或抽屉内软按钮
|
||
- 优先 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，默认 50
|
||
- 生产前后端分域名 + Traefik TLS；前端容器仅静态 SPA（见规范 §十五）
|
||
|
||
### 权限
|
||
- `hasPermission('Module.Resource.Action')` 控制按钮/路由
|
||
- 路由 meta 配置 permission
|
||
|
||
### 命名
|
||
- 文件：views 用 index.vue，组件 PascalCase
|
||
- 路由 path：camelCase
|
||
- 变量：camelCase
|
||
|
||
完整规范见 `docs/前端页面设计规范.md`。
|