# 组长端跳转到纯净项目详情页（无管理端UI）

**日期**: 2025-10-24  
**需求**: 从组长端点击项目后，进入纯净的项目详情页，不显示管理员端的侧边栏导航等UI元素

---

## 📋 问题描述

### 用户反馈

从组长端点击项目后，跳转到 `/admin/project-detail/:projectId/order`：
- ❌ 显示了管理员端的侧边栏导航
- ❌ 显示了管理员端的顶部导航栏
- ❌ 整体布局包含了 AdminLayout

### 用户期望

- ✅ 只显示项目详情页的内容
- ✅ 无侧边栏、无顶部导航
- ✅ 纯净的项目内容展示

---

## 🎯 解决方案

### 核心思路

使用 `wxwork` 路由而非 `admin` 路由：

| 路由类型 | 路径格式 | 特点 |
|---------|---------|------|
| ❌ 管理员端路由 | `/admin/project-detail/:projectId/order` | 包含AdminLayout（侧边栏+顶部栏） |
| ✅ wxwork路由 | `/wxwork/:cid/project/:projectId/order` | 纯净页面，无任何布局包裹 |

### 路由对比

#### 原来的路由（带布局）

```typescript
// src/app/app.routes.ts 第184-235行
{
  path: 'admin',
  loadComponent: () => import('./pages/admin/admin-layout/admin-layout').then(m => m.AdminLayout),
  children: [
    // ... 其他路由
    {
      path: 'project-detail/:projectId',
      loadComponent: () => import('../modules/project/pages/project-detail/project-detail.component').then(m => m.ProjectDetailComponent),
      children: [
        { path: 'order', ... },
        { path: 'requirements', ... },
        // ...
      ]
    }
  ]
}
```

**特点**：
- ✅ 完整的管理后台体验
- ❌ 有侧边栏导航
- ❌ 有顶部导航栏
- ❌ 适合管理员使用

#### 现在使用的路由（纯净）

```typescript
// src/app/app.routes.ts 第312-377行
{
  path: 'wxwork/:cid',
  children: [
    {
      path: 'project/:projectId',
      loadComponent: () => import('../modules/project/pages/project-detail/project-detail.component').then(m => m.ProjectDetailComponent),
      children: [
        { path: 'order', ... },
        { path: 'requirements', ... },
        // ...
      ]
    }
  ]
}
```

**特点**：
- ✅ 纯净的项目详情页
- ✅ 无侧边栏、无顶部栏
- ✅ 全屏显示项目内容
- ✅ 适合组长、设计师使用

---

## 📝 实现细节

### 1. TypeScript修改

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

**位置**: 第2204-2219行

**修改内容**:

```typescript
// 查看项目详情 - 跳转到纯净的项目详情页（无管理端UI）
viewProjectDetails(projectId: string): void {
  if (!projectId) {
    console.warn('⚠️ 项目ID为空，无法跳转');
    return;
  }
  
  // 获取公司ID
  const cid = localStorage.getItem('company') || 'cDL6R1hgSi';
  
  // 跳转到wxwork路由的项目详情页（纯净页面，无管理端侧边栏）
  // 路由格式：/wxwork/:cid/project/:projectId/order
  this.router.navigate(['/wxwork', cid, 'project', projectId, 'order']);
  
  console.log('✅ 组长端跳转到纯净项目详情页:', projectId);
}
```

**关键点**:
1. **获取cid**: 从 `localStorage.getItem('company')` 获取
2. **默认值**: 如果没有，使用默认的 `cDL6R1hgSi`
3. **路由参数**: `['/wxwork', cid, 'project', projectId, 'order']`
4. **URL示例**: `/wxwork/cDL6R1hgSi/project/iKvYck89zE/order`

### 2. HTML模板修改

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

**位置**: 第233行

**修改内容**:

```html
<!-- ❌ 旧代码：使用routerLink -->
<h4 [routerLink]="['/admin/project-detail', project.id, 'order']" 
    (click)="$event.stopPropagation()">
  {{ project.name }}
</h4>

<!-- ✅ 新代码：使用click事件 -->
<h4 (click)="viewProjectDetails(project.id); $event.stopPropagation()" 
    style="cursor: pointer;">
  {{ project.name }}
</h4>
```

**改进点**:
- 移除了 `routerLink`，统一使用 `viewProjectDetails()` 方法
- 添加了 `cursor: pointer` 样式，鼠标悬停显示手型
- 保持 `$event.stopPropagation()` 防止事件冒泡

---

## 🎨 用户体验对比

### 修改前（带管理端UI）

```
┌─────────────────────────────────────────┐
│ 系统管理后台 [管理员顶部栏]              │
├──────┬──────────────────────────────────┤
│ 侧   │ 项目详情页内容                    │
│ 边   │ ├─ 订单分配                       │
│ 栏   │ ├─ 确认需求                       │
│      │ ├─ 交付执行                       │
│ 导   │ └─ 售后归档                       │
│ 航   │                                   │
│      │                                   │
└──────┴──────────────────────────────────┘
```

**缺点**:
- 占用空间：侧边栏占据约200px宽度
- 视觉干扰：管理端元素与项目内容混在一起
- 角色混淆：组长看到管理员的界面

### 修改后（纯净页面）

```
┌─────────────────────────────────────────┐
│ 项目详情页内容（全屏）                   │
│ ├─ 订单分配                              │
│ ├─ 确认需求                              │
│ ├─ 交付执行                              │
│ └─ 售后归档                              │
│                                          │
│                                          │
│                                          │
│                                          │
└─────────────────────────────────────────┘
```

**优点**:
- ✅ 全屏显示：更多空间展示项目信息
- ✅ 专注内容：无干扰元素
- ✅ 角色明确：纯粹的项目视图

---

## 🧪 测试验证

### 测试步骤

1. **清除或设置cid**
   ```javascript
   // 在浏览器控制台执行
   // 方式1: 使用真实的公司ID
   localStorage.setItem("company", "cDL6R1hgSi");
   
   // 方式2: 清除cid，测试默认值
   localStorage.removeItem("company");
   ```

2. **刷新浏览器**
   ```
   Ctrl+Shift+R (Windows/Linux)
   Cmd+Shift+R (Mac)
   ```

3. **访问组长端Dashboard**
   ```
   http://localhost:4200/team-leader/dashboard
   ```

4. **点击任意项目卡片**
   - 点击项目标题
   - 或点击"查看详情"按钮
   - 或点击卡片空白处

5. **验证URL和页面**
   
   **预期URL**:
   ```
   http://localhost:4200/wxwork/cDL6R1hgSi/project/iKvYck89zE/order
   ```
   
   **预期页面表现**:
   - ✅ 无侧边栏导航
   - ✅ 无顶部管理栏
   - ✅ 全屏显示项目内容
   - ✅ 显示四个阶段标签：订单分配、确认需求、交付执行、售后归档
   - ✅ 当前在"订单分配"阶段

### 测试案例

| 测试项 | 操作 | 预期结果 |
|--------|------|---------|
| 有cid | localStorage.setItem("company", "abc123") | 跳转到 `/wxwork/abc123/project/...` |
| 无cid | localStorage.removeItem("company") | 跳转到 `/wxwork/cDL6R1hgSi/project/...` (默认值) |
| 点击标题 | 点击项目名称 | 跳转到纯净项目详情页 |
| 点击按钮 | 点击"查看详情" | 跳转到纯净项目详情页 |
| 点击卡片 | 点击卡片空白处 | 跳转到纯净项目详情页 |
| 不同项目 | 点击3个不同项目 | 每次跳转到不同的projectId |
| 刷新页面 | F5刷新 | 页面保持，数据不丢失 |
| 后退按钮 | 点击浏览器后退 | 返回组长端Dashboard |

---

## 🔄 URL格式对比

### 管理员端路由（带布局）

```
格式: /admin/project-detail/:projectId/order
示例: /admin/project-detail/iKvYck89zE/order

访问者: 管理员
特点: 有侧边栏、顶部栏
适用: 后台管理操作
```

### wxwork路由（纯净）

```
格式: /wxwork/:cid/project/:projectId/order
示例: /wxwork/cDL6R1hgSi/project/iKvYck89zE/order

访问者: 组长、设计师、客服
特点: 无任何布局，全屏显示
适用: 项目协作查看
```

### 设计师路由

```
格式: /designer/project-detail/:id
示例: /designer/project-detail/iKvYck89zE

访问者: 设计师
特点: 设计师专用界面
适用: 设计师工作视图
```

---

## 📦 涉及文件

### 修改的文件

1. ✅ `src/app/pages/team-leader/dashboard/dashboard.ts`
   - 第2204-2219行：修改 `viewProjectDetails()` 方法
   - 改为跳转到 wxwork 路由

2. ✅ `src/app/pages/team-leader/dashboard/dashboard.html`
   - 第233行：修改项目标题的点击事件
   - 从 `routerLink` 改为 `(click)` 事件

### 相关文件（无需修改）

- `src/app/app.routes.ts` - 路由配置（已有wxwork路由）
- `src/modules/project/pages/project-detail/project-detail.component.ts` - 项目详情组件
- `src/pages/admin/admin-layout/admin-layout.ts` - 管理员布局（不使用）

---

## 💡 技术细节

### cid (Company ID) 的作用

```typescript
const cid = localStorage.getItem('company') || 'cDL6R1hgSi';
```

**用途**:
1. **企微授权**: WxworkSDK初始化需要cid
2. **数据隔离**: 不同公司看到不同的数据
3. **多租户支持**: 支持多个公司使用同一系统

**存储位置**: `localStorage['company']`

**默认值**: `cDL6R1hgSi`

### 路由参数说明

```typescript
this.router.navigate(['/wxwork', cid, 'project', projectId, 'order']);
```

| 参数位置 | 参数名 | 说明 | 示例 |
|---------|--------|------|------|
| 参数1 | 'wxwork' | 路由前缀 | 固定值 |
| 参数2 | cid | 公司ID | 'cDL6R1hgSi' |
| 参数3 | 'project' | 项目路由 | 固定值 |
| 参数4 | projectId | 项目ID | 'iKvYck89zE' |
| 参数5 | 'order' | 当前阶段 | 'order'/'requirements'/'delivery'/'aftercare' |

### 阶段切换

用户可以在项目详情页切换阶段：

```
/wxwork/:cid/project/:projectId/order        ← 订单分配
/wxwork/:cid/project/:projectId/requirements ← 确认需求
/wxwork/:cid/project/:projectId/delivery     ← 交付执行
/wxwork/:cid/project/:projectId/aftercare    ← 售后归档
```

---

## 🎯 适用场景

### ✅ 适合使用纯净页面的场景

1. **组长查看项目**: 无需管理端功能，专注项目内容
2. **设计师协作**: 多个设计师共同查看项目
3. **移动端访问**: 小屏幕下更友好
4. **企微内嵌**: 在企业微信中打开项目详情
5. **分享链接**: 发给客户或外部协作者

### ❌ 不适合的场景（应使用管理端路由）

1. **系统配置**: 需要访问系统设置
2. **用户管理**: 需要管理员权限
3. **批量操作**: 需要侧边栏快速导航
4. **数据统计**: 需要查看多个管理模块

---

## 📖 相关文档

- `src/app/app.routes.ts` - 完整路由配置
- `docs/task/2025102218-team-leader-project-detail-navigation.md` - 组长端项目跳转功能
- `docs/task/2025102217-wxwork-sdk-init-fix.md` - 企微SDK初始化修复
- `rules/wxwork/guard-wxwork.md` - 企微路由守卫文档

---

## 🎉 总结

### 修改前

- ❌ 跳转到 `/admin/project-detail/:projectId/order`
- ❌ 显示管理员端侧边栏和顶部栏
- ❌ 页面布局受AdminLayout限制
- ❌ 占用额外空间，视觉干扰

### 修改后

- ✅ 跳转到 `/wxwork/:cid/project/:projectId/order`
- ✅ 纯净的项目详情页，无任何管理端UI
- ✅ 全屏显示，更多空间展示项目内容
- ✅ 更清晰的角色定位（组长 vs 管理员）

### 核心优势

1. **空间利用**: 全屏显示，无侧边栏占用
2. **专注内容**: 无管理端元素干扰
3. **角色明确**: 纯粹的项目协作视图
4. **灵活性强**: 适合多种场景（移动端、企微、分享）
5. **性能更好**: 无需加载AdminLayout组件

---

**功能实现完成！** ✨

现在从组长端点击项目，会进入纯净的项目详情页，不再显示管理员端的侧边栏和顶部导航栏！