# 易投案件交付系统工作台原型设计

- 日期: 2026-04-13
- 状态: 已确认设计方向，待进入 implementation plan
- 原型仓库: `quote-estimator`
- 设计来源: 基于用户确认的结构型方案，不直接复刻 Doubao 文档正文

## 1. 目标与边界

本次原型面向交付经理，目标是做出一套桌面端优先、具备真实系统感的案件交付工作台。原型既要能用于日常流程演示，也要保留一定汇报能力，但不以老板视角大屏为中心。

本次交付只覆盖前端原型，不接真实后端，不做权限系统闭环，不实现实际文件上传、消息推送、审批引擎和日历同步。所有内容以静态或本地 mock 数据驱动。

## 2. 目标用户

目标用户为交付经理，核心关注点如下:

- 同时跟进多个案件时，快速识别延期、阻塞、审批和资料缺口
- 在一个工作台内完成案件跟进、任务推进、资料催办和异常处理
- 从首页进入案件详情后，不需要频繁跨页即可完成大部分判断和操作

## 3. 体验原则

- 真实系统感优先: 页面要像可用工作台，而不是展示型海报
- 桌面效率优先: 以 1440px 左右视口为主要布局基准，强调左右分栏和高信息密度
- 一屏可判断: 关键状态、风险等级、下一节点、待办动作要在首屏可见
- 风险突出但不过度惊扰: 只对延期、阻塞、冲突、缺资料使用强警示色
- 汇报能力保留: 首页和案件概览依然要能用于评审演示

## 4. 信息架构

整体采用三层结构:

1. 左侧主导航
   `工作台 / 案件中心 / 排期日历 / 资料中心 / 审批异常 / 团队负载`
2. 中间主工作区
   展示列表、看板、时间线、表格、详情内容
3. 右侧上下文侧栏
   根据页面动态展示案件摘要、风险提醒、联系人、快捷动作、最近动态

原型页范围固定为 5 个核心页面:

1. 工作台
2. 案件中心
3. 案件详情
4. 排期日历
5. 资料与异常工作台

## 5. 全局框架

全局框架采用统一工作台壳层:

- 左侧固定导航栏，支持当前菜单高亮
- 顶部保留页面标题、全局搜索占位、用户头像、筛选快捷入口
- 中间内容区根据页面切换
- 右侧上下文栏在首页和案件详情默认展开，在其他页面可折叠

全局高频动作统一为:

- 更新阶段
- 发起审批
- 催补资料
- 标记风险
- 查看案件详情

## 6. 页面设计

### 6.1 工作台

工作台是交付经理的开工第一屏，不做 BI 大屏，而做高可操作性的任务总览。

布局分为四块:

1. 顶部总览条
   展示 `进行中案件数 / 临近交期 / 异常待处理 / 待审批 / 资料待补齐`
2. 我的推进面板
   展示 `今日待办 / 逾期任务 / 需要我拍板的审批 / 高风险案件`
3. 案件推进列表
   列出案件 `当前阶段 / 下一节点 / 责任人 / 风险标签 / 完成率`
4. 提醒与动态
   展示 `今日里程碑 / 客户待回复 / 版本更新 / 最近团队动作`

首页每条关键事项都必须带动作入口，如 `去处理 / 去催办 / 去审批 / 查看详情`。

### 6.2 案件中心

案件中心是多案件并行管理入口，采用左上筛选 + 中部列表的管理页模式。

列表字段包含:

- 案件名称
- 客户名称
- 当前阶段
- 交付经理
- 下一个关键节点
- 计划交期
- 风险等级
- 完成率

筛选条件包含:

- 阶段
- 负责人
- 客户
- 风险等级
- 是否逾期

该页要支持从列表直接进入案件详情，也要支持快速标记风险和查看异常摘要。

### 6.3 案件详情

案件详情是全套原型的核心页面，采用 `顶部摘要 + 标签页 + 右侧上下文栏` 的结构。

顶部摘要区展示:

- 案件名称
- 客户
- 当前阶段
- 交付经理
- 计划交期
- 风险等级
- 完成率
- 最近更新时间

顶部摘要区同时提供三个动作按钮:

- 更新阶段
- 发起审批
- 催补资料

标签页固定为:

1. 概览
   展示阶段进度条、关键里程碑、负责人矩阵、风险清单、最近动态
2. 任务排期
   展示任务列表和轻量时间轴，字段为 `任务名 / 负责人 / 开始时间 / 截止时间 / 状态 / 依赖 / 完成度 / 是否阻塞`
3. 资料交接
   展示 `客户资料 / 内部图纸 / 报价确认 / 合同附件 / 渲染资源 / 交付包`
4. 审批记录
   展示 `排期审批 / 成本审批 / 变更审批 / 交付确认`
5. 异常处理
   展示 `延期 / 客户变更 / 返工 / 资源冲突 / 资料缺失 / 外包延误`
6. 项目动态
   展示按时间排序的操作流水

右侧上下文栏固定展示:

- 案件健康度
- 下一关键节点
- 当前阻塞项
- 相关联系人
- 快捷动作

### 6.4 排期日历

排期日历用于从时间维度查看全部案件和冲突。

建议采用周视图或时间轴布局，重点表达:

- 各案件关键节点
- 负责人资源占用
- 节点冲突
- 延期风险

该页不追求复杂拖拽能力，重点是让用户看清楚排期压力与资源碰撞。

### 6.5 资料与异常工作台

该页强调交付经理对问题的集中处置能力。

页面按两列组织:

- 左侧资料问题
  `待补齐 / 待确认 / 版本冲突 / 客户未回传`
- 右侧异常问题
  `延期 / 返工 / 资源冲突 / 外包延误 / 需求变更`

每条问题项都需展示:

- 所属案件
- 问题类型
- 当前责任人
- 影响范围
- 下一动作
- 预计恢复时间

## 7. 原型数据模型

前端 mock 数据至少包含以下实体:

- `Case`
  基础信息、阶段、风险、完成率、关键节点、负责人
- `Milestone`
  节点名称、计划日期、状态、是否延误
- `Task`
  名称、负责人、开始/截止时间、状态、依赖、阻塞原因
- `MaterialItem`
  名称、来源、状态、版本号、最后更新时间、责任人
- `ApprovalItem`
  类型、发起人、审批人、状态、发起时间、备注
- `ExceptionItem`
  类型、严重度、责任人、影响范围、解决动作、恢复时间
- `ActivityLog`
  操作人、动作、时间、对象、说明
- `TeamLoad`
  成员、当前案件数、当周节点数、负载等级

## 8. 关键流程

原型至少需要支撑这四条演示链路:

1. 从工作台发现高风险案件 -> 进入案件详情 -> 查看异常处理 -> 发起催办动作
2. 从案件中心筛选逾期案件 -> 打开详情 -> 检查任务排期和审批记录
3. 从资料与异常工作台定位资料缺失 -> 查看责任人 -> 进入案件详情继续跟进
4. 从排期日历发现资源冲突 -> 回到案件详情确认受影响节点

## 9. 状态与异常表现

每个页面都需要明确以下状态:

- 正常数据态
- 空状态
- 风险态
- 严重异常态

重点设计的异常与空状态包括:

- 无案件数据时的工作台空状态
- 无筛选结果时的案件中心空状态
- 无审批记录时的案件详情空状态
- 资料冲突时的醒目标识
- 任务被阻塞时的显著标记
- 延期和超负荷时的高优先级警示

## 10. 视觉方向

视觉风格采用“轻工业调度台”路线:

- 背景: 浅暖灰底
- 主色: 冷青蓝
- 预警色: 琥珀与红色
- 强调方式: 高亮标签、边框、状态点、进度条

组件气质要求:

- 首页偏卡片，详情页偏表格和时间线
- 风险标签要醒目，但整体不能过于嘈杂
- 表格可读性优先，避免为了设计感牺牲扫描效率
- 右侧侧栏要有“实时上下文面板”的感觉

## 11. 非目标

以下内容明确不纳入本次原型:

- 真实登录和权限体系
- 真实文件上传下载
- 审批流后端联动
- 消息中心与 IM 对接
- 可编辑甘特拖拽
- 移动端优先适配

## 12. 验收标准

当原型完成时，应满足以下标准:

- 可以从工作台自然进入其他 4 个页面
- 案件详情成为全套原型的叙事中心
- 首页、列表页、详情页、问题页的信息层级清晰
- 风险、延期、阻塞、待审批、资料缺口能被快速识别
- 桌面端演示时，页面看起来像真实系统而不是静态海报

## 13. 实施假设

为避免实现阶段产生歧义，先固定以下假设:

- 在现有 Vue + Vite 原型仓库内继续扩展
- 使用本地 mock 数据驱动所有页面
- 先完成桌面端主体验，再做基础响应式兜底
- 原型阶段允许使用简化交互，不做复杂弹窗流程闭环
- 页面命名和导航采用中文文案，文件路径采用英文命名