添加 招标专员工作台详细设计说明书.md
This commit is contained in:
@@ -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助手“小滨”的悬浮窗主动提示机制**,通过实时扫描待办任务、推送优先级建议和操作指引,帮助招标专员高效推进招标流程,真正实现“事找人”的智能化工作模式。
|
||||
Reference in New Issue
Block a user