# 客户端首页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

目前客户提交需求的方式分散且缺乏系统化管理，客户在提交需求时需要经过复杂的流程，无法快速了解需求处理进度，也无法便捷地查看相关服务案例和报价信息。客户需要一个统一的入口页面，能够快速提交需求、查看需求进度、浏览服务案例，提升需求提交效率和客户体验。



需求价值（补充对业务的价值）：

1. **提升需求提交效率**：通过首页快速提交表单，客户可以快速选择服务类型并描述需求，减少需求提交的繁琐流程，提高需求收集效率。
2. **增强客户粘性**：通过展示服务案例、服务流程等内容，增强客户对服务的了解和信任，提升客户满意度和复购率。
3. **优化用户体验**：提供清晰的需求进度展示和便捷的功能入口，让客户能够实时了解需求处理状态，减少沟通成本。
4. **促进业务转化**：通过AI智能报价功能和服务案例展示，引导客户快速了解服务内容和价格，促进需求转化为订单。



需求目标（说明该需求要解决的问题或达成的目标）：

1. **提供统一的功能入口**：作为客户端的主入口页面，整合需求提交、进度查看、案例浏览等核心功能，让客户能够快速找到所需功能。
2. **简化需求提交流程**：通过快速提交表单，支持客户快速选择服务类型、输入需求描述，并一键进入AI智能报价流程，降低需求提交门槛。
3. **实时展示需求进度**：在首页展示最新的需求处理进度，让客户能够及时了解需求状态，无需进入详情页即可掌握关键信息。
4. **展示服务能力**：通过服务案例展示和服务流程说明，向客户展示服务能力和专业水平，增强客户信任。
5. **提升页面可用性**：通过清晰的布局、流畅的交互和友好的视觉设计，提升页面的可用性和用户体验。



用户故事（不同的视角下，希望的结果）：

**作为客户，我希望：**
- 在首页能够快速提交需求，选择服务类型并描述需求后，能够快速获得AI智能报价，节省时间。
- 在首页能够看到我最新需求的处理进度，包括进度百分比、状态和时间信息，无需进入详情页即可了解关键信息。
- 能够浏览不同服务类型的案例，了解类似需求的处理方案和价格，帮助我做出决策。
- 能够了解服务的完整流程，知道从需求提交到完成的全过程，增强对服务的信任。
- 能够快速联系客服，在遇到问题时及时获得帮助。

**作为产品经理，我希望：**
- 首页能够引导客户快速提交需求，提高需求收集效率。
- 通过案例展示和服务流程说明，提升客户对服务的认知和信任，促进业务转化。
- 通过需求进度展示，让客户感受到服务的专业性和透明度，提升客户满意度。



需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 页面采用垂直滚动布局，包含以下模块（从上到下）：
  - Banner区域
  - 快速提交需求表单卡片（叠加在Banner下方）
  - 我的需求进度卡片
  - 热门服务类型标签栏
  - 服务案例网格
  - 服务流程展示区域
  - 联系客服按钮
  - 底部导航栏（固定底部）

**2. Banner区域**
- 显示背景图片，点击图片可以跳转到后台设置的相关页面
- 提供"了解详情"按钮，点击可跳转到详情页

**3. 快速提交需求表单卡片**
- 卡片叠加在Banner下方显示
- **服务类型选择**：
  - 显示当前选中的服务类型（默认"企业服务"）
  - 点击展开下拉菜单，选项包括：企业服务、管理咨询、AI+RPA、流程自动化、数字化转型
  - 选择后自动关闭下拉菜单并更新显示
  - 点击外部区域自动关闭下拉菜单
- **需求描述输入框**：
  - 多行文本输入框，占位符"请简要描述您的需求..."

  - 支持实时保存输入内容到本地存储
- **AI智能报价按钮**：
  - 点击跳转到报价总览页，并传递服务类型和需求描述参数

**4. 我的需求进度卡片**
- **显示逻辑**：
  - 优先显示最新的"处理中"状态需求
  - 无进行中需求时，显示最新的"待处理"状态需求
  - 无待处理需求时，则不显示该卡片
  - 无任何需求时，则不显示该卡片
- **卡片内容**：
  - 需求标题（超出部分显示省略号）
  - 状态标签
  - 进度信息：进度百分比、进度条（宽度等于进度百分比）、时间信息
- 点击卡片跳转到需求详情页

**5. 热门服务类型标签栏**
- 横向滚动容器，支持左右滑动
- 标签选项：企业服务（默认选中）、管理咨询、AI+RPA
- 点击标签切换选中状态，并筛选下方案例展示
- 标签切换有过渡动画效果

**6. 服务案例网格**
- 2列网格布局展示案例卡片
- 每个案例卡片包含：图片/图标、价格、服务信息（服务类型、交付时间）、描述文字（最多显示2行）
- 点击案例卡片跳转到案例详情页，并传递案例ID参数
- 点击时有视觉反馈动画
- 根据选中的服务类型标签筛选展示对应案例

**7. 服务流程展示区域**
- 展示5个流程步骤（垂直排列）：
  - 步骤1：诊断与规划
  - 步骤2：设计与开发
  - 步骤3：部署与试点
  - 步骤4：规模化推广
  - 步骤5：持续优化
- 每个步骤包含：图标、标题、描述文字
- 步骤之间用连接线连接

**8. 联系客服按钮**
- 点击跳转到客服聊天页（直接接入企业微信客服）

**9. 底部导航栏**
- 固定底部显示
- 支持安全区域适配
- 导航项：首页（当前选中）、需求、案例、我的
- 点击导航项跳转到对应页面

**10. 交互行为**
- **页面加载**：进入页面时自动加载需求进度和案例信息，显示加载状态
- **空状态处理**：无需求时显示空状态提示，无案例时显示"暂无案例"提示

**11. 数据来源**
- 用户信息：从用户表（users）获取当前登录用户信息
- 需求进度：从需求表（requirements）获取最新需求信息，按状态优先级和创建时间排序
- 服务案例：从案例表或需求表获取，根据选中的服务类型标签筛选
- 进度百分比：根据需求状态和进度记录表（progress_records）计算



验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 所有模块按顺序正确显示
- [ ] 快速提交需求表单卡片正确叠加在Banner下方
- [ ] 底部导航栏固定底部，4个导航项正确显示，当前页面（首页）高亮显示

**2. 快速提交需求表单验收**
- [ ] 服务类型下拉菜单功能正常，默认显示"企业服务"，点击展开/收起正常
- [ ] 服务类型选择后正确更新显示，点击外部区域自动关闭下拉菜单
- [ ] 需求描述内容支持本地存储，刷新页面后内容保留
- [ ] AI智能报价按钮点击后正确跳转到报价总览页，并传递服务类型和需求描述参数

**3. 我的需求进度卡片验收**
- [ ] 需求显示逻辑正确：优先显示"处理中"需求，其次"待处理"，最后"已完成"
- [ ] 无需求时正确显示空状态提示
- [ ] 需求标题、状态标签、进度百分比、进度条、时间信息正确显示
- [ ] 进度条宽度等于进度百分比
- [ ] 点击卡片正确跳转到需求详情页

**4. 热门服务类型标签栏验收**
- [ ] 标签栏支持横向滚动
- [ ] 默认"企业服务"标签选中
- [ ] 点击标签切换选中状态正常，有过渡动画
- [ ] 标签切换后正确筛选下方案例展示

**5. 服务案例网格验收**
- [ ] 案例卡片2列网格布局正确
- [ ] 案例卡片内容完整：图片/图标、价格、服务信息、描述文字
- [ ] 描述文字最多显示2行，超出部分显示省略号
- [ ] 点击案例卡片正确跳转到案例详情页，并传递案例ID参数
- [ ] 点击时有视觉反馈动画
- [ ] 根据选中的服务类型标签正确筛选展示对应案例

**6. 服务流程展示验收**
- [ ] 5个流程步骤正确显示，包含图标、标题、描述文字
- [ ] 步骤之间的连接线正确显示

**7. 联系客服按钮验收**
- [ ] 点击按钮正确跳转到企业微信客服页面

**8. 交互行为验收**
- [ ] 页面加载时显示加载状态，数据加载完成后正确显示内容
- [ ] 支持下拉刷新，刷新后数据正确更新
- [ ] 加载失败时显示错误提示，点击重试按钮能够重新加载
- [ ] 无数据时正确显示空状态提示

**9. 数据准确性验收**
- [ ] 需求进度数据从数据库正确获取，显示的需求信息准确
- [ ] 服务案例数据从数据库正确获取，筛选逻辑正确
- [ ] 进度百分比计算准确，与需求实际进度一致