619 lines
33 KiB
Markdown
619 lines
33 KiB
Markdown
# 招标专员工作台详细设计说明书
|
||
|
||
| 文档名称 | 招标专员工作台详细设计 |
|
||
| :------- | :---------- |
|
||
| **文档版本** | 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 快捷入口模块
|
||
|
||
> 位于欢迎横幅与待办看板之间，提供高频功能的一键直达入口。
|
||
|
||
#### 3.2.1 布局与尺寸
|
||
|
||
| 属性 | 说明 |
|
||
| -------- | ------------------------------------- |
|
||
| **位置** | 欢迎横幅下方，待办看板上方 |
|
||
| **布局** | 两行：第一行为 8 个固定入口（2行×4列），第二行为“小滨推荐”动态入口 |
|
||
| **入口尺寸** | 宽 130px，高 80px，间距 15px |
|
||
| **背景** | 白色卡片，圆角 10px，带浅阴影 |
|
||
| **顶部色条** | 每个入口顶部有 4px 高的彩色条，用于视觉区分 |
|
||
|
||
#### 3.1.2 固定快捷入口列表
|
||
|
||
|序号|图标|名称|顶部色条|跳转目标|说明|
|
||
|---|---|---|---|---|---|
|
||
|1|📝|新建委托|红色（#e91e63）|委托创建页|快速发起新的招标委托|
|
||
|2|📂|我的项目|蓝色（#1565c0）|项目管理列表|查看所有负责的项目|
|
||
|3|🏢|供应商库|橙色（#ff9800）|供应商管理页|查询/管理供应商信息|
|
||
|4|👨🏫|专家库|深蓝（#1a237e）|专家管理页|查询/管理评审专家|
|
||
|5|📄|模板库|绿色（#4caf50）|模板管理页|招标文件/评分模板|
|
||
|6|📊|报表中心|深橙（#e65100）|报表统计页|招标数据统计分析|
|
||
|7|💰|保证金管理|紫色（#9c27b0）|保证金管理页|保证金缴纳/退还管理|
|
||
|8|✅|定标审批|深红（#c62828）|定标审批列表|快速发起定标审批|
|
||
|
||
### 3.3 待办任务看板（4个阶段卡片）
|
||
|
||
> 按招标全生命周期阶段组织，每个卡片突出显示待办数量，支持点击查看明细。
|
||
|
||
| 卡片 | 颜色主题 | 数据来源 | 任务类型 |
|
||
| :--- | :--- | :--- | :--- |
|
||
| **待确认委托** | 红色（#e91e63） | 委托流程 | 委托审核确认、委托补充 |
|
||
| **待寻源确认** | 橙色（#ff9800） | 供应商寻源流程 | AI寻源结果确认、短名单确认 |
|
||
| **待立项审批** | 蓝色（#1565c0） | 招标立项流程 | 招标方案评审、审批发起 |
|
||
| **待开标/评标** | 绿色（#4caf50） | 开标及评标流程 | 截标确认、专家抽取、组织评标 |
|
||
|
||
**交互规则**：
|
||
- 点击卡片任意区域 → 跳转至对应任务列表页。
|
||
- 点击“查看全部” → 跳转至带筛选条件的完整任务列表。
|
||
- 右上角标签 → 显示该阶段最高优先级状态（如“新委托”、“即将截止”）。
|
||
- 数字实时更新，有变化时数字闪烁（0.5s 呼吸动画）。
|
||
|
||
### 3.4 我的在办项目
|
||
|
||
| 属性 | 说明 |
|
||
| :--- | :--- |
|
||
| **位置** | 待办看板下方 |
|
||
| **尺寸** | 1120 × 200px |
|
||
| **展示逻辑** | 当前专员负责的、状态为“进行中”的项目，按紧急程度排序（即将截止优先） |
|
||
| **表格列** | 项目编号、项目名称、当前阶段、所属委托、截止日期、状态、操作 |
|
||
| **状态标签** | 进行中（绿色）、即将截止（橙色）、紧急（红色） |
|
||
| **操作列** | 根据项目阶段动态变化：继续、处理、组织评标、查看等 |
|
||
| **查看更多** | 跳转至完整项目列表页 |
|
||
|
||
**操作列映射表**：
|
||
|
||
| 项目阶段 | 操作按钮 | 跳转目标 |
|
||
| :--- | :--- | :--- |
|
||
| 委托中 | 确认 | 委托详情页 |
|
||
| 寻源中 | 查看报告 | AI寻源结果页 |
|
||
| 立项中 | 编辑方案 | 招标方案编辑页 |
|
||
| 待开标 | 组织评标 | 开标准备页 |
|
||
| 评标中 | 进入评标 | 评标管理页 |
|
||
| 定标中 | 发起审批 | 定标审批页 |
|
||
|
||
## 3.5 后台智能体任务监控
|
||
|
||
### 3.5.1 模块定位
|
||
|
||
| 属性 | 说明 |
|
||
| -------- | ------------------------------------------------------------ |
|
||
| **模块名称** | 后台智能体任务（AI Agent Task Monitor） |
|
||
| **位置** | 待办任务看板下方，在办项目列表上方 |
|
||
| **功能** | 实时展示后台异步 AI 智能体任务的执行进度，包括任务名称、关联项目、执行状态、进度百分比、关键中间结果、预计剩余时间等 |
|
||
| **刷新机制** | 每 3 秒轮询 / WebSocket 推送（推荐） |
|
||
|
||
### 3.5.2 任务类型清单
|
||
|
||
|任务图标|任务名称|触发时机|典型耗时|输出产物|
|
||
|---|---|---|---|---|
|
||
|🔍|AI 智慧寻源|委托确认后自动触发|2-10 分钟|潜在供应商名单 + 推荐报告|
|
||
|🔬|AI 雷同检测|投标文件上传完成后|1-8 分钟|雷同检测报告|
|
||
|📊|AI 价格分析|开标完成后|1-3 分钟|价格偏离度分析报告|
|
||
|👨🏫|AI 专家推荐|评标前准备阶段|30 秒-2 分钟|匹配专家列表|
|
||
|📄|AI 评标报告生成|评标打分完成后|1-2 分钟|评标报告初稿|
|
||
|🧩|AI 合并招标建议|委托生效时|1-3 分钟|合并招标建议书|
|
||
|📋|AI 资格初审|供应商报名后|1-5 分钟|资格预审结果|
|
||
|
||
### 3.5.3 任务状态与视觉规范
|
||
|
||
|状态|色条颜色|状态标签|进度条样式|说明|
|
||
|---|---|---|---|---|
|
||
|**待执行**|灰色（#9e9e9e）|⏸ 待执行|灰色空进度条|任务在队列中等待|
|
||
|**执行中**|橙色（#ff9800）|⏳ 执行中|橙色渐变进度条 + 百分比|正在运行，显示进度|
|
||
|**已完成**|绿色（#4caf50）|✅ 已完成|绿色实心进度条|任务成功完成|
|
||
|**失败**|红色（#f44336）|❌ 执行失败|红色进度条 + 错误标记|任务异常终止|
|
||
|
||
### 3.5.4 单条任务卡片结构
|
||
|
||
|区域|元素|说明|
|
||
|---|---|---|
|
||
|**左侧**|色条|6px 宽，颜色对应任务状态|
|
||
|**图标区**|任务图标 + 圆形背景|28px 圆，背景色与状态匹配|
|
||
|**任务信息**|任务名称（加粗）+ 关联项目名称|显示任务所属项目|
|
||
|**状态区**|状态标签 + 进度条 + 百分比|展示当前执行进度|
|
||
|**详情区**|关键中间结果|如“已匹配 8/20 家供应商”|
|
||
|**时间区**|预计剩余时间 / 完成时间|执行中显示剩余，已完成显示完成时间|
|
||
|**操作区**|取消 / 查看报告|执行中可取消，已完成可查看报告|
|
||
|
||
### 3.5.5 任务卡片示例数据
|
||
|
||
|任务|状态|进度|中间结果|预计剩余|操作|
|
||
|---|---|---|---|---|---|
|
||
|AI 智慧寻源|执行中|70%|已匹配：8 家供应商|2 分钟|取消|
|
||
|AI 雷同检测|执行中|30%|已扫描：3/10 份|5 分钟|取消|
|
||
|AI 价格分析|已完成|100%|发现 1 份报价偏离 >20%|09:35 完成|查看报告|
|
||
|AI 专家推荐|待执行|0%|—|—|—|
|
||
|
||
### 3.5.6 点击交互
|
||
|
||
|交互|说明|
|
||
|---|---|
|
||
|**点击任务卡片**|跳转至任务详情页（展示完整的执行日志和中间结果）|
|
||
|**点击“取消”**|弹出二次确认弹窗，确认后终止任务（仅限执行中状态）|
|
||
|**点击“查看报告”**|在新窗口打开或下载生成的报告文件|
|
||
|**悬停进度条**|显示详细进度信息（Tooltip）|
|
||
|
||
### 3.5.7 智能体任务与 AI 助手的协同
|
||
|
||
当智能体任务状态发生变化时，AI助手“小滨”会同步推送主动提醒：
|
||
|
||
|任务状态变化|小滨推送内容|示例|
|
||
|---|---|---|
|
||
|任务完成|“✅ AI [任务名称] 已完成，请查看报告”|“✅ AI 价格分析已完成，发现 1 份报价偏离度 >20%”|
|
||
|任务失败|“❌ AI [任务名称] 执行失败，请重试或联系管理员”|“❌ AI 雷同检测执行失败，请检查投标文件格式”|
|
||
|关键节点|“📌 AI [任务名称] 已找到 [数量] 个潜在供应商”|“📌 AI 智慧寻源已找到 12 家潜在供应商”|
|
||
|
||
|
||
### 3.6 AI 助手“小滨”悬浮窗（核心特色）
|
||
|
||
#### 3.6.1 视觉设计
|
||
|
||
| 属性 | 说明 |
|
||
| :--- | :--- |
|
||
| **位置** | `position: fixed`，默认位于右下角（距底部80px，距右侧40px） |
|
||
| **尺寸** | 宽340px，高400px |
|
||
| **可拖动** | 用户可通过拖拽头部区域移动悬浮窗位置 |
|
||
| **可折叠** | 点击头部“−”按钮最小化到右下角图标，点击“✕”关闭（可在系统设置中重新开启） |
|
||
|
||
#### 3.6.2 主动提示能力
|
||
|
||
AI助手“小滨”**不需要用户主动提问**，而是主动分析当前专员的待办任务状态，推送以下类型提示：
|
||
|
||
| 提示类型 | 触发条件 | 样式 | 示例 |
|
||
| :----------- | :------------ | :------------ | :------------------- |
|
||
| **🔥 紧急提醒** | 任务截止时间 < 24小时 | 橙色背景（#fff3e0） | “BID-2026-005 今日需开标” |
|
||
| **✅ AI完成通知** | AI自动完成阶段性工作 | 绿色背景（#e8f5e9） | “✅ AI已完成：寻源报告生成” |
|
||
| **📋 待办汇总** | 日常任务堆积提醒 | 蓝色背景（#e3f2fd） | “您有3个委托单待审核” |
|
||
| **⚠️ 风险预警** | 检测到异常或风险 | 红色背景（#ffebee） | “⚠️ 供应商不足3家，需二次寻源” |
|
||
| **💡 操作建议** | 下一步最佳操作 | 灰色背景（#f5f5f5） | “💡 建议优先处理即将截止的委托” |
|
||
提示示例：
|
||
您当前有3项待确认委托，一个立项待审批，防腐保温工程最紧急，点击*这里*(链接)进行处理。
|
||
|
||
#### 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天，可查询历史记录 |
|
||
| **防打扰** | 支持关闭小滨主动推送（仅保留角标提醒） |
|