style: pagecontainer padding

gpustack · Jul 2, 2024 · 6989345 · 6989345
1 parent 13d71e2
commit 6989345
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 27 deletions.
diff --git a/src/assets/styles/menu.less b/src/assets/styles/menu.less
@@ -6,7 +6,7 @@
     .ant-layout-sider-children {
       background-color: var(--color-fill-1);
       border-inline: none;
-      border-radius: var(--menu-border-radius-base);
+      border-radius: 0;
       padding-inline: 16px;
       padding-block-end: 12px;
     }

diff --git a/src/global.less b/src/global.less
@@ -9,6 +9,8 @@ html {
   --color-fill-3: #f3f6fa;
   --color-logs-bg: #1e1e1e;
   --color-logs-text: #d4d4d4;
+  --layout-content-blockpadding: 32px;
+  --layout-content-inlinepadding: 32px;
   --menu-border-radius-base: 8px;
   --border-radius-base: 8px;
   --border-radius-middle: 20px;
@@ -40,7 +42,7 @@ html {
   --ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 6%);
   --ant-input-active-border-color: #2fbf85;
   --ant-input-hover-border-color: #54cc98;
-  --box-shadow-base: 0 4px 12px rgb(227, 232, 240);
+  --box-shadow-base: 0 4px 12px rgba(227, 232, 240, 70%);
 
   .css-var-rf {
     --ant-font-size: var(--font-size-base);
@@ -272,6 +274,14 @@ body {
 
 .ant-pro-layout {
   height: 100vh;
+  // .ant-pro-layout-content {
+  //   padding-block: var(--layout-content-blockpadding);
+  //   padding-inline: var(--layout-content-inlinepadding);
+  // }
+  .ant-pro-page-container-children-container {
+    padding-block: var(--layout-content-blockpadding);
+    padding-inline: var(--layout-content-inlinepadding);
+  }
 
   .ant-pro-sider-logo {
     padding-left: 22px;

diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
@@ -186,7 +186,6 @@ export default (props: any) => {
           }
           if (menuItemProps.path && location.pathname !== menuItemProps.path) {
             return (
-              // handle wildcard route path, for example /slave/* from qiankun
               <Link
                 to={menuItemProps.path.replace('/*', '')}
                 target={menuItemProps.target}

diff --git a/src/layouts/rightRender.tsx b/src/layouts/rightRender.tsx
@@ -77,6 +77,26 @@ export function getRightRenderContent(opts: {
   // 如果没有打开Locale，并且头像为空就取消掉这个返回的内容
   if (!avatar) return null;
 
+  const renderMenu = () => {
+    return (
+      <Menu triggerSubMenuAction="hover">
+        <Menu.Item title="admin" key="avatar">
+          <ul>
+            <Menu.SubMenu
+              key="settings"
+              icon={<SettingOutlined />}
+              title={intl?.formatMessage?.({ id: 'common.button.settings' })}
+            ></Menu.SubMenu>
+            <Menu.SubMenu
+              key="logout"
+              icon={<LogoutOutlined />}
+              title={intl?.formatMessage?.({ id: 'common.button.logout' })}
+            ></Menu.SubMenu>
+          </ul>
+        </Menu.Item>
+      </Menu>
+    );
+  };
   const langMenu = {
     className: 'umi-plugin-layout-menu',
     selectedKeys: [],
@@ -123,7 +143,7 @@ export function getRightRenderContent(opts: {
 
   let dropdownProps;
   if (version.startsWith('5.') || version.startsWith('4.24.')) {
-    dropdownProps = { menu: langMenu };
+    dropdownProps = { menu: langMenu, mode: 'vertical' };
   } else if (version.startsWith('3.')) {
     dropdownProps = {
       overlay: (
@@ -138,7 +158,7 @@ export function getRightRenderContent(opts: {
     };
   } else {
     // 需要 antd 4.20.0 以上版本
-    dropdownProps = { overlay: <Menu {...langMenu} /> };
+    dropdownProps = { overlay: <Menu {...langMenu} mode="vertical" /> };
   }
 
   return (
@@ -153,7 +173,6 @@ export function getRightRenderContent(opts: {
             >
               {avatar}
             </Dropdown>
-            <span></span>
           </>
         ) : (
           avatar

diff --git a/src/pages/dashboard/components/resource-utilization.tsx b/src/pages/dashboard/components/resource-utilization.tsx
@@ -95,6 +95,7 @@ const UtilizationOvertime: React.FC = () => {
       <LineChart
         data={result}
         locale={locale}
+        height={390}
         labelFormatter={labelFormatter}
         slider={sliderConfig}
       />

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -1,3 +1,4 @@
+import { PageContainer } from '@ant-design/pro-components';
 import { Spin } from 'antd';
 import { useEffect, useState } from 'react';
 import { queryDashboardData } from './apis';
@@ -27,14 +28,16 @@ const Dashboard: React.FC = () => {
     getDashboardData();
   }, []);
   return (
-    <Spin spinning={loading}>
-      <DashboardContext.Provider value={{ ...data }}>
-        <Overview></Overview>
-        <SystemLoad></SystemLoad>
-        <Usage></Usage>
-        <ActiveTable></ActiveTable>
-      </DashboardContext.Provider>
-    </Spin>
+    <PageContainer ghost extra={[]}>
+      <Spin spinning={loading}>
+        <DashboardContext.Provider value={{ ...data }}>
+          <Overview></Overview>
+          <SystemLoad></SystemLoad>
+          <Usage></Usage>
+          <ActiveTable></ActiveTable>
+        </DashboardContext.Provider>
+      </Spin>
+    </PageContainer>
   );
 };
 

diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
@@ -2,7 +2,6 @@ import TransitionWrapper from '@/components/transition';
 import HotKeys from '@/config/hotkeys';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import { EyeInvisibleOutlined } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Spin } from 'antd';
 import _ from 'lodash';
@@ -185,7 +184,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
 
   return (
     <div className="ground-left">
-      <PageContainer title={false} className="message-list-wrap">
+      <div className="message-list-wrap">
         <div style={{ marginBottom: 40 }}>
           <TransitionWrapper
             header={renderLabel()}
@@ -227,7 +226,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
             </Spin>
           )}
         </div>
-      </PageContainer>
+      </div>
       <div className="ground-left-footer">
         <ChatFooter
           onClear={handleClear}

diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx
@@ -1,4 +1,4 @@
-import CardWrapper from '@/components/card-wrapper';
+import { PageContainer } from '@ant-design/pro-components';
 import { useSearchParams } from '@umijs/max';
 import { Divider } from 'antd';
 import { useState } from 'react';
@@ -27,8 +27,8 @@ const Playground: React.FC = () => {
   };
 
   return (
-    <div style={{ padding: '32px 40px' }}>
-      <CardWrapper>
+    <div>
+      <PageContainer ghost extra={[]}>
         <div className="play-ground">
           <div className="chat">
             <GroundLeft parameters={params}></GroundLeft>
@@ -45,7 +45,7 @@ const Playground: React.FC = () => {
             />
           </div>
         </div>
-      </CardWrapper>
+      </PageContainer>
     </div>
   );
 };

diff --git a/src/pages/playground/style/chat-footer.less b/src/pages/playground/style/chat-footer.less
@@ -1,7 +1,7 @@
 .chat-footer {
   display: flex;
   align-items: center;
-  padding-inline: 26px;
+  padding-inline: 0 32px;
   height: 100px;
   // box-shadow: 0px -1px 2px 0px var(--ant-color-border);
 }
diff --git a/src/pages/playground/style/ground-left.less b/src/pages/playground/style/ground-left.less
@@ -2,14 +2,11 @@
   position: relative;
   height: calc(100vh - 84px);
   padding-bottom: 120px;
+  padding-right: 32px;
 
   .message-list-wrap {
     max-height: calc(100vh - 152px);
     overflow-y: auto;
-
-    .ant-pro-page-container-children-container {
-      padding-inline: 16px 26px;
-    }
   }
 
   .ground-left-footer {

diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
@@ -44,7 +44,10 @@ const Profile: React.FC = () => {
         extra={[]}
       >
         <CardWrapper
-          style={{ padding: '32px', marginTop: '70px', width: 'max-content' }}
+          style={{
+            padding: 'var(--layout-content-inlinepadding)',
+            width: 'max-content'
+          }}
         >
           <Form
             style={{ width: '524px' }}