tiefen_space_op/src/pages/Op/index.jsx

import React, { useState, useEffect } from "react";
import "./index.css";
import {
  ShopOutlined,
  UsergroupAddOutlined,
  SoundOutlined,
  NotificationOutlined,
  TrophyOutlined,
  PhoneOutlined,
  SafetyCertificateOutlined,
  PoweroffOutlined,
  MoneyCollectOutlined,
  FileSearchOutlined,
  FormOutlined,
} from "@ant-design/icons";
import { Menu, Layout } from "antd";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import { checkAuth, signOut } from "../../utils/auth";
import Data from "./data";
import baseRequest from "../../utils/baseRequest";

export default function Op() {
  const { Content, Sider } = Layout;
  const navigate = useNavigate();
  const location = useLocation();

  const [mid, setMid] = useState();
  useEffect(() => {
    const checkToken = async () => {
      const isLogin = await checkAuth();
      if (!isLogin) {
        navigate("/login");
      }
    };
    checkToken();
    const b_mid = baseRequest().b_mid;
    setMid(b_mid);
  }, [location, navigate]);
  function getItem(label, key, icon, children, type) {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  }
  const items = [
    getItem("审核专区", "review", <SafetyCertificateOutlined />, [
      getItem("公会入驻审核", "guildMachineReview"),
      getItem("网红入驻审核", "streamerJoin"),
      getItem("(新)网红入驻审核", "streamerJoinNew"),
      getItem("(新)网红资料审核", "streamerInformationCompleteNew"),
      getItem("网红实名认证审核", "streamerVerification"),
      getItem("主播图片机审回查", "streamerImageMachineReview"),
      getItem("主播视频机审回查", "streamerVideoMachineReview"),
      getItem("主播文本机审回查", "streamerTextMachineReview"),
      getItem("头像机审回查", "imageMachineReview"),
      getItem("昵称机审回查", "textMachineReview"),
      getItem("主播昵称机审回查", "streamerNickTextMachineReview"),
      getItem("广场动态审核", "postMachineReview"),
      getItem("空间动态审核", "zonePostMachineReview"),
    ]),
    getItem("网红管理", "streamerManagement", <ShopOutlined />, [
      getItem("网红资料", "streamerInformation"),
      getItem("空间管理", "streamerSpace"),
    ]),
    getItem("动态管理", "postManagement", <FormOutlined />, [
      getItem("广场动态管理", "createAndEditPost"),
      getItem("广场置顶动态", "topPosts"),
      getItem("空间动态管理", "EditSpacePost"),
    ]),
    getItem("信息查询", "search", <FormOutlined />, [
      getItem("手机号查询", "getPhoneNumber"),
      getItem("mid/user_id互查", "querryMidAndUserId"),
    ]),
    getItem("订单管理", "orderManagement", <FileSearchOutlined />, [
      getItem("查询", "ordersQuerry"),
      getItem("退款", "refund"),
      getItem("空间成员退款查询", "spaceMemberRefundQuerry"),
      getItem("用户误退空间恢复", "rollbackUserLeaveSpace"),
      getItem("用户重购空间", "rollbackUserRefundSpaceStatus"),
    ]),
    getItem("社区治理", "communityManagement", <UsergroupAddOutlined />, [
      getItem("用户封禁", "blockUser"),
      getItem("提现封禁", "withdrawFreeze"),
    ]),
    getItem(
      "人工充值/提现",
      "manualRechargeAndWithdrawal",
      <MoneyCollectOutlined />
    ),
    getItem("消息中心管理", "noticesManagement", <NotificationOutlined />, [
      getItem("消息通知推送", "notices"),
      getItem("自动回复消息预设", "autoAnswer"),
    ]),
    getItem("排行榜管理", "hotManage", <TrophyOutlined />),
    getItem("意见反馈", "feedback", <SoundOutlined />),
    getItem("客服回复", "contact", <PhoneOutlined />),
    getItem("退出登录", "signOut", <PoweroffOutlined />),
  ];

  const fakeItems = [
    getItem("审核专区", "review", <SafetyCertificateOutlined />, [
      getItem("公会入驻审核", "guildMachineReview"),
      getItem("网红入驻审核", "streamerJoin"),
      getItem("(新)网红入驻审核", "streamerJoinNew"),
      getItem("(新)网红资料审核", "streamerInformationCompleteNew"),
      getItem("网红实名认证审核", "streamerVerification"),
      getItem("主播图片机审回查", "streamerImageMachineReview"),
      getItem("主播视频机审回查", "streamerVideoMachineReview"),
      // getItem("主播文本机审回查", "streamerTextMachineReview"),
      getItem("头像机审回查", "imageMachineReview"),
      getItem("昵称机审回查", "textMachineReview"),
      getItem("主播昵称机审回查", "streamerNickTextMachineReview"),
      getItem("动态机审回查", "postMachineReview"),
      // getItem("空间动态审核", "zonePostMachineReview"),
    ]),
    getItem("网红管理", "streamerManagement", <ShopOutlined />, [
      getItem("网红资料", "streamerInformation"),
      // getItem("空间管理", "streamerSpace"),
    ]),
    getItem("动态管理", "postManagement", <FormOutlined />, [
      getItem("广场动态管理", "createAndEditPost"),
      getItem("广场置顶动态", "topPosts"),
      // getItem("空间动态管理", "EditSpacePost"),
    ]),
    getItem("信息查询", "search", <FormOutlined />, [
      getItem("手机号查询", "getPhoneNumber"),
      getItem("mid/user_id互查", "querryMidAndUserId"),
    ]),
    getItem("订单管理", "orderManagement", <FileSearchOutlined />, [
      getItem("查询", "ordersQuerry"),
      getItem("退款", "refund"),
      // getItem("空间成员退款查询", "spaceMemberRefundQuerry"),
      // getItem("用户误退空间恢复", "rollbackUserLeaveSpace"),
      // getItem("用户重购空间", "rollbackUserRefundSpaceStatus"),
    ]),
    getItem("社区治理", "communityManagement", <UsergroupAddOutlined />, [
      getItem("用户封禁", "blockUser"),
      getItem("提现封禁", "withdrawFreeze"),
    ]),
    getItem(
      "人工充值/提现",
      "manualRechargeAndWithdrawal",
      <MoneyCollectOutlined />
    ),
    getItem("消息中心管理", "noticesManagement", <NotificationOutlined />, [
      getItem("消息通知推送", "notices"),
    ]),
    getItem("排行榜管理", "hotManage", <TrophyOutlined />),
    getItem("意见反馈", "feedback", <SoundOutlined />),
    getItem("客服回复", "contact", <PhoneOutlined />),
    getItem("退出登录", "signOut", <PoweroffOutlined />),
  ];

  const onClick = (e) => {
    if (e.key === "signOut") {
      signOut();
      return;
    }
    navigate(e.key);
  };
  //获取当前路由
  const parts = location.pathname.split("/");
  const pathName = parts[1];
  return (
    <Layout hasSider>
      <Sider
        style={{
          overflow: "auto",
          height: "100vh",
          position: "fixed",
          left: 0,
          top: 0,
          bottom: 0,
          zIndex: 999,
        }}
      >
        <div onClick={() => navigate("/")} className="op-logo">
          <img src="/images/icon_border.png" alt="" />
          <h2>铁粉空间运营</h2>
        </div>
        <Menu
          onClick={onClick}
          mode="inline"
          items={mid === 75452 ? fakeItems : items}
          theme="dark"
          selectedKeys={pathName}
        />
      </Sider>
      <Layout
        style={{
          marginLeft: 200,
        }}
      >
        <Content
          style={{
            margin: "0 ",
            overflow: "initial",
          }}
        >
          {location.pathname === "/" && mid !== 75452 && <Data />}
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}