AiAssistant AI 助手

AI 智能助手组件，支持自然语言命令执行页面跳转和数据操作。

功能介绍

AI 助手是一个悬浮在页面右下角的智能交互组件，用户可以通过自然语言命令快速执行以下操作：

• 🚀 页面跳转 - 通过语音命令快速导航到指定页面
• 🔍 数据查询 - 自然语言搜索用户、角色等数据
• ✏️ 数据操作 - 执行修改、删除等数据操作
• 💡 智能提示 - 提供快捷命令示例

基本用法

组件已在布局中全局注册，无需手动引入：

<template>
  <!-- 组件会自动显示在页面右下角 -->
  <AiAssistant />
</template>

命令示例

页面跳转

跳转到用户管理
打开角色管理页面
进入菜单管理

数据查询

获取姓名为张三的用户信息
查询test用户
搜索管理员角色

数据操作

修改test用户的姓名为测试人员
更新用户状态为禁用

交互方式

悬浮按钮

• 点击：打开 AI 对话框
• 右键：收缩为小标签，避免遮挡表单

对话框

• 输入命令：在文本框中输入自然语言命令
• 快捷发送：按 Ctrl + Enter 快速执行
• 快捷命令：点击预设的命令标签快速填充

配置要求

启用 AI 助手

在 src/settings.ts 中配置：

export const appConfig = {
  aiEnabled: true, // 启用 AI 助手
};

环境变量

# .env.development
VITE_ENABLE_AI_ASSISTANT=true

后端接口

AI 助手需要配套的后端 AI 接口支持，接口定义在 src/api/ai.ts：

import AiCommandApi from "@/api/ai";

// 解析命令
const result = await AiCommandApi.parseCommand({
  command: "修改test用户的姓名为测试人员",
  currentRoute: "/system/user",
  currentComponent: "User",
  context: { userRoles: [] },
});

功能特性

• ✅ 自然语言理解 - 支持中文自然语言命令
• ✅ 智能路由匹配 - 自动识别目标页面
• ✅ 参数提取 - 从命令中提取查询关键字
• ✅ 操作预览 - 执行前显示将要执行的操作
• ✅ 位置自适应 - 自动避开抽屉、弹窗等遮挡
• ✅ 可收缩 - 右键收缩为小标签

路由配置

AI 助手内置了常用页面的路由映射：

关键词	路由路径	页面名称
用户、user	/system/user	用户管理
角色、role	/system/role	角色管理
菜单、menu	/system/menu	菜单管理
部门、dept	/system/dept	部门管理
字典、dict	/system/dict	字典管理
日志、log	/system/log	系统日志

扩展路由

在组件中添加新的路由映射：

const routeConfig = [
  { keywords: ["用户", "user"], path: "/system/user", name: "用户管理" },
  // 添加新的路由映射
  { keywords: ["订单", "order"], path: "/order/list", name: "订单管理" },
];

注意事项

1. 后端依赖：AI 命令解析需要后端 AI 服务支持
2. 权限控制：AI 助手会根据用户权限过滤可执行的操作
3. 网络要求：需要稳定的网络连接以调用 AI 接口

相关链接

• useAiAction
• 系统配置