## 设计师端功能操作路径（操作步骤） ### 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` 等）用于详细的财务追踪。 --- 如需，我可以再为设计师端补充： - 每个页面的「典型操作场景」（例如：收到新任务 → 打开项目 → 上传渲染图 → 填写自查项 → 通知组长审核）； - 或者画一份文字版「从任务到交付完成」的完整流程，用于培训文档。