sinking-antd 1.0.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/dist/index.js ADDED
@@ -0,0 +1,2082 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var AntdIcons = require('@ant-design/icons');
5
+ var antdStyle = require('antd-style');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+ var antd = require('antd');
8
+ require('dayjs/locale/zh-cn');
9
+ var dayjs = require('dayjs');
10
+
11
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
12
+
13
+ function _interopNamespace(e) {
14
+ if (e && e.__esModule) return e;
15
+ var n = Object.create(null);
16
+ if (e) {
17
+ Object.keys(e).forEach(function (k) {
18
+ if (k !== 'default') {
19
+ var d = Object.getOwnPropertyDescriptor(e, k);
20
+ Object.defineProperty(n, k, d.get ? d : {
21
+ enumerable: true,
22
+ get: function () { return e[k]; }
23
+ });
24
+ }
25
+ });
26
+ }
27
+ n.default = e;
28
+ return Object.freeze(n);
29
+ }
30
+
31
+ var React__default = /*#__PURE__*/_interopDefault(React);
32
+ var AntdIcons__namespace = /*#__PURE__*/_interopNamespace(AntdIcons);
33
+ var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
34
+
35
+ // src/icon/index.tsx
36
+ var globalIconfontUrl = void 0;
37
+ var setIconfontUrl = (url) => {
38
+ globalIconfontUrl = url;
39
+ iconfontCache = null;
40
+ };
41
+ var getIconfontUrl = () => {
42
+ return globalIconfontUrl;
43
+ };
44
+ var IconFontContext = React.createContext({});
45
+ var IconFontProvider = ({ iconfontUrl, children }) => {
46
+ return /* @__PURE__ */ jsxRuntime.jsx(IconFontContext.Provider, { value: { iconfontUrl }, children });
47
+ };
48
+ var useStyles = antdStyle.createStyles(() => ({
49
+ iconWrapper: {
50
+ display: "inline-flex",
51
+ alignItems: "center",
52
+ justifyContent: "center"
53
+ }
54
+ }));
55
+ var Icon = React__default.default.forwardRef(
56
+ ({ type, iconfontUrl, className, style, onClick, ...rest }, ref) => {
57
+ const { styles, cx } = useStyles();
58
+ const context = React.useContext(IconFontContext);
59
+ const currentIconfontUrl = iconfontUrl || context.iconfontUrl || globalIconfontUrl;
60
+ const IconfontIcon = React.useMemo(() => {
61
+ if (!currentIconfontUrl) {
62
+ return null;
63
+ }
64
+ return AntdIcons.createFromIconfontCN({
65
+ scriptUrl: currentIconfontUrl
66
+ });
67
+ }, [currentIconfontUrl]);
68
+ const AntdIconComponent = AntdIcons__namespace[type];
69
+ if (AntdIconComponent) {
70
+ return /* @__PURE__ */ jsxRuntime.jsx(
71
+ AntdIconComponent,
72
+ {
73
+ ref,
74
+ className: cx(styles.iconWrapper, className),
75
+ style,
76
+ onClick,
77
+ ...rest
78
+ }
79
+ );
80
+ }
81
+ if (type.startsWith("icon-")) {
82
+ if (!IconfontIcon) {
83
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cx(styles.iconWrapper, className), style, onClick, ...rest, children: type });
84
+ }
85
+ return /* @__PURE__ */ jsxRuntime.jsx(
86
+ IconfontIcon,
87
+ {
88
+ type,
89
+ ref,
90
+ className: cx(styles.iconWrapper, className),
91
+ style,
92
+ onClick,
93
+ ...rest
94
+ }
95
+ );
96
+ }
97
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cx(styles.iconWrapper, className), style, onClick, ...rest, children: type });
98
+ }
99
+ );
100
+ var getAntdIconNames = () => {
101
+ return Object.keys(AntdIcons__namespace).filter((key) => {
102
+ return !key.startsWith("create") && !key.startsWith("set") && !key.startsWith("get") && key !== "default";
103
+ });
104
+ };
105
+ var iconfontCache = null;
106
+ var normalizeUrl = (url) => {
107
+ if (url.startsWith("//")) {
108
+ return `https:${url}`;
109
+ }
110
+ if (url.startsWith("http://") || url.startsWith("https://")) {
111
+ return url;
112
+ }
113
+ return url.startsWith("/") ? url : `/${url}`;
114
+ };
115
+ var getIconfontIconNames = async (url) => {
116
+ const targetUrl = url || globalIconfontUrl;
117
+ if (!targetUrl) {
118
+ return [];
119
+ }
120
+ if (url && iconfontCache) {
121
+ iconfontCache = null;
122
+ }
123
+ if (iconfontCache) return iconfontCache;
124
+ try {
125
+ const urls = Array.isArray(targetUrl) ? targetUrl : [targetUrl];
126
+ const iconSets = await Promise.all(
127
+ urls.map(async (scriptUrl) => {
128
+ try {
129
+ const response = await fetch(normalizeUrl(scriptUrl));
130
+ const scriptText = await response.text();
131
+ return [...scriptText.matchAll(/id="(icon-[^"]+)"/g)].map((m) => m[1]);
132
+ } catch (_) {
133
+ return [];
134
+ }
135
+ })
136
+ );
137
+ const allIcons = [...new Set(iconSets.flat())];
138
+ iconfontCache = allIcons;
139
+ return allIcons;
140
+ } catch (_) {
141
+ return [];
142
+ }
143
+ };
144
+ var getAllIconNames = async (iconfontUrl) => {
145
+ const [antdIcons, iconfontIcons] = await Promise.all([
146
+ Promise.resolve(getAntdIconNames()),
147
+ getIconfontIconNames(iconfontUrl)
148
+ ]);
149
+ return [...antdIcons, ...iconfontIcons];
150
+ };
151
+ var useBreadCrumbStyles = antdStyle.createStyles(({ token }) => {
152
+ return {
153
+ bread: {
154
+ backgroundColor: token?.colorBgContainer,
155
+ padding: "5px 15px 5px 15px",
156
+ fontSize: "12px"
157
+ },
158
+ breadStyle: {
159
+ color: "rgb(156, 156, 156)",
160
+ cursor: "pointer"
161
+ }
162
+ };
163
+ });
164
+ var BreadCrumb = React__default.default.memo((props) => {
165
+ const {
166
+ style,
167
+ className,
168
+ enabled = true,
169
+ items = [],
170
+ hideBreadCrumb = false
171
+ } = props;
172
+ const { styles: { bread, breadStyle } } = useBreadCrumbStyles();
173
+ if (!enabled || hideBreadCrumb || items.length === 0) {
174
+ return null;
175
+ }
176
+ const breadCrumbData = items.map((item) => ({
177
+ title: item.title,
178
+ onClick: item.onClick,
179
+ className: breadStyle
180
+ }));
181
+ return /* @__PURE__ */ jsxRuntime.jsx(
182
+ antd.Breadcrumb,
183
+ {
184
+ className: `${bread} ${className || ""}`,
185
+ style,
186
+ items: breadCrumbData
187
+ }
188
+ );
189
+ });
190
+ var breadcrumb_default = BreadCrumb;
191
+ exports.Message = void 0;
192
+ exports.Notification = void 0;
193
+ exports.Modal = void 0;
194
+ var antd_default = () => {
195
+ const staticFunction = antd.App.useApp();
196
+ exports.Message = staticFunction.message;
197
+ exports.Modal = staticFunction.modal;
198
+ exports.Notification = staticFunction.notification;
199
+ return null;
200
+ };
201
+ var getDefaultTheme = (color, radius) => {
202
+ return {
203
+ token: {
204
+ colorPrimary: color,
205
+ colorInfo: color,
206
+ borderRadius: radius
207
+ }
208
+ };
209
+ };
210
+ var getCompactTheme = (color, radius) => {
211
+ let temp = getDefaultTheme(color, radius);
212
+ temp.algorithm = [antd.theme.compactAlgorithm];
213
+ return temp;
214
+ };
215
+ var getMode = () => {
216
+ const mode = localStorage?.getItem("theme");
217
+ if (mode == "light" || mode == "dark") {
218
+ return mode;
219
+ }
220
+ return "auto";
221
+ };
222
+ var setModeToStorage = (mode) => {
223
+ localStorage?.setItem("theme", mode);
224
+ };
225
+ var ThemeContext = React.createContext(void 0);
226
+ var useTheme = () => {
227
+ const context = React.useContext(ThemeContext);
228
+ if (!context) {
229
+ return void 0;
230
+ }
231
+ return context;
232
+ };
233
+ var Theme = ({
234
+ children,
235
+ theme: customTheme,
236
+ mode: customMode,
237
+ appearance: customAppearance,
238
+ onAppearanceChange
239
+ }) => {
240
+ const existingContext = React.useContext(ThemeContext);
241
+ if (existingContext && !customTheme && !customMode && !customAppearance && !onAppearanceChange) {
242
+ return children;
243
+ }
244
+ return /* @__PURE__ */ jsxRuntime.jsx(
245
+ ThemeProviderInner,
246
+ {
247
+ theme: customTheme,
248
+ mode: customMode,
249
+ appearance: customAppearance,
250
+ onAppearanceChange,
251
+ children
252
+ }
253
+ );
254
+ };
255
+ var ThemeProviderInner = ({
256
+ children,
257
+ theme: customTheme,
258
+ mode: customMode,
259
+ appearance: customAppearance,
260
+ onAppearanceChange
261
+ }) => {
262
+ const [themes, setThemes] = React.useState(customTheme || getDefaultTheme("#1890ff", 6));
263
+ const [mode, setMode2] = React.useState(customMode || getMode());
264
+ const [appearance, setAppearance] = React.useState(customAppearance !== void 0 ? customAppearance : null);
265
+ const lightMode = "light";
266
+ const darkMode = "dark";
267
+ const autoMode = "auto";
268
+ const setDefaultTheme = () => {
269
+ setThemes(getDefaultTheme(themes?.token?.colorPrimary, themes?.token?.borderRadius));
270
+ };
271
+ const setCompactTheme = () => {
272
+ setThemes(getCompactTheme(themes?.token?.colorPrimary, themes?.token?.borderRadius));
273
+ };
274
+ const setColor = (color) => {
275
+ let temp = { ...themes };
276
+ temp.token.colorPrimary = color;
277
+ temp.token.colorInfo = color;
278
+ setThemes(temp);
279
+ };
280
+ const setRadius = (radius) => {
281
+ let temp = { ...themes };
282
+ temp.token.borderRadius = radius;
283
+ setThemes(temp);
284
+ };
285
+ const getModeName = (modeValue) => {
286
+ if (modeValue == lightMode) {
287
+ return "\u4EAE\u8272\u98CE\u683C";
288
+ }
289
+ if (modeValue == darkMode) {
290
+ return "\u6697\u8272\u98CE\u683C";
291
+ }
292
+ return "\u8DDF\u968F\u7CFB\u7EDF";
293
+ };
294
+ const setLightMode = () => {
295
+ setModeToStorage(lightMode);
296
+ setMode2(lightMode);
297
+ setAppearance(lightMode);
298
+ };
299
+ const setDarkMode = () => {
300
+ setModeToStorage(darkMode);
301
+ setMode2(darkMode);
302
+ setAppearance(darkMode);
303
+ };
304
+ const setAutoMode = () => {
305
+ setModeToStorage(autoMode);
306
+ setMode2(autoMode);
307
+ setAppearance(null);
308
+ };
309
+ const isLightMode = () => {
310
+ return mode == lightMode;
311
+ };
312
+ const isDarkMode = () => {
313
+ return mode == darkMode;
314
+ };
315
+ const isAutoMode = () => {
316
+ return mode == autoMode;
317
+ };
318
+ const isLightTheme = () => {
319
+ return appearance == lightMode;
320
+ };
321
+ const isDarkTheme = () => {
322
+ return appearance == darkMode;
323
+ };
324
+ const isCompactTheme = () => {
325
+ return themes?.algorithm && Array.isArray(themes.algorithm) && themes.algorithm.includes(antd.theme.compactAlgorithm);
326
+ };
327
+ const toggle = () => {
328
+ if (isAutoMode()) {
329
+ setLightMode();
330
+ } else if (isLightMode()) {
331
+ setDarkMode();
332
+ } else {
333
+ setAutoMode();
334
+ }
335
+ };
336
+ const value = {
337
+ themes,
338
+ setColor,
339
+ setRadius,
340
+ setThemes,
341
+ setDefaultTheme,
342
+ setCompactTheme,
343
+ appearance,
344
+ setAppearance,
345
+ mode,
346
+ getModeName,
347
+ lightMode,
348
+ darkMode,
349
+ autoMode,
350
+ setLightMode,
351
+ setDarkMode,
352
+ setAutoMode,
353
+ isLightMode,
354
+ isDarkMode,
355
+ isAutoMode,
356
+ isLightTheme,
357
+ isDarkTheme,
358
+ isCompactTheme,
359
+ toggle
360
+ };
361
+ return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(
362
+ antdStyle.ThemeProvider,
363
+ {
364
+ theme: themes,
365
+ themeMode: mode,
366
+ appearance,
367
+ onAppearanceChange: (newAppearance) => {
368
+ onAppearanceChange?.(newAppearance);
369
+ setAppearance(newAppearance);
370
+ },
371
+ children: [
372
+ /* @__PURE__ */ jsxRuntime.jsx(antd_default, {}),
373
+ children
374
+ ]
375
+ }
376
+ ) });
377
+ };
378
+ var theme_default = Theme;
379
+ var Animate = {
380
+ None: "",
381
+ FadeUp: "fadeInUp",
382
+ FadeDown: "fadeInDown"
383
+ };
384
+ var useStyles2 = antdStyle.createStyles(({ css }) => ({
385
+ fadeInUp: css`
386
+ @keyframes fadeInUp {
387
+ 0% {
388
+ opacity: 0;
389
+ transform: translateY(20px);
390
+ }
391
+ 100% {
392
+ opacity: 1;
393
+ transform: translateY(0);
394
+ }
395
+ }
396
+ animation-name: fadeInUp;
397
+ animation-duration: 0.5s;
398
+ `,
399
+ fadeInDown: css`
400
+ @keyframes fadeInDown {
401
+ 0% {
402
+ opacity: 0;
403
+ transform: translateY(-20px);
404
+ }
405
+ 100% {
406
+ opacity: 1;
407
+ transform: translateY(0);
408
+ }
409
+ }
410
+ animation-name: fadeInDown;
411
+ animation-duration: 0.5s;
412
+ `
413
+ }));
414
+ var Animation = React__default.default.memo(({ animate, style, children }) => {
415
+ const { styles } = useStyles2();
416
+ const animationClass = React.useMemo(() => {
417
+ return animate && animate !== Animate.None ? styles?.[animate] : null;
418
+ }, [animate, styles]);
419
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: animationClass, style, children });
420
+ });
421
+ var animation_default = Animation;
422
+ var Title = ({ ...props }) => {
423
+ const {
424
+ placement = "left",
425
+ size = "normal",
426
+ open = true,
427
+ width = 5,
428
+ height = 0,
429
+ radius = -1,
430
+ space = 7
431
+ } = props;
432
+ const theme2 = useTheme();
433
+ const getHeight = (h, s) => {
434
+ if (h > 0) {
435
+ return h;
436
+ }
437
+ const sizeMap = {
438
+ small: 15,
439
+ normal: 20,
440
+ larger: 25
441
+ };
442
+ return sizeMap[s] || 20;
443
+ };
444
+ const useStyles7 = antdStyle.createStyles(({ token }) => {
445
+ const isCompact = theme2?.isCompactTheme() || false;
446
+ const barRadius = radius < 0 ? token?.borderRadius > 3 ? token?.borderRadius : 0 : radius;
447
+ const barHeight = isCompact ? getHeight(height, size) - 5 : barRadius > 0 ? getHeight(height, size) : getHeight(height, size) - 3;
448
+ const barWidth = isCompact || !isCompact && barRadius <= 0 ? width - 1 : width;
449
+ return {
450
+ center: {
451
+ display: "flex",
452
+ alignItems: "center",
453
+ justifyContent: "start"
454
+ },
455
+ leftBar: {
456
+ width: barWidth,
457
+ height: barHeight,
458
+ borderTopRightRadius: barRadius,
459
+ borderBottomRightRadius: barRadius,
460
+ marginRight: space,
461
+ backgroundColor: token?.colorPrimary
462
+ },
463
+ rightBar: {
464
+ width: barWidth,
465
+ height: barHeight,
466
+ borderTopLeftRadius: barRadius,
467
+ borderBottomLeftRadius: barRadius,
468
+ marginLeft: space,
469
+ backgroundColor: token?.colorPrimary
470
+ }
471
+ };
472
+ });
473
+ const { styles: { center, leftBar, rightBar } } = useStyles7();
474
+ const left = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: center, children: [
475
+ open && /* @__PURE__ */ jsxRuntime.jsx("span", { className: leftBar }),
476
+ props?.children
477
+ ] });
478
+ const right = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: center, children: [
479
+ props?.children,
480
+ open && /* @__PURE__ */ jsxRuntime.jsx("span", { className: rightBar })
481
+ ] });
482
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
483
+ placement == "left" && left,
484
+ placement == "right" && right
485
+ ] });
486
+ };
487
+ var title_default = Title;
488
+ var useStyles3 = antdStyle.createStyles(({ css }) => {
489
+ return {
490
+ body: css`
491
+ padding: 10px;
492
+ `,
493
+ load: {
494
+ margin: "0 auto",
495
+ width: "100%",
496
+ lineHeight: "80vh"
497
+ },
498
+ gutter: {
499
+ display: "flex"
500
+ }
501
+ };
502
+ });
503
+ var Body = React__default.default.memo((props) => {
504
+ const {
505
+ children,
506
+ loading,
507
+ style,
508
+ className,
509
+ space = true,
510
+ animation = true
511
+ } = props;
512
+ const { styles: { body, load, gutter }, cx } = useStyles3();
513
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.App, { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { spinning: true, size: "large", className: load }) : /* @__PURE__ */ jsxRuntime.jsx(antd.Layout, { style, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("ant-layout-body", className || body), children: /* @__PURE__ */ jsxRuntime.jsx(animation_default, { animate: animation ? Animate.FadeUp : Animate.None, children: space ? /* @__PURE__ */ jsxRuntime.jsx(antd.Space, { direction: "vertical", size: "middle", className: gutter, children }) : children }) }) }) });
514
+ });
515
+ var body_default = Body;
516
+ var Footer = React__default.default.memo(({ children }) => {
517
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
518
+ });
519
+ var footer_default = Footer;
520
+ var useStyles4 = antdStyle.createStyles(({ css }) => {
521
+ return {
522
+ box: {
523
+ display: "flex",
524
+ alignItems: "center",
525
+ justifyContent: "space-between"
526
+ },
527
+ right: css`
528
+ z-index: 2;
529
+ `,
530
+ left: css`
531
+ z-index: 2;
532
+ `
533
+ };
534
+ });
535
+ var Header = React__default.default.memo((props) => {
536
+ const { styles: { box, right, left } } = useStyles4();
537
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: box, children: [
538
+ props?.left && /* @__PURE__ */ jsxRuntime.jsx("div", { className: left, children: props.left }),
539
+ props?.right && /* @__PURE__ */ jsxRuntime.jsx("div", { className: right, children: props.right })
540
+ ] });
541
+ });
542
+ var header_default = Header;
543
+ var useStyles5 = antdStyle.createStyles(({ token, isDarkMode }) => {
544
+ return {
545
+ left: {
546
+ position: "relative",
547
+ background: token?.colorBgContainer,
548
+ height: "100%",
549
+ display: "flex",
550
+ flexDirection: "column"
551
+ },
552
+ content: {
553
+ flex: 1,
554
+ overflowY: "auto"
555
+ },
556
+ menu: {
557
+ zIndex: 1,
558
+ overflow: "auto",
559
+ overflowX: "hidden",
560
+ borderRight: "none !important",
561
+ fontWeight: "600",
562
+ userSelect: "none",
563
+ ":focus-visible": {
564
+ outline: "none !important"
565
+ },
566
+ "::-webkit-scrollbar": {
567
+ width: 0
568
+ },
569
+ ".ant-menu-item-selected::after": {
570
+ borderRadius: (token?.borderRadius || 0) > 3 ? `${token.borderRadius}px 0 0 ${token.borderRadius}px` : "0",
571
+ borderRightWidth: "4px !important",
572
+ ...token?.borderRadius > 3 && {
573
+ right: "5px !important",
574
+ top: "19% !important",
575
+ height: "60% !important"
576
+ }
577
+ },
578
+ ".ant-menu-item,.ant-menu-submenu-title": {
579
+ transition: "border-color 0.3s,background 0.3s !important"
580
+ }
581
+ },
582
+ menuTop: {
583
+ zIndex: 2,
584
+ userSelect: "none",
585
+ height: "100px",
586
+ lineHeight: "100px !important",
587
+ width: "100%",
588
+ padding: "10px !important",
589
+ overflow: "hidden",
590
+ cursor: "pointer",
591
+ display: "flex",
592
+ justifyContent: "center",
593
+ alignItems: "center",
594
+ background: token?.colorBgContainer + " !important"
595
+ },
596
+ menuBottom: {
597
+ background: token?.colorBgContainer,
598
+ userSelect: "none",
599
+ padding: "0px !important",
600
+ borderRadius: "0px",
601
+ height: "50px",
602
+ lineHeight: "50px !important",
603
+ borderTop: "0.5px solid " + token?.colorBorder + " !important",
604
+ borderBottom: "0.5px solid " + token?.colorBorder + " !important",
605
+ fontWeight: "bolder",
606
+ fontSize: 14,
607
+ color: isDarkMode ? "rgb(255,255,255,0.65)" : "rgba(122,122,122)",
608
+ cursor: "pointer",
609
+ overflow: "hidden",
610
+ width: "100%",
611
+ zIndex: 2,
612
+ transition: "background 0.3s !important",
613
+ display: "flex",
614
+ justifyContent: "center",
615
+ alignItems: "center"
616
+ },
617
+ logoClose: {
618
+ margin: "0px -10px"
619
+ },
620
+ menu2: {
621
+ fontWeight: "bolder",
622
+ userSelect: "none",
623
+ fontSize: "13px",
624
+ flex: "auto",
625
+ height: "55px",
626
+ borderBottom: "none !important"
627
+ },
628
+ darkColor: {
629
+ background: "#001529 !important",
630
+ backgroundColor: "#001529 !important"
631
+ },
632
+ darkBorderTop: {
633
+ borderTop: "0.5px solid #202020 !important",
634
+ color: "white"
635
+ }
636
+ };
637
+ });
638
+ var Sider = React__default.default.memo((props) => {
639
+ const {
640
+ collapsed,
641
+ pathname,
642
+ matchedRoutes = [],
643
+ onNavigate,
644
+ onMenuClick,
645
+ menus,
646
+ onLogoClick,
647
+ collapsedLogo,
648
+ unCollapsedLogo,
649
+ menuBottomBtnIcon = null,
650
+ menuBottomBtnText = null,
651
+ onMenuBottomBtnClick,
652
+ classNames,
653
+ layout = "inline",
654
+ theme: theme2 = "light"
655
+ } = props;
656
+ const { mobile } = antdStyle.useResponsive();
657
+ const token = antdStyle.useTheme();
658
+ const { styles: { left, content, menu, menuTop, menuBottom, menu2, darkColor, darkBorderTop }, cx } = useStyles5();
659
+ const [selectedKeys, setSelectedKeys] = React.useState([]);
660
+ const [stateOpenKeys, setStateOpenKeys] = React.useState([]);
661
+ React.useEffect(() => {
662
+ if (pathname) {
663
+ setSelectedKeys([pathname]);
664
+ setStateOpenKeys(matchedRoutes);
665
+ }
666
+ }, [pathname, matchedRoutes]);
667
+ const levelKeys = React.useMemo(() => {
668
+ const key = {};
669
+ const func = (items2, level = 1) => {
670
+ items2.forEach((item) => {
671
+ if (item?.key) {
672
+ key[item.key] = level;
673
+ }
674
+ if (item?.children) {
675
+ return func(item.children, level + 1);
676
+ }
677
+ });
678
+ };
679
+ func(menus);
680
+ return key;
681
+ }, [menus]);
682
+ const onOpenChange = React.useCallback((openKeys) => {
683
+ const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
684
+ if (currentOpenKey !== void 0) {
685
+ const repeatIndex = openKeys.filter((key) => key !== currentOpenKey).findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
686
+ setStateOpenKeys(
687
+ openKeys.filter((_, index) => index !== repeatIndex).filter((key) => levelKeys[key] <= levelKeys[currentOpenKey])
688
+ );
689
+ } else {
690
+ setStateOpenKeys(openKeys);
691
+ }
692
+ }, [stateOpenKeys, levelKeys]);
693
+ const menuTheme = React.useMemo(() => {
694
+ if (token?.isDarkMode) return "light";
695
+ return theme2 === "dark" ? theme2 : "light";
696
+ }, [token?.isDarkMode, theme2]);
697
+ const getColor = React.useMemo(() => {
698
+ return !token?.isDarkMode && menuTheme === "dark" ? " " + darkColor : "";
699
+ }, [token?.isDarkMode, menuTheme, darkColor]);
700
+ const getBorderColor = React.useMemo(() => {
701
+ return !token?.isDarkMode && menuTheme === "dark" ? " " + darkBorderTop : "";
702
+ }, [token?.isDarkMode, menuTheme, darkBorderTop]);
703
+ const menuConfig = React.useMemo(() => ({
704
+ components: {
705
+ Menu: {
706
+ itemSelectedColor: token?.colorPrimaryText || "",
707
+ itemColor: token?.colorTextSecondary || "",
708
+ itemHoverColor: token?.colorTextSecondary || "",
709
+ fontSize: 13,
710
+ itemMarginBlock: 0,
711
+ itemMarginInline: 0,
712
+ itemBorderRadius: 0,
713
+ subMenuItemBorderRadius: 0,
714
+ activeBarWidth: 4,
715
+ itemHeight: 45,
716
+ subMenuItemBg: "rgba(255, 255, 255, 0)"
717
+ }
718
+ }
719
+ }), [token?.colorPrimaryText, token?.colorTextSecondary]);
720
+ const handleMenuClick = React.useCallback((item) => {
721
+ if (onNavigate) {
722
+ onNavigate(item?.key);
723
+ }
724
+ setSelectedKeys([item?.key]);
725
+ onMenuClick?.(item);
726
+ }, [onNavigate, onMenuClick]);
727
+ const handleLogoClick = React.useCallback(() => {
728
+ onLogoClick?.();
729
+ }, [onLogoClick]);
730
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: layout === "inline" ? /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout, { className: cx(left, getColor), children: [
731
+ /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout.Header, { className: cx(menuTop, getColor), onClick: handleLogoClick, children: [
732
+ (mobile || !mobile && !collapsed) && unCollapsedLogo?.(!token?.isDarkMode),
733
+ !mobile && collapsed && collapsedLogo?.(token?.isDarkMode)
734
+ ] }),
735
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Layout.Content, { className: cx(content, getColor), children: /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { theme: menuConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
736
+ antd.Menu,
737
+ {
738
+ selectedKeys,
739
+ theme: menuTheme,
740
+ mode: "inline",
741
+ items: menus,
742
+ className: cx(menu, classNames),
743
+ openKeys: !collapsed ? stateOpenKeys : void 0,
744
+ onOpenChange,
745
+ onClick: handleMenuClick
746
+ }
747
+ ) }) }),
748
+ (menuBottomBtnIcon || menuBottomBtnText) && /* @__PURE__ */ jsxRuntime.jsxs(
749
+ antd.Layout.Footer,
750
+ {
751
+ className: cx(menuBottom, getColor, getBorderColor),
752
+ onClick: onMenuBottomBtnClick,
753
+ children: [
754
+ menuBottomBtnIcon && (typeof menuBottomBtnIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: menuBottomBtnIcon }) : menuBottomBtnIcon),
755
+ (mobile || !mobile && !collapsed) && menuBottomBtnText
756
+ ]
757
+ }
758
+ )
759
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { theme: menuConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
760
+ antd.Menu,
761
+ {
762
+ theme: menuTheme,
763
+ mode: "horizontal",
764
+ selectedKeys,
765
+ items: menus,
766
+ className: cx(menu2, classNames),
767
+ onClick: handleMenuClick
768
+ }
769
+ ) }) });
770
+ });
771
+ var sider_default = Sider;
772
+ var useLoadingStyles = antdStyle.createStyles(() => {
773
+ return {
774
+ body: {
775
+ width: "100%",
776
+ margin: "0 auto",
777
+ lineHeight: "80vh"
778
+ }
779
+ };
780
+ });
781
+ var Loading = () => {
782
+ const { styles: { body } } = useLoadingStyles();
783
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { size: "large", className: body });
784
+ };
785
+ var useLayoutStyles = antdStyle.createStyles(({ isDarkMode, token, css, responsive }) => {
786
+ return {
787
+ container: {
788
+ display: "flex",
789
+ flexDirection: "row"
790
+ },
791
+ sider: {
792
+ zIndex: 2,
793
+ boxShadow: "2px 0 8px 0 rgba(29,35,41,.05)",
794
+ background: "none !important",
795
+ height: "100vh",
796
+ overflowY: "auto",
797
+ position: "sticky",
798
+ left: 0,
799
+ top: 0,
800
+ bottom: 0,
801
+ transition: "all 0.3s,background 0s,height 0s",
802
+ ".ant-layout-header": {
803
+ backgroundColor: token?.colorBgContainer
804
+ }
805
+ },
806
+ menuBtn: {
807
+ width: "55px !important",
808
+ height: "55px",
809
+ lineHeight: "55px",
810
+ fontSize: "15px !important",
811
+ cursor: "pointer",
812
+ float: "left",
813
+ ":hover": {
814
+ background: "none !important"
815
+ }
816
+ },
817
+ drawMenu: {
818
+ padding: "0px !important"
819
+ },
820
+ body: css`
821
+ transition: margin-left 0.3s !important;
822
+ background-color: ${isDarkMode ? "black" : "transparent"};
823
+ display: flex;
824
+ flex-direction: column;
825
+ min-height: 100vh;
826
+ `,
827
+ sticky: {
828
+ position: "sticky",
829
+ top: 0,
830
+ left: 0
831
+ },
832
+ header: css`
833
+ padding: 0;
834
+ height: 55px;
835
+ line-height: 55px;
836
+ width: 100%;
837
+ z-index: 3;
838
+ box-shadow: 0 2px 8px 0 ${isDarkMode ? "rgba(0, 0, 0, 0.25)" : "rgba(29, 35, 41, 0.05)"};
839
+ user-select: none;
840
+ background: ${token?.colorBgContainer} !important;
841
+ flex-shrink: 0;
842
+
843
+ .ant-menu-item-icon {
844
+ color: ${isDarkMode ? "rgb(255,255,255,0.85)" : ""};
845
+ }
846
+ `,
847
+ horizontalContent: css`
848
+ width: 100%;
849
+ flex: 1 0 auto;
850
+ `,
851
+ inlineContent: css`
852
+ width: 100%;
853
+ flex: 1 0 auto;
854
+ `,
855
+ flowContent: css`
856
+ .ant-layout-body {
857
+ width: 80%;
858
+ margin-left: 10%;
859
+ }
860
+
861
+ ${responsive.md} {
862
+ .ant-layout-body {
863
+ width: 100%;
864
+ margin-left: 0;
865
+ }
866
+ }
867
+ `,
868
+ footer: css`
869
+ text-align: center;
870
+ flex-shrink: 0;
871
+ `,
872
+ flow: {
873
+ display: "flex",
874
+ justifyContent: "space-between",
875
+ height: "55px"
876
+ },
877
+ logo: {
878
+ display: "inline-flex",
879
+ justifyContent: "center",
880
+ alignItems: "center",
881
+ width: "220px",
882
+ height: "55px"
883
+ },
884
+ darkColor: {
885
+ backgroundColor: "#001529 !important"
886
+ },
887
+ layoutNormal: css`
888
+ min-height: 100vh;
889
+ display: flex;
890
+ flex-direction: column;
891
+ `
892
+ };
893
+ });
894
+ var SinKing = React.forwardRef((props, ref) => {
895
+ let {
896
+ loading = false,
897
+ breadCrumb = true,
898
+ breadCrumbItems = [],
899
+ hideBreadCrumb = false,
900
+ menus,
901
+ menuClassNames,
902
+ pathname,
903
+ matchedRoutes,
904
+ onNavigate,
905
+ onMenuClick,
906
+ onMenuBtnClick,
907
+ onLogoClick,
908
+ collapsedLogo,
909
+ unCollapsedLogo,
910
+ headerRight,
911
+ headerLeft,
912
+ headerFixed,
913
+ headerHidden = false,
914
+ menuCollapsedWidth = 60,
915
+ menuUnCollapsedWidth = 220,
916
+ menuBottomBtnIcon = void 0,
917
+ menuBottomBtnText = void 0,
918
+ onMenuBottomBtnClick,
919
+ layout = "inline",
920
+ flowLayout = false,
921
+ menuTheme = "light",
922
+ waterMark = void 0,
923
+ children
924
+ } = props;
925
+ const systemTheme = antdStyle.useTheme();
926
+ const [collapsed, setCollapsed] = React.useState(false);
927
+ const [open, setOpen] = React.useState(false);
928
+ const {
929
+ styles: {
930
+ container,
931
+ sider,
932
+ inlineContent,
933
+ sticky,
934
+ header,
935
+ horizontalContent,
936
+ footer,
937
+ body,
938
+ drawMenu,
939
+ menuBtn,
940
+ flow,
941
+ logo,
942
+ darkColor,
943
+ flowContent,
944
+ layoutNormal
945
+ },
946
+ cx
947
+ } = useLayoutStyles();
948
+ const { mobile, md } = antdStyle.useResponsive();
949
+ const menuBtnOnClick = () => {
950
+ let status;
951
+ if (layout === "inline" && mobile || layout === "horizontal" && !md) {
952
+ if (collapsed) {
953
+ setCollapsed(false);
954
+ }
955
+ status = !open;
956
+ setOpen(status);
957
+ } else {
958
+ status = !collapsed;
959
+ setCollapsed(status);
960
+ }
961
+ onMenuBtnClick?.(status);
962
+ };
963
+ React.useImperativeHandle(ref, () => ({
964
+ collapsedMenu: () => {
965
+ setCollapsed(true);
966
+ setOpen(false);
967
+ },
968
+ unCollapsedMenu: () => {
969
+ setCollapsed(false);
970
+ setOpen(false);
971
+ },
972
+ toggleCollapsedMenu: () => {
973
+ const status = !collapsed;
974
+ setCollapsed(status);
975
+ setOpen(false);
976
+ onMenuBtnClick?.(status);
977
+ }
978
+ }));
979
+ const getColor = () => {
980
+ const mode = systemTheme?.isDarkMode ? "light" : menuTheme === "dark" ? menuTheme : "light";
981
+ return !systemTheme?.isDarkMode && mode === "dark" ? " " + darkColor : "";
982
+ };
983
+ const getWaterMaskFont = () => {
984
+ return {
985
+ color: systemTheme?.isDarkMode ? "rgba(255, 255, 255, 0.03)" : "rgba(0, 0, 0, 0.07)"
986
+ };
987
+ };
988
+ const getSider = (mode) => {
989
+ const layoutMode = mode === "horizontal" ? mode : "inline";
990
+ const theme2 = menuTheme === "dark" ? menuTheme : "light";
991
+ const routePaths = Array.isArray(matchedRoutes) ? typeof matchedRoutes[0] === "string" ? matchedRoutes : matchedRoutes.map((route) => route?.pathname || route) : [];
992
+ return /* @__PURE__ */ jsxRuntime.jsx(
993
+ sider_default,
994
+ {
995
+ classNames: menuClassNames,
996
+ layout: layoutMode,
997
+ theme: theme2,
998
+ collapsed,
999
+ pathname,
1000
+ matchedRoutes: routePaths,
1001
+ onNavigate,
1002
+ onLogoClick,
1003
+ collapsedLogo,
1004
+ unCollapsedLogo,
1005
+ menuBottomBtnIcon,
1006
+ menuBottomBtnText,
1007
+ onMenuBottomBtnClick,
1008
+ menus,
1009
+ onMenuClick: (item) => {
1010
+ setOpen(false);
1011
+ onMenuClick?.(item);
1012
+ }
1013
+ }
1014
+ );
1015
+ };
1016
+ const getOutlet = () => {
1017
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Watermark, { gap: [200, 200], font: getWaterMaskFont(), content: waterMark, children });
1018
+ };
1019
+ const drawer = /* @__PURE__ */ jsxRuntime.jsx(
1020
+ antd.Drawer,
1021
+ {
1022
+ placement: "left",
1023
+ closable: false,
1024
+ open,
1025
+ width: menuUnCollapsedWidth,
1026
+ classNames: { body: drawMenu },
1027
+ onClose: () => {
1028
+ setOpen(false);
1029
+ },
1030
+ children: getSider("inline")
1031
+ }
1032
+ );
1033
+ const LayoutNormal = /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout, { className: container, children: [
1034
+ mobile && drawer,
1035
+ /* @__PURE__ */ jsxRuntime.jsx(
1036
+ antd.Layout.Sider,
1037
+ {
1038
+ className: sider,
1039
+ trigger: null,
1040
+ collapsible: true,
1041
+ collapsed,
1042
+ width: menuUnCollapsedWidth,
1043
+ collapsedWidth: menuCollapsedWidth,
1044
+ hidden: mobile,
1045
+ children: getSider(layout)
1046
+ }
1047
+ ),
1048
+ /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout, { className: body, children: [
1049
+ !headerHidden && /* @__PURE__ */ jsxRuntime.jsx(antd.Layout.Header, { className: cx(header, headerFixed && sticky), children: /* @__PURE__ */ jsxRuntime.jsx(
1050
+ header_default,
1051
+ {
1052
+ left: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1053
+ /* @__PURE__ */ jsxRuntime.jsx(
1054
+ antd.Button,
1055
+ {
1056
+ type: "text",
1057
+ size: "large",
1058
+ icon: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(AntdIcons.MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(AntdIcons.MenuFoldOutlined, {}),
1059
+ onClick: menuBtnOnClick,
1060
+ className: menuBtn
1061
+ }
1062
+ ),
1063
+ headerLeft
1064
+ ] }),
1065
+ right: headerRight
1066
+ }
1067
+ ) }),
1068
+ /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout.Content, { className: cx(inlineContent, flowLayout && flowContent), children: [
1069
+ /* @__PURE__ */ jsxRuntime.jsx(
1070
+ breadcrumb_default,
1071
+ {
1072
+ enabled: breadCrumb,
1073
+ items: breadCrumbItems,
1074
+ hideBreadCrumb
1075
+ }
1076
+ ),
1077
+ getOutlet()
1078
+ ] }),
1079
+ props?.footer && /* @__PURE__ */ jsxRuntime.jsx(antd.Layout.Footer, { className: footer, children: /* @__PURE__ */ jsxRuntime.jsxs(footer_default, { children: [
1080
+ " ",
1081
+ props?.footer
1082
+ ] }) })
1083
+ ] })
1084
+ ] });
1085
+ const LayoutFlow = /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout, { className: layoutNormal, children: [
1086
+ /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout.Header, { className: cx(header, headerFixed && sticky), children: [
1087
+ !md && /* @__PURE__ */ jsxRuntime.jsx(header_default, { left: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1088
+ /* @__PURE__ */ jsxRuntime.jsx(
1089
+ antd.Button,
1090
+ {
1091
+ type: "text",
1092
+ size: "large",
1093
+ icon: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(AntdIcons.MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(AntdIcons.MenuFoldOutlined, {}),
1094
+ onClick: menuBtnOnClick,
1095
+ className: menuBtn
1096
+ }
1097
+ ),
1098
+ headerLeft
1099
+ ] }), right: headerRight }),
1100
+ !md && drawer || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(flow, getColor()), children: [
1101
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: logo, children: unCollapsedLogo?.(!systemTheme?.isDarkMode) }),
1102
+ getSider(layout),
1103
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerRight })
1104
+ ] })
1105
+ ] }),
1106
+ /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout.Content, { className: cx(horizontalContent, flowLayout && flowContent), children: [
1107
+ /* @__PURE__ */ jsxRuntime.jsx(
1108
+ breadcrumb_default,
1109
+ {
1110
+ enabled: breadCrumb,
1111
+ items: breadCrumbItems,
1112
+ hideBreadCrumb
1113
+ }
1114
+ ),
1115
+ getOutlet()
1116
+ ] }),
1117
+ props?.footer && /* @__PURE__ */ jsxRuntime.jsx(antd.Layout.Footer, { className: footer, children: /* @__PURE__ */ jsxRuntime.jsxs(footer_default, { children: [
1118
+ " ",
1119
+ props?.footer
1120
+ ] }) })
1121
+ ] });
1122
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.App, { children: loading && /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) || (layout !== "horizontal" ? LayoutNormal : LayoutFlow) });
1123
+ });
1124
+ var sinking_default = SinKing;
1125
+ var Layout4 = React.forwardRef((props, ref) => {
1126
+ return /* @__PURE__ */ jsxRuntime.jsx(sinking_default, { ref, ...props });
1127
+ });
1128
+ var layout_default = Layout4;
1129
+ var useStyles6 = antdStyle.createStyles(({ token, isDarkMode }) => {
1130
+ const fontColor = isDarkMode ? "rgba(255,255,255,0.65)" : "rgba(0,0,0,0.65)";
1131
+ const backgroundColor = isDarkMode ? "rgba(255, 255, 255, 0.1) !important" : "rgba(0, 0, 0, 0.05) !important";
1132
+ const fontSize = 12;
1133
+ const pagination = {
1134
+ color: fontColor,
1135
+ fontSize,
1136
+ ".ant-pagination-item-active": {
1137
+ backgroundColor: "transparent !important"
1138
+ },
1139
+ ".ant-pagination-item": {
1140
+ backgroundColor: "transparent !important",
1141
+ "a": {
1142
+ color: fontColor
1143
+ }
1144
+ },
1145
+ ".ant-pagination-options": {
1146
+ display: "block"
1147
+ },
1148
+ ".ant-select": {
1149
+ ".ant-select-selector": {
1150
+ fontSize,
1151
+ transition: "background-color 0.3s ease",
1152
+ color: fontColor,
1153
+ borderColor: "transparent !important",
1154
+ borderRadius: token?.borderRadius + "px !important",
1155
+ backgroundColor
1156
+ }
1157
+ },
1158
+ ".ant-pagination-options-quick-jumper": {
1159
+ "input": {
1160
+ color: fontColor,
1161
+ borderColor: "transparent",
1162
+ borderRadius: token?.borderRadius + "px !important",
1163
+ backgroundColor
1164
+ }
1165
+ }
1166
+ };
1167
+ const btn = {
1168
+ fontSize: fontSize + "px",
1169
+ height: "auto",
1170
+ padding: "5px 10px",
1171
+ borderRadius: token?.borderRadius + "px"
1172
+ };
1173
+ return {
1174
+ formItem: {
1175
+ marginBottom: "0 !important"
1176
+ },
1177
+ formItemLabel: {
1178
+ ".ant-form-item-label": {
1179
+ flex: "0 0 80px"
1180
+ }
1181
+ },
1182
+ formItemBtn: {
1183
+ ".ant-space-item>div": {
1184
+ display: "flex",
1185
+ alignItems: "center",
1186
+ gap: "8px"
1187
+ },
1188
+ ".ant-space-item>a": {
1189
+ textDecoration: "none"
1190
+ }
1191
+ },
1192
+ formButton: {
1193
+ display: "flex",
1194
+ justifyContent: "end",
1195
+ alignItems: "end"
1196
+ },
1197
+ filter: {
1198
+ boxShadow: "0 0px 10px 4px rgba(0, 0, 0, 0.05) !important",
1199
+ backgroundColor: isDarkMode ? "rgba(255, 255, 255, 0.05)" : "rgba(255, 255, 255, 0.6)",
1200
+ backdropFilter: "blur(8px)"
1201
+ },
1202
+ pageCard: {
1203
+ ".ant-card-body": {
1204
+ padding: 15
1205
+ },
1206
+ ".ant-pagination ": pagination
1207
+ },
1208
+ toolCard: {
1209
+ fontSize: token?.fontSizeSM,
1210
+ color: fontColor,
1211
+ ".ant-card-body": {
1212
+ padding: "12px 17px",
1213
+ ".ant-col": {
1214
+ fontSize,
1215
+ "a": {
1216
+ opacity: isDarkMode ? "1" : "0.8"
1217
+ }
1218
+ }
1219
+ },
1220
+ "button": btn
1221
+ },
1222
+ tableCard: {
1223
+ ".ant-card-head": {
1224
+ padding: "10px 15px 0 15px",
1225
+ minHeight: "42px",
1226
+ borderBottom: "none",
1227
+ ".ant-card-extra": {
1228
+ "button": btn
1229
+ }
1230
+ },
1231
+ ".ant-card-body": {
1232
+ padding: "10px"
1233
+ }
1234
+ },
1235
+ table: {
1236
+ ".ant-table-thead": {
1237
+ ".ant-table-cell": {
1238
+ padding: "10px !important",
1239
+ fontSize: token?.fontSize,
1240
+ color: fontColor
1241
+ }
1242
+ },
1243
+ ".ant-table-tbody": {
1244
+ ".ant-table-cell": {
1245
+ padding: "10px !important",
1246
+ fontSize: token?.fontSizeSM + 1,
1247
+ color: fontColor,
1248
+ ".ant-btn": {
1249
+ height: "25px",
1250
+ padding: "10px ",
1251
+ fontSize: token?.fontSizeSM
1252
+ }
1253
+ },
1254
+ ".ant-typography": {
1255
+ fontSize: token?.fontSizeSM + 1,
1256
+ color: fontColor
1257
+ }
1258
+ },
1259
+ ".ant-pagination ": {
1260
+ ...pagination,
1261
+ ...{
1262
+ margin: "15px 15px 5px 15px !important"
1263
+ }
1264
+ }
1265
+ }
1266
+ };
1267
+ });
1268
+ var useContainerResponsive = (containerRef) => {
1269
+ const [responsive, setResponsive] = React.useState({
1270
+ xs: false,
1271
+ sm: false,
1272
+ md: false,
1273
+ lg: false,
1274
+ xl: false,
1275
+ xxl: false,
1276
+ mobile: false
1277
+ });
1278
+ const debounce = React.useCallback((func, wait) => {
1279
+ let timeout;
1280
+ return (...args) => {
1281
+ clearTimeout(timeout);
1282
+ timeout = setTimeout(() => func.apply(null, args), wait);
1283
+ };
1284
+ }, []);
1285
+ const updateResponsive = React.useCallback((width) => {
1286
+ const newResponsive = {
1287
+ xs: width < 576,
1288
+ sm: width >= 576 && width < 768,
1289
+ md: width >= 768 && width < 992,
1290
+ lg: width >= 992 && width < 1200,
1291
+ xl: width >= 1200 && width < 1600,
1292
+ xxl: width >= 1600,
1293
+ mobile: width < 992
1294
+ };
1295
+ setResponsive((prev) => {
1296
+ const hasChanged = Object.keys(newResponsive).some(
1297
+ (key) => prev[key] !== newResponsive[key]
1298
+ );
1299
+ return hasChanged ? newResponsive : prev;
1300
+ });
1301
+ }, []);
1302
+ const debouncedUpdate = React.useMemo(
1303
+ () => debounce((width) => updateResponsive(width), 10),
1304
+ [debounce, updateResponsive]
1305
+ );
1306
+ React.useEffect(() => {
1307
+ const container = containerRef.current;
1308
+ if (!container) return;
1309
+ const handleResize = () => {
1310
+ const width = container.clientWidth;
1311
+ debouncedUpdate(width);
1312
+ };
1313
+ updateResponsive(container.clientWidth);
1314
+ const resizeObserver = new ResizeObserver(handleResize);
1315
+ resizeObserver.observe(container);
1316
+ return () => {
1317
+ resizeObserver.unobserve(container);
1318
+ };
1319
+ }, [containerRef, debouncedUpdate, updateResponsive]);
1320
+ return responsive;
1321
+ };
1322
+ var ProTableComponent = React.forwardRef((props, ref) => {
1323
+ const { styles } = useStyles6();
1324
+ const containerRef = React.useRef(null);
1325
+ const device = useContainerResponsive(containerRef);
1326
+ const requestRef = React.useRef(null);
1327
+ const {
1328
+ title = void 0,
1329
+ // 表格标题
1330
+ extra = void 0,
1331
+ // 表格额外内容
1332
+ extraRefreshBtn,
1333
+ // 是否显示刷新按钮
1334
+ rowKey = "id",
1335
+ // 行的唯一标识
1336
+ columns = [],
1337
+ // 列配置
1338
+ tableProps = {},
1339
+ // 表格属性
1340
+ pageHidden = false,
1341
+ // 是否隐藏分页
1342
+ pageInTable = false,
1343
+ // 是否在表格中显示分页
1344
+ paginationProps = {},
1345
+ // 分页属性
1346
+ defaultPage = 1,
1347
+ //默认分页
1348
+ defaultPageSize = 10,
1349
+ //默认分页容量
1350
+ search = {},
1351
+ // 搜索表单配置
1352
+ request = void 0,
1353
+ // 请求函数
1354
+ rowSelection = false,
1355
+ // 多选配置
1356
+ selectionAffix = false,
1357
+ // 是否固定多选操作栏
1358
+ paginationAffix = false,
1359
+ // 是否固定底部分页栏
1360
+ virtual = false
1361
+ // 是否启用虚拟滚动
1362
+ } = props;
1363
+ const [form] = antd.Form.useForm();
1364
+ const [collapsed, setCollapsed] = React.useState(true);
1365
+ const [data, setData] = React.useState([]);
1366
+ const [loading, setLoading] = React.useState(true);
1367
+ const [params, setParams] = React.useState({});
1368
+ const [sort, setSort] = React.useState({});
1369
+ const [page, setPage] = React.useState(defaultPage);
1370
+ const [pageSize, setPageSize] = React.useState(defaultPageSize);
1371
+ const [total, setTotal] = React.useState(0);
1372
+ const formatValues = React.useCallback((values) => {
1373
+ const transformedValues = { ...values };
1374
+ Object.keys(transformedValues).forEach((key) => {
1375
+ if (!transformedValues[key]) {
1376
+ delete transformedValues[key];
1377
+ }
1378
+ });
1379
+ columns.forEach((column) => {
1380
+ const { dataIndex, transform, valueType } = column;
1381
+ const value = values[dataIndex];
1382
+ if (value !== void 0 && value !== null && value !== "") {
1383
+ if (transform) {
1384
+ const transformed = transform?.(value);
1385
+ if (typeof transformed === "object" && transformed !== null) {
1386
+ Object.assign(transformedValues, transformed);
1387
+ delete transformedValues[column?.dataIndex];
1388
+ } else {
1389
+ transformedValues[dataIndex] = transformed;
1390
+ }
1391
+ } else {
1392
+ switch (valueType) {
1393
+ case "dateRange":
1394
+ case "dateTimeRange":
1395
+ case "timeRange":
1396
+ if (Array.isArray(value) && value.length === 2) {
1397
+ const formatStr = "YYYY-MM-DD HH:mm:ss";
1398
+ transformedValues[`${dataIndex}_start`] = value[0]?.format ? value[0].format(formatStr) : value[0];
1399
+ transformedValues[`${dataIndex}_end`] = value[1]?.format ? value[1].format(formatStr) : value[1];
1400
+ }
1401
+ break;
1402
+ case "date":
1403
+ transformedValues[dataIndex] = value?.format ? value.format("YYYY-MM-DD 00:00:00") : value;
1404
+ break;
1405
+ case "dateTime":
1406
+ transformedValues[dataIndex] = value?.format ? value.format("YYYY-MM-DD HH:mm:ss") : value;
1407
+ break;
1408
+ case "time":
1409
+ if (value?.format) {
1410
+ const today = dayjs__default.default().format("YYYY-MM-DD");
1411
+ transformedValues[dataIndex] = `${today} ${value.format("HH:mm:ss")}`;
1412
+ } else {
1413
+ transformedValues[dataIndex] = value;
1414
+ }
1415
+ break;
1416
+ case "switch":
1417
+ transformedValues[dataIndex] = value;
1418
+ break;
1419
+ default:
1420
+ transformedValues[dataIndex] = value;
1421
+ }
1422
+ }
1423
+ } else if (value === false && valueType === "switch") {
1424
+ if (transform) {
1425
+ const transformed = transform(value);
1426
+ if (typeof transformed === "object" && transformed !== null) {
1427
+ Object.assign(transformedValues, transformed);
1428
+ } else {
1429
+ transformedValues[dataIndex] = transformed;
1430
+ }
1431
+ } else {
1432
+ transformedValues[dataIndex] = value;
1433
+ }
1434
+ }
1435
+ });
1436
+ return transformedValues;
1437
+ }, [columns]);
1438
+ const onFinish = React.useCallback((values) => {
1439
+ setPage(1);
1440
+ setParams(formatValues(values));
1441
+ }, [formatValues]);
1442
+ const onReset = React.useCallback(() => {
1443
+ if (params && Object.keys(params).length > 0 || page > 1) {
1444
+ form?.resetFields();
1445
+ setPage(1);
1446
+ setParams({});
1447
+ }
1448
+ }, [params, page, form]);
1449
+ const getSearchFormItem = React.useMemo(() => {
1450
+ let elements = [];
1451
+ let sum = 0;
1452
+ let sumAll = 0;
1453
+ let skip = 1;
1454
+ let span = 24;
1455
+ if (device.xl || device.xxl || device.lg) {
1456
+ skip = 3;
1457
+ span = 6;
1458
+ } else if (device.md) {
1459
+ skip = 2;
1460
+ span = 8;
1461
+ } else if (device.sm) {
1462
+ skip = 1;
1463
+ span = 12;
1464
+ }
1465
+ const renderFormField = (column) => {
1466
+ const { valueType, valueEnum, dataIndex, title: title2, props: props2 = {} } = column;
1467
+ const placeholder = `\u8BF7\u8F93\u5165${title2 || dataIndex}`;
1468
+ if (valueEnum) {
1469
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Select, { placeholder: `\u8BF7\u9009\u62E9${title2 || dataIndex}`, allowClear: true, ...props2, children: Object.entries(valueEnum).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsx(antd.Select.Option, { value: key, children: value.text }, key)) });
1470
+ }
1471
+ switch (valueType) {
1472
+ case "date":
1473
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.DatePicker, { style: { width: "100%" }, placeholder, ...props2 });
1474
+ case "dateTime":
1475
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.DatePicker, { showTime: true, style: { width: "100%" }, placeholder, ...props2 });
1476
+ case "dateRange":
1477
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.DatePicker.RangePicker, { style: { width: "100%" }, ...props2 });
1478
+ case "dateTimeRange":
1479
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.DatePicker.RangePicker, { showTime: true, style: { width: "100%" }, ...props2 });
1480
+ case "time":
1481
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.TimePicker, { style: { width: "100%" }, placeholder, ...props2 });
1482
+ case "timeRange":
1483
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.TimePicker.RangePicker, { style: { width: "100%" }, ...props2 });
1484
+ case "digit":
1485
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.InputNumber, { style: { width: "100%" }, placeholder, ...props2 });
1486
+ case "rate":
1487
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Rate, { allowHalf: true, ...props2 });
1488
+ case "switch":
1489
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Switch, { ...props2 });
1490
+ case "percent":
1491
+ return /* @__PURE__ */ jsxRuntime.jsx(
1492
+ antd.InputNumber,
1493
+ {
1494
+ style: { width: "100%" },
1495
+ placeholder,
1496
+ formatter: (value) => `${value}%`,
1497
+ parser: (value) => value.replace("%", ""),
1498
+ ...props2
1499
+ }
1500
+ );
1501
+ case "progress":
1502
+ return /* @__PURE__ */ jsxRuntime.jsx(
1503
+ antd.InputNumber,
1504
+ {
1505
+ style: { width: "100%" },
1506
+ placeholder,
1507
+ min: 0,
1508
+ max: 100,
1509
+ ...props2
1510
+ }
1511
+ );
1512
+ case "select":
1513
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Select, { placeholder: `\u8BF7\u9009\u62E9${title2 || dataIndex}`, allowClear: true, ...props2 });
1514
+ default:
1515
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Input, { placeholder, ...props2 });
1516
+ }
1517
+ };
1518
+ let hide = false;
1519
+ columns.forEach((column, index) => {
1520
+ if (column?.hideInSearch === true) {
1521
+ return;
1522
+ }
1523
+ if (!hide) {
1524
+ sumAll++;
1525
+ }
1526
+ if (skip > 0 && collapsed && sum >= skip) {
1527
+ hide = true;
1528
+ }
1529
+ if (!hide) {
1530
+ sum++;
1531
+ }
1532
+ const { formItemProps = {} } = column;
1533
+ elements.push(/* @__PURE__ */ jsxRuntime.jsx(
1534
+ antd.Col,
1535
+ {
1536
+ span,
1537
+ style: { display: hide ? "none" : "block" },
1538
+ className: search?.layout && search?.layout != "vertical" ? " " + styles.formItemLabel : "",
1539
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1540
+ antd.Form.Item,
1541
+ {
1542
+ className: styles.formItem,
1543
+ label: column?.title || column?.dataIndex,
1544
+ labelAlign: "right",
1545
+ colon: true,
1546
+ tooltip: column?.tip || void 0,
1547
+ name: column?.dataIndex,
1548
+ ...formItemProps,
1549
+ children: renderFormField(column)
1550
+ }
1551
+ )
1552
+ },
1553
+ column?.dataIndex + index
1554
+ ));
1555
+ });
1556
+ let offset = 0;
1557
+ if (device.xl || device.xxl || device.lg) {
1558
+ if (sum <= 3) {
1559
+ offset = (4 - sum - 1) * 6;
1560
+ } else {
1561
+ offset = sum % 4;
1562
+ if (offset <= 0) {
1563
+ offset = 18;
1564
+ } else {
1565
+ offset = 24 - (offset + 1) * 6;
1566
+ }
1567
+ }
1568
+ } else if (device.md) {
1569
+ if (sum <= 2) {
1570
+ offset = (3 - sum - 1) * 8;
1571
+ } else {
1572
+ offset = sum % 3;
1573
+ if (offset <= 0) {
1574
+ offset = 16;
1575
+ } else {
1576
+ offset = 24 - (offset + 1) * 8;
1577
+ }
1578
+ }
1579
+ } else if (device.sm) {
1580
+ if (sum <= 1) {
1581
+ offset = (2 - sum - 1) * 12;
1582
+ } else {
1583
+ offset = sum % 2;
1584
+ if (offset <= 0) {
1585
+ offset = 12;
1586
+ } else {
1587
+ offset = 24 - (offset + 1) * 12;
1588
+ }
1589
+ }
1590
+ } else if (device.xs) {
1591
+ offset = 0;
1592
+ }
1593
+ if (offset <= 0) {
1594
+ offset = 0;
1595
+ }
1596
+ elements.push(/* @__PURE__ */ jsxRuntime.jsx(
1597
+ antd.Col,
1598
+ {
1599
+ span,
1600
+ offset,
1601
+ className: styles.formButton,
1602
+ children: /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { className: styles.formItem, children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Space, { align: "center", size: 16, className: styles.formItemBtn, children: [
1603
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1604
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { htmlType: "reset", children: "\u91CD\u7F6E" }),
1605
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { type: "primary", htmlType: "submit", loading, children: "\u67E5\u8BE2" })
1606
+ ] }),
1607
+ sumAll > skip && /* @__PURE__ */ jsxRuntime.jsx("a", { onClick: () => setCollapsed(!collapsed), children: collapsed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1608
+ "\u5C55\u5F00 ",
1609
+ /* @__PURE__ */ jsxRuntime.jsx(AntdIcons.DownOutlined, {})
1610
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1611
+ "\u6536\u8D77 ",
1612
+ /* @__PURE__ */ jsxRuntime.jsx(AntdIcons.UpOutlined, {})
1613
+ ] }) })
1614
+ ] }) })
1615
+ },
1616
+ "action" + (sum + 2)
1617
+ ));
1618
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Row, { gutter: [20, 20], children: elements });
1619
+ }, [columns, collapsed, device, loading, search, styles, form]);
1620
+ const renderTableCell = React.useCallback((text, record, column) => {
1621
+ const { valueType, valueEnum, copyable, props: props2 = {} } = column;
1622
+ if (valueEnum && text !== void 0 && text !== null) {
1623
+ const enumItem = valueEnum[text];
1624
+ if (enumItem) {
1625
+ const { text: label, color } = enumItem;
1626
+ if (color) {
1627
+ const colorMap = {
1628
+ success: "success",
1629
+ warning: "warning",
1630
+ error: "error",
1631
+ default: "default",
1632
+ processing: "processing"
1633
+ };
1634
+ return /* @__PURE__ */ jsxRuntime.jsx(
1635
+ antd.Tag,
1636
+ {
1637
+ color: colorMap[color] || color || "default",
1638
+ bordered: false,
1639
+ ...props2,
1640
+ children: label
1641
+ }
1642
+ );
1643
+ }
1644
+ return label;
1645
+ }
1646
+ }
1647
+ let content;
1648
+ switch (valueType) {
1649
+ case "date":
1650
+ content = text ? dayjs__default.default(text).format("YYYY-MM-DD") : "-";
1651
+ break;
1652
+ case "dateTime":
1653
+ content = text ? dayjs__default.default(text).format("YYYY-MM-DD HH:mm:ss") : "-";
1654
+ break;
1655
+ case "time":
1656
+ content = text ? dayjs__default.default(text).format("HH:mm:ss") : "-";
1657
+ break;
1658
+ case "percent":
1659
+ content = /* @__PURE__ */ jsxRuntime.jsx(antd.Progress, { percent: Number(text) || 0, size: "small", ...props2 });
1660
+ break;
1661
+ case "progress":
1662
+ content = /* @__PURE__ */ jsxRuntime.jsx(antd.Progress, { percent: Number(text) || 0, size: "small", ...props2 });
1663
+ break;
1664
+ case "rate":
1665
+ content = /* @__PURE__ */ jsxRuntime.jsx(antd.Rate, { disabled: true, value: Number(text) || 0, ...props2 });
1666
+ break;
1667
+ case "switch":
1668
+ content = /* @__PURE__ */ jsxRuntime.jsx(antd.Switch, { checked: !!text, disabled: true, ...props2 });
1669
+ break;
1670
+ case "digit":
1671
+ content = typeof text === "number" ? text.toLocaleString() : text;
1672
+ break;
1673
+ default:
1674
+ content = text || "-";
1675
+ }
1676
+ if (copyable && text) {
1677
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Typography.Text, { copyable: true, children: content });
1678
+ }
1679
+ return content;
1680
+ }, []);
1681
+ const getTableColumns = React.useMemo(() => {
1682
+ const list = [];
1683
+ columns.forEach((column) => {
1684
+ if (column?.hideInTable === true) return;
1685
+ const newColumn = {
1686
+ ...column,
1687
+ // 使用稳定的 render 函数引用
1688
+ render: column.render || ((text, record) => {
1689
+ return renderTableCell(text, record, column);
1690
+ })
1691
+ };
1692
+ if (column.tip && typeof column.title === "string") {
1693
+ const originalTitle = column.title;
1694
+ newColumn.title = () => /* @__PURE__ */ jsxRuntime.jsxs(antd.Space, { size: "small", children: [
1695
+ originalTitle,
1696
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Tooltip, { title: column.tip, children: /* @__PURE__ */ jsxRuntime.jsx(AntdIcons.QuestionCircleOutlined, {}) })
1697
+ ] });
1698
+ }
1699
+ list.push(newColumn);
1700
+ });
1701
+ return list;
1702
+ }, [columns, renderTableCell]);
1703
+ requestRef.current = request;
1704
+ const requestData = React.useCallback(() => {
1705
+ const currentRequest = requestRef.current;
1706
+ if (!currentRequest) {
1707
+ setLoading(false);
1708
+ return;
1709
+ }
1710
+ setLoading(true);
1711
+ const param = { ...params };
1712
+ param.current = page;
1713
+ param.pageSize = pageSize;
1714
+ const sorter = { ...sort };
1715
+ currentRequest(param, sorter).then((res) => {
1716
+ if (res?.success) {
1717
+ setData(res?.data || []);
1718
+ setTotal(res?.total || 0);
1719
+ }
1720
+ }).finally(() => {
1721
+ setLoading(false);
1722
+ });
1723
+ }, [params, page, pageSize, sort]);
1724
+ React.useEffect(() => {
1725
+ requestData();
1726
+ }, [requestData]);
1727
+ const getTableExtra = React.useMemo(() => {
1728
+ if (!extraRefreshBtn && !extra) {
1729
+ return false;
1730
+ }
1731
+ return /* @__PURE__ */ jsxRuntime.jsxs(antd.Space, { children: [
1732
+ extra,
1733
+ extraRefreshBtn && /* @__PURE__ */ jsxRuntime.jsx(
1734
+ antd.Button,
1735
+ {
1736
+ color: "default",
1737
+ style: {
1738
+ fontSize: "15px",
1739
+ opacity: "0.7"
1740
+ },
1741
+ variant: "link",
1742
+ icon: /* @__PURE__ */ jsxRuntime.jsx(AntdIcons.RedoOutlined, { rotate: 260 }),
1743
+ onClick: requestData
1744
+ }
1745
+ )
1746
+ ] });
1747
+ }, [extraRefreshBtn, extra, requestData]);
1748
+ const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
1749
+ const [selectedRows, setSelectedRows] = React.useState([]);
1750
+ const clearSelectedRow = React.useCallback(() => {
1751
+ setSelectedRowKeys([]);
1752
+ setSelectedRows([]);
1753
+ if (rowSelection && typeof rowSelection === "object" && rowSelection.onChange) {
1754
+ rowSelection.onChange([], []);
1755
+ }
1756
+ }, [rowSelection]);
1757
+ const invertSelectedRow = React.useCallback(() => {
1758
+ const allKeys = data.map((item) => item[rowKey]);
1759
+ const newSelectedKeys = allKeys.filter((key) => !selectedRowKeys.includes(key));
1760
+ setSelectedRowKeys(newSelectedKeys);
1761
+ const newSelectedRows = data.filter((item) => newSelectedKeys.includes(item[rowKey]));
1762
+ setSelectedRows(newSelectedRows);
1763
+ if (rowSelection && typeof rowSelection === "object" && rowSelection.onChange) {
1764
+ rowSelection.onChange(newSelectedKeys, newSelectedRows);
1765
+ }
1766
+ }, [data, rowKey, selectedRowKeys, rowSelection]);
1767
+ const allSelectedRow = React.useCallback(() => {
1768
+ const allKeys = data.map((item) => item[rowKey]);
1769
+ setSelectedRowKeys(allKeys);
1770
+ setSelectedRows(data);
1771
+ if (rowSelection && typeof rowSelection === "object" && rowSelection.onChange) {
1772
+ rowSelection.onChange(allKeys, data);
1773
+ }
1774
+ }, [data, rowKey, rowSelection]);
1775
+ const handleSelectChange = React.useCallback((newSelectedRowKeys, newSelectedRows) => {
1776
+ setSelectedRowKeys(newSelectedRowKeys);
1777
+ setSelectedRows(newSelectedRows);
1778
+ if (rowSelection && typeof rowSelection === "object" && rowSelection?.onChange) {
1779
+ rowSelection?.onChange(newSelectedRowKeys, newSelectedRows);
1780
+ }
1781
+ }, [rowSelection]);
1782
+ const handleSelect = React.useCallback((record, selected, selectedRows2) => {
1783
+ if (rowSelection && typeof rowSelection === "object" && rowSelection?.onSelect) {
1784
+ rowSelection?.onSelect(record, selected, selectedRows2);
1785
+ }
1786
+ }, [rowSelection]);
1787
+ const handleSelectAll = React.useCallback((selected, selectedRows2, changeRows) => {
1788
+ if (rowSelection && typeof rowSelection === "object" && rowSelection?.onSelectAll) {
1789
+ rowSelection?.onSelectAll(selected, selectedRows2, changeRows);
1790
+ }
1791
+ }, [rowSelection]);
1792
+ const handleSelectInvert = React.useCallback((selectedRowKeys2) => {
1793
+ if (rowSelection && typeof rowSelection === "object" && rowSelection?.onSelectInvert) {
1794
+ rowSelection?.onSelectInvert(selectedRowKeys2);
1795
+ }
1796
+ }, [rowSelection]);
1797
+ const getRowSelection = React.useMemo(() => {
1798
+ if (rowSelection === false) {
1799
+ return void 0;
1800
+ }
1801
+ const select = {
1802
+ selectedRowKeys: rowSelection?.selectedRowKeys || selectedRowKeys,
1803
+ onChange: handleSelectChange,
1804
+ onSelect: handleSelect,
1805
+ onSelectAll: handleSelectAll,
1806
+ onSelectInvert: handleSelectInvert
1807
+ };
1808
+ return {
1809
+ ...{
1810
+ align: rowSelection?.align || "center",
1811
+ columnWidth: rowSelection?.columnWidth || 50,
1812
+ fixed: rowSelection?.fixed || false,
1813
+ selections: [
1814
+ {
1815
+ key: "all",
1816
+ text: "\u5168\u90E8\u9009\u4E2D",
1817
+ onSelect: allSelectedRow
1818
+ },
1819
+ {
1820
+ key: "invert",
1821
+ text: "\u53CD\u5411\u9009\u4E2D",
1822
+ onSelect: invertSelectedRow
1823
+ },
1824
+ {
1825
+ key: "clear",
1826
+ text: "\u6E05\u7A7A\u9009\u4E2D",
1827
+ onSelect: clearSelectedRow
1828
+ }
1829
+ ]
1830
+ },
1831
+ ...rowSelection,
1832
+ ...select
1833
+ };
1834
+ }, [rowSelection, selectedRowKeys, handleSelectChange, handleSelect, handleSelectAll, handleSelectInvert, allSelectedRow, invertSelectedRow, clearSelectedRow]);
1835
+ const setSelectedRowKey = React.useCallback((keys) => {
1836
+ setSelectedRowKeys(keys);
1837
+ const rows = data.filter((item) => keys.includes(item[rowKey]));
1838
+ setSelectedRows(rows);
1839
+ if (rowSelection && typeof rowSelection === "object" && rowSelection.onChange) {
1840
+ rowSelection.onChange(keys, rows);
1841
+ }
1842
+ }, [data, rowKey, rowSelection]);
1843
+ React.useImperativeHandle(ref, () => ({
1844
+ searchForm: form,
1845
+ refreshTableData: requestData,
1846
+ resetTableData: onReset,
1847
+ getTableData: () => {
1848
+ return {
1849
+ data,
1850
+ page,
1851
+ pageSize,
1852
+ sort,
1853
+ total
1854
+ };
1855
+ },
1856
+ getSelectedRowKeys: () => selectedRowKeys,
1857
+ getSelectedRows: () => selectedRows,
1858
+ setSelectedRowKeys: setSelectedRowKey,
1859
+ clearSelectedRows: clearSelectedRow,
1860
+ invertSelectedRow,
1861
+ allSelectedRow
1862
+ }));
1863
+ const [selectionBarAffix, setSelectionBarAffix] = React.useState(false);
1864
+ const renderSelectionBar = React.useCallback(() => {
1865
+ if ((selectedRowKeys?.length || 0) <= 0) return null;
1866
+ const content = /* @__PURE__ */ jsxRuntime.jsx(
1867
+ antd.Card,
1868
+ {
1869
+ className: styles.toolCard + (selectionBarAffix ? " " + styles.filter : ""),
1870
+ variant: "borderless",
1871
+ children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { justify: "space-between", align: "middle", children: [
1872
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { children: typeof rowSelection?.leftExtra === "function" && rowSelection?.leftExtra?.(selectedRowKeys, selectedRows) || rowSelection?.leftExtra || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1873
+ "\u5DF2\u9009\u62E9 ",
1874
+ selectedRowKeys?.length,
1875
+ " \u9879 ",
1876
+ /* @__PURE__ */ jsxRuntime.jsx(
1877
+ "a",
1878
+ {
1879
+ onClick: clearSelectedRow,
1880
+ children: "\u53D6\u6D88\u9009\u62E9"
1881
+ }
1882
+ )
1883
+ ] }) }),
1884
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(antd.Space, { children: typeof rowSelection?.rightExtra === "function" && rowSelection?.rightExtra?.(selectedRowKeys, selectedRows) || rowSelection?.rightExtra }) })
1885
+ ] })
1886
+ }
1887
+ );
1888
+ if (rowSelection?.hideExtra === true) {
1889
+ return false;
1890
+ }
1891
+ return /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: (selectedRowKeys?.length || 0) <= 0 ? 0 : 24, children: selectionAffix ? /* @__PURE__ */ jsxRuntime.jsx(antd.Affix, { offsetTop: 5, onChange: (affixed) => setSelectionBarAffix(affixed || false), children: content }) : content });
1892
+ }, [selectedRowKeys, selectedRows, rowSelection, selectionAffix, selectionBarAffix, styles, clearSelectedRow]);
1893
+ const [pageAffix, setPageAffix] = React.useState(false);
1894
+ const renderPagination = React.useCallback(() => {
1895
+ if (pageHidden || pageInTable || total <= 0) return null;
1896
+ const content = /* @__PURE__ */ jsxRuntime.jsx(
1897
+ antd.Card,
1898
+ {
1899
+ className: styles.pageCard + (pageAffix ? " " + styles.filter : ""),
1900
+ variant: "borderless",
1901
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1902
+ antd.Pagination,
1903
+ {
1904
+ align: "center",
1905
+ showTotal: (total2, range) => device?.xs || device?.sm ? false : `\u7B2C ${range[0]}-${range[1]} \u6761 / \u5171 ${total2} \u6761`,
1906
+ showQuickJumper: !(device?.xs || device?.sm),
1907
+ pageSizeOptions: [10, 20, 50, 100],
1908
+ ...paginationProps,
1909
+ showSizeChanger: {
1910
+ showSearch: false,
1911
+ variant: "filled",
1912
+ size: "small"
1913
+ },
1914
+ showLessItems: true,
1915
+ size: "small",
1916
+ current: page,
1917
+ pageSize,
1918
+ total,
1919
+ onChange: (page2, pageSize2) => {
1920
+ setPage(page2);
1921
+ setPageSize(pageSize2);
1922
+ }
1923
+ }
1924
+ )
1925
+ }
1926
+ );
1927
+ return paginationAffix ? /* @__PURE__ */ jsxRuntime.jsx(antd.Affix, { offsetBottom: 5, onChange: (affixed) => setPageAffix(affixed || false), children: content }) : content;
1928
+ }, [pageHidden, pageInTable, total, page, pageSize, paginationProps, device, pageAffix, paginationAffix, styles]);
1929
+ return /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: [15, 15], ref: containerRef, children: [
1930
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: !search ? 0 : 24, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Card, { variant: "borderless", children: /* @__PURE__ */ jsxRuntime.jsx(
1931
+ antd.Form,
1932
+ {
1933
+ layout: search?.layout || "vertical",
1934
+ form,
1935
+ onReset,
1936
+ onFinish,
1937
+ children: getSearchFormItem
1938
+ }
1939
+ ) }) }),
1940
+ renderSelectionBar(),
1941
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Card, { title, extra: getTableExtra, className: styles.tableCard, variant: "borderless", children: /* @__PURE__ */ jsxRuntime.jsx(
1942
+ antd.Table,
1943
+ {
1944
+ rowKey,
1945
+ className: styles.table,
1946
+ style: { overflowX: "auto", whiteSpace: "nowrap" },
1947
+ scroll: { x: true, y: virtual ? 500 : void 0 },
1948
+ virtual,
1949
+ ...tableProps,
1950
+ rowSelection: getRowSelection,
1951
+ pagination: !pageHidden && pageInTable ? {
1952
+ ...{
1953
+ pageSizeOptions: [10, 20, 50, 100]
1954
+ },
1955
+ ...paginationProps,
1956
+ ...{
1957
+ current: page,
1958
+ pageSize,
1959
+ total,
1960
+ size: "small",
1961
+ showSizeChanger: {
1962
+ showSearch: false,
1963
+ variant: "filled",
1964
+ size: "small"
1965
+ },
1966
+ showQuickJumper: !(device?.xs || device?.sm),
1967
+ showLessItems: true,
1968
+ showTotal: (total2, range) => device?.xs || device?.sm ? false : `\u7B2C ${range[0]}-${range[1]} \u6761 / \u5171 ${total2} \u6761`,
1969
+ onChange: (page2, pageSize2) => {
1970
+ setPage(page2);
1971
+ setPageSize(pageSize2);
1972
+ }
1973
+ }
1974
+ } : false,
1975
+ size: "small",
1976
+ columns: getTableColumns,
1977
+ dataSource: data,
1978
+ loading,
1979
+ onChange: React.useCallback((_, filters, sorter) => {
1980
+ if (Object.keys(filters).length > 0) {
1981
+ setParams((prev) => ({ ...prev, ...filters }));
1982
+ }
1983
+ if (Object.keys(sorter).length > 0 && sorter?.field) {
1984
+ let temp = {};
1985
+ temp[sorter?.field] = sorter?.order;
1986
+ setSort(temp);
1987
+ }
1988
+ }, [])
1989
+ }
1990
+ ) }) }),
1991
+ !pageHidden && !pageInTable && total > 0 && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, children: renderPagination() })
1992
+ ] });
1993
+ });
1994
+ var pro_table_default = ProTableComponent;
1995
+ var ProModal = React.forwardRef((props, ref) => {
1996
+ const {
1997
+ modalProps = {},
1998
+ title,
1999
+ onOk,
2000
+ onCancel,
2001
+ afterClose,
2002
+ okText,
2003
+ okType,
2004
+ width = 520,
2005
+ afterOpenChange,
2006
+ children
2007
+ } = props;
2008
+ const theme2 = useTheme();
2009
+ const [internalOpen, setInternalOpen] = React.useState(false);
2010
+ const isControlled = modalProps?.open !== void 0;
2011
+ const open = isControlled ? modalProps?.open : internalOpen;
2012
+ const adjustedWidth = theme2?.isCompactTheme?.() ? typeof width === "number" ? Math.floor(width * 0.87) : width : width;
2013
+ const handleOk = async () => {
2014
+ await onOk?.();
2015
+ };
2016
+ const handleCancel = () => {
2017
+ if (onCancel) {
2018
+ onCancel();
2019
+ } else if (!isControlled) {
2020
+ setInternalOpen(false);
2021
+ afterOpenChange?.(false);
2022
+ }
2023
+ };
2024
+ const handleAfterClose = () => {
2025
+ afterClose?.();
2026
+ };
2027
+ React.useImperativeHandle(ref, () => ({
2028
+ show: () => {
2029
+ if (!isControlled) {
2030
+ setInternalOpen(true);
2031
+ }
2032
+ afterOpenChange?.(true);
2033
+ },
2034
+ hide: () => {
2035
+ if (!isControlled) {
2036
+ setInternalOpen(false);
2037
+ }
2038
+ afterOpenChange?.(false);
2039
+ }
2040
+ }));
2041
+ return /* @__PURE__ */ jsxRuntime.jsx(
2042
+ antd.Modal,
2043
+ {
2044
+ title,
2045
+ open,
2046
+ onOk: handleOk,
2047
+ onCancel: handleCancel,
2048
+ afterClose: handleAfterClose,
2049
+ okText,
2050
+ okType,
2051
+ width: adjustedWidth,
2052
+ maskClosable: false,
2053
+ ...modalProps,
2054
+ children
2055
+ }
2056
+ );
2057
+ });
2058
+ var pro_modal_default = ProModal;
2059
+
2060
+ exports.Animate = Animate;
2061
+ exports.Animation = animation_default;
2062
+ exports.Antd = antd_default;
2063
+ exports.Body = body_default;
2064
+ exports.Breadcrumb = breadcrumb_default;
2065
+ exports.Footer = footer_default;
2066
+ exports.Header = header_default;
2067
+ exports.Icon = Icon;
2068
+ exports.IconFontProvider = IconFontProvider;
2069
+ exports.Layout = layout_default;
2070
+ exports.ProModal = pro_modal_default;
2071
+ exports.ProTable = pro_table_default;
2072
+ exports.Sider = sider_default;
2073
+ exports.Theme = theme_default;
2074
+ exports.Title = title_default;
2075
+ exports.getAllIconNames = getAllIconNames;
2076
+ exports.getAntdIconNames = getAntdIconNames;
2077
+ exports.getIconfontIconNames = getIconfontIconNames;
2078
+ exports.getIconfontUrl = getIconfontUrl;
2079
+ exports.setIconfontUrl = setIconfontUrl;
2080
+ exports.useTheme = useTheme;
2081
+ //# sourceMappingURL=index.js.map
2082
+ //# sourceMappingURL=index.js.map