feat(web): Unified frontend code style (#1923)

Co-authored-by: Fangyin Cheng <staneyffer@gmail.com> Co-authored-by: 谨欣 <echo.cmy@antgroup.com> Co-authored-by: 严志勇 <yanzhiyong@tiansuixiansheng.com> Co-authored-by: yanzhiyong <932374019@qq.com>
2025-09-15 14:11:14 +00:00 · 2024-08-30 14:03:06 +08:00
parent f866580703
commit 471689ba20
247 changed files with 4960 additions and 4546 deletions
--- a/web/components/model/model-card.tsx
+++ b/web/components/model/model-card.tsx
@@ -1,43 +1,40 @@
-import React, { useState } from 'react';
 import { IModelData } from '@/types/model';
-import { useTranslation } from 'react-i18next';
-import { message } from 'antd';
-import moment from 'moment';
-import { apiInterceptors, stopModel } from '@/client/api';
-import GptCard from '../common/gpt-card';
-import { PauseCircleOutlined } from '@ant-design/icons';
 import { MODEL_ICON_MAP } from '@/utils';
+import moment from 'moment';
+import GptCard from '../common/gpt-card';

 interface Props {
  info: IModelData;
 }

 function ModelCard({ info }: Props) {
-  const { t } = useTranslation();
-  const [loading, setLoading] = useState<boolean>(false);
+  // const { t } = useTranslation();
+  // const [loading, setLoading] = useState<boolean>(false);
+
+  // TODO：unused function
+  // async function stopTheModel(info: IModelData) {
+  //   if (loading) {
+  //     return;
+  //   }
+  //   setLoading(true);
+  //   const [, res] = await apiInterceptors(
+  //     stopModel({
+  //       host: info.host,
+  //       port: info.port,
+  //       model: info.model_name,
+  //       worker_type: info.model_type,
+  //       params: {},
+  //     }),
+  //   );
+  //   setLoading(false);
+  //   if (res === true) {
+  //     message.success(t('stop_model_success'));
+  //   }
+  // }

-  async function stopTheModel(info: IModelData) {
-    if (loading) {
-      return;
-    }
-    setLoading(true);
-    const [, res] = await apiInterceptors(
-      stopModel({
-        host: info.host,
-        port: info.port,
-        model: info.model_name,
-        worker_type: info.model_type,
-        params: {},
-      }),
-    );
-    setLoading(false);
-    if (res === true) {
-      message.success(t('stop_model_success'));
-    }
-  }
  return (
    <GptCard
-      className="w-96"
+      className='w-96'
      title={info.model_name}
      tags={[
        {
@@ -62,20 +59,20 @@ function ModelCard({ info }: Props) {
      //   },
      // ]}
    >
-      <div className="flex flex-col gap-1 px-4 pb-4 text-xs">
-        <div className="flex overflow-hidden">
-          <p className="w-28 text-gray-500 mr-2">Host:</p>
-          <p className="flex-1 text-ellipsis">{info.host}</p>
+      <div className='flex flex-col gap-1 px-4 pb-4 text-xs'>
+        <div className='flex overflow-hidden'>
+          <p className='w-28 text-gray-500 mr-2'>Host:</p>
+          <p className='flex-1 text-ellipsis'>{info.host}</p>
        </div>
-        <div className="flex overflow-hidden">
-          <p className="w-28 text-gray-500 mr-2">Manage Host:</p>
-          <p className="flex-1 text-ellipsis">
+        <div className='flex overflow-hidden'>
+          <p className='w-28 text-gray-500 mr-2'>Manage Host:</p>
+          <p className='flex-1 text-ellipsis'>
            {info.manager_host}:{info.manager_port}
          </p>
        </div>
-        <div className="flex overflow-hidden">
-          <p className="w-28 text-gray-500 mr-2">Last Heart Beat:</p>
-          <p className="flex-1 text-ellipsis">{moment(info.last_heartbeat).format('YYYY-MM-DD')}</p>
+        <div className='flex overflow-hidden'>
+          <p className='w-28 text-gray-500 mr-2'>Last Heart Beat:</p>
+          <p className='flex-1 text-ellipsis'>{moment(info.last_heartbeat).format('YYYY-MM-DD')}</p>
        </div>
      </div>
    </GptCard>
--- a/web/components/model/model-form.tsx
+++ b/web/components/model/model-form.tsx
@@ -1,9 +1,9 @@
 import { apiInterceptors, getSupportModels, startModel } from '@/client/api';
+import { renderModelIcon } from '@/components/chat/header/model-selector';
 import { SupportModel, SupportModelParams } from '@/types/model';
 import { Button, Form, Select, Tooltip, message } from 'antd';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { renderModelIcon } from '@/components/chat/header/model-selector';
 import ModelParams from './model-params';
 const { Option } = Select;

@@ -37,7 +37,7 @@ function ModelForm({ onCancel, onSuccess }: { onCancel: () => void; onSuccess: (
    getModels();
  }, []);

-  function handleChange(value: string, option: any) {
+  function handleChange(_: string, option: any) {
    setSelectedModel(option.model);
    setParams(option.model.params);
  }
@@ -59,23 +59,23 @@ function ModelForm({ onCancel, onSuccess }: { onCancel: () => void; onSuccess: (
    );
    setLoading(false);
    if (data?.success === true) {
-      onSuccess && onSuccess();
+      onSuccess?.();
      return message.success(t('start_model_success'));
    }
  }

  return (
    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} onFinish={onFinish} form={form}>
-      <Form.Item label="Model" name="model" rules={[{ required: true, message: t('model_select_tips') }]}>
+      <Form.Item label='Model' name='model' rules={[{ required: true, message: t('model_select_tips') }]}>
        <Select showSearch onChange={handleChange}>
-          {models?.map((model) => (
+          {models?.map(model => (
            <Option key={model.model} value={model.model} label={model.model} model={model} disabled={!model.enabled}>
              {renderModelIcon(model.model)}
              <Tooltip title={model.enabled ? model.model : t('download_model_tip')}>
-                <span className="ml-2">{model.model}</span>
+                <span className='ml-2'>{model.model}</span>
              </Tooltip>
              <Tooltip title={model.enabled ? `${model.host}:${model.port}` : t('download_model_tip')}>
-                <p className="inline-block absolute right-4">
+                <p className='inline-block absolute right-4'>
                  <span>{model.host}:</span>
                  <span>{model.port}</span>
                </p>
@@ -85,11 +85,11 @@ function ModelForm({ onCancel, onSuccess }: { onCancel: () => void; onSuccess: (
        </Select>
      </Form.Item>
      <ModelParams params={params} form={form} />
-      <div className="flex justify-center">
-        <Button type="primary" htmlType="submit" loading={loading}>
+      <div className='flex justify-center'>
+        <Button type='primary' htmlType='submit' loading={loading}>
          {t('submit')}
        </Button>
-        <Button className="ml-10" onClick={onCancel}>
+        <Button className='ml-10' onClick={onCancel}>
          Cancel
        </Button>
      </div>
--- a/web/components/model/model-params.tsx
+++ b/web/components/model/model-params.tsx
@@ -10,7 +10,7 @@ function ModelParams({ params, form }: { params: Array<SupportModelParams> | nul
  useEffect(() => {
    if (params) {
      const initialValues: ParamValues = {};
-      params.forEach((param) => {
+      params.forEach(param => {
        initialValues[param.param_name] = param.default_value;
      });
      form.setFieldsValue(initialValues); // 设置表单字段的初始值
@@ -36,7 +36,9 @@ function ModelParams({ params, form }: { params: Array<SupportModelParams> | nul
        <Form.Item
          key={param.param_name}
          label={
-            <p className="whitespace-normal overflow-wrap-break-word">{param.description?.length > 20 ? param.param_name : param.description}</p>
+            <p className='whitespace-normal overflow-wrap-break-word'>
+              {param.description?.length > 20 ? param.param_name : param.description}
+            </p>
          }
          name={param.param_name}
          initialValue={param.default_value}