feat: 调整AnimateContent的宽度计算

src/app.tsx

@@ -5,7 +5,8 @@ import consts from './utils/consts'
 import { queryCurrentUser } from './services/api/login'
 import defaultSettings from '../config/defaultSettings'
 import type { Settings as LayoutSettings } from '@ant-design/pro-layout'
-import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max'
+import type { RequestConfig } from '@umijs/max'
+import type { RunTimeLayoutConfig } from '@@/plugin-layout'
 
 export async function getInitialState(): Promise<{
   settings?: Partial<LayoutSettings>
@@ -107,14 +108,12 @@ export const request: RequestConfig = {
   requestInterceptors: [authHeaderInterceptor]
 }
 
-export const layout: RunTimeLayoutConfig = ({ initialState }) => {
+export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
   return {
     rightContentRender: () => <RightContent />,
     disableContentMargin: false,
     onPageChange: () => {
       if (!initialState?.currentUser?.ID && window.location.pathname !== consts.loginPath) {
-        console.log('111')
-
         history.replace({
           pathname: consts.loginPath,
           search: createSearchParams({
@@ -123,6 +122,9 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
         })
       }
     },
+    onCollapse: (collapsed: boolean) => {
+      setInitialState({ ...initialState, setting: { ...initialState.setting, collapsed } })
+    },
     ...initialState?.settings
   }
 }

src/components/AnimateContent/index.tsx

@@ -2,6 +2,7 @@ import { Drawer, PageHeader } from 'antd'
 import type { DrawerProps } from 'antd'
 import type { PropsWithChildren, FC } from 'react'
 import styles from './index.less'
+import { useModel } from '@umijs/max'
 type AnimateContentProps = {
   visible: boolean
   onVisibleChange: (visible: boolean) => void
@@ -16,7 +17,9 @@ const AnimateContent: FC<PropsWithChildren<AnimateContentProps>> = ({
   ...others
 }) => {
   const wrapHeight = document.querySelector('.ant-pro-page-container-warp')?.clientHeight || 0
-
+  const {
+    initialState: { setting: { collapsed } = { collapsed: true } }
+  } = useModel('@@initialState')
   return (
     <div className={styles.pageContainer}>
       <Drawer
@@ -27,7 +30,7 @@ const AnimateContent: FC<PropsWithChildren<AnimateContentProps>> = ({
         push={false}
         onClose={() => onVisibleChange(false)}
         mask={false}
-        width="calc(100vw - 256px)"
+        width={`calc(100vw - ${collapsed ? 48 : 256}px - 48px)`}
         style={{ right: '24px', top: `${48 + wrapHeight}px` }}
         contentWrapperStyle={{
           height: `calc(100vh - 72px - ${wrapHeight}px)`