fix(style): form field item

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>
         )}

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>
           }

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]}>

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()}
           />
         }
       />

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>

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 = () => {

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>
   );
 };

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>