# leo-ui

**Repository Path**: cqlx/leo-ui

## Basic Information

- **Project Name**: leo-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-30
- **Last Updated**: 2025-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# lee-test-ui

一个基于 React 的简单 UI 组件库，目前包含 Tree 组件。

## 特性

- 🌳 Tree 组件：支持多层级节点、选中状态管理
- 📦 使用 Vite 构建，支持类型声明文件生成
- ⚡️ 支持 ES、UMD、CJS、IIFE 多种打包格式

## 快速开始

### 安装依赖

```sh
npm install
```

### 本地开发

```sh
npm run dev
```

访问 [http://localhost:3000](http://localhost:3000) 查看示例页面。

### 构建

```sh
npm run build
```

构建产物输出到 `dist/` 目录。

## 组件使用

以 Tree 组件为例：

```tsx
import { Tree, type TreeNode } from 'lee-ui'

const treeData: TreeNode[] = [
  {
    id: '1',
    label: 'Node 1',
    selected: false,
    children: [
      { id: '2', label: 'Node 2', selected: true },
      // ...
    ]
  }
]

<Tree data={treeData} onChecked={node => console.log(node)} />
```

### Tree Props

| 属性      | 类型                         | 说明         |
| --------- | ---------------------------- | ------------ |
| data      | `TreeNode[]`                 | 节点数据     |
| onChecked | `(node: TreeNode) => void`   | 选中回调     |

### TreeNode

| 属性      | 类型         | 说明         |
| --------- | ------------ | ------------ |
| id        | `string`     | 节点唯一标识 |
| label     | `string`     | 节点名称     |
| selected  | `boolean`    | 是否选中     |
| children  | `TreeNode[]` | 子节点       |

## 目录结构

```
packages/
  Tree/
    tree.tsx
    type.ts
    styles.css
  index.ts
example/
  App.tsx
  main.tsx
  index.html
```

## License

ISC