用途:将 Markdown(含 .md、.mdoc、.markdown)里写死的 Vue 组件,改造为带插槽和 props 的 MDC 组件,使文案等内容可在 Nuxt Studio 的 TipTap 编辑器中编辑,同时保持与原渲染 1:1 的视觉一致。
主要能力与流程:先选择目标 Markdown 文件与其中的组件并确认;逐个读取组件,涉及 Nuxt UI 组件时查询其插槽 API;按元素性质分类——硬编码文本转为具名插槽,重复项拆为带自身插槽的子组件,图标名、URL、布尔值转为 props,兄弟间颜色/变体差异用 color prop 加静态查找表,交互逻辑保留在组件内部不作为插槽。随后设计组件树(父区块、集合包装器、单项组件、交互子组件),创建 Vue 组件(用 <slot name="..." mdc-unwrap="p" /> 处理可编辑文本,包裹 Nuxt UI 时转发插槽并用 :ui 覆盖样式,交互状态用 v-show 保持挂载),再更新 Markdown 中的 MDC 写法(插槽按视觉顺序排列,纯文本插槽在前,嵌套组件插槽在后,配置可用内联 props 或 YAML frontmatter),最后逐项核对视觉一致性并更新项目记忆文件。
适用场景:需要让 Nuxt Content 页面内容由编辑者在 Studio 中直接修改,而不仅是开发者改代码时。
限制:需已有对应 Vue 组件文件;参考资料涉及插槽命名、MDC 语法、Nuxt Studio、Nuxt 组件自动发现、Nuxt UI 组件 API 与 Tailwind 类名清理等,具体规则以这些文件为准;技能未说明兼容版本、安装命令或费用信息,暂未提供。