@veltra/desktop 1.2.4 → 1.2.6

package/src/components/dual-nav/style.scss

@@ -0,0 +1,188 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(dual-nav) {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  background-color: var(--u-nav-bg-color);
+  border: 1px solid fn.use-var(border, color);
+  border-radius: calc(fn.use-var(radius, large) + 6px);
+  overflow: hidden;
+
+  @include m.e(rail) {
+    flex-shrink: 0;
+    width: var(--u-nav-rail-width);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 6px;
+    background-color: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(divider) {
+    flex-shrink: 0;
+    width: 1px;
+    background-color: fn.use-var(border, color);
+  }
+
+  @include m.e(panel) {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include m.e(panel-header) {
+    flex-shrink: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 12px 12px 10px;
+    border-bottom: 1px solid fn.use-var(border, color);
+  }
+
+  @include m.e(panel-header-main) {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  @include m.e(panel-title) {
+    margin: 0;
+    font-size: fn.use-var(font-size, default);
+    font-weight: 600;
+    line-height: 1.4;
+    color: fn.use-var(text-color, title);
+  }
+
+  @include m.e(description) {
+    margin: 0;
+    font-size: fn.use-var(font-size-assist, default);
+    line-height: 1.5;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(toggle-expand) {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: fn.use-var(radius, default);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+      color: var(--u-nav-hover-color);
+    }
+  }
+
+  @include m.e(panel-body) {
+    flex: 1;
+    min-height: 0;
+
+    .u-nav {
+      height: 100%;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+
+  @include m.e(app) {
+    width: 100%;
+    aspect-ratio: 1;
+    max-width: calc(var(--u-nav-rail-width) - 12px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: calc(fn.use-var(radius, default) + 2px);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background-color: var(--u-nav-hover-bg);
+      color: var(--u-nav-hover-color);
+    }
+
+    @include m.is(selected) {
+      background-color: var(--u-nav-hover-bg);
+      color: var(--u-nav-hover-color);
+
+      &:hover:not(:disabled) {
+        background-color: var(--u-nav-hover-bg);
+        color: var(--u-nav-hover-color);
+      }
+    }
+
+    @include m.is(active) {
+      background-color: var(--u-nav-active-bg);
+      color: var(--u-nav-active-color);
+
+      &:hover:not(:disabled) {
+        background-color: var(--u-nav-active-bg);
+        color: var(--u-nav-active-color);
+      }
+    }
+
+    @include m.is(disabled) {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.e(app-icon) {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    object-fit: contain;
+  }
+
+  @include m.e(app-fallback) {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  @include m.e(app-tip) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 200px;
+  }
+
+  @include m.e(app-tip-title) {
+    font-weight: 600;
+    line-height: 1.4;
+    color: fn.use-var(text-color, title);
+  }
+
+  @include m.e(app-tip-description) {
+    margin: 0;
+    font-size: fn.use-var(font-size-assist, default);
+    line-height: 1.5;
+    color: fn.use-var(text-color, second);
+  }
+}

package/src/components/dual-nav/style.ts

@@ -0,0 +1,5 @@
+import '@veltra/directives/ripple/style.js'
+import '../icon/style'
+import '../nav/style'
+import '../tip/style'
+import './style.scss'

package/src/components/index.ts

@@ -108,7 +108,9 @@ export * from './list'
 
 export * from './rich-text-editor'
 
-export * from './menu'
+export * from './nav'
+
+export * from './dual-nav'
 
 export * from './grid-input'
 

package/src/components/loading/loading.vue

@@ -15,7 +15,7 @@ import type { LoadingProps, ComponentSize } from '../../types'
 
 defineOptions({ name: 'Loading' })
 
-const props = withDefaults(defineProps<LoadingProps>(), { type: 'spinner' })
+const props = withDefaults(defineProps<LoadingProps>(), { type: 'dual-ring' })
 
 const { size } = useFallbackProps([props], { size: 'default' as ComponentSize })
 

package/src/components/loading/style.scss

@@ -9,7 +9,7 @@ $root-name: loading;
   width: 100%;
   height: 100%;
   background-color: fn.use-var(bg-color, top, alpha);
-  color: fn.use-var(text-color, main);
+  color: fn.use-var(color, primary);
   @include m.flex($justify: center, $align: center);
 
   @include m.e(container) {
@@ -17,123 +17,118 @@ $root-name: loading;
   }
 
   // ============================================================
-  // spinner — 渐变圆弧旋转
-  // 使用 conic-gradient + mask 实现缺口圆环旋转
+  // dual-ring — 双环反向旋转（经典 loader）
+  // 外环顺时针，内嵌小环逆时针，border + linear 旋转无缝循环
   // ============================================================
-  @include m.e(spinner) {
+  @include m.e(dual-ring) {
     @include m.bem($root-name, loader) {
-      width: 42px;
+      width: 36px;
       aspect-ratio: 1;
       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;
+      border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+      border-top-color: currentColor;
+      position: relative;
+      animation: loading-spin 0.8s linear infinite;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 5px;
+        border-radius: 50%;
+        border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
+        border-bottom-color: currentColor;
+        animation: loading-spin 1.2s linear infinite reverse;
+      }
     }
   }
 
   // ============================================================
-  // dot — 三点波浪弹跳
-  // 元素自身 + 两个伪元素，交错弹跳
+  // dot — 三点呼吸弹跳
+  // 元素自身 + 两个伪元素，交错起伏
   // ============================================================
   @include m.e(dot) {
     @include m.bem($root-name, loader) {
-      width: 10px;
-      height: 10px;
+      width: 9px;
+      height: 9px;
       border-radius: 50%;
       background: currentColor;
       position: relative;
-      animation: loading-dot 1.4s ease-in-out infinite;
+      animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
 
       &::before,
       &::after {
         content: '';
         position: absolute;
         top: 0;
-        width: 10px;
-        height: 10px;
+        width: 9px;
+        height: 9px;
         border-radius: 50%;
         background: currentColor;
       }
 
       &::before {
-        left: -20px;
-        animation: loading-dot 1.4s ease-in-out infinite;
-        animation-delay: 0.2s;
+        left: -16px;
+        animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+        animation-delay: 0.18s;
       }
 
       &::after {
-        right: -20px;
-        animation: loading-dot 1.4s ease-in-out infinite;
-        animation-delay: 0.4s;
+        right: -16px;
+        animation: loading-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+        animation-delay: 0.36s;
       }
     }
   }
 
   // ============================================================
-  // line — 流光扫过
-  // 半透明底轨 + 渐变光条水平扫过
+  // ring — 单环旋转
   // ============================================================
-  @include m.e(line) {
+  @include m.e(ring) {
     @include m.bem($root-name, loader) {
-      width: 160px;
-      height: 3px;
-      border-radius: 1.5px;
-      background: fn.use-var(bg-color, hover);
-      overflow: hidden;
-      position: relative;
-
-      &::after {
-        content: '';
-        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;
-      }
+      width: 36px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+      border-top-color: currentColor;
+      animation: loading-spin 0.9s linear infinite;
     }
   }
 
   // ============================================================
-  // classic — 雷达波纹扩散
-  // 两个同心圆环交替向外扩散并淡出
+  // bars — 三条音频跳动
+  // 三根竖条以容器中心为基准上下对称伸缩
   // ============================================================
-  @include m.e(classic) {
+  @include m.e(bars) {
     @include m.bem($root-name, loader) {
-      width: 44px;
-      aspect-ratio: 1;
+      width: 6px;
+      height: 26px;
+      background: currentColor;
+      border-radius: 3px;
       position: relative;
+      animation: loading-bars 1s ease-in-out infinite;
+      animation-delay: 0.15s;
 
       &::before,
       &::after {
         content: '';
         position: absolute;
-        inset: 0;
-        border-radius: 50%;
-        border: 3px solid currentColor;
-        animation: loading-pulse 1.6s ease-out infinite;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 26px;
+        background: currentColor;
+        border-radius: 3px;
+        animation: loading-bars 1s ease-in-out infinite;
       }
 
-      &::after {
-        animation-delay: 0.8s;
+      &::before {
+        left: -12px;
       }
-    }
-  }
 
-  // ============================================================
-  // morph — 形态变换
-  // 方块 ⟷ 圆形 来回变换，配合旋转
-  // ============================================================
-  @include m.e(morph) {
-    @include m.bem($root-name, loader) {
-      width: 34px;
-      aspect-ratio: 1;
-      background: currentColor;
-      animation: loading-morph 2.4s ease-in-out infinite;
+      &::after {
+        right: -12px;
+        animation-delay: 0.3s;
+      }
     }
   }
 }
@@ -150,53 +145,22 @@ $root-name: loading;
 
 @keyframes loading-dot {
   0%,
-  80%,
   100% {
-    transform: scale(0.4);
-    opacity: 0.25;
+    transform: scale(0.5);
+    opacity: 0.3;
   }
-  40% {
+  50% {
     transform: scale(1);
     opacity: 1;
   }
 }
 
-@keyframes loading-shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes loading-pulse {
-  0% {
-    transform: scale(0.2);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1.35);
-    opacity: 0;
-  }
-}
-
-@keyframes loading-morph {
+@keyframes loading-bars {
   0%,
   100% {
-    border-radius: 50%;
-    transform: rotate(0deg) scale(1);
-  }
-  25% {
-    border-radius: 8px;
-    transform: rotate(45deg) scale(0.7);
+    height: 10px;
   }
   50% {
-    border-radius: 2px;
-    transform: rotate(90deg) scale(1);
-  }
-  75% {
-    border-radius: 8px;
-    transform: rotate(135deg) scale(0.7);
+    height: 26px;
   }
 }

package/src/components/nav/di.ts

@@ -0,0 +1,17 @@
+import { type BEM, ExpandTransition } from '@veltra/utils'
+import type { ComputedRef, InjectionKey } from 'vue'
+
+import type { NavProps, NavEmits } from '../../types'
+import type { ComponentSize } from '../../types'
+
+export interface NavContext {
+  cls: BEM<'nav', 'u-'>
+  collapsedCls: BEM<'collapsed-nav', 'u-'>
+  navProps: NavProps
+  navEmit: NavEmits
+  expandedPath: Set<string>
+  size: ComputedRef<ComponentSize>
+  expandTransition: ExpandTransition
+}
+
+export const NavDIKey: InjectionKey<NavContext> = Symbol('NavDIKey')

package/src/components/nav/helper.ts

@@ -0,0 +1,22 @@
+import type { NavItem } from '../../types'
+import { walkNavWithPath } from './walk-nav-path'
+
+export function getKey(index: number, parentKey: string): string {
+  return `${parentKey}-${index}`
+}
+
+/** 收集导航树中所有含子级的节点 path */
+export function collectNavBranchPaths(menus?: NavItem[]): string[] {
+  const paths: string[] = []
+  if (!menus?.length) return paths
+
+  for (const menu of menus) {
+    walkNavWithPath(menu, (node) => {
+      if (node.children?.length) {
+        paths.push(node.path)
+      }
+    })
+  }
+
+  return paths
+}

package/src/components/nav/index.ts

@@ -0,0 +1,3 @@
+export { default as UNav } from './nav.vue'
+export { default as UNavSub } from './nav-sub.vue'
+export { default as UNavItem } from './nav-item.vue'

package/src/components/{menu/menu-icon.vue → nav/nav-icon.vue}

@@ -11,7 +11,7 @@ import type { DefineComponent } from 'vue'
 
 import { UIcon } from '../icon'
 
-defineOptions({ name: 'MenuIcon' })
+defineOptions({ name: 'NavIcon' })
 
 defineProps<{ icon: string | DefineComponent }>()
 </script>

package/src/components/nav/nav-item-collapsed.vue

@@ -0,0 +1,66 @@
+<template>
+  <!-- 一级导航 -->
+  <u-tip v-if="depth === 0" direction="right" hide-arrow>
+    <li
+      :class="[
+        collapsedCls.e('item'),
+        bem.is('active', active),
+        bem.is('first-level'),
+        bem.is('disabled', item.disabled ?? false)
+      ]"
+      ref="item"
+      @click="handleClickItem"
+    >
+      <UNavIcon v-if="item.icon" :icon="item.icon" :class="collapsedCls.e('icon')" />
+      <span v-else>{{ item.title[0] }}</span>
+    </li>
+
+    <template #content>
+      {{ item.title }}
+    </template>
+  </u-tip>
+
+  <!-- 二级以及二级以下导航 -->
+  <li
+    v-else
+    :class="[
+      collapsedCls.e('item'),
+      bem.is('active', active),
+      bem.is('disabled', item.disabled ?? false)
+    ]"
+    ref="item"
+    @click="_handleClickItem"
+  >
+    <UNavIcon v-if="item.icon" :icon="item.icon" :class="collapsedCls.e('icon')" />
+
+    <!-- 文本 -->
+    <span :class="collapsedCls.e('item-title')">
+      {{ item.title }}
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { bem } from '@veltra/utils'
+import { useTemplateRef } from 'vue'
+
+import type { NavItem } from '../../types'
+import { UTip } from '../tip'
+import UNavIcon from './nav-icon.vue'
+import { useNavItem } from './use-nav-item'
+
+defineOptions({ name: 'NavItemCollapsed' })
+
+const props = defineProps<{ item: NavItem; depth: number }>()
+
+const itemRef = useTemplateRef('item')
+
+const emit = defineEmits(['click'])
+
+const { collapsedCls, active, handleClickItem } = useNavItem({ itemProps: props, itemRef })
+
+function _handleClickItem() {
+  handleClickItem()
+  emit('click')
+}
+</script>

package/src/components/nav/nav-item.vue

@@ -0,0 +1,36 @@
+<template>
+  <li
+    :class="[
+      cls.e('item'),
+      bem.is('first-level', depth === 0),
+      bem.is('active', active),
+      bem.is('disabled', item.disabled ?? false)
+    ]"
+    ref="item"
+    @click="handleClickItem"
+  >
+    <NavIcon v-if="item.icon" :icon="item.icon" :class="cls.e('icon')" />
+
+    <!-- 文本 -->
+    <span :class="cls.e('item-title')">
+      {{ item.title }}
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { bem } from '@veltra/utils'
+import { useTemplateRef } from 'vue'
+
+import type { NavItem } from '../../types'
+import NavIcon from './nav-icon.vue'
+import { useNavItem } from './use-nav-item'
+
+defineOptions({ name: 'NavItem' })
+
+const props = defineProps<{ item: NavItem; depth: number }>()
+
+const itemRef = useTemplateRef('item')
+
+const { cls, active, handleClickItem } = useNavItem({ itemProps: props, itemRef })
+</script>