智能客服官网引导页HTML源码——零依赖、自适应、开箱即用的通用官网

项目简介

智能客服官网引导页（kefu-web）是一个为开源智能客服系统打造的产品官网 Landing Page。它采用纯静态单页设计，零框架、零构建、零依赖，一个 HTML 文件即可跑完整站。项目基于 FastAPI + RAG 架构，支持 DeepSeek、通义千问、火山方舟、智谱、Kimi 等 15 家模型厂商预设。

该项目采用 MIT 协议，完全开源免费，可商用、可二次开发、可闭源分发。无论是作为开源项目官网、SaaS 产品营销首页，还是快速上线的宣传页，都非常合适。

源码介绍——自适应通用官网技术架构

项目的技术选型非常克制且高效：

自适应响应式设计

项目采用纯手写 CSS + CSS 变量实现完整的响应式布局。从样式源码可以看出几个关键设计：

• CSS 变量体系：在 :root 中定义了完整的色彩、间距、圆角、阴影系统，通过 data-theme 属性实现深色/浅色模式一键切换

• 移动端适配：导航栏在移动设备上自动切换为抽屉菜单，点击菜单按钮展开/收起，点击导航项或外部区域自动关闭

• 玻璃拟态导航：固定导航栏采用 backdrop-filter: saturate(180%) blur(16px) 实现毛玻璃效果，滚动时自动添加边框和阴影

• 平滑滚动：scroll-behavior: smooth 配合 scroll-padding-top 为固定导航栏预留空间
  

整套设计在不同屏幕尺寸下都能保持良好的浏览体验，无论是桌面端、平板还是手机，页面布局都会自动适配。

通用官网模板定位

这个项目不仅服务于特定的智能客服系统，更是一个可复用的通用官网模板：

• 换文案：直接打开 index.html 找对应区块修改即可，中文内容都写在标签里；加/改英文翻译则编辑 js/i18n.js 里的 en 字典

• 换主题色：在 css/style.css 顶部修改变量 --brand、--accent、--accent-warm

• 换截图：替换效果预览区的截图即可

• 换功能卡片/FAQ：修改对应的 HTML 区块
  

这种设计使得任何人都能快速将这个官网改造成自己产品的展示页，无需从零搭建。

页面模块

单页结构共 9 个区块，支持 #锚点 平滑滚动跳转：

效果预览

演示地址展示了完整的产品官网效果：https://vfaner.github.io/kefu-web

效果预览区通过 8 个 Tab 切换展示后台各功能模块的截图，包括厂商配置、参数调优、向量库选择、文档上传、嵌入配置等核心操作界面，让访客无需部署即可直观了解系统的操作流程。

深色/浅色模式通过导航栏按钮一键切换，跟随系统偏好自动适配，用户手动选择后存入 localStorage 持久化。

中英双语支持时区自动判定，localStorage 记忆用户选择。

源码下载

• GitHub 仓库：https://github.com/vfaner/kefu-web