weifuwu 0.67.3 → 0.69.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/dist/client/index.js +5 -4
- package/dist/client/types.d.ts +28 -0
- package/dist/components/AlertGroup/AlertGroup.d.ts +23 -0
- package/dist/components/AutoComplete/AutoComplete.d.ts +37 -0
- package/dist/components/FloatButton/FloatButton.d.ts +34 -0
- package/dist/components/Grid/Grid.d.ts +34 -0
- package/dist/components/Layout/Layout.d.ts +58 -0
- package/dist/components/Link/Link.d.ts +22 -0
- package/dist/components/NavMenu/NavMenu.d.ts +27 -0
- package/dist/components/Popconfirm/Popconfirm.d.ts +34 -0
- package/dist/components/Scrollbar/Scrollbar.d.ts +21 -0
- package/dist/components/Space/Space.d.ts +16 -0
- package/dist/components/StatCard/StatCard.d.ts +4 -0
- package/dist/components/index.d.ts +20 -0
- package/dist/components/index.js +14 -16
- package/dist/components/style.css +709 -92
- package/dist/index.js +22 -0
- package/dist/layout/weifuwu-layout.css +27 -2
- package/docs/compat-three-library.md +290 -0
- package/docs/components-map.md +22 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4407,6 +4407,28 @@ function createSsrContext(serverCtx, dataStore) {
|
|
|
4407
4407
|
},
|
|
4408
4408
|
controlled: options.value !== void 0
|
|
4409
4409
|
}),
|
|
4410
|
+
useControlledInput: (options) => ({
|
|
4411
|
+
value: options.value,
|
|
4412
|
+
setValue: (v) => {
|
|
4413
|
+
options.onChange?.(v);
|
|
4414
|
+
},
|
|
4415
|
+
controlled: options.value !== void 0,
|
|
4416
|
+
keyword: "",
|
|
4417
|
+
setKeyword: () => {
|
|
4418
|
+
},
|
|
4419
|
+
selectedLabel: "",
|
|
4420
|
+
setSelectedLabel: () => {
|
|
4421
|
+
}
|
|
4422
|
+
}),
|
|
4423
|
+
useOpen: (options) => ({
|
|
4424
|
+
get open() {
|
|
4425
|
+
return !!options.open;
|
|
4426
|
+
},
|
|
4427
|
+
setOpen: (v) => {
|
|
4428
|
+
options.onOpenChange?.(v);
|
|
4429
|
+
},
|
|
4430
|
+
triggerProps: {}
|
|
4431
|
+
}),
|
|
4410
4432
|
useAsync: () => ({ data: void 0, loading: true, error: void 0, reload: () => {
|
|
4411
4433
|
} }),
|
|
4412
4434
|
usePopup: () => ({
|
|
@@ -42,6 +42,8 @@
|
|
|
42
42
|
--wf-dark-slate-300: #475569; --wf-dark-slate-200: #334155; --wf-dark-slate-100: #1e293b;
|
|
43
43
|
--wf-dark-slate-50: #0f172a; --wf-dark-bg: #0f172a;
|
|
44
44
|
--wf-dark-overlay: rgba(0, 0, 0, 0.6); /* 暗色遮罩(比亮色更深,压住暗底内容) */
|
|
45
|
+
--wf-dark-fill: var(--wf-dark-slate-200); /* 暗色填充(比底色亮一级) */
|
|
46
|
+
--wf-dark-bg-hover: rgba(255, 255, 255, 0.06); /* 暗色 hover 反白 */
|
|
45
47
|
--wf-dark-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
46
48
|
--wf-dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
47
49
|
--wf-dark-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
@@ -94,8 +96,14 @@
|
|
|
94
96
|
--wf-z-tour: 2000;
|
|
95
97
|
--wf-tour-min-width: 240px;
|
|
96
98
|
--wf-kanban-col-min-width: 200px;
|
|
99
|
+
/* Layout 布局外壳(batch-8) */
|
|
100
|
+
--wf-layout-sider-width: 240px;
|
|
101
|
+
--wf-layout-sider-collapsed-width: 64px;
|
|
102
|
+
--wf-layout-header-height: 56px;
|
|
97
103
|
--wf-kanban-col-max-width: 300px;
|
|
98
104
|
--wf-treeselect-min-width: 200px;
|
|
105
|
+
--wf-navmenu-min-width: 160px;
|
|
106
|
+
--wf-select-menu-min-width: 200px;
|
|
99
107
|
--wf-treeselect-max-width: 320px;
|
|
100
108
|
--wf-treeselect-dropdown-max-height: 260px;
|
|
101
109
|
--wf-z-popover: 120; /* dropdown/select/datepicker 面板与 popover 同层 */
|
|
@@ -168,8 +176,9 @@
|
|
|
168
176
|
/* ── 边框宽度 ── */
|
|
169
177
|
--wf-border-width: 1px;
|
|
170
178
|
|
|
171
|
-
/* ──
|
|
172
|
-
|
|
179
|
+
/* ── 聚焦环(双层:淡环 bg + 1px primary 线——C5:系统暗色偏好下 primary-bg
|
|
180
|
+
变暗不可见,primary 是亮蓝——明暗主题聚焦均可见) ── */
|
|
181
|
+
--wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg), 0 0 0 1px var(--wf-color-primary);
|
|
173
182
|
|
|
174
183
|
/* ── 动效 ── */
|
|
175
184
|
--wf-transition-duration: 150ms;
|
|
@@ -185,6 +194,8 @@
|
|
|
185
194
|
--wf-ease-in: cubic-bezier(0.4, 0, 1, 1); /* 退场:渐入加速 */
|
|
186
195
|
--wf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* 往返/闪烁动画 */
|
|
187
196
|
--wf-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* 选中/弹跳 */
|
|
197
|
+
--wf-ease-standard: ease; /* 通用缓动(组件假 token 收敛) */
|
|
198
|
+
--wf-dur-md: var(--wf-dur-base); /* 中档时长(= base 别名) */
|
|
188
199
|
|
|
189
200
|
--wf-motion-sm: 4px;
|
|
190
201
|
--wf-motion-md: 8px;
|
|
@@ -201,6 +212,11 @@
|
|
|
201
212
|
--wf-color-error-text: var(--wf-red-700);
|
|
202
213
|
--wf-color-info-text: var(--wf-sky-700);
|
|
203
214
|
|
|
215
|
+
/* ── 色彩 — 通用填充/悬停底色(暗色经 _dark.css 映射) ── */
|
|
216
|
+
--wf-color-fill: var(--wf-slate-100); /* 通用填充色(禁裸灰——组件假 token 收敛) */
|
|
217
|
+
--wf-color-bg-subtle: var(--wf-color-fill); /* 极淡底(别名) */
|
|
218
|
+
--wf-color-bg-hover: rgba(0, 0, 0, 0.04); /* hover 底色(暗色反白) */
|
|
219
|
+
|
|
204
220
|
/* ── 色彩 — 实心填充上的文字/图标(primary/success 等实心底色) ── */
|
|
205
221
|
--wf-color-on-brand: #fff;
|
|
206
222
|
|
|
@@ -214,6 +230,9 @@
|
|
|
214
230
|
/* 控件尺寸:垂直内边距 + 目标高度(移动端在 _base.css 提升到 44px) */
|
|
215
231
|
--wf-control-pad-y: 10px;
|
|
216
232
|
--wf-control-height: 36px;
|
|
233
|
+
/* 字段统一尺寸(组件假 token 收敛——Input/Select/Textarea 引用) */
|
|
234
|
+
--wf-field-height: var(--wf-control-height);
|
|
235
|
+
--wf-field-radius: var(--wf-radius);
|
|
217
236
|
|
|
218
237
|
/* ── 断点 ── */
|
|
219
238
|
--wf-bp-sm: 640px;
|
|
@@ -274,6 +293,9 @@
|
|
|
274
293
|
--wf-color-bg: var(--wf-dark-bg);
|
|
275
294
|
--wf-color-bg-secondary: var(--wf-dark-slate-100);
|
|
276
295
|
--wf-color-bg-tertiary: var(--wf-dark-slate-200);
|
|
296
|
+
--wf-color-fill: var(--wf-dark-fill);
|
|
297
|
+
--wf-color-bg-subtle: var(--wf-dark-fill);
|
|
298
|
+
--wf-color-bg-hover: var(--wf-dark-bg-hover);
|
|
277
299
|
|
|
278
300
|
--wf-color-border: var(--wf-dark-slate-200);
|
|
279
301
|
--wf-color-border-light: var(--wf-dark-slate-100);
|
|
@@ -321,6 +343,9 @@
|
|
|
321
343
|
--wf-color-bg: var(--wf-dark-bg);
|
|
322
344
|
--wf-color-bg-secondary: var(--wf-dark-slate-100);
|
|
323
345
|
--wf-color-bg-tertiary: var(--wf-dark-slate-200);
|
|
346
|
+
--wf-color-fill: var(--wf-dark-fill);
|
|
347
|
+
--wf-color-bg-subtle: var(--wf-dark-fill);
|
|
348
|
+
--wf-color-bg-hover: var(--wf-dark-bg-hover);
|
|
324
349
|
|
|
325
350
|
--wf-color-border: var(--wf-dark-slate-200);
|
|
326
351
|
--wf-color-border-light: var(--wf-dark-slate-100);
|
|
@@ -0,0 +1,290 @@
|
|
|
1
|
+
# 三库 → weifuwu 完整映射表(antd / Element Plus / shadcn-ui)
|
|
2
|
+
|
|
3
|
+
> **逆向迁移速查**:从三库任意组件出发,找到 weifuwu 中的对应能力。
|
|
4
|
+
> 状态:✅ 已有 · 🆕 batch-8(v0.68.0) · 🔧 框架内置(client/layout)
|
|
5
|
+
> 与 `components-map.md`(weifuwu → 三库)互为逆向。
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## antd(84 项)
|
|
10
|
+
|
|
11
|
+
### 通用基础
|
|
12
|
+
| antd | weifuwu | 状态 | 备注 |
|
|
13
|
+
|------|---------|:----:|------|
|
|
14
|
+
| Button | `<Button>` | ✅ | variant/size/loading/block |
|
|
15
|
+
| Icon | `<Icon name>` | ✅ | 自研 30+ stroke SVG |
|
|
16
|
+
| Typography.Title/Text/Paragraph | `<Title>/<Text>/<Paragraph>` | ✅ | — |
|
|
17
|
+
| Typography.Link | `<Link>`(batch-8) | 🆕 | — |
|
|
18
|
+
| Divider | `<Divider>` | ✅ | 含带文字 |
|
|
19
|
+
| Space | `<Space>` | 🆕 | — |
|
|
20
|
+
| Flex | `<Grid flex>` | 🆕 | flex 容器模式 |
|
|
21
|
+
| Grid(Row/Col) | `<Grid>` | 🆕 | 24 栅格 + gutter |
|
|
22
|
+
| Splitter | `<Resizable>` | ✅ | — |
|
|
23
|
+
| Avatar / Avatar.Group | `<Avatar>/<AvatarGroup>` | ✅ | — |
|
|
24
|
+
| Badge | `<Badge>` | ✅ | 含 dot 状态点 |
|
|
25
|
+
| Calendar | `<Calendar>` | ✅ | — |
|
|
26
|
+
|
|
27
|
+
### 导航
|
|
28
|
+
| antd | weifuwu | 状态 | 备注 |
|
|
29
|
+
|------|---------|:----:|------|
|
|
30
|
+
| Menu | `<Menu>` | ✅ | 含分组/方向键 |
|
|
31
|
+
| Breadcrumb | `<Breadcrumb>` | ✅ | — |
|
|
32
|
+
| Dropdown | `<Dropdown>` | ✅ | — |
|
|
33
|
+
| Pagination | `<Pagination>` | ✅ | — |
|
|
34
|
+
| Steps | `<Steps>` | ✅ | — |
|
|
35
|
+
| Tabs | `<Tabs>` | ✅ | — |
|
|
36
|
+
| Anchor | `<Anchor>` | ✅ | — |
|
|
37
|
+
| Affix | `<Affix>` | ✅ | — |
|
|
38
|
+
| BackTop | `<BackTop>` | ✅ | — |
|
|
39
|
+
| Layout / Layout.Header / Layout.Sider / Layout.Content / Layout.Footer | `<Layout>` + LayoutHeader/LayoutSider/LayoutContent/LayoutFooter | 🆕 | — |
|
|
40
|
+
| PageHeader | `<PageHeader>` | ✅ | antd v5 已移除,weifuwu 保留 |
|
|
41
|
+
| FloatButton | `<FloatButton>` | 🆕 | — |
|
|
42
|
+
| AutoComplete | `<AutoComplete>` | 🆕 | — |
|
|
43
|
+
|
|
44
|
+
### 表单
|
|
45
|
+
| antd | weifuwu | 状态 | 备注 |
|
|
46
|
+
|------|---------|:----:|------|
|
|
47
|
+
| Input | `<Input>` | ✅ | 含 label/error/hint |
|
|
48
|
+
| Input.TextArea | `<Textarea>` | ✅ | — |
|
|
49
|
+
| Input.Search | `<SearchInput>` | ✅ | — |
|
|
50
|
+
| Input.Password | `<PasswordInput>` | ✅ | — |
|
|
51
|
+
| InputNumber | `<InputNumber>` | ✅ | — |
|
|
52
|
+
| Select | `<Select searchable multiple>` | ✅ | — |
|
|
53
|
+
| Checkbox / Checkbox.Group | `<Checkbox>/<CheckboxGroup>` | ✅ | — |
|
|
54
|
+
| Radio / Radio.Group | `<RadioGroup>` | ✅ | — |
|
|
55
|
+
| Switch | `<Switch>` | ✅ | — |
|
|
56
|
+
| Slider | `<Slider>` | ✅ | — |
|
|
57
|
+
| DatePicker / TimePicker / RangePicker | `<DatePicker mode="date\|time\|datetime\|range">` | ✅ | 一组件覆盖四 |
|
|
58
|
+
| Rate | `<Rate>` | ✅ | — |
|
|
59
|
+
| Cascader | `<Cascader>` | ✅ | — |
|
|
60
|
+
| Transfer | `<Transfer>` | ✅ | — |
|
|
61
|
+
| TreeSelect | `<TreeSelect>` | ✅ | — |
|
|
62
|
+
| Mentions | `<Mentions>` | ✅ | — |
|
|
63
|
+
| Upload | `<FileUpload>` | ✅ | — |
|
|
64
|
+
| ColorPicker | `<ColorPicker>` | ✅ | — |
|
|
65
|
+
| Form / Form.Item | `<Form>` + `<Field>` | ✅ | — |
|
|
66
|
+
|
|
67
|
+
### 数据展示
|
|
68
|
+
| antd | weifuwu | 状态 | 备注 |
|
|
69
|
+
|------|---------|:----:|------|
|
|
70
|
+
| Table | `<Table>` | ✅ | 排序/行选择/筛选/列宽 |
|
|
71
|
+
| List | `<List>` | ✅ | — |
|
|
72
|
+
| Card | `<Card>` | ✅ | — |
|
|
73
|
+
| Descriptions | `<Descriptions>` | ✅ | — |
|
|
74
|
+
| Tabs | `<Tabs>` | ✅ | — |
|
|
75
|
+
| Tag | `<Tag>` | ✅ | — |
|
|
76
|
+
| Timeline | `<Timeline>` | ✅ | — |
|
|
77
|
+
| Tree | `<Tree>` | ✅ | 勾选父子联动 |
|
|
78
|
+
| Tooltip | `<Tooltip>` | ✅ | — |
|
|
79
|
+
| Popover | `<Popover>` | ✅ | — |
|
|
80
|
+
| Tour | `<Tour>` | ✅ | — |
|
|
81
|
+
| Empty | `<EmptyState>` | ✅ | — |
|
|
82
|
+
| Skeleton | `<Skeleton>` | ✅ | — |
|
|
83
|
+
| Statistic / Statistic.Countdown | `<StatCard countdown>` | 🆕 | countdown 增强 |
|
|
84
|
+
| Segmented | `<SegmentedControl>` | ✅ | — |
|
|
85
|
+
| Image / Image.PreviewGroup | `<Img preview>` | ✅ | — |
|
|
86
|
+
| QRCode | `<QRCode>` | ✅ | — |
|
|
87
|
+
| Spin | `<Loading>` | ✅ | — |
|
|
88
|
+
| Carousel | `<Carousel>` | ✅ | — |
|
|
89
|
+
| Watermark | `<Watermark>` | ✅ | — |
|
|
90
|
+
|
|
91
|
+
### 反馈
|
|
92
|
+
| antd | weifuwu | 状态 | 备注 |
|
|
93
|
+
|------|---------|:----:|------|
|
|
94
|
+
| Alert | `<Alert>` | ✅ | — |
|
|
95
|
+
| Modal | `<Modal>` | ✅ | — |
|
|
96
|
+
| Popconfirm | `<Popconfirm>` | 🆕 | — |
|
|
97
|
+
| message | `<Toast>` + `toast()` | ✅ | — |
|
|
98
|
+
| notification | `<Notification>` | ✅ | — |
|
|
99
|
+
| Drawer | `<Drawer position>` | ✅ | 四向 |
|
|
100
|
+
| Progress | `<ProgressBar>` | ✅ | — |
|
|
101
|
+
| Result | `<Result>` | ✅ | — |
|
|
102
|
+
| Skeleton | `<Skeleton>` | ✅ | — |
|
|
103
|
+
| Spin | `<Loading>` | ✅ | — |
|
|
104
|
+
|
|
105
|
+
### 框架级
|
|
106
|
+
| antd | weifuwu | 状态 | 备注 |
|
|
107
|
+
|------|---------|:----:|------|
|
|
108
|
+
| App | `createApp` | 🔧 | client 框架内置 |
|
|
109
|
+
| ConfigProvider | `--wf-*` token + ctx 注入 | 🔧 | client 框架内置 |
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Element Plus(74 项)
|
|
114
|
+
|
|
115
|
+
### 基础
|
|
116
|
+
| EP | weifuwu | 状态 | 备注 |
|
|
117
|
+
|----|---------|:----:|------|
|
|
118
|
+
| Button | `<Button>` | ✅ | — |
|
|
119
|
+
| Icon | `<Icon>` | ✅ | — |
|
|
120
|
+
| Link | `<Link>` | 🆕 | — |
|
|
121
|
+
| Divider | `<Divider>` | ✅ | — |
|
|
122
|
+
| Space | `<Space>` | 🆕 | — |
|
|
123
|
+
| Color | `--wf-*` token | 🔧 | layout token |
|
|
124
|
+
| Border | `--wf-border-*` token | 🔧 | layout token |
|
|
125
|
+
| Text | `<Text>`(Typography) | ✅ | — |
|
|
126
|
+
| Scrollbar | `<Scrollbar>` | 🆕 | — |
|
|
127
|
+
|
|
128
|
+
### 布局
|
|
129
|
+
| EP | weifuwu | 状态 | 备注 |
|
|
130
|
+
|----|---------|:----:|------|
|
|
131
|
+
| Container / Header / Aside / Main / Footer | `<Layout>` + LayoutHeader/LayoutSider/LayoutContent/LayoutFooter | 🆕 | — |
|
|
132
|
+
| Row / Col | `<Grid>` | 🆕 | 24 栅格 |
|
|
133
|
+
|
|
134
|
+
### 表单
|
|
135
|
+
| EP | weifuwu | 状态 | 备注 |
|
|
136
|
+
|----|---------|:----:|------|
|
|
137
|
+
| Input | `<Input>` | ✅ | — |
|
|
138
|
+
| InputNumber | `<InputNumber>` | ✅ | — |
|
|
139
|
+
| Autocomplete | `<AutoComplete>` | 🆕 | — |
|
|
140
|
+
| Select | `<Select searchable>` | ✅ | — |
|
|
141
|
+
| Cascader | `<Cascader>` | ✅ | — |
|
|
142
|
+
| Switch | `<Switch>` | ✅ | — |
|
|
143
|
+
| Slider | `<Slider>` | ✅ | — |
|
|
144
|
+
| TimePicker / TimeSelect | `<DatePicker mode="time">` | ✅ | — |
|
|
145
|
+
| DatePicker / DateTimePicker | `<DatePicker mode="date\|datetime">` | ✅ | — |
|
|
146
|
+
| Upload | `<FileUpload>` | ✅ | — |
|
|
147
|
+
| Rate | `<Rate>` | ✅ | — |
|
|
148
|
+
| ColorPicker | `<ColorPicker>` | ✅ | — |
|
|
149
|
+
| Transfer | `<Transfer>` | ✅ | — |
|
|
150
|
+
| Form / FormItem | `<Form>` + `<Field>` | ✅ | — |
|
|
151
|
+
| Checkbox / CheckboxGroup / CheckboxButton | `<Checkbox>/<CheckboxGroup>` | ✅ | — |
|
|
152
|
+
| Radio / RadioGroup / RadioButton | `<RadioGroup>` | ✅ | — |
|
|
153
|
+
| InputNumber | `<InputNumber>` | ✅ | — |
|
|
154
|
+
| InputTag | `<TagsInput>` | ✅ | — |
|
|
155
|
+
| TreeSelect | `<TreeSelect>` | ✅ | — |
|
|
156
|
+
| SelectV2 / CascaderPanel / TreeV2 | `<Select>/<Cascader>/<Tree>` | ✅ | 虚拟化同族 |
|
|
157
|
+
|
|
158
|
+
### 数据
|
|
159
|
+
| EP | weifuwu | 状态 | 备注 |
|
|
160
|
+
|----|---------|:----:|------|
|
|
161
|
+
| Avatar / AvatarGroup | `<Avatar>/<AvatarGroup>` | ✅ | — |
|
|
162
|
+
| Badge | `<Badge>` | ✅ | — |
|
|
163
|
+
| Calendar | `<Calendar>` | ✅ | — |
|
|
164
|
+
| Card | `<Card>` | ✅ | — |
|
|
165
|
+
| Carousel | `<Carousel>` | ✅ | — |
|
|
166
|
+
| Collapse / CollapseItem | `<Collapse>` | ✅ | — |
|
|
167
|
+
| Descriptions / DescriptionsItem | `<Descriptions>` | ✅ | — |
|
|
168
|
+
| Empty | `<EmptyState>` | ✅ | — |
|
|
169
|
+
| Image / ImageViewer | `<Img preview>` | ✅ | — |
|
|
170
|
+
| InfiniteScroll | `<InfiniteScroll>` + `<InView>` | ✅ | — |
|
|
171
|
+
| List | `<List>` | ✅ | — |
|
|
172
|
+
| Loading | `<Loading>` | ✅ | — |
|
|
173
|
+
| Result | `<Result>` | ✅ | — |
|
|
174
|
+
| Skeleton / SkeletonItem | `<Skeleton>` | ✅ | — |
|
|
175
|
+
| Table / TableColumn | `<Table>` | ✅ | — |
|
|
176
|
+
| Tabs / TabPane | `<Tabs>` | ✅ | — |
|
|
177
|
+
| Tag | `<Tag>` | ✅ | — |
|
|
178
|
+
| Timeline / TimelineItem | `<Timeline>` | ✅ | — |
|
|
179
|
+
| Tree | `<Tree>` | ✅ | — |
|
|
180
|
+
| Tooltip / TooltipV2 | `<Tooltip>` | ✅ | — |
|
|
181
|
+
| VirtualizedTable | `<VirtualTable>` | ✅ | — |
|
|
182
|
+
|
|
183
|
+
### 导航
|
|
184
|
+
| EP | weifuwu | 状态 | 备注 |
|
|
185
|
+
|----|---------|:----:|------|
|
|
186
|
+
| Affix | `<Affix>` | ✅ | — |
|
|
187
|
+
| Backtop | `<BackTop>` | ✅ | — |
|
|
188
|
+
| Breadcrumb | `<Breadcrumb>` | ✅ | — |
|
|
189
|
+
| Dropdown / DropdownItem / DropdownMenu | `<Dropdown>` | ✅ | — |
|
|
190
|
+
| Menu / MenuItem / MenuItemGroup | `<Menu>` | ✅ | — |
|
|
191
|
+
| PageHeader | `<PageHeader>` | ✅ | — |
|
|
192
|
+
| Pagination | `<Pagination>` | ✅ | — |
|
|
193
|
+
| Steps / Step | `<Steps>` | ✅ | — |
|
|
194
|
+
|
|
195
|
+
### 反馈
|
|
196
|
+
| EP | weifuwu | 状态 | 备注 |
|
|
197
|
+
|----|---------|:----:|------|
|
|
198
|
+
| Alert | `<Alert>` | ✅ | — |
|
|
199
|
+
| AlertGroup | `<AlertGroup>` | 🆕 | EP 2.8 新增 |
|
|
200
|
+
| Dialog | `<Modal>` | ✅ | — |
|
|
201
|
+
| Drawer | `<Drawer>` | ✅ | — |
|
|
202
|
+
| Message | `<Toast>` + `toast()` | ✅ | — |
|
|
203
|
+
| MessageBox | `<Confirm>` + `confirm()` | ✅ | — |
|
|
204
|
+
| Notification | `<Notification>` | ✅ | — |
|
|
205
|
+
| Popconfirm | `<Popconfirm>` | 🆕 | — |
|
|
206
|
+
| Popover | `<Popover>` | ✅ | — |
|
|
207
|
+
| Progress | `<ProgressBar>` | ✅ | — |
|
|
208
|
+
| Rate | `<Rate>` | ✅ | — |
|
|
209
|
+
| Slider | `<Slider>` | ✅ | — |
|
|
210
|
+
| Switch | `<Switch>` | ✅ | — |
|
|
211
|
+
| Tooltip | `<Tooltip>` | ✅ | — |
|
|
212
|
+
|
|
213
|
+
### 框架级
|
|
214
|
+
| EP | weifuwu | 状态 | 备注 |
|
|
215
|
+
|----|---------|:----:|------|
|
|
216
|
+
| ConfigProvider | `--wf-*` token + ctx | 🔧 | client 内置 |
|
|
217
|
+
| Teleport | `createPortal` | 🔧 | client 内置 |
|
|
218
|
+
| Overlay | 渲染器内置遮罩 | 🔧 | client 内置 |
|
|
219
|
+
| AlertGroup | `<AlertGroup>` | 🆕 | — |
|
|
220
|
+
|
|
221
|
+
---
|
|
222
|
+
|
|
223
|
+
## shadcn-ui(50 项)
|
|
224
|
+
|
|
225
|
+
| shadcn | weifuwu | 状态 | 备注 |
|
|
226
|
+
|--------|---------|:----:|------|
|
|
227
|
+
| Accordion | `<Accordion>` | ✅ | — |
|
|
228
|
+
| Alert | `<Alert>` | ✅ | — |
|
|
229
|
+
| AlertDialog | `<Confirm>` | ✅ | — |
|
|
230
|
+
| AspectRatio | `<AspectRatio>` | ✅ | — |
|
|
231
|
+
| Avatar | `<Avatar>` | ✅ | — |
|
|
232
|
+
| Badge | `<Badge>` | ✅ | — |
|
|
233
|
+
| Breadcrumb | `<Breadcrumb>` | ✅ | — |
|
|
234
|
+
| Button | `<Button>` | ✅ | — |
|
|
235
|
+
| Calendar | `<Calendar>` | ✅ | — |
|
|
236
|
+
| Card | `<Card>` | ✅ | — |
|
|
237
|
+
| Carousel | `<Carousel>` | ✅ | — |
|
|
238
|
+
| Chart | `<Chart>` | ✅ | 自研零依赖 |
|
|
239
|
+
| Checkbox | `<Checkbox>` | ✅ | — |
|
|
240
|
+
| Collapsible | `<Collapse>` | ✅ | — |
|
|
241
|
+
| Combobox | `<Select searchable>` + `<AutoComplete>` | ✅/🆕 | 可搜索选择 + 输入联想 |
|
|
242
|
+
| Command | `<Command>` | ✅ | Cmd+K 面板 |
|
|
243
|
+
| ContextMenu | `<ContextMenu>` | ✅ | — |
|
|
244
|
+
| DataTable | `<Table>` + `<VirtualTable>` | ✅ | — |
|
|
245
|
+
| DatePicker | `<DatePicker>` | ✅ | — |
|
|
246
|
+
| Dialog | `<Modal>` | ✅ | — |
|
|
247
|
+
| Drawer | `<Drawer>` | ✅ | — |
|
|
248
|
+
| DropdownMenu | `<Dropdown>` | ✅ | — |
|
|
249
|
+
| Form | `<Form>` + `<Field>` | ✅ | — |
|
|
250
|
+
| HoverCard | `<HoverCard>` | ✅ | — |
|
|
251
|
+
| Input | `<Input>` | ✅ | — |
|
|
252
|
+
| InputOTP | `<PinInput>` | ✅ | — |
|
|
253
|
+
| Label | `<Label>` | ✅ | — |
|
|
254
|
+
| Menubar | `<Menubar>` | ✅ | — |
|
|
255
|
+
| NavigationMenu | `<NavMenu>` | 🆕 | — |
|
|
256
|
+
| Pagination | `<Pagination>` | ✅ | — |
|
|
257
|
+
| Popover | `<Popover>` | ✅ | — |
|
|
258
|
+
| Progress | `<ProgressBar>` | ✅ | — |
|
|
259
|
+
| RadioGroup | `<RadioGroup>` | ✅ | — |
|
|
260
|
+
| Resizable | `<Resizable>` | ✅ | — |
|
|
261
|
+
| ScrollArea | `<Scrollbar>` | 🆕 | 容器滚动 |
|
|
262
|
+
| Select | `<Select>` | ✅ | — |
|
|
263
|
+
| Separator | `<Divider>` | ✅ | — |
|
|
264
|
+
| Sheet | `<Drawer position="bottom">` | ✅ | — |
|
|
265
|
+
| Sidebar | `<Layout>` + LayoutSider | 🆕 | — |
|
|
266
|
+
| Skeleton | `<Skeleton>` | ✅ | — |
|
|
267
|
+
| Slider | `<Slider>` | ✅ | — |
|
|
268
|
+
| Sonner | `<Toast>` + `toast()` | ✅ | — |
|
|
269
|
+
| Switch | `<Switch>` | ✅ | — |
|
|
270
|
+
| Table | `<Table>` | ✅ | — |
|
|
271
|
+
| Tabs | `<Tabs>` | ✅ | — |
|
|
272
|
+
| Textarea | `<Textarea>` | ✅ | — |
|
|
273
|
+
| Toast | `<Toast>` | ✅ | — |
|
|
274
|
+
| Toggle / ToggleGroup | `<ToggleGroup>` | ✅ | — |
|
|
275
|
+
| Tooltip | `<Tooltip>` | ✅ | — |
|
|
276
|
+
| —(无独立项) | — | — | — |
|
|
277
|
+
|
|
278
|
+
---
|
|
279
|
+
|
|
280
|
+
## 汇总
|
|
281
|
+
|
|
282
|
+
| 库 | 总数 | ✅ 已有 | 🆕 batch-8 | 🔧 框架内置 |
|
|
283
|
+
|----|:----:|:------:|:---------:|:---------:|
|
|
284
|
+
| antd | 84 | 75 | 7(Layout/Link/Space/Grid/Flex/Empty 修正/AutoComplete/Popconfirm/FloatButton/StatCard) | 2 |
|
|
285
|
+
| EP | 74 | 65 | 7(Link/Space/Scrollbar/Layout/Grid/AutoComplete/Popconfirm/AlertGroup) | 3 |
|
|
286
|
+
| shadcn | 50 | 45 | 3(NavMenu/Scrollbar/Layout) | 0 |
|
|
287
|
+
| **合计** | **208** | **185** | **17**(去重后 11 组件 + 5 增强) | **5** |
|
|
288
|
+
|
|
289
|
+
> batch-8 新增组件:`Layout`(含子组件)、`AutoComplete`、`Popconfirm`、`FloatButton`、
|
|
290
|
+
> `NavMenu`、`Link`、`Space`、`Grid`、`Scrollbar`、`AlertGroup`、`StatCard`(countdown 增强)
|
package/docs/components-map.md
CHANGED
|
@@ -172,3 +172,25 @@
|
|
|
172
172
|
> AI 开发者工具链成型:AiChat / Command / JSONViewer / LogViewer / DiffView /
|
|
173
173
|
> Pipeline——三库差异化最深的完整工具线。
|
|
174
174
|
> 裁剪声明见 `design/components-roadmap.md` 第七批。
|
|
175
|
+
|
|
176
|
+
## 第八批:三库并集缺口清零(102 → 113,2026-08)
|
|
177
|
+
|
|
178
|
+
> 三库评估:antd 88% / EP 89% / shadcn 92%——本批补齐全部真实缺口,三库 208 项 100% 有对应。
|
|
179
|
+
> 完整逆向映射表见 `docs/compat-three-library.md`。
|
|
180
|
+
|
|
181
|
+
| 组件 | 类型 | 三库等价 | 要点 |
|
|
182
|
+
|------|------|---------|------|
|
|
183
|
+
| **Layout**(+LayoutHeader/Sider/Content/Footer) | 新增 | antd Layout / EP Container / shadcn Sidebar | 复合子组件双模式;含 Sider → row 布局;Sider 折叠受控/非受控 + trigger |
|
|
184
|
+
| **Popconfirm** | 新增 | antd / EP Popconfirm | 复用 usePopup 基座(弹层组合性);danger 危险色;确认后自动关闭 |
|
|
185
|
+
| **AutoComplete** | 新增 | antd+EP Autocomplete / shadcn Combobox | 自由输入联想;包含过滤(纯函数);键盘 ↓↑/Enter/Escape;选中回填 |
|
|
186
|
+
| **Link** | 新增 | EP Link / antd Typography.Link | 语义色/下划线/disabled/new window/icon |
|
|
187
|
+
| **FloatButton** | 新增 | antd FloatButton(特有) | fixed 定位 + badge + 组展开状态机 |
|
|
188
|
+
| **NavMenu** | 新增 | shadcn NavigationMenu(特有) | 顶部多级 hover 弹出 + 键盘 →/Escape |
|
|
189
|
+
| **Space** | 新增 | antd / EP Space | flex gap 布局 + split 分隔符 |
|
|
190
|
+
| **Grid**(+Col) | 新增 | antd Row/Col/Flex / EP Row/Col | 24 栅格 + gutter + flex 容器模式 |
|
|
191
|
+
| **Scrollbar** | 新增 | EP Scrollbar / shadcn ScrollArea | webkit 滚动条样式容器 |
|
|
192
|
+
| **AlertGroup** | 新增 | EP AlertGroup(2.8) | ≥3 条合并折叠 +N,点击展开 |
|
|
193
|
+
| **StatCard ⬆️** | 增强 | antd Statistic.Countdown | countdown 模式:剩余 HH:MM:SS + 结束回调(1s tick + 清理纪律) |
|
|
194
|
+
|
|
195
|
+
> 三库 208 项(antd 84 / EP 74 / shadcn 50)→ 100% 覆盖(业务组件全对应;
|
|
196
|
+
> 框架级 App/ConfigProvider/Teleport/Overlay 由 createApp/createPortal/--wf-* token 内置)。
|