ODE UI CLI

一个类似 shadcn/ui 的自定义 UI 组件 CLI 工具，支持 TypeScript。

功能特性

• ✅ TypeScript 支持
• ✅ React 组件模板
• ✅ 类型安全的组件接口
• ✅ 现代化的开发体验

安装

npm install -g .

使用方法

添加组件

# 添加 button 组件
my-ui add button

# 开发模式（直接运行 TypeScript）
npm run dev add button

开发脚本

# 编译 TypeScript
npm run build

# 开发模式
npm run dev

# 生产模式
npm run start

组件模板

Button 组件

生成的 Button 组件包含以下特性：

• TypeScript 接口定义
• 多种变体：primary, secondary, outline
• 多种尺寸：sm, md, lg
• 完整的类型支持
• 无障碍访问支持

import { Button } from './components/button/button';

// 基础用法
<Button>Click me</Button>

// 带变体和尺寸
<Button variant="outline" size="lg">Large Outline Button</Button>

// 带事件处理
<Button onClick={() => console.log('clicked')}>Click me</Button>

项目结构

src/
├── bin/
│   └── index.ts          # CLI 入口点
├── commands/
│   └── add.ts            # 添加组件命令
├── types/
│   └── index.ts          # TypeScript 类型定义
templates/
├── button/
│   ├── button.tsx        # TypeScript React 组件
│   └── button.js         # JavaScript 版本（兼容性）

开发

1. 修改 src/ 目录下的 TypeScript 文件
2. 运行 npm run build 编译
3. 测试：npm run dev add button

类型定义

项目包含完整的 TypeScript 类型定义：

• ComponentConfig: 组件配置
• ComponentFile: 组件文件
• AddCommandOptions: 添加命令选项
• TemplateVariables: 模板变量
• ProjectConfig: 项目配置