cykj/hzdyjs
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增表格行双击查看和长文本显示规范

Browse Source 
1. 添加表格行双击查看功能规范
- 强制要求所有表格支持双击查看详情
- 提供标准实现方式和事件处理
- 包含最佳实践建议

2. 添加表格长文本显示规范
- 统一使用3行显示限制
- 提供标准样式定义
- 包含最佳实践建议
This commit is contained in:
zlwu committed 2025-07-09 18:20:50 +08:00
1 parent 180c471034
commit 9b8e437c31
1 file changed
+77 -362
Download Patch File Download Diff File Expand all files Collapse all files
.cursor/cursorrules-frontend.md
+77 -362
View File
@@ -1,386 +1,105 @@
# Cursor Rules - Web 前端开发规范
# Vue 3 + TypeScript 前端开发规范
## 适用范围
## 技术栈规范
- Vue 3.5.13
- TypeScript 5.8.3
- Element Plus UI
- Art Design Pro UI 设计规范
- **项目目录**: `web/` (基于 Vue 3 + TypeScript + Element Plus)
- **开发环境**: Node.js 20.15.x+, npm 10.7.x+
- **前端访问**: http://localhost (默认 80 端口)
## 表格组件开发规范
---
### 1. 表格行双击查看功能（强制性）
# Web 前端开发规范 (web/)
#### 实现要求
- **✅ 必须实现**: 所有数据表格必须支持行双击查看详情功能
- **🎯 目标**: 提升用户体验，快速查看数据详情
## 1. 技术栈规范
### 核心技术
- **框架**: Vue 3.5.13 + TypeScript 5.8.3
- **UI 组件库**: Element Plus 2.9.8
- **构建工具**: Vite 6.3.2
- **状态管理**: Pinia 3.0.2
- **路由管理**: Vue Router 4.5.0
- **HTTP 客户端**: Axios 1.8.4
- **代码风格**: ESLint 9.21.0 + Prettier 3.5.2
- **样式预处理**: SCSS (Sass 1.87.0)
- **原子化 CSS**: UnoCSS 66.0.0
- **Node.js**: 20.15.x+ (推荐 20.15.0)
- **npm**: 10.7.x+
### 环境要求
- **开发环境**: 支持本地环境或阿里云测试环境
- **数据库**: MySQL/Redis 支持本机安装或使用阿里云环境
- **前端访问**: http://localhost (默认 80 端口)
- **后端服务**: http://localhost:8080
## 🔴 前端模块管理规范（强制性，2025-01-23新增）
### 📦 前端模块文件夹规范
**⚠️ 基于后端模块工程统一规划，前端必须建立对应的模块文件夹结构！**
#### 🏗️ 模块命名和位置规范
**界面文件夹位置**: `web/src/views/{模块简称}/`
**API文件夹位置**: `web/src/api/{模块简称}/`
**已规划模块列表**:
- ✅ `hq` - 后勤管理模块 (已完成)
- ✅ `rs` - 人事管理模块
- ✅ `cw` - 财务管理模块
- ✅ `aqbw` - 安全保卫管理模块
- ✅ `zsjy` - 招生就业管理模块
- ✅ `xg` - 学工管理模块
#### 📁 标准目录结构
**界面文件夹结构** (web/src/views/{模块简称}/):
```
web/src/views/{模块简称}/
├── README.md # 模块说明文档
├── {功能模块1}/ # 按功能模块细分
│ ├── index.vue # 列表页面
│ ├── add.vue # 新增页面
│ ├── edit.vue # 编辑页面
│ └── detail.vue # 详情页面
├── {功能模块2}/
│ └── ...
└── components/ # 模块内公共组件
└── ...
```
**API文件夹结构** (web/src/api/{模块简称}/):
```
web/src/api/{模块简称}/
├── index.ts # API入口文件
├── README.md # API接口说明文档
├── types.ts # 类型定义文件
├── {功能模块1}/ # 按功能模块细分
│ └── index.ts # 功能模块API接口
├── {功能模块2}/
│ └── index.ts
└── ...
```
#### 🎯 文件命名规范
**Vue组件文件**:
- 页面组件: PascalCase (如: `UserList.vue`)
- 组件文件: kebab-case (如: `user-form.vue`)
**TypeScript文件**:
- API文件: kebab-case (如: `user-api.ts`)
- 类型文件: kebab-case (如: `user-types.ts`)
**路由命名**:
- 路由路径: kebab-case (如: `/rs/employee-list`)
- 路由名称: camelCase (如: `rsEmployeeList`)
#### 🔐 权限命名规范
**前端权限指令格式**: `v-hasPermi="'{模块简称}:{功能}:{操作}'"`
**示例**:
#### 标准实现方式
```vue
<!-- 人事模块员工新增权限 -->
<el-button v-hasPermi="'rs:employee:add'" type="primary">新增员工</el-button>
<!-- 表格组件 -->
<el-table
v-loading="loading"
:data="dataList"
@selection-change="handleSelectionChange"
@row-dblclick="handleView">
<!-- 表格列配置 -->
</el-table>
<!-- 财务模块预算查看权限 -->
<el-button v-hasPermi="'cw:budget:view'" type="primary">查看预算</el-button>
<!-- 学工模块学生编辑权限 -->
<el-button v-hasPermi="'xg:student:edit'" link type="primary">编辑</el-button>
<!-- 查看详情对话框 -->
<el-dialog
:title="viewDialog.title"
v-model="viewDialog.visible"
width="800px"
append-to-body>
<!-- 详情表单内容 -->
</el-dialog>
```
#### 📋 路由配置规范
**路由路径格式**: `/{模块简称}/{功能模块}`
**router配置示例**:
#### 标准事件处理
```typescript
// router/modules/rs.ts - 人事管理模块路由
export default {
path: '/rs',
name: 'Rs',
component: () => import('@/layout/index.vue'),
redirect: '/rs/employee',
meta: {
title: '人事管理',
icon: 'peoples',
rank: 3
},
children: [
{
path: '/rs/employee',
name: 'RsEmployee',
component: () => import('@/views/rs/employee/index.vue'),
meta: {
title: '员工管理',
keepAlive: true
}
},
{
path: '/rs/department',
name: 'RsDepartment',
component: () => import('@/views/rs/department/index.vue'),
meta: {
title: '部门管理',
keepAlive: true
}
}
]
}
/** 查看按钮操作 */
const handleView = async (row: any) => {
// 1. 复制数据到查看表单
Object.assign(viewForm, row);
// 2. 处理特殊字段（如图片列表等）
if (row.images) {
viewImageList.value = row.images.split(',').filter((img: string) => img.trim() !== '');
}
// 3. 显示对话框
viewDialog.visible = true;
viewDialog.title = '查看详情';
};
```
#### 🚨 前端模块开发检查清单
#### 最佳实践建议
1. 查看对话框宽度建议 800px-1000px，根据内容自适应
2. 详情展示采用只读表单形式，提供良好的数据展示结构
3. 对于图片、文件等特殊字段，需要合适的预览组件
4. 长文本内容建议使用滚动容器限制高度
5. 必要时可以在详情页面添加相关操作按钮
**创建新模块前必须检查**:
- [ ] 模块文件夹是否按规范命名？(`web/src/views/{简称}/`)
- [ ] API文件夹是否对应创建？(`web/src/api/{简称}/`)
- [ ] 是否创建了模块说明文档？(README.md)
- [ ] 路由配置是否符合规范？
- [ ] 权限指令是否使用正确的编码格式？
- [ ] 是否遵循前端开发规范和UI设计标准？
- [ ] 组件和文件命名是否符合规范？
- [ ] API接口类型定义是否与后端VO保持一致？
### 2. 表格长文本显示规范（强制性）
#### 💡 模块开发最佳实践
**1. 组件复用**:
- 模块内公共组件放在`components/`目录
- 跨模块公共组件放在`@/components/`目录
- 使用组合式API提高代码复用性
**2. 状态管理**:
- 模块相关状态使用Pinia store管理
- Store文件命名：`@/stores/{模块简称}.ts`
- 避免不同模块间的状态耦合
**3. 样式管理**:
- 使用SCSS变量和mixin提高样式复用
- 遵循Art Design Pro UI设计规范
- 统一使用轮廓式按钮设计
**4. 类型安全**:
- 所有API接口必须定义TypeScript类型
- 类型定义与后端VO对象保持一致
- 使用泛型提高类型复用性
#### 📝 注意事项
**模块间解耦**:
- 避免模块间直接依赖，通过事件总线或状态管理通信
- API接口按模块严格分离
- 路由按模块独立配置，避免交叉引用
**性能优化**:
- 页面组件使用懒加载
- 合理使用keep-alive缓存页面状态
- 图片资源优化和懒加载
**用户体验**:
- 统一的加载状态和错误处理
- 合理的页面过渡动画
- 响应式设计支持多设备访问
## 2. Art Design Pro UI 规范
### 设计理念
基于 Art Design Pro 的设计语言，追求现代化、精致、用户友好的界面体验。注重细节、动效和用户交互的流畅性。
### 颜色系统 🎨
#### 主色调 (Primary Colors) - 2025 年最新版本
```css
/* 亮色主题 */
:root {
--art-primary: 93, 135, 255; /* 主品牌色 - 亮蓝色 #5d87ff */
--art-secondary: 73, 190, 255; /* 辅助色 - 天蓝色 #49beff */
--art-success: 0, 167, 58; /* 成功色 - 绿色 #00a73a */
--art-warning: 142, 91, 0; /* 警告色 - 橙色 #8e5b00 */
--art-error: 250, 137, 107; /* 错误色 - 红色 #fa896b */
--art-info: 0, 75, 178; /* 信息色 - 蓝色 #004bb2 */
--art-danger: 255, 77, 79; /* 危险色 - 红色 #ff4d4f */
}
/* 暗色主题 */
html.dark {
--art-primary: 93, 135, 255; /* 主品牌色 - 亮蓝色 #5d87ff */
--art-secondary: 73, 190, 255; /* 辅助色 - 天蓝色 #49beff */
--art-success: 19, 222, 185; /* 成功色 - 绿色 #13deb9 */
--art-warning: 255, 174, 31; /* 警告色 - 橙色 #ffae1f */
--art-error: 250, 137, 107; /* 错误色 - 红色 #fa896b */
--art-info: 83, 155, 255; /* 信息色 - 蓝色 #539bff */
--art-danger: 255, 77, 79; /* 危险色 - 红色 #ff4d4f */
}
```
#### 背景色系统
```css
/* 浅色主题 */
:root {
--art-bg-color: #fafbfc; /* 页面底色 */
--art-main-bg-color: #ffffff; /* 主要内容背景 */
--art-bg-primary: 236, 242, 255; /* 主色背景 */
--art-bg-secondary: 232, 247, 255; /* 辅助背景 */
--art-bg-success: 230, 255, 250; /* 成功背景 */
--art-bg-warning: 254, 245, 229; /* 警告背景 */
--art-bg-error: 253, 237, 232; /* 错误背景 */
}
/* 暗色主题 */
html.dark {
--art-bg-color: #070707; /* 页面底色 */
--art-main-bg-color: #161618; /* 主要内容背景 */
}
```
#### 灰色系统
```css
:root {
--art-gray-100: #f9f9f9; /* 浅灰 */
--art-gray-200: #f1f1f4; /* 较浅灰 */
--art-gray-300: #dbdfe9; /* 中浅灰 */
--art-gray-400: #c4cada; /* 中灰 */
--art-gray-500: #99a1b7; /* 中深灰 */
--art-gray-600: #78829d; /* 深灰 */
--art-gray-700: #4b5675; /* 较深灰 */
--art-gray-800: #252f4a; /* 很深灰 */
--art-gray-900: #071437; /* 最深灰 */
}
```
### 轮廓式按钮设计系统 🔘
#### 🎨 设计理念
全面采用轮廓式（Outline）按钮设计，提供更加优雅、现代和一致的用户界面体验。
#### 核心规范
- **Primary 按钮**: 轮廓式主色设计，主色边框和文字，5%透明度主色背景
- **Success 按钮**: 轮廓式成功色设计，成功色边框和文字，5%透明度成功色背景
- **Warning 按钮**: 轮廓式警告色设计，警告色边框和文字，5%透明度警告色背景
- **Danger 按钮**: 轮廓式危险色设计，危险色边框和文字，5%透明度危险色背景
- **Info 按钮**: 轮廓式信息色设计，信息色边框和文字，5%透明度信息色背景
- **Default 按钮**: 白色背景，灰色边框，灰色文字
#### 交互效果
- **悬浮状态**: 上移 1px + 背景透明度变为 10% + 边框透明度变为 80% + 彩色阴影
- **点击状态**: 98%缩放 + 0.1s 快速过渡 + 背景透明度变为 15%
- **禁用状态**: 50%透明度，禁用所有交互和变换
### 🔘 列表页面按钮使用规范（2025 年最新标准）
#### 工具栏按钮规范
#### 实现要求
- **✅ 必须实现**: 所有表格中的长文本字段必须限制显示行数
- **🎯 目标**: 保持表格整洁美观，同时提供完整内容的查看方式
#### 标准实现方式
```vue
<!-- 标准工具栏按钮配置 -->
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<!-- ✅ 第一个新增按钮：必须使用 type="primary" -->
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<!-- ✅ 其他按钮：不添加type，使用默认样式 -->
<el-button icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="Download" @click="handleExport">导出</el-button>
</el-col>
</el-row>
</template>
```
#### 操作列按钮规范
```vue
<!-- 表格操作列按钮配置 -->
<el-table-column label="操作" align="center" width="160">
<!-- 表格长文本列配置 -->
<el-table-column label="描述文本" align="center" prop="description">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<!-- ✅ 操作列按钮：统一使用 link type="primary" -->
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
</el-tooltip>
<div class="description-cell">{{ scope.row.description }}</div>
</template>
</el-table-column>
```
#### 按钮使用规范总结
| 位置 | 按钮类型 | 样式规范 | 示例 |
| -------------------- | ---------------- | ---------------------- | -------------------------------------------------------------- |
| 工具栏第一个新增按钮 | 新增 | `type="primary" plain` | `<el-button type="primary" plain icon="Plus">新增</el-button>` |
| 工具栏其他按钮 | 修改/删除/导出等 | 无 type（默认） | `<el-button icon="Edit">修改</el-button>` |
| 表格操作列 | 所有操作按钮 | `link type="primary"` | `<el-button link type="primary" icon="Edit"></el-button>` |
| 弹窗底部 | 确认按钮 | `type="primary"` | `<el-button type="primary">确定</el-button>` |
| 弹窗底部 | 取消按钮 | 无 type（默认） | `<el-button>取消</el-button>` |
### 圆角系统
#### 标准样式定义
```css
:root {
--border-radius-xs: 4px; /* 超小元素 (checkbox等) */
--border-radius-sm: 6px; /* 小元素 (下拉选项、关闭按钮等) */
--border-radius-md: 8px; /* 表单控件 (input、select、button等) */
--border-radius-lg: 12px; /* 容器组件 (card、table、dialog等) */
--border-radius-xl: 12px;
--border-radius-2xl: 16px;
--border-radius-full: 50%;
/* 长文本单元格样式 */
.description-cell {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示3行 */
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
max-height: 4.5em; /* 3行 * 1.5行高 */
text-align: left;
padding: 0 10px;
}
```
### 间距系统
#### 最佳实践建议
1. 统一使用3行显示限制，超出显示省略号
2. 使用左对齐方式，提高长文本可读性
3. 设置合适的行高和内边距
4. 配合表格行双击查看功能，在详情弹窗中显示完整内容
5. 必要时可以添加鼠标悬停提示（el-tooltip）显示完整内容
```css
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 20px;
--space-2xl: 24px;
--space-3xl: 32px;
--space-4xl: 48px;
--space-5xl: 64px;
}
```
## 3. 组件开发规范
### Vue 组件结构标准
### 3. 组件开发标准和页面模板
```vue
<template>
@@ -425,8 +144,6 @@ onMounted(() => {
</style>
```
### 页面开发规范
#### 列表页面标准模板
```vue
@@ -604,9 +321,7 @@ const resetForm = () => {
</script>
```
## 4. API 开发规范
### API 接口定义标准
### 3. API接口定义和状态管理
```typescript
// api/[module]/index.ts