Chat Agents是一个免费开源的前端开发框架，采用最新的技术，包括Vue 3、Vite和TypeScript。其monorepo方法使得依赖管理和多个项目的协作变得轻松，为开发人员提供了构建现代Web应用程序的全面解决方案。
无论您是经验丰富的开发人员还是刚刚入门，Chat Agents都提供了一个简化的前端开发流程，利用最新的工具和技术。
立即开始使用Chat Agents，并体验高度简化的前端开发流程，利用最新技术和高效的开发工具。
- ⚡ 闪电般快速：使用Vue 3，Vite和pnpm构建 🔥
- 💪 强类型：使用TypeScript 💻
- 📂 单库存储：易于管理依赖项和协作多个项目 🤝
- 🔥 最新语法：使用新的< script setup >语法 🆕
- 📦 自动导入组件：自动导入组件 🚚
- 📥 自动导入API：使用unplugin-auto-import直接导入Composition API和其他API 📨
- 💡 官方路由器：使用Vue Router v4 🛣️
- 🎉 加载反馈：使用NProgress提供页面加载进度反馈 🔄
- 🍍 状态管理：使用Pinia进行状态管理 🗃️
- 📜 中文字体预设：包含中文字体预设 🇨🇳
- 🌍 国际化就绪：具备使用本地化的国际化功能 🌎
- ☁️ Netlify准备就绪：在Netlify上零配置部署 ☁️
packages的依赖关系
graph TD
admin{admin}
admin --> admin-api
admin --> assets
admin --> ca-components
admin --> components
admin --> constants
admin --> directives
admin --> hooks
admin --> locale
admin --> request
admin --> styles
admin --> types
admin --> utils
assets
components
components --> assets
components --> ca-components
components --> constants
components --> styles
components --> types
components --> utils
ca-components
ca-components --> constants
ca-components --> utils
directives
directives --> utils
hooks
hooks --> types
locale
locale --> constants
locale --> types
locale --> utils
request
request --> constants
request --> locale
request --> types
request --> utils
types
types --> constants
utils
utils --> types
admin-api
admin-api --> constants
admin-api --> types
要更新上面的图表，请编辑README文件，并在修改后打开一个新的PR。
在Chat Agents的设计中，我们注重代码的可读性和学习性，为此，我们为每个函数都配备了中英文双语注释，以确保无论您的母语是中文还是英文，都能轻松理解和学习代码。
为什么选择中英文双语注释？
-
全球协作： 在多语言团队中，中英文双语注释能够促进更好的沟通和协作，确保团队成员都能准确理解代码的功能和实现。
-
学习便捷： 对于新手来说，中英文双语注释提供了更友好的学习环境，帮助他们更快速地掌握代码的逻辑和结构。
-
开发者友好： 我们致力于构建一个开发者友好的开发环境，中英文双语注释是我们为实现这一目标而采取的一项关键措施。
-
示例：
/**
* 打开一个新的浏览器窗口
* Open a new browser window
*
* @param {string} url - 要在新窗口中打开的 URL
* The URL to open in the new window
*
* @param {object} options - 打开窗口的选项
* Options for opening the window
* @param {string} options.target - 新窗口的名称或特殊选项，默认为 "_blank"
* @param {string} options.features - 新窗口的特性（大小，位置等），默认为 "noopener=yes,noreferrer=yes"
*/
export function openWindow(url: string, { target = "_blank", features = "noopener=yes,noreferrer=yes" }: {
target?: "_blank" | "_self" | "_parent" | "_top"; // 新窗口的名称或特殊选项，默认为 "_blank"
features?: string; // 新窗口的特性（大小，位置等），默认为 "noopener=yes,noreferrer=yes"
} = {}) {
window.open(url, target, features);
}通过这样的中英文双语注释，我们希望为开发者提供更愉悦、更高效的编码体验，让Chat Agents成为一个真正容易上手和深入学习的前端模板。
1. 依赖管理更轻松： Monorepo 将所有项目的依赖项集中管理，避免了不同项目之间版本冲突的问题，使得整体的依赖管理更加清晰和简便。
2. 代码共享与重用： 不同项目之间可以方便地共享和重用代码，减少重复开发的工作量。这对于保持代码一致性和提高开发效率非常有利。
3. 统一的构建和部署： Monorepo 可以通过统一的构建和部署流程，简化整个开发过程，减少了配置和管理的复杂性，提高了开发团队的协作效率。
4. 统一的版本控制： 所有项目都在同一个版本控制仓库中，使得版本管理更加一致和可控。这有助于团队协同开发时更好地追踪和处理版本问题。
Monorepo设计让Chat Agents不仅是一款后台管理系统模板，同时也是一个快速开发C端产品的前端Web模板。有了Chat Agents，前端开发之路将更加轻松愉快！🚀
在市面上，大多数前端模板都着眼于满足B端用户的需求，为企业管理系统（Admin）提供了强大的功能和灵活的界面。然而，很少有模板将C端产品的特点纳入设计考虑，这正是我们Chat Agents的创新之处。
突破Admin管理的局限性：
传统的Admin管理系统更注重数据展示和业务管理，但C端产品更加侧重用户体验和视觉吸引力。我们深知C端用户对于界面美观、交互流畅的要求，因此Chat Agents不仅提供了强大的后台管理功能，更注重让前端界面在用户层面上达到更高水平。
关注C端用户体验：
Chat Agents不仅仅是一个后台管理系统的模板，更是一个注重C端用户体验的前端Web模板。我们致力于打破传统Admin系统的束缚，通过引入崭新的设计理念，使得C端产品在前端呈现上具备更为出色的用户体验。
特色亮点：
- 时尚美观的UI设计： 我们注重界面的美感，采用现代化设计语言，使得Chat Agents的UI不仅仅是功能的堆
叠，更是视觉的享受。
-
流畅的用户交互： C端用户对交互的要求往往高于B端，我们特别优化了界面的响应速度和交互效果，确保用户的每一次操作都能得到快速的反馈。
-
多场景适配： 无论是用于电商、社交、还是内容展示，Chat Agents都提供了丰富的组件和模板，能够轻松适配各种C端应用场景。
npx degit Luohao-Yan/Chat-Agents my-vite-app
cd my-vite-app
pnpm i只需要执行以下命令就可以在 http://localhost:8888 中看到
pnpm run dev构建该应用只需要执行以下命令
pnpm run build然后你会看到用于发布的 dist 文件夹被生成。
前往 Netlify 并选择你的仓库, 一路 OK 下去，稍等一下后，你的应用将被创建.
首先，在项目的根目录下打开终端，构建chat-agents镜像。
docker buildx build . -t chat-agents:latest运行镜像，用 "-p" 指定端口映射。
docker run --rm -it -p 8080:80 chat-agents:latestThis template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur).
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
See Vite Configuration Reference.
pnpm installpnpm devpnpm buildRun Unit Tests with Vitest
pnpm test:unitRun End-to-End Tests with Playwright
# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
pnpm build
# Runs the end-to-end tests
pnpm test:e2e
# Runs the tests only on Chromium
pnpm test:e2e --project=chromium
# Runs the tests of a specific file
pnpm test:e2e tests/example.spec.ts
# Runs the tests in debug mode
pnpm test:e2e --debug/Users/yanluohao/开发/Chat-GraphRAG/frontend ├── README.md ├── node_modules/ ├── package.json ├── pnpm-lock.yaml ├── index.html ├── src/ │ ├── App.vue │ ├── assets/ │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components/ │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ ├── tests/ │ │ │ └── HelloWorld.spec.ts │ │ └── icons/ │ │ ├── IconCommunity.vue │ │ ├── IconDocumentation.vue │ │ └── IconTooling.vue │ ├── main.ts │ ├── router/ │ │ └── index.ts │ ├── store/ │ │ └── index.ts │ └── views/ │ ├── About.vue │ └── Home.vue ├── e2e/ │ ├── tsconfig.json │ └── vue.spec.ts ├── vite.config.ts ├── .prettierrc.json ├── .gitattributes ├── .editorconfig ├── eslint.config.ts ├── tsconfig.json ├── tsconfig.vitest.json ├── tsconfig.app.json ├── tsconfig.node.json ├── env.d.ts ├── playwright.config.ts ├── .gitignore ├── vitest.config.ts ├── public/ └── .vscode/ ├── extensions.json └── settings.json
文件和目录解释
- README.md: 项目说明文件，包含项目的基本信息、安装和使用说明。
- node_modules/: 存放项目依赖的目录，由 pnpm 安装。
- package.json: 项目的配置文件，包含项目的元数据、依赖项和脚本。
- pnpm-lock.yaml: pnpm 生成的锁定文件，确保项目依赖的一致性。
- index.html: 项目的入口 HTML 文件，包含基本的 HTML 结构和引用的 JavaScript 文件。
- src/: 源代码目录，包含项目的主要代码文件。
- App.vue: 根组件，定义了应用的基本结构。
- assets/: 存放静态资源，如 CSS 文件和图片。
- base.css: 基础样式文件。
- logo.svg: 项目的 logo 图片。
- main.css: 主样式文件。
- components/: 存放 Vue 组件。
- HelloWorld.vue: 示例组件。
- TheWelcome.vue: 欢迎组件。
- WelcomeItem.vue: 欢迎项组件。
- tests_/: 存放组件的测试文件。
- HelloWorld.spec.ts: HelloWorld 组件的测试文件。
- icons/: 存放图标组件。
- IconCommunity.vue: 社区图标组件。
- IconDocumentation.vue: 文档图标组件。
- IconTooling.vue: 工具图标组件。
- main.ts: 应用的入口文件，初始化 Vue 应用。
- router/: 存放路由配置文件。
- index.ts: 路由配置文件。
- store/: 存放状态管理文件。
- index.ts: 状态管理配置文件。
- views/: 存放视图组件。
- About.vue: 关于页面组件。
- Home.vue: 主页组件。
- e2e/: 端到端测试目录。
- tsconfig.json: TypeScript 配置文件。
- vue.spec.ts: 端到端测试文件。
- vite.config.ts: Vite 的配置文件。
- .prettierrc.json: Prettier 的配置文件，用于代码格式化。
- .gitattributes: Git 属性文件，定义文件的处理方式。
- .editorconfig: EditorConfig 配置文件，定义代码风格。
- eslint.config.ts: ESLint 的配置文件，用于代码检查。
- tsconfig.json: TypeScript 的配置文件。
- tsconfig.vitest.json: Vitest 的 TypeScript 配置文件。
- tsconfig.app.json: 应用的 TypeScript 配置文件。
- tsconfig.node.json: Node.js 的 TypeScript 配置文件。
- env.d.ts: 环境变量的 TypeScript 声明文件。
- playwright.config.ts: Playwright 的配置文件，用于端到端测试。
- .gitignore: Git 忽略文件，定义哪些文件和目录不应提交到版本控制。
- vitest.config.ts: Vitest 的配置文件，用于单元测试。
- public/: 存放公共资源的目录，通常用于存放静态文件。
- .vscode/: VSCode 的配置目录。
- extensions.json: 推荐的 VSCode 扩展。
- settings.json: VSCode 的设置文件。
将所有文件添加到Git并提交：
git add .
git commit -m "Initial commit"
将本地仓库的内容推送到GitHub上的远程仓库：
git push -u origin main
Quick setup — if you’ve done this kind of thing before
or
https://github.com/Luohao-Yan/Chat-Agents.git
Get started by creating a new file or uploading an existing file. We recommend every repository include a README, LICENSE, and .gitignore.
…or create a new repository on the command line
echo "# Chat-Agents" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Luohao-Yan/Chat-Agents.git
git push -u origin main
…or push an existing repository from the command line
git remote add origin https://github.com/Luohao-Yan/Chat-Agents.git
git branch -M main
git push -u origin main
使用清晰的分支命名规则，便于团队协作和代码管理。 常见的分支命名规范：
- 主分支：main 或 master（用于发布稳定版本）。
- 开发分支：develop（用于集成开发）。
- 功能分支：feature/<功能描述>（用于开发新功能）。
- 修复分支：fix/<修复描述>（用于修复 Bug）。
- 热修复分支：hotfix/<修复描述>（用于紧急修复生产问题）。
- 测试分支：test/<测试描述>（用于测试环境）。
- 主分支 (main)：始终保持稳定，仅合并经过测试的代码。
- 开发分支 (develop)：集成所有功能分支，定期同步到主分支。
- 功能分支 (feature)：每个功能独立开发，完成后合并到 develop。
- 修复分支 (fix)：用于修复问题，完成后合并到 develop 或 main。
查看所有分支
git branch -a
将本地 develop 分支与远程的 origin/develop 分支关联，并推送代码：
git push --set-upstream origin develop
查看本地分支与远程分支的关联情况：
git branch -vv
直接使用 git push 和 git pull
git push --set-upstream origin develop