diff --git a/package.json b/package.json index c55886f..e19855d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@inkreach/inkreach-teable", - "version": "0.1.7", + "version": "0.1.8", "description": "CLI (command: inkreach-teable) for operating inkreach-teable: tables, fields, records, views, and the self-built automation engine (8 triggers + 7 actions).", "license": "MIT", "type": "commonjs", diff --git a/skills/inkreach-teable-plugin/SKILL.md b/skills/inkreach-teable-plugin/SKILL.md index 5cd6f15..d5641bf 100644 --- a/skills/inkreach-teable-plugin/SKILL.md +++ b/skills/inkreach-teable-plugin/SKILL.md @@ -69,6 +69,7 @@ JS that executes in the host page and accesses host APIs through | 1. Understand architecture | `dynamic-plugins/overview.md` | always first — how `window.__TEABLE_HOST__`, PluginLoader, PluginSlot work | | 2. Dev workflow | `dynamic-plugins/dev-workflow.md` | when building a plugin — the step-by-step recipe from scaffold to deploy | | 3. SDK API | `dynamic-plugins/sdk-api.md` | when writing plugin logic — definePlugin, PluginContext, events, storage, useSelection, native form embedding (`NativeForm` Tier-1 injection / `NativeFormScope`+`useNativeForm` Tier-2 kit), NativeGrid | +| 3b. Native form quick answer | `dynamic-plugins/native-form.md` | **when the user ASKS whether/how to embed native field editors, custom form layout, or multi-step forms — read this FIRST and answer directly (consultative questions need no scaffold/build)** | | 4. Deployment | `dynamic-plugins/deployment.md` | when uploading + enabling + authority matrix permissions | | 5. Troubleshooting | `dynamic-plugins/troubleshooting.md` | before writing logic — common pitfalls (host globals, developer whitelist, AM, empty states) | | Ref: batch-edit-pro | `plugins/batch-edit-pro/` | the canonical example — contextMenu plugin, full React + SDK | diff --git a/skills/inkreach-teable-plugin/dynamic-plugins/native-form.md b/skills/inkreach-teable-plugin/dynamic-plugins/native-form.md new file mode 100644 index 0000000..735a9ed --- /dev/null +++ b/skills/inkreach-teable-plugin/dynamic-plugins/native-form.md @@ -0,0 +1,75 @@ +# Native form embedding — quick answer + +**问题:能不能在插件里做自定义布局的表单(多步表单/侧栏表单),每一步用系统 +原生字段编辑器,不自己重写输入组件?** + +**能。宿主暴露了完整的原生表单注入能力,共两档。咨询类问题到这里就有答案了, +不需要先去搭工程验证。** + +| 需求 | 用哪档 | 核心 API(都在 `window.__TEABLE_HOST__`) | +|---|---|---| +| 整表单嵌入面板/视图,能裁剪字段、插自定义内容 | **Tier-1 整表注入** | `host.NativeForm` | +| 自己控制每行渲染、逐步表单、校验与暂存 | **Tier-2 逐字段套件** | `host.NativeFormScope` + `host.NativeFormField` + `host.useNativeForm()` | + +## Tier-1:`` 整表注入(最常用) + +```typescript +const { NativeForm } = window.__TEABLE_HOST__; + +function MyFormPanel() { + return ( +

提单

}, + ]} + interceptSubmit={(fields) => fields} // 提交前改写载荷(原生提交与自动化照常) + /> + ); +} +``` + +要点:原生提交、校验、`formSubmitted` 自动化全部照常;虚拟值放 +`__virtual.`,提交时自动剥离。 + +## Tier-2:多步表单(逐步切换字段、原生编辑器) + +```typescript +const { NativeFormScope, NativeFormField, useNativeForm } = window.__TEABLE_HOST__; + +const STEPS = [ + ['fldTitle', 'fldCustomer'], + ['fldAmount', 'fldUrgency'], + ['fldNotes'], +]; + +function Stepper({ formId }: { formId: string }) { + return ( + {/* 状态/L localStorage 暂存由 Scope 接管 */} + + + ); +} + +function StepBody({ formId }: { formId: string }) { + const { values, setValue, errors, fields, step, setStep } = useNativeForm({ formId, steps: STEPS }); + return ( +
+ {STEPS[step].map((fid) => ( + {/* 100% 原生字段编辑器 */} + ))} + + +
+ ); +} +``` + +## 决策与边界 + +- 校验/错误提示:走原生(`errors` 由 hook 暴露);自定义校验放 `interceptSubmit`。 +- `submitOverride` 会**绕过**原生提交 → `formSubmitted` 自动化不会触发(要触发就别用它)。 +- computed/lookup 字段永远不可编辑(原生行为,注入也一样)。 +- 详细 props 表与虚拟字段模式见 [sdk-api.md](sdk-api.md) 的 `NativeForm` / `NativeFormScope` 章节。