# ant-design2 **Repository Path**: weinirumo/ant-design2 ## Basic Information - **Project Name**: ant-design2 - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-08-21 - **Last Updated**: 2026-09-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Ant Design Vanilla 一个视觉上与 **Ant Design 5.x** 兼容的原生 JavaScript 组件库。零运行时依赖，零框架。[English](./README.md) > **状态：实验性（v0.3.x）** — 已覆盖 68 个组件，附带文档站、冒烟测试和完整的 TypeScript 类型声明，但 API 尚未稳定，次版本之间可能发生变更。不建议在未锁定精确版本号的情况下用于生产环境。 > > **免责声明：** 这是一个独立的非官方项目，与 Ant Design 团队或蚂蚁集团不存在任何关联、背书或维护关系。"Ant Design" 是其各自所有者的商标；本项目仅遵循其视觉语言及 MIT 许可的设计 token 取值。 ## 为什么做这个面向那些不能或不想使用 React、但仍需要 Ant Design 视觉语言的项目。只需两个 `` / ` ``` ### npm ```bash npm install ant-design-vanilla ``` ```js import Antd from 'ant-design-vanilla'; import 'ant-design-vanilla/dist/antd.css'; Antd.Message.success('Saved'); ``` 自带覆盖全部组件的手写 TypeScript 声明（IIFE 与 ESM 共用同一份类型），全局 `window.Antd` 也有完整类型。 ### 纯 HTML ```html ``` 支持三种使用方式： 1. **纯 CSS 类名** — 静态 markup，完全不需要 JS。 2. **`data-*` 声明式** — `Antd.init()` 扫描 DOM 并自动绑定行为。 3. **命令式 JS API** — `Antd.Message`、`Antd.Modal`、`Antd.Dropdown.bind(...)` … ## 内含什么 **68 个组件** — Button、Typography、Icon、Space、Divider、Flex、Grid、Layout、FloatButton、Splitter、Tag、Badge、Avatar、Card、List、Tooltip、Popover、Descriptions、Empty、Image、PageHeader、Alert、Spin、Skeleton、Progress、Popconfirm、Message、Notification、Modal、Drawer、Checkbox、Radio、Switch、Input、InputNumber、Rate、Slider、Tabs、Breadcrumb、Pagination、Steps、Menu、Dropdown、Affix、Table、Timeline、Collapse、Tree、Segmented、Cascader、AutoComplete、Select、TreeSelect、DatePicker、TimePicker、Anchor、Result、Statistic、Upload、Watermark、ColorPicker、Mentions、Calendar、Carousel、Transfer、Tour、Form、**Sortable**。 **应用层工具** — 组件之外，库自带日常开发工具箱（文档站侧边栏「工具」分组）： | 入口 | 能力 | |---|---| | `Antd.$` | 链式 DOM 查询 + 事件委托（jQuery 风格，统一集合形态） | | `Antd.http` | `get/post/put/del/jsonp/serialize` — fetch 优先、XHR 回退 | | `Antd.bus` | 应用级事件总线（`on/once/onAny/off`） | | `Antd.Sortable` | 任意容器拖拽排序（手柄、`toArray` 持久化顺序） | | `Antd.debounce / throttle / sleep / retry / copy` | 函数与异步辅助 | | `Antd.type` | 类型检测（TS 类型守卫 `isNil/isPlainObject/...`） | | `Antd.array` | 集合运算（`unique/union/intersection/difference/xor`） | | `Antd.format` | `date/number/fromNow` 格式化 | | `Antd.storage / cookie` | localStorage 封装（TTL/前缀隔离）与 Cookie 读写 | | `Antd.download` | 文件下载与 CSV 导出（`table.exportCSV()`） | **原子工具类** — `mb10 / mt8 / p16 / flex-center / text-ellipsis / fs14 / hidden` 等：间距 0-64px、弹性、文本、布局高频类随同一个 CSS 文件提供。 ## 主题基于 Ant Design 5.x 的 Seed Token 体系构建，并以 CSS 自定义属性暴露。切换暗色模式： ```js document.documentElement.dataset.theme = 'dark'; ``` ## 项目结构 ``` src/ ├── index.js # 库入口，挂载 window.Antd，ESM 场景 default 导出 ├── core/ # classNames、dom、query（$ + ajax）、events、portal、init、config ├── styles/ # tokens、base、mixins ├── icons/ # 内联 SVG sprite └── components/{name}/ # 每个组件一个目录（index.js + style.scss） docs/ # 静态 HTML 文档站 scripts/ # build.js、dev.js dist/ # 构建产物（antd.css + antd.js IIFE + antd.esm.js） types/ # 手写 TypeScript 类型声明 ``` ## 开发 ```bash npm install npm run dev # http://localhost:5173，自动重新构建 npm run build # 产出 dist/antd.{css,js} + dist/antd.esm.js npm test # jsdom 冒烟测试 npm run test:types # 类型声明检查 npm run test:visual # Playwright 截图比对（基线在 tests/visual/baseline） ``` 视觉基线与机器相关（字体/抗锯齿差异）。样式有意变更后用 `npm run test:visual-update` 刷新基线，并在 commit 里目检 diff。 ## 进度 9 个阶段全部完成 —— 68 个组件 + 应用层工具 + 原子类： - **Phase 1-8** —— 完整的 antd 5.x 组件集（通用/布局、数据展示、反馈、数据录入、导航、进阶展示/选择器、其他）。 - **Phase 9 + 0.2/0.3 增强** —— npm/ESM/TypeScript 基建、应用层工具层（`$ / http / bus / type / array / format / storage / cookie / download / Sortable`）、原子工具类，以及全能力 Table（行选择、分页、筛选、URL 数据源含服务端模式、行展开、树形数据、汇总行、多级表头、拖拽列宽、表头吸顶、CSV 导出）。 ## 许可证 MIT。