@veltra/desktop 1.3.1 → 1.3.3

package/src/components/message-confirm/message-confirm.ts

@@ -1,31 +1,123 @@
-import { zIndex } from '@veltra/utils'
-import { createVNode, render } from 'vue'
+import { bem, zIndex } from '@veltra/utils'
+import { h, render, shallowReactive } from 'vue'
 
-import type { MessageConfirmProps, ColorType } from '../../types'
-import UMessageConfirm from './message-confirm.vue'
+import type {
+  MessageConfirm,
+  MessageConfirmAction,
+  MessageConfirmInstance,
+  MessageConfirmOptions
+} from '../../types'
+import UMessageConfirmBox from './message-confirm-box.vue'
 
-const ColorTypeArray: ColorType[] = ['primary', 'success', 'info', 'warning', 'danger']
+const cls = bem('message-confirm')
 
-type MessageConfirmFn = (options: MessageConfirmProps) => void
+/** 确认框项数据结构 */
+type ConfirmItem = MessageConfirmOptions & { key: string }
 
-type MessageConfirmTypeFn = {
-  [k in ColorType]: (message: string, onClose?: (action: 'cancel' | 'confirm') => void) => void
-} & MessageConfirmFn
+/** --- 状态管理 --- */
+let container: HTMLElement | null = null
+const confirms = shallowReactive<ConfirmItem[]>([])
 
-const MessageConfirm: MessageConfirmFn & Partial<MessageConfirmTypeFn> = (
-  options: MessageConfirmProps
-) => {
-  const container = document.createElement('div')
-  const vm = createVNode(UMessageConfirm, { ...options, zIndex: zIndex() })
-  vm.props!.onDestroy = () => render(null, container)
-  render(vm, container)
-  document.body.appendChild(container.firstElementChild!)
+/** 关闭动画结束后的回调 */
+const closedCallbacks = new Map<string, (action: MessageConfirmAction) => void>()
+
+/** 记录每项关闭时的用户操作，动画结束后随回调抛出 */
+const pendingActions = new Map<string, MessageConfirmAction>()
+
+/** 用于计数正在显示的 DOM 节点 (包含动画执行中) */
+let activeCount = 0
+let uid = 0
+
+/** --- 内部辅助函数 --- */
+
+/** 彻底销毁容器 */
+const destroy = () => {
+  if (container) {
+    render(null, container)
+    document.body.removeChild(container)
+    container = null
+  }
 }
 
-ColorTypeArray.forEach((type) => {
-  MessageConfirm[type] = (message: string, onClose?: (action: 'cancel' | 'confirm') => void) => {
-    return MessageConfirm({ message, confirmButtonType: type, onClose })
+/** 离开动画结束后的清理 */
+const handleClosed = (key: string) => {
+  activeCount--
+
+  const cb = closedCallbacks.get(key)
+  if (cb) {
+    cb(pendingActions.get(key) ?? 'cancel')
+    closedCallbacks.delete(key)
   }
+  pendingActions.delete(key)
+
+  // 没有活跃确认框时销毁容器，保持页面干净
+  if (activeCount === 0) destroy()
+}
+
+/** 触发关闭 (仅从数组移除，触发 Transition 离开动画) */
+const handleClose = (key: string, action: MessageConfirmAction) => {
+  pendingActions.set(key, action)
+  const index = confirms.findIndex((c) => c.key === key)
+  if (index !== -1) confirms.splice(index, 1)
+}
+
+/** 挂载并渲染容器 */
+const ensureContainer = () => {
+  if (container) return container
+
+  container = document.createElement('div')
+  container.className = cls.e('container')
+  document.body.appendChild(container)
+  return container
+}
+
+/** 执行 Vue 渲染逻辑 */
+const updateView = () => {
+  const el = ensureContainer()
+
+  const vnode = h(UMessageConfirmBox, { confirms, onClosed: handleClosed, onClose: handleClose })
+
+  vnode.appContext = messageConfirm._context
+  render(vnode, el)
+}
+
+/** 创建确认框实例 */
+const createConfirm = (options: MessageConfirmOptions): MessageConfirmInstance => {
+  const { onClosed: userOnClosed, ...confirmOptions } = options
+  const id = `confirm_${uid++}`
+  activeCount++
+
+  // 生命周期 Promise
+  let resolveClosed: (action: MessageConfirmAction) => void
+  const onClosed = new Promise<MessageConfirmAction>((r) => (resolveClosed = r))
+
+  closedCallbacks.set(id, (action) => {
+    userOnClosed?.(action)
+    resolveClosed(action)
+  })
+
+  confirms.push({ zIndex: zIndex(), ...confirmOptions, key: id })
+  updateView()
+
+  return { id, close: (action = 'cancel') => handleClose(id, action), onClosed }
+}
+
+/** --- 导出 API --- */
+
+export const messageConfirm = ((options) => {
+  return createConfirm(typeof options === 'string' ? { message: options } : options)
+}) as MessageConfirm
+
+messageConfirm._context = null
+
+// 挂载快捷方法: messageConfirm.danger(...)
+const confirmTypes = ['primary', 'success', 'info', 'warning', 'danger'] as const
+confirmTypes.forEach((type) => {
+  messageConfirm[type] = (msg, config) =>
+    messageConfirm({ ...config, message: msg, confirmButtonType: type })
 })
 
-export default MessageConfirm as MessageConfirmTypeFn
+/** 关闭所有当前显示的确认框 */
+messageConfirm.closeAll = () => {
+  confirms.splice(0)
+}

package/src/components/message-confirm/message-confirm.vue

@@ -1,37 +1,39 @@
 <template>
-  <transition name="message-confirm-fade" @after-leave="$emit('destroy')">
-    <div :class="[cls.b, cls.m(size)]" v-show="visible">
-      <div :class="cls.e('mask')" :style="{ zIndex: `${zIndex()}` }">
-        <div :class="cls.e('box')">
-          <div :class="cls.e('header')" v-if="title">{{ title }}</div>
-          <div :class="cls.e('content')">{{ message }}</div>
-          <div :class="cls.e('footer')">
-            <UButton
-              plain
-              @click="close('cancel')"
-              :class="cls.em('footer', 'btn')"
-              v-if="cancelButtonText"
-              >{{ cancelButtonText }}</UButton
-            >
-            <UButton
-              :type="confirmButtonType"
-              @click="close('confirm')"
-              :class="cls.em('footer', 'btn')"
-              >{{ confirmButtonText }}</UButton
-            >
-          </div>
+  <div :class="[cls.b, cls.m(size)]">
+    <div :class="cls.e('mask')" :style="{ zIndex }">
+      <div :class="cls.e('box')">
+        <div :class="cls.e('header')" v-if="title">{{ title }}</div>
+        <div :class="cls.e('content')">{{ message }}</div>
+        <div :class="cls.e('footer')">
+          <UButton
+            plain
+            @click="emit('close', 'cancel')"
+            :class="cls.em('footer', 'btn')"
+            v-if="cancelButtonText"
+            >{{ cancelButtonText }}</UButton
+          >
+          <UButton
+            :type="confirmButtonType"
+            @click="emit('close', 'confirm')"
+            :class="cls.em('footer', 'btn')"
+            >{{ confirmButtonText }}</UButton
+          >
         </div>
       </div>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { useFallbackProps } from '@veltra/compositions'
-import { bem, zIndex } from '@veltra/utils'
-import { ref, onMounted } from 'vue'
-
-import type { MessageConfirmProps, ColorType, ComponentSize } from '../../types'
+import { bem } from '@veltra/utils'
+
+import type {
+  MessageConfirmProps,
+  MessageConfirmEmits,
+  ColorType,
+  ComponentSize
+} from '../../types'
 import { UButton } from '../button'
 
 defineOptions({ name: 'UMessageConfirm' })
@@ -44,18 +46,9 @@ const props = withDefaults(defineProps<MessageConfirmProps>(), {
   cancelButtonText: ''
 })
 
+const emit = defineEmits<MessageConfirmEmits>()
+
 const { size } = useFallbackProps([props], { size: 'default' as ComponentSize })
 
 const cls = bem('message-confirm')
-
-const visible = ref<boolean>(false)
-
-onMounted(() => {
-  visible.value = true
-})
-
-const close = (action: 'cancel' | 'confirm') => {
-  visible.value = false
-  if (props.onClose) props.onClose(action)
-}
 </script>

package/src/components/message-confirm/style.scss

@@ -15,6 +15,7 @@ $root-name: message-confirm;
     bottom: 0;
     left: 0;
     @include m.flex($justify: center);
+    transition: opacity fn.use-var(transition, normal) fn.use-var(transition, ease);
   }
 
   @include m.e(box) {
@@ -23,9 +24,8 @@ $root-name: message-confirm;
     border: fn.use-var(border);
     box-shadow: fn.use-var(shadow, lg);
     transition:
-      opacity 0.3s,
-      transform 0.4s;
-    transform: translateY(-50%);
+      opacity fn.use-var(transition, normal) fn.use-var(transition, ease),
+      transform fn.use-var(transition, normal) fn.use-var(transition, ease-out);
   }
 
   @include m.e(header) {
@@ -57,16 +57,14 @@ $root-name: message-confirm;
   }
 }
 
-.#{$root-name}-fade-enter-active,
-.#{$root-name}-fade-leave-active {
-  transition: opacity 0.25s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.#{$root-name}-fade-enter-from,
-.#{$root-name}-fade-leave-to {
-  // opacity: 0;
+.#{$root-name}-enter-from,
+.#{$root-name}-leave-to {
+  @include m.bem($root-name, mask) {
+    opacity: 0;
+  }
 
   @include m.bem($root-name, box) {
-    transform: translate(0, -100%);
+    opacity: 0;
+    transform: translateY(-40px);
   }
 }

package/src/components/notification/index.ts

@@ -1,145 +1,3 @@
 export { default as UNotification } from './notification.vue'
-import { zIndex } from '@veltra/utils'
-import { createVNode, render, type VNode, reactive } from 'vue'
 
-import type { NotificationProps } from '../../types'
-import UNotification from './notification.vue'
-
-type NotificationItem = { vm: VNode }
-
-const notificationQueue = reactive({
-  'bottom-right': [] as NotificationItem[],
-  'bottom-left': [] as NotificationItem[],
-  'top-right': [] as NotificationItem[],
-  'top-left': [] as NotificationItem[]
-})
-
-const length = (key: string) => {
-  return notificationQueue[key].length
-}
-
-let count = 1
-
-const close = (id: string, position: string, userClose?: (vm: VNode) => void) => {
-  const index = notificationQueue[position].findIndex(({ vm }) => {
-    return id === vm.component!.props.id
-  })
-  if (index > -1) {
-    const { vm } = notificationQueue[position][index]!
-    userClose?.(vm)
-    let offset = Number(notificationQueue[position][index]!.vm.component!.props.offset)
-    notificationQueue[position].splice(index, 1)
-    let temp = 0
-    for (let i = length(position); i > 0; i--) {
-      if (i < index + 1) {
-        temp = Number(notificationQueue[position][i - 1]!.vm.component!.props.offset)
-        notificationQueue[position][i - 1]!.vm.component!.props.offset = offset
-        offset = temp
-      }
-    }
-  }
-  if (!notificationQueue[position].length) {
-    const wrapper = document.getElementById(`notification-${position}-id`)!
-    wrapper.style.removeProperty('height')
-    wrapper.style.removeProperty('overflow')
-  }
-}
-
-const createWrapper = (options: NotificationProps) => {
-  const position = options.position || 'bottom-right'
-  if (document.getElementById(`notification-${position}-id`)) {
-    return document.getElementById(`notification-${position}-id`)
-  } else {
-    const offset = options.offset || 20
-    const wrapper = document.createElement('div')
-    wrapper.id = `notification-${position}-id`
-    Object.assign(
-      wrapper.style,
-      { position: 'fixed', textAlign: 'center' },
-      {
-        'top-right': { top: `${offset}px`, right: `${offset}px` },
-        'top-left': { top: `${offset}px`, left: `${offset}px` },
-        'bottom-left': { bottom: `${offset}px`, left: `${offset}px` },
-        'bottom-right': { bottom: `${offset}px`, right: `${offset}px` }
-      }[position]
-    )
-    wrapper.addEventListener('mouseenter', (e: MouseEvent) => {
-      if (length(position)) {
-        let innerCount = 0
-        let innerOffset = 0
-        let width = 0
-        let height = 0
-        for (let i = length(position); i > 0; i--) {
-          notificationQueue[position][i - 1]!.vm.component!.exposed!.clearTimer()
-          if (i === length(position)) {
-            width = notificationQueue[position][i - 1]!.vm.el?.offsetWidth + 8
-          }
-          notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset
-          innerOffset += notificationQueue[position][i - 1]!.vm.el?.offsetHeight / 2 + 5
-          if (innerCount < 3) height += notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 10
-          innerCount++
-        }
-
-        Object.assign((e.target as HTMLElement).style, {
-          width: `${width}px`,
-          height: `${height}px`,
-          overflow: 'hidden',
-          transition: 'height 0.4s'
-        })
-      }
-    })
-    wrapper.addEventListener('mouseleave', (e: MouseEvent) => {
-      if (length(position)) {
-        let innerOffset = 0
-        let innerCount = 0
-        let height = 0
-        for (let i = length(position); i > 0; i--) {
-          notificationQueue[position][i - 1]!.vm.component!.exposed!.startTimer()
-          if (i === length(position))
-            height = notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 80
-          notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset
-          if (innerCount < 2) innerOffset += 10
-          innerCount++
-        }
-        ;(e.target as HTMLElement).style.transition = 'height 0.45s'
-        ;(e.target as HTMLElement).style.height = `${height}px`
-      } else {
-        ;(e.target as HTMLElement).style.removeProperty('height')
-        ;(e.target as HTMLElement).style.removeProperty('overflow')
-      }
-    })
-    document.body.appendChild(wrapper)
-    return wrapper
-  }
-}
-
-export const Notification = (options: NotificationProps): void => {
-  const position = options.position || 'bottom-right'
-  const container = document.createElement('div')
-  const id = `notification_${count++}`
-
-  if (length(position)) {
-    let innerOffset = 0
-    let innerCount = 0
-    for (let i = length(position); i > 0; i--) {
-      if (innerCount < 2) innerOffset += 10
-      notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset
-      innerCount++
-    }
-  }
-
-  const vm = createVNode(UNotification, {
-    ...options,
-    offset: 0,
-    id,
-    zIndex: zIndex(),
-    onClose: () => {
-      close(id, position, options.onClose)
-    }
-  })
-  vm.props!.onDestroy = () => render(null, container)
-  render(vm, container)
-  notificationQueue[position].push({ vm })
-  const wrapper = createWrapper(options)
-  wrapper?.appendChild(container.firstElementChild!)
-}
+export { notification } from './notification'

package/src/components/notification/notification-box.vue

@@ -0,0 +1,150 @@
+<template>
+  <div
+    :class="[cls.e('stack'), cls.em('stack', position)]"
+    :style="stackStyle"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <transition-group :name="`notification-${vertical}`" appear @after-leave="handleAfterLeave">
+      <div
+        v-for="(item, index) of notifications"
+        :key="item.key"
+        :ref="(el) => observeItem(el, item.key)"
+        :data-key="item.key"
+        :class="cls.e('item')"
+      >
+        <UNotification
+          v-bind="toCardProps(item)"
+          :style="cardStyle(index)"
+          @close="handleClose(item.key, item.onClose)"
+          @action="handleAction(item.key, item.onClick, item.onClose, $event)"
+        />
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { computed, onBeforeUnmount, reactive, ref, type CSSProperties } from 'vue'
+
+import type { NotificationOptions, NotificationPosition, NotificationProps } from '../../types'
+import UNotification from './notification.vue'
+
+defineOptions({ name: 'UNotificationBox' })
+
+/** 通知项数据结构 */
+type NotificationItem = NotificationOptions & { key: string }
+
+const props = defineProps<{ notifications: NotificationItem[]; position: NotificationPosition }>()
+
+const emit = defineEmits<{ (e: 'closed', key: string): void; (e: 'close', key: string): void }>()
+
+const cls = bem('notification')
+
+/** 展开态卡片间距 */
+const GAP = 10
+/** 折叠态每层露出的高度 */
+const PEEK = 14
+/** 折叠态最多露出的卡片数 */
+const MAX_VISIBLE = 3
+
+const hovering = ref(false)
+
+/** 各卡片实测高度, 驱动展开态位移与容器高度 */
+const heights = reactive<Record<string, number>>({})
+
+const vertical = computed(() => (props.position.startsWith('top') ? 'top' : 'bottom'))
+
+/** 底部锚定向上堆叠(负向偏移), 顶部锚定向下堆叠 */
+const direction = computed(() => (vertical.value === 'bottom' ? -1 : 1))
+
+const observer = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const el = entry.target as HTMLElement
+    const key = el.dataset.key
+    if (key) heights[key] = el.offsetHeight
+  }
+})
+
+function observeItem(el: Element | null, key: string) {
+  if (el) observer.observe(el)
+}
+
+onBeforeUnmount(() => observer.disconnect())
+
+/** 数组末尾为最新通知, 位于堆叠最前 */
+function cardStyle(index: number): CSSProperties {
+  const items = props.notifications
+  const stackIndex = items.length - 1 - index
+
+  if (hovering.value) {
+    // 展开态: 按前方卡片累计高度偏移
+    let offset = 0
+    for (let i = index + 1; i < items.length; i++) {
+      offset += (heights[items[i]!.key] ?? 0) + GAP
+    }
+    return {
+      transform: `translateY(${direction.value * offset}px) scale(1)`,
+      opacity: 1,
+      pointerEvents: 'auto'
+    }
+  }
+
+  const clamped = Math.min(stackIndex, MAX_VISIBLE - 1)
+  return {
+    transform: `translateY(${direction.value * clamped * PEEK}px) scale(${1 - clamped * 0.05})`,
+    opacity: stackIndex >= MAX_VISIBLE ? 0 : 1,
+    pointerEvents: stackIndex === 0 ? 'auto' : 'none'
+  }
+}
+
+const stackStyle = computed<CSSProperties>(() => {
+  const items = props.notifications
+  if (!items.length) return { height: '0px' }
+
+  if (hovering.value) {
+    const total = items.reduce((sum, item) => sum + (heights[item.key] ?? 0), 0)
+    return { height: `${total + (items.length - 1) * GAP}px` }
+  }
+
+  const frontHeight = heights[items[items.length - 1]!.key] ?? 0
+  const behind = Math.min(items.length - 1, MAX_VISIBLE - 1)
+  return { height: `${frontHeight + behind * PEEK}px` }
+})
+
+function toCardProps(item: NotificationItem): NotificationProps {
+  return {
+    title: item.title,
+    message: item.message,
+    type: item.type,
+    closable: item.closable,
+    duration: item.duration,
+    icon: item.icon,
+    buttonText: item.buttonText,
+    size: item.size
+  }
+}
+
+function handleAfterLeave(el: Element) {
+  const key = (el as HTMLElement).dataset.key as string
+  observer.unobserve(el as HTMLElement)
+  delete heights[key]
+  emit('closed', key)
+}
+
+function handleClose(key: string, onClose?: () => void) {
+  emit('close', key)
+  onClose?.()
+}
+
+function handleAction(
+  key: string,
+  onClick: NotificationItem['onClick'],
+  onClose: NotificationItem['onClose'],
+  e: MouseEvent
+) {
+  onClick?.(e)
+  handleClose(key, onClose)
+}
+</script>