@hzab/sider 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,16 +1,7 @@
-# @hzab/sider@1.0.1
+# @hzab/sider@1.0.3
 
-- feat:侧边栏主题切换
+chore: 本仓迁移版本首次发布（源码直出 `main: "src"` + 类型入口指向 `dist`）
 
-# @hzab/sider@1.0.0
-
-fix: 暴露 collapsed onCollapse ; onCollapse 支持异步，返回值可改变内部 collapsed
-break: 入口文件 src，去除 lib
-
-# @hzab/sider@0.1.0
-
-- 支持收起、支持收起成浮动块
-
-# @hzab/sider@0.0.1
-
-组件初始化
+- 构建切换到本仓 `@hzab/vite-config` 组件库工厂（`vite build` + `tsc --emitDeclarationOnly` 产出 `dist`）
+- 运行时依赖上移至 `peerDependencies`
+- 组件运行时行为与来源仓 1.0.2 保持一致

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CaiYansong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react/compiler-runtime"),l=require("react");l=s(l,1);let u=require("react-router-dom"),d=require("antd"),f=require("@ant-design/icons");f=s(f,1);let p=require("lodash");p=s(p,1);let m=require("react/jsx-runtime");var h={"layout-sider":`_layout-sider_wu8rw_1`,"sider-box":`_sider-box_wu8rw_6`},{Sider:g}=d.Layout;function _(e){let t=(0,c.c)(45),{collapsible:n,collapsedWidth:r,collapsed:i,onCollapse:a}=e,o=(0,u.useNavigate)(),s=(0,u.useLocation)(),[f,_]=(0,l.useState)(i??!1),y;t[0]===s.pathname?y=t[1]:(y=[s.pathname],t[0]=s.pathname,t[1]=y);let[b,x]=(0,l.useState)(y),S;t[2]===s.pathname?S=t[3]:(S=s.pathname.split(/(?=\/)/)?.slice(0,1),t[2]=s.pathname,t[3]=S);let[C,w]=(0,l.useState)(S),T;t[4]===e.menus?T=t[5]:(T=p.default.cloneDeep(e.menus)||[],t[4]=e.menus,t[5]=T);let[E,D]=(0,l.useState)(T),O,k;t[6]===s.pathname?(O=t[7],k=t[8]):(O=()=>{let e=s.pathname.split(/(?=\/)/);if(e.length>0){let t=[],n=[],r=``;e.forEach(e=>{r=`${r}${e}`,t.push(r),n.push(r)}),x(n),w(t)}},k=[s.pathname],t[6]=s.pathname,t[7]=O,t[8]=k),(0,l.useEffect)(O,k);let A,j;t[9]===e.menus?(A=t[10],j=t[11]):(A=()=>{let t=p.default.cloneDeep(e.menus);t?.map(v),D(t)},j=[e.menus],t[9]=e.menus,t[10]=A,t[11]=j),(0,l.useEffect)(A,j);let M;t[12]!==o||t[13]!==e?(M=async function(t){e.onClick&&await e.onClick(t)===!1||o(t.key)},t[12]=o,t[13]=e,t[14]=M):M=t[14];let N=M,P;t[15]===e?P=t[16]:(P=function(t){w(t),e.onOpenChange&&e.onOpenChange(t)},t[15]=e,t[16]=P);let F=P,I=`layout-sider ${h[`layout-sider`]} ${e.layoutSiderClassName||``}`,L;t[17]===e.siderStyle?L=t[18]:(L=e.siderStyle||{},t[17]=e.siderStyle,t[18]=L);let R;t[19]===L?R=t[20]:(R={...L},t[19]=L,t[20]=R);let z;t[21]===a?z=t[22]:(z=async e=>{let t=await(a&&a(e));_(t===void 0?e:t)},t[21]=a,t[22]=z);let B=`sider-box ${h[`sider-box`]} ${e.className||``}`,V;t[23]===e.style?V=t[24]:(V=e.style||{},t[23]=e.style,t[24]=V);let H;t[25]===V?H=t[26]:(H={...V},t[25]=V,t[26]=H);let U;t[27]!==E||t[28]!==N||t[29]!==F||t[30]!==C||t[31]!==e||t[32]!==b||t[33]!==B||t[34]!==H?(U=(0,m.jsx)(d.Menu,{...e,className:B,style:H,onClick:N,onOpenChange:F,selectedKeys:b,openKeys:C,mode:`inline`,items:E}),t[27]=E,t[28]=N,t[29]=F,t[30]=C,t[31]=e,t[32]=b,t[33]=B,t[34]=H,t[35]=U):U=t[35];let W;return t[36]!==f||t[37]!==r||t[38]!==n||t[39]!==e||t[40]!==R||t[41]!==z||t[42]!==U||t[43]!==I?(W=(0,m.jsx)(g,{...e,className:I,style:R,collapsedWidth:r,collapsible:n,collapsed:f,onCollapse:z,children:U}),t[36]=f,t[37]=r,t[38]=n,t[39]=e,t[40]=R,t[41]=z,t[42]=U,t[43]=I,t[44]=W):W=t[44],W}function v(e){let t=e.icon;/^[A-Z]/.test(t)&&f&&f[t]?t=l.default.createElement(f&&f[t],{style:{fontSize:`14px`}}):t?.startsWith&&t?.startsWith(`icon-`)&&(t=(0,m.jsx)(`i`,{className:`sider-icon icon-iconfont `+t})),e.icon=t}module.exports=_;

package/dist/index.css

@@ -0,0 +1,2 @@
+._layout-sider_wu8rw_1{background-color:#0000;height:100%;position:relative}._layout-sider_wu8rw_1 ._sider-box_wu8rw_6{height:100%;overflow:hidden auto}._layout-sider_wu8rw_1 ._sider-box_wu8rw_6::-webkit-scrollbar{width:4px;height:4px}._layout-sider_wu8rw_1 ._sider-box_wu8rw_6::-webkit-scrollbar-track{background:#efefef}._layout-sider_wu8rw_1 ._sider-box_wu8rw_6::-webkit-scrollbar-thumb{background:#9093994d;border-radius:4px}._layout-sider_wu8rw_1 ._sider-box_wu8rw_6::-webkit-scrollbar-thumb:hover{background:#90939980}.layout-sider .ant-layout-sider-zero-width-trigger{color:#333;background-color:#fff;border:1px solid #f0f0f0}.layout-sider .ant-layout-sider-trigger{color:#333;background-color:#0000}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function Sider(props: any): React.JSX.Element;
+export default Sider;

package/dist/index.js

@@ -0,0 +1,85 @@
+import { c as e } from "react/compiler-runtime";
+import t, { useEffect as n, useState as r } from "react";
+import { useLocation as i, useNavigate as a } from "react-router-dom";
+import { Layout as o, Menu as s } from "antd";
+import * as c from "@ant-design/icons";
+import l from "lodash";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/index.module.less
+var d = {
+	"layout-sider": "_layout-sider_wu8rw_1",
+	"sider-box": "_sider-box_wu8rw_6"
+}, { Sider: f } = o;
+function p(t) {
+	let o = e(45), { collapsible: c, collapsedWidth: p, collapsed: h, onCollapse: g } = t, _ = a(), v = i(), [y, b] = r(h ?? !1), x;
+	o[0] === v.pathname ? x = o[1] : (x = [v.pathname], o[0] = v.pathname, o[1] = x);
+	let [S, C] = r(x), w;
+	o[2] === v.pathname ? w = o[3] : (w = v.pathname.split(/(?=\/)/)?.slice(0, 1), o[2] = v.pathname, o[3] = w);
+	let [T, E] = r(w), D;
+	o[4] === t.menus ? D = o[5] : (D = l.cloneDeep(t.menus) || [], o[4] = t.menus, o[5] = D);
+	let [O, k] = r(D), A, j;
+	o[6] === v.pathname ? (A = o[7], j = o[8]) : (A = () => {
+		let e = v.pathname.split(/(?=\/)/);
+		if (e.length > 0) {
+			let t = [], n = [], r = "";
+			e.forEach((e) => {
+				r = `${r}${e}`, t.push(r), n.push(r);
+			}), C(n), E(t);
+		}
+	}, j = [v.pathname], o[6] = v.pathname, o[7] = A, o[8] = j), n(A, j);
+	let M, N;
+	o[9] === t.menus ? (M = o[10], N = o[11]) : (M = () => {
+		let e = l.cloneDeep(t.menus);
+		e?.map(m), k(e);
+	}, N = [t.menus], o[9] = t.menus, o[10] = M, o[11] = N), n(M, N);
+	let P;
+	o[12] !== _ || o[13] !== t ? (P = async function(e) {
+		t.onClick && await t.onClick(e) === !1 || _(e.key);
+	}, o[12] = _, o[13] = t, o[14] = P) : P = o[14];
+	let F = P, I;
+	o[15] === t ? I = o[16] : (I = function(e) {
+		E(e), t.onOpenChange && t.onOpenChange(e);
+	}, o[15] = t, o[16] = I);
+	let L = I, R = `layout-sider ${d["layout-sider"]} ${t.layoutSiderClassName || ""}`, z;
+	o[17] === t.siderStyle ? z = o[18] : (z = t.siderStyle || {}, o[17] = t.siderStyle, o[18] = z);
+	let B;
+	o[19] === z ? B = o[20] : (B = { ...z }, o[19] = z, o[20] = B);
+	let V;
+	o[21] === g ? V = o[22] : (V = async (e) => {
+		let t = await (g && g(e));
+		b(t === void 0 ? e : t);
+	}, o[21] = g, o[22] = V);
+	let H = `sider-box ${d["sider-box"]} ${t.className || ""}`, U;
+	o[23] === t.style ? U = o[24] : (U = t.style || {}, o[23] = t.style, o[24] = U);
+	let W;
+	o[25] === U ? W = o[26] : (W = { ...U }, o[25] = U, o[26] = W);
+	let G;
+	o[27] !== O || o[28] !== F || o[29] !== L || o[30] !== T || o[31] !== t || o[32] !== S || o[33] !== H || o[34] !== W ? (G = /* @__PURE__ */ u(s, {
+		...t,
+		className: H,
+		style: W,
+		onClick: F,
+		onOpenChange: L,
+		selectedKeys: S,
+		openKeys: T,
+		mode: "inline",
+		items: O
+	}), o[27] = O, o[28] = F, o[29] = L, o[30] = T, o[31] = t, o[32] = S, o[33] = H, o[34] = W, o[35] = G) : G = o[35];
+	let K;
+	return o[36] !== y || o[37] !== p || o[38] !== c || o[39] !== t || o[40] !== B || o[41] !== V || o[42] !== G || o[43] !== R ? (K = /* @__PURE__ */ u(f, {
+		...t,
+		className: R,
+		style: B,
+		collapsedWidth: p,
+		collapsible: c,
+		collapsed: y,
+		onCollapse: V,
+		children: G
+	}), o[36] = y, o[37] = p, o[38] = c, o[39] = t, o[40] = B, o[41] = V, o[42] = G, o[43] = R, o[44] = K) : K = o[44], K;
+}
+function m(e) {
+	let n = e.icon;
+	/^[A-Z]/.test(n) && c && c[n] ? n = t.createElement(c && c[n], { style: { fontSize: "14px" } }) : n?.startsWith && n?.startsWith("icon-") && (n = /* @__PURE__ */ u("i", { className: "sider-icon icon-iconfont " + n })), e.icon = n;
+}
+//#endregion
+export { p as default };

package/package.json

@@ -1,38 +1,58 @@
 {
   "name": "@hzab/sider",
-  "version": "1.0.1",
+  "version": "1.0.3",
+  "private": false,
+  "src-direct": true,
+  "type": "module",
   "description": "侧边栏",
-  "main": "src",
-  "scripts": {
-    "dev": "webpack serve -c ./config/webpack.config.js --env local",
-    "build": "webpack -c ./config/webpack.config.js --env production",
-    "publish-patch": "npm version patch && npm publish --access public",
-    "publish-minor": "npm version minor && npm publish --access public",
-    "publish-major": "npm version major && npm publish --access public"
+  "license": "ISC",
+  "author": "CaiYansong",
+  "engines": {
+    "node": ">=24"
   },
+  "main": "src",
+  "types": "./dist/index.d.ts",
   "files": [
-    "CHANGELOG.md",
-    "src"
+    "src",
+    "dist",
+    "CHANGELOG.md"
   ],
-  "keywords": [],
-  "author": "CaiYansong",
-  "license": "ISC",
+  "sideEffects": [
+    "**/*.less"
+  ],
+  "peerDependencies": {
+    "@ant-design/icons": ">=4.0.0",
+    "antd": ">=4.0.0",
+    "lodash": ">=4.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-router-dom": ">=6.0.0"
+  },
+  "dependencies": {},
   "devDependencies": {
-    "@hzab/webpack-config": "0.1.1",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "eslint": "^8.30.0",
+    "@ant-design/icons": "^4.8.0",
+    "@types/lodash": "^4.17.12",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "@vitest/coverage-v8": "4.1.10",
+    "antd": "^4.14.0",
+    "happy-dom": "^20.11.1",
     "less": "^4.1.3",
+    "lodash": "^4.18.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.14.1",
-    "typescript": "^4.9.4"
+    "typescript": "^5.9.3",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.10",
+    "@hzab/typescript-config": "^0.0.0",
+    "@hzab/vite-config": "^0.0.3-alpha.0",
+    "@hzab/eslint-config": "^0.0.0"
   },
-  "directories": {
-    "lib": "lib"
-  },
-  "dependencies": {
-    "@ant-design/icons": "^4.8.0",
-    "antd": "^4.14.0"
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
   }
-}
+}

package/src/index.module.less

@@ -34,5 +34,9 @@
       color: #333;
       border: 1px solid #f0f0f0;
     }
+    .ant-layout-sider-trigger {
+      background-color: transparent;
+      color: #333;
+    }
   }
 }

package/src/index.tsx

@@ -43,8 +43,8 @@ function Sider(props) {
     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], {
+      if (/^[A-Z]/.test(iconDom) && Icon && (Icon as unknown as Record<string, React.ElementType>)[iconDom]) {
+        iconDom = React.createElement(Icon && (Icon as unknown as Record<string, React.ElementType>)[iconDom], {
           style: { fontSize: "14px" },
         });
       } else if (iconDom?.startsWith && iconDom?.startsWith("icon-")) {
@@ -67,7 +67,7 @@ function Sider(props) {
 
   function onOpenChange(openKeys) {
     setOpen(openKeys);
-    props.onOpenChange && props.onOpenChange(openKeys);
+    if (props.onOpenChange) props.onOpenChange(openKeys);
   }
 
   return (

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/README.md

@@ -1,114 +0,0 @@
-# @hzab/sider
-
-侧边栏组件
-
-- node@14.21
-
-# 组件
-
-## 示例
-
-```jsx
-import Demo from "@hzab/sider";
-
-<Demo
-  menus={[
-    { key: "/", label: "首页", title: "首页" },
-    {
-      key: "/user-server",
-      label: "用户服务",
-      icon: "UserOutlined",
-      children: [
-        {
-          key: "/user-server/user-list",
-          label: "用户管理",
-        },
-        {
-          key: "/user-server/role-list",
-          label: "角色管理",
-        },
-        {
-          key: "/user-server/org-list",
-          label: "组织管理",
-        },
-      ],
-    },
-    {
-      key: "/sys-server",
-      label: "系统服务",
-      icon: "UserOutlined",
-      children: [
-        {
-          key: "/sys-server/config-list",
-          label: "配置管理",
-        },
-        {
-          key: "/sys-server/color-list",
-          label: "颜色管理",
-        },
-        {
-          key: "/sys-server/size-list",
-          label: "尺寸管理",
-        },
-      ],
-    },
-  ]}
-/>;
-```
-
-## API
-
-### InfoPanel Attributes
-
-| 参数           | 类型    | 必填 | 默认值 | 说明                                            |
-| -------------- | ------- | ---- | ------ | ----------------------------------------------- | --- |
-| menus          | Array   | 是   | -      | 侧边栏数据                                      |     |
-| collapsible    | boolean | 否   | -      | 是否可以收起                                    |     |
-| collapsedWidth | number  | 否   | -      | 收缩宽度，设置为 0 会出现特殊 trigger（定位块） |     |
-
-#### MenuItem
-
-| 参数     | 类型   | 必填 | 默认值 | 说明                          |
-| -------- | ------ | ---- | ------ | ----------------------------- | --- |
-| key      | string | 是   | -      | 跳转地址                      |     |
-| label    | string | 是   | -      | 文案                          |     |
-| icon     | string | 是   | -      | icon，可以是 antd icon 字符串 |     |
-| children | Array  | 是   | -      | 子集                          |     |
-
-# 组件开发流程
-
-- 在 config/webpack.config.js 中按需修改 library 配置的文件名
-- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
-- 在 src/typings.d.ts 中按需修改 declare module 配置的包名，解决 ts 报错问题
-- npm run dev
-
-## 文件目录
-
-- example 本地开发测试代码
-- src 组件源码
-- lib 组件打包编译后的代码
-
-## 命令
-
-- 本地运行：npm run dev
-- 打包编译：npm run build
-
-## 发布
-
-- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
-
-- 编译组件：npm run build
-- 命令：npm publish --access public
-- 发布目录：
-  - lib
-  - src
-
-## 配置
-
-### 配置文件
-
-- 本地配置文件：config/config.js
-
-### webpack 配置文件
-
-- config/webpack.config.js