u

code/base-project/base-vue/packages/ao-design/src/message/index.scss

@@ -0,0 +1,128 @@
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
+
+$message-prefix: #{$prefix}-message;
+
+.#{$message-prefix} {
+  &-wrapper {
+    position: fixed;
+    z-index: 6000;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  &-item {
+    display: inline-flex;
+    align-items: center;
+    outline: 0;
+    width: fit-content;
+    vertical-align: middle;
+    border-radius: $border-radius;
+    padding: 6px 12px;
+    background-color: $bg-color-container;
+    color: $text-color-base;
+    box-shadow: $shadow-overlay;
+    box-sizing: border-box;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  &-content {
+    font-size: 14px;
+    line-height: 1;
+  }
+  &-icon {
+    flex-shrink: 0;
+    margin-right: 8px;
+  }
+
+  &-close {
+    flex-shrink: 0;
+    margin-left: 6px;
+    color: $text-color-assist;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    &:hover {
+      background-color: $default-color-hover;
+    }
+  }
+
+  &-info {
+    color: $primary-color;
+  }
+  &-success {
+    color: $success-color;
+  }
+  &-warning {
+    color: $warning-color;
+  }
+  &-error {
+    color: $danger-color;
+  }
+  &-loading {
+    color: $primary-color;
+  }
+  &-placement {
+    &-top {
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: column;
+      align-items: center;
+    }
+    &-bottom {
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: column-reverse;
+      align-items: center;
+    }
+    &-left {
+      top: 50%;
+      left: 20px;
+      transform: translateY(-50%);
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    &-right {
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    // 组合方向
+    &-top-start {
+      top: 20px;
+      left: 20px;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    &-top-end {
+      top: 20px;
+      right: 20px;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+    &-bottom-start {
+      bottom: 20px;
+      left: 20px;
+      flex-direction: column-reverse;
+      align-items: flex-start;
+    }
+    &-bottom-end {
+      bottom: 20px;
+      right: 20px;
+      flex-direction: column-reverse;
+      align-items: flex-end;
+    }
+    &-center {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}

code/base-project/base-vue/packages/ao-design/src/message/index.ts

@@ -0,0 +1,176 @@
+import { createApp, h } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import Icon from '../icon/index'
+
+type Placement
+  = | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'center'
+
+interface MessageOptions {
+  message: string
+  type?: 'info' | 'success' | 'warning' | 'error' | 'loading'
+  placement?: Placement
+  duration?: number
+  showClose?: boolean
+}
+
+interface MessageHandle {
+  close: () => void
+}
+
+interface MessageFn {
+  (msg: string | MessageOptions): MessageHandle
+  info: (msg: string | MessageOptions) => MessageHandle
+  success: (msg: string | MessageOptions) => MessageHandle
+  warning: (msg: string | MessageOptions) => MessageHandle
+  error: (msg: string | MessageOptions) => MessageHandle
+  closeAll: () => void
+}
+
+const prefixCls = getPrefixCls('message')
+const containers: Partial<Record<Placement, HTMLElement>> = {}
+const instances: MessageHandle[] = []
+
+function getContainer(placement: Placement = 'top') {
+  if (!containers[placement]) {
+    const wrapper = document.createElement('div')
+    wrapper.className = `${prefixCls}-wrapper ${prefixCls}-placement-${placement}`
+    document.body.appendChild(wrapper)
+    containers[placement] = wrapper
+  }
+  return containers[placement]!
+}
+
+function getTransform(placement: Placement, hidden: boolean) {
+  if (placement.startsWith('top'))
+    return hidden ? 'translateY(-10px)' : 'translateY(0)'
+  if (placement.startsWith('bottom'))
+    return hidden ? 'translateY(10px)' : 'translateY(0)'
+  if (placement.startsWith('left'))
+    return hidden ? 'translateX(-10px)' : 'translateX(0)'
+  if (placement.startsWith('right'))
+    return hidden ? 'translateX(10px)' : 'translateX(0)'
+  if (placement === 'center')
+    return hidden ? 'scale(0.8)' : 'scale(1)'
+  return hidden ? 'translateY(-10px)' : 'translateY(0)'
+}
+
+export function useMessage(): MessageFn {
+  const createMessage = (
+    msg: string | MessageOptions,
+    defaultType: 'info' | 'success' | 'warning' | 'error' | 'loading' = 'info',
+  ): MessageHandle => {
+    const opts: MessageOptions = typeof msg === 'string'
+      ? { message: msg, type: defaultType }
+      : { ...msg, type: msg.type || defaultType }
+
+    const { message, type, placement = 'top', duration = 3000 } = opts
+    const container = getContainer(placement)
+
+    let timer: number | undefined
+
+    const iconMap: Record<string, string> = {
+      success: 'ix:success-filled',
+      error: 'ix:error-filled',
+      warning: 'ix:warning-filled',
+      info: 'ix:info-filled',
+      loading: 'mingcute:loading-line',
+    }
+
+    let handle: MessageHandle
+
+    const app = createApp({
+      render() {
+        return h(
+          'div',
+          {
+            class: [`${prefixCls}-item`],
+            style: {
+              opacity: 0,
+              transform: getTransform(placement, true),
+              transition: 'all 0.3s ease-in-out',
+            },
+          },
+          [
+            h(Icon, {
+              icon: iconMap[type ?? 'info'],
+              size: 20,
+              class: `${prefixCls}-icon ${prefixCls}-${type ?? 'info'}`,
+              spin: type === 'loading',
+            }),
+            h('span', { class: `${prefixCls}-content` }, message),
+            opts.showClose
+              ? h(Icon, {
+                  icon: 'ix:close',
+                  size: 14,
+                  class: `${prefixCls}-close`,
+                  onClick: () => handle?.close?.(),
+                })
+              : null,
+          ],
+        )
+      },
+    })
+
+    const vm = app.mount(document.createElement('div'))
+    container.appendChild(vm.$el)
+
+    // 出现动画
+    requestAnimationFrame(() => {
+      Object.assign(vm.$el.style, {
+        opacity: '1',
+        transform: getTransform(placement, false),
+      })
+    })
+
+    handle = {
+      close: () => {
+        if (timer)
+          clearTimeout(timer)
+
+        Object.assign(vm.$el.style, {
+          opacity: '0',
+          transform: getTransform(placement, true),
+        })
+
+        setTimeout(() => {
+          if (container.contains(vm.$el))
+            container.removeChild(vm.$el)
+          app.unmount()
+          const index = instances.indexOf(handle)
+          if (index !== -1)
+            instances.splice(index, 1)
+        }, 300)
+      },
+    }
+
+    instances.push(handle)
+
+    // 自动关闭
+    if (duration > 0) {
+      timer = window.setTimeout(() => {
+        handle.close()
+      }, duration)
+    }
+
+    return handle
+  }
+
+  const api = ((msg: string | MessageOptions) => createMessage(msg)) as MessageFn
+  api.info = msg => createMessage(msg, 'info')
+  api.success = msg => createMessage(msg, 'success')
+  api.warning = msg => createMessage(msg, 'warning')
+  api.error = msg => createMessage(msg, 'error')
+  api.closeAll = () => {
+    instances.slice().forEach(instance => instance.close())
+  }
+
+  return api
+}