---
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`。