490 lines
13 KiB
Markdown
490 lines
13 KiB
Markdown
# 白马家园官网 - 产品需求文档 (PRD)
|
||
|
||
## 📋 文档信息
|
||
|
||
- **项目名称**：白马家园官网
|
||
- **版本**：v3.3
|
||
- **更新日期**：2025年1月16日
|
||
- **状态**：开发完成，准备部署
|
||
|
||
---
|
||
|
||
## 🎯 项目概述
|
||
|
||
### 1.1 项目背景
|
||
|
||
白马家园是一家专注于数字经济和新质生产力产业集群的科技公司，致力于通过军工技术和人工智能赋能小微企业和实体商业。公司需要建设一个现代化、响应式的官方网站，用于：
|
||
|
||
- 品牌形象展示（中英文双语）
|
||
- 产品矩阵介绍
|
||
- 客户商机获取
|
||
- 行业资讯传播
|
||
- 合作加盟引流
|
||
|
||
### 1.2 项目目标
|
||
|
||
1. **品牌升级**：打造数字化、科技感的品牌形象（中英文双语）
|
||
2. **产品展示**：清晰展示四大核心产品线
|
||
3. **商机转化**：通过客服企业微信二维码引导潜在客户直接联系
|
||
4. **内容营销**：自动抓取行业资讯，保持网站活跃度
|
||
5. **用户体验**：支持手机、平板、桌面全设备响应式访问
|
||
6. **国际化**：支持中英文切换，服务全球用户
|
||
|
||
### 1.3 目标用户
|
||
|
||
- **潜在合作伙伴**：实体商家、创业者、投资人
|
||
- **C端消费者**：小微企业主、门店经营者
|
||
- **媒体和行业人士**：记者、分析师、行业专家
|
||
- **国际用户**：海外华人和全球商业伙伴
|
||
|
||
---
|
||
|
||
## 🏗️ 系统架构
|
||
|
||
### 2.1 技术栈
|
||
|
||
```
|
||
前端：Next.js 16 + React 19 + TypeScript
|
||
UI框架：Tailwind CSS 4 + Radix UI
|
||
动画：Framer Motion
|
||
状态管理：React Hooks
|
||
后端：Next.js API Routes
|
||
部署：Vercel
|
||
国际化：Next.js i18n
|
||
```
|
||
|
||
### 2.2 目录结构
|
||
|
||
```
|
||
baima-home/
|
||
├── app/
|
||
│ ├── page.tsx # 首页（中文）
|
||
│ ├── layout.tsx # 全局布局
|
||
│ ├── globals.css # 全局样式
|
||
│ ├── en/
|
||
│ │ └── page.tsx # 首页（英文）
|
||
│ ├── about/ # 关于我们
|
||
│ ├── products/ # 产品矩阵
|
||
│ ├── news/ # 新闻动态
|
||
│ ├── contact/ # 联系加盟
|
||
│ ├── admin/ # 后台管理
|
||
│ └── api/ # API接口
|
||
│ ├── news/ # 新闻API（静态数据）
|
||
│ └── auto-fetch/ # 自动抓取API（静态数据）
|
||
├── components/
|
||
│ ├── home/ # 首页组件
|
||
│ │ ├── Hero.tsx # 首屏区域
|
||
│ │ ├── ProductPreview.tsx # 产品矩阵
|
||
│ │ ├── MissionVision.tsx # 使命愿景价值观
|
||
│ │ ├── HonorSection.tsx # 资质荣誉
|
||
│ │ └── Infrastructure.tsx # 生态基础设施
|
||
│ ├── layout/ # 布局组件
|
||
│ │ ├── Navbar.tsx # 导航栏
|
||
│ │ └── Footer.tsx # 页脚
|
||
│ └── ui/ # 基础UI组件
|
||
├── lib/
|
||
│ └── utils.ts # 工具函数
|
||
└── public/ # 静态资源
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 页面规划
|
||
|
||
### 3.1 前台页面
|
||
|
||
#### 首页 (/ 和 /en)
|
||
**设计风格**：单页全景布局，沉浸式体验
|
||
|
||
**功能模块**：
|
||
1. **Hero首屏**
|
||
- 品牌Logo（大尺寸展示）
|
||
- 核心标签：军工技术、AI赋能、小微企业
|
||
- 价值主张：AI数智增长引擎
|
||
- 三大核心价值：支付即锁粉、让利即引流、跨界即分润
|
||
- CTA按钮：立即加入白马联盟 / Join Baima Alliance
|
||
- 背景：深蓝色科技感渐变 + 网格效果
|
||
|
||
2. **产品矩阵**
|
||
- 四大核心板块卡片布局
|
||
- 金融科技支撑（白马智付）
|
||
- 私域运营工具（AI拓客宝）【原名"爆客宝AI"】
|
||
- 异业联盟系统（商家联盟）
|
||
- 生态基础设施（智能硬件）
|
||
- 每张卡片包含：标题、描述、功能特性列表
|
||
- 【已移除】"深入了解"链接
|
||
|
||
3. **使命、愿景、价值观**【新增模块】
|
||
- 使命：军工技术赋能实体经济，人工智能驱动万商互联
|
||
- 愿景：天下白马是一家，一起赚钱一起花
|
||
- 价值观：共创、共享、共富
|
||
- 三大核心板块，渐变色背景，悬停动画效果
|
||
- 支持中英文双语显示
|
||
|
||
4. **权威认证与技术实力**
|
||
- 资质证书展示（ISO认证、高新技术企业等）
|
||
- 专利技术展示（专利数量、软著）
|
||
- 荣誉奖项展示（行业认可）
|
||
- 响应式网格布局
|
||
|
||
5. **生态基础设施**
|
||
- 会员系统
|
||
- 供应链资源
|
||
- 数字资产体系
|
||
- 【已移除】智能监控（移至智能设备）
|
||
- 【已移除】"为上市合规打造的底层架构"描述文字
|
||
|
||
6. **页脚**
|
||
- 客服企业微信二维码（替代电话和邮箱）
|
||
- 产品中心链接
|
||
- 解决方案链接
|
||
- 公司地址：天津市武清区京津产业新城海达商务大厦
|
||
- 公司信息：天津白马晶选科技有限公司 | 天津白马家园健康科技有限公司
|
||
- 版权信息
|
||
- 【已移除】隐私政策、服务条款链接
|
||
|
||
#### 关于我们 (/about)
|
||
- 公司介绍
|
||
- 团队介绍
|
||
- 发展历程
|
||
- 资质认证
|
||
|
||
#### 产品矩阵 (/products)
|
||
- 产品详情页
|
||
- 产品对比
|
||
- 定价方案
|
||
- 客户案例
|
||
|
||
#### 新闻动态 (/news)
|
||
- 新闻列表（静态数据展示）
|
||
- 新闻详情
|
||
- 分类筛选
|
||
- 搜索功能
|
||
|
||
#### 联系加盟 (/contact)
|
||
- 公司信息
|
||
- 地图定位
|
||
- 客服企业微信二维码（引导用户扫码联系）
|
||
|
||
### 3.2 后台管理 (/admin)
|
||
|
||
#### 登录验证
|
||
- 密码保护：固定密码 `admin123`
|
||
- 简洁的登录界面
|
||
|
||
#### 新闻动态管理
|
||
- 发布新闻（静态数据示例）
|
||
- 编辑新闻
|
||
- 删除新闻
|
||
- 分类管理
|
||
- 状态跟踪
|
||
|
||
#### 自动抓取管理
|
||
- 手动触发抓取（静态数据示例）
|
||
- 待审核列表
|
||
- 审核操作（通过/拒绝）
|
||
- 抓取历史记录
|
||
- 配置管理
|
||
|
||
### 3.3 语言切换
|
||
|
||
- 支持中英文双语
|
||
- 导航栏语言切换按钮
|
||
- 中文首页：`/`
|
||
- 英文首页：`/en`
|
||
- 页面内容自动切换
|
||
- 移动端支持滑出式菜单切换
|
||
|
||
---
|
||
|
||
## 📡 API 接口
|
||
|
||
### 4.1 新闻接口（静态数据）
|
||
|
||
**GET** `/api/news`
|
||
|
||
返回静态新闻数据示例，无需数据库支持。
|
||
|
||
### 4.2 自动抓取接口（静态数据）
|
||
|
||
**GET** `/api/auto-fetch`
|
||
|
||
返回静态抓取数据示例，无需数据库支持。
|
||
|
||
---
|
||
|
||
## 🤖 自动抓取系统
|
||
|
||
### 5.1 抓取策略（静态示例）
|
||
|
||
- **主要来源**：搜狗微信搜索（示例）
|
||
- **目标账号/关键词**：白马精选、白马家园
|
||
- **抓取频率**：每6小时自动抓取
|
||
- **手动触发**：管理员可随时手动抓取
|
||
|
||
### 5.2 智能过滤规则
|
||
|
||
#### 必须包含的关键词
|
||
- `白马精选`（必须）
|
||
- `数字经济`、`AI`、`人工智能`、`金融科技`、`小微企业`（至少一个）
|
||
|
||
#### 排除的关键词（房地产相关）
|
||
```
|
||
房地产、楼盘、房价、房产、住宅、商业地产
|
||
购房、租房、地产投资、物业、开盘、预售证
|
||
样板间、户型图、买房、卖房、出租、二手房
|
||
白马家园、白马花园、白马苑、白马小区（小区名称）
|
||
万科白马家园、恒大白马家园、碧桂园白马家园
|
||
别墅、豪宅、精装房、毛坯房
|
||
```
|
||
|
||
#### 分类规则
|
||
- `产品发布`：包含发布、上线、新品等关键词
|
||
- `荣誉获奖`：包含获奖、认证、荣誉等关键词
|
||
- `行业洞察`：包含趋势、分析、洞察等关键词
|
||
- `媒体报道`：包含报道、媒体等关键词
|
||
- 默认：`公司新闻`
|
||
|
||
---
|
||
|
||
## 🎨 设计规范
|
||
|
||
### 6.1 视觉风格
|
||
|
||
#### 配色方案
|
||
- **主色调**：橙色 `#FF6600`
|
||
- 用途：CTA按钮、强调文字、图标、链接
|
||
- **辅助色**：深蓝色 `#0A1931`
|
||
- 用途：背景、导航栏、文字
|
||
- **点缀色**：`#185ADB`（浅蓝）
|
||
- **背景色**：`#050A14`（深黑）
|
||
|
||
#### 字体规范
|
||
- **标题**：加粗加黑，层级分明
|
||
- **正文字体**：17px基础字号
|
||
- **英文字体**：Geist Sans
|
||
- **中文字体**：系统默认无衬线字体
|
||
|
||
### 6.2 响应式断点
|
||
|
||
```
|
||
移动端：< 640px
|
||
平板端：640px - 1024px
|
||
桌面端：> 1024px
|
||
```
|
||
|
||
### 6.3 组件规范
|
||
|
||
- **按钮**：圆角矩形，阴影效果，悬停动画
|
||
- **卡片**：圆角边框，阴影，悬停效果
|
||
- **导航栏**：固定定位，滚动变色，语言切换
|
||
- **页脚**：多列布局，响应式堆叠，客服二维码
|
||
- **模块间距**：统一规范，保持视觉平衡
|
||
|
||
### 6.4 页面布局优化
|
||
|
||
#### Logo 尺寸
|
||
- 导航栏：56px（h-14）
|
||
- 首页Hero：64px - 112px（响应式）
|
||
- 页脚：56px（h-14）
|
||
|
||
#### 使命愿景价值观模块
|
||
- 深蓝渐变背景
|
||
- 三栏卡片布局
|
||
- 彩色图标（橙/蓝/绿渐变）
|
||
- 悬停动画效果
|
||
- 中英文双语内容
|
||
|
||
#### 新闻卡片
|
||
- 卡片可点击，支持跳转详情页
|
||
- 分类标签+日期展示
|
||
- 摘要截断（最多3行）
|
||
- 阅读更多链接
|
||
|
||
---
|
||
|
||
## 🔧 功能实现
|
||
|
||
### 7.1 已完成功能
|
||
|
||
✅ **前台功能**
|
||
- 首页单页全景布局（中英文双语）
|
||
- 使命愿景价值观模块
|
||
- 响应式设计（全设备适配）
|
||
- 产品矩阵展示
|
||
- 资质荣誉展示
|
||
- 新闻动态模块（静态数据）
|
||
- 合作加盟表单
|
||
- 页脚优化（企微二维码）
|
||
|
||
✅ **技术功能**
|
||
- SEO优化
|
||
- 性能优化
|
||
- 错误处理
|
||
- 加载状态
|
||
- 中英文国际化
|
||
|
||
### 7.2 待实现功能
|
||
|
||
⏳ **内容功能**
|
||
- 新闻详情页完善
|
||
- 产品详情页
|
||
- 关于我们页面完善
|
||
|
||
⏳ **部署功能**
|
||
- Vercel部署
|
||
- 域名配置
|
||
- SSL证书
|
||
- 监控告警
|
||
|
||
---
|
||
|
||
## 🧪 测试用例
|
||
|
||
### 8.1 前台测试
|
||
|
||
#### 首页测试
|
||
- [x] Hero区域加载正常
|
||
- [x] 产品卡片显示完整
|
||
- [x] 使命愿景价值观模块显示
|
||
- [x] 资质荣誉网格布局
|
||
- [x] 新闻动态展示（静态数据）
|
||
- [x] 移动端响应式布局
|
||
- [x] 页面滚动动画效果
|
||
- [x] 中英文切换功能
|
||
|
||
---
|
||
|
||
## 🚀 部署计划
|
||
|
||
### 9.1 部署环境
|
||
|
||
- **开发环境**：本地 `localhost:3000`
|
||
- **测试环境**：Vercel Preview
|
||
- **生产环境**：Vercel Production
|
||
|
||
### 9.2 部署步骤
|
||
|
||
1. **代码推送**
|
||
```
|
||
git push origin main
|
||
```
|
||
|
||
2. **Vercel导入**
|
||
- 访问 https://vercel.com/new
|
||
- 导入 GitHub 仓库 `wygogogo19/baima-home`
|
||
|
||
3. **自动部署**
|
||
- Vercel自动检测并部署
|
||
- 预览环境生成
|
||
|
||
4. **生产发布**
|
||
- Vercel生产环境部署
|
||
- 域名绑定
|
||
- SSL证书配置
|
||
|
||
### 9.3 监控和维护
|
||
|
||
- **错误监控**：Vercel Error Tracking
|
||
- **性能监控**：Vercel Analytics
|
||
- **日志查看**：Vercel Logs
|
||
- **回滚机制**：Vercel Deployments
|
||
|
||
---
|
||
|
||
## 📊 项目进度
|
||
|
||
### 9.1 当前进度
|
||
|
||
- ✅ **需求分析**：完成
|
||
- ✅ **UI设计**：完成
|
||
- ✅ **前端开发**：完成
|
||
- ✅ **后端开发**：完成
|
||
- ✅ **国际化（中英文）**：完成
|
||
- ✅ **测试调试**：完成
|
||
- ⏳ **部署上线**：进行中
|
||
|
||
### 9.2 下一步计划
|
||
|
||
1. **短期目标**
|
||
- [x] Vercel部署
|
||
- [x] 生产环境测试
|
||
|
||
2. **中期目标（1周内）**
|
||
- [ ] 完善前台页面
|
||
- [ ] 新闻详情页开发
|
||
- [ ] 绑定自定义域名
|
||
|
||
---
|
||
|
||
## 📝 变更日志
|
||
|
||
### v3.3 (2025-01-16) - 当前版本
|
||
- 🔄 完全移除数据库依赖
|
||
- 删除 Prisma ORM 和所有数据库相关代码
|
||
- 所有 API 接口改为静态数据返回
|
||
- 删除 prisma/ 目录、lib/prisma.ts
|
||
- 从 package.json 移除 Prisma 依赖
|
||
- 不再需要 DATABASE_URL 环境变量
|
||
- 🔄 更新技术架构文档，移除数据库相关内容
|
||
- ✅ 简化部署流程，无需数据库配置
|
||
|
||
### v3.2 (2025-01-16)
|
||
- 🔄 更新资质认证描述
|
||
- "支付业务许可证" → "收单外包服务机构备案"
|
||
- 🔄 产品矩阵多项优化
|
||
- 支付能力："主扫被扫全支持" → "主扫、被扫模式全支持"
|
||
- AI数字人："7x24小时直播 / 数字员工导购" → "AI直播/AI导购/AI客服/AI私域"
|
||
- 企微私域（原消费券流转）："供应商进货 / 转赠他人使用" → "AI数字员工自动实现：社群运营/维护/导购/客服"
|
||
- 锁定客户："一次锁定，终身受益" → "扫码即锁定推荐关系，终身享受消费分佣"
|
||
- 数字资产 → 数字资产体系
|
||
- RWA资产描述："积分抵用券互转" → "积分、抵用券、金币等"
|
||
- 智能监控巡店移至智能设备
|
||
- 🔄 页面结构调整
|
||
- 删除首页"最新动态"模块
|
||
- 删除产品卡片"深入了解"链接
|
||
- ✅ 优化产品展示逻辑，提升用户体验
|
||
|
||
### v3.1 (2025-01-16)
|
||
- 🔄 删除"在线咨询留言"功能模块（Path A - 完全删除）
|
||
- 🗑️ 删除 Contact 数据模型及相关 API 路由
|
||
- 🗑️ 删除后台"客户留言管理"功能
|
||
- 🗑️ 删除前端"在线表单"提交功能
|
||
- ✅ 全站统一使用客服企业微信二维码作为对外联系入口
|
||
|
||
### v3.0 (2025-01-15)
|
||
- ✅ 新增使命愿景价值观模块
|
||
- ✅ 新增英文版首页 (/en)
|
||
- ✅ 新增中英文切换功能
|
||
- ✅ 新增自动抓取系统（搜狗微信）
|
||
- ✅ 新增智能过滤（排除房地产内容）
|
||
- ✅ 新闻卡片支持点击跳转详情页
|
||
- ✅ 页脚改为客服企业微信号码
|
||
- ✅ 移除"为上市合规打造的底层架构"
|
||
- ✅ 产品名称更新：爆客宝AI → AI拓客宝
|
||
- ✅ 移除页脚隐私政策、服务条款
|
||
- ✅ Logo尺寸优化放大
|
||
- ✅ 响应式设计优化
|
||
|
||
---
|
||
|
||
## 👥 团队
|
||
|
||
- **产品经理**：[待补充]
|
||
- **UI设计**：[待补充]
|
||
- **前端开发**：已完成
|
||
- **后端开发**：已完成
|
||
- **测试**：[待补充]
|
||
|
||
---
|
||
|
||
## 📞 联系方式
|
||
|
||
- **项目负责人**：[待补充]
|
||
- **技术对接**：[待补充]
|
||
- **更新日期**：2025年1月16日
|
||
|
||
---
|
||
|
||
*本文档将持续更新，记录项目进展和需求变更。*
|