update layout style

src/App.tsx

@@ -26,6 +26,12 @@ function App() {
     i18n.changeLanguage(lang);
   }, [lang]);
 
+  const components = {
+    Menu: {
+      groupTitleFontSize: 12,
+      itemMarginBlock: 2
+    }
+  }
 
   const curTheme: ThemeConfig = useMemo(() => {
     if (darkMode) {
@@ -38,8 +44,9 @@ function App() {
           colorBgTextHover: 'rgba(124, 77, 255, 0.082)',
           colorTextHover: 'rgba(124, 77, 255, 0.082)',
           controlItemBgActive: 'rgba(33, 150, 243, 0.16)',
-          colorBgElevated: 'rgb(33, 41, 70)'
+          colorBgElevated: 'rgb(33, 41, 70)',
         },
+        components,
         algorithm: theme.darkAlgorithm,
       }
     } else {
@@ -47,6 +54,7 @@ function App() {
         token: {
           colorPrimary: 'rgb(124, 77, 255)',
         },
+        components,
       }
     }
   }, [darkMode]);

src/assets/css/overwrite.css

@@ -4,13 +4,13 @@
 }
 
 .ant-menu-item {
-  height: 50px !important;
-  line-height: 50px !important;
+  height: 46px !important;
+  line-height: 46px !important;
 }
 
 .ant-menu-submenu-title {
-  height: 50px !important;
-  line-height: 50px !important;
+  height: 46px !important;
+  line-height: 46px !important;
 }
 
 .ant-menu-item span {
@@ -122,9 +122,9 @@
 }
 
 
-.ant-menu-sub {
+/* .ant-menu-sub {
   background-color: transparent !important;
-}
+} */
 
 body.dark {
   background-color: rgb(17, 25, 54);
@@ -145,4 +145,4 @@ a {
 
 a:hover {
   color: rgba(124, 77, 255, 0.7);
-}
+}

src/layout/content/index.tsx

@@ -14,13 +14,13 @@ const Content: FC<any> = ({ children }) => {
 
   return (
     <div
-      className='color-transition mt-[80px] w-[100%] bg-container !<lg:ml-[16px]'
+      className='color-transition mt-[60px] w-[100%] bg-container !<lg:ml-[16px]'
       style={{
         borderRadius: '8px',
-        marginLeft: collapsed ? 112 : defaultSetting.slideWidth,
+        marginLeft: collapsed ? 100 : defaultSetting.slideWidth,
         minHeight: 'calc(100vh - 80px)',
         transition: "all 200ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-        width: `calc(100vw - ${isPC ? collapsed ? 112 : defaultSetting.slideWidth : 32}px)`
+        width: `calc(100vw - ${isPC ? collapsed ? 100 : defaultSetting.slideWidth : 32}px)`
       }}
     >
       <div

src/layout/header/index.tsx

@@ -37,7 +37,7 @@ const Header = () => {
   return (
     <div
       style={{ zIndex: 998 }}
-      className="color-transition h-[80px] flex basis-[48px] items-center px-0 gap-[16px] fixed top-0 right-0 left-0 bg-primary"
+      className="color-transition h-[60px] flex basis-[48px] items-center px-0 gap-[16px] fixed top-0 right-0 left-0 bg-primary"
     >
       <div style={{ width: defaultSetting.slideWidth }} className="<lg:hidden flex justify-between items-center">
         <div className='flex items-center gap-[4px] text-[20px] px-[24px] pr-0'>
@@ -60,7 +60,7 @@ const Header = () => {
             outline: 'none',
             boxShadow: 'none'
           }}
-          className='w-[400px] h-[50px] focus:(border-[rgb(135,94,196)]) <lg:hidden'
+          className='w-[400px] h-[40px] focus:(border-[rgb(135,94,196)]) <lg:hidden'
           size="large"
           prefix={
             <IconFangdajing

src/layout/slide/index.tsx

@@ -56,7 +56,7 @@ const SlideIndex = () => {
         headerStyle={{ padding: '24px 0', border: 'none' }}
         bodyStyle={{ padding: '0 16px' }}
         onClose={() => {
-          setCollapsed(true);
+          //setCollapsed(true);
         }}
       >
         {renderMenu()}
@@ -66,8 +66,8 @@ const SlideIndex = () => {
 
   return (
     <div
-      style={{ width: collapsed ? 112 : defaultSetting.slideWidth }}
-      className="menu-slide color-transition top-[80px] fixed box-border left-0 bottom-0 overflow-y-auto px-[16px] bg-primary <lg:hidden"
+      style={{ width: collapsed ? 100 : defaultSetting.slideWidth }}
+      className="menu-slide color-transition top-[60px] fixed box-border left-0 bottom-0 overflow-y-auto px-[8px] bg-primary <lg:hidden"
     >
       {renderMenu()}
     </div>

src/pages/custom/product/sample/index.tsx

@@ -151,7 +151,7 @@ const TablePage: React.FC = () => {
 
   return (
     <div>
-      <div className="mt-[16px] dark:bg-[rgb(33,41,70)] rounded-md">
+      <div className="dark:bg-[rgb(33,41,70)] rounded-md">
         <Table rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' 
           pagination={{ position: ['bottomRight'] }}
         />