xiaoquan/rent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
test
rent/docs/requirements/官网需求文档.md
T
xiaoquan 6eed65baf2 feat: 迭代
2026-05-13 17:59:30 +08:00

6.3 KiB
Raw Permalink Blame History

品居会官网需求文档

一、项目概述

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. 联系方式

  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 构建命令

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
维护团队: 品居会开发团队

Reference in New Issue View Git Blame Copy Permalink