From d51f00d35d50bbffcb57cc9d1f370894380c4994 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 5 Jan 2026 16:41:30 +0800 Subject: [PATCH] style: cluster creation modal --- src/assets/logo/moore-logo.png | Bin 0 -> 19985 bytes src/components/collapse-container/index.tsx | 1 + src/components/icon-font/index.tsx | 4 +- src/components/seal-table/index.tsx | 5 + src/components/seal-table/styles/header.less | 4 +- src/layouts/index.tsx | 7 +- .../_components/collapse-panel/index.tsx | 5 +- .../cluster-management/cluster-create.tsx | 36 +++--- src/pages/cluster-management/clusters.tsx | 8 ++ .../components/cluster-steps.tsx | 106 +++++++++++++++--- .../components/footer-buttons.tsx | 12 +- .../components/provider-catalog.tsx | 6 +- .../components/support-gpus.tsx | 71 +++++++++--- .../step-forms/basic-form.tsx | 5 +- .../step-forms/use-step-list.tsx | 21 +++- .../step-forms/worker-pools-form.tsx | 21 ++-- .../dashboard/hooks/use-add-resource.tsx | 5 +- .../llmodels/hooks/use-no-resource-result.tsx | 5 +- 18 files changed, 224 insertions(+), 98 deletions(-) create mode 100644 src/assets/logo/moore-logo.png diff --git a/src/assets/logo/moore-logo.png b/src/assets/logo/moore-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..7d3c5d9bb0ce4e71e0b0dab694ad6e4e8348a301 GIT binary patch literal 19985 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°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 bkAdGSJ8a_KO=JH2gr===U%lb3UCjRgy^1M? literal 0 HcmV?d00001 diff --git a/src/components/collapse-container/index.tsx b/src/components/collapse-container/index.tsx index ecf56b81..5a497535 100644 --- a/src/components/collapse-container/index.tsx +++ b/src/components/collapse-container/index.tsx @@ -7,6 +7,7 @@ import styled from 'styled-components'; const CardStyled = styled(Card)` box-shadow: none !important; + background-color: none; &.isOpen { .ant-card-head { border-bottom: 1px solid var(--ant-color-border-secondary); diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index 2c4fbc7b..666b43f1 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -1,8 +1,8 @@ import { createFromIconfontCN } from '@ant-design/icons'; -import './iconfont/iconfont.js'; +// import './iconfont/iconfont.js'; const IconFont = createFromIconfontCN({ - scriptUrl: '' + scriptUrl: '//at.alicdn.com/t/c/font_4613488_jo5x7z2z718.js' }); export default IconFont; diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index 74410c4a..03fb5296 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -21,6 +21,8 @@ const Wrapper = styled.div<{ $token: any }>` --ant-table-row-selected-hover-bg: ${(props) => props.$token.rowSelectedHoverBg}; --ant-table-row-hover-bg: ${(props) => props.$token.rowHoverBg}; + --ant-table-header-icon-color: ${(props) => + props.$token.tableHeaderIconColor}; `; const SealTable: React.FC = ( @@ -143,10 +145,13 @@ const SealTable: React.FC = ( pagination?.onShowSizeChange?.(current, size); }; + console.log('token.table', token); + return ( diff --git a/src/components/seal-table/styles/header.less b/src/components/seal-table/styles/header.less index be39bcae..ba4cda3a 100644 --- a/src/components/seal-table/styles/header.less +++ b/src/components/seal-table/styles/header.less @@ -53,8 +53,8 @@ margin-left: 4px; .anticon { - font-size: 10px; - color: rgba(0, 0, 0, 29%); + font-size: 12px; + color: var(--ant-table-header-icon-color); } .sorter-up { diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 3608edc4..55a6e570 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -127,12 +127,7 @@ export default (props: any) => { const { clientRoutes } = useAppData(); const requestResourceRef = useRef(false); - const { - setLoadingStatus, - fetchResourceData, - NoResourceModal, - loadingStatus - } = useAddResource({ + const { fetchResourceData, NoResourceModal } = useAddResource({ onCreated() { requestResourceRef.current = false; } diff --git a/src/pages/_components/collapse-panel/index.tsx b/src/pages/_components/collapse-panel/index.tsx index 66bdd665..d8058f21 100644 --- a/src/pages/_components/collapse-panel/index.tsx +++ b/src/pages/_components/collapse-panel/index.tsx @@ -13,10 +13,7 @@ const CollapseInner = styled(Collapse)` border-radius: var(--border-radius-base) !important; font-size: 14px !important; font-weight: 600 !important; - - &:hover { - background-color: var(--ant-color-fill-tertiary) !important; - } + background-color: var(--ant-color-fill-tertiary) !important; } .ant-collapse-body { diff --git a/src/pages/cluster-management/cluster-create.tsx b/src/pages/cluster-management/cluster-create.tsx index 7c5b3dbe..534821d2 100644 --- a/src/pages/cluster-management/cluster-create.tsx +++ b/src/pages/cluster-management/cluster-create.tsx @@ -3,6 +3,7 @@ import { PageAction } from '@/config'; import { PageActionType } from '@/config/types'; import ColumnWrapper from '@/pages/_components/column-wrapper'; import { useIntl, useSearchParams } from '@umijs/max'; +import { Typography } from 'antd'; import { useAtom } from 'jotai'; import _ from 'lodash'; import React, { useEffect, useMemo, useRef, useState } from 'react'; @@ -29,6 +30,8 @@ import useSystemConfig from './services/use-system-config'; import { moduleMap, moduleRegistry } from './step-forms/module-registry'; import useStepList from './step-forms/use-step-list'; +const { Title, Text } = Typography; + const Container = styled.div` width: 100%; display: flex; @@ -41,14 +44,10 @@ const Content = styled.div` `; const StepsWrapper = styled.div` - width: 230px; + width: 240px; padding-inline: 24px; padding-block: 16px; - // background-color: var(--ant-color-fill-quaternary); border-right: 1px solid var(--ant-color-split); - .ant-steps.ant-steps-vertical { - height: 600px; - } `; const MainWrapper = styled.div` @@ -308,14 +307,15 @@ const ClusterCreate: React.FC<{ }; const handleCancel = () => { - if (clusterSession?.firstAddCluster) { - setClusterSession({ - firstAddCluster: false, - firstAddWorker: false - }); - onClose?.(); - return; - } + // TODO: delete it if created by drawer + // if (clusterSession?.firstAddCluster) { + // setClusterSession({ + // firstAddCluster: false, + // firstAddWorker: false + // }); + // onClose?.(); + // return; + // } onClose?.(); }; @@ -326,7 +326,7 @@ const ClusterCreate: React.FC<{ } > -
+ + {steps[currentStep]?.subTitle || steps[currentStep]?.title} + + + {steps[currentStep]?.description || steps[currentStep]?.content} + +
{currentStep === startStep && ( { } }, [clusterSession, dataSource.loadend, dataSource.dataList]); + useEffect(() => { + if (clusterSession?.firstAddCluster && dataSource.loadend) { + openClusterModal(); + // reset session + setClusterSession(null); + } + }, [clusterSession, dataSource.loadend]); + const renderChildren = ( list: any, options: { parent?: any; [key: string]: any } diff --git a/src/pages/cluster-management/components/cluster-steps.tsx b/src/pages/cluster-management/components/cluster-steps.tsx index 0e326a26..ae19f203 100644 --- a/src/pages/cluster-management/components/cluster-steps.tsx +++ b/src/pages/cluster-management/components/cluster-steps.tsx @@ -1,34 +1,106 @@ -import { Steps } from 'antd'; +import { CheckCircleFilled, CheckCircleOutlined } from '@ant-design/icons'; import React from 'react'; import styled from 'styled-components'; const Wrapper = styled.div` - width: min(1200px, 100%); - margin: 0 auto; - padding-block: 0px; - .ant-steps-item-description { - max-width: 300px !important; - color: var(--ant-color-text-description) !important; + display: flex; + flex-direction: column; + gap: 24px; +`; + +const Box = styled.div` + .indicates { + color: var(--ant-color-text-tertiary); + font-size: 14px; + margin-bottom: 24px; } `; +const StepItemWrapper = styled.div` + display: flex; + align-items: flex-start; + gap: 12px; + padding-bottom: 16px; + // border-bottom: 1px solid var(--ant-color-split); + .description { + display: flex; + flex-direction: column; + gap: 4px; + + .title { + font-weight: 500; + line-height: 20px; + color: var(--ant-color-text-tertiary); + } + .content { + line-height: 22px; + font-size: 14px; + color: var(--ant-color-text-tertiary); + } + } + &.active { + .description { + .title { + color: var(--ant-color-text); + font-weight: 600; + } + .content { + color: var(--ant-color-text); + } + } + } +`; + +const StepsItem: React.FC<{ + active: boolean; + item: { + title: string; + content: string; + }; +}> = ({ active, item }) => { + return ( + +
+ {active ? ( + + ) : ( + + )} +
+
+
{item.title}
+
{item.content}
+
+ + ); +}; + const ClusterSteps: React.FC<{ currentStep: number; onChange?: (step: number) => void; steps: any[]; }> = (props) => { - const { steps, currentStep, onChange } = props; + const { steps, currentStep = 0, onChange } = props; return ( - - - + +
+ STEP {currentStep + 1} OF {steps.length} +
+ + {steps.map((item, index) => ( + + ))} + + ); }; diff --git a/src/pages/cluster-management/components/footer-buttons.tsx b/src/pages/cluster-management/components/footer-buttons.tsx index 9a1cbf13..defa227e 100644 --- a/src/pages/cluster-management/components/footer-buttons.tsx +++ b/src/pages/cluster-management/components/footer-buttons.tsx @@ -1,4 +1,4 @@ -import { LeftOutlined, RightOutlined } from '@ant-design/icons'; +import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button } from 'antd'; import styled from 'styled-components'; @@ -37,10 +37,14 @@ const FooterButtons: React.FC = (props) => { onNext(); }; return ( - + <Title style={{ padding: '16px 24px 24px' }}> <div className="flex-center gap-20"> {showButtons.previous && ( - <Button type="default" icon={<LeftOutlined />} onClick={onPrevious}> + <Button + type="default" + icon={<ArrowLeftOutlined />} + onClick={onPrevious} + > {intl.formatMessage({ id: 'common.button.prev' })} </Button> )} @@ -51,7 +55,7 @@ const FooterButtons: React.FC<FooterButtonsProps> = (props) => { style={{ minWidth: 100 }} > {intl.formatMessage({ id: 'common.button.next' })} - <RightOutlined /> + <ArrowRightOutlined /> </Button> )} {showButtons.skip && ( diff --git a/src/pages/cluster-management/components/provider-catalog.tsx b/src/pages/cluster-management/components/provider-catalog.tsx index 5aef2af1..c29bbe46 100644 --- a/src/pages/cluster-management/components/provider-catalog.tsx +++ b/src/pages/cluster-management/components/provider-catalog.tsx @@ -29,7 +29,7 @@ const Title = styled.span` display: flex; gap: 8px; align-items: center; - font-weight: 700; + font-weight: 500; font-size: 14px; margin-bottom: 16px; .icon { @@ -100,6 +100,9 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({ }, [dataList]); const renderTitle = (item: any) => { + if (item.hiddenTitle) { + return <>{item.extra && <span className="extra">{item.extra}</span>}</>; + } return ( <Header> <span className="title"> @@ -110,6 +113,7 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({ {intl.formatMessage({ id: item.description })} </span> )} + {item.extra && <span className="extra">{item.extra}</span>} </Header> ); }; diff --git a/src/pages/cluster-management/components/support-gpus.tsx b/src/pages/cluster-management/components/support-gpus.tsx index 8c9bbaea..a937e3fc 100644 --- a/src/pages/cluster-management/components/support-gpus.tsx +++ b/src/pages/cluster-management/components/support-gpus.tsx @@ -3,7 +3,8 @@ import CambriconPNG from '@/assets/logo/cambricon.png'; import hyponPNG from '@/assets/logo/hygon.png'; import iluvatarWEBP from '@/assets/logo/Iluvatar.png'; import metaxLogo from '@/assets/logo/metax.png'; -import moorePNG from '@/assets/logo/moore _threads.png'; +import mooreLogo from '@/assets/logo/moore-logo.png'; +import nvidiaLogo from '@/assets/logo/nvidia.png'; import IconFont from '@/components/icon-font'; import { AddWorkerDockerNotes, @@ -15,21 +16,45 @@ import ProviderCatalog from './provider-catalog'; const Box = styled.div` .template-card-wrapper { + position: relative; + justify-content: center; + background-color: rgba(255, 255, 255, 0.1); + &.active { + background-color: var(--ant-color-fill-tertiary); + } + .template-card-icon { + margin-right: 0; + } .template-card-inner { line-height: 1; + flex-direction: row; + height: auto; + width: 0; + overflow: visible; .template-card-content { font-size: 13px; } } + .extra { + position: absolute; + right: 2px; + top: 2px; + padding: 2px; + border-radius: 2px; + font-size: 10px; + font-weight: 400; + background-color: var(--ant-blue-1); + color: var(--ant-color-info); + } } `; -const ProviderImage = ({ src, showBg }: { src: string; showBg?: boolean }) => { +const ProviderImage = ({ src, height }: { src: string; height?: number }) => { return ( <img src={src} style={{ - width: 32, + height: height || 20, objectFit: 'contain' }} /> @@ -52,16 +77,18 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({ const supportedHardPlatforms = [ { label: 'NVIDIA', + hiddenTitle: true, value: GPUDriverMap.NVIDIA, description: '', key: GPUDriverMap.NVIDIA, locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.NVIDIA], link: 'https://docs.gpustack.ai/latest/installation/requirements/#nvidia-gpu', - icon: <IconFont type="icon-nvidia2" style={{ fontSize: 32 }} /> + icon: <ProviderImage src={nvidiaLogo} height={20} /> }, { label: 'AMD', + hiddenTitle: true, description: '', value: GPUDriverMap.AMD, key: GPUDriverMap.AMD, @@ -70,70 +97,80 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({ link: 'https://docs.gpustack.ai/latest/installation/requirements/#amd-gpu', icon: ( <IconFont - type="icon-amd" - style={{ fontSize: 32, color: 'var(--ant-color-text)' }} + type="icon-amd-logo" + style={{ fontSize: 60, color: 'var(--ant-color-text)' }} /> ) }, { label: intl.formatMessage({ id: 'vendor.ascend' }), + hiddenTitle: true, description: '', value: GPUDriverMap.ASCEND, key: GPUDriverMap.ASCEND, locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.ASCEND], link: 'https://docs.gpustack.ai/latest/installation/requirements/#ascend-npu', - icon: <ProviderImage src={ascendLogo} showBg /> + icon: <ProviderImage src={ascendLogo} height={32} /> }, { label: intl.formatMessage({ id: 'vendor.hygon' }), + hiddenTitle: true, description: '', value: GPUDriverMap.HYGON, key: GPUDriverMap.HYGON, locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.HYGON], link: 'https://docs.gpustack.ai/latest/installation/requirements/#hygon-dcu', - icon: <ProviderImage src={hyponPNG} /> + icon: <ProviderImage src={hyponPNG} height={20} /> }, { label: intl.formatMessage({ id: 'vendor.moorthreads' }), - description: 'common.tag.experimental', + hiddenTitle: true, + // description: 'common.tag.experimental', + extra: intl.formatMessage({ id: 'common.tag.experimental' }), value: GPUDriverMap.MOORE_THREADS, key: GPUDriverMap.MOORE_THREADS, locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.MOORE_THREADS], link: 'https://docs.gpustack.ai/latest/installation/requirements/#mthreads-gpu', - icon: <ProviderImage src={moorePNG} /> + icon: <ProviderImage src={mooreLogo} height={26} /> }, { label: intl.formatMessage({ id: 'vendor.iluvatar' }), - description: 'common.tag.experimental', + hiddenTitle: true, + // description: 'common.tag.experimental', + extra: intl.formatMessage({ id: 'common.tag.experimental' }), value: GPUDriverMap.ILUVATAR, key: GPUDriverMap.ILUVATAR, locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.ILUVATAR], link: 'https://docs.gpustack.ai/latest/installation/requirements/#iluvatar-gpu', - icon: <ProviderImage src={iluvatarWEBP} showBg /> + icon: <ProviderImage src={iluvatarWEBP} height={26} /> }, { label: intl.formatMessage({ id: 'vendor.cambricon' }), - description: 'common.tag.experimental', + hiddenTitle: true, + // description: 'common.tag.experimental', + extra: intl.formatMessage({ id: 'common.tag.experimental' }), value: GPUDriverMap.CAMBRICON, key: GPUDriverMap.CAMBRICON, locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.CAMBRICON], link: 'https://docs.gpustack.ai/latest/installation/requirements/#cambricon-mlu', - icon: <ProviderImage src={CambriconPNG} /> + icon: <ProviderImage src={CambriconPNG} height={26} /> }, { label: intl.formatMessage({ id: 'vendor.metax' }), - description: 'common.tag.experimental', + hiddenTitle: true, + // description: 'common.tag.experimental', + extra: intl.formatMessage({ id: 'common.tag.experimental' }), value: GPUDriverMap.METAX, key: GPUDriverMap.METAX, locale: false, link: 'https://docs.gpustack.ai/latest/installation/requirements/#metax-gpu', notes: AddWorkerDockerNotes[GPUDriverMap.METAX], - icon: <ProviderImage src={metaxLogo} showBg /> + icon: <ProviderImage src={metaxLogo} height={20} /> } ]; @@ -145,7 +182,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({ current={current} dataList={supportedHardPlatforms} clickable={clickable} - cols={3} + cols={4} /> </Box> ); diff --git a/src/pages/cluster-management/step-forms/basic-form.tsx b/src/pages/cluster-management/step-forms/basic-form.tsx index 72a91726..d750b580 100644 --- a/src/pages/cluster-management/step-forms/basic-form.tsx +++ b/src/pages/cluster-management/step-forms/basic-form.tsx @@ -1,4 +1,3 @@ -import PageTools from '@/components/page-tools'; import { PageActionType } from '@/config/types'; import { useIntl } from '@umijs/max'; import { forwardRef, useImperativeHandle, useRef } from 'react'; @@ -40,7 +39,7 @@ const BasicForm = forwardRef((props: BasicFormProps, ref) => { return ( <div> - <PageTools + {/* <PageTools marginBottom={16} left={ <Title> @@ -48,7 +47,7 @@ const BasicForm = forwardRef((props: BasicFormProps, ref) => { } marginTop={0} - > + > */} [ { - title: intl.formatMessage({ id: 'clusters.create.selectProvider' }), - content: '', + title: intl.formatMessage({ id: 'clusters.table.provider' }), + content: 'Choose where your cluster will run.', + subTitle: 'Select Provider', + description: + 'Choose the environment where your cluster will be deployed.', showButtons: (provider?: ProviderType) => { return { previous: false, @@ -31,8 +34,10 @@ export default function useStepList() { providers: [] }, { - title: intl.formatMessage({ id: 'clusters.create.configBasic' }), - content: '', + title: intl.formatMessage({ id: 'common.title.config' }), + content: 'Configure your cluster settings.', + description: + 'Set the cluster name, description, or other essential parameters in advanced settings.', showButtons: (provider?: ProviderType) => { return { previous: true, @@ -48,7 +53,7 @@ export default function useStepList() { }, { title: intl.formatMessage({ id: 'clusters.button.addNodePool' }), - content: '', + content: 'Add worker pools to your cluster.', showButtons: (provider?: ProviderType) => { return { previous: true, @@ -65,7 +70,9 @@ export default function useStepList() { }, { title: intl.formatMessage({ id: 'resources.button.create' }), - content: '', + content: 'The cluster is created successfully.', + description: + 'The cluster is now set up and you can add workers to it. You can also add workers later from the cluster list.', showButtons: (provider?: ProviderType) => { return { previous: false, @@ -82,6 +89,8 @@ export default function useStepList() { { title: intl.formatMessage({ id: 'clusters.button.register' }), content: '', + description: + 'Register an existing Kubernetes cluster to manage its workers. You can also register a cluster later from the cluster list.', showButtons: (provider?: ProviderType) => { return { previous: false, diff --git a/src/pages/cluster-management/step-forms/worker-pools-form.tsx b/src/pages/cluster-management/step-forms/worker-pools-form.tsx index 76382b50..0a123081 100644 --- a/src/pages/cluster-management/step-forms/worker-pools-form.tsx +++ b/src/pages/cluster-management/step-forms/worker-pools-form.tsx @@ -181,20 +181,15 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => { + // + // {intl.formatMessage({ id: 'clusters.workerpool.title' })} + // + // + // } left={ - - - {intl.formatMessage({ id: 'clusters.workerpool.title' })} - - - } - right={ - } diff --git a/src/pages/dashboard/hooks/use-add-resource.tsx b/src/pages/dashboard/hooks/use-add-resource.tsx index fcfc8c43..7b9f608c 100644 --- a/src/pages/dashboard/hooks/use-add-resource.tsx +++ b/src/pages/dashboard/hooks/use-add-resource.tsx @@ -2,7 +2,6 @@ import { clusterSessionAtom } from '@/atoms/clusters'; import { hideModalTemporarilyAtom } from '@/atoms/settings'; import IconFont from '@/components/icon-font'; import ScrollerModal from '@/components/scroller-modal/index'; -import { PageAction } from '@/config'; import useUserSettings from '@/hooks/use-user-settings'; import useClusterList from '@/pages/cluster-management/hooks/use-cluster-list'; import { useIntl, useNavigate } from '@umijs/max'; @@ -105,9 +104,7 @@ export default function useAddResource(options?: { onCreated?: () => void }) { firstAddCluster: true }); - navigate( - `/cluster-management/clusters/create?action=${PageAction.CREATE}` - ); + navigate(`/cluster-management/clusters/list`); return; } diff --git a/src/pages/llmodels/hooks/use-no-resource-result.tsx b/src/pages/llmodels/hooks/use-no-resource-result.tsx index a15013de..714ac119 100644 --- a/src/pages/llmodels/hooks/use-no-resource-result.tsx +++ b/src/pages/llmodels/hooks/use-no-resource-result.tsx @@ -1,6 +1,5 @@ import { clusterSessionAtom } from '@/atoms/clusters'; import IconFont from '@/components/icon-font'; -import { PageAction } from '@/config'; import NoResult from '@/pages/_components/no-result'; import { useIntl, useNavigate } from '@umijs/max'; import { useMemoizedFn } from 'ahooks'; @@ -54,9 +53,7 @@ const useNoResourceResult = (props: { firstAddCluster: true }); - navigate( - `/cluster-management/clusters/create?action=${PageAction.CREATE}` - ); + navigate(`/cluster-management/clusters/list`); return; }