feat: layout the knowledge list page and modify the page switching button in the header (#48)

* feat: remove unnecessary 'loading' fields from other files

* feat: layout the knowledge list page

* feat: modify the page switching button in the header

web/src/pages/setting/SSModal.tsx

@@ -1,152 +1,144 @@
-import { connect, Dispatch } from 'umi';
-import { FC } from 'react'
-import i18n from 'i18next';
-import { useTranslation, Trans } from 'react-i18next'
-import { Input, Modal, Form, Select } from 'antd'
-import styles from './index.less';
+import { Form, Modal, Select } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'umi';
 
 type FieldType = {
-    embd_id?: string;
-    img2txt_id?: string;
-    llm_id?: string;
-    asr_id?: string
+  embd_id?: string;
+  img2txt_id?: string;
+  llm_id?: string;
+  asr_id?: string;
 };
-interface SSModalProps {
-    dispatch: Dispatch;
-    settingModel: any
-}
-const Index: FC<SSModalProps> = ({ settingModel, dispatch }) => {
-    const { isShowSSModal, llmInfo = {}, tenantIfo } = settingModel
 
-    const { t } = useTranslation()
-    const handleCancel = () => {
+const SsModal = () => {
+  const dispatch = useDispatch();
+  const settingModel = useSelector((state: any) => state.settingModel);
+  const { isShowSSModal, llmInfo = {}, tenantIfo } = settingModel;
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+
+  const handleCancel = () => {
+    dispatch({
+      type: 'settingModel/updateState',
+      payload: {
+        isShowSSModal: false,
+      },
+    });
+  };
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      const retcode = await dispatch<any>({
+        type: 'settingModel/set_tenant_info',
+        payload: {
+          ...values,
+          tenant_id: tenantIfo.tenant_id,
+        },
+      });
+      retcode === 0 &&
         dispatch({
-            type: 'settingModel/updateState',
-            payload: {
-                isShowSSModal: false
-            }
+          type: 'settingModel/updateState',
+          payload: {
+            isShowSSModal: false,
+          },
         });
-    };
-    const [form] = Form.useForm()
-    const handleOk = async () => {
-        try {
-            const values = await form.validateFields();
-            console.log(values)
-            dispatch({
-                type: 'settingModel/set_tenant_info',
-                payload: {
-                    ...values,
-                    tenant_id: tenantIfo.tenant_id,
-                },
-                callback: () => {
-                    dispatch({
-                        type: 'settingModel/updateState',
-                        payload: {
-                            isShowSSModal: false
-                        }
-                    });
-                    // dispatch({
-                    //     type: 'settingModel/getUserInfo',
-                    //     payload: {
-
-                    //     }
-                    // });
-                }
-            });
-
-        } catch (errorInfo) {
-            console.log('Failed:', errorInfo);
-        }
-    };
-    const handleChange = () => {
-
+    } catch (errorInfo) {
+      console.log('Failed:', errorInfo);
     }
+  };
 
-    return (
-        <Modal title="Basic Modal" open={isShowSSModal} onOk={handleOk} onCancel={handleCancel}>
-            <Form
-                form={form}
-                name="validateOnly"
-                // labelCol={{ span: 8 }}
-                // wrapperCol={{ span: 16 }}
-                style={{ maxWidth: 600 }}
-                autoComplete="off"
-                layout="vertical"
-            >
-                <Form.Item<FieldType>
-                    label="embedding 模型"
-                    name="embd_id"
-                    rules={[{ required: true, message: 'Please input value' }]}
-                    initialValue={tenantIfo.embd_id}
+  const handleChange = () => {};
 
-                >
-                    <Select
-                        // style={{ width: 200 }}
-                        onChange={handleChange}
-                        // fieldNames={label:}
-                        options={Object.keys(llmInfo).map(t => {
-                            const options = llmInfo[t].filter((d: any) => d.model_type === 'embedding').map((d: any) => ({ label: d.llm_name, value: d.llm_name, }))
-                            return { label: t, options }
-                        })}
-                    />
-                </Form.Item>
-                <Form.Item<FieldType>
-                    label="chat 模型"
-                    name="llm_id"
-                    rules={[{ required: true, message: 'Please input value' }]}
-                    initialValue={tenantIfo.llm_id}
-
-                >
-                    <Select
-                        // style={{ width: 200 }}
-                        onChange={handleChange}
-                        // fieldNames={label:}
-                        options={Object.keys(llmInfo).map(t => {
-                            const options = llmInfo[t].filter((d: any) => d.model_type === 'chat').map((d: any) => ({ label: d.llm_name, value: d.llm_name, }))
-                            return { label: t, options }
-                        })}
-                    />
-                </Form.Item>
-                <Form.Item<FieldType>
-                    label="image2text 模型"
-                    name="img2txt_id"
-                    rules={[{ required: true, message: 'Please input value' }]}
-                    initialValue={tenantIfo.img2txt_id}
-
-                >
-                    <Select
-                        // style={{ width: 200 }}
-                        onChange={handleChange}
-                        // fieldNames={label:}
-                        options={Object.keys(llmInfo).map(t => {
-                            const options = llmInfo[t].filter((d: any) => d.model_type === 'image2text').map((d: any) => ({ label: d.llm_name, value: d.llm_name, }))
-                            return { label: t, options }
-                        })}
-                    />
-                </Form.Item>
-                <Form.Item<FieldType>
-                    label="speech2text 模型"
-                    name="asr_id"
-                    rules={[{ required: true, message: 'Please input value' }]}
-                    initialValue={tenantIfo.asr_id}
-
-                >
-                    <Select
-                        // style={{ width: 200 }}
-                        onChange={handleChange}
-                        // fieldNames={label:}
-                        options={Object.keys(llmInfo).map(t => {
-                            const options = llmInfo[t].filter((d: any) => d.model_type === 'speech2text').map((d: any) => ({ label: d.llm_name, value: d.llm_name, }))
-                            return { label: t, options }
-                        })}
-                    />
-                </Form.Item>
-
-
-            </Form>
-        </Modal >
-
-
-    );
-}
-export default connect(({ settingModel, loading }) => ({ settingModel, loading }))(Index);
+  return (
+    <Modal
+      title="Basic Modal"
+      open={isShowSSModal}
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <Form
+        form={form}
+        name="validateOnly"
+        // labelCol={{ span: 8 }}
+        // wrapperCol={{ span: 16 }}
+        style={{ maxWidth: 600 }}
+        autoComplete="off"
+        layout="vertical"
+      >
+        <Form.Item<FieldType>
+          label="embedding 模型"
+          name="embd_id"
+          rules={[{ required: true, message: 'Please input value' }]}
+          initialValue={tenantIfo.embd_id}
+        >
+          <Select
+            // style={{ width: 200 }}
+            onChange={handleChange}
+            // fieldNames={label:}
+            options={Object.keys(llmInfo).map((t) => {
+              const options = llmInfo[t]
+                .filter((d: any) => d.model_type === 'embedding')
+                .map((d: any) => ({ label: d.llm_name, value: d.llm_name }));
+              return { label: t, options };
+            })}
+          />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label="chat 模型"
+          name="llm_id"
+          rules={[{ required: true, message: 'Please input value' }]}
+          initialValue={tenantIfo.llm_id}
+        >
+          <Select
+            // style={{ width: 200 }}
+            onChange={handleChange}
+            // fieldNames={label:}
+            options={Object.keys(llmInfo).map((t) => {
+              const options = llmInfo[t]
+                .filter((d: any) => d.model_type === 'chat')
+                .map((d: any) => ({ label: d.llm_name, value: d.llm_name }));
+              return { label: t, options };
+            })}
+          />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label="image2text 模型"
+          name="img2txt_id"
+          rules={[{ required: true, message: 'Please input value' }]}
+          initialValue={tenantIfo.img2txt_id}
+        >
+          <Select
+            // style={{ width: 200 }}
+            onChange={handleChange}
+            // fieldNames={label:}
+            options={Object.keys(llmInfo).map((t) => {
+              const options = llmInfo[t]
+                .filter((d: any) => d.model_type === 'image2text')
+                .map((d: any) => ({ label: d.llm_name, value: d.llm_name }));
+              return { label: t, options };
+            })}
+          />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label="speech2text 模型"
+          name="asr_id"
+          rules={[{ required: true, message: 'Please input value' }]}
+          initialValue={tenantIfo.asr_id}
+        >
+          <Select
+            // style={{ width: 200 }}
+            onChange={handleChange}
+            // fieldNames={label:}
+            options={Object.keys(llmInfo).map((t) => {
+              const options = llmInfo[t]
+                .filter((d: any) => d.model_type === 'speech2text')
+                .map((d: any) => ({ label: d.llm_name, value: d.llm_name }));
+              return { label: t, options };
+            })}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default SsModal;