tdesign-create-component

name	tdesign-create-component
description	This skill should be used when creating a new TDesign React component. It provides a complete SOP for scaffolding components in the packages/components or packages/pro-components directories, including file structure, code patterns, and registration steps.

TDesign 组件创建脚手架

本技能提供 TDesign React 新组件开发的完整 SOP 流程。

触发条件

当用户需要执行以下任务时使用此技能：

• 创建新的 TDesign 组件
• 初始化组件脚手架
• 添加新的基础组件或高阶组件

SOP 流程

Step 1: 确定组件类型和目标目录

根据组件性质选择目标位置：

组件类型	目录	说明
基础组件	packages/components/	通用 UI 组件（button, input, select 等）
高阶组件	packages/pro-components/	业务/AIGC 组件（chat, copilot 等）

Step 2: 创建组件目录结构

以组件名 example-component（PascalCase: ExampleComponent）为例：

packages/components/example-component/
├── index.ts                    # 组件入口
├── ExampleComponent.tsx        # 组件主文件
├── type.ts                     # 类型定义（由 API 平台生成）
├── defaultProps.ts             # 默认属性（由 API 平台生成）
├── example-component.md        # 中文文档
├── example-component.en-US.md  # 英文文档
├── style/
│   ├── index.js               # Less 样式入口
│   └── css.js                 # CSS 样式入口
├── _example/
│   └── base.tsx               # 基础示例
├── _usage/                    # Live Demo 配置（可选）
│   └── props.json
└── __tests__/
    └── vitest-example-component.test.tsx

Step 3: 编写组件入口文件 (index.ts)

import _ExampleComponent from './ExampleComponent';

import ;

  {  }  ;
 *  ;

   = _ExampleComponent;
  ;