@zjpcy/simple-design 1.5.3 → 1.5.4

package/dist/es/Layout/index.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"react";import i from"../Icon/Icon.js";import{LayoutWrapper as r,HeaderWrapper as d,SiderWrapper as l,SiderContentWrapper as a,SiderTrigger as n,ContentWrapper as c,ZeroWidthTriggerInContent as s,FooterWrapper as h}from"./styles.js";import{LayoutProvider as m,useLayoutContext as u}from"./LayoutContext.js";var f=o.createContext({isNested:!1}),v=function(t){var o=t.className,i=void 0===o?"":o,r=t.style,l=void 0===r?{}:r,a=t.children,n=t.height,c=t.fixed,s=void 0!==c&&c,h=t.theme,m=void 0===h?"light":h,u=(null==l?void 0:l.background)||"#3030302b";return e(d,{className:"layout-header layout-header-".concat(m," ").concat(i),style:l,$height:n,$fixed:s,$theme:m,$bgColor:u,children:a})},p=function(r){var d=r.className,c=void 0===d?"":d,s=r.style,h=void 0===s?{}:s,m=r.children,v=r.width,p=void 0===v?200:v,y=r.collapsedWidth,$=void 0===y?60:y,g=r.collapsible,N=void 0!==g&&g,x=r.collapsed,C=void 0!==x&&x,b=r.onCollapse,W=r.trigger,w=r.triggerPlacement,z=void 0===w?"bottom":w,E=r.zeroWidthMode,j=void 0!==E&&E,k=r.fixed,M=void 0!==k&&k,S=r.theme,L=void 0===S?"light":S,I=o.useContext(f).isNested,P=u(),A=P.setSiderCollapsed,F=P.setZeroWidthMode,H=P.setOnExpand;o.useEffect(function(){A(C),F(j)},[C,j,A,F]);var O=function(){null==b||b(!C)};o.useEffect(function(){H(function(){return O})},[C,b,H]);var R=j&&C?0:$;return t(l,{className:"layout-sider ".concat(C?"collapsed":""," ").concat(c),style:h,$width:p,$collapsedWidth:R,$collapsed:C,$fixed:M,$theme:L,$inNestedLayout:I,children:[e(a,{children:m}),N&&e(n,{className:"layout-sider-trigger",$collapsed:C,$placement:j?"top":z,onClick:O,$zeroWidthMode:j,$theme:L,children:W||e(i,{type:C?"arrowRight":"arrowLeft",size:20,color:"dark"===L?"#fff":"rgba(0, 0, 0, 0.65)"})})]})},y=function(o){var r=o.className,d=void 0===r?"":r,l=o.style,a=void 0===l?{}:l,n=o.children,h=o.theme,m=void 0===h?"light":h,f=u(),v=f.siderCollapsed,p=f.zeroWidthMode,y=f.onExpand;return t(c,{className:"layout-content ".concat(d),style:a,$theme:m,children:[p&&v&&e(s,{onClick:y,children:e(i,{type:"menu",size:24,color:"#fff"})}),n]})},$=function(t){var o=t.className,i=void 0===o?"":o,r=t.style,d=void 0===r?{}:r,l=t.children,a=t.height,n=t.fixed,c=void 0!==n&&n,s=t.theme;return e(h,{className:"layout-footer ".concat(i),style:d,$height:a,$fixed:c,$theme:s,children:l})},g=function(t){var i=t.className,d=void 0===i?"":i,l=t.style,a=void 0===l?{}:l,n=t.children,c=t.hasSider,s=t.theme,h=void 0!==c?c:function(e){return!!e&&o.Children.toArray(e).some(function(e){return o.isValidElement(e)&&e.type===p})}(n);return e(m,{children:e(f.Provider,{value:{isNested:!0},children:e(r,{className:"layout-wrapper ".concat(d),style:a,$hasSider:h,$theme:s,children:n})})})};g.Header=v,g.Sider=p,g.Content=y,g.Footer=$;var N=g;export{y as Content,$ as Footer,v as Header,p as Sider,N as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"react";import i from"../Icon/Icon.js";import{LayoutWrapper as l,HeaderWrapper as d,SiderWrapper as r,SiderContentWrapper as a,SiderTrigger as n,ContentWrapper as c,ZeroWidthTriggerInContent as s,FooterWrapper as h}from"./styles.js";import{LayoutProvider as u,useLayoutContext as m}from"./LayoutContext.js";var f=o.createContext({isNested:!1}),v=function(t){var o=t.className,i=void 0===o?"":o,l=t.style,r=void 0===l?{}:l,a=t.children,n=t.height,c=t.fixed,s=void 0!==c&&c,h=t.theme,u=void 0===h?"light":h,m=null!=u?u:"light",f=(null==r?void 0:r.background)||"#3030302b";return e(d,{className:"layout-header layout-header-".concat(m," ").concat(i),style:r,$height:n,$fixed:s,$theme:m,$bgColor:f,"data-theme":m,children:a})},p=function(l){var d=l.className,c=void 0===d?"":d,s=l.style,h=void 0===s?{}:s,u=l.children,v=l.width,p=void 0===v?200:v,y=l.collapsedWidth,g=void 0===y?60:y,$=l.collapsible,N=void 0!==$&&$,x=l.collapsed,C=void 0!==x&&x,b=l.onCollapse,E=l.trigger,W=l.triggerPlacement,w=void 0===W?"bottom":W,z=l.zeroWidthMode,S=void 0!==z&&z,j=l.fixed,k=void 0!==j&&j,M=l.theme,L=void 0===M?"light":M,I=null!=L?L:"light",P=o.useContext(f).isNested,A=m(),F=A.setSiderCollapsed,H=A.setZeroWidthMode,O=A.setOnExpand;o.useEffect(function(){F(C),H(S)},[C,S,F,H]);var R=function(){null==b||b(!C)};o.useEffect(function(){O(function(){return R})},[C,b,O]);var V=S&&C?0:g;return t(r,{className:"layout-sider ".concat(C?"collapsed":""," ").concat(c),style:h,$width:p,$collapsedWidth:V,$collapsed:C,$fixed:k,$theme:I,$inNestedLayout:P,"data-theme":I,children:[e(a,{children:u}),N&&e(n,{className:"layout-sider-trigger",$collapsed:C,$placement:S?"top":w,onClick:R,$zeroWidthMode:S,$theme:I,children:E||e(i,{type:C?"arrowRight":"arrowLeft",size:20,color:"dark"===I?"#fff":"rgba(0, 0, 0, 0.65)"})})]})},y=function(o){var l=o.className,d=void 0===l?"":l,r=o.style,a=void 0===r?{}:r,n=o.children,h=o.theme,u=void 0===h?"light":h,f=null!=u?u:"light",v=m(),p=v.siderCollapsed,y=v.zeroWidthMode,g=v.onExpand;return t(c,{className:"layout-content ".concat(d),style:a,$theme:f,"data-theme":f,children:[y&&p&&e(s,{onClick:g,children:e(i,{type:"menu",size:24,color:"#fff"})}),n]})},g=function(t){var o=t.className,i=void 0===o?"":o,l=t.style,d=void 0===l?{}:l,r=t.children,a=t.height,n=t.fixed,c=void 0!==n&&n,s=t.theme,u=void 0===s?"light":s,m=null!=u?u:"light";return e(h,{className:"layout-footer ".concat(i),style:d,$height:a,$fixed:c,$theme:m,"data-theme":m,children:r})},$=function(t){var i=t.className,d=void 0===i?"":i,r=t.style,a=void 0===r?{}:r,n=t.children,c=t.hasSider,s=t.theme,h=void 0===s?"light":s,m=void 0!==c?c:function(e){return!!e&&o.Children.toArray(e).some(function(e){return o.isValidElement(e)&&e.type===p})}(n),v=o.useState(!1),y=v[0],g=v[1];return o.useEffect(function(){g(!0)},[]),e(u,{children:e(f.Provider,{value:{isNested:!0},children:e(l,{className:"layout-wrapper ".concat(d).concat(y?" layout-mounted":""),style:a,$hasSider:m,$theme:h,"data-theme":h,children:n})})})};$.Header=v,$.Sider=p,$.Content=y,$.Footer=g;var N=$;export{y as Content,g as Footer,v as Header,p as Sider,N as default};

package/dist/es/Layout/styles.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from"../node_modules/tslib/tslib.es6.js";import o from"styled-components";var r=function(n,o){return"var(".concat(n,", ").concat(o,")")},e=o.div(d||(d=n(["\n  display: flex;\n  flex-direction: column;\n  min-height: ",";\n  max-height: 100vh;\n  background: ",";\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  flex: 1;\n\n  &.layout-wrapper {\n    /* 外部可通过 .layout-wrapper 选择器覆盖样式 */\n  }\n\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  min-height: ",";\n  max-height: 100vh;\n  background: ",";\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  flex: 1;\n\n  &.layout-wrapper {\n    /* 外部可通过 .layout-wrapper 选择器覆盖样式 */\n  }\n\n  ","\n"])),r("--layout-min-height","100vh"),function(n){return"dark"===n.$theme?"linear-gradient(180deg, ".concat(r("--layout-bg-dark","#000")," 0%, ").concat(r("--zjpcy-text-color","rgba(0, 0, 0, 0.85)")," 100%)"):"linear-gradient(180deg, ".concat(r("--layout-bg-light","#f5f5f5")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){return n.$hasSider&&"\n    flex-direction: row;\n    align-items: stretch;\n  "}),t=o.header(u||(u=n(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: ",";\n  background: ",";\n  color: ",";\n  height: ",";\n  z-index: ",";\n  transition: ",";\n  box-sizing: border-box;\n\n  &.layout-header-light {\n    border-bottom: ",";\n  }\n\n  &.layout-header-dark {\n    border-bottom: 1px solid transparent;\n  }\n\n  &.layout-header {\n    /* 外部可通过 .layout-header 选择器覆盖样式 */\n  }\n\n  ","\n"],["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: ",";\n  background: ",";\n  color: ",";\n  height: ",";\n  z-index: ",";\n  transition: ",";\n  box-sizing: border-box;\n\n  &.layout-header-light {\n    border-bottom: ",";\n  }\n\n  &.layout-header-dark {\n    border-bottom: 1px solid transparent;\n  }\n\n  &.layout-header {\n    /* 外部可通过 .layout-header 选择器覆盖样式 */\n  }\n\n  ","\n"])),r("--layout-header-padding","0 24px"),function(n){return"dark"===n.$theme?"linear-gradient(135deg, ".concat(r("--layout-header-bg-dark","#001529")," 0%, #002140 100%)"):"linear-gradient(135deg, ".concat(r("--layout-header-bg-light","#fff")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){return"dark"===n.$theme?r("--layout-header-color-dark","#fff"):r("--layout-header-color-light","rgba(0, 0, 0, 0.85)")},function(n){var o=n.$height;return"number"==typeof o?"".concat(o,"px"):o||r("--layout-header-height","60px")},r("--layout-header-z-index","10"),r("--layout-header-transition","all 0.2s ease-in-out"),function(n){var o=n.$bgColor;return"1px solid ".concat(o)},function(n){return n.$fixed&&"\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    box-shadow: ".concat(r("--layout-header-box-shadow","0 2px 8px rgba(0, 0, 0, 0.15)"),";\n  ")}),a=o.aside(s||(s=n(["\n  display: flex;\n  flex-direction: column;\n  background: ",";\n  color: ",";\n  z-index: ",";\n  transition: ",";\n  flex: ",";\n  box-sizing: border-box;\n  border-right: ",";\n  box-shadow: ",";\n\n\n  &.layout-sider {\n    /* 外部可通过 .layout-sider 选择器覆盖样式 */\n  }\n\n  /* 让子元素占据剩余空间，使 trigger 可以固定在底部 */\n  & > *:not(.layout-sider-trigger) {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n\n  ","\n\n  ","\n\n  /* ============================================\n     集成 Menu 组件样式 - 与 Menu.css 保持一致\n     ============================================ */\n  \n  /* 覆盖 Menu 组件基础样式 */\n  .zjpcy-menu {\n    background: transparent;\n  }\n\n  /* Menu 菜单项在 Sider 中的样式 - 覆盖默认样式 */\n  .zjpcy-menu-item {\n    border-radius: ",";\n    \n    /* Light 主题 - 与 Menu.css 保持一致 */\n    &.light {\n      color: ",";\n      \n      &:hover:not(.disabled) {\n        background: ",";\n        color: ",";\n      }\n      \n      &.selected {\n        background-color: ",";\n        color: ",";\n        box-shadow: inset 3px 0 0 ",";\n        font-weight: 600;\n        \n        &:hover {\n          background-color: ",";\n        }\n      }\n    }\n    \n    /* Dark 主题 - 与 Menu.css 保持一致 */\n    &.dark {\n      color: rgba(255, 255, 255, 0.85);\n      \n      &:hover:not(.disabled) {\n        background-color: rgba(255, 255, 255, 0.08);\n        color: #fff;\n      }\n      \n      &.selected {\n        background-color: rgba(24, 144, 255, 0.25);\n        color: #fff;\n        box-shadow: inset 3px 0 0 ",";\n        font-weight: 600;\n        \n        &:hover {\n          background-color: rgba(24, 144, 255, 0.35);\n        }\n      }\n    }\n  }\n\n  /* 子菜单样式 */\n  .zjpcy-menu-submenu {\n    .zjpcy-menu-item {\n      margin: 0px;\n    }\n  }\n\n  /* Dark 主题下的子菜单样式 */\n  .zjpcy-menu-submenu.horizontal-popup,\n  .zjpcy-menu-submenu.horizontal-popup .zjpcy-menu-submenu {\n    background: linear-gradient(135deg, #001529 0%, #002140 100%);\n    border: 1px solid #303030;\n  }\n\n  /* Dark 主题下子菜单中的菜单项 */\n  .zjpcy-menu-submenu .zjpcy-menu-item.dark {\n    color: rgba(255, 255, 255, 0.85);\n    \n    &:hover:not(.disabled) {\n      background-color: rgba(255, 255, 255, 0.08);\n      color: #fff;\n    }\n    \n    &.selected {\n      background-color: rgba(24, 144, 255, 0.25);\n      color: #fff;\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  background: ",";\n  color: ",";\n  z-index: ",";\n  transition: ",";\n  flex: ",";\n  box-sizing: border-box;\n  border-right: ",";\n  box-shadow: ",";\n\n\n  &.layout-sider {\n    /* 外部可通过 .layout-sider 选择器覆盖样式 */\n  }\n\n  /* 让子元素占据剩余空间，使 trigger 可以固定在底部 */\n  & > *:not(.layout-sider-trigger) {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n\n  ","\n\n  ","\n\n  /* ============================================\n     集成 Menu 组件样式 - 与 Menu.css 保持一致\n     ============================================ */\n  \n  /* 覆盖 Menu 组件基础样式 */\n  .zjpcy-menu {\n    background: transparent;\n  }\n\n  /* Menu 菜单项在 Sider 中的样式 - 覆盖默认样式 */\n  .zjpcy-menu-item {\n    border-radius: ",";\n    \n    /* Light 主题 - 与 Menu.css 保持一致 */\n    &.light {\n      color: ",";\n      \n      &:hover:not(.disabled) {\n        background: ",";\n        color: ",";\n      }\n      \n      &.selected {\n        background-color: ",";\n        color: ",";\n        box-shadow: inset 3px 0 0 ",";\n        font-weight: 600;\n        \n        &:hover {\n          background-color: ",";\n        }\n      }\n    }\n    \n    /* Dark 主题 - 与 Menu.css 保持一致 */\n    &.dark {\n      color: rgba(255, 255, 255, 0.85);\n      \n      &:hover:not(.disabled) {\n        background-color: rgba(255, 255, 255, 0.08);\n        color: #fff;\n      }\n      \n      &.selected {\n        background-color: rgba(24, 144, 255, 0.25);\n        color: #fff;\n        box-shadow: inset 3px 0 0 ",";\n        font-weight: 600;\n        \n        &:hover {\n          background-color: rgba(24, 144, 255, 0.35);\n        }\n      }\n    }\n  }\n\n  /* 子菜单样式 */\n  .zjpcy-menu-submenu {\n    .zjpcy-menu-item {\n      margin: 0px;\n    }\n  }\n\n  /* Dark 主题下的子菜单样式 */\n  .zjpcy-menu-submenu.horizontal-popup,\n  .zjpcy-menu-submenu.horizontal-popup .zjpcy-menu-submenu {\n    background: linear-gradient(135deg, #001529 0%, #002140 100%);\n    border: 1px solid #303030;\n  }\n\n  /* Dark 主题下子菜单中的菜单项 */\n  .zjpcy-menu-submenu .zjpcy-menu-item.dark {\n    color: rgba(255, 255, 255, 0.85);\n    \n    &:hover:not(.disabled) {\n      background-color: rgba(255, 255, 255, 0.08);\n      color: #fff;\n    }\n    \n    &.selected {\n      background-color: rgba(24, 144, 255, 0.25);\n      color: #fff;\n    }\n  }\n"])),function(n){var o=n.$theme,e=n.style;return void 0!==(null==e?void 0:e.background)?e.background:"dark"===o?"linear-gradient(180deg, ".concat(r("--layout-sider-bg-dark","#001529")," 0%, #002140 100%)"):"linear-gradient(180deg, ".concat(r("--layout-sider-bg-light","#fff")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){var o=n.$theme,e=n.style;return void 0!==(null==e?void 0:e.color)?e.color:"dark"===o?r("--layout-sider-color-dark","#fff"):r("--layout-sider-color-light","rgba(0, 0, 0, 0.85)")},r("--layout-sider-z-index","10"),r("--layout-sider-transition","all 0.2s ease-in-out"),r("--layout-sider-flex","0 0 200px"),function(n){return"dark"===n.$theme?"var(--layout-sider-border, 1px solid #303030)":"var(--layout-sider-border, 1px solid ".concat(r("--zjpcy-border-color-light","#f0f0f0"),")")},function(n){return"dark"===n.$theme?"2px 0 8px rgba(0, 0, 0, 0.3)":r("--zjpcy-shadow-sm","0 2px 8px rgba(0, 0, 0, 0.08)")},function(n){var o=n.$width,e=n.$collapsedWidth,t=n.$collapsed,a="number"==typeof o?"".concat(o,"px"):o||r("--layout-sider-width","200px"),i=void 0!==e?"".concat(e,"px"):r("--layout-sider-collapsed-width","60px");return"\n      width: ".concat(t?i:a,";\n      min-width: ").concat(t?i:a,";\n      max-width: ").concat(t?i:a,";\n    ")},function(n){return n.$fixed&&"\n    position: fixed;\n    top: ".concat(r("--layout-header-height","64px"),";\n    left: 0;\n    bottom: 0;\n    overflow-y: auto;\n    box-shadow: ").concat(r("--layout-sider-box-shadow","0 4px 12px rgba(0, 0, 0, 0.15)"),";\n  ")},r("--zjpcy-border-radius-sm","4px"),r("--zjpcy-text-color","rgba(0, 0, 0, 0.85)"),r("--zjpcy-primary-light-color","rgba(24, 144, 255, 0.06)"),r("--zjpcy-primary-color","#1890ff"),r("--zjpcy-primary-light-color","rgba(24, 144, 255, 0.12)"),r("--zjpcy-primary-color","#1890ff"),r("--zjpcy-primary-color","#1890ff"),r("--zjpcy-primary-light-color","rgba(24, 144, 255, 0.18)"),r("--zjpcy-primary-color","#1890ff")),i=o.div(g||(g=n(["\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: ",";\n\n  /* 内容过渡动画 */\n  & > * {\n    transition: all "," ease;\n  }\n\n  /* 收缩状态下的内容样式 */\n  ","\n"],["\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: ",";\n\n  /* 内容过渡动画 */\n  & > * {\n    transition: all "," ease;\n  }\n\n  /* 收缩状态下的内容样式 */\n  ","\n"])),function(n){return n.$collapsed?"visible":"hidden"},r("--zjpcy-transition-duration","0.2s"),function(n){return n.$collapsed&&"\n    & > * {\n      text-align: center;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  "}),l=o.div(f||(f=n(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ",";\n  background: ",";\n  color: ",";\n  cursor: pointer;\n  transition: ",";\n  user-select: none;\n  order: ",";\n\n  &.layout-sider-trigger {\n    /* 外部可通过 .layout-sider-trigger 选择器覆盖样式 */\n  }\n\n  &:hover {\n    background: ",";\n    color: ",";\n  }\n\n  /* 分割线 */\n  ","\n\n  ","\n\n  /* 零宽度模式下，收缩时隐藏触发器 */\n  ","\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ",";\n  background: ",";\n  color: ",";\n  cursor: pointer;\n  transition: ",";\n  user-select: none;\n  order: ",";\n\n  &.layout-sider-trigger {\n    /* 外部可通过 .layout-sider-trigger 选择器覆盖样式 */\n  }\n\n  &:hover {\n    background: ",";\n    color: ",";\n  }\n\n  /* 分割线 */\n  ","\n\n  ","\n\n  /* 零宽度模式下，收缩时隐藏触发器 */\n  ","\n"])),r("--layout-trigger-height","48px"),function(n){return"dark"===n.$theme?"linear-gradient(135deg, ".concat(r("--layout-sider-bg-dark","#001529")," 0%, #002140 100%)"):"linear-gradient(135deg, ".concat(r("--layout-sider-bg-light","#fff")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){return"dark"===n.$theme?r("--layout-sider-color-dark","#fff"):r("--layout-sider-color-light","rgba(0, 0, 0, 0.85)")},r("--layout-trigger-transition","all 0.2s ease-in-out"),function(n){return"top"===n.$placement?"-1":"auto"},function(n){return"dark"===n.$theme?"linear-gradient(135deg, #002140 0%, ".concat(r("--zjpcy-primary-color","#1890ff")," 100%)"):"linear-gradient(135deg, ".concat(r("--zjpcy-primary-light-color","rgba(24, 100, 240, 0.1)")," 0%, ").concat(r("--zjpcy-bg-color-light","#f5f5f5")," 100%)")},function(n){return"dark"===n.$theme?"#fff":r("--zjpcy-primary-color","#1890ff")},function(n){var o=n.$placement,e=n.$theme;return"top"===o&&"\n    border-bottom: 1px solid ".concat("dark"===e?"#303030":r("--zjpcy-border-color-light","#f0f0f0"),";\n  ")},function(n){var o=n.$placement,e=n.$theme;return"top"!==o&&"\n    border-top: 1px solid ".concat("dark"===e?"#303030":r("--zjpcy-border-color-light","#f0f0f0"),";\n  ")},function(n){var o=n.$zeroWidthMode,r=n.$collapsed;return o&&r&&"\n    display: none;\n  "}),c=o.div(b||(b=n(["\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, "," 0%, "," 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: ",";\n  z-index: 100;\n  transition: all "," ",";\n\n  &:hover {\n    background: linear-gradient(135deg, "," 0%, #69c0ff 100%);\n    box-shadow: ",";\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n    box-shadow: ",";\n  }\n"],["\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, "," 0%, "," 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: ",";\n  z-index: 100;\n  transition: all "," ",";\n\n  &:hover {\n    background: linear-gradient(135deg, "," 0%, #69c0ff 100%);\n    box-shadow: ",";\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n    box-shadow: ",";\n  }\n"])),r("--zjpcy-primary-color","#1890ff"),r("--zjpcy-primary-hover-color","#40a9ff"),r("--zjpcy-shadow-sm","0 2px 8px rgba(0, 0, 0, 0.15)"),r("--zjpcy-transition-duration","0.2s"),r("--zjpcy-transition-timing-function","ease-in-out"),r("--zjpcy-primary-hover-color","#40a9ff"),r("--zjpcy-shadow-md","0 4px 12px rgba(0, 0, 0, 0.25)"),r("--zjpcy-shadow-extra-light","0 2px 8px rgba(0, 0, 0, 0.08)"));o.div(p||(p=n(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  overflow: hidden;\n\n  ","\n"],["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  overflow: hidden;\n\n  ","\n"])),function(n){return n.$hasSider&&"\n    flex-direction: row;\n  "});var d,u,s,g,f,b,p,h,y,x=o.main(h||(h=n(["\n  flex: 1;\n  padding: ",";\n  background: ",";\n  min-height: ",";\n  transition: ",";\n  overflow-y: auto;\n  box-sizing: border-box;\n  position: relative;\n\n  &.layout-content {\n    /* 外部可通过 .layout-content 选择器覆盖样式 */\n  }\n\n  ","\n\n  /* 滚动条样式 */\n  &::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ",";\n    border-radius: ",";\n    transition: background-color "," ease;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ",";\n  }\n\n  /* Dark 主题滚动条样式 */\n  ","\n"],["\n  flex: 1;\n  padding: ",";\n  background: ",";\n  min-height: ",";\n  transition: ",";\n  overflow-y: auto;\n  box-sizing: border-box;\n  position: relative;\n\n  &.layout-content {\n    /* 外部可通过 .layout-content 选择器覆盖样式 */\n  }\n\n  ","\n\n  /* 滚动条样式 */\n  &::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ",";\n    border-radius: ",";\n    transition: background-color "," ease;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ",";\n  }\n\n  /* Dark 主题滚动条样式 */\n  ","\n"])),r("--layout-content-padding","24px"),r("--layout-content-bg","transparent"),r("--layout-content-min-height","280px"),r("--layout-content-transition","all 0.2s ease-in-out"),function(n){return n.$fixed&&"\n    overflow-y: auto;\n  "},r("--zjpcy-border-color-extra-light","#d9d9d9"),r("--zjpcy-border-radius-sm","4px"),r("--zjpcy-transition-duration","0.2s"),r("--zjpcy-text-color-tertiary","rgba(0, 0, 0, 0.45)"),function(n){return"dark"===n.$theme&&"\n    &::-webkit-scrollbar-thumb {\n      background-color: color-mix(in srgb, ".concat(r("--zjpcy-primary-color","#1890ff")," 50%, transparent);\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n      background-color: color-mix(in srgb, ").concat(r("--zjpcy-primary-color","#1890ff")," 70%, transparent);\n    }\n\n    scrollbar-width: thin;\n    scrollbar-color: color-mix(in srgb, ").concat(r("--zjpcy-primary-color","#1890ff")," 50%, transparent) transparent;\n  ")}),m=o.footer(y||(y=n(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: ",";\n  background: ",";\n  color: ",";\n  height: ",";\n  border-top: ",";\n  z-index: ",";\n  transition: ",";\n  box-sizing: border-box;\n\n  &.layout-footer {\n    /* 外部可通过 .layout-footer 选择器覆盖样式 */\n  }\n\n  ","\n"],["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: ",";\n  background: ",";\n  color: ",";\n  height: ",";\n  border-top: ",";\n  z-index: ",";\n  transition: ",";\n  box-sizing: border-box;\n\n  &.layout-footer {\n    /* 外部可通过 .layout-footer 选择器覆盖样式 */\n  }\n\n  ","\n"])),r("--layout-footer-padding","24px 50px"),function(n){return"dark"===n.$theme?"linear-gradient(135deg, ".concat(r("--layout-footer-bg-dark","#001529")," 0%, #002140 100%)"):"linear-gradient(135deg, ".concat(r("--layout-footer-bg-light","#fff")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){return"dark"===n.$theme?r("--layout-footer-color-dark","#fff"):r("--layout-footer-color-light","rgba(0, 0, 0, 0.85)")},function(n){var o=n.$height;return"number"==typeof o?"".concat(o,"px"):o||r("--layout-footer-height","48px")},function(n){return"dark"===n.$theme?"var(--layout-footer-border, 1px solid #303030)":"var(--layout-footer-border, 1px solid ".concat(r("--zjpcy-border-color-light","#f0f0f0"),")")},r("--layout-footer-z-index","10"),r("--layout-footer-transition","all 0.2s ease-in-out"),function(n){return n.$fixed&&"\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);\n  "});export{x as ContentWrapper,m as FooterWrapper,t as HeaderWrapper,e as LayoutWrapper,i as SiderContentWrapper,l as SiderTrigger,a as SiderWrapper,c as ZeroWidthTriggerInContent};
+import{__makeTemplateObject as n}from"../node_modules/tslib/tslib.es6.js";import o from"styled-components";var r=function(n,o){return"var(".concat(n,", ").concat(o,")")},e=o.div(d||(d=n(["\n  display: flex;\n  flex-direction: column;\n  min-height: ",";\n  max-height: 100vh;\n  /* 使用更明确的默认值，避免 SSR 时 theme 为 undefined 导致黑色背景闪烁 */\n  background: ",";\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  flex: 1;\n\n  /* SSR 安全：确保服务端和客户端初始渲染一致 */\n  @media (prefers-color-scheme: dark) {\n    /* 在暗色模式下默认使用 light 主题避免闪烁，由 JS 控制实际主题 */\n  }\n\n  &.layout-wrapper {\n    /* 外部可通过 .layout-wrapper 选择器覆盖样式 */\n  }\n\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  min-height: ",";\n  max-height: 100vh;\n  /* 使用更明确的默认值，避免 SSR 时 theme 为 undefined 导致黑色背景闪烁 */\n  background: ",";\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  flex: 1;\n\n  /* SSR 安全：确保服务端和客户端初始渲染一致 */\n  @media (prefers-color-scheme: dark) {\n    /* 在暗色模式下默认使用 light 主题避免闪烁，由 JS 控制实际主题 */\n  }\n\n  &.layout-wrapper {\n    /* 外部可通过 .layout-wrapper 选择器覆盖样式 */\n  }\n\n  ","\n"])),r("--layout-min-height","100vh"),function(n){return"dark"===n.$theme?"linear-gradient(180deg, ".concat(r("--layout-bg-dark","#001529")," 0%, ").concat(r("--zjpcy-text-color","rgba(0, 0, 0, 0.85)")," 100%)"):"linear-gradient(180deg, ".concat(r("--layout-bg-light","#f5f5f5")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){return n.$hasSider&&"\n    flex-direction: row;\n    align-items: stretch;\n  "}),t=o.header(u||(u=n(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: ",";\n  /* 确保默认使用亮色主题，避免 SSR 闪烁 */\n  background: ",";\n  color: ",";\n  height: ",";\n  z-index: ",";\n  transition: ",";\n  box-sizing: border-box;\n\n  &.layout-header-light {\n    border-bottom: ",";\n  }\n\n  &.layout-header-dark {\n    border-bottom: 1px solid transparent;\n  }\n\n  &.layout-header {\n    /* 外部可通过 .layout-header 选择器覆盖样式 */\n  }\n\n  ","\n"],["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: ",";\n  /* 确保默认使用亮色主题，避免 SSR 闪烁 */\n  background: ",";\n  color: ",";\n  height: ",";\n  z-index: ",";\n  transition: ",";\n  box-sizing: border-box;\n\n  &.layout-header-light {\n    border-bottom: ",";\n  }\n\n  &.layout-header-dark {\n    border-bottom: 1px solid transparent;\n  }\n\n  &.layout-header {\n    /* 外部可通过 .layout-header 选择器覆盖样式 */\n  }\n\n  ","\n"])),r("--layout-header-padding","0 24px"),function(n){return"dark"===n.$theme?"linear-gradient(135deg, ".concat(r("--layout-header-bg-dark","#001529")," 0%, #002140 100%)"):"linear-gradient(135deg, ".concat(r("--layout-header-bg-light","#fff")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){return"dark"===n.$theme?r("--layout-header-color-dark","#fff"):r("--layout-header-color-light","rgba(0, 0, 0, 0.85)")},function(n){var o=n.$height;return"number"==typeof o?"".concat(o,"px"):o||r("--layout-header-height","60px")},r("--layout-header-z-index","10"),r("--layout-header-transition","all 0.2s ease-in-out"),function(n){var o=n.$bgColor;return"1px solid ".concat(o)},function(n){return n.$fixed&&"\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    box-shadow: ".concat(r("--layout-header-box-shadow","0 2px 8px rgba(0, 0, 0, 0.15)"),";\n  ")}),a=o.aside(s||(s=n(["\n  display: flex;\n  flex-direction: column;\n  /* SSR 安全：明确处理 theme 为 undefined 的情况，默认使用亮色主题 */\n  background: ",";\n  color: ",";\n  z-index: ",";\n  transition: ",";\n  flex: ",";\n  box-sizing: border-box;\n  border-right: ",";\n  box-shadow: ",";\n\n\n  &.layout-sider {\n    /* 外部可通过 .layout-sider 选择器覆盖样式 */\n  }\n\n  /* 让子元素占据剩余空间，使 trigger 可以固定在底部 */\n  & > *:not(.layout-sider-trigger) {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n\n  ","\n\n  ","\n\n  /* ============================================\n     集成 Menu 组件样式 - 与 Menu.css 保持一致\n     ============================================ */\n  \n  /* 覆盖 Menu 组件基础样式 */\n  .zjpcy-menu {\n    background: transparent;\n  }\n\n  /* Menu 菜单项在 Sider 中的样式 - 覆盖默认样式 */\n  .zjpcy-menu-item {\n    border-radius: ",";\n    \n    /* Light 主题 - 与 Menu.css 保持一致 */\n    &.light {\n      color: ",";\n      \n      &:hover:not(.disabled) {\n        background: ",";\n        color: ",";\n      }\n      \n      &.selected {\n        background-color: ",";\n        color: ",";\n        box-shadow: inset 3px 0 0 ",";\n        font-weight: 600;\n        \n        &:hover {\n          background-color: ",";\n        }\n      }\n    }\n    \n    /* Dark 主题 - 与 Menu.css 保持一致 */\n    &.dark {\n      color: rgba(255, 255, 255, 0.85);\n      \n      &:hover:not(.disabled) {\n        background-color: rgba(255, 255, 255, 0.08);\n        color: #fff;\n      }\n      \n      &.selected {\n        background-color: rgba(24, 144, 255, 0.25);\n        color: #fff;\n        box-shadow: inset 3px 0 0 ",";\n        font-weight: 600;\n        \n        &:hover {\n          background-color: rgba(24, 144, 255, 0.35);\n        }\n      }\n    }\n  }\n\n  /* 子菜单样式 */\n  .zjpcy-menu-submenu {\n    .zjpcy-menu-item {\n      margin: 0px;\n    }\n  }\n\n  /* Dark 主题下的子菜单样式 */\n  .zjpcy-menu-submenu.horizontal-popup,\n  .zjpcy-menu-submenu.horizontal-popup .zjpcy-menu-submenu {\n    background: linear-gradient(135deg, #001529 0%, #002140 100%);\n    border: 1px solid #303030;\n  }\n\n  /* Dark 主题下子菜单中的菜单项 */\n  .zjpcy-menu-submenu .zjpcy-menu-item.dark {\n    color: rgba(255, 255, 255, 0.85);\n    \n    &:hover:not(.disabled) {\n      background-color: rgba(255, 255, 255, 0.08);\n      color: #fff;\n    }\n    \n    &.selected {\n      background-color: rgba(24, 144, 255, 0.25);\n      color: #fff;\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  /* SSR 安全：明确处理 theme 为 undefined 的情况，默认使用亮色主题 */\n  background: ",";\n  color: ",";\n  z-index: ",";\n  transition: ",";\n  flex: ",";\n  box-sizing: border-box;\n  border-right: ",";\n  box-shadow: ",";\n\n\n  &.layout-sider {\n    /* 外部可通过 .layout-sider 选择器覆盖样式 */\n  }\n\n  /* 让子元素占据剩余空间，使 trigger 可以固定在底部 */\n  & > *:not(.layout-sider-trigger) {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n\n  ","\n\n  ","\n\n  /* ============================================\n     集成 Menu 组件样式 - 与 Menu.css 保持一致\n     ============================================ */\n  \n  /* 覆盖 Menu 组件基础样式 */\n  .zjpcy-menu {\n    background: transparent;\n  }\n\n  /* Menu 菜单项在 Sider 中的样式 - 覆盖默认样式 */\n  .zjpcy-menu-item {\n    border-radius: ",";\n    \n    /* Light 主题 - 与 Menu.css 保持一致 */\n    &.light {\n      color: ",";\n      \n      &:hover:not(.disabled) {\n        background: ",";\n        color: ",";\n      }\n      \n      &.selected {\n        background-color: ",";\n        color: ",";\n        box-shadow: inset 3px 0 0 ",";\n        font-weight: 600;\n        \n        &:hover {\n          background-color: ",";\n        }\n      }\n    }\n    \n    /* Dark 主题 - 与 Menu.css 保持一致 */\n    &.dark {\n      color: rgba(255, 255, 255, 0.85);\n      \n      &:hover:not(.disabled) {\n        background-color: rgba(255, 255, 255, 0.08);\n        color: #fff;\n      }\n      \n      &.selected {\n        background-color: rgba(24, 144, 255, 0.25);\n        color: #fff;\n        box-shadow: inset 3px 0 0 ",";\n        font-weight: 600;\n        \n        &:hover {\n          background-color: rgba(24, 144, 255, 0.35);\n        }\n      }\n    }\n  }\n\n  /* 子菜单样式 */\n  .zjpcy-menu-submenu {\n    .zjpcy-menu-item {\n      margin: 0px;\n    }\n  }\n\n  /* Dark 主题下的子菜单样式 */\n  .zjpcy-menu-submenu.horizontal-popup,\n  .zjpcy-menu-submenu.horizontal-popup .zjpcy-menu-submenu {\n    background: linear-gradient(135deg, #001529 0%, #002140 100%);\n    border: 1px solid #303030;\n  }\n\n  /* Dark 主题下子菜单中的菜单项 */\n  .zjpcy-menu-submenu .zjpcy-menu-item.dark {\n    color: rgba(255, 255, 255, 0.85);\n    \n    &:hover:not(.disabled) {\n      background-color: rgba(255, 255, 255, 0.08);\n      color: #fff;\n    }\n    \n    &.selected {\n      background-color: rgba(24, 144, 255, 0.25);\n      color: #fff;\n    }\n  }\n"])),function(n){var o=n.$theme,e=n.style;return void 0!==(null==e?void 0:e.background)?e.background:"dark"===o?"linear-gradient(180deg, ".concat(r("--layout-sider-bg-dark","#001529")," 0%, #002140 100%)"):"linear-gradient(180deg, ".concat(r("--layout-sider-bg-light","#fff")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){var o=n.$theme,e=n.style;return void 0!==(null==e?void 0:e.color)?e.color:"dark"===o?r("--layout-sider-color-dark","#fff"):r("--layout-sider-color-light","rgba(0, 0, 0, 0.85)")},r("--layout-sider-z-index","10"),r("--layout-sider-transition","all 0.2s ease-in-out"),r("--layout-sider-flex","0 0 200px"),function(n){return"dark"===n.$theme?"var(--layout-sider-border, 1px solid #303030)":"var(--layout-sider-border, 1px solid ".concat(r("--zjpcy-border-color-light","#f0f0f0"),")")},function(n){return"dark"===n.$theme?"2px 0 8px rgba(0, 0, 0, 0.3)":r("--zjpcy-shadow-sm","0 2px 8px rgba(0, 0, 0, 0.08)")},function(n){var o=n.$width,e=n.$collapsedWidth,t=n.$collapsed,a="number"==typeof o?"".concat(o,"px"):o||r("--layout-sider-width","200px"),i=void 0!==e?"".concat(e,"px"):r("--layout-sider-collapsed-width","60px");return"\n      width: ".concat(t?i:a,";\n      min-width: ").concat(t?i:a,";\n      max-width: ").concat(t?i:a,";\n    ")},function(n){return n.$fixed&&"\n    position: fixed;\n    top: ".concat(r("--layout-header-height","64px"),";\n    left: 0;\n    bottom: 0;\n    overflow-y: auto;\n    box-shadow: ").concat(r("--layout-sider-box-shadow","0 4px 12px rgba(0, 0, 0, 0.15)"),";\n  ")},r("--zjpcy-border-radius-sm","4px"),r("--zjpcy-text-color","rgba(0, 0, 0, 0.85)"),r("--zjpcy-primary-light-color","rgba(24, 144, 255, 0.06)"),r("--zjpcy-primary-color","#1890ff"),r("--zjpcy-primary-light-color","rgba(24, 144, 255, 0.12)"),r("--zjpcy-primary-color","#1890ff"),r("--zjpcy-primary-color","#1890ff"),r("--zjpcy-primary-light-color","rgba(24, 144, 255, 0.18)"),r("--zjpcy-primary-color","#1890ff")),i=o.div(g||(g=n(["\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: ",";\n\n  /* 内容过渡动画 */\n  & > * {\n    transition: all "," ease;\n  }\n\n  /* 收缩状态下的内容样式 */\n  ","\n"],["\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: ",";\n\n  /* 内容过渡动画 */\n  & > * {\n    transition: all "," ease;\n  }\n\n  /* 收缩状态下的内容样式 */\n  ","\n"])),function(n){return n.$collapsed?"visible":"hidden"},r("--zjpcy-transition-duration","0.2s"),function(n){return n.$collapsed&&"\n    & > * {\n      text-align: center;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  "}),l=o.div(f||(f=n(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ",";\n  /* SSR 安全：默认使用亮色主题 */\n  background: ",";\n  color: ",";\n  cursor: pointer;\n  transition: ",";\n  user-select: none;\n  order: ",";\n\n  &.layout-sider-trigger {\n    /* 外部可通过 .layout-sider-trigger 选择器覆盖样式 */\n  }\n\n  &:hover {\n    background: ",";\n    color: ",";\n  }\n\n  /* 分割线 */\n  ","\n\n  ","\n\n  /* 零宽度模式下，收缩时隐藏触发器 */\n  ","\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ",";\n  /* SSR 安全：默认使用亮色主题 */\n  background: ",";\n  color: ",";\n  cursor: pointer;\n  transition: ",";\n  user-select: none;\n  order: ",";\n\n  &.layout-sider-trigger {\n    /* 外部可通过 .layout-sider-trigger 选择器覆盖样式 */\n  }\n\n  &:hover {\n    background: ",";\n    color: ",";\n  }\n\n  /* 分割线 */\n  ","\n\n  ","\n\n  /* 零宽度模式下，收缩时隐藏触发器 */\n  ","\n"])),r("--layout-trigger-height","48px"),function(n){return"dark"===n.$theme?"linear-gradient(135deg, ".concat(r("--layout-sider-bg-dark","#001529")," 0%, #002140 100%)"):"linear-gradient(135deg, ".concat(r("--layout-sider-bg-light","#fff")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){return"dark"===n.$theme?r("--layout-sider-color-dark","#fff"):r("--layout-sider-color-light","rgba(0, 0, 0, 0.85)")},r("--layout-trigger-transition","all 0.2s ease-in-out"),function(n){return"top"===n.$placement?"-1":"auto"},function(n){return"dark"===n.$theme?"linear-gradient(135deg, #002140 0%, ".concat(r("--zjpcy-primary-color","#1890ff")," 100%)"):"linear-gradient(135deg, ".concat(r("--zjpcy-primary-light-color","rgba(24, 100, 240, 0.1)")," 0%, ").concat(r("--zjpcy-bg-color-light","#f5f5f5")," 100%)")},function(n){return"dark"===n.$theme?"#fff":r("--zjpcy-primary-color","#1890ff")},function(n){var o=n.$placement,e=n.$theme;return"top"===o&&"\n    border-bottom: 1px solid ".concat("dark"===e?"#303030":r("--zjpcy-border-color-light","#f0f0f0"),";\n  ")},function(n){var o=n.$placement,e=n.$theme;return"top"!==o&&"\n    border-top: 1px solid ".concat("dark"===e?"#303030":r("--zjpcy-border-color-light","#f0f0f0"),";\n  ")},function(n){var o=n.$zeroWidthMode,r=n.$collapsed;return o&&r&&"\n    display: none;\n  "}),c=o.div(b||(b=n(["\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, "," 0%, "," 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: ",";\n  z-index: 100;\n  transition: all "," ",";\n\n  &:hover {\n    background: linear-gradient(135deg, "," 0%, #69c0ff 100%);\n    box-shadow: ",";\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n    box-shadow: ",";\n  }\n"],["\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, "," 0%, "," 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: ",";\n  z-index: 100;\n  transition: all "," ",";\n\n  &:hover {\n    background: linear-gradient(135deg, "," 0%, #69c0ff 100%);\n    box-shadow: ",";\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n    box-shadow: ",";\n  }\n"])),r("--zjpcy-primary-color","#1890ff"),r("--zjpcy-primary-hover-color","#40a9ff"),r("--zjpcy-shadow-sm","0 2px 8px rgba(0, 0, 0, 0.15)"),r("--zjpcy-transition-duration","0.2s"),r("--zjpcy-transition-timing-function","ease-in-out"),r("--zjpcy-primary-hover-color","#40a9ff"),r("--zjpcy-shadow-md","0 4px 12px rgba(0, 0, 0, 0.25)"),r("--zjpcy-shadow-extra-light","0 2px 8px rgba(0, 0, 0, 0.08)"));o.div(p||(p=n(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  overflow: hidden;\n\n  ","\n"],["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  overflow: hidden;\n\n  ","\n"])),function(n){return n.$hasSider&&"\n    flex-direction: row;\n  "});var d,u,s,g,f,b,p,h,y,x=o.main(h||(h=n(["\n  flex: 1;\n  padding: ",";\n  background: ",";\n  min-height: ",";\n  transition: ",";\n  overflow-y: auto;\n  box-sizing: border-box;\n  position: relative;\n\n  &.layout-content {\n    /* 外部可通过 .layout-content 选择器覆盖样式 */\n  }\n\n  ","\n\n  /* 滚动条样式 */\n  &::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ",";\n    border-radius: ",";\n    transition: background-color "," ease;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ",";\n  }\n\n  /* Dark 主题滚动条样式 */\n  ","\n"],["\n  flex: 1;\n  padding: ",";\n  background: ",";\n  min-height: ",";\n  transition: ",";\n  overflow-y: auto;\n  box-sizing: border-box;\n  position: relative;\n\n  &.layout-content {\n    /* 外部可通过 .layout-content 选择器覆盖样式 */\n  }\n\n  ","\n\n  /* 滚动条样式 */\n  &::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ",";\n    border-radius: ",";\n    transition: background-color "," ease;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ",";\n  }\n\n  /* Dark 主题滚动条样式 */\n  ","\n"])),r("--layout-content-padding","24px"),r("--layout-content-bg","transparent"),r("--layout-content-min-height","280px"),r("--layout-content-transition","all 0.2s ease-in-out"),function(n){return n.$fixed&&"\n    overflow-y: auto;\n  "},r("--zjpcy-border-color-extra-light","#d9d9d9"),r("--zjpcy-border-radius-sm","4px"),r("--zjpcy-transition-duration","0.2s"),r("--zjpcy-text-color-tertiary","rgba(0, 0, 0, 0.45)"),function(n){return"dark"===n.$theme&&"\n    &::-webkit-scrollbar-thumb {\n      background-color: color-mix(in srgb, ".concat(r("--zjpcy-primary-color","#1890ff")," 50%, transparent);\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n      background-color: color-mix(in srgb, ").concat(r("--zjpcy-primary-color","#1890ff")," 70%, transparent);\n    }\n\n    scrollbar-width: thin;\n    scrollbar-color: color-mix(in srgb, ").concat(r("--zjpcy-primary-color","#1890ff")," 50%, transparent) transparent;\n  ")}),m=o.footer(y||(y=n(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: ",";\n  /* SSR 安全：默认使用亮色主题 */\n  background: ",";\n  color: ",";\n  height: ",";\n  border-top: ",";\n  z-index: ",";\n  transition: ",";\n  box-sizing: border-box;\n\n  &.layout-footer {\n    /* 外部可通过 .layout-footer 选择器覆盖样式 */\n  }\n\n  ","\n"],["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: ",";\n  /* SSR 安全：默认使用亮色主题 */\n  background: ",";\n  color: ",";\n  height: ",";\n  border-top: ",";\n  z-index: ",";\n  transition: ",";\n  box-sizing: border-box;\n\n  &.layout-footer {\n    /* 外部可通过 .layout-footer 选择器覆盖样式 */\n  }\n\n  ","\n"])),r("--layout-footer-padding","24px 50px"),function(n){return"dark"===n.$theme?"linear-gradient(135deg, ".concat(r("--layout-footer-bg-dark","#001529")," 0%, #002140 100%)"):"linear-gradient(135deg, ".concat(r("--layout-footer-bg-light","#fff")," 0%, ").concat(r("--zjpcy-bg-color","#fafafa")," 100%)")},function(n){return"dark"===n.$theme?r("--layout-footer-color-dark","#fff"):r("--layout-footer-color-light","rgba(0, 0, 0, 0.85)")},function(n){var o=n.$height;return"number"==typeof o?"".concat(o,"px"):o||r("--layout-footer-height","48px")},function(n){return"dark"===n.$theme?"var(--layout-footer-border, 1px solid #303030)":"var(--layout-footer-border, 1px solid ".concat(r("--zjpcy-border-color-light","#f0f0f0"),")")},r("--layout-footer-z-index","10"),r("--layout-footer-transition","all 0.2s ease-in-out"),function(n){return n.$fixed&&"\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);\n  "});export{x as ContentWrapper,m as FooterWrapper,t as HeaderWrapper,e as LayoutWrapper,i as SiderContentWrapper,l as SiderTrigger,a as SiderWrapper,c as ZeroWidthTriggerInContent};

package/dist/es/index.css

@@ -9812,6 +9812,43 @@ html {
    IDP Layout Component - Modern Design System
    ============================================ */
 
+/* ============================================
+   ANTI-FOUC: 防止 SSR 闪烁的关键样式
+   这些样式在 CSS 文件最前面，确保最先加载
+   ============================================ */
+
+/**
+ * FOUC 问题背景：
+ * 在 Next.js SSR 环境下，styled-components 的样式在客户端水合后才注入，
+ * 导致组件在 SSR 期间显示浏览器默认样式或黑色背景。
+ *
+ * 解决方案：
+ * 使用 CSS 变量作为默认值，styled-components 可以通过内联样式覆盖
+ */
+
+/* 核心防护：确保所有 Layout 元素默认使用亮色背景 */
+/* 注意：不使用 !important，以便 styled-components 可以覆盖 */
+.layout-wrapper,
+.layout-header,
+.layout-sider,
+.layout-content,
+.layout-footer {
+  /* 默认亮色背景，防止黑色闪烁 */
+  background-color: var(--layout-default-bg, #ffffff);
+  color: var(--layout-default-color, rgba(0, 0, 0, 0.85));
+}
+
+/* SSR 安全：确保 HTML 和 body 有默认亮色背景 */
+html, body {
+  background-color: #ffffff;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   CSS 变量定义
+   ============================================ */
+
 :root {
   /* ============================================
      Layout 基础配置

package/dist/variables.css

@@ -1,3 +1,17 @@
+/* ============================================
+   IDP Design System - 全局 CSS 变量
+   ============================================ */
+
+/* ============================================
+   ANTI-FOUC: SSR 闪烁防护
+   确保服务端渲染期间有正确的默认样式
+   ============================================ */
+
+/* 基础防护：确保 HTML 和 body 默认使用亮色背景 */
+html, body {
+  background-color: #ffffff;
+}
+
 /* 主题颜色变量定义 */
 :root {
   /* 主色调 - 主要用于强调和突出显示 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjpcy/simple-design",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "IDP Studio Design System - React Component Library",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",