style: page styles

src/config/breakpoints.ts

@@ -0,0 +1,8 @@
+export default {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600
+};

src/hooks/use-window-resize.ts

@@ -0,0 +1,60 @@
+import breakpoints from '@/config/breakpoints';
+import { useEffect, useState } from 'react';
+
+export default function useWindowResize() {
+  const [size, setSize] = useState<{ width: number; height: number }>({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+  const [isTablet, setIsTablet] = useState<boolean>(false);
+  const [isDesktop, setIsDesktop] = useState<boolean>(false);
+  const [currentPoint, setCurrentPoint] = useState<string>('');
+
+  const checkBreakpoint = (width: number) => {
+    if (width < breakpoints.sm) {
+      setIsMobile(true);
+      setIsTablet(false);
+      setIsDesktop(false);
+      setCurrentPoint('sm');
+      return;
+    }
+    if (width < breakpoints.md) {
+      setIsMobile(false);
+      setIsTablet(true);
+      setIsDesktop(false);
+      setCurrentPoint('md');
+      return;
+    }
+    if (width < breakpoints.lg) {
+      setIsMobile(false);
+      setIsTablet(false);
+      setIsDesktop(true);
+      setCurrentPoint('lg');
+      return;
+    }
+    setIsMobile(false);
+    setIsTablet(false);
+    setIsDesktop(true);
+    setCurrentPoint('xl');
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    checkBreakpoint(size.width);
+  }, [size.width]);
+
+  return { size, isMobile, isTablet, isDesktop, currentPoint };
+}

src/pages/dashboard/components/over-view.tsx

@@ -65,7 +65,14 @@ const Overview: React.FC = (props) => {
     <div>
       <Row gutter={[24, 20]} className={styles.row}>
         {overviewConfigs.map((config, index) => (
-          <Col span={5} key={config.key}>
+          <Col
+            xs={{ flex: '100%' }}
+            sm={{ flex: '50%' }}
+            md={{ flex: '30%' }}
+            lg={{ flex: '20%' }}
+            xl={{ flex: '20%' }}
+            key={config.key}
+          >
             {renderCardItem({
               label: config.label,
               value: renderValue(data[config.key] || 0),

src/pages/dashboard/components/system-load.tsx

@@ -1,7 +1,10 @@
 import CardWrapper from '@/components/card-wrapper';
 import LiquidChart from '@/components/charts/liquid';
 import PageTools from '@/components/page-tools';
+import breakpoints from '@/config/breakpoints';
+import useWindowResize from '@/hooks/use-window-resize';
 import { Col, DatePicker, Row } from 'antd';
+import { useEffect, useState } from 'react';
 import ResourceUtilization from './resource-utilization';
 
 const SystemLoad = () => {
@@ -11,11 +14,23 @@ const SystemLoad = () => {
     'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%,  rgba(255, 120, 117,.8) 100%)'
   ];
 
+  const { size } = useWindowResize();
+  const [paddingRight, setPaddingRight] = useState<string>('20px');
+  const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
+  const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
   const thresholds = [0.5, 0.7, 1];
   const height = 400;
 
   const handleSelectDate = (date: string) => {};
 
+  useEffect(() => {
+    if (size.width < breakpoints.xl) {
+      setPaddingRight('0');
+    } else {
+      setPaddingRight('20px');
+    }
+  }, [size.width]);
+
   return (
     <div>
       <div className="system-load">
@@ -31,15 +46,22 @@ const SystemLoad = () => {
           }
         />
         <Row style={{ width: '100%' }} gutter={[0, 20]}>
-          <Col span={16} style={{ paddingRight: '20px' }}>
+          <Col
-            <CardWrapper style={{ height: height }}>
+            xs={24}
+            sm={24}
+            md={24}
+            lg={24}
+            xl={16}
+            style={{ paddingRight: paddingRight }}
+          >
+            <CardWrapper style={{ height: height, width: '100%' }}>
               <ResourceUtilization />
             </CardWrapper>
           </Col>
-          <Col span={8}>
+          <Col xs={24} sm={24} md={24} lg={24} xl={8}>
-            <CardWrapper style={{ height: '400px' }}>
+            <CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
-              <Row style={{ height: height }}>
+              <Row style={{ height: largeChartHeight, width: '100%' }}>
-                <Col span={12} style={{ height: height / 2 - 10 }}>
+                <Col span={12} style={{ height: smallChartHeight }}>
                   <LiquidChart
                     title="GPU Compute Utilization"
                     percent={0.2}
@@ -47,7 +69,7 @@ const SystemLoad = () => {
                     rangColor={colors}
                   ></LiquidChart>
                 </Col>
-                <Col span={12} style={{ height: height / 2 - 10 }}>
+                <Col span={12} style={{ height: smallChartHeight }}>
                   <LiquidChart
                     title="GPU Memory Utilization"
                     percent={0.3}
@@ -55,7 +77,7 @@ const SystemLoad = () => {
                     rangColor={colors}
                   ></LiquidChart>
                 </Col>
-                <Col span={12} style={{ height: height / 2 - 10 }}>
+                <Col span={12} style={{ height: smallChartHeight }}>
                   <LiquidChart
                     title="CPU Compute Utilization"
                     percent={0.8}
@@ -63,7 +85,7 @@ const SystemLoad = () => {
                     rangColor={colors}
                   ></LiquidChart>
                 </Col>
-                <Col span={12} style={{ height: height / 2 - 10 }}>
+                <Col span={12} style={{ height: smallChartHeight }}>
                   <LiquidChart
                     title="CPU Memory Utilization"
                     percent={0.7}

src/pages/dashboard/components/usage.tsx

@@ -2,8 +2,12 @@ import CardWrapper from '@/components/card-wrapper';
 import ColumnBar from '@/components/charts/column-bar';
 import HBar from '@/components/charts/h-bar';
 import PageTools from '@/components/page-tools';
+import breakpoints from '@/config/breakpoints';
+import useWindowResize from '@/hooks/use-window-resize';
 import { generateRandomArray } from '@/utils';
 import { Col, DatePicker, Row } from 'antd';
+import { useEffect, useState } from 'react';
+
 const { RangePicker } = DatePicker;
 const times = [
   'june 1',
@@ -86,10 +90,18 @@ const tokenUsage = TokensData.map((val, i) => {
 });
 
 const Usage = () => {
-  const bgColor = '#fff';
+  const { size } = useWindowResize();
-  const handleSelectDate = (dateString: string) => {
+  const [paddingRight, setPaddingRight] = useState<string>('20px');
-    console.log('dateString============', dateString);
+
-  };
+  const handleSelectDate = (dateString: string) => {};
+
+  useEffect(() => {
+    if (size.width < breakpoints.xl) {
+      setPaddingRight('0');
+    } else {
+      setPaddingRight('20px');
+    }
+  }, [size.width]);
 
   return (
     <>
@@ -101,9 +113,16 @@ const Usage = () => {
         }
       />
       <Row style={{ width: '100%' }} gutter={[0, 20]}>
-        <Col span={16} style={{ paddingRight: '20px' }}>
+        <Col
-          <CardWrapper>
+          xs={24}
-            <Row>
+          sm={24}
+          md={24}
+          lg={24}
+          xl={16}
+          style={{ paddingRight: paddingRight }}
+        >
+          <CardWrapper style={{ width: '100%' }}>
+            <Row style={{ width: '100%' }}>
               <Col span={12}>
                 <ColumnBar
                   title="API Request"
@@ -125,7 +144,7 @@ const Usage = () => {
             </Row>
           </CardWrapper>
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={24} lg={24} xl={8}>
           <CardWrapper>
             <HBar
               title="Top Users"

src/pages/llmodels/components/add-modal.tsx

@@ -26,8 +26,7 @@ type AddModalProps = {
 
 const sourceOptions = [
   { label: 'Huggingface', value: 'huggingface', key: 'huggingface' },
-  { label: 'Ollama', value: 'ollama_library', key: 'ollama_library' },
+  { label: 'Ollama', value: 'ollama_library', key: 'ollama_library' }
-  { label: 'S3', value: 's3', key: 's3' }
 ];
 
 const AddModal: React.FC<AddModalProps> = (props) => {

src/pages/playground/style/ground-left.less

@@ -1,6 +1,6 @@
 .ground-left {
   position: relative;
-  height: 100vh;
+  height: calc(100vh - 84px);
   padding-bottom: 120px;
 
   .message-list-wrap {

src/pages/playground/style/play-ground.less

@@ -1,20 +1,24 @@
 .play-ground {
   display: flex;
   align-items: flex-start;
+
   .chat {
     flex: 1;
     display: flex;
     flex-direction: column;
   }
+
   .params {
     // width: 465px;
     padding: 20px;
   }
+
   .divider-line {
     width: 1px;
+
     .ant-divider {
       margin: 0;
-      min-height: 100vh;
+      min-height: calc(100vh - 84px);
     }
   }
 }

src/pages/profile/index.tsx

@@ -1,3 +1,4 @@
+import CardWrapper from '@/components/card-wrapper';
 import FormButtons from '@/components/form-buttons';
 import SealInput from '@/components/seal-form/seal-input';
 import { PasswordReg } from '@/config';
@@ -42,14 +43,17 @@ const Profile: React.FC = () => {
         }}
         extra={[]}
       >
-        <Form
+        <CardWrapper
-          style={{ width: '524px' }}
+          style={{ padding: '32px', marginTop: '70px', width: 'max-content' }}
-          name="profileForm"
-          form={form}
-          onFinish={handleOnFinish}
-          onFinishFailed={handleOnFinishFailed}
         >
-          {/* <Form.Item<ProfileProps>
+          <Form
+            style={{ width: '524px' }}
+            name="profileForm"
+            form={form}
+            onFinish={handleOnFinish}
+            onFinishFailed={handleOnFinishFailed}
+          >
+            {/* <Form.Item<ProfileProps>
             name="username"
             rules={[
               {
@@ -69,50 +73,53 @@ const Profile: React.FC = () => {
               style={{ width: INPUT_WIDTH.default }}
             ></SealInput.Input>
           </Form.Item> */}
-          <Form.Item<ProfileProps>
+            <Form.Item<ProfileProps>
-            name="current_password"
+              name="current_password"
-            rules={[
+              rules={[
-              {
+                {
-                required: true,
+                  required: true,
-                message: intl.formatMessage(
+                  message: intl.formatMessage(
-                  { id: 'common.form.rule.input' },
+                    { id: 'common.form.rule.input' },
-                  {
+                    {
-                    name: intl.formatMessage({
+                      name: intl.formatMessage({
-                      id: 'users.form.currentpassword'
+                        id: 'users.form.currentpassword'
-                    })
+                      })
-                  }
+                    }
-                )
+                  )
-              }
+                }
-            ]}
+              ]}
-          >
+            >
-            <SealInput.Password
+              <SealInput.Password
-              label={intl.formatMessage({ id: 'users.form.currentpassword' })}
+                label={intl.formatMessage({ id: 'users.form.currentpassword' })}
-              required
+                required
-              style={{ width: INPUT_WIDTH.default }}
+                style={{ width: INPUT_WIDTH.default }}
-            ></SealInput.Password>
+              ></SealInput.Password>
-          </Form.Item>
+            </Form.Item>
-          <Form.Item<ProfileProps>
+            <Form.Item<ProfileProps>
-            name="new_password"
+              name="new_password"
-            rules={[
+              rules={[
-              {
+                {
-                required: true,
+                  required: true,
-                pattern: PasswordReg,
+                  pattern: PasswordReg,
-                message: intl.formatMessage({ id: 'users.form.rule.password' })
+                  message: intl.formatMessage({
-              }
+                    id: 'users.form.rule.password'
-            ]}
+                  })
-          >
+                }
-            <SealInput.Password
+              ]}
-              label={intl.formatMessage({ id: 'users.form.newpassword' })}
+            >
-              required
+              <SealInput.Password
-              style={{ width: INPUT_WIDTH.default }}
+                label={intl.formatMessage({ id: 'users.form.newpassword' })}
-            ></SealInput.Password>
+                required
-          </Form.Item>
+                style={{ width: INPUT_WIDTH.default }}
-          <FormButtons
+              ></SealInput.Password>
-            htmlType="submit"
+            </Form.Item>
-            onCancel={handleCancel}
+            <FormButtons
-            showCancel={false}
+              htmlType="submit"
-          ></FormButtons>
+              onCancel={handleCancel}
-        </Form>
+              showCancel={false}
+            ></FormButtons>
+          </Form>
+        </CardWrapper>
       </PageContainer>
     </StrictMode>
   );