From 3ebafcbc031756f31d94d7077b03e1fa93dc0724 Mon Sep 17 00:00:00 2001
From: scarqin <scarqin@gmail.com>
Date: Tue, 31 Dec 2024 14:24:15 +0800
Subject: [PATCH] feat: stopaable tips

---
 .../core/src/pages/aiSetting/AiSettingModal.tsx        | 10 +++++-----
 .../src/pages/aiSetting/components/ModelCardNode.tsx   |  3 ---
 .../src/pages/aiSetting/contexts/AiSettingContext.tsx  |  4 ++--
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx b/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx
index 71ad949a..fca85750 100644
--- a/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx
@@ -23,7 +23,7 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
   const { fetchData } = useFetch()
   const [llmList, setLlmList] = useState<AiProviderLlmsItems[]>()
   const [loading, setLoading] = useState<boolean>(false)
-
+  const [enableState, setEnableState] = useState<boolean>(entity.status === 'enabled')
   const getLlmList = () => {
     setLoading(true)
     fetchData<BasicResponse<{ llms: AiProviderLlmsItems[] }>>(`ai/provider/llms`, {
@@ -108,10 +108,10 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
 
   return (
     <Form
+      form={form}
       layout="vertical"
       labelAlign="left"
       scrollToFirstError
-      form={form}
       className="flex flex-col mx-auto h-full"
       name="aiServiceInsideRouterModalConfig"
       autoComplete="off"
@@ -188,13 +188,13 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
                 unCheckedChildren={$t('停用')}
                 onChange={(checked) => {
                   form.setFieldsValue({ enable: checked })
+                  setEnableState(checked)
                 }}
               />
             </Form.Item>
           </div>
-          {(entity.status === 'enabled' && !form.getFieldValue('enable')) ||
-          (entity.status !== 'enabled' && form.getFieldValue('enable')) ? (
-            <div className="mt-2 text-sm text-gray-500">* {getTooltipText(form.getFieldValue('enable'))}</div>
+          {(entity.status === 'enabled' && !enableState) || (entity.status !== 'enabled' && enableState) ? (
+            <div className="mt-2 text-sm text-gray-500">* {getTooltipText(enableState)}</div>
           ) : null}
         </Form.Item>
       )}
diff --git a/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx b/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx
index 1b381485..bbabc26d 100644
--- a/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx
@@ -1,4 +1,3 @@
-import { useGlobalContext } from '@common/contexts/GlobalStateContext'
 import { Icon } from '@iconify/react'
 import { Handle, Position } from '@xyflow/react'
 import { t } from 'i18next'
@@ -14,7 +13,6 @@ type ModelCardNodeData = ModelDetailData & {
 export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
   const { name, status, defaultLlm, logo } = data
   const { openConfigModal } = useAiSetting()
-  const { aiConfigFlushed, setAiConfigFlushed } = useGlobalContext()
 
   const getStatusIcon = (status: ModelStatus) => {
     switch (status) {
@@ -56,7 +54,6 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) =
               className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]"
               onClick={() => {
                 openConfigModal({ id: data.id, defaultLlm: defaultLlm } as AiSettingListItem)
-                setAiConfigFlushed(!aiConfigFlushed)
               }}
             />
           </div>
diff --git a/frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx b/frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx
index 41b2800b..502c3bf3 100644
--- a/frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx
@@ -18,7 +18,7 @@ const AiSettingContext = createContext<AiSettingContextType | undefined>(undefin
 export const AiSettingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { modal, message } = App.useApp()
   const { fetchData } = useFetch()
-  const { setAiConfigFlushed, accessData } = useGlobalContext()
+  const { aiConfigFlushed, setAiConfigFlushed, accessData } = useGlobalContext()
   const modalRef = useRef<AiSettingModalContentHandle>()
 
   const openConfigModal = async (entity: AiSettingListItem) => {
@@ -46,7 +46,7 @@ export const AiSettingProvider: React.FC<{ children: React.ReactNode }> = ({ chi
       onOk: () => {
         return modalRef.current?.save().then((res) => {
           if (res === true) {
-            setAiConfigFlushed(true)
+            setAiConfigFlushed(!aiConfigFlushed)
           }
         })
       },