本地组件开发

本地组件开发指南

如果你需要为 @goenhance/cms-ui 贡献新组件或定制企业私有组件，请遵循以下步骤。

准备工作

确保你已经克隆了仓库并安装了所有依赖：

pnpm install

开发流程

1. 创建组件目录

进入 UI 包目录，在 src/components 下新建你的组件文件夹：

cd packages/ui/src/components
mkdir MyNewComponent

2. 编写组件逻辑

在文件夹内创建组件文件（如 index.tsx）并使用基础 UI 原语进行构建。

3. 定义属性 Schema

使用 Zod 定义组件的属性 Schema，以便于在 CMS 编辑器中进行校验和属性编辑。

import { z } from 'zod';

export const MyNewComponentSchema = z.object({
  text: z.string().default('默认文本'),
  color: z.string().optional(),
});

4. 导出组件

在 packages/ui/src/index.ts 中导出你的新组件，确保它能被外部识别。

5. 在编辑器中注册

为了让组件出现在 CMS 编辑器的左侧边栏并支持右侧属性编辑，你需要：

• 在 apps/docs/src/components/CMSEditor/constants.ts 中添加组件的默认配置。
• 在 Sidebar.tsx 中注册组件到对应的分类中。
• 在 PropertiesPanel.tsx 中为该组件编写属性配置表单（如果现有通用面板不满足需求）。

调试

使用以下命令启动本地文档和编辑器进行实时预览：

pnpm dev

通过内置的 CMS 编辑器 拖入你的新组件，验证其展现效果和属性联动。