@zjlab-fe/data-hub-ui 0.28.0 → 0.29.0

package/dist/types/components/status-tag/index.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 type TagType = 'running' | 'failed' | 'success' | 'stopped' | 'pending';
+type TagVariant = 'filled' | 'bordered' | 'dot';
 interface IProps {
     type?: TagType;
+    variant?: TagVariant;
+    className?: string;
     children?: React.ReactNode;
 }
 export default function StatusTag(props: IProps): import("react/jsx-runtime").JSX.Element;

package/es/components/status-tag/index.js

@@ -1,30 +1,42 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Tag } from 'antd';
+import classNames from 'classnames';
+import * as index_module from './index.module.scss.js';
+import { statusDot, statusTag, dot } from './index.module.scss.js';
 
-const colorPresets = {
-    running: '#0061FF', // 进行状态
-    failed: '#FE4D4F', // 失败状态
-    success: '#53C31B', // 成功状态
-    stopped: '#545B64', // 停止状态
-    pending: '#FAAD14', // 等待状态
+const statusStyles = {
+    filled: {
+        running: { color: '#1775fe', backgroundColor: 'rgba(23, 117, 254, 0.1)' },
+        failed: { color: '#ff4d4f', backgroundColor: 'rgba(255, 77, 79, 0.1)' },
+        success: { color: '#52c41a', backgroundColor: 'rgba(82, 196, 26, 0.1)' },
+        stopped: { color: '#545b64', backgroundColor: '#edf2fc' },
+        pending: { color: '#fa8c16', backgroundColor: 'rgba(250, 140, 22, 0.1)' },
+    },
+    dot: {
+        running: { color: '#1775fe', dotColor: '#1775fe' },
+        failed: { color: '#ff4d4f', dotColor: '#ff4d4f' },
+        success: { color: '#52c41a', dotColor: '#52c41a' },
+        stopped: { color: 'rgba(0, 0, 0, 0.65)', dotColor: '#d9d9d9' },
+        pending: { color: '#fa8c16', dotColor: '#fa8c16' },
+    },
+    bordered: {
+        running: { color: '#1775fe', backgroundColor: '#ecf4ff', borderColor: '#b3d2ff' },
+        failed: { color: '#f5222d', backgroundColor: '#fff1f0', borderColor: '#ffa39e' },
+        success: { color: '#52c41a', backgroundColor: '#f6ffed', borderColor: '#b7eb8f' },
+        stopped: { color: 'rgba(0, 0, 0, 0.25)', backgroundColor: '#f5f5f5', borderColor: '#d9d9d9' },
+        pending: { color: '#fa8c16', backgroundColor: '#fff7e6', borderColor: '#fa8c16' },
+    },
 };
 function StatusTag(props) {
-    const { type = 'running', children } = props;
-    const colors = colorPresets[type];
-    const hexToRgb = (hex) => {
-        const bigint = parseInt(hex.replace('#', ''), 16);
-        const r = (bigint >> 16) & 255;
-        const g = (bigint >> 8) & 255;
-        const b = bigint & 255;
-        return `${r},${g},${b}`;
-    };
-    return (jsx(Tag, { bordered: false, style: {
-            backgroundColor: `rgba(${hexToRgb(colors)},0.1)`,
-            borderRadius: '4px',
-            fontSize: '14px',
-            color: `${colors}`,
-            padding: '3px 8px',
-            fontFamily: 'AlibabaPuHuiTi-3-55-RegularL3',
+    const { type = 'running', variant = 'filled', className, children } = props;
+    const preset = statusStyles[variant][type];
+    if (variant === 'dot') {
+        return (jsxs("span", { className: classNames(statusTag, dot, className), children: [jsx("span", { className: statusDot, style: { backgroundColor: preset.dotColor } }), jsx("span", { style: { color: preset.color }, children: children })] }));
+    }
+    return (jsx(Tag, { bordered: variant === 'bordered', className: classNames(statusTag, index_module[variant], className), style: {
+            color: preset.color,
+            backgroundColor: preset.backgroundColor,
+            borderColor: preset.borderColor,
         }, children: children }));
 }
 

package/es/components/status-tag/index.module.scss.js

@@ -0,0 +1,45 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__statusTag___yRGEa {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-end: 0;
+  font-family: "AlibabaPuHuiTi-3-55-RegularL3", "PingFang SC", sans-serif;
+  white-space: nowrap;
+}
+
+.index-module__filled___SKjTo {
+  border-radius: 4px;
+  padding: 1px 8px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.index-module__bordered___x7xGX {
+  border-radius: 2px;
+  padding: 0 8px;
+  font-size: 12px;
+  line-height: 20px;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.index-module__dot___rbWrB {
+  gap: 8px;
+  font-size: 14px;
+  line-height: 22px;
+  padding: 0;
+  background: transparent;
+}
+
+.index-module__statusDot___yMpG3 {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}`;
+document.head.appendChild(style);
+
+var statusTag = "index-module__statusTag___yRGEa";var filled = "index-module__filled___SKjTo";var bordered = "index-module__bordered___x7xGX";var dot = "index-module__dot___rbWrB";var statusDot = "index-module__statusDot___yMpG3";
+var styles = {"statusTag":"index-module__statusTag___yRGEa","filled":"index-module__filled___SKjTo","bordered":"index-module__bordered___x7xGX","dot":"index-module__dot___rbWrB","statusDot":"index-module__statusDot___yMpG3"};
+
+export { bordered, styles as default, dot, filled, statusDot, statusTag };