@sunzhiyang/xzf-demo-showcase

这是 XZF Vue admin 工程专用的 Demo 示例源码模板包。正式项目默认不包含 Demo；需要学习、培训或演示时，再通过本包把 Demo 页面、路由、配置和模板测试写回当前 admin 工程。

适配范围

• 仅适配当前 XZF Vue admin 目录结构。
• 不是通用 Vue 运行时插件，也不会在宿主保留 Demo 开关或适配层。
• tdesign-form-create 示例通过 npm 包 @sunzhiyang/tdesign-form-create 引入，不依赖宿主本地 packages 路径。

安装 Demo

在 admin 目录执行：

npm install -D @sunzhiyang/xzf-demo-showcase @sunzhiyang/tdesign-form-create
npm exec xzf-demo-showcase install -- --target .

安装器会复制以下白名单内容：

• src/views/demo/**
• src/config/demo.js
• src/router/routes/modules/demo/index.js
• tests/demo-code-example.spec.mjs

启用与访问

启动前端后，在“开发示例”菜单内进入独立分组“可视化表单设计器”，访问：

/demo/tdesign-form-create

该页面由 @sunzhiyang/tdesign-form-create 提供设计器、预览、JSON/源码、导入导出与 localStorage 草稿保存能力。

查看状态

npm exec xzf-demo-showcase status -- --target .

卸载 Demo

npm exec xzf-demo-showcase uninstall -- --target .
npm remove @sunzhiyang/xzf-demo-showcase @sunzhiyang/tdesign-form-create

卸载器只删除本包写入的 Demo 白名单路径；重复执行也会安全退出。

发布前检查

npm test
npm pack --dry-run
npm pack

常见问题

可视化表单示例依赖从哪里来？

当前 Demo 中的可视化表单示例从 npm 下载 @sunzhiyang/tdesign-form-create（当前已发布 0.1.2，本包依赖范围为 ^0.1.2）。如果构建提示找不到该包，请在 admin 目录补充执行：

npm install -D @sunzhiyang/tdesign-form-create

安装后构建失败

请先确认宿主工程存在安装器提示的必需路径：admin/src/router/routes/index.js、admin/src/router/constant.js、admin/src/hooks、admin/src/utils、admin/src/components、admin/src/config/map.js、admin/src/store，并确认 npm 依赖已经安装完成。