@veltra/desktop 1.4.0 → 1.6.0

package/src/components/button/button.vue

@@ -65,8 +65,8 @@ const classList = computed(() => {
 })
 
 const ripple = computed(() => {
-  if (props.disabled || props.loading) return false
-  if ((props.plain || props.text) && props.type) {
+  if (props.disabled || props.loading || props.text) return false
+  if (props.plain && props.type) {
     return bem.is(`ripple-${props.type}`)
   }
   return true

package/src/components/button/style.scss

@@ -47,17 +47,8 @@ $root-name: button;
   }
 
   @include m.is(plain) {
-    background-color: fn.use-var(bg-color, top);
-    border-color: fn.use-var(color, default, 'dark-1');
+    border-color: transparent;
     box-shadow: none;
-
-    &:hover {
-      border-color: fn.use-var(color, default, 'dark-1');
-    }
-
-    &.is-disabled {
-      color: fn.use-var(text-color, second);
-    }
   }
 
   // 尺寸
@@ -122,12 +113,9 @@ $root-name: button;
 
       @include m.is(text) {
         color: fn.use-var(color, $type);
+        border-color: transparent;
         box-shadow: none;
 
-        &:hover {
-          box-shadow: 0px 0px 0px 1px fn.use-var(color, $type);
-        }
-
         @include m.is-not(disabled, loading) {
           &:hover,
           &:focus {
@@ -140,39 +128,30 @@ $root-name: button;
         }
 
         @include m.is(disabled, loading) {
+          border-color: transparent;
           color: fn.use-var(color, $type, 'light-5');
         }
       }
 
       @include m.is(plain) {
+        border-color: transparent;
         color: fn.component-var(button, #{$type}-plain-color, fn.use-var(color, $type));
         background-color: fn.component-var(
           button,
           #{$type}-plain-bg,
           fn.use-var(color, $type, light-9)
         );
-        border-color: fn.component-var(
-          button,
-          #{$type}-plain-border,
-          fn.use-var(color, $type, light-5)
-        );
-        box-shadow: none;
 
         @include m.is-not(disabled, loading) {
           &:hover {
-            color: fn.use-var(color, $type);
-            border-color: fn.use-var(color, $type);
-            background-color: fn.use-var(color, $type, light-9);
+            background-color: fn.use-var(color, $type, light-7);
           }
         }
 
-        &:active {
-          box-shadow: none;
-        }
-
-        &.is-disabled {
+        @include m.is(disabled, loading) {
+          border-color: transparent;
           color: fn.use-var(color, $type, light-5);
-          border-color: fn.use-var(color, $type, light-8);
+          background-color: fn.use-var(color, $type, light-9);
         }
       }
     }

package/src/components/collapse/__test__/collapse.test.ts

@@ -353,3 +353,62 @@ describe('CollapseItem standalone', () => {
     }
   })
 })
+
+describe('CollapseItem destroyOnCollapse', () => {
+  it('keeps content mounted by default even when collapsed', async () => {
+    const { host, unmount } = mountStandaloneItem({ title: 'Standalone' })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('does not mount content when initially collapsed', async () => {
+    const { host, unmount } = mountStandaloneItem({ title: 'Standalone', destroyOnCollapse: true })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+      // 内容未挂载，但包装容器仍在（承载高度动画与 aria-hidden）
+      expect(host.querySelector('.u-collapse__content')).toBeFalsy()
+      expect(host.querySelector('.u-collapse__content-wrapper')).toBeTruthy()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('unmounts content after collapse and remounts on expand', async () => {
+    const { host, model, unmount } = mountStandaloneItem({
+      title: 'Standalone',
+      modelValue: true,
+      destroyOnCollapse: true
+    })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+
+      const header = host.querySelector('.u-collapse__header') as HTMLElement
+      header.click()
+      await nextTick()
+
+      expect(model.value).toBe(false)
+      // happy-dom 无真实布局，收起动画直接落定，内容随即卸载
+      await nextTick()
+      expect(host.querySelector('.u-collapse__content')).toBeFalsy()
+
+      header.click()
+      await nextTick()
+      await nextTick()
+
+      expect(model.value).toBe(true)
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+    } finally {
+      unmount()
+    }
+  })
+})

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

@@ -10,18 +10,16 @@
       @keydown.enter.prevent="handleClick"
       @keydown.space.prevent="handleClick"
     >
-      <span :class="cls.e('title')">
-        <slot name="title">{{ title }}</slot>
-      </span>
+      <slot name="header" :is-active="isActive">
+        <span :class="cls.e('title')">{{ title }}</span>
 
-      <span :class="cls.e('icon')">
-        <slot name="icon" :is-active="isActive">
+        <span :class="cls.e('icon')">
           <UIcon><component :is="iconComponent" /></UIcon>
-        </slot>
-      </span>
+        </span>
+      </slot>
     </div>
     <div ref="wrapperEl" :class="cls.e('content-wrapper')" :aria-hidden="!isActive">
-      <div :class="cls.e('content')">
+      <div v-if="contentMounted" :class="cls.e('content')">
         <slot />
       </div>
     </div>
@@ -32,7 +30,7 @@
 import { useModel } from '@veltra/compositions'
 import { ArrowDown } from '@veltra/icons/normal'
 import { bem, ExpandTransition } from '@veltra/utils'
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import type { CollapseItemEmits, CollapseItemProps } from '../../types'
 import { UIcon } from '../icon'
@@ -43,6 +41,13 @@ defineOptions({ name: 'UCollapseItem' })
 const props = withDefaults(defineProps<CollapseItemProps>(), { modelValue: false })
 const emit = defineEmits<CollapseItemEmits>()
 
+defineSlots<{
+  /** 自定义整个头部，作用域参数 `isActive` 指示展开状态；缺省渲染 title + 展开图标 */
+  header?: (scope: { isActive: boolean }) => any
+  /** 折叠面板内容 */
+  default?: () => any
+}>()
+
 const context = inject(CollapseDIKey, undefined)
 
 const cls = context?.cls ?? bem('collapse')
@@ -94,6 +99,9 @@ const handleClick = () => {
 
 const wrapperEl = ref<HTMLElement>()
 
+/** 内容是否挂载：destroyOnCollapse 时折叠态卸载内容 DOM，展开前重新挂载 */
+const contentMounted = ref(isActive.value || !props.destroyOnCollapse)
+
 onMounted(() => {
   if (context && props.value !== undefined) {
     context.register(props.value)
@@ -102,9 +110,22 @@ onMounted(() => {
   expandTransition.setExpanded(wrapperEl.value, isActive.value)
 })
 
-watch(isActive, (active) => {
+watch(isActive, async (active) => {
+  if (active) {
+    // 展开前先挂载内容，待 DOM 更新后再测量高度驱动展开动画
+    if (!contentMounted.value) {
+      contentMounted.value = true
+      await nextTick()
+    }
+    if (!wrapperEl.value || !isActive.value) return
+    expandTransition.expand(wrapperEl.value)
+    return
+  }
   if (!wrapperEl.value) return
-  active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value)
+  // 收起动画落定后再卸载内容 DOM；期间被重新展开则不卸载
+  expandTransition.collapse(wrapperEl.value, () => {
+    if (!isActive.value && props.destroyOnCollapse) contentMounted.value = false
+  })
 })
 
 onBeforeUnmount(() => {

package/src/components/contextmenu/__test__/contextmenu.test.ts

@@ -0,0 +1,165 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, defineComponent, h, inject, nextTick } from 'vue'
+
+import type { ContextmenuItem } from '../../../types'
+import UContextmenu from '../contextmenu.vue'
+import { ContextmenuRootDIKey } from '../di'
+
+function cleanupPanels(): void {
+  document.querySelectorAll('.u-contextmenu').forEach((el) => el.remove())
+}
+
+function mountContextmenu(props: {
+  menus: ContextmenuItem[]
+  width?: number
+  mousePosition?: { x: number; y: number }
+}) {
+  cleanupPanels()
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const app = createApp({
+    render() {
+      return h(UContextmenu, {
+        mousePosition: props.mousePosition ?? { x: 10, y: 10 },
+        width: props.width ?? 180,
+        menus: props.menus
+      })
+    }
+  })
+  app.mount(host)
+
+  return {
+    host,
+    unmount() {
+      app.unmount()
+      host.remove()
+      cleanupPanels()
+    }
+  }
+}
+
+function panel(): HTMLElement | null {
+  // 取最后一个（避免 leave 过渡残留抢到 querySelector 首个）
+  const all = document.querySelectorAll<HTMLElement>('.u-contextmenu')
+  return all[all.length - 1] ?? null
+}
+
+describe('UContextmenu', () => {
+  it('divider 渲染为分割线', async () => {
+    const { unmount } = mountContextmenu({
+      menus: [
+        { label: 'A', callback: () => {} },
+        { divider: true },
+        { label: 'B', callback: () => {} }
+      ]
+    })
+    try {
+      await nextTick()
+      const el = panel()
+      expect(el).toBeTruthy()
+      expect(el!.querySelectorAll('.u-contextmenu__divider')).toHaveLength(1)
+      expect(el!.querySelectorAll('.u-contextmenu__item')).toHaveLength(2)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('render 组件挂载替代 label', async () => {
+    const Custom = defineComponent({
+      name: 'CustomMenuContent',
+      setup() {
+        return () => h('span', { class: 'custom-render' }, '自定义内容')
+      }
+    })
+    const { unmount } = mountContextmenu({
+      menus: [{ label: 'fallback', keepOpen: true, render: Custom }]
+    })
+    try {
+      await nextTick()
+      const el = panel()!
+      expect(el.querySelector('.custom-render')?.textContent).toBe('自定义内容')
+      expect(el.textContent).not.toContain('fallback')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('keepOpen 点击不关闭菜单', async () => {
+    const { unmount } = mountContextmenu({
+      menus: [
+        { label: '保持打开', keepOpen: true, callback: () => {} },
+        { label: '普通项', callback: () => {} }
+      ]
+    })
+    try {
+      await nextTick()
+      const items = panel()!.querySelectorAll<HTMLElement>('.u-contextmenu__item')
+      items[0]!.click()
+      await nextTick()
+      expect(panel()).toBeTruthy()
+      expect(panel()!.querySelectorAll('.u-contextmenu__item')).toHaveLength(2)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('普通项点击仍关闭', async () => {
+    const callback = vi.fn()
+    const { unmount } = mountContextmenu({ menus: [{ label: '关闭我', callback }] })
+    try {
+      await nextTick()
+      panel()!.querySelector<HTMLElement>('.u-contextmenu__item')!.click()
+      await nextTick()
+      expect(callback).toHaveBeenCalledOnce()
+      // happy-dom 无真实 CSS transition，leave 可能停在 leave-active；断言已进入关闭流程
+      const el = panel()
+      expect(el === null || /leave/.test(el.className)).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('内嵌组件 inject DI 可主动关闭', async () => {
+    const closerClick = vi.fn()
+    let injected = false
+    const Closer = defineComponent({
+      name: 'CloserMenuContent',
+      setup() {
+        const root = inject(ContextmenuRootDIKey)
+        injected = !!root
+        return () =>
+          h(
+            'button',
+            {
+              class: 'close-via-di',
+              type: 'button',
+              onClick: () => {
+                closerClick()
+                root?.onItemClickEnd()
+              }
+            },
+            '关闭'
+          )
+      }
+    })
+    const { unmount } = mountContextmenu({
+      menus: [{ label: '自定义', keepOpen: true, render: Closer }]
+    })
+    try {
+      await nextTick()
+      const el = panel()
+      expect(el).toBeTruthy()
+      expect(injected).toBe(true)
+      const btn = el!.querySelector<HTMLButtonElement>('.close-via-di')
+      expect(btn, `menu html: ${el!.innerHTML}`).toBeTruthy()
+      btn!.click()
+      await nextTick()
+      expect(closerClick).toHaveBeenCalledOnce()
+      const after = panel()
+      expect(after === null || /leave/.test(after.className)).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+})

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

@@ -1,11 +1,11 @@
 <template>
   <li
     :class="[cls.e('item'), bem.is('disabled', disabled), bem.is('loading', loading)]"
-    v-ripple="!disabled && !loading"
+    v-ripple="!disabled && !loading && !menu.keepOpen"
     @click="handleClickMenu"
   >
     <div :class="cls.e('item-content')">
-      <template v-if="showIconColumn">
+      <template v-if="showIconColumn && !menu.render">
         <u-icon v-if="loading" :class="bem.is('loading')">
           <Loading />
         </u-icon>
@@ -15,7 +15,10 @@
         <i v-else :class="cls.e('icon-place')"></i>
       </template>
 
-      <span :class="cls.e('label')">{{ menu.label }}</span>
+      <div v-if="menu.render" :class="cls.e('custom')" @click.stop>
+        <component :is="menu.render" />
+      </div>
+      <span v-else :class="cls.e('label')">{{ menu.label }}</span>
 
       <i v-if="showArrowColumn" :class="cls.e('arrow-place')"></i>
     </div>
@@ -44,7 +47,7 @@ const loading = shallowRef(false)
 const disabled = computed(() => getMenuDisabled(menu))
 
 function handleClickMenu() {
-  if (disabled.value || loading.value) return
+  if (disabled.value || loading.value || menu.keepOpen) return
   onItemClickStart()
   loading.value = true
 

package/src/components/contextmenu/contextmenu-panel.vue

@@ -1,7 +1,8 @@
 <template>
   <ul v-bind="$attrs">
     <template v-for="(menu, index) of menus" :key="index">
-      <UContextmenuSub v-if="menu.children?.length" :menu="menu" />
+      <li v-if="menu.divider" :class="cls.e('divider')" role="separator" />
+      <UContextmenuSub v-else-if="menu.children?.length" :menu="menu" />
       <UContextmenuItem v-else :menu="menu" />
     </template>
   </ul>
@@ -19,10 +20,12 @@ defineOptions({ name: 'UContextmenuPanel', inheritAttrs: false })
 
 const { menus } = defineProps<{ menus: ContextmenuItem[] }>()
 
-inject(ContextmenuRootDIKey)
+const { cls } = inject(ContextmenuRootDIKey)!
 
-const showIconColumn = computed(() => menus.some((menu) => !!menu.icon))
-const showArrowColumn = computed(() => menus.some((menu) => !!menu.children?.length))
+const showIconColumn = computed(() => menus.some((menu) => !menu.divider && !!menu.icon))
+const showArrowColumn = computed(() =>
+  menus.some((menu) => !menu.divider && !!menu.children?.length)
+)
 
 provide(ContextmenuPanelDIKey, { showIconColumn, showArrowColumn })
 </script>

package/src/components/contextmenu/index.ts

@@ -1,3 +1,4 @@
 export { default as UContextmenu } from './contextmenu.vue'
 
 export { contextmenu } from './api'
+export { ContextmenuRootDIKey, ContextmenuPanelDIKey } from './di'

package/src/components/contextmenu/style.scss

@@ -25,6 +25,8 @@ $arrow-size: 12px;
   $b: &;
 
   position: fixed;
+  // 与子菜单一致：最小宽度兜底，调用方可用 width: max-content 让内容撑开
+  min-width: 120px;
   @include panel-surface;
 
   @include m.e(label) {
@@ -33,6 +35,20 @@ $arrow-size: 12px;
     @include m.ellipsis;
   }
 
+  @include m.e(custom) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @include m.e(divider) {
+    height: 0;
+    margin: 4px 8px;
+    border: 0;
+    border-top: 1px solid fn.use-var(border, color);
+    list-style: none;
+    pointer-events: none;
+  }
+
   @include m.e(item) {
     position: relative;
     cursor: pointer;

package/src/components/dialog/style.scss

@@ -76,10 +76,14 @@ $root-name: dialog;
   }
 
   @include m.e(body) {
-    padding: 8px;
     background-color: fn.use-var(bg-color, top);
     backdrop-filter: fn.use-var(bg-filter);
     flex-grow: 1;
+
+    // padding 加在滚动内容而非 body 本身：u-scroll 的 overflow 会裁切子元素 box-shadow
+    @include m.bem(scroll, content) {
+      padding: 8px;
+    }
   }
 
   @include m.e(footer) {

package/src/components/file-viewer/helper.ts

@@ -104,59 +104,6 @@ export function toBlobUrl(
   return { url, revoke: () => URL.revokeObjectURL(url) }
 }
 
-/**
- * RFC-4180 子集 CSV 解析：支持 "" 转义、\r\n 与 \n 换行、, 分隔。
- * 为性能起见采用状态机而非 split。
- */
-export function parseCsv(text: string): string[][] {
-  const rows: string[][] = []
-  let row: string[] = []
-  let field = ''
-  let inQuotes = false
-  const len = text.length
-
-  for (let i = 0; i < len; i++) {
-    const ch = text[i]
-
-    if (inQuotes) {
-      if (ch === '"') {
-        if (text[i + 1] === '"') {
-          field += '"'
-          i++
-        } else {
-          inQuotes = false
-        }
-      } else {
-        field += ch
-      }
-      continue
-    }
-
-    if (ch === '"') {
-      inQuotes = true
-    } else if (ch === ',') {
-      row.push(field)
-      field = ''
-    } else if (ch === '\n') {
-      row.push(field)
-      rows.push(row)
-      row = []
-      field = ''
-    } else if (ch === '\r') {
-      // swallow CR; LF will commit the row
-    } else {
-      field += ch
-    }
-  }
-
-  // 最后一行
-  if (field.length > 0 || row.length > 0) {
-    row.push(field)
-    rows.push(row)
-  }
-  return rows
-}
-
 export function formatBytes(bytes?: number): string {
   if (bytes === undefined || bytes === null || Number.isNaN(bytes)) return '-'
   if (bytes < 1024) return `${bytes} B`