ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

女程序员第一次开源:Vue3 + Arco 多租户 AI 对话 SaaS 脚手架「知枢」v1.0

女程序员第一次开源:Vue3 + Arco 多租户 AI 对话 SaaS 脚手架「知枢」v1.0 项目全称知枢 · AI对话SaaS平台Slogan让企业知识成为智能对话。版本v1.0协议MIT仓库https://gitee.com/qiu-hongling/zhishu-aiGitee 搜索知枢-AI对话SaaS平台写在前面做 AI 对话 / 知识库问答产品时最耗人的往往不是「调大模型」而是工程底座多租户隔离怎么切菜单RBAC路由 / 按钮 / 数据权限怎么落地管理后台、用户对话页、客户网站嵌入是不是要拆三套前端没后端时怎么先把产品演示跑起来我是一名女程序员也是公众号「人间存档点」的作者。这是我第一次把完整前端框架正式开源。v1.0 一定还有粗糙处欢迎提 Issue / PR / 建议如果对你有帮助也请给仓库点个 Star。项目是什么知枢 Zhishu AI 是一套企业级多租户 AI 对话 SaaS 的纯前端开源脚手架仓库内包含三件套子项目说明默认端口ai‑chat‑saas‑admin管理后台平台端 租户端 普通用户5173ai‑chat‑saas‑web用户对话页 / 嵌入页5174ai‑chat‑saas‑embed‑sdk客户网站悬浮嵌入 SDK5175默认开启 MockVITE_USE_MOCKtrue无需后端即可完整体验对接真实 API 后可快速二开为可商用产品。视觉风格偏静谧商务主色#165DFF对齐 ArcoAI 点缀色#722ED1主题令牌贯穿登录页、布局壳与业务页。技术栈模块技术框架Vue 3 TypeScript ViteUIArco 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 数据看板与全链路日志页面骨架明暗主题、多页签用户对话端独立对话页/、嵌入页/embedMarkdown 渲染、流式输出、引用来源标签与后台一致的知枢品牌浅色对话 UI嵌入 SDK一行脚本注入悬浮客服窗APIopen / close / toggle / destroyVite 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 18pnpm 8推荐安装与启动gitclone https://gitee.com/qiu-hongling/zhishu-ai.gitcdzhishu-ai# 管理后台 → http://localhost:5173cdai-chat-saas-adminpnpminstallpnpmdev# 用户对话端 → http://localhost:5174cd../ai-chat-saas-webpnpminstallpnpmdev# 嵌入 SDK Demo → http://localhost:5175cd../ai-chat-embed-sdkpnpminstallpnpmdev演示账号Mock角色账号密码说明平台超管adminadmin123租户 / 套餐 / 账单 / 模型租户管理员tenanttenant123机器人 / 知识库 / 接入等菜单最全普通用户useruser123仅工作台 AI 对话切换账号后请退出再登录以重建动态路由。对接真实后端设置环境变量VITE_USE_MOCKfalse按照src/api/*、src/types实现接口优先打通接口链路/auth/login→/auth/userinfo→/auth/menus→ 业务 CRUD菜单结构可参考src/mock/index.ts三套角色菜单管理后台常用环境变量变量说明建议VITE_APP_TITLE站点标题知枢AI - 企业智能对话管理后台VITE_API_BASE_URL接口前缀/apiVITE_USE_MOCK本地Mock开关开发 true接后端 false二次开发指南最短路径1. 改品牌 / 主题目标位置产品名、Title、Sloganadmin/src/constants/brand.ts主题令牌含暗色admin/src/assets/styles/theme.css全局组件与工具类admin/src/assets/styles/index.scssLogoBrandLogo.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-permissionbot:add新建/a-button3. 权限相关文件模块文件请求封装src/utils/request.ts用户状态src/stores/user.ts动态路由src/stores/permission.ts、src/router/dynamic.ts路由守卫src/router/guard.ts4. 嵌入客户网站示意scripttypemoduleimport{createAiChatEmbed}fromhttps://cdn.example.com/ai-chat-embed.es.jscreateAiChatEmbed({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-aiGitee 搜索知枢-AI对话SaaS平台如果这篇文章或这个项目帮到你麻烦Star 点赞/收藏/关注这是对我最大的鼓励。— 人间存档点 · 女程序员让企业知识成为智能对话。
返回列表