fix(style): form field item

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

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}

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,
+        ...titleConfig,
-        left: 'center',
-        textStyle: {
-          fontSize: 14
-        },
         text: title
       },
       yAxis: {

src/components/echarts/config.ts

@@ -76,7 +76,8 @@ export const title = {
   show: true,
   left: 'center',
   textStyle: {
-    fontSize: 14
+    fontSize: 12,
+    color: '#000'
   },
   text: ''
 };

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,
+        ...titleConfig,
-        left: 'center',
-        textStyle: {
-          fontSize: 14
-        },
         text: title
       },
       yAxis: {

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

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

src/components/seal-form/components/wrapper.less

@@ -1,21 +1,16 @@
-:local(.wrapper) {
+:local(.wrapper-box) {
-  @wrapheight: 54px;
-  @inputheight: 32px;
   @borderRadius: 8px;
-  @input-inner-padding: 12px;
-  @bgColor: transparent;
 
   position: relative;
   display: flex;
-  flex-direction: column;
+  justify-content: flex-start;
-  align-items: 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;

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,18 +28,20 @@ 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}
     >
+      <div className={classNames(wrapperStyle.wrapper)} onClick={onClick}>
         <label
           onClick={onClick}
           className={classNames(
@@ -55,7 +58,10 @@ const Wrapper: React.FC<WrapperProps> = ({
           ></LabelInfo>
         </label>
         {extra && <div className={wrapperStyle.extra}>{extra}</div>}
-      {children}
+        <div className={wrapperStyle['inner-wrapper']}>{children}</div>
+      </div>
+
+      {addAfter && <div className={wrapperStyle['add-after']}>{addAfter}</div>}
     </div>
   );
 };

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

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

src/components/seal-form/types.ts

@@ -6,4 +6,5 @@ export interface SealFormItemProps {
   isInFormItems?: boolean;
   description?: React.ReactNode;
   extra?: React.ReactNode;
+  addAfter?: React.ReactNode;
 }

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 {
+  font-family: 'noto sans', sans-serif;
-  //   box-shadow: 0 0 0 var(--ant-slider-handle-line-width)
+  -moz-osx-font-smoothing: grayscale;
-  //     var(--ant-slider-handle-color);
+  -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;

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',

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

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': '保存',

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
+            <span style={{ padding: '9px 0' }}>
-              style={{ fontSize: 'var(--font-size-large)', 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)' }}>
+            <span>{intl.formatMessage({ id: 'dashboard.systemload' })}</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={
+        left={<span>{intl.formatMessage({ id: 'dashboard.usage' })}</span>}
-          <span style={{ fontSize: 'var(--font-size-large)' }}>
-            {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,10 +152,10 @@ const LoginForm = () => {
         <div>{renderLogo()}</div>
         <SelectLang icon={<GlobalOutlined />} reload={false} />
       </div>
-
+      <div>
         <Form
           form={form}
-        style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
+          style={{ width: '400px', margin: '0 auto', paddingTop: '10%' }}
           onFinish={handleLogin}
         >
           {renderWelCome(intl)}
@@ -200,10 +200,11 @@ const LoginForm = () => {
             </Checkbox>
           </Form.Item>
           <Button htmlType="submit" type="primary" block>
-          {intl.formatMessage({ id: 'menu.login' })}
+            {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>