@veltra/desktop 1.0.7 → 1.0.9

package/src/components/loading/style.scss

@@ -20,6 +20,7 @@ $root-name: loading;
   // line
   @include m.e(line) {
     @include m.bem($root-name, loader) {
+      $c: no-repeat linear-gradient(#{fn.use-var(text-color, main)} 0 0);
       width: 40px;
       aspect-ratio: 1;
       display: grid;
@@ -28,12 +29,11 @@ $root-name: loading;
       &::after {
         content: '';
         grid-area: 1/1;
-        --c: no-repeat linear-gradient(#{fn.use-var(text-color, main)} 0 0);
         background:
-          var(--c) 0 0,
-          var(--c) 100% 0,
-          var(--c) 100% 100%,
-          var(--c) 0 100%;
+          #{$c} 0 0,
+          #{$c} 100% 0,
+          #{$c} 100% 100%,
+          #{$c} 0 100%;
         animation:
           line-1 2s infinite linear,
           line-2 2s infinite linear;
@@ -48,6 +48,7 @@ $root-name: loading;
   // spinner
   @include m.e(spinner) {
     @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;
@@ -57,12 +58,11 @@ $root-name: loading;
         content: '';
         grid-area: 1/1;
 
-        --c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 92%, #0000);
         background:
-          var(--c) 50% 0,
-          var(--c) 50% 100%,
-          var(--c) 100% 50%,
-          var(--c) 0 50%;
+          #{$c} 50% 0,
+          #{$c} 50% 100%,
+          #{$c} 100% 50%,
+          #{$c} 0 50%;
         background-size: 12px 12px;
         animation: spinner 1s infinite;
       }
@@ -78,12 +78,12 @@ $root-name: loading;
   // dot
   @include m.e(dot) {
     @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;
-      --c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 93%, #0000);
       background:
-        var(--c) 0 0,
-        var(--c) 50% 0;
+        #{$c} 0 0,
+        #{$c} 50% 0;
       background-size: 8px 8px;
       position: relative;
       clip-path: inset(-200% -100% 0 0);
@@ -117,25 +117,24 @@ $root-name: loading;
   // classic
   @include m.e(classic) {
     @include m.bem($root-name, loader) {
-      --w: 6ch;
       font-size: fn.use-var(font-size, title, default);
       line-height: 1.4em;
-      letter-spacing: var(--w);
-      width: var(--w);
+      letter-spacing: 6ch;
+      width: 6ch;
       overflow: hidden;
       white-space: nowrap;
       color: #0000;
       text-shadow:
-        calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-      // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+        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 {
@@ -243,133 +242,133 @@ $root-name: loading;
 @keyframes classic {
   9.09% {
     text-shadow:
-      calc(0 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) -10px #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) -10px #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) -10px #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) -10px #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      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)};
   }
   90.90% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) -10px #{fn.use-var(text-color, main)};
+      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)};
   }
 }
 

package/src/components/menu/style.scss

@@ -7,28 +7,6 @@ $root-name: menu;
 $collapsed-menu: collapsed-menu;
 
 @include m.b($root-name, $collapsed-menu) {
-  --u-menu-color: #0f172a;
-  --u-menu-hover-bg: rgba(148, 163, 184, 0.12);
-  --u-menu-hover-color: #{fn.use-var(text-color, title)};
-  --u-menu-active-bg: rgba(59, 130, 246, 0.12);
-  --u-menu-active-color: var(--u-color-primary-dark-1);
-  --u-menu-height-small: 32px;
-  --u-menu-height-default: 36px;
-  --u-menu-height-large: 40px;
-  --u-menu-bg-color: #{fn.use-var(bg-color, top)};
-  --u-menu-bg-blur: none;
-  --u-menu-bg-saturate: none;
-  --u-menu-bg-image: none;
-
-  @include m.dark() {
-    --u-menu-color: #{fn.use-var(text-color, main)};
-    --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
-    --u-menu-hover-color: #{fn.use-var(text-color, title)};
-    --u-menu-active-bg: rgba(96, 165, 250, 0.2);
-    --u-menu-active-color: #{fn.use-var(text-color, white)};
-    --u-menu-bg-color: #{fn.use-var(bg-color, middle)};
-  }
-
   user-select: none;
   color: var(--u-menu-color);
 
@@ -124,15 +102,6 @@ $collapsed-menu: collapsed-menu;
 }
 
 @include m.b($root-name) {
-  --u-menu-bg-color: #{fn.use-var(bg-color, top)};
-  --u-menu-bg-blur: none;
-  --u-menu-bg-saturate: none;
-  --u-menu-bg-image: none;
-
-  @include m.dark() {
-    --u-menu-bg-color: #{fn.use-var(bg-color, middle)};
-  }
-
   margin: 0;
   padding: 0;
   background-color: var(--u-menu-bg-color);

package/src/components/multi-select/multi-select-option.vue

@@ -5,7 +5,7 @@
     @mousedown="handleMousedown"
     @mouseup="handleMouseup"
     @mouseleave="handleMouseleave"
-    :ref="measureElement"
+    :ref="measureRef"
   >
     <u-checkbox
       :class="checkboxClass"
@@ -30,13 +30,26 @@ defineOptions({
   name: 'MultiSelectOption'
 })
 
-const { disabled = false, checked } = defineProps<{
+const props = defineProps<{
   option: Record<string, any>
   disabled?: boolean
   checked: boolean
-  measureElement?: (el: any) => void
+  /**
+   * 虚拟项索引：对应 `options` 数组中的绝对位置。
+   * 非虚拟模式下可省略；虚拟模式下必须传入，否则元素卸载时 Virtualizer 无法及时解绑，
+   * 会因为 ResizeObserver 对脱离 DOM 的元素回调 size=0 而污染尺寸缓存。
+   */
+  index?: number
+  measureElement?: (index: number, el: Element | null) => void
 }>()
 
+const { disabled = false, checked } = props
+
+function measureRef(el: unknown) {
+  if (typeof props.index !== 'number' || !props.measureElement) return
+  props.measureElement(props.index, el as Element | null)
+}
+
 const emit = defineEmits<{
   (e: 'check', checked: boolean): void
 }>()

package/src/components/multi-select/multi-select.vue

@@ -74,13 +74,16 @@
       </div>
 
       <!-- 多选列表 -->
+      <!--
+        虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入；
+        模板不再绑定 totalSize，避免尺寸变化引起重渲染。
+      -->
       <u-scroll
         tag="ul"
         :class="[cls.e('options')]"
         ref="scrollRef"
         v-if="options.length"
         :content-class="[cls.e('options-wrap'), bem.is('virtual', virtualEnabled)]"
-        :content-style="{ height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined }"
       >
         <template v-if="virtualEnabled">
           <u-multi-select-option
@@ -91,7 +94,7 @@
             :style="{ transform: `translateY(${offset}px)` }"
             @check="handleCheck(option, $event)"
             :checked="checkedSet.has(option)"
-            :data-index="index"
+            :index="index"
             :measure-element="measureElement"
           >
             <slot v-bind="{ option, index }">
@@ -137,9 +140,9 @@
 
 <script lang="ts" setup>
 import { o as chainObj } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useVirtual } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
-import { bem, FORM_EMPTY_CONTENT, withUnit } from '@veltra/utils'
+import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, shallowReactive, watch, provide } from 'vue'
 
 import type {
@@ -209,30 +212,35 @@ const allOptions = computed(() => {
   return [...createdOptions.value, ...rawAllOptions.value]
 })
 
-const { totalHeight, virtualList, virtualEnabled, measureElement } = useVirtual({
-  virtualThreshold: 80,
+const virtualEnabled = computed(() => options.value.length > 80)
+
+const { virtualizer, items } = useVirtualizer({
   estimateSize: () => 40,
   count: computed(() => options.value.length),
-  scrollEl: computed(() => scrollRef.value?.containerRef ?? null)
+  scrollEl: () => scrollRef.value?.containerRef ?? null,
+  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null)
 })
 
 const virtualOptions = computed(() => {
   const { valueKey, labelKey } = props
   const _options = options.value
-  return virtualList.value.map((v) => {
+  return items.value.map((v) => {
     const option = _options[v.index]!
     const val = chainObj(option).get(valueKey)
     return {
       option,
       index: v.index,
       val,
-      key: v.key,
+      key: v.index,
       offset: v.start,
       label: chainObj(option).get(labelKey)
     }
   })
 })
 
+const measureElement: (index: number, el: Element | null) => void = (index, el) =>
+  virtualizer.measureElement(index, el)
+
 const filterable = computed(() => {
   return props.filterable || props.creatable || typeof props.options === 'function'
 })

package/src/components/palette/di.ts

@@ -1,4 +1,4 @@
-import type { Updater } from '@veltra/compositions'
+import type { UserAction } from '@veltra/compositions'
 import type { BEM } from '@veltra/utils'
 import type { InjectionKey, Ref, ComputedRef } from 'vue'
 
@@ -14,8 +14,10 @@ export const PaletteDIKey: InjectionKey<{
   RGB: ComputedRef<PaletteRGB>
   /** 透明度 */
   alpha: Ref<number>
-  /** 更新器 */
-  updater: Updater
+  /** 将函数包装为用户动作（阻断 modelValue 回流副作用） */
+  userAction: UserAction
+  /** 当前是否处于用户动作期间 */
+  isUserActive: () => boolean
   /** 更新色调 */
   updateHue: (deg: number) => void
   /** 更新调色盘透明度 */

package/src/components/palette/palette-alpha.vue

@@ -16,7 +16,7 @@ defineOptions({
   name: 'PaletteAlpha'
 })
 
-const { cls, updateAlpha, hueRGB, alpha, updater } = inject(PaletteDIKey)!
+const { cls, updateAlpha, hueRGB, alpha, userAction, isUserActive } = inject(PaletteDIKey)!
 
 const alphaRef = shallowRef<HTMLElement>()
 
@@ -34,12 +34,10 @@ function getAlphaWidth() {
   rangeX[1] = alphaWidth
 }
 
-function updateOffsetX(offsetX: number) {
-  updater.updateAndLock(() => {
-    alphaThumbTransformX.value = offsetX
-    updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)
-  })
-}
+const updateOffsetX = userAction((offsetX: number) => {
+  alphaThumbTransformX.value = offsetX
+  updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)
+})
 
 const alphaDragger = useDrag({
   target: alphaRef,
@@ -73,9 +71,8 @@ onMounted(() => {
 watch(
   alpha,
   (newAlphaValue) => {
-    updater.update(() => {
-      alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0
-    })
+    if (isUserActive()) return
+    alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0
   },
   { flush: 'post' }
 )

package/src/components/palette/palette-hue.vue

@@ -15,7 +15,7 @@ defineOptions({
   name: 'PaletteHue'
 })
 
-const { cls, updateHue, HSV, updater } = inject(PaletteDIKey)!
+const { cls, updateHue, HSV, userAction } = inject(PaletteDIKey)!
 
 const hueRef = shallowRef<HTMLElement>()
 
@@ -33,12 +33,10 @@ function getSliderWidth() {
   rangeX[1] = sliderWidth
 }
 
-function updateOffsetX(offsetX: number) {
-  updater.updateAndLock(() => {
-    transformX.value = offsetX
-    updateHue(Math.round((offsetX / sliderWidth) * 360))
-  })
-}
+const updateOffsetX = userAction((offsetX: number) => {
+  transformX.value = offsetX
+  updateHue(Math.round((offsetX / sliderWidth) * 360))
+})
 
 const sliderDragger = useDrag({
   target: hueRef,

package/src/components/palette/palette-sv.vue

@@ -24,7 +24,7 @@ defineOptions({
   name: 'PaletteSV'
 })
 
-const { cls, hueRGB, HSV, updateSV, updater } = inject(PaletteDIKey)!
+const { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!
 
 const svRef = shallowRef<HTMLDivElement>()
 
@@ -58,21 +58,19 @@ const svThumbStyle = computed(() => {
   }
 })
 
-function updateThumb(offsetX: number, offsetY: number) {
-  updater.updateAndLock(() => {
-    transform.x = offsetX
-    transform.y = offsetY
+const updateThumb = userAction((offsetX: number, offsetY: number) => {
+  transform.x = offsetX
+  transform.y = offsetY
 
-    // 根据画布位置计算饱和度和亮度
-    // 水平方向表示饱和度，从左到右饱和度逐渐增高
-    // 垂直方向表示亮度，上亮下暗
-    const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))
-    const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))
+  // 根据画布位置计算饱和度和亮度
+  // 水平方向表示饱和度，从左到右饱和度逐渐增高
+  // 垂直方向表示亮度，上亮下暗
+  const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))
+  const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))
 
-    // 更新饱和度和亮度
-    updateSV({ s, v })
-  })
-}
+  // 更新饱和度和亮度
+  updateSV({ s, v })
+})
 
 const svDragger = useDrag({
   target: svRef,