@veltra/desktop 1.1.34 → 1.1.36

package/src/components/loading/style.scss

@@ -2,7 +2,6 @@
 @use 'pkg:@veltra/styles/functions' as fn;
 @use 'pkg:@veltra/styles/vars';
 
-// 方便拼接
 $root-name: loading;
 
 @include m.b($root-name) {
@@ -17,415 +16,187 @@ $root-name: loading;
     position: relative;
   }
 
-  // line
-  @include m.e(line) {
+  // ============================================================
+  // spinner — 渐变圆弧旋转
+  // 使用 conic-gradient + mask 实现缺口圆环旋转
+  // ============================================================
+  @include m.e(spinner) {
     @include m.bem($root-name, loader) {
-      $c: no-repeat linear-gradient(#{fn.use-var(text-color, main)} 0 0);
-      width: 40px;
+      width: 42px;
       aspect-ratio: 1;
-      display: grid;
+      border-radius: 50%;
+      background: conic-gradient(from 0deg, transparent 25%, currentColor 70%, transparent 100%);
+      mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
+      animation: loading-spin 0.85s linear infinite;
+    }
+  }
+
+  // ============================================================
+  // dot — 三点波浪弹跳
+  // 元素自身 + 两个伪元素，交错弹跳
+  // ============================================================
+  @include m.e(dot) {
+    @include m.bem($root-name, loader) {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: currentColor;
+      position: relative;
+      animation: loading-dot 1.4s ease-in-out infinite;
 
       &::before,
       &::after {
         content: '';
-        grid-area: 1/1;
-        background:
-          #{$c} 0 0,
-          #{$c} 100% 0,
-          #{$c} 100% 100%,
-          #{$c} 0 100%;
-        animation:
-          line-1 2s infinite linear,
-          line-2 2s infinite linear;
+        position: absolute;
+        top: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: currentColor;
       }
+
+      &::before {
+        left: -20px;
+        animation: loading-dot 1.4s ease-in-out infinite;
+        animation-delay: 0.2s;
+      }
+
       &::after {
-        margin: 25%;
-        transform: scale(-1);
+        right: -20px;
+        animation: loading-dot 1.4s ease-in-out infinite;
+        animation-delay: 0.4s;
       }
     }
   }
 
-  // spinner
-  @include m.e(spinner) {
+  // ============================================================
+  // line — 流光扫过
+  // 半透明底轨 + 渐变光条水平扫过
+  // ============================================================
+  @include m.e(line) {
     @include m.bem($root-name, loader) {
-      $c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 92%, #0000);
-      width: 50px;
-      aspect-ratio: 1;
-      display: grid;
+      width: 160px;
+      height: 3px;
+      border-radius: 1.5px;
+      background: fn.use-var(bg-color, hover);
+      overflow: hidden;
+      position: relative;
 
-      &::before,
       &::after {
         content: '';
-        grid-area: 1/1;
-
-        background:
-          #{$c} 50% 0,
-          #{$c} 50% 100%,
-          #{$c} 100% 50%,
-          #{$c} 0 50%;
-        background-size: 12px 12px;
-        animation: spinner 1s infinite;
-      }
-      &::before {
-        margin: 4px;
-        filter: hue-rotate(45deg);
-        background-size: 8px 8px;
-        animation-timing-function: linear;
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          currentColor 40%,
+          currentColor 60%,
+          transparent 100%
+        );
+        animation: loading-shimmer 1.4s ease-in-out infinite;
       }
     }
   }
 
-  // dot
-  @include m.e(dot) {
+  // ============================================================
+  // classic — 雷达波纹扩散
+  // 两个同心圆环交替向外扩散并淡出
+  // ============================================================
+  @include m.e(classic) {
     @include m.bem($root-name, loader) {
-      $c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 93%, #0000);
-      width: 40px;
-      height: 20px;
-      background:
-        #{$c} 0 0,
-        #{$c} 50% 0;
-      background-size: 8px 8px;
+      width: 44px;
+      aspect-ratio: 1;
       position: relative;
-      clip-path: inset(-200% -100% 0 0);
-      animation: dot-0 1.5s linear infinite;
 
-      &:before {
-        content: '';
-        position: absolute;
-        width: 8px;
-        height: 12px;
-        background: fn.use-var(text-color, main);
-        left: -16px;
-        top: 0;
-        animation:
-          dot-1 1.5s linear infinite,
-          dot-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
-      }
-      &:after {
+      &::before,
+      &::after {
         content: '';
         position: absolute;
-        inset: 0 0 auto auto;
-        width: 8px;
-        height: 8px;
+        inset: 0;
         border-radius: 50%;
-        background: fn.use-var(text-color, main);
-        animation: dot-3 1.5s linear infinite;
+        border: 3px solid currentColor;
+        animation: loading-pulse 1.6s ease-out infinite;
+      }
+
+      &::after {
+        animation-delay: 0.8s;
       }
     }
   }
 
-  // classic
-  @include m.e(classic) {
+  // ============================================================
+  // morph — 形态变换
+  // 方块 ⟷ 圆形 来回变换，配合旋转
+  // ============================================================
+  @include m.e(morph) {
     @include m.bem($root-name, loader) {
-      font-size: fn.use-var(font-size, title, default);
-      line-height: 1.4em;
-      letter-spacing: 6ch;
-      width: 6ch;
-      overflow: hidden;
-      white-space: nowrap;
-      color: #0000;
-      text-shadow:
-        calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-        calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-        calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-        calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-        calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-        calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-      // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-      // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-      // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-      // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-      animation: classic 2s infinite linear;
-
-      &::before {
-        content: '加载中...';
-      }
+      width: 34px;
+      aspect-ratio: 1;
+      background: currentColor;
+      animation: loading-morph 2.4s ease-in-out infinite;
     }
   }
 }
 
-// 线条
-@keyframes line-1 {
-  0% {
-    background-size:
-      0 4px,
-      4px 0,
-      0 4px,
-      4px 0;
-  }
-  12.5% {
-    background-size:
-      100% 4px,
-      4px 0,
-      0 4px,
-      4px 0;
-  }
-  25% {
-    background-size:
-      100% 4px,
-      4px 100%,
-      0 4px,
-      4px 0;
-  }
-  37.5% {
-    background-size:
-      100% 4px,
-      4px 100%,
-      100% 4px,
-      4px 0;
-  }
-  45%,
-  55% {
-    background-size:
-      100% 4px,
-      4px 100%,
-      100% 4px,
-      4px 100%;
-  }
-  62.5% {
-    background-size:
-      0 4px,
-      4px 100%,
-      100% 4px,
-      4px 100%;
-  }
-  75% {
-    background-size:
-      0 4px,
-      4px 0,
-      100% 4px,
-      4px 100%;
-  }
-  87.5% {
-    background-size:
-      0 4px,
-      4px 0,
-      0 4px,
-      4px 100%;
-  }
-  100% {
-    background-size:
-      0 4px,
-      4px 0,
-      0 4px,
-      4px 0;
+// ================================================================
+// 关键帧
+// ================================================================
+
+@keyframes loading-spin {
+  to {
+    transform: rotate(1turn);
   }
 }
 
-@keyframes line-2 {
+@keyframes loading-dot {
   0%,
-  49.9% {
-    background-position:
-      0 0,
-      100% 0,
-      100% 100%,
-      0 100%;
-  }
-  50%,
+  80%,
   100% {
-    background-position:
-      100% 0,
-      100% 100%,
-      0 100%,
-      0 0;
+    transform: scale(0.4);
+    opacity: 0.25;
   }
-}
-
-// 旋转
-@keyframes spinner {
-  100% {
-    transform: rotate(0.5turn);
+  40% {
+    transform: scale(1);
+    opacity: 1;
   }
 }
 
-// classic
-@keyframes classic {
-  9.09% {
-    text-shadow:
-      calc(0 * 6ch) -10px #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-  }
-  18.18% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) -10px #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-  }
-  27.27% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) -10px #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-  }
-  36.36% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) -10px #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-  }
-  45.45% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) -10px #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-  }
-  54.54% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) -10px #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-  }
-  63.63% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) -10px #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-  }
-  72.72% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) -10px #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
-  }
-  81.81% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) -10px #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
+@keyframes loading-shimmer {
+  0% {
+    transform: translateX(-100%);
   }
-  90.90% {
-    text-shadow:
-      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * 6ch) -10px #{fn.use-var(text-color, main)};
+  100% {
+    transform: translateX(100%);
   }
 }
 
-@keyframes dot-0 {
-  0%,
-  30% {
-    background-position:
-      0 0,
-      50% 0;
-  }
-  33% {
-    background-position:
-      0 100%,
-      50% 0;
-  }
-  41%,
-  63% {
-    background-position:
-      0 0,
-      50% 0;
-  }
-  66% {
-    background-position:
-      0 0,
-      50% 100%;
+@keyframes loading-pulse {
+  0% {
+    transform: scale(0.2);
+    opacity: 1;
   }
-  74%,
   100% {
-    background-position:
-      0 0,
-      50% 0;
+    transform: scale(1.35);
+    opacity: 0;
   }
 }
-@keyframes dot-1 {
-  90% {
-    transform: translateY(0);
-  }
-  95% {
-    transform: translateY(15px);
-  }
+
+@keyframes loading-morph {
+  0%,
   100% {
-    transform: translateY(15px);
-    left: calc(100% - 8px);
+    border-radius: 50%;
+    transform: rotate(0deg) scale(1);
   }
-}
-@keyframes dot-2 {
-  100% {
-    top: -0.1px;
+  25% {
+    border-radius: 8px;
+    transform: rotate(45deg) scale(0.7);
   }
-}
-@keyframes dot-3 {
-  0%,
-  80%,
-  100% {
-    transform: translate(0);
+  50% {
+    border-radius: 2px;
+    transform: rotate(90deg) scale(1);
   }
-  90% {
-    transform: translate(26px);
+  75% {
+    border-radius: 8px;
+    transform: rotate(135deg) scale(0.7);
   }
 }

package/src/components/table/style.scss

@@ -124,12 +124,10 @@ $root-name: table;
     z-index: 1;
     user-select: none;
 
-    &:hover {
-      @include m.bem($root-name, cell) {
-        box-shadow:
-          -1px 0px var(--u-table-border-color) inset,
-          0px -1px var(--u-table-border-color) inset;
-      }
+    @include m.bem($root-name, cell) {
+      background-color: var(--u-table-header-bg);
+      font-weight: 500;
+      color: var(--u-table-header-color);
     }
 
     @include m.is(multistage) {
@@ -142,14 +140,6 @@ $root-name: table;
     }
   }
 
-  @include m.e(head) {
-    @include m.bem($root-name, cell) {
-      background-color: var(--u-table-header-bg);
-      font-weight: normal;
-      color: var(--u-table-header-color);
-    }
-  }
-
   @include m.e(resize-handle) {
     position: absolute;
     width: 4px;

package/src/types/dialog.ts

@@ -1,5 +1,8 @@
 import type { ComponentSize, DeconstructValue } from '@veltra/utils'
 
+/** 对话框过渡动画名称 */
+export type DialogTransition = 'fade-scale'
+
 /** 对话框组件属性 */
 export interface DialogProps {
   /** 显示或隐藏 */
@@ -14,6 +17,8 @@ export interface DialogProps {
   modal?: boolean
   /** 全屏 */
   fullscreen?: boolean
+  /** 弹框过渡动画，默认为 spring */
+  transition?: DialogTransition
 }
 
 /** 对话框组件定义的事件 */

package/src/types/loading.ts

@@ -1,6 +1,6 @@
 import type { DeconstructValue } from '@veltra/utils'
 
-export type LoadingType = 'classic' | 'line' | 'dot' | 'spinner'
+export type LoadingType = 'classic' | 'line' | 'dot' | 'spinner' | 'morph'
 
 /** loading组件属性 */
 export interface LoadingProps {