YN Design

一个基于 React 18 + TypeScript 的企业级 UI 组件库，设计语言对标 Ant Design。

YN Design 参考 Ant Design v5 的设计令牌（Design Token）与组件 API，提供一套开箱即用的高质量 React 组件。 主题变量、圆角、阴影、动效、暗黑模式均向 Ant Design 看齐，方便从 antd 平滑迁移。

✨ 特性

• 🎨 设计对齐 Ant Design：主色 #1677ff、圆角 6px、文本 rgba(0,0,0,0.88)、阴影与动效令牌均取自 antd v5。
• ⚛️ 基于 React 18 + TypeScript：完整的类型定义，开发体验友好。
• 📦 双模式输出：同时支持 ESModule 与 CommonJS，配合按需加载。
• 🎯 主题变量定制：通过覆盖 Less 变量即可换肤。
• 🌙 暗黑模式：内置 antd v5 Dark 算法派生变量，通过 data-theme="dark" 启用。
• 🧩 26 个组件：覆盖通用 / 布局 / 导航 / 数据录入 / 数据展示 / 反馈等场景。

📦 安装

npm install yn-design
# 或
yarn add yn-design

🔨 快速开始

import React from 'react';
import { Button, Message } from 'yn-design';
import 'yn-design/dist/es/styles/global.css'; // 引入全局样式

export default () => (
  <Button type="primary" onClick={() => Message.success('Hello YN Design')}>
    主要按钮
  </Button>
);

🧭 组件总览

| 分类 | 组件 | | --- | --- | | 通用 General | Button、Icon | | 布局 Layout | Layout（Header / Sider / Content / Footer）、Grid（Row / Col）、Space | | 导航 Navigation | Menu（MenuItem / SubMenu）、Tabs（TabPane）、Pagination | | 数据录入 Data Entry | Input（TextArea）、Form（FormItem）、Select | | 数据展示 Data Display | Table、Card、List（ListItem）、Tree、Timeline（TimelineItem）、Carousel、Calendar、Statistic、Skeleton（SkeletonItem） | | 反馈 Feedback | Modal、Message（useMessage）、Drawer、Popconfirm | | 其他 | Loading、Watermark |

文档站（npm run dev）按上述分类组织，每个组件均提供演示与 API 表格。

🎨 设计令牌（Design Token）

YN Design 的主题令牌对齐 Ant Design v5，定义在 src/theme/var.less。 常用令牌如下（完整列表见源码注释，参考 gitee.com/mirrors/Ant-Design/components/theme）：

| 令牌 | 含义 | 默认值（Light） | 默认值（Dark） | | --- | --- | --- | --- | | @primary-color | 品牌主色 | #1677ff | #1668dc | | @primary-color-hover | 主色 hover | #4096ff | #3c89fa | | @primary-color-active | 主色 active | #0958d9 | #155ae0 | | @primary-color-bg | 主色浅底 | #e6f4ff | #111a2c | | @success-color | 成功色 | #52c41a | #49aa19 | | @warning-color | 警告色 | #faad14 | #d89614 | | @error-color | 错误/危险色 | #ff4d4f | #ff4d4f | | @text-color | 主文本 | rgba(0,0,0,0.88) | rgba(255,255,255,0.85) | | @text-color-secondary | 次文本 | rgba(0,0,0,0.65) | rgba(255,255,255,0.65) | | @border-color | 边框 | #d9d9d9 | #303030 | | @background-color | 容器背景 | #ffffff | #141414 | | @background-color-layout | 布局背景 | #f5f5f5 | #000000 | | @border-radius-base | 基础圆角 | 6px | 6px | | @border-radius-sm | 小圆角 | 4px | 4px | | @border-radius-lg | 大圆角 | 8px | 8px | | @font-size-base | 基础字号 | 14px | 14px | | @height-base | 控件高度 | 32px | 32px | | @height-sm / @height-lg | 控件高度 | 24px / 40px | 同左 | | @box-shadow | 弹出/卡片阴影 | 0 6px 16px … rgba(0,0,0,.08) | 同左（更深） | | @motion-duration-mid | 基础动效时长 | 0.2s | 0.2s | | @zindex-popup-base | 弹层基础层级 | 1000 | 1000 |

🌈 主题定制

通过覆盖 Less 变量即可定制主题（与 antd v4 的 Less 换肤方式一致）：

// styles/override.less
@import 'yn-design/dist/es/styles/global.css'; // 先引入默认变量与样式

@primary-color: #722ed1; // 改为紫色主色
@border-radius-base: 8px;

也可在业务侧使用 setConfig 调整全局 prefixCls 与默认 size：

import { setConfig } from 'yn-design';

setConfig({ prefixCls: 'yn', size: 'large' });

🌙 暗黑模式

设置 data-theme="dark" 即可切换到 antd v5 Dark 派生主题：

document.documentElement.setAttribute('data-theme', 'dark');

暗黑令牌定义在 src/theme/var.dark.less，颜色由 antd v5 Dark 算法派生（非简单反色）。

⚠️ 从 secondary 迁移到 default

为对齐 Ant Design，按钮默认类型由 secondary 更名为 default：

• Button 的 type 默认值现为 'default'（原 'secondary'）。
• type="secondary" 仍被接受并等价映射为 'default'，向后兼容，但建议尽快替换为 'default'。
• 新增 ghost 属性（幽灵按钮，透明背景）。

// 旧写法（仍可用）
<Button type="secondary">次要按钮</Button>
// 推荐写法
<Button type="default">默认按钮</Button>
<Button type="primary" ghost>幽灵按钮</Button>

🛠 开发脚本

npm install            # 安装依赖

npm run dev            # 启动文档站（Next.js）开发服务器
npm run build          # 构建组件库（father / babel + 样式）
npm run docs:build     # 构建文档站（Next.js）
npm run lint           # ESLint 检查
npm run typecheck      # TypeScript 类型检查

组件样式通过 scripts/build-styles.js 由 Less 编译为 CSS 输出到 dist/es 与 dist/lib， 并自动将源码中的 .less 引入改写为对应的 .css。

🌐 浏览器兼容

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

📄 开源协议

MIT