企业官网建设流程全解析

vue-vben-admin AI 模块上手：3 个配置让后台长出预测能力

【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin

运营早上打开后台，销售趋势图右下角已经多了一条预测曲线，她顺手把下月备货量调高了 15%。这就是 vue-vben-admin AI 模块要做的事：不碰算法，只改配置，后台就有了智能数据分析能力。

你将得到什么

按下面这份清单验收，做完你手里会有：

• 本地模型（在浏览器里跑推理）完整跑通，数据不出内网
• 预测组件挂到仪表盘，历史流水自动生成下一期预测点
• 表单开启智能校验，提交时自动标出异常值
• 一条可复制的本地 / 云端切换方案

关键路径速查 📁

• AI 源码：组件与 hook 所在目录，装插件后在这里找入口
• 示例页：现成演示，改参数就能出效果
• 请求层：云端 API 的 HTTP 调用从这里走
• 官方文档：配置项和术语的完整说明

第1步｜装依赖

pnpm install @vben/ai @tensorflow/tfjs

装完在node_modules里能直接找到@vben/ai，少一步手动接线。

第2步｜写配置

在src/settings/ai.ts新建文件：

export default { enable: true, modelType: 'local', // 数据不出浏览器 modelPath: '/models/simple-linear-regression/model.json', // 线性回归（拟合一条直线） cloudService: { provider: 'tencent', // 仅 modelType 为 'cloud' 时生效 endpoint: 'https://ai-api.example.com/predict' } }

modelType: 'local'意味着所有计算在浏览器内完成，内部后台用它最省心。

第3步｜注册插件

在playground/src/main.ts的createApp之后插入增量行：

import { setupAI } from '@vben/ai' import aiSettings from './settings/ai' setupAI(app, aiSettings) // 一行完成注册

插件注册后，预测组件即可直接使用，不需要改路由。

vue-vben-admin 预测组件：数据预测 📈

给 3 个月销售流水，组件自动在趋势图末尾画出第 4 月的预测点：

<vben-ai-predictor :data="salesData" x-field="date" y-field="amount" @prediction="onPrediction" />

salesData是{ date, amount }数组，预测结果从onPrediction拿。样本少于 30 条时置信度低，建议切云端模型再出结论。

智能表单校验：提交时发生了什么

打开ai-validate后，提交走三段：规则校验 → AI 复判 → 异常弹 toast 提示但不阻断提交。

const schema = defineFormSchema([ { field: 'sales_amount', component: 'InputNumber', label: '销售金额', ai: { checkType: 'anomaly-detection', referenceField: 'customer_type' } } ])

金额字段按历史分布做异常检测（偏离常态即提示）。纯文本偏好类字段没有可比的数值分布，这套校验帮不上忙。

选型与避坑 💡

Q：本地模型和云端 API 怎么选？看数据敏感度。数据不能出浏览器就选本地，精度要求高、样本充足就上云端；两者共用同一份配置，只切modelType。

Q：推理把主线程卡住了怎么办？把推理任务挪进 WebWorker，参考 packages/utils/src/helpers/worker.ts，主线程只负责渲染。

Q：AI 服务挂了，用户看到什么？什么都不该看到。请求层捕获错误后静默降级回传统校验，页面照常可用，用户无感知。

Q：性能要盯到什么程度？给推理耗时打一条日志，超过 1s 打 warn 就够了，不用另建监控页。

三个业务落点

• 📊 库存排期：按预测曲线提前 4 周备货
• 🚨 财务风控：日结批次自动圈出偏离 3σ 的单据
• ✍️ 录入提效：注册表单按已填字段补全省市

下一步

打开 示例页，把modelType切成 cloud 再跑一遍，对比两边差异。想继续深入，可以从自定义 AI 插件、模型训练两条路径看起。

【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin