@antdp/basic-layouts/esm/SearchMenus/index.js

入口框架公共界面

import { SearchOutlined } from '@ant-design/icons';
import { Select } from 'antd';
import React from 'react';
// @ts-ignore
import { history, useAppData, useLocation } from '@umijs/max';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var _setHideInMenu = function setHideInMenu(data) {
  if (data === void 0) {
    data = [];
  }
  data.forEach(item => {
    item.hideInMenu = true;
    if (item.routes && item.routes.length > 0) {
      _setHideInMenu(item.routes);
    }
  });
};
var _getRoutesList = function getRoutesList(data, list) {
  if (data === void 0) {
    data = [];
  }
  if (list === void 0) {
    list = [];
  }
  data.forEach(item => {
    if (item.hideInMenu) {
      // 如果父级需要隐藏，则将所有子级 hideInMenu 属性设为 true
      _setHideInMenu(item.routes);
    } else if (item.routes && item.routes.length > 0) {
      _getRoutesList(item.routes, list);
    } else {
      list.push(item);
    }
  });
  return list;
};
var SearchMenus = () => {
  var location = useLocation();
  var {
    clientRoutes
  } = useAppData();
  var [collapsed, setCollapsed] = React.useState(false);
  var parentPath = location.pathname;
  var routes = React.useMemo(() => {
    var routes = clientRoutes.find(item => item.path === '/');
    return (routes == null ? void 0 : routes.routes) || [];
  }, [clientRoutes]);
  var listRouters = React.useMemo(() => {
    return _getRoutesList(routes);
  }, [routes]);
  var listMenus = React.useMemo(() => {
    return listRouters.filter(item => {
      return item && 'name' in item && !item.hideInMenu && item.path !== '*';
    }).map(item => ({
      label: item.name,
      value: item.path
    }));
  }, [listRouters]);
  var currentValue = React.useMemo(() => {
    return listMenus.find(item => item.value === parentPath) || undefined;
  }, [parentPath]);
  return /*#__PURE__*/_jsxs("div", {
    style: {
      display: 'flex',
      alignItems: 'center'
    },
    children: [/*#__PURE__*/_jsx(SearchOutlined, {
      onClick: () => setCollapsed(!collapsed),
      style: {
        fontSize: 20,
        marginRight: collapsed ? 10 : 0
      }
    }), /*#__PURE__*/_jsx("div", {
      style: {
        display: collapsed ? 'block' : 'none'
      },
      children: /*#__PURE__*/_jsx(Select, {
        value: currentValue,
        placeholder: "\u8BF7\u641C\u7D22",
        labelInValue: true,
        showSearch: true,
        optionFilterProp: "children",
        filterOption: (input, option) => {
          var _option$label;
          return ((_option$label = option == null ? void 0 : option.label) != null ? _option$label : '').toLowerCase().includes(input.toLowerCase());
        },
        options: listMenus,
        onSelect: _ref => {
          var {
            value
          } = _ref;
          return history.push(value);
        },
        style: {
          width: 150
        }
      })
    })]
  });
};
export default SearchMenus;