@veltra/desktop 1.2.32 → 1.2.34

package/src/components/dual-nav/dual-nav-app.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-tip v-model:visible="tipVisible" direction="right" hide-arrow :disabled="tipSuppressed">
+  <u-tip v-model:visible="tipVisible" direction="right" hide-arrow :disabled="tipDisabled">
     <button
       type="button"
       v-ripple="!app.disabled"
@@ -15,6 +15,7 @@
     >
       <UNavIcon v-if="app.icon" :icon="app.icon" :class="cls.e('app-icon')" />
       <span v-else :class="cls.e('app-fallback')">{{ app.title[0] }}</span>
+      <span v-if="labeled" :class="cls.e('app-label')">{{ displayTitle }}</span>
     </button>
 
     <template #content>
@@ -31,7 +32,7 @@
 <script setup lang="ts">
 import { vRipple } from '@veltra/directives'
 import { bem } from '@veltra/utils'
-import { shallowRef } from 'vue'
+import { computed, shallowRef } from 'vue'
 
 import type { DualNavRootItem } from '../../types'
 import UNavIcon from '../nav/nav-icon.vue'
@@ -41,7 +42,16 @@ defineOptions({ name: 'UDualNavApp' })
 
 const cls = bem('dual-nav')
 
-defineProps<{ app: DualNavRootItem; active: boolean; selected: boolean }>()
+/** 左轨菜单名称最多展示字数 */
+const LABEL_MAX_LENGTH = 4
+
+const props = defineProps<{
+  app: DualNavRootItem
+  active: boolean
+  selected: boolean
+  /** 是否在图标下方显示菜单名称 */
+  labeled?: boolean
+}>()
 
 const emit = defineEmits<{ click: [] }>()
 
@@ -49,6 +59,15 @@ const tipVisible = shallowRef(false)
 /** 点击后暂时禁用 hover 弹出，移出触发区后恢复 */
 const tipSuppressed = shallowRef(false)
 
+const displayTitle = computed(() => props.app.title.slice(0, LABEL_MAX_LENGTH))
+
+/** labeled 且标题未截断、无描述时，tooltip 无额外信息 */
+const tipUnnecessary = computed(() => {
+  return !!props.labeled && props.app.title.length <= LABEL_MAX_LENGTH && !props.app.description
+})
+
+const tipDisabled = computed(() => tipSuppressed.value || tipUnnecessary.value)
+
 function handleClick() {
   tipSuppressed.value = true
   tipVisible.value = false

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="cls.b">
+  <div :class="[cls.b, railVariant === 'labeled' && cls.m('labeled')]">
     <div :class="cls.e('rail')">
       <DualNavApp
         v-for="app in menus"
@@ -7,6 +7,7 @@
         :app="app"
         :active="isAppActive(app)"
         :selected="isAppSelected(app)"
+        :labeled="railVariant === 'labeled'"
         @click="handleAppClick(app)"
       />
     </div>
@@ -72,7 +73,7 @@ import { findFirstLeaf, findRootApp } from './helper'
 
 defineOptions({ name: 'UDualNav' })
 
-const props = defineProps<DualNavProps>()
+const props = withDefaults(defineProps<DualNavProps>(), { railVariant: 'icon' })
 const emit = defineEmits<DualNavEmits>()
 
 const cls = bem('dual-nav')

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

@@ -2,7 +2,9 @@
 @use 'pkg:@veltra/styles/functions' as fn;
 @use 'pkg:@veltra/styles/vars';
 
-@include m.b(dual-nav) {
+$root-name: dual-nav;
+
+@include m.b($root-name) {
   display: flex;
   height: 100%;
   min-height: 0;
@@ -21,6 +23,23 @@
     background-color: fn.use-var(bg-color, middle);
   }
 
+  @include m.m(labeled) {
+    @include m.bem($root-name, rail) {
+      width: var(--u-nav-rail-labeled-width);
+      padding: 8px 4px;
+      gap: 2px;
+    }
+
+    @include m.bem($root-name, app) {
+      aspect-ratio: auto;
+      max-width: none;
+      flex-direction: column;
+      gap: 2px;
+      padding: 6px 2px;
+      min-height: 0;
+    }
+  }
+
   @include m.e(divider) {
     flex-shrink: 0;
     width: 1px;
@@ -164,6 +183,16 @@
     line-height: 1;
   }
 
+  @include m.e(app-label) {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: fn.use-var(font-size-assist, default);
+    line-height: 1.2;
+    text-align: center;
+  }
+
   @include m.e(app-tip) {
     display: flex;
     flex-direction: column;

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

@@ -0,0 +1,32 @@
+<template>
+  <li
+    :class="[cls.e('item'), bem.is('active', active), bem.is('disabled', item.disabled ?? false)]"
+    @click="handleClick"
+  >
+    <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 type { NavItem } from '../../types/nav'
+import NavIcon from '../nav/nav-icon.vue'
+
+defineOptions({ name: 'UGroupNavItem' })
+
+const props = defineProps<{ item: NavItem; active: boolean }>()
+
+const emit = defineEmits<{ (e: 'click', item: NavItem): void }>()
+
+const cls = bem('group-nav')
+
+function handleClick() {
+  if (props.item.disabled) return
+  emit('click', props.item)
+}
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <u-scroll tag="ul" :class="cls.b" :container-class="cls.e('container')">
+    <li v-for="(group, index) of groups" :key="group.title || index" :class="cls.e('group')">
+      <div :class="cls.e('group-label')">{{ group.title }}</div>
+      <ul :class="cls.e('group-list')">
+        <GroupNavItem
+          v-for="(child, childIndex) of group.children"
+          :key="child.path || childIndex"
+          :item="child"
+          :active="currentPath === child.path"
+          @click="handleItemClick"
+        />
+      </ul>
+    </li>
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+
+import type { GroupNavEmits, GroupNavProps } from '../../types/group-nav'
+import type { NavItem } from '../../types/nav'
+import { UScroll } from '../scroll'
+import GroupNavItem from './group-nav-item.vue'
+
+defineOptions({ name: 'UGroupNav' })
+
+defineProps<GroupNavProps>()
+const emit = defineEmits<GroupNavEmits>()
+
+const cls = bem('group-nav')
+
+function handleItemClick(item: NavItem) {
+  emit('item-click', item)
+}
+</script>

package/src/components/group-nav/index.ts

@@ -0,0 +1 @@
+export { default as UGroupNav } from './group-nav.vue'

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

@@ -0,0 +1,121 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(group-nav) {
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  color: var(--u-nav-color);
+  background-color: var(--u-nav-bg-color);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
+  background-image: var(--u-nav-bg-image);
+  background-size: cover;
+  background-repeat: no-repeat;
+  border: 1px solid fn.use-var(border, color);
+  border-radius: calc(fn.use-var(radius, large) + 6px);
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.05),
+    0 12px 28px rgba(15, 23, 42, 0.08);
+
+  @include m.e(container) {
+    padding: 8px;
+  }
+
+  @include m.e(group, group-list, item) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  // 组与组之间统一间距（仅 groups，无独立叶子）
+  @include m.e(group) {
+    & + & {
+      margin-top: 16px;
+    }
+  }
+
+  @include m.e(group-label) {
+    padding: 0 8px 6px;
+    font-size: fn.use-var(font-size-assist, default);
+    font-weight: 500;
+    line-height: 1.4;
+    letter-spacing: 0.02em;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(group-list) {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  @include m.e(item) {
+    width: 100%;
+    min-height: var(--u-nav-height-default);
+    margin: 0;
+    padding: 0 8px;
+    gap: 8px;
+    cursor: pointer;
+    color: inherit;
+    border-radius: calc(fn.use-var(radius, default) + 4px);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    @include m.flex;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+      color: var(--u-nav-hover-color);
+    }
+
+    @include m.is(active) {
+      position: relative;
+      background-color: var(--u-nav-active-bg);
+      color: var(--u-nav-active-color);
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 3px;
+        height: 56%;
+        min-height: 10px;
+        border-radius: 9999px;
+        background-color: fn.use-var(color, primary);
+        transform: translateY(-50%);
+        pointer-events: none;
+      }
+    }
+
+    @include m.is(disabled) {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.e(icon) {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    flex-shrink: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: calc(fn.use-var(radius, small) + 2px);
+    color: inherit;
+    object-fit: contain;
+  }
+
+  @include m.e(item-title) {
+    flex: 1;
+    min-width: 0;
+    font-size: fn.use-var(font-size-main, default);
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    @include m.ellipsis;
+  }
+}

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

@@ -0,0 +1,3 @@
+import '../nav/style'
+import '../scroll/style'
+import './style.scss'

package/src/components/index.ts

@@ -112,6 +112,8 @@ export * from './nav'
 
 export * from './dual-nav'
 
+export * from './group-nav'
+
 export * from './grid-input'
 
 export * from './switch'

package/src/style.ts

@@ -38,6 +38,7 @@ import './components/layout/style'
 import './components/list/style'
 import './components/loading/style'
 import './components/dual-nav/style'
+import './components/group-nav/style'
 import './components/nav/style'
 import './components/message-confirm/style'
 import './components/message/style'

package/src/types/dual-nav.ts

@@ -2,6 +2,9 @@ import type { DeconstructValue } from '@veltra/utils'
 
 import type { NavItem } from './nav'
 
+/** 双栏导航左轨变体 */
+export type DualNavRailVariant = 'icon' | 'labeled'
+
 /** 双栏导航根级应用项；`description` 在左轨 tooltip 与右栏顶部展示 */
 export interface DualNavRootItem extends NavItem {
   /** 子导航 */
@@ -14,6 +17,12 @@ export interface DualNavProps {
   currentPath?: string
   /** 根级应用导航列表 */
   menus?: DualNavRootItem[]
+  /**
+   * 左轨变体
+   * - `icon`：仅图标（默认）
+   * - `labeled`：加宽左轨，图标下方显示菜单名称（最多 4 个字）
+   */
+  railVariant?: DualNavRailVariant
 }
 
 /** 双栏导航组件定义的事件 */

package/src/types/group-nav.ts

@@ -0,0 +1,20 @@
+import type { NavItem } from './nav'
+
+/** 分组：标题 + 叶子菜单 */
+export interface GroupNavGroup {
+  title: string
+  children: NavItem[]
+}
+
+/** 分组导航组件属性 */
+export interface GroupNavProps {
+  /** 当前路径 */
+  currentPath?: string
+  /** 分组列表（每组仅渲染一层叶子，更深嵌套舍弃） */
+  groups?: GroupNavGroup[]
+}
+
+/** 分组导航组件定义的事件 */
+export interface GroupNavEmits {
+  (e: 'item-click', item: NavItem): void
+}

package/src/types/index.ts

@@ -49,6 +49,7 @@ export * from './table-editor'
 export * from './table'
 export * from './nav'
 export * from './dual-nav'
+export * from './group-nav'
 export * from './password-input'
 export * from './date-picker'
 export * from './dropdown'