Dubhe/STP
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity
Files
main
STP/docs/architecture/详细设计/平台首页.md
T

21 KiB
Raw Permalink Blame History

# STP 智慧招标平台首页详细设计说明书

文档名称 STP 首页详细设计
文档版本 V1.0
修订说明 移除“帮助中心”菜单项（由 AI 助手承担）、移除统计数字区，优化布局。
编制日期 2026-07-01
关联文档 《需求分析说明书.md》《登录模块.md》

目录

  1. 概述
  2. 页面布局总览
  3. 各模块详细说明
  4. 交互与动态效果详细说明
  5. 登录前后差异化展示
  6. 技术实现建议
  7. 性能与可访问性
  8. 后续迭代方向

1. 概述

1.1 设计目标

STP 首页作为平台的门户，需同时满足公开访问和登录后个性化两种场景。核心目标包括：

  • 信息聚合：集中展示招标公告、定标公告、企业新闻等动态信息。
  • 角色引导：快速引导供应商、专家、内部员工进入对应操作路径。
  • 品牌信任：通过声明、合规提示建立公信力。
  • 智能体验：AI 助手作为统一帮助入口，提供主动式智能服务，替代传统帮助中心。

1.2 设计原则

原则 说明
清晰的信息层级 视觉重心依次为：导航 → 核心公告 → 快捷入口 → 声明。
响应式适配 自适应 PC 端（≥1280px）和平板端（≥768px）。
动效适度 运用滚动动画、轮播切换、微交互提升体验，不喧宾夺主。
角色感知 登录前后内容差异化展示（如未登录显示注册入口，已登录显示待办提醒）。
AI 优先 AI 助手作为帮助入口，所有操作引导类需求通过对话完成。

2. 页面布局总览

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 960" font-family="'Microsoft YaHei', sans-serif">
  <defs>
    <filter id="shadow" x="-2%" y="-2%" width="104%" height="104%">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.06"/>
    </filter>
    <filter id="shadowDeep" x="-2%" y="-2%" width="104%" height="104%">
      <feDropShadow dx="0" dy="6" stdDeviation="12" flood-color="#000" flood-opacity="0.10"/>
    </filter>
    <linearGradient id="headerBg" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#c2185b"/>
      <stop offset="100%" stop-color="#e91e63"/>
    </linearGradient>
    <linearGradient id="bannerBg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#fce4ec"/>
      <stop offset="100%" stop-color="#f3e5f5"/>
    </linearGradient>
    <linearGradient id="brandGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#c2185b"/><stop offset="100%" stop-color="#e91e63"/>
    </linearGradient>
  </defs>
  
  <!-- 背景 -->
  <rect width="1200" height="960" fill="#f5f7fa"/>
  
  <!-- ========== 顶部导航栏 ========== -->
  <rect width="1200" height="72" fill="url(#headerBg)"/>
  <text x="40" y="46" font-size="24" font-weight="bold" fill="#fff">智慧招标平台</text>
  <text x="200" y="46" font-size="14" fill="rgba(255,255,255,0.8)">Smart Tendering Platform</text>
  
  <!-- 导航菜单（移除“帮助中心”） -->
  <text x="480" y="46" font-size="15" fill="#fff" font-weight="bold">首页</text>
  <text x="560" y="46" font-size="15" fill="rgba(255,255,255,0.8)">招标公告</text>
  <text x="660" y="46" font-size="15" fill="rgba(255,255,255,0.8)">定标公告</text>
  <text x="760" y="46" font-size="15" fill="rgba(255,255,255,0.8)">企业新闻</text>
  
  <!-- 登录/注册入口 -->
  <rect x="980" y="20" width="80" height="32" rx="6" fill="rgba(255,255,255,0.2)" stroke="#fff"/>
  <text x="1020" y="42" text-anchor="middle" font-size="14" fill="#fff">登录</text>
  <rect x="1070" y="20" width="90" height="32" rx="6" fill="#fff"/>
  <text x="1115" y="42" text-anchor="middle" font-size="14" fill="#c2185b" font-weight="bold">注册</text>

  <!-- ========== Banner 轮播区 ========== -->
  <rect x="40" y="100" width="1120" height="280" rx="12" fill="#fff" filter="url(#shadowDeep)"/>
  <rect x="40" y="100" width="1120" height="280" rx="12" fill="url(#bannerBg)"/>
  
  <!-- Banner 内容 -->
  <text x="160" y="210" font-size="32" font-weight="bold" fill="#c2185b">AI 赋能的智慧招标</text>
  <text x="160" y="250" font-size="18" fill="#4a5568">全流程线上闭环，主动智能寻源，自动风险评估</text>
  <text x="160" y="290" font-size="14" fill="#8895aa">• 智能招标委托  • 供应商 AI 寻源  • 自动化评标辅助</text>
  <rect x="160" y="320" width="140" height="40" rx="8" fill="#c2185b" filter="url(#shadow)"/>
  <text x="230" y="346" text-anchor="middle" font-size="15" fill="#fff" font-weight="bold">了解更多 →</text>
  
  <!-- 轮播指示器（带高亮动画） -->
  <circle cx="900" cy="340" r="7" fill="#c2185b"/>
  <circle cx="925" cy="340" r="6" fill="#d1d5db"/>
  <circle cx="950" cy="340" r="6" fill="#d1d5db"/>
  <circle cx="975" cy="340" r="6" fill="#d1d5db"/>

  <!-- ========== 公告区（三列，上移填补统计区空缺） ========== -->
  <text x="60" y="430" font-size="20" font-weight="bold" fill="#1a2332">📢 最新公告</text>
  
  <!-- 左：招标公告 -->
  <rect x="40" y="455" width="360" height="330" rx="12" fill="#fff" filter="url(#shadow)"/>
  <rect x="40" y="455" width="360" height="42" rx="12" fill="#c2185b"/>
  <text x="220" y="483" text-anchor="middle" font-size="16" font-weight="bold" fill="#fff">招标公告</text>
  <text x="220" y="505" text-anchor="middle" font-size="11" fill="rgba(255,255,255,0.8)">最新发布</text>
  
  <rect x="60" y="520" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="75" y="540" font-size="14" fill="#1a2332">年产5万吨聚丙烯项目设备采购</text>
  <text x="75" y="555" font-size="12" fill="#8895aa">2026-07-01 ｜ 货物 ｜ 报名中</text>
  
  <rect x="60" y="570" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="75" y="590" font-size="14" fill="#1a2332">数字化交付平台开发服务</text>
  <text x="75" y="605" font-size="12" fill="#8895aa">2026-06-29 ｜ 服务 ｜ 即将截止</text>
  
  <rect x="60" y="620" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="75" y="640" font-size="14" fill="#1a2332">2026年度防腐保温工程框架</text>
  <text x="75" y="655" font-size="12" fill="#8895aa">2026-06-28 ｜ 工程 ｜ 已截止</text>
  
  <!-- 招标公告更多按钮 -->
  <rect x="280" y="760" width="100" height="28" rx="14" fill="#fce4ec"/>
  <text x="330" y="780" text-anchor="middle" font-size="13" fill="#c2185b" font-weight="bold">查看全部 →</text>

  <!-- 中：定标公告 -->
  <rect x="420" y="455" width="360" height="330" rx="12" fill="#fff" filter="url(#shadow)"/>
  <rect x="420" y="455" width="360" height="42" rx="12" fill="#1565c0"/>
  <text x="600" y="483" text-anchor="middle" font-size="16" font-weight="bold" fill="#fff">定标公告</text>
  <text x="600" y="505" text-anchor="middle" font-size="11" fill="rgba(255,255,255,0.8)">最新定标</text>
  
  <rect x="440" y="520" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="455" y="540" font-size="14" fill="#1a2332">催化剂采购项目（包1）</text>
  <text x="455" y="555" font-size="12" fill="#8895aa">2026-07-01 ｜ 中标方：滨化催化剂有限公司</text>
  
  <rect x="440" y="570" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="455" y="590" font-size="14" fill="#1a2332">厂区安防监控升级项目</text>
  <text x="455" y="605" font-size="12" fill="#8895aa">2026-06-30 ｜ 中标方：海康威视</text>
  
  <rect x="440" y="620" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="455" y="640" font-size="14" fill="#1a2332">办公楼装修工程</text>
  <text x="455" y="655" font-size="12" fill="#8895aa">2026-06-28 ｜ 中标方：滨州建工集团</text>
  
  <!-- 定标公告更多按钮 -->
  <rect x="660" y="760" width="100" height="28" rx="14" fill="#e3f2fd"/>
  <text x="710" y="780" text-anchor="middle" font-size="13" fill="#1565c0" font-weight="bold">查看全部 →</text>

  <!-- 右：企业新闻 -->
  <rect x="800" y="455" width="360" height="330" rx="12" fill="#fff" filter="url(#shadow)"/>
  <rect x="800" y="455" width="360" height="42" rx="12" fill="#e65100"/>
  <text x="980" y="483" text-anchor="middle" font-size="16" font-weight="bold" fill="#fff">企业新闻</text>
  <text x="980" y="505" text-anchor="middle" font-size="11" fill="rgba(255,255,255,0.8)">集团动态</text>
  
  <rect x="820" y="520" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="835" y="540" font-size="14" fill="#1a2332">滨化集团获评“省级智能工厂”</text>
  <text x="835" y="555" font-size="12" fill="#8895aa">2026-07-01 ｜ 集团动态</text>
  
  <rect x="820" y="570" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="835" y="590" font-size="14" fill="#1a2332">2026年供应商大会圆满举办</text>
  <text x="835" y="605" font-size="12" fill="#8895aa">2026-06-25 ｜ 合作伙伴</text>
  
  <rect x="820" y="620" width="320" height="40" rx="6" fill="#fafafa"/>
  <text x="835" y="640" font-size="14" fill="#1a2332">智慧招标平台正式上线运营</text>
  <text x="835" y="655" font-size="12" fill="#8895aa">2026-06-01 ｜ 平台公告</text>
  
  <!-- 企业新闻更多按钮 -->
  <rect x="1040" y="760" width="100" height="28" rx="14" fill="#fff3e0"/>
  <text x="1090" y="780" text-anchor="middle" font-size="13" fill="#e65100" font-weight="bold">查看全部 →</text>

  <!-- ========== 底部声明区 ========== -->
  <rect x="40" y="815" width="1120" height="110" rx="12" fill="#fff" filter="url(#shadow)"/>
  <text x="80" y="850" font-size="14" font-weight="bold" fill="#4a5568">免责声明</text>
  <text x="80" y="875" font-size="12" fill="#8895aa">本平台所有招标信息均由滨化集团或其下属公司发布，信息真实有效。供应商应对投标行为负责，本平台保留对违规行为的处理权。</text>
  <text x="80" y="900" font-size="12" fill="#8895aa">隐私政策 ｜ 服务协议 ｜ 法律声明 ｜ © 2026 滨化集团 ｜ 鲁ICP备XXXXXXXX号</text>

  <!-- ========== AI 助手浮动入口 ========== -->
  <circle cx="1110" cy="890" r="42" fill="url(#brandGrad)" filter="url(#shadowDeep)"/>
  <text x="1110" y="885" text-anchor="middle" font-size="16" fill="#fff" font-weight="bold">小滨</text>
  <text x="1110" y="905" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">AI 助手</text>
  
  <!-- AI 助手呼吸光环动画示意 -->
  <circle cx="1110" cy="890" r="50" fill="none" stroke="#e91e63" stroke-width="2" opacity="0.3">
    <animate attributeName="r" from="42" to="55" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

3. 各模块详细说明

3.1 顶部导航栏

元素 说明
品牌区 平台 Logo + 名称（“智慧招标平台”），点击返回首页。右侧显示英文副标题。
主导航 首页、招标公告、定标公告、企业新闻。高亮当前所在页面。
用户操作区 未登录：显示“登录”和“注册”按钮。已登录：显示用户头像/名称，下拉菜单包含“个人中心”、“我的投标/评审”、“安全设置”、“退出”。
动态效果 导航项 hover 时下划线滑出动画（0.3s）；登录/注册按钮 hover 时微变色/上浮。

设计决策：移除“帮助中心”菜单项。所有操作引导、常见问题解答、流程咨询等功能由右下角 AI 助手“小滨” 统一承担，降低用户学习成本，提供更智能、更个性化的帮助体验。

3.2 Banner 轮播区

属性 说明
尺寸 1120 × 280px，圆角 12px，带卡片阴影
功能 展示平台核心价值、最新活动、重要通知等，支持自动轮播和手动切换
轮播数量 3~5 张 Banner
每张内容 主标题（32px）、副标题（18px）、特性标签列表、CTA 按钮
切换方式 自动轮播（每 5 秒切换）+ 底部指示器手动切换
动效 淡入淡出过渡（0.8s 缓动），指示器高亮同步变化
CTA 按钮 “了解更多”跳转至平台介绍页，“立即参与”跳转至公告列表

3.3 公告区

3.3.1 招标公告（左列）

属性 说明
标题区 红色渐变背景（#c2185b），显示“招标公告”+“最新发布”标签
列表项 展示 3 条最新招标信息
每条信息 标题（14px，加粗）+ 发布时间、品类、状态标签
状态标签 报名中（绿色）、即将截止（橙色）、已截止（灰色）
更多按钮 “查看全部 →”，跳转至招标公告列表页（支持分页、搜索、筛选）

3.3.2 定标公告（中列）

属性 说明
标题区 蓝色渐变背景（#1565c0），显示“定标公告”+“最新定标”标签
列表项 展示 3 条最新定标结果
每条信息 项目名称（14px，加粗）+ 定标日期、中标方
更多按钮 “查看全部 →”，跳转至定标公告列表页

3.3.3 企业新闻（右列）

属性 说明
标题区 橙色渐变背景（#e65100），显示“企业新闻”+“集团动态”标签
列表项 展示 3 条最新集团动态
每条信息 标题（14px，加粗）+ 发布日期、分类标签
更多按钮 “查看全部 →”，跳转至新闻列表页

3.3.4 动态效果

交互 效果
列表项 hover 背景色变为 #f0f2f7，过渡 0.2s
更多按钮 hover 文字颜色加深，下划线展开
状态标签 报名中：绿色圆点 + “报名中”文字

3.4 底部声明区

元素 说明
免责声明 “本平台所有招标信息均由滨化集团或其下属公司发布，信息真实有效。供应商应对投标行为负责，本平台保留对违规行为的处理权。”
政策链接 隐私政策、服务协议、法律声明（可点击跳转）
版权信息 集团名称 + 备案号
样式 浅灰背景，文字 12px，版权信息居中对齐

3.5 AI 助手浮动入口

属性 说明
位置 页面右下角固定，position: fixed，不随滚动移动
视觉 圆形渐变按钮（直径 84px），显示“小滨”和“AI 助手”文字
动态效果 呼吸光环动画（圆形脉冲，周期 2s），悬停时放大 1.05 倍
交互 点击展开聊天窗口（浮窗），可最小化/关闭
功能定位 替代传统帮助中心。提供：
• 平台操作引导（“如何发起委托？”“怎么报名？”）
• 常见问题解答
• 流程状态查询（“我的注册进度？”）
• 智能推荐（根据角色推荐下一步操作）
登录前后差异 未登录：通用问答 + 注册引导；
已登录：个性化问答 + 待办提醒；
注：登录后AI主动显示待办提醒，每一条提醒后面有链接直通处理页面。

4. 交互与动态效果详细说明

元素 触发事件 效果描述 持续时间
导航菜单 hover 文字下方滑出下划线（从左至右） 0.3s
登录/注册按钮 hover 背景色微变，轻微上浮 2px 0.2s
Banner 轮播 自动/点击指示器 内容淡入淡出切换，指示器高亮 0.8s
Banner CTA 按钮 hover 背景色加深，轻微放大 0.2s
公告列表项 hover 背景色变为 #f0f2f7 0.2s
“查看全部”按钮 hover 文字颜色加深，下划线展开 0.3s
AI 助手浮标 hover 放大 1.05 倍，阴影加深 0.2s
AI 助手光环 自动 脉冲扩散动画（呼吸效果） 2s 循环
页面加载 onLoad 公告列表从下往上淡入（stagger 100ms） 0.6s

4.1 关键帧动画示例（CSS）

/* AI 助手呼吸光环 */
@keyframes breathe {
  0% { r: 42; opacity: 0.6; }
  100% { r: 58; opacity: 0; }
}

/* 公告列表入场 */
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 导航下划线 */
.nav-item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s ease;
}
.nav-item:hover::after { width: 100%; }

5. 登录前后差异化展示

模块 未登录 已登录
顶部用户区 显示“登录”+“注册”按钮 显示用户头像、名称及下拉菜单（个人中心/我的投标/安全设置/退出）
Banner 区 展示平台宣传内容（AI赋能、全流程等） 可增加“待办提醒”Banner（如“您有 X 个项目待投标”）或个性化推荐
公告区 全部公开，按时间倒序展示 可标注已读状态，或按供应商关注的品类/行业进行排序推荐
AI 助手 通用问答 + 注册引导 根据角色推送个性化帮助：
• 供应商：“您关注的品类有新公告”
• 专家：“您有新的评标邀请”
• 招标专员：“待办任务提醒”

6. 技术实现建议

领域 建议
前端框架 Vue 3 / React，采用组件化开发，公告列表、Banner 等均封装为独立组件
数据交互 • 公告列表：REST API 分页获取（/api/announcements）
• Banner 内容：由后台 CMS 管理（/api/banners）
• 统计数据：实时查询或 Redis 缓存（5分钟）
状态管理 Pinia（Vue）/ Redux（React），管理用户登录状态、公告缓存
动画库 CSS Animation + 少量 GSAP（数字滚动效果）
响应式 使用 Grid / Flexbox，移动端适配为单列布局（≥768px 为三列，<768px 为单列）
AI 助手 WebSocket 实时通信，支持流式输出（SSE），后端对接大语言模型

7. 性能与可访问性

维度 要求
首屏加载 ≤ 1.5 秒（LCP）
图片优化 Banner 使用 WebP 格式，支持懒加载
SEO 公告标题使用语义化 HTML（<h1>～<h3>），meta 信息完整
可访问性 • 颜色对比度 ≥ 4.5:1（WCAG AA）
• 支持键盘操作（Tab 切换、Enter 点击）
• 轮播指示器有 aria-label
缓存策略 公告列表缓存 60 秒，Banner 缓存 300 秒

8. 后续迭代方向

方向 说明
个性化推荐 根据用户历史浏览记录、关注的品类，推荐可能感兴趣的招标项目
智能搜索 顶部导航增加全局搜索框，支持关键词检索公告、供应商、专家
订阅功能 供应商可订阅关注的品类，新公告发布时通过站内信/邮件推送
多语言支持 预留中英文切换接口（i18n），后续拓展
数据看板 登录后首页可展示个人投标/评审数据统计

9. 附录：模块映射表

序号 模块名称 SVG Y坐标 高度 功能
1 顶部导航栏 0 72 品牌+导航+用户操作
2 Banner 轮播区 100 280 核心宣传+活动通知
3 招标公告 455 330 最新招标信息（3条）
4 定标公告 455 330 最新定标结果（3条）
5 企业新闻 455 330 最新集团动态（3条）
6 底部声明区 815 110 免责声明+政策+版权
7 AI 助手浮标 848（固定） 84 智能帮助入口
Reference in New Issue View Git Blame Copy Permalink