返回 Demo 展厅

Séjour · 普罗旺斯的静谧居停

这个 demo 面向精品民宿、小型酒店、度假别墅;它演示了一家带 AI 礼宾、预订管理、数据看板的业务系统型官网,在客户咨询、运营协作、决策可视化上的典型解法。

Séjour 首页:薰衣草田与石头别墅作为 hero 背景,右侧 AI 礼宾浮窗已展开,显示常见问题入口和输入框。

您日常会遇到的几件事

经营一家小酒店或精品民宿,下面这些情景每天都会发生。我们在这个 demo 里都已经替您处理过。

01

情境

海外客人在前台用翻译软件,前后聊了二十分钟还讲不清楚"能不能带狗来住"。

我们的处理

官网右下角的浮动对话框里,客人用法 / 西 / 中 / 英 / 德五种语言随意提问;AI 自动识别语言、查酒店知识库给答案;不知道的事会明确标注"需要前台确认",并附上电话和邮箱。

我们的取舍

AI 不能凭空承诺房价、不能改预订、不能给退款;该转人工的时候明确转交,让 AI 的"答得快"和前台的"答得准"互补,而不是互相覆盖。

AI 礼宾对话特写:客人用法语问「能不能带狗住,有没有合适的散步路线」,AI 用法语回答两条都查不到核实信息,并提供前台邮箱与电话。
  1. 客人用法语随手问。系统先识别语言、再翻译到内部知识库做向量检索。
  2. 查到的事直接答;查不到的事明确说「没有核实信息」,并把前台邮箱和电话推给客人 — AI 不替前台拍板。

02

情境

前台早会要每天问一遍:今天哪几间入住、哪几间退房、哪几间客人提前到了。

我们的处理

后台预订管理表里,日期范围一选,今天入住、今天退房、本周到达全部自动筛出。每条预订能看到客人姓名、房型、特殊需求、附加项目,状态从待确认到已退房一目了然。

我们的取舍

业务表格不是装饰。我们用专业级的表格组件,支持搜索、排序、批量改状态、导出。运营不用再把数据复制到 Excel 里再处理。

Séjour 后台预订管理表:搜索框、状态筛选、日期范围、Export CSV,下方表格列出每条预订的房型、入住退房日期、价格、彩色状态徽章。
  1. 日期范围 + 状态 + 客人邮箱筛选。一行筛选条件就能拉出"今天入住"或"上周退房未结清"。Export CSV 直接给老板出表。
  2. 状态用颜色区分:待确认(橙)、已入住(绿)、已退房(灰)。每条预订一眼就知道下一步该做什么。

03

情境

网站文案要改一段,又怕员工改坏首页。

我们的处理

后台分三种角色:管理员、编辑、查看者。员工只能存草稿不能直接发布;查看者只能看;所有改动有版本记录可以回滚;改之前还能在"预览模式"里看一眼上线后的样子。

我们的取舍

"谁能改什么"在配置时就划清楚,员工能动手、老板能放手。预览模式让"改完不知道效果"这种瞬间消失。

04

情境

想做夏天促销,给老客户专属折扣码,但 Excel 管不过来。

我们的处理

后台有专门的优惠券模块:折扣类型、有效期、使用上限都能在里面设定。每使用一次自动记一次,对应到哪条预订也能查到。配合知识库模块,AI 礼宾在客人问"有没有优惠"时还能主动提醒可用券。

我们的取舍

促销不是孤立动作。优惠券、预订、AI 知识库三者打通后,运营动作和客户体验之间不再有空白。

Séjour 后台优惠券管理:搜索框、状态筛选、+ Create Coupon 按钮;表格列出每条优惠券的 Code、Name、Type(Fixed / Percentage)、Value、Valid Period、Usage、Status。
  1. Code / Name / Type / Value 一行铺开。Fixed(定额)与 Percentage(百分比)两种折扣类型同表管理;每条券一眼就能识别。
  2. Valid Period 与 Usage 在同一行:有效期和当前使用量 / 上限实时可见。运营随时知道哪张券快用完、哪张快过期。

05

情境

老板每月底要看一次报表,员工每次都得现拼数据。

我们的处理

登录后台第一眼就是数据看板:入住率折线图、月度营收柱状图、客人最常问的问题聚类、收入来源分布。不用打开 Excel、不用催员工。

我们的取舍

数据可视化不是为了好看,是为了让做决定的速度变快。每个图表的数字都来自真实业务数据,不是手动填的。

Séjour 后台数据看板:今日入住 / 退房、入住率、AI 对话量、月度营收 5 个 KPI 卡片,下方入住率折线图、来源饼图、AI 对话趋势、最常问的问题列表。
  1. 老板登录第一眼看到:今天进店 / 走人多少、入住率、本月营收、AI 接了多少对话。不需要催员工拼数据。
  2. 客人最常问的问题自动归类。运营拿来更新知识库、调官网 FAQ;客户的问题就是产品的需求。

响应式体验

客人从三种屏幕上接触品牌,体验都要立得住

精品酒店官网的移动端不是桌面版缩小。客人在桌面慢慢比较房型,在平板上读旅行计划,在手机上路上查交通和 AI 礼宾——首页、AI 浮窗、预订入口要分别校准。

Séjour 中文首页桌面截图:薰衣草田 hero 背景,右侧 AI 礼宾浮窗展开。
桌面:主视觉与 AI 礼宾同屏,叙事和功能并列展开。
Séjour 中文首页平板截图:单列布局,AI 礼宾入口收到右下角浮按。
平板:单列阅读节奏,AI 礼宾收到角落浮按。
Séjour 中文首页手机截图:顶部品牌与菜单入口,下方大幅主视觉。
手机:品牌入口与主视觉优先,AI 礼宾随时唤起。

为您做的取舍

内容后台、开发流程、扩展空间、需求场景——这是我们替您做完比较后的判断。

内容后台的选型

我们选用了开源后台框架 Payload,把您要的功能直接写进系统。WordPress 这种以插件商城为核心的方案,在内容站初期看起来很省事,但插件之间的兼容性、高级功能的长期订阅、版本升级带来的连锁影响,几年下来维护负担会越积越多。Payload 的定制写法不依赖插件拼接,整体架构更稳。

开发流程的把关

我们走完整的咨询 → 设计 → 开发 → 运维流程;设计阶段会给您 2-3 套整体方案——色彩与视觉风格、信息架构、详细文案、可点击的原型——评审通过后再进入开发。AI coding 类工具能在几句话之内生成一个能跑起来的网站,门槛极低,但缺少专业人员把关,做出来的功能勉强达标,搜索引擎读不懂、加载缓慢、安全有漏洞这些细节常常都有缺漏。

扩展空间的预留

Payload 本身是一个 TypeScript 项目,我们能在框架上为您定制业务功能和后台视图——后台用着是"为您家生意定做的",不是"我们能给所有客户的同一份"。Strapi 这种同类型的开源后台适合做标准的内容站,但要在它上面加业务模块(Séjour 的预订表、AI 知识库、优惠券系统),扩展性会逐渐受限。

需求场景的边界

我们最常解决两类问题:"从零开始建一个像样的官网",以及"现有官网过时到不敢发给客户看"的现代化重塑。这两类需求都属于品牌官网的从无到有 / 现代化重塑赛道,是我们最擅长的方向。

您看不见的、我们替您扛了

这一栏的事您不需要懂,也不用操心。我们交付时一并配好。

  • 有人恶意刷网站想把它打趴下

    第一道闸门会先把异常流量挡在门外,访客感觉不到任何异常。

  • 访客和搜索引擎信不信任您

    网址前面是小绿锁,客人敢留资料,搜索引擎也愿意把您往前排。

  • 后台得分清楚谁能看、谁能改、谁能发

    员工分管理员 / 编辑 / 查看者三种权限,所有改动留版本记录、可回滚。如果您要求双因素验证、单点登录或公司网络白名单,我们也能配上,是标准能力不加价。

  • 色弱、老花、用屏幕阅读器的访客也是客人

    文字对比度、键盘可用、屏幕阅读器友好都做到 AA 级标准;AI 对话框也是无障碍可达。

  • 手机、平板、电脑屏幕看起来都得对

    前台浏览体验和员工在 iPad 上操作后台都流畅;客人提交预订 / 员工改预订都不会因为屏幕小而出错。

  • 公司邮箱还在用 QQ / 163 显得不专业

    我们配 [email protected] 这样的企业邮箱,飞书 / 企微 / Outlook 都能直接收发;预订通知、客户回复全部走自有域名。

技术规格

前端 / 后台同栈

  • Next.js 16 App Router(前台 SSR / ISR + 后台 /admin 同应用)
  • Tailwind CSS + Cormorant Garamond / Inter(Quiet Luxury 暗色主题)
  • next-intl(en / fr / zh / es / de 五语言路由级 locale)
  • Vercel AI SDK(流式 UI + 结构化对象生成)

业务后台

  • Payload CMS 3.x 嵌入同应用,/admin 同域
  • MUI 7 + MUI X 8(DataGrid / DatePicker Pro / Charts)
  • 自定义 Views:Dashboard / Bookings / Availability / Coupons / Knowledge
  • 角色:admin / editor / viewer 三层权限
  • Draft / Publish + Live Preview + 版本回滚
  • 多语言后台 UI(en / zh)

AI 礼宾

  • Cloudflare Workers AI: Llama 3.2 3B(生成)+ BGE-M3(embedding)
  • PostgreSQL + pgvector(多语言 RAG 检索)
  • 语言自动识别 + 非英文翻译到英文做向量匹配(M2M-100)
  • 意图识别 + 工具调用:政策 / Mapbox 路线 / Open-Meteo 天气
  • 结构化回复:confirmed / suggestions / confirm_required
  • 速率限制 + 滥用防护 + 守卫规则(不承诺房价 / 不改预订 / 不退款)

基础设施 & 安全

  • Vercel(Next.js)+ Railway(PostgreSQL)+ Cloudflare R2(媒体)
  • Cloudflare DDoS / WAF / DNS Proxy
  • HTTPS / SSL(Cloudflare 自动签发)
  • Same-Origin CSRF 防护 + Payload JWT 会话
  • R2 预签名 URL 上传 + 公网 CDN 分发
  • ISR + tag-based revalidation(CMS 改动即时生效)

想做一个带业务系统和 AI 的官网?

进阶版起步周期通常 6–10 周。我们会先聊您的业务流程、客户旅程和 AI 的边界,再决定具体范围。