From ed3f9f7e96d8a0f5a9a4b5eab28ce621f7a9e8cd Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 4 Jul 2024 10:46:25 +0800
Subject: [PATCH] fix(style): form field item

---
 src/assets/styles/common.less                 | 24 +++++
 src/components/copy-button/index.tsx          |  4 +-
 src/components/echarts/bar-chart.tsx          |  7 +-
 src/components/echarts/config.ts              |  3 +-
 src/components/echarts/line-chart.tsx         |  7 +-
 src/components/page-tools/index.less          |  6 +-
 src/components/seal-form/auto-complete.tsx    |  5 +
 .../seal-form/components/wrapper.less         | 69 +++++++++----
 .../seal-form/components/wrapper.tsx          | 44 +++++----
 src/components/seal-form/seal-input.tsx       |  2 +
 src/components/seal-form/seal-textarea.tsx    |  2 +
 src/components/seal-form/types.ts             |  1 +
 src/global.less                               | 16 ++-
 src/locales/en-US/common.ts                   |  5 +-
 src/locales/en-US/users.ts                    |  2 +-
 src/locales/zh-CN/common.ts                   |  1 +
 src/pages/api-keys/components/add-apikey.tsx  |  2 +-
 .../dashboard/components/active-table.tsx     |  4 +-
 .../dashboard/components/system-load.tsx      | 14 ++-
 src/pages/dashboard/components/usage.tsx      |  9 +-
 src/pages/llmodels/components/add-modal.tsx   |  8 +-
 src/pages/llmodels/index.tsx                  |  3 +
 src/pages/login/components/login-form.tsx     | 99 ++++++++++---------
 .../playground/components/params-settings.tsx |  4 +-
 24 files changed, 214 insertions(+), 127 deletions(-)

diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less
index dd10243c..7aa04dd4 100644
--- a/src/assets/styles/common.less
+++ b/src/assets/styles/common.less
@@ -62,3 +62,27 @@
   display: flex;
   flex-direction: column;
 }
+
+.font-size-12 {
+  font-size: var(--font-size-base);
+}
+
+.font-size-14 {
+  font-size: var(--font-size-middle);
+}
+
+.font-size-16 {
+  font-size: var(--font-size-large);
+}
+
+.font-400 {
+  font-weight: var(--font-weight-normal);
+}
+
+.font-600 {
+  font-weight: var(--font-weight-medium);
+}
+
+.font-700 {
+  font-weight: var(--font-weight-bold);
+}
diff --git a/src/components/copy-button/index.tsx b/src/components/copy-button/index.tsx
index bade7c4f..70c91406 100644
--- a/src/components/copy-button/index.tsx
+++ b/src/components/copy-button/index.tsx
@@ -5,12 +5,14 @@ import { Button } from 'antd';
 type CopyButtonProps = {
   text: string;
   disabled?: boolean;
+  type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
   size?: 'small' | 'middle' | 'large';
 };
 
 const CopyButton: React.FC<CopyButtonProps> = ({
   text,
   disabled,
+  type = 'text',
   size = 'middle'
 }) => {
   const { copied, copyToClipboard } = useCopyToClipboard();
@@ -21,7 +23,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   };
   return (
     <Button
-      type="text"
+      type={type}
       shape="circle"
       size={size}
       onClick={handleCopy}
diff --git a/src/components/echarts/bar-chart.tsx b/src/components/echarts/bar-chart.tsx
index 82b9fb4b..1d17d09a 100644
--- a/src/components/echarts/bar-chart.tsx
+++ b/src/components/echarts/bar-chart.tsx
@@ -3,6 +3,7 @@ import {
   barItemConfig,
   grid,
   legend,
+  title as titleConfig,
   tooltip,
   xAxis,
   yAxis
@@ -65,11 +66,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
     const optionsConfig = {
       ...options,
       title: {
-        show: true,
-        left: 'center',
-        textStyle: {
-          fontSize: 14
-        },
+        ...titleConfig,
         text: title
       },
       yAxis: {
diff --git a/src/components/echarts/config.ts b/src/components/echarts/config.ts
index 01f0ba9d..5213352f 100644
--- a/src/components/echarts/config.ts
+++ b/src/components/echarts/config.ts
@@ -76,7 +76,8 @@ export const title = {
   show: true,
   left: 'center',
   textStyle: {
-    fontSize: 14
+    fontSize: 12,
+    color: '#000'
   },
   text: ''
 };
diff --git a/src/components/echarts/line-chart.tsx b/src/components/echarts/line-chart.tsx
index 552d5dad..3a35be2c 100644
--- a/src/components/echarts/line-chart.tsx
+++ b/src/components/echarts/line-chart.tsx
@@ -3,6 +3,7 @@ import {
   grid,
   legend,
   lineItemConfig,
+  title as titleConfig,
   tooltip,
   xAxis,
   yAxis
@@ -67,11 +68,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
     const optionsConfig = {
       ...options,
       title: {
-        show: true,
-        left: 'center',
-        textStyle: {
-          fontSize: 14
-        },
+        ...titleConfig,
         text: title
       },
       yAxis: {
diff --git a/src/components/page-tools/index.less b/src/components/page-tools/index.less
index 8e384cf6..6420c778 100644
--- a/src/components/page-tools/index.less
+++ b/src/components/page-tools/index.less
@@ -3,14 +3,16 @@
   justify-content: space-between;
   align-items: center;
   margin-top: 70px;
+
   .left {
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: var(--font-size-middle);
   }
+
   .right {
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: var(--font-size-middle);
   }
 }
diff --git a/src/components/seal-form/auto-complete.tsx b/src/components/seal-form/auto-complete.tsx
index 9981e59c..9c3863cd 100644
--- a/src/components/seal-form/auto-complete.tsx
+++ b/src/components/seal-form/auto-complete.tsx
@@ -14,6 +14,9 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
     description,
     isInFormItems = true,
     onSelect,
+    extra,
+    style,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -64,11 +67,13 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
   return (
     <Wrapper
       status={status}
+      extra={extra}
       label={label || (placeholder as string)}
       isFocus={isFocus}
       required={required}
       description={description}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <AutoComplete
diff --git a/src/components/seal-form/components/wrapper.less b/src/components/seal-form/components/wrapper.less
index 954ea44f..28f14267 100644
--- a/src/components/seal-form/components/wrapper.less
+++ b/src/components/seal-form/components/wrapper.less
@@ -1,21 +1,16 @@
-:local(.wrapper) {
-  @wrapheight: 54px;
-  @inputheight: 32px;
+:local(.wrapper-box) {
   @borderRadius: 8px;
-  @input-inner-padding: 12px;
-  @bgColor: transparent;
 
   position: relative;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  justify-content: flex-start;
+  align-items: center;
+  padding-inline: 12px;
   height: 54px;
   border-width: var(--ant-line-width);
   border-style: var(--ant-line-type);
   border-color: var(--ant-color-border);
   border-radius: @borderRadius;
-  padding-inline: 12px;
-  padding-block: 20px 0;
   background-color: var(--color-white-1);
 
   &.filled {
@@ -33,13 +28,6 @@
     box-shadow: none;
   }
 
-  .extra {
-    position: absolute;
-    right: 12px;
-    top: 8px;
-    z-index: 10;
-  }
-
   &.seal-input-wrapper-disabled {
     background-color: var(--ant-color-bg-container-disabled);
     cursor: not-allowed;
@@ -86,13 +74,48 @@
     background-color: var(--ant-input-active-bg);
   }
 
+  .add-after {
+    position: relative;
+    color: var(--ant-color-text-quaternary);
+    font-size: 14px;
+    padding-right: calc(var(--ant-padding-sm) - 1px);
+  }
+}
+
+:local(.wrapper) {
+  @wrapheight: 54px;
+  @inputheight: 32px;
+  @borderRadius: 8px;
+  @input-inner-padding: 12px;
+  @bgColor: transparent;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  padding-block: 20px 0;
+
+  .extra {
+    position: absolute;
+    right: 12px;
+    top: 8px;
+    z-index: 10;
+  }
+
+  .inner-wrapper {
+    width: 100%;
+  }
+
   .label {
     position: absolute;
-    left: 24px;
+    left: 12px;
     color: rgba(0, 0, 0, 45%);
     font-size: var(--font-size-base);
     line-height: 1;
     pointer-events: all;
+    display: flex;
+    width: max-content;
     z-index: 5;
 
     &.isfoucs-has-value {
@@ -116,6 +139,10 @@
     height: @inputheight !important;
   }
 
+  :global(.ant-input-number-input-wrap) {
+    flex: 1;
+  }
+
   :global(.ant-select-selector) {
     border: none !important;
     padding-block: 5px;
@@ -133,6 +160,7 @@
 
   :global(.ant-select-auto-complete) :global(.ant-select-selector) {
     padding-inline: 0 !important;
+    flex: 1;
   }
 
   :global(.ant-select-arrow) {
@@ -152,7 +180,8 @@
   // ==================== input ====================
   :global(.ant-input),
   :global(.ant-input-password) {
-    width: 100%;
+    // width: 100%;
+    flex: 1;
     display: flex;
     align-items: center;
     border: none;
@@ -164,7 +193,8 @@
   }
 
   :global(.ant-input.seal-textarea) {
-    width: 100%;
+    // width: 100%;
+    flex: 1;
   }
 
   :global(.ant-input-number) {
@@ -197,6 +227,7 @@
   }
 
   :global(input.ant-input-number-input) {
+    flex: 1;
     height: @inputheight !important;
     padding-block: 5px;
     padding-inline: @input-inner-padding;
diff --git a/src/components/seal-form/components/wrapper.tsx b/src/components/seal-form/components/wrapper.tsx
index c0e1fb42..a86a431c 100644
--- a/src/components/seal-form/components/wrapper.tsx
+++ b/src/components/seal-form/components/wrapper.tsx
@@ -12,6 +12,7 @@ interface WrapperProps {
   className?: string;
   disabled?: boolean;
   extra?: React.ReactNode;
+  addAfter?: React.ReactNode;
   variant?: string;
   onClick?: () => void;
 }
@@ -27,35 +28,40 @@ const Wrapper: React.FC<WrapperProps> = ({
   required,
   extra,
   variant,
+  addAfter,
   onClick
 }) => {
   return (
     <div
       className={classNames(
-        wrapperStyle.wrapper,
+        wrapperStyle['wrapper-box'],
         wrapperStyle[`validate-status-${status}`],
+        addAfter ? wrapperStyle['seal-input-wrapper-addafter'] : '',
         disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
         className ? wrapperStyle[className] : ''
       )}
-      onClick={onClick}
     >
-      <label
-        onClick={onClick}
-        className={classNames(
-          wrapperStyle['label'],
-          isFocus
-            ? wrapperStyle['isfoucs-has-value']
-            : wrapperStyle['blur-no-value']
-        )}
-      >
-        <LabelInfo
-          label={label}
-          required={required}
-          description={description}
-        ></LabelInfo>
-      </label>
-      {extra && <div className={wrapperStyle.extra}>{extra}</div>}
-      {children}
+      <div className={classNames(wrapperStyle.wrapper)} onClick={onClick}>
+        <label
+          onClick={onClick}
+          className={classNames(
+            wrapperStyle['label'],
+            isFocus
+              ? wrapperStyle['isfoucs-has-value']
+              : wrapperStyle['blur-no-value']
+          )}
+        >
+          <LabelInfo
+            label={label}
+            required={required}
+            description={description}
+          ></LabelInfo>
+        </label>
+        {extra && <div className={wrapperStyle.extra}>{extra}</div>}
+        <div className={wrapperStyle['inner-wrapper']}>{children}</div>
+      </div>
+
+      {addAfter && <div className={wrapperStyle['add-after']}>{addAfter}</div>}
     </div>
   );
 };
diff --git a/src/components/seal-form/seal-input.tsx b/src/components/seal-form/seal-input.tsx
index 0c7314ac..25105e6a 100644
--- a/src/components/seal-form/seal-input.tsx
+++ b/src/components/seal-form/seal-input.tsx
@@ -16,6 +16,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
     description,
     isInFormItems = true,
     variant,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -71,6 +72,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
       required={required}
       description={description}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <Input
diff --git a/src/components/seal-form/seal-textarea.tsx b/src/components/seal-form/seal-textarea.tsx
index 5f90fe6a..11d75c99 100644
--- a/src/components/seal-form/seal-textarea.tsx
+++ b/src/components/seal-form/seal-textarea.tsx
@@ -18,6 +18,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     description,
     variant,
     extra,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -85,6 +86,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
       className="seal-textarea-wrapper"
       extra={extra}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <Input.TextArea
diff --git a/src/components/seal-form/types.ts b/src/components/seal-form/types.ts
index 0d134baa..78e0f299 100644
--- a/src/components/seal-form/types.ts
+++ b/src/components/seal-form/types.ts
@@ -6,4 +6,5 @@ export interface SealFormItemProps {
   isInFormItems?: boolean;
   description?: React.ReactNode;
   extra?: React.ReactNode;
+  addAfter?: React.ReactNode;
 }
diff --git a/src/global.less b/src/global.less
index f137c665..681be492 100644
--- a/src/global.less
+++ b/src/global.less
@@ -87,7 +87,7 @@ html {
     }
 
     &.ant-btn {
-      --ant-button-content-font-size-lg: 13px;
+      --ant-button-content-font-size-lg: 12px;
       --ant-button-content-font-size: 12px;
       --ant-button-content-font-size-sm: 12px;
     }
@@ -133,14 +133,20 @@ body * {
 }
 
 body {
-  // .ant-slider:hover .ant-slider-handle::after {
-  //   box-shadow: 0 0 0 var(--ant-slider-handle-line-width)
-  //     var(--ant-slider-handle-color);
-  // }
+  font-family: 'noto sans', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
   .ant-modal-confirm-title {
     display: none;
   }
 
+  .ant-select-selector {
+    .ant-select-selection-item {
+      font-weight: var(--font-weight-normal);
+    }
+  }
+
   .ant-checkbox {
     .ant-checkbox-inner {
       border-radius: var(--checkbox-border-radius) !important;
diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts
index e9b2bbf5..4ee2639d 100644
--- a/src/locales/en-US/common.ts
+++ b/src/locales/en-US/common.ts
@@ -4,6 +4,7 @@ export default {
   'common.button.readonly': 'Readonly',
   'common.button.editmode': 'Edit mode',
   'common.button.add': 'Add',
+  'common.button.login': 'Log In',
   'common.button.continue': 'Continue',
   'common.button.upload': 'Upload',
   'common.button.save': 'Save',
@@ -92,8 +93,8 @@ export default {
   'common.data.none': 'No Data',
   'common.action.none': 'Not Available',
   'common.button.addfile': 'Add File',
-  'common.logout.msg': 'Logout succeeded',
-  'common.button.logout': 'Logout',
+  'common.logout.msg': 'Log out succeeded',
+  'common.button.logout': 'Log out',
   'common.form.rule.select': 'please select {name}',
   'common.form.rule.input': '{name} is required',
   'common.form.key': 'the same key exists',
diff --git a/src/locales/en-US/users.ts b/src/locales/en-US/users.ts
index 63df31d1..5009c508 100644
--- a/src/locales/en-US/users.ts
+++ b/src/locales/en-US/users.ts
@@ -25,5 +25,5 @@ export default {
   'users.password.confirm': 'Confirm New Password',
   'users.password.confirm.empty': 'Please confirm the new password.',
   'users.password.confirm.error': 'The two passwords entered do not match.',
-  'users.login.title': 'Login GPUStack'
+  'users.login.title': 'Log in to GPUStack'
 };
diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts
index bc65c069..25034163 100644
--- a/src/locales/zh-CN/common.ts
+++ b/src/locales/zh-CN/common.ts
@@ -4,6 +4,7 @@ export default {
   'common.button.readonly': '只读',
   'common.button.editmode': '编辑模式',
   'common.button.add': '添加',
+  'common.button.login': '登录',
   'common.button.continue': '继续',
   'common.button.upload': '上传',
   'common.button.save': '保存',
diff --git a/src/pages/api-keys/components/add-apikey.tsx b/src/pages/api-keys/components/add-apikey.tsx
index dc420797..ab63e124 100644
--- a/src/pages/api-keys/components/add-apikey.tsx
+++ b/src/pages/api-keys/components/add-apikey.tsx
@@ -183,7 +183,7 @@ const AddModal: React.FC<AddModalProps> = ({
             <SealInput.Input
               label={intl.formatMessage({ id: 'apikeys.form.apikey' })}
               value={apikeyValue}
-              addonAfter={<CopyButton text={apikeyValue}></CopyButton>}
+              addAfter={<CopyButton text={apikeyValue}></CopyButton>}
             ></SealInput.Input>
           </Form.Item>
         )}
diff --git a/src/pages/dashboard/components/active-table.tsx b/src/pages/dashboard/components/active-table.tsx
index 5e39f979..50f418f9 100644
--- a/src/pages/dashboard/components/active-table.tsx
+++ b/src/pages/dashboard/components/active-table.tsx
@@ -114,9 +114,7 @@ const ActiveTable = () => {
         <PageTools
           style={{ margin: '26px 0px' }}
           left={
-            <span
-              style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
-            >
+            <span style={{ padding: '9px 0' }}>
               {intl.formatMessage({ id: 'dashboard.activeModels' })}
             </span>
           }
diff --git a/src/pages/dashboard/components/system-load.tsx b/src/pages/dashboard/components/system-load.tsx
index 64f9ce9a..7b80d938 100644
--- a/src/pages/dashboard/components/system-load.tsx
+++ b/src/pages/dashboard/components/system-load.tsx
@@ -4,6 +4,7 @@ import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
 import { useIntl } from '@umijs/max';
 import { Col, DatePicker, Row } from 'antd';
+import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useContext, useEffect, useState } from 'react';
 import UitilBar from '../../../components/util-bar';
@@ -19,8 +20,9 @@ const SystemLoad = () => {
   const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
   const thresholds = [0.5, 0.7, 1];
   const height = 400;
+  const currentDate = dayjs().format('YYYY-MM-DD');
 
-  const handleSelectDate = (date: string) => {};
+  const handleSelectDate = (date: any) => {};
 
   useEffect(() => {
     if (size.width < breakpoints.xl) {
@@ -36,12 +38,14 @@ const SystemLoad = () => {
         <PageTools
           style={{ margin: '26px 0px' }}
           left={
-            <span style={{ fontSize: 'var(--font-size-large)' }}>
-              {intl.formatMessage({ id: 'dashboard.systemload' })}
-            </span>
+            <span>{intl.formatMessage({ id: 'dashboard.systemload' })}</span>
           }
           right={
-            <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
+            <DatePicker
+              onChange={handleSelectDate}
+              style={{ width: 300 }}
+              defaultValue={dayjs()}
+            />
           }
         />
         <Row style={{ width: '100%' }} gutter={[0, 20]}>
diff --git a/src/pages/dashboard/components/usage.tsx b/src/pages/dashboard/components/usage.tsx
index 71c25379..fce8d457 100644
--- a/src/pages/dashboard/components/usage.tsx
+++ b/src/pages/dashboard/components/usage.tsx
@@ -59,7 +59,7 @@ const Usage = () => {
 
   const data = useContext(DashboardContext)?.model_usage || {};
 
-  const handleSelectDate = (dateString: string) => {};
+  const handleSelectDate = (date: any) => {};
 
   const generateData = () => {
     const requestList: {
@@ -187,16 +187,13 @@ const Usage = () => {
     <>
       <PageTools
         style={{ margin: '26px 0px' }}
-        left={
-          <span style={{ fontSize: 'var(--font-size-large)' }}>
-            {intl.formatMessage({ id: 'dashboard.usage' })}
-          </span>
-        }
+        left={<span>{intl.formatMessage({ id: 'dashboard.usage' })}</span>}
         right={
           <DatePicker
             onChange={handleSelectDate}
             style={{ width: 300 }}
             picker="month"
+            defaultValue={dayjs()}
           />
         }
       />
diff --git a/src/pages/llmodels/components/add-modal.tsx b/src/pages/llmodels/components/add-modal.tsx
index b67cb6e0..a27f7c46 100644
--- a/src/pages/llmodels/components/add-modal.tsx
+++ b/src/pages/llmodels/components/add-modal.tsx
@@ -5,6 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { convertFileSize } from '@/utils';
+import { SearchOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Form, Input, Modal } from 'antd';
 import _ from 'lodash';
@@ -145,9 +146,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             onChange={handleInputRepoChange}
             onSearch={debounceSearch}
             options={repoOptions}
+            addAfter={
+              <span style={{ position: 'relative', top: '2px' }}>
+                <SearchOutlined></SearchOutlined>
+              </span>
+            }
             description={intl.formatMessage({ id: 'models.form.repoid.desc' })}
           >
-            <Input.Search style={{ width: '520px' }}></Input.Search>
+            <Input></Input>
           </SealAutoComplete>
         </Form.Item>
         <Form.Item<FormData>
diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx
index 3d6830cf..08cf7896 100644
--- a/src/pages/llmodels/index.tsx
+++ b/src/pages/llmodels/index.tsx
@@ -162,6 +162,9 @@ const Models: React.FC = () => {
     _.each(list, (data: any) => {
       updateChunkedList(data);
     });
+    if (!dataSource.length) {
+      fetchData();
+    }
   };
 
   const createModelsChunkRequest = () => {
diff --git a/src/pages/login/components/login-form.tsx b/src/pages/login/components/login-form.tsx
index 0f2d3aa1..45d8be78 100644
--- a/src/pages/login/components/login-form.tsx
+++ b/src/pages/login/components/login-form.tsx
@@ -152,57 +152,58 @@ const LoginForm = () => {
         <div>{renderLogo()}</div>
         <SelectLang icon={<GlobalOutlined />} reload={false} />
       </div>
-
-      <Form
-        form={form}
-        style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
-        onFinish={handleLogin}
-      >
-        {renderWelCome(intl)}
-        <Form.Item
-          name="username"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                { name: intl.formatMessage({ id: 'common.form.username' }) }
-              )
-            }
-          ]}
+      <div>
+        <Form
+          form={form}
+          style={{ width: '400px', margin: '0 auto', paddingTop: '10%' }}
+          onFinish={handleLogin}
         >
-          <SealInput.Input
-            label={intl.formatMessage({ id: 'common.form.username' })}
-            prefix={<UserOutlined />}
-          />
-        </Form.Item>
+          {renderWelCome(intl)}
+          <Form.Item
+            name="username"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  { id: 'common.form.rule.input' },
+                  { name: intl.formatMessage({ id: 'common.form.username' }) }
+                )
+              }
+            ]}
+          >
+            <SealInput.Input
+              label={intl.formatMessage({ id: 'common.form.username' })}
+              prefix={<UserOutlined />}
+            />
+          </Form.Item>
 
-        <Form.Item
-          name="password"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                { name: intl.formatMessage({ id: 'common.form.password' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Password
-            prefix={<LockOutlined />}
-            label={intl.formatMessage({ id: 'common.form.password' })}
-          />
-        </Form.Item>
-        <Form.Item name="autoLogin" valuePropName="checked">
-          <Checkbox style={{ marginLeft: 10 }}>
-            {intl.formatMessage({ id: 'common.login.rember' })}
-          </Checkbox>
-        </Form.Item>
-        <Button htmlType="submit" type="primary" block>
-          {intl.formatMessage({ id: 'menu.login' })}
-        </Button>
-      </Form>
+          <Form.Item
+            name="password"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  { id: 'common.form.rule.input' },
+                  { name: intl.formatMessage({ id: 'common.form.password' }) }
+                )
+              }
+            ]}
+          >
+            <SealInput.Password
+              prefix={<LockOutlined />}
+              label={intl.formatMessage({ id: 'common.form.password' })}
+            />
+          </Form.Item>
+          <Form.Item name="autoLogin" valuePropName="checked">
+            <Checkbox style={{ marginLeft: 10 }}>
+              {intl.formatMessage({ id: 'common.login.rember' })}
+            </Checkbox>
+          </Form.Item>
+          <Button htmlType="submit" type="primary" block>
+            {intl.formatMessage({ id: 'common.button.login' })}
+          </Button>
+        </Form>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx
index 10ea87e1..16d4092e 100644
--- a/src/pages/playground/components/params-settings.tsx
+++ b/src/pages/playground/components/params-settings.tsx
@@ -135,7 +135,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
       onFinishFailed={handleOnFinishFailed}
     >
       <div>
-        <h3 className="m-b-20 m-l-10">
+        <h3 className="m-b-20 m-l-10 font-size-14">
           {intl.formatMessage({ id: 'playground.model' })}
         </h3>
         <Form.Item<ParamsSettingsFormProps>
@@ -147,7 +147,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
             label={intl.formatMessage({ id: 'playground.model' })}
           ></SealSelect>
         </Form.Item>
-        <h3 className="m-b-20 m-l-10 flex-between flex-center">
+        <h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14">
           <span>{intl.formatMessage({ id: 'playground.parameters' })}</span>
         </h3>
         <Form.Item<ParamsSettingsFormProps>