dishui 0.0.81 → 0.0.83

package/dist/layouts/Sidebar.js

@@ -1,41 +1,55 @@
-import { generateSidebarActiveStyles as e } from "../styles/themeStyles.js";
-import t from "../components/Tree/Tree.js";
-import { getMenuItems as n } from "../utils/menu.js";
-import { DesktopSidebarToggleButton as r } from "../components/SidebarToggleButton/index.js";
-import { useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useNavigate as u, useRouterState as d } from "@tanstack/react-router";
+import e from "../components/Text/index.js";
+import { getMenuItems as t } from "../utils/menu.js";
+import { generateSidebarActiveStyles as n } from "../styles/themeStyles.js";
+import r from "../components/Tree/Tree.js";
+import { DesktopSidebarToggleButton as i } from "../components/SidebarToggleButton/index.js";
+import { useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useNavigate as d, useRouterState as f } from "@tanstack/react-router";
 //#region src/layouts/Sidebar.tsx
-var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange: g, initialWidth: _ = 280, collapsedWidth: v = 64, onToggle: y, minWidth: b = 160, maxWidth: x = 400 }) => {
-	let [S, C] = s([]), [w, T] = s(""), [E, D] = s(() => Math.max(b, Math.min(_, x))), O = o(null), k = o(null), A = d({ select: (e) => e.location }), j = u();
-	i(() => {
-		D(Math.max(b, Math.min(_, x)));
+var p = [
+	{
+		size: "base",
+		weight: "semibold"
+	},
+	{
+		size: "sm",
+		weight: "medium"
+	},
+	{
+		size: "sm",
+		weight: "normal"
+	}
+], m = ({ isCollapsed: m, side: h = "left", language: g, items: _, levelText: v, getMenuItems: y, onWidthChange: b, initialWidth: x = 280, collapsedWidth: S = 64, onToggle: C, minWidth: w = 160, maxWidth: T = 400 }) => {
+	let [E, D] = c([]), [O, k] = c(""), [A, j] = c(() => Math.max(w, Math.min(x, T))), M = s(null), N = s(null), P = f({ select: (e) => e.location }), F = d();
+	a(() => {
+		j(Math.max(w, Math.min(x, T)));
 	}, [
-		_,
-		b,
-		x
+		x,
+		w,
+		T
 	]);
-	let M = (e) => {
-		let t = Math.max(b, Math.min(e, x));
-		D(t), g?.(t);
+	let I = (e) => {
+		let t = Math.max(w, Math.min(e, T));
+		j(t), b?.(t);
 	};
-	i(() => {
-		C(m === void 0 ? h ? h(p) : n(p) : m);
+	a(() => {
+		D(_ === void 0 ? y ? y(g) : t(g) : _);
 	}, [
-		p,
-		m,
-		h
-	]), i(() => {
-		if (!w) return;
+		g,
+		_,
+		y
+	]), a(() => {
+		if (!O) return;
 		let e = setTimeout(() => {
-			k.current?.querySelector(".tree-node-content-active")?.scrollIntoView({
+			N.current?.querySelector(".tree-node-content-active")?.scrollIntoView({
 				block: "nearest",
 				behavior: "smooth"
 			});
 		}, 350);
 		return () => clearTimeout(e);
-	}, [w]), i(() => {
-		let e = k.current;
+	}, [O]), a(() => {
+		let e = N.current;
 		if (!e) return;
 		let t = (t) => {
 			if (e.scrollHeight <= e.clientHeight) return;
@@ -46,35 +60,35 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
 		};
 		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
 	}, []);
-	let N = (e, t = !0) => e.map((e) => ({
+	let L = (e, t = !0) => e.map((e) => ({
 		id: e.id,
 		label: e.label,
-		icon: e.icon || (t ? void 0 : /* @__PURE__ */ c("svg", {
+		icon: e.icon || (t ? void 0 : /* @__PURE__ */ l("svg", {
 			xmlns: "http://www.w3.org/2000/svg",
 			className: "h-4 w-4",
 			fill: "none",
 			viewBox: "0 0 24 24",
 			stroke: "currentColor",
-			children: /* @__PURE__ */ c("path", {
+			children: /* @__PURE__ */ l("path", {
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				strokeWidth: "2",
 				d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
 			})
 		})),
-		children: e.children ? N(e.children, !1) : void 0,
+		children: e.children ? L(e.children, !1) : void 0,
 		meta: { path: e.path }
-	})), P = a(() => N(S, !0), [S]), F = a(() => {
-		if (S.length === 0) return [];
+	})), R = o(() => L(E, !0), [E]), z = o(() => {
+		if (E.length === 0) return [];
 		let e = (t) => {
 			let n = [];
 			for (let r of t) r.children?.length && (n.push(r.id), n = [...n, ...e(r.children)]);
 			return n;
 		};
-		return e(S);
-	}, [S]);
-	return i(() => {
-		let e = A.pathname, t = (n) => {
+		return e(E);
+	}, [E]);
+	return a(() => {
+		let e = P.pathname, t = (n) => {
 			for (let r of n) {
 				if (r.path === e) return r.id;
 				if (r.children) {
@@ -83,77 +97,79 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
 				}
 			}
 			return null;
-		}, n = t(S);
-		n && T(n);
-	}, [S, A.pathname]), f ? /* @__PURE__ */ l("div", {
-		ref: O,
+		}, n = t(E);
+		n && k(n);
+	}, [E, P.pathname]), m ? /* @__PURE__ */ u("div", {
+		ref: M,
 		className: "blade-sidebar h-full bg-base-200 overflow-visible transition-all duration-200 ease-in-out relative",
-		style: { width: `${v}px` },
-		children: [y && /* @__PURE__ */ c(r, {
-			isCollapsed: f,
-			onToggle: y,
-			sidebarWidth: E,
-			collapsedWidth: v,
-			onWidthChange: g ? M : void 0,
-			minWidth: b,
-			maxWidth: x,
-			anchorRef: O
-		}), /* @__PURE__ */ c("ul", {
+		style: { width: `${S}px` },
+		children: [C && /* @__PURE__ */ l(i, {
+			isCollapsed: m,
+			side: h,
+			onToggle: C,
+			sidebarWidth: A,
+			collapsedWidth: S,
+			onWidthChange: b ? I : void 0,
+			minWidth: w,
+			maxWidth: T,
+			anchorRef: M
+		}), /* @__PURE__ */ l("ul", {
 			className: "flex flex-col p-2 gap-1 h-full overflow-y-auto overflow-x-hidden",
-			children: S.map((e) => /* @__PURE__ */ c("li", { children: e.path ? /* @__PURE__ */ c("button", {
-				onClick: () => j({ to: e.path }),
+			children: E.map((e) => /* @__PURE__ */ l("li", { children: e.path ? /* @__PURE__ */ l("button", {
+				onClick: () => F({ to: e.path }),
 				"aria-label": e.label,
 				className: "flex justify-center items-center rounded-lg hover:bg-base-300 transition-colors w-full",
 				style: {
 					WebkitTapHighlightColor: "transparent",
-					height: `${Math.min(v - 16, 40)}px`,
-					width: `${Math.min(v - 16, 40)}px`,
+					height: `${Math.min(S - 16, 40)}px`,
+					width: `${Math.min(S - 16, 40)}px`,
 					margin: "0 auto"
 				},
-				children: e.icon || /* @__PURE__ */ c("span", {
+				children: e.icon || /* @__PURE__ */ l("span", {
 					className: "text-sm",
 					children: e.label.charAt(0)
 				})
-			}) : /* @__PURE__ */ c("div", {
+			}) : /* @__PURE__ */ l("div", {
 				className: "flex justify-center items-center",
 				style: {
 					WebkitTapHighlightColor: "transparent",
-					height: `${Math.min(v - 16, 40)}px`,
-					width: `${Math.min(v - 16, 40)}px`,
+					height: `${Math.min(S - 16, 40)}px`,
+					width: `${Math.min(S - 16, 40)}px`,
 					margin: "0 auto"
 				},
-				children: e.icon || /* @__PURE__ */ c("span", {
+				children: e.icon || /* @__PURE__ */ l("span", {
 					className: "text-sm",
 					children: e.label.charAt(0)
 				})
 			}) }, e.id))
 		})]
-	}) : /* @__PURE__ */ l("div", {
-		ref: O,
+	}) : /* @__PURE__ */ u("div", {
+		ref: M,
 		className: "blade-sidebar h-full bg-base-200 overflow-visible flex flex-col transition-colors duration-200 ease-in-out relative",
 		style: {
-			width: `${E}px`,
-			maxWidth: x,
-			minWidth: b
+			width: `${A}px`,
+			maxWidth: T,
+			minWidth: w
 		},
 		children: [
-			y && /* @__PURE__ */ c(r, {
-				isCollapsed: f,
-				onToggle: y,
-				sidebarWidth: E,
-				collapsedWidth: v,
-				onWidthChange: g ? M : void 0,
-				minWidth: b,
-				maxWidth: x,
-				anchorRef: O
+			C && /* @__PURE__ */ l(i, {
+				isCollapsed: m,
+				side: h,
+				onToggle: C,
+				sidebarWidth: A,
+				collapsedWidth: S,
+				onWidthChange: b ? I : void 0,
+				minWidth: w,
+				maxWidth: T,
+				anchorRef: M
 			}),
-			/* @__PURE__ */ c("div", {
-				ref: k,
+			/* @__PURE__ */ l("div", {
+				ref: N,
 				className: "sidebar-scroll min-h-0 flex-grow overflow-y-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent",
-				children: /* @__PURE__ */ c(t, {
-					data: P,
-					activeNodeId: w,
-					defaultExpandedIds: F,
+				children: /* @__PURE__ */ l(r, {
+					data: R,
+					activeNodeId: O,
+					defaultExpandedIds: z,
 					showSearch: !1,
 					showExpandAll: !1,
 					showIcon: !0,
@@ -162,10 +178,24 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
 					indent: 1,
 					togglePosition: "right",
 					maxHeight: "100%",
-					className: "sidebar-tree",
+					className: `sidebar-tree${v === void 0 ? "" : " sidebar-tree-level-text"}`,
+					renderLabel: (t, n) => {
+						let r = Math.min(n, 2), i = v?.[r], a = p[r];
+						return /* @__PURE__ */ l(e, {
+							size: i?.size ?? a.size,
+							weight: i?.weight ?? a.weight,
+							color: O === t.id ? "inherit" : i?.color ?? "inherit",
+							style: v === void 0 ? {
+								fontSize: "inherit",
+								lineHeight: "inherit",
+								fontWeight: "inherit"
+							} : void 0,
+							children: t.label
+						});
+					},
 					onNodeClick: (e) => {
 						if (e.meta?.path) {
-							T(e.id), j({ to: e.meta.path });
+							k(e.id), F({ to: e.meta.path });
 							return;
 						}
 						if (e.children && e.children.length > 0) {
@@ -179,12 +209,12 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
 								}
 								return null;
 							}, n = t(e.children);
-							n ? (T(n.id), j({ to: n.meta.path })) : T(e.id);
-						} else T(e.id);
+							n ? (k(n.id), F({ to: n.meta.path })) : k(e.id);
+						} else k(e.id);
 					}
 				})
 			}),
-			/* @__PURE__ */ c("style", { children: `
+			/* @__PURE__ */ l("style", { children: `
         /* Sidebar Tree 自定义样式 */
         .sidebar-tree {
           background: transparent;
@@ -205,7 +235,7 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
         }
         
         /* 主题活跃状态样式 - 从共用配置生成 */
-        ${e()}
+        ${n()}
         
         /* 悬停状态 */
         .sidebar-tree .tree-node-content:hover:not(.tree-node-active .tree-node-content):not(.tree-node-content-active) {
@@ -263,16 +293,10 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
           opacity: 0.8;
         }
         
-        /* 标签样式 - 增大字体和行高 */
-        .sidebar-tree .tree-node-label {
-          font-size: 0.9375rem;
-          line-height: 1.4rem;
-          font-weight: 450;
-        }
-        
-        /* 一级菜单标签更大 */
-        .sidebar-tree > div > .tree-nodes > .tree-node .tree-node-label {
+        /* Preserve the legacy all-level appearance only when typography is not configured. */
+        .sidebar-tree:not(.sidebar-tree-level-text) .tree-node-label {
           font-size: 1rem;
+          line-height: 1.4rem;
           font-weight: 500;
         }
         
@@ -325,6 +349,6 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
 	});
 };
 //#endregion
-export { f as default };
+export { m as default };
 
 //# sourceMappingURL=Sidebar.js.map

package/dist/layouts/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","names":[],"sources":["../../src/layouts/Sidebar.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from 'react';\nimport { useNavigate, useRouterState } from '@tanstack/react-router';\nimport { MenuItem } from '../types/menu';\nimport { getMenuItems as defaultGetMenuItems } from '../utils/menu';\nimport { Tree, TreeNode } from '../components/Tree';\nimport { generateSidebarActiveStyles } from '../styles/themeStyles';\nimport { DesktopSidebarToggleButton } from '../components/SidebarToggleButton';\n\n// 组件属性\ntype SidebarProps = {\n  isCollapsed: boolean;\n  language: 'zh' | 'en';\n  items?: MenuItem[];\n  getMenuItems?: (language: 'zh' | 'en') => MenuItem[];\n  onWidthChange?: (width: number) => void;\n  initialWidth?: number;\n  collapsedWidth?: number;\n  /**\n   * 折叠 / 展开切换回调。传入后，侧边栏会在其边缘渲染统一的悬浮 pill 控制条\n   * （点击折叠、拖拽调节宽度），无需再在外层单独渲染 SidebarToggleButtons。\n   */\n  onToggle?: () => void;\n  /** 拖拽调节宽度的最小值（px） */\n  minWidth?: number;\n  /** 拖拽调节宽度的最大值（px） */\n  maxWidth?: number;\n};\n\nconst Sidebar: React.FC<SidebarProps> = ({\n  isCollapsed,\n  language,\n  items: propItems,\n  getMenuItems,\n  onWidthChange,\n  initialWidth = 280,\n  collapsedWidth = 64,\n  onToggle,\n  minWidth = 160,\n  maxWidth = 400,\n}) => {\n  const [items, setItems] = useState<MenuItem[]>([]);\n  const [activeNodeId, setActiveNodeId] = useState<string | number>('');\n  const [sidebarWidth, setSidebarWidth] = useState(() => Math.max(minWidth, Math.min(initialWidth, maxWidth)));\n  const sidebarRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const routerState = useRouterState({ select: (s: { location: { pathname: string } }) => s.location });\n  const navigate = useNavigate();\n\n  // 当 initialWidth 改变时，更新侧边栏宽度\n  useEffect(() => {\n    setSidebarWidth(Math.max(minWidth, Math.min(initialWidth, maxWidth)));\n  }, [initialWidth, minWidth, maxWidth]);\n\n  // 统一的宽度变更处理：同步内部状态并通知父组件。\n  // pill 拖拽与外部同步都通过此入口，避免必须回传 initialWidth 才能生效。\n  const handleInternalWidthChange = (width: number) => {\n    const next = Math.max(minWidth, Math.min(width, maxWidth));\n    setSidebarWidth(next);\n    onWidthChange?.(next);\n  };\n\n  // 当语言改变或传入items prop时，更新菜单项\n  useEffect(() => {\n    if (propItems !== undefined) {\n      setItems(propItems);\n    } else if (getMenuItems) {\n      setItems(getMenuItems(language));\n    } else {\n      setItems(defaultGetMenuItems(language));\n    }\n  }, [language, propItems, getMenuItems]);\n\n  // 活跃节点变化时，自动滚动到可见区域（菜单过长时保证当前页可见）。\n  // 延迟 350ms：Tree 展开动画（max-height 0.3s）期间布局仍在变化，立即\n  // scrollIntoView 会计算到动画中途的位置而滚动不到位。\n  useEffect(() => {\n    if (!activeNodeId) return;\n    const t = setTimeout(() => {\n      scrollRef.current\n        ?.querySelector('.tree-node-content-active')\n        ?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }, 350);\n    return () => clearTimeout(t);\n  }, [activeNodeId]);\n\n  // 兜底：确保鼠标悬停在菜单任意位置都能滚轮滚动。\n  // 部分浏览器/嵌套滚动场景下原生滚轮可能不作用于该容器，这里用非被动\n  // 监听手动滚动；成功滚动后 preventDefault，避免浏览器默认行为造成双重滚动。\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const onWheel = (e: WheelEvent) => {\n      if (el.scrollHeight <= el.clientHeight) return;\n      const dy = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY; // 行模式 → 像素\n      if (dy === 0) return;\n      const before = el.scrollTop;\n      el.scrollTop = before + dy;\n      if (el.scrollTop !== before) e.preventDefault();\n    };\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n  }, []);\n\n  // 将 MenuItem 转换为 TreeNode\n  const convertToTreeNodes = (menuItems: MenuItem[], isTopLevel: boolean = true): TreeNode[] => {\n    return menuItems.map(item => ({\n      id: item.id,\n      label: item.label,\n      icon: item.icon || (!isTopLevel ? (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n        </svg>\n      ) : undefined),\n      children: item.children ? convertToTreeNodes(item.children, false) : undefined,\n      meta: {\n        path: item.path,\n      },\n    }));\n  };\n\n  // 转换后的树形数据\n  const treeData = useMemo(() => convertToTreeNodes(items, true), [items]);\n\n  // 获取默认展开的节点ID（默认全部展开）\n  const defaultExpandedIds = useMemo(() => {\n    if (items.length === 0) return [];\n\n    // 收集所有有子节点的项的ID，使其默认全展开\n    const collectAllExpandableIds = (menuItems: MenuItem[]): string[] => {\n      let result: string[] = [];\n      for (const item of menuItems) {\n        if (item.children?.length) {\n          result.push(item.id);\n          result = [...result, ...collectAllExpandableIds(item.children)];\n        }\n      }\n      return result;\n    };\n\n    return collectAllExpandableIds(items);\n  }, [items]);\n\n  // 更新活跃节点ID\n  useEffect(() => {\n    const currentPath = routerState.pathname;\n    const findNodeByPath = (menuItems: MenuItem[]): string | null => {\n      for (const item of menuItems) {\n        if (item.path === currentPath) {\n          return item.id;\n        }\n        if (item.children) {\n          const found = findNodeByPath(item.children);\n          if (found) return found;\n        }\n      }\n      return null;\n    };\n\n    const nodeId = findNodeByPath(items);\n    if (nodeId) {\n      setActiveNodeId(nodeId);\n    }\n  }, [items, routerState.pathname]);\n\n\n\n  // 处理节点点击\n  const handleNodeClick = (node: TreeNode) => {\n    // 如果节点有路径，直接导航\n    if (node.meta?.path) {\n      setActiveNodeId(node.id);\n      navigate({ to: node.meta.path });\n      return;\n    }\n\n    // 如果没有路径但有子节点，寻找第一个有路径的后代节点\n    if (node.children && node.children.length > 0) {\n      const findFirstPath = (nodes: TreeNode[]): TreeNode | null => {\n        for (const n of nodes) {\n          if (n.meta?.path) return n;\n          if (n.children && n.children.length > 0) {\n            const found = findFirstPath(n.children);\n            if (found) return found;\n          }\n        }\n        return null;\n      };\n\n      const firstNodeWithPath = findFirstPath(node.children);\n      if (firstNodeWithPath) {\n        setActiveNodeId(firstNodeWithPath.id);\n        navigate({ to: firstNodeWithPath.meta!.path });\n      } else {\n        // 全都没有路径则激活当前节点\n        setActiveNodeId(node.id);\n      }\n    } else {\n      setActiveNodeId(node.id);\n    }\n  };\n\n  if (isCollapsed) {\n    return (\n      <div\n        ref={sidebarRef}\n        className=\"blade-sidebar h-full bg-base-200 overflow-visible transition-all duration-200 ease-in-out relative\"\n        style={{ width: `${collapsedWidth}px` }}\n      >\n        {onToggle && (\n          <DesktopSidebarToggleButton\n            isCollapsed={isCollapsed}\n            onToggle={onToggle}\n            sidebarWidth={sidebarWidth}\n            collapsedWidth={collapsedWidth}\n            onWidthChange={onWidthChange ? handleInternalWidthChange : undefined}\n            minWidth={minWidth}\n            maxWidth={maxWidth}\n            anchorRef={sidebarRef}\n          />\n        )}\n        <ul className=\"flex flex-col p-2 gap-1 h-full overflow-y-auto overflow-x-hidden\">\n          {items.map(item => (\n            <li key={item.id}>\n              {item.path ? (\n                <button\n                  onClick={() => navigate({ to: item.path! })}\n                                    aria-label={item.label}\n                  className=\"flex justify-center items-center rounded-lg hover:bg-base-300 transition-colors w-full\"\n                  style={{\n                    WebkitTapHighlightColor: 'transparent',\n                    height: `${Math.min(collapsedWidth - 16, 40)}px`,\n                    width: `${Math.min(collapsedWidth - 16, 40)}px`,\n                    margin: '0 auto'\n                  }}\n                >\n                  {item.icon || <span className=\"text-sm\">{item.label.charAt(0)}</span>}\n                </button>\n              ) : (\n                <div\n                  className=\"flex justify-center items-center\"\n                  style={{\n                    WebkitTapHighlightColor: 'transparent',\n                    height: `${Math.min(collapsedWidth - 16, 40)}px`,\n                    width: `${Math.min(collapsedWidth - 16, 40)}px`,\n                    margin: '0 auto'\n                  }}\n                >\n                  {item.icon || <span className=\"text-sm\">{item.label.charAt(0)}</span>}\n                </div>\n              )}\n            </li>\n          ))}\n        </ul>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={sidebarRef}\n      className=\"blade-sidebar h-full bg-base-200 overflow-visible flex flex-col transition-colors duration-200 ease-in-out relative\"\n      style={{ width: `${sidebarWidth}px`, maxWidth, minWidth }}\n    >\n      {onToggle && (\n        <DesktopSidebarToggleButton\n          isCollapsed={isCollapsed}\n          onToggle={onToggle}\n          sidebarWidth={sidebarWidth}\n          collapsedWidth={collapsedWidth}\n          onWidthChange={onWidthChange ? handleInternalWidthChange : undefined}\n          minWidth={minWidth}\n          maxWidth={maxWidth}\n          anchorRef={sidebarRef}\n        />\n      )}\n      <div ref={scrollRef} className=\"sidebar-scroll min-h-0 flex-grow overflow-y-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent\">\n        <Tree\n          data={treeData}\n          activeNodeId={activeNodeId}\n          defaultExpandedIds={defaultExpandedIds}\n          showSearch={false}\n          showExpandAll={false}\n          showIcon={true}\n          showCount={false}\n          showLine={true}\n          indent={1}\n          togglePosition=\"right\"\n          maxHeight=\"100%\"\n          className=\"sidebar-tree\"\n          onNodeClick={handleNodeClick}\n        />\n      </div>\n\n      <style>{`\n        /* Sidebar Tree 自定义样式 */\n        .sidebar-tree {\n          background: transparent;\n          border: none;\n          padding: 0.5rem;\n        }\n        \n        .sidebar-tree .tree-node-content {\n          padding: 0.5rem 1rem;\n          border-radius: 0.5rem;\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        \n        /* 活跃状态 - 为每个主题设置匹配的配色 */\n        .sidebar-tree .tree-node-content-active {\n          font-weight: 600 !important;\n          padding-left: calc(1rem - 4px) !important;\n        }\n        \n        /* 主题活跃状态样式 - 从共用配置生成 */\n        ${generateSidebarActiveStyles()}\n        \n        /* 悬停状态 */\n        .sidebar-tree .tree-node-content:hover:not(.tree-node-active .tree-node-content):not(.tree-node-content-active) {\n          background-color: var(--color-base-200);\n        }\n        \n        /* 右侧展开按钮样式 */\n        .sidebar-tree .tree-node-toggle-right {\n          width: auto;\n          height: auto;\n          min-width: auto;\n          min-height: auto;\n          padding: 0.25rem;\n          opacity: 0.6;\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n          border-radius: 0.25rem;\n        }\n        \n        .sidebar-tree .tree-node-toggle-right:hover {\n          opacity: 1;\n          background-color: var(--color-base-300);\n        }\n        \n        /* 右侧按钮图标旋转 */\n        .sidebar-tree .tree-node-toggle-right svg {\n          width: 1rem;\n          height: 1rem;\n          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        \n        .sidebar-tree .tree-node-toggle-right.tree-node-toggle-expanded svg {\n          transform: rotate(90deg);\n        }\n        \n        /* 图标样式 */\n        .sidebar-tree .tree-node-icon {\n          width: 1.25rem;\n          height: 1.25rem;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n          transition: color 0.2s ease;\n        }\n        \n        .sidebar-tree .tree-node-icon svg {\n          width: 1.25rem;\n          height: 1.25rem;\n        }\n        \n        /* 子节点图标稍小 */\n        .sidebar-tree .tree-node-children .tree-node-icon svg {\n          width: 1rem;\n          height: 1rem;\n          opacity: 0.8;\n        }\n        \n        /* 标签样式 - 增大字体和行高 */\n        .sidebar-tree .tree-node-label {\n          font-size: 0.9375rem;\n          line-height: 1.4rem;\n          font-weight: 450;\n        }\n        \n        /* 一级菜单标签更大 */\n        .sidebar-tree > div > .tree-nodes > .tree-node .tree-node-label {\n          font-size: 1rem;\n          font-weight: 500;\n        }\n        \n        /* 连接线样式 - 强制显示！向右移动并加粗，增加整体左边距 */\n        /* 使用双重选择器增加优先级，避免被其他 Tree 组件样式覆盖 */\n        .sidebar-tree.sidebar-tree .tree-show-line .tree-node-children-expanded,\n        .sidebar-tree.sidebar-tree .tree-node-children.tree-node-children-expanded,\n        div.sidebar-tree .tree-show-line .tree-node-children-expanded,\n        div.sidebar-tree .tree-node-children.tree-node-children-expanded {\n          border-left: 3px solid rgba(128, 128, 128, 0.35) !important;\n          margin-left: 24px !important;\n          padding-left: 8px !important;\n          box-sizing: border-box !important;\n        }\n        \n        /* 隐藏 Tree 组件的圆点装饰 - 避免与 Sidebar 样式冲突 */\n        .sidebar-tree.sidebar-tree .tree-show-line .tree-node-children-expanded::before,\n        div.sidebar-tree .tree-show-line .tree-node-children-expanded::before {\n          display: none !important;\n        }\n        \n        /* 隐藏 Tree 组件的标题和操作按钮 */\n        .sidebar-tree .tree-header,\n        .sidebar-tree .tree-search,\n        .sidebar-tree .tree-actions {\n          display: none;\n        }\n        \n        /* 移除内边距 */\n        .sidebar-tree > div:first-child {\n          padding: 0;\n        }\n        \n        /* 子节点动画优化 - 减小间距 */\n        .sidebar-tree .tree-node-children {\n          margin-top: 0.125rem !important;\n        }\n        \n        /* 一级菜单项间距 */\n        .sidebar-tree > div > .tree-nodes > .tree-node {\n          margin-bottom: 0.375rem;\n        }\n        \n        /* 二级菜单项间距 */\n        .sidebar-tree .tree-node-children > .tree-node {\n          margin-bottom: 0.125rem;\n        }\n      `}</style>\n    </div>\n  );\n};\n\nexport default Sidebar; "],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","names":[],"sources":["../../src/layouts/Sidebar.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from 'react';\nimport { useNavigate, useRouterState } from '@tanstack/react-router';\nimport { MenuItem } from '../types/menu';\nimport { getMenuItems as defaultGetMenuItems } from '../utils/menu';\nimport { Tree, TreeNode } from '../components/Tree';\nimport { generateSidebarActiveStyles } from '../styles/themeStyles';\nimport { DesktopSidebarToggleButton } from '../components/SidebarToggleButton';\nimport Text, { type TextProps } from '../components/Text';\n\nexport type SidebarLevelText = Pick<TextProps, 'size' | 'weight' | 'color'>;\n\nconst DEFAULT_LEVEL_TEXT = [\n  { size: 'base', weight: 'semibold' },\n  { size: 'sm', weight: 'medium' },\n  { size: 'sm', weight: 'normal' },\n] as const satisfies readonly SidebarLevelText[];\n\n// 组件属性\nexport type SidebarProps = {\n  isCollapsed: boolean;\n  /** 侧栏所在侧，控制内侧 pill 的位置与调宽方向。 */\n  side?: 'left' | 'right';\n  language: 'zh' | 'en';\n  items?: MenuItem[];\n  /**\n   * Opt-in typography for levels 1–3; deeper nodes reuse level 3.\n   * Omitted: preserve legacy Sidebar/LayoutSuite typography. When supplied,\n   * missing values default to base/sm/sm, semibold/medium/normal and inherited color.\n   * Selected labels always inherit the active row color.\n   */\n  levelText?: readonly [SidebarLevelText?, SidebarLevelText?, SidebarLevelText?];\n  getMenuItems?: (language: 'zh' | 'en') => MenuItem[];\n  onWidthChange?: (width: number) => void;\n  initialWidth?: number;\n  collapsedWidth?: number;\n  /**\n   * 折叠 / 展开切换回调。传入后，侧边栏会在其边缘渲染统一的悬浮 pill 控制条\n   * （点击折叠、拖拽调节宽度），无需再在外层单独渲染 SidebarToggleButtons。\n   */\n  onToggle?: () => void;\n  /** 拖拽调节宽度的最小值（px） */\n  minWidth?: number;\n  /** 拖拽调节宽度的最大值（px） */\n  maxWidth?: number;\n};\n\nconst Sidebar: React.FC<SidebarProps> = ({\n  isCollapsed,\n  side = 'left',\n  language,\n  items: propItems,\n  levelText,\n  getMenuItems,\n  onWidthChange,\n  initialWidth = 280,\n  collapsedWidth = 64,\n  onToggle,\n  minWidth = 160,\n  maxWidth = 400,\n}) => {\n  const [items, setItems] = useState<MenuItem[]>([]);\n  const [activeNodeId, setActiveNodeId] = useState<string | number>('');\n  const [sidebarWidth, setSidebarWidth] = useState(() => Math.max(minWidth, Math.min(initialWidth, maxWidth)));\n  const sidebarRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const routerState = useRouterState({ select: (s: { location: { pathname: string } }) => s.location });\n  const navigate = useNavigate();\n\n  // 当 initialWidth 改变时，更新侧边栏宽度\n  useEffect(() => {\n    setSidebarWidth(Math.max(minWidth, Math.min(initialWidth, maxWidth)));\n  }, [initialWidth, minWidth, maxWidth]);\n\n  // 统一的宽度变更处理：同步内部状态并通知父组件。\n  // pill 拖拽与外部同步都通过此入口，避免必须回传 initialWidth 才能生效。\n  const handleInternalWidthChange = (width: number) => {\n    const next = Math.max(minWidth, Math.min(width, maxWidth));\n    setSidebarWidth(next);\n    onWidthChange?.(next);\n  };\n\n  // 当语言改变或传入items prop时，更新菜单项\n  useEffect(() => {\n    if (propItems !== undefined) {\n      setItems(propItems);\n    } else if (getMenuItems) {\n      setItems(getMenuItems(language));\n    } else {\n      setItems(defaultGetMenuItems(language));\n    }\n  }, [language, propItems, getMenuItems]);\n\n  // 活跃节点变化时，自动滚动到可见区域（菜单过长时保证当前页可见）。\n  // 延迟 350ms：Tree 展开动画（max-height 0.3s）期间布局仍在变化，立即\n  // scrollIntoView 会计算到动画中途的位置而滚动不到位。\n  useEffect(() => {\n    if (!activeNodeId) return;\n    const t = setTimeout(() => {\n      scrollRef.current\n        ?.querySelector('.tree-node-content-active')\n        ?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }, 350);\n    return () => clearTimeout(t);\n  }, [activeNodeId]);\n\n  // 兜底：确保鼠标悬停在菜单任意位置都能滚轮滚动。\n  // 部分浏览器/嵌套滚动场景下原生滚轮可能不作用于该容器，这里用非被动\n  // 监听手动滚动；成功滚动后 preventDefault，避免浏览器默认行为造成双重滚动。\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const onWheel = (e: WheelEvent) => {\n      if (el.scrollHeight <= el.clientHeight) return;\n      const dy = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY; // 行模式 → 像素\n      if (dy === 0) return;\n      const before = el.scrollTop;\n      el.scrollTop = before + dy;\n      if (el.scrollTop !== before) e.preventDefault();\n    };\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n  }, []);\n\n  // 将 MenuItem 转换为 TreeNode\n  const convertToTreeNodes = (menuItems: MenuItem[], isTopLevel: boolean = true): TreeNode[] => {\n    return menuItems.map(item => ({\n      id: item.id,\n      label: item.label,\n      icon: item.icon || (!isTopLevel ? (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n        </svg>\n      ) : undefined),\n      children: item.children ? convertToTreeNodes(item.children, false) : undefined,\n      meta: {\n        path: item.path,\n      },\n    }));\n  };\n\n  // 转换后的树形数据\n  const treeData = useMemo(() => convertToTreeNodes(items, true), [items]);\n\n  // 获取默认展开的节点ID（默认全部展开）\n  const defaultExpandedIds = useMemo(() => {\n    if (items.length === 0) return [];\n\n    // 收集所有有子节点的项的ID，使其默认全展开\n    const collectAllExpandableIds = (menuItems: MenuItem[]): string[] => {\n      let result: string[] = [];\n      for (const item of menuItems) {\n        if (item.children?.length) {\n          result.push(item.id);\n          result = [...result, ...collectAllExpandableIds(item.children)];\n        }\n      }\n      return result;\n    };\n\n    return collectAllExpandableIds(items);\n  }, [items]);\n\n  // 更新活跃节点ID\n  useEffect(() => {\n    const currentPath = routerState.pathname;\n    const findNodeByPath = (menuItems: MenuItem[]): string | null => {\n      for (const item of menuItems) {\n        if (item.path === currentPath) {\n          return item.id;\n        }\n        if (item.children) {\n          const found = findNodeByPath(item.children);\n          if (found) return found;\n        }\n      }\n      return null;\n    };\n\n    const nodeId = findNodeByPath(items);\n    if (nodeId) {\n      setActiveNodeId(nodeId);\n    }\n  }, [items, routerState.pathname]);\n\n\n\n  // 处理节点点击\n  const handleNodeClick = (node: TreeNode) => {\n    // 如果节点有路径，直接导航\n    if (node.meta?.path) {\n      setActiveNodeId(node.id);\n      navigate({ to: node.meta.path });\n      return;\n    }\n\n    // 如果没有路径但有子节点，寻找第一个有路径的后代节点\n    if (node.children && node.children.length > 0) {\n      const findFirstPath = (nodes: TreeNode[]): TreeNode | null => {\n        for (const n of nodes) {\n          if (n.meta?.path) return n;\n          if (n.children && n.children.length > 0) {\n            const found = findFirstPath(n.children);\n            if (found) return found;\n          }\n        }\n        return null;\n      };\n\n      const firstNodeWithPath = findFirstPath(node.children);\n      if (firstNodeWithPath) {\n        setActiveNodeId(firstNodeWithPath.id);\n        navigate({ to: firstNodeWithPath.meta!.path });\n      } else {\n        // 全都没有路径则激活当前节点\n        setActiveNodeId(node.id);\n      }\n    } else {\n      setActiveNodeId(node.id);\n    }\n  };\n\n  if (isCollapsed) {\n    return (\n      <div\n        ref={sidebarRef}\n        className=\"blade-sidebar h-full bg-base-200 overflow-visible transition-all duration-200 ease-in-out relative\"\n        style={{ width: `${collapsedWidth}px` }}\n      >\n        {onToggle && (\n          <DesktopSidebarToggleButton\n            isCollapsed={isCollapsed}\n            side={side}\n            onToggle={onToggle}\n            sidebarWidth={sidebarWidth}\n            collapsedWidth={collapsedWidth}\n            onWidthChange={onWidthChange ? handleInternalWidthChange : undefined}\n            minWidth={minWidth}\n            maxWidth={maxWidth}\n            anchorRef={sidebarRef}\n          />\n        )}\n        <ul className=\"flex flex-col p-2 gap-1 h-full overflow-y-auto overflow-x-hidden\">\n          {items.map(item => (\n            <li key={item.id}>\n              {item.path ? (\n                <button\n                  onClick={() => navigate({ to: item.path! })}\n                                    aria-label={item.label}\n                  className=\"flex justify-center items-center rounded-lg hover:bg-base-300 transition-colors w-full\"\n                  style={{\n                    WebkitTapHighlightColor: 'transparent',\n                    height: `${Math.min(collapsedWidth - 16, 40)}px`,\n                    width: `${Math.min(collapsedWidth - 16, 40)}px`,\n                    margin: '0 auto'\n                  }}\n                >\n                  {item.icon || <span className=\"text-sm\">{item.label.charAt(0)}</span>}\n                </button>\n              ) : (\n                <div\n                  className=\"flex justify-center items-center\"\n                  style={{\n                    WebkitTapHighlightColor: 'transparent',\n                    height: `${Math.min(collapsedWidth - 16, 40)}px`,\n                    width: `${Math.min(collapsedWidth - 16, 40)}px`,\n                    margin: '0 auto'\n                  }}\n                >\n                  {item.icon || <span className=\"text-sm\">{item.label.charAt(0)}</span>}\n                </div>\n              )}\n            </li>\n          ))}\n        </ul>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={sidebarRef}\n      className=\"blade-sidebar h-full bg-base-200 overflow-visible flex flex-col transition-colors duration-200 ease-in-out relative\"\n      style={{ width: `${sidebarWidth}px`, maxWidth, minWidth }}\n    >\n      {onToggle && (\n        <DesktopSidebarToggleButton\n          isCollapsed={isCollapsed}\n          side={side}\n          onToggle={onToggle}\n          sidebarWidth={sidebarWidth}\n          collapsedWidth={collapsedWidth}\n          onWidthChange={onWidthChange ? handleInternalWidthChange : undefined}\n          minWidth={minWidth}\n          maxWidth={maxWidth}\n          anchorRef={sidebarRef}\n        />\n      )}\n      <div ref={scrollRef} className=\"sidebar-scroll min-h-0 flex-grow overflow-y-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent\">\n        <Tree\n          data={treeData}\n          activeNodeId={activeNodeId}\n          defaultExpandedIds={defaultExpandedIds}\n          showSearch={false}\n          showExpandAll={false}\n          showIcon={true}\n          showCount={false}\n          showLine={true}\n          indent={1}\n          togglePosition=\"right\"\n          maxHeight=\"100%\"\n          className={`sidebar-tree${levelText !== undefined ? ' sidebar-tree-level-text' : ''}`}\n          renderLabel={(node, depth) => {\n            const level = Math.min(depth, 2);\n            const text = levelText?.[level];\n            const defaults = DEFAULT_LEVEL_TEXT[level];\n            return (\n              <Text\n                size={text?.size ?? defaults.size}\n                weight={text?.weight ?? defaults.weight}\n                color={activeNodeId === node.id ? 'inherit' : text?.color ?? 'inherit'}\n                style={levelText === undefined\n                  ? { fontSize: 'inherit', lineHeight: 'inherit', fontWeight: 'inherit' }\n                  : undefined}\n              >\n                {node.label}\n              </Text>\n            );\n          }}\n          onNodeClick={handleNodeClick}\n        />\n      </div>\n\n      <style>{`\n        /* Sidebar Tree 自定义样式 */\n        .sidebar-tree {\n          background: transparent;\n          border: none;\n          padding: 0.5rem;\n        }\n        \n        .sidebar-tree .tree-node-content {\n          padding: 0.5rem 1rem;\n          border-radius: 0.5rem;\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        \n        /* 活跃状态 - 为每个主题设置匹配的配色 */\n        .sidebar-tree .tree-node-content-active {\n          font-weight: 600 !important;\n          padding-left: calc(1rem - 4px) !important;\n        }\n        \n        /* 主题活跃状态样式 - 从共用配置生成 */\n        ${generateSidebarActiveStyles()}\n        \n        /* 悬停状态 */\n        .sidebar-tree .tree-node-content:hover:not(.tree-node-active .tree-node-content):not(.tree-node-content-active) {\n          background-color: var(--color-base-200);\n        }\n        \n        /* 右侧展开按钮样式 */\n        .sidebar-tree .tree-node-toggle-right {\n          width: auto;\n          height: auto;\n          min-width: auto;\n          min-height: auto;\n          padding: 0.25rem;\n          opacity: 0.6;\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n          border-radius: 0.25rem;\n        }\n        \n        .sidebar-tree .tree-node-toggle-right:hover {\n          opacity: 1;\n          background-color: var(--color-base-300);\n        }\n        \n        /* 右侧按钮图标旋转 */\n        .sidebar-tree .tree-node-toggle-right svg {\n          width: 1rem;\n          height: 1rem;\n          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        \n        .sidebar-tree .tree-node-toggle-right.tree-node-toggle-expanded svg {\n          transform: rotate(90deg);\n        }\n        \n        /* 图标样式 */\n        .sidebar-tree .tree-node-icon {\n          width: 1.25rem;\n          height: 1.25rem;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n          transition: color 0.2s ease;\n        }\n        \n        .sidebar-tree .tree-node-icon svg {\n          width: 1.25rem;\n          height: 1.25rem;\n        }\n        \n        /* 子节点图标稍小 */\n        .sidebar-tree .tree-node-children .tree-node-icon svg {\n          width: 1rem;\n          height: 1rem;\n          opacity: 0.8;\n        }\n        \n        /* Preserve the legacy all-level appearance only when typography is not configured. */\n        .sidebar-tree:not(.sidebar-tree-level-text) .tree-node-label {\n          font-size: 1rem;\n          line-height: 1.4rem;\n          font-weight: 500;\n        }\n        \n        /* 连接线样式 - 强制显示！向右移动并加粗，增加整体左边距 */\n        /* 使用双重选择器增加优先级，避免被其他 Tree 组件样式覆盖 */\n        .sidebar-tree.sidebar-tree .tree-show-line .tree-node-children-expanded,\n        .sidebar-tree.sidebar-tree .tree-node-children.tree-node-children-expanded,\n        div.sidebar-tree .tree-show-line .tree-node-children-expanded,\n        div.sidebar-tree .tree-node-children.tree-node-children-expanded {\n          border-left: 3px solid rgba(128, 128, 128, 0.35) !important;\n          margin-left: 24px !important;\n          padding-left: 8px !important;\n          box-sizing: border-box !important;\n        }\n        \n        /* 隐藏 Tree 组件的圆点装饰 - 避免与 Sidebar 样式冲突 */\n        .sidebar-tree.sidebar-tree .tree-show-line .tree-node-children-expanded::before,\n        div.sidebar-tree .tree-show-line .tree-node-children-expanded::before {\n          display: none !important;\n        }\n        \n        /* 隐藏 Tree 组件的标题和操作按钮 */\n        .sidebar-tree .tree-header,\n        .sidebar-tree .tree-search,\n        .sidebar-tree .tree-actions {\n          display: none;\n        }\n        \n        /* 移除内边距 */\n        .sidebar-tree > div:first-child {\n          padding: 0;\n        }\n        \n        /* 子节点动画优化 - 减小间距 */\n        .sidebar-tree .tree-node-children {\n          margin-top: 0.125rem !important;\n        }\n        \n        /* 一级菜单项间距 */\n        .sidebar-tree > div > .tree-nodes > .tree-node {\n          margin-bottom: 0.375rem;\n        }\n        \n        /* 二级菜单项间距 */\n        .sidebar-tree .tree-node-children > .tree-node {\n          margin-bottom: 0.125rem;\n        }\n      `}</style>\n    </div>\n  );\n};\n\nexport default Sidebar; "],"mappings":"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"}

package/dist/lite.d.ts

@@ -1,11 +1,17 @@
 export { Resizable, ResizablePanel, ResizableHandle, useResize } from './components/Resizable';
 export type { ResizableProps, ResizablePanelProps, ResizableHandleProps, UseResizeOptions } from './components/Resizable';
+export { default as ButtonMenu } from './components/ButtonMenu';
+export type { ButtonMenuProps, ButtonMenuItem } from './components/ButtonMenu';
 export { default as Button } from './components/Button';
 export type { ButtonProps } from './components/Button';
 export { default as Badge } from './components/Badge';
 export type { BadgeProps } from './components/Badge';
 export { default as Input } from './components/Input';
 export type { InputProps } from './components/Input';
+export { default as Field } from './components/Field';
+export type { FieldProps } from './components/Field';
+export { default as Textarea } from './components/Textarea';
+export type { TextareaProps } from './components/Textarea';
 export { default as Card } from './components/Card';
 export type { CardProps, CardMetricProps, CardMetricItem } from './components/Card';
 export { default as GroupButton } from './components/GroupButton';
@@ -22,8 +28,10 @@ export { default as Section } from './components/Section';
 export type { SectionProps, SectionSlotProps } from './components/Section';
 export { default as Text } from './components/Text';
 export type { TextProps } from './components/Text';
-export { default as Page } from './components/Page';
-export type { PageProps, PageBodyProps, PageAsideProps, PageMainProps } from './components/Page';
+export { default as Page, PageFooter, PageFloat } from './components/Page';
+export type { PageProps, PageBodyProps, PageAsideProps, PageMainProps, PageFooterProps, PageFloatProps, PagePanelProps } from './components/Page';
+export { DashboardSuite, LayoutSuite } from './components/LayoutSuite/DashboardSuite';
+export type { DashboardSuiteProps } from './components/LayoutSuite/DashboardSuite';
 export { default as EmptyState } from './components/EmptyState';
 export type { EmptyStateProps } from './components/EmptyState';
 export { default as Layout, Container, Grid, GridItem, Flex, Group, Space } from './components/Layout';

package/dist/lite.js

@@ -6,15 +6,20 @@ import o from "./components/Skeleton/index.js";
 import s from "./components/GroupedTable/index.js";
 import c from "./components/NavigationList/index.js";
 import l from "./components/Section/index.js";
-import u from "./components/Badge/index.js";
-import d from "./components/Input/index.js";
-import f from "./components/Label/index.js";
-import p from "./components/Checkbox/index.js";
-import m from "./components/Select/index.js";
-import h from "./components/Card/index.js";
-import g from "./components/Page/index.js";
-import _ from "./components/EmptyState/index.js";
-import v, { Container as y, Flex as b, Grid as x, GridItem as S, Group as C, Space as w } from "./components/Layout/index.js";
-import T from "./components/Text/index.js";
-import E from "./components/Tree/Tree.js";
-export { u as Badge, i as Button, h as Card, p as Checkbox, y as Container, _ as EmptyState, b as Flex, x as Grid, S as GridItem, C as Group, a as GroupButton, s as GroupedTable, d as Input, f as Label, v as Layout, c as NavigationList, g as Page, t as Resizable, n as ResizableHandle, r as ResizablePanel, l as Section, m as Select, o as Skeleton, w as Space, T as Text, E as Tree, e as useResize };
+import u from "./components/Text/index.js";
+import d from "./components/ButtonMenu/index.js";
+import f from "./components/Badge/index.js";
+import p from "./components/Input/index.js";
+import m from "./components/Field/index.js";
+import h from "./components/Textarea/index.js";
+import g from "./components/Label/index.js";
+import _ from "./components/Checkbox/index.js";
+import v from "./components/Select/index.js";
+import y from "./components/Card/index.js";
+import b from "./components/Page/Float2.js";
+import x, { PageFooter as S } from "./components/Page/index.js";
+import C from "./components/Tree/Tree.js";
+import w, { Container as T, Flex as E, Grid as D, GridItem as O, Group as k, Space as A } from "./components/Layout/index.js";
+import { DashboardSuite as j, LayoutSuite as M } from "./components/LayoutSuite/DashboardSuite.js";
+import N from "./components/EmptyState/index.js";
+export { f as Badge, i as Button, d as ButtonMenu, y as Card, _ as Checkbox, T as Container, j as DashboardSuite, N as EmptyState, m as Field, E as Flex, D as Grid, O as GridItem, k as Group, a as GroupButton, s as GroupedTable, p as Input, g as Label, w as Layout, M as LayoutSuite, c as NavigationList, x as Page, b as PageFloat, S as PageFooter, t as Resizable, n as ResizableHandle, r as ResizablePanel, l as Section, v as Select, o as Skeleton, A as Space, u as Text, h as Textarea, C as Tree, e as useResize };

package/dist/styles/themeStyles.js

@@ -1,14 +1,14 @@
 //#region src/styles/themeStyles.ts
 var e = {
 	light: {
-		backgroundColor: "var(--blade-accent)",
-		borderColor: "var(--blade-accent)",
-		textColor: "var(--blade-accent-fg)"
+		backgroundColor: "var(--dishui-accent)",
+		borderColor: "var(--dishui-accent)",
+		textColor: "var(--dishui-accent-fg)"
 	},
 	dark: {
-		backgroundColor: "var(--blade-accent)",
-		borderColor: "var(--blade-accent)",
-		textColor: "var(--blade-accent-fg)"
+		backgroundColor: "var(--dishui-accent)",
+		borderColor: "var(--dishui-accent)",
+		textColor: "var(--dishui-accent-fg)"
 	},
 	cursor: {
 		backgroundColor: "rgba(96, 165, 250, 0.16)",

package/dist/styles/themeStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeStyles.js","names":[],"sources":["../../src/styles/themeStyles.ts"],"sourcesContent":["// 共用主题样式配置\n// 用于 Tree 组件和 Sidebar 组件的活跃状态样式\n\nexport interface ThemeActiveStyle {\n  backgroundColor: string;\n  borderColor: string;\n  textColor: string;\n}\n\n// 主题配色映射\nexport const themeActiveStyles: Record<string, ThemeActiveStyle> = {\n  light: {\n    backgroundColor: 'var(--blade-accent)',\n    borderColor: 'var(--blade-accent)',\n    textColor: 'var(--blade-accent-fg)',\n  },\n  dark: {\n    backgroundColor: 'var(--blade-accent)',\n    borderColor: 'var(--blade-accent)',\n    textColor: 'var(--blade-accent-fg)',\n  },\n  cursor: {\n    backgroundColor: 'rgba(96, 165, 250, 0.16)',\n    borderColor: 'rgb(96, 165, 250)',\n    textColor: 'rgb(147, 197, 253)',\n  },\n  retro: {\n    backgroundColor: 'rgba(239, 68, 68, 0.15)',\n    borderColor: 'rgb(239, 68, 68)',\n    textColor: 'rgb(239, 68, 68)',\n  },\n  cyberpunk: {\n    backgroundColor: 'rgba(255, 221, 0, 0.18)',\n    borderColor: 'rgb(255, 221, 0)',\n    textColor: 'rgb(255, 221, 0)',\n  },\n  matrix: {\n    backgroundColor: 'rgba(0, 255, 65, 0.15)',\n    borderColor: 'rgb(0, 255, 65)',\n    textColor: 'rgb(0, 255, 65)',\n  },\n  oceanblue: {\n    backgroundColor: 'rgba(6, 95, 212, 0.18)',\n    borderColor: 'rgb(6, 95, 212)',\n    textColor: 'rgb(6, 95, 212)',\n  },\n  eyecare: {\n    backgroundColor: 'rgba(34, 139, 34, 0.18)',\n    borderColor: 'rgb(34, 139, 34)',\n    textColor: 'rgb(34, 139, 34)',\n  },\n  ghibli: {\n    backgroundColor: 'rgba(249, 115, 22, 0.18)',\n    borderColor: 'rgb(249, 115, 22)',\n    textColor: 'rgb(249, 115, 22)',\n  },\n  pinkgirl: {\n    backgroundColor: 'rgba(236, 72, 153, 0.15)',\n    borderColor: 'rgb(236, 72, 153)',\n    textColor: 'rgb(236, 72, 153)',\n  },\n  mintgirl: {\n    backgroundColor: 'rgba(52, 211, 153, 0.15)',\n    borderColor: 'rgb(52, 211, 153)',\n    textColor: 'rgb(52, 211, 153)',\n  },\n\n  wuxing: {\n    backgroundColor: 'rgba(180, 120, 60, 0.15)',\n    borderColor: 'rgb(180, 120, 60)',\n    textColor: 'rgb(140, 90, 40)',\n  },\n  jukebox: {\n    backgroundColor: 'rgba(147, 51, 234, 0.18)',\n    borderColor: 'rgb(147, 51, 234)',\n    textColor: 'rgb(167, 139, 250)',\n  },\n};\n\n// 生成 Tree 组件的主题活跃状态 CSS\nexport const generateTreeActiveStyles = (): string => {\n  return Object.entries(themeActiveStyles)\n    .map(([theme, style]) => `\n        /* ${theme.charAt(0).toUpperCase() + theme.slice(1)} 主题 */\n        [data-theme=\"${theme}\"] .tree-node-content-active {\n          background-color: ${style.backgroundColor} !important;\n          border-left: 4px solid ${style.borderColor} !important;\n          color: ${style.textColor} !important;\n        }\n        [data-theme=\"${theme}\"] .tree-node-content-active .tree-node-icon,\n        [data-theme=\"${theme}\"] .tree-node-content-active .tree-node-label {\n          color: ${style.textColor} !important;\n        }`)\n    .join('\\n');\n};\n\n// 生成 Sidebar 组件的主题活跃状态 CSS\nexport const generateSidebarActiveStyles = (): string => {\n  return Object.entries(themeActiveStyles)\n    .map(([theme, style]) => `\n        /* ${theme.charAt(0).toUpperCase() + theme.slice(1)} 主题 */\n        [data-theme=\"${theme}\"] .sidebar-tree .tree-node-content-active {\n          background-color: ${style.backgroundColor} !important;\n          border-left: 4px solid ${style.borderColor} !important;\n        }\n        [data-theme=\"${theme}\"] .sidebar-tree .tree-node-content-active .tree-node-label,\n        [data-theme=\"${theme}\"] .sidebar-tree .tree-node-content-active .tree-node-icon svg {\n          color: ${style.textColor} !important;\n          stroke: ${style.textColor} !important;\n        }`)\n    .join('\\n');\n};\n\n"],"mappings":";AAUA,IAAa,IAAsD;CACjE,OAAO;EACL,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,MAAM;EACJ,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,QAAQ;EACN,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,OAAO;EACL,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,WAAW;EACT,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,QAAQ;EACN,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,WAAW;EACT,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,SAAS;EACP,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,QAAQ;EACN,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,UAAU;EACR,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,UAAU;EACR,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CAEA,QAAQ;EACN,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,SAAS;EACP,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;AACF,GAGa,UACJ,OAAO,QAAQ,CAAiB,CAAC,CACrC,KAAK,CAAC,GAAO,OAAW;aAChB,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,MAAM,CAAC,EAAE;uBACrC,EAAM;8BACC,EAAM,gBAAgB;mCACjB,EAAM,YAAY;mBAClC,EAAM,UAAU;;uBAEZ,EAAM;uBACN,EAAM;mBACV,EAAM,UAAU;UACzB,CAAC,CACN,KAAK,IAAI,GAID,UACJ,OAAO,QAAQ,CAAiB,CAAC,CACrC,KAAK,CAAC,GAAO,OAAW;aAChB,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,MAAM,CAAC,EAAE;uBACrC,EAAM;8BACC,EAAM,gBAAgB;mCACjB,EAAM,YAAY;;uBAE9B,EAAM;uBACN,EAAM;mBACV,EAAM,UAAU;oBACf,EAAM,UAAU;UAC1B,CAAC,CACN,KAAK,IAAI"}
+{"version":3,"file":"themeStyles.js","names":[],"sources":["../../src/styles/themeStyles.ts"],"sourcesContent":["// 共用主题样式配置\n// 用于 Tree 组件和 Sidebar 组件的活跃状态样式\n\nexport interface ThemeActiveStyle {\n  backgroundColor: string;\n  borderColor: string;\n  textColor: string;\n}\n\n// 主题配色映射\nexport const themeActiveStyles: Record<string, ThemeActiveStyle> = {\n  light: {\n    backgroundColor: 'var(--dishui-accent)',\n    borderColor: 'var(--dishui-accent)',\n    textColor: 'var(--dishui-accent-fg)',\n  },\n  dark: {\n    backgroundColor: 'var(--dishui-accent)',\n    borderColor: 'var(--dishui-accent)',\n    textColor: 'var(--dishui-accent-fg)',\n  },\n  cursor: {\n    backgroundColor: 'rgba(96, 165, 250, 0.16)',\n    borderColor: 'rgb(96, 165, 250)',\n    textColor: 'rgb(147, 197, 253)',\n  },\n  retro: {\n    backgroundColor: 'rgba(239, 68, 68, 0.15)',\n    borderColor: 'rgb(239, 68, 68)',\n    textColor: 'rgb(239, 68, 68)',\n  },\n  cyberpunk: {\n    backgroundColor: 'rgba(255, 221, 0, 0.18)',\n    borderColor: 'rgb(255, 221, 0)',\n    textColor: 'rgb(255, 221, 0)',\n  },\n  matrix: {\n    backgroundColor: 'rgba(0, 255, 65, 0.15)',\n    borderColor: 'rgb(0, 255, 65)',\n    textColor: 'rgb(0, 255, 65)',\n  },\n  oceanblue: {\n    backgroundColor: 'rgba(6, 95, 212, 0.18)',\n    borderColor: 'rgb(6, 95, 212)',\n    textColor: 'rgb(6, 95, 212)',\n  },\n  eyecare: {\n    backgroundColor: 'rgba(34, 139, 34, 0.18)',\n    borderColor: 'rgb(34, 139, 34)',\n    textColor: 'rgb(34, 139, 34)',\n  },\n  ghibli: {\n    backgroundColor: 'rgba(249, 115, 22, 0.18)',\n    borderColor: 'rgb(249, 115, 22)',\n    textColor: 'rgb(249, 115, 22)',\n  },\n  pinkgirl: {\n    backgroundColor: 'rgba(236, 72, 153, 0.15)',\n    borderColor: 'rgb(236, 72, 153)',\n    textColor: 'rgb(236, 72, 153)',\n  },\n  mintgirl: {\n    backgroundColor: 'rgba(52, 211, 153, 0.15)',\n    borderColor: 'rgb(52, 211, 153)',\n    textColor: 'rgb(52, 211, 153)',\n  },\n\n  wuxing: {\n    backgroundColor: 'rgba(180, 120, 60, 0.15)',\n    borderColor: 'rgb(180, 120, 60)',\n    textColor: 'rgb(140, 90, 40)',\n  },\n  jukebox: {\n    backgroundColor: 'rgba(147, 51, 234, 0.18)',\n    borderColor: 'rgb(147, 51, 234)',\n    textColor: 'rgb(167, 139, 250)',\n  },\n};\n\n// 生成 Tree 组件的主题活跃状态 CSS\nexport const generateTreeActiveStyles = (): string => {\n  return Object.entries(themeActiveStyles)\n    .map(([theme, style]) => `\n        /* ${theme.charAt(0).toUpperCase() + theme.slice(1)} 主题 */\n        [data-theme=\"${theme}\"] .tree-node-content-active {\n          background-color: ${style.backgroundColor} !important;\n          border-left: 4px solid ${style.borderColor} !important;\n          color: ${style.textColor} !important;\n        }\n        [data-theme=\"${theme}\"] .tree-node-content-active .tree-node-icon,\n        [data-theme=\"${theme}\"] .tree-node-content-active .tree-node-label {\n          color: ${style.textColor} !important;\n        }`)\n    .join('\\n');\n};\n\n// 生成 Sidebar 组件的主题活跃状态 CSS\nexport const generateSidebarActiveStyles = (): string => {\n  return Object.entries(themeActiveStyles)\n    .map(([theme, style]) => `\n        /* ${theme.charAt(0).toUpperCase() + theme.slice(1)} 主题 */\n        [data-theme=\"${theme}\"] .sidebar-tree .tree-node-content-active {\n          background-color: ${style.backgroundColor} !important;\n          border-left: 4px solid ${style.borderColor} !important;\n        }\n        [data-theme=\"${theme}\"] .sidebar-tree .tree-node-content-active .tree-node-label,\n        [data-theme=\"${theme}\"] .sidebar-tree .tree-node-content-active .tree-node-icon svg {\n          color: ${style.textColor} !important;\n          stroke: ${style.textColor} !important;\n        }`)\n    .join('\\n');\n};\n\n"],"mappings":";AAUA,IAAa,IAAsD;CACjE,OAAO;EACL,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,MAAM;EACJ,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,QAAQ;EACN,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,OAAO;EACL,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,WAAW;EACT,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,QAAQ;EACN,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,WAAW;EACT,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,SAAS;EACP,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,QAAQ;EACN,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,UAAU;EACR,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,UAAU;EACR,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CAEA,QAAQ;EACN,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;CACA,SAAS;EACP,iBAAiB;EACjB,aAAa;EACb,WAAW;CACb;AACF,GAGa,UACJ,OAAO,QAAQ,CAAiB,CAAC,CACrC,KAAK,CAAC,GAAO,OAAW;aAChB,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,MAAM,CAAC,EAAE;uBACrC,EAAM;8BACC,EAAM,gBAAgB;mCACjB,EAAM,YAAY;mBAClC,EAAM,UAAU;;uBAEZ,EAAM;uBACN,EAAM;mBACV,EAAM,UAAU;UACzB,CAAC,CACN,KAAK,IAAI,GAID,UACJ,OAAO,QAAQ,CAAiB,CAAC,CACrC,KAAK,CAAC,GAAO,OAAW;aAChB,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,MAAM,CAAC,EAAE;uBACrC,EAAM;8BACC,EAAM,gBAAgB;mCACjB,EAAM,YAAY;;uBAE9B,EAAM;uBACN,EAAM;mBACV,EAAM,UAAU;oBACf,EAAM,UAAU;UAC1B,CAAC,CACN,KAAK,IAAI"}

package/dist/utils/menu.js

@@ -75,12 +75,10 @@ var n = (n) => {
 	let m = l.flatMap((e) => {
 		let t = p.get(e.id);
 		return t ? [t] : f.has(e.id) ? [] : [e];
-	});
-	for (let e of u) {
+	}), h = u.flatMap((e) => {
 		let t = p.get(e.id);
-		t && m.push(t);
-	}
-	let h = Object.values(a.children || {}), g = u.filter((e) => !f.has(e.id)), _ = c ? Object.values(c.children || {}) : [], v = [
+		return t ? [t] : f.has(e.id) ? [] : [e];
+	}), g = Object.values(a.children || {}), _ = c ? Object.values(c.children || {}) : [], v = [
 		{
 			...r,
 			icon: /* @__PURE__ */ t("svg", {
@@ -131,7 +129,7 @@ var n = (n) => {
 					d: "M4 5a1 1 0 011-1h16v6H4V5zm0 9h7v6H4v-6zm11 0h6v6h-6v-6z"
 				})
 			}),
-			children: h
+			children: g
 		},
 		{
 			...o,
@@ -150,9 +148,9 @@ var n = (n) => {
 			})
 		}
 	];
-	return c && v.push({
-		id: c.id,
-		label: c.label,
+	return s && v.push({
+		id: s.id,
+		label: s.label,
 		icon: /* @__PURE__ */ t("svg", {
 			xmlns: "http://www.w3.org/2000/svg",
 			className: "h-5 w-5",
@@ -163,13 +161,13 @@ var n = (n) => {
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				strokeWidth: "2",
-				d: "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
 			})
 		}),
-		children: _
-	}), s && v.push({
-		id: s.id,
-		label: s.label,
+		children: h
+	}), c && v.push({
+		id: c.id,
+		label: c.label,
 		icon: /* @__PURE__ */ t("svg", {
 			xmlns: "http://www.w3.org/2000/svg",
 			className: "h-5 w-5",
@@ -180,10 +178,10 @@ var n = (n) => {
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				strokeWidth: "2",
-				d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+				d: "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
 			})
 		}),
-		children: g
+		children: _
 	}), v;
 };
 //#endregion