From b5261609ff7b31deed78665c1c60ecdb723835f6 Mon Sep 17 00:00:00 2001 From: yeww Date: Thu, 2 Jul 2026 09:58:58 +0800 Subject: [PATCH] =?UTF-8?q?docs/architecture/=E8=AF=A6=E7=BB=86=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1/=E5=B9=B3=E5=8F=B0=E9=A6=96=E9=A1=B5.md=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/architecture/详细设计/平台首页.md | 367 +++++++++++++++++++++++++ 1 file changed, 367 insertions(+) create mode 100644 docs/architecture/详细设计/平台首页.md diff --git a/docs/architecture/详细设计/平台首页.md b/docs/architecture/详细设计/平台首页.md new file mode 100644 index 0000000..aadbaa3 --- /dev/null +++ b/docs/architecture/详细设计/平台首页.md @@ -0,0 +1,367 @@ +# # STP 智慧招标平台首页详细设计说明书 + +| 文档名称 | STP 首页详细设计 | +| :------- | :----------------------------------- | +| **文档版本** | V1.0 | +| **修订说明** | 移除“帮助中心”菜单项（由 AI 助手承担）、移除统计数字区，优化布局。 | +| **编制日期** | 2026-07-01 | +| **关联文档** | 《[[需求分析说明书.md]]》《[[登录模块.md]]》 | + + +## 目录 +1. [概述](#1-概述) +2. [页面布局总览](#2-页面布局总览svg-线框图) +3. [各模块详细说明](#3-各模块详细说明) +4. [交互与动态效果详细说明](#4-交互与动态效果详细说明) +5. [登录前后差异化展示](#5-登录前后差异化展示) +6. [技术实现建议](#6-技术实现建议) +7. [性能与可访问性](#7-性能与可访问性) +8. [后续迭代方向](#8-后续迭代方向) + + +## 1. 概述 + +### 1.1 设计目标 +STP 首页作为平台的门户，需同时满足**公开访问**和**登录后个性化**两种场景。核心目标包括： +- **信息聚合**：集中展示招标公告、定标公告、企业新闻等动态信息。 +- **角色引导**：快速引导供应商、专家、内部员工进入对应操作路径。 +- **品牌信任**：通过声明、合规提示建立公信力。 +- **智能体验**：AI 助手作为统一帮助入口，提供主动式智能服务，替代传统帮助中心。 + +### 1.2 设计原则 +| 原则 | 说明 | +| :--- | :--- | +| **清晰的信息层级** | 视觉重心依次为：导航 → 核心公告 → 快捷入口 → 声明。 | +| **响应式适配** | 自适应 PC 端（≥1280px）和平板端（≥768px）。 | +| **动效适度** | 运用滚动动画、轮播切换、微交互提升体验，不喧宾夺主。 | +| **角色感知** | 登录前后内容差异化展示（如未登录显示注册入口，已登录显示待办提醒）。 | +| **AI 优先** | AI 助手作为帮助入口，所有操作引导类需求通过对话完成。 | + + +## 2. 页面布局总览 + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + 智慧招标平台 + Smart Tendering Platform + + + 首页 + 招标公告 + 定标公告 + 企业新闻 + + + + 登录 + + 注册 + + + + + + + AI 赋能的智慧招标 + 全流程线上闭环，主动智能寻源，自动风险评估 + • 智能招标委托 • 供应商 AI 寻源 • 自动化评标辅助 + + 了解更多 → + + + + + + + + + 📢 最新公告 + + + + + 招标公告 + 最新发布 + + + 年产5万吨聚丙烯项目设备采购 + 2026-07-01 ｜ 货物 ｜ 报名中 + + + 数字化交付平台开发服务 + 2026-06-29 ｜ 服务 ｜ 即将截止 + + + 2026年度防腐保温工程框架 + 2026-06-28 ｜ 工程 ｜ 已截止 + + + + 查看全部 → + + + + + 定标公告 + 最新定标 + + + 催化剂采购项目（包1） + 2026-07-01 ｜ 中标方：滨化催化剂有限公司 + + + 厂区安防监控升级项目 + 2026-06-30 ｜ 中标方：海康威视 + + + 办公楼装修工程 + 2026-06-28 ｜ 中标方：滨州建工集团 + + + + 查看全部 → + + + + + 企业新闻 + 集团动态 + + + 滨化集团获评“省级智能工厂” + 2026-07-01 ｜ 集团动态 + + + 2026年供应商大会圆满举办 + 2026-06-25 ｜ 合作伙伴 + + + 智慧招标平台正式上线运营 + 2026-06-01 ｜ 平台公告 + + + + 查看全部 → + + + + 免责声明 + 本平台所有招标信息均由滨化集团或其下属公司发布，信息真实有效。供应商应对投标行为负责，本平台保留对违规行为的处理权。 + 隐私政策 ｜ 服务协议 ｜ 法律声明 ｜ © 2026 滨化集团 ｜ 鲁ICP备XXXXXXXX号 + + + + 小滨 + AI 助手 + + + + + + + +``` + + +## 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） + +```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（`

`～`

`），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 | 智能帮助入口 |