three-day01 UI 组件库

基于 React + TypeScript + Vite 构建的前端 UI 组件库项目。

目录结构

├── docs/                # 文档目录
├── example/             # 示例项目（演示组件用法）
│   ├── App.tsx
│   ├── index.html
│   └── main.tsx
├── packages/            # 组件源码
│   └── Tree/            # Tree 组件
│       ├── index.ts
│       ├── styles.css
│       ├── tree.tsx
│       └── type.ts
├── index.ts             # 组件库入口
├── package.json         # 项目依赖与脚本
├── tsconfig.json        # TypeScript 配置
├── vite.config.ts       # Vite 配置
└── README.md            # 项目说明

快速开始

1. 安装依赖

pnpm install
# 或 npm install / yarn install

2. 本地开发

pnpm dev
# 或 npm run dev / yarn dev

3. 组件打包

pnpm build
# 或 npm run build / yarn build

4. 预览示例

cd example && pnpm dev

主要组件

Tree 组件

• 支持多层级递归渲染
• 支持节点选中、子节点联动
• 类型安全（TypeScript）
• 可自定义回调

示例用法

import React from "react";
import { Tree } from "neon-ui-react";

const treeData = [
  {
    key: "1",
    label: "父节点",
    children: [
      { key: "1-1", label: "子节点1" },
      { key: "1-2", label: "子节点2" },
    ],
  },
];

export default function Demo() {
  return (
    <Tree
      data={treeData}
      checkable
      onSelect={(keys) => console.log("选中节点:", keys)}
    />
  );
}

贡献

欢迎提 issue 或 PR 参与贡献！

License

MIT