# dioxus-antd

**Repository Path**: pauljoihn21/dioxus-antd

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-25
- **Last Updated**: 2026-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Dioxus Ant Design

[![Rust](https://img.shields.io/badge/rust-1.70%2B-blue.svg)](https://www.rust-lang.org)
[![Dioxus](https://img.shields.io/badge/dioxus-0.7-purple.svg)](https://dioxuslabs.com)
[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)

Ant Design 组件库的 Dioxus 实现，为 Rust Web 应用提供企业级 UI 组件。

## 特性

- 🎨 **完整的主题系统** - 支持亮色/暗色模式，CSS 变量驱动
- 🌍 **国际化支持** - 内置中英文语言包，可扩展更多语言
- 📱 **响应式设计** - 适配各种屏幕尺寸
- ⚡ **高性能** - 基于 Dioxus 0.7 的信号系统，细粒度更新
- 🔧 **易于定制** - 通过 ConfigProvider 全局配置组件样式
- 🎯 **类型安全** - 完整的 Rust 类型支持

## 快速开始

### 安装

```toml
[dependencies]
antd-dioxus = { path = "path/to/dioxus-antd/crates/antd-dioxus" }
dioxus = { version = "0.7", features = ["web"] }
```

### 基础用法

```rust
use antd_dioxus::prelude::*;
use dioxus::prelude::*;

fn main() {
    dioxus::launch(app);
}

fn app() -> Element {
    rsx! {
        ConfigProvider {
            theme: ThemeConfig {
                token: PartialSeedToken {
                    color_primary: Some("#1677ff".into()),
                    border_radius: Some(8.0),
                    ..Default::default()
                },
                ..Default::default()
            },
            Demo {}
        }
    }
}

#[component]
fn Demo() -> Element {
    rsx! {
        div { style: "padding: 24px;",
            Title { level: TitleLevel::H1, "Hello Ant Design" }
            
            Button {
                button_type: ButtonType::Primary,
                on_click: move |_| println!("Clicked!"),
                "Click Me"
            }
            
            Space { direction: SpaceDirection::Vertical, size: SpaceSize::Middle,
                Tag { preset_color: TagColor::Blue, "Tag 1" }
                Tag { preset_color: TagColor::Green, "Tag 2" }
                Tag { preset_color: TagColor::Red, "Tag 3" }
            }
        }
    }
}
```

## 组件清单

### 基础组件 (Phase 2 - 已完成)

| 组件 | 说明 | 状态 |
|------|------|------|
| Button | 按钮 | ✅ |
| Icon | 图标 (848个) | ✅ |
| Typography | 排版 (Text/Title/Paragraph/Link) | ✅ |
| Divider | 分割线 | ✅ |
| Tag | 标签 | ✅ |
| Badge | 徽标数 | ✅ |
| Space | 间距 | ✅ |
| Flex | 弹性布局 | ✅ |
| Spin | 加载中 | ✅ |

### 表单组件 (Phase 3 - 计划中)

| 组件 | 说明 | 状态 |
|------|------|------|
| Input | 输入框 | 🚧 |
| InputNumber | 数字输入框 | 🚧 |
| Select | 选择器 | 🚧 |
| Checkbox | 复选框 | 🚧 |
| Radio | 单选框 | 🚧 |
| Switch | 开关 | 🚧 |
| Form | 表单 | 🚧 |

## 项目结构

```
dioxus-antd/
├── crates/
│   ├── antd-colors/      # 颜色算法 (FastColor, 色板生成)
│   ├── antd-tokens/      # Design Token 类型系统
│   ├── antd-theme/       # 主题算法 (默认/暗色/紧凑)
│   ├── antd-css/         # CSS 生成引擎
│   ├── antd-locale/      # 国际化语言包
│   └── antd-dioxus/      # Dioxus 组件库
├── examples/
│   └── playground/       # 组件演示应用
└── docs/
    └── superpowers/      # 开发计划和规格文档
```

## 开发计划

- [x] **Phase 0**: 基础设施 (Cargo Workspace, 颜色算法, Token 系统)
- [x] **Phase 1**: 主题和国际化 (ConfigProvider, 主题切换, i18n)
- [x] **Phase 2**: 基础原子组件 (Button, Icon, Typography, 布局组件)
- [ ] **Phase 3**: 表单组件 (Input, Select, Checkbox, Form)
- [ ] **Phase 4**: 反馈和导航组件 (Modal, Drawer, Menu, Tabs)
- [ ] **Phase 5**: 数据展示组件 (Table, Tree, List)

## 运行示例

```bash
# 克隆仓库
git clone https://gitee.com/pauljoihn21/dioxus-antd.git
cd dioxus-antd

# 运行 Playground
cd examples/playground
dx serve

# 浏览器访问 http://localhost:8080
```

## Dioxus 0.7 强适配

本项目深度适配 Dioxus 0.7 的特性：

- **GlobalSignal** - 使用 `Signal::global()` 管理全局状态
- **use_memo** - 缓存计算结果，避免不必要的重新计算
- **use_callback** - 创建稳定的事件处理器
- **细粒度更新** - 组件只在使用到的信号变化时重新渲染

## 贡献

欢迎提交 Issue 和 PR！

## 许可证

MIT License