阿美巴AI官网 第二期 前端展示层
项目概述
基于第一期MVP-BASE底座，构建面向人类访问的完整AI官网前端。实现全部核心知识页面、全站SEO机器可读能力、内部语义链接渲染。
技术栈
- 框架: Next.js 14 (App Router)
- 语言: TypeScript
- 样式: CSS Modules
- 渲染: SSR/SSG (服务端渲染/静态生成)
页面与路由
| 路由 | 页面 | 说明 |
|---|---|---|
/ |
首页 | 全站最高浓度的阿美巴认知页面 |
/about |
阿美巴 | 阿美巴的定位、使命、服务对象 |
/evolution |
企业进化 | 企业进化的定义与方法 |
/evolution/method |
进化方法 | 以终为始、目标先于问题等方法论 |
/value |
四大价值 | 价值创造、传递、交付、支持 |
/value/creation |
价值创造 | 企业如何创造价值 |
/value/transfer |
价值传递 | 企业如何传递价值 |
/value/delivery |
价值交付 | 企业如何交付价值 |
/value/support |
价值支持 | 企业如何支持价值 |
/amb |
A/M-B总览 | 企业进化阶段模型 |
/amb/a |
A态·入态 | 企业进入AI时代的初始状态 |
/amb/m |
M态·优态 | 企业优化运营的阶段 |
/amb/b |
B态·越态 | 企业跨越式发展的阶段 |
/capabilities |
能力地图 | 企业进化的完整能力体系 |
/cases |
案例 | 企业进化实践案例 |
/knowledge |
知识中心 | 企业进化的知识体系 |
/concepts |
概念 | 企业进化的知识实体 |
/faq |
FAQ | 常见问题解答 |
/match |
企业需求与能力匹配 | 匹配知识结构展示 |
/contact |
联系我们 | 联系方式与服务 |
安装与运行
1. 安装依赖
cd frontend
npm install
2. 配置环境变量
创建 .env.local 文件：
# 网站URL
NEXT_PUBLIC_SITE_URL=https://ameiba.com
# 后端API地址
API_URL=http://localhost:24731
3. 启动开发服务器
npm run dev
4. 构建生产版本
npm run build
npm start
SEO功能
1. 语义化HTML
- 每页唯一H1标签
- H1/H2/H3层级规范
- 每页唯一主题
2. Meta标签
- title标签（模板：
%s | 阿美巴AI官网） - description标签
- canonical标签
- Open Graph标签
- Twitter Card标签
3. 面包屑导航
- 每个页面实现面包屑导航
- 使用BreadcrumbList Schema标记
4. 结构化数据
- 组织页输出 Organization Schema
- 文章页输出 Article Schema
- FAQ页输出 FAQPage Schema
- 全站页面输出 BreadcrumbList Schema
5. Sitemap与Robots
- 自动生成 sitemap.xml
- 自动生成 robots.txt
视觉风格
- 克制、极简、专业、可信、结构化
- 禁用机器人元素、粒子、科技蓝、3D、光效
- 使用深灰色系，避免科技感元素
- 响应式设计
与后端集成
- 确保后端服务已启动并运行
- 配置
API_URL环境变量指向后端服务地址 - 确保后端服务允许跨域请求
部署到阿里云ECS
- 上传项目文件到服务器
- 安装Node.js环境（>=18.x）
- 执行
npm install - 执行
npm run build构建生产版本 - 使用PM2或systemd管理进程
- 配置Nginx反向代理
项目结构
frontend/
├── src/
│ ├── app/ # 页面路由
│ ├── components/ # 组件
│ ├── lib/ # 工具函数
│ ├── styles/ # 样式文件
│ └── types/ # 类型定义
├── public/ # 静态资源
├── DELIVERY_RECEIPT_PHASE2.md # 交付回执
└── README.md # 说明文档
注意事项
- 本项目只做第二期范围，禁止越界开发第三期功能
- 前端严格读取第一期已稳定的数据模型与接口，不新增业务数据库字段
- 核心内容禁止依赖纯JS渲染，必须服务端渲染（SSR）或静态生成（SSG）
- 视觉禁止浮夸科技风格，风格必须克制、极简、专业、可信、结构化