dishui 0.0.81 → 0.0.83

package/dist/components/Page/Float2.js

@@ -0,0 +1,154 @@
+import { cn as e } from "../../utils/cn.js";
+/* empty css      */
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Page/Float.tsx
+function c({ title: c = "Float", collapsed: l, defaultCollapsed: u = !1, onCollapsedChange: d, defaultPosition: f = {
+	x: 16,
+	y: 16
+}, draggable: p = !0, className: m, style: h, children: g, ..._ }) {
+	let [v, y] = i(u), b = l ?? v, [x, S] = i(f), C = r(null), w = r(null), T = r(null), E = r(!1), D = t((e) => {
+		let t = C.current, n = t?.offsetParent;
+		return !t || !n ? e : {
+			x: Math.max(0, Math.min(e.x, n.clientWidth - t.offsetWidth)),
+			y: Math.max(0, Math.min(e.y, n.clientHeight - t.offsetHeight))
+		};
+	}, []);
+	n(() => {
+		let e = () => S((e) => {
+			let t = D(e);
+			return t.x === e.x && t.y === e.y ? e : t;
+		});
+		e();
+		let t = new ResizeObserver(e);
+		return C.current && t.observe(C.current), C.current?.offsetParent && t.observe(C.current.offsetParent), () => t.disconnect();
+	}, [D, b]);
+	let O = () => {
+		y(!b), d?.(!b), w.current?.focus();
+	}, k = {
+		onPointerDown: (e) => {
+			E.current = !1, p && e.button === 0 && (T.current = {
+				id: e.pointerId,
+				x: e.clientX,
+				y: e.clientY,
+				origin: x,
+				moved: !1
+			}, e.currentTarget.setPointerCapture(e.pointerId));
+		},
+		onPointerMove: (e) => {
+			let t = T.current;
+			if (!t || t.id !== e.pointerId) return;
+			let n = e.clientX - t.x, r = e.clientY - t.y;
+			Math.abs(n) + Math.abs(r) > 4 && (t.moved = !0), t.moved && S(D({
+				x: t.origin.x + n,
+				y: t.origin.y + r
+			}));
+		},
+		onPointerUp: (e) => {
+			E.current = T.current?.moved ?? !1, T.current = null, e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId);
+		},
+		onPointerCancel: () => {
+			T.current = null;
+		},
+		onLostPointerCapture: () => {
+			T.current = null;
+		},
+		onKeyDown: (e) => {
+			if (!p) return;
+			let t = e.shiftKey ? 32 : 8, n = {
+				ArrowLeft: [-t, 0],
+				ArrowRight: [t, 0],
+				ArrowUp: [0, -t],
+				ArrowDown: [0, t]
+			}[e.key];
+			n && (e.preventDefault(), S((e) => D({
+				x: e.x + n[0],
+				y: e.y + n[1]
+			})));
+		}
+	};
+	return /* @__PURE__ */ s("div", {
+		..._,
+		ref: C,
+		className: e("dishui-page-float absolute z-30 overflow-hidden border border-base-300 bg-base-100 text-base-content shadow-sm", b ? "rounded-full" : "rounded-lg", m),
+		"data-collapsed": b,
+		style: {
+			width: 288,
+			maxWidth: "100%",
+			maxHeight: "100%",
+			...h,
+			...b ? {
+				boxSizing: "border-box",
+				width: 48,
+				height: 48,
+				minWidth: 48,
+				minHeight: 48,
+				maxWidth: 48,
+				maxHeight: 48,
+				padding: 0,
+				borderRadius: "50%"
+			} : {},
+			left: x.x,
+			top: x.y
+		},
+		children: [/* @__PURE__ */ s("div", {
+			className: e("flex items-center border-base-300", b && "h-full w-full"),
+			children: [!b && /* @__PURE__ */ o("button", {
+				type: "button",
+				...k,
+				onClick: () => {
+					E.current = !1;
+				},
+				"aria-label": `${c}: move with arrow keys`,
+				className: "min-w-0 flex-1 truncate px-3 py-2 text-left text-sm font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary",
+				style: {
+					touchAction: p ? "none" : void 0,
+					cursor: p ? "grab" : void 0
+				},
+				children: c
+			}), /* @__PURE__ */ o("button", {
+				ref: w,
+				type: "button",
+				...b ? k : {},
+				"aria-label": `${b ? "Expand" : "Collapse"} ${c}`,
+				"aria-expanded": !b,
+				title: `${b ? "Expand" : "Collapse"} ${c}`,
+				className: e("dishui-page-float-toggle flex shrink-0 items-center justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary", b ? "h-full w-full rounded-full" : "h-9 w-9 rounded-md"),
+				style: {
+					touchAction: b && p ? "none" : void 0,
+					cursor: b && p ? "grab" : "pointer"
+				},
+				onClick: () => {
+					E.current || O(), E.current = !1;
+				},
+				children: /* @__PURE__ */ o("svg", {
+					"aria-hidden": "true",
+					width: "20",
+					height: "20",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.75",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: b ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("rect", {
+						x: "4",
+						y: "4",
+						width: "16",
+						height: "16",
+						rx: "3"
+					}), /* @__PURE__ */ o("path", { d: "M4 10h16M9 4v6" })] }) : /* @__PURE__ */ o("path", { d: "M6 12h12" })
+				})
+			})]
+		}), /* @__PURE__ */ o("div", {
+			hidden: b,
+			className: "overflow-auto border-t border-base-300 p-3 text-sm",
+			style: { maxHeight: "min(60vh, 360px)" },
+			children: g
+		})]
+	});
+}
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=Float2.js.map

package/dist/components/Page/Float2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Float2.js","names":[],"sources":["../../../src/components/Page/Float.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport './Float.css';\n\nexport type PageFloatProps = React.HTMLAttributes<HTMLDivElement> & {\n    title?: string;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    onCollapsedChange?: (collapsed: boolean) => void;\n    defaultPosition?: { x: number; y: number };\n    draggable?: boolean;\n};\n\n/** Coordinates are relative to the containing Page; dragging is confined to it. */\nexport default function PageFloat({\n    title = 'Float', collapsed, defaultCollapsed = false, onCollapsedChange,\n    defaultPosition = { x: 16, y: 16 }, draggable = true,\n    className, style, children, ...rest\n}: PageFloatProps) {\n    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n    const isCollapsed = collapsed ?? internalCollapsed;\n    const [position, setPosition] = useState(defaultPosition);\n    const root = useRef<HTMLDivElement>(null);\n    const toggle = useRef<HTMLButtonElement>(null);\n    const drag = useRef<{ id: number; x: number; y: number; origin: typeof position; moved: boolean } | null>(null);\n    const suppressClick = useRef(false);\n    const clamp = useCallback((next: typeof position) => {\n        const element = root.current;\n        const parent = element?.offsetParent as HTMLElement | null;\n        if (!element || !parent) return next;\n        return {\n            x: Math.max(0, Math.min(next.x, parent.clientWidth - element.offsetWidth)),\n            y: Math.max(0, Math.min(next.y, parent.clientHeight - element.offsetHeight)),\n        };\n    }, []);\n    useEffect(() => {\n        const update = () => setPosition(current => {\n            const next = clamp(current);\n            return next.x === current.x && next.y === current.y ? current : next;\n        });\n        update();\n        const observer = new ResizeObserver(update);\n        if (root.current) observer.observe(root.current);\n        if (root.current?.offsetParent) observer.observe(root.current.offsetParent);\n        return () => observer.disconnect();\n    }, [clamp, isCollapsed]);\n    const changeCollapsed = () => {\n        setInternalCollapsed(!isCollapsed);\n        onCollapsedChange?.(!isCollapsed);\n        toggle.current?.focus();\n    };\n    const dragEvents = {\n        onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => {\n            suppressClick.current = false;\n            if (!draggable || event.button !== 0) return;\n            drag.current = { id: event.pointerId, x: event.clientX, y: event.clientY, origin: position, moved: false };\n            event.currentTarget.setPointerCapture(event.pointerId);\n        },\n        onPointerMove: (event: React.PointerEvent<HTMLButtonElement>) => {\n            const current = drag.current;\n            if (!current || current.id !== event.pointerId) return;\n            const dx = event.clientX - current.x;\n            const dy = event.clientY - current.y;\n            if (Math.abs(dx) + Math.abs(dy) > 4) current.moved = true;\n            if (current.moved) setPosition(clamp({ x: current.origin.x + dx, y: current.origin.y + dy }));\n        },\n        onPointerUp: (event: React.PointerEvent<HTMLButtonElement>) => {\n            suppressClick.current = drag.current?.moved ?? false;\n            drag.current = null;\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);\n        },\n        onPointerCancel: () => { drag.current = null; },\n        onLostPointerCapture: () => { drag.current = null; },\n        onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (!draggable) return;\n            const delta = event.shiftKey ? 32 : 8;\n            const offsets: Record<string, [number, number]> = { ArrowLeft: [-delta, 0], ArrowRight: [delta, 0], ArrowUp: [0, -delta], ArrowDown: [0, delta] };\n            const offset = offsets[event.key];\n            if (!offset) return;\n            event.preventDefault();\n            setPosition(current => clamp({ x: current.x + offset[0], y: current.y + offset[1] }));\n        },\n    };\n    return (\n        <div {...rest} ref={root} className={cn('dishui-page-float absolute z-30 overflow-hidden border border-base-300 bg-base-100 text-base-content shadow-sm', isCollapsed ? 'rounded-full' : 'rounded-lg', className)}\n            data-collapsed={isCollapsed}\n                        style={{ width: 288, maxWidth: '100%', maxHeight: '100%', ...style,\n                            ...(isCollapsed ? { boxSizing: 'border-box', width: 48, height: 48, minWidth: 48, minHeight: 48, maxWidth: 48, maxHeight: 48, padding: 0, borderRadius: '50%' } as React.CSSProperties : {}),\n                            left: position.x, top: position.y }}>\n            <div className={cn('flex items-center border-base-300', isCollapsed && 'h-full w-full')}>\n                {!isCollapsed && <button type=\"button\" {...dragEvents} onClick={() => { suppressClick.current = false; }} aria-label={`${title}: move with arrow keys`} className=\"min-w-0 flex-1 truncate px-3 py-2 text-left text-sm font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary\" style={{ touchAction: draggable ? 'none' : undefined, cursor: draggable ? 'grab' : undefined }}>{title}</button>}\n                <button ref={toggle} type=\"button\" {...(isCollapsed ? dragEvents : {})} aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${title}`} aria-expanded={!isCollapsed}\n                    title={`${isCollapsed ? 'Expand' : 'Collapse'} ${title}`}\n                    className={cn('dishui-page-float-toggle flex shrink-0 items-center justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary', isCollapsed ? 'h-full w-full rounded-full' : 'h-9 w-9 rounded-md')}\n                    style={{ touchAction: isCollapsed && draggable ? 'none' : undefined, cursor: isCollapsed && draggable ? 'grab' : 'pointer' }}\n                    onClick={() => { if (!suppressClick.current) changeCollapsed(); suppressClick.current = false; }}>\n                    <svg aria-hidden=\"true\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                                            {isCollapsed ? <><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\" /><path d=\"M4 10h16M9 4v6\" /></> : <path d=\"M6 12h12\" />}\n                                        </svg>\n                </button>\n            </div>\n            <div hidden={isCollapsed} className=\"overflow-auto border-t border-base-300 p-3 text-sm\" style={{ maxHeight: 'min(60vh, 360px)' }}>{children}</div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Page/index.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
+import PageFloat from './Float';
+import { type PageResizeProps } from './resize';
+export type { PageFloatProps } from './Float';
 import { PageHeaderProps } from '../PageHeader';
+import { type PagePanelProps, type PageAutoHideProps } from '../PagePanel';
+export type { PagePanelProps } from '../PagePanel';
 /**
  * Page 布局脚手架
  * ----------------------------------------------------------------------------
@@ -26,8 +31,8 @@ export type PageBodyProps = React.HTMLAttributes<HTMLDivElement> & {
     /** 是否让主体区在剩余空间内滚动（配合 Page fullHeight 使用） */
     scroll?: boolean;
 };
-export type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** 侧栏宽度，数字按 px 处理，默认 260 */
+export type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & PagePanelProps & PageResizeProps & {
+    /** 侧栏宽度，数字按 px 处理；Left 默认 260，Right 默认 320。外部变化会同步到拖动宽度。 */
     width?: number | string;
     /** 是否显示分隔边框 */
     bordered?: boolean;
@@ -43,16 +48,24 @@ export type PageMainProps = React.HTMLAttributes<HTMLDivElement> & {
 /** 页头：直接复用 PageHeader，作为 Page.Header 使用 */
 declare const PageHeaderSlot: (props: PageHeaderProps) => React.JSX.Element;
 declare const PageBody: ({ gap, scroll, className, style, children, ...rest }: PageBodyProps) => React.JSX.Element;
-declare const PageLeft: ({ width, bordered, scroll, hideOnMobile, className, style, children, ...rest }: PageAsideProps) => React.JSX.Element;
-declare const PageRight: ({ width, bordered, scroll, hideOnMobile, className, style, children, ...rest }: PageAsideProps) => React.JSX.Element;
+declare const PageLeft: ({ resizeVariant, resizable, minWidth, maxWidth, onWidthChange, open, mode, animated, duration, width, bordered, scroll, hideOnMobile, className, style, children, ...rest }: PageAsideProps) => React.JSX.Element;
+declare const PageRight: ({ resizeVariant, resizable, minWidth, maxWidth, onWidthChange, open, mode, animated, duration, width, bordered, scroll, hideOnMobile, className, style, children, ...rest }: PageAsideProps) => React.JSX.Element;
+export type PageFooterProps = React.HTMLAttributes<HTMLElement> & PagePanelProps & PageAutoHideProps & {
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+};
+declare const PageFooter: ({ open, mode, animated, duration, autoHide, className, children, left, center, right, ...rest }: PageFooterProps) => React.JSX.Element;
 declare const PageMain: ({ scroll, className, children, ...rest }: PageMainProps) => React.JSX.Element;
 interface PageCompound extends React.FC<PageProps> {
     Header: typeof PageHeaderSlot;
+    Footer: typeof PageFooter;
+    Float: typeof PageFloat;
     Body: typeof PageBody;
     Left: typeof PageLeft;
     Right: typeof PageRight;
     Main: typeof PageMain;
 }
 declare const PageWithCompounds: PageCompound;
-export { PageBody, PageLeft, PageRight, PageMain };
+export { PageBody, PageLeft, PageRight, PageMain, PageFooter, PageFloat };
 export default PageWithCompounds;

package/dist/components/Page/index.js

@@ -1,43 +1,112 @@
 import { cn as e } from "../../utils/cn.js";
-import t from "../PageHeader/index.js";
+import t from "../PagePanel/index.js";
+import n from "../PageHeader/index.js";
+import r from "./Float2.js";
+import i from "./resize2.js";
 import "react";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Page/index.tsx
-var r = (e) => typeof e == "number" ? `${e}px` : e, i = ({ fullHeight: t = !1, className: r = "", children: i, ...a }) => /* @__PURE__ */ n("div", {
-	className: e("dishui-page flex w-full flex-col", t && "h-full min-h-0", r),
-	...a,
-	children: i
-}), a = (e) => /* @__PURE__ */ n(t, { ...e }), o = ({ gap: t = 16, scroll: i = !1, className: a = "", style: o, children: s, ...c }) => /* @__PURE__ */ n("div", {
-	className: e("dishui-page-body flex w-full flex-col md:flex-row", i && "min-h-0 flex-1", a),
+var s = (e) => typeof e == "number" ? `${e}px` : e, c = ({ fullHeight: t = !1, className: n = "", children: r, ...i }) => /* @__PURE__ */ a("div", {
+	className: e("dishui-page flex w-full min-w-0 flex-col text-body leading-5 text-base-content", t && "h-full min-h-0", n),
+	...i,
+	children: r
+}), l = (e) => /* @__PURE__ */ a(n, { ...e }), u = ({ gap: t = 16, scroll: n = !1, className: r = "", style: i, children: o, ...c }) => /* @__PURE__ */ a("div", {
+	className: e("dishui-page-body flex w-full flex-col md:flex-row", n && "min-h-0 flex-1", r),
 	style: {
-		gap: r(t),
-		...o
+		...i,
+		gap: 0,
+		"--dishui-page-gap": s(i?.gap ?? t)
 	},
 	...c,
-	children: s
-}), s = ({ width: t = 260, bordered: i = !0, scroll: a = !0, hideOnMobile: o = !1, className: s = "", style: c, children: l, ...u }) => /* @__PURE__ */ n("aside", {
-	className: e("dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)", i && "md:border-r md:border-base-300 md:pr-4", a && "md:min-h-0 md:overflow-y-auto", o && "hidden md:block", s),
-	style: {
-		"--dishui-aside-w": r(t),
-		...c
-	},
-	...u,
-	children: l
-}), c = ({ width: t = 320, bordered: i = !0, scroll: a = !0, hideOnMobile: o = !1, className: s = "", style: c, children: l, ...u }) => /* @__PURE__ */ n("aside", {
-	className: e("dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)", i && "md:border-l md:border-base-300 md:pl-4", a && "md:min-h-0 md:overflow-y-auto", o && "hidden md:block", s),
-	style: {
-		"--dishui-aside-w": r(t),
-		...c
-	},
-	...u,
-	children: l
-}), l = ({ scroll: t = !1, className: r = "", children: i, ...a }) => /* @__PURE__ */ n("main", {
-	className: e("dishui-page-main min-w-0 flex-1", t && "min-h-0 overflow-y-auto", r),
-	...a,
-	children: i
-}), u = i;
-u.Header = a, u.Body = o, u.Left = s, u.Right = c, u.Main = l;
+	children: o
+}), d = ({ resizeVariant: n = "pill", resizable: r = !1, minWidth: o = 160, maxWidth: c = 600, onWidthChange: l, open: u, mode: d, animated: f, duration: p, width: m = 260, bordered: h = !0, scroll: g = !0, hideOnMobile: _ = !1, className: v = "", style: y, children: b, ...x }) => {
+	let S = /* @__PURE__ */ a(t, {
+		edge: "left",
+		width: y?.width ?? m,
+		hideOnMobile: _,
+		open: u,
+		mode: d,
+		animated: f,
+		duration: p,
+		children: /* @__PURE__ */ a("aside", {
+			className: e("dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)", h && "md:border-r md:border-base-300 md:pr-4", g && "md:min-h-0 md:overflow-y-auto", _ && "hidden md:block", v),
+			style: {
+				"--dishui-aside-w": s(m),
+				...y
+			},
+			...x,
+			children: b
+		})
+	});
+	return r ? /* @__PURE__ */ a(i, {
+		panel: S,
+		resizeVariant: n,
+		minWidth: o,
+		maxWidth: c,
+		onWidthChange: l
+	}) : S;
+}, f = ({ resizeVariant: n = "pill", resizable: r = !1, minWidth: o = 160, maxWidth: c = 600, onWidthChange: l, open: u, mode: d, animated: f, duration: p, width: m = 320, bordered: h = !0, scroll: g = !0, hideOnMobile: _ = !1, className: v = "", style: y, children: b, ...x }) => {
+	let S = /* @__PURE__ */ a(t, {
+		edge: "right",
+		width: y?.width ?? m,
+		hideOnMobile: _,
+		open: u,
+		mode: d,
+		animated: f,
+		duration: p,
+		children: /* @__PURE__ */ a("aside", {
+			className: e("dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)", h && "md:border-l md:border-base-300 md:pl-4", g && "md:min-h-0 md:overflow-y-auto", _ && "hidden md:block", v),
+			style: {
+				"--dishui-aside-w": s(m),
+				...y
+			},
+			...x,
+			children: b
+		})
+	});
+	return r ? /* @__PURE__ */ a(i, {
+		panel: S,
+		resizeVariant: n,
+		minWidth: o,
+		maxWidth: c,
+		onWidthChange: l
+	}) : S;
+}, p = ({ open: n, mode: r, animated: i, duration: s, autoHide: c, className: l, children: u, left: d, center: f, right: p, ...m }) => /* @__PURE__ */ a(t, {
+	edge: "footer",
+	autoHide: c,
+	open: n,
+	mode: r,
+	animated: i,
+	duration: s,
+	children: /* @__PURE__ */ a("footer", {
+		className: e("dishui-page-footer", l),
+		...m,
+		children: u === void 0 ? /* @__PURE__ */ o("div", {
+			className: "dishui-page-header-layout",
+			"data-centered": f != null && f !== !1 || void 0,
+			children: [
+				d != null && /* @__PURE__ */ a("div", {
+					className: "dishui-page-header-left",
+					children: d
+				}),
+				f != null && /* @__PURE__ */ a("div", {
+					className: "dishui-page-header-center",
+					children: f
+				}),
+				p != null && /* @__PURE__ */ a("div", {
+					className: "dishui-page-header-right",
+					children: p
+				})
+			]
+		}) : u
+	})
+}), m = ({ scroll: t = !1, className: n = "", children: r, ...i }) => /* @__PURE__ */ a("main", {
+	className: e("dishui-page-main min-w-0 flex-1", t && "min-h-0 overflow-y-auto", n),
+	...i,
+	children: r
+}), h = c;
+h.Header = l, h.Footer = p, h.Float = r, h.Body = u, h.Left = d, h.Right = f, h.Main = m;
 //#endregion
-export { o as PageBody, s as PageLeft, l as PageMain, c as PageRight, u as default };
+export { u as PageBody, r as PageFloat, p as PageFooter, d as PageLeft, m as PageMain, f as PageRight, h as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Page/index.tsx"],"sourcesContent":["import React from 'react';\nimport PageHeader, { PageHeaderProps } from '../PageHeader';\nimport { cn } from '../../utils/cn';\n\n/**\n * Page 布局脚手架\n * ----------------------------------------------------------------------------\n * 为管理后台等页面提供统一的「页头 + 主体 + 左右侧栏」骨架，配合 PageHeader、\n * Card.Info 等组件使用。所有区域都是可选的，可按需组合。\n *\n * 典型结构：\n *   <Page fullHeight>\n *     <Page.Header title=\"用户管理\" actions={<Button>新建</Button>} />\n *     <Page.Body scroll>\n *       <Page.Left width={240}>筛选器</Page.Left>\n *       <Page.Main scroll>主内容</Page.Main>\n *       <Page.Right width={320}>详情</Page.Right>\n *     </Page.Body>\n *   </Page>\n */\n\nexport type PageProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 是否占满父容器高度并启用内部滚动（主体区滚动，页头固定） */\n    fullHeight?: boolean;\n};\n\nexport type PageBodyProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 主体内的间距（left/main/right 之间），数字按 px 处理，默认 16 */\n    gap?: number | string;\n    /** 是否让主体区在剩余空间内滚动（配合 Page fullHeight 使用） */\n    scroll?: boolean;\n};\n\nexport type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 侧栏宽度，数字按 px 处理，默认 260 */\n    width?: number | string;\n    /** 是否显示分隔边框 */\n    bordered?: boolean;\n    /** 侧栏内部纵向滚动自适应 */\n    scroll?: boolean;\n    /** 小屏（<768px）下是否隐藏（侧栏通常在移动端折叠） */\n    hideOnMobile?: boolean;\n};\n\nexport type PageMainProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 主内容区是否在剩余空间内纵向滚动 */\n    scroll?: boolean;\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined =>\n    typeof value === 'number' ? `${value}px` : value;\n\nconst Page = ({ fullHeight = false, className = '', children, ...rest }: PageProps) => (\n    <div\n        className={cn(\n            'dishui-page flex w-full flex-col',\n            fullHeight && 'h-full min-h-0',\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\n/** 页头：直接复用 PageHeader，作为 Page.Header 使用 */\nconst PageHeaderSlot = (props: PageHeaderProps) => <PageHeader {...props} />;\n\nconst PageBody = ({ gap = 16, scroll = false, className = '', style, children, ...rest }: PageBodyProps) => (\n    <div\n        className={cn(\n            'dishui-page-body flex w-full flex-col md:flex-row',\n            scroll && 'min-h-0 flex-1',\n            className,\n        )}\n        style={{ gap: toCssSize(gap), ...style }}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\nconst PageLeft = ({\n    width = 260,\n    bordered = true,\n    scroll = true,\n    hideOnMobile = false,\n    className = '',\n    style,\n    children,\n    ...rest\n}: PageAsideProps) => (\n    <aside\n        className={cn(\n            'dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)',\n            bordered && 'md:border-r md:border-base-300 md:pr-4',\n            scroll && 'md:min-h-0 md:overflow-y-auto',\n            hideOnMobile && 'hidden md:block',\n            className,\n        )}\n        style={{ ['--dishui-aside-w' as string]: toCssSize(width), ...style }}\n        {...rest}\n    >\n        {children}\n    </aside>\n);\n\nconst PageRight = ({\n    width = 320,\n    bordered = true,\n    scroll = true,\n    hideOnMobile = false,\n    className = '',\n    style,\n    children,\n    ...rest\n}: PageAsideProps) => (\n    <aside\n        className={cn(\n            'dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)',\n            bordered && 'md:border-l md:border-base-300 md:pl-4',\n            scroll && 'md:min-h-0 md:overflow-y-auto',\n            hideOnMobile && 'hidden md:block',\n            className,\n        )}\n        style={{ ['--dishui-aside-w' as string]: toCssSize(width), ...style }}\n        {...rest}\n    >\n        {children}\n    </aside>\n);\n\nconst PageMain = ({ scroll = false, className = '', children, ...rest }: PageMainProps) => (\n    <main\n        className={cn(\n            'dishui-page-main min-w-0 flex-1',\n            scroll && 'min-h-0 overflow-y-auto',\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </main>\n);\n\ninterface PageCompound extends React.FC<PageProps> {\n    Header: typeof PageHeaderSlot;\n    Body: typeof PageBody;\n    Left: typeof PageLeft;\n    Right: typeof PageRight;\n    Main: typeof PageMain;\n}\n\nconst PageWithCompounds = Page as PageCompound;\nPageWithCompounds.Header = PageHeaderSlot;\nPageWithCompounds.Body = PageBody;\nPageWithCompounds.Left = PageLeft;\nPageWithCompounds.Right = PageRight;\nPageWithCompounds.Main = PageMain;\n\nexport { PageBody, PageLeft, PageRight, PageMain };\nexport default PageWithCompounds;\n"],"mappings":";;;;;AAiDA,IAAM,KAAa,MACf,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM,GAEzC,KAAQ,EAAE,gBAAa,IAAO,eAAY,IAAI,aAAU,GAAG,QAC7D,kBAAC,OAAD;CACI,WAAW,EACP,oCACA,KAAc,kBACd,CACJ;CACA,GAAI;CAEH;AACA,CAAA,GAIH,KAAkB,MAA2B,kBAAC,GAAD,EAAY,GAAI,EAAQ,CAAA,GAErE,KAAY,EAAE,SAAM,IAAI,YAAS,IAAO,eAAY,IAAI,UAAO,aAAU,GAAG,QAC9E,kBAAC,OAAD;CACI,WAAW,EACP,qDACA,KAAU,kBACV,CACJ;CACA,OAAO;EAAE,KAAK,EAAU,CAAG;EAAG,GAAG;CAAM;CACvC,GAAI;CAEH;AACA,CAAA,GAGH,KAAY,EACd,WAAQ,KACR,cAAW,IACX,YAAS,IACT,kBAAe,IACf,eAAY,IACZ,UACA,aACA,GAAG,QAEH,kBAAC,SAAD;CACI,WAAW,EACP,4DACA,KAAY,0CACZ,KAAU,iCACV,KAAgB,mBAChB,CACJ;CACA,OAAO;EAAG,oBAA+B,EAAU,CAAK;EAAG,GAAG;CAAM;CACpE,GAAI;CAEH;AACE,CAAA,GAGL,KAAa,EACf,WAAQ,KACR,cAAW,IACX,YAAS,IACT,kBAAe,IACf,eAAY,IACZ,UACA,aACA,GAAG,QAEH,kBAAC,SAAD;CACI,WAAW,EACP,6DACA,KAAY,0CACZ,KAAU,iCACV,KAAgB,mBAChB,CACJ;CACA,OAAO;EAAG,oBAA+B,EAAU,CAAK;EAAG,GAAG;CAAM;CACpE,GAAI;CAEH;AACE,CAAA,GAGL,KAAY,EAAE,YAAS,IAAO,eAAY,IAAI,aAAU,GAAG,QAC7D,kBAAC,QAAD;CACI,WAAW,EACP,mCACA,KAAU,2BACV,CACJ;CACA,GAAI;CAEH;AACC,CAAA,GAWJ,IAAoB;AAC1B,EAAkB,SAAS,GAC3B,EAAkB,OAAO,GACzB,EAAkB,OAAO,GACzB,EAAkB,QAAQ,GAC1B,EAAkB,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Page/index.tsx"],"sourcesContent":["import React from 'react';\nimport PageFloat from './Float';\nimport ResizableAside, { type PageResizeProps } from './resize';\nexport type { PageFloatProps } from './Float';\nimport PageHeader, { PageHeaderProps } from '../PageHeader';\nimport { cn } from '../../utils/cn';\nimport PagePanel, { type PagePanelProps, type PageAutoHideProps } from '../PagePanel';\n\nexport type { PagePanelProps } from '../PagePanel';\n\n/**\n * Page 布局脚手架\n * ----------------------------------------------------------------------------\n * 为管理后台等页面提供统一的「页头 + 主体 + 左右侧栏」骨架，配合 PageHeader、\n * Card.Info 等组件使用。所有区域都是可选的，可按需组合。\n *\n * 典型结构：\n *   <Page fullHeight>\n *     <Page.Header title=\"用户管理\" actions={<Button>新建</Button>} />\n *     <Page.Body scroll>\n *       <Page.Left width={240}>筛选器</Page.Left>\n *       <Page.Main scroll>主内容</Page.Main>\n *       <Page.Right width={320}>详情</Page.Right>\n *     </Page.Body>\n *   </Page>\n */\n\nexport type PageProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 是否占满父容器高度并启用内部滚动（主体区滚动，页头固定） */\n    fullHeight?: boolean;\n};\n\nexport type PageBodyProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 主体内的间距（left/main/right 之间），数字按 px 处理，默认 16 */\n    gap?: number | string;\n    /** 是否让主体区在剩余空间内滚动（配合 Page fullHeight 使用） */\n    scroll?: boolean;\n};\n\nexport type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & PagePanelProps & PageResizeProps & {\n    /** 侧栏宽度，数字按 px 处理；Left 默认 260，Right 默认 320。外部变化会同步到拖动宽度。 */\n    width?: number | string;\n    /** 是否显示分隔边框 */\n    bordered?: boolean;\n    /** 侧栏内部纵向滚动自适应 */\n    scroll?: boolean;\n    /** 小屏（<768px）下是否隐藏（侧栏通常在移动端折叠） */\n    hideOnMobile?: boolean;\n};\n\nexport type PageMainProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 主内容区是否在剩余空间内纵向滚动 */\n    scroll?: boolean;\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined =>\n    typeof value === 'number' ? `${value}px` : value;\n\nconst Page = ({ fullHeight = false, className = '', children, ...rest }: PageProps) => (\n    <div\n        className={cn(\n            'dishui-page flex w-full min-w-0 flex-col text-body leading-5 text-base-content',\n            fullHeight && 'h-full min-h-0',\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\n/** 页头：直接复用 PageHeader，作为 Page.Header 使用 */\nconst PageHeaderSlot = (props: PageHeaderProps) => <PageHeader {...props} />;\n\nconst PageBody = ({ gap = 16, scroll = false, className = '', style, children, ...rest }: PageBodyProps) => (\n    <div\n        className={cn(\n            'dishui-page-body flex w-full flex-col md:flex-row',\n            scroll && 'min-h-0 flex-1',\n            className,\n        )}\n        style={{ ...style, gap: 0, ['--dishui-page-gap' as string]: toCssSize(style?.gap ?? gap) }}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\nconst PageLeft = ({\n    resizeVariant = 'pill', resizable = false, minWidth = 160, maxWidth = 600, onWidthChange,\n    open, mode, animated, duration,\n    width = 260,\n    bordered = true,\n    scroll = true,\n    hideOnMobile = false,\n    className = '',\n    style,\n    children,\n    ...rest\n}: PageAsideProps) => {\n    const panel = <PagePanel edge=\"left\" width={style?.width ?? width} hideOnMobile={hideOnMobile} open={open} mode={mode} animated={animated} duration={duration}>\n    <aside\n        className={cn(\n            'dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)',\n            bordered && 'md:border-r md:border-base-300 md:pr-4',\n            scroll && 'md:min-h-0 md:overflow-y-auto',\n            hideOnMobile && 'hidden md:block',\n            className,\n        )}\n        style={{ ['--dishui-aside-w' as string]: toCssSize(width), ...style }}\n        {...rest}\n    >\n        {children}\n    </aside>\n    </PagePanel>;\n    return resizable ? <ResizableAside panel={panel} resizeVariant={resizeVariant} minWidth={minWidth} maxWidth={maxWidth} onWidthChange={onWidthChange} /> : panel;\n};\n\nconst PageRight = ({\n    resizeVariant = 'pill', resizable = false, minWidth = 160, maxWidth = 600, onWidthChange,\n    open, mode, animated, duration,\n    width = 320,\n    bordered = true,\n    scroll = true,\n    hideOnMobile = false,\n    className = '',\n    style,\n    children,\n    ...rest\n}: PageAsideProps) => {\n    const panel = <PagePanel edge=\"right\" width={style?.width ?? width} hideOnMobile={hideOnMobile} open={open} mode={mode} animated={animated} duration={duration}>\n    <aside\n        className={cn(\n            'dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)',\n            bordered && 'md:border-l md:border-base-300 md:pl-4',\n            scroll && 'md:min-h-0 md:overflow-y-auto',\n            hideOnMobile && 'hidden md:block',\n            className,\n        )}\n        style={{ ['--dishui-aside-w' as string]: toCssSize(width), ...style }}\n        {...rest}\n    >\n        {children}\n    </aside>\n    </PagePanel>;\n    return resizable ? <ResizableAside panel={panel} resizeVariant={resizeVariant} minWidth={minWidth} maxWidth={maxWidth} onWidthChange={onWidthChange} /> : panel;\n};\n\nexport type PageFooterProps = React.HTMLAttributes<HTMLElement> & PagePanelProps & PageAutoHideProps & {\n    left?: React.ReactNode;\n    center?: React.ReactNode;\n    right?: React.ReactNode;\n};\n\nconst PageFooter = ({\n    open, mode, animated, duration, autoHide, className, children, left, center, right, ...rest\n}: PageFooterProps) => (\n    <PagePanel edge=\"footer\" autoHide={autoHide} open={open} mode={mode} animated={animated} duration={duration}>\n        <footer className={cn('dishui-page-footer', className)} {...rest}>\n            {children !== undefined ? children : (\n                <div className=\"dishui-page-header-layout\" data-centered={center != null && center !== false || undefined}>\n                    {left != null && <div className=\"dishui-page-header-left\">{left}</div>}\n                    {center != null && <div className=\"dishui-page-header-center\">{center}</div>}\n                    {right != null && <div className=\"dishui-page-header-right\">{right}</div>}\n                </div>\n            )}\n        </footer>\n    </PagePanel>\n);\n\nconst PageMain = ({ scroll = false, className = '', children, ...rest }: PageMainProps) => (\n    <main\n        className={cn(\n            'dishui-page-main min-w-0 flex-1',\n            scroll && 'min-h-0 overflow-y-auto',\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </main>\n);\n\ninterface PageCompound extends React.FC<PageProps> {\n    Header: typeof PageHeaderSlot;\n    Footer: typeof PageFooter;\n        Float: typeof PageFloat;\n    Body: typeof PageBody;\n    Left: typeof PageLeft;\n    Right: typeof PageRight;\n    Main: typeof PageMain;\n}\n\nconst PageWithCompounds = Page as PageCompound;\nPageWithCompounds.Header = PageHeaderSlot;\nPageWithCompounds.Footer = PageFooter;\nPageWithCompounds.Float = PageFloat;\nPageWithCompounds.Body = PageBody;\nPageWithCompounds.Left = PageLeft;\nPageWithCompounds.Right = PageRight;\nPageWithCompounds.Main = PageMain;\n\nexport { PageBody, PageLeft, PageRight, PageMain, PageFooter, PageFloat };\nexport default PageWithCompounds;\n"],"mappings":"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"}

package/dist/components/Page/resize.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import PagePanel from '../PagePanel';
+export type PageResizeProps = {
+    /** 启用侧栏宽度调整，默认 false。 */
+    resizable?: boolean;
+    /** 调宽手柄外观，默认 pill；line 仅显示分隔线。 */
+    resizeVariant?: 'pill' | 'line';
+    /** 可调整的最小像素宽度，默认 160。 */
+    minWidth?: number;
+    /** 可调整的最大像素宽度，默认 600。 */
+    maxWidth?: number;
+    /** 用户调整宽度时触发，参数为像素宽度。 */
+    onWidthChange?: (width: number) => void;
+};
+export declare function resizeLimits(min?: number, max?: number): readonly [number, number];
+export declare const clampWidth: (width: number, min: number, max: number) => number;
+type Props = Omit<PageResizeProps, 'resizable'> & {
+    panel: React.ReactElement<React.ComponentProps<typeof PagePanel>>;
+};
+/** Keep the legacy aside markup/scroll owner; the separator belongs to the shell. */
+export default function ResizableAside({ panel, minWidth, maxWidth, onWidthChange, resizeVariant }: Props): React.ReactElement<import(".").PagePanelProps & import("../PagePanel").PageAutoHideProps & {
+    edge: 'header' | 'footer' | 'left' | 'right';
+    width?: number | string;
+    hideOnMobile?: boolean;
+    children: React.ReactNode;
+    resizeHandle?: React.ReactNode;
+}, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/components/Page/resize2.js

@@ -0,0 +1,95 @@
+import { useResize as e } from "../Resizable/useResize.js";
+import { ResizeGrip as t } from "../Resizable/ResizeGrip.js";
+/* empty css       */
+import n, { useEffect as r, useId as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/Page/resize.tsx
+function l(e = 160, t = 600) {
+	let n = Number.isFinite(e) ? Math.max(0, e) : 160;
+	return [n, Number.isFinite(t) ? Math.max(n, t) : Math.max(n, 600)];
+}
+var u = (e, t, n) => Math.min(n, Math.max(t, e));
+function d({ panel: d, minWidth: f, maxWidth: p, onWidthChange: m, resizeVariant: h = "pill" }) {
+	let { width: g = 260, open: _ = !0, edge: v } = d.props, [y, b] = l(f, p), [x, S] = s({ source: g });
+	x.source !== g && S({ source: g });
+	let C = o(void 0), [w, T] = s(typeof g == "number" ? u(g, y, b) : y), E = o(null), D = i(), O = d.props.children, k = O.props.id ?? D, A = x.source === g && x.value !== void 0 ? u(x.value, y, b) : typeof g == "number" ? u(g, y, b) : g, j = v === "right" ? -1 : 1, M = e({
+		value: typeof A == "number" ? A : w,
+		getValue: () => E.current?.getBoundingClientRect().width ?? w,
+		min: y,
+		max: b,
+		disabled: !_,
+		getScale: () => j,
+		keyboardDirection: j,
+		step: 8,
+		shiftMultiplier: 4,
+		threshold: 0,
+		onChange: (e) => P(e)
+	}), N = M.cancel;
+	a(() => {
+		g !== C.current && N();
+	}, [g, N]), r(() => {
+		let e = window.matchMedia("(min-width: 768px)"), t = () => N();
+		return e.addEventListener("change", t), () => {
+			e.removeEventListener("change", t), N();
+		};
+	}, [N]), r(() => {
+		_ || N();
+	}, [_, N]), a(() => {
+		let e = E.current;
+		if (!e) return;
+		let t = () => {
+			window.matchMedia("(min-width: 768px)").matches && _ && T(u(e.getBoundingClientRect().width, y, b));
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		y,
+		b,
+		_
+	]);
+	let P = (e) => {
+		let t = u(e, y, b);
+		t !== (E.current?.getBoundingClientRect().width ?? w) && (C.current = t, S({
+			source: g,
+			value: t
+		}), T(t), m?.(t));
+	}, F = () => _ && window.matchMedia("(min-width: 768px)").matches, I = /* @__PURE__ */ c("div", {
+		className: "dishui-resize-handle dishui-page-resize-handle",
+		"data-orientation": "horizontal",
+		"data-variant": h,
+		"data-dragging": M.dragging || void 0,
+		role: "separator",
+		tabIndex: _ ? 0 : -1,
+		"aria-label": v === "right" ? "Resize right panel" : "Resize left panel",
+		"aria-orientation": "vertical",
+		"aria-controls": k,
+		"aria-valuemin": y,
+		"aria-valuemax": b,
+		"aria-valuenow": typeof A == "number" ? A : w,
+		onPointerDown: (e) => {
+			F() && (e.preventDefault(), M.onPointerDown(e));
+		},
+		onClickCapture: M.onClickCapture,
+		onKeyDown: (e) => {
+			F() && M.onKeyDown(e);
+		},
+		children: /* @__PURE__ */ c(t, { variant: h })
+	});
+	return n.cloneElement(d, {
+		width: typeof A == "string" ? `clamp(${y}px, ${A}, ${b}px)` : A,
+		resizeHandle: I
+	}, n.cloneElement(O, {
+		ref: E,
+		id: k,
+		style: {
+			...O.props.style,
+			width: void 0,
+			"--dishui-aside-w": typeof A == "number" ? `${A}px` : A
+		}
+	}));
+}
+//#endregion
+export { u as clampWidth, d as default, l as resizeLimits };
+
+//# sourceMappingURL=resize2.js.map

package/dist/components/Page/resize2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize2.js","names":[],"sources":["../../../src/components/Page/resize.tsx"],"sourcesContent":["import React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\nimport PagePanel from '../PagePanel';\nimport { useResize } from '../Resizable/useResize';\nimport { ResizeGrip } from '../Resizable/ResizeGrip';\nimport './resize.css';\n\nexport type PageResizeProps = {\n    /** 启用侧栏宽度调整，默认 false。 */\n    resizable?: boolean;\n    /** 调宽手柄外观，默认 pill；line 仅显示分隔线。 */\n    resizeVariant?: 'pill' | 'line';\n    /** 可调整的最小像素宽度，默认 160。 */\n    minWidth?: number;\n    /** 可调整的最大像素宽度，默认 600。 */\n    maxWidth?: number;\n    /** 用户调整宽度时触发，参数为像素宽度。 */\n    onWidthChange?: (width: number) => void;\n};\n\nexport function resizeLimits(min = 160, max = 600) {\n    const lower = Number.isFinite(min) ? Math.max(0, min) : 160;\n    return [lower, Number.isFinite(max) ? Math.max(lower, max) : Math.max(lower, 600)] as const;\n}\n\nexport const clampWidth = (width: number, min: number, max: number) => Math.min(max, Math.max(min, width));\n\ntype Props = Omit<PageResizeProps, 'resizable'> & {\n    panel: React.ReactElement<React.ComponentProps<typeof PagePanel>>;\n};\n\n/** Keep the legacy aside markup/scroll owner; the separator belongs to the shell. */\nexport default function ResizableAside({ panel, minWidth, maxWidth, onWidthChange, resizeVariant = 'pill' }: Props) {\n    const { width = 260, open = true, edge } = panel.props;\n    const [min, max] = resizeLimits(minWidth, maxWidth);\n    const [local, setLocal] = useState<{ source: number | string; value?: number }>({ source: width });\n    // Reset on prop changes, not on every parent render or callback notification.\n    if (local.source !== width) setLocal({ source: width });\n    const lastRequestedWidth = useRef<number | undefined>(undefined);\n    const [measured, setMeasured] = useState(typeof width === 'number' ? clampWidth(width, min, max) : min);\n    const asideRef = useRef<HTMLElement>(null);\n\n    const generatedId = useId();\n    const aside = panel.props.children as React.ReactElement<React.HTMLAttributes<HTMLElement>>;\n    const id = aside.props.id ?? generatedId;\n    const effective = local.source === width && local.value !== undefined ? clampWidth(local.value, min, max)\n        : typeof width === 'number' ? clampWidth(width, min, max) : width;\n    const direction = edge === 'right' ? -1 : 1;\n\n    const resize = useResize({\n        value: typeof effective === 'number' ? effective : measured,\n        getValue: () => asideRef.current?.getBoundingClientRect().width ?? measured,\n        min, max, disabled: !open,\n        getScale: () => direction,\n        keyboardDirection: direction,\n        step: 8, shiftMultiplier: 4, threshold: 0,\n        onChange: value => change(value),\n    });\n    const stop = resize.cancel;\n\n    // Parent feedback acknowledges the drag; unrelated external changes cancel it.\n    useLayoutEffect(() => {\n        if (width !== lastRequestedWidth.current) stop();\n    }, [width, stop]);\n    useEffect(() => {\n        const media = window.matchMedia('(min-width: 768px)');\n        const cancel = () => stop();\n        media.addEventListener('change', cancel);\n        return () => { media.removeEventListener('change', cancel); stop(); };\n    }, [stop]);\n    useEffect(() => { if (!open) stop(); }, [open, stop]);\n    useLayoutEffect(() => {\n        const element = asideRef.current;\n        if (!element) return;\n        const measure = () => {\n            if (window.matchMedia('(min-width: 768px)').matches && open) {\n                setMeasured(clampWidth(element.getBoundingClientRect().width, min, max));\n            }\n        };\n        measure();\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [min, max, open]);\n\n    const change = (value: number) => {\n        const next = clampWidth(value, min, max);\n        const current = asideRef.current?.getBoundingClientRect().width ?? measured;\n        if (next === current) return;\n        lastRequestedWidth.current = next;\n        setLocal({ source: width, value: next });\n        setMeasured(next);\n        onWidthChange?.(next);\n    };\n    const enabled = () => open && window.matchMedia('(min-width: 768px)').matches;\n    const handle = <div\n        className=\"dishui-resize-handle dishui-page-resize-handle\"\n        data-orientation=\"horizontal\"\n        data-variant={resizeVariant}\n        data-dragging={resize.dragging || undefined}\n        role=\"separator\"\n        tabIndex={open ? 0 : -1}\n        aria-label={edge === 'right' ? 'Resize right panel' : 'Resize left panel'}\n        aria-orientation=\"vertical\"\n        aria-controls={id}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={typeof effective === 'number' ? effective : measured}\n        onPointerDown={event => {\n            if (!enabled()) return;\n            event.preventDefault();\n            resize.onPointerDown(event);\n        }}\n        onClickCapture={resize.onClickCapture}\n        onKeyDown={event => {\n            if (!enabled()) return;\n            resize.onKeyDown(event);\n        }}\n    ><ResizeGrip variant={resizeVariant} /></div>;\n    return React.cloneElement(panel, {\n            width: typeof effective === 'string' ? `clamp(${min}px, ${effective}, ${max}px)` : effective,\n            resizeHandle: handle,\n        },\n        React.cloneElement(aside as React.ReactElement<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>, {\n            ref: asideRef,\n            id,\n            style: { ...aside.props.style, width: undefined, '--dishui-aside-w': typeof effective === 'number' ? `${effective}px` : effective } as React.CSSProperties,\n        }));\n}\n"],"mappings":"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"}

package/dist/components/PageHeader/index.d.ts

@@ -1,7 +1,14 @@
 import React from 'react';
-export type PageHeaderProps = {
+import { type PagePanelProps, type PageAutoHideProps } from '../PagePanel';
+export type PageHeaderProps = PagePanelProps & PageAutoHideProps & {
     /** 页面标题 */
-    title: React.ReactNode;
+    title?: React.ReactNode;
+    /** 覆盖默认图标、标题和描述；null 清空，undefined 使用旧 API。 */
+    left?: React.ReactNode;
+    /** 相对整个 header 水平居中的内容。 */
+    center?: React.ReactNode;
+    /** 覆盖 actions；null 清空，undefined 使用 actions。 */
+    right?: React.ReactNode;
     /** 标题下方的描述文字 */
     description?: React.ReactNode;
     /** 标题左侧的图标（通常为 lucide 图标） */
@@ -16,5 +23,5 @@ export type PageHeaderProps = {
  * 页面头部：统一管理后台等页面的标题 / 描述 / 操作区排版。
  * 相比页面内手写的 `text-3xl` 标题，默认字号更精致（text-lg）。
  */
-declare const PageHeader: ({ title, description, icon, actions, compact, className, }: PageHeaderProps) => React.JSX.Element;
+declare const PageHeader: ({ open, mode, animated, duration, autoHide, title, description, icon, actions, left, center, right, compact, className, }: PageHeaderProps) => React.JSX.Element;
 export default PageHeader;