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

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

2. 添加表格长文本显示规范
- 统一使用3行显示限制
- 提供标准样式定义
- 包含最佳实践建议

.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 端口)
+## 表格组件开发规范
 
----
-
-# 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`)
+### 1. 表格行双击查看功能（强制性）
 
-**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-button v-hasPermi="'cw:budget:view'" type="primary">查看预算</el-button>
-
-<!-- 学工模块学生编辑权限 -->
-<el-button v-hasPermi="'xg:student:edit'" link type="primary">编辑</el-button>
+<!-- 表格组件 -->
+<el-table 
+  v-loading="loading" 
+  :data="dataList" 
+  @selection-change="handleSelectionChange"
+  @row-dblclick="handleView">
+  <!-- 表格列配置 -->
+</el-table>
+
+<!-- 查看详情对话框 -->
+<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
-      }
-    }
-  ]
-}
-```
-
-#### 🚨 前端模块开发检查清单
-
-**创建新模块前必须检查**:
-- [ ] 模块文件夹是否按规范命名？(`web/src/views/{简称}/`)
-- [ ] API文件夹是否对应创建？(`web/src/api/{简称}/`)
-- [ ] 是否创建了模块说明文档？(README.md)
-- [ ] 路由配置是否符合规范？
-- [ ] 权限指令是否使用正确的编码格式？
-- [ ] 是否遵循前端开发规范和UI设计标准？
-- [ ] 组件和文件命名是否符合规范？
-- [ ] API接口类型定义是否与后端VO保持一致？
-
-#### 💡 模块开发最佳实践
-
-**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; /* 最深灰 */
-}
+/** 查看按钮操作 */
+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 = '查看详情';
+};
 ```
 
-### 轮廓式按钮设计系统 🔘
-
-#### 🎨 设计理念
-
-全面采用轮廓式（Outline）按钮设计，提供更加优雅、现代和一致的用户界面体验。
-
-#### 核心规范
-
--   **Primary 按钮**: 轮廓式主色设计，主色边框和文字，5%透明度主色背景
--   **Success 按钮**: 轮廓式成功色设计，成功色边框和文字，5%透明度成功色背景
--   **Warning 按钮**: 轮廓式警告色设计，警告色边框和文字，5%透明度警告色背景
--   **Danger 按钮**: 轮廓式危险色设计，危险色边框和文字，5%透明度危险色背景
--   **Info 按钮**: 轮廓式信息色设计，信息色边框和文字，5%透明度信息色背景
--   **Default 按钮**: 白色背景，灰色边框，灰色文字
-
-#### 交互效果
+#### 最佳实践建议
+1. 查看对话框宽度建议 800px-1000px，根据内容自适应
+2. 详情展示采用只读表单形式，提供良好的数据展示结构
+3. 对于图片、文件等特殊字段，需要合适的预览组件
+4. 长文本内容建议使用滚动容器限制高度
+5. 必要时可以在详情页面添加相关操作按钮
 
--   **悬浮状态**: 上移 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>
-```
+### 2. 表格长文本显示规范（强制性）
 
-#### 操作列按钮规范
+#### 实现要求
+- **✅ 必须实现**: 所有表格中的长文本字段必须限制显示行数
+- **🎯 目标**: 保持表格整洁美观，同时提供完整内容的查看方式
 
+#### 标准实现方式
 ```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