# 品居会官网需求文档

## 一、项目概述

### 1.1 项目背景
品居会官网是品居会平台的官方门户网站，用于展示平台品牌形象、产品服务、公司信息等内容，是用户了解品居会的第一窗口。

### 1.2 项目目标
- 展示品牌形象，提升品牌知名度
- 介绍产品功能和服务优势
- 引导用户下载小程序，提高转化率
- 提供公司信息和联系方式

### 1.3 技术栈
- **框架**: Next.js 16 (App Router)
- **语言**: TypeScript
- **样式**: Tailwind CSS 4
- **部署**: 静态导出 (Static Export)
- **端口**: 3001

## 二、页面结构

### 2.1 首页 (/)
**功能定位**: 平台核心展示页面，吸引用户了解和使用产品

**页面结构**:
1. **导航栏**
   - Logo + 品牌名称
   - 导航菜单：产品特色、服务优势、关于我们、联系我们
   - 登录/注册按钮

2. **Hero Section**
   - 主标题：品质住宿，温馨服务
   - 副标题：平台简介
   - CTA按钮：下载小程序、了解更多
   - 配图/插画

3. **数据统计**
   - 优质房源数量：10万+
   - 注册用户数：50万+
   - 订单量：100万+
   - 好评率：98%

4. **产品特色** (#features)
   - 智能搜索：支持目的地搜索、地图选点、多维筛选
   - 优惠多多：新人专享、限时秒杀、优惠券、会员特权
   - 安全保障：实名认证、订单保护、退款保障

5. **服务优势** (#services)
   - 7×24小时客服
   - 快速响应
   - 灵活退改
   - 品质保证

6. **CTA Section**
   - 引导下载小程序
   - 二维码展示

7. **Footer**
   - 公司信息
   - 产品服务链接
   - 关于我们链接
   - 帮助中心链接
   - 版权信息

### 2.2 关于我们 (/about)
**功能定位**: 展示公司背景、发展历程、企业文化

**页面结构**:
1. **Hero Section**
   - 页面标题：关于品居会
   - 简短介绍

2. **公司简介**
   - 公司成立时间
   - 业务范围
   - 发展目标

3. **核心价值观**
   - 用户至上
   - 创新驱动
   - 诚信共赢

4. **发展历程**
   - 2024.01：公司成立
   - 2024.06：平台上线
   - 2024.12：快速发展
   - 2026.05：持续创新

### 2.3 联系我们 (/contact)
**功能定位**: 提供多种联系方式，方便用户咨询

**页面结构**:
1. **Hero Section**
   - 页面标题：联系我们

2. **联系方式**
   - 客服热线：400-888-8888
   - 电子邮箱：service@pinjuhui.com
   - 在线客服：小程序内联系

3. **在线留言表单**
   - 姓名
   - 联系方式
   - 留言内容
   - 提交按钮

4. **公司地址**
   - 地址：中国·北京市朝阳区建国路88号SOHO现代城
   - 邮编：100022

## 三、设计规范

### 3.1 品牌色彩
- **主色调**: 蓝色到紫色渐变 (#667eea → #764ba2)
- **辅助色**: 
  - 蓝色：#3B82F6
  - 紫色：#9333EA
  - 绿色：#10B981
  - 橙色：#F59E0B
- **中性色**:
  - 黑色：#111827
  - 灰色：#6B7280
  - 浅灰：#F3F4F6
  - 白色：#FFFFFF

### 3.2 字体规范
- **标题字体**: 
  - H1: 48px-60px, 粗体
  - H2: 36px-48px, 粗体
  - H3: 24px-32px, 粗体
- **正文字体**: 16px-20px, 常规
- **辅助文字**: 14px, 常规

### 3.3 间距规范
- **页面边距**: 24px (移动端) / 48px (桌面端)
- **组件间距**: 80px-120px
- **元素间距**: 16px-32px

### 3.4 圆角规范
- **卡片**: 16px-24px
- **按钮**: 9999px (全圆角)
- **图标容器**: 12px-16px

## 四、响应式设计

### 4.1 断点设置
- **移动端**: < 768px
- **平板**: 768px - 1024px
- **桌面端**: > 1024px

### 4.2 适配策略
- 移动端：单列布局，导航栏折叠
- 平板：双列布局，部分内容展开
- 桌面端：多列布局，完整展示

## 五、SEO优化

### 5.1 页面元信息
- **首页**:
  - Title: 品居会 - 品质住宿，温馨服务
  - Description: 集酒店、民宿、短租、青旅预订于一体的综合性平台，为您提供舒适便捷的住宿体验
  - Keywords: 酒店预订,民宿预订,短租,青旅,住宿

- **关于我们**:
  - Title: 关于我们 - 品居会
  - Description: 品居会是一家专注于酒店民宿短租预订服务的互联网平台

- **联系我们**:
  - Title: 联系我们 - 品居会
  - Description: 品居会客服热线400-888-8888，7×24小时为您服务

### 5.2 结构化数据
- 添加 Organization Schema
- 添加 WebSite Schema
- 添加 BreadcrumbList Schema

## 六、性能优化

### 6.1 静态导出
- 使用 Next.js Static Export
- 所有页面预渲染为静态HTML
- 可部署到任何静态托管服务

### 6.2 图片优化
- 使用 WebP 格式
- 懒加载非首屏图片
- 响应式图片

### 6.3 代码优化
- CSS按需加载
- JavaScript代码分割
- 移除未使用的代码

## 七、部署方案

### 7.1 构建命令
```bash
pnpm build
```

### 7.2 输出目录
```
out/
```

### 7.3 部署平台
- Vercel (推荐)
- Netlify
- 阿里云OSS
- 腾讯云COS
- Nginx静态服务器

## 八、开发规范

### 8.1 目录结构
```
apps/official-website/
├── app/                    # 页面目录
│   ├── page.tsx           # 首页
│   ├── about/             # 关于我们
│   ├── contact/           # 联系我们
│   ├── layout.tsx         # 根布局
│   └── globals.css        # 全局样式
├── components/            # 组件目录
├── public/                # 静态资源
├── next.config.ts         # Next.js配置
├── tailwind.config.ts     # Tailwind配置
└── package.json           # 依赖配置
```

### 8.2 命名规范
- 组件文件：PascalCase (如 Header.tsx)
- 工具函数：camelCase (如 formatDate.ts)
- 样式文件：kebab-case (如 header.module.css)

### 8.3 代码规范
- 使用 TypeScript 严格模式
- 使用 ESLint 进行代码检查
- 组件使用函数式组件
- 优先使用 Tailwind CSS

## 九、后续扩展

### 9.1 功能扩展
- [ ] 博客/资讯模块
- [ ] 帮助中心/FAQ
- [ ] 商家入驻申请
- [ ] 多语言支持
- [ ] 暗黑模式

### 9.2 内容扩展
- [ ] 用户案例
- [ ] 合作伙伴
- [ ] 媒体报道
- [ ] 招聘信息

## 十、维护计划

### 10.1 内容更新
- 每月更新数据统计
- 每季度更新发展历程
- 及时更新联系方式

### 10.2 技术维护
- 定期更新依赖包
- 监控网站性能
- 修复已知问题

---

**文档版本**: v1.0  
**创建日期**: 2026-05-13  
**维护团队**: 品居会开发团队
