material-component-devlisted

# FlowGram Material Component Development ## 概述 本 SKILL 用于指导在 FlowGram 项目的 `@flowgram.ai/form-materials` 包中创建新的物料组件。 ## 核心原则 ### 1. 组件位置 - ✅ **在现有包中创建**：直接在 `packages/materials/form-materials/src/components/` 下创建组件目录 - ❌ **不要单独拆包**：不创建新的 npm 包，保持简洁 ### 2. 代码质量 - ✅ **使用 named export**：所有导出使用 named export 提高 tree shake 性能 - ❌ **不写单元测试**：通过 Storybook 进行手动测试 - ✅ **通过类型检查**：必须通过 `yarn ts-check` - ✅ **符合代码规范**：遵循项目 ESLint 规则 ### 3. 物料设计 - ✅ **保持精简**：只保留必要的 props，不添加非核心功能配置项 - ✅ **功能单一**：一个物料只做一件事 - ✅ **使用内部依赖**：优先使用 FlowGram 内部的组件和类型 ### 4. 技术栈 - **UI 组件库**：`@douyinfe/semi-ui` - **代码编辑器**：`JsonCodeEditor`, `CodeEditor` 等来自 `../code-editor` - **类型定义**：`IJsonSchema` 来自 `@flowgram.ai/json-schema`（不使用外部的 `json-schema` 包） - **React**：必须显式 `import React` 避免 UMD 全局引用错误 ## 开发流程 ### Step 1: 规划组件结构 确定组件的： - **功能**：组件要解决什么问题 - **Props 接口**：只保留核心必需的 props - **命名**：使用 PascalCase，清晰描述功能 ### Step 2: 创建目录结构 ```bash mkdir -p packages/materials/form-materials/src/components/{组件名}/utils ``` 典型结构： ``` packages/materials/form-materials/src/components/{组件名}/ ├── index.tsx # 导出文件 (named export) ├── {组件名}.tsx # 主组件 ├── {辅助组件}.tsx # 可选的辅助组件 └── utils/ # 可选的工具函数 └── *.ts ``` ### Step 3: 实现组件 #### 3.1 工具函数（如需要） ```typescript // utils/helper.ts /** * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates * SPDX-License-Identifier: MIT */ export function helperFunction(input: string): Output { // 实现逻辑 } ``` #### 3.2 辅助组件（如需要