组长端项目详情页跳转功能实现

日期: 2025-10-24
需求: 组长端点击项目卡片时，能够跳转到管理员端的真实项目详情页

📋 需求说明

用户需求

组长端 (/team-leader/dashboard) 的项目看板中：

✅ 点击项目卡片时，跳转到真实的项目详情页
✅ 使用真实的项目ID，不是固定的地址
✅ 跳转格式：/admin/project-detail/{projectId}/order
✅ 每个项目都有独立的详情页，不重复

示例

旧行为: 点击项目无响应或跳转到不存在的页面
新行为:
- 点击项目1 → /admin/project-detail/iKvYck89zE/order
- 点击项目2 → /admin/project-detail/7EFEsEd0ht/order
- 点击项目3 → /admin/project-detail/abc123xyz/order

✅ 实现方案

1. HTML模板修改

文件: src/app/pages/team-leader/dashboard/dashboard.html

位置: 第227-258行（项目卡片区域）

修改内容:

A. 修改项目标题的 routerLink

<!-- ❌ 旧代码 -->
<h4 [routerLink]="['/team-leader/project-detail', project.id]" 
    (click)="$event.stopPropagation()">
  {{ project.name }}
</h4>

<!-- ✅ 新代码 -->
<h4 [routerLink]="['/admin/project-detail', project.id, 'order']" 
    (click)="$event.stopPropagation()">
  {{ project.name }}
</h4>

说明:

从组长端路由 /team-leader/project-detail/:id 改为管理员端路由
添加默认子路由 order（订单分配阶段）
保留 $event.stopPropagation() 防止触发卡片的点击事件

B. 项目卡片整体点击事件（已存在）

<div class="project-card" 
     (click)="viewProjectDetails(project.id)"
     [class.overdue]="project.isOverdue" 
     [class.high-urgency]="project.urgency === 'high'"
     [class.due-soon]="project.dueSoon && !project.isOverdue">
  <!-- ... 卡片内容 ... -->
</div>

说明:

点击卡片任意位置都会触发 viewProjectDetails()
使用真实的 project.id

C. "查看详情"按钮（已存在）

<button (click)="viewProjectDetails(project.id); $event.stopPropagation()" 
        class="btn-view">
  查看详情
</button>

2. TypeScript逻辑添加

文件: src/app/pages/team-leader/dashboard/dashboard.ts

位置: 第2471-2514行（文件末尾）

新增方法:

A. viewProjectDetails() - 查看项目详情

/**
 * 查看项目详情 - 跳转到管理员端真实项目详情页
 */
viewProjectDetails(projectId: string): void {
  if (!projectId) {
    console.warn('项目ID为空，无法跳转');
    return;
  }
  
  // 跳转到管理员端的项目详情页，使用真实的项目ID
  // 路由格式：/admin/project-detail/:projectId/order
  this.router.navigate(['/admin/project-detail', projectId, 'order']);
  
  console.log('✅ 跳转到项目详情页:', projectId);
}

功能:

参数校验：检查 projectId 是否为空
路由跳转：使用 Router.navigate() 跳转到管理员端项目详情页
日志记录：记录跳转的项目ID，方便调试

B. quickAssignProject() - 快速分配项目

/**
 * 快速分配项目
 */
quickAssignProject(projectId: string): void {
  console.log('快速分配项目:', projectId);
  // TODO: 实现快速分配逻辑
  alert('快速分配功能待实现');
}

用途:

为 HTML 中的"手动分配"按钮提供事件处理
当前为占位实现，未来可扩展

C. openSmartMatch() - 智能推荐

/**
 * 打开智能推荐弹窗
 */
openSmartMatch(project: any): void {
  console.log('打开智能推荐:', project);
  // TODO: 实现智能推荐逻辑
  alert('智能推荐功能待实现');
}

用途:

为 HTML 中的"🤖 智能推荐"按钮提供事件处理
当前为占位实现，未来可集成智能推荐算法

D. reviewProjectQuality() - 质量评审

/**
 * 质量评审
 */
reviewProjectQuality(projectId: string, quality: 'excellent' | 'qualified' | 'unqualified'): void {
  console.log('质量评审:', projectId, quality);
  // TODO: 实现质量评审逻辑
  const qualityText = quality === 'excellent' ? '优秀' : quality === 'qualified' ? '合格' : '不合格';
  alert(`已将项目评为${qualityText}`);
}

用途:

为质量评审按钮提供事件处理
支持三种评级：优秀、合格、不合格

📁 涉及文件

修改的文件

✅ src/app/pages/team-leader/dashboard/dashboard.html
- 第233行：修改项目标题的 routerLink
- 从 /team-leader/project-detail/:id 改为 /admin/project-detail/:id/order
✅ src/app/pages/team-leader/dashboard/dashboard.ts
- 新增 viewProjectDetails() 方法（第2471-2485行）
- 新增 quickAssignProject() 方法（第2487-2494行）
- 新增 openSmartMatch() 方法（第2496-2503行）
- 新增 reviewProjectQuality() 方法（第2505-2513行）

🎯 功能特性

1. 多入口访问

组长可以通过以下方式进入项目详情页：

入口	触发方式	HTML元素
✅ 项目标题	点击标题文字	`<h4 [routerLink]="...">`
✅ 卡片整体	点击卡片任意空白处	`<div class="project-card" (click)="...">`
✅ 查看详情按钮	点击"查看详情"按钮	`<button (click)="viewProjectDetails(...)">`

2. 事件冒泡处理

<!-- 标题点击：阻止冒泡，只触发routerLink -->
<h4 [routerLink]="[...]" (click)="$event.stopPropagation()">

<!-- 按钮点击：阻止冒泡，只触发按钮的事件 -->
<button (click)="viewProjectDetails(project.id); $event.stopPropagation()">

原理:

$event.stopPropagation() 阻止事件向上冒泡
防止点击标题或按钮时，同时触发卡片的点击事件

3. 动态项目ID

// ✅ 使用真实的项目ID
this.router.navigate(['/admin/project-detail', projectId, 'order']);

// 生成的URL示例：
// /admin/project-detail/iKvYck89zE/order
// /admin/project-detail/7EFEsEd0ht/order
// /admin/project-detail/abc123xyz/order

优势:

每个项目有独立的详情页
支持刷新和直接访问
可以分享链接给其他人

🧪 测试验证

测试步骤

启动开发服务器
```
npm start
```

访问组长端Dashboard

http://localhost:4200/team-leader/dashboard

测试项目卡片点击

测试1: 点击项目标题

操作：点击项目卡片上的项目名称
预期：跳转到 /admin/project-detail/{projectId}/order
验证：URL中的 projectId 是真实的项目ID

测试2: 点击"查看详情"按钮

操作：点击项目卡片底部的"查看详情"按钮
预期：跳转到同一个项目详情页
验证：与测试1跳转到相同地址

测试3: 点击卡片空白处

操作：点击项目卡片的任意空白区域
预期：跳转到项目详情页
验证：与测试1、2跳转到相同地址

测试4: 点击不同项目

操作：依次点击看板上的3个不同项目
预期：每次跳转到不同的 projectId
验证：URL中的ID不重复

验证项目详情页加载
- ✅ 页面正常加载，不报错
- ✅ 显示正确的项目信息
- ✅ 四个阶段标签显示正常
- ✅ 当前在"订单分配"阶段

预期结果

操作	预期结果
点击项目1	跳转到 `/admin/project-detail/iKvYck89zE/order`
点击项目2	跳转到 `/admin/project-detail/7EFEsEd0ht/order`
点击项目3	跳转到 `/admin/project-detail/abc123/order`
刷新页面	项目详情页保持显示，数据不丢失
点击浏览器"后退"	返回组长端Dashboard

🎨 用户体验优化

1. 视觉反馈

项目卡片已有的样式：

.project-card {
  cursor: pointer;  // 鼠标悬停显示手型
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);  // 悬停时上移
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);  // 增强阴影
  }
}

2. 加载状态

项目详情页会显示加载动画：

loading: boolean = true;  // 初始加载状态

3. 错误处理

if (!projectId) {
  console.warn('项目ID为空，无法跳转');
  return;
}

🔄 与其他端的一致性

管理员端

路由: /admin/project-detail/:projectId/order
功能: 完整的项目管理功能

组长端（本次修改）

路由: 跳转到 /admin/project-detail/:projectId/order
功能: 复用管理员端的项目详情页

设计师端

路由: /designer/project-detail/:id
功能: 设计师专用的项目详情页

好处:

组长和管理员看到的是同一个页面，保持信息一致
减少代码重复，便于维护
统一的用户体验

📖 相关文档

src/app/app.routes.ts - 路由配置文件
docs/task/2025102217-wxwork-sdk-init-fix.md - 企微SDK初始化修复文档
docs/task/2025102216-team-leader-database-integration.md - Parse数据库集成文档

🎉 总结

修改前

❌ 点击项目卡片无响应
❌ 项目标题的routerLink指向不存在的路由
❌ 缺少 viewProjectDetails() 等方法

修改后

✅ 点击项目卡片跳转到管理员端项目详情页
✅ 每个项目使用真实的项目ID，不重复
✅ 多入口访问（标题、按钮、卡片）
✅ 完善的事件冒泡处理
✅ 添加了4个新方法，支持未来功能扩展

核心改进

路由统一: 组长端和管理员端共享项目详情页
真实数据: 使用Parse数据库中的真实项目ID
用户友好: 多入口访问，清晰的视觉反馈
可维护性: 方法封装良好，便于未来扩展

功能实现完成！ ✨

2025102218-team-leader-project-detail-navigation.md 9.9 KB

لینک دائمی تاريخچه خام

组长端项目详情页跳转功能实现

📋 需求说明

用户需求

示例

✅ 实现方案

1. HTML模板修改

A. 修改项目标题的 routerLink

B. 项目卡片整体点击事件（已存在）

C. "查看详情"按钮（已存在）

2. TypeScript逻辑添加

A. viewProjectDetails() - 查看项目详情

B. quickAssignProject() - 快速分配项目

C. openSmartMatch() - 智能推荐

D. reviewProjectQuality() - 质量评审

📁 涉及文件

修改的文件

相关文件

🎯 功能特性

1. 多入口访问

2. 事件冒泡处理

3. 动态项目ID

🧪 测试验证

测试步骤

预期结果

🎨 用户体验优化

1. 视觉反馈

2. 加载状态

3. 错误处理

🔄 与其他端的一致性

管理员端

组长端（本次修改）

设计师端

📖 相关文档

🎉 总结

修改前

修改后

核心改进

2025102218-team-leader-project-detail-navigation.md 9.9 KB لینک دائمی تاريخچه خام

组长端项目详情页跳转功能实现

📋 需求说明

用户需求

示例

✅ 实现方案

1. HTML模板修改

A. 修改项目标题的 routerLink

B. 项目卡片整体点击事件（已存在）

C. "查看详情"按钮（已存在）

2. TypeScript逻辑添加

A. viewProjectDetails() - 查看项目详情

B. quickAssignProject() - 快速分配项目

C. openSmartMatch() - 智能推荐

D. reviewProjectQuality() - 质量评审

📁 涉及文件

修改的文件

相关文件

🎯 功能特性

1. 多入口访问

2. 事件冒泡处理

3. 动态项目ID

🧪 测试验证

测试步骤

预期结果

🎨 用户体验优化

1. 视觉反馈

2. 加载状态

3. 错误处理

🔄 与其他端的一致性

管理员端

组长端（本次修改）

设计师端

📖 相关文档

🎉 总结

修改前

修改后

核心改进

2025102218-team-leader-project-detail-navigation.md 9.9 KB

لینک دائمی تاريخچه خام