Form-Filling

一个基于 Vue 3 的表单自动填充组件，支持通过图片上传和语音录制来自动识别并填充表单数据。组件现支持通过控制按钮横向展开/收起功能按钮。

安装

npm install form-filling
# 或
yarn add form-filling

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import FormFilling from 'form-filling'

const app = createApp(App)
app.use(FormFilling)
app.mount('#app')

局部引入

<script>
import { FormFilling } from 'form-filling'

export default {
  components: {
    FormFilling
  },
  // ...
}
</script>

组件属性

| 属性名 | 类型 | 必填 | 默认值 | 描述 | |-------|------|------|-------|------| | formData | Object | 否 | {} | 表单数据对象，支持 v-model | | config | Object | 是 | 见下方详情 | 组件配置对象，包含API配置和表单Schema | | buttonStyle | Object | 否 | {width: '48px', height: '48px', backgroundColor: "#1976D2", color: '#fff'} | 按钮样式对象 | | disabled | Boolean | 否 | false | 是否禁用组件 | | language | String | 否 | 'en-US' | 组件多语言，支持 'en-US'（英文）和 'zh-CN'（中文），默认英文 |

config 对象属性

| 属性名 | 类型 | 必填 | 默认值 | 描述 | |-------|------|------|-------|------| | baseUrl | String | 是 | 内部默认值 | API 基础 URL | | agentApiName | String | 否 | 'textExtraction' | API 名称 | | token | String | 是 | 内部默认值 | 认证令牌 | | jsonSchema | Object | 是 | 内部默认值 | 表单结构的 JSON Schema |

组件功能

按钮控制

组件提供了一个主控制按钮，点击后可以横向展开/收起功能按钮（上传和录音）：

• 控制按钮：点击可以展开或收起功能按钮
• 上传按钮：用于上传图片进行信息提取
• 录音按钮：用于录制语音进行信息提取

功能按钮默认隐藏，点击控制按钮后从左侧横向弹出展示。

事件

| 事件名 | 参数 | 描述 | |-------|------|------| | update:formData | formData | 表单数据更新时触发 | | alarmMsg | { type, message } | 消息提示事件，type 可以是 'positive'、'negative' 或 'info' |

类型定义

组件导出了以下类型，可以在您的项目中使用：

import type { 
  JSONSchema, 
  AskOrchestratorAgentRequest,
  ImageFile,
  VoiceFile,
  EnumProperty
} from 'form-filling';

工具函数

组件还导出了一个工具函数，可以直接用于提交数据：

import { submitData } from 'form-filling';

// 使用示例
submitData(
  formData,
  baseUrl,
  headers
).then(response => {
  console.log('数据提交成功:', response);
}).catch(error => {
  console.error('数据提交失败:', error);
});

示例

<template>
  <div>
    <form>
      <label>姓名: <input v-model="form.name" /></label>
      <label>电话: <input v-model="form.phone" /></label>
      <label>地址: <input v-model="form.address" /></label>
    </form>
    
    <FormFilling
      v-model:formData="form"
      :config="formConfig"
      :buttonStyle="{ backgroundColor: '#FF5722', color: '#fff' }"
      @alarmMsg="handleMessage"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        address: ''
      },
      formConfig: {
        baseUrl: "https://api.example.com",
        token: "your-api-token",
        agentApiName: "textExtraction",
        jsonSchema: {
          $schema: "https://json-schema.org/draft/2019-09/schema",
          type: 'object',
          title: "用户信息",
          properties: {
            name: { type: 'string', description: "姓名" },
            phone: { type: 'string', description: "电话号码" },
            address: { type: 'string', description: "地址" }
          },
          required: ["name", "phone"],
          additionalProperties: false
        }
      }
    }
  },
  methods: {
    handleMessage(msg) {
      // 处理组件发送的消息
      console.log(`${msg.type}: ${msg.message}`);
      // 可以根据消息类型显示不同样式的提示
      // msg.type 可以是 'positive'、'negative' 或 'info'
    }
  }
}
</script>

多语言支持

Form-Filling 组件内置多语言支持，默认英文（en-US），可通过 language 属性切换为中文（zh-CN）。所有提示、按钮、消息等均自动切换，无需手动传入词条。

示例：

<FormFilling :language="'zh-CN'" ... /> <!-- 中文界面 -->
<FormFilling :language="'en-US'" ... /> <!-- 英文界面（默认） -->

如需扩展其他语言，可在 src/i18n/lang.ts 文件中添加对应词条。

浏览器兼容性

该组件依赖于以下浏览器 API:

• MediaRecorder 用于录音功能
• navigator.mediaDevices.getUserMedia 用于访问麦克风

确保您的目标浏览器支持这些 API，或提供适当的降级处理。

许可证

ISC MIT License

Copyright (c) 2025 冷静的兔歪歪

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.