Hotel Web Architecture

技术栈选型 (Technology Stack)

前端框架与构建

• Vue 3 (Composition API, <script setup> 语法)
• Vite (极速构建，冷启动)
• Vue Router 4 (路由管理)
• Pinia (轻量级状态管理)

UI 组件与样式

• Element Plus (基础 UI 组件库)
• Sass (SCSS) (CSS 预处理器，使用 Dart Sass)
• CSS Variables (主题定制，实现亮暗色切换)
• Element Plus Icons (官方图标库)

核心功能模块

• Vue I18n (国际化支持，中/英文切换)
• Axios (HTTP 请求，请求/响应拦截器)
• CryptoJS (阿里云 OSS 签名计算)

产品架构矩阵 (AIGC Product Matrix)

为了更好地服务 B 端酒店用户，我们将 AIGC 能力高度场景化，划分为四大核心基建，并引入了悬浮智能管家（Copilot）模式。

1. AI 图片 (Visual Asset Generation)

• 定位：酒店高频营销视觉物料的“一键生成器”。
• 场景：节令海报、营销活动、新品首发、通知水牌、会议背景等。
• 技术支撑：底层统一复用 PosterGenerator/Index.vue，配合 PromptCompiler 自动将用户选择的“标签”编译为大模型友好的高级 Prompt，通过 useAigcPolling 异步获取火山 Seedream 生成结果。

2. AI 视频 (Dynamic Video Generation)

• 定位：零门槛的酒店短视频营销神器。
• 场景：宣传短片、活动预告、达人探店、游客打卡、员工介绍。
• 技术支撑：底层复用 PromoShort.vue。依靠阿里云 IMS (SubmitBatchMediaProducingJob) 作为智能混剪引擎。前端通过 SmartUploader 将素材直传 OSS，后端免去繁琐的时间轴计算，直接调用 Script 模式成片。

3. AI 页面 (Page & Layout Generation)

• 定位：解决“最后一公里”的图文排版问题。
• 场景：小红书图文笔记排版、详情页长图。
• 技术支撑：通过前端 CSS Grid/Flex 构建高保真“手机壳”预览模拟器，结合 html2canvas 引擎，实现跨域 OSS 图片的无损渲染与长图一键导出。

4. AI 文案 (Copywriting Generation)

• 定位：酒店运营的随身文案大脑。
• 场景：营销种草话术、OTA 评价智能回复。
• 技术支撑：通过预设的情绪基调与风格标签，调用后端文本大模型，前端提供实时 Markdown 渲染与打字机效果。

5. 全局智能管家 (Copilot Agent)

• 定位：取代原有的首页大输入框，收敛为悬浮在右下角的智能数字人形象。
• 功能：作为“意图路由器”，接收用户自然语言指令（如“帮我做个端午节海报”），并自动跳转到对应的工具页面并预填参数。

目录结构说明

src/
├── components/          # 全局公共组件 (如 SmartUploader)
├── composables/         # 组合式函数 (如 useAigcPolling)
├── layouts/             # 页面骨架 (包含 SidebarLayout 与 Copilot 挂载)
├── router/              # 路由配置 (按四大矩阵划分)
├── services/
│   ├── api/             # 接口封装 (分拆为 poster-api, video-api, copy-api 等)
│   └── oss-upload.js    # OSS 核心直传逻辑
├── styles/              # 全局样式与变量 (莫兰迪色系、定制 Element Plus)
├── utils/
│   └── prompt-compiler.js # 核心提示词编译引擎
└── views/               # 业务视图
    ├── dashboard/       # 工作台首页
    ├── poster-generator/# AI 图片引擎 (复用于所有海报场景)
    ├── video/           # AI 视频引擎 (PromoShort)
    ├── page/            # AI 页面引擎 (XiaohongshuNote)
    └── copy/            # AI 文案引擎 (Marketing, ReviewReply)

功能设计规范与 PRD (Product Requirement Documents)

为了保证“极端优秀”的产品体验，系统各核心功能的详细产品设计、交互逻辑与底层技术兜底策略，将从本架构文档中剥离，形成独立的 PRD 文档。 详情请参阅 doc/prd/ 目录：

• 节令海报设计规范 (Festival Poster)
• (更多场景 PRD 持续补充中...)

核心设计规范 (Design Conventions)

UI/UX 设计演进方向

1. 去 Agent 化表单：在具体工具页面（如海报生成），摒弃纯输入框的 Agent 模式，转为“左侧配置（模板/尺寸选择）+ 右侧大面积预览”的 B 端专业工具模式（对标万相营造）。
2. 场景化参数：将底层的复杂 Prompt 封装为酒店行业的特有术语（如“全景落地窗”、“温馨亲子风”）。
3. 响应式布局：核心页面支持大屏分栏展示，以及移动端/Pad 端的折叠堆叠展示。

接口对接规范 (API Integration)

• 后端路由统一：统一通过后端 open 模块的 /open/service/* 进行请求转发和鉴权。
• STS/预签名直连：涉及大文件（图片/视频）上传与播放时，后端仅下发临时凭证或预签名 URL，前端直接与阿里云/火山引擎通信，降低后端带宽压力。
• 状态轮询：针对大模型长耗时任务（如 Seedance 视频生成、IMS 智能成片），采用 JobId 轮询机制获取最终结果。