useAiAction

AI 操作助手 Composable，用于处理 AI 助手传递的操作命令。

功能介绍

useAiAction 统一处理 AI 助手传递的操作，支持：

• 自动搜索（通过 URL 参数 keywords + autoSearch）
• 执行 AI 操作（通过 URL 参数 aiAction）
• 配置化的操作处理器
• 自动确认对话框
• 操作完成后自动刷新

基本用法

import { useAiAction } from '@/composables'

// 定义操作处理器
const actionHandlers = {
  // 简单函数形式
  getUserInfo: async (args: { userId: number }) => {
    const user = await UserAPI.getById(args.userId)
    console.log('用户信息:', user)
  },
  
  // 配置对象形式
  updateUser: {
    execute: async (args: { userId: number; name: string }) => {
      await UserAPI.update(args.userId, { name: args.name })
    },
    needConfirm: true,
    confirmMessage: (args) => `确认将用户名修改为 "${args.name}" 吗？`,
    successMessage: '用户信息修改成功'
  }
}

// 使用 useAiAction
const { executeAiAction, handleAutoSearch } = useAiAction({
  actionHandlers,
  onRefresh: () => fetchUserList(),
  onAutoSearch: (keywords) => {
    queryParams.keywords = keywords
    fetchUserList()
  }
})

配置选项

interface UseAiActionOptions {
  /** 操作映射表：函数名 -> 处理器 */
  actionHandlers?: Record<string, AiActionHandler>
  
  /** 数据刷新函数（操作完成后调用） */
  onRefresh?: () => Promise<void> | void
  
  /** 自动搜索处理函数 */
  onAutoSearch?: (keywords: string) => void
  
  /** 当前路由路径（用于执行命令时传递） */
  currentRoute?: string
}

操作处理器类型

简单函数形式

const handler = async (args: any) => {
  // 直接执行操作
  await doSomething(args)
}

配置对象形式

interface AiActionHandler {
  /** 执行函数 */
  execute: (args: any) => Promise<void> | void
  
  /** 是否需要确认（默认 true） */
  needConfirm?: boolean
  
  /** 确认消息（支持函数或字符串） */
  confirmMessage?: string | ((args: any) => string)
  
  /** 成功消息（支持函数或字符串） */
  successMessage?: string | ((args: any) => string)
  
  /** 是否调用后端 API（默认 false） */
  callBackendApi?: boolean
}

返回值

名称	类型	说明
executeAiAction	(action: any) => Promise<void>	执行 AI 操作
executeCommand	(name, args, options) => Promise<void>	执行后端命令
handleAutoSearch	(keywords: string) => void	处理自动搜索

完整示例

<script setup lang="ts">
import { useAiAction } from '@/composables'
import UserAPI from '@/api/system/user'

const queryParams = reactive({
  keywords: '',
  pageNum: 1,
  pageSize: 10
})

const tableData = ref([])

// 获取用户列表
async function fetchUserList() {
  const res = await UserAPI.getPage(queryParams)
  tableData.value = res.list
}

// 配置 AI 操作处理器
const { executeAiAction } = useAiAction({
  actionHandlers: {
    // 查询用户
    queryUser: async (args: { keywords?: string }) => {
      if (args.keywords) {
        queryParams.keywords = args.keywords
      }
      await fetchUserList()
    },
    
    // 修改用户
    updateUser: {
      execute: async (args: { userId: number; nickname: string }) => {
        await UserAPI.update(args.userId, { nickname: args.nickname })
      },
      needConfirm: true,
      confirmMessage: (args) => 
        `确认将用户昵称修改为 <strong>${args.nickname}</strong> 吗？`,
      successMessage: '用户信息修改成功'
    },
    
    // 删除用户
    deleteUser: {
      execute: async (args: { userId: number }) => {
        await UserAPI.deleteByIds([args.userId])
      },
      needConfirm: true,
      confirmMessage: '确认删除该用户吗？此操作不可恢复！',
      successMessage: '用户删除成功'
    }
  },
  
  // 操作完成后刷新列表
  onRefresh: fetchUserList,
  
  // 自动搜索处理
  onAutoSearch: (keywords) => {
    queryParams.keywords = keywords
    queryParams.pageNum = 1
    fetchUserList()
  }
})

onMounted(() => {
  fetchUserList()
})
</script>

URL 参数说明

AI 助手通过 URL 参数传递操作信息：

参数	说明	示例
keywords	搜索关键字	?keywords=张三
autoSearch	是否自动搜索	?autoSearch=true
aiAction	AI 操作信息（JSON）	?aiAction=...

工作流程

1. 组件挂载：useAiAction 在 onMounted 时自动检查 URL 参数
2. 自动搜索：如果有 keywords + autoSearch=true，调用 onAutoSearch
3. 执行操作：如果有 aiAction 参数，解析并执行对应的操作处理器
4. 确认对话框：配置了 needConfirm 的操作会显示确认对话框
5. 执行完成：显示成功消息，调用 onRefresh 刷新数据

注意事项

1. 操作处理器命名：需要与 AI 返回的 functionName 一致
2. 参数类型：确保处理器的参数类型与 AI 传递的参数匹配
3. 错误处理：处理器内部的错误会被捕获并显示错误消息
4. 组件卸载：组件卸载后不会执行任何回调

相关链接

• AiAssistant 组件
• 实时通信