pay-admin/src/common/libs/umi/layoutConfig.tsx

// import Logo from '@/assets/bitcoin.webp';
import { MyIcons, MyIconsType, PermissionsType, useMyState } from '@/common';
import { AvatarProps, CustomLogo } from '@/common/components/layout';
import { Link, RuntimeConfig, history } from '@umijs/max';
import MyLoGo from './logo.jpeg';

const loopMenu = (permissions: PermissionsType[] | undefined) => {
  let tree: PermissionsType[] = [];
  let map: Record<number, PermissionsType> = {};
  permissions?.forEach((permission) => {
    map[permission.id] = {
      path: permission.type === 'Button' ? 'null' : permission.path,
      name: permission.name,
      icon: permission.icon && MyIcons[permission.icon as MyIconsType],
      children: [],
      hideInMenu: permission.type === 'Button',
    };
  });

  permissions?.forEach((permission) => {
    let node = map[permission.id];
    if (permission.parent_id !== null) {
      map[permission.parent_id].children.push(node);
    } else {
      tree.push(node);
    }
  });

  return tree?.[0]?.children;
};

export const LayoutConfig: RuntimeConfig['layout'] = () => {
  const { snap } = useMyState();

  return {
    title: '物业管理平台',
    logo: MyLoGo, // 禁用默认logo，使用自定义
    layout: 'mix', // 从 'mix' 改为 'side'
    colorPrimary: '#1890ff',
    siderWidth: 220,
    prefixCls: 'my-prefix',
    pure: history.location.pathname === '/login',
    // 禁用顶部导航栏的菜单
    // 确保header显示 - 强制始终显示header，禁用响应式隐藏
    header: true,
    // 禁用响应式侧边栏，确保header始终显示
    responsive: false,
    // siderMenuType: 'inline',
    // 隐藏面包屑导航
    breadcrumb: { props: { style: { display: 'none' } } },
    avatarProps: {
      // src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
      // size: 'small',
      // title: snap?.session?.user?.username ?? '-',
      render: (props, dom) => {
        return <AvatarProps user={snap.session.user} />;
        // return (
        //   <Dropdown
        //     menu={{
        //       items: [
        //         {
        //           key: 'logout',
        //           icon: <LogoutOutlined />,
        //           label: '退出登录',
        //         },
        //       ],
        //     }}
        //   >
        //     {dom}
        //   </Dropdown>
        // );
      },
    },
    // 自定义Header渲染 - 右侧显示用户信息
    // headerRender: (props, defaultDom) => {
    //   return (
    //     <div
    //       style={{
    //         display: 'flex',
    //         justifyContent: 'space-between',
    //         alignItems: 'center',
    //         width: '100%',
    //         paddingRight: 24,
    //         paddingLeft: 24,
    //         height: '100%',
    //       }}
    //     >
    //       {/* 左侧可以为空 */}
    //       <div style={{ flex: 1 }}></div>
    //       {/* 右侧添加用户信息 */}
    //       <div style={{ display: 'flex', alignItems: 'center' }}>
    //         <AvatarProps user={snap.session.user} />
    //       </div>
    //     </div>
    //   );
    // },

    // 新增：自定义Logo渲染
    logoRenderer: (collapsed: boolean) => {
      return <CustomLogo collapsed={collapsed} />;
    },
    //水印设置
    // waterMarkProps: {
    //   content: snap.session.user?.username,
    // },
    collapsedButtonRender: false,
    // 禁用底部的版权信息等
    footerRender: false,
    token: {
      bgLayout: '#f5f5f5', // 浅灰布局背景
      header: {
        colorBgHeader: '#ffffff', // 白色header背景
        colorHeaderTitle: '#262626', // 深色标题文字
        colorTextRightActionsItem: '#595959', // 深色操作文字
        heightLayoutHeader: 64, // Header高度64px
      },
      sider: {
        colorMenuBackground: '#ffffff', // 白色菜单背景
        colorMenuText: '#595959', // 深色菜单文字
        colorMenuTextSelected: '#1890ff', // 激活菜单文字蓝色
        colorMenuItemBgSelected: '#e6f7ff', // 激活菜单背景浅蓝
        colorMenuDivider: '#f0f0f0', // 分割线颜色
      },
    },
    menuItemRender: (item, dom) => <Link to={item.path || '/'}>{dom}</Link>,
    menu: {
      params: snap.session.permissions,
      request: async () => {
        let objjs: any = [];
        snap.session.permissions?.forEach((res: any) => {
          objjs.push(res);
        });
        let data = objjs.sort((a: any, b: any) => {
          return a._lft - b._lft;
        });
        const menus = loopMenu(data);
        return Promise.resolve(menus);
      },
    },
    unAccessible: <div>unAccessible</div>,
  };
};