u

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

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { useMessage } from '@ao/ao-design'
+
+const message = useMessage()
+
+function showMessage(placement: any) {
+  message.success({
+    message: `这里是 ${placement} 提示`,
+    placement,
+  })
+}
+function closeOne() {
+  const handle = message.success({
+    message: '测试',
+    duration: 0,
+    showClose: true,
+  })
+}
+
+function showMessageType(type: any) {
+  message.success({
+    message: `这里是 ${type} 提示`,
+    type,
+  })
+}
+</script>
+
+<template>
+  <div class="demo">
+    <div class="row">
+      <AButton status="primary" @click="showMessage('top-start')">
+        Top Start
+      </AButton>
+      <AButton status="primary" @click="showMessage('top')">
+        Top
+      </AButton>
+      <AButton status="primary" @click="showMessage('top-end')">
+        Top End
+      </AButton>
+    </div>
+
+    <div class="row">
+      <AButton status="primary" @click="showMessage('left')">
+        Left
+      </AButton>
+      <AButton status="primary" @click="showMessage('center')">
+        Center
+      </AButton>
+      <AButton status="primary" @click="showMessage('right')">
+        Right
+      </AButton>
+    </div>
+
+    <div class="row">
+      <AButton status="primary" @click="showMessage('bottom-start')">
+        Bottom Start
+      </AButton>
+      <AButton status="primary" @click="showMessage('bottom')">
+        Bottom
+      </AButton>
+      <AButton status="primary" @click="showMessage('bottom-end')">
+        Bottom End
+      </AButton>
+    </div>
+
+    <div class="row">
+      <AButton status="primary" @click="message.closeAll">
+        Close All
+      </AButton>
+
+      <AButton
+        status="primary" @click="closeOne"
+      >
+        Show No Close
+      </AButton>
+    </div>
+
+    <div class="row">
+      <AButton status="primary" @click="showMessageType('info')">
+        info
+      </AButton>
+      <AButton status="primary" @click="showMessageType('success')">
+        success
+      </AButton>
+      <AButton status="primary" @click="showMessageType('warning')">
+        warning
+      </AButton>
+      <AButton status="primary" @click="showMessageType('error')">
+        error
+      </AButton>
+      <AButton status="primary" @click="showMessageType('loading')">
+        loading
+      </AButton>
+      <AButton status="primary" @click="showMessageType('question')">
+        question
+      </AButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.demo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  margin-top: 40px;
+}
+
+.row {
+  display: flex;
+  gap: 12px;
+}
+</style>

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

@@ -59,6 +59,9 @@ $message-prefix: #{$prefix}-message;
   &-error {
     color: $danger-color;
   }
+  &-question {
+    color: $primary-color;
+  }
   &-loading {
     color: $primary-color;
   }

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

@@ -1,6 +1,6 @@
 import { createApp, h } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
-import Icon from '../icon/index'
+import MessageItem from './item'
 
 type Placement
   = | 'top'
@@ -13,9 +13,11 @@ type Placement
     | 'bottom-end'
     | 'center'
 
+type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'question'
+
 interface MessageOptions {
   message: string
-  type?: 'info' | 'success' | 'warning' | 'error' | 'loading'
+  type?: MessageType
   placement?: Placement
   duration?: number
   showClose?: boolean
@@ -65,57 +67,31 @@ function getTransform(placement: Placement, hidden: boolean) {
 export function useMessage(): MessageFn {
   const createMessage = (
     msg: string | MessageOptions,
-    defaultType: 'info' | 'success' | 'warning' | 'error' | 'loading' = 'info',
+    defaultType: MessageType = '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 { message, type, placement = 'top', duration = 3000, showClose } = 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',
-            },
+        return h(MessageItem, {
+          type,
+          message,
+          placement,
+          showClose,
+          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,
-          ],
-        )
+          onClose: () => handle?.close?.(),
+        })
       },
     })
 
@@ -153,7 +129,6 @@ export function useMessage(): MessageFn {
 
     instances.push(handle)
 
-    // 自动关闭
     if (duration > 0) {
       timer = window.setTimeout(() => {
         handle.close()

code/base-project/base-vue/packages/ao-design/src/message/item.tsx

@@ -0,0 +1,54 @@
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import Icon from '../icon/index'
+
+const prefixCls = getPrefixCls('message')
+
+export default defineComponent({
+  name: 'MessageItem',
+  props: {
+    type: { type: String, default: 'info' },
+    message: { type: String, required: true },
+    placement: { type: String, required: true },
+    showClose: { type: Boolean, default: false },
+    onClose: {
+      type: Function as PropType<() => void>,
+      required: false,
+    },
+  },
+  setup(props) {
+    const iconMap: Record<string, string> = {
+      success: 'ix:success-filled',
+      error: 'ix:error-filled',
+      warning: 'ix:warning-filled',
+      info: 'ix:info-filled',
+      question: 'ix:question-filled',
+      loading: 'mingcute:loading-line',
+    }
+
+    return () => (
+      <div
+        class={`${prefixCls}-item`}
+      >
+        <Icon
+          icon={iconMap[props.type ?? 'info']}
+          size={20}
+          class={`${prefixCls}-icon ${prefixCls}-${props.type ?? 'info'}`}
+          spin={props.type === 'loading'}
+        />
+        <span class={`${prefixCls}-content`}>{props.message}</span>
+        {props.showClose
+          ? (
+              <Icon
+                icon="ix:close"
+                size={14}
+                class={`${prefixCls}-close`}
+                onClick={() => props.onClose?.()}
+              />
+            )
+          : null}
+      </div>
+    )
+  },
+})

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

@@ -0,0 +1,177 @@
+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' | 'question'
+  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' | 'question' | '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',
+      question: 'ix:question-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
+}