From f35ba8f8e53d9013c499eb170c59bf152257c8b1 Mon Sep 17 00:00:00 2001 From: jialin Date: Sat, 7 Feb 2026 23:07:02 +0800 Subject: [PATCH] fix: success message in creation cluster --- src/atoms/clusters.ts | 2 + .../components/add-worker/add-worker-step.tsx | 32 ++------------- .../components/add-worker/added-message.tsx | 39 +++++++++++++++++++ .../components/footer-buttons.tsx | 10 ++++- .../hooks/use-add-worker-message.ts | 11 +++++- src/pages/model-routes/forms/index.tsx | 1 - src/pages/model-routes/forms/targets.tsx | 17 ++++++-- 7 files changed, 76 insertions(+), 36 deletions(-) create mode 100644 src/pages/cluster-management/components/add-worker/added-message.tsx diff --git a/src/atoms/clusters.ts b/src/atoms/clusters.ts index bc76dfb1..3da49e0d 100644 --- a/src/atoms/clusters.ts +++ b/src/atoms/clusters.ts @@ -66,3 +66,5 @@ export const clusterSessionAtom = atom<{ } | null>(null); export const clusterDetailAtom = atom(null); + +export const workerAddedCountAtom = atom(0); diff --git a/src/pages/cluster-management/components/add-worker/add-worker-step.tsx b/src/pages/cluster-management/components/add-worker/add-worker-step.tsx index f7eec244..aa596b83 100644 --- a/src/pages/cluster-management/components/add-worker/add-worker-step.tsx +++ b/src/pages/cluster-management/components/add-worker/add-worker-step.tsx @@ -1,11 +1,11 @@ import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message'; import { useIntl } from '@umijs/max'; -import { Alert } from 'antd'; import React, { useMemo } from 'react'; import styled from 'styled-components'; import { ProviderType, ProviderValueMap } from '../../config'; import { ClusterListItem } from '../../config/types'; import { AddWorkerContext } from './add-worker-context'; +import AddedMessage from './added-message'; import CheckEnvironment from './check-environment'; import { StepName, StepNamesMap } from './config'; import DockerRunCommand from './docker-run-command'; @@ -90,23 +90,6 @@ const AddWorkerSteps: React.FC = (props) => { } }, [actionSource, registrationInfo?.cluster_id]); - const renderMessage = (count: number) => { - if (count === 1) { - return intl.formatMessage( - { - id: 'clusters.addworker.message.success_single' - }, - { count: addedCount } - ); - } - return intl.formatMessage( - { - id: 'clusters.addworker.message.success_multiple' - }, - { count: addedCount } - ); - }; - const disabled = useMemo(() => { return ( stepList.includes(StepNamesMap.SelectCluster) && !clusterList?.length @@ -154,17 +137,8 @@ const AddWorkerSteps: React.FC = (props) => { )} )} - {addedCount > 0 && ( - + {actionSource === 'modal' && ( + )} diff --git a/src/pages/cluster-management/components/add-worker/added-message.tsx b/src/pages/cluster-management/components/add-worker/added-message.tsx new file mode 100644 index 00000000..b29a41e5 --- /dev/null +++ b/src/pages/cluster-management/components/add-worker/added-message.tsx @@ -0,0 +1,39 @@ +import { useIntl } from '@umijs/max'; +import { Alert } from 'antd'; +import React from 'react'; + +const AddedMessage: React.FC<{ addedCount: number }> = ({ addedCount }) => { + const intl = useIntl(); + const renderMessage = (count: number) => { + if (count === 1) { + return intl.formatMessage( + { + id: 'clusters.addworker.message.success_single' + }, + { count: addedCount } + ); + } + return intl.formatMessage( + { + id: 'clusters.addworker.message.success_multiple' + }, + { count: addedCount } + ); + }; + + return addedCount > 0 ? ( + + ) : null; +}; + +export default AddedMessage; diff --git a/src/pages/cluster-management/components/footer-buttons.tsx b/src/pages/cluster-management/components/footer-buttons.tsx index 82975f41..37ce5c2f 100644 --- a/src/pages/cluster-management/components/footer-buttons.tsx +++ b/src/pages/cluster-management/components/footer-buttons.tsx @@ -1,14 +1,18 @@ +import { workerAddedCountAtom } from '@/atoms/clusters'; import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button } from 'antd'; +import { useAtom } from 'jotai'; import styled from 'styled-components'; +import AddedMessage from './add-worker/added-message'; const Title = styled.span` display: flex; align-items: center; - justify-content: flex-end; + justify-content: space-between; font-weight: 700; font-size: 16px; + gap: 16px; padding-inline: 24px; .text { font-size: 20px; @@ -33,11 +37,15 @@ const FooterButtons: React.FC = (props) => { loading } = props; const intl = useIntl(); + const [addedCount] = useAtom(workerAddedCountAtom); const handleOnNext = () => { onNext(); }; return ( + <div className="added-msge"> + <AddedMessage addedCount={addedCount} /> + </div> <div className="flex-center gap-20"> {showButtons.previous && ( <Button diff --git a/src/pages/cluster-management/hooks/use-add-worker-message.ts b/src/pages/cluster-management/hooks/use-add-worker-message.ts index d27e095f..783b5b74 100644 --- a/src/pages/cluster-management/hooks/use-add-worker-message.ts +++ b/src/pages/cluster-management/hooks/use-add-worker-message.ts @@ -1,5 +1,7 @@ +import { workerAddedCountAtom } from '@/atoms/clusters'; import useSetChunkRequest from '@/hooks/use-chunk-request'; import useUpdateChunkedList from '@/hooks/use-update-chunk-list'; +import { useAtom } from 'jotai'; import _ from 'lodash'; import qs from 'query-string'; import { useEffect, useRef, useState } from 'react'; @@ -11,11 +13,16 @@ export default function useAddWorkerMessage() { const [addedCount, setAddedCount] = useState(0); const timerRef = useRef<any>(null); const triggerAtRef = useRef<number>(0); + const [, setWorkerAddedCount] = useAtom(workerAddedCountAtom); + const updateAddedCount = (count: number) => { + setAddedCount(count); + setWorkerAddedCount(count); + }; const showAddWorkerMessage = () => { if (newItemsRef.current.length > 0) { const count = newItemsRef.current.length; - setAddedCount(count); + updateAddedCount(count); } }; @@ -39,7 +46,7 @@ export default function useAddWorkerMessage() { }; const resetAddedCount = () => { - setAddedCount(0); + updateAddedCount(0); chunkRequestRef.current?.current?.cancel?.(); newItemsRef.current = []; triggerAtRef.current = 0; diff --git a/src/pages/model-routes/forms/index.tsx b/src/pages/model-routes/forms/index.tsx index 584eb761..6d3934a7 100644 --- a/src/pages/model-routes/forms/index.tsx +++ b/src/pages/model-routes/forms/index.tsx @@ -108,7 +108,6 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => { ..._.omit(values, ['targets', 'fallback_target']), targets: targets }; - console.log('data=========', data); onFinish(data); }; diff --git a/src/pages/model-routes/forms/targets.tsx b/src/pages/model-routes/forms/targets.tsx index 245bc3db..e4bacd18 100644 --- a/src/pages/model-routes/forms/targets.tsx +++ b/src/pages/model-routes/forms/targets.tsx @@ -12,7 +12,8 @@ import useTargetSourceModels from '../hooks/use-target-source-models'; const TargetsForm = forwardRef((props, ref) => { const intl = useIntl(); const { getRuleMessage } = useAppUtils(); - const { sourceModels, loading, fetchSourceModels } = useTargetSourceModels(); + const { sourceModels, fetchSourceModels } = useTargetSourceModels(); + const [validTriggered, setValidTriggered] = useState<boolean>(false); const form = Form.useFormInstance<FormData>(); const targets = Form.useWatch('targets', form) || []; const [fallbackValues, setFallbackValues] = useState<{ value: any[] }>({ @@ -55,6 +56,7 @@ const TargetsForm = forwardRef((props, ref) => { weight: newDataList[index]?.weight || null, value: value }; + form.validateFields(['targets']); setDataList(newDataList); }; @@ -120,6 +122,7 @@ const TargetsForm = forwardRef((props, ref) => { ...newDataList[index], weight: value }; + form.validateFields(['targets']); setDataList(newDataList); }; @@ -170,11 +173,13 @@ const TargetsForm = forwardRef((props, ref) => { <Form.Item name="targets" data-field="targets" + trigger="" rules={[ { validator(rule, value) { if (value && value?.length > 0) { if (_.some(value, (item: any) => !item.weight)) { + setValidTriggered(true); return Promise.reject( getRuleMessage('input', 'routes.form.target.weight') ); @@ -186,11 +191,13 @@ const TargetsForm = forwardRef((props, ref) => { (item: any) => !item.value || item.value.length === 0 ) ) { + setValidTriggered(true); return Promise.reject( getRuleMessage('input', 'providers.form.target.placeholder') ); } } + setValidTriggered(false); return Promise.resolve(); } } @@ -214,7 +221,9 @@ const TargetsForm = forwardRef((props, ref) => { required showSearch status={ - !item.value || item.value.length === 0 ? 'error' : 'success' + (!item.value || item.value.length === 0) && validTriggered + ? 'error' + : 'success' } expandTrigger="hover" multiple={false} @@ -249,7 +258,9 @@ const TargetsForm = forwardRef((props, ref) => { style={{ flex: 100 }} min={0} step={1} - status={item.weight === null ? 'error' : 'success'} + status={ + item.weight === null && validTriggered ? 'error' : 'success' + } value={item.weight} onChange={(value) => handleOnWeightChange(value, index)} placeholder={intl.formatMessage({