#  招标专员工作台详细设计说明书

| 文档名称     | 招标专员工作台详细设计 |
| :------- | :---------- |
| **文档版本** | 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助手“小滨”的悬浮窗主动提示机制**，通过实时扫描待办任务、推送优先级建议和操作指引，帮助招标专员高效推进招标流程，真正实现“事找人”的智能化工作模式。