@veltra/desktop 1.3.2 → 1.3.3

package/src/components/notification/notification.ts

@@ -0,0 +1,142 @@
+import { bem, setStyles, zIndex } from '@veltra/utils'
+import { h, render, shallowReactive } from 'vue'
+
+import type {
+  Notification,
+  NotificationInstance,
+  NotificationOptions,
+  NotificationPosition
+} from '../../types'
+import UNotificationBox from './notification-box.vue'
+
+const cls = bem('notification')
+
+/** 通知项数据结构 */
+type NotificationItem = NotificationOptions & { key: string }
+
+/** 单个方位的堆叠状态 */
+interface NotificationStack {
+  container: HTMLElement | null
+  items: NotificationItem[]
+  /** 正在显示的通知数 (包含动画执行中) */
+  activeCount: number
+}
+
+/** --- 状态管理 --- */
+const stacks: Record<NotificationPosition, NotificationStack> = {
+  'top-left': { container: null, items: shallowReactive([]), activeCount: 0 },
+  'top-right': { container: null, items: shallowReactive([]), activeCount: 0 },
+  'bottom-left': { container: null, items: shallowReactive([]), activeCount: 0 },
+  'bottom-right': { container: null, items: shallowReactive([]), activeCount: 0 }
+}
+
+/** 通知关闭后回调 */
+const closedCallbacks = new Map<string, () => void>()
+
+let uid = 0
+
+/** --- 内部辅助函数 --- */
+
+/** 彻底销毁容器 */
+const destroy = (stack: NotificationStack) => {
+  if (stack.container) {
+    render(null, stack.container)
+    document.body.removeChild(stack.container)
+    stack.container = null
+  }
+}
+
+/** 离开动画结束后的清理 */
+const handleClosed = (stack: NotificationStack, key: string) => {
+  stack.activeCount--
+
+  const cb = closedCallbacks.get(key)
+  if (cb) {
+    cb()
+    closedCallbacks.delete(key)
+  }
+
+  // 没有活跃通知时销毁容器，保持页面干净
+  if (stack.activeCount === 0) destroy(stack)
+}
+
+/** 触发关闭 (仅从数组移除，触发 Transition 离开动画) */
+const handleClose = (stack: NotificationStack, key: string) => {
+  const index = stack.items.findIndex((n) => n.key === key)
+  if (index !== -1) stack.items.splice(index, 1)
+}
+
+/** 挂载并渲染容器 */
+const updateView = (position: NotificationPosition, options: NotificationOptions) => {
+  const stack = stacks[position]
+
+  if (!stack.container) {
+    stack.container = document.createElement('div')
+    stack.container.className = cls.e('container')
+    document.body.appendChild(stack.container)
+  }
+
+  const offset = options.offset ?? 20
+  const [vertical, horizontal] = position.split('-') as ['top' | 'bottom', 'left' | 'right']
+  setStyles(stack.container, {
+    position: 'fixed',
+    zIndex: options.zIndex ?? zIndex(),
+    [vertical]: `${offset}px`,
+    [horizontal]: `${offset}px`
+  })
+
+  const vnode = h(UNotificationBox, {
+    notifications: stack.items,
+    position,
+    onClosed: (key: string) => handleClosed(stack, key),
+    onClose: (key: string) => handleClose(stack, key)
+  })
+
+  vnode.appContext = notification._context
+  render(vnode, stack.container)
+}
+
+/** 创建通知实例 */
+const createNotification = (options: NotificationOptions): NotificationInstance => {
+  const { onClosed: userOnClosed, position = 'bottom-right', ...notificationOptions } = options
+  const stack = stacks[position]
+  const id = `notification_${uid++}`
+  stack.activeCount++
+
+  // 生命周期 Promise
+  let resolveClosed: () => void
+  const onClosed = new Promise<void>((r) => (resolveClosed = r))
+
+  closedCallbacks.set(id, () => {
+    userOnClosed?.()
+    resolveClosed()
+  })
+
+  stack.items.push({ ...notificationOptions, position, key: id })
+  updateView(position, options)
+
+  return { id, close: () => handleClose(stack, id), onClosed }
+}
+
+/** --- 导出 API --- */
+
+export const notification = ((options) => {
+  return createNotification(typeof options === 'string' ? { message: options } : options)
+}) as Notification
+
+notification._context = null
+
+// 挂载快捷方法: notification.success(...)
+const notificationTypes = ['primary', 'success', 'info', 'warning', 'danger'] as const
+notificationTypes.forEach((type) => {
+  notification[type] = (msg, config) => notification({ ...config, message: msg, type })
+})
+
+/** 关闭所有通知，可指定方位 */
+notification.closeAll = (position?: NotificationPosition) => {
+  if (position) {
+    stacks[position].items.splice(0)
+    return
+  }
+  ;(Object.keys(stacks) as NotificationPosition[]).forEach((p) => stacks[p].items.splice(0))
+}

package/src/components/notification/notification.vue

@@ -1,31 +1,25 @@
 <template>
-  <transition
-    :name="`notification-fade-${position.split('-')[0]}`"
-    @before-leave="onClose"
-    @after-leave="$emit('destroy')"
+  <div
+    :class="[cls.b, cls.m(size), cls.e(type)]"
+    @mouseenter="suspendTimer"
+    @mouseleave="startTimer"
   >
-    <div
-      :class="[cls.b, cls.m(size), cls.e(type), cls.e(position)]"
-      v-show="visible"
-      :style="customStyle"
-    >
-      <div :class="cls.e('icon')">
-        <UIcon>
-          <component :is="typeIcon" />
-        </UIcon>
-      </div>
-      <div :class="cls.e('content')">
-        <div :class="cls.em('content', 'title')">{{ title }}</div>
-        <div :class="cls.em('content', 'message')">{{ message }}</div>
-        <div :class="cls.em('content', 'button')" v-if="buttonText">
-          <UButton :type="type" plain @click="handleClick">{{ buttonText }}</UButton>
-        </div>
-      </div>
-      <div :class="cls.e('close')" v-if="closable" @click.stop="close">
-        <UIcon><Close /></UIcon>
+    <div :class="cls.e('icon')">
+      <UIcon>
+        <component :is="typeIcon" />
+      </UIcon>
+    </div>
+    <div :class="cls.e('content')">
+      <div :class="cls.em('content', 'title')" v-if="title">{{ title }}</div>
+      <div :class="cls.em('content', 'message')" v-if="message">{{ message }}</div>
+      <div :class="cls.em('content', 'button')" v-if="buttonText">
+        <UButton :type="type" plain @click="(e) => emit('action', e)">{{ buttonText }}</UButton>
       </div>
     </div>
-  </transition>
+    <div :class="cls.e('close')" v-if="closable || duration === 0" @click.stop="emit('close')">
+      <UIcon><Close /></UIcon>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -39,9 +33,9 @@ import {
   WarningFilled
 } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { ref, computed, onMounted, type CSSProperties } from 'vue'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
 
-import type { NotificationProps, NotificationExposed, ColorType } from '../../types'
+import type { NotificationEmits, NotificationProps, ColorType } from '../../types'
 import { UButton } from '../button'
 import { UIcon } from '../icon'
 
@@ -50,11 +44,11 @@ defineOptions({ name: 'UNotification' })
 const props = withDefaults(defineProps<NotificationProps>(), {
   closable: false,
   duration: 4500,
-  offset: 20,
-  buttonText: '',
-  position: 'bottom-right'
+  buttonText: ''
 })
 
+const emit = defineEmits<NotificationEmits>()
+
 const { type, size } = useFallbackProps([props], { type: 'primary' as ColorType, size: 'default' })
 
 const typeIcon = computed(() => {
@@ -72,47 +66,27 @@ const typeIcon = computed(() => {
 
 const cls = bem('notification')
 
-const visible = ref<boolean>(false)
-
-onMounted(() => {
-  visible.value = true
-  startTimer()
-})
-
-const close = () => {
-  visible.value = false
-}
-
-const customStyle = computed<CSSProperties>(() => {
-  return props.offset > 0
-    ? {
-        [`${props.position.split('-')[0]}`]: `${props.offset}px`,
-        zIndex: props.zIndex,
-        transform:
-          props.position.split('-')[0] === 'bottom'
-            ? `translateY(-${props.offset}px)`
-            : `translateY(${props.offset}px)`,
-        transition: `opacity 0.3s, transform 0.4s, top 0.4s`
-      }
-    : { [`${props.position.split('-')[0]}`]: `${props.offset}px`, zIndex: props.zIndex }
-})
-
+/** 剩余时长制的自动关闭计时器, 悬停暂停 */
+let startTime = 0
 let timer = 0
+let restDuration = 0
 
-const startTimer = () => {
-  if (props.duration) {
-    timer = setTimeout(() => {
-      close()
-    }, props.duration)
-  }
+function startTimer() {
+  if (!props.duration) return
+  startTime = Date.now()
+  timer = setTimeout(() => emit('close'), restDuration)
 }
 
-const clearTimer = () => clearTimeout(timer)
-
-const handleClick = (e: MouseEvent) => {
-  if (props.onClick) props.onClick(e)
-  close()
+function suspendTimer() {
+  if (!props.duration) return
+  clearTimeout(timer)
+  restDuration -= Date.now() - startTime
 }
 
-defineExpose<NotificationExposed>({ startTimer, clearTimer })
+onMounted(() => {
+  restDuration = props.duration
+  startTimer()
+})
+
+onBeforeUnmount(() => clearTimeout(timer))
 </script>

package/src/components/notification/style.scss

@@ -1,48 +1,53 @@
 @use 'pkg:@veltra/styles/mixins' as m;
 @use 'pkg:@veltra/styles/functions' as fn;
-@use 'pkg:@veltra/styles/vars';
-@use 'sass:map';
+@use 'pkg:@veltra/styles/vars' as vars;
+@use 'sass:list';
 
 // 方便拼接
 $root-name: notification;
-$positions: ('top-left', 'top-right', 'bottom-left', 'bottom-right');
+// 方位 => (垂直锚边, 水平锚边)
+$stack-positions: (
+  'bottom-right': (bottom, right),
+  'bottom-left': (bottom, left),
+  'top-right': (top, right),
+  'top-left': (top, left)
+);
 
 @include m.b($root-name) {
   display: flex;
-  min-width: 380px;
-  position: absolute;
-  transition:
-    opacity 0.3s,
-    transform 0.4s,
-    top 0.4s;
+  position: relative;
+  width: 380px;
+  max-width: calc(100vw - 40px);
   border: fn.use-var(border);
   background-color: fn.use-var(bg-color, top);
   box-shadow: fn.use-var(shadow, lg);
-  margin: 4px;
+  color: fn.use-var(text-color, main);
   overflow: hidden;
+  transition:
+    transform fn.use-var(transition, normal) fn.use-var(transition, ease),
+    opacity fn.use-var(transition, normal) fn.use-var(transition, ease);
 
   @include m.size using ($size) {
     border-radius: fn.use-var(radius, $size);
     padding: calc(fn.use-var(gap, $size) * 1.2);
 
-    @include m.bem($root-name, icon) {
-    }
-
     @include m.bem($root-name, content) {
-      max-width: 400px;
       word-wrap: break-word;
       margin-left: fn.use-var(gap, $size);
       text-align: left;
+
       &--title {
         font-size: fn.use-var('font-size', title, $size);
         font-weight: bold;
       }
+
       &--message {
         font-size: fn.use-var('font-size', main, $size);
       }
+
       &--button {
         text-align: right;
-        margin-top: fn.use-var(gap, size);
+        margin-top: fn.use-var(gap, $size);
       }
     }
 
@@ -51,45 +56,67 @@ $positions: ('top-left', 'top-right', 'bottom-left', 'bottom-right');
       position: absolute;
       right: fn.use-var(gap, $size);
       top: fn.use-var(gap, $size);
+
       &:hover {
         color: fn.use-var(color, primary, 'dark-9');
       }
     }
   }
 
+  // 类型色仅作用于图标
   @each $type, $_ in vars.$color-types {
     @include m.e($type) {
-      // background-color: fn.use-var(color, $type, 'light-7');
-      color: fn.use-var(color, $type);
+      @include m.bem($root-name, icon) {
+        color: fn.use-var(color, $type);
+      }
     }
   }
 
-  @each $position in $positions {
-    @include m.e($position) {
-      @if $position == 'bottom-right' {
-        right: 0;
-        bottom: 0;
-      } @else if ($position == 'bottom-left') {
-        left: 0;
-        bottom: 0;
-      } @else if ($position == 'top-right') {
-        right: 0;
-        top: 0;
-      } @else {
-        left: 0;
-        top: 0;
-      }
+  // 堆叠容器
+  @include m.e(stack) {
+    position: relative;
+    width: 380px;
+    max-width: calc(100vw - 40px);
+    transition: height fn.use-var(transition, normal) fn.use-var(transition, ease);
+  }
+
+  // 卡片定位层
+  @include m.e(item) {
+    position: absolute;
+  }
+}
+
+// 各方位锚定与堆叠缩放原点
+@each $position, $edges in $stack-positions {
+  @include m.bem($root-name, stack, $position) {
+    @include m.bem($root-name, item) {
+      #{list.nth($edges, 1)}: 0;
+      #{list.nth($edges, 2)}: 0;
+    }
+
+    @include m.bem($root-name) {
+      transform-origin: center #{list.nth($edges, 1)};
     }
   }
 }
 
-.#{$root-name}-fade-bottom-enter-from,
-.#{$root-name}-fade-bottom-leave-to {
+.#{$root-name}-bottom-enter-active,
+.#{$root-name}-bottom-leave-active,
+.#{$root-name}-top-enter-active,
+.#{$root-name}-top-leave-active {
+  transition:
+    opacity fn.use-var(transition, normal) fn.use-var(transition, ease),
+    transform fn.use-var(transition, normal) fn.use-var(transition, ease-out);
+}
+
+.#{$root-name}-bottom-enter-from,
+.#{$root-name}-bottom-leave-to {
   opacity: 0;
-  transform: translate(0, 100%);
+  transform: translateY(100%);
 }
-.#{$root-name}-fade-top-enter-from,
-.#{$root-name}-fade-top-leave-to {
+
+.#{$root-name}-top-enter-from,
+.#{$root-name}-top-leave-to {
   opacity: 0;
-  transform: translate(0, -100%);
+  transform: translateY(-100%);
 }

package/src/types/message-confirm.ts

@@ -1,19 +1,68 @@
 import type { ColorType, ComponentProps, DeconstructValue } from '@veltra/utils'
+import type { AppContext } from 'vue'
+
+/** 消息确认框用户操作 */
+export type MessageConfirmAction = 'confirm' | 'cancel'
 
 /** 消息确认框组件属性 */
 export interface MessageConfirmProps extends ComponentProps {
-  modelValue?: string
+  /** 标题 */
   title?: string
+  /** 内容 */
   message: string
+  /** 确认按钮文字 */
   confirmButtonText?: string
+  /** 取消按钮文字，为空则不显示 */
   cancelButtonText?: string
+  /** 确认按钮类型 */
   confirmButtonType?: ColorType
-  onClose?: (action: 'cancel' | 'confirm') => void
+  /** 层级，默认由 API 创建时自增分配 */
+  zIndex?: number
+}
+
+/** 消息确认框调用选项 */
+export interface MessageConfirmOptions extends MessageConfirmProps {
+  /** 点击按钮触发关闭时回调 */
+  onClose?: (action: MessageConfirmAction) => void
+  /** 关闭动画结束后回调 */
+  onClosed?: (action: MessageConfirmAction) => void
+}
+
+/** 消息确认框实例 */
+export interface MessageConfirmInstance {
+  /** 唯一标识 */
+  id: string
+  /** 手动关闭，未指定操作时视为 cancel */
+  close(action?: MessageConfirmAction): void
+  /** 彻底关闭（含动画结束）后的 Promise，值为用户操作 */
+  onClosed: Promise<MessageConfirmAction>
+}
+
+type MessageConfirmShortcutConfig = Omit<MessageConfirmOptions, 'message' | 'confirmButtonType'>
+
+/** 消息确认框函数式 API */
+export interface MessageConfirm {
+  /** 创建确认框 */
+  (options: MessageConfirmOptions | string): MessageConfirmInstance
+  /** 主要确认框 */
+  primary(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 成功确认框 */
+  success(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 信息确认框 */
+  info(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 警告确认框 */
+  warning(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 危险确认框 */
+  danger(message: string, config?: MessageConfirmShortcutConfig): MessageConfirmInstance
+  /** 关闭所有确认框 */
+  closeAll(): void
+  /** 设置全局渲染上下文 */
+  _context: AppContext | null
 }
 
 /** 消息确认框组件定义的事件 */
 export interface MessageConfirmEmits {
-  (e: 'update:modelValue', value: string): void
+  (e: 'close', action: MessageConfirmAction): void
 }
 
 /** 消息确认框组件暴露的属性和方法(组件内部使用) */

package/src/types/notification.ts

@@ -1,32 +1,88 @@
-import type { ColorType, DeconstructValue } from '@veltra/utils'
-import type { DefineComponent, RendererElement } from 'vue'
+import type { ColorType, ComponentSize, DeconstructValue } from '@veltra/utils'
+import type { AppContext, DefineComponent } from 'vue'
 
-/** 通知组件组件属性 */
+/** 通知弹出位置 */
+export type NotificationPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+
+/** 通知组件属性 */
 export interface NotificationProps {
-  modelValue?: string
+  /** 标题 */
   title?: string
+  /** 内容 */
   message?: string
+  /** 类型 */
   type?: ColorType
+  /** 是否显示关闭按钮 */
   closable?: boolean
+  /**
+   * 自动关闭时长, 单位ms, 0 表示常驻
+   * @default 4500
+   */
   duration?: number
-  offset?: number
-  onClose?: (vm: RendererElement) => void
-  onClick?: (e: MouseEvent) => void
-  id?: string
+  /** 图标 */
   icon?: DefineComponent
-  zIndex?: number
+  /** 操作按钮文字，为空则不显示 */
   buttonText?: string
-  width?: number
-  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  /** 尺寸 */
+  size?: ComponentSize
+}
+
+/** 通知调用选项 */
+export interface NotificationOptions extends NotificationProps {
+  /** 弹出位置 */
+  position?: NotificationPosition
+  /** 距离屏幕边缘的偏移, 单位px */
+  offset?: number
+  /** 层级，默认由 API 创建时自增分配 */
+  zIndex?: number
+  /** 点击操作按钮时回调 */
+  onClick?: (e: MouseEvent) => void
+  /** 触发关闭时回调 */
+  onClose?: () => void
+  /** 关闭动画结束后回调 */
+  onClosed?: () => void
+}
+
+/** 通知实例 */
+export interface NotificationInstance {
+  /** 唯一标识 */
+  id: string
+  /** 手动关闭 */
+  close(): void
+  /** 彻底关闭（含动画结束）后的 Promise */
+  onClosed: Promise<void>
+}
+
+type NotificationShortcutConfig = Omit<NotificationOptions, 'type' | 'message'>
+
+/** 通知函数式 API */
+export interface Notification {
+  /** 创建通知 */
+  (options: NotificationOptions | string): NotificationInstance
+  /** 主要通知 */
+  primary(message: string, config?: NotificationShortcutConfig): NotificationInstance
+  /** 成功通知 */
+  success(message: string, config?: NotificationShortcutConfig): NotificationInstance
+  /** 信息通知 */
+  info(message: string, config?: NotificationShortcutConfig): NotificationInstance
+  /** 警告通知 */
+  warning(message: string, config?: NotificationShortcutConfig): NotificationInstance
+  /** 危险通知 */
+  danger(message: string, config?: NotificationShortcutConfig): NotificationInstance
+  /** 关闭所有通知，可指定位置 */
+  closeAll(position?: NotificationPosition): void
+  /** 设置全局渲染上下文 */
+  _context: AppContext | null
 }
 
-/** 通知组件组件定义的事件 */
+/** 通知组件定义的事件 */
 export interface NotificationEmits {
-  (e: 'update:modelValue', value: string): void
+  (e: 'close'): void
+  (e: 'action', evt: MouseEvent): void
 }
 
-/** 通知组件组件暴露的属性和方法(组件内部使用) */
+/** 通知组件暴露的属性和方法(组件内部使用) */
 export interface _NotificationExposed {}
 
-/** 通知组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+/** 通知组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
 export type NotificationExposed = DeconstructValue<_NotificationExposed>