@sunzhiyang/tdesign-form-create

基于用户提供的本地 form-create workspace 源码快照收敛出来的单一公开 npm 包，面向 XZF Demo 与外部 Vue3/TDesign 项目提供可视化表单设计器、运行态渲染、schema 工具和 Studio 契约类型。

安装

npm install @sunzhiyang/tdesign-form-create vue tdesign-vue-next

消费者运行侧主要依赖 Vue3 与 TDesign Vue Next peer；本包构建/发布建议使用 Node.js 22+ 与 pnpm 10+，普通浏览器项目不强制 Node 22 运行。

基础用法

<script setup>
import { TdesignFormCreateStudio, createDefaultFormCreateSchema } from '@sunzhiyang/tdesign-form-create';
import '@sunzhiyang/tdesign-form-create/style.css';

const initialSchema = createDefaultFormCreateSchema();
</script>

<template>
  <TdesignFormCreateStudio :initial-schema="initialSchema" />
</template>

子入口

• @sunzhiyang/tdesign-form-create/schema：导出 canonical schema 常量、类型与 normalizeSchema。
• @sunzhiyang/tdesign-form-create/designer：导出 vendored 设计器 store、预览会话与 TdesignFormCreateDesigner。
• @sunzhiyang/tdesign-form-create/runtime-tdesign：导出 TDesign 运行态渲染组件与 runtime seam。
• @sunzhiyang/tdesign-form-create/studio-contracts：导出项目、草稿、发布和模板仓储契约类型。
• @sunzhiyang/tdesign-form-create/style.css：设计器与运行态样式。

Demo 能力

TdesignFormCreateStudio 内置：

1. 物料面板、设计画布、属性面板；
2. TDesign 表单预览；
3. schema JSON 导入、导出与复制；
4. 示例模板载入；
5. 基于 localStorage 的草稿保存与恢复。

样式仅使用纯色、边框和阴影，不使用渐变色。

发布检查

npm test
npm run typecheck
npm run lint
npm run build
npm pack --dry-run

发布 tarball 不包含 workspace、本地路径或软链接依赖，也不发布 node_modules 或外部 form-create 私有 app 产物。