feat: 调整prolayout

react-ui/config/defaultSettings.ts

@@ -10,7 +10,7 @@ const Settings: ProLayoutProps & {
   locale: 'zh-CN',
   navTheme: 'light',
   colorPrimary: '#514cf9',
-  // layout: 'mix',
+  layout: 'mix',
   contentWidth: 'Fluid',
   fixedHeader: false,
   fixSiderbar: false,

react-ui/src/app.tsx

@@ -70,7 +70,7 @@ export async function getInitialState(): Promise<GlobalInitialState> {
 export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
   return {
     ErrorBoundary: ErrorBoundary,
-    rightContentRender: false,
+    rightContentRender: () => <RightContent></RightContent>,
     menu: {
       locale: false,
       // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
@@ -89,7 +89,7 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
       // if (initialState?.loading) return <PageLoading />;
       return (
         <div className="kf-page-container">
-          <RightContent></RightContent>
+          {/* <RightContent></RightContent> */}
           <div className="kf-page-container__content">{children}</div>
         </div>
       );
@@ -113,6 +113,11 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
         colorBgMenuItemSelected: 'rgba(197, 232, 255, 0.8)',
         colorMenuBackground: themes['siderBGColor'],
       },
+      header: {
+        colorBgHeader: '#3a3da5',
+        heightLayoutHeader: 60,
+        colorHeaderTitle: 'white',
+      },
     },
     menuItemRender: menuItemRender(false),
     subMenuItemRender: menuItemRender(true),

react-ui/src/components/MessageBroadcast/index.less

@@ -2,7 +2,6 @@
   position: relative;
   width: 32px;
   height: 32px;
-  margin-right: 8px;
   cursor: pointer;
   .backgroundFullImage(url(@/assets/img/message/trumpet.png));
 

react-ui/src/components/RightContent/AvatarDropdown.tsx

@@ -34,6 +34,7 @@ const Name = () => {
       lineHeight: '48px',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
+      color: 'white',
       [`@media only screen and (max-width: ${token.screenMD}px)`]: {
         display: 'none',
       },

react-ui/src/components/RightContent/index.less

@@ -1,10 +1,9 @@
 .right-content {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   align-items: center;
-  height: 55px;
-  margin-right: -10px;
-  padding: 0 16px;
-  background-color: white;
-  border-bottom: 1px solid #e9edf0;
+  height: 60px;
+  padding: 0 14px;
+  // background-color: white;
+  // border-bottom: 1px solid #e9edf0;
 }

react-ui/src/components/RightContent/index.tsx

@@ -1,7 +1,6 @@
-import KFIcon from '@/components/KFIcon';
-import { ProBreadcrumb } from '@ant-design/pro-components';
+// import KFIcon from '@/components/KFIcon';
+// import { ProBreadcrumb } from '@ant-design/pro-components';
 import { useModel } from '@umijs/max';
-import { Button, Flex } from 'antd';
 import React from 'react';
 import MessageBroadcast from '../MessageBroadcast';
 import Avatar from './AvatarDropdown';
@@ -17,12 +16,12 @@ const GlobalHeaderRight: React.FC = () => {
     return null;
   }
 
-  const handleMenuCollapse = () => {
-    setInitialState((preInitialState) => ({
-      ...preInitialState,
-      collapsed: !preInitialState?.collapsed,
-    }));
-  };
+  // const handleMenuCollapse = () => {
+  //   setInitialState((preInitialState) => ({
+  //     ...preInitialState,
+  //     collapsed: !preInitialState?.collapsed,
+  //   }));
+  // };
 
   return (
     <div className={styles['right-content']}>
@@ -35,23 +34,18 @@ const GlobalHeaderRight: React.FC = () => {
         <QuestionCircleOutlined />
       </span> */}
 
-      <Button
+      {/* <Button
         type="text"
         style={{ marginRight: '4px' }}
         icon={<KFIcon type="icon-collapsed" font={18} style={{ verticalAlign: '-3px' }} />}
         onClick={handleMenuCollapse}
-      ></Button>
+      ></Button> */}
 
-      <ProBreadcrumb></ProBreadcrumb>
+      {/* <ProBreadcrumb></ProBreadcrumb> */}
 
-      <Flex
-        align="center"
-        style={{ marginLeft: 'auto', marginRight: 0, background: '#3a3da5', padding: '0 30px' }}
-      >
-        <MessageBroadcast />
+      <MessageBroadcast />
 
-        <Avatar menu={true} />
-      </Flex>
+      <Avatar menu={true} />
 
       {/* <SelectLang className={actionClassName} /> */}
     </div>

react-ui/src/global.less

@@ -76,7 +76,7 @@ body {
 }
 .ant-pro-layout .ant-layout-sider.ant-pro-sider {
   height: 100vh;
-  // padding-top: 56px;
+  padding-top: 60px;
 }
 .ant-pro-layout .ant-pro-layout-container {
   height: 100vh;