From 1819649a3ad2ef1eb3a2dcbe6bb989b54ba3e5df Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 20 Mar 2025 12:03:24 +0800
Subject: [PATCH] style: backend check info

---
 src/components/alert-info/block.less          | 15 +---
 src/components/alert-info/block.tsx           | 13 ++--
 src/hooks/use-app-utils.ts                    | 30 ++++++++
 src/layouts/rightRender.tsx                   | 31 ++++----
 .../llmodels/components/advance-config.tsx    | 13 +---
 src/pages/llmodels/components/data-form.tsx   | 75 +++----------------
 .../llmodels/components/deploy-modal.tsx      | 46 ++++++------
 .../llmodels/components/update-modal.tsx      | 58 +++-----------
 src/pages/llmodels/download/target-form.tsx   | 23 ++----
 9 files changed, 104 insertions(+), 200 deletions(-)
 create mode 100644 src/hooks/use-app-utils.ts

diff --git a/src/components/alert-info/block.less b/src/components/alert-info/block.less
index ed17a982..ed6d64a7 100644
--- a/src/components/alert-info/block.less
+++ b/src/components/alert-info/block.less
@@ -1,7 +1,7 @@
 .alert-info-block {
   padding: 6px 10px;
   position: relative;
-  padding-top: 35px;
+  padding-left: 32px;
   text-align: left;
   border-radius: var(--border-radius-base);
   margin: 0;
@@ -30,22 +30,11 @@
     left: 0;
     top: 0;
     display: flex;
-    height: 30px;
-    width: 100%;
+    height: 32px;
     padding: 5px 10px;
     border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
 
-    &.danger {
-      background-color: var(--ant-color-error-bg-filled-hover);
-    }
-
-    &.warning {
-      background-color: var(--ant-color-warning-bg-hover);
-    }
-
     .info-icon {
-      margin-right: 8px;
-
       &.danger {
         color: var(--ant-color-error);
       }
diff --git a/src/components/alert-info/block.tsx b/src/components/alert-info/block.tsx
index d7f18116..908b8bf4 100644
--- a/src/components/alert-info/block.tsx
+++ b/src/components/alert-info/block.tsx
@@ -14,7 +14,7 @@ interface AlertInfoProps {
 }
 
 const AlertInfo: React.FC<AlertInfoProps> = (props) => {
-  const { message, type, rows = 1, ellipsis, style, title } = props;
+  const { message, type, rows = 1, ellipsis, style } = props;
 
   return (
     <>
@@ -25,17 +25,14 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
         >
           <Typography.Paragraph
             ellipsis={
-              ellipsis !== undefined
-                ? ellipsis
-                : {
-                    rows: rows,
-                    tooltip: message
-                  }
+              ellipsis ?? {
+                rows: rows,
+                tooltip: message
+              }
             }
           >
             <div className={classNames('title', type)}>
               <WarningFilled className={classNames('info-icon', type)} />
-              <span className="text">{title}</span>
             </div>
             <span className="content">{message}</span>
           </Typography.Paragraph>
diff --git a/src/hooks/use-app-utils.ts b/src/hooks/use-app-utils.ts
new file mode 100644
index 00000000..7a1ec2c1
--- /dev/null
+++ b/src/hooks/use-app-utils.ts
@@ -0,0 +1,30 @@
+import { useIntl } from '@umijs/max';
+
+const useAppUtils = () => {
+  const intl = useIntl();
+
+  const getRuleMessage = (
+    type: 'input' | 'select',
+    name: string,
+    locale = true
+  ) => {
+    const nameStr = locale ? intl.formatMessage({ id: name }) : name;
+
+    if (type === 'input') {
+      return intl.formatMessage(
+        { id: 'common.form.rule.input' },
+        { name: nameStr }
+      );
+    }
+    return intl.formatMessage(
+      { id: 'common.form.rule.select' },
+      { name: nameStr }
+    );
+  };
+
+  return {
+    getRuleMessage
+  };
+};
+
+export default useAppUtils;
diff --git a/src/layouts/rightRender.tsx b/src/layouts/rightRender.tsx
index ea08a31a..22cdb95a 100644
--- a/src/layouts/rightRender.tsx
+++ b/src/layouts/rightRender.tsx
@@ -17,6 +17,7 @@ import {
 import { getAllLocales, history, setLocale } from '@umijs/max';
 import { Avatar, Menu, Spin } from 'antd';
 import _ from 'lodash';
+import React from 'react';
 
 export const getRightRenderContent = (opts: {
   runtimeConfig: any;
@@ -282,27 +283,23 @@ export const getRightRenderContent = (opts: {
     ]
   };
 
+  const getMenuStyle = (
+    collapsed: boolean,
+    siderWidth: number,
+    extraStyle: React.CSSProperties = {}
+  ) => ({
+    width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
+    ...extraStyle
+  });
+
   return (
     <div>
-      <Menu
-        {...helpMenu}
-        style={{
-          width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`
-        }}
-      ></Menu>
-      <Menu
-        {...langMenu}
-        style={{
-          width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`
-        }}
-      ></Menu>
+      <Menu {...helpMenu} style={getMenuStyle(collapsed, siderWidth)} />
+      <Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} />
       <Menu
         {...userMenu}
-        style={{
-          width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
-          marginTop: 20
-        }}
-      ></Menu>
+        style={getMenuStyle(collapsed, siderWidth, { marginTop: 20 })}
+      />
     </div>
   );
 };
diff --git a/src/pages/llmodels/components/advance-config.tsx b/src/pages/llmodels/components/advance-config.tsx
index 7cdc4d89..e2c494f8 100644
--- a/src/pages/llmodels/components/advance-config.tsx
+++ b/src/pages/llmodels/components/advance-config.tsx
@@ -7,6 +7,7 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import { PageActionType } from '@/config/types';
+import useAppUtils from '@/hooks/use-app-utils';
 import { QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import {
@@ -42,6 +43,7 @@ interface AdvanceConfigProps {
 
 const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   const { form, isGGUF, gpuOptions, source } = props;
+  const { getRuleMessage } = useAppUtils();
   const intl = useIntl();
   const wokerSelector = Form.useWatch('worker_selector', form);
   const EnviromentVars = Form.useWatch('env', form);
@@ -289,16 +291,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
               rules={[
                 {
                   required: true,
-                  message: intl.formatMessage(
-                    {
-                      id: 'common.form.rule.select'
-                    },
-                    {
-                      name: intl.formatMessage({
-                        id: 'models.form.gpuselector'
-                      })
-                    }
-                  )
+                  message: getRuleMessage('select', 'models.form.gpuselector')
                 }
               ]}
             >
diff --git a/src/pages/llmodels/components/data-form.tsx b/src/pages/llmodels/components/data-form.tsx
index 1caec67e..bd64ec84 100644
--- a/src/pages/llmodels/components/data-form.tsx
+++ b/src/pages/llmodels/components/data-form.tsx
@@ -5,6 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form, Typography } from 'antd';
 import _ from 'lodash';
@@ -53,13 +54,6 @@ interface DataFormProps {
   fields?: string[];
 }
 
-interface GPUOption {
-  label: string;
-  value: string;
-  disableCheckbox?: boolean;
-  children: GPUOption[];
-}
-
 const SEARCH_SOURCE = [
   modelSourceMap.huggingface_value,
   modelSourceMap.modelscope_value
@@ -80,7 +74,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onSourceChange,
     onOk
   } = props;
-  console.log('DataForm -> props');
+  const { getRuleMessage } = useAppUtils();
   const [form] = Form.useForm();
   const intl = useIntl();
   const [modelTask, setModelTask] = useState<Record<string, any>>({
@@ -208,12 +202,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'models.form.repoid' }) }
-              )
+              message: getRuleMessage('input', 'models.form.repoid')
             }
           ]}
         >
@@ -230,12 +219,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             rules={[
               {
                 required: true,
-                message: intl.formatMessage(
-                  {
-                    id: 'common.form.rule.input'
-                  },
-                  { name: intl.formatMessage({ id: 'models.form.filename' }) }
-                )
+                message: getRuleMessage('input', 'models.form.filename')
               }
             ]}
           >
@@ -259,12 +243,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'models.table.name' }) }
-              )
+              message: getRuleMessage('input', 'models.table.name')
             }
           ]}
         >
@@ -308,12 +287,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'models.form.filePath' }) }
-              )
+              message: getRuleMessage('input', 'models.form.filePath')
             }
           ]}
         >
@@ -351,12 +325,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             rules={[
               {
                 required: true,
-                message: intl.formatMessage(
-                  {
-                    id: 'common.form.rule.select'
-                  },
-                  { name: 'size' }
-                )
+                message: getRuleMessage('input', 'size', false)
               }
             ]}
           >
@@ -378,12 +347,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             rules={[
               {
                 required: true,
-                message: intl.formatMessage(
-                  {
-                    id: 'common.form.rule.select'
-                  },
-                  { name: 'quantization' }
-                )
+                message: getRuleMessage('select', 'quantization', false)
               }
             ]}
           >
@@ -534,12 +498,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         rules={[
           {
             required: true,
-            message: intl.formatMessage(
-              {
-                id: 'common.form.rule.input'
-              },
-              { name: intl.formatMessage({ id: 'common.table.name' }) }
-            )
+            message: getRuleMessage('input', 'common.table.name')
           }
         ]}
       >
@@ -556,12 +515,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.select'
-                },
-                { name: intl.formatMessage({ id: 'models.form.source' }) }
-              )
+              message: getRuleMessage('select', 'models.form.source')
             }
           ]}
         >
@@ -627,14 +581,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         rules={[
           {
             required: true,
-            message: intl.formatMessage(
-              {
-                id: 'common.form.rule.input'
-              },
-              {
-                name: intl.formatMessage({ id: 'models.form.replicas' })
-              }
-            )
+            message: getRuleMessage('input', 'models.form.replicas')
           }
         ]}
       >
diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx
index 3d66a3d5..c897147a 100644
--- a/src/pages/llmodels/components/deploy-modal.tsx
+++ b/src/pages/llmodels/components/deploy-modal.tsx
@@ -5,7 +5,7 @@ import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Drawer } from 'antd';
 import { debounce } from 'lodash';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { backendOptionsMap, modelSourceMap } from '../config';
 import { FormData } from '../config/types';
 import ColumnWrapper from './column-wrapper';
@@ -27,7 +27,7 @@ type AddModalProps = {
   onCancel: () => void;
 };
 
-const AddModal: React.FC<AddModalProps> = (props) => {
+const AddModal: FC<AddModalProps> = (props) => {
   const {
     title,
     open,
@@ -235,28 +235,30 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         )}
         <div style={{ display: 'flex', flex: 1, maxWidth: '100%' }}>
           <ColumnWrapper
-            paddingBottom={warningStatus.show ? 155 : 50}
+            paddingBottom={warningStatus.show ? 125 : 50}
             footer={
               <>
-                {warningStatus.show && (
-                  <AlertBlockInfo
-                    ellipsis={false}
-                    message={
-                      <span
-                        style={{}}
-                        dangerouslySetInnerHTML={{
-                          __html: intl.formatMessage({
-                            id: warningStatus.message
-                          })
-                        }}
-                      ></span>
-                    }
-                    title={intl.formatMessage({
-                      id: 'common.text.tips'
-                    })}
-                    type="warning"
-                  ></AlertBlockInfo>
-                )}
+                <div style={{ paddingInline: 12 }}>
+                  {warningStatus.show && (
+                    <AlertBlockInfo
+                      ellipsis={false}
+                      message={
+                        <span
+                          style={{}}
+                          dangerouslySetInnerHTML={{
+                            __html: intl.formatMessage({
+                              id: warningStatus.message
+                            })
+                          }}
+                        ></span>
+                      }
+                      title={intl.formatMessage({
+                        id: 'common.text.tips'
+                      })}
+                      type="warning"
+                    ></AlertBlockInfo>
+                  )}
+                </div>
                 <ModalFooter
                   onCancel={handleCancel}
                   onOk={handleSumit}
diff --git a/src/pages/llmodels/components/update-modal.tsx b/src/pages/llmodels/components/update-modal.tsx
index c99bb082..838b1436 100644
--- a/src/pages/llmodels/components/update-modal.tsx
+++ b/src/pages/llmodels/components/update-modal.tsx
@@ -7,6 +7,7 @@ import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form, Modal, Typography } from 'antd';
 import _ from 'lodash';
@@ -16,7 +17,8 @@ import {
   backendTipsList,
   localPathTipsList,
   modelSourceMap,
-  ollamaModelOptions
+  ollamaModelOptions,
+  sourceOptions
 } from '../config';
 import { FormData, ListItem } from '../config/types';
 import AdvanceConfig from './advance-config';
@@ -40,30 +42,6 @@ const SEARCH_SOURCE = [
   modelSourceMap.modelscope_value
 ];
 
-const sourceOptions = [
-  {
-    label: 'Hugging Face',
-    value: modelSourceMap.huggingface_value,
-    key: 'huggingface'
-  },
-  {
-    label: 'Ollama Library',
-    value: modelSourceMap.ollama_library_value,
-    key: 'ollama_library'
-  },
-  {
-    label: 'ModelScope',
-    value: modelSourceMap.modelscope_value,
-    key: 'model_scope'
-  },
-  {
-    label: 'models.form.localPath',
-    value: modelSourceMap.local_path_value,
-    locale: true,
-    key: 'local_path'
-  }
-];
-
 const UpdateModal: React.FC<AddModalProps> = (props) => {
   const {
     title,
@@ -73,6 +51,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     onCancel,
     updateFormInitials: { gpuOptions, isGGUF, data: formData }
   } = props || {};
+  const { getRuleMessage } = useAppUtils();
   const [form] = Form.useForm();
   const intl = useIntl();
   const localPathCache = useRef<string>('');
@@ -428,9 +407,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     >
       <ColumnWrapper
         maxHeight={550}
-        paddingBottom={warningStatus.show ? 100 : 0}
+        paddingBottom={warningStatus.show ? 70 : 0}
         footer={
-          <>
+          <div style={{ paddingInline: 12 }}>
             {warningStatus.show && (
               <AlertBlockInfo
                 ellipsis={false}
@@ -449,7 +428,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                 type="warning"
               ></AlertBlockInfo>
             )}
-          </>
+          </div>
         }
       >
         <Form
@@ -471,12 +450,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
             rules={[
               {
                 required: true,
-                message: intl.formatMessage(
-                  {
-                    id: 'common.form.rule.input'
-                  },
-                  { name: intl.formatMessage({ id: 'common.table.name' }) }
-                )
+                message: getRuleMessage('input', 'common.table.name')
               }
             ]}
           >
@@ -492,12 +466,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
             rules={[
               {
                 required: true,
-                message: intl.formatMessage(
-                  {
-                    id: 'common.form.rule.select'
-                  },
-                  { name: intl.formatMessage({ id: 'models.form.source' }) }
-                )
+                message: getRuleMessage('select', 'models.form.source')
               }
             ]}
           >
@@ -555,14 +524,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
             rules={[
               {
                 required: true,
-                message: intl.formatMessage(
-                  {
-                    id: 'common.form.rule.input'
-                  },
-                  {
-                    name: intl.formatMessage({ id: 'models.form.replicas' })
-                  }
-                )
+                message: getRuleMessage('input', 'models.form.replicas')
               }
             ]}
           >
diff --git a/src/pages/llmodels/download/target-form.tsx b/src/pages/llmodels/download/target-form.tsx
index 85b5be93..4225db12 100644
--- a/src/pages/llmodels/download/target-form.tsx
+++ b/src/pages/llmodels/download/target-form.tsx
@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
 import SealAutoComplete from '@/components/seal-form/auto-complete';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import useAppUtils from '@/hooks/use-app-utils';
 import { ModelFile as FormData } from '@/pages/resources/config/types';
 import { useIntl } from '@umijs/max';
 import { Form, Typography } from 'antd';
@@ -15,6 +16,7 @@ interface TargetFormProps {
 
 const TargetForm: React.FC<TargetFormProps> = (props) => {
   const { onOk, source } = props;
+  const { getRuleMessage } = useAppUtils();
   const intl = useIntl();
   const [form] = Form.useForm();
 
@@ -31,12 +33,7 @@ const TargetForm: React.FC<TargetFormProps> = (props) => {
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'models.table.name' }) }
-              )
+              message: getRuleMessage('input', 'models.table.name')
             }
           ]}
         >
@@ -88,12 +85,7 @@ const TargetForm: React.FC<TargetFormProps> = (props) => {
         rules={[
           {
             required: true,
-            message: intl.formatMessage(
-              {
-                id: 'common.form.rule.select'
-              },
-              { name: intl.formatMessage({ id: 'models.form.source' }) }
-            )
+            message: getRuleMessage('select', 'models.form.source')
           }
         ]}
       >
@@ -104,12 +96,7 @@ const TargetForm: React.FC<TargetFormProps> = (props) => {
         rules={[
           {
             required: true,
-            message: intl.formatMessage(
-              {
-                id: 'common.form.rule.input'
-              },
-              { name: intl.formatMessage({ id: 'common.table.name' }) }
-            )
+            message: getRuleMessage('input', 'common.table.name')
           }
         ]}
       >