Schema 驱动的编辑组件
服务端下发一份字段 schema,前端据此渲染出整套编辑表单、逐字段控件,以及审阅改动所需的差异对比、提案队列与修订历史视图。组合 KunUI,自身不含任何 CSS。
pnpm add @nextmoe/edit-ui-nuxt @nextmoe/edit-ui-vue @nextmoe/edit-ui-core它替你解决什么
一份 schema,一整个表单
服务端说哪些字段可编辑,前端就渲染哪些。控件由 kind 与 diff_hint 推导,也可以在 config 里逐字段指定。
只吐出 patch
表单内部维护一份工作副本,update:patch 只给出与服务端值真正不同的字段——深比较,锁定与无权限字段永远不会出现。
后端知识全部外置
上传图片、搜索实体、把 id 解析回名称,都是你通过 EditFieldConfig 注入的函数。包里没有任何默认请求或内置 endpoint。
未知控件降级而非崩溃
编辑引擎可以先于前端发布新控件。遇到不认识的 control,字段退化为只读展示,既不抛错也不会伪装成可编辑的输入框。
零 CSS,跟随 KunUI 主题
全部使用 KunUI 语义色板 token,明暗自动切换,没有 dark: 前缀,也没有任何渐变背景。
对中文友好的 diff
文本差异基于 Intl.Segmenter 按词切分中文而非逐字,长段未改动内容自动折叠,图片差异只画变化的那几张。
三个包
三包版本锁步发布。只用 Vue 的项目装前两个即可,Nuxt 项目再加上模块包。
框架无关的 TypeScript:schema 与协议类型,以及纯函数形式的 diff、格式化与徽标助手。依赖闭包里没有 Vue。
Vue 3 组件层:编辑表单、逐字段控件,以及差异 / 提案 / 修订视图。自身不含任何 CSS。
Nuxt 模块:按可配置前缀(默认 Edit)自动导入全部组件,模板里无需 import。
两条接入路径
Nuxt 项目用模块自动导入全部组件,模板里一个 import 都不用写;任何 Vue 3 项目也可以直接按名字引入。两条路都需要一行很容易被漏掉的 Tailwind @source 配置——漏了不会报错,只会没有样式。