asai-vue-host-form — 动态表单渲染插件

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-host-form | src/components/index.ts | —（全局组件） | Host |

概述

asai-vue-host-form 是动态表单渲染引擎，根据 JSON 配置递归生成表单，支持输入、只读展示、JSON 编辑、图片上传裁剪与字段规则控制。

集成方式

// monorepo — webclient/src/utils/index.ts
import AsaiVueHostForm from '../plugs/asai-vue-host-form/src/components/index';
// import '/node_modules/asai-vue-host-form/dist/asai-vue-host-form.css';
// npm
// import AsaiVueHostForm from '@estun/asai-vue-host-form';

app.use(AsaiVueHostForm, lib);

<AsaiFormLi :ujt="ujt" :asaidata="formConfig" :formdata="formData" :opt="{ isedit: true }" />

独立性约束

• 禁止 cross-import 其它 plugs/*。
• 图片裁剪弹窗通过 $global.pop 与 PopBox 运行时集成，不 import asai-vue-host-popbox。

主要 API / 导出

| 组件 | 说明 | |------|------| | AsaiFormLi | 表单列表递归渲染器 | | AsaiFormLabel / AsaiFormLabelArea | 标签与区域 | | AsaiFormShow | 只读展示 | | AsaiTextarea / AsaiTextJson | 多行 / JSON 编辑 | | AsaiUploadImgCut / AsaiUploadImgCutPop | 图片裁剪与弹窗 |

性能说明

• 全局组件 lazy 加载（loadvue eager: false），首次使用表单时才拉 chunk。
• 递归渲染大对象时注意字段数量；自定义组件通过 cmComp(key) 按需注入。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0",
    "@estun/asai-vue-host": "^1.0.0",
    "@estun/asai-vue-host-popbox": "^1.0.0"
  }
}

核心组件

AsaiFormLi

| Props | 说明 | |-------|------| | ujt | 全局上下文 | | asaidata | 表单配置（rule、lang） | | formdata | 表单数据（双向） | | opt.isedit | 编辑 / 添加模式 |

渲染逻辑：

1. noedit/noadd == 2 → 只读（AsaiFormShow）
2. 值为对象 → 递归；基本类型 → AsaiInput
3. noadd/noedit == 1 → 隐藏

asaidata 配置

| 参数 | 说明 | |------|------| | rule[key].noedit/noadd | 0=正常, 1=隐藏, 2=只读 | | rule[key].require | 必填 | | rule[key].type | text/number 等 | | lang[key] | 字段标签 | | cmComp(key) | 自定义组件钩子 |

文件结构

asai-vue-host-form/
├── src/components/asui/form/
│   ├── AsaiFormLi.vue / AsaiFormShow.vue
│   └── AsaiUploadImgCut*.vue
└── README.md