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

package/README.md

@@ -12,7 +12,7 @@ https://haina-datahub.zero2x.org/data-hub-ui/doc
 
 ### 新建组件
 
-在`src/components`目录下新建组件目录，参考组件`input-tag`的代码目录
+使用`npm run init`创建组件，输入组件名后，脚本会在`src/components`目录下新建组件目录，参考组件`input-tag`的代码目录
 
 ```
 component-folder

package/dist/types/components/limit-credit-modal/demo/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Demo: React.FC;
+export default Demo;

package/dist/types/components/limit-credit-modal/index.d.ts

@@ -0,0 +1,9 @@
+export interface LimitCreditModalProps {
+    open?: boolean;
+    onCancel?: () => void;
+}
+declare const LimitCreditModal: {
+    (props: LimitCreditModalProps): import("react/jsx-runtime").JSX.Element;
+    open(): void;
+};
+export default LimitCreditModal;

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/dist/types/index.d.ts

@@ -41,6 +41,8 @@ export type { CorpusCardProps, ProcessTemplateListItem, ProcessTemplateLabel, La
 export { default as SDKModal } from './components/SDK-modal';
 export { default as TagView } from './components/tag-view';
 export { default as TagGroupFilter } from './components/tag-group-filter';
+export { default as LimitCreditModal } from './components/limit-credit-modal';
+export type { LimitCreditModalProps } from './components/limit-credit-modal';
 export { default as DatasetBatchAction } from './components/dataset-batch-action';
 export type { IConfirmParam, IFieldOption, IDatasetBatchActionParams, } from './components/dataset-batch-action';
 export { EDatasetBatchType } from './components/dataset-batch-action';

package/es/components/limit-credit-modal/index.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Modal, Space, Button } from 'antd';
+import { isPublicNetwork } from '@zjlab-fe/util';
+import { createRoot } from 'react-dom/client';
+
+const LimitCreditModal = (props) => {
+    const isPublic = isPublicNetwork();
+    const handleOk = () => {
+        if (isPublic) {
+            window.open('https://alidocs.dingtalk.com/notable/share/form/v018oLl952Q1vXkzlap_dv19yqvsgs3oebp3pcjys_1qX0QQ0?source=link');
+        }
+        else {
+            window.open('https://alidocs.dingtalk.com/notable/share/form/v011X3lE5jKezRB4lJb_dv19yqvsgs3oebp3pcjys_1qX0QQ0?source=link');
+        }
+    };
+    return (jsx(Modal, Object.assign({}, props, { 
+        // classNames={{
+        //   content: 'modal-content-layout',
+        //   header: 'modal-title-font modal-title-layout',
+        //   body: 'modal-content-font modal-body-layout',
+        //   footer: 'modal-footer-layout',
+        // }}
+        title: jsx("div", { style: { textAlign: 'center', width: '100%' }, children: "\u63D0\u793A" }), footer: jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: jsxs(Space, { children: [jsx(Button, { onClick: props.onCancel, children: "\u53D6\u6D88" }), jsx(Button, { type: "primary", onClick: handleOk, children: "\u7533\u8BF7" })] }) }), children: jsx("div", { className: "modal-content-font", style: { textAlign: 'center' }, children: "\u989D\u5EA6\u5DF2\u7528\u5C3D\uFF0C\u8BF7\u70B9\u51FB\u7533\u8BF7\u3002" }) })));
+};
+LimitCreditModal.open = () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const root = createRoot(div);
+    const destroy = () => {
+        root.unmount();
+        div.remove();
+    };
+    root.render(jsx(LimitCreditModal, { open: true, onCancel: destroy }));
+};
+
+export { LimitCreditModal as default };

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 };

package/es/components/test-component/index.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import useStyle from './index.scss.js';
+
+useStyle();
+const TestComponent = (props) => {
+    return (jsxs("div", { className: "data-hub-ui-test-component-container", children: ["TestComponent Component", jsx("div", { children: "This is template, please delete it after you create your component." })] }));
+};
+
+export { TestComponent as default };

package/es/components/test-component/index.scss.js

@@ -0,0 +1,7 @@
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = ``;
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/index.js

@@ -36,5 +36,6 @@ export { default as ModelCard } from './components/model-card/index.js';
 export { default as SDKModal } from './components/SDK-modal/index.js';
 export { default as TagView } from './components/tag-view/index.js';
 export { default as TagGroupFilter } from './components/tag-group-filter/index.js';
+export { default as LimitCreditModal } from './components/limit-credit-modal/index.js';
 export { default as DatasetBatchAction, EDatasetBatchType } from './components/dataset-batch-action/index.js';
 export { default as UploadDrawerUploadStoreProvider } from './components/uploadDrawer/UploadStoreProvider.js';