# PRD-003A - 报价管理系统前台 UI 升级

**版本**：V1.2.1  
**创建日期**：2026-05-18  
**产品负责人**：耿功发  
**基线文档**：[PRD-003A-quotation-frontend-V1.2.md](/Users/summer/Documents/AI/Yitou/quote-estimator/documents/prd/PRD-003A-quotation-frontend-V1.2.md)

---

### 目录

1. 概述
2. 版本需求矩阵
3. 2026-05-22 需求变更记录
4. 全局 UI 规范
5. 页面详细需求
6. 验收标准
7. 交付物要求
8. 版本记录

---

### 1. 概述

#### 1.1 文档定位

本文件为 `V1.2.1` 前台 UI 升级增量 PRD，仅描述报价系统前台页面的视觉与交互升级要求。

- 本文件基于 `V1.2` 前台业务规则编写。
- 若本文件未明确修改业务逻辑、字段口径、权限规则或审核规则，则默认沿用 `V1.2` 前台 PRD。
- 本文件不替代 `V1.2` 全量前台 PRD，而是作为 `V1.2.1` 版本的增量设计与实现依据。

#### 1.2 版本目标

完成报价系统前台 UI 升级，统一系统整体视觉风格与交互体验，优化核心业务页面操作流程，提升系统易用性与用户体验。

#### 1.3 修改范围

本次仅涉及前台 UI 页面修改，不涉及后台管理平台，不涉及后台配置结构调整，不涉及接口能力新增。

本版修改页面共 `7` 个：

1. 前台用户登录页面
2. 系统框架页面（导航栏 / 菜单栏）
3. 项目列表页面
4. 新建项目、编辑项目页面
5. 报价页面
6. 报价详情页面
7. 导出页面

#### 1.4 非本版范围

以下内容不在 `V1.2.1` 范围内：

1. 后台管理平台页面改版
2. 报价业务规则调整
3. 审核流、打折流、追加报价流规则调整
4. 用户权限模型调整
5. 报价配置、税项配置、工时配置结构调整
6. 新增页面或新增后台能力
7. 移动端适配

#### 1.5 设计原则

`V1.2.1` 前台 UI 升级需遵循以下统一原则：

1. **统一性**：统一颜色、字体、按钮、输入框、表格、弹窗、标签、图标风格。
2. **清晰性**：页面信息分层明确，主次操作突出，减少用户理解成本。
3. **高效率**：核心操作路径缩短，减少重复点击、无效跳转和视觉干扰。
4. **可预期**：相同操作在不同页面中的按钮位置、反馈方式、交互结果保持一致。
5. **业务友好**：重点突出报价、状态、金额、导出等业务核心信息。
6. **可扩展**：为后续继续扩展前台页面样式与组件体系保留统一设计基础。

#### 1.6 与 V1.2 的关系

- `V1.2` 是业务功能基线版本。
- `V1.2.1` 是前台 UI 升级版本。
- `V1.2.1` 不改变 `V1.2` 已确认的页面功能边界。
- `V1.2.1` 的实现重点是页面重构、视觉统一、交互优化、信息布局优化。

---

### 2. 版本需求矩阵

| 功能ID | 页面 / 模块 | 优先级 | 本版目标 |
|--------|-------------|--------|----------|
| FEUI-001 | 登录页面 | Must | 提升品牌感、登录效率与状态反馈清晰度 |
| FEUI-002 | 系统框架页面 | Must | 统一导航体系、菜单样式与页面骨架 |
| FEUI-003 | 项目列表页面 | Must | 优化检索、浏览、展开历史报价和主操作入口 |
| FEUI-004 | 新建项目 / 编辑项目 | Must | 优化表单布局、录入效率与提交反馈 |
| FEUI-005 | 报价页面 | Must | 优化配置区与价格预览区布局，强化核心操作路径 |
| FEUI-006 | 报价详情页面 | Must | 强化信息层级、状态展示与详情 / 历程浏览体验 |
| FEUI-007 | 导出页面 | Must | 提升预览、导出语言、导出格式与导出动作的可理解性 |

#### 2.1 2026-05-22 需求变更记录

以下内容为 `2026-05-22` 当天在 `V1.2.1` 范围内新增确认的需求变更，集中作为独立变更模块管理。

| 变更日期 | 变更页面 / 模块 | 变更需求内容 |
|----------|------------------|--------------|
| 2026-05-22 | 报价页面 - 报价预览 | 顶部不再显示 `含税总价`；原 `建议报价` 文案统一修改为 `合计 （不含税净额）`。 |
| 2026-05-22 | 报价详情页面 - 金额汇总 | 原 `含税总价` 修改为 `合计 （不含税净额）`；原 `小计(不含税)` 行去掉；原 `消费税(16%)` 修改为 `契約税務調整費`。 |
| 2026-05-22 | 导出页面 | 文件格式去掉 `PDF`，仅保留 `Excel`；基本信息区域去掉 `金额口径`、`付款币种`；金额汇总中原 `消费税` 修改为 `契約税務調整費`，原 `税务处理见说明` 修改为 `具体金额（CG制作+系统+其他专项累计10%金额）`。 |
| 2026-05-22 | 追加报价 / 打折 | 模块选择范围保持不变；但每次追加或打折的金额，仅针对“所选模块中的 `CG制作费用`”计算，不作用于该模块中的 `系统及云服务项`、`其他专项`、税项，也不作用于其他未选择模块。 |
| 2026-05-25 | 报价详情页面 - 金额汇总 | 报价详情页不再展示 `分成比例`、`日本40%`、`南京60%`；金额汇总仅保留 `CG制作项小计 / 系统及云服务项小计 / 其他专项小计 / 契約税務調整費 / 合计 （不含税净额）`。 |
| 2026-05-25 | 楼宇模块 - 大楼交付 | `BUILDING VISTA Lite` 基础价格统一调整为 `200,000 日元`。 |

---

### 3. 全局 UI 规范

#### 3.1 视觉规范

- 前台页面需建立统一的视觉系统，至少包含：
  - 主色
  - 辅助色
  - 中性色
  - 成功 / 警告 / 错误 / 信息状态色
- 页面字体层级需统一定义，至少区分：
  - 页面标题
  - 区块标题
  - 表单标题
  - 正文
  - 辅助说明
- 圆角、阴影、边框、间距需统一，不允许同一系统内出现明显不同风格的卡片、弹窗和按钮样式。

#### 3.2 组件规范

- 前台统一使用同一套按钮规范：
  - 主按钮
  - 次按钮
  - 线框按钮
  - 危险按钮
- 前台统一使用同一套表单规范：
  - 输入框高度统一
  - 必填标识统一
  - 校验提示位置统一
  - 占位文案风格统一
- 前台统一使用同一套状态标签规范：
  - `待提交审核`
  - `待审核`
  - `审核通过`
  - `审核不通过`
  - `进行中`
  - `已完成`
  - `已取消`

#### 3.3 交互规范

- 同一类页面的主操作按钮位置保持一致。
- 弹窗、抽屉、页面级保存操作均需提供明确的 `保存 / 取消` 反馈。
- 加载中、空状态、异常状态、无权限状态需有统一表现形式。
- 删除、离开未保存页面、覆盖已有内容等高风险动作需统一使用二次确认。
- 成功提示、失败提示、字段报错提示需统一文案风格，不允许一个页面使用顶部提示，另一个页面完全无反馈。

#### 3.4 布局规范

- `V1.2.1` 延续桌面端为主的产品定位。
- 页面最小内容宽度沿用 `V1.2` 的 `1280px` 基线。
- 页面内容区域需统一采用：
  - 页面头部区
  - 筛选 / 操作区
  - 主内容区
  - 底部动作区（如页面存在保存类操作）
- 卡片、表格、表单区块之间需保持统一留白节奏，避免页面拥挤或空洞。

---

### 4. 页面详细需求

#### FEUI-001 登录页面

##### 4.1 页面目标

将登录页从“可用”升级为“清晰、稳定、可信”的前台入口页面，提升品牌统一感与首次使用体验。

##### 4.2 改造要求

1. 登录页需包含清晰的品牌区与登录操作区。
2. 登录操作区需突出 `账号`、`密码`、`登录按钮` 三个核心元素。
3. 多语言切换入口需保留，并放置在用户容易识别的位置。
4. 错误提示需靠近登录表单展示，避免用户无法判断失败原因。
5. 登录按钮在提交中需展示明确的处理中状态，避免用户重复点击。
6. 首次登录需修改密码时，登录成功后的跳转提示与后续页面风格需保持一致。
7. 页面背景、插图、配色可升级，但不得影响表单识别与录入效率。

##### 4.3 交互要求

- 回车键可直接触发登录。
- 当账号或密码为空时，需直接在表单层给出必填提示。
- 登录失败后，账号内容保留，密码按安全策略处理。
- 登录表单在不同语言下需保证排版稳定，不出现按钮挤压、字段错位或文案截断。

#### FEUI-002 系统框架页面（导航栏 / 菜单栏）

##### 4.4 页面目标

统一系统框架层的视觉骨架，使用户在任意页面都能快速识别当前位置、当前系统语言和可执行的全局操作。

##### 4.5 改造要求

1. 导航栏、菜单栏、内容区需形成统一框架样式。
2. Logo、系统名称、语言切换、账号信息、退出登录等全局元素需统一位置。
3. 左侧菜单或顶部导航需突出当前激活页面。
4. 页面标题区需支持展示当前页面名称与必要的页面说明。
5. 菜单折叠、展开、切换后的视觉反馈需一致。
6. 菜单图标、间距、选中态、悬停态需统一。
7. 框架层不得遮挡业务页面的核心操作区。

##### 4.6 交互要求

- 从任意页面切换菜单时，若存在未保存内容，需按既有业务规则给出离开确认。
- 当前语言切换后，导航、菜单、页面标题、面包屑等系统框架文案需同步刷新。
- 页面刷新后，系统需保留当前菜单激活态与页面定位，不应错误跳回默认菜单。

#### FEUI-003 项目列表页面

##### 4.7 页面目标

让用户更快完成 `找项目`、`看历史报价`、`新建项目`、`新建报价` 四类高频动作。

##### 4.8 改造要求

1. 页面需明确区分：
   - 页面标题区
   - 检索 / 筛选区
   - 列表展示区
   - 主操作区
2. `新建项目` 需作为页面主按钮突出展示。
3. 搜索、筛选、重置等操作需集中摆放，避免分散在多个角落。
4. 项目主信息与项目状态需具备清晰层级，便于快速扫读。
5. 项目下历史报价记录的展开入口需明显，展开后的结构需易于理解。
6. 项目列表、历史报价列表的状态标签、金额显示、时间展示格式需统一。
7. 空状态需明确引导用户 `新建项目` 或调整筛选条件。

##### 4.9 交互要求

- 检索条件变更后，用户可明确知道当前结果是否已刷新。
- 历史报价展开 / 收起的动效与图标方向需一致。
- 列表加载中、无数据、加载失败三种状态需区分展示。
- 项目级操作与报价级操作需视觉分区，避免误点。

#### FEUI-004 新建项目 / 编辑项目页面

##### 4.10 页面目标

提升项目基础信息录入效率，减少用户在创建与编辑场景中的理解成本和误操作概率。

##### 4.11 改造要求

1. `新建项目` 与 `编辑项目` 需复用统一表单样式与字段布局。
2. 字段排列需遵循“核心字段优先、辅助字段靠后”的原则。
3. 必填项、选填项、字段说明需清晰展示。
4. 表单容器可采用弹窗或抽屉，但同一版本内需保持统一。
5. `保存` 与 `取消` 按钮位置需固定，避免用户每次寻找。
6. 保存失败时，错误提示需明确且保留用户已输入内容。
7. 编辑场景需清晰区分“项目基础信息可编辑”与“状态不可在前台编辑”的边界。

##### 4.12 交互要求

- 首次进入表单时，光标默认聚焦首个可输入字段。
- 表单校验失败时，需滚动到首个报错字段或高亮首个报错字段。
- 关闭表单前如存在未保存修改，需提示确认。
- 保存成功后，需给出统一成功反馈，并同步刷新列表展示结果。

#### FEUI-005 报价页面

##### 4.13 页面目标

优化报价页面的信息架构与操作节奏，让用户更顺畅地完成参数配置、金额查看、保存报价和提交审核准备。

##### 4.14 改造要求

1. 报价页面需继续保持 `左侧配置区 + 右侧价格预览区` 的核心结构。
2. 模块页签、配置内容区、页面级操作区需形成清晰的三级层级。
3. 右侧价格预览区需强化以下信息：
   - 当前总价
   - 模块小计
   - 税项汇总
   - 分成信息
   - 关键参数摘要
4. 报价预览顶部主金额文案统一调整为 `合计 （不含税净额）`，不再显示 `含税总价`，原 `建议报价` 文案同步取消。
5. `保存报价`、`取消` 等核心操作需固定在用户容易触达的位置。
6. 模块切换时，用户需清楚知道当前正在编辑哪个模块。
7. 配置项较多时，页面需通过留白、分组标题、折叠区块等方式降低阅读压力。
8. 报价页面需解决视觉层面的滚动冲突感，强化“当前编辑区”和“当前结果区”的分区感。

##### 4.15 交互要求

- 模块切换后，页签高亮、区块标题和右侧摘要需同步变化。
- 价格预览区在数据刷新中需有轻量但明确的反馈。
- 保存前如存在必填缺失，需统一展示校验提示，并定位到对应模块。
- 当配置已变更但尚未保存时，页面需有明确的“未保存”感知提示。
- 保存成功后，需明确告知用户当前报价已进入 `待提交审核` 状态。

#### FEUI-006 报价详情页面

##### 4.16 页面目标

强化报价详情页的“查阅、理解、追溯、继续操作”能力，让用户能快速看清报价状态、金额结构、报价明细和历程信息。

##### 4.17 改造要求

1. 页面需突出以下核心信息：
   - 报价单编号
   - 所属项目
   - 当前报价状态
   - 当前有效金额
   - 最后更新时间
2. `报价详情` 与 `报价历程` 两个区域需有明确的结构边界。
3. 页面顶部操作区需清晰展示可执行动作，如：
   - 编辑
   - 提交审核
   - 查看报价单资料
   - 导出
4. `报价明细` 表格需强化可读性，金额列、分类列、主要内容列需视觉分层明确。
5. `金额汇总` 区需与明细区形成清晰分隔，突出总价与税项；汇总字段统一调整为 `CG制作项小计 / 系统及云服务项小计 / 其他专项小计 / 契約税務調整費 / 合计 （不含税净额）`。
6. 原 `小计(不含税)` 行从报价详情页金额汇总中去掉，不再展示。
7. 原 `消费税(16%)` 文案统一修改为 `契約税務調整費`，原 `含税总价` 文案统一修改为 `合计 （不含税净额）`。
8. `追加报价明细` 与 `打折明细` 中，需清晰展示实际所选模块，并明确说明金额仅基于该模块中的 `CG制作费用` 计算。
9. `报价历程` 区需便于浏览时间顺序、动作类型、操作人、状态变化和备注信息。
10. 待审核追加、审核不通过等关键状态需有明显标识，避免用户误读当前有效金额。

##### 4.18 交互要求

- `报价历程` 区支持快速浏览，不因记录增多导致页面难以阅读。
- 点击 `查看报价单资料` 后，用户能明确感知当前是进入独立资料页还是弹层查看。
- 若当前报价不可编辑，按钮需展示禁用态，并说明原因。
- 页面返回项目列表或上一层页面时，需保持合理的返回路径体验。

#### FEUI-007 导出页面

##### 4.19 页面目标

提升导出页面的可理解性与决策效率，让用户能清楚完成导出语言选择、导出格式选择、预览确认和最终导出。

##### 4.20 改造要求

1. 导出页面需清晰区分：
   - 基础信息区
   - 导出设置区
   - 预览区
   - 导出动作区
2. `导出语言`、`导出格式`、`打印` 等动作需聚合展示，不应分散；其中 `导出格式` 仅保留 `Excel`，去掉 `PDF`。
3. 预览区需接近最终 `见积书` 输出效果，但同时保证屏幕内易读。
4. 导出页基本信息区域需去掉 `金额口径` 与 `付款币种` 两行，不再展示。
5. 页面需明确展示当前预览语言，避免用户误解为系统界面语言。
6. 当报价单资料存在缺失字段但允许导出时，页面需给出友好提醒，而非静默留空。
7. 导出页金额汇总需统一展示为 `CG制作项小计 / 系统及云服务项小计 / 其他专项小计 / 契約税務調整費 / 合计(不含税净额)`，其中 `契約税務調整費` 的右侧说明统一显示 `具体金额（CG制作+系统+其他专项累计10%金额）`。
8. `Excel` 与 `在线预览` 之间的切换和选中状态需清晰。
9. 导出按钮需作为页面主操作突出展示。

##### 4.21 交互要求

- 用户切换导出语言后，预览内容需实时刷新。
- 预览生成中需有明确加载反馈。
- 导出成功、导出失败、打印触发均需有统一反馈。
- 当预览内容较长时，预览区滚动不应影响页面主操作区的可见性。

---

### 5. 验收标准

#### 5.1 全局验收标准

1. `7` 个改造页面完成统一视觉风格升级。
2. 按钮、输入框、表格、弹窗、标签、提示反馈风格统一。
3. 页面主操作路径清晰，用户可在主要页面中快速识别下一步动作。
4. 状态标签、错误提示、成功提示、空状态、加载状态具备统一规范。
5. 不改动既有业务规则、权限边界、审核链路和后台配置逻辑。

#### 5.2 页面级验收标准

- 登录页：
  - 用户可快速识别登录入口、语言切换入口和错误提示。
  - 登录中、登录失败、首次登录跳转场景反馈清晰。
- 系统框架页：
  - 导航、菜单、标题区、全局操作区样式统一。
  - 当前菜单定位清晰，切换后状态反馈稳定。
- 项目列表页：
  - 搜索、筛选、展开历史报价、新建项目、新建报价等高频操作更易找到。
  - 空状态和异常状态可被清晰识别。
- 新建项目 / 编辑项目页：
  - 表单布局清晰，录入效率提升。
  - 保存失败时内容不丢失，反馈明确。
- 报价页：
  - 左右结构清晰，模块编辑与价格预览关系更直观。
  - 顶部主金额文案统一为 `合计 （不含税净额）`，且不再展示 `建议报价` 与 `含税总价`。
  - 保存路径、未保存状态、校验反馈更明确。
- 报价详情页：
  - 状态、金额、明细、历程层级清晰。
  - 金额汇总按 `CG制作项小计 / 系统及云服务项小计 / 其他专项小计 / 契約税務調整費 / 合计 （不含税净额）` 展示，且不再展示 `小计(不含税)`、`分成比例`、`日本40%`、`南京60%`。
  - 追加与打折记录需清晰展示所选模块，且明确说明金额仅基于该模块中的 `CG制作费用` 计算。
  - 用户能快速判断当前报价是否可继续操作。
- 导出页：
  - 导出语言、导出格式、预览和导出动作关系清楚，且文件格式仅保留 `Excel`。
  - 基本信息区域不再展示 `金额口径` 与 `付款币种`。
  - 金额汇总按 `CG制作项小计 / 系统及云服务项小计 / 其他专项小计 / 契約税務調整費 / 合计(不含税净额)` 展示，且 `契約税務調整費` 右侧显示 `具体金额（CG制作+系统+其他专项累计10%金额）`。
  - 用户可在导出前快速确认最终输出内容。

#### 5.3 技术实现约束

1. 本版默认以前端页面重构与样式改造为主。
2. 若因 UI 升级需要补充前端状态管理、组件抽象或页面结构重组，允许在前端实现层进行优化。
3. 若出现必须新增接口、调整接口字段、修改后台逻辑才能完成的需求，需单独回收为新需求评审，不默认纳入 `V1.2.1`。

---

### 6. 交付物要求

`V1.2.1` 交付阶段至少应包含以下产物：

1. 前台 UI 升级 PRD 文档
2. 页面设计稿 / 高保真稿
3. 统一组件样式规范或页面设计规范
4. 前端开发实现
5. 页面验收清单

---

### 7. 版本记录

| 版本号 | 更新内容 |
|--------|----------|
| V1.2 | 前台基础业务功能交付版 |
| V1.2.1 | 前台 UI 升级版，覆盖登录、系统框架、项目列表、新建项目/编辑项目、报价页面、报价详情、导出页面；其中报价预览顶部主金额文案统一为 `合计 （不含税净额）`，报价详情金额汇总调整为 `契約税務調整費 / 合计 （不含税净额）` 并去掉 `小计(不含税)`，追加与打折记录需展示所选模块且明确金额仅基于该模块中的 `CG制作费用`，导出页仅保留 `Excel` 文件格式，基本信息去掉 `金额口径 / 付款币种`，金额汇总改为 `契約税務調整費 + 具体金额说明`；新增 `2026-05-22 需求变更记录` 独立模块 |