SiderMenu.js

import React, { useState, Suspense, useRef } from "react";
import { Layout, Menu, Skeleton, Input, Row, Col, Empty } from "antd";
import { Link, history, useModel } from "umi";
import styles from "./index.less";
import { Scrollbars } from "react-custom-scrollbars";
import { Icon } from "@ant-design/compatible";
import { collectPerms, cancelCollectPerms, mtosave } from "@/services/login";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
const { Sider } = Layout;

let CardItems = (datav, i, getstar, addHistory) => {
    let name = datav.name,
      collected = datav.isExist == "1";

    return (
      <div
        key={i}
        className={styles.carditem}
        onClick={async () => {
          history.push(datav.path);
          await addHistory(datav.key);
        }}
      >
        <a className={styles.diylink}>
          {" "}
          <Icon type={datav.icon} style={{ marginRight: 6 }} /> {name}
        </a>
        {collected ? (
          <Icon
            type="star"
            theme={"filled"}
            className={styles.collected}
            onClick={async (e) => {
              getstar(e, collected, datav.key);
            }}
          />
        ) : (
          <Icon
            type="star"
            className={styles.tocollect}
            onClick={async (e) => {
              getstar(e, collected, datav.key);
            }}
          />
        )}
      </div>
    );
  },
  coles = { xs: 24, sm: 24, md: 12, lg: 8, xl: 6, xxl: 4 };

function Diymenu({
  logo,
  collapsed,
  onCollapse,
  fixSiderbar,
  theme,
  isMobile,
  location,
  name,
  menuData,
}) {
  const [anchor, setanchor] = useState();
  const [search, setsearch] = useState();
  const scrollRef = useRef();

  const { alive, changealive } = useModel("useGlobal");
  const {
    initialState: { getmenuData, newMenu },
    setInitialState,
  } = useModel("@@initialState");

  const getMenuData = newMenu?.userHavePermList ?? [],
    collectPerm = newMenu?.collectPerm ?? [],
    recentUsePermList = newMenu?.recentUsePermList ?? [];
  let scrollToAnchor = (anchorName) => {
    if (anchorName) {
      setanchor(anchorName);
      let anchorElement = document.getElementById(anchorName);
      if (scrollRef) {
        // anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
        scrollRef?.current?.scrollTop(anchorElement.offsetTop);
      }
    }
  };

  let filterMenu = (alldata, search) => {
    if (!search) {
      return alldata;
    }
    alldata = alldata ?? [];
    let newdata = alldata.filter((item) => {
      return (
        item.routes &&
        item.routes.some((it) => {
          return it.name.indexOf(search) != -1;
        })
      );
    });

    return newdata.map((item) => {
      return {
        ...item,
        routes: item.routes.filter((it) => {
          return it.name.indexOf(search) != -1;
        }),
      };
    });
  };
  const refreshs = async () => {
    const menuDatas = await getmenuData();
    if (menuDatas) {
      await setInitialState((s) => {
        return { ...s, newMenu: menuDatas };
      });
    }
  };
  async function getstar(e, collected, permissionId) {
    e.stopPropagation();
    if (collected) {
      let cancelData = await cancelCollectPerms({ permissionId });
      if (cancelData.code == "0000") {
        await refreshs();
      }
    } else {
      let collectData = await collectPerms({ permissionId });
      if (collectData.code == "0000") {
        await refreshs();
      }
    }
  }
  async function addHistory(permissionId) {
    let cancelData = await mtosave({ permissionId });
    if (cancelData.code == "0000") {
      changealive(false);
      await refreshs();
    }
  }

  return (
    <Sider
      trigger={null}
      collapsible
      collapsed={collapsed}
      width={208}
      theme={theme}
      collapsedWidth={48}
    >
      <div
        style={{
          height: "100%",
          display: "flex",
          flexDirection: "column",
          position: "relative",
        }}
      >
        <div className={styles.logo} id="logo">
          <Link to="/welcome">
            <img src={logo} alt="logo" />
            <h1 style={{ fontSize: 12 }}>{name}</h1>
          </Link>
        </div>
        <Suspense
          fallback={<div style={{ width: "100vw", height: "100vh" }} />}
        >
          <div style={{ height: "calc(100vh - 48px)", overflow: "auto" }}>
            {
              <div className={styles.fate}>
                <Scrollbars
                  thumbMinSize={10}
                  autoHide
                  style={{ width: "100%", height: "100%" }}
                  hideTracksWhenNotNeeded={true}
                >
                  <Menu
                    collapsedWidth={48}
                    mode="inline"
                    theme="dark"
                    selectedKeys={[location.pathname]}
                    collapsed={collapsed.toString()}
                    onClick={({ item, key, keyPath, domEvent }) => {
                      if (key == "0") {
                        changealive(!alive);
                        return;
                      }
                      history.push(key);
                    }}
                  >
                    <Menu.Item
                      key="0"
                      style={{
                        userSelect: "none",
                        backgroundColor: "#000",
                        marginTop: 8,
                      }}
                    >
                      <Icon type={alive ? "fullscreen" : "fullscreen-exit"} />
                      <span>产品与服务</span>
                    </Menu.Item>
                    {collectPerm &&
                      collectPerm.map((item, i) => {
                        return (
                          <Menu.Item
                            key={item.path}
                            className={styles.lihover}
                            style={{
                              userSelect: "none",
                              display: "flex",
                              alignItems: "center",
                            }}
                            onClick={async () => {
                              await addHistory(item.key);
                            }}
                          >
                            <Icon type={item.icon} />
                            <span
                              style={{
                                flex: 1,
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                              }}
                            >
                              {item.name}
                              <Icon
                                className={styles.closeicon}
                                type="close"
                                onClick={async (e) => {
                                  e.stopPropagation();
                                  await getstar(e, true, item.key);
                                }}
                              />
                            </span>
                          </Menu.Item>
                        );
                      })}
                  </Menu>
                </Scrollbars>
                <div
                  className={alive ? styles.containbox : styles.containboxs}
                  style={{
                    transition: "all 0.2s",
                    display: "flex",
                    flexDirection: "column",
                  }}
                >
                  <Skeleton active loading={!alive}>
                    <header
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        borderBottom: "#ddd solid 1px",
                        paddingBottom: 8,
                      }}
                    >
                      <Input
                        prefix={
                          <Icon
                            type="search"
                            style={{ color: "rgba(0,0,0,.25)" }}
                          />
                        }
                        placeholder="输入关键词查找模块"
                        allowClear
                        className={styles.diyinput}
                        value={search}
                        onChange={(e) => {
                          setsearch(e.target.value);
                        }}
                      />
                      <Icon
                        type="close"
                        style={{ fontSize: 18, marginLeft: 24 }}
                        onClick={() => {
                          changealive(false);
                        }}
                      />
                    </header>
                    <section
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        flex: 1,
                        overflow: "hidden",
                      }}
                    >
                      <div
                        style={{
                          flex: 1,
                          height: "100%",
                          overflow: "auto",
                          overflowX: "hidden",
                        }}
                      >
                        <Scrollbars
                          thumbMinSize={10}
                          autoHide
                          style={{ width: "100%", height: "100%" }}
                          ref={scrollRef}
                          hideTracksWhenNotNeeded={true}
                        >
                          <div
                            className={styles.section}
                            style={{ marginBottom: 18 }}
                          >
                            <h2>历史记录</h2>
                            <Row gutter={0}>
                              {recentUsePermList &&
                                recentUsePermList.map((item, i) => {
                                  return (
                                    <Col key={i} {...coles}>
                                      {CardItems(item, i, getstar, addHistory)}
                                    </Col>
                                  );
                                })}
                            </Row>
                          </div>
                          {search && <p>搜索条件:{search},搜索结果:</p>}
                          <div className={styles.column}>
                            {getMenuData &&
                              filterMenu(getMenuData, search).map((item, i) => {
                                return (
                                  <div className={styles.item} key={i}>
                                    <h2
                                      id={item.key}
                                      className={
                                        anchor == item.key
                                          ? styles.activeh2
                                          : ""
                                      }
                                    >
                                      {" "}
                                      <Icon
                                        type={item.icon}
                                        style={{ marginRight: 6 }}
                                      />{" "}
                                      {item.name}
                                    </h2>
                                    {item.routes &&
                                      item.routes.map((it, ins) => {
                                        return it
                                          ? CardItems(
                                              it,
                                              ins,
                                              getstar,
                                              addHistory
                                            )
                                          : null;
                                      })}
                                  </div>
                                );
                              })}
                          </div>
                          {filterMenu(getMenuData, search).length == 0 && (
                            <Empty />
                          )}
                        </Scrollbars>
                      </div>
                      <div className={styles.rt}>
                        {getMenuData &&
                          getMenuData.map((item, i) => {
                            return (
                              <p
                                className={styles.rtcarditem}
                                key={i}
                                onClick={() => {
                                  scrollToAnchor(item.key);
                                }}
                              >
                                <Icon
                                  type={item.icon}
                                  style={{ marginRight: 6 }}
                                />{" "}
                                {item.name}
                              </p>
                            );
                          })}
                      </div>
                    </section>
                  </Skeleton>
                </div>
              </div>
            }
          </div>
        </Suspense>
      </div>
    </Sider>
  );
}

export default Diymenu;