# STP 智慧招标平台 —— 供应商工作台详细设计说明书 | 文档名称 | 供应商工作台详细设计 | | :------- | :---------- | | **文档版本** | V1.0 | | **编制日期** | 2026-07-02 | | **关联文档** | [[需求分析说明书]] | ## 1. 概述 ### 1.1 设计目标供应商工作台是供应商登录后默认进入的页面，作为其日常操作的核心枢纽。设计目标包括： - **任务驱动**：集中展示待办事项（报名、缴费、上传投标文件等），引导供应商快速完成关键动作。 - **信息整合**：汇总投标项目进展、通知消息、企业信息状态，减少页面跳转。 - **个性化推荐**：根据供应商关注的品类推送最新招标公告，提升参与效率。 - **快捷入口**：提供企业信息维护、资质文件管理、安全设置等常用功能的快速通道。 ### 1.2 适用角色 - 已注册并激活的供应商（包括新注册供应商和 SRM 存量绑定供应商）。 - 不同供应商看到的内容根据其投标记录、关注品类差异化展示。 ### 1.3 设计原则 | 原则 | 说明 | | :--- | :--- | | **一目了然** | 核心数据（待办数量、项目进度）以卡片/数字突出显示。 | | **操作便捷** | 主要操作（报名、上传文件）入口直接放在工作台，缩短路径。 | | **实时同步** | 待办事项、项目状态、通知均从后端实时获取，保持最新。 | | **角色聚焦** | 只展示与供应商相关的功能，不显示招标方或专家内容。 | ## 2. 页面布局总览 ```svg ``` ## 3. 各模块详细说明 ### 3.1 顶部导航栏 - **与首页保持一致**，品牌区 + 导航菜单（首页、招标公告、定标公告、企业新闻）。 - **用户区**：显示供应商头像（首字母），名称，下拉菜单（个人中心、我的投标、安全设置、退出）。 - **导航高亮**：当前“首页”高亮。 ### 3.2 欢迎区 - **位置**：左上角，距顶部 90px。 - **内容**：供应商名称 + 当前日期。 - **数据来源**：从用户登录信息中获取姓名，日期从服务器时间获取。 - **交互**：无，纯展示。 ### 3.3 待办事项卡片 | 属性 | 说明 | | :--- | :--- | | **位置** | 紧接欢迎区下方 | | **尺寸** | 720 × 100px，浅灰背景，圆角 10px | | **标题** | “📋 待办事项” | | **待办项** | 以标签形式横向排列（可滚动），每个标签显示分类名称 + 数字，点击跳转至对应列表 | | **分类** | 保证金缴纳、投标报名、待上传投标文件、待查看结果、待签合同等 | | **数据来源** | 实时查询后端 API，统计各状态下的数量 | | **交互** | 点击标签跳转至对应功能模块（如“保证金缴纳”跳转至保证金管理页） | **待办项标签样式**： - 保证金缴纳：红色背景（#ffebee），文字 #c62828 - 投标报名：橙色背景（#fff3e0），文字 #e65100 - 待上传投标文件：蓝色背景（#e3f2fd），文字 #0d47a1 - 待查看结果：绿色背景（#e8f5e9），文字 #2e7d32 ### 3.4 我的投标项目 | 属性 | 说明 | | :--- | :--- | | **位置** | 待办卡片下方 | | **尺寸** | 720 × 约 200px，带表格 | | **标题** | “📂 我的投标项目” | | **表格列** | 项目名称、公告日期、状态、截止日期、操作 | | **数据范围** | 显示最新的 3 条投标记录（按状态排序：进行中 > 即将截止 > 已截止） | | **状态标签** | 报名中（橙色）、已投标（绿色）、待开标（蓝色）、已截止（灰色）、已中标（金色）等 | | **操作列** | 根据状态显示不同操作按钮：继续报名、查看详情、上传投标文件、查看结果等 | | **数据来源** | 查询供应商参与的投标项目列表，实时获取状态 | | **查看更多** | 底部“查看全部投标项目 →”链接至完整投标列表 | **状态与操作映射**： | 状态 | 标签颜色 | 操作按钮文字 | 跳转目标 | | :--- | :--- | :--- | :--- | | 报名中 | 橙色 | 继续报名 | 报名详情页 | | 待上传投标文件 | 蓝色 | 上传文件 | 投标文件上传页 | | 已投标 | 绿色 | 查看详情 | 投标详情页 | | 待开标 | 蓝色（浅） | 等待开标 | —（只读） | | 已截止 | 灰色 | — | — | | 已中标 | 金色 | 查看合同 | 合同详情页 | | 未中标 | 灰色 | 查看结果 | 结果公示页 | ### 3.5 最新通知 | 属性 | 说明 | | :--- | :--- | | **位置** | 我的投标项目下方 | | **尺寸** | 720 × 约 110px | | **标题** | “🔔 最新通知” | | **通知数量** | 展示 2 条最新通知（按时间倒序） | | **每条通知** | 红色圆点 + 通知内容（截取前 30 字） | | **通知类型** | 系统通知（开标结果、报名提醒、审核通知等） | | **数据来源** | 通知中心 API，只取未读或最近 5 条 | | **查看全部** | “查看所有通知 →”跳转至通知列表页 | | **交互** | 点击通知可标记为已读并跳转至详情 | ### 3.6 右侧边栏 #### 3.6.1 企业信息概览 | 属性 | 说明 | | :--- | :--- | | **尺寸** | 320 × 170px | | **标题** | “🏢 企业信息” | | **内容** | 企业全称、统一社会信用代码、联系人姓名、手机号、账户状态 | | **账户状态** | 已激活（绿色）、待完善（橙色）、已锁定（红色） | | **按钮** | “完善资料”跳转至企业信息管理页面 | | **数据来源** | 从供应商档案中读取 | #### 3.6.2 快捷入口 | 属性 | 说明 | | :------- | :-------------------------- | | **尺寸** | 320 × 200px | | **标题** | “⚡ 快捷入口” | | **入口图标** | 4 个图标按钮，2×2 网格排列 | | **入口列表** | 资质文件、安全设置、我的投标、联系客服 | | **交互** | 点击跳转至对应页面；联系客服打开 AI 助手或客服通道 | #### 3.6.3 推荐招标 | 属性 | 说明 | | :--- | :--- | | **尺寸** | 320 × 200px | | **标题** | “📌 推荐招标” | | **内容** | 根据供应商历史浏览或关注的品类，推荐 3 条招标公告 | | **展示** | 仅显示项目名称（点击跳转至公告详情） | | **更多** | “更多推荐 →”跳转至招标公告列表（筛选条件为关注品类） | | **推荐算法** | 基于供应商主产品、历史投标记录、浏览行为等进行协同过滤或标签匹配 | ### 3.7 AI 助手浮动入口 - **位置**：页面右下角固定。 - **功能**：与首页一致，提供智能问答、操作引导、待办提醒等。 - **主动显示内容**：主动提醒用户紧急待办事项，含链接，直接跳转到待办页面。(不要太多，最多三项) ### 3.8 页面滚动与响应 - 左侧主内容可滚动，右侧边栏固定（或跟随滚动，取决于设计）。 - 推荐采用 **左侧内容滚动 + 右侧边栏 sticky** 的方式，便于同时查看待办和快捷入口。 ### 3.9 空状态处理 - 若无待办事项，显示“🎉 暂无待办，继续保持！”。 - 若无投标项目，显示“您还未参与任何投标，去浏览招标公告吧 →”。 - 若无通知，显示“暂无新通知”。 ## 4. 交互流程 ### 4.1 待办事项点击 - 点击“保证金缴纳（2）”→ 跳转至保证金管理页面，列出需要缴纳保证金的项目。 - 点击“投标报名（1）”→ 跳转至报名页面，直接进入待报名项目。 - 点击“待上传投标文件（3）”→ 跳转至“我的投标”列表，筛选出“待上传”状态的项目。 ### 4.2 投标项目操作 - 点击“继续报名”→ 进入报名详情页，可修改报名信息或提交补充材料。 - 点击“上传文件”→ 跳转至投标文件上传页，支持加密上传。 - 点击“查看结果”→ 跳转至结果公示页。 - 点击项目名称 → 跳转至项目详情页，查看完整招标信息。 ### 4.3 通知交互 - 点击通知 → 标记为已读，跳转至详情（如结果通知跳转至评标报告）。 - 支持批量标记已读。 ### 4.4 快捷入口 - 资质文件 → 跳转至“企业信息管理”的“资质文件”Tab。 - 安全设置 → 跳转至“企业信息管理”的“安全设置”Tab。 - 我的投标 → 跳转至完整的投标列表。 - 联系客服 → 弹窗提示 AI 助手或人工客服联系方式。 ## 5. 数据模型 ### 5.1 待办统计 API ``` GET /api/v1/supplier/todo/count 响应： { "pendingPayment": 2, // 待缴纳保证金 "pendingBid": 1, // 待报名 "pendingUpload": 3, // 待上传投标文件 "pendingResult": 2 // 待查看结果 } ``` ### 5.2 投标项目列表（工作台用） ``` GET /api/v1/supplier/bids/dashboard 参数：limit=3 响应：[ { "projectId": "P20260701", "projectName": "年产5万吨聚丙烯项目设备采购", "announceDate": "2026-07-01", "status": "BIDDING", // BIDDING, BID_SUBMITTED, WAITING_OPEN, CLOSED, WIN, LOSE "deadline": "2026-07-15", "action": "CONTINUE_BID" // CONTINUE_BID, UPLOAD_FILE, VIEW_RESULT, NONE } ] ``` ### 5.3 通知列表 ``` GET /api/v1/supplier/notifications/latest 响应：[{ id, title, content, createTime, isRead, link }] ``` ### 5.4 推荐招标 ``` GET /api/v1/supplier/recommended-bids 参数：limit=3 响应：[{ projectId, projectName, category, publishDate }] ``` ## 6. 权限与状态 | 功能 | 访问条件 | | :--- | :--- | | 工作台展示 | 任何已登录供应商 | | 待办事项 | 实时计算，所有供应商可见 | | 投标项目 | 仅显示当前供应商参与的 | | 推荐招标 | 根据供应商信息个性化推荐 | | 企业信息 | 显示当前供应商自己的信息 | **状态变化**：当供应商完成某项操作（如缴纳保证金），工作台待办计数自动更新（通过 WebSocket 或定时刷新）。 ## 7. 性能与实现建议 - **刷新机制**：工作台数据通过 WebSocket 或轮询（每 30 秒）更新待办数量。 - **缓存**：企业信息可缓存 5 分钟，投标列表缓存 1 分钟。 - **懒加载**：通知和推荐招标在滚动至可视区域时加载。 - **前端框架**：Vue 3 / React，使用 Composition API 或 Hooks 管理状态。