feat: update eslint & prettier rules

web/src/app/home/models/ICreateLLMField.ts

@@ -1,8 +1,8 @@
 export interface ICreateLLMField {
-    name: string;
-    model_provider: string;
-    url: string;
-    api_key: string;
-    abilities: string[];
-    extra_args: string[];
-}
+  name: string;
+  model_provider: string;
+  url: string;
+  api_key: string;
+  abilities: string[];
+  extra_args: string[];
+}

web/src/app/home/models/component/llm-card/LLMCard.tsx

@@ -1,33 +1,25 @@
-import styles from "../../LLMConfig.module.css"
-import {LLMCardVO} from "@/app/home/models/component/llm-card/LLMCardVO";
+import styles from '../../LLMConfig.module.css';
+import { LLMCardVO } from '@/app/home/models/component/llm-card/LLMCardVO';
 
-export default function LLMCard({
-    cardVO
-}: {
-    cardVO: LLMCardVO
-}) {
-    return (
-        <div className={`${styles.cardContainer}`}>
-            {/*  icon和基本信息  */}
-            <div className={`${styles.iconBasicInfoContainer}`}>
-                {/*  icon  */}
-                <div className={`${styles.icon}`}>
-                    ICO
-                </div>
-                {/*  bot基本信息  */}
-                <div className={`${styles.basicInfoContainer}`}>
-                    <div className={`${styles.basicInfoText}  ${styles.bigText}`}>
-                        {cardVO.name}
-                    </div>
-                    <div className={`${styles.basicInfoText}`}>
-                        厂商：{cardVO.company}
-                    </div>
-                </div>
-            </div>
-            {/*  URL和创建时间  */}
-            <div className={`${styles.urlAndUpdateText}`}>
-                URL：{cardVO.URL}
-            </div>
+export default function LLMCard({ cardVO }: { cardVO: LLMCardVO }) {
+  return (
+    <div className={`${styles.cardContainer}`}>
+      {/*  icon和基本信息  */}
+      <div className={`${styles.iconBasicInfoContainer}`}>
+        {/*  icon  */}
+        <div className={`${styles.icon}`}>ICO</div>
+        {/*  bot基本信息  */}
+        <div className={`${styles.basicInfoContainer}`}>
+          <div className={`${styles.basicInfoText}  ${styles.bigText}`}>
+            {cardVO.name}
+          </div>
+          <div className={`${styles.basicInfoText}`}>
+            厂商：{cardVO.company}
+          </div>
         </div>
-    );
-}
+      </div>
+      {/*  URL和创建时间  */}
+      <div className={`${styles.urlAndUpdateText}`}>URL：{cardVO.URL}</div>
+    </div>
+  );
+}

web/src/app/home/models/component/llm-card/LLMCardVO.ts

@@ -1,21 +1,20 @@
 export interface ILLMCardVO {
-    id: string;
-    name: string;
-    company: string;
-    URL: string;
+  id: string;
+  name: string;
+  company: string;
+  URL: string;
 }
 
 export class LLMCardVO implements ILLMCardVO {
-    id: string;
-    name: string;
-    company: string;
-    URL: string;
+  id: string;
+  name: string;
+  company: string;
+  URL: string;
 
-    constructor(props: ILLMCardVO) {
-        this.id = props.id;
-        this.name = props.name;
-        this.company = props.company;
-        this.URL = props.URL;
-    }
-
-}
+  constructor(props: ILLMCardVO) {
+    this.id = props.id;
+    this.name = props.name;
+    this.company = props.company;
+    this.URL = props.URL;
+  }
+}

web/src/app/home/models/component/llm-form/ChooseAdapterEntity.ts

@@ -1,4 +1,4 @@
 export interface IChooseRequesterEntity {
-    label: string
-    value: string
-}
+  label: string;
+  value: string;
+}

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

@@ -1,18 +1,18 @@
-import styles from "@/app/home/models/LLMConfig.module.css";
-import { Button, Form, Input, Select, SelectProps, Space, 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";
+import styles from '@/app/home/models/LLMConfig.module.css';
+import { Button, Form, Input, Select, SelectProps, Space, 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
+  onLLMDeleted,
 }: {
   editMode: boolean;
   initLLMId?: string;
@@ -21,18 +21,18 @@ export default function LLMForm({
   onLLMDeleted: () => void;
 }) {
   const [form] = Form.useForm<ICreateLLMField>();
-  const extraOptions: SelectProps["options"] = [];
+  const extraOptions: SelectProps['options'] = [];
   const [initValue] = useState<ICreateLLMField>();
   const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
-  const abilityOptions: SelectProps["options"] = [
+  const abilityOptions: SelectProps['options'] = [
     {
-      label: "函数调用",
-      value: "func_call"
+      label: '函数调用',
+      value: 'func_call',
     },
     {
-      label: "图像识别",
-      value: "vision"
-    }
+      label: '图像识别',
+      value: 'vision',
+    },
   ];
   const [requesterNameList, setRequesterNameList] = useState<
     IChooseRequesterEntity[]
@@ -56,9 +56,9 @@ export default function LLMForm({
       requesterNameList.requesters.map((item) => {
         return {
           label: item.label.zh_CN,
-          value: item.name
+          value: item.name,
         };
-      })
+      }),
     );
   }
 
@@ -76,7 +76,7 @@ export default function LLMForm({
       url: llmModel.model.requester_config?.base_url,
       api_key: llmModel.model.api_keys[0],
       abilities: llmModel.model.abilities,
-      extra_args: fakeExtraArgs
+      extra_args: fakeExtraArgs,
     };
   }
 
@@ -110,19 +110,19 @@ export default function LLMForm({
   // }
 
   function onCreateLLM(value: ICreateLLMField) {
-    console.log("create llm", value);
+    console.log('create llm', value);
     const requestParam: LLMModel = {
       uuid: UUID.generate(),
       name: value.name,
-      description: "",
+      description: '',
       requester: value.model_provider,
       requester_config: {
         base_url: value.url,
-        timeout: 120
+        timeout: 120,
       },
       extra_args: value.extra_args,
       api_keys: [value.api_key],
-      abilities: value.abilities
+      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',
     };
@@ -145,15 +145,15 @@ export default function LLMForm({
     <div className={styles.modalContainer}>
       <Modal
         open={showDeleteConfirmModal}
-        title={"删除确认"}
+        title={'删除确认'}
         onCancel={() => setShowDeleteConfirmModal(false)}
         footer={
           <div
             style={{
-              width: "170px",
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between"
+              width: '170px',
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
             }}
           >
             <Button
@@ -183,27 +183,27 @@ export default function LLMForm({
         wrapperCol={{ span: 14 }}
         layout="horizontal"
         initialValues={{
-          ...initValue
+          ...initValue,
         }}
         onFinish={handleFormSubmit}
         clearOnDestroy={true}
         disabled={editMode}
       >
         <Form.Item<ICreateLLMField>
-          label={"模型名称"}
-          name={"name"}
-          rules={[{ required: true, message: "该项为必填项哦～" }]}
+          label={'模型名称'}
+          name={'name'}
+          rules={[{ required: true, message: '该项为必填项哦～' }]}
         >
           <Input
-            placeholder={"为自己的大模型取个好听的名字～"}
+            placeholder={'为自己的大模型取个好听的名字～'}
             style={{ width: 260 }}
           ></Input>
         </Form.Item>
 
         <Form.Item<ICreateLLMField>
-          label={"模型供应商"}
-          name={"model_provider"}
-          rules={[{ required: true, message: "该项为必填项哦～" }]}
+          label={'模型供应商'}
+          name={'model_provider'}
+          rules={[{ required: true, message: '该项为必填项哦～' }]}
         >
           <Select
             style={{ width: 120 }}
@@ -213,9 +213,9 @@ export default function LLMForm({
         </Form.Item>
 
         <Form.Item<ICreateLLMField>
-          label={"请求URL"}
-          name={"url"}
-          rules={[{ required: true, message: "该项为必填项哦～" }]}
+          label={'请求URL'}
+          name={'url'}
+          rules={[{ required: true, message: '该项为必填项哦～' }]}
         >
           <Input
             placeholder="请求地址，一般是API提供商提供的URL"
@@ -224,14 +224,14 @@ export default function LLMForm({
         </Form.Item>
 
         <Form.Item<ICreateLLMField>
-          label={"API Key"}
-          name={"api_key"}
-          rules={[{ required: true, message: "该项为必填项哦～" }]}
+          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"}>
+        <Form.Item<ICreateLLMField> label={'开启能力'} name={'abilities'}>
           <Select
             mode="tags"
             style={{ width: 500 }}
@@ -241,7 +241,7 @@ export default function LLMForm({
           />
         </Form.Item>
 
-        <Form.Item<ICreateLLMField> label={"其他参数"} name={"extra_args"}>
+        <Form.Item<ICreateLLMField> label={'其他参数'} name={'extra_args'}>
           <Select
             mode="tags"
             style={{ width: 500 }}

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

@@ -1,116 +1,123 @@
-"use client"
+'use client';
 
-import {useState, useEffect} from "react";
-import {LLMCardVO} from "@/app/home/models/component/llm-card/LLMCardVO";
-import styles from "./LLMConfig.module.css"
-import EmptyAndCreateComponent from "@/app/home/components/empty-and-create-component/EmptyAndCreateComponent";
-import {Modal} from "antd";
-import LLMCard from "@/app/home/models/component/llm-card/LLMCard";
-import LLMForm from "@/app/home/models/component/llm-form/LLMForm";
-import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
-import { httpClient } from "@/app/infra/http/HttpClient";
-import { LLMModel } from "@/app/infra/api/api-types";
+import { useState, useEffect } from 'react';
+import { LLMCardVO } from '@/app/home/models/component/llm-card/LLMCardVO';
+import styles from './LLMConfig.module.css';
+import EmptyAndCreateComponent from '@/app/home/components/empty-and-create-component/EmptyAndCreateComponent';
+import { Modal } from 'antd';
+import LLMCard from '@/app/home/models/component/llm-card/LLMCard';
+import LLMForm from '@/app/home/models/component/llm-form/LLMForm';
+import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { LLMModel } from '@/app/infra/api/api-types';
 
 export default function LLMConfigPage() {
-    const [cardList, setCardList] = useState<LLMCardVO[]>([])
-    const [modalOpen, setModalOpen] = useState<boolean>(false);
-    const [isEditForm, setIsEditForm] = useState(false)
-    const [nowSelectedLLM, setNowSelectedLLM] = useState<LLMCardVO | null>(null)
+  const [cardList, setCardList] = useState<LLMCardVO[]>([]);
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const [isEditForm, setIsEditForm] = useState(false);
+  const [nowSelectedLLM, setNowSelectedLLM] = useState<LLMCardVO | null>(null);
 
-    useEffect(() => {
-        getLLMModelList()
-    }, [])
+  useEffect(() => {
+    getLLMModelList();
+  }, []);
 
-    function getLLMModelList() {
-            httpClient.getProviderLLMModels().then((resp) => {
-                const llmModelList: LLMCardVO[] = resp.models.map((model: LLMModel) => {
-                    console.log("model", model)
-                    return new LLMCardVO({
-                        id: model.uuid,
-                        name: model.name,
-                        company: model.requester,
-                        URL: model.requester_config?.base_url,
-                    })
-                })
-                console.log("get llmModelList", llmModelList)
-                setCardList(llmModelList)
-            }).catch((err) => {
-                // TODO error toast
-                console.error("get LLM model list error", err)
-            })
-    }
+  function getLLMModelList() {
+    httpClient
+      .getProviderLLMModels()
+      .then((resp) => {
+        const llmModelList: LLMCardVO[] = resp.models.map((model: LLMModel) => {
+          console.log('model', model);
+          return new LLMCardVO({
+            id: model.uuid,
+            name: model.name,
+            company: model.requester,
+            URL: model.requester_config?.base_url,
+          });
+        });
+        console.log('get llmModelList', llmModelList);
+        setCardList(llmModelList);
+      })
+      .catch((err) => {
+        // TODO error toast
+        console.error('get LLM model list error', err);
+      });
+  }
 
-    function selectLLM(cardVO: LLMCardVO) {
-        setIsEditForm(true)
-        setNowSelectedLLM(cardVO)
-        console.log("set now vo", cardVO)
-        setModalOpen(true)
-    }
-    function handleCreateModelClick() {
-        setIsEditForm(false)
-        setNowSelectedLLM(null)
-        setModalOpen(true);
-    }
+  function selectLLM(cardVO: LLMCardVO) {
+    setIsEditForm(true);
+    setNowSelectedLLM(cardVO);
+    console.log('set now vo', cardVO);
+    setModalOpen(true);
+  }
+  function handleCreateModelClick() {
+    setIsEditForm(false);
+    setNowSelectedLLM(null);
+    setModalOpen(true);
+  }
 
-    return (
-        <div className={styles.configPageContainer}>
-            <Modal
-                title={isEditForm ? "预览模型" : "创建模型"}
-                centered
-                open={modalOpen}
-                destroyOnClose={true}
-                onOk={() => setModalOpen(false)}
-                onCancel={() => setModalOpen(false)}
-                width={700}
-                footer={null}
-            >
-                <LLMForm
-                    editMode={isEditForm}
-                    initLLMId={nowSelectedLLM?.id}
-                    onFormSubmit={() => {
-                        setModalOpen(false);
-                        getLLMModelList()
-                    }}
-                    onFormCancel={() => {
-                        setModalOpen(false);
-                    }}
-                    onLLMDeleted={() => {
-                        setModalOpen(false)
-                        getLLMModelList()
-                    }}
-                />
-            </Modal>
-            {
-                cardList.length > 0 &&
-                <div className={`${styles.modelListContainer}`}
-                >
-                    {cardList.map(cardVO => {
-                        return <div key={cardVO.id} onClick={() => {selectLLM(cardVO)}}>
-                            <LLMCard cardVO={cardVO}></LLMCard>
-                        </div>
-                    })}
-                    <CreateCardComponent
-                        width={360}
-                        height={200}
-                        plusSize={90}
-                        onClick={handleCreateModelClick}
-                    />
-                </div>
-            }
-
-            {
-                cardList.length === 0 &&
-                <div className={`${styles.emptyContainer}`}>
-                    <EmptyAndCreateComponent
-                        title={"模型列表空空如也～"}
-                        subTitle={"快去创建一个吧！"}
-                        buttonText={"创建模型 +"}
-                        onButtonClick={() => {
-                            handleCreateModelClick()
-                        }}
-                    />
-                </div>
-            }
+  return (
+    <div className={styles.configPageContainer}>
+      <Modal
+        title={isEditForm ? '预览模型' : '创建模型'}
+        centered
+        open={modalOpen}
+        destroyOnClose={true}
+        onOk={() => setModalOpen(false)}
+        onCancel={() => setModalOpen(false)}
+        width={700}
+        footer={null}
+      >
+        <LLMForm
+          editMode={isEditForm}
+          initLLMId={nowSelectedLLM?.id}
+          onFormSubmit={() => {
+            setModalOpen(false);
+            getLLMModelList();
+          }}
+          onFormCancel={() => {
+            setModalOpen(false);
+          }}
+          onLLMDeleted={() => {
+            setModalOpen(false);
+            getLLMModelList();
+          }}
+        />
+      </Modal>
+      {cardList.length > 0 && (
+        <div className={`${styles.modelListContainer}`}>
+          {cardList.map((cardVO) => {
+            return (
+              <div
+                key={cardVO.id}
+                onClick={() => {
+                  selectLLM(cardVO);
+                }}
+              >
+                <LLMCard cardVO={cardVO}></LLMCard>
+              </div>
+            );
+          })}
+          <CreateCardComponent
+            width={360}
+            height={200}
+            plusSize={90}
+            onClick={handleCreateModelClick}
+          />
         </div>
-    )
+      )}
+
+      {cardList.length === 0 && (
+        <div className={`${styles.emptyContainer}`}>
+          <EmptyAndCreateComponent
+            title={'模型列表空空如也～'}
+            subTitle={'快去创建一个吧！'}
+            buttonText={'创建模型 +'}
+            onButtonClick={() => {
+              handleCreateModelClick();
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
 }