@sdata/web-vue 2.3.1 → 2.8.0

package/es/layout/style/index.scss

@@ -3,284 +3,196 @@
 @use '@components/layout/style/token.scss' as *;
 
 $layout-prefix-cls: string.unquote('#{theme.$prefix}-layout');
+$sider-prefix-cls: string.unquote('#{theme.$prefix}-layout-sider');
+$text-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
 
 .#{$layout-prefix-cls} {
   display: flex;
-  flex: 1;
+  flex: auto;
   flex-direction: column;
-  margin: 0;
-  padding: 0;
 
-  &-sider {
-    position: relative;
-    flex: none; // flex: 0 0 auto; 当右侧文字过长的时候不会被压缩。
-    width: auto;
-    max-width: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background: $layout-sider-background;
-    transition:
-      width theme.$transition-duration-2 theme.$transition-timing-function-standard,
-      height theme.$transition-duration-2 theme.$transition-timing-function-standard,
-      transform theme.$transition-duration-2 theme.$transition-timing-function-standard;
-
-    &-image,
-    &-prepend,
-    &-append {
-      flex: none;
-    }
-
-    &-children {
-      flex: 1;
-      height: 100%;
-      overflow: auto;
-    }
-
-    &-mask {
-      position: fixed;
-      inset: 0;
-      background: $layout-sider-mask-color;
-    }
+  /* fix firefox can't set height smaller than content on flex item */
+  min-height: 0;
+  background: $layout-body-bg;
 
-    &-collapsed &-children {
-      /* width */
-      &::-webkit-scrollbar {
-        width: 0;
-      }
-    }
+  &,
+  & * {
+    box-sizing: border-box;
+  }
 
-    &-has-trigger {
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      padding-bottom: $layout-trigger-height;
-    }
+  &#{&}-has-sider {
+    flex-direction: row;
 
-    &-rail {
-      width: $layout-rail-width;
+    > .#{$layout-prefix-cls},
+    > .#{$layout-prefix-cls}-content {
+      width: 0;
     }
+  }
 
-    &-trigger {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      width: 100%;
-      height: $layout-trigger-height;
-      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-white'));
-      background: $layout-trigger-dark-color;
-      cursor: pointer;
-      transition: width theme.$transition-duration-2 theme.$transition-timing-function-standard;
-
-      &-light {
-        color: $layout-font-color;
-        background: $layout-sider-background-light;
-        border-top: 1px solid $layout-trigger-light-color-border;
-      }
-    }
+  .#{$layout-prefix-cls}-header,
+  &.#{$layout-prefix-cls}-footer {
+    flex: 0 0 auto;
+  }
 
-    &-floating {
-      box-shadow: none;
-    }
+  // RTL
+  &-rtl {
+    direction: rtl;
+  }
+}
 
-    &-sticky {
-      z-index: 1;
-    }
+// ==================== Header ====================
+.#{$layout-prefix-cls}-header {
+  height: $layout-header-height;
+  padding: $layout-header-padding;
+  color: $layout-header-color;
+  line-height: $layout-header-height;
+  background: $layout-header-bg;
+}
 
-    &-temporary {
-      position: fixed;
-      box-shadow: $layout-sider-shadow;
+// ==================== Footer ====================
+.#{$layout-prefix-cls}-footer {
+  padding: $layout-footer-padding;
+  color: $text-color;
+  font-size: $layout-font-size;
+  background: $layout-footer-bg;
+}
 
-      &.#{$layout-prefix-cls}-sider-left {
-        top: 0;
-        bottom: 0;
-        left: 0;
-        transform: translateX(-100%);
-      }
+// =================== Content ===================
+.#{$layout-prefix-cls}-content {
+  flex: auto;
 
-      &.#{$layout-prefix-cls}-sider-right {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        transform: translateX(100%);
-      }
+  // fix firefox can't set height smaller than content on flex item
+  min-height: 0;
+  color: $text-color;
+}
 
-      &.#{$layout-prefix-cls}-sider-top {
-        top: 0;
-        right: 0;
-        left: 0;
-        width: 100%;
-        transform: translateY(-100%);
-      }
+// =================== Sider ===================
+.#{$sider-prefix-cls} {
+  position: relative;
+  display: flex;
+  flex-direction: column;
 
-      &.#{$layout-prefix-cls}-sider-bottom {
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        transform: translateY(100%);
-      }
+  // fix firefox can't set width smaller than content on flex item
+  min-width: 0;
+  background: $layout-sider-bg;
+  // 与 Menu 的展开/收起过渡保持一致（同时长 + standard 缓动），避免同步收缩时出现割裂感
+  transition:
+    all $layout-motion-duration-mid theme.$transition-timing-function-standard,
+    background 0s;
 
-      &.#{$layout-prefix-cls}-sider-active {
-        transform: translate(0, 0);
-      }
-    }
+  &-has-trigger {
+    padding-bottom: $layout-sider-trigger-height;
   }
 
-  &-sider-light {
-    background: $layout-sider-background-light;
-    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 8%);
+  &-right {
+    order: 1;
   }
 
+  // Fixed region outside the scroll area (e.g. brand / logo).
   &-header {
-    position: relative;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    margin: 0;
-    overflow: hidden;
-    color: $layout-header-color;
-    background: $layout-header-background;
-    border-bottom: 1px solid $layout-header-border-color;
-    transition:
-      height theme.$transition-duration-2 theme.$transition-timing-function-standard,
-      transform theme.$transition-duration-2 theme.$transition-timing-function-standard,
-      box-shadow theme.$transition-duration-2 theme.$transition-timing-function-standard;
-
-    &-wrapper {
-      width: 100%;
-    }
-
-    &-bar,
-    &-extension,
-    &-prepend,
-    &-append,
-    &-content {
-      display: flex;
-      align-items: center;
-    }
-
-    &-bar {
-      position: relative;
-      z-index: 1;
-      gap: $layout-header-gap;
-      min-height: var(--sd-layout-header-content-height, 64px);
-      padding: 0 $layout-header-padding-inline;
-    }
+    flex: none;
+  }
 
-    &-prepend,
-    &-append {
-      flex: none;
-      gap: calc($layout-header-gap / 2);
-    }
+  // Scroll region fills the remaining height. `min-height: 0` lets it shrink
+  // below its content so the inner scrollbar can scroll.
+  &-children {
+    flex: 1;
+    min-height: 0;
+  }
 
-    &-title {
-      position: relative;
-      z-index: 1;
-      flex: none;
-      max-width: min(40%, 480px);
-      overflow: hidden;
-      color: inherit;
-      font-weight: $layout-header-title-font-weight;
-      font-size: $layout-header-title-font-size;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+  &-children-scroll {
+    overflow: hidden auto;
+  }
 
-    &-content {
-      position: relative;
-      z-index: 1;
-      flex: 1;
-      gap: calc($layout-header-gap / 2);
-      min-width: 0;
-    }
+  &-zero-width &-children {
+    overflow: hidden;
+  }
 
-    &-extension {
-      position: relative;
-      z-index: 1;
-      gap: calc($layout-header-gap / 2);
-      min-height: var(--sd-layout-header-extension-height, 48px);
-      padding: 0 $layout-header-padding-inline;
-      border-top: 1px solid $layout-header-border-color;
-    }
+  &-trigger {
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+    height: $layout-sider-trigger-height;
+    color: $layout-sider-trigger-color;
+    line-height: $layout-sider-trigger-height;
+    text-align: center;
+    cursor: pointer;
+    transition: all $layout-motion-duration-mid theme.$transition-timing-function-standard;
+  }
 
-    &-image {
+  &-zero-width-trigger {
+    position: absolute;
+    top: $layout-header-height;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $layout-sider-zero-trigger-width;
+    height: $layout-sider-zero-trigger-height;
+    color: $layout-sider-trigger-color;
+    font-size: $layout-sider-zero-trigger-font-size;
+    background: $layout-sider-bg;
+    border-radius: 0 $layout-radius-lg $layout-radius-lg 0;
+    cursor: pointer;
+    transition: background-color $layout-motion-duration-slow ease;
+    inset-inline-end: -$layout-sider-zero-trigger-width;
+
+    &::after {
       position: absolute;
       inset: 0;
-      overflow: hidden;
-
-      &::after {
-        position: absolute;
-        inset: 0;
-        background: $layout-header-image-overlay;
-        content: '';
-      }
+      background: transparent;
+      transition: all $layout-motion-duration-slow;
+      content: '';
     }
 
-    &-image-inner,
-    &-image :is(img, picture, video) {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      opacity: var(--sd-layout-header-image-opacity, 1);
-      transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    &:hover::after {
+      background: rgb(255 255 255 / 20%);
     }
 
-    &-flat {
-      box-shadow: none;
-    }
-
-    &:not(&-flat) {
-      box-shadow: $layout-header-shadow;
-    }
-
-    &-floating {
-      box-shadow: $layout-header-floating-shadow;
-    }
-
-    &-hidden {
-      pointer-events: none;
-    }
-
-    &-collapsed &-extension {
-      display: none;
+    &-right {
+      inset-inline-start: -$layout-sider-zero-trigger-width;
+      border-radius: $layout-radius-lg 0 0 $layout-radius-lg;
     }
+  }
 
-    &-with-image {
-      color: $layout-font-color-dark;
-      border-bottom-color: transparent;
-    }
+  // Light
+  &-light {
+    background: $layout-light-sider-bg;
 
-    &-with-image &-extension {
-      border-top-color: rgb(255 255 255 / 16%);
+    .#{$sider-prefix-cls}-trigger {
+      color: $layout-light-trigger-color;
+      background: $layout-light-trigger-bg;
     }
 
-    &-bottom {
-      border-top: 1px solid $layout-header-border-color;
-      border-bottom: 0;
+    .#{$sider-prefix-cls}-zero-width-trigger {
+      color: $layout-light-trigger-color;
+      background: $layout-light-trigger-bg;
+      border: 1px solid $layout-body-bg;
+      border-inline-start: 0;
     }
   }
 
-  &-content {
-    flex: 1;
-  }
-
-  &-footer {
+  // Temporary: aside 退化为触发器宿主，菜单内容交给 Drawer 渲染。
+  &-temporary {
     flex: 0 0 auto;
-    margin: 0;
+    width: auto;
+    background: transparent;
   }
-}
 
-.#{$layout-prefix-cls}-has-sider {
-  flex-direction: row;
-
-  > .#{$layout-prefix-cls},
-  > .#{$layout-prefix-cls}-content {
-    overflow-x: hidden;
+  &-temporary-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $layout-sider-zero-trigger-width;
+    height: $layout-sider-zero-trigger-width;
+    color: $text-color;
+    font-size: $layout-sider-zero-trigger-font-size;
+    border-radius: $layout-radius-lg;
+    cursor: pointer;
+    transition: background-color $layout-motion-duration-mid ease;
+
+    &:hover {
+      background: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-fill-2'));
+    }
   }
 }

package/es/layout/style/token.scss

@@ -6,29 +6,49 @@
 @use 'sass:string';
 @use '@style/theme/index.scss' as *;
 
-$layout-trigger-height: 48px;
-$layout-rail-width: 56px;
-$layout-sider-mask-color: rgb(0 0 0 / 45%);
-$layout-sider-shadow: 0 12px 32px rgb(0 0 0 / 18%);
-$layout-header-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
-$layout-header-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
-$layout-header-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
-$layout-header-shadow: 0 8px 24px rgb(0 0 0 / 12%);
-$layout-header-floating-shadow: 0 16px 32px rgb(0 0 0 / 14%);
-$layout-header-padding-inline: 20px;
-$layout-header-gap: 16px;
-$layout-header-title-font-size: 18px;
-$layout-header-title-font-weight: 600;
-$layout-header-image-overlay: linear-gradient(180deg, rgb(0 0 0 / 18%), rgb(0 0 0 / 36%));
-
-// Layout Theme Dark(Default)
-$layout-sider-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
-$layout-font-color-dark: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
-$layout-font-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
-$layout-trigger-dark-color: rgb(255 255 255 / 20%);
-
-// Layout Theme Light
-$layout-sider-background-light: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-light-bg')
-);
-$layout-trigger-light-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-5'));
+/*****************************************************
+ * Layout 整体背景（容器主体与页脚共用）
+ *****************************************************/
+$layout-body-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-1'));
+$layout-footer-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-1'));
+
+/*****************************************************
+ * Header
+ *****************************************************/
+$layout-header-bg: #001529;
+$layout-header-height: global.$size-16; // 64px
+$layout-header-padding-horizontal: 50px;
+$layout-header-padding: 0 $layout-header-padding-horizontal;
+$layout-header-color: var(string.unquote('#{$sd-cssvars-prefix}-color-text-1'));
+
+/*****************************************************
+ * Footer
+ *****************************************************/
+$layout-footer-padding: 24px $layout-header-padding-horizontal;
+
+/*****************************************************
+ * Sider
+ * 深色背景与 Menu 深色背景保持一致，避免内嵌菜单出现接缝
+ *****************************************************/
+$layout-sider-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-menu-dark-bg'));
+$layout-sider-trigger-height: global.$size-11; // 44px
+$layout-sider-trigger-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-menu-dark-hover'));
+$layout-sider-trigger-color: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$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 light 主题
+ *****************************************************/
+$layout-light-sider-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-1'));
+$layout-light-trigger-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-1'));
+$layout-light-trigger-color: var(string.unquote('#{$sd-cssvars-prefix}-color-text-1'));
+
+/*****************************************************
+ * 公共
+ *****************************************************/
+$layout-radius-lg: global.$border-radius-large;
+$layout-motion-duration-mid: global.$transition-duration-2;
+$layout-motion-duration-slow: global.$transition-duration-3;
+$layout-font-size: global.$font-size-body;

package/es/link/index.d.ts

@@ -14,8 +14,8 @@ declare const Link: {
         loading: boolean;
         ellipsisLineClamp: number | string;
         ellipsisExpandTrigger: "click";
-        ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
-        status: import("..").Status;
+        ellipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
+        status: import("../index.ts").Status;
         iconTooltip: string;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -33,8 +33,8 @@ declare const Link: {
         loading: boolean;
         ellipsisLineClamp: number | string;
         ellipsisExpandTrigger: "click";
-        ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
-        status: import("..").Status;
+        ellipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
+        status: import("../index.ts").Status;
         iconTooltip: string;
     }>;
     __isFragment?: never;
@@ -51,8 +51,8 @@ declare const Link: {
     loading: boolean;
     ellipsisLineClamp: number | string;
     ellipsisExpandTrigger: "click";
-    ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
-    status: import("..").Status;
+    ellipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
+    status: import("../index.ts").Status;
     iconTooltip: string;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {