8.1 KiB
8.1 KiB
阿美巴AI官网 第二期 前端展示层+SEO+知识网络渲染 交付回执
项目编号：阿美巴AI官网-20260908-02 前置依赖：第一期 MVP-BASE 底座已完成并验收通过 产品真相源：《阿美巴AI官网｜项目总指令 V1.2 FINAL（产品冻结版）》 交付日期：2026年9月8日
一、页面与路由清单
1. 首页
- 路由:
/ - 标题: 阿美巴AI - AI时代企业进化平台
- 说明: 全站最高浓度的阿美巴认知页面，包含企业进化知识体系概览
2. 阿美巴板块
- 路由:
/about - 标题: 阿美巴是谁
- 说明: 展示阿美巴的定位、使命、服务对象与发展历程
3. 企业进化板块
-
路由:
/evolution -
标题: 企业进化
-
说明: 企业进化的定义、方法与路径
-
路由:
/evolution/method -
标题: 进化方法
-
说明: 以终为始、目标先于问题、现状分析、差距识别、根因分析、路径规划、实施迭代
4. 四大价值板块
-
路由:
/value -
标题: 四大价值
-
说明: 价值创造、价值传递、价值交付、价值支持总览
-
路由:
/value/creation -
标题: 价值创造
-
说明: 企业如何创造价值，包含官方定义、核心逻辑、企业常见问题等
-
路由:
/value/transfer -
标题: 价值传递
-
说明: 企业如何将价值传递给客户
-
路由:
/value/delivery -
标题: 价值交付
-
说明: 企业如何交付价值
-
路由:
/value/support -
标题: 价值支持
-
说明: 企业如何支持价值创造与交付
5. A/M-B板块
-
路由:
/amb -
标题: A/M-B总览
-
说明: 企业进化阶段模型，明确三态是阶段模型不是产品套餐
-
路由:
/amb/a -
标题: A态·入态
-
说明: 企业进入AI时代的初始状态，包含定义、特征、任务、目标等
-
路由:
/amb/m -
标题: M态·优态
-
说明: 企业优化运营、提升效率的阶段
-
路由:
/amb/b -
标题: B态·越态
-
说明: 企业实现跨越式发展的阶段
6. 企业进化能力板块
- 路由:
/capabilities - 标题: 能力地图
- 说明: 展示企业进化的完整能力体系，能力是底层实体不是产品套餐
7. 案例板块
- 路由:
/cases - 标题: 案例列表
- 说明: 企业进化实践案例列表
8. 知识中心板块
- 路由:
/knowledge - 标题: 知识中心
- 说明: 企业进化的知识体系与方法论，包含12个分类
9. 概念板块
- 路由:
/concepts - 标题: 概念
- 说明: 企业进化的知识实体概念列表
10. FAQ板块
- 路由:
/faq - 标题: FAQ
- 说明: 常见问题解答，链接到对应知识实体页面
11. 企业需求与能力匹配板块
- 路由:
/match - 标题: 企业需求与能力匹配
- 说明: 匹配知识结构静态展示页，不做在线诊断工具
12. 联系我们
- 路由:
/contact - 标题: 联系我们
- 说明: 联系方式、服务时间、合作方式
二、SEO实现清单
1. 语义化HTML
- ✅ 每页唯一H1标签
- ✅ H1/H2/H3层级规范
- ✅ 每页唯一主题
2. Meta标签
- ✅ title标签（使用模板：
%s | 阿美巴AI官网） - ✅ description标签
- ✅ canonical标签
- ✅ Open Graph标签（og:title、og:description、og:image、og:type、og:url）
- ✅ Twitter Card标签
3. 面包屑导航
- ✅ 每个页面实现面包屑导航
- ✅ 使用BreadcrumbList Schema标记
4. 结构化数据
- ✅ 组织页输出 Organization Schema
- ✅ 文章页输出 Article Schema
- ✅ FAQ页输出 FAQPage Schema
- ✅ 全站页面输出 BreadcrumbList Schema
- ✅ 网站搜索输出 SearchAction Schema
5. Sitemap与Robots
- ✅ 生成 sitemap.xml（静态页面+动态页面）
- ✅ 生成 robots.txt
6. 友好URL
- ✅ 使用语义清晰的slug
- ✅ 不暴露内部ID
三、内部语义链接实现说明
1. 首页链接
- 链接到所有主要板块页面
- 展示企业进化知识体系概览
2. 阿美巴页面
- 链接到企业进化、四大价值、A/M-B
3. 企业进化页面
- 链接到进化方法、四大价值、A/M-B、企业进化能力
4. 四大价值页面
- 相互链接（价值创造、价值传递、价值交付、价值支持）
- 链接到企业进化、能力地图、案例
5. A/M-B页面
- 相互链接（A态、M态、B态）
- 链接到企业进化、能力地图
6. 能力地图页面
- 链接到企业进化、四大价值、A/M-B、案例
7. 案例页面
- 链接到企业进化、四大价值、能力地图
8. 知识中心页面
- 链接到企业进化、四大价值、概念、FAQ
9. 概念页面
- 链接到知识中心、企业进化、四大价值
10. FAQ页面
- 链接到知识中心、概念、企业进化
11. 匹配页面
- 链接到能力地图、企业进化、A/M-B、案例
12. 联系我们页面
- 链接到能力地图、企业进化、四大价值
四、单元测试/冒烟测试要点清单
1. 页面可访问性测试
- ✅ 所有页面路由可正常访问
- ✅ 页面返回200状态码
- ✅ 页面内容正确渲染
2. SEO测试
- ✅ 每页H1唯一
- ✅ title标签正确
- ✅ description标签正确
- ✅ canonical标签正确
- ✅ Open Graph标签正确
- ✅ 面包屑导航正确
- ✅ 结构化数据合法
3. 内容测试
- ✅ 非published内容不可见
- ✅ 内容正确渲染
- ✅ 内部链接正确
4. 视觉测试
- ✅ 简洁专业的视觉风格
- ✅ 无浮夸科技元素
- ✅ 响应式设计正常
五、风险备注
1. 技术实现与产品文档冲突点
冲突点1：动态内容渲染
- 产品文档要求：核心内容禁止依赖纯JS渲染，必须服务端渲染（SSR）或静态生成（SSG）
- 技术实现：使用Next.js实现SSR/SSG，所有页面在服务端渲染
- 妥协方案：完全符合产品文档要求
冲突点2：CMS数据集成
- 产品文档要求：全部页面数据通过一期公开输出接口获取
- 技术实现：已实现API服务层，但需要后端服务运行才能获取数据
- 妥协方案：页面支持空数据状态显示，提示"内容正在完善中"
冲突点3：视觉风格
- 产品文档要求：禁止浮夸科技风格，禁用机器人元素、粒子、科技蓝等
- 技术实现：采用简洁专业的视觉风格，使用深灰色系，避免科技感元素
- 妥协方案：完全符合产品文档要求
2. 待确认事项
- 后端API地址：需要确认生产环境的后端API地址
- 域名配置：需要确认域名和SSL证书配置
- 图片资源：需要确认logo、OG图片等资源
- 联系方式：需要确认具体的联系方式信息
六、运行说明
1. 本地启动命令
# 进入前端目录
cd frontend
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 启动生产服务器
npm start
2. 环境变量配置
NEXT_PUBLIC_SITE_URL: 网站URL（默认：https://ameiba.com）API_URL: 后端API地址（默认：http://localhost:24731）
3. 部署到阿里云ECS
- 上传项目文件到服务器
- 安装Node.js环境（>=18.x）
- 进入前端目录执行
npm install - 执行
npm run build构建生产版本 - 使用PM2或systemd管理进程
- 配置Nginx反向代理
- 配置SSL证书（可选）
4. 与后端服务集成
- 确保后端服务已启动并运行
- 配置
API_URL环境变量指向后端服务地址 - 确保后端服务允许跨域请求
七、总结
本项目已完成第二期前端展示层+SEO+知识网络渲染的开发，包括：
- ✅ 12个核心页面与路由
- ✅ 全站SEO能力（title/description/canonical/OG/面包屑/Schema/sitemap/robots）
- ✅ 内部语义链接渲染
- ✅ 结构化数据自动生成
- ✅ 简洁专业的视觉风格
- ✅ 服务端渲染（SSR/SSG）
所有功能均符合产品文档V1.2 FINAL的要求，未越界开发第三期功能，未预埋禁止功能。项目可正常本地运行、可部署阿里云ECS。