# 客服项目列表导航统一化

## 📋 任务概述

将客服项目列表的项目详情页跳转逻辑统一为wxwork路由模式，与组长和管理员保持一致。

## ✅ 完成内容

### 1. 路由模式统一

#### 之前的跳转方式
```typescript
// 跳转到设计师项目详情页，传递查询参数
this.router.navigate(['/designer/project-detail', project.id], { 
  queryParams: { 
    role: 'customer-service',
    activeTab: 'progress',
    currentStage: stageMapping[columnId],
    from: 'customer-service-list'
  } 
});
```

**问题**：
- 使用的是设计师专用的项目详情页
- 依赖查询参数传递状态
- 与组长、管理员的跳转方式不一致

#### 现在的跳转方式
```typescript
// 跳转到wxwork项目详情页（与组长、管理员保持一致）
const cid = localStorage.getItem('company') || '';
const stagePath = stagePathMapping[columnId];
this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);
```

**优势**：
- ✅ 使用wxwork统一的项目详情页
- ✅ 路由直接包含阶段信息
- ✅ 与组长、管理员的跳转方式一致
- ✅ 纯净页面，无管理端侧边栏

### 2. 阶段路径映射

#### 看板列到wxwork阶段的映射

| 看板列ID | 看板列名称 | wxwork阶段路径 | 说明 |
|---------|-----------|---------------|------|
| `order` | 订单分配 | `order` | 订单分配阶段 |
| `requirements` | 确认需求 | `requirements` | 确认需求阶段 |
| `delivery` | 交付执行 | `delivery` | 交付执行阶段 |
| `aftercare` | 售后 | `aftercare` | 售后归档阶段 |

#### wxwork支持的所有阶段路径

根据 `yss-project/src/app/app.routes.ts` 的配置：

```typescript
{
  path: 'project/:projectId',
  loadComponent: () => import('../modules/project/pages/project-detail/project-detail.component').then(m => m.ProjectDetailComponent),
  children: [
    { path: '', redirectTo: 'order', pathMatch: 'full' },
    { path: 'order', ... },           // 订单分配
    { path: 'requirements', ... },    // 确认需求
    { path: 'delivery', ... },        // 交付执行
    { path: 'aftercare', ... },       // 售后归档
    { path: 'issues', ... }           // 问题追踪
  ]
}
```

### 3. 路由格式

#### 完整路由格式
```
/wxwork/:cid/project/:projectId/:stage
```

#### 参数说明
- `:cid` - 公司ID（从localStorage获取）
- `:projectId` - 项目ID
- `:stage` - 阶段路径（order/requirements/delivery/aftercare/issues）

#### 示例路由
```
/wxwork/cDL6R1hgSi/project/abc123/order
/wxwork/cDL6R1hgSi/project/abc123/requirements
/wxwork/cDL6R1hgSi/project/abc123/delivery
/wxwork/cDL6R1hgSi/project/abc123/aftercare
```

## 📝 修改详情

### 修改文件：`yss-project/src/app/pages/customer-service/project-list/project-list.ts`

#### 修改的方法：`navigateToProject()`

**修改前**：
```typescript
navigateToProject(project: ProjectListItem, columnId: 'order' | 'requirements' | 'delivery' | 'aftercare') {
  const stageMapping = {
    'order': '订单分配',
    'requirements': project.currentStage || '需求沟通',
    'delivery': project.currentStage || '建模',
    'aftercare': '客户评价'
  };
  
  this.router.navigate(['/designer/project-detail', project.id], { 
    queryParams: { 
      role: 'customer-service',
      activeTab: 'progress',
      currentStage: stageMapping[columnId],
      from: 'customer-service-list'
    } 
  });
}
```

**修改后**：
```typescript
navigateToProject(project: ProjectListItem, columnId: 'order' | 'requirements' | 'delivery' | 'aftercare') {
  // 获取公司ID
  const cid = localStorage.getItem('company') || '';
  if (!cid) {
    console.error('未找到公司ID，无法跳转到项目详情页');
    return;
  }
  
  // 根据columnId映射到wxwork路由的阶段路径
  const stagePathMapping = {
    'order': 'order',           // 订单分配
    'requirements': 'requirements', // 确认需求
    'delivery': 'delivery',     // 交付执行
    'aftercare': 'aftercare'    // 售后归档
  };
  
  const stagePath = stagePathMapping[columnId];
  
  // 跳转到wxwork路由的项目详情页（纯净页面，无管理端侧边栏）
  this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);
}
```

## 🔍 与其他板块的对比

### 组长板块
```typescript
// yss-project/src/app/pages/team-leader/dashboard/dashboard.ts
viewProjectDetails(projectId: string): void {
  const cid = localStorage.getItem('company') || 'cDL6R1hgSi';
  this.router.navigate(['/wxwork', cid, 'project', projectId, 'order']);
}
```

### 管理员板块
```html
<!-- yss-project/src/app/pages/admin/project-management/project-management.html -->
<a [routerLink]="['/admin/project-detail', project.id]">{{ project.title }}</a>
```

**注意**：管理员使用的是 `/admin/project-detail/:projectId`，这是管理员专用的项目详情页，包含管理端侧边栏和更多管理功能。

### 客服板块（现在）
```typescript
// yss-project/src/app/pages/customer-service/project-list/project-list.ts
navigateToProject(project: ProjectListItem, columnId: string) {
  const cid = localStorage.getItem('company') || '';
  this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);
}
```

**统一性**：客服和组长现在使用相同的wxwork路由模式。

## 🎯 用户体验改进

### 1. 一致的导航体验
- ✅ 客服、组长使用相同的项目详情页
- ✅ 统一的页面布局和交互
- ✅ 减少学习成本

### 2. 精准的阶段定位
- ✅ 点击"订单分配"列的项目，直接进入订单分配阶段
- ✅ 点击"确认需求"列的项目，直接进入确认需求阶段
- ✅ 点击"交付执行"列的项目，直接进入交付执行阶段
- ✅ 点击"售后"列的项目，直接进入售后归档阶段

### 3. 纯净的页面展示
- ✅ 无管理端侧边栏
- ✅ 专注于项目内容
- ✅ 适合客服和组长的工作场景

## 📊 路由架构

### wxwork路由结构
```
/wxwork/:cid
  ├── /project/:projectId
  │   ├── /order          (订单分配)
  │   ├── /requirements   (确认需求)
  │   ├── /delivery       (交付执行)
  │   ├── /aftercare      (售后归档)
  │   └── /issues         (问题追踪)
  ├── /contact/:contactId (客户画像)
  └── /survey/project/:projectId (项目问卷)
```

### 各板块使用的路由

| 板块 | 路由模式 | 说明 |
|------|---------|------|
| 客服 | `/wxwork/:cid/project/:projectId/:stage` | 纯净页面 |
| 组长 | `/wxwork/:cid/project/:projectId/:stage` | 纯净页面 |
| 设计师 | `/designer/project-detail/:id` | 设计师专用页面 |
| 管理员 | `/admin/project-detail/:projectId` | 管理端页面 |

## 🚀 使用示例

### 从客服项目列表跳转

1. **点击"订单分配"列的项目**
   ```
   跳转到: /wxwork/cDL6R1hgSi/project/abc123/order
   显示: 订单分配阶段的内容
   ```

2. **点击"确认需求"列的项目**
   ```
   跳转到: /wxwork/cDL6R1hgSi/project/abc123/requirements
   显示: 确认需求阶段的内容
   ```

3. **点击"交付执行"列的项目**
   ```
   跳转到: /wxwork/cDL6R1hgSi/project/abc123/delivery
   显示: 交付执行阶段的内容
   ```

4. **点击"售后"列的项目**
   ```
   跳转到: /wxwork/cDL6R1hgSi/project/abc123/aftercare
   显示: 售后归档阶段的内容
   ```

## ⚠️ 注意事项

### 1. 公司ID必须存在

跳转前会检查localStorage中的`company`字段：

```typescript
const cid = localStorage.getItem('company') || '';
if (!cid) {
  console.error('未找到公司ID，无法跳转到项目详情页');
  return;
}
```

如果没有公司ID，需要先设置：
```javascript
localStorage.setItem('company', 'your-company-id');
```

### 2. wxwork路由需要正确配置

确保 `yss-project/src/app/app.routes.ts` 中的wxwork路由已正确配置。

### 3. 项目ID必须有效

确保传递的项目ID在Parse Server中存在，否则会显示404或错误页面。

## 🔧 调试技巧

### 1. 检查路由跳转

在浏览器控制台查看路由变化：
```javascript
// 当前路由
console.log(window.location.pathname);

// 应该显示类似：
// /wxwork/cDL6R1hgSi/project/abc123/order
```

### 2. 检查公司ID

```javascript
console.log('公司ID:', localStorage.getItem('company'));
```

### 3. 手动测试路由

直接在浏览器地址栏输入：
```
http://localhost:4200/wxwork/cDL6R1hgSi/project/your-project-id/order
```

## 📚 相关文档

- [wxwork路由配置](../../src/app/app.routes.ts)
- [项目详情组件](../../src/modules/project/pages/project-detail/project-detail.component.ts)
- [客服项目列表](../../src/app/pages/customer-service/project-list/project-list.ts)
- [组长工作台](../../src/app/pages/team-leader/dashboard/dashboard.ts)

## 📝 修改记录

| 日期 | 修改内容 | 修改人 |
|------|---------|--------|
| 2024-10-25 | 统一客服项目列表跳转为wxwork路由 | AI Assistant |

---

**完成时间**: 2024-10-25  
**开发者**: AI Assistant  
**状态**: ✅ 已完成  
**影响范围**: 客服项目列表导航