yss-project/docs/locate/DESIGNER-OPERATIONS-AND-FIELDS.md

设计师端功能操作路径（操作步骤）

1. 设计师工作台（Dashboard） → 任务与项目

• 入口路径
  • 网页端（不带公司ID，通常仅内部调试）：/designer/dashboard
  • 企微端（正式使用）：/wxwork/:cid/designer/dashboard
• 身份认证与角色校验
  • 通过 URL 或 localStorage 获取 cid（公司ID）。
  • 初始化企微授权 WxworkAuth({ cid, appId: 'crm' }) 并调用 authenticateAndLoadData()。
  • 从认证结果中获取 user 与 profile，并验证角色：
  • 若 profile.roleName !== '组员'，则弹出提示「您不是设计师（组员），无权访问此页面」并跳转首页。
• 数据加载与视图切换
  • 初始化成功后，调用 loadDashboardData()：
  • loadRealTasks()：加载当前设计师的任务列表（来自 DesignerTaskService.getMyTasks(profile.id)）。
  • loadShiftTasks()：加载代班任务。
  • calculateWorkloadPercentage()：计算个人项目饱和度（工作量百分比）。
  • loadProjectTimeline()：加载项目时间轴信息。
  • loadDesignerProjects()：加载与当前设计师相关的项目负载数据。
  • 顶部或侧边切换视图：
  • activeDashboard: 'main' | 'skills' | 'personal'，在主工作台 / 技能雷达 / 个人看板之间切换。
  • viewMode: 'card' | 'list' 让任务视图在卡片/列表模式之间切换。
• 任务层面的操作
  • 在任务列表中查看：
  • 超期任务 overdueTasks（isOverdue === true）。
  • 紧急任务 urgentTasks（例如距截止时间 3 小时内且属于渲染阶段的任务）。
  • 常规操作路径：
  • 点击某条任务 → 展开查看详细信息（所属项目、阶段、客户名、截止时间等）。
  • 通过链接/按钮跳转到项目详情页（通常为 /wxwork/:cid/project/:projectId 或设计师端项目详情）。

2. 设计师项目详情页（Designer Project Detail）

• 入口路径
  • 网页端：/designer/project-detail/:id
  • 企微端：/wxwork/:cid/designer/project-detail/:id
  • 组长/客服端也会复用该组件，并通过 roleName 或路径识别视图角色。

• 角色视图与权限控制

  • 角色上下文字段：
  • roleContext: 'customer-service' | 'designer' | 'team-leader' | 'technical' = 'designer'
  • 通过 URL 查询参数与路径检测角色：
  • 优先从 ?roleName= 获取：
    • customer-service → 客服视角
    • technical → 技术视角
    • team-leader → 组长视角
  • 若查询参数不存在，则根据 URL 路径判断是否包含 /customer-service/、/team-leader/、/technical/。
  • 若路径也没标识，则根据当前用户角色字段（currentUser.roleName）进行判断：
    • 含「组长」或 team-leader → 组长视角
    • 含「客服」 → 客服视角
    • 否则默认视为 designer。
  • 常用视图判定方法：
  • isDesignerView() / isTeamLeaderView() / isCustomerServiceView() / isTechnicalView()
  • isReadOnly()：当为客服视角时返回 true，限制编辑能力。
  • 板块与阶段编辑权限控制：
  • canEditSection(sectionKey)：
    • 客服视角仅可编辑：order（订单分配）、requirements（确认需求）、aftercare（售后）板块；
    • 设计师与组长视角可以编辑所有板块。
  • canEditStage(stage: ProjectStage)：
    • 客服仅能编辑阶段：
    • 订单分配、需求沟通、方案确认（订单分配与确认需求板块）
    • 尾款结算、客户评价、投诉处理（售后板块）
    • 设计师与组长可以编辑全部阶段。

• 交付执行相关操作（设计师核心日常）

  • 阶段图片上传字段：
  • whiteModelImages：白模阶段图片数组。
  • softDecorImages：软装阶段图片数组。
  • renderLargeImages：大图渲染阶段图片数组。
  • postProcessImages：后期阶段图片数组。
  • 每个图片结构中包含：
    • id: string
    • name: string
    • url: string
    • size?: string
    • reviewStatus?: 'pending' | 'approved' | 'rejected'（审核状态，主要由组长操作）
    • synced?: boolean（是否已与后台/组长端同步）
  • 上传过程：
  • 通过上传按钮或拖拽上传图片文件（受 allowedImageTypes='.jpg,.jpeg,.png' 限制）。
  • 上传完成后，图片会被加入对应阶段的数组（如 renderLargeImages），并在 UI 中展示缩略图和状态。
  • showRenderUploadModal 控制渲染大图上传弹窗；pendingRenderLargeItems 暂存待确认大图。
  • 交付流程结构（对空间与工序的组合管理）：
  • deliveryProcesses: DeliveryProcess[]：
    • 每个流程包括：
    • id: 'modeling' | 'softDecor' | 'rendering' | 'postProcess'
    • name: '建模' | '软装' | '渲染' | '后期'
    • isExpanded: boolean：在 UI 中是否展开。
    • spaces: 空间列表（如卧室/客厅/厨房），包含 id, name, order, isExpanded。
    • content: 以空间 ID 为键的状态对象：
      • images: any[]：该空间在该流程下的图片或交付物；
      • progress: number：该流程在该空间下的完成进度；
      • status: 'pending' | 'in_progress' | 'completed' | ...：状态；
      • notes: string：备注；
      • lastUpdated: Date：最后更新时间。
  • 设计师可在 UI 中：
    • 针对每一流程（建模/软装/渲染/后期）和空间（卧室/客厅/厨房）分配与查看交付物；
    • 记录进度与备注，以便组长和客服了解交付状态。

• 质量自查与模型检查

  • modelCheckItems: ModelCheckItem[]：
  • 例如：户型匹配度检查、尺寸精度验证、材质贴图检查、光影效果验证、细节完整性检查。
  • 字段：
    • id: string
    • name: string
    • isPassed: boolean
    • notes?: string
  • 操作路径：
  • 在页面中勾选/取消勾选每一项检查 isPassed。
  • 填写备注 notes 说明问题或经过。

• 组长视角下的同步与审核（设计师端可见，但只在组长视角可操作）

  • 组长视角（在同一组件中）有以下操作，用于审核设计师上传的图片：
  • syncUploadedImages(phase)：
    • 仅在 isTeamLeaderView() 为 true 时生效；
    • 将指定阶段的图片标记为 synced=true，并在未设置 reviewStatus 时初始化为 pending；
    • 用提示告知「已同步该阶段的图片信息」。
  • reviewImage(imageId, phase, status)（代码略）：
    • 组长针对单张图片标记为 approved 或 rejected，同时记录审核结果以便后续统计。

3. 个人看板（Personal Board） → 能力与绩效

• 入口路径
  • 网页端：/designer/personal-board
  • 企微端：/wxwork/:cid/designer/personal-board
  • 组长端也会通过 /team-leader/... 复用该组件查看设计师个人表现。
• 数据来源与展示内容
  • 使用 ProjectService 加载以下数据：
  • skillTags: SkillTag[]：技能标签及熟练度与项目数量。
  • performanceData: PerformanceData[]：按月统计的绩效数据：
    • month: string：月份（如 2024-01）
    • projectCompletionRate: number：项目完成率
    • customerSatisfaction: number：客户满意度
    • deliveryOnTimeRate: number：交付准时率
  • matchingOrders: MatchingOrder[]：匹配度较高的推荐订单：
    • projectName、requiredSkills[]、matchRate、customerLevel 等。
  • settlements: Settlement[]：结算记录列表：
    • 结算金额、阶段、状态（待结算/已结算/逾期）、时间等。
  • 聚合字段：
    • totalSettlementAmount：已结算总金额。
    • pendingSettlementAmount：待结算总金额。
  • 是否为初级设计师标记：
  • isJuniorDesigner: boolean 用于控制部分功能权限（例如某些高级数据或操作仅限资深设计师）。
• 图表展示操作
  • 在 ngAfterViewInit 中，当 performanceData 加载完毕后：
  • 调用 initCustomChart() 使用原生 DOM 构建自定义柱状图。
  • 图表以三个指标为维度：项目完成率、客户满意度、交付准时率。
  • 用户在 UI 中可以：
  • 查看不同月份的三项指标对比；
  • 结合技能标签和匹配订单列表，规划个人能力提升方向。

---

设计师端项目与任务字段（数据视角）

设计师端沿用 src/app/models/project.model.ts 中的通用 Project、Task、SkillTag、PerformanceData 等接口，并在各自页面（Dashboard、Project Detail、Personal Board）上做视图层的再封装。

1. 通用 Task 模型（设计师任务）

• 字段（参考 Task 接口）
  • id: string：任务 ID。
  • projectId: string：所属项目 ID。
  • projectName: string：所属项目名称。
  • title: string：任务标题，一般会使用项目名称。
  • stage: ProjectStage：任务所在项目阶段（如 建模、渲染、后期 等）。
  • deadline: Date：任务截止时间。
  • priority: any：任务优先级（高/中/低）。
  • isOverdue: boolean：是否逾期。
  • isCompleted: boolean：是否完成。
  • assignee: any：任务负责人（设计师）。
  • description: any：任务描述（例如「渲染阶段 - 客户姓名」）。

2. 设计师 Dashboard 内部任务与时间轴数据

• ShiftTask（代班任务）

  • id: string
  • projectId: string
  • projectName: string
  • taskDescription: string
  • priority: '高' | '中' | '低'
  • shiftDate: string
  • status: '待处理' | '处理中' | '已完成'

• ProjectTimelineItem（个人项目时间轴）

  • id: string
  • name: string：项目名称或阶段名称。
  • deadline: string：截止时间（字符串形式）。
  • status: string：当前状态（进行中/已完成/逾期等）。

• CurrentUser（顶部用户信息）

  • userid: string：企微用户ID。
  • name: string：姓名。
  • avatar: string：头像 URL。
  • roleName: string：角色名称（一般为「组员」）。
  • department?: string：部门名称。
  • position?: string：职位。

3. 技能标签与绩效数据（个人看板）

• SkillTag

  • id: string
  • name: string：技能名称（如风格、软件等）。
  • level: number：技能等级（1–5）。
  • count: number：该技能相关的完成项目数量。

• PerformanceData

  • month: string：月份。
  • projectCompletionRate: number：项目完成率。
  • customerSatisfaction: number：客户满意度。
  • deliveryOnTimeRate: number：交付准时率。

• MatchingOrder

  • id: string
  • projectName: string：推荐项目名称。
  • requiredSkills: string[]：所需技能。
  • matchRate: number：匹配度（百分比）。
  • customerLevel: '优质' | '普通'：客户等级。

• Settlement（结算记录）

  • id: string
  • projectId: string
  • stage?: ProjectStage
  • type?: 'deposit' | 'progress' | 'final_payment'
  • amount: number：金额。
  • status: '待结算' | '已结算' | '逾期' | '已取消' | 'pending' | 'completed'
  • createdAt: Date：创建时间。
  • 其他字段（如 settledAt、paidDate、dueDate 等）用于详细的财务追踪。

---

如需，我可以再为设计师端补充：

• 每个页面的「典型操作场景」（例如：收到新任务 → 打开项目 → 上传渲染图 → 填写自查项 → 通知组长审核）；
  
• 或者画一份文字版「从任务到交付完成」的完整流程，用于培训文档。