🐛 fix: refresh model config form & mobile footer button lost (#2318)

* fix form not update * Update ModelConfigModal.tsx * fix #2319 * react/jsx-sort-props * #1811 * onCancel closeModal * zIndex
lobehub · May 14, 2024 · eadcefc · eadcefc
1 parent 488cde7
commit eadcefc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/docs/usage/start.mdx b/docs/usage/start.mdx
@@ -1,5 +1,5 @@
 ---
-title: Get Start with LobeChat
+title: Get started with LobeChat
 description: >-
   Explore the exciting features in LobeChat, including Vision Model, TTS & STT,
   Local LLMs, and Multi AI Providers. Discover more about Agent Market, Plugin

diff --git a/src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal.tsx b/src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal.tsx
@@ -1,5 +1,5 @@
 import { Modal } from '@lobehub/ui';
-import { Checkbox, Form, Input } from 'antd';
+import { Button, Checkbox, Form, Input } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,6 +16,7 @@ interface ModelConfigModalProps {
 const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, provider }) => {
   const [formInstance] = Form.useForm();
   const { t } = useTranslation('setting');
+  const { t: tc } = useTranslation('common');
 
   const [open, id, editingProvider, dispatchCustomModelCards, toggleEditingCustomModelCard] =
     useUserStore((s) => [
@@ -38,20 +39,32 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
   return (
     <Modal
       destroyOnClose
-      maskClosable
-      onCancel={() => {
-        closeModal();
-      }}
-      onOk={() => {
-        if (!editingProvider || !id) return;
-        const data = formInstance.getFieldsValue();
+      footer={[
+        <Button key="cancel" onClick={closeModal}>
+          {tc('cancel')}
+        </Button>,
+
+        <Button
+          key="ok"
+          onClick={() => {
+            if (!editingProvider || !id) return;
+            const data = formInstance.getFieldsValue();
 
-        dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
+            dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
 
-        closeModal();
-      }}
+            closeModal();
+          }}
+          style={{ marginInlineStart: '16px' }}
+          type="primary"
+        >
+          {tc('ok')}
+        </Button>,
+      ]}
+      maskClosable
+      onCancel={closeModal}
       open={open}
       title={t('llm.customModelCards.modelConfig.modalTitle')}
+      zIndex={1051} // Select is 1050
     >
       <div
         onClick={(e) => {
@@ -66,6 +79,7 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
           form={formInstance}
           initialValues={modelCard}
           labelCol={{ span: 4 }}
+          preserve={false}
           style={{ marginTop: 16 }}
           wrapperCol={{ offset: 1, span: 18 }}
         >