@veltra/desktop 1.1.35 → 1.2.0

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/rich-text-editor/rich-text-editor.vue

@@ -152,30 +152,33 @@ function initEditor() {
   // Listen for content changes
   cleanupFns.push(
     editorInstance.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        const root = $getRoot()
-        const textContent = root.getTextContent()
-        showPlaceholder.value = textContent.trim().length === 0
-
-        if (isComposing) return
-
-        let value: string
-        if (props.format === 'json') {
-          value = JSON.stringify(editorState.toJSON())
-        } else {
-          value = $generateHtmlFromNodes(editorInstance)
-        }
-
-        // Avoid circular updates: only emit if content really changed
-        if (value !== model.value) {
-          isComposing = true
-          model.value = value
-          // Use microtask to reset after Vue processes the update
-          queueMicrotask(() => {
-            isComposing = false
-          })
-        }
-      })
+      editorState.read(
+        () => {
+          const root = $getRoot()
+          const textContent = root.getTextContent()
+          showPlaceholder.value = textContent.trim().length === 0
+
+          if (isComposing) return
+
+          let value: string
+          if (props.format === 'json') {
+            value = JSON.stringify(editorState.toJSON())
+          } else {
+            value = $generateHtmlFromNodes(editorInstance)
+          }
+
+          // Avoid circular updates: only emit if content really changed
+          if (value !== model.value) {
+            isComposing = true
+            model.value = value
+            // Use microtask to reset after Vue processes the update
+            queueMicrotask(() => {
+              isComposing = false
+            })
+          }
+        },
+        { editor: editorInstance }
+      )
     })
   )
 
@@ -229,7 +232,7 @@ watch(model, (newVal) => {
   const editorInstance = editor.value
 
   // Compare current content to avoid circular updates
-  editorInstance.getEditorState().read(() => {
+  editorInstance.read(() => {
     let currentValue: string
     if (props.format === 'json') {
       currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())

package/src/components/rich-text-editor/toolbar.vue

@@ -84,12 +84,15 @@ let cleanupListener: (() => void) | null = null
 function setupListener(editorInstance: LexicalEditor) {
   cleanupListener?.()
   cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {
-    editorState.read(() => {
-      const selection = $getSelection()
-      if (!$isRangeSelection(selection)) return
+    editorState.read(
+      () => {
+        const selection = $getSelection()
+        if (!$isRangeSelection(selection)) return
 
-      updateToolbarState(selection)
-    })
+        updateToolbarState(selection)
+      },
+      { editor: editorInstance }
+    )
   })
 }
 
@@ -235,24 +238,25 @@ function onHeadingChange(event: Event) {
 }
 
 function toggleLink(editorInstance: LexicalEditor) {
-  editorInstance.getEditorState().read(() => {
+  let shouldRemoveLink = false
+
+  editorInstance.read(() => {
     const selection = $getSelection()
     if (!$isRangeSelection(selection)) return
 
-    const anchorNode = selection.anchor.getNode()
-    const parent = anchorNode.getParent()
-
-    if ($isLinkNode(parent)) {
-      // Remove link
-      editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-    } else {
-      // Insert link with prompt
-      const url = prompt('请输入链接地址:', 'https://')
-      if (url && url !== 'https://') {
-        editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)
-      }
-    }
+    const parent = selection.anchor.getNode().getParent()
+    shouldRemoveLink = $isLinkNode(parent)
   })
+
+  if (shouldRemoveLink) {
+    editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+    return
+  }
+
+  const url = prompt('请输入链接地址:', 'https://')
+  if (url && url !== 'https://') {
+    editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)
+  }
 }
 
 function getTitle(item: ToolbarItem): string {