From 14d944ad2f59cbf074672c3d10b2063ad4286f5a Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 18 Dec 2025 19:50:41 +0800 Subject: [PATCH] style: cluster advanced scroller --- .../components/cluster-form.tsx | 22 ++++++--- .../components/pool-form.tsx | 2 +- .../step-forms/advance-config.tsx | 1 + .../step-forms/worker-pools-form.tsx | 9 +++- .../resources/hooks/use-worker-columns.tsx | 49 ++++++++++++++++--- 5 files changed, 66 insertions(+), 17 deletions(-) diff --git a/src/pages/cluster-management/components/cluster-form.tsx b/src/pages/cluster-management/components/cluster-form.tsx index 6c88f3a3..3b0f42ad 100644 --- a/src/pages/cluster-management/components/cluster-form.tsx +++ b/src/pages/cluster-management/components/cluster-form.tsx @@ -1,6 +1,6 @@ -import { useScrollerContext } from '@/components/scroller-modal/use-scroller-context'; import SealInput from '@/components/seal-form/seal-input'; import SealTextArea from '@/components/seal-form/seal-textarea'; +import { PageAction } from '@/config'; import { PageActionType } from '@/config/types'; import CollapsePanel from '@/pages/_components/collapse-panel'; import { json2Yaml, yaml2Json } from '@/pages/backends/config'; @@ -25,7 +25,6 @@ type AddModalProps = { }; const ClusterForm: React.FC = forwardRef( ({ action, provider, currentData, credentialList, onFinish }, ref) => { - const { scrollToBottom } = useScrollerContext(); const [form] = Form.useForm(); const intl = useIntl(); const [activeKey, setActiveKey] = React.useState([]); @@ -33,14 +32,21 @@ const ClusterForm: React.FC = forwardRef( const handleOnCollapseChange = async (keys: string | string[]) => { setActiveKey(Array.isArray(keys) ? keys : [keys]); - if (keys?.includes?.('advanceConfig')) { - await new Promise((resolve) => { - setTimeout(resolve, 500); - }); - scrollToBottom(); - } }; + useEffect(() => { + if ( + activeKey?.includes?.('advanceConfig') && + action === PageAction.EDIT + ) { + const el = document.querySelector('.scroller-to-holder'); + if (!el) return; + setTimeout(() => { + el.scrollIntoView({ behavior: 'smooth' }); + }, 300); + } + }, [activeKey, action]); + const handleOnFinish = (values: FormData) => { const workerConfig = yaml2Json(advanceConfigRef.current?.getYamlValue()); diff --git a/src/pages/cluster-management/components/pool-form.tsx b/src/pages/cluster-management/components/pool-form.tsx index 7f95f561..c9301ef0 100644 --- a/src/pages/cluster-management/components/pool-form.tsx +++ b/src/pages/cluster-management/components/pool-form.tsx @@ -256,7 +256,7 @@ const PoolForm: React.FC = forwardRef((props, ref) => { const handleOsImageChange = (value: string, option: any) => { form.setFieldsValue({ - os_image: option.os_image || value + os_image: option?.os_image || value }); }; diff --git a/src/pages/cluster-management/step-forms/advance-config.tsx b/src/pages/cluster-management/step-forms/advance-config.tsx index 27daad18..18ca652e 100644 --- a/src/pages/cluster-management/step-forms/advance-config.tsx +++ b/src/pages/cluster-management/step-forms/advance-config.tsx @@ -89,6 +89,7 @@ const ClusterAdvanceConfig: React.FC<{ }} schema={schema} > +
); }); 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 36676daf..536e7067 100644 --- a/src/pages/cluster-management/step-forms/worker-pools-form.tsx +++ b/src/pages/cluster-management/step-forms/worker-pools-form.tsx @@ -116,8 +116,13 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => { form?.validateFields() ); const results = await Promise.allSettled(promises); - console.log('results========0', promises, results); - if (results.some((result) => result.status === 'rejected')) { + const rejectIndex = results.findIndex( + (result) => result.status === 'rejected' + ); + if (rejectIndex !== -1) { + setActiveKey(() => { + return new Set([rejectIndex]); + }); return Promise.reject({ values: { worker_pools: gatherFormValues(results) diff --git a/src/pages/resources/hooks/use-worker-columns.tsx b/src/pages/resources/hooks/use-worker-columns.tsx index 9dba8cb0..fdcf748f 100644 --- a/src/pages/resources/hooks/use-worker-columns.tsx +++ b/src/pages/resources/hooks/use-worker-columns.tsx @@ -18,9 +18,27 @@ import { Tooltip } from 'antd'; import { ColumnsType } from 'antd/lib/table'; import _ from 'lodash'; import { useMemo } from 'react'; +import styled from 'styled-components'; import { status, WorkerStatusMap, WorkerStatusMapValue } from '../config'; import { Filesystem, GPUDeviceItem, ListItem } from '../config/types'; +const IPWrapper = styled.span` + display: flex; + flex-direction: column; + .item { + display: grid; + grid-template-columns: auto 1fr; + gap: 4px 8px; + .label { + text-align: right; + font-size: 13px; + display: flex; + align-items: center; + color: var(--ant-color-text-tertiary); + } + } +`; + const ActionList = [ { label: 'common.button.edit', key: 'edit', icon: }, // { @@ -229,6 +247,30 @@ const useWorkerColumns = ({ }): ColumnsType => { const intl = useIntl(); + const renderIP = (text: string, record: ListItem) => { + if (record.advertise_address === record.ip) { + return record.ip; + } + + if ( + record.advertise_address !== record.ip && + record.advertise_address && + record.ip + ) { + return ( + + + {record.ip} + {`(${intl.formatMessage({ id: 'clusters.table.ip.internal' })})`} + {record.advertise_address} + {`(${intl.formatMessage({ id: 'clusters.table.ip.external' })})`} + + + ); + } + return record.ip || record.advertise_address || ''; + }; + return useMemo>( () => [ { @@ -281,12 +323,7 @@ const useWorkerColumns = ({ dataIndex: 'ip', render: (text: string, record) => ( - {record.advertise_address || text} - {record.advertise_address - ? ` (${intl.formatMessage({ id: 'clusters.table.ip.external' })})` - : record.ip - ? ` (${intl.formatMessage({ id: 'clusters.table.ip.internal' })})` - : ''} + {renderIP(text, record)} ) },