geneeantd 0.0.6

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.
Files changed (57) hide show
  1. package/README.md +605 -0
  2. package/dist/assets/BUTTON-41.png +0 -0
  3. package/dist/assets/Frame1.png +0 -0
  4. package/dist/assets/bell.png +0 -0
  5. package/dist/assets/button_icon.png +0 -0
  6. package/dist/assets/demo/logo1.png +0 -0
  7. package/dist/assets/down.png +0 -0
  8. package/dist/assets/react.svg +1 -0
  9. package/dist/assets/svg/bell.svg +5 -0
  10. package/dist/assets/svg/down.svg +5 -0
  11. package/dist/assets/svg/homepage.svg +1 -0
  12. package/dist/assets/svg/kefu.svg +8 -0
  13. package/dist/components/AvatarUpload/index.d.ts +3 -0
  14. package/dist/components/AvatarUpload/types.d.ts +10 -0
  15. package/dist/components/DetailView/index.d.ts +3 -0
  16. package/dist/components/DetailView/types.d.ts +17 -0
  17. package/dist/components/DoubleColLayout/index.d.ts +8 -0
  18. package/dist/components/DoubleColLayout/type.d.ts +86 -0
  19. package/dist/components/DynamicForm/index.d.ts +8 -0
  20. package/dist/components/DynamicForm/index.test.d.ts +1 -0
  21. package/dist/components/DynamicForm/types.d.ts +44 -0
  22. package/dist/components/FilterForm/index.d.ts +7 -0
  23. package/dist/components/FilterForm/types.d.ts +6 -0
  24. package/dist/components/FloatCard/index.d.ts +9 -0
  25. package/dist/components/FloatCard/types.d.ts +15 -0
  26. package/dist/components/GlobalHeader/components/AppStorePop/index.d.ts +3 -0
  27. package/dist/components/GlobalHeader/components/UserActions/index.d.ts +6 -0
  28. package/dist/components/GlobalHeader/components/UserPop/index.d.ts +5 -0
  29. package/dist/components/GlobalHeader/index.d.ts +3 -0
  30. package/dist/components/GlobalHeader/types.d.ts +50 -0
  31. package/dist/components/Login/components/OutLogin.d.ts +26 -0
  32. package/dist/components/Login/components/QrcodeLogin.d.ts +15 -0
  33. package/dist/components/Login/components/RegisterForm.d.ts +9 -0
  34. package/dist/components/Login/components/RegisterType.d.ts +13 -0
  35. package/dist/components/Login/components/SsoLogin.d.ts +16 -0
  36. package/dist/components/Login/index.d.ts +8 -0
  37. package/dist/components/Login/types.d.ts +47 -0
  38. package/dist/components/PageHeader/index.d.ts +7 -0
  39. package/dist/components/RemoteSelect/index.d.ts +3 -0
  40. package/dist/components/RemoteSelect/types.d.ts +15 -0
  41. package/dist/components/SelectedFilterTags/index.d.ts +8 -0
  42. package/dist/components/SelectedFilterTags/types.d.ts +11 -0
  43. package/dist/components/SidebarMenu/index.d.ts +7 -0
  44. package/dist/components/SidebarMenu/types.d.ts +14 -0
  45. package/dist/components/TablePlus/components/TableProvider/index.d.ts +2 -0
  46. package/dist/components/TablePlus/components/ToolBar/Setting.d.ts +6 -0
  47. package/dist/components/TablePlus/components/ToolBar/index.d.ts +7 -0
  48. package/dist/components/TablePlus/context.d.ts +3 -0
  49. package/dist/components/TablePlus/index.d.ts +5 -0
  50. package/dist/components/TablePlus/types.d.ts +74 -0
  51. package/dist/components/index.d.ts +18 -0
  52. package/dist/genee-antd.es.js +8434 -0
  53. package/dist/genee-antd.umd.js +157 -0
  54. package/dist/index.d.ts +1 -0
  55. package/dist/style.css +1 -0
  56. package/dist/vite.svg +1 -0
  57. package/package.json +121 -0
package/README.md ADDED
@@ -0,0 +1,605 @@
1
+ # DynamicForm 和 ListTable 组件使用文档
2
+
3
+ 本文档详细介绍了项目中的两个核心组件:`DynamicForm`(动态表单组件)和 `ListTable`(列表表格组件)的使用方法、属性配置和示例代码。
4
+
5
+ ## 一、DynamicForm 组件
6
+
7
+ ### 1. 组件介绍
8
+
9
+ `DynamicForm` 是一个灵活的动态表单组件,支持多种表单项类型配置、响应式布局和折叠/展开功能。它基于 Ant Design 的 Form 组件进行封装,极大简化了复杂表单的构建过程。
10
+
11
+ ### 2. 组件属性
12
+
13
+ | 属性名 | 类型 | 默认值 | 说明 |
14
+ |-------|------|-------|------|
15
+ | items | `FormItem[]` | 必填 | 表单项配置数组 |
16
+ | onSubmit | `(values: Record<string, unknown>) => void` | 必填 | 表单提交回调函数 |
17
+ | layout | `'inline' \| 'horizontal' \| 'vertical'` | `'horizontal'` | 表单项标签对齐方式 |
18
+ | onReset | `() => void` | 可选 | 表单重置回调函数 |
19
+ | form | `FormInstance` | 可选 | 外部传入的 form 实例 |
20
+ | collapsed | `boolean` | `false` | 初始折叠状态 |
21
+ | submitText | `string` | `'提交'` | 提交按钮文本 |
22
+ | resetText | `string` | `'重置'` | 重置按钮文本 |
23
+ | defaultShowCount | `number` | `0` | 默认显示的表单项数量 |
24
+ | labelCol | `Record<string, unknown>` | `{ span: 6 }` | 标签列宽度配置 |
25
+ | wrapperCol | `Record<string, unknown>` | `{ span: 16 }` | 表单项列宽度配置 |
26
+ | itemsPerRow | `number` | `3` | 每行显示的表单项数量 |
27
+ | onCollapseChange | `(collapsed: boolean) => void` | 可选 | 折叠状态变化回调 |
28
+
29
+ ### 3. FormItem 接口定义
30
+
31
+ ```typescript
32
+ interface FormItem {
33
+ label: string; // 表单项标签
34
+ name: string; // 表单项字段名
35
+ type:
36
+ | "text"
37
+ | "select"
38
+ | "date"
39
+ | "number"
40
+ | "checkbox"
41
+ | "radio"
42
+ | "cascader"
43
+ | "custom"
44
+ | "remoteSelect"; // 表单项类型
45
+ props?: Record<string, unknown>; // 传递给具体组件的属性
46
+ options?: { label: string; value: string | number }[]; // 仅当 type 为 select, radio, checkbox 时使用
47
+ rules?: Record<string, unknown>[]; // 校验规则
48
+ customRender?: React.ReactNode; // 当 type 为 custom 时使用
49
+ }
50
+ ```
51
+
52
+ ### 4. 使用示例
53
+
54
+ #### 基础用法
55
+
56
+ ```tsx
57
+ import React from 'react';
58
+ import { Button } from 'antd';
59
+ import DynamicForm from './components/DynamicForm';
60
+
61
+ const MyFormPage: React.FC = () => {
62
+ // 表单项配置
63
+ const formItems = [
64
+ {
65
+ label: '姓名',
66
+ name: 'name',
67
+ type: 'text',
68
+ rules: [{ required: true, message: '请输入姓名' }]
69
+ },
70
+ {
71
+ label: '年龄',
72
+ name: 'age',
73
+ type: 'number',
74
+ props: { min: 18, max: 100 }
75
+ },
76
+ {
77
+ label: '性别',
78
+ name: 'gender',
79
+ type: 'radio',
80
+ options: [
81
+ { label: '男', value: 'male' },
82
+ { label: '女', value: 'female' }
83
+ ]
84
+ },
85
+ {
86
+ label: '兴趣爱好',
87
+ name: 'hobbies',
88
+ type: 'checkbox',
89
+ props: { mode: 'multiple' },
90
+ options: [
91
+ { label: '阅读', value: 'reading' },
92
+ { label: '运动', value: 'sports' },
93
+ { label: '音乐', value: 'music' }
94
+ ]
95
+ },
96
+ {
97
+ label: '出生日期',
98
+ name: 'birthday',
99
+ type: 'date',
100
+ props: { format: 'YYYY-MM-DD' }
101
+ },
102
+ {
103
+ label: '所在城市',
104
+ name: 'city',
105
+ type: 'cascader',
106
+ options: [
107
+ {
108
+ label: '北京',
109
+ value: 'beijing',
110
+ children: [{ label: '朝阳区', value: 'chaoyang' }]
111
+ },
112
+ {
113
+ label: '上海',
114
+ value: 'shanghai',
115
+ children: [{ label: '浦东新区', value: 'pudong' }]
116
+ }
117
+ ]
118
+ }
119
+ ];
120
+
121
+ // 处理表单提交
122
+ const handleSubmit = (values: Record<string, unknown>) => {
123
+ console.log('表单提交数据:', values);
124
+ // 这里可以处理表单提交逻辑,如API请求等
125
+ };
126
+
127
+ return (
128
+ <div>
129
+ <h2>用户信息表单</h2>
130
+ <DynamicForm
131
+ items={formItems}
132
+ onSubmit={handleSubmit}
133
+ defaultShowCount={3} // 默认显示3个表单项,其余可折叠
134
+ itemsPerRow={2} // 每行显示2个表单项
135
+ />
136
+ </div>
137
+ );
138
+ };
139
+
140
+ export default MyFormPage;
141
+ ```
142
+
143
+ #### 使用自定义组件
144
+
145
+ ```tsx
146
+ import React from 'react';
147
+ import { Input, Rate, Slider } from 'antd';
148
+ import DynamicForm from './components/DynamicForm';
149
+
150
+ const CustomFormPage: React.FC = () => {
151
+ const formItems = [
152
+ // 其他表单项...
153
+ {
154
+ label: '评分',
155
+ name: 'rating',
156
+ type: 'custom',
157
+ customRender: <Rate />,
158
+ rules: [{ required: true, message: '请评分' }]
159
+ },
160
+ {
161
+ label: '自定义输入',
162
+ name: 'customInput',
163
+ type: 'custom',
164
+ customRender: (
165
+ <>
166
+ <Input placeholder="前缀" style={{ width: '40%', marginRight: 10 }} />
167
+ <Input placeholder="后缀" style={{ width: '40%' }} />
168
+ </>
169
+ )
170
+ }
171
+ ];
172
+
173
+ const handleSubmit = (values: Record<string, unknown>) => {
174
+ console.log('提交数据:', values);
175
+ };
176
+
177
+ return (
178
+ <DynamicForm
179
+ items={formItems}
180
+ onSubmit={handleSubmit}
181
+ />
182
+ );
183
+ };
184
+ ```
185
+
186
+ ## 二、ListTable 组件
187
+
188
+ ### 1. 组件介绍
189
+
190
+ `ListTable` 是一个功能强大的列表表格组件,整合了数据展示、分页、搜索和工具栏等功能。它基于 Ant Design 的 Table 组件进行封装,可以快速构建完整的数据列表页面。
191
+
192
+ ### 2. 组件属性
193
+
194
+ | 属性名 | 类型 | 默认值 | 说明 |
195
+ |-------|------|-------|------|
196
+ | columns | `ListTableColumn[]` | 必填 | 表格列配置数组 |
197
+ | request | `(params: any) => Promise<{ data: T[]; success: boolean; total: number }>` | 必填(除非提供dataSource) | 数据请求函数 |
198
+ | dataSource | `T[]` | 可选 | 本地数据源,如果提供则不执行request |
199
+ | toolBarRender | `() => ReactNode[]` | 可选 | 自定义工具栏按钮渲染函数 |
200
+ | tableTitle | `ReactNode` | 可选 | 表格标题 |
201
+ | pagination | `{ pageSize?: number; current?: number; total?: number; showSizeChanger?: boolean; showQuickJumper?: boolean; onChange?: (page: number, pageSize: number) => void } \| false` | 可选 | 分页配置,传false则不显示分页 |
202
+ | ...tableProps | `TableProps<T>` | 可选 | 其他Ant Design Table组件属性 |
203
+
204
+ ### 3. ListTableColumn 接口定义
205
+
206
+ ```typescript
207
+ interface ListTableColumn<T = any> extends Omit<ColumnType<T>, 'dataIndex'> {
208
+ dataIndex: string; // 数据字段名
209
+ hideInSearch?: boolean; // 是否在搜索表单中隐藏
210
+ hideInTable?: boolean; // 是否在表格中隐藏
211
+ valueEnum?: Pick<FormItem, 'options'> | Record<string, { label: string; value?: string }>; // 枚举值配置
212
+ formItemProps?: Omit<FormItem, 'label' | 'name' | 'options'>; // 搜索表单项属性
213
+ }
214
+ ```
215
+
216
+ ### 4. 使用示例
217
+
218
+ #### 基础用法(使用远程数据源)
219
+
220
+ ```tsx
221
+ import React from 'react';
222
+ import { Button } from 'antd';
223
+ import ListTable, { ListTableColumn } from './components/ListTable';
224
+
225
+ interface User {
226
+ id: string;
227
+ name: string;
228
+ age: number;
229
+ gender: 'male' | 'female';
230
+ status: 'active' | 'inactive' | 'pending';
231
+ createTime: string;
232
+ }
233
+
234
+ const UserListPage: React.FC = () => {
235
+ // 列配置
236
+ const columns: ListTableColumn<User>[] = [
237
+ {
238
+ title: '用户ID',
239
+ dataIndex: 'id',
240
+ key: 'id',
241
+ width: 80
242
+ },
243
+ {
244
+ title: '姓名',
245
+ dataIndex: 'name',
246
+ key: 'name'
247
+ },
248
+ {
249
+ title: '年龄',
250
+ dataIndex: 'age',
251
+ key: 'age',
252
+ width: 80
253
+ },
254
+ {
255
+ title: '性别',
256
+ dataIndex: 'gender',
257
+ key: 'gender',
258
+ width: 80,
259
+ valueEnum: {
260
+ options: [
261
+ { label: '男', value: 'male' },
262
+ { label: '女', value: 'female' }
263
+ ]
264
+ }
265
+ },
266
+ {
267
+ title: '状态',
268
+ dataIndex: 'status',
269
+ key: 'status',
270
+ width: 100,
271
+ valueEnum: {
272
+ active: { label: '活跃' },
273
+ inactive: { label: '禁用' },
274
+ pending: { label: '待审核' }
275
+ }
276
+ },
277
+ {
278
+ title: '创建时间',
279
+ dataIndex: 'createTime',
280
+ key: 'createTime'
281
+ },
282
+ {
283
+ title: '操作',
284
+ key: 'action',
285
+ width: 150,
286
+ render: (_, record) => (
287
+ <>
288
+ <Button type="link" style={{color:'#2BA07F',fontSize:'14px'}} onClick={() => handleEdit(record)}>
289
+ 编辑
290
+ </Button>
291
+ <Button type="link" danger onClick={() => handleDelete(record.id)}>
292
+ 删除
293
+ </Button>
294
+ </>
295
+ )
296
+ }
297
+ ];
298
+
299
+ // 数据请求函数
300
+ const request = async (params: any) => {
301
+ // 模拟API请求
302
+ console.log('请求参数:', params);
303
+ // 实际项目中这里应该调用真实的API
304
+ // const response = await api.getUsers(params);
305
+ // return response;
306
+
307
+ // 模拟数据
308
+ return {
309
+ success: true,
310
+ total: 100,
311
+ data: Array(10).fill(0).map((_, index) => ({
312
+ id: `user_${params.page || 1}_${index + 1}`,
313
+ name: `用户${(params.page || 1) * 10 + index}`,
314
+ age: 18 + Math.floor(Math.random() * 30),
315
+ gender: Math.random() > 0.5 ? 'male' : 'female',
316
+ status: ['active', 'inactive', 'pending'][Math.floor(Math.random() * 3)],
317
+ createTime: new Date(Date.now() - Math.random() * 10000000000).toISOString()
318
+ }))
319
+ };
320
+ };
321
+
322
+ // 自定义工具栏
323
+ const toolBarRender = () => [
324
+ <Button key="add" type="primary" style={{backgroundColor: '#2BA07F', borderColor: '#2BA07F'}}>
325
+ 添加用户
326
+ </Button>
327
+ ];
328
+
329
+ // 处理编辑
330
+ const handleEdit = (record: User) => {
331
+ console.log('编辑用户:', record);
332
+ // 实现编辑逻辑
333
+ };
334
+
335
+ // 处理删除
336
+ const handleDelete = (id: string) => {
337
+ console.log('删除用户:', id);
338
+ // 实现删除逻辑
339
+ };
340
+
341
+ return (
342
+ <div>
343
+ <h2>用户管理列表</h2>
344
+ <ListTable
345
+ columns={columns}
346
+ request={request}
347
+ tableTitle="用户列表"
348
+ toolBarRender={toolBarRender}
349
+ pagination={{
350
+ pageSize: 10,
351
+ showSizeChanger: true,
352
+ showQuickJumper: true
353
+ }}
354
+ />
355
+ </div>
356
+ );
357
+ };
358
+
359
+ export default UserListPage;
360
+ ```
361
+
362
+ #### 使用本地数据源
363
+
364
+ ```tsx
365
+ import React from 'react';
366
+ import ListTable from './components/ListTable';
367
+
368
+ const LocalDataPage: React.FC = () => {
369
+ // 本地数据源
370
+ const localData = [
371
+ { id: '1', name: '张三', age: 25, department: '开发部' },
372
+ { id: '2', name: '李四', age: 30, department: '市场部' },
373
+ { id: '3', name: '王五', age: 35, department: '设计部' }
374
+ ];
375
+
376
+ // 列配置
377
+ const columns = [
378
+ { title: 'ID', dataIndex: 'id', key: 'id' },
379
+ { title: '姓名', dataIndex: 'name', key: 'name' },
380
+ { title: '年龄', dataIndex: 'age', key: 'age' },
381
+ { title: '部门', dataIndex: 'department', key: 'department' }
382
+ ];
383
+
384
+ // 空的请求函数(因为使用本地数据源)
385
+ const emptyRequest = async () => ({
386
+ success: true,
387
+ data: [],
388
+ total: 0
389
+ });
390
+
391
+ return (
392
+ <ListTable
393
+ columns={columns}
394
+ request={emptyRequest}
395
+ dataSource={localData} // 使用本地数据源
396
+ pagination={{
397
+ pageSize: 10,
398
+ showSizeChanger: false
399
+ }}
400
+ />
401
+ );
402
+ };
403
+ ```
404
+
405
+ ## 三、组件组合使用
406
+
407
+ 以下示例展示如何结合 `DynamicForm` 和 `ListTable` 组件,构建一个完整的数据管理页面:
408
+
409
+ ```tsx
410
+ import React, { useState } from 'react';
411
+ import { Button, Modal, message } from 'antd';
412
+ import DynamicForm from './components/DynamicForm';
413
+ import ListTable from './components/ListTable';
414
+
415
+ interface Product {
416
+ id: string;
417
+ name: string;
418
+ price: number;
419
+ category: string;
420
+ stock: number;
421
+ }
422
+
423
+ const ProductManagementPage: React.FC = () => {
424
+ const [isModalVisible, setIsModalVisible] = useState(false);
425
+ const [editingProduct, setEditingProduct] = useState<Product | null>(null);
426
+
427
+ // 产品表单配置
428
+ const productFormItems = [
429
+ {
430
+ label: '产品名称',
431
+ name: 'name',
432
+ type: 'text',
433
+ rules: [{ required: true, message: '请输入产品名称' }]
434
+ },
435
+ {
436
+ label: '产品价格',
437
+ name: 'price',
438
+ type: 'number',
439
+ props: { min: 0, step: 0.01, precision: 2 },
440
+ rules: [{ required: true, message: '请输入产品价格' }]
441
+ },
442
+ {
443
+ label: '产品分类',
444
+ name: 'category',
445
+ type: 'select',
446
+ options: [
447
+ { label: '电子产品', value: 'electronics' },
448
+ { label: '服装鞋帽', value: 'clothing' },
449
+ { label: '食品饮料', value: 'food' }
450
+ ],
451
+ rules: [{ required: true, message: '请选择产品分类' }]
452
+ },
453
+ {
454
+ label: '库存数量',
455
+ name: 'stock',
456
+ type: 'number',
457
+ props: { min: 0, step: 1 },
458
+ rules: [{ required: true, message: '请输入库存数量' }]
459
+ }
460
+ ];
461
+
462
+ // 表格列配置
463
+ const columns = [
464
+ { title: '产品ID', dataIndex: 'id', key: 'id' },
465
+ { title: '产品名称', dataIndex: 'name', key: 'name' },
466
+ { title: '产品价格', dataIndex: 'price', key: 'price', render: (price) => `¥${price}` },
467
+ { title: '产品分类', dataIndex: 'category', key: 'category' },
468
+ { title: '库存数量', dataIndex: 'stock', key: 'stock' },
469
+ {
470
+ title: '操作',
471
+ key: 'action',
472
+ render: (_, record) => (
473
+ <>
474
+ <Button type="link" style={{color:'#2BA07F',fontSize:'14px'}} onClick={() => handleEdit(record)}>
475
+ 编辑
476
+ </Button>
477
+ <Button type="link" danger onClick={() => handleDelete(record.id)}>
478
+ 删除
479
+ </Button>
480
+ </>
481
+ )
482
+ }
483
+ ];
484
+
485
+ // 数据请求函数
486
+ const request = async (params: any) => {
487
+ // 实际项目中这里应该调用真实的API
488
+ console.log('请求参数:', params);
489
+ // 模拟数据返回
490
+ return {
491
+ success: true,
492
+ total: 50,
493
+ data: Array(10).fill(0).map((_, index) => ({
494
+ id: `prod_${params.page || 1}_${index + 1}`,
495
+ name: `产品${(params.page || 1) * 10 + index}`,
496
+ price: 10 + Math.random() * 990,
497
+ category: ['electronics', 'clothing', 'food'][Math.floor(Math.random() * 3)],
498
+ stock: Math.floor(Math.random() * 1000)
499
+ }))
500
+ };
501
+ };
502
+
503
+ // 打开添加/编辑模态框
504
+ const showModal = (product: Product | null = null) => {
505
+ setEditingProduct(product);
506
+ setIsModalVisible(true);
507
+ };
508
+
509
+ // 处理编辑
510
+ const handleEdit = (product: Product) => {
511
+ showModal(product);
512
+ };
513
+
514
+ // 处理删除
515
+ const handleDelete = (id: string) => {
516
+ console.log('删除产品:', id);
517
+ // 实际项目中这里应该调用删除API
518
+ message.success('产品删除成功');
519
+ };
520
+
521
+ // 处理表单提交
522
+ const handleSubmit = (values: Record<string, unknown>) => {
523
+ console.log('提交产品数据:', values);
524
+ // 实际项目中这里应该调用保存API
525
+ setIsModalVisible(false);
526
+ message.success(editingProduct ? '产品更新成功' : '产品添加成功');
527
+ setEditingProduct(null);
528
+ };
529
+
530
+ // 自定义工具栏
531
+ const toolBarRender = () => [
532
+ <Button key="add" type="primary" style={{backgroundColor: '#2BA07F', borderColor: '#2BA07F'}} onClick={() => showModal()}>
533
+ 添加产品
534
+ </Button>
535
+ ];
536
+
537
+ return (
538
+ <div>
539
+ <h2>产品管理系统</h2>
540
+ <ListTable
541
+ columns={columns}
542
+ request={request}
543
+ toolBarRender={toolBarRender}
544
+ pagination={{
545
+ pageSize: 10,
546
+ showSizeChanger: true,
547
+ showQuickJumper: true
548
+ }}
549
+ />
550
+
551
+ {/* 添加/编辑产品模态框 */}
552
+ <Modal
553
+ title={editingProduct ? '编辑产品' : '添加产品'}
554
+ open={isModalVisible}
555
+ onCancel={() => {
556
+ setIsModalVisible(false);
557
+ setEditingProduct(null);
558
+ }}
559
+ footer={null}
560
+ width={600}
561
+ >
562
+ <DynamicForm
563
+ items={productFormItems}
564
+ onSubmit={handleSubmit}
565
+ itemsPerRow={1}
566
+ />
567
+ </Modal>
568
+ </div>
569
+ );
570
+ };
571
+
572
+ export default ProductManagementPage;
573
+ ```
574
+
575
+ ## 四、主题颜色配置
576
+
577
+ 项目中主题色已配置为 `#2BA07F`(一种绿色系颜色),在按钮、链接等交互元素中统一使用了这个颜色。如果需要自定义组件的颜色,可以通过 style 属性覆盖默认样式:
578
+
579
+ ```tsx
580
+ <Button
581
+ type="link"
582
+ style={{color:'#2BA07F',fontSize:'14px'}}
583
+ onClick={handleEdit}
584
+ >
585
+ 编辑
586
+ </Button>
587
+
588
+ <Button
589
+ type="primary"
590
+ style={{backgroundColor: '#2BA07F', borderColor: '#2BA07F'}}
591
+ onClick={handleAdd}
592
+ >
593
+ 添加
594
+ </Button>
595
+ ```
596
+
597
+ ## 五、注意事项
598
+
599
+ 1. **版本兼容性**:组件基于 Ant Design v5 开发,使用时请确保项目中 Ant Design 版本与之兼容。
600
+
601
+ 2. **数据格式**:使用 `ListTable` 组件时,数据请求函数 `request` 需要返回包含 `data`、`success` 和 `total` 三个字段的对象。
602
+
603
+ 3. **性能优化**:对于大量数据,建议使用 `request` 进行分页加载,而不是一次性加载所有数据。
604
+
605
+ 4. **表单验证**:`DynamicForm` 组件支持 Ant Design 的表单验证规则,可通过 `rules` 属性配置。
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -0,0 +1,5 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="bell">
3
+ <path id="Union" d="M6.67873 1.81957C6.76695 1.16869 7.32486 0.666992 7.99992 0.666992C8.68821 0.666992 9.25471 1.18855 9.32575 1.85802C11.2573 2.42931 12.6666 4.2169 12.6666 6.33366C12.6666 8.56813 13.1445 10.0488 13.5962 10.9522C13.8229 11.4055 14.0453 11.7183 14.2034 11.9115C14.2825 12.0082 14.3457 12.0751 14.3854 12.1149C14.4053 12.1347 14.4193 12.1478 14.4265 12.1543L14.4317 12.159C14.6436 12.3391 14.7216 12.6321 14.6268 12.8939C14.5312 13.1579 14.2806 13.3337 13.9999 13.3337H10.5826C10.2865 14.4838 9.24248 15.3337 7.99992 15.3337C6.75736 15.3337 5.71329 14.4838 5.41726 13.3337H1.99993C1.7362 13.3337 1.49726 13.1782 1.39042 12.9371C1.28386 12.6966 1.32869 12.416 1.50468 12.2207C1.52277 12.1996 1.54036 12.1782 1.55761 12.1564C1.59905 12.1042 1.66243 12.0205 1.74095 11.9051C1.898 11.6743 2.11549 11.3168 2.33927 10.8295C2.78531 9.85821 3.25934 8.36525 3.32544 6.32266C3.32776 5.10585 3.7148 3.93932 4.5171 3.06923C5.07163 2.46784 5.80061 2.03433 6.67873 1.81957ZM7.99992 14.0003C8.49344 14.0003 8.92433 13.7322 9.15487 13.3337H6.84496C7.0755 13.7322 7.5064 14.0003 7.99992 14.0003ZM12.6491 12.0003C12.5681 11.8629 12.4857 11.7125 12.4036 11.5485C11.8553 10.4518 11.3333 8.76585 11.3333 6.33366C11.3333 4.49272 9.84088 3.00033 7.99993 3.00033C6.84568 3.00033 6.02926 3.39619 5.49732 3.97308C4.95732 4.55871 4.65876 5.38777 4.65876 6.33366C4.65876 6.3407 4.65865 6.34773 4.65843 6.35476C4.58753 8.59333 4.0663 10.2637 3.55094 11.3859C3.44645 11.6134 3.34233 11.8182 3.24243 12.0003H12.6491Z" fill="#2BA07F"/>
4
+ </g>
5
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="down">
3
+ <path id="Union" d="M8.20831 9.73971C8.10156 9.87315 7.8986 9.87315 7.79185 9.73971L5.68002 7.09992C5.54033 6.92531 5.66465 6.66667 5.88825 6.66667L10.1119 6.66667C10.3355 6.66667 10.4598 6.92532 10.3201 7.09992L8.20831 9.73971Z" fill="#999999"/>
4
+ </g>
5
+ </svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1759197782746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13946" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M128 170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667z m0 298.666666a42.666667 42.666667 0 0 1 42.666667-42.666666h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666666v85.333334a42.666667 42.666667 0 0 1-42.666667 42.666666H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666666v-85.333334z m42.666667 256a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h85.333333a42.666667 42.666667 0 0 0 42.666667-42.666667v-85.333333a42.666667 42.666667 0 0 0-42.666667-42.666667H170.666667z m256-554.666666a42.666667 42.666667 0 0 1 42.666666-42.666667h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666666 42.666667h-85.333334a42.666667 42.666667 0 0 1-42.666666-42.666667V170.666667z m42.666666 256a42.666667 42.666667 0 0 0-42.666666 42.666666v85.333334a42.666667 42.666667 0 0 0 42.666666 42.666666h85.333334a42.666667 42.666667 0 0 0 42.666666-42.666666v-85.333334a42.666667 42.666667 0 0 0-42.666666-42.666666h-85.333334z m-42.666666 341.333333a42.666667 42.666667 0 0 1 42.666666-42.666667h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666666 42.666667h-85.333334a42.666667 42.666667 0 0 1-42.666666-42.666667v-85.333333z m341.333333-640a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h85.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-85.333333z m-42.666667 341.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666666v85.333334a42.666667 42.666667 0 0 1-42.666667 42.666666h-85.333333a42.666667 42.666667 0 0 1-42.666667-42.666666v-85.333334z m42.666667 256a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h85.333333a42.666667 42.666667 0 0 0 42.666667-42.666667v-85.333333a42.666667 42.666667 0 0 0-42.666667-42.666667h-85.333333z" fill="#000000" p-id="13947"></path></svg>
@@ -0,0 +1,8 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="button_icon">
3
+ <g id="Union">
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2921 5.33294H14.0001C14.3537 5.33294 14.6928 5.47342 14.9429 5.72347C15.1929 5.97351 15.3334 6.31265 15.3334 6.66627V9.33294C15.3334 9.68656 15.1929 10.0257 14.9429 10.2758C14.6928 10.5258 14.3537 10.6663 14.0001 10.6663H13.2921C13.1296 11.9551 12.5023 13.1404 11.5279 13.9996C10.5536 14.8588 9.29916 15.3329 8.00008 15.3329C7.63189 15.3329 7.33342 15.0345 7.33342 14.6663C7.33342 14.2981 7.63189 13.9996 8.00008 13.9996L8.00251 13.9996C9.0625 13.999 10.0789 13.5776 10.8285 12.828C11.5787 12.0779 12.0001 11.0605 12.0001 9.99961V5.99961C12.0001 4.93874 11.5787 3.92133 10.8285 3.17118C10.0784 2.42104 9.06095 1.99961 8.00008 1.99961C6.93922 1.99961 5.9218 2.42104 5.17165 3.17118C4.42151 3.92133 4.00008 4.93874 4.00008 5.99961V9.99961C4.00008 10.3678 3.7016 10.6663 3.33341 10.6663H2.00008C1.64646 10.6663 1.30732 10.5258 1.05727 10.2758C0.807224 10.0257 0.666748 9.68656 0.666748 9.33294V6.66627C0.666748 6.31265 0.807224 5.97351 1.05727 5.72347C1.30732 5.47342 1.64646 5.33294 2.00008 5.33294H2.70808C2.87077 4.0442 3.49813 2.85912 4.47246 2.00006C5.44679 1.14099 6.70112 0.666992 8.00008 0.666992C9.29905 0.666992 10.5534 1.14099 11.5277 2.00006C12.502 2.85912 13.1294 4.0442 13.2921 5.33294ZM2.00008 6.66627V9.33294H2.66675V6.66627H2.00008ZM13.3334 6.66627V9.33294H14.0001V6.66627H13.3334Z" fill="#999999"/>
5
+ <path d="M6.33578 9.66865C5.99588 9.52712 5.60561 9.68793 5.46407 10.0278C5.32254 10.3677 5.48335 10.758 5.82326 10.8995C6.49436 11.179 7.23011 11.3329 8.00013 11.3329C8.77015 11.3329 9.50591 11.179 10.177 10.8995C10.5169 10.758 10.6777 10.3677 10.5362 10.0278C10.3947 9.68793 10.0044 9.52712 9.66448 9.66865C9.15292 9.88166 8.59114 9.99961 8.00013 9.99961C7.40912 9.99961 6.84735 9.88166 6.33578 9.66865Z" fill="#999999"/>
6
+ </g>
7
+ </g>
8
+ </svg>
@@ -0,0 +1,3 @@
1
+ import { AvatarUploadProps } from './types';
2
+ declare const AvatarUpload: (props: AvatarUploadProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default AvatarUpload;
@@ -0,0 +1,10 @@
1
+ import { ImgCropProps } from 'antd-img-crop';
2
+ export interface AvatarUploadProps {
3
+ avatarImg?: string;
4
+ uploadTip?: string;
5
+ avatarTypes?: string[];
6
+ avatarMaxSize?: number;
7
+ showCrop?: boolean;
8
+ imgCropProps?: ImgCropProps;
9
+ onFileChange?: (base64Url: string, file: File) => void;
10
+ }
@@ -0,0 +1,3 @@
1
+ import { Props } from './types';
2
+ declare const DetailView: (props: Props) => import("react/jsx-runtime").JSX.Element;
3
+ export default DetailView;