@veltra/desktop 1.0.0

package/src/components/message/message.ts

@@ -0,0 +1,118 @@
+import { bem, setStyles, zIndex } from '@veltra/utils'
+import { h, render, shallowReactive } from 'vue'
+
+import type { MessageOptions, Message, MessageInstance } from '../../types'
+import UMessageBox from './message-box.vue'
+
+const cls = bem('message')
+
+/** 消息项数据结构 */
+type MessageItem = MessageOptions & { key: string }
+
+/** --- 状态管理 --- */
+let container: HTMLElement | null = null
+const messages = shallowReactive<MessageItem[]>([])
+
+/** 消息关闭后回调 */
+const closedCallbacks = new Map<string, () => void>()
+
+/** 用于计数正在显示的 DOM 节点 (包含动画执行中) */
+let activeCount = 0
+let uid = 0
+
+/** --- 内部辅助函数 --- */
+
+/** 彻底销毁容器 */
+const destroy = () => {
+  if (container) {
+    render(null, container)
+    document.body.removeChild(container)
+    container = null
+  }
+}
+
+/** 离开动画结束后的清理 */
+const handleClosed = (id: string) => {
+  activeCount--
+
+  const cb = closedCallbacks.get(id)
+  if (cb) {
+    cb()
+    closedCallbacks.delete(id)
+  }
+
+  // 没有活跃消息时销毁容器，保持页面干净
+  if (activeCount === 0) destroy()
+}
+
+/** 触发关闭 (仅从数组移除，触发 Transition 离开动画) */
+const handleClose = (id: string) => {
+  const index = messages.findIndex((m) => m.key === id)
+  if (index !== -1) messages.splice(index, 1)
+}
+
+/** 挂载并渲染容器 */
+const ensureContainer = () => {
+  if (container) return container
+
+  container = document.createElement('ul')
+  container.className = cls.e('container')
+  document.body.appendChild(container)
+  return container
+}
+
+/** 执行 Vue 渲染逻辑 */
+const updateView = () => {
+  const el = ensureContainer()
+  setStyles(el, { zIndex: zIndex() })
+
+  const vnode = h(UMessageBox, {
+    messages,
+    onClosed: handleClosed,
+    onClose: (i: number) => messages.splice(i, 1)
+  })
+
+  vnode.appContext = message._context
+  render(vnode, el)
+}
+
+/** 创建消息实例 */
+const createMessage = (options: MessageOptions): MessageInstance => {
+  const { onClosed: userOnClosed, ...messageOptions } = options
+  const id = `msg_${uid++}`
+  activeCount++
+
+  // 生命周期 Promise
+  let resolveClosed: () => void
+  const onClosed = new Promise<void>((r) => (resolveClosed = r))
+
+  closedCallbacks.set(id, () => {
+    userOnClosed?.()
+    resolveClosed()
+  })
+
+  messages.push({ key: id, ...messageOptions })
+  updateView()
+
+  return { id, close: () => handleClose(id), onClosed }
+}
+
+/** --- 导出 API --- */
+
+export const message = ((options) => {
+  const mergedOptions = typeof options === 'string' ? { message: options } : options
+  return createMessage(mergedOptions)
+}) as Message
+
+message._context = null
+
+// 挂载快捷方法: message.success(...)
+const messageTypes = ['success', 'warn', 'info', 'error', 'default'] as const
+messageTypes.forEach((type) => {
+  message[type] = (msg, config) => message({ ...config, message: msg, type })
+})
+
+/** 关闭所有当前显示的消息 */
+message.closeAll = () => {
+  messages.splice(0)
+}

package/src/components/message/message.vue

@@ -0,0 +1,82 @@
+<template>
+  <li
+    :class="[cls.b, cls.m(size), cls.m('color-' + getTypeColor(type))]"
+    @mouseenter="suspendClose"
+    @mouseleave="close"
+  >
+    <div :class="cls.e('icon')">
+      <UIcon>
+        <component :is="getTypeIcon(type, icon)" />
+      </UIcon>
+    </div>
+    <div :class="cls.e('content')" v-if="html" v-html="message"></div>
+    <div :class="cls.e('content')" v-else>
+      {{ message }}
+    </div>
+    <div :class="cls.e('close')" v-if="closable || duration === 0" @click.stop="immediateClose">
+      <UIcon><Close /></UIcon>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { Close } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { onMounted } from 'vue'
+
+import type { MessageProps } from '../../types'
+import { UIcon } from '../icon'
+import { getTypeColor, getTypeIcon } from './helper'
+
+defineOptions({
+  name: 'Message'
+})
+
+const props = withDefaults(defineProps<MessageProps>(), {
+  type: 'default',
+  duration: 3000,
+  offset: 20
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { size } = useFallbackProps([props], {
+  size: 'default'
+})
+
+const cls = bem('message')
+
+let startTime = 0
+let timer: number
+let restDuration = 0
+
+function close() {
+  if (props.duration === 0) return
+  startTime = Date.now()
+  timer = setTimeout(() => {
+    emit('close')
+  }, restDuration)
+}
+
+function startClose() {
+  if (props.duration <= 0) return
+  restDuration = props.duration
+  close()
+}
+
+onMounted(() => {
+  startClose()
+})
+
+function suspendClose() {
+  clearTimeout(timer)
+  restDuration = restDuration - (Date.now() - startTime)
+}
+
+function immediateClose() {
+  emit('close')
+}
+</script>

package/src/components/message/style.scss

@@ -0,0 +1,89 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: message;
+
+@include m.b($root-name) {
+  display: flex;
+  padding: 0.75em;
+  line-height: 1;
+  align-items: center;
+  margin-bottom: fn.use-var(gap, large);
+  pointer-events: auto;
+
+  @include m.e(container) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: fn.use-var(gap, default) 0;
+    pointer-events: none;
+
+    @include m.flex;
+  }
+
+  @include m.e(content) {
+    max-width: 400px;
+    word-wrap: break-word;
+  }
+
+  @include m.e(close) {
+    cursor: pointer;
+  }
+
+  @include m.size using ($size) {
+    border-radius: fn.use-var(radius, $size);
+    font-size: fn.use-var('font-size', title, $size);
+
+    @include m.bem($root-name, icon) {
+      margin-right: fn.use-var(gap, $size);
+    }
+
+    @include m.bem($root-name, close) {
+      margin-left: fn.use-var(gap, $size);
+    }
+  }
+
+  @each $type, $_ in vars.$color-types {
+    @if ($type == 'default') {
+      @include m.m(color-#{$type}) {
+        background-color: fn.use-var(color, $type);
+        color: fn.use-var(text-color, main);
+        box-shadow: 0 0 4px 0px fn.use-var(color, $type);
+      }
+    } @else {
+      @include m.m(color-#{$type}) {
+        background-color: fn.use-var(color, $type, 'light-9');
+        color: fn.use-var(color, $type);
+        box-shadow: 0 0 4px 0px fn.use-var(color, $type, 'light-5');
+      }
+    }
+  }
+}
+
+.#{$root-name}-move, /* 对移动中的元素应用的过渡 */
+.#{$root-name}-enter-active,
+.#{$root-name}-leave-active {
+  transition-duration: 0.3s;
+  transition-timing-function: ease;
+  transition-property: opacity, transform;
+}
+
+.#{$root-name}-enter-from,
+.#{$root-name}-leave-to {
+  opacity: 0;
+  transform: translateY(-30px) scale(0.9);
+}
+
+/* 确保将离开的元素从布局流中删除
+  以便能够正确地计算移动的动画。 */
+.#{$root-name}-leave-active {
+  position: absolute;
+  width: max-content;
+}

package/src/components/message/style.ts

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

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

@@ -0,0 +1,3 @@
+export { default as UMessageConfirm } from './message-confirm.vue'
+
+export { default as MessageConfirm } from './message-confirm'

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

@@ -0,0 +1,31 @@
+import { zIndex } from '@veltra/utils'
+import { createVNode, render } from 'vue'
+
+import type { MessageConfirmProps, ColorType } from '../../types'
+import UMessageConfirm from './message-confirm.vue'
+
+const ColorTypeArray: ColorType[] = ['primary', 'success', 'info', 'warning', 'danger']
+
+type MessageConfirmFn = (options: MessageConfirmProps) => void
+
+type MessageConfirmTypeFn = {
+  [k in ColorType]: (message: string, onClose?: (action: 'cancel' | 'confirm') => void) => void
+} & MessageConfirmFn
+
+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!)
+}
+
+ColorTypeArray.forEach((type) => {
+  MessageConfirm[type] = (message: string, onClose?: (action: 'cancel' | 'confirm') => void) => {
+    return MessageConfirm({ message, confirmButtonType: type, onClose })
+  }
+})
+
+export default MessageConfirm as MessageConfirmTypeFn

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

@@ -0,0 +1,66 @@
+<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>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { zIndex } from '@veltra/utils'
+import { ref, onMounted } from 'vue'
+
+import type { MessageConfirmProps, ColorType, ComponentSize } from '../../types'
+import { UButton } from '../button'
+
+defineOptions({
+  name: 'MessageConfirm'
+})
+
+const props = withDefaults(defineProps<MessageConfirmProps>(), {
+  title: '',
+  message: '',
+  confirmButtonText: '确定',
+  confirmButtonType: 'primary' as ColorType,
+  cancelButtonText: ''
+})
+
+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

@@ -0,0 +1,70 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+// 方便拼接
+$root-name: message-confirm;
+
+@include m.b($root-name) {
+  @include m.e(mask) {
+    background-color: rgba(0, 0, 0, 0.32);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    @include m.flex($justify: center);
+  }
+
+  @include m.e(box) {
+    width: 420px;
+    background-color: #fff;
+    transition:
+      opacity 0.3s,
+      transform 0.4s;
+    transform: translateY(-50%);
+  }
+
+  @include m.e(header) {
+    font-weight: bold;
+  }
+
+  @include m.e(content) {
+    word-wrap: break-word;
+  }
+
+  @include m.e(footer) {
+    text-align: right;
+
+    &--btn {
+      margin-left: 10px;
+    }
+  }
+
+  @include m.size using ($size) {
+    @include m.bem($root-name, box) {
+      border-radius: fn.use-var(radius, $size);
+      font-size: fn.use-var('font-size', title, $size);
+      padding: calc(fn.use-var(gap, $size) * 1.8);
+    }
+
+    @include m.bem($root-name, header) {
+      font-size: fn.use-var('font-size', title, $size);
+    }
+  }
+}
+
+.#{$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;
+
+  @include m.bem($root-name, box) {
+    transform: translate(0, -100%);
+  }
+}

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

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

package/src/components/multi-select/di.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey } from 'vue'
+
+export const MultiSelectDIKey: InjectionKey<{
+  /** 选项类 */
+  optionClass: string
+  /** 波纹类 */
+  rippleClass: string
+  /** 复选框类 */
+  checkboxClass: string
+}> = Symbol('MultiSelectDIKey')

package/src/components/multi-select/index.ts

@@ -0,0 +1 @@
+export { default as UMultiSelect } from './multi-select.vue'

package/src/components/multi-select/multi-select-option.vue

@@ -0,0 +1,75 @@
+<template>
+  <li
+    :class="optionClass"
+    @click="handleClick"
+    @mousedown="handleMousedown"
+    @mouseup="handleMouseup"
+    @mouseleave="handleMouseleave"
+    :ref="measureElement"
+  >
+    <u-checkbox
+      :class="checkboxClass"
+      :model-value="checked"
+      @update:model-value="emit('check', $event)"
+      @click.stop
+      :disabled="disabled"
+    />
+
+    <slot />
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { Ripple } from '@veltra/directives'
+import { inject, onBeforeUnmount } from 'vue'
+
+import { UCheckbox } from '../checkbox'
+import { MultiSelectDIKey } from './di'
+
+defineOptions({
+  name: 'MultiSelectOption'
+})
+
+const { disabled = false, checked } = defineProps<{
+  option: Record<string, any>
+  disabled?: boolean
+  checked: boolean
+  measureElement?: (el: any) => void
+}>()
+
+const emit = defineEmits<{
+  (e: 'check', checked: boolean): void
+}>()
+
+const { optionClass, rippleClass, checkboxClass } = inject(MultiSelectDIKey)!
+
+let ripple: Ripple | null = null
+
+function handleClick(e) {
+  if (disabled) return
+  emit('check', !checked)
+}
+
+function handleMousedown(e: MouseEvent) {
+  if (disabled) return
+
+  ripple = new Ripple(e.currentTarget as HTMLElement, {
+    rippleClass
+  })
+
+  ripple.showByEvent(e)
+}
+
+function handleMouseleave() {
+  ripple?.remove()
+}
+
+function handleMouseup() {
+  ripple?.remove()
+}
+
+onBeforeUnmount(() => {
+  ripple?.remove()
+  ripple = null
+})
+</script>