AI助手插件

这是一个从原管理系统项目中剥离出来的AI助手功能，作为独立的npm插件。

项目分析

原项目(admin)中的AI助手功能

• 主要组件：AiAssistant.vue，包含面板和浮动图标
• 功能标签页：
  • 菜单管理 (MenuTab)
  • 路由查看 (RouteTab)
  • Mock数据管理 (MockTab)
  • 数据库管理 (DatabaseTab)
  • 系统信息 (InfoTab)
• 状态管理：使用Pinia (aiAssistant.ts)
• 服务：数据库服务 (databaseService.ts)
• UI特点：
  • 可拖拽面板
  • 可调整大小
  • 最大化/最小化功能
  • 浮动图标
  • 暗黑模式支持

新项目(ai-assistant)结构

• 主组件：AiAssistantPanel.vue
• 组合式API：
  • useAiAssistant.ts：面板状态管理
  • useDatabase.ts：数据库功能
• API服务：api/index.ts
• 类型定义：types/index.ts
• 组件目录：
  • components/database/：数据库相关组件
  • components/tabs/：标签页组件

工作计划

1. 完善主组件

• 确保AiAssistantPanel.vue与原项目的AiAssistant.vue功能一致
• 实现面板拖拽、调整大小、最大化/最小化等功能
• 实现浮动图标及其交互

2. 完善标签页组件

• 菜单管理标签页
• 路由查看标签页
• Mock数据管理标签页
• 数据库管理标签页（优先级最高）
• 系统信息标签页

3. 完善数据库功能

• 数据库连接管理
• 表结构查看
• 数据浏览
• SQL执行
• 数据库信息查看

4. 完善组合式API和类型定义

• 完善useAiAssistant.ts
• 完善useDatabase.ts
• 完善类型定义

5. 确保样式和UI一致性

• 复制原项目的CSS样式
• 确保暗黑模式支持
• 确保响应式设计

6. 插件打包和发布

• 配置打包选项
• 编写使用文档
• 准备发布到npm

重要说明

• 不修改原项目代码：所有工作都在新项目(ai-assistant)中进行
• 保持UI一致性：新项目必须与原项目的UI完全一致
• 复用原代码：尽可能复用原项目的UI、函数和CSS
• 功能完整性：确保所有原有功能在新项目中正常工作

开发进度

• [x] 项目初始化
• [x] 基本结构搭建
• [ ] 主组件实现
• [ ] 数据库功能实现
• [ ] 其他标签页实现
• [ ] 样式和UI完善
• [ ] 插件打包配置
• [ ] 文档编写
• [ ] 发布准备

功能特点

• 数据库连接管理
• 表结构查看
• 数据浏览
• SQL执行
• 代码生成
• 可拖拽面板
• 可调整大小
• 最大化/最小化功能
• 浮动图标
• 暗黑模式支持

安装

# npm
npm install ai-assistant

# yarn
yarn add ai-assistant

# pnpm
pnpm add ai-assistant

使用方法

全局注册

// main.js 或 main.ts
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import { createAiAssistant } from "ai-assistant";
import "ai-assistant/dist/ai-assistant.css"; // 导入样式

const app = createApp(App);

// 使用 Element Plus
app.use(ElementPlus);

// 使用 AI 助手插件
app.use(
  createAiAssistant({
    apiBaseUrl: "/ai-api", // API 基础路径
    theme: "light", // 初始主题：light 或 dark
  })
);

app.mount("#app");

按需引入

<!-- SomePage.vue -->
<template>
  <div>
    <!-- 其他内容 -->
    <AiAssistantPanel v-if="showAiAssistant" />
    <button @click="toggleAiAssistant">显示/隐藏 AI助手</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { AiAssistantPanel, useAiAssistant } from "ai-assistant";
import "ai-assistant/dist/ai-assistant.css"; // 导入样式

const showAiAssistant = ref(false);
const { openPanel, closePanel } = useAiAssistant();

const toggleAiAssistant = () => {
  showAiAssistant.value = !showAiAssistant.value;
  if (showAiAssistant.value) {
    openPanel();
  } else {
    closePanel();
  }
};
</script>

API 参考

组件

• AiAssistantPanel: 主面板组件
• DatabaseManager: 数据库管理组件

组合式 API

useAiAssistant

import { useAiAssistant } from "ai-assistant";

const {
  // 状态
  theme, // 当前主题
  panel, // 面板状态
  floatIcon, // 浮动图标状态
  visible, // 面板可见性
  activeTab, // 当前活动标签页

  // 方法
  initialize, // 初始化
  toggleTheme, // 切换主题
  setTheme, // 设置主题
  openPanel, // 打开面板
  closePanel, // 关闭面板
  saveState, // 保存状态
  calculateCenterPosition, // 计算居中位置
} = useAiAssistant();

useDatabase

import { useDatabase } from "ai-assistant";

const {
  // 状态
  connections, // 数据库连接列表
  selectedConnection, // 当前选中的连接
  isConnected, // 是否已连接
  tables, // 表列表

  // 方法
  getConnections, // 获取连接列表
  addConnection, // 添加连接
  updateConnection, // 更新连接
  deleteConnection, // 删除连接
  connect, // 连接数据库
  disconnect, // 断开连接
  getTables, // 获取表列表
  executeQuery, // 执行SQL查询
} = useDatabase();

配置选项

创建 AI 助手插件时可以传入以下配置选项：

app.use(
  createAiAssistant({
    apiBaseUrl: "/ai-api", // API 基础路径
    theme: "light", // 初始主题：light 或 dark
    // 其他配置...
  })
);

| 选项 | 类型 | 默认值 | 说明 | | ---------- | ----------------- | --------- | ------------ | | apiBaseUrl | string | "/ai-api" | API 基础路径 | | theme | "light" | "dark" | "light" | 初始主题 |

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 预览
npm run preview

许可证

MIT