天智AI聊天SDK

一个仿DeepSeek风格的AI聊天SDK，基于Vue3+Vite构建，支持多种AI模型和功能。

功能特性

• 🎨 现代化UI设计 - 仿DeepSeek的界面风格，支持明暗主题切换
• 💬 多会话管理 - 支持创建、切换、删除聊天会话
• 🤖 多模型支持 - 支持多种AI模型选择
• 🔍 联网搜索 - 支持实时网络搜索功能
• 🧠 深度思考 - 支持AI深度思考模式
• 📝 Markdown渲染 - 支持代码高亮和Markdown格式
• 📤 文件上传 - 支持图片上传到阿里云OSS
• 📊 聊天导出 - 支持导出聊天记录
• 📱 响应式设计 - 支持移动端和桌面端
• ⚡ 实时流式响应 - 支持打字机效果

技术栈

• 前端框架: Vue 3 (Composition API)
• 构建工具: Vite
• 状态管理: Pinia
• 样式: CSS3 + SCSS
• HTTP客户端: Axios
• Markdown解析: Marked
• 代码高亮: Highlight.js

快速开始

安装依赖

1npm install

开发模式

1npm run dev

构建生产版本

1npm run build

使用方式

基本使用

1<template>
2  <TianzhiAIChat 
3    :base-url="baseUrl"
4    :oss-upload-url="ossUploadUrl"
5    :authorization="authorization"
6  />
7</template>
8
9<script setup>
10import TianzhiAIChat from './components/TianzhiAIChat.vue'
11
12const baseUrl = 'http://your-api-server.com'
13const ossUploadUrl = 'https://your-oss-upload-url.com/upload'
14const authorization = 'your-auth-token'
15</script>

配置参数

参数	类型	必填	说明
baseUrl	String	是	API服务器地址
ossUploadUrl	String	是	阿里云OSS上传地址
authorization	String	是	认证令牌

API接口

聊天接口

POST /chat/completions

请求参数：

1{
2  "maskId": 0,
3  "message": "string",
4  "messageId": 0,
5  "model": "gpt-4o-mini",
6  "reasonEnabled": false,
7  "searchEnabled": false
8}

请求头：

Authorization: kuzumasatou

响应格式（流式）：

data:{"t":"c","v":"AI回复内容"}
data:{"t":"r","v":"深度思考内容"}

模型列表接口

GET /chat/models

响应格式：

1{
2  "list": [
3    {
4      "abilities": [...],
5      "description": {...},
6      "modelCode": [...],
7      "provider": [...]
8    }
9  ]
10}

项目结构

src/
├── components/          # 组件目录
│   ├── TianzhiAIChat.vue    # 主聊天组件
│   └── MaskModal.vue        # 面具选择弹窗
├── stores/             # 状态管理
│   └── chat.js         # 聊天状态store
├── services/           # 服务层
│   └── api.js          # API服务
├── utils/              # 工具函数
│   └── index.js        # 通用工具函数
├── App.vue             # 根组件
├── main.js             # 入口文件
└── style.css           # 全局样式

功能说明

会话管理

• 支持创建新对话
• 支持选择不同面具（角色）
• 支持删除历史对话
• 自动保存对话记录

消息功能

• 支持发送文本消息
• 支持图片上传
• 支持Markdown渲染
• 支持代码高亮
• 支持深度思考显示

界面功能

• 侧边栏收起/展开
• 主题切换（明/暗）
• 模型选择下拉框
• 导出聊天记录
• 响应式布局

开发说明

添加新功能

1. 在 src/components/ 目录下创建新组件
2. 在 src/stores/ 目录下添加状态管理
3. 在 src/services/ 目录下添加API服务
4. 在 src/utils/ 目录下添加工具函数

样式规范

• 使用CSS变量管理主题色彩
• 支持明暗主题切换
• 响应式设计，支持移动端
• 使用Flexbox和Grid布局

代码规范

• 使用Vue 3 Composition API
• 使用TypeScript类型注解（可选）
• 遵循ESLint规则
• 组件命名使用PascalCase

构建说明

本项目支持两种构建模式，分别用于不同的使用场景：

构建命令

1. build 命令

1npm run build

• 用途: 构建完整的应用，包含开发模式的初始化逻辑
• 入口文件: src/main.js
• 特点:
  • 包含应用初始化代码 (createApp(App) 和 app.mount('#app'))
  • 主要用于开发环境或完整应用部署
  • 输出文件名: tianzhi-ai-sdk.js
  • 外部化依赖: vue, vue-router

2. build:lib 命令

1npm run build:lib

• 用途: 构建纯库文件，供其他项目作为依赖使用
• 入口文件: src/lib.js
• 特点:
  • 提供 Vue 插件形式的导出 (TianzhiAIPlugin)
  • 支持多种模块格式: es、umd、cjs
  • 输出多个文件: tianzhi-ai-sdk.es.js、tianzhi-ai-sdk.umd.js、tianzhi-ai-sdk.cjs.js
  • 外部化依赖: vue、highlight.js
  • 包含 CSS 文件: tianzhi-ai-sdk.css

构建模式对比

特性	build	build:lib
目标用途	完整应用构建	库文件构建
入口文件	main.js	lib.js
输出格式	单一文件	多种格式 (ES/UMD/CJS)
应用初始化	包含	不包含
插件支持	无	提供 Vue 插件
依赖处理	外部化 vue, vue-router	外部化 vue, highlight.js
CSS 处理	默认	单独输出 CSS 文件

推荐使用场景

• 使用 build:lib: 构建供其他项目使用的 SDK 库
• 使用 build: 构建完整的演示应用或开发环境

部署说明

构建SDK

1# 构建库文件（推荐）
2npm run build:lib
3
4# 或构建完整应用
5npm run build

构建后的文件位于 dist/ 目录。

集成到其他项目

1. 将构建后的文件复制到目标项目
2. 引入组件并传入必要的配置参数
3. 确保目标项目支持Vue 3

许可证

MIT License

贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

联系方式

如有问题或建议，请提交 Issue 或联系开发团队。

发布指南

快速发布

1# 发布补丁版本 (1.2.0 -> 1.2.1)
2npm run publish:patch
3
4# 发布次要版本 (1.2.0 -> 1.3.0)  
5npm run publish:minor
6
7# 发布主要版本 (1.2.0 -> 2.0.0)
8npm run publish:major

使用发布脚本

Linux/Mac

1# 给脚本执行权限
2chmod +x scripts/publish.sh
3
4# 发布补丁版本
5./scripts/publish.sh patch
6
7# 发布次要版本
8./scripts/publish.sh minor
9
10# 发布主要版本
11./scripts/publish.sh major
12
13# 查看帮助
14./scripts/publish.sh help

Windows

1# 发布补丁版本
2scripts\publish.bat patch
3
4# 发布次要版本
5scripts\publish.bat minor
6
7# 发布主要版本
8scripts\publish.bat major

发布前检查

1# 检查发布配置
2npm run check-publish
3
4# 构建项目
5npm run build
6
7# 检查 npm 登录状态
8npm whoami

发布流程

发布脚本会自动执行以下步骤：

1. ✅ 检查项目目录和配置文件
2. ✅ 验证 npm 登录状态
3. ✅ 检查 git 状态（如有未提交更改会提示）
4. ✅ 验证包名可用性
5. ✅ 构建项目 (npm run build)
6. ✅ 更新版本号 (patch/minor/major)
7. ✅ 执行 dry-run 测试
8. ✅ 发布到 npm
9. ✅ 验证发布结果
10. ✅ 创建 git 标签（如果存在 git 仓库）

版本说明

• patch: 补丁版本，修复 bug (1.2.0 -> 1.2.1)
• minor: 次要版本，新增功能 (1.2.0 -> 1.3.0)
• major: 主要版本，破坏性更新 (1.2.0 -> 2.0.0)

注意事项

1. 发布前请确保已登录 npm: npm login
2. 建议先提交代码到 git 仓库
3. 发布前可以运行 npm run check-publish 检查配置
4. 如果发布失败，检查包名是否被占用或版本号是否已存在