@hzab/sider 0.0.2

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hzab/sider",
+  "version": "0.0.2",
+  "description": "侧边栏",
+  "main": "lib",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-patch": "npm run build && git add . && git commit -m \"build: patch\" && npm version patch && npm publish --access public",
+    "publish-minor": "npm run build && git add . && git commit -m \"build: minor\" && npm version minor && npm publish --access public",
+    "publish-major": "npm run build && git add . && git commit -m \"build: major\" && npm version major && npm publish --access public"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/webpack-config": "0.0.9",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1",
+    "typescript": "^4.9.4"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.8.0",
+    "antd": "^4.14.0"
+  }
+}

package/src/index.module.less

@@ -0,0 +1,23 @@
+.sider-box {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* 滚动条整体样式 */
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  /* 滚动条轨道 */
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+  }
+  /* 滚动条里面的滑块 */
+  &::-webkit-scrollbar-thumb {
+    background: rgba(144, 147, 153, 0.3);
+    border-radius: 4px;
+  }
+  /* 滚动条里面的滑块 hover 的情况 */
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(144, 147, 153, 0.5);
+  }
+}

package/src/index.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { Menu } from "antd";
+import * as Icon from "@ant-design/icons";
+import _ from "lodash";
+
+import style from "./index.module.less";
+
+function Sider(props) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [selected, setSelected] = useState([location.pathname]);
+  const [open, setOpen] = useState(location.pathname.split(/(?=\/)/)?.slice(0, 1));
+  const [menus, setMenus] = useState(props.menus || []);
+
+  useEffect(() => {
+    const keyPaths: Array<string> = location.pathname.split(/(?=\/)/);
+
+    if (keyPaths.length > 0) {
+      // 处理侧边栏激活状态，解决详情等子页面无激活态的问题
+      // 注意：子页面必须以父页面的路由为前缀。如：/user-server/user-list /user-server/user-list/detail
+      const _open = [];
+      const _selected = [];
+      let cur = "";
+
+      keyPaths.forEach((it) => {
+        cur = `${cur}${it}`;
+        _open.push(cur);
+        _selected.push(cur);
+      });
+
+      setSelected(_selected);
+      setOpen(_open);
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    const _menus = _.cloneDeep(props.menus);
+    _menus?.map((it) => {
+      let iconDom = it.icon;
+      if (/^[A-Z]/.test(iconDom) && Icon && (Icon as any)[iconDom]) {
+        iconDom = React.createElement(Icon && (Icon as any)[iconDom], {
+          style: { fontSize: "14px" },
+        });
+      } else if (iconDom?.startsWith("icon-")) {
+        iconDom = <i className={"sider-icon icon-iconfont " + iconDom}></i>;
+      }
+      it.icon = iconDom;
+    });
+    setMenus(_menus);
+  }, [props.menus]);
+
+  async function onClick(item) {
+    if (props.onClick) {
+      const res = await props.onClick(item);
+      if (res === false) {
+        return;
+      }
+    }
+    navigate(item.key);
+  }
+
+  function onOpenChange(openKeys) {
+    setOpen(openKeys);
+    props.onOpenChange && props.onOpenChange(openKeys);
+  }
+
+  return (
+    <Menu
+      className={`sider-box ${style["sider-box"]} ${props.className || ""}`}
+      style={{ width: "200px", ...(props.style || {}) }}
+      onClick={onClick}
+      onOpenChange={onOpenChange}
+      selectedKeys={selected}
+      openKeys={open}
+      mode="inline"
+      items={menus}
+    />
+  );
+}
+
+export default Sider;