D-UI 框架

专业的企业级 React UI 框架，基于 TypeScript 构建。

特性

• 🎨 专业的企业级设计
• 📦 50+ 可复用组件
• 🎯 完整的 TypeScript 类型定义
• 🌈 基于 CSS 变量的主题系统
• 📱 响应式设计
• 🚀 轻量级且高性能

安装

npm install dalin-ui-framework

快速开始

import { DButton, DCard } from 'dalin-ui-framework';

function App() {
  return (
    <DCard title="你好世界" width={300}>
      <DButton type="primary">点击我</DButton>
    </DCard>
  );
}

组件列表

基础组件

• DButton - 多种样式的按钮组件
• DBadge - 状态徽章组件
• DCard - 带标题的卡片容器
• DPanel - 可折叠标题面板
• DFieldset - 表单字段分组
• DPortal - 在父组件层级外渲染内容

表单组件

• DCheckbox - 复选框输入组件
• DRadio - 单选按钮组件
• DInput - 文本输入框
• DTextarea - 多行文本输入
• DSelect - 下拉选择组件
• DMultiSelect - 多选下拉组件
• DSwitch - 开关切换组件
• DRangeSlider - 范围滑块
• DSlider - 单值滑块
• DDisplayField - 只读字段显示
• DCompositeField - 组合多个输入的字段
• DImageChooser - 图片选择组件
• DThemeSelect - 主题选择下拉框

数据展示

• DGrid - 带排序和分页的数据表格
• DEditableGrid - 可编辑数据表格
• DPagination - 分页组件
• DProperty - 键值对属性网格

布局

• DBorder - 北南东西中五区域边框布局
• DResizable - 可调整大小的容器
• DLayout - 通用布局工具

导航

• DTabPanel - 标签页组件
• DGroupTab - 分组标签页
• DNavigation - 导航菜单
• DToolbar - 工具栏组件
• DStatusBar - 状态栏组件
• DMenu - 下拉菜单

进度与加载

• DProgress - 进度指示器
• DProgressBar - 线性进度条

反馈

• DWindow - 模态窗口组件
• DMessageBox - 不同类型的消息框
• DQuickTip - 快速提示
• DSpotlight - 聚光灯高亮效果

高级组件

• DCheckTree - 带复选框的树形组件
• DItemSelector - 双列表选择器
• DImageOrganizer - 图片组织管理

主题展示

框架提供 10 个内置主题，涵盖从经典蓝色到现代深色主题的各种风格。

可用主题

• Classic - 经典蓝色主题（默认）
• Gray - 灰色主题
• Neptune - 海王星主题
• Material - Material Design
• Dracula - Dracula 深色主题
• Monokai - Monokai 主题
• VS Code Dark - VS Code 暗色
• VS Code Light - VS Code 亮色
• Solarized Light - Solarized Light
• GitHub Light - GitHub Light

主题定制

框架使用 CSS 变量进行主题定制。你可以通过覆盖 CSS 变量来自定义主题：

:root {
  --dalin-primary-color: #1890ff;
  --dalin-success-color: #52c41a;
  --dalin-warning-color: #faad14;
  --dalin-error-color: #f5222d;
  --dalin-border-radius: 4px;
  --dalin-font-size: 14px;
}

组件属性

所有组件都支持通用的 React 属性，并包含 TypeScript 类型定义：

import type { DButtonProps } from 'dalin-ui-framework';

<DButton type="primary" size="default" onClick={handleClick}>
  按钮
</DButton>

使用示例

边框布局

import { DBorder } from 'dalin-ui-framework';

<DBorder
  north={{ title: '顶部', height: 60 }}
  west={{ title: '侧边栏', width: 200, collapsible: true }}
  center={{ content: '主内容' }}
  east={{ title: '详情', width: 250, collapsible: true }}
  south={{ title: '底部', height: 40 }}
/>

表单

import { DForm, DInput, DButton } from 'dalin-ui-framework';

<DForm>
  <DInput label="用户名" required />
  <DInput label="密码" type="password" required />
  <DButton type="primary">提交</DButton>
</DForm>

表格

import { DGrid } from 'dalin-ui-framework';

<DGrid
  columns={[
    { header: '姓名', dataIndex: 'name', width: 200 },
    { header: '年龄', dataIndex: 'age', width: 100 },
    { header: '邮箱', dataIndex: 'email', width: 250 }
  ]}
  data={[
    { name: '张三', age: 30, email: '[email protected]' },
    { name: '李四', age: 25, email: '[email protected]' }
  ]}
/>

浏览器支持

• Chrome (最新版)
• Firefox (最新版)
• Safari (最新版)
• Edge (最新版)

开源地址

Gitee 仓库

许可证

MIT

贡献

欢迎贡献！请随时提交 Pull Request。

D-UI Framework - 企业级 React UI 组件库