material-component-doclisted

# FlowGram 文档的组织结构 - **英文文档**: `apps/docs/src/en` - **中文文档**: `apps/docs/src/zh` - **Story 组件**: `apps/docs/components/form-materials/components` - **物料源码**: `packages/materials/form-materials/src/components` - **文档模板**: `./templates/material.mdx` # 组件物料文档撰写流程 ## 1. 源码定位 在 `packages/materials/form-materials/src/components` 目录下确认物料源代码地址。 **操作**： - 使用 Glob 工具搜索物料文件 - 确认目录结构（是否有 hooks.ts, context.tsx 等） - 记录导出名称和文件路径 ## 2. 需求收集 向用户询问物料使用实例和具体需求。 **收集信息**： - 主要使用场景 - 典型代码示例（1-2 个） - 特殊配置或高级用法 - 是否需要配图 ## 3. 功能分析 深入阅读源代码，理解物料功能。 **分析要点**： - Props 接口（类型、默认值、描述） - 核心功能和实现方式 - 依赖关系（FlowGram API、其他物料、第三方库） - Hooks 和 Context - 特殊逻辑（条件渲染、副作用等） ## 4. Story 创建 在 `apps/docs/components/form-materials/components` 下创建 Story 组件（详见下方 Story 规范）。 ## 5. 文档撰写 基于模板 `./templates/material.mdx` 撰写完整文档。 **文档位置**： - 中文：`apps/docs/src/zh/materials/components/{物料名称}.mdx` - 英文：`apps/docs/src/en/materials/components/{物料名称}.mdx`（翻译后） ## 6. 质量检查 **检查清单**： - [ ] Story 组件能正常运行 - [ ] 代码示例准确无误 - [ ] API 表格完整 - [ ] 依赖链接正确可访问 - [ ] 图片路径正确 - [ ] Mermaid 流程图语法正确 - [ ] CLI 命令路径准确 **用户确认中文文档的撰写后，再执行翻译**。 **用户确认中文文档的撰写后，再执行翻译**。 **用户确认中文文档的撰写后，再执行翻译**。 --- # Story 组件规范 > **参考示例**: `apps/docs/components/form-materials/components/variable-selector.tsx` ## 命名规范 **文件命名**: kebab-case，与物料名称一致 - ✅ `variable-selector.tsx` - ✅ `dynamic-value-input.tsx` - ❌ `VariableSelector.tsx` **Story 导出命名**: PascalCase + "Story" 后缀 - `BasicStory` - 基础使用（必需） - `WithSchemaStory` - 带 Schema 约束 - `DisabledStory` - 禁用状态 - `C