diff --git a/react-ui/src/components/KFTabs/index.less b/react-ui/src/components/KFTabs/index.less index e69de29b..f7c8581c 100644 --- a/react-ui/src/components/KFTabs/index.less +++ b/react-ui/src/components/KFTabs/index.less @@ -0,0 +1,2 @@ +.tabs-container { +} diff --git a/react-ui/src/components/KFTabs/index.tsx b/react-ui/src/components/KFTabs/index.tsx index a9a9f2f1..2c14070d 100644 --- a/react-ui/src/components/KFTabs/index.tsx +++ b/react-ui/src/components/KFTabs/index.tsx @@ -1,30 +1,14 @@ -/* - * @Author: 赵伟 - * @Date: 2024-04-16 14:55:40 - * @Description: - */ +// import { Tabs } from 'antd'; // import { useEffect, useState } from 'react'; // import styles from './index.less'; -// import { Tabs } from "antd" // function KFTabs() { // const [iframeUrl, setIframeUrl] = useState(''); -// useEffect(() => { - -// }, []); +// useEffect(() => {}, []); // return ( -//
-//
-// -// -// -// -// -// -// -// -//
+//
+// //
// ); // } diff --git a/react-ui/src/enums/index.ts b/react-ui/src/enums/index.ts new file mode 100644 index 00000000..c610ecf3 --- /dev/null +++ b/react-ui/src/enums/index.ts @@ -0,0 +1,5 @@ +// 公开还是私有 TabKey +export enum CommonTabKeys { + Private = 'Private', // 私有 + Public = 'Public', // 公开 +} diff --git a/react-ui/src/enums/status.d.ts b/react-ui/src/enums/status.d.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/react-ui/src/global.less b/react-ui/src/global.less index a50f3ec4..afe519a0 100644 --- a/react-ui/src/global.less +++ b/react-ui/src/global.less @@ -171,6 +171,18 @@ border-radius: 0; border: 1px solid #e6e6e6; border-radius: 6px; } + +.ant-tabs { + .ant-tabs-nav::before, + div > .ant-tabs-nav::before { + border: none; + } + + .ant-tabs-nav { + margin-bottom: 0; + } +} + // ::-webkit-scrollbar-button { // background: #97a1bd; // } diff --git a/react-ui/src/hooks/index.ts b/react-ui/src/hooks/index.ts index 7ebf7b1c..47510edf 100644 --- a/react-ui/src/hooks/index.ts +++ b/react-ui/src/hooks/index.ts @@ -1,3 +1,9 @@ +/* + * @Author: 赵伟 + * @Date: 2024-04-15 10:01:29 + * @Description: + */ +import { debounce } from 'lodash'; import { useCallback, useEffect, useRef, useState } from 'react'; /** @@ -61,3 +67,35 @@ export function useCallbackState(initialValue: T) { }; return [state, setState]; } + +/** + * A hook that tracks the size of a DOM element. + * + * @param initialWidth - The initial width of the element. + * @param initialHeight - The initial height of the element. + * @return - A tuple containing the ref to the DOM element, the current width, and the current height. + */ +export function useDomSize(initialWidth: number, initialHeight: number) { + const domRef = useRef(null); + const [width, setWidth] = useState(initialWidth); + const [height, setHeight] = useState(initialHeight); + + useEffect(() => { + const setDomHeight = () => { + if (domRef.current) { + setHeight(domRef.current.offsetHeight); + setWidth(domRef.current.offsetWidth); + } + }; + const debounceFunc = debounce(setDomHeight, 500); + + setDomHeight(); + window.addEventListener('resize', debounceFunc); + + return () => { + window.removeEventListener('resize', debounceFunc); + }; + }, [domRef]); + + return [domRef, { width, height }] as const; +} diff --git a/react-ui/src/icons/private-mirror-tab.svg b/react-ui/src/icons/private-mirror-tab.svg new file mode 100644 index 00000000..0898ad86 --- /dev/null +++ b/react-ui/src/icons/private-mirror-tab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react-ui/src/icons/public-mirror-tab.svg b/react-ui/src/icons/public-mirror-tab.svg new file mode 100644 index 00000000..c9246fe6 --- /dev/null +++ b/react-ui/src/icons/public-mirror-tab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react-ui/src/icons/refresh-btn.svg b/react-ui/src/icons/refresh-btn.svg new file mode 100644 index 00000000..4c6215f3 --- /dev/null +++ b/react-ui/src/icons/refresh-btn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react-ui/src/icons/view-detail.svg b/react-ui/src/icons/view-detail.svg new file mode 100644 index 00000000..ff8a2db8 --- /dev/null +++ b/react-ui/src/icons/view-detail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react-ui/src/icons/刷新.svg b/react-ui/src/icons/刷新.svg new file mode 100644 index 00000000..4c6215f3 --- /dev/null +++ b/react-ui/src/icons/刷新.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react-ui/src/pages/Mirror/list.less b/react-ui/src/pages/Mirror/list.less index ee9fbbd6..1ecb6fc8 100644 --- a/react-ui/src/pages/Mirror/list.less +++ b/react-ui/src/pages/Mirror/list.less @@ -2,12 +2,13 @@ height: 100%; background-color: #f9fafb; &__tabs-container { - height: 59px; + height: 49px; + padding-left: 27px; background-image: url('../../assets/img/mirror-tabs-bg.png'); } &__content { - height: calc(100% - 69px); + height: calc(100% - 59px); margin-top: 10px; padding: 20px 30px 0; background-color: white; diff --git a/react-ui/src/pages/Mirror/list.tsx b/react-ui/src/pages/Mirror/list.tsx index 972b0595..8269f17b 100644 --- a/react-ui/src/pages/Mirror/list.tsx +++ b/react-ui/src/pages/Mirror/list.tsx @@ -3,29 +3,33 @@ * @Date: 2024-04-16 13:58:08 * @Description: 镜像列表 */ +import { CommonTabKeys } from '@/enums'; +import { useDomSize } from '@/hooks'; import { getMirrorListReq } from '@/services/mirror'; import { to } from '@/utils/promise'; -import { Button, Input, Table } from 'antd'; +import { Icon } from '@umijs/max'; +import { Button, Input, Table, Tabs } from 'antd'; import dayjs from 'dayjs'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import styles from './list.less'; -const tabItems = [ +const mirrorTabItems = [ { - key: 'Public', + key: CommonTabKeys.Public, label: '公共镜像', + icon: , }, { - key: 'Private', + key: CommonTabKeys.Private, label: '个人镜像', + icon: , }, ]; function MirrorList() { const [activeTab, setActiveTab] = useState('Public'); const [tableData, setTableData] = useState([]); - const contentRef = useRef(null); - const [tableHeight, setTableHeight] = useState(0); + const [contentRef, { height: tableHeight }] = useDomSize(0, 0); const [pagination, setPagination] = useState({ showSizeChanger: true, showQuickJumper: true, @@ -35,21 +39,7 @@ function MirrorList() { }); useEffect(() => { getMirrorList(''); - }, []); - - useEffect(() => { - const setTableScollHeight = () => { - if (contentRef.current) { - setTableHeight(contentRef.current.offsetHeight - 74 - 55); - } - }; - setTableScollHeight(); - window.addEventListener('resize', setTableScollHeight); - - return () => { - window.removeEventListener('resize', setTableScollHeight); - }; - }, [contentRef]); + }, [activeTab]); const columns = [ { @@ -69,6 +59,7 @@ function MirrorList() { dataIndex: 'description', key: 'description', width: '50%', + //ellipsis: true, }, { title: '创建时间', @@ -87,6 +78,7 @@ function MirrorList() { type="link" size="small" key="download" + icon={} // onClick={(e) => downloadAlone(e, record)} > 查看详情 @@ -100,7 +92,7 @@ function MirrorList() { page: pagination.current - 1, size: pagination.pageSize, name, - image_type: 1, + image_type: activeTab === CommonTabKeys.Public ? 1 : 0, }; const [res] = await to(getMirrorListReq(params)); if (res && res.data) { @@ -121,12 +113,12 @@ function MirrorList() { return (
- {/* */} + />
@@ -136,13 +128,18 @@ function MirrorList() { onSearch={onSearch} style={{ width: 300 }} /> - +
diff --git a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less index d77d5519..69e8c445 100644 --- a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less +++ b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less @@ -6,14 +6,6 @@ .ant-tabs-tab { padding-top: 0; } - .ant-tabs-nav::before, - div > .ant-tabs-nav::before { - border: none; - } - - .ant-tabs-nav { - margin-bottom: 0; - } } } diff --git a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx index 213f9453..6ebe4621 100644 --- a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx +++ b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx @@ -7,6 +7,7 @@ import datasetImg from '@/assets/img/modal-select-dataset.png'; import modelImg from '@/assets/img/modal-select-model.png'; import KFModal from '@/components/KFModal'; +import { CommonTabKeys } from '@/enums'; import { getDatasetList, getDatasetVersionIdList, @@ -53,11 +54,6 @@ export type SelectorTypeInfo = { tabItems: TabsProps['items']; }; -enum TabItemKeys { - Private = 'Private', // 我的 - Public = 'Public', // 公开 -} - export const selectorTypeData: Record = { Model: { getList: getModelList, @@ -69,11 +65,11 @@ export const selectorTypeData: Record { type: ResourceSelectorType; // 模型 | 数据集 defaultExpandedKeys: React.Key[]; defaultCheckedKeys: React.Key[]; - defaultActiveTab: TabItemKeys; + defaultActiveTab: CommonTabKeys; onOk?: (params: ResourceSelectorResponse | null) => void; } @@ -165,7 +161,7 @@ function ResourceSelectorModal({ type, defaultExpandedKeys = [], defaultCheckedKeys = [], - defaultActiveTab = TabItemKeys.Private, + defaultActiveTab = CommonTabKeys.Private, onOk, ...rest }: ResourceSelectorModalProps) { @@ -201,7 +197,7 @@ function ResourceSelectorModal({ // 获取数据集或模型列表 const getTreeData = async () => { - const available_range = activeTab === TabItemKeys.Private ? '0' : '1'; + const available_range = activeTab === CommonTabKeys.Private ? '0' : '1'; const params = { page: 0, size: 200, @@ -341,7 +337,7 @@ function ResourceSelectorModal({ name, path: versionPath, version, - activeTab: activeTab as TabItemKeys, + activeTab: activeTab as CommonTabKeys, }; onOk?.(res); } else { diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx index ec0f6b06..5d31298a 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/index.jsx @@ -1,6 +1,6 @@ import { ReactComponent as ParameterIcon } from '@/assets/svg/parameter.svg'; import { ReactComponent as SaveAndReturn } from '@/assets/svg/save--return.svg'; -import { useAntdModal } from '@/hooks'; +import { useVisible } from '@/hooks'; import { getWorkflowById, saveWorkflow } from '@/services/pipeline/index.js'; import { to } from '@/utils/promise'; import { SaveOutlined } from '@ant-design/icons';