AI 助手
vue3-element-admin 集成了 AI 助手功能,支持通过自然语言执行后台管理操作。
核心特性
- 🤖 自然语言交互 - 用自然语言描述操作意图,AI 解析并执行
- 🔒 受控执行 - 基于 Function Calling,只允许调用预定义的工具函数
- ✅ 操作确认 - 执行前展示操作预览,用户确认后才执行
- 📝 审计追踪 - 记录所有 AI 操作日志,支持追溯
技术方案
为什么选择 Function Calling?
管理系统涉及增删改操作,直接让 AI 生成 SQL 风险太高(注入、越权、误删)。Function Calling 让 AI 只能调用你预先声明的工具函数,操作边界可控。
快速开始
1. 后端配置
需要配置通义千问 API Key:
yaml
# application-dev.yml
spring:
ai:
openai:
api-key: ${DASHSCOPE_API_KEY}
base-url: https://dashscope.aliyuncs.com/compatible-mode
chat:
options:
model: qwen-plus2. 前端启用
typescript
// src/settings.ts
export default {
aiEnabled: true // 启用 AI 助手
}bash
# .env
VITE_ENABLE_AI_ASSISTANT=true3. 使用组件
vue
<template>
<AiAssistant />
</template>相关文档
| 文档 | 说明 |
|---|---|
| 完整集成指南 | 详细的后端集成步骤、接口约定、最佳实践 |
| AiAssistant 组件 | 前端组件 API 和使用方法 |
| useAiAction | 业务页面执行映射 Composable |
安全建议
- 权限控制 - AI 能调用的工具函数必须受权限控制
- 操作确认 - 写操作必须让用户确认
- 审计日志 - 记录谁在什么时间执行了什么操作
- 幂等保护 - 高风险操作加幂等校验,防止重复执行
