项目全称：知枢 · AI对话SaaS平台
Slogan：让企业知识，成为智能对话。
版本：v1.0｜协议：MIT
仓库：https://gitee.com/qiu-hongling/zhishu-ai
Gitee 搜索：知枢-AI对话SaaS平台
写在前面
做 AI 对话 / 知识库问答产品时，最耗人的往往不是「调大模型」，而是工程底座：
- 多租户隔离怎么切菜单？
- RBAC（路由 / 按钮 / 数据权限）怎么落地？
- 管理后台、用户对话页、客户网站嵌入，是不是要拆三套前端？
- 没后端时，怎么先把产品演示跑起来？
我是一名女程序员，也是公众号「人间存档点」的作者。这是我第一次把完整前端框架正式开源。
v1.0 一定还有粗糙处，欢迎提 Issue / PR / 建议；如果对你有帮助，也请给仓库点个 Star。
项目是什么？
知枢 Zhishu AI 是一套企业级多租户 AI 对话 SaaS 的纯前端开源脚手架，仓库内包含三件套：
| 子项目 | 说明 | 默认端口 |
|---|---|---|
| ai‑chat‑saas‑admin | 管理后台（平台端 + 租户端 + 普通用户） | 5173 |
| ai‑chat‑saas‑web | 用户对话页 / 嵌入页 | 5174 |
| ai‑chat‑saas‑embed‑sdk | 客户网站悬浮嵌入 SDK | 5175 |
默认开启 Mock（VITE_USE_MOCK=true），无需后端即可完整体验；对接真实 API 后可快速二开为可商用产品。
视觉风格偏静谧商务：主色#165DFF（对齐 Arco），AI 点缀色#722ED1，主题令牌贯穿登录页、布局壳与业务页。
技术栈
| 模块 | 技术 |
|---|---|
| 框架 | Vue 3 + TypeScript + Vite |
| UI | Arco Design Vue |
| 状态 / 路由 | Pinia + Vue Router 4 |
| 请求 | Axios（统一拦截，可切换 Mock / 真实 API） |
| 图表 | ECharts + vue‑echarts |
| 样式 | SCSS + 品牌 CSS 变量 |
| 对话端 | marked + DOMPurify |
| 包管理 | pnpm（推荐） |
功能一览
管理后台
平台端：工作台、租户、套餐、账单、模型、全局设置、日志审计
租户管理员：机器人、知识库、对话、反馈、应用接入、插件、组织权限、数据中心、系统设置 / 风控、日志
普通用户：工作台、AI 对话
✅通用能力：
- 多租户菜单隔离（平台 / 租户 / 普通用户）
- RBAC：动态路由 +
v‑permission按钮权限 +dataScope数据权限 - 登录页双端切换（租户端 / 平台端），演示账号一键填入
- 机器人配置、知识库上传解析、对话流式输出（Mock 演示）
- 多渠道接入：独立网页、iframe / JS 嵌入、API 密钥策略
- ECharts 数据看板与全链路日志页面骨架
- 明暗主题、多页签
用户对话端
- 独立对话页
/、嵌入页/embed - Markdown 渲染、流式输出、引用来源标签
- 与后台一致的知枢品牌浅色对话 UI
嵌入 SDK
- 一行脚本注入悬浮客服窗
- API：
open / close / toggle / destroy - Vite Library 模式产出 es + umd
仓库结构
ai-chat-saas/ ├── ai-chat-saas-admin/ # 管理后台 ├── ai-chat-saas-web/ # 用户对话端 / 嵌入页 ├── ai-chat-embed-sdk/ # 悬浮嵌入 SDK ├── LICENSE ├── README.md └── README_EN.md快速开始
环境要求
- Node.js >= 18
- pnpm >= 8（推荐）
安装与启动
gitclone https://gitee.com/qiu-hongling/zhishu-ai.gitcdzhishu-ai# 管理后台 → http://localhost:5173cdai-chat-saas-admin&&pnpminstall&&pnpmdev# 用户对话端 → http://localhost:5174cd../ai-chat-saas-web&&pnpminstall&&pnpmdev# 嵌入 SDK Demo → http://localhost:5175cd../ai-chat-embed-sdk&&pnpminstall&&pnpmdev演示账号（Mock）
| 角色 | 账号 | 密码 | 说明 |
|---|---|---|---|
| 平台超管 | admin | admin123 | 租户 / 套餐 / 账单 / 模型 |
| 租户管理员 | tenant | tenant123 | 机器人 / 知识库 / 接入等（菜单最全） |
| 普通用户 | user | user123 | 仅工作台 + AI 对话 |
💡切换账号后请退出再登录，以重建动态路由。
对接真实后端
- 设置环境变量：
VITE_USE_MOCK=false - 按照
src/api/*、src/types实现接口 - 优先打通接口链路：
/auth/login→/auth/userinfo→/auth/menus→ 业务 CRUD - 菜单结构可参考
src/mock/index.ts（三套角色菜单）
管理后台常用环境变量：
| 变量 | 说明 | 建议 |
|---|---|---|
| VITE_APP_TITLE | 站点标题 | 知枢AI - 企业智能对话管理后台 |
| VITE_API_BASE_URL | 接口前缀 | /api |
| VITE_USE_MOCK | 本地Mock开关 | 开发 true，接后端 false |
二次开发指南（最短路径）
1. 改品牌 / 主题
| 目标 | 位置 |
|---|---|
| 产品名、Title、Slogan | admin/src/constants/brand.ts |
| 主题令牌（含暗色） | admin/src/assets/styles/theme.css |
| 全局组件与工具类 | admin/src/assets/styles/index.scss |
| Logo | BrandLogo.vue、public/favicon.svg |
| 对话端样式 | web/src/styles/main.css |
修改主色时，请同步：
--zhishu-brand、--zhishu-brand‑rgb、--primary‑6。
2. 加菜单 / 页面
- 在
src/mock/index.ts（或后端菜单接口）增加路由 - 在
src/views/**新建页面 - 按钮权限示例：
<a-button v-permission="'bot:add'">新建</a-button>3. 权限相关文件
| 模块 | 文件 |
|---|---|
| 请求封装 | src/utils/request.ts |
| 用户状态 | src/stores/user.ts |
| 动态路由 | src/stores/permission.ts、src/router/dynamic.ts |
| 路由守卫 | src/router/guard.ts |
4. 嵌入客户网站（示意）
<scripttype="module">import{createAiChatEmbed}from'https://cdn.example.com/ai-chat-embed.es.js'createAiChatEmbed({appId:'your-app-id',baseUrl:'https://chat.example.com',})</script>具体参数以仓库 ai‑chat‑embed‑sdk 文档为准。
适合谁用？
- 想做 AI 客服 / 知识库问答 / 企业内部助手，但不想从零搭后台
- 需要多租户 + RBAC的 SaaS 前端骨架
- 想先用 Mock 把产品演示跑通，再逐步接真实后端
- 需要管理端 + 对话端 + 网站嵌入一条龙交付
写在最后
开源对我来说更像一次「存档」：把已经验证过的结构留下，让后来的人少走一点重复的路。
知枢 · AI对话SaaS平台 v1.0 能跑、能二开、能演示；也一定还有不足。
这是我第一次开源完整框架，特别欢迎你们提建议。
仓库：https://gitee.com/qiu-hongling/zhishu-ai
Gitee 搜索：知枢-AI对话SaaS平台
如果这篇文章或这个项目帮到你，麻烦Star + 点赞/收藏/关注，这是对我最大的鼓励。
— 人间存档点 · 女程序员
让企业知识，成为智能对话。
``
)
