@hkyhy/marsun-components-core 0.1.50 → 0.1.51
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Tag as
|
|
3
|
-
const
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import { Tag as f } from "antd";
|
|
3
|
+
const b = {
|
|
4
4
|
/** 主题色(跟随系统主题色动态变化) */
|
|
5
5
|
PRIMARY: "primary",
|
|
6
6
|
/** 默认/中性 */
|
|
@@ -25,7 +25,7 @@ const g = {
|
|
|
25
25
|
GOLD: "gold",
|
|
26
26
|
/** 石灰/低优先级 */
|
|
27
27
|
LIME: "lime"
|
|
28
|
-
},
|
|
28
|
+
}, d = {
|
|
29
29
|
primary: { text: "var(--primary-color)", bg: "var(--primary-color-bg)" },
|
|
30
30
|
success: { text: "var(--success-color)", bg: "var(--success-color-bg)" },
|
|
31
31
|
info: { text: "var(--info-color)", bg: "var(--info-color-bg)" },
|
|
@@ -40,53 +40,48 @@ const g = {
|
|
|
40
40
|
gold: "#faad14",
|
|
41
41
|
lime: "#a0d911"
|
|
42
42
|
};
|
|
43
|
-
function
|
|
44
|
-
const
|
|
45
|
-
return `rgba(${
|
|
43
|
+
function p(r, t) {
|
|
44
|
+
const n = parseInt(r.slice(1, 3), 16), e = parseInt(r.slice(3, 5), 16), c = parseInt(r.slice(5, 7), 16);
|
|
45
|
+
return `rgba(${n}, ${e}, ${c}, ${t})`;
|
|
46
46
|
}
|
|
47
|
-
function
|
|
47
|
+
function C(r) {
|
|
48
48
|
return s[r] ? s[r] : (r.startsWith("#"), r);
|
|
49
49
|
}
|
|
50
|
-
const
|
|
50
|
+
const l = {
|
|
51
51
|
border: "none",
|
|
52
52
|
height: 24,
|
|
53
53
|
lineHeight: "22px",
|
|
54
54
|
padding: "0 8px"
|
|
55
|
-
}
|
|
55
|
+
};
|
|
56
|
+
function i(r) {
|
|
57
|
+
return {
|
|
58
|
+
backgroundColor: r,
|
|
59
|
+
color: "#fff",
|
|
60
|
+
fontWeight: 600
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
const E = ({
|
|
56
64
|
children: r,
|
|
57
|
-
color:
|
|
58
|
-
|
|
65
|
+
color: t = b.DEFAULT,
|
|
66
|
+
selected: n = !1,
|
|
67
|
+
style: e,
|
|
68
|
+
...c
|
|
59
69
|
}) => {
|
|
60
|
-
const o =
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
);
|
|
74
|
-
const e = u(n);
|
|
75
|
-
return /* @__PURE__ */ a(
|
|
76
|
-
c,
|
|
77
|
-
{
|
|
78
|
-
style: {
|
|
79
|
-
...i,
|
|
80
|
-
color: e,
|
|
81
|
-
backgroundColor: b(e, 0.06)
|
|
82
|
-
},
|
|
83
|
-
...t,
|
|
84
|
-
children: r
|
|
85
|
-
}
|
|
86
|
-
);
|
|
70
|
+
const o = d[t], a = o ? null : C(t), g = o ? {
|
|
71
|
+
...l,
|
|
72
|
+
color: o.text,
|
|
73
|
+
backgroundColor: o.bg,
|
|
74
|
+
...n ? i(o.text) : null
|
|
75
|
+
} : {
|
|
76
|
+
...l,
|
|
77
|
+
color: a,
|
|
78
|
+
backgroundColor: p(a, 0.06),
|
|
79
|
+
...n ? i(a) : null
|
|
80
|
+
};
|
|
81
|
+
return /* @__PURE__ */ u(f, { style: { ...e || {}, ...g }, ...c, children: r });
|
|
87
82
|
};
|
|
88
83
|
export {
|
|
89
|
-
|
|
90
|
-
|
|
84
|
+
b as SEMANTIC_COLORS,
|
|
85
|
+
E as default
|
|
91
86
|
};
|
|
92
87
|
//# sourceMappingURL=SemanticTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemanticTag.js","sources":["../../../src/components/Tag/SemanticTag.tsx"],"sourcesContent":["import { Tag } from 'antd';\nimport React from 'react';\n\n/**\n * 语义化颜色常量\n * 统一管理所有 Tag 的颜色,避免各处硬编码不一致\n *\n * 主题色(primary/success/info/warning/danger)使用 CSS 变量,跟随系统主题色动态变化\n * 固定色(default/processing/other/volcano/cyan/gold/lime)集中管理,不随主题变化\n */\nexport const SEMANTIC_COLORS = {\n /** 主题色(跟随系统主题色动态变化) */\n PRIMARY: 'primary',\n /** 默认/中性 */\n DEFAULT: 'default',\n /** 信息/提示 */\n INFO: 'info',\n /** 进行中/处理中 */\n PROCESSING: 'processing',\n /** 成功/已完成/已通过 */\n SUCCESS: 'success',\n /** 警告/待处理 */\n WARNING: 'warning',\n /** 危险/紧急/已驳回 */\n DANGER: 'danger',\n /** 其他/特殊 */\n OTHER: 'other',\n /** 火山/待领导审批 */\n VOLCANO: 'volcano',\n /** 青色/辅助 */\n CYAN: 'cyan',\n /** 金色/高优先级 */\n GOLD: 'gold',\n /** 石灰/低优先级 */\n LIME: 'lime',\n} as const;\n\nexport type SemanticColor = (typeof SEMANTIC_COLORS)[keyof typeof SEMANTIC_COLORS];\n\n/**\n * 主题色映射:使用 CSS 变量,跟随系统主题色动态变化\n * 文字色 = --{prefix}-color,背景色 = --{prefix}-color-bg(6% 透明度)\n */\nconst THEME_COLOR_MAP: Record<string, { text: string; bg: string }> = {\n primary: { text: 'var(--primary-color)', bg: 'var(--primary-color-bg)' },\n success: { text: 'var(--success-color)', bg: 'var(--success-color-bg)' },\n info: { text: 'var(--info-color)', bg: 'var(--info-color-bg)' },\n warning: { text: 'var(--warning-color)', bg: 'var(--warning-color-bg)' },\n danger: { text: 'var(--error-color)', bg: 'var(--error-color-bg)' },\n};\n\n/**\n * 固定色映射:不随主题变化,集中管理避免硬编码\n * 仅用于非主题色场景(processing/other/volcano/cyan/gold/lime 等)\n */\nconst FIXED_COLOR_MAP: Record<string, string> = {\n default: '#666666',\n processing: '#F09700',\n other: '#6740C3',\n volcano: '#fa541c',\n cyan: '#13c2c2',\n gold: '#faad14',\n lime: '#a0d911',\n};\n\n/** 将 hex 颜色转换为 rgba */\nfunction hexToRgba(hex: string, alpha: number): string {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\n/** 解析颜色键为 hex 值(仅用于固定色) */\nfunction resolveFixedColor(color: string): string {\n if (FIXED_COLOR_MAP[color]) return FIXED_COLOR_MAP[color];\n if (color.startsWith('#')) return color;\n return color;\n}\n\ninterface SemanticTagProps {\n /** 标签文本 */\n children: React.ReactNode;\n /** 语义化颜色,优先使用 SEMANTIC_COLORS 中的值 */\n color?: SemanticColor | string;\n /** antd Tag 其余属性 */\n [key: string]: unknown;\n}\n\n/** 公共样式 */\nconst TAG_BASE_STYLE: React.CSSProperties = {\n border: 'none',\n height: 24,\n lineHeight: '22px',\n padding: '0 8px',\n};\n\n/**\n * 统一 Tag 组件\n * - 主题色(primary/success/info/warning/danger)使用 CSS 变量,跟随系统主题色动态变化\n * - 固定色集中管理,避免硬编码\n * - 文字颜色 = 语义色,背景色 = 语义色 6% 透明度\n * - 统一尺寸:height 24px, line-height 24px, padding 0 8px\n */\nconst SemanticTag: React.FC<SemanticTagProps> = ({\n children,\n color = SEMANTIC_COLORS.DEFAULT,\n ...rest\n}) => {\n // 优先匹配主题色(CSS
|
|
1
|
+
{"version":3,"file":"SemanticTag.js","sources":["../../../src/components/Tag/SemanticTag.tsx"],"sourcesContent":["import { Tag } from 'antd';\nimport React from 'react';\n\n/**\n * 语义化颜色常量\n * 统一管理所有 Tag 的颜色,避免各处硬编码不一致\n *\n * 主题色(primary/success/info/warning/danger)使用 CSS 变量,跟随系统主题色动态变化\n * 固定色(default/processing/other/volcano/cyan/gold/lime)集中管理,不随主题变化\n */\nexport const SEMANTIC_COLORS = {\n /** 主题色(跟随系统主题色动态变化) */\n PRIMARY: 'primary',\n /** 默认/中性 */\n DEFAULT: 'default',\n /** 信息/提示 */\n INFO: 'info',\n /** 进行中/处理中 */\n PROCESSING: 'processing',\n /** 成功/已完成/已通过 */\n SUCCESS: 'success',\n /** 警告/待处理 */\n WARNING: 'warning',\n /** 危险/紧急/已驳回 */\n DANGER: 'danger',\n /** 其他/特殊 */\n OTHER: 'other',\n /** 火山/待领导审批 */\n VOLCANO: 'volcano',\n /** 青色/辅助 */\n CYAN: 'cyan',\n /** 金色/高优先级 */\n GOLD: 'gold',\n /** 石灰/低优先级 */\n LIME: 'lime',\n} as const;\n\nexport type SemanticColor = (typeof SEMANTIC_COLORS)[keyof typeof SEMANTIC_COLORS];\n\n/**\n * 主题色映射:使用 CSS 变量,跟随系统主题色动态变化\n * 文字色 = --{prefix}-color,背景色 = --{prefix}-color-bg(6% 透明度)\n * 选中态反白:背景取文字色(实色),文字反白\n */\nconst THEME_COLOR_MAP: Record<string, { text: string; bg: string }> = {\n primary: { text: 'var(--primary-color)', bg: 'var(--primary-color-bg)' },\n success: { text: 'var(--success-color)', bg: 'var(--success-color-bg)' },\n info: { text: 'var(--info-color)', bg: 'var(--info-color-bg)' },\n warning: { text: 'var(--warning-color)', bg: 'var(--warning-color-bg)' },\n danger: { text: 'var(--error-color)', bg: 'var(--error-color-bg)' },\n};\n\n/**\n * 固定色映射:不随主题变化,集中管理避免硬编码\n * 仅用于非主题色场景(processing/other/volcano/cyan/gold/lime 等)\n */\nconst FIXED_COLOR_MAP: Record<string, string> = {\n default: '#666666',\n processing: '#F09700',\n other: '#6740C3',\n volcano: '#fa541c',\n cyan: '#13c2c2',\n gold: '#faad14',\n lime: '#a0d911',\n};\n\n/** 将 hex 颜色转换为 rgba */\nfunction hexToRgba(hex: string, alpha: number): string {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\n/** 解析颜色键为 hex 值(仅用于固定色) */\nfunction resolveFixedColor(color: string): string {\n if (FIXED_COLOR_MAP[color]) return FIXED_COLOR_MAP[color];\n if (color.startsWith('#')) return color;\n return color;\n}\n\ninterface SemanticTagProps {\n /** 标签文本 */\n children: React.ReactNode;\n /** 语义化颜色,优先使用 SEMANTIC_COLORS 中的值 */\n color?: SemanticColor | string;\n /** 选中态:反白(实色背景 + 白字 + 加粗),不改 24px 高度 */\n selected?: boolean;\n /** antd Tag 其余属性 */\n [key: string]: unknown;\n}\n\n/** 公共样式 */\nconst TAG_BASE_STYLE: React.CSSProperties = {\n border: 'none',\n height: 24,\n lineHeight: '22px',\n padding: '0 8px',\n};\n\n/** 选中态:反白(实色背景 + 白字 + 加粗),对比强、辨识高;不新增 border,24px 高度不变 */\nfunction buildSelectedStyle(solidBg: string): React.CSSProperties {\n return {\n backgroundColor: solidBg,\n color: '#fff',\n fontWeight: 600,\n };\n}\n\n/**\n * 统一 Tag 组件\n * - 主题色(primary/success/info/warning/danger)使用 CSS 变量,跟随系统主题色动态变化\n * - 固定色集中管理,避免硬编码\n * - 文字颜色 = 语义色,背景色 = 语义色 6% 透明度\n * - 统一尺寸:height 24px, line-height 24px, padding 0 8px\n */\nconst SemanticTag: React.FC<SemanticTagProps> = ({\n children,\n color = SEMANTIC_COLORS.DEFAULT,\n selected = false,\n style: consumerStyle,\n ...rest\n}) => {\n // 优先匹配主题色(CSS 变量);否则按固定色 / 自定义 hex\n const themeColor = THEME_COLOR_MAP[color];\n const hex = themeColor ? null : resolveFixedColor(color);\n const computedStyle: React.CSSProperties = themeColor\n ? {\n ...TAG_BASE_STYLE,\n color: themeColor.text,\n backgroundColor: themeColor.bg,\n ...(selected ? buildSelectedStyle(themeColor.text) : null),\n }\n : {\n ...TAG_BASE_STYLE,\n color: hex as string,\n backgroundColor: hexToRgba(hex as string, 0.06),\n ...(selected ? buildSelectedStyle(hex as string) : null),\n };\n\n // 计算样式优先(color/bg/selected 不被覆盖),消费方 style 可补 cursor/margin 等\n return (\n <Tag style={{ ...(consumerStyle || {}), ...computedStyle }} {...rest}>\n {children}\n </Tag>\n );\n};\n\nexport default SemanticTag;\n"],"names":["SEMANTIC_COLORS","THEME_COLOR_MAP","FIXED_COLOR_MAP","hexToRgba","hex","alpha","r","g","b","resolveFixedColor","color","TAG_BASE_STYLE","buildSelectedStyle","solidBg","SemanticTag","children","selected","consumerStyle","rest","themeColor","computedStyle","jsx","Tag"],"mappings":";;AAUO,MAAMA,IAAkB;AAAA;AAAA,EAE7B,SAAS;AAAA;AAAA,EAET,SAAS;AAAA;AAAA,EAET,MAAM;AAAA;AAAA,EAEN,YAAY;AAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,EAET,SAAS;AAAA;AAAA,EAET,QAAQ;AAAA;AAAA,EAER,OAAO;AAAA;AAAA,EAEP,SAAS;AAAA;AAAA,EAET,MAAM;AAAA;AAAA,EAEN,MAAM;AAAA;AAAA,EAEN,MAAM;AACR,GASMC,IAAgE;AAAA,EACpE,SAAS,EAAE,MAAM,wBAAwB,IAAI,0BAAA;AAAA,EAC7C,SAAS,EAAE,MAAM,wBAAwB,IAAI,0BAAA;AAAA,EAC7C,MAAM,EAAE,MAAM,qBAAqB,IAAI,uBAAA;AAAA,EACvC,SAAS,EAAE,MAAM,wBAAwB,IAAI,0BAAA;AAAA,EAC7C,QAAQ,EAAE,MAAM,sBAAsB,IAAI,wBAAA;AAC5C,GAMMC,IAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGA,SAASC,EAAUC,GAAaC,GAAuB;AACrD,QAAMC,IAAI,SAASF,EAAI,MAAM,GAAG,CAAC,GAAG,EAAE,GAChCG,IAAI,SAASH,EAAI,MAAM,GAAG,CAAC,GAAG,EAAE,GAChCI,IAAI,SAASJ,EAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AACtC,SAAO,QAAQE,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKH,CAAK;AACxC;AAGA,SAASI,EAAkBC,GAAuB;AAChD,SAAIR,EAAgBQ,CAAK,IAAUR,EAAgBQ,CAAK,KACpDA,EAAM,WAAW,GAAG,GAAUA;AAEpC;AAcA,MAAMC,IAAsC;AAAA,EAC1C,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AACX;AAGA,SAASC,EAAmBC,GAAsC;AAChE,SAAO;AAAA,IACL,iBAAiBA;AAAA,IACjB,OAAO;AAAA,IACP,YAAY;AAAA,EAAA;AAEhB;AASA,MAAMC,IAA0C,CAAC;AAAA,EAC/C,UAAAC;AAAA,EACA,OAAAL,IAAQV,EAAgB;AAAA,EACxB,UAAAgB,IAAW;AAAA,EACX,OAAOC;AAAA,EACP,GAAGC;AACL,MAAM;AAEJ,QAAMC,IAAalB,EAAgBS,CAAK,GAClCN,IAAMe,IAAa,OAAOV,EAAkBC,CAAK,GACjDU,IAAqCD,IACvC;AAAA,IACE,GAAGR;AAAA,IACH,OAAOQ,EAAW;AAAA,IAClB,iBAAiBA,EAAW;AAAA,IAC5B,GAAIH,IAAWJ,EAAmBO,EAAW,IAAI,IAAI;AAAA,EAAA,IAEvD;AAAA,IACE,GAAGR;AAAA,IACH,OAAOP;AAAA,IACP,iBAAiBD,EAAUC,GAAe,IAAI;AAAA,IAC9C,GAAIY,IAAWJ,EAAmBR,CAAa,IAAI;AAAA,EAAA;AAIzD,SACE,gBAAAiB,EAACC,GAAA,EAAI,OAAO,EAAE,GAAIL,KAAiB,CAAA,GAAK,GAAGG,EAAA,GAAkB,GAAGF,GAC7D,UAAAH,EAAA,CACH;AAEJ;"}
|