@@ -0,0 +1,540 @@
# 招标专员工作台详细设计说明书
| 文档名称 | 招标专员工作台详细设计 |
| :------- | :---------- |
| **文档版本 ** | V1.0 |
| **编制日期 ** | 2026-07-06 |
| **关联文档 ** | 《需求分析说明书》 |
## 1. 概述
### 1.1 设计目标
招标专员工作台是招标专员登录后默认进入的页面,作为其日常招标业务操作的核心枢纽。设计核心围绕 * * “任务驱动”** 与 * * “AI主动辅助”** 两大理念:
- **任务驱动**:集中展示待办任务(委托确认、寻源确认、立项审批、评标组织、定标发起等),按招标流程阶段分类,引导专员高效推进。
- **AI主动辅助**:AI助手“小滨”以悬浮窗口形式常驻,主动分析当前待办任务,推送优先级建议、风险预警和操作指引,实现“事找人”的智能工作模式。
### 1.2 适用角色
- 集团及下属公司的招标专员、招标管理部人员。
- 不同专员的待办任务根据其被分配的项目和流程节点差异化展示。
### 1.3 设计原则
| 原则 | 说明 |
| :--- | :--- |
| **流程驱动 ** | 任务按招标全生命周期(委托→寻源→立项→开标→评标→定标)自然排列,符合业务认知。 |
| **AI优先 ** | AI助手悬浮窗主动推送待办建议,减少专员主动查找的认知负担。 |
| **效率优先 ** | 高频操作(确认、审批、发起)一键可达,缩短操作路径。 |
| **实时同步 ** | 所有任务状态、待办数量实时更新,确保不遗漏关键节点。 |
## 2. 页面布局总览
``` svg
<svg xmlns= "http://www.w3.org/2000/svg" viewBox= "0 0 1200 980" 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.12" />
</filter>
<linearGradient id= "headerBg" x1= "0" y1= "0" x2= "1" y2= "0" >
<stop offset= "0%" stop-color= "#00695c" /> <stop offset= "100%" stop-color= "#00897b" />
</linearGradient>
<linearGradient id= "brandGrad" x1= "0%" y1= "0%" x2= "100%" y2= "100%" >
<stop offset= "0%" stop-color= "#00695c" /> <stop offset= "100%" stop-color= "#00897b" />
</linearGradient>
<linearGradient id= "cardGrad1" x1= "0" y1= "0" x2= "1" y2= "1" >
<stop offset= "0%" stop-color= "#e0f2f1" /> <stop offset= "100%" stop-color= "#b2dfdb" />
</linearGradient>
</defs>
<!-- 背景 -->
<rect width= "1200" height= "980" 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= "rgba(255,255,255,0.8)" > 首页</text>
<text x= "520" y= "42" font-size= "15" fill= "#fff" font-weight= "bold" > 工作台</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>
<text x= "820" y= "42" font-size= "15" fill= "rgba(255,255,255,0.8)" > 专家管理</text>
<!-- 已登录用户 -->
<circle cx= "1010" cy= "32" r= "16" fill= "rgba(255,255,255,0.3)" />
<text x= "1010" y= "37" text-anchor= "middle" font-size= "12" fill= "#fff" > 张</text>
<text x= "1040" y= "37" font-size= "14" fill= "#fff" > 张婷</text>
<text x= "1090" y= "37" font-size= "12" fill= "rgba(255,255,255,0.7)" > ▼</text>
<!-- ===== 内容区 ===== -->
<!-- 欢迎横幅 + 今日概览 -->
<rect x= "40" y= "90" width= "1120" height= "70" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<text x= "70" y= "120" font-size= "18" font-weight= "bold" fill= "#1a2332" > 👋 早上好,张婷</text>
<text x= "70" y= "145" font-size= "14" fill= "#8895aa" > 今日待办:<tspan fill= "#00695c" font-weight= "bold" > 8</tspan> 项 | 进行中项目:<tspan fill= "#00695c" font-weight= "bold" > 5</tspan> 个</text>
<!-- ============================================================ -->
<!-- ===== 新增:快捷入口(8个图标,2行×4列) ===== -->
<!-- ============================================================ -->
<text x= "70" y= "200" font-size= "16" font-weight= "bold" fill= "#1a2332" > ⚡ 快捷入口</text>
<!-- 行1 -->
<!-- 入口1:新建委托 -->
<rect x= "40" y= "220" width= "130" height= "80" rx= "10" fill= "#fff" filter= "url(#shadow)" />
<rect x= "40" y= "220" width= "130" height= "4" rx= "2" fill= "#e91e63" />
<text x= "105" y= "252" text-anchor= "middle" font-size= "24" > 📝</text>
<text x= "105" y= "280" text-anchor= "middle" font-size= "13" fill= "#4a5568" > 新建委托</text>
<!-- 入口2:我的项目 -->
<rect x= "185" y= "220" width= "130" height= "80" rx= "10" fill= "#fff" filter= "url(#shadow)" />
<rect x= "185" y= "220" width= "130" height= "4" rx= "2" fill= "#1565c0" />
<text x= "250" y= "252" text-anchor= "middle" font-size= "24" > 📂</text>
<text x= "250" y= "280" text-anchor= "middle" font-size= "13" fill= "#4a5568" > 我的项目</text>
<!-- 入口3:供应商库 -->
<rect x= "330" y= "220" width= "130" height= "80" rx= "10" fill= "#fff" filter= "url(#shadow)" />
<rect x= "330" y= "220" width= "130" height= "4" rx= "2" fill= "#ff9800" />
<text x= "395" y= "252" text-anchor= "middle" font-size= "24" > 🏢</text>
<text x= "395" y= "280" text-anchor= "middle" font-size= "13" fill= "#4a5568" > 供应商库</text>
<!-- 入口4:专家库 -->
<rect x= "475" y= "220" width= "130" height= "80" rx= "10" fill= "#fff" filter= "url(#shadow)" />
<rect x= "475" y= "220" width= "130" height= "4" rx= "2" fill= "#1a237e" />
<text x= "540" y= "252" text-anchor= "middle" font-size= "24" > 👨🏫</text>
<text x= "540" y= "280" text-anchor= "middle" font-size= "13" fill= "#4a5568" > 专家库</text>
<!-- 入口5:模板库 -->
<rect x= "620" y= "220" width= "130" height= "80" rx= "10" fill= "#fff" filter= "url(#shadow)" />
<rect x= "620" y= "220" width= "130" height= "4" rx= "2" fill= "#4caf50" />
<text x= "685" y= "252" text-anchor= "middle" font-size= "24" > 📄</text>
<text x= "685" y= "280" text-anchor= "middle" font-size= "13" fill= "#4a5568" > 模板库</text>
<!-- 入口6:报表中心 -->
<rect x= "765" y= "220" width= "130" height= "80" rx= "10" fill= "#fff" filter= "url(#shadow)" />
<rect x= "765" y= "220" width= "130" height= "4" rx= "2" fill= "#e65100" />
<text x= "830" y= "252" text-anchor= "middle" font-size= "24" > 📊</text>
<text x= "830" y= "280" text-anchor= "middle" font-size= "13" fill= "#4a5568" > 报表中心</text>
<!-- 入口7:保证金管理 -->
<rect x= "910" y= "220" width= "130" height= "80" rx= "10" fill= "#fff" filter= "url(#shadow)" />
<rect x= "910" y= "220" width= "130" height= "4" rx= "2" fill= "#9c27b0" />
<text x= "975" y= "252" text-anchor= "middle" font-size= "24" > 💰</text>
<text x= "975" y= "280" text-anchor= "middle" font-size= "13" fill= "#4a5568" > 保证金管理</text>
<!-- 入口8:定标审批 -->
<rect x= "1055" y= "220" width= "130" height= "80" rx= "10" fill= "#fff" filter= "url(#shadow)" />
<rect x= "1055" y= "220" width= "130" height= "4" rx= "2" fill= "#c62828" />
<text x= "1120" y= "252" text-anchor= "middle" font-size= "24" > ✅</text>
<text x= "1120" y= "280" text-anchor= "middle" font-size= "13" fill= "#4a5568" > 定标审批</text>
<!-- 行2:新增推荐入口(AI智能推荐,带小滨角标) -->
<text x= "70" y= "330" font-size= "14" font-weight= "bold" fill= "#00695c" > 🤖 小滨推荐</text>
<!-- 推荐1: AI寻源 -->
<rect x= "40" y= "350" width= "200" height= "60" rx= "10" fill= "#e8f5e9" stroke= "#4caf50" filter= "url(#shadow)" />
<text x= "70" y= "378" font-size= "20" > 🔍</text>
<text x= "100" y= "375" font-size= "14" font-weight= "bold" fill= "#2e7d32" > AI智慧寻源</text>
<text x= "100" y= "396" font-size= "12" fill= "#4a5568" > 2个项目待AI寻源</text>
<rect x= "190" y= "355" width= "30" height= "16" rx= "8" fill= "#ff9800" />
<text x= "205" y= "367" text-anchor= "middle" font-size= "10" fill= "#fff" > 2</text>
<!-- 推荐2:待定标 -->
<rect x= "260" y= "350" width= "200" height= "60" rx= "10" fill= "#fff3e0" stroke= "#ffcc80" filter= "url(#shadow)" />
<text x= "290" y= "378" font-size= "20" > 📋</text>
<text x= "320" y= "375" font-size= "14" font-weight= "bold" fill= "#e65100" > 待定标项目</text>
<text x= "320" y= "396" font-size= "12" fill= "#4a5568" > 1个项目待发起定标</text>
<rect x= "410" y= "355" width= "30" height= "16" rx= "8" fill= "#f44336" />
<text x= "425" y= "367" text-anchor= "middle" font-size= "10" fill= "#fff" > 1</text>
<!-- ===== 待办任务看板(4个阶段卡片) ===== -->
<text x= "70" y= "460" font-size= "16" font-weight= "bold" fill= "#1a2332" > 📋 待办任务</text>
<!-- 卡片1:待处理委托 -->
<rect x= "40" y= "480" width= "260" height= "170" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<rect x= "40" y= "480" width= "260" height= "6" rx= "3" fill= "#e91e63" />
<text x= "60" y= "508" font-size= "14" font-weight= "bold" fill= "#e91e63" > 📝 待确认委托</text>
<text x= "60" y= "534" font-size= "32" font-weight= "bold" fill= "#1a2332" > 3</text>
<text x= "60" y= "554" font-size= "13" fill= "#8895aa" > 个委托单待审核确认</text>
<text x= "60" y= "580" font-size= "13" fill= "#e91e63" text-decoration= "underline" > 查看全部 →</text>
<rect x= "60" y= "600" width= "80" height= "24" rx= "12" fill= "#ffebee" />
<text x= "100" y= "617" text-anchor= "middle" font-size= "11" fill= "#c62828" > 新委托</text>
<!-- 卡片2:待寻源确认 -->
<rect x= "320" y= "480" width= "260" height= "170" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<rect x= "320" y= "480" width= "260" height= "6" rx= "3" fill= "#ff9800" />
<text x= "340" y= "508" font-size= "14" font-weight= "bold" fill= "#e65100" > 🔍 待寻源确认</text>
<text x= "340" y= "534" font-size= "32" font-weight= "bold" fill= "#1a2332" > 2</text>
<text x= "340" y= "554" font-size= "13" fill= "#8895aa" > 个寻源结果待确认</text>
<text x= "340" y= "580" font-size= "13" fill= "#e65100" text-decoration= "underline" > 查看全部 →</text>
<rect x= "340" y= "600" width= "80" height= "24" rx= "12" fill= "#fff3e0" />
<text x= "380" y= "617" text-anchor= "middle" font-size= "11" fill= "#e65100" > AI已完成</text>
<!-- 卡片3:待立项审批 -->
<rect x= "600" y= "480" width= "260" height= "170" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<rect x= "600" y= "480" width= "260" height= "6" rx= "3" fill= "#1565c0" />
<text x= "620" y= "508" font-size= "14" font-weight= "bold" fill= "#1565c0" > 📄 待立项审批</text>
<text x= "620" y= "534" font-size= "32" font-weight= "bold" fill= "#1a2332" > 1</text>
<text x= "620" y= "554" font-size= "13" fill= "#8895aa" > 个招标方案待审批</text>
<text x= "620" y= "580" font-size= "13" fill= "#1565c0" text-decoration= "underline" > 查看全部 →</text>
<rect x= "620" y= "600" width= "80" height= "24" rx= "12" fill= "#e3f2fd" />
<text x= "660" y= "617" text-anchor= "middle" font-size= "11" fill= "#0d47a1" > 待发起</text>
<!-- 卡片4:待开标/评标 -->
<rect x= "880" y= "480" width= "260" height= "170" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<rect x= "880" y= "480" width= "260" height= "6" rx= "3" fill= "#4caf50" />
<text x= "900" y= "508" font-size= "14" font-weight= "bold" fill= "#2e7d32" > ⚖️ 待开标/评标</text>
<text x= "900" y= "534" font-size= "32" font-weight= "bold" fill= "#1a2332" > 2</text>
<text x= "900" y= "554" font-size= "13" fill= "#8895aa" > 个项目待组织评标</text>
<text x= "900" y= "580" font-size= "13" fill= "#2e7d32" text-decoration= "underline" > 查看全部 →</text>
<rect x= "900" y= "600" width= "80" height= "24" rx= "12" fill= "#e8f5e9" />
<text x= "940" y= "617" text-anchor= "middle" font-size= "11" fill= "#2e7d32" > 即将截止</text>
<!-- ===== 我的在办项目(表格) ===== -->
<text x= "70" y= "700" font-size= "16" font-weight= "bold" fill= "#1a2332" > 📂 我的在办项目</text>
<rect x= "40" y= "720" width= "1120" height= "180" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<!-- 表头 -->
<rect x= "40" y= "720" width= "1120" height= "36" rx= "12" fill= "#f0f2f7" />
<text x= "70" y= "744" font-size= "13" font-weight= "bold" fill= "#4a5568" > 项目编号</text>
<text x= "200" y= "744" font-size= "13" font-weight= "bold" fill= "#4a5568" > 项目名称</text>
<text x= "420" y= "744" font-size= "13" font-weight= "bold" fill= "#4a5568" > 当前阶段</text>
<text x= "560" y= "744" font-size= "13" font-weight= "bold" fill= "#4a5568" > 所属委托</text>
<text x= "700" y= "744" font-size= "13" font-weight= "bold" fill= "#4a5568" > 截止日期</text>
<text x= "840" y= "744" font-size= "13" font-weight= "bold" fill= "#4a5568" > 状态</text>
<text x= "980" y= "744" font-size= "13" font-weight= "bold" fill= "#4a5568" > 操作</text>
<!-- 行1 -->
<rect x= "50" y= "765" width= "1100" height= "36" rx= "4" fill= "#fff" />
<text x= "70" y= "788" font-size= "13" fill= "#1a2332" > BID-2026-001</text>
<text x= "200" y= "788" font-size= "13" fill= "#1a2332" > 年产5万吨聚丙烯项目设备采购</text>
<rect x= "420" y= "776" width= "60" height= "18" rx= "4" fill= "#ff9800" />
<text x= "450" y= "789" text-anchor= "middle" font-size= "11" fill= "#fff" > 寻源中</text>
<text x= "560" y= "788" font-size= "13" fill= "#666" > 技术部-李工</text>
<text x= "700" y= "788" font-size= "13" fill= "#666" > 2026-07-15</text>
<rect x= "840" y= "776" width= "60" height= "18" rx= "4" fill= "#4caf50" />
<text x= "870" y= "789" text-anchor= "middle" font-size= "11" fill= "#fff" > 进行中</text>
<text x= "980" y= "788" font-size= "13" fill= "#00695c" text-decoration= "underline" > 继续</text>
<!-- 行2 -->
<rect x= "50" y= "805" width= "1100" height= "36" rx= "4" fill= "#fff" />
<text x= "70" y= "828" font-size= "13" fill= "#1a2332" > BID-2026-003</text>
<text x= "200" y= "828" font-size= "13" fill= "#1a2332" > 数字化交付平台开发服务</text>
<rect x= "420" y= "816" width= "60" height= "18" rx= "4" fill= "#1565c0" />
<text x= "450" y= "829" text-anchor= "middle" font-size= "11" fill= "#fff" > 立项中</text>
<text x= "560" y= "828" font-size= "13" fill= "#666" > 数字化部-王工</text>
<text x= "700" y= "828" font-size= "13" fill= "#666" > 2026-07-10</text>
<rect x= "840" y= "816" width= "60" height= "18" rx= "4" fill= "#ff9800" />
<text x= "870" y= "829" text-anchor= "middle" font-size= "11" fill= "#fff" > 即将截止</text>
<text x= "980" y= "828" font-size= "13" fill= "#00695c" text-decoration= "underline" > 处理</text>
<!-- 行3 -->
<rect x= "50" y= "845" width= "1100" height= "36" rx= "4" fill= "#fff" />
<text x= "70" y= "868" font-size= "13" fill= "#1a2332" > BID-2026-005</text>
<text x= "200" y= "868" font-size= "13" fill= "#1a2332" > 2026年度防腐保温工程框架</text>
<rect x= "420" y= "856" width= "60" height= "18" rx= "4" fill= "#e91e63" />
<text x= "450" y= "869" text-anchor= "middle" font-size= "11" fill= "#fff" > 待开标</text>
<text x= "560" y= "868" font-size= "13" fill= "#666" > 工程部-刘工</text>
<text x= "700" y= "868" font-size= "13" fill= "#666" > 2026-07-08</text>
<rect x= "840" y= "856" width= "60" height= "18" rx= "4" fill= "#f44336" />
<text x= "870" y= "869" text-anchor= "middle" font-size= "11" fill= "#fff" > 紧急</text>
<text x= "980" y= "868" font-size= "13" fill= "#00695c" text-decoration= "underline" > 组织评标</text>
<!-- 查看更多 -->
<text x= "1020" y= "890" font-size= "13" fill= "#00695c" text-decoration= "underline" > 查看全部项目 →</text>
<!-- ============================================================ -->
<!-- ===== AI 助手“小滨”悬浮窗 ===== -->
<!-- ============================================================ -->
<g transform= "translate(800, 480)" >
<rect x= "0" y= "0" width= "340" height= "400" rx= "16" fill= "rgba(0,0,0,0.15)" filter= "url(#shadowDeep)" />
<rect x= "0" y= "0" width= "340" height= "400" rx= "16" fill= "#ffffff" filter= "url(#shadowDeep)" />
<!-- 头部 -->
<rect x= "0" y= "0" width= "340" height= "52" rx= "16" fill= "url(#headerBg)" />
<rect x= "0" y= "28" width= "340" height= "24" fill= "url(#headerBg)" />
<circle cx= "24" cy= "26" r= "10" fill= "rgba(255,255,255,0.3)" />
<text x= "24" y= "30" text-anchor= "middle" font-size= "10" fill= "#fff" font-weight= "bold" > 滨</text>
<text x= "42" y= "30" font-size= "15" font-weight= "bold" fill= "#fff" > 小滨 AI 助手</text>
<text x= "310" y= "24" font-size= "16" fill= "rgba(255,255,255,0.7)" > − </text>
<text x= "325" y= "24" font-size= "16" fill= "rgba(255,255,255,0.7)" > ✕</text>
<!-- 状态栏 -->
<rect x= "16" y= "62" width= "308" height= "28" rx= "6" fill= "#e8f5e9" />
<circle cx= "32" cy= "76" r= "5" fill= "#4caf50" />
<text x= "44" y= "81" font-size= "12" fill= "#2e7d32" > ● 在线 · 已为您分析今日待办</text>
<!-- 消息1 -->
<rect x= "16" y= "100" width= "308" height= "64" rx= "8" fill= "#fff3e0" stroke= "#ffcc80" />
<text x= "28" y= "122" font-size= "13" font-weight= "bold" fill= "#e65100" > 🔥 紧急:BID-2026-005 今日需开标</text>
<text x= "28" y= "144" font-size= "12" fill= "#bf360c" > “2026年度防腐保温工程框架”已到开标时间,请立即组织评标</text>
<text x= "290" y= "144" font-size= "12" fill= "#e65100" font-weight= "bold" text-decoration= "underline" > 去处理 →</text>
<!-- 消息2 -->
<rect x= "16" y= "174" width= "308" height= "64" rx= "8" fill= "#e8f5e9" stroke= "#a5d6a7" />
<text x= "28" y= "196" font-size= "13" font-weight= "bold" fill= "#2e7d32" > ✅ AI 已完成:寻源报告生成</text>
<text x= "28" y= "218" font-size= "12" fill= "#1b5e20" > “年产5万吨聚丙烯项目”已自动寻源,匹配到12家潜在供应商</text>
<text x= "290" y= "218" font-size= "12" fill= "#2e7d32" font-weight= "bold" text-decoration= "underline" > 查看 →</text>
<!-- 消息3 -->
<rect x= "16" y= "248" width= "308" height= "64" rx= "8" fill= "#e3f2fd" stroke= "#90caf9" />
<text x= "28" y= "270" font-size= "13" font-weight= "bold" fill= "#0d47a1" > 📋 您有 3 个委托单待审核</text>
<text x= "28" y= "292" font-size= "12" fill= "#0d47a1" > 来自技术部、采购部的委托申请已提交,请及时审核确认</text>
<text x= "290" y= "292" font-size= "12" fill= "#0d47a1" font-weight= "bold" text-decoration= "underline" > 去审核 →</text>
<!-- 输入框 -->
<rect x= "16" y= "340" width= "240" height= "40" rx= "20" fill= "#f5f7fa" stroke= "#e0e4ec" />
<text x= "30" y= "365" font-size= "13" fill= "#b0bbcc" > 输入您的问题...</text>
<rect x= "268" y= "340" width= "56" height= "40" rx= "20" fill= "url(#brandGrad)" />
<text x= "296" y= "366" text-anchor= "middle" font-size= "18" fill= "#fff" > ➤</text>
</g>
<!-- 小窗边缘提示角标 -->
<circle cx= "1140" y= "490" r= "10" fill= "#f44336" />
<text x= "1140" y= "495" text-anchor= "middle" font-size= "10" fill= "#fff" font-weight= "bold" > 5</text>
</svg>
```
## 3. 各模块详细说明
### 3.1 顶部导航栏
- **品牌区**:平台Logo + 名称,点击返回首页。
- **导航菜单**:首页、工作台(高亮)、项目管理、供应商管理、专家管理。
- **用户区**:显示招标专员头像(首字母)、姓名,下拉菜单含个人设置、退出等。
- **颜色主题**:绿色系(#00695c → #00897b ),与供应商(红色)、专家(蓝紫色)区分。
### 3.2 欢迎横幅 + 今日概览
| 属性 | 说明 |
| :--- | :--- |
| **位置 ** | 导航栏下方,全宽1120px,高度70px |
| **内容 ** | 问候语(根据时段动态:早上好/下午好)+ 专员姓名 |
| **今日概览 ** | 今日待办总数(所有待办卡片计数之和)+ 进行中项目数 |
| **数据来源 ** | 实时统计各流程节点的待办任务数量 |
### 3.3 待办任务看板(4个阶段卡片)
> 按招标全生命周期阶段组织,每个卡片突出显示待办数量,支持点击查看明细。
| 卡片 | 颜色主题 | 数据来源 | 任务类型 |
| :--- | :--- | :--- | :--- |
| **待确认委托 ** | 红色(#e91e63 ) | 委托流程 | 委托审核确认、委托补充 |
| **待寻源确认 ** | 橙色(#ff9800 ) | 供应商寻源流程 | AI寻源结果确认、短名单确认 |
| **待立项审批 ** | 蓝色(#1565c0 ) | 招标立项流程 | 招标方案评审、审批发起 |
| **待开标/评标 ** | 绿色(#4caf50 ) | 开标及评标流程 | 截标确认、专家抽取、组织评标 |
**交互规则 ** :
- 点击卡片任意区域 → 跳转至对应任务列表页。
- 点击“查看全部” → 跳转至带筛选条件的完整任务列表。
- 右上角标签 → 显示该阶段最高优先级状态(如“新委托”、“即将截止”)。
- 数字实时更新,有变化时数字闪烁(0.5s 呼吸动画)。
### 3.4 我的在办项目
| 属性 | 说明 |
| :--- | :--- |
| **位置 ** | 待办看板下方 |
| **尺寸 ** | 1120 × 200px |
| **展示逻辑 ** | 当前专员负责的、状态为“进行中”的项目,按紧急程度排序(即将截止优先) |
| **表格列 ** | 项目编号、项目名称、当前阶段、所属委托、截止日期、状态、操作 |
| **状态标签 ** | 进行中(绿色)、即将截止(橙色)、紧急(红色) |
| **操作列 ** | 根据项目阶段动态变化:继续、处理、组织评标、查看等 |
| **查看更多 ** | 跳转至完整项目列表页 |
**操作列映射表 ** :
| 项目阶段 | 操作按钮 | 跳转目标 |
| :--- | :--- | :--- |
| 委托中 | 确认 | 委托详情页 |
| 寻源中 | 查看报告 | AI寻源结果页 |
| 立项中 | 编辑方案 | 招标方案编辑页 |
| 待开标 | 组织评标 | 开标准备页 |
| 评标中 | 进入评标 | 评标管理页 |
| 定标中 | 发起审批 | 定标审批页 |
### 3.5 AI 助手“小滨”悬浮窗(核心特色)
#### 3.5.1 视觉设计
| 属性 | 说明 |
| :--- | :--- |
| **位置 ** | `position: fixed` ,默认位于右下角(距底部80px,距右侧40px) |
| **尺寸 ** | 宽340px,高400px |
| **可拖动 ** | 用户可通过拖拽头部区域移动悬浮窗位置 |
| **可折叠 ** | 点击头部“−”按钮最小化到右下角图标,点击“✕”关闭(可在系统设置中重新开启) |
#### 3.5.2 主动提示能力
AI助手“小滨”**不需要用户主动提问**,而是主动分析当前专员的待办任务状态,推送以下类型提示:
| 提示类型 | 触发条件 | 样式 | 示例 |
| :--- | :--- | :--- | :--- |
| * * 🔥 紧急提醒** | 任务截止时间 < 24小时 | 橙色背景(#fff3e0 ) | “BID-2026-005 今日需开标” |
| * * ✅ AI完成通知** | AI自动完成阶段性工作 | 绿色背景(#e8f5e9 ) | “✅ AI已完成:寻源报告生成” |
| * * 📋 待办汇总** | 日常任务堆积提醒 | 蓝色背景(#e3f2fd ) | “您有3个委托单待审核” |
| * * ⚠️ 风险预警** | 检测到异常或风险 | 红色背景(#ffebee ) | “⚠️ 供应商不足3家,需二次寻源” |
| * * 💡 操作建议** | 下一步最佳操作 | 灰色背景(#f5f5f5 ) | “💡 建议优先处理即将截止的委托” |
#### 3.5.3 消息推送规则
``` mermaid
graph TD
A[定时扫描待办任务<br>(每30秒)] --> B{检测到待办?}
B -->|无| C[显示“暂无待办,继续保持!”]
B -->|有| D[按优先级排序]
D --> E{优先级判定}
E -->|截止时间<24h| F[生成“紧急提醒”]
E -->|AI自动完成| G[生成“AI完成通知”]
E -->|常规任务| H[生成“待办汇总”]
E -->|异常检测| I[生成“风险预警”]
F --> J[按时间倒序展示在悬浮窗]
G --> J
H --> J
I --> J
J --> K[最多显示4条消息]
K --> L[用户点击“去处理”→跳转对应页面]
```
#### 3.5.4 消息交互
| 交互 | 说明 |
| :--- | :--- |
| **点击消息卡片 ** | 跳转至对应的任务处理页面(如点击“委托审核”→委托审核列表) |
| **点击“去处理” ** | 同点击消息卡片,跳转至对应页面 |
| **输入框提问 ** | 用户可在底部输入框主动提问,小滨基于知识库+当前任务上下文回答 |
| **消息自动消失 ** | 任务处理后,该消息在下次刷新时自动消失 |
| **消息手动关闭 ** | 点击消息右上角“✕”可手动关闭该条消息 |
#### 3.5.5 状态指示器
- 在线状态:绿色圆点 + “在线 · 已为您分析今日待办”
- 处理中状态(AI执行任务时):橙色圆点 + “正在分析任务...”
- 离线/错误状态:红色圆点 + “连接异常,点击重试”
## 4. 交互流程
### 4.1 待办任务处理完整流程
``` mermaid
flowchart TD
A[专员登录工作台] --> B[小滨自动扫描待办]
B --> C[待办卡片显示数量]
B --> D[小滨窗口推送优先级消息]
D --> E{专员操作}
E -->|点击消息卡片| F[跳转至对应任务页]
E -->|点击待办卡片| F
E -->|点击项目操作按钮| G[跳转至具体操作页]
F --> H[完成任务操作]
G --> H
H --> I[返回工作台]
I --> J[小滨自动刷新待办状态]
J --> K{有待办?}
K -->|有| L[更新待办数量+消息列表]
K -->|无| M[显示“🎉 所有任务已处理完毕!”]
```
### 4.2 小滨主动提醒触发场景
| 场景 | 触发时机 | 小滨动作 |
| :--- | :--- | :--- |
| 新委托到达 | 委托审核通过 | 推送“📋 新的委托单已到达,请确认” |
| AI寻源完成 | 寻源任务完成 | 推送“✅ AI已完成供应商寻源,请确认短名单” |
| 开标时间临近 | 开标前24小时 | 推送“🔥 项目XX即将开标,请确认准备工作” |
| 有效投标人不足 | 报名截止后 | 推送“⚠️ 有效投标人不足3家,建议二次寻源” |
| 定标待审批 | 评标完成 | 推送“📋 评标已完成,请发起定标审批” |
| 无待办任务 | 所有任务完成 | 推送“🎉 今日所有任务已处理完毕!” |
### 4.3 项目列表操作交互
- 点击项目行任意位置 → 跳转至项目详情页。
- 点击操作列按钮 → 跳转至具体任务处理页(如“组织评标”→评标准备页)。
- 支持行内快速操作(如状态变更下拉)。
## 5. 数据模型
### 5.1 待办统计 API
```
GET /api/v1/buyer/todo/statistics
响应:
{
"pendingEntrust": 3, // 待确认委托
"pendingSourcing": 2, // 待寻源确认
"pendingApproval": 1, // 待立项审批
"pendingBidOpen": 2, // 待开标/评标
"todayTotal": 8 // 今日待办总计
}
```
### 5.2 在办项目列表
```
GET /api/v1/buyer/projects/ongoing
参数:limit=5
响应:[{
"projectId": "BID-2026-001",
"projectName": "年产5万吨聚丙烯项目设备采购",
"phase": "SOURCING", // ENTRUST/SOURCING/APPROVAL/BID_OPEN/EVALUATION/FINALIZE
"entrustDept": "技术部-李工",
"deadline": "2026-07-15",
"status": "ONGOING", // ONGOING/URGENT/EXPIRING
"action": "VIEW_REPORT" // CONFIRM/EDIT/ORGANIZE/VIEW等
}]
```
### 5.3 小滨消息列表(由后端实时生成)
```
GET /api/v1/buyer/ai-messages
响应:[{
"id": "MSG_001",
"type": "URGENT", // URGENT/AI_COMPLETE/TODO/RISK/SUGGESTION
"title": "BID-2026-005 今日需开标",
"content": "“2026年度防腐保温工程框架”已到开标时间,请立即组织评标",
"action": "ORGANIZE_BID", // 对应跳转路由
"actionLabel": "去处理",
"createTime": "2026-07-06T09:00:00Z",
"expireTime": "2026-07-07T09:00:00Z"
}]
```
## 6. 业务规则
| ID | 规则 | 说明 |
| :--- | :--- | :--- |
| R01 | 待办看板按流程阶段分组,每个阶段独立计数 | 委托/寻源/立项/开标评标 |
| R02 | 小滨消息最多展示4条,按优先级排序 | 紧急>风险>AI完成>待办汇总 |
| R03 | 消息有效期24小时,超时自动归档 | 避免信息过载 |
| R04 | 任务处理后,相关消息在下次刷新时自动消失 | 实时同步 |
| R05 | 待办卡片数字变化时触发呼吸动画 | 吸引注意 |
| R06 | 小滨悬浮窗默认展开,支持最小化 | 用户可控制 |
## 7. 安全与性能
| 维度 | 措施 |
| :--- | :--- |
| **权限控制 ** | 仅招标专员可见工作台,数据按专员权限隔离 |
| **数据实时性 ** | 待办统计每30秒轮询更新,WebSocket推送状态变更 |
| **消息历史 ** | AI助手消息保留7天,可查询历史记录 |
| **防打扰 ** | 支持关闭小滨主动推送(仅保留角标提醒) |
## 8. 与供应商/专家工作台的差异
| 维度 | 供应商工作台 | 专家工作台 | 招标专员工作台 |
| :--- | :--- | :--- | :--- |
| **主题色 ** | 红色(#c2185b ) | 蓝紫色(#1a237e ) | 绿色(#00695c ) |
| **核心任务 ** | 投标报名、文件上传 | 接收评审邀请 | 流程推进、任务管理 |
| **待办分类 ** | 按操作类型(报名/缴费/上传) | 按评审状态 | **按招标阶段(委托/寻源/立项/开标) ** |
| **AI助手定位 ** | 操作问答 | 评审提醒 | **主动流程推进器 ** |
| **数据看板 ** | 投标项目列表 | 评审历史 | **在办项目+阶段任务 ** |
---
以上为招标专员工作台的完整详细设计,核心特色为 **AI助手“小滨”的悬浮窗主动提示机制 ** ,通过实时扫描待办任务、推送优先级建议和操作指引,帮助招标专员高效推进招标流程,真正实现“事找人”的智能化工作模式。