@nstc-ai/ai-assistant

AI 智能辅助组件库，基于 Vue 2 + Element UI。提供两个组件 + 一组工具函数：

• AiAssistant —— 悬浮抽屉式 AI 助手，支持表单预填 / 列表勾选推荐 / 调拨方案生成三种模式
• AiCommandInput —— 纯输入区组件（标题 + 输入框 + 快捷指令 + 文本历史），可单独使用，也可被 AiAssistant 内部复用

安装

npm install @nstc-ai/ai-assistant

全局注册

import AiAssistant from '@nstc-ai/ai-assistant'
// Vue.use 会同时全局注册 AiAssistant 和 AiCommandInput 两个组件
Vue.use(AiAssistant)

也可组件内按需引入：

import { AiAssistant, AiCommandInput } from '@nstc-ai/ai-assistant'
components: { AiAssistant, AiCommandInput }

组件一：AiAssistant

悬浮按钮 + 弹出抽屉形态。传入 pageId 后，组件会自动调技能库（默认 http://localhost:9181）匹配技能文件，把文件里配置的 mode / quickCommands 作为默认值；父组件显式传的 prop 优先级更高。

基础用法

<AiAssistant
  ref="aiAssistant"
  page-id="t3_days_config"
  :context="aiContext"
  placeholder="描述要填的内容..."
  @result="applyAiResult"
/>

Props

| prop | 说明 | 类型 | 默认值 | |------|------|------|--------| | pageId | 页面标识，匹配后端 skill 文件 frontmatter.pageId | String | '' | | placeholder | 输入框提示语 | String | '描述要填的内容' | | formSchema | 表单字段定义（也可用 ref.setSchema 动态传） | Array | [] | | context | 额外的业务规则 | Object | null | | forceShow | 强制显示（默认仅开发环境显示，线上不显示） | Boolean | null | | mode | 'prefill' 表单预填 | 'recommend' 列表推荐 | 'plan' 调拨方案。不传时取技能文件 frontmatter.mode，再不传则 'prefill' | String | '' | | quickCommands | 快捷指令 [{ label, text }]。不传时取技能文件 frontmatter.quickCommands | Array | [] |

优先级：父组件显式传的 prop > 技能文件 frontmatter 配置 > 内置默认值。

事件

| 事件 | 触发时机 | 回调参数 | |------|----------|----------| | result | prefill 模式预填成功 | 预填结果对象 { 字段名: 值 } | | recommend | recommend 模式推荐成功 | { indices: Number[], reason: String } | | plan | plan 模式解析成功 | 结构化调拨规则对象 |

ref 方法

| 方法 | 说明 | |------|------| | setSchema(schema) | 动态设置表单字段定义（表单字段动态变化时用） | | setRecommendData(rows, columns) | 设置推荐模式所需的列表数据 |

各模式示例

表单预填（prefill） —— AI 解析自然语言，回填表单字段

<AiAssistant page-id="addCash" :form-schema="schema" @result="onResult" />

<script>
export default {
  methods: {
    onResult(data) {
      // data: { payAcntNo: '...', amount: 10000, ... }
      Object.assign(this.form, data)
    }
  }
}
</script>

列表勾选推荐（recommend） —— AI 根据描述，推荐勾选表格行

<AiAssistant ref="ai" mode="recommend" @recommend="onRecommend" />

<script>
export default {
  mounted() {
    // 把当前表格数据传给组件
    this.$refs.ai.setRecommendData(this.tableData, this.columns)
  },
  methods: {
    onRecommend({ indices, reason }) {
      // 按 indices 勾选对应行
    }
  }
}
</script>

调拨方案（plan） —— AI 解析自然语言为结构化规则，父组件按规则计算

<AiAssistant page-id="aiDispatch" mode="plan" @plan="onPlan" />

<script>
export default {
  methods: {
    onPlan(plan) {
      // plan: { filters, amountRule, targetAccount, expectDate, ... }
      // 父组件负责按规则算金额、生成调拨行
    }
  }
}
</script>

组件二：AiCommandInput

纯输入区组件，不含任何业务逻辑（不调 AI、不算金额）。自带头部标题栏 + 输入框 + 快捷指令 + 文本历史（localStorage 持久化）+ 卡片外观。

适合需要自己控制 AI 调用流程的场景（如 stm-settlement 的智能调拨页，方案表格/图表/账户抽屉都由业务页自己管，只复用输入区）。

基础用法

<AiCommandInput
  ref="cmdInput"
  class="m-l-s m-r-s m-t-s"
  title="AI 调拨指令"
  hint="— 用自然语言描述你的调拨需求"
  page-id="aiDispatch"
  placeholder="例如：把余额100万以上的调入建行"
  :loading="loading"
  history-key="ai_dispatch"
  @submit="handleSubmit"
/>

Props

| prop | 说明 | 类型 | 默认值 | |------|------|------|--------| | title | 标题栏标题（传了才显示标题栏，如 'AI 调拨指令'） | String | '' | | hint | 标题栏副标题（如 '— 用自然语言描述你的调拨需求'） | String | '' | | placeholder | 输入框提示语 | String | '描述要填的内容' | | pageId | 页面标识，匹配技能库技能文件 frontmatter.pageId，自动拿 quickCommands 作为默认值 | String | '' | | quickCommands | 快捷指令 [{ label, text }]。不传时取技能文件 frontmatter.quickCommands | Array | [] | | historyKey | localStorage 存储键名，用于隔离不同页面的历史 | String | 'ai_command_history' | | loading | 加载态（禁用输入/发送，按钮转 loading 图标） | Boolean | false |

快捷指令优先级：父组件显式传的 quickCommands > 技能文件 frontmatter.quickCommands。 传了 pageId 后，组件 created 时自动调技能库（默认 http://localhost:9181）匹配技能文件。

事件

| 事件 | 触发时机 | 回调参数 | |------|----------|----------| | submit | 用户按回车 / 点发送按钮 / 点快捷指令时触发 | (text: String) 用户输入的文本 |

注意：触发 submit 时不会清空输入框，是否清空由父组件决定。

ref 方法

| 方法 | 说明 | |------|------| | addHistory(text) | 存一条历史（去重、置顶、最多保留 20 条）。父组件调用 AI 成功后调用 | | clearHistory() | 清空历史 |

完整示例

<template>
  <AiCommandInput
    ref="cmdInput"
    title="AI 助手"
    :quick-commands="[{ label: '示例', text: '帮我...' }]"
    :loading="loading"
    history-key="my_page"
    @submit="handleAi"
  />
</template>

<script>
import { AiCommandInput } from '@nstc-ai/ai-assistant'

export default {
  components: { AiCommandInput },
  data() {
    return { loading: false }
  },
  methods: {
    async handleAi(text) {
      this.loading = true
      try {
        const result = await callYourAi(text)
        // 处理结果...
        // 成功后记录历史
        this.$refs.cmdInput.addHistory(text)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

工具函数

从包里按需引入，减少重复代码：

import {
  buildColumns,
  buildSelectField,
  buildMultiSelectField,
  buildNumberField,
  buildTextField,
  addTableRow,
  checkTableRows,
  sumAmount
} from '@nstc-ai/ai-assistant'

| 函数 | 说明 | |------|------| | buildColumns(tableHeaders) | 从表格列定义提取 AI 需要的 [{ prop, label }] | | buildSelectField(name, label, options, valueKey, labelKey, extra) | 构建 select 字段定义 | | buildMultiSelectField(...) | 构建 multi-select 字段定义（参数同上） | | buildNumberField(name, label, extra) | 构建 number 字段定义 | | buildTextField(name, label, extra) | 构建 text 字段定义 | | addTableRow(tableData, values, defaults, beforePush) | 往可编辑表格新增一行（预填结果回填用） | | checkTableRows(vm, tableData, indices, messagePrefix) | 批量勾选 vxe-table 行（推荐结果回填用） | | sumAmount(rows, amountField) | 计算选中行金额合计 |

本地调试（npm link）

# 1. 在本包目录建立全局软链
cd D:\code标准\3.0\packages\ai-assistant
npm link

# 2. 在各项目里链接使用（每个项目执行一次）
cd <你的项目目录>
npm link @nstc-ai/ai-assistant

链接后改公共包代码，所有链接的项目实时生效（HMR）。

发布 npm

# 1. 改 package.json 的 version
# 2. 登录（已登录可跳过）
npm login
# 3. 发布
npm publish --access public

发布后各项目取消 link，安装正式包：

npm unlink @nstc-ai/ai-assistant
npm install @nstc-ai/ai-assistant

业务代码无需任何改动。

依赖

• Vue ^2.6.0
• Element UI ^2.15.0（peerDependencies）