# @aspect/lynx-mui

> Material UI for Lynx - 一比一实现 MUI 组件库的 Lynx 版本

[![npm version](https://img.shields.io/npm/v/@aspect/lynx-mui.svg)](https://www.npmjs.com/package/@aspect/lynx-mui)
[![license](https://img.shields.io/npm/l/@aspect/lynx-mui.svg)](https://github.com/aspect/lynx-mui/blob/main/LICENSE)

## 📖 简介

`@aspect/lynx-mui` 是 [Material UI (MUI)](https://mui.com/) 的 Lynx 原生实现版本。它提供了与 MUI 相同的 API 和组件，但专为 Lynx 原生应用优化。

## ✨ 特性

- 🎨 **一比一实现** - 完整复制 MUI 的 API 和设计
- 📱 **Lynx 原生** - 使用 Lynx 原生组件，高性能渲染
- 🎯 **类型安全** - 完整的 TypeScript 类型定义
- 🌈 **主题系统** - 支持自定义主题和深色模式
- 📦 **按需加载** - 支持 Tree Shaking

## 📦 安装

```bash
npm install @aspect/lynx-mui
# 或
yarn add @aspect/lynx-mui
# 或
pnpm add @aspect/lynx-mui
```

## 🚀 快速开始

```tsx
import { Button, Typography, Box } from '@aspect/lynx-mui'

function App() {
  return (
    <Box p={2}>
      <Typography variant="h4">Hello Lynx MUI!</Typography>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </Box>
  )
}
```

## 📚 组件列表

### 基础组件 (Foundations)
- [x] Theme
- [x] Box
- [ ] Typography
- [ ] Paper
- [ ] Container
- [ ] Stack
- [ ] Grid

### 输入组件 (Inputs)
- [ ] Button
- [ ] IconButton
- [ ] TextField
- [ ] Checkbox
- [ ] Radio
- [ ] Switch
- [ ] Slider
- [ ] Select

### 数据展示 (Data Display)
- [ ] Avatar
- [ ] Badge
- [ ] Chip
- [ ] Divider
- [ ] List
- [ ] Table
- [ ] Tooltip

### 反馈组件 (Feedback)
- [ ] Alert
- [ ] CircularProgress
- [ ] LinearProgress
- [ ] Skeleton
- [ ] Snackbar
- [ ] Dialog

### 表面组件 (Surfaces)
- [ ] Card
- [ ] Accordion
- [ ] AppBar
- [ ] Toolbar
- [ ] Paper

### 导航组件 (Navigation)
- [ ] Drawer
- [ ] Menu
- [ ] Tabs
- [ ] BottomNavigation
- [ ] Breadcrumbs

### 弹出层 (Overlays)
- [ ] Modal
- [ ] Popover
- [ ] Popper

## 🎨 主题定制

```tsx
import { createTheme, ThemeProvider } from '@aspect/lynx-mui'

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
})

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的应用 */}
    </ThemeProvider>
  )
}
```

## 📁 项目结构

```
lynx-mui/
├── src/
│   ├── components/      # 所有组件
│   │   ├── Box/
│   │   ├── Button/
│   │   ├── Typography/
│   │   └── ...
│   ├── theme/           # 主题系统
│   ├── hooks/           # 自定义 Hooks
│   ├── utils/           # 工具函数
│   ├── types/           # 类型定义
│   └── index.ts         # 主入口
├── mui-source/          # MUI 源码参考
├── IMPLEMENTATION_PLAN.md
├── package.json
└── README.md
```

## 🔄 与 MUI 的差异

| 特性 | MUI | Lynx MUI |
|------|-----|----------|
| 渲染引擎 | DOM | Lynx Native |
| 样式系统 | CSS-in-JS | CSS |
| 动画 | Framer Motion | CSS Animation |
| 事件 | onClick | bindtap |

## 🤝 贡献

欢迎贡献代码！请查看 [IMPLEMENTATION_PLAN.md](./IMPLEMENTATION_PLAN.md) 了解待实现的组件。

## 📄 许可证

MIT License © 2024 AetherLink Team

## 🙏 致谢

- [Material UI](https://mui.com/) - 原版 MUI 组件库
- [Lynx](https://lynxjs.org/) - Lynx 跨平台框架