@hkyhy/marsun-components-core 0.1.78 → 0.1.81
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/components/DispositionBar/index.d.ts +17 -0
- package/dist/components/DispositionBar/index.js +37 -0
- package/dist/components/DispositionBar/index.js.map +1 -0
- package/dist/components/DispositionBar/style.module.scss.js +11 -0
- package/dist/components/DispositionBar/style.module.scss.js.map +1 -0
- package/dist/components/Navigation/DrillNav/index.d.ts +24 -0
- package/dist/components/Navigation/DrillNav/index.js +70 -0
- package/dist/components/Navigation/DrillNav/index.js.map +1 -0
- package/dist/components/Navigation/DrillNav/style.module.scss.js +17 -0
- package/dist/components/Navigation/DrillNav/style.module.scss.js.map +1 -0
- package/dist/components/Navigation/index.d.ts +2 -0
- package/dist/components/Stat/StatCard/index.d.ts +14 -2
- package/dist/components/Stat/StatCard/index.js +48 -35
- package/dist/components/Stat/StatCard/index.js.map +1 -1
- package/dist/components/Stat/StatCard/style.module.scss.js +5 -3
- package/dist/components/Stat/StatCard/style.module.scss.js.map +1 -1
- package/dist/components/Stat/StatCardList.js +22 -13
- package/dist/components/Stat/StatCardList.js.map +1 -1
- package/dist/components/Stat/StatCardList.module.scss.js +7 -0
- package/dist/components/Stat/StatCardList.module.scss.js.map +1 -0
- package/dist/components/Stat/index.d.ts +2 -2
- package/dist/components/Table/ResizableHeaderCell.d.ts +17 -0
- package/dist/components/Table/ResizableHeaderCell.js +70 -0
- package/dist/components/Table/ResizableHeaderCell.js.map +1 -0
- package/dist/components/Table/Table.d.ts +8 -2
- package/dist/components/Table/Table.js +458 -290
- package/dist/components/Table/Table.js.map +1 -1
- package/dist/components/Table/columnConfigUtils.d.ts +25 -2
- package/dist/components/Table/columnConfigUtils.js +224 -116
- package/dist/components/Table/columnConfigUtils.js.map +1 -1
- package/dist/components/Table/index.d.ts +1 -1
- package/dist/components/Table/style.module.scss.js +36 -30
- package/dist/components/Table/style.module.scss.js.map +1 -1
- package/dist/components/index.d.ts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +707 -693
- package/dist/index.js.map +1 -1
- package/dist/marsun-components-core.css +1 -1
- package/dist/styles/global.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type DispositionBarProps = {
|
|
3
|
+
/** 左侧文案,默认「处置状态」 */
|
|
4
|
+
label?: string;
|
|
5
|
+
/** 状态徽章内容(string 或自定义节点) */
|
|
6
|
+
statusBadge: React.ReactNode;
|
|
7
|
+
/** 右侧操作区;由调用方注入业务钮 */
|
|
8
|
+
actions?: React.ReactNode;
|
|
9
|
+
/** true → 仅显示状态区,不渲染 actions */
|
|
10
|
+
statusLoading?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* 处置条布局壳:左状态 + 右操作。不绑业务 API / EP。
|
|
15
|
+
*/
|
|
16
|
+
declare const DispositionBar: React.FC<DispositionBarProps>;
|
|
17
|
+
export default DispositionBar;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsxs as m, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import n from "classnames";
|
|
3
|
+
import s from "./style.module.scss.js";
|
|
4
|
+
const u = ({
|
|
5
|
+
label: r = "处置状态",
|
|
6
|
+
statusBadge: i,
|
|
7
|
+
actions: a,
|
|
8
|
+
statusLoading: e,
|
|
9
|
+
className: t
|
|
10
|
+
}) => {
|
|
11
|
+
const l = typeof i == "string" || typeof i == "number" ? /* @__PURE__ */ o("span", { className: s["marsun-disposition-badge"], children: i }) : i;
|
|
12
|
+
return /* @__PURE__ */ m(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
className: n("marsun-disposition-bar", s["marsun-disposition-bar"], t),
|
|
16
|
+
role: "group",
|
|
17
|
+
"aria-label": r,
|
|
18
|
+
children: [
|
|
19
|
+
/* @__PURE__ */ m("div", { className: n("marsun-disposition-status", s["marsun-disposition-status"]), children: [
|
|
20
|
+
/* @__PURE__ */ o("span", { className: s["marsun-disposition-label"], children: r }),
|
|
21
|
+
l
|
|
22
|
+
] }),
|
|
23
|
+
!e && a ? /* @__PURE__ */ o(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
className: n("marsun-disposition-actions", s["marsun-disposition-actions"]),
|
|
27
|
+
children: a
|
|
28
|
+
}
|
|
29
|
+
) : null
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
export {
|
|
35
|
+
u as default
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/DispositionBar/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\nimport styles from './style.module.scss';\n\nexport type DispositionBarProps = {\n /** 左侧文案,默认「处置状态」 */\n label?: string;\n /** 状态徽章内容(string 或自定义节点) */\n statusBadge: React.ReactNode;\n /** 右侧操作区;由调用方注入业务钮 */\n actions?: React.ReactNode;\n /** true → 仅显示状态区,不渲染 actions */\n statusLoading?: boolean;\n className?: string;\n};\n\n/**\n * 处置条布局壳:左状态 + 右操作。不绑业务 API / EP。\n */\nconst DispositionBar: React.FC<DispositionBarProps> = ({\n label = '处置状态',\n statusBadge,\n actions,\n statusLoading,\n className,\n}) => {\n const badgeNode =\n typeof statusBadge === 'string' || typeof statusBadge === 'number' ? (\n <span className={styles['marsun-disposition-badge']}>{statusBadge}</span>\n ) : (\n statusBadge\n );\n\n return (\n <div\n className={classNames('marsun-disposition-bar', styles['marsun-disposition-bar'], className)}\n role=\"group\"\n aria-label={label}\n >\n <div className={classNames('marsun-disposition-status', styles['marsun-disposition-status'])}>\n <span className={styles['marsun-disposition-label']}>{label}</span>\n {badgeNode}\n </div>\n {!statusLoading && actions ? (\n <div\n className={classNames('marsun-disposition-actions', styles['marsun-disposition-actions'])}\n >\n {actions}\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default DispositionBar;\n"],"names":["DispositionBar","label","statusBadge","actions","statusLoading","className","badgeNode","jsx","styles","jsxs","classNames"],"mappings":";;;AAmBA,MAAMA,IAAgD,CAAC;AAAA,EACrD,OAAAC,IAAQ;AAAA,EACR,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IACJ,OAAOJ,KAAgB,YAAY,OAAOA,KAAgB,WACxD,gBAAAK,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAAI,aAAY,IAElEN;AAGJ,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,0BAA0BF,EAAO,wBAAwB,GAAGH,CAAS;AAAA,MAC3F,MAAK;AAAA,MACL,cAAYJ;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,SAAI,WAAWC,EAAW,6BAA6BF,EAAO,2BAA2B,CAAC,GACzF,UAAA;AAAA,UAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAAI,UAAAP,GAAM;AAAA,UAC3DK;AAAA,QAAA,GACH;AAAA,QACC,CAACF,KAAiBD,IACjB,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWG,EAAW,8BAA8BF,EAAO,4BAA4B,CAAC;AAAA,YAEvF,UAAAL;AAAA,UAAA;AAAA,QAAA,IAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const s = {
|
|
2
|
+
"marsun-disposition-bar": "_marsun-disposition-bar_b62pq_1",
|
|
3
|
+
"marsun-disposition-status": "_marsun-disposition-status_b62pq_16",
|
|
4
|
+
"marsun-disposition-label": "_marsun-disposition-label_b62pq_24",
|
|
5
|
+
"marsun-disposition-badge": "_marsun-disposition-badge_b62pq_31",
|
|
6
|
+
"marsun-disposition-actions": "_marsun-disposition-actions_b62pq_45"
|
|
7
|
+
};
|
|
8
|
+
export {
|
|
9
|
+
s as default
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=style.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type DrillStep = {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
/** 已走过且可点回;当前步不传 onClick */
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
};
|
|
8
|
+
export type DrillNavProps = {
|
|
9
|
+
steps: DrillStep[];
|
|
10
|
+
currentId: string;
|
|
11
|
+
/** 主标题(当前上下文) */
|
|
12
|
+
title?: string;
|
|
13
|
+
/** 副文案 */
|
|
14
|
+
subtitle?: string;
|
|
15
|
+
/** 与 onBack 成对传入才渲染返回钮 */
|
|
16
|
+
backLabel?: string;
|
|
17
|
+
onBack?: () => void;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* 下钻导航:可选 primary「返回」+ 步骤胶囊。
|
|
21
|
+
* 当前步高亮;已完成步可点回。
|
|
22
|
+
*/
|
|
23
|
+
declare const DrillNav: React.FC<DrillNavProps>;
|
|
24
|
+
export default DrillNav;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { Button as x } from "antd";
|
|
3
|
+
import h from "classnames";
|
|
4
|
+
import n from "./style.module.scss.js";
|
|
5
|
+
import { ChevronLeft as C } from "../../Icons/ChevronLeft.js";
|
|
6
|
+
const w = ({
|
|
7
|
+
steps: i,
|
|
8
|
+
currentId: c,
|
|
9
|
+
title: s,
|
|
10
|
+
subtitle: e,
|
|
11
|
+
backLabel: o,
|
|
12
|
+
onBack: m
|
|
13
|
+
}) => {
|
|
14
|
+
const N = i.findIndex((l) => l.id === c), f = !!(o && m);
|
|
15
|
+
return /* @__PURE__ */ a(
|
|
16
|
+
"div",
|
|
17
|
+
{
|
|
18
|
+
className: h("marsun-drill-nav", n["marsun-drill-nav"]),
|
|
19
|
+
role: "navigation",
|
|
20
|
+
"aria-label": "下钻步骤",
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ a("div", { className: n["marsun-drill-nav-row"], children: [
|
|
23
|
+
f ? /* @__PURE__ */ r(
|
|
24
|
+
x,
|
|
25
|
+
{
|
|
26
|
+
type: "primary",
|
|
27
|
+
icon: /* @__PURE__ */ r(C, { size: 16 }),
|
|
28
|
+
onClick: m,
|
|
29
|
+
className: n["marsun-drill-nav-back"],
|
|
30
|
+
children: o
|
|
31
|
+
}
|
|
32
|
+
) : null,
|
|
33
|
+
i.length > 0 ? /* @__PURE__ */ r("div", { className: n["marsun-drill-nav-steps"], children: i.map((l, t) => {
|
|
34
|
+
const d = l.id === c, u = N > t, v = u && !!l.onClick;
|
|
35
|
+
return /* @__PURE__ */ a(
|
|
36
|
+
"button",
|
|
37
|
+
{
|
|
38
|
+
type: "button",
|
|
39
|
+
className: h(
|
|
40
|
+
n["marsun-drill-nav-step"],
|
|
41
|
+
d && n["marsun-drill-nav-step-current"],
|
|
42
|
+
u && n["marsun-drill-nav-step-done"]
|
|
43
|
+
),
|
|
44
|
+
onClick: () => {
|
|
45
|
+
var p;
|
|
46
|
+
v && ((p = l.onClick) == null || p.call(l));
|
|
47
|
+
},
|
|
48
|
+
disabled: !v && !d,
|
|
49
|
+
"aria-current": d ? "step" : void 0,
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ r("span", { className: n["marsun-drill-nav-step-index"], children: t + 1 }),
|
|
52
|
+
l.label
|
|
53
|
+
]
|
|
54
|
+
},
|
|
55
|
+
l.id
|
|
56
|
+
);
|
|
57
|
+
}) }) : null
|
|
58
|
+
] }),
|
|
59
|
+
s || e ? /* @__PURE__ */ a("div", { className: n["marsun-drill-nav-context"], children: [
|
|
60
|
+
s ? /* @__PURE__ */ r("div", { className: n["marsun-drill-nav-title"], children: s }) : null,
|
|
61
|
+
e ? /* @__PURE__ */ r("div", { className: n["marsun-drill-nav-sub"], children: e }) : null
|
|
62
|
+
] }) : null
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
export {
|
|
68
|
+
w as default
|
|
69
|
+
};
|
|
70
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Navigation/DrillNav/index.tsx"],"sourcesContent":["import { ChevronLeft } from '@/components/Icons';\nimport { Button } from 'antd';\nimport classNames from 'classnames';\nimport React from 'react';\nimport styles from './style.module.scss';\n\nexport type DrillStep = {\n id: string;\n label: string;\n /** 已走过且可点回;当前步不传 onClick */\n onClick?: () => void;\n};\n\nexport type DrillNavProps = {\n steps: DrillStep[];\n currentId: string;\n /** 主标题(当前上下文) */\n title?: string;\n /** 副文案 */\n subtitle?: string;\n /** 与 onBack 成对传入才渲染返回钮 */\n backLabel?: string;\n onBack?: () => void;\n};\n\n/**\n * 下钻导航:可选 primary「返回」+ 步骤胶囊。\n * 当前步高亮;已完成步可点回。\n */\nconst DrillNav: React.FC<DrillNavProps> = ({\n steps,\n currentId,\n title,\n subtitle,\n backLabel,\n onBack,\n}) => {\n const currentIdx = steps.findIndex((s) => s.id === currentId);\n const showBack = Boolean(backLabel && onBack);\n\n return (\n <div\n className={classNames('marsun-drill-nav', styles['marsun-drill-nav'])}\n role=\"navigation\"\n aria-label=\"下钻步骤\"\n >\n <div className={styles['marsun-drill-nav-row']}>\n {showBack ? (\n <Button\n type=\"primary\"\n icon={<ChevronLeft size={16} />}\n onClick={onBack}\n className={styles['marsun-drill-nav-back']}\n >\n {backLabel}\n </Button>\n ) : null}\n {steps.length > 0 ? (\n <div className={styles['marsun-drill-nav-steps']}>\n {steps.map((s, i) => {\n const isCurrent = s.id === currentId;\n const isDone = currentIdx > i;\n const clickable = isDone && !!s.onClick;\n return (\n <button\n key={s.id}\n type=\"button\"\n className={classNames(\n styles['marsun-drill-nav-step'],\n isCurrent && styles['marsun-drill-nav-step-current'],\n isDone && styles['marsun-drill-nav-step-done'],\n )}\n onClick={() => {\n if (clickable) s.onClick?.();\n }}\n disabled={!clickable && !isCurrent}\n aria-current={isCurrent ? 'step' : undefined}\n >\n <span className={styles['marsun-drill-nav-step-index']}>{i + 1}</span>\n {s.label}\n </button>\n );\n })}\n </div>\n ) : null}\n </div>\n {title || subtitle ? (\n <div className={styles['marsun-drill-nav-context']}>\n {title ? <div className={styles['marsun-drill-nav-title']}>{title}</div> : null}\n {subtitle ? <div className={styles['marsun-drill-nav-sub']}>{subtitle}</div> : null}\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default DrillNav;\n"],"names":["DrillNav","steps","currentId","title","subtitle","backLabel","onBack","currentIdx","s","showBack","jsxs","classNames","styles","jsx","Button","ChevronLeft","i","isCurrent","isDone","clickable"],"mappings":";;;;;AA6BA,MAAMA,IAAoC,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AACF,MAAM;AACJ,QAAMC,IAAaN,EAAM,UAAU,CAACO,MAAMA,EAAE,OAAON,CAAS,GACtDO,IAAW,GAAQJ,KAAaC;AAEtC,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,oBAAoBC,EAAO,kBAAkB,CAAC;AAAA,MACpE,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,sBAAsB,GAC1C,UAAA;AAAA,UAAAH,IACC,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM,gBAAAD,EAACE,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,cAC7B,SAAST;AAAA,cACT,WAAWM,EAAO,uBAAuB;AAAA,cAExC,UAAAP;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,UACHJ,EAAM,SAAS,IACd,gBAAAY,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAAX,EAAM,IAAI,CAACO,GAAGQ,MAAM;AACnB,kBAAMC,IAAYT,EAAE,OAAON,GACrBgB,IAASX,IAAaS,GACtBG,IAAYD,KAAU,CAAC,CAACV,EAAE;AAChC,mBACE,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,WAAWC;AAAA,kBACTC,EAAO,uBAAuB;AAAA,kBAC9BK,KAAaL,EAAO,+BAA+B;AAAA,kBACnDM,KAAUN,EAAO,4BAA4B;AAAA,gBAAA;AAAA,gBAE/C,SAAS,MAAM;;AACb,kBAAIO,aAAa;gBACnB;AAAA,gBACA,UAAU,CAACA,KAAa,CAACF;AAAA,gBACzB,gBAAcA,IAAY,SAAS;AAAA,gBAEnC,UAAA;AAAA,kBAAA,gBAAAJ,EAAC,UAAK,WAAWD,EAAO,6BAA6B,GAAI,cAAI,GAAE;AAAA,kBAC9DJ,EAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,cAdEA,EAAE;AAAA,YAAA;AAAA,UAiBb,CAAC,GACH,IACE;AAAA,QAAA,GACN;AAAA,QACCL,KAASC,IACR,gBAAAM,EAAC,SAAI,WAAWE,EAAO,0BAA0B,GAC9C,UAAA;AAAA,UAAAT,sBAAS,OAAA,EAAI,WAAWS,EAAO,wBAAwB,GAAI,aAAM,IAAS;AAAA,UAC1ER,sBAAY,OAAA,EAAI,WAAWQ,EAAO,sBAAsB,GAAI,aAAS,IAAS;AAAA,QAAA,EAAA,CACjF,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const l = {
|
|
2
|
+
"marsun-drill-nav": "_marsun-drill-nav_11qlf_1",
|
|
3
|
+
"marsun-drill-nav-row": "_marsun-drill-nav-row_11qlf_6",
|
|
4
|
+
"marsun-drill-nav-back": "_marsun-drill-nav-back_11qlf_13",
|
|
5
|
+
"marsun-drill-nav-steps": "_marsun-drill-nav-steps_11qlf_18",
|
|
6
|
+
"marsun-drill-nav-step": "_marsun-drill-nav-step_11qlf_18",
|
|
7
|
+
"marsun-drill-nav-step-current": "_marsun-drill-nav-step-current_11qlf_54",
|
|
8
|
+
"marsun-drill-nav-step-done": "_marsun-drill-nav-step-done_11qlf_63",
|
|
9
|
+
"marsun-drill-nav-step-index": "_marsun-drill-nav-step-index_11qlf_69",
|
|
10
|
+
"marsun-drill-nav-context": "_marsun-drill-nav-context_11qlf_91",
|
|
11
|
+
"marsun-drill-nav-title": "_marsun-drill-nav-title_11qlf_96",
|
|
12
|
+
"marsun-drill-nav-sub": "_marsun-drill-nav-sub_11qlf_102"
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
l as default
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=style.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/** 马卡龙底色(详情 / Summary KPI) */
|
|
3
|
+
export declare const STAT_MACARON: {
|
|
4
|
+
readonly rose: "#FFEDEF";
|
|
5
|
+
readonly lilac: "#F3EEFF";
|
|
6
|
+
readonly mint: "#E8F8F4";
|
|
7
|
+
readonly blue: "#EAF3FF";
|
|
8
|
+
readonly peach: "#FFF3E8";
|
|
9
|
+
readonly butter: "#FFF8E6";
|
|
10
|
+
};
|
|
11
|
+
export type StatMacaronTone = keyof typeof STAT_MACARON;
|
|
2
12
|
export interface StatCardProps {
|
|
3
13
|
/** 标题 */
|
|
4
14
|
title: string;
|
|
5
|
-
/**
|
|
6
|
-
value: number;
|
|
15
|
+
/** 数值(未接指标可用「—」等字符串,禁假 0) */
|
|
16
|
+
value: number | string;
|
|
7
17
|
/** 前缀图标 */
|
|
8
18
|
prefix?: React.ReactNode;
|
|
9
19
|
/** 后缀(如 %、单位) */
|
|
@@ -18,6 +28,8 @@ export interface StatCardProps {
|
|
|
18
28
|
inline?: boolean;
|
|
19
29
|
/** 内联模式下的字体大小 */
|
|
20
30
|
fontSize?: number;
|
|
31
|
+
/** 马卡龙底色;与 style 并存时显式 style 优先 */
|
|
32
|
+
tone?: StatMacaronTone;
|
|
21
33
|
/** 自定义样式 */
|
|
22
34
|
style?: React.CSSProperties;
|
|
23
35
|
}
|
|
@@ -1,50 +1,63 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Card as
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { Card as x, Statistic as y } from "antd";
|
|
3
3
|
import e from "./style.module.scss.js";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
import o from "classnames";
|
|
5
|
+
const E = {
|
|
6
|
+
rose: "#FFEDEF",
|
|
7
|
+
lilac: "#F3EEFF",
|
|
8
|
+
mint: "#E8F8F4",
|
|
9
|
+
blue: "#EAF3FF",
|
|
10
|
+
peach: "#FFF3E8",
|
|
11
|
+
butter: "#FFF8E6"
|
|
12
|
+
}, g = {
|
|
13
|
+
borderRadius: 10,
|
|
14
|
+
padding: "8px 12px",
|
|
15
|
+
boxSizing: "border-box",
|
|
16
|
+
width: "100%",
|
|
17
|
+
height: "100%"
|
|
18
|
+
}, R = ({
|
|
19
|
+
title: F,
|
|
20
|
+
value: m,
|
|
21
|
+
prefix: f,
|
|
22
|
+
suffix: t,
|
|
23
|
+
precision: p,
|
|
24
|
+
color: u = "#1677ff",
|
|
12
25
|
onClick: a,
|
|
13
|
-
inline:
|
|
14
|
-
fontSize:
|
|
15
|
-
|
|
26
|
+
inline: b = !1,
|
|
27
|
+
fontSize: c,
|
|
28
|
+
tone: s,
|
|
29
|
+
style: i
|
|
16
30
|
}) => {
|
|
17
|
-
const
|
|
18
|
-
|
|
31
|
+
const d = s ? { ...g, background: E[s], ...i } : i, h = typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ r("span", { className: o("stat-card-suffix-unit", e["stat-card-suffix-unit"]), children: t }) : t, l = /* @__PURE__ */ r(
|
|
32
|
+
y,
|
|
19
33
|
{
|
|
20
|
-
title:
|
|
21
|
-
value:
|
|
22
|
-
prefix:
|
|
23
|
-
suffix:
|
|
24
|
-
precision:
|
|
25
|
-
valueStyle: { color:
|
|
34
|
+
title: F,
|
|
35
|
+
value: m,
|
|
36
|
+
prefix: f,
|
|
37
|
+
suffix: h,
|
|
38
|
+
precision: p,
|
|
39
|
+
valueStyle: { color: u, ...c ? { fontSize: c } : {} }
|
|
26
40
|
}
|
|
41
|
+
), n = o(
|
|
42
|
+
"stat-card-root",
|
|
43
|
+
e["stat-card-root"],
|
|
44
|
+
a && o("stat-card-clickable", e["stat-card-clickable"])
|
|
27
45
|
);
|
|
28
|
-
return
|
|
29
|
-
|
|
30
|
-
{
|
|
31
|
-
className: a ? l("stat-card-clickable", e["stat-card-clickable"]) : void 0,
|
|
32
|
-
onClick: a,
|
|
33
|
-
style: s,
|
|
34
|
-
children: c
|
|
35
|
-
}
|
|
36
|
-
) : /* @__PURE__ */ t(
|
|
37
|
-
v,
|
|
46
|
+
return b ? /* @__PURE__ */ r("div", { className: n, onClick: a, style: d, "data-tone": s, children: l }) : /* @__PURE__ */ r(
|
|
47
|
+
x,
|
|
38
48
|
{
|
|
39
49
|
hoverable: !!a,
|
|
40
50
|
onClick: a,
|
|
41
|
-
className:
|
|
42
|
-
|
|
43
|
-
|
|
51
|
+
className: n,
|
|
52
|
+
styles: { body: { height: "100%", display: "flex", flexDirection: "column" } },
|
|
53
|
+
style: d,
|
|
54
|
+
"data-tone": s,
|
|
55
|
+
children: l
|
|
44
56
|
}
|
|
45
57
|
);
|
|
46
58
|
};
|
|
47
59
|
export {
|
|
48
|
-
|
|
60
|
+
E as STAT_MACARON,
|
|
61
|
+
R as default
|
|
49
62
|
};
|
|
50
63
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Stat/StatCard/index.tsx"],"sourcesContent":["import { Card, Statistic } from 'antd';\nimport React from 'react';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface StatCardProps {\n /** 标题 */\n title: string;\n /**
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Stat/StatCard/index.tsx"],"sourcesContent":["import { Card, Statistic } from 'antd';\nimport React from 'react';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\n/** 马卡龙底色(详情 / Summary KPI) */\nexport const STAT_MACARON = {\n rose: '#FFEDEF',\n lilac: '#F3EEFF',\n mint: '#E8F8F4',\n blue: '#EAF3FF',\n peach: '#FFF3E8',\n butter: '#FFF8E6',\n} as const;\n\nexport type StatMacaronTone = keyof typeof STAT_MACARON;\n\nconst MACARON_TILE: React.CSSProperties = {\n borderRadius: 10,\n padding: '8px 12px',\n boxSizing: 'border-box',\n width: '100%',\n height: '100%',\n};\n\nexport interface StatCardProps {\n /** 标题 */\n title: string;\n /** 数值(未接指标可用「—」等字符串,禁假 0) */\n value: number | string;\n /** 前缀图标 */\n prefix?: React.ReactNode;\n /** 后缀(如 %、单位) */\n suffix?: React.ReactNode;\n /** 小数精度 */\n precision?: number;\n /** 数值颜色 */\n color?: string;\n /** 点击回调 */\n onClick?: () => void;\n /** 是否内联模式(不使用 Card 包裹) */\n inline?: boolean;\n /** 内联模式下的字体大小 */\n fontSize?: number;\n /** 马卡龙底色;与 style 并存时显式 style 优先 */\n tone?: StatMacaronTone;\n /** 自定义样式 */\n style?: React.CSSProperties;\n}\n\n/** 可点击的统计卡片 */\nconst StatCard: React.FC<StatCardProps> = ({\n title,\n value,\n prefix,\n suffix,\n precision,\n color = '#1677ff',\n onClick,\n inline = false,\n fontSize,\n tone,\n style,\n}) => {\n const mergedStyle: React.CSSProperties | undefined = tone\n ? { ...MACARON_TILE, background: STAT_MACARON[tone], ...style }\n : style;\n\n const resolvedSuffix =\n typeof suffix === 'string' || typeof suffix === 'number' ? (\n <span className={classNames('stat-card-suffix-unit', styles['stat-card-suffix-unit'])}>\n {suffix}\n </span>\n ) : (\n suffix\n );\n\n const statistic = (\n <Statistic\n title={title}\n value={value}\n prefix={prefix}\n suffix={resolvedSuffix}\n precision={precision}\n valueStyle={{ color, ...(fontSize ? { fontSize } : {}) }}\n />\n );\n\n const rootClass = classNames(\n 'stat-card-root',\n styles['stat-card-root'],\n onClick && classNames('stat-card-clickable', styles['stat-card-clickable']),\n );\n\n if (inline) {\n return (\n <div className={rootClass} onClick={onClick} style={mergedStyle} data-tone={tone}>\n {statistic}\n </div>\n );\n }\n\n return (\n <Card\n hoverable={!!onClick}\n onClick={onClick}\n className={rootClass}\n styles={{ body: { height: '100%', display: 'flex', flexDirection: 'column' } }}\n style={mergedStyle}\n data-tone={tone}\n >\n {statistic}\n </Card>\n );\n};\n\nexport default StatCard;\n"],"names":["STAT_MACARON","MACARON_TILE","StatCard","title","value","prefix","suffix","precision","color","onClick","inline","fontSize","tone","style","mergedStyle","resolvedSuffix","jsx","classNames","styles","statistic","Statistic","rootClass","Card"],"mappings":";;;;AAMO,MAAMA,IAAe;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV,GAIMC,IAAoC;AAAA,EACxC,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AACV,GA4BMC,IAAoC,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,SAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACJ,QAAMC,IAA+CF,IACjD,EAAE,GAAGX,GAAc,YAAYD,EAAaY,CAAI,GAAG,GAAGC,EAAA,IACtDA,GAEEE,IACJ,OAAOT,KAAW,YAAY,OAAOA,KAAW,WAC9C,gBAAAU,EAAC,QAAA,EAAK,WAAWC,EAAW,yBAAyBC,EAAO,uBAAuB,CAAC,GACjF,aACH,IAEAZ,GAGEa,IACJ,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,OAAAjB;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,MACA,QAAQU;AAAA,MACR,WAAAR;AAAA,MACA,YAAY,EAAE,OAAAC,GAAO,GAAIG,IAAW,EAAE,UAAAA,EAAA,IAAa,CAAA,EAAC;AAAA,IAAG;AAAA,EAAA,GAIrDU,IAAYJ;AAAA,IAChB;AAAA,IACAC,EAAO,gBAAgB;AAAA,IACvBT,KAAWQ,EAAW,uBAAuBC,EAAO,qBAAqB,CAAC;AAAA,EAAA;AAG5E,SAAIR,IAEA,gBAAAM,EAAC,SAAI,WAAWK,GAAW,SAAAZ,GAAkB,OAAOK,GAAa,aAAWF,GACzE,UAAAO,EAAA,CACH,IAKF,gBAAAH;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,CAACb;AAAA,MACb,SAAAA;AAAA,MACA,WAAWY;AAAA,MACX,QAAQ,EAAE,MAAM,EAAE,QAAQ,QAAQ,SAAS,QAAQ,eAAe,WAAS;AAAA,MAC3E,OAAOP;AAAA,MACP,aAAWF;AAAA,MAEV,UAAAO;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
const
|
|
2
|
-
"stat-card-
|
|
1
|
+
const t = {
|
|
2
|
+
"stat-card-root": "_stat-card-root_h7bz5_6",
|
|
3
|
+
"stat-card-clickable": "_stat-card-clickable_h7bz5_37",
|
|
4
|
+
"stat-card-suffix-unit": "_stat-card-suffix-unit_h7bz5_42"
|
|
3
5
|
};
|
|
4
6
|
export {
|
|
5
|
-
|
|
7
|
+
t as default
|
|
6
8
|
};
|
|
7
9
|
//# sourceMappingURL=style.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -1,20 +1,29 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Row as
|
|
3
|
-
import
|
|
4
|
-
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { Row as f, Col as p } from "antd";
|
|
3
|
+
import u from "classnames";
|
|
4
|
+
import g from "./StatCard/index.js";
|
|
5
|
+
import x from "./StatCardList.module.scss.js";
|
|
6
|
+
const h = (r) => r <= 2 ? { xs: 12, sm: 12, lg: 12 } : r <= 3 ? { xs: 12, sm: 8, lg: 8 } : r <= 4 ? { xs: 12, sm: 12, lg: 6 } : { xs: 12, sm: 8, lg: 4 }, v = ({
|
|
5
7
|
items: r,
|
|
6
8
|
gutter: o = [16, 16],
|
|
7
|
-
className:
|
|
8
|
-
inline:
|
|
9
|
-
fontSize:
|
|
9
|
+
className: l,
|
|
10
|
+
inline: i = !1,
|
|
11
|
+
fontSize: m
|
|
10
12
|
}) => {
|
|
11
|
-
const e = r.filter((
|
|
12
|
-
return /* @__PURE__ */
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
const e = r.filter((s) => !s.hidden), a = h(e.length);
|
|
14
|
+
return /* @__PURE__ */ t(
|
|
15
|
+
f,
|
|
16
|
+
{
|
|
17
|
+
gutter: o,
|
|
18
|
+
className: u("stat-card-list", x["stat-card-list"], l),
|
|
19
|
+
children: e.map((s, n) => {
|
|
20
|
+
const { colProps: c, hidden: C, ...d } = s;
|
|
21
|
+
return /* @__PURE__ */ t(p, { ...c ?? a, children: /* @__PURE__ */ t(g, { ...d, inline: i, fontSize: m }) }, n);
|
|
22
|
+
})
|
|
23
|
+
}
|
|
24
|
+
);
|
|
16
25
|
};
|
|
17
26
|
export {
|
|
18
|
-
|
|
27
|
+
v as default
|
|
19
28
|
};
|
|
20
29
|
//# sourceMappingURL=StatCardList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatCardList.js","sources":["../../../src/components/Stat/StatCardList.tsx"],"sourcesContent":["import { Col, Row } from 'antd';\nimport type { ColProps } from 'antd/es/grid';\nimport React from 'react';\nimport type { StatCardProps } from './StatCard';\nimport StatCard from './StatCard';\n\nexport interface StatItem extends Omit<StatCardProps, 'inline' | 'fontSize'> {\n /** 卡片占列配置,不传则根据总 items 数自动计算 */\n colProps?: ColProps;\n /** 是否隐藏,为 true 时不渲染 */\n hidden?: boolean;\n}\n\nexport interface StatCardListProps {\n /** 统计项列表 */\n items: StatItem[];\n /** 行间距 */\n gutter?: [number, number];\n /** 容器 className */\n className?: string;\n /** 是否内联模式 */\n inline?: boolean;\n /** 内联模式字体大小 */\n fontSize?: number;\n}\n\n/** 根据项数自动计算默认列宽 */\nconst getDefaultCol = (total: number): ColProps => {\n if (total <= 2) return { xs: 12, sm: 12, lg: 12 };\n if (total <= 3) return { xs: 12, sm: 8, lg: 8 };\n if (total <= 4) return { xs: 12, sm: 12, lg: 6 };\n return { xs: 12, sm: 8, lg: 4 };\n};\n\n/** 统计卡片列表 */\nconst StatCardList: React.FC<StatCardListProps> = ({\n items,\n gutter = [16, 16],\n className,\n inline = false,\n fontSize,\n}) => {\n const visibleItems = items.filter((item) => !item.hidden);\n const defaultCol = getDefaultCol(visibleItems.length);\n\n return (\n <Row
|
|
1
|
+
{"version":3,"file":"StatCardList.js","sources":["../../../src/components/Stat/StatCardList.tsx"],"sourcesContent":["import { Col, Row } from 'antd';\nimport type { ColProps } from 'antd/es/grid';\nimport classNames from 'classnames';\nimport React from 'react';\nimport type { StatCardProps } from './StatCard';\nimport StatCard from './StatCard';\nimport styles from './StatCardList.module.scss';\n\nexport interface StatItem extends Omit<StatCardProps, 'inline' | 'fontSize'> {\n /** 卡片占列配置,不传则根据总 items 数自动计算 */\n colProps?: ColProps;\n /** 是否隐藏,为 true 时不渲染 */\n hidden?: boolean;\n}\n\nexport interface StatCardListProps {\n /** 统计项列表 */\n items: StatItem[];\n /** 行间距 */\n gutter?: [number, number];\n /** 容器 className */\n className?: string;\n /** 是否内联模式 */\n inline?: boolean;\n /** 内联模式字体大小 */\n fontSize?: number;\n}\n\n/** 根据项数自动计算默认列宽 */\nconst getDefaultCol = (total: number): ColProps => {\n if (total <= 2) return { xs: 12, sm: 12, lg: 12 };\n if (total <= 3) return { xs: 12, sm: 8, lg: 8 };\n if (total <= 4) return { xs: 12, sm: 12, lg: 6 };\n return { xs: 12, sm: 8, lg: 4 };\n};\n\n/** 统计卡片列表 */\nconst StatCardList: React.FC<StatCardListProps> = ({\n items,\n gutter = [16, 16],\n className,\n inline = false,\n fontSize,\n}) => {\n const visibleItems = items.filter((item) => !item.hidden);\n const defaultCol = getDefaultCol(visibleItems.length);\n\n return (\n <Row\n gutter={gutter}\n className={classNames('stat-card-list', styles['stat-card-list'], className)}\n >\n {visibleItems.map((item, idx) => {\n const { colProps, hidden, ...cardProps } = item;\n return (\n <Col key={idx} {...(colProps ?? defaultCol)}>\n <StatCard {...cardProps} inline={inline} fontSize={fontSize} />\n </Col>\n );\n })}\n </Row>\n );\n};\n\nexport default StatCardList;\n"],"names":["getDefaultCol","total","StatCardList","items","gutter","className","inline","fontSize","visibleItems","item","defaultCol","jsx","Row","classNames","styles","idx","colProps","hidden","cardProps","Col","StatCard"],"mappings":";;;;;AA6BA,MAAMA,IAAgB,CAACC,MACjBA,KAAS,IAAU,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA,IACzCA,KAAS,IAAU,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI,EAAA,IACxCA,KAAS,IAAU,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,EAAA,IACtC,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI,EAAA,GAIxBC,IAA4C,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,QAAAC,IAAS,CAAC,IAAI,EAAE;AAAA,EAChB,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAeL,EAAM,OAAO,CAACM,MAAS,CAACA,EAAK,MAAM,GAClDC,IAAaV,EAAcQ,EAAa,MAAM;AAEpD,SACE,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAAR;AAAA,MACA,WAAWS,EAAW,kBAAkBC,EAAO,gBAAgB,GAAGT,CAAS;AAAA,MAE1E,UAAAG,EAAa,IAAI,CAACC,GAAMM,MAAQ;AAC/B,cAAM,EAAE,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,MAAcT;AAC3C,eACE,gBAAAE,EAACQ,GAAA,EAAe,GAAIH,KAAYN,GAC9B,UAAA,gBAAAC,EAACS,GAAA,EAAU,GAAGF,GAAW,QAAAZ,GAAgB,UAAAC,EAAA,CAAoB,EAAA,GADrDQ,CAEV;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatCardList.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { default as StatCard } from './StatCard';
|
|
2
|
-
export type { StatCardProps } from './StatCard';
|
|
1
|
+
export { default as StatCard, STAT_MACARON } from './StatCard';
|
|
2
|
+
export type { StatCardProps, StatMacaronTone } from './StatCard';
|
|
3
3
|
export { default as StatCardList } from './StatCardList';
|
|
4
4
|
export type { StatCardListProps, StatItem } from './StatCardList';
|
|
5
5
|
export { default as StatPendingBreakdown } from './StatPendingBreakdown';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode, ThHTMLAttributes } from 'react';
|
|
2
|
+
export type ResizableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement> & {
|
|
3
|
+
width?: number;
|
|
4
|
+
minWidth?: number;
|
|
5
|
+
maxWidth?: number;
|
|
6
|
+
/** 开始拖拽前调用(用于锁死其它列宽) */
|
|
7
|
+
onResizeStart?: () => void;
|
|
8
|
+
onResize?: (width: number) => void;
|
|
9
|
+
onResizeStop?: (width: number) => void;
|
|
10
|
+
/** 双击把手:清除自定义 width */
|
|
11
|
+
onReset?: () => void;
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* antd Table header.cell:表头右缘拖拽调宽;无 onResize 时退化为普通 th。
|
|
16
|
+
*/
|
|
17
|
+
export default function ResizableHeaderCell({ width, minWidth, maxWidth, onResizeStart, onResize, onResizeStop, onReset, children, className, style, ...rest }: ResizableHeaderCellProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsx as C, jsxs as H } from "react/jsx-runtime";
|
|
2
|
+
import I from "classnames";
|
|
3
|
+
import { useRef as D } from "react";
|
|
4
|
+
import { COLUMN_RESIZE_MIN_WIDTH as g, COLUMN_RESIZE_MAX_WIDTH as x, clampColumnWidth as X } from "./columnConfigUtils.js";
|
|
5
|
+
import N from "./style.module.scss.js";
|
|
6
|
+
function O({
|
|
7
|
+
width: t,
|
|
8
|
+
minWidth: a = g,
|
|
9
|
+
maxWidth: L = x,
|
|
10
|
+
onResizeStart: r,
|
|
11
|
+
onResize: c,
|
|
12
|
+
onResizeStop: n,
|
|
13
|
+
onReset: s,
|
|
14
|
+
children: m,
|
|
15
|
+
className: i,
|
|
16
|
+
style: f,
|
|
17
|
+
...p
|
|
18
|
+
}) {
|
|
19
|
+
const l = D(null), u = D(
|
|
20
|
+
typeof t == "number" && Number.isFinite(t) ? t : void 0
|
|
21
|
+
);
|
|
22
|
+
if (!c)
|
|
23
|
+
return /* @__PURE__ */ C("th", { ...p, className: i, style: f, ref: l, children: m });
|
|
24
|
+
const M = (e) => {
|
|
25
|
+
var y;
|
|
26
|
+
e.preventDefault(), e.stopPropagation(), r == null || r();
|
|
27
|
+
const W = ((y = l.current) == null ? void 0 : y.offsetWidth) || (typeof t == "number" && Number.isFinite(t) && t > 0 ? t : a), _ = e.clientX, d = W;
|
|
28
|
+
u.current = d;
|
|
29
|
+
const v = (o) => {
|
|
30
|
+
const E = X(d + (o.clientX - _), a, L);
|
|
31
|
+
u.current = E, c(E);
|
|
32
|
+
}, b = () => {
|
|
33
|
+
document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", b), document.body.style.cursor = "", document.body.style.userSelect = "";
|
|
34
|
+
const o = u.current;
|
|
35
|
+
typeof o == "number" && (n == null || n(o));
|
|
36
|
+
};
|
|
37
|
+
document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", v), document.addEventListener("mouseup", b);
|
|
38
|
+
};
|
|
39
|
+
return /* @__PURE__ */ H(
|
|
40
|
+
"th",
|
|
41
|
+
{
|
|
42
|
+
...p,
|
|
43
|
+
ref: l,
|
|
44
|
+
className: I(i, N.resizableHeaderCell),
|
|
45
|
+
style: { ...f, position: "relative", overflow: "visible" },
|
|
46
|
+
children: [
|
|
47
|
+
m,
|
|
48
|
+
/* @__PURE__ */ C(
|
|
49
|
+
"span",
|
|
50
|
+
{
|
|
51
|
+
role: "separator",
|
|
52
|
+
"aria-orientation": "vertical",
|
|
53
|
+
"aria-label": "拖拽调整列宽,双击重置",
|
|
54
|
+
title: "拖拽调宽 · 双击重置",
|
|
55
|
+
className: N.resizeHandle,
|
|
56
|
+
onClick: (e) => e.stopPropagation(),
|
|
57
|
+
onMouseDown: M,
|
|
58
|
+
onDoubleClick: (e) => {
|
|
59
|
+
e.preventDefault(), e.stopPropagation(), s == null || s();
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
)
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
export {
|
|
68
|
+
O as default
|
|
69
|
+
};
|
|
70
|
+
//# sourceMappingURL=ResizableHeaderCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ResizableHeaderCell.js","sources":["../../../src/components/Table/ResizableHeaderCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n useRef,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n type ThHTMLAttributes,\n} from 'react';\nimport {\n clampColumnWidth,\n COLUMN_RESIZE_MAX_WIDTH,\n COLUMN_RESIZE_MIN_WIDTH,\n} from './columnConfigUtils';\nimport styles from './style.module.scss';\n\nexport type ResizableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement> & {\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n /** 开始拖拽前调用(用于锁死其它列宽) */\n onResizeStart?: () => void;\n onResize?: (width: number) => void;\n onResizeStop?: (width: number) => void;\n /** 双击把手:清除自定义 width */\n onReset?: () => void;\n children?: ReactNode;\n};\n\n/**\n * antd Table header.cell:表头右缘拖拽调宽;无 onResize 时退化为普通 th。\n */\nexport default function ResizableHeaderCell({\n width,\n minWidth = COLUMN_RESIZE_MIN_WIDTH,\n maxWidth = COLUMN_RESIZE_MAX_WIDTH,\n onResizeStart,\n onResize,\n onResizeStop,\n onReset,\n children,\n className,\n style,\n ...rest\n}: ResizableHeaderCellProps) {\n const thRef = useRef<HTMLTableCellElement>(null);\n const lastWidthRef = useRef<number | undefined>(\n typeof width === 'number' && Number.isFinite(width) ? width : undefined,\n );\n\n if (!onResize) {\n return (\n <th {...rest} className={className} style={style} ref={thRef}>\n {children}\n </th>\n );\n }\n\n const startDrag = (e: ReactMouseEvent<HTMLSpanElement>) => {\n e.preventDefault();\n e.stopPropagation();\n // 先锁兄弟列,再量本列(锁宽可能触发重排,故本列尽量用当前 offsetWidth)\n onResizeStart?.();\n const measured =\n thRef.current?.offsetWidth ||\n (typeof width === 'number' && Number.isFinite(width) && width > 0 ? width : minWidth);\n const startX = e.clientX;\n const startW = measured;\n lastWidthRef.current = startW;\n\n const onMove = (ev: MouseEvent) => {\n const next = clampColumnWidth(startW + (ev.clientX - startX), minWidth, maxWidth);\n lastWidthRef.current = next;\n onResize(next);\n };\n const onUp = () => {\n document.removeEventListener('mousemove', onMove);\n document.removeEventListener('mouseup', onUp);\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n const finalW = lastWidthRef.current;\n if (typeof finalW === 'number') onResizeStop?.(finalW);\n };\n document.body.style.cursor = 'col-resize';\n document.body.style.userSelect = 'none';\n document.addEventListener('mousemove', onMove);\n document.addEventListener('mouseup', onUp);\n };\n\n return (\n <th\n {...rest}\n ref={thRef}\n className={classNames(className, styles.resizableHeaderCell)}\n style={{ ...style, position: 'relative', overflow: 'visible' }}\n >\n {children}\n <span\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-label=\"拖拽调整列宽,双击重置\"\n title=\"拖拽调宽 · 双击重置\"\n className={styles.resizeHandle}\n onClick={(e) => e.stopPropagation()}\n onMouseDown={startDrag}\n onDoubleClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n onReset?.();\n }}\n />\n </th>\n );\n}\n"],"names":["ResizableHeaderCell","width","minWidth","COLUMN_RESIZE_MIN_WIDTH","maxWidth","COLUMN_RESIZE_MAX_WIDTH","onResizeStart","onResize","onResizeStop","onReset","children","className","style","rest","thRef","useRef","lastWidthRef","jsx","startDrag","measured","_a","startX","startW","onMove","ev","next","clampColumnWidth","onUp","finalW","jsxs","classNames","styles"],"mappings":";;;;;AA8BA,SAAwBA,EAAoB;AAAA,EAC1C,OAAAC;AAAA,EACA,UAAAC,IAAWC;AAAA,EACX,UAAAC,IAAWC;AAAA,EACX,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAA6B;AAC3B,QAAMC,IAAQC,EAA6B,IAAI,GACzCC,IAAeD;AAAA,IACnB,OAAOd,KAAU,YAAY,OAAO,SAASA,CAAK,IAAIA,IAAQ;AAAA,EAAA;AAGhE,MAAI,CAACM;AACH,WACE,gBAAAU,EAAC,QAAI,GAAGJ,GAAM,WAAAF,GAAsB,OAAAC,GAAc,KAAKE,GACpD,UAAAJ,GACH;AAIJ,QAAMQ,IAAY,CAAC,MAAwC;;AACzD,MAAE,eAAA,GACF,EAAE,gBAAA,GAEFZ,KAAA,QAAAA;AACA,UAAMa,MACJC,IAAAN,EAAM,YAAN,gBAAAM,EAAe,iBACd,OAAOnB,KAAU,YAAY,OAAO,SAASA,CAAK,KAAKA,IAAQ,IAAIA,IAAQC,IACxEmB,IAAS,EAAE,SACXC,IAASH;AACf,IAAAH,EAAa,UAAUM;AAEvB,UAAMC,IAAS,CAACC,MAAmB;AACjC,YAAMC,IAAOC,EAAiBJ,KAAUE,EAAG,UAAUH,IAASnB,GAAUE,CAAQ;AAChF,MAAAY,EAAa,UAAUS,GACvBlB,EAASkB,CAAI;AAAA,IACf,GACME,IAAO,MAAM;AACjB,eAAS,oBAAoB,aAAaJ,CAAM,GAChD,SAAS,oBAAoB,WAAWI,CAAI,GAC5C,SAAS,KAAK,MAAM,SAAS,IAC7B,SAAS,KAAK,MAAM,aAAa;AACjC,YAAMC,IAASZ,EAAa;AAC5B,MAAI,OAAOY,KAAW,aAAUpB,KAAA,QAAAA,EAAeoB;AAAA,IACjD;AACA,aAAS,KAAK,MAAM,SAAS,cAC7B,SAAS,KAAK,MAAM,aAAa,QACjC,SAAS,iBAAiB,aAAaL,CAAM,GAC7C,SAAS,iBAAiB,WAAWI,CAAI;AAAA,EAC3C;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,KAAKC;AAAA,MACL,WAAWgB,EAAWnB,GAAWoB,EAAO,mBAAmB;AAAA,MAC3D,OAAO,EAAE,GAAGnB,GAAO,UAAU,YAAY,UAAU,UAAA;AAAA,MAElD,UAAA;AAAA,QAAAF;AAAA,QACD,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,cAAW;AAAA,YACX,OAAM;AAAA,YACN,WAAWc,EAAO;AAAA,YAClB,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,YAClB,aAAab;AAAA,YACb,eAAe,CAAC,MAAM;AACpB,gBAAE,eAAA,GACF,EAAE,gBAAA,GACFT,KAAA,QAAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TableProps as AntTableProps } from 'antd';
|
|
2
2
|
import { Key, ReactElement, ReactNode, Ref } from 'react';
|
|
3
3
|
import { TableColumnConfigFetcher, TableColumnConfigItem, TableColumnConfigSaver } from './columnConfigTypes';
|
|
4
|
-
import { applyColumnConfig, COLUMN_CONFIG_COL_KEY, columnsToConfig, FLEX_SPACER_COL_KEY, hideColumnAtPath, isInternalColumnKey } from './columnConfigUtils';
|
|
4
|
+
import { applyColumnConfig, applyLeafWidthOverrides, clearColumnWidthAtPath, clampColumnWidth, columnsLeafPathSignature, COLUMN_CONFIG_COL_KEY, COLUMN_RESIZE_MAX_WIDTH, COLUMN_RESIZE_MIN_WIDTH, columnsToConfig, configHasLeafWidths, copyColumnWidths, FLEX_SPACER_COL_KEY, hideColumnAtPath, isInternalColumnKey, setColumnWidthAtPath } from './columnConfigUtils';
|
|
5
5
|
import { TablePrefs, TablePrefsFetcher, TablePrefsSaver } from './tablePrefsTypes';
|
|
6
6
|
import { TableFetchHandle, TableFetchMapped, TableFetchQuery } from './useTableFetch';
|
|
7
7
|
export type { TableColumnConfigFetcher, TableColumnConfigItem, TableColumnConfigSaver, TableFetchHandle, TableFetchMapped, TableFetchQuery, TablePrefs, TablePrefsFetcher, TablePrefsSaver, };
|
|
@@ -30,6 +30,12 @@ export type TableProps<RecordType extends object = Record<string, unknown>> = An
|
|
|
30
30
|
rowHideSelectedKeys?: Key[];
|
|
31
31
|
/** 自定义行隐藏工具条;默认内置按钮 */
|
|
32
32
|
rowConfigToolbar?: ReactNode | false;
|
|
33
|
+
/** 叶子列拖宽;默认 !!tableName */
|
|
34
|
+
columnResizeEnabled?: boolean;
|
|
35
|
+
/** 拖宽最小 px;默认 48 */
|
|
36
|
+
columnResizeMinWidth?: number;
|
|
37
|
+
/** 拖宽最大 px;默认 480 */
|
|
38
|
+
columnResizeMaxWidth?: number;
|
|
33
39
|
/**
|
|
34
40
|
* Fetch 模式:`dataSource === undefined` 且提供本回调(或 fetchUrl)时由 Table 拉数。
|
|
35
41
|
* 优先于 fetchUrl。Marsun typed list 主路径。
|
|
@@ -55,4 +61,4 @@ declare const Table: <RecordType extends object = Record<string, unknown>>(props
|
|
|
55
61
|
export default Table;
|
|
56
62
|
export { emptyTablePrefs } from './tablePrefsTypes';
|
|
57
63
|
export { applyHiddenRows, mergeTablePrefs, normalizeHiddenRowKeys, parseTablePrefs, serializeTablePrefs, } from './tablePrefsUtils';
|
|
58
|
-
export { applyColumnConfig, COLUMN_CONFIG_COL_KEY, columnsToConfig, FLEX_SPACER_COL_KEY, hideColumnAtPath, isInternalColumnKey, };
|
|
64
|
+
export { applyColumnConfig, applyLeafWidthOverrides, clearColumnWidthAtPath, clampColumnWidth, columnsLeafPathSignature, COLUMN_CONFIG_COL_KEY, COLUMN_RESIZE_MAX_WIDTH, COLUMN_RESIZE_MIN_WIDTH, columnsToConfig, configHasLeafWidths, copyColumnWidths, FLEX_SPACER_COL_KEY, hideColumnAtPath, isInternalColumnKey, setColumnWidthAtPath, };
|