Dubhe/STP

Files

T

weiwen_ye 851bb530ac docs: 添加供应商工作台详细设计.md、评标专家工作台.md

2026-07-02 21:53:31 +08:00

21 KiB

Raw Blame History

STP 智慧招标平台 —— 供应商工作台详细设计说明书

文档名称	供应商工作台详细设计
文档版本	V1.0
编制日期	2026-07-02
关联文档	需求分析说明书

1. 概述

1.1 设计目标

供应商工作台是供应商登录后默认进入的页面，作为其日常操作的核心枢纽。设计目标包括：

任务驱动：集中展示待办事项（报名、缴费、上传投标文件等），引导供应商快速完成关键动作。
信息整合：汇总投标项目进展、通知消息、企业信息状态，减少页面跳转。
个性化推荐：根据供应商关注的品类推送最新招标公告，提升参与效率。
快捷入口：提供企业信息维护、资质文件管理、安全设置等常用功能的快速通道。

1.2 适用角色

已注册并激活的供应商（包括新注册供应商和 SRM 存量绑定供应商）。
不同供应商看到的内容根据其投标记录、关注品类差异化展示。

1.3 设计原则

原则	说明
一目了然	核心数据（待办数量、项目进度）以卡片/数字突出显示。
操作便捷	主要操作（报名、上传文件）入口直接放在工作台，缩短路径。
实时同步	待办事项、项目状态、通知均从后端实时获取，保持最新。
角色聚焦	只展示与供应商相关的功能，不显示招标方或专家内容。

2. 页面布局总览

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 900" font-family="'Microsoft YaHei', sans-serif">
  <defs>
    <filter id="shadow" x="-2%" y="-2%" width="104%" height="104%">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.06"/>
    </filter>
    <filter id="shadowDeep" x="-2%" y="-2%" width="104%" height="104%">
      <feDropShadow dx="0" dy="6" stdDeviation="12" flood-color="#000" flood-opacity="0.10"/>
    </filter>
    <linearGradient id="headerBg" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#c2185b"/>
      <stop offset="100%" stop-color="#e91e63"/>
    </linearGradient>
    <linearGradient id="brandGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#c2185b"/><stop offset="100%" stop-color="#e91e63"/>
    </linearGradient>
    <linearGradient id="cardGrad1" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#e8f5e9"/><stop offset="100%" stop-color="#c8e6c9"/>
    </linearGradient>
    <linearGradient id="cardGrad2" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#e3f2fd"/><stop offset="100%" stop-color="#bbdefb"/>
    </linearGradient>
    <linearGradient id="cardGrad3" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#fff3e0"/><stop offset="100%" stop-color="#ffe0b2"/>
    </linearGradient>
  </defs>
  
  <!-- 背景 -->
  <rect width="1200" height="900" fill="#f5f7fa"/>
  
  <!-- ===== 顶部导航栏（与首页一致，但用户区显示已登录） ===== -->
  <rect width="1200" height="64" fill="url(#headerBg)"/>
  <text x="40" y="42" font-size="22" font-weight="bold" fill="#fff">智慧招标平台</text>
  <text x="190" y="42" font-size="13" fill="rgba(255,255,255,0.8)">Smart Tendering Platform</text>
  
  <!-- 导航菜单（保留首页菜单，但“首页”高亮） -->
  <text x="440" y="42" font-size="15" fill="#fff" font-weight="bold">首页</text>
  <text x="520" y="42" font-size="15" fill="rgba(255,255,255,0.8)">招标公告</text>
  <text x="620" y="42" font-size="15" fill="rgba(255,255,255,0.8)">定标公告</text>
  <text x="720" y="42" font-size="15" fill="rgba(255,255,255,0.8)">企业新闻</text>
  
  <!-- 已登录用户 -->
  <circle cx="1030" cy="32" r="16" fill="rgba(255,255,255,0.3)"/>
  <text x="1030" y="37" text-anchor="middle" font-size="12" fill="#fff">李</text>
  <text x="1060" y="37" font-size="14" fill="#fff">李强</text>
  <text x="1110" y="37" font-size="12" fill="rgba(255,255,255,0.7)">▼</text>

  <!-- ===== 内容区：两栏布局 ===== -->
  <!-- 左侧：主内容区（宽度 780px） -->
  <!-- 右侧：侧边栏（宽度 300px，间距 20px） -->
  
  <!-- 左侧主内容 -->
  <rect x="40" y="90" width="780" height="770" rx="12" fill="#fff" filter="url(#shadow)"/>
  
  <!-- 欢迎语 + 日期 -->
  <text x="70" y="125" font-size="20" font-weight="bold" fill="#1a2332">👋 欢迎回来，李强</text>
  <text x="70" y="150" font-size="14" fill="#8895aa">今天是 2026年7月2日，星期四</text>
  
  <!-- ===== 待办事项卡片（横向滚动或图标） ===== -->
  <rect x="70" y="180" width="720" height="100" rx="10" fill="#fafbfc" stroke="#e0e4ec"/>
  <text x="90" y="210" font-size="15" font-weight="bold" fill="#4a5568">📋 待办事项</text>
  
  <!-- 待办项1 -->
  <rect x="100" y="225" width="150" height="40" rx="8" fill="#ffebee" stroke="#ef9a9a"/>
  <text x="175" y="250" text-anchor="middle" font-size="13" fill="#c62828">保证金缴纳（2）</text>
  
  <!-- 待办项2 -->
  <rect x="270" y="225" width="150" height="40" rx="8" fill="#fff3e0" stroke="#ffcc80"/>
  <text x="345" y="250" text-anchor="middle" font-size="13" fill="#e65100">投标报名（1）</text>
  
  <!-- 待办项3 -->
  <rect x="440" y="225" width="150" height="40" rx="8" fill="#e3f2fd" stroke="#90caf9"/>
  <text x="515" y="250" text-anchor="middle" font-size="13" fill="#0d47a1">待上传投标文件（3）</text>
  
  <!-- 待办项4 -->
  <rect x="610" y="225" width="150" height="40" rx="8" fill="#e8f5e9" stroke="#a5d6a7"/>
  <text x="685" y="250" text-anchor="middle" font-size="13" fill="#2e7d32">待查看结果（2）</text>

  <!-- ===== 我的投标项目 ===== -->
  <text x="70" y="320" font-size="15" font-weight="bold" fill="#4a5568">📂 我的投标项目</text>
  
  <!-- 项目列表 -->
  <rect x="70" y="335" width="720" height="160" rx="8" fill="#fafbfc" stroke="#e0e4ec"/>
  
  <!-- 表头 -->
  <rect x="70" y="335" width="720" height="32" rx="8" fill="#f0f2f7"/>
  <text x="90" y="356" font-size="13" font-weight="bold" fill="#4a5568">项目名称</text>
  <text x="260" y="356" font-size="13" font-weight="bold" fill="#4a5568">公告日期</text>
  <text x="380" y="356" font-size="13" font-weight="bold" fill="#4a5568">状态</text>
  <text x="500" y="356" font-size="13" font-weight="bold" fill="#4a5568">截止日期</text>
  <text x="650" y="356" font-size="13" font-weight="bold" fill="#4a5568">操作</text>
  
  <!-- 行1 -->
  <rect x="80" y="375" width="700" height="36" rx="4" fill="#fff"/>
  <text x="90" y="398" font-size="13" fill="#1a2332">年产5万吨聚丙烯项目设备采购</text>
  <text x="260" y="398" font-size="13" fill="#666">2026-07-01</text>
  <rect x="380" y="385" width="60" height="18" rx="4" fill="#ff9800"/>
  <text x="410" y="398" text-anchor="middle" font-size="11" fill="#fff">报名中</text>
  <text x="500" y="398" font-size="13" fill="#666">2026-07-15</text>
  <text x="650" y="398" font-size="13" fill="#1565c0" text-decoration="underline">继续报名</text>
  
  <!-- 行2 -->
  <rect x="80" y="415" width="700" height="36" rx="4" fill="#fff"/>
  <text x="90" y="438" font-size="13" fill="#1a2332">数字化交付平台开发服务</text>
  <text x="260" y="438" font-size="13" fill="#666">2026-06-29</text>
  <rect x="380" y="425" width="60" height="18" rx="4" fill="#4caf50"/>
  <text x="410" y="438" text-anchor="middle" font-size="11" fill="#fff">已投标</text>
  <text x="500" y="438" font-size="13" fill="#666">2026-07-10</text>
  <text x="650" y="438" font-size="13" fill="#9e9e9e">等待开标</text>
  
  <!-- 行3 -->
  <rect x="80" y="455" width="700" height="36" rx="4" fill="#fff"/>
  <text x="90" y="478" font-size="13" fill="#1a2332">2026年度防腐保温工程框架</text>
  <text x="260" y="478" font-size="13" fill="#666">2026-06-28</text>
  <rect x="380" y="465" width="60" height="18" rx="4" fill="#9e9e9e"/>
  <text x="410" y="478" text-anchor="middle" font-size="11" fill="#fff">已截止</text>
  <text x="500" y="478" font-size="13" fill="#666">已过期</text>
  <text x="650" y="478" font-size="13" fill="#9e9e9e">-</text>

  <!-- 查看更多 -->
  <text x="700" y="515" font-size="13" fill="#c2185b" text-decoration="underline">查看全部投标项目 →</text>

  <!-- ===== 最新通知 ===== -->
  <text x="70" y="555" font-size="15" font-weight="bold" fill="#4a5568">🔔 最新通知</text>
  <rect x="70" y="570" width="720" height="95" rx="8" fill="#fafbfc" stroke="#e0e4ec"/>
  
  <rect x="80" y="580" width="700" height="28" rx="4" fill="#fff"/>
  <circle cx="95" cy="594" r="4" fill="#c2185b"/>
  <text x="110" y="600" font-size="13" fill="#1a2332">【系统通知】您的“数字化交付平台”项目已完成开标，请查看结果。</text>
  
  <rect x="80" y="612" width="700" height="28" rx="4" fill="#fff"/>
  <circle cx="95" cy="626" r="4" fill="#c2185b"/>
  <text x="110" y="632" font-size="13" fill="#1a2332">【报名提醒】“年产5万吨聚丙烯项目”报名即将截止（7月15日）。</text>
  
  <text x="700" y="680" font-size="13" fill="#c2185b" text-decoration="underline">查看所有通知 →</text>

  <!-- ===== 右侧边栏 ===== -->
  <!-- 企业信息概览 -->
  <rect x="840" y="90" width="320" height="170" rx="12" fill="#fff" filter="url(#shadow)"/>
  <text x="870" y="125" font-size="15" font-weight="bold" fill="#4a5568">🏢 企业信息</text>
  <text x="870" y="155" font-size="14" fill="#1a2332">滨化新材料有限公司</text>
  <text x="870" y="180" font-size="13" fill="#8895aa">统一社会信用代码：91370100MA3XXXXXXX</text>
  <text x="870" y="205" font-size="13" fill="#8895aa">联系人：李强 ｜ 手机：138****8001</text>
  <text x="870" y="230" font-size="13" fill="#4caf50">账户状态：✅ 已激活</text>
  <rect x="870" y="245" width="90" height="28" rx="6" fill="#e3f2fd" stroke="#1565c0"/>
  <text x="915" y="264" text-anchor="middle" font-size="12" fill="#1565c0">完善资料</text>

  <!-- 快速入口 -->
  <rect x="840" y="280" width="320" height="200" rx="12" fill="#fff" filter="url(#shadow)"/>
  <text x="870" y="315" font-size="15" font-weight="bold" fill="#4a5568">⚡ 快捷入口</text>
  
  <rect x="870" y="335" width="120" height="60" rx="8" fill="#fafbfc" stroke="#e0e4ec"/>
  <text x="930" y="360" text-anchor="middle" font-size="20">📄</text>
  <text x="930" y="382" text-anchor="middle" font-size="12" fill="#4a5568">资质文件</text>
  
  <rect x="1000" y="335" width="120" height="60" rx="8" fill="#fafbfc" stroke="#e0e4ec"/>
  <text x="1060" y="360" text-anchor="middle" font-size="20">🔐</text>
  <text x="1060" y="382" text-anchor="middle" font-size="12" fill="#4a5568">安全设置</text>
  
  <rect x="870" y="405" width="120" height="60" rx="8" fill="#fafbfc" stroke="#e0e4ec"/>
  <text x="930" y="430" text-anchor="middle" font-size="20">📊</text>
  <text x="930" y="452" text-anchor="middle" font-size="12" fill="#4a5568">我的投标</text>
  
  <rect x="1000" y="405" width="120" height="60" rx="8" fill="#fafbfc" stroke="#e0e4ec"/>
  <text x="1060" y="430" text-anchor="middle" font-size="20">💬</text>
  <text x="1060" y="452" text-anchor="middle" font-size="12" fill="#4a5568">联系客服</text>

  <!-- 推荐招标公告 -->
  <rect x="840" y="500" width="320" height="200" rx="12" fill="#fff" filter="url(#shadow)"/>
  <text x="870" y="535" font-size="15" font-weight="bold" fill="#4a5568">📌 推荐招标</text>
  
  <rect x="870" y="555" width="270" height="32" rx="6" fill="#fafafa"/>
  <text x="885" y="575" font-size="13" fill="#1a2332">• 催化剂原料采购项目</text>
  
  <rect x="870" y="595" width="270" height="32" rx="6" fill="#fafafa"/>
  <text x="885" y="615" font-size="13" fill="#1a2332">• 智能仓储系统建设</text>
  
  <rect x="870" y="635" width="270" height="32" rx="6" fill="#fafafa"/>
  <text x="885" y="655" font-size="13" fill="#1a2332">• 污水处理工程（二期）</text>
  
  <text x="1050" y="685" font-size="13" fill="#c2185b" text-decoration="underline">更多推荐 →</text>

  <!-- ===== AI 助手浮动入口（同首页） ===== -->
  <circle cx="1110" cy="840" r="42" fill="url(#brandGrad)" filter="url(#shadowDeep)"/>
  <text x="1110" y="835" text-anchor="middle" font-size="16" fill="#fff" font-weight="bold">小滨</text>
  <text x="1110" y="855" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">AI 助手</text>
  <circle cx="1110" cy="840" r="50" fill="none" stroke="#e91e63" stroke-width="2" opacity="0.3">
    <animate attributeName="r" from="42" to="55" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite"/>
  </circle>
</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 管理状态。

21 KiB Raw Blame History Unescape Escape

STP 智慧招标平台 —— 供应商工作台详细设计说明书

1. 概述

1.1 设计目标

1.2 适用角色

1.3 设计原则

2. 页面布局总览

3. 各模块详细说明

3.1 顶部导航栏

3.2 欢迎区

3.3 待办事项卡片

3.4 我的投标项目

3.5 最新通知

3.6 右侧边栏

3.6.1 企业信息概览

3.6.2 快捷入口

3.6.3 推荐招标

3.7 AI 助手浮动入口

3.8 页面滚动与响应

3.9 空状态处理

4. 交互流程

4.1 待办事项点击

4.2 投标项目操作

4.3 通知交互

4.4 快捷入口

5. 数据模型

5.1 待办统计 API

5.2 投标项目列表（工作台用）

5.3 通知列表

5.4 推荐招标

6. 权限与状态

7. 性能与实现建议

21 KiB

Raw Blame History