feat: finish all llm models page

web_ui/src/app/home/models/component/llm-form/LLMForm.tsx

@@ -1,24 +1,29 @@
 import styles from "@/app/home/models/LLMConfig.module.css";
-import {Button, Form, Input, Select, SelectProps, Space} from "antd";
+import {Button, Form, Input, Select, SelectProps, Space, Popconfirm, Modal} from "antd";
 import {ICreateLLMField} from "@/app/home/models/ICreateLLMField";
 import {useEffect, useState} from "react";
 import {IChooseRequesterEntity} from "@/app/home/models/component/llm-form/ChooseAdapterEntity";
 import { httpClient } from "@/app/infra/http/HttpClient";
+import {LLMModel} from "@/app/infra/api/api-types";
+import {UUID} from "uuidjs";
 
 export default function LLMForm({
     editMode,
     initLLMId,
     onFormSubmit,
     onFormCancel,
+    onLLMDeleted,
 }: {
     editMode: boolean;
     initLLMId?: string;
     onFormSubmit: (value: ICreateLLMField) => void;
     onFormCancel: (value: ICreateLLMField) => void;
+    onLLMDeleted: () => void;
 }) {
     const [form] = Form.useForm<ICreateLLMField>();
     const extraOptions: SelectProps['options'] = []
     const [initValue, setInitValue] = useState<ICreateLLMField>()
+    const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false)
     const abilityOptions: SelectProps['options'] = [
         {
             label: '函数调用',
@@ -50,7 +55,6 @@ export default function LLMForm({
                 value: item.name
             }
         }))
-        // TODO 拉取初始化表单信息
     }
 
     async function getLLMConfig(id: string): Promise<ICreateLLMField> {
@@ -74,27 +78,100 @@ export default function LLMForm({
 
     function handleFormSubmit(value: ICreateLLMField) {
         if (editMode) {
-            onSaveEdit(value)
+            // 暂不支持更改模型
+            // onSaveEdit(value)
         } else {
             onCreateLLM(value)
         }
-        onFormSubmit(value)
         form.resetFields()
     }
 
     function onSaveEdit(value: ICreateLLMField) {
-        console.log("edit save", value)
+        const requestParam: LLMModel = {
+            uuid: UUID.generate(),
+            name: value.name,
+            description: "",
+            requester: value.model_provider,
+            requester_config: {
+                "base_url": value.url,
+                "timeout": 120
+            },
+            extra_args: value.extra_args,
+            api_keys: [value.api_key],
+            abilities: value.abilities,
+            // created_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
+            // updated_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
+        };
+        httpClient.createProviderLLMModel(requestParam).then(r => console.log(r))
     }
 
     function onCreateLLM(value: ICreateLLMField) {
         console.log("create llm", value)
+        const requestParam: LLMModel = {
+            uuid: UUID.generate(),
+            name: value.name,
+            description: "",
+            requester: value.model_provider,
+            requester_config: {
+                "base_url": value.url,
+                "timeout": 120
+            },
+            extra_args: value.extra_args,
+            api_keys: [value.api_key],
+            abilities: value.abilities,
+            // created_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
+            // updated_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
+        };
+        httpClient.createProviderLLMModel(requestParam).then(r => {
+            onFormSubmit(value)
+        })
     }
 
     function handleAbilitiesChange() {
 
     }
+
+    function deleteModel() {
+        if (initLLMId) {
+            httpClient.deleteProviderLLMModel(initLLMId).then(res => {
+                onLLMDeleted()
+            })
+        }
+    }
+
     return (
         <div className={styles.modalContainer}>
+            <Modal
+                open={showDeleteConfirmModal}
+                title={"删除确认"}
+                onCancel={() => setShowDeleteConfirmModal(false)}
+                footer={
+                    <div
+                        style={{
+                            width: "170px",
+                            display: "flex",
+                            flexDirection: "row",
+                            justifyContent: "space-between"
+                        }}
+                    >
+                        <Button
+                            danger
+                            onClick={() => {
+                                deleteModel()
+                                setShowDeleteConfirmModal(false)
+                            }}
+                        >确认删除</Button>
+                        <Button
+                            onClick={() => {
+                                setShowDeleteConfirmModal(false)
+                            }}
+                        >取消</Button>
+                    </div>
+                }
+
+            >
+                你确定要删除这个模型吗？
+            </Modal>
             <Form
                 form={form}
                 labelCol={{span: 4}}
@@ -105,6 +182,7 @@ export default function LLMForm({
                 }}
                 onFinish={handleFormSubmit}
                 clearOnDestroy={true}
+                disabled={editMode}
             >
                 <Form.Item<ICreateLLMField>
                     label={"模型名称"}
@@ -141,6 +219,18 @@ export default function LLMForm({
                     ></Input>
                 </Form.Item>
 
+                <Form.Item<ICreateLLMField>
+                    label={"API Key"}
+                    name={"api_key"}
+                    rules={[{required: true, message: "该项为必填项哦～"}]}
+                >
+                    <Input
+                        placeholder="你的API Key"
+                        style={{width: 500}}
+                    ></Input>
+                </Form.Item>
+
+
                 <Form.Item<ICreateLLMField>
                     label={"开启能力"}
                     name={"abilities"}
@@ -179,13 +269,22 @@ export default function LLMForm({
                         }
                         {
                             editMode &&
-                            <Button type="primary" htmlType="submit">
+                            <Button
-                                保存
+                                color="danger"
+                                variant="solid"
+                                onClick={() => {setShowDeleteConfirmModal(true)}}
+                                disabled={false}
+                            >
+                                删除
                             </Button>
                         }
-                        <Button htmlType="button" onClick={() => {
+                        <Button
+                            htmlType="button"
+                            onClick={() => {
                             onFormCancel(form.getFieldsValue())
-                        }}>
+                            }}
+                            disabled={false}
+                        >
                             取消
                         </Button>
                     </Space>

web_ui/src/app/home/models/page.tsx

@@ -18,13 +18,10 @@ export default function LLMConfigPage() {
     const [nowSelectedLLM, setNowSelectedLLM] = useState<LLMCardVO | null>(null)
 
     useEffect(() => {
-        getLLMModelList().then((llmModelList) => {
+        getLLMModelList()
-            setCardList(llmModelList)
-        })
     }, [])
 
-    function getLLMModelList(): Promise<LLMCardVO[]> {
+    function getLLMModelList() {
-        return new Promise((resolve) => {
             httpClient.getProviderLLMModels().then((resp) => {
                 const llmModelList: LLMCardVO[] = resp.models.map((model: LLMModel) => {
                     console.log("model", model)
@@ -35,13 +32,12 @@ export default function LLMConfigPage() {
                         URL: model.requester_config?.base_url,
                     })
                 })
-                resolve(llmModelList)
+                console.log("get llmModelList", llmModelList)
+                setCardList(llmModelList)
             }).catch((err) => {
                 // TODO error toast
                 console.error("get LLM model list error", err)
-                resolve([])
             })
-        })
     }
 
     function selectLLM(cardVO: LLMCardVO) {
@@ -59,9 +55,10 @@ export default function LLMConfigPage() {
     return (
         <div className={styles.configPageContainer}>
             <Modal
-                title={isEditForm ? "编辑模型" : "创建模型"}
+                title={isEditForm ? "预览模型" : "创建模型"}
                 centered
                 open={modalOpen}
+                destroyOnClose={true}
                 onOk={() => setModalOpen(false)}
                 onCancel={() => setModalOpen(false)}
                 width={700}
@@ -72,10 +69,15 @@ export default function LLMConfigPage() {
                     initLLMId={nowSelectedLLM?.id}
                     onFormSubmit={() => {
                         setModalOpen(false);
+                        getLLMModelList()
                     }}
                     onFormCancel={() => {
                         setModalOpen(false);
                     }}
+                    onLLMDeleted={() => {
+                        setModalOpen(false)
+                        getLLMModelList()
+                    }}
                 />
             </Modal>
             {