@veltra/desktop 1.0.7 → 1.0.9

package/src/components/cascade/use-check.ts

@@ -1,5 +1,4 @@
 import { dfs, type Forest } from '@cat-kit/core'
-import type { Updater } from '@veltra/compositions'
 import {
   computed,
   shallowRef,
@@ -19,7 +18,7 @@ interface CheckOptions {
   disabled: Ref<boolean>
   readonly: Ref<boolean>
   forest: Ref<Forest<Record<string, unknown>, any>>
-  updater: Updater
+  isUserActive: () => boolean
   getPanelItemList: (data?: CascadeNode[]) => void
 }
 
@@ -34,7 +33,8 @@ interface UseCheckReturned {
 }
 
 export function useCheck(options: CheckOptions): UseCheckReturned {
-  const { props, emit, dataMap, disabled, readonly, forest, updater, getPanelItemList } = options
+  const { props, emit, dataMap, disabled, readonly, forest, isUserActive, getPanelItemList } =
+    options
 
   const hovered = shallowRef(false)
 
@@ -119,7 +119,8 @@ export function useCheck(options: CheckOptions): UseCheckReturned {
   watch(
     [() => props.multiple, () => props.modelValue, forest],
     ([multiple]) => {
-      multiple && updater.update(() => initMultipleCheck())
+      if (!multiple || isUserActive()) return
+      initMultipleCheck()
     },
     { immediate: false }
   )

package/src/components/cascade/use-select.ts

@@ -1,5 +1,4 @@
 import { Forest } from '@cat-kit/core'
-import type { Updater } from '@veltra/compositions'
 import { createIncrease } from '@veltra/utils'
 import {
   computed,
@@ -23,7 +22,7 @@ import type {
 interface SelectOptions {
   props: CascadeProps
   emit: CascadeEmits
-  updater: Updater
+  isUserActive: () => boolean
   forest: Ref<Forest<Record<string, unknown>, any>>
   dataMap: Ref<Map<string, CascadeNode>>
   dropdownRef: Ref<DropdownExposed | undefined>
@@ -42,7 +41,7 @@ interface UseSelectReturned {
 }
 
 export function useSelect(options: SelectOptions): UseSelectReturned {
-  const { props, emit, dataMap, updater, dropdownRef, forest } = options
+  const { props, emit, dataMap, isUserActive, dropdownRef, forest } = options
 
   /** 选中的节点key */
   const selectedNodeKeys = shallowRef<string[]>([])
@@ -152,8 +151,8 @@ export function useSelect(options: SelectOptions): UseSelectReturned {
   watch(
     [() => props.multiple, () => props.modelValue, forest],
     ([multiple]) => {
-      if (multiple) return
-      updater.update(() => initSingleSelect())
+      if (multiple || isUserActive()) return
+      initSingleSelect()
     },
     { immediate: true }
   )

package/src/components/checkbox/style.scss

@@ -4,10 +4,6 @@
 
 $root-name: checkbox;
 @include m.b($root-name) {
-  @include m.dark() {
-    --u-checkbox-border: #595959;
-  }
-
   user-select: none;
   vertical-align: middle;
   cursor: pointer;

package/src/components/date-picker/date-picker.vue

@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import { date, type Dater } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
@@ -89,14 +89,13 @@ const formatStr = computed(() => {
 
 const currentDate = shallowRef<Dater>()
 
-const { update, updateAndLock } = useUpdateLock()
+const { userAction, isUserActive } = useUserAction()
 
 watch(
   () => props.modelValue,
   (modelValue) => {
-    update(() => {
-      currentDate.value = modelValue ? date(modelValue) : undefined
-    })
+    if (isUserActive()) return
+    currentDate.value = modelValue ? date(modelValue) : undefined
   },
   { immediate: true }
 )
@@ -105,11 +104,13 @@ const displayedValue = computed(() => {
   return currentDate.value?.format(formatStr.value) ?? ''
 })
 
+const commitSelectedDate = userAction((date: Dater) => {
+  currentDate.value = date
+  emit('update:modelValue', date.format(formatStr.value))
+})
+
 async function handleSelectDate(date: Dater) {
-  await updateAndLock(() => {
-    currentDate.value = date
-    emit('update:modelValue', date.format(formatStr.value))
-  })
+  await commitSelectedDate(date)
   dropdownRef.value?.close()
 }
 

package/src/components/date-range-picker/date-range-picker.vue

@@ -61,8 +61,7 @@
 
 <script lang="ts" setup>
 import { date, type Dater } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
-import { useUpdateLock } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar, Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
@@ -102,7 +101,7 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
 
 const dropdownRef = shallowRef<DropdownExposed>()
 
-const { update, updateAndLock } = useUpdateLock()
+const { userAction, isUserActive } = useUserAction()
 
 const currentRangeDate = shallowRef<[Dater, Dater]>()
 
@@ -126,20 +125,21 @@ const formatStr = computed(() => {
 watch(
   () => props.modelValue,
   (val) => {
-    update(() => {
-      if (val?.length === 2) {
-        currentRangeDate.value = [date(val[0]), date(val[1])]
-      }
-    })
+    if (isUserActive()) return
+    if (val?.length === 2) {
+      currentRangeDate.value = [date(val[0]), date(val[1])]
+    }
   },
   { immediate: true }
 )
 
+const commitSelectedRange = userAction((rangeDate: [Dater, Dater] | undefined) => {
+  currentRangeDate.value = rangeDate
+  emit('update:modelValue', rangeDate?.map((d) => d.format(formatStr.value)) as [string, string])
+})
+
 async function handleSelect(rangeDate: [Dater, Dater] | undefined) {
-  await updateAndLock(() => {
-    currentRangeDate.value = rangeDate
-    emit('update:modelValue', rangeDate?.map((d) => d.format(formatStr.value)) as [string, string])
-  })
+  await commitSelectedRange(rangeDate)
   dropdownRef.value?.close()
 }
 

package/src/components/drawer/style.scss

@@ -39,12 +39,6 @@ $direction-map: (
     justify-content: center;
   }
 
-  @each $direction in $directions {
-    @include m.is($direction) {
-      --transform: #{map.get($direction-map, $direction)};
-    }
-  }
-
   @include m.is(right, left) {
     top: $edge-offset;
     bottom: $edge-offset;
@@ -137,9 +131,22 @@ $direction-map: (
   transition: transform 0.3s ease-in-out;
 }
 
-@each $direction in $directions {
-  .drawer-slide-#{$direction}-enter-from,
-  .drawer-slide-#{$direction}-leave-to {
-    transform: var(--transform);
-  }
+.drawer-slide-right-enter-from,
+.drawer-slide-right-leave-to {
+  transform: #{map.get($direction-map, right)};
+}
+
+.drawer-slide-left-enter-from,
+.drawer-slide-left-leave-to {
+  transform: #{map.get($direction-map, left)};
+}
+
+.drawer-slide-top-enter-from,
+.drawer-slide-top-leave-to {
+  transform: #{map.get($direction-map, top)};
+}
+
+.drawer-slide-bottom-enter-from,
+.drawer-slide-bottom-leave-to {
+  transform: #{map.get($direction-map, bottom)};
 }

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

@@ -1,22 +1,33 @@
 /**
- * 校验文件是否匹配 accept 字符串 (仅支持 MIME 类型)
- * @param file 文件对象
- * @param accept 接受的文件类型，例如：image/*,application/pdf
+ * 校验文件是否匹配 accept 字符串（支持 MIME 类型与通配符）。
+ *
+ * 支持的形式：
+ * - `*` / `*\/*`：接受所有文件
+ * - `image/*`：MIME 类型组匹配
+ * - `application/pdf`：精确 MIME 类型
+ * - `.pdf` / `.docx`：扩展名匹配（不区分大小写）
+ *
+ * 多个值以逗号分隔，命中任一即视为匹配。
  */
 export function matchAccept(file: File, accept?: string): boolean {
   if (!accept) return true
 
   const fileType = file.type.toLowerCase()
-  const acceptList = accept.split(',').map((item) => item.trim().toLowerCase())
+  const fileName = file.name.toLowerCase()
+  const acceptList = accept
+    .split(',')
+    .map((item) => item.trim().toLowerCase())
+    .filter(Boolean)
+
+  if (!acceptList.length) return true
 
   return acceptList.some((item) => {
+    if (item === '*' || item === '*/*') return true
+    if (item.startsWith('.')) return fileName.endsWith(item)
     if (item.endsWith('/*')) {
-      // MIME 类型组匹配 (例如：image/*)
-      const group = item.replace('/*', '')
-      return fileType.startsWith(group)
-    } else {
-      // MIME 类型精确匹配
-      return fileType === item
+      const group = item.slice(0, -2)
+      return fileType.startsWith(`${group}/`)
     }
+    return fileType === item
   })
 }

package/src/components/file-viewer/file-viewer.vue

@@ -0,0 +1,311 @@
+<template>
+  <Teleport to="body" :disabled="!isModal">
+    <transition :name="isModal ? 'u-file-viewer-modal' : ''">
+      <div
+        v-if="!isModal || openModel"
+        :class="[cls.b, bem.is('modal', isModal)]"
+        :tabindex="isModal ? -1 : undefined"
+        ref="rootRef"
+        @mousedown.self="handleBackdropMousedown"
+      >
+        <div v-if="isModal" :class="cls.e('backdrop')" @mousedown.self="handleBackdropMousedown" />
+        <div :class="cls.e('inner')">
+          <aside v-if="showSidebar" :class="cls.e('sidebar')" :style="{ width: sidebarWidthCss }">
+            <header :class="cls.e('sidebar-head')">
+              <span :class="cls.e('sidebar-title')">文件</span>
+              <span :class="cls.e('sidebar-count')">{{ normalizedFiles.length }}</span>
+            </header>
+            <u-scroll tag="ul" :class="cls.e('list')">
+              <li
+                v-for="f in normalizedFiles"
+                :key="f.id"
+                :class="[cls.e('item'), bem.is('active', f.id === activeId)]"
+                @click="activate(f.id)"
+              >
+                <span :class="[cls.e('badge'), cls.em('badge', f.kind)]">
+                  {{ label(f.kind) }}
+                </span>
+                <span :class="cls.e('item-meta')">
+                  <span :class="cls.e('item-name')" :title="f.name">{{ f.name }}</span>
+                  <span :class="cls.e('item-size')">{{ formatBytes(f.size) }}</span>
+                </span>
+              </li>
+              <li v-if="!normalizedFiles.length" :class="cls.e('list-empty')">
+                <u-empty text="暂无文件" :size="32" />
+              </li>
+            </u-scroll>
+          </aside>
+
+          <section :class="cls.e('stage')">
+            <header :class="cls.e('stage-head')">
+              <div :class="cls.e('stage-title')">
+                <span v-if="activeFile" :class="[cls.e('badge'), cls.em('badge', activeFile.kind)]">
+                  {{ label(activeFile.kind) }}
+                </span>
+                <span :class="cls.e('stage-name')">
+                  {{ activeFile?.name ?? '—' }}
+                </span>
+                <span v-if="activeFile?.size" :class="cls.e('stage-sub')">
+                  {{ formatBytes(activeFile.size) }}
+                </span>
+              </div>
+              <div :class="cls.e('stage-actions')">
+                <button :class="cls.e('action')" :disabled="!hasPrev" type="button" @click="prev">
+                  上一个
+                </button>
+                <button :class="cls.e('action')" :disabled="!hasNext" type="button" @click="next">
+                  下一个
+                </button>
+                <button
+                  v-if="downloadable && activeFile"
+                  :class="[cls.e('action'), cls.em('action', 'primary')]"
+                  type="button"
+                  @click="download"
+                >
+                  下载
+                </button>
+                <button
+                  v-if="isModal"
+                  :class="[cls.e('action'), cls.em('action', 'icon')]"
+                  type="button"
+                  aria-label="关闭预览"
+                  title="关闭"
+                  @click="handleClose"
+                >
+                  <u-icon :size="16">
+                    <Close />
+                  </u-icon>
+                </button>
+              </div>
+            </header>
+            <div :class="cls.e('body')">
+              <transition name="u-file-viewer-fade" mode="out-in">
+                <component
+                  :is="PreviewerMap[activeFile.kind]"
+                  v-if="activeFile"
+                  :key="activeFile.id"
+                  :file="activeFile"
+                  :max-rows="sheetMaxRows"
+                  @error="handleChildError"
+                />
+                <div v-else :class="cls.e('empty')">
+                  <u-empty text="暂无可预览文件" />
+                </div>
+              </transition>
+            </div>
+          </section>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { Close } from '@veltra/icons/normal'
+import { bem, withUnit } from '@veltra/utils'
+import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, shallowRef, watch } from 'vue'
+
+import type {
+  _FileViewerExposed,
+  FileViewerEmits,
+  FileViewerItem,
+  FileViewerKind,
+  FileViewerProps
+} from '../../types/file-viewer'
+import { UEmpty } from '../empty'
+import { UIcon } from '../icon'
+import { UScroll } from '../scroll'
+import { FILE_VIEWER_KIND_LABEL, downloadFile, formatBytes, inferKind } from './helper'
+
+defineOptions({
+  name: 'FileViewer',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<FileViewerProps>(), {
+  modelValue: undefined,
+  sidebarWidth: '280px',
+  sheetMaxRows: 50_000,
+  downloadable: true,
+  open: undefined,
+  closeOnClickBackdrop: true,
+  closeOnEsc: true
+})
+
+const emit = defineEmits<FileViewerEmits>()
+
+const cls = bem('file-viewer')
+
+const activeId = defineModel<string | undefined>('modelValue', { default: undefined })
+const openModel = defineModel<boolean | undefined>('open', { default: undefined })
+
+const rootRef = shallowRef<HTMLDivElement>()
+
+const PreviewerMap: Record<FileViewerKind, ReturnType<typeof defineAsyncComponent>> = {
+  image: defineAsyncComponent(() => import('./previewers/image-previewer.vue')),
+  video: defineAsyncComponent(() => import('./previewers/video-previewer.vue')),
+  pdf: defineAsyncComponent(() => import('./previewers/pdf-previewer.vue')),
+  sheet: defineAsyncComponent(() => import('./previewers/sheet-previewer.vue')),
+  docx: defineAsyncComponent(() => import('./previewers/docx-previewer.vue')),
+  text: defineAsyncComponent(() => import('./previewers/text-previewer.vue'))
+}
+
+interface NormalizedFile extends FileViewerItem {
+  id: string
+  kind: FileViewerKind
+}
+
+const normalizedFiles = computed<NormalizedFile[]>(() =>
+  props.files.map((f, i) => ({
+    ...f,
+    id: f.id ?? `file-${i}`,
+    kind: inferKind(f.name, f.kind)
+  }))
+)
+
+const activeFile = computed<NormalizedFile | undefined>(() =>
+  normalizedFiles.value.find((f) => f.id === activeId.value)
+)
+
+const activeIndex = computed(() => normalizedFiles.value.findIndex((f) => f.id === activeId.value))
+
+const hasPrev = computed(() => activeIndex.value > 0)
+const hasNext = computed(
+  () => activeIndex.value >= 0 && activeIndex.value < normalizedFiles.value.length - 1
+)
+
+const showSidebar = computed(() => props.sidebarWidth !== false && props.sidebarWidth !== 0)
+
+const sidebarWidthCss = computed(() => {
+  const w = props.sidebarWidth
+  if (w === false || w === 0) return undefined
+  return withUnit(w ?? '280px', 'px')
+})
+
+/** 是否启用模态模式：只要父组件显式传入 open（含 v-model:open），即进入模态 */
+const isModal = computed(() => openModel.value !== undefined)
+
+function label(kind: FileViewerKind): string {
+  return FILE_VIEWER_KIND_LABEL[kind]
+}
+
+function activate(id: string) {
+  if (activeId.value === id) return
+  activeId.value = id
+  const f = normalizedFiles.value.find((x) => x.id === id)
+  if (f) emit('change', f)
+}
+
+function prev() {
+  const i = activeIndex.value
+  if (i <= 0) return
+  const target = normalizedFiles.value[i - 1]
+  if (target) activate(target.id)
+}
+
+function next() {
+  const i = activeIndex.value
+  if (i < 0 || i >= normalizedFiles.value.length - 1) return
+  const target = normalizedFiles.value[i + 1]
+  if (target) activate(target.id)
+}
+
+async function download() {
+  if (!activeFile.value) return
+  try {
+    await downloadFile(activeFile.value)
+  } catch (err) {
+    emit('error', { file: activeFile.value, error: err })
+  }
+}
+
+function handleChildError(err: unknown) {
+  if (!activeFile.value) return
+  emit('error', { file: activeFile.value, error: err })
+}
+
+function handleClose() {
+  if (!isModal.value) return
+  openModel.value = false
+}
+
+function handleWindowKeydown(e: KeyboardEvent) {
+  if (e.key !== 'Escape') return
+  if (!isModal.value || !openModel.value) return
+  if (props.closeOnEsc === false) return
+  e.stopPropagation()
+  handleClose()
+}
+
+function handleBackdropMousedown() {
+  if (!isModal.value) return
+  if (props.closeOnClickBackdrop === false) return
+  handleClose()
+}
+
+watch(
+  normalizedFiles,
+  (files) => {
+    if (!files.length) {
+      activeId.value = undefined
+      return
+    }
+    if (!activeId.value || !files.some((f) => f.id === activeId.value)) {
+      activeId.value = files[0]!.id
+    }
+  },
+  { immediate: true }
+)
+
+// 模态打开时：锁定 body 滚动 + 让容器获得焦点以便接收 ESC
+let previousBodyOverflow = ''
+let isBodyLocked = false
+
+function lockBody() {
+  if (isBodyLocked || typeof document === 'undefined') return
+  previousBodyOverflow = document.body.style.overflow
+  document.body.style.overflow = 'hidden'
+  isBodyLocked = true
+}
+
+function unlockBody() {
+  if (!isBodyLocked || typeof document === 'undefined') return
+  document.body.style.overflow = previousBodyOverflow
+  isBodyLocked = false
+}
+
+watch(
+  [isModal, openModel],
+  ([modal, open]) => {
+    if (modal && open) {
+      lockBody()
+      nextTick(() => {
+        rootRef.value?.focus()
+      })
+      if (typeof window !== 'undefined') {
+        window.addEventListener('keydown', handleWindowKeydown, true)
+      }
+    } else {
+      unlockBody()
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('keydown', handleWindowKeydown, true)
+      }
+    }
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  unlockBody()
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('keydown', handleWindowKeydown, true)
+  }
+})
+
+defineExpose<_FileViewerExposed>({
+  activeId,
+  activate,
+  next,
+  prev
+})
+</script>