# DifyAiClient **Repository Path**: playwithnuke/dify-ai-client ## Basic Information - **Project Name**: DifyAiClient - **Description**: 一个简单的Dify-ai-client，made by deepseek+cline - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-03-13 - **Last Updated**: 2025-05-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # WorkTool [![Gitee Stars](https://gitee.com/playwithnuke/dify-ai-client/badge/star.svg?theme=white)](https://gitee.com/playwithnuke/dify-ai-client) ![Vue](https://img.shields.io/badge/Vue-3.4-brightgreen) ![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue) ![Vite](https://img.shields.io/badge/Vite-5.1-yellowgreen) ![WebSocket](https://img.shields.io/badge/WebSocket-实时通信-blueviolet) ![Pinia](https://img.shields.io/badge/Pinia-2.1-orange) ![License](https://img.shields.io/badge/License-MIT-green) WorkTool 是一个基于 Vue 3 和 Vite 构建的多功能 AI 工作助手，提供与 Dify AI 平台的无缝集成和多种交互功能。 ## 🏗️ 系统架构 ```mermaid graph LR A[用户界面] --> B[Vue组件] B --> C[Pinia状态管理] C --> D[Vue Router] D --> E[API服务层] E --> F[Dify平台] ``` > **Note** > 本项目仍在积极开发中，欢迎贡献代码和提出建议！ ## 🛠️ 技术栈 - Vue 3 - Pinia (状态管理) - Vue Router - Element Plus (UI 组件库) - Axios (HTTP 请求) - TypeScript - WebSocket (实时通信) - markdown-it (Markdown 渲染) - DOMPurify (HTML 净化) - Recorder.js (音频处理) ## ✨ 功能特性 ### AI 对话 ```mermaid flowchart LR U[用户输入] --> A[前端处理] A --> B[API调用] B --> C[Dify处理] C --> D[返回响应] D --> E[前端展示] ``` ### 文档比对 ```mermaid sequenceDiagram participant 用户 participant 前端 participant 后端 participant DifyAPI 用户->>前端: 上传文档 前端->>后端: 发送文档内容 后端->>DifyAPI: 请求文档分析 DifyAPI-->>后端: 返回分析结果 后端-->>前端: 返回比对结果 前端-->>用户: 显示比对差异 ``` ### 语音助手 ```mermaid flowchart TD A[开始语音输入] --> B[Recorder.js录音] B --> C[WebSocket传输] C --> D[语音识别服务] D --> E[文本返回] E --> F[AI处理] F --> G[语音合成] G --> H[播放响应] ``` - 应用管理：管理和配置 Dify AI 应用 - 聊天记录：保存和查看历史对话记录 - API 集成：与 Dify AI 平台 API 无缝对接 ## 📂 项目结构 ``` workTool/ ├── src/ │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ ├── router/ # 路由配置 │ ├── stores/ # Pinia 状态管理 │ ├── utils/ # 工具函数 │ │ └── dify/ # Dify API 相关工具 │ │ ├── api/ # API 接口 │ │ ├── manager/ # 管理器 │ │ └── types/ # 类型定义 │ ├── views/ # 页面视图 │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── public/ # 公共资源 ├── package.json # 项目依赖 └── vite.config.ts # Vite 配置 ``` ## 💻 推荐 IDE 设置 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (并禁用 Vetur)。 ## 🔍 TypeScript 支持 TypeScript 默认无法处理 `.vue` 导入的类型信息，因此我们使用 `vue-tsc` 替代 `tsc` 进行类型检查。在编辑器中，需要 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 来使 TypeScript 语言服务识别 `.vue` 类型 # Dify API Key 使用流程 ```mermaid %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#fff' }}}%% sequenceDiagram participant 路由配置 participant DocumentCompareView participant useDifyClient participant ChatAPI participant DifyAPI 路由配置->>DocumentCompareView: meta.difyApiKey DocumentCompareView->>useDifyClient: mainApiKey useDifyClient->>ChatAPI: 初始化 ChatAPI->>DifyAPI: Authorization: Bearer DifyAPI-->>ChatAPI: 响应 ChatAPI-->>useDifyClient: 返回结果 useDifyClient-->>DocumentCompareView: 返回结果 ``` 1. 在路由配置中定义 Dify API Key 2. 在 DocumentCompareView.vue 中通过路由的 meta 对象获取 API Key 3. 使用 API Key 初始化 DifyClient 4. 在发送 API 请求时，将 API Key 添加到请求头中 5. Dify API 验证 API Key 并处理请求 ## 🚀 项目设置 ```sh cd workTool # 切换版本 nvm use 20 # 安装依赖 npm install # 开发模式 (热重载) npm run dev # 类型检查、编译和压缩生产环境代码 npm run build # 预览生产环境构建 npm run preview ``` ## ⚙️ 自定义配置 查看 [Vite 配置参考](https://vite.dev/config/)。 ## 🤝 贡献指南 欢迎提交 Pull Request 或 Issue 来改进项目。请确保遵循现有的代码风格和提交规范。 ## 📜 许可证 [MIT](LICENSE)