ERPTurbo_Client/packages/app-client/src/components/biz/CustomTabBar.tsx

import Taro from "@tarojs/taro";
import { useEffect, useMemo, useState } from "react";
import { View } from "@tarojs/components";
import { SafeArea, Tabbar } from "@nutui/nutui-react-taro";
import { globalStore } from "@/store/global-store";
import { CustomTheme, Icon } from "@/components";

export default function CustomTabBar() {
  const { tabBar, setTabBar } = globalStore((state: any) => state);
  const [scaleFactor, setScaleFactor] = useState(1);

  const userRoleVO = globalStore((state: any) => state.userRoleVO);

  useEffect(() => {
    const appBaseInfo = Taro.getAppBaseInfo();
    // @ts-ignore
    const { fontSizeSetting, fontSizeScaleFactor } = appBaseInfo;
    if (fontSizeScaleFactor == 1) {
      setScaleFactor(fontSizeSetting / 17);
    } else {
      setScaleFactor(fontSizeScaleFactor);
    }
  }, []);

  const tabBarList = useMemo(() => {
    // 如果没有用户角色信息，默认显示所有菜单项
    return [
      {
        pagePath: "/pages/main/index/index",
        selectedIconPath: <Icon name={"house"} size={20 * scaleFactor} />,
        iconPath: (
          <Icon name={"house"} color={"#6B7280"} size={20 * scaleFactor} />
        ),
        text: "工作台",
      },
      {
        pagePath: "/pages/main/menu/index",
        selectedIconPath: (
          <Icon name={"clipboard-list"} size={20 * scaleFactor} />
        ),
        iconPath: (
          <Icon
            name={"clipboard-list"}
            color={"#6B7280"}
            size={20 * scaleFactor}
          />
        ),
        text: "菜单",
      },
      {
        pagePath: "/pages/main/message/index",
        selectedIconPath: <Icon name={"bell"} size={20 * scaleFactor} />,
        iconPath: (
          <Icon name={"bell"} color={"#6B7280"} size={20 * scaleFactor} />
        ),
        text: "消息",
      },
      {
        pagePath: "/pages/main/center/index",
        selectedIconPath: <Icon name={"user"} size={20 * scaleFactor} />,
        iconPath: (
          <Icon name={"user"} color={"#6B7280"} size={20 * scaleFactor} />
        ),
        text: "我的",
      },
    ];
  }, [scaleFactor, userRoleVO]);

  useEffect(() => {
    const selected = tabBarList.findIndex((item) => {
      return (
        Taro.getCurrentInstance().router?.path.indexOf(item.pagePath) !== -1
      );
    });

    console.log("selected", selected);

    setTabBar(selected);
  }, [tabBarList, userRoleVO]);

  const switchTab = async (index: number, pagePath: string) => {
    setTabBar(index);

    await Taro.switchTab({ url: pagePath });
  };

  return (
    <CustomTheme>
      <View
        style={{
          height: `calc(92rpx * ${scaleFactor})`,
        }}
      ></View>
      <SafeArea position={"bottom"} />
      <Tabbar
        fixed
        safeArea
        value={tabBar?.selected}
        onSwitch={async (index) => {
          await switchTab(index, tabBarList[index].pagePath);
        }}
      >
        {tabBarList.map((item, index) => {
          return (
            <Tabbar.Item
              key={index}
              icon={
                tabBar?.selected === index
                  ? item.selectedIconPath
                  : item.iconPath
              }
              title={item.text}
            />
          );
        })}
      </Tabbar>
    </CustomTheme>
  );
}