组长端跳转到纯净项目详情页（无管理端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`	纯净页面，无任何布局包裹

路由对比

原来的路由（带布局）

// 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', ... },
        // ...
      ]
    }
  ]
}

特点：

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

现在使用的路由（纯净）

// 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行

修改内容:

// 查看项目详情 - 跳转到纯净的项目详情页（无管理端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);
}

关键点:

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

2. HTML模板修改

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

位置: 第233行

修改内容:

<!-- ❌ 旧代码：使用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宽度
视觉干扰：管理端元素与项目内容混在一起
角色混淆：组长看到管理员的界面

修改后（纯净页面）

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

优点:

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

🧪 测试验证

测试步骤

清除或设置cid

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

刷新浏览器

Ctrl+Shift+R (Windows/Linux)
Cmd+Shift+R (Mac)

访问组长端Dashboard

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

点击任意项目卡片
- 点击项目标题
- 或点击"查看详情"按钮
- 或点击卡片空白处
验证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

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

📦 涉及文件

修改的文件

✅ src/app/pages/team-leader/dashboard/dashboard.ts
- 第2204-2219行：修改 viewProjectDetails() 方法
- 改为跳转到 wxwork 路由
✅ src/app/pages/team-leader/dashboard/dashboard.html
- 第233行：修改项目标题的点击事件
- 从 routerLink 改为 (click) 事件

💡 技术细节

cid (Company ID) 的作用

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

用途:

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

存储位置: localStorage['company']

默认值: cDL6R1hgSi

路由参数说明

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    ← 售后归档

🎯 适用场景

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

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

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

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

📖 相关文档

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 管理员）

核心优势

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

功能实现完成！ ✨

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

2025102219-clean-project-detail-navigation.md 12 KB

Historie Surový

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

📋 问题描述

用户反馈

用户期望

🎯 解决方案

核心思路

路由对比

原来的路由（带布局）

现在使用的路由（纯净）

📝 实现细节

1. TypeScript修改

2. HTML模板修改

🎨 用户体验对比

修改前（带管理端UI）

修改后（纯净页面）

🧪 测试验证

测试步骤

测试案例

🔄 URL格式对比

管理员端路由（带布局）

wxwork路由（纯净）

设计师路由

📦 涉及文件

修改的文件

相关文件（无需修改）

💡 技术细节

cid (Company ID) 的作用

路由参数说明

阶段切换

🎯 适用场景

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

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

📖 相关文档

🎉 总结

修改前

修改后

核心优势

2025102219-clean-project-detail-navigation.md 12 KB Historie Surový

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

📋 问题描述

用户反馈

用户期望

🎯 解决方案

核心思路

路由对比

原来的路由（带布局）

现在使用的路由（纯净）

📝 实现细节

1. TypeScript修改

2. HTML模板修改

🎨 用户体验对比

修改前（带管理端UI）

修改后（纯净页面）

🧪 测试验证

测试步骤

测试案例

🔄 URL格式对比

管理员端路由（带布局）

wxwork路由（纯净）

设计师路由

📦 涉及文件

修改的文件

相关文件（无需修改）

💡 技术细节

cid (Company ID) 的作用

路由参数说明

阶段切换

🎯 适用场景

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

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

📖 相关文档

🎉 总结

修改前

修改后

核心优势

2025102219-clean-project-detail-navigation.md 12 KB

Historie Surový