@sdata/web-vue 2.8.0 → 2.10.0

package/es/index.css

@@ -9975,6 +9975,16 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-menu-collapsed .sd-menu-inline-header .sd-icon {
   margin-right: 100%;
 }
+.sd-menu.sd-menu-in-sider-rail.sd-menu-collapsed .sd-menu-item {
+  justify-content: center;
+}
+.sd-menu.sd-menu-in-sider-rail.sd-menu-collapsed .sd-menu-item-inner {
+  display: none;
+}
+.sd-menu.sd-menu-in-sider-rail.sd-menu-collapsed .sd-menu-icon {
+  margin-right: 0;
+  line-height: 40px;
+}
 .sd-menu-collapse-button {
   position: absolute;
   right: 12px;
@@ -10414,6 +10424,9 @@ body.sd-tour-active .sd-tour-popover * {
  * Sider
  * 深色背景与 Menu 深色背景保持一致，避免内嵌菜单出现接缝
  *****************************************************/
+/*****************************************************
+ * Sider rail（窄轨）
+ *****************************************************/
 /*****************************************************
  * Sider light 主题
  *****************************************************/
@@ -10432,6 +10445,7 @@ body.sd-tour-active .sd-tour-popover * {
   box-sizing: border-box;
 }
 .sd-layout.sd-layout-has-sider {
+  position: relative;
   flex-direction: row;
 }
 .sd-layout.sd-layout-has-sider > .sd-layout,
@@ -10450,7 +10464,7 @@ body.sd-tour-active .sd-tour-popover * {
   padding: 0 50px;
   color: var(--sd-color-text-1);
   line-height: 64px;
-  background: #001529;
+  background: var(--sd-color-menu-dark-bg);
 }
 
 .sd-layout-footer {
@@ -10568,6 +10582,21 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-layout-sider-temporary-trigger:hover {
   background: var(--sd-color-fill-2);
 }
+.sd-layout-sider-rail {
+  overflow: visible;
+}
+.sd-layout-sider-rail-overlay {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  overflow: hidden;
+  background: inherit;
+  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.sd-layout-sider-rail-expand {
+  z-index: 20;
+  box-shadow: var(--sd-shadow2-center);
+}
 
 .sd-input-tag {
   display: inline-flex;

package/es/layout/context.d.ts

@@ -10,6 +10,8 @@ export interface LayoutContextProps {
 export declare const LayoutContextInjectionKey: InjectionKey<LayoutContextProps>;
 export interface SiderContextProps {
     siderCollapsed?: boolean;
+    siderRail?: boolean;
+    siderRailWidth?: number;
     theme?: SiderTheme;
 }
 export declare const SiderContextInjectionKey: InjectionKey<SiderContextProps>;

package/es/layout/index.d.ts

@@ -144,6 +144,18 @@ declare const Layout: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            rail: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            railWidth: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            expandOnHover: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             drawerProps: {
                 type: import("vue").PropType<import("./interface").SiderTemporaryDrawerProps>;
                 default: undefined;
@@ -151,9 +163,11 @@ declare const Layout: {
         }>> & Readonly<{
             onCollapse?: ((collapsed: boolean, type: import("./interface").CollapseType) => any) | undefined;
             onBreakpoint?: ((broken: boolean) => any) | undefined;
+            "onUpdate:rail"?: ((rail: boolean) => any) | undefined;
         }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
             collapse: (collapsed: boolean, type: import("./interface").CollapseType) => any;
             breakpoint: (broken: boolean) => any;
+            "update:rail": (rail: boolean) => any;
         }, import("vue").PublicProps, {
             scrollbar: boolean | import("../index.ts").ScrollbarProps;
             width: string | number;
@@ -167,6 +181,9 @@ declare const Layout: {
             collapsedWidth: string | number;
             breakpoint: import("../_utils/responsive-observe.ts").SiderBreakpoint;
             temporary: boolean;
+            rail: boolean;
+            railWidth: string | number;
+            expandOnHover: boolean;
             drawerProps: import("./interface").SiderTemporaryDrawerProps;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
@@ -224,6 +241,18 @@ declare const Layout: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            rail: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            railWidth: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            expandOnHover: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             drawerProps: {
                 type: import("vue").PropType<import("./interface").SiderTemporaryDrawerProps>;
                 default: undefined;
@@ -231,6 +260,7 @@ declare const Layout: {
         }>> & Readonly<{
             onCollapse?: ((collapsed: boolean, type: import("./interface").CollapseType) => any) | undefined;
             onBreakpoint?: ((broken: boolean) => any) | undefined;
+            "onUpdate:rail"?: ((rail: boolean) => any) | undefined;
         }>, {}, {}, {}, {}, {
             scrollbar: boolean | import("../index.ts").ScrollbarProps;
             width: string | number;
@@ -244,6 +274,9 @@ declare const Layout: {
             collapsedWidth: string | number;
             breakpoint: import("../_utils/responsive-observe.ts").SiderBreakpoint;
             temporary: boolean;
+            rail: boolean;
+            railWidth: string | number;
+            expandOnHover: boolean;
             drawerProps: import("./interface").SiderTemporaryDrawerProps;
         }>;
         __isFragment?: never;
@@ -298,6 +331,18 @@ declare const Layout: {
             type: BooleanConstructor;
             default: boolean;
         };
+        rail: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        railWidth: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        expandOnHover: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         drawerProps: {
             type: import("vue").PropType<import("./interface").SiderTemporaryDrawerProps>;
             default: undefined;
@@ -305,9 +350,11 @@ declare const Layout: {
     }>> & Readonly<{
         onCollapse?: ((collapsed: boolean, type: import("./interface").CollapseType) => any) | undefined;
         onBreakpoint?: ((broken: boolean) => any) | undefined;
+        "onUpdate:rail"?: ((rail: boolean) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
         collapse: (collapsed: boolean, type: import("./interface").CollapseType) => any;
         breakpoint: (broken: boolean) => any;
+        "update:rail": (rail: boolean) => any;
     }, string, {
         scrollbar: boolean | import("../index.ts").ScrollbarProps;
         width: string | number;
@@ -321,6 +368,9 @@ declare const Layout: {
         collapsedWidth: string | number;
         breakpoint: import("../_utils/responsive-observe.ts").SiderBreakpoint;
         temporary: boolean;
+        rail: boolean;
+        railWidth: string | number;
+        expandOnHover: boolean;
         drawerProps: import("./interface").SiderTemporaryDrawerProps;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
@@ -337,6 +387,12 @@ declare const Layout: {
             default?: (props: {}) => any;
         } & {
             default?: (props: {}) => any;
+        } & {
+            header?: (props: {}) => any;
+        } & {
+            default?: (props: {}) => any;
+        } & {
+            default?: (props: {}) => any;
         } & {
             trigger?: (props: {}) => any;
         } & {

package/es/layout/interface.d.ts

@@ -20,6 +20,9 @@ export interface SiderProps {
     theme?: SiderTheme;
     scrollbar?: boolean | ScrollbarProps;
     temporary?: boolean;
+    rail?: boolean;
+    railWidth?: number | string;
+    expandOnHover?: boolean;
     drawerProps?: SiderTemporaryDrawerProps;
 }
 export type SiderTemporaryDrawerProps = Omit<DrawerProps, 'visible' | 'defaultVisible' | 'width' | 'footer' | 'okText' | 'cancelText' | 'okLoading' | 'okButtonProps' | 'cancelButtonProps' | 'hideCancel' | 'onBeforeOk' | 'onBeforeCancel'>;

package/es/layout/sider.vue.d.ts

@@ -2,7 +2,7 @@ import { type PropType } from 'vue';
 import type { SiderBreakpoint } from '../_utils/responsive-observe';
 import type { CollapseType, SiderTemporaryDrawerProps } from './interface';
 import { type ScrollbarProps } from '../scrollbar';
-declare var __VLS_9: {}, __VLS_11: {}, __VLS_19: {}, __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_38: {}, __VLS_40: {}, __VLS_47: {};
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_19: {}, __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_38: {}, __VLS_40: {}, __VLS_42: {}, __VLS_50: {}, __VLS_52: {}, __VLS_59: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_9) => any;
 } & {
@@ -18,9 +18,15 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_38) => any;
 } & {
-    trigger?: (props: typeof __VLS_40) => any;
+    header?: (props: typeof __VLS_40) => any;
 } & {
-    trigger?: (props: typeof __VLS_47) => any;
+    default?: (props: typeof __VLS_42) => any;
+} & {
+    default?: (props: typeof __VLS_50) => any;
+} & {
+    trigger?: (props: typeof __VLS_52) => any;
+} & {
+    trigger?: (props: typeof __VLS_59) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     collapsible: {
@@ -71,6 +77,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    rail: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    railWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    expandOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     drawerProps: {
         type: PropType<SiderTemporaryDrawerProps>;
         default: undefined;
@@ -78,6 +96,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     collapse: (collapsed: boolean, type: CollapseType) => any;
     breakpoint: (broken: boolean) => any;
+    "update:rail": (rail: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     collapsible: {
         type: BooleanConstructor;
@@ -127,6 +146,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    rail: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    railWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    expandOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     drawerProps: {
         type: PropType<SiderTemporaryDrawerProps>;
         default: undefined;
@@ -134,6 +165,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     onCollapse?: ((collapsed: boolean, type: CollapseType) => any) | undefined;
     onBreakpoint?: ((broken: boolean) => any) | undefined;
+    "onUpdate:rail"?: ((rail: boolean) => any) | undefined;
 }>, {
     scrollbar: boolean | ScrollbarProps;
     width: string | number;
@@ -147,6 +179,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     collapsedWidth: string | number;
     breakpoint: SiderBreakpoint;
     temporary: boolean;
+    rail: boolean;
+    railWidth: string | number;
+    expandOnHover: boolean;
     drawerProps: SiderTemporaryDrawerProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/layout/sider.vue_vue_type_script_setup_true_lang.js

@@ -111,6 +111,30 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			default: false
 		},
 		/**
+		* @zh 窄轨模式：Sider 常驻为窄轨宽度（仅展示图标），与 collapsed 折叠相互独立
+		* @en Rail mode: Sider stays at rail width (icons only), independent from collapsed
+		*/
+		rail: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 窄轨宽度，仅 rail=true 时生效
+		* @en Rail width, only effective when rail=true
+		*/
+		railWidth: {
+			type: [Number, String],
+			default: 72
+		},
+		/**
+		* @zh 窄轨模式下，鼠标悬停 Sider 时临时展开到 width（覆盖在内容上方，不推动内容），移出后收回。仅 rail=true 时生效
+		* @en In rail mode, temporarily expands to width on hover (overlays content without pushing it), collapses on leave. Only effective when rail=true
+		*/
+		expandOnHover: {
+			type: Boolean,
+			default: false
+		},
+		/**
 		* @zh temporary 模式下透传给 Drawer 的配置（仅 temporary=true 时生效）
 		* @en Drawer passthrough config (only effective when temporary=true)
 		*/
@@ -119,7 +143,11 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			default: void 0
 		}
 	},
-	emits: ["collapse", "breakpoint"],
+	emits: [
+		"collapse",
+		"breakpoint",
+		"update:rail"
+	],
 	setup(__props, { emit: __emit }) {
 		var _props$collapsed;
 		let siderUuid = 0;
@@ -215,8 +243,27 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			const collapsedIcon = reverseIcon.value ? IconLeft : IconRight;
 			return mergedCollapsed.value ? collapsedIcon : expandedIcon;
 		});
-		const rawWidth = computed(() => mergedCollapsed.value ? props.collapsedWidth : props.width);
+		const isHovering = ref(false);
+		const railHoverEnabled = computed(() => props.rail && props.expandOnHover);
+		const isRailExpanded = computed(() => railHoverEnabled.value && isHovering.value);
+		const onMouseEnter = () => {
+			if (railHoverEnabled.value) {
+				isHovering.value = true;
+				emit("update:rail", false);
+			}
+		};
+		const onMouseLeave = () => {
+			if (railHoverEnabled.value) {
+				isHovering.value = false;
+				emit("update:rail", true);
+			}
+		};
+		const rawWidth = computed(() => {
+			if (props.rail) return isRailExpanded.value ? props.width : props.railWidth;
+			return mergedCollapsed.value ? props.collapsedWidth : props.width;
+		});
 		const siderWidth = computed(() => toSiderWidth(rawWidth.value));
+		const railReservedWidth = computed(() => toSiderWidth(props.railWidth));
 		const hasZeroWidth = computed(() => Number.parseFloat(String(props.collapsedWidth || 0)) === 0);
 		const renderTrigger = computed(() => {
 			if (props.temporary) return !props.hideTrigger;
@@ -229,6 +276,12 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				flex: "0 0 auto",
 				width: "auto"
 			};
+			if (props.rail) return {
+				flex: `0 0 ${railReservedWidth.value}`,
+				maxWidth: railReservedWidth.value,
+				minWidth: railReservedWidth.value,
+				width: railReservedWidth.value
+			};
 			return {
 				flex: `0 0 ${siderWidth.value}`,
 				maxWidth: siderWidth.value,
@@ -236,6 +289,15 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				width: siderWidth.value
 			};
 		});
+		const railOverlayStyle = computed(() => {
+			const base = {
+				position: "absolute",
+				inset: "0",
+				width: isRailExpanded.value ? siderWidth.value : railReservedWidth.value
+			};
+			return isRailExpanded.value ? _objectSpread2(_objectSpread2({}, base), {}, { zIndex: 20 }) : base;
+		});
+		const railOverlayCls = computed(() => [`${prefixCls}-rail-overlay`, { [`${prefixCls}-rail-expand`]: isRailExpanded.value }]);
 		const siderCls = computed(() => [
 			prefixCls,
 			`${prefixCls}-${mergedTheme.value}`,
@@ -244,7 +306,8 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				[`${prefixCls}-has-trigger`]: props.collapsible && !props.hideTrigger && !hasZeroWidth.value,
 				[`${prefixCls}-below`]: below.value,
 				[`${prefixCls}-zero-width`]: Number.parseFloat(siderWidth.value) === 0,
-				[`${prefixCls}-temporary`]: props.temporary
+				[`${prefixCls}-temporary`]: props.temporary,
+				[`${prefixCls}-rail`]: props.rail
 			}
 		]);
 		const mergedDrawerProps = computed(() => _objectSpread2({
@@ -256,13 +319,23 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		const onDrawerVisibleChange = (visible) => {
 			if (visible !== !mergedCollapsed.value) handleSetCollapsed(!visible, "clickTrigger");
 		};
+		const mergedSiderRail = computed(() => !!props.rail && !isRailExpanded.value);
+		const siderRailWidthValue = computed(() => props.rail && typeof props.railWidth === "number" ? props.railWidth : void 0);
 		const siderContext = reactive({
 			siderCollapsed: mergedCollapsed.value,
+			siderRail: mergedSiderRail.value,
+			siderRailWidth: siderRailWidthValue.value,
 			theme: mergedTheme.value
 		});
 		watch(mergedCollapsed, (val) => {
 			siderContext.siderCollapsed = val;
 		});
+		watch(mergedSiderRail, (val) => {
+			siderContext.siderRail = val;
+		});
+		watch(siderRailWidthValue, (val) => {
+			siderContext.siderRailWidth = val;
+		});
 		watch(mergedTheme, (val) => {
 			siderContext.theme = val;
 		});
@@ -272,7 +345,9 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				ref_key: "rootEl",
 				ref: rootEl,
 				class: normalizeClass(siderCls.value),
-				style: normalizeStyle(divStyle.value)
+				style: normalizeStyle(divStyle.value),
+				onMouseenter: onMouseEnter,
+				onMouseleave: onMouseLeave
 			}, [__props.temporary ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(Drawer), mergeProps(mergedDrawerProps.value, {
 				visible: !mergedCollapsed.value,
 				"onUpdate:visible": onDrawerVisibleChange
@@ -295,7 +370,23 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				key: 0,
 				class: normalizeClass(`${unref(prefixCls)}-temporary-trigger`),
 				onClick: toggle
-			}, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(IconMenu))])], 2)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+			}, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(IconMenu))])], 2)) : createCommentVNode("", true)], 64)) : __props.rail ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(railOverlayCls.value),
+				style: normalizeStyle(railOverlayStyle.value)
+			}, [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(`${unref(prefixCls)}-header`)
+			}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true), useNativeScrollbar.value ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass([`${unref(prefixCls)}-children`, `${unref(prefixCls)}-children-scroll`])
+			}, [renderSlot(_ctx.$slots, "default")], 2)) : (openBlock(), createBlock(unref(Scrollbar), mergeProps({
+				key: 2,
+				"outer-class": `${unref(prefixCls)}-children`
+			}, unref(scrollbarProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["outer-class"]))], 6)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
 				_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(`${unref(prefixCls)}-header`)
@@ -321,7 +412,7 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					style: normalizeStyle({ width: siderWidth.value }),
 					onClick: toggle
 				}, [renderSlot(_ctx.$slots, "trigger", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(defaultTriggerComponent.value)))])], 6))], 64)) : createCommentVNode("", true)
-			], 64))], 6);
+			], 64))], 38);
 		};
 	}
 }));

package/es/layout/style/index.css

@@ -29,6 +29,9 @@
  * Sider
  * 深色背景与 Menu 深色背景保持一致，避免内嵌菜单出现接缝
  *****************************************************/
+/*****************************************************
+ * Sider rail（窄轨）
+ *****************************************************/
 /*****************************************************
  * Sider light 主题
  *****************************************************/
@@ -47,6 +50,7 @@
   box-sizing: border-box;
 }
 .sd-layout.sd-layout-has-sider {
+  position: relative;
   flex-direction: row;
 }
 .sd-layout.sd-layout-has-sider > .sd-layout,
@@ -65,7 +69,7 @@
   padding: 0 50px;
   color: var(--sd-color-text-1);
   line-height: 64px;
-  background: #001529;
+  background: var(--sd-color-menu-dark-bg);
 }
 
 .sd-layout-footer {
@@ -182,4 +186,19 @@
 }
 .sd-layout-sider-temporary-trigger:hover {
   background: var(--sd-color-fill-2);
+}
+.sd-layout-sider-rail {
+  overflow: visible;
+}
+.sd-layout-sider-rail-overlay {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  overflow: hidden;
+  background: inherit;
+  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.sd-layout-sider-rail-expand {
+  z-index: 20;
+  box-shadow: var(--sd-shadow2-center);
 }

package/es/layout/style/index.scss

@@ -21,6 +21,7 @@ $text-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
   }
 
   &#{&}-has-sider {
+    position: relative;
     flex-direction: row;
 
     > .#{$layout-prefix-cls},
@@ -195,4 +196,31 @@ $text-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
       background: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-fill-2'));
     }
   }
+
+  // Rail：aside 常驻窄轨态。aside 流内占位恒为 railWidth，且必须 overflow: visible，
+  // 否则 hover 时内部 absolute overlay 会被裁掉、无法覆盖到相邻内容上方。
+  &-rail {
+    overflow: visible;
+  }
+
+  // Rail 内容 overlay 容器：承载 header/children/trigger。始终保持绝对定位（脱离文档流，
+  // 不推动右侧内容），宽度在内联 style 上随 hover 在 railWidth ↔ 全宽之间切换。
+  // 这里补 width 过渡 → 平滑展开/收回；过渡只作用于浮层自身宽度，不触发相邻内容重排。
+  &-rail-overlay {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    overflow: hidden;
+    background: inherit;
+    transition:
+      width $layout-motion-duration-mid theme.$transition-timing-function-standard,
+      box-shadow $layout-motion-duration-mid theme.$transition-timing-function-standard;
+  }
+
+  // Rail 悬停展开覆盖态（作用于 overlay）：全宽浮于内容上方，
+  // 宽度由内联 style 给定，这里补 z-index 与阴影以区分浮层与底图。
+  &-rail-expand {
+    z-index: $layout-sider-rail-expand-z-index;
+    box-shadow: var(string.unquote('#{theme.$sd-cssvars-prefix}-shadow2-center'));
+  }
 }

package/es/layout/style/token.scss

@@ -15,7 +15,7 @@ $layout-footer-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-1'));
 /*****************************************************
  * Header
  *****************************************************/
-$layout-header-bg: #001529;
+$layout-header-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
 $layout-header-height: global.$size-16; // 64px
 $layout-header-padding-horizontal: 50px;
 $layout-header-padding: 0 $layout-header-padding-horizontal;
@@ -38,6 +38,12 @@ $layout-sider-zero-trigger-width: global.$size-10; // 40px
 $layout-sider-zero-trigger-height: global.$size-10; // 40px
 $layout-sider-zero-trigger-font-size: 18px;
 
+/*****************************************************
+ * Sider rail（窄轨）
+ *****************************************************/
+$layout-sider-rail-width: global.$size-18; // 72px
+$layout-sider-rail-expand-z-index: 20;
+
 /*****************************************************
  * Sider light 主题
  *****************************************************/

package/es/menu/menu.js

@@ -29,18 +29,29 @@ var menu_default = /* @__PURE__ */ defineComponent({
 		const { theme: propTheme, mode } = toRefs(props);
 		const siderContext = inject(SiderContextInjectionKey, void 0);
 		const siderCollapsed = computed(() => (siderContext === null || siderContext === void 0 ? void 0 : siderContext.siderCollapsed) || false);
+		const siderRailCollapsed = computed(() => (siderContext === null || siderContext === void 0 ? void 0 : siderContext.siderRail) || false);
+		const siderMenuCollapsed = computed(() => siderCollapsed.value || siderRailCollapsed.value);
+		const siderRailCls = computed(() => (siderContext === null || siderContext === void 0 ? void 0 : siderContext.siderRail) ? "sd-menu-in-sider-rail" : "");
+		const siderMenuCollapsedWidth = computed(() => {
+			if (!(siderContext === null || siderContext === void 0 ? void 0 : siderContext.siderRail)) return void 0;
+			const railWidth = siderContext === null || siderContext === void 0 ? void 0 : siderContext.siderRailWidth;
+			return typeof railWidth === "number" ? railWidth : 72;
+		});
 		const theme = computed(() => (propTheme === null || propTheme === void 0 ? void 0 : propTheme.value) || (siderContext === null || siderContext === void 0 ? void 0 : siderContext.theme) || "light");
 		provide(MenuInjectionKey, void 0);
 		provide(LevelInjectionKey, void 0);
-		return () => createVNode(base_menu_default, mergeProps(props, attrs, {
-			"theme": theme.value,
-			"inTrigger": false,
-			"siderCollapsed": siderCollapsed.value,
-			"isRoot": true
-		}), _objectSpread2(_objectSpread2({}, slots), {}, { default: mode.value === "horizontal" && slots.default ? () => createVNode(overflow_wrap_default, null, { default: () => {
-			var _slots$default;
-			return [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
-		} }) : slots.default }));
+		return () => {
+			return createVNode(base_menu_default, mergeProps(props, siderMenuCollapsedWidth.value !== void 0 ? { collapsedWidth: siderMenuCollapsedWidth.value } : {}, attrs, {
+				"class": [attrs.class, siderRailCls.value].filter(Boolean).join(" ") || void 0,
+				"theme": theme.value,
+				"inTrigger": false,
+				"siderCollapsed": siderMenuCollapsed.value,
+				"isRoot": true
+			}), _objectSpread2(_objectSpread2({}, slots), {}, { default: mode.value === "horizontal" && slots.default ? () => createVNode(overflow_wrap_default, null, { default: () => {
+				var _slots$default;
+				return [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+			} }) : slots.default }));
+		};
 	}
 });
 //#endregion

package/es/menu/style/index.css

@@ -554,6 +554,16 @@
 .sd-menu-collapsed .sd-menu-inline-header .sd-icon {
   margin-right: 100%;
 }
+.sd-menu.sd-menu-in-sider-rail.sd-menu-collapsed .sd-menu-item {
+  justify-content: center;
+}
+.sd-menu.sd-menu-in-sider-rail.sd-menu-collapsed .sd-menu-item-inner {
+  display: none;
+}
+.sd-menu.sd-menu-in-sider-rail.sd-menu-collapsed .sd-menu-icon {
+  margin-right: 0;
+  line-height: 40px;
+}
 .sd-menu-collapse-button {
   position: absolute;
   right: 12px;

package/es/menu/style/index.scss

@@ -449,6 +449,26 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
     }
   }
 
+  // 处于 Sider rail 常驻态时，折叠宽度对齐 railWidth（>48px），
+  // 默认靠左的图标需在 railWidth 内居中。
+  &.#{$menu-prefix-cls}-in-sider-rail {
+    &.#{$menu-prefix-cls}-collapsed {
+      .#{$menu-prefix-cls}-item {
+        justify-content: center;
+      }
+
+      // 折叠态文字本就 opacity:0，这里彻底移出布局，让图标借 justify-content 居中。
+      .#{$menu-prefix-cls}-item-inner {
+        display: none;
+      }
+
+      .#{$menu-prefix-cls}-icon {
+        margin-right: 0;
+        line-height: token-var('menu-vertical-item-height');
+      }
+    }
+  }
+
   // 折叠按钮
   &-collapse-button {
     position: absolute;