mixlinker-actionitem

@mixlinker/actionitem

ActionItem 动态表单组件 - 支持多种表单类型、字段联动、WebSocket 数据交互

安装

npm install @mixlinker/actionitem
# 或
pnpm add @mixlinker/actionitem

使用

全局注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import { ActionItemPlugin } from '@mixlinker/actionitem'
import '@mixlinker/actionitem/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(ActionItemPlugin)

局部使用

<template>
  <ActionItem 
    :config="config"
    :show-toolbar="true"
    :show-ws-controls="true"
    @submit="onSubmit"
    @ws-data="onWsData"
  />
</template>

<script setup>
import { ActionItem } from '@mixlinker/actionitem'
import '@mixlinker/actionitem/style.css'

const config = {
  action_name: '用户信息',
  params: [
    { key: 'name', cn_name: '姓名', form_type: 'text', required: true },
    { key: 'age', cn_name: '年龄', form_type: 'number' }
  ]
}

const onSubmit = (data) => console.log('提交:', data)
const onWsData = (data) => console.log('WebSocket:', data)
</script>

直接使用类

import { ActionItemComponent } from '@mixlinker/actionitem'

const acti = new ActionItemComponent({
  action_name: '表单',
  params: [...]
})

// 连接 WebSocket
acti.connectWebSocket('ws://localhost:8080', {
  onData: (data) => console.log(data)
})

// 导出数据
const result = acti.exportToOriginalFormat()

Props

属性	类型	默认值	说明
config	ActionItemConfig	-	表单配置
style	ActionItemStyle	-	样式配置
wsUrl	string	-	WebSocket URL
autoConnect	boolean	false	自动连接 WebSocket
showToolbar	boolean	true	显示工具栏
showWsControls	boolean	true	显示 WebSocket 控制

Events

事件	参数	说明
submit	data	提交表单
generate	data	生成 JSON
wsConnect	-	WebSocket 连接成功
wsDisconnect	-	WebSocket 断开
wsData	data	收到 WebSocket 数据
wsError	error	WebSocket 错误

支持的 form_type

• text, textarea, select, radio_group, checkbox_group
• number, switch, date_picker, time_picker
• file_upload, sub_form, hidden

联动功能

通过 rules 配置实现字段联动：hidden, disabled, required, enum, placeholder, default_value, tooltip

开发

# 安装依赖
pnpm install

# 启动测试环境
pnpm test

# 构建
pnpm build

License

MIT