共计 1638 个字符，预计需要花费 5 分钟才能阅读完成。
项目简介智能客服官网引导页（kefu-web）是一个为开源智能客服系统打造的产品官网 Landing Page。它采用纯静态单页设计，零框架、零构建、零依赖，一个 HTML 文件即可跑完整站。项目基于 FastAPI + RAG 架构，支持 DeepSeek、通义千问、火山方舟、智谱、Kimi 等 15 家模型厂商预设。
该项目采用 MIT 协议，完全开源免费，可商用、可二次开发、可闭源分发。无论是作为开源项目官网、SaaS 产品营销首页，还是快速上线的宣传页，都非常合适。
源码介绍——自适应通用官网技术架构项目的技术选型非常克制且高效：
| 维度 | 选型 | 说明 |
| HTML | 原生语义化标签 | 采用 <header>/<main>/<section>/<footer>，利于 SEO |
| CSS | 纯手写 + CSS 变量 | 深色模式、响应式、玻璃拟态，无 Tailwind / Sass |
| JS | 原生 Vanilla JS | 无 jQuery / 无框架 / 无打包，直接引用 |
| i18n | 220+ 词条词典 | 时区自动判定中英文，localStorage 记忆选择 |
| 图片 | WebP + PNG 双格式 | <picture> 标签优雅降级，体积减少 73% |
| 构建 | 零构建 | 没有 npm / webpack / vite，改完直接刷新 |
| 部署 | GitHub Actions | push 到 main 自动发布，也可放任意静态服务器 |
| SEO | 结构化数据 + 百度推送 | SoftwareApplication / FAQPage JSON-LD |
自适应响应式设计项目采用纯手写 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 个区块，支持 #锚点 平滑滚动跳转：
| 区块 | 内容 |
| 导航栏 | Logo、菜单（7 项）、语言切换、主题切换、GitHub 按钮、下载按钮 |
| Hero 首屏 | 主标题 + 副标题 + 数据条（15 模型厂商 /24API 端点 /54 测试 /19KB 体积）+ 双截图叠放 |
| 产品介绍 | 9 张功能卡片，横向 3 列 |
| 效果预览 | 8 个 Tab 切换后台截图，左右布局（文字 + 大图） |
| 快速开始 | 3 步上手 + 嵌入代码 + 环境要求表格 |
| 部署文档 | Docker / systemd 两套方案 + 避坑指南 + Nginx 配置 |
| 常见问题 | 8 条可折叠问答 |
| 捐赠弹窗 | 微信 / 支付宝 / QQ 切换 |
| CTA + 页脚 | 行动召唤按钮 + 4 列链接 + 版权信息 |
效果预览区通过 8 个 Tab 切换展示后台各功能模块的截图，包括厂商配置、参数调优、向量库选择、文档上传、嵌入配置等核心操作界面，让访客无需部署即可直观了解系统的操作流程。
深色 / 浅色模式通过导航栏按钮一键切换，跟随系统偏好自动适配，用户手动选择后存入 localStorage 持久化。
中英双语支持时区自动判定，localStorage 记忆用户选择。
源码下载
- GitHub 仓库：https://github.com/vfaner/kefu-web
正文完
