@zjlab-fe/data-hub-ui 0.32.5 → 0.32.6

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

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

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

@@ -2,36 +2,86 @@ 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';
+import { statusDot, statusTag } from './index.module.scss.js';
 
+const stoppedFilled = { color: '#545b64', backgroundColor: '#edf2fc' };
+const stoppedDot = { color: 'rgba(0, 0, 0, 0.65)', dotColor: '#d9d9d9' };
+const stoppedBordered = {
+    color: 'rgba(0, 0, 0, 0.25)',
+    backgroundColor: '#f5f5f5',
+    borderColor: '#d9d9d9',
+};
+const waitingDotFilled = {
+    color: '#545b64',
+    backgroundColor: 'rgba(217, 217, 217, 0.2)',
+    borderColor: 'rgba(217, 217, 217, 0.6)',
+    dotColor: '#d9d9d9',
+};
 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)' },
+        stopped: stoppedFilled,
+        warning: { color: '#fa8c16', backgroundColor: '#fff7e6' },
+        waiting: stoppedFilled,
     },
     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' },
+        stopped: stoppedDot,
+        warning: { color: '#fa8c16', dotColor: '#fa8c16' },
+        waiting: stoppedDot,
     },
     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' },
+        stopped: stoppedBordered,
+        warning: { color: '#fa8c16', backgroundColor: '#fff7e6', borderColor: '#fa8c16' },
+        waiting: stoppedBordered,
+    },
+    dotFilled: {
+        running: {
+            color: '#545b64',
+            backgroundColor: 'rgba(23, 117, 254, 0.1)',
+            borderColor: 'rgba(23, 117, 254, 0.1)',
+            dotColor: '#1775fe',
+        },
+        failed: {
+            color: '#545b64',
+            backgroundColor: 'rgba(255, 77, 79, 0.1)',
+            borderColor: 'rgba(255, 77, 79, 0.1)',
+            dotColor: '#ff4d4f',
+        },
+        success: {
+            color: '#545b64',
+            backgroundColor: 'rgba(82, 196, 26, 0.1)',
+            borderColor: 'rgba(82, 196, 26, 0.1)',
+            dotColor: '#52c41a',
+        },
+        stopped: waitingDotFilled,
+        warning: {
+            color: '#545b64',
+            backgroundColor: '#fff7e6',
+            borderColor: 'rgba(250, 140, 22, 0.1)',
+            dotColor: '#fa8c16',
+        },
+        waiting: waitingDotFilled,
     },
 };
 function StatusTag(props) {
     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 })] }));
+    const hasStatusDot = variant === 'dot' || variant === 'dotFilled';
+    if (hasStatusDot) {
+        return (jsxs("span", { className: classNames(statusTag, index_module[variant], className), style: variant === 'dotFilled'
+                ? {
+                    backgroundColor: preset.backgroundColor,
+                    borderColor: preset.borderColor,
+                }
+                : undefined, 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,

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

@@ -1,19 +1,25 @@
 var style = document.createElement('style');
-style.textContent = `.index-module__statusTag___yRGEa {
+style.textContent = `@font-face {
+  font-family: "AlibabaPuHuiTi-3-55-RegularL3";
+  src: url("https://haina-datahub.zero2x.org/ossRoute/frontend/resources/fonts/alibaba_puhuiti_3/AlibabaPuHuiTi-3-55-RegularL3.ttf") format("truetype");
+}
+@font-face {
+  font-family: "AlibabaPuHuiTi-3-65-Medium";
+  src: url("https://haina-datahub.zero2x.org/ossRoute/frontend/resources/fonts/alibaba_puhuiti_3/AlibabaPuHuiTi-3-65-Medium.ttf") format("truetype");
+}
+.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;
@@ -22,7 +28,6 @@ style.textContent = `.index-module__statusTag___yRGEa {
   border-width: 1px;
   border-style: solid;
 }
-
 .index-module__dot___rbWrB {
   gap: 8px;
   font-size: 14px;
@@ -30,7 +35,18 @@ style.textContent = `.index-module__statusTag___yRGEa {
   padding: 0;
   background: transparent;
 }
-
+.index-module__dotFilled___UU7nq {
+  box-sizing: border-box;
+  gap: 8px;
+  height: 30px;
+  padding: 4px 16px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-family: "AlibabaPuHuiTi-3-65-Medium", "PingFang SC", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+}
 .index-module__statusDot___yMpG3 {
   flex-shrink: 0;
   width: 6px;
@@ -39,7 +55,7 @@ style.textContent = `.index-module__statusTag___yRGEa {
 }`;
 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"};
+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 dotFilled = "index-module__dotFilled___UU7nq";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","dotFilled":"index-module__dotFilled___UU7nq","statusDot":"index-module__statusDot___yMpG3"};
 
-export { bordered, styles as default, dot, filled, statusDot, statusTag };
+export { bordered, styles as default, dot, dotFilled, filled, statusDot, statusTag };