From 9b8e437c31fbac961eccc8ec3efd32bcb1b301d9 Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Wed, 9 Jul 2025 18:20:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E8=A1=8C=E5=8F=8C=E5=87=BB=E6=9F=A5=E7=9C=8B=E5=92=8C=E9=95=BF?= =?UTF-8?q?=E6=96=87=E6=9C=AC=E6=98=BE=E7=A4=BA=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 添加表格行双击查看功能规范 - 强制要求所有表格支持双击查看详情 - 提供标准实现方式和事件处理 - 包含最佳实践建议 2. 添加表格长文本显示规范 - 统一使用3行显示限制 - 提供标准样式定义 - 包含最佳实践建议 --- .cursor/cursorrules-frontend.md | 439 ++++++-------------------------- 1 file changed, 77 insertions(+), 362 deletions(-) diff --git a/.cursor/cursorrules-frontend.md b/.cursor/cursorrules-frontend.md index 14c8639d..dc73a707 100644 --- a/.cursor/cursorrules-frontend.md +++ b/.cursor/cursorrules-frontend.md @@ -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 - -新增员工 + + + + - -查看预算 - - -编辑 + + + + ``` -#### 📋 路由配置规范 - -**路由路径格式**: `/{模块简称}/{功能模块}` - -**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 - - -``` - -#### 操作列按钮规范 - -```vue - - + + ``` -#### 按钮使用规范总结 - -| 位置 | 按钮类型 | 样式规范 | 示例 | -| -------------------- | ---------------- | ---------------------- | -------------------------------------------------------------- | -| 工具栏第一个新增按钮 | 新增 | `type="primary" plain` | `新增` | -| 工具栏其他按钮 | 修改/删除/导出等 | 无 type（默认） | `修改` | -| 表格操作列 | 所有操作按钮 | `link type="primary"` | `` | -| 弹窗底部 | 确认按钮 | `type="primary"` | `确定` | -| 弹窗底部 | 取消按钮 | 无 type（默认） | `取消` | - -### 圆角系统 - +#### 标准样式定义 ```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