# 白马家园官网 - 产品需求文档 (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日 --- *本文档将持续更新，记录项目进展和需求变更。*