{formatValue}
;
+ } else if (Array.isArray(formatValue)) {
+ valueComponent = (
+
+ {formatValue.map((item: BasicInfoLink) => (
+
+ );
+ } else if (typeof formatValue === 'object' && formatValue) {
+ valueComponent = (
+
+
+ );
+}
+
+export default BasicInfoItem;
diff --git a/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx b/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx
new file mode 100644
index 00000000..c5a993e4
--- /dev/null
+++ b/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx
@@ -0,0 +1,58 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-11-29 09:27:19
+ * @Description: 用于 BasicInfoItem 的组件
+ */
+
+import { isEmpty } from '@/utils';
+import { Link } from '@umijs/max';
+import { Typography } from 'antd';
+
+type BasicInfoItemValueProps = {
+ /** 值是否显示省略号 */
+ ellipsis?: boolean;
+ /** 自定义类名前缀 */
+ classPrefix: string;
+ /** 值 */
+ value?: string;
+ /** 内部链接 */
+ link?: string;
+ /** 外部链接 */
+ url?: string;
+};
+
+function BasicInfoItemValue({
+ value,
+ link,
+ url,
+ classPrefix,
+ ellipsis = true,
+}: BasicInfoItemValueProps) {
+ const myClassName = `${classPrefix}__item__value`;
+ let component = undefined;
+ if (url && value) {
+ component = (
+
+ {value}
+
+ );
+ } else if (link && value) {
+ component = (
+
+ {value}
+
+ );
+ } else {
+ component = {!isEmpty(value) ? value : '--'};
+ }
+
+ return (
+
+
+ {label}
+
+
+ {valueComponent}
+
+
+ {component}
+
+
+ );
+}
+
+export default BasicInfoItemValue;
diff --git a/react-ui/src/components/BasicInfo/index.less b/react-ui/src/components/BasicInfo/index.less
index e4570868..ced2d2ba 100644
--- a/react-ui/src/components/BasicInfo/index.less
+++ b/react-ui/src/components/BasicInfo/index.less
@@ -17,8 +17,6 @@
color: @text-color-secondary;
font-size: @font-size-content;
line-height: 1.6;
- text-align: justify;
- text-align-last: justify;
&::after {
position: absolute;
@@ -31,10 +29,12 @@
flex: 1;
flex-direction: column;
gap: 5px 0;
+ min-width: 0;
}
&__value {
flex: 1;
+ min-width: 0;
margin-left: 16px;
font-size: @font-size-content;
line-height: 1.6;
@@ -49,5 +49,29 @@
text-underline-offset: 3px;
}
}
+
+ &__node {
+ flex: 1;
+ min-width: 0;
+ margin-left: 16px;
+ font-size: @font-size-content;
+ line-height: 1.6;
+ word-break: break-all;
+ }
+ }
+}
+
+.kf-basic-info--three-columns {
+ width: 100%;
+
+ .kf-basic-info__item {
+ width: calc((100% - 80px) / 3);
+
+ &__label {
+ font-size: @font-size;
+ }
+ &__value {
+ font-size: @font-size;
+ }
}
}
diff --git a/react-ui/src/components/BasicInfo/index.tsx b/react-ui/src/components/BasicInfo/index.tsx
index bd07db34..a918b8ee 100644
--- a/react-ui/src/components/BasicInfo/index.tsx
+++ b/react-ui/src/components/BasicInfo/index.tsx
@@ -1,129 +1,58 @@
-import { Link } from '@umijs/max';
-import { Typography } from 'antd';
import classNames from 'classnames';
+import React from 'react';
+import BasicInfoItem from './BasicInfoItem';
import './index.less';
+import type { BasicInfoData, BasicInfoLink } from './types';
+export type { BasicInfoData, BasicInfoLink };
-export type BasicInfoLink = {
- value: string;
- link?: string;
- url?: string;
-};
-
-export type BasicInfoData = {
- label: string;
- value?: any;
- ellipsis?: boolean;
- format?: (_value?: any) => string | BasicInfoLink | BasicInfoLink[] | undefined;
-};
-
-type BasicInfoProps = {
+export type BasicInfoProps = {
+ /** 基础信息 */
datas: BasicInfoData[];
+ /** 标题宽度 */
+ labelWidth: number;
+ /** 标题是否显示省略号 */
+ labelEllipsis?: boolean;
+ /** 是否一行三列 */
+ threeColumns?: boolean;
+ /** 标签对齐方式 */
+ labelAlign?: 'start' | 'end' | 'justify';
+ /** 自定义类名 */
className?: string;
+ /** 自定义样式 */
style?: React.CSSProperties;
- labelWidth: number;
-};
-
-type BasicInfoItemProps = {
- data: BasicInfoData;
- labelWidth: number;
- classPrefix: string;
-};
-
-type BasicInfoItemValueProps = BasicInfoLink & {
- ellipsis?: boolean;
- classPrefix: string;
};
-export default function BasicInfo({ datas, className, style, labelWidth }: BasicInfoProps) {
+/**
+ * 基础信息展示组件，用于展示基础信息，支持一行两列或一行三列，支持数据格式化
+ */
+export default function BasicInfo({
+ datas,
+ labelWidth,
+ labelEllipsis = true,
+ labelAlign = 'start',
+ threeColumns = false,
+ className,
+ style,
+}: BasicInfoProps) {
return (
-
+ ;
+/**
+ * 表格基础信息展示组件，用于展示基础信息，一行四列，支持数据格式化
+ */
export default function BasicTableInfo({
datas,
+ labelWidth,
+ labelEllipsis,
className,
style,
- labelWidth,
}: BasicTableInfoProps) {
const remainder = datas.length % 4;
const array = [];
@@ -22,7 +23,7 @@ export default function BasicTableInfo({
for (let i = 0; i < 4 - remainder; i++) {
array.push({
label: '',
- value: '',
+ value: false, // 用于区分是否是空数据，不能是空字符串、null、undefined
});
}
}
@@ -30,11 +31,12 @@ export default function BasicTableInfo({
return (
{datas.map((item) => (
);
}
-
-export function BasicInfoItem({ data, labelWidth, classPrefix }: BasicInfoItemProps) {
- const { label, value, format, ellipsis } = data;
- const formatValue = format ? format(value) : value;
- const myClassName = `${classPrefix}__item`;
- let valueComponent = undefined;
- if (Array.isArray(formatValue)) {
- valueComponent = (
-
- {formatValue.map((item: BasicInfoLink) => (
-
- );
- } else if (typeof formatValue === 'object' && formatValue) {
- valueComponent = (
-
-
- );
-}
-
-export function BasicInfoItemValue({
- value,
- link,
- url,
- ellipsis,
- classPrefix,
-}: BasicInfoItemValueProps) {
- const myClassName = `${classPrefix}__item__value`;
- let component = undefined;
- if (url && value) {
- component = (
-
- {value}
-
- );
- } else if (link && value) {
- component = (
-
- {value}
-
- );
- } else {
- component = {value ?? '--'};
- }
-
- return (
-
- {label}
-
- {valueComponent}
-
-
- {component}
-
-
- );
-}
diff --git a/react-ui/src/components/BasicInfo/types.ts b/react-ui/src/components/BasicInfo/types.ts
new file mode 100644
index 00000000..be2ac774
--- /dev/null
+++ b/react-ui/src/components/BasicInfo/types.ts
@@ -0,0 +1,14 @@
+// 基础信息
+export type BasicInfoData = {
+ label: string;
+ value?: any;
+ ellipsis?: boolean;
+ format?: (_value?: any) => string | React.ReactNode | BasicInfoLink | BasicInfoLink[] | undefined;
+};
+
+// 值为链接的类型
+export type BasicInfoLink = {
+ value?: string;
+ link?: string;
+ url?: string;
+};
diff --git a/react-ui/src/components/BasicTableInfo/index.less b/react-ui/src/components/BasicTableInfo/index.less
index 314b05ca..1207d033 100644
--- a/react-ui/src/components/BasicTableInfo/index.less
+++ b/react-ui/src/components/BasicTableInfo/index.less
@@ -4,7 +4,7 @@
flex-wrap: wrap;
align-items: stretch;
width: 100%;
- border: 1px solid @border-color-base;
+ border: 1px solid @border-color;
border-bottom: none;
border-radius: 4px;
@@ -12,7 +12,7 @@
display: flex;
align-items: stretch;
width: 25%;
- border-bottom: 1px solid @border-color-base;
+ border-bottom: 1px solid @border-color;
&__label {
flex: none;
@@ -27,14 +27,13 @@
display: flex;
flex: 1;
flex-direction: column;
- align-items: flex-start;
+ align-items: stretch;
min-width: 0;
}
&__value {
flex: 1;
min-width: 0;
- margin: 0 !important;
padding: 12px 20px 4px;
font-size: @font-size;
word-break: break-all;
@@ -56,5 +55,13 @@
text-underline-offset: 3px;
}
}
+
+ &__node {
+ flex: 1;
+ min-width: 0;
+ padding: 12px 20px;
+ font-size: @font-size;
+ word-break: break-all;
+ }
}
}
diff --git a/react-ui/src/components/BasicTableInfo/index.tsx b/react-ui/src/components/BasicTableInfo/index.tsx
index df167ae2..357a82fb 100644
--- a/react-ui/src/components/BasicTableInfo/index.tsx
+++ b/react-ui/src/components/BasicTableInfo/index.tsx
@@ -1,20 +1,21 @@
import classNames from 'classnames';
-import { BasicInfoItem, type BasicInfoData, type BasicInfoLink } from '../BasicInfo';
+import { BasicInfoProps } from '../BasicInfo';
+import BasicInfoItem from '../BasicInfo/BasicInfoItem';
+import { type BasicInfoData, type BasicInfoLink } from '../BasicInfo/types';
import './index.less';
export type { BasicInfoData, BasicInfoLink };
-type BasicTableInfoProps = {
- datas: BasicInfoData[];
- className?: string;
- style?: React.CSSProperties;
- labelWidth: number;
-};
+export type BasicTableInfoProps = Omit
- {showDatas.map((item) => (
+ {showDatas.map((item, index) => (
+
{
onOk?: (params: CodeConfigData | undefined) => void;
}
+/** 选择代码配置的弹窗，推荐使用函数的方式打开 */
function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
const [dataList, setDataList] = useState([]);
const [total, setTotal] = useState(0);
@@ -32,26 +33,30 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
const [inputText, setInputText] = useState(undefined);
useEffect(() => {
+ // 获取数据请求
+ const getDataList = async () => {
+ const params = {
+ page: pagination.current! - 1,
+ size: pagination.pageSize,
+ code_repo_name: searchText || undefined,
+ };
+ const [res] = await to(getCodeConfigListReq(params));
+ if (res && res.data && res.data.content) {
+ setDataList(res.data.content);
+ setTotal(res.data.totalElements);
+ }
+ };
+
getDataList();
}, [pagination, searchText]);
- // 获取数据请求
- const getDataList = async () => {
- const params = {
- page: pagination.current! - 1,
- size: pagination.pageSize,
- code_repo_name: searchText !== '' ? searchText : undefined,
- };
- const [res] = await to(getCodeConfigListReq(params));
- if (res && res.data && res.data.content) {
- setDataList(res.data.content);
- setTotal(res.data.totalElements);
- }
- };
-
// 搜索
const handleSearch = (value: string) => {
setSearchText(value);
+ setPagination((prev) => ({
+ ...prev,
+ current: 1,
+ }));
};
const handleClick = (item: CodeConfigData) => {
@@ -75,9 +80,9 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
footer={null}
destroyOnClose
>
-
+
+
{dataList?.map((item) => (
+
+
+ );
+}
+
+export default ConfigInfo;
diff --git a/react-ui/src/components/Footer/index.tsx b/react-ui/src/components/Footer/index.tsx
deleted file mode 100644
index 03ac1468..00000000
--- a/react-ui/src/components/Footer/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { GithubOutlined } from '@ant-design/icons';
-import { DefaultFooter } from '@ant-design/pro-components';
-import { useIntl } from '@umijs/max';
-import React from 'react';
-
-const Footer: React.FC = () => {
- const intl = useIntl();
- const defaultMessage = intl.formatMessage({
- id: 'app.copyright.produced',
- defaultMessage: '蚂蚁集团体验技术部出品',
- });
-
- const currentYear = new Date().getFullYear();
-
- return (
- ) => void;
- onerror?: (e?: React.SyntheticEvent) => void;
+ /** 加载完成回调 */
+ onLoad?: (e?: React.SyntheticEvent) => void;
+ /** 加载失败回调 */
+ onError?: (e?: React.SyntheticEvent) => void;
};
-function FullScreenFrame({ url, className, style, onload, onerror }: FullScreenFrameProps) {
+/**
+ * 全屏 iframe，IFramePage 组件的子组件，开发中应该使用 IFramePage
+ */
+function FullScreenFrame({ url, className, style, onLoad, onError }: FullScreenFrameProps) {
return (
) => {
switch (type) {
- case IframePageType.DatasetAnnotation:
+ case IframePageType.DatasetAnnotation: // 数据标注
return getLabelStudioUrl;
- case IframePageType.AppDevelopment:
+ case IframePageType.AppDevelopment: // 应用开发
return () => Promise.resolve({ code: 200, data: 'http://172.20.32.185:30080/' });
- case IframePageType.DevEnv:
+ case IframePageType.DevEnv: // 开发环境
return () =>
Promise.resolve({
code: 200,
data: SessionStorage.getItem(SessionStorage.editorUrlKey) || '',
});
- case IframePageType.GitLink:
+ case IframePageType.GitLink: // git link
return () => Promise.resolve({ code: 200, data: 'http://172.20.32.201:4000' });
}
};
type IframePageProps = {
+ /** 子系统 */
type: IframePageType;
+ /** 自定义样式类名 */
className?: string;
+ /** 自定义样式 */
style?: React.CSSProperties;
};
+/** 系统内嵌 iframe，目前系统有数据标注、应用开发、开发环境、GitLink 四个子系统，使用时可以添加其他子系统 */
function IframePage({ type, className, style }: IframePageProps) {
const [iframeUrl, setIframeUrl] = useState('');
const [loading, setLoading] = useState(false);
+
useEffect(() => {
- requestIframeUrl();
- return () => {
- if (type === IframePageType.DevEnv) {
- SessionStorage.removeItem(SessionStorage.editorUrlKey);
+ const requestIframeUrl = async () => {
+ setLoading(true);
+ const [res] = await to(getRequestAPI(type)());
+ if (res && res.data) {
+ setIframeUrl(res.data);
+ } else {
+ setLoading(false);
}
};
- }, []);
- const requestIframeUrl = async () => {
- setLoading(true);
- const [res] = await to(getRequestAPI(type)());
- if (res && res.data) {
- setIframeUrl(res.data);
- } else {
- setLoading(false);
- }
- };
+
+ requestIframeUrl();
+ }, [type]);
const hideLoading = () => {
setLoading(false);
@@ -66,7 +67,7 @@ function IframePage({ type, className, style }: IframePageProps) {
return (
= (props) => {
- const { icons, title, newIcons, theme } = props;
- const intl = useIntl();
- const [justCopied, setJustCopied] = React.useState(null);
- const copyId = React.useRef(null);
- const onSelect = React.useCallback((type: string, text: string) => {
- const { onSelect } = props;
- if (onSelect) {
- onSelect(type, text);
- }
- setJustCopied(type);
- copyId.current = setTimeout(() => {
- setJustCopied(null);
- }, 2000);
- }, []);
- React.useEffect(
- () => () => {
- if (copyId.current) {
- clearTimeout(copyId.current);
- }
- },
- [],
- );
-
- return (
- = ({ name, justCopied, onSelect, theme }) => {
- const className = classNames({
- copied: justCopied === name,
- [theme]: !!theme,
- });
- return (
- {
- if (onSelect) {
- onSelect(theme, name);
- }
- }}
- >
-
- {React.createElement(allIcons[name], { className: styles.anticon })}
-
- {/*
- {name}
- */}
-
- );
-};
-
-export default CopyableIcon;
diff --git a/react-ui/src/components/IconSelector/IconPicSearcher.tsx b/react-ui/src/components/IconSelector/IconPicSearcher.tsx
deleted file mode 100644
index d80311c6..00000000
--- a/react-ui/src/components/IconSelector/IconPicSearcher.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import KFModal from '@/components/KFModal';
-import * as AntdIcons from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
-import { Popover, Progress, Result, Spin, Tooltip, Upload } from 'antd';
-import React, { useCallback, useEffect, useState } from 'react';
-import './style.less';
-
-const allIcons: { [key: string]: any } = AntdIcons;
-
-const { Dragger } = Upload;
-interface AntdIconClassifier {
- load: () => void;
- predict: (imgEl: HTMLImageElement) => void;
-}
-declare global {
- interface Window {
- antdIconClassifier: AntdIconClassifier;
- }
-}
-
-interface PicSearcherState {
- loading: boolean;
- modalOpen: boolean;
- popoverVisible: boolean;
- icons: iconObject[];
- fileList: any[];
- error: boolean;
- modelLoaded: boolean;
-}
-
-interface iconObject {
- type: string;
- score: number;
-}
-
-const PicSearcher: React.FC = () => {
- const intl = useIntl();
- const { formatMessage } = intl;
- const [state, setState] = useState({
- loading: false,
- modalOpen: false,
- popoverVisible: false,
- icons: [],
- fileList: [],
- error: false,
- modelLoaded: false,
- });
- const predict = (imgEl: HTMLImageElement) => {
- try {
- let icons: any[] = window.antdIconClassifier.predict(imgEl);
- if (gtag && icons.length) {
- gtag('event', 'icon', {
- event_category: 'search-by-image',
- event_label: icons[0].className,
- });
- }
- icons = icons.map((i) => ({ score: i.score, type: i.className.replace(/\s/g, '-') }));
- setState((prev) => ({ ...prev, loading: false, error: false, icons }));
- } catch {
- setState((prev) => ({ ...prev, loading: false, error: true }));
- }
- };
- // eslint-disable-next-line class-methods-use-this
- const toImage = (url: string) =>
- new Promise((resolve) => {
- const img = new Image();
- img.setAttribute('crossOrigin', 'anonymous');
- img.src = url;
- img.onload = () => {
- resolve(img);
- };
- });
-
- const uploadFile = useCallback((file: File) => {
- setState((prev) => ({ ...prev, loading: true }));
- const reader = new FileReader();
- reader.onload = () => {
- toImage(reader.result as string).then(predict);
- setState((prev) => ({
- ...prev,
- fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }],
- }));
- };
- reader.readAsDataURL(file);
- }, []);
-
- const onPaste = useCallback((event: ClipboardEvent) => {
- const items = event.clipboardData && event.clipboardData.items;
- let file = null;
- if (items && items.length) {
- for (let i = 0; i < items.length; i++) {
- if (items[i].type.includes('image')) {
- file = items[i].getAsFile();
- break;
- }
- }
- }
- if (file) {
- uploadFile(file);
- }
- }, []);
- const toggleModal = useCallback(() => {
- setState((prev) => ({
- ...prev,
- modalOpen: !prev.modalOpen,
- popoverVisible: false,
- fileList: [],
- icons: [],
- }));
- if (!localStorage.getItem('disableIconTip')) {
- localStorage.setItem('disableIconTip', 'true');
- }
- }, []);
-
- useEffect(() => {
- const script = document.createElement('script');
- script.onload = async () => {
- await window.antdIconClassifier.load();
- setState((prev) => ({ ...prev, modelLoaded: true }));
- document.addEventListener('paste', onPaste);
- };
- script.src = 'https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js';
- document.head.appendChild(script);
- setState((prev) => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') }));
- return () => {
- document.removeEventListener('paste', onPaste);
- };
- }, []);
-
- return (
- = (props) => {
- // const intl = useIntl();
- // const { messages } = intl;
- const { onSelect } = props;
- const [displayState, setDisplayState] = React.useState({
- theme: ThemeType.Outlined,
- searchKey: '',
- });
-
- const newIconNames: string[] = [];
-
- const handleSearchIcon = React.useCallback(
- debounce((searchKey: string) => {
- setDisplayState((prevState) => ({ ...prevState, searchKey }));
- }),
- [],
- );
-
- const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
- setDisplayState((prevState) => ({ ...prevState, theme: e.target.value as ThemeType }));
- }, []);
-
- const renderCategories = React.useMemo(() => {
- const { searchKey = '', theme } = displayState;
-
- const categoriesResult = Object.keys(categories)
- .map((key: CategoriesKeys) => {
- let iconList = categories[key];
- if (searchKey) {
- const matchKey = searchKey
- // eslint-disable-next-line prefer-regex-literals
- .replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
- .replace(/(Filled|Outlined|TwoTone)$/, '')
- .toLowerCase();
- iconList = iconList.filter((iconName: string) =>
- iconName.toLowerCase().includes(matchKey),
- );
- }
-
- // CopyrightCircle is same as Copyright, don't show it
- iconList = iconList.filter((icon: string) => icon !== 'CopyrightCircle');
-
- return {
- category: key,
- icons: iconList
- .map((iconName: string) => iconName + theme)
- .filter((iconName: string) => allIcons[iconName]),
- };
- })
- .filter(({ icons }) => !!icons.length)
- .map(({ category, icons }) => (
- {
- if (onSelect) {
- onSelect(name, allIcons[name]);
- }
- }}
- />
- ));
- return categoriesResult.length === 0 ?
+ })
+ {title}
+
+ );
+}
+
+export default InfoGroupTitle;
diff --git a/react-ui/src/components/InfoGroup/index.less b/react-ui/src/components/InfoGroup/index.less
new file mode 100644
index 00000000..94c56187
--- /dev/null
+++ b/react-ui/src/components/InfoGroup/index.less
@@ -0,0 +1,11 @@
+.kf-info-group {
+ width: 100%;
+
+ &__content {
+ padding: 20px @content-padding;
+ background-color: white;
+ border: 1px solid @border-color;
+ border-top: none;
+ border-radius: 0 0 4px 4px;
+ }
+}
diff --git a/react-ui/src/components/InfoGroup/index.tsx b/react-ui/src/components/InfoGroup/index.tsx
new file mode 100644
index 00000000..0f2a3b42
--- /dev/null
+++ b/react-ui/src/components/InfoGroup/index.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import InfoGroupTitle from './InfoGroupTitle';
+import './index.less';
+
+type InfoGroupProps = {
+ /** 标题 */
+ title: string;
+ /** 高度, 如果要纵向滚动，需要设置高度 */
+ height?: string | number;
+ /** 宽度, 如果要横向滚动，需要设置宽度 */
+ width?: string | number;
+ /** 自定义类名 */
+ className?: string;
+ /** 自定义样式 */
+ style?: React.CSSProperties;
+ /** 子元素 */
+ children?: React.ReactNode;
+};
+
+/**
+ * 信息组，用于展示基本信息，支持横向、纵向滚动。自动机器学习、超参数寻优都是使用这个组件
+ */
+function InfoGroup({ title, height, width, className, style, children }: InfoGroupProps) {
+ const contentStyle: React.CSSProperties = {};
+ if (height) {
+ contentStyle.height = height;
+ contentStyle.overflowY = 'auto';
+ }
+ if (width) {
+ contentStyle.width = width;
+ contentStyle.overflowX = 'auto';
+ }
+ return (
+
-
- );
-}
-
-export default KFConfirmModal;
diff --git a/react-ui/src/components/KFEmpty/index.less b/react-ui/src/components/KFEmpty/index.less
index 39f70281..3e5a85b4 100644
--- a/react-ui/src/components/KFEmpty/index.less
+++ b/react-ui/src/components/KFEmpty/index.less
@@ -33,7 +33,7 @@
margin-top: 20px;
margin-bottom: 30px;
- &__back-btn {
+ &__button {
height: 32px;
}
}
diff --git a/react-ui/src/components/KFEmpty/index.tsx b/react-ui/src/components/KFEmpty/index.tsx
index e59b6f6b..b2a680f6 100644
--- a/react-ui/src/components/KFEmpty/index.tsx
+++ b/react-ui/src/components/KFEmpty/index.tsx
@@ -9,15 +9,24 @@ export enum EmptyType {
}
type EmptyProps = {
- className?: string;
- style?: React.CSSProperties;
+ /** 类型 */
type: EmptyType;
+ /** 标题 */
title?: string;
+ /** 内容 */
content?: string;
+ /** 是否有页脚，如果有默认是一个按钮 */
hasFooter?: boolean;
- footer?: () => React.ReactNode;
+ /** 按钮标题，默认是"刷新" */
buttonTitle?: string;
- onRefresh?: () => void;
+ /** 按钮点击回调 */
+ onButtonClick?: () => void;
+ /** 自定义页脚内容 */
+ footer?: () => React.ReactNode;
+ /** 自定义类名 */
+ className?: string;
+ /** 自定义样式 */
+ style?: React.CSSProperties;
};
function getEmptyImage(type: EmptyType) {
@@ -31,6 +40,7 @@ function getEmptyImage(type: EmptyType) {
}
}
+/** 空状态 */
function KFEmpty({
className,
style,
@@ -40,7 +50,7 @@ function KFEmpty({
hasFooter = true,
footer,
buttonTitle = '刷新',
- onRefresh,
+ onButtonClick,
}: EmptyProps) {
const image = getEmptyImage(type);
@@ -54,7 +64,7 @@ function KFEmpty({
{footer ? (
footer()
) : (
-
+
+
+
+ {showValue}
+
+
+ );
+}
+
+export default FormInfo;
diff --git a/react-ui/src/components/FullScreenFrame/index.tsx b/react-ui/src/components/FullScreenFrame/index.tsx
index a5c3413a..800a727e 100644
--- a/react-ui/src/components/FullScreenFrame/index.tsx
+++ b/react-ui/src/components/FullScreenFrame/index.tsx
@@ -2,22 +2,30 @@ import classNames from 'classnames';
import './index.less';
type FullScreenFrameProps = {
+ /** URL */
url: string;
+ /** 自定义类名 */
className?: string;
+ /** 自定义样式 */
style?: React.CSSProperties;
- onload?: (e?: React.SyntheticEvent
{url && (
)}
diff --git a/react-ui/src/components/IFramePage/index.tsx b/react-ui/src/components/IFramePage/index.tsx
index fab32ab2..aa292d47 100644
--- a/react-ui/src/components/IFramePage/index.tsx
+++ b/react-ui/src/components/IFramePage/index.tsx
@@ -12,52 +12,53 @@ export enum IframePageType {
DatasetAnnotation = 'DatasetAnnotation', // 数据标注
AppDevelopment = 'AppDevelopment', // 应用开发
DevEnv = 'DevEnv', // 开发环境
- GitLink = 'GitLink',
+ GitLink = 'GitLink', // git link
}
const getRequestAPI = (type: IframePageType): (() => Promise
{loading && createPortal(
);
}
diff --git a/react-ui/src/components/IconSelector/Category.tsx b/react-ui/src/components/IconSelector/Category.tsx
deleted file mode 100644
index 5f683276..00000000
--- a/react-ui/src/components/IconSelector/Category.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useIntl } from '@umijs/max';
-import * as React from 'react';
-import CopyableIcon from './CopyableIcon';
-import type { CategoriesKeys } from './fields';
-import type { ThemeType } from './index';
-import styles from './style.less';
-
-interface CategoryProps {
- title: CategoriesKeys;
- icons: string[];
- theme: ThemeType;
- newIcons: string[];
- onSelect: (type: string, name: string) => any;
-}
-
-const Category: React.FC
-
- );
-};
-
-export default Category;
diff --git a/react-ui/src/components/IconSelector/CopyableIcon.tsx b/react-ui/src/components/IconSelector/CopyableIcon.tsx
deleted file mode 100644
index 3440e548..00000000
--- a/react-ui/src/components/IconSelector/CopyableIcon.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as AntdIcons from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import classNames from 'classnames';
-import * as React from 'react';
-import type { ThemeType } from './index';
-import styles from './style.less';
-
-const allIcons: {
- [key: string]: any;
-} = AntdIcons;
-
-export interface CopyableIconProps {
- name: string;
- isNew: boolean;
- theme: ThemeType;
- justCopied: string | null;
- onSelect: (type: string, text: string) => any;
-}
-
-const CopyableIcon: React.FC- {intl.formatMessage({ - id: `app.docs.components.icon.category.${title}`, - defaultMessage: '信息', - })} -
--
- {icons.map((name) => (
-
-
-
-
- {state.modelLoaded || (
-
-
-
- )}
- {state.modelLoaded && (
- uploadFile(o.file as File)}
- fileList={state.fileList}
- showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
- >
-
- )}
-
-
-
-
- );
-};
-
-export default PicSearcher;
diff --git a/react-ui/src/components/IconSelector/fields.ts b/react-ui/src/components/IconSelector/fields.ts
deleted file mode 100644
index 5de572cb..00000000
--- a/react-ui/src/components/IconSelector/fields.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-import * as AntdIcons from '@ant-design/icons/lib/icons';
-
-const all = Object.keys(AntdIcons)
- .map((n) => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
- .filter((n, i, arr) => arr.indexOf(n) === i);
-
-const direction = [
- 'StepBackward',
- 'StepForward',
- 'FastBackward',
- 'FastForward',
- 'Shrink',
- 'ArrowsAlt',
- 'Down',
- 'Up',
- 'Left',
- 'Right',
- 'CaretUp',
- 'CaretDown',
- 'CaretLeft',
- 'CaretRight',
- 'UpCircle',
- 'DownCircle',
- 'LeftCircle',
- 'RightCircle',
- 'DoubleRight',
- 'DoubleLeft',
- 'VerticalLeft',
- 'VerticalRight',
- 'VerticalAlignTop',
- 'VerticalAlignMiddle',
- 'VerticalAlignBottom',
- 'Forward',
- 'Backward',
- 'Rollback',
- 'Enter',
- 'Retweet',
- 'Swap',
- 'SwapLeft',
- 'SwapRight',
- 'ArrowUp',
- 'ArrowDown',
- 'ArrowLeft',
- 'ArrowRight',
- 'PlayCircle',
- 'UpSquare',
- 'DownSquare',
- 'LeftSquare',
- 'RightSquare',
- 'Login',
- 'Logout',
- 'MenuFold',
- 'MenuUnfold',
- 'BorderBottom',
- 'BorderHorizontal',
- 'BorderInner',
- 'BorderOuter',
- 'BorderLeft',
- 'BorderRight',
- 'BorderTop',
- 'BorderVerticle',
- 'PicCenter',
- 'PicLeft',
- 'PicRight',
- 'RadiusBottomleft',
- 'RadiusBottomright',
- 'RadiusUpleft',
- 'RadiusUpright',
- 'Fullscreen',
- 'FullscreenExit',
-];
-
-const suggestion = [
- 'Question',
- 'QuestionCircle',
- 'Plus',
- 'PlusCircle',
- 'Pause',
- 'PauseCircle',
- 'Minus',
- 'MinusCircle',
- 'PlusSquare',
- 'MinusSquare',
- 'Info',
- 'InfoCircle',
- 'Exclamation',
- 'ExclamationCircle',
- 'Close',
- 'CloseCircle',
- 'CloseSquare',
- 'Check',
- 'CheckCircle',
- 'CheckSquare',
- 'ClockCircle',
- 'Warning',
- 'IssuesClose',
- 'Stop',
-];
-
-const editor = [
- 'Edit',
- 'Form',
- 'Copy',
- 'Scissor',
- 'Delete',
- 'Snippets',
- 'Diff',
- 'Highlight',
- 'AlignCenter',
- 'AlignLeft',
- 'AlignRight',
- 'BgColors',
- 'Bold',
- 'Italic',
- 'Underline',
- 'Strikethrough',
- 'Redo',
- 'Undo',
- 'ZoomIn',
- 'ZoomOut',
- 'FontColors',
- 'FontSize',
- 'LineHeight',
- 'Dash',
- 'SmallDash',
- 'SortAscending',
- 'SortDescending',
- 'Drag',
- 'OrderedList',
- 'UnorderedList',
- 'RadiusSetting',
- 'ColumnWidth',
- 'ColumnHeight',
-];
-
-const data = [
- 'AreaChart',
- 'PieChart',
- 'BarChart',
- 'DotChart',
- 'LineChart',
- 'RadarChart',
- 'HeatMap',
- 'Fall',
- 'Rise',
- 'Stock',
- 'BoxPlot',
- 'Fund',
- 'Sliders',
-];
-
-const logo = [
- 'Android',
- 'Apple',
- 'Windows',
- 'Ie',
- 'Chrome',
- 'Github',
- 'Aliwangwang',
- 'Dingding',
- 'WeiboSquare',
- 'WeiboCircle',
- 'TaobaoCircle',
- 'Html5',
- 'Weibo',
- 'Twitter',
- 'Wechat',
- 'Youtube',
- 'AlipayCircle',
- 'Taobao',
- 'Skype',
- 'Qq',
- 'MediumWorkmark',
- 'Gitlab',
- 'Medium',
- 'Linkedin',
- 'GooglePlus',
- 'Dropbox',
- 'Facebook',
- 'Codepen',
- 'CodeSandbox',
- 'CodeSandboxCircle',
- 'Amazon',
- 'Google',
- 'CodepenCircle',
- 'Alipay',
- 'AntDesign',
- 'AntCloud',
- 'Aliyun',
- 'Zhihu',
- 'Slack',
- 'SlackSquare',
- 'Behance',
- 'BehanceSquare',
- 'Dribbble',
- 'DribbbleSquare',
- 'Instagram',
- 'Yuque',
- 'Alibaba',
- 'Yahoo',
- 'Reddit',
- 'Sketch',
- 'WhatsApp',
- 'Dingtalk',
-];
-
-const datum = [...direction, ...suggestion, ...editor, ...data, ...logo];
-
-const other = all.filter((n) => !datum.includes(n));
-
-export const categories = {
- direction,
- suggestion,
- editor,
- data,
- logo,
- other,
-};
-
-export default categories;
-
-export type Categories = typeof categories;
-export type CategoriesKeys = keyof Categories;
diff --git a/react-ui/src/components/IconSelector/index.tsx b/react-ui/src/components/IconSelector/index.tsx
deleted file mode 100644
index 0d50db68..00000000
--- a/react-ui/src/components/IconSelector/index.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import Icon, * as AntdIcons from '@ant-design/icons';
-import { Empty, Input, Radio } from 'antd';
-import type { RadioChangeEvent } from 'antd/es/radio/interface';
-import debounce from 'lodash/debounce';
-import * as React from 'react';
-import Category from './Category';
-import IconPicSearcher from './IconPicSearcher';
-import type { CategoriesKeys } from './fields';
-import { categories } from './fields';
-import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
-// import { useIntl } from '@umijs/max';
-
-export enum ThemeType {
- Filled = 'Filled',
- Outlined = 'Outlined',
- TwoTone = 'TwoTone',
-}
-
-const allIcons: { [key: string]: any } = AntdIcons;
-
-interface IconSelectorProps {
- //intl: any;
- onSelect: any;
-}
-
-interface IconSelectorState {
- theme: ThemeType;
- searchKey: string;
-}
-
-const IconSelector: React.FC
-
- {formatMessage({ id: 'app.docs.components.icon.pic-searcher.upload-text' })} -
-- {formatMessage({ id: 'app.docs.components.icon.pic-searcher.upload-hint' })} -
-
- {state.icons.length > 0 && (
-
- {state.icons.length > 0 && (
-
-
- {state.error && (
-
-
- {formatMessage({ id: 'app.docs.components.icon.pic-searcher.result-tip' })}
-
- )}
- | - {formatMessage({ id: 'app.docs.components.icon.pic-searcher.th-icon' })} - | -- {formatMessage({ id: 'app.docs.components.icon.pic-searcher.th-score' })} - | -
|---|---|
|
- |
- - - | -
-
-
-
-
-
- */}
-
- handleSearchIcon(e.currentTarget.value)}
- size="large"
- autoFocus
- suffix={
- {renderCategories}
-
- );
-};
-
-export default IconSelector;
diff --git a/react-ui/src/components/IconSelector/style.less b/react-ui/src/components/IconSelector/style.less
deleted file mode 100644
index 0a4353d6..00000000
--- a/react-ui/src/components/IconSelector/style.less
+++ /dev/null
@@ -1,137 +0,0 @@
-.iconPicSearcher {
- display: inline-block;
- margin: 0 8px;
-
- .icon-pic-btn {
- color: @text-color-secondary;
- cursor: pointer;
- transition: all 0.3s;
-
- &:hover {
- color: @input-icon-hover-color;
- }
- }
-}
-
-.icon-pic-preview {
- width: 30px;
- height: 30px;
- margin-top: 10px;
- padding: 8px;
- text-align: center;
- border: 1px solid @border-color-base;
- border-radius: 4px;
-
- > img {
- max-width: 50px;
- max-height: 50px;
- }
-}
-
-.icon-pic-search-result {
- min-height: 50px;
- padding: 0 10px;
-
- > .result-tip {
- padding: 10px 0;
- color: @text-color-secondary;
- }
-
- > table {
- width: 100%;
-
- .col-icon {
- width: 80px;
- padding: 10px 0;
-
- > .anticon {
- font-size: 30px;
-
- :hover {
- color: @link-hover-color;
- }
- }
- }
- }
-}
-
-ul.anticonsList {
- margin: 2px 0;
- overflow: hidden;
- direction: ltr;
- list-style: none;
-
- li {
- position: relative;
- float: left;
- width: 48px;
- height: 48px;
- margin: 3px 0;
- padding: 2px 0 0;
- overflow: hidden;
- color: #555;
- text-align: center;
- list-style: none;
- background-color: inherit;
- border-radius: 4px;
- cursor: pointer;
- transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-
- .rtl & {
- margin: 3px 0;
- padding: 2px 0 0;
- }
-
- .anticon {
- margin: 4px 0 2px;
- font-size: 24px;
- transition: transform 0.3s ease-in-out;
- will-change: transform;
- }
-
- .anticonClass {
- display: block;
- font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
- white-space: nowrap;
- text-align: center;
- transform: scale(0.83);
-
- .ant-badge {
- transition: color 0.3s ease-in-out;
- }
- }
-
- &:hover {
- color: #fff;
- background-color: @primary-color;
-
- .anticon {
- transform: scale(1.4);
- }
-
- .ant-badge {
- color: #fff;
- }
- }
-
- &.TwoTone:hover {
- background-color: #8ecafe;
- }
-
- &.copied:hover {
- color: rgba(255, 255, 255, 0.2);
- }
-
- &.copied::after {
- top: -2px;
- opacity: 1;
- }
- }
-}
-
-.copied-code {
- padding: 2px 4px;
- font-size: 12px;
- background: #f5f5f5;
- border-radius: 2px;
-}
diff --git a/react-ui/src/components/IconSelector/themeIcons.tsx b/react-ui/src/components/IconSelector/themeIcons.tsx
deleted file mode 100644
index 1d9762cd..00000000
--- a/react-ui/src/components/IconSelector/themeIcons.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-export const FilledIcon: React.FC = (props) => {
- const path =
- 'M864 64H160C107 64 64 107 64 160v' +
- '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
- '0c0-53-43-96-96-96z';
- return (
-
- );
-};
-
-export const OutlinedIcon: React.FC = (props) => {
- const path =
- 'M864 64H160C107 64 64 107 64 160v7' +
- '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
- '0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' +
- '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
- ' 12 12v680c0 6.6-5.4 12-12 12z';
- return (
-
- );
-};
-
-export const TwoToneIcon: React.FC = (props) => {
- const path =
- 'M16 512c0 273.932 222.066 496 496 49' +
- '6s496-222.068 496-496S785.932 16 512 16 16 238.' +
- '066 16 512z m496 368V144c203.41 0 368 164.622 3' +
- '68 368 0 203.41-164.622 368-368 368z';
- return (
-
- );
-};
diff --git a/react-ui/src/components/InfoGroup/InfoGroupTitle.less b/react-ui/src/components/InfoGroup/InfoGroupTitle.less
new file mode 100644
index 00000000..b8aff97c
--- /dev/null
+++ b/react-ui/src/components/InfoGroup/InfoGroupTitle.less
@@ -0,0 +1,40 @@
+.kf-info-group-title {
+ width: 100%;
+ height: 56px;
+ padding: 0 @content-padding;
+ background: linear-gradient(
+ 179.03deg,
+ rgba(199, 223, 255, 0.12) 0%,
+ rgba(22, 100, 255, 0.04) 100%
+ );
+ border: 1px solid #e8effb;
+ border-radius: 4px 4px 0 0;
+
+ &__image {
+ width: 16px;
+ height: 16px;
+ margin-right: 10px;
+ }
+
+ &__text {
+ position: relative;
+ color: @text-color;
+ font-weight: 500;
+ font-size: @font-size-title;
+ .singleLine();
+
+ &::after {
+ position: absolute;
+ bottom: 6px;
+ left: 0;
+ width: 100%;
+ height: 6px;
+ background: linear-gradient(
+ to right,
+ .addAlpha(@primary-color, 0.4) [] 0,
+ .addAlpha(@primary-color, 0) [] 100%
+ );
+ content: '';
+ }
+ }
+}
diff --git a/react-ui/src/components/InfoGroup/InfoGroupTitle.tsx b/react-ui/src/components/InfoGroup/InfoGroupTitle.tsx
new file mode 100644
index 00000000..bde57b3f
--- /dev/null
+++ b/react-ui/src/components/InfoGroup/InfoGroupTitle.tsx
@@ -0,0 +1,31 @@
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import './InfoGroupTitle.less';
+
+type InfoGroupTitleProps = {
+ /** 标题 */
+ title: string;
+ /** 自定义类名 */
+ className?: string;
+ /** 自定义样式 */
+ style?: React.CSSProperties;
+};
+
+/**
+ * 信息组标题
+ */
+function InfoGroupTitle({ title, style, className }: InfoGroupTitleProps) {
+ return (
+
+ {title}
+
+
+ );
+}
+
+export default InfoGroup;
diff --git a/react-ui/src/components/KFBreadcrumb/index.tsx b/react-ui/src/components/KFBreadcrumb/index.tsx
index c6322025..dc87efc2 100644
--- a/react-ui/src/components/KFBreadcrumb/index.tsx
+++ b/react-ui/src/components/KFBreadcrumb/index.tsx
@@ -1,3 +1,9 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-09-02 08:42:57
+ * @Description: 自定义面包屑，暂时不用，使用了 ProBreadcrumb
+ */
+
import { Breadcrumb, type BreadcrumbProps } from 'antd';
import { Link, matchPath, useLocation } from 'umi';
// import routes from '../../../config/config'; // 导入你的路由配置
diff --git a/react-ui/src/components/KFConfirmModal/index.less b/react-ui/src/components/KFConfirmModal/index.less
deleted file mode 100644
index 5c82b5ec..00000000
--- a/react-ui/src/components/KFConfirmModal/index.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.kf-confirm-modal {
- &__content {
- width: 100%;
- font-size: 18px;
- text-align: center;
- }
-}
diff --git a/react-ui/src/components/KFConfirmModal/index.tsx b/react-ui/src/components/KFConfirmModal/index.tsx
deleted file mode 100644
index d494ad2a..00000000
--- a/react-ui/src/components/KFConfirmModal/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * @Author: 赵伟
- * @Date: 2024-10-10 10:54:25
- * @Description: 自定义 Confirm Modal
- */
-
-import classNames from 'classnames';
-import KFModal, { KFModalProps } from '../KFModal';
-import './index.less';
-
-export interface KFConfirmModalProps extends KFModalProps {
- content: string;
-}
-function KFConfirmModal({
- title,
- image,
- className = '',
- centered,
- maskClosable,
- content,
- ...rest
-}: KFConfirmModalProps) {
- return (
-
+ {children}
+
+ {content}
-