Hotel-Web 项目开发计划

文档版本：1.0
创建时间：2026-03-16
状态：规划中

一、项目概述

1.1 项目定位

Hotel-Web 是酒店垂类 AI 内容智能体的前端应用，为酒店运营人员提供一站式营销视频生成服务。

核心价值：

🎯 零门槛：无需 AI 和视频制作经验
⚡ 超快速：60 秒内生成专业视频
🏨 懂酒店：深度适配酒店行业场景
📊 可量化：营销效果数据追踪

1.2 技术定位

项目类型：独立前端应用
技术栈：Vue 3.4+ + Vite 5.x + Element Plus
部署方式：独立部署，共享后端服务
代码管理：Monorepo（纳入 stooland 统一仓库）

1.3 与原有系统关系

┌─────────────────────────────────────────────────┐
│              stooland (Monorepo)                │
├─────────────────────────────────────────────────┤
│                                                 │
│  ┌──────────────┐      ┌──────────────────┐   │
│  │  storyboard  │      │   hotel-web      │   │
│  │    -web      │      │   (新建) ⭐      │   │
│  │              │      │                  │   │
│  │  通用工具    │      │  垂类智能体      │   │
│  │  专业创作者  │      │  酒店运营人员    │   │
│  └──────────────┘      └──────────────────┘   │
│         │                        │              │
│         └────────┬───────────────┘              │
│                  │                              │
│         ┌────────▼────────┐                     │
│         │      api/       │                     │
│         │   (共享后端)    │                     │
│         └────────┬────────┘                     │
│                  │                              │
│    ┌─────────────┼─────────────┐                │
│    │             │             │                │
│ ┌──▼──┐    ┌────▼─────┐  ┌───▼────┐          │
│ │py-  │    │  social  │  │  muse  │          │
│ │bridge│   │publisher │  │ engine │          │
│ └─────┘    └──────────┘  └────────┘          │
│                                                 │
└─────────────────────────────────────────────────┘

二、项目初始化

2.1 创建项目

bash

# 1. 进入项目根目录
cd /Users/mzy/docker/dnmp/www/stooland

# 2. 创建 hotel-web 目录
mkdir -p hotel-web
cd hotel-web

# 3. 初始化 Vue 3 + Vite 项目
npm create vite@latest . -- --template vue

# 4. 安装核心依赖
npm install

# 5. 安装 Element Plus
npm install element-plus

# 6. 安装其他依赖
npm install axios pinia vue-router @element-plus/icons-vue
npm install -D sass unplugin-auto-import unplugin-vue-components

2.2 项目结构

hotel-web/
├── public/
│   └── logo.png
├── src/
│   ├── assets/              # 静态资源
│   │   ├── images/
│   │   └── icons/
│   ├── components/          # 组件库
│   │   ├── hotel/           # 酒店特定组件
│   │   │   ├── HotelSelector.vue
│   │   │   ├── RoomTypePicker.vue
│   │   │   ├── FacilityTags.vue
│   │   │   ├── PromotionConfig.vue
│   │   │   └── HotelCard.vue
│   │   └── shared/          # 通用组件（复用）
│   │       ├── VideoPlayer.vue
│   │       ├── VoiceSelector.vue
│   │       ├── PublishDialog.vue
│   │       └── LoadingSpinner.vue
│   ├── views/               # 页面视图
│   │   ├── dashboard/       # 数据看板
│   │   │   └── Index.vue
│   │   ├── hotel-selector/  # 酒店选择
│   │   │   └── Index.vue
│   │   ├── content-generator/  # 内容生成
│   │   │   └── Index.vue
│   │   ├── result-preview/  # 结果预览
│   │   │   └── Index.vue
│   │   └── publish-center/  # 发布中心
│   │       └── Index.vue
│   ├── router/              # 路由配置
│   │   └── index.js
│   ├── stores/              # 状态管理
│   │   ├── hotel-store.js
│   │   ├── content-store.js
│   │   ├── user-store.js
│   │   └── index.js
│   ├── services/            # 服务层
│   │   ├── api/             # API 调用
│   │   │   ├── hotel-api.js
│   │   │   ├── content-api.js
│   │   │   ├── publish-api.js
│   │   │   └── request.js
│   │   └── utils/           # 工具函数
│   │       ├── formatters.js
│   │       └── validators.js
│   ├── styles/              # 样式系统
│   │   ├── variables.scss   # SCSS 变量
│   │   ├── mixins.scss      # SCSS 混入
│   │   ├── hotel-theme.scss # 酒店主题
│   │   └── index.scss       # 入口样式
│   ├── utils/               # 通用工具
│   │   ├── storage.js
│   │   └── auth.js
│   ├── App.vue              # 根组件
│   └── main.js              # 入口文件
├── .env                     # 环境变量
├── .env.development         # 开发环境
├── .env.production          # 生产环境
├── index.html               # HTML 模板
├── package.json             # 项目配置
├── vite.config.js           # Vite 配置
├── jsconfig.json            # JS 配置
└── README.md                # 项目说明

2.3 核心配置文件

vite.config.js

javascript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 5174, // 与原有系统错开端口
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
})

src/main.js

javascript

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from './router'
import App from './App.vue'
import './styles/index.scss'

const app = createApp(App)
const pinia = createPinia()

// 注册 Element Plus 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(pinia)
app.use(router)
app.use(ElementPlus, {
  locale: zhCn
})

app.mount('#app')

三、核心功能开发

3.1 模块划分

模块 1：酒店选择器（Hotel Selector）

功能：选择或搜索目标酒店组件：

HotelSelector.vue：酒店搜索与选择
HotelCard.vue：酒店信息卡片
FacilityTags.vue：设施标签展示

API：

GET /api/hotel/list：获取酒店列表
GET /api/hotel/{id}：获取酒店详情
GET /api/hotel/{id}/rooms：获取房型列表
GET /api/hotel/{id}/facilities：获取设施列表

模块 2：内容生成器（Content Generator）

功能：配置生成参数并触发 AI 生成组件：

ContentTypePicker.vue：内容类型选择
StyleConfigPanel.vue：风格配置面板
PromotionConfig.vue：促销信息配置
GenerateButton.vue：生成按钮

API：

POST /api/hotel/content/generate：触发内容生成
GET /api/hotel/content/templates：获取模板列表
GET /api/hotel/content/status/{jobId}：查询生成状态

模块 3：结果预览（Result Preview）

功能：预览生成结果并支持下载组件：

VideoPreview.vue：视频预览播放器
DownloadOptions.vue：下载选项
RegenerateButton.vue：重新生成按钮

API：

GET /api/hotel/content/{id}：获取内容详情
GET /api/hotel/content/{id}/download：下载视频

模块 4：发布中心（Publish Center）

功能：一键发布到社交媒体组件：

PlatformSelector.vue：平台选择
PublishConfig.vue：发布配置
SchedulePicker.vue：定时发布选择

API：

POST /api/hotel/content/{id}/publish：发布内容
GET /api/hotel/publish/history：获取发布历史

模块 5：数据看板（Dashboard）

功能：展示使用数据和营销效果组件：

StatsOverview.vue：数据概览
ContentChart.vue：内容趋势图
PerformanceTable.vue：效果排行

API：

GET /api/hotel/stats/overview：获取概览数据
GET /api/hotel/stats/trend：获取趋势数据
GET /api/hotel/stats/performance：获取效果数据

四、UI/UX 设计规范

4.1 设计风格

关键词：专业、简洁、高效、商业化

设计原则：

减少思考：默认选项最优，减少用户决策
快速反馈：每个操作都有明确反馈
容错设计：支持撤销、重做、重新生成
渐进式：从简单到复杂，按需展示选项

4.2 色彩系统

scss

// 主色调（酒店行业专业感）
$primary-color: #1a73e8;  // 专业蓝
$success-color: #34a853;  // 成功绿
$warning-color: #fbbc04;  // 警示黄
$danger-color: #ea4335;   // 错误红

// 中性色
$text-primary: #202124;
$text-secondary: #5f6368;
$text-disabled: #9aa0a6;
$border-color: #dadce0;
$background: #f8f9fa;

// 酒店行业特色色
$luxury-gold: #c9a962;    // 奢华金（高端酒店）
$warm-beige: #f5f1e8;     // 温馨米色（民宿）
$business-blue: #2c5282;  // 商务蓝（商务酒店）

4.3 页面布局

首页（Dashboard）

┌────────────────────────────────────────────┐
│  Logo    酒店选择    内容生成    发布中心   │
├────────────────────────────────────────────┤
│                                            │
│  ┌──────────────────────────────────────┐ │
│  │  欢迎回来，XX 酒店                   │ │
│  │  快速入口：[生成宣传片] [生成房型]   │ │
│  └──────────────────────────────────────┘ │
│                                            │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐ │
│  │ 本周生成 │  │ 已发布   │  │ 总播放量 │ │
│  │   24 个   │  │  18 个    │  │  12.5 万  │ │
│  └──────────┘  └──────────┘  └──────────┘ │
│                                            │
│  ┌──────────────────────────────────────┐ │
│  │  最近生成的内容                     │ │
│  │  ┌────┐ ┌────┐ ┌────┐ ┌────┐      │ │
│  │  │视频│ │视频│ │视频│ │视频│      │ │
│  │  │封面│ │封面│ │封面│ │封面│      │ │
│  │  └────┘ └────┘ └────┘ └────┘      │ │
│  └──────────────────────────────────────┘ │
│                                            │
└────────────────────────────────────────────┘

内容生成页

┌────────────────────────────────────────────┐
│  < 返回                                    │
├────────────────────────────────────────────┤
│                                            │
│  步骤 1: 选择内容类型                      │
│  ┌────────┐ ┌────────┐ ┌────────┐        │
│  │酒店宣传│ │房型展示│ │设施介绍│        │
│  │  视频  │ │  视频  │ │  视频  │        │
│  └────────┘ └────────┘ └────────┘        │
│                                            │
│  步骤 2: 选择酒店/房型                     │
│  ┌──────────────────────────────────────┐ │
│  │ 酒店：XX 国际大酒店 [更换]           │ │
│  │ 房型：豪华大床房、行政套房          │ │
│  └──────────────────────────────────────┘ │
│                                            │
│  步骤 3: 配置风格（可选）                  │
│  ┌──────────────────────────────────────┐ │
│  │ 风格：[高端大气] [温馨舒适] [商务]  │ │
│  │ 时长：[15 秒] [30 秒] [60 秒]        │ │
│  │ 配音：[女声] [男声] [无配音]        │ │
│  └──────────────────────────────────────┘ │
│                                            │
│  ┌──────────────────────────────────────┐ │
│  │           [开始生成]                  │ │
│  └──────────────────────────────────────┘ │
│                                            │
└────────────────────────────────────────────┘

五、开发里程碑

阶段一：MVP（4 周）

Week 1：项目初始化

[ ] 搭建项目框架
[ ] 配置开发环境
[ ] 实现基础路由
[ ] 完成 UI 设计规范

Week 2：酒店选择器

[ ] 开发酒店列表页
[ ] 实现酒店搜索功能
[ ] 开发房型选择组件
[ ] 对接酒店 API

Week 3：内容生成器

[ ] 开发内容类型选择
[ ] 实现生成配置面板
[ ] 对接 AIGC 生成接口
[ ] 实现进度追踪

Week 4：结果预览与发布

[ ] 开发视频预览组件
[ ] 实现下载功能
[ ] 对接发布接口
[ ] 端到端测试

MVP 交付物：可运行的最小可行产品

阶段二：功能增强（4 周）

Week 5-6：批量生成与数字人

[ ] 批量生成功能
[ ] 数字人讲解集成
[ ] 模板市场开发

Week 7-8：数据看板与优化

[ ] 数据看板开发
[ ] 性能优化（< 60 秒）
[ ] 用户体验优化

阶段二交付物：功能完善的生产版本

阶段三：生态建设（6 周）

Week 9-11：开放平台

[ ] API 开放平台
[ ] 模板编辑器
[ ] 第三方集成

Week 12-14：企业级功能

[ ] 多语言支持
[ ] 企业权限管理
[ ] PMS 系统集成

阶段三交付物：完整的 SaaS 平台

六、技术债务预防

6.1 代码质量保障

javascript

// ESLint 配置（.eslintrc.js）
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  rules: {
    // 自定义规则
    'vue/multi-word-component-names': 'off'
  }
}

6.2 代码审查清单

组件开发：

[ ] 组件职责单一
[ ] Props 定义清晰
[ ] 事件命名规范
[ ] 样式隔离良好

API 调用：

[ ] 错误处理完善
[ ] Loading 状态合理
[ ] 数据验证充分
[ ] 缓存策略适当

性能优化：

[ ] 避免不必要的渲染
[ ] 合理使用异步加载
[ ] 图片懒加载
[ ] 组件按需引入

七、测试策略

7.1 单元测试

bash

# 安装测试框架
npm install -D vitest @vue/test-utils jsdom

测试覆盖：

工具函数（100% 覆盖）
核心组件（> 80% 覆盖）
服务层（> 70% 覆盖）

7.2 E2E 测试

bash

# 安装 Playwright
npm install -D @playwright/test

核心流程测试：

酒店选择 → 内容生成 → 预览 → 下载
批量生成流程
发布流程

八、部署方案

8.1 环境配置

bash

# .env.development
VITE_API_BASE_URL=http://localhost:8000/api
VITE_APP_TITLE=酒店智能体 - 开发环境

# .env.production
VITE_API_BASE_URL=https://api.example.com/api
VITE_APP_TITLE=酒店智能体

8.2 部署流程

bash

# 1. 构建
npm run build

# 2. 上传到服务器
scp -r dist/* user@server:/var/www/hotel-web/

# 3. Nginx 配置
server {
    listen 80;
    server_name hotel.example.com;
    root /var/www/hotel-web;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

九、监控与运维

9.1 监控指标

性能监控：

首屏加载时间（FCP）
可交互时间（TTI）
API 响应时间
错误率

业务监控：

日活跃用户（DAU）
内容生成数量
发布率
用户留存率

9.2 日志收集

javascript

// 错误日志上报
window.onerror = function(message, source, lineno, colno, error) {
  // 上报到日志系统
  logError({
    message,
    source,
    lineno,
    colno,
    stack: error?.stack,
    userAgent: navigator.userAgent,
    url: window.location.href
  })
}

十、团队协作

10.1 Git 工作流

bash

# 分支命名
feature/hotel-selector      # 酒店选择器功能
feature/content-generator   # 内容生成器功能
fix/video-player-bug        # 视频播放器 Bug 修复
release/hotel-web-v1.0      # 发布分支

# 提交信息规范
feat: 新增酒店搜索功能
fix: 修复视频预览闪烁问题
docs: 更新 API 文档
style: 优化按钮样式
refactor: 重构内容生成逻辑
test: 添加单元测试
chore: 更新依赖版本

10.2 协作工具

项目管理：GitHub Projects / Jira
设计协作：Figma
文档管理：Notion / 飞书文档
代码审查：GitHub Pull Requests

十一、成功指标

11.1 技术指标

指标	目标值	测量方式
首屏加载时间	< 2 秒	Lighthouse
可交互时间	< 3 秒	Lighthouse
API 错误率	< 1%	监控平台
页面崩溃率	< 0.1%	错误监控

11.2 业务指标

指标	目标值	测量方式
周活跃酒店数	> 50 家	后台统计
周生成视频数	> 200 条	后台统计
用户满意度	> 4.5/5.0	用户调研
功能使用率	> 60%	埋点分析

十二、风险与应对

风险	概率	影响	应对措施
后端 API 延期	中	高	提前对接，使用 Mock 数据开发
设计资源不足	高	中	优先核心页面，简化次要页面
技术难点突破困难	中	中	预留缓冲时间，寻求外部支持
需求变更频繁	高	高	严格需求评审，控制变更范围

文档维护：技术团队
最后更新：2026-03-16
下一步行动：

确认项目规划
分配开发资源
启动项目初始化

Hotel-Web 项目开发计划 ​

一、项目概述 ​

1.1 项目定位 ​

1.2 技术定位 ​

1.3 与原有系统关系 ​

二、项目初始化 ​

2.1 创建项目 ​

2.2 项目结构 ​

2.3 核心配置文件 ​

vite.config.js ​

src/main.js ​

三、核心功能开发 ​

3.1 模块划分 ​

模块 1：酒店选择器（Hotel Selector） ​

模块 2：内容生成器（Content Generator） ​

模块 3：结果预览（Result Preview） ​

模块 4：发布中心（Publish Center） ​

模块 5：数据看板（Dashboard） ​

四、UI/UX 设计规范 ​

4.1 设计风格 ​

4.2 色彩系统 ​

4.3 页面布局 ​

首页（Dashboard） ​

内容生成页 ​

五、开发里程碑 ​

阶段一：MVP（4 周） ​

Week 1：项目初始化 ​

Week 2：酒店选择器 ​

Week 3：内容生成器 ​

Week 4：结果预览与发布 ​

阶段二：功能增强（4 周） ​

Week 5-6：批量生成与数字人 ​

Week 7-8：数据看板与优化 ​

阶段三：生态建设（6 周） ​

Week 9-11：开放平台 ​

Week 12-14：企业级功能 ​

六、技术债务预防 ​

6.1 代码质量保障 ​

6.2 代码审查清单 ​

七、测试策略 ​

7.1 单元测试 ​

7.2 E2E 测试 ​

八、部署方案 ​

8.1 环境配置 ​

8.2 部署流程 ​

九、监控与运维 ​

9.1 监控指标 ​

9.2 日志收集 ​

十、团队协作 ​

10.1 Git 工作流 ​

10.2 协作工具 ​

十一、成功指标 ​

11.1 技术指标 ​

11.2 业务指标 ​

十二、风险与应对 ​

Hotel-Web 项目开发计划

一、项目概述

1.1 项目定位

1.2 技术定位

1.3 与原有系统关系

二、项目初始化

2.1 创建项目

2.2 项目结构

2.3 核心配置文件

vite.config.js

src/main.js

三、核心功能开发

3.1 模块划分

模块 1：酒店选择器（Hotel Selector）

模块 2：内容生成器（Content Generator）

模块 3：结果预览（Result Preview）

模块 4：发布中心（Publish Center）

模块 5：数据看板（Dashboard）

四、UI/UX 设计规范

4.1 设计风格

4.2 色彩系统

4.3 页面布局

首页（Dashboard）

内容生成页

五、开发里程碑

阶段一：MVP（4 周）

Week 1：项目初始化

Week 2：酒店选择器

Week 3：内容生成器

Week 4：结果预览与发布

阶段二：功能增强（4 周）

Week 5-6：批量生成与数字人

Week 7-8：数据看板与优化

阶段三：生态建设（6 周）

Week 9-11：开放平台

Week 12-14：企业级功能

六、技术债务预防

6.1 代码质量保障

6.2 代码审查清单

七、测试策略

7.1 单元测试

7.2 E2E 测试

八、部署方案

8.1 环境配置

8.2 部署流程

九、监控与运维

9.1 监控指标

9.2 日志收集

十、团队协作

10.1 Git 工作流

10.2 协作工具

十一、成功指标

11.1 技术指标

11.2 业务指标

十二、风险与应对