feat: message组件

1. 新增一个message组件

src/assets/svg/error.svg

@@ -0,0 +1 @@
+<svg t="1721287201210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6236" width="200" height="200"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m0 810.666666c-204.8 0-373.333333-168.533333-373.333333-373.333333S307.2 138.666667 512 138.666667 885.333333 307.2 885.333333 512 716.8 885.333333 512 885.333333z" fill="#666666" p-id="6237"></path><path d="M657.066667 360.533333c-12.8-12.8-32-12.8-44.8 0l-102.4 102.4-102.4-102.4c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l102.4 102.4-102.4 102.4c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466666 8.533334s17.066667-2.133333 23.466667-8.533334l102.4-102.4 102.4 102.4c6.4 6.4 14.933333 8.533333 23.466667 8.533334s17.066667-2.133333 23.466666-8.533334c12.8-12.8 12.8-32 0-44.8l-106.666666-100.266666 102.4-102.4c12.8-12.8 12.8-34.133333 0-46.933334z"  p-id="6238"></path></svg>

src/assets/svg/info.svg

@@ -0,0 +1 @@
+<svg t="1721287152938" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5263" width="200" height="200"><path d="M660 760h-84.992V356q0-15.008-10.496-25.504T539.008 320h-96q-15.008 0-25.504 10.496t-10.496 25.504q0 14.016 10.496 24.992t25.504 11.008h60v368h-84.992q-15.008 0-25.504 10.496t-10.496 25.504q0 15.008 10.496 25.504t25.504 10.496h242.016q15.008 0 25.504-10.496t10.496-25.504q0-15.008-10.496-25.504t-25.504-10.496zM503.008 220.512q0-14.496 10.496-25.504t25.504-11.008 25.504 11.008 10.496 25.504-10.496 24.992-25.504 10.496-25.504-10.496-10.496-24.992z" p-id="5264"></path></svg>

src/assets/svg/success.svg

@@ -0,0 +1 @@
+<svg t="1721287111768" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4285" width="200" height="200"><path d="M122.28096 536.623104c-9.940992-9.925632-11.548672-25.360384-2.78528-36.407296l20.487168-25.828352c8.397824-10.58816 24.108032-13.246464 35.211264-5.835776l177.3312 118.35904c9.353216 6.243328 25.452544 5.430272 34.185216-1.654784l468.5824-380.16c10.532864-8.54528 27.030528-7.817216 36.261888 1.400832l11.542528 11.52512c10.04544 10.03008 9.314304 25.951232-1.215488 36.465664l-502.92736 502.183936c-15.64672 15.624192-41.337856 14.94016-57.445376-1.142784l-219.22816-218.9056z"  p-id="4286"></path></svg>

src/assets/svg/waring.svg

@@ -0,0 +1 @@
+<svg t="1721287240168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7204" width="200" height="200"><path d="M522.656 388.064a32 32 0 0 0-32 32v160a32 32 0 0 0 64 0v-160a32 32 0 0 0-32-32M522.656 676.064a32 32 0 1 0 0 64 32 32 0 0 0 0-64" fill="#3E3A39" p-id="7205"></path><path d="M714.656 795.616H203.072l127.584-221.888 33.152-57.664 158.848-276.224 158.816 276.224 33.184 57.696 127.552 221.856h-127.552z m194.528-11.968L566.528 187.712c-10.144-17.6-26.112-27.712-43.872-27.712s-33.728 10.112-43.84 27.712L136.096 783.648c-10.048 17.568-10.784 36.48-1.92 51.84 8.896 15.328 25.6 24.128 45.824 24.128H865.344c20.16 0 36.864-8.8 45.76-24.128 8.896-15.36 8.192-34.24-1.92-51.84z"  p-id="7206"></path></svg>

src/components/public/kui-dialog.vue

@@ -8,7 +8,6 @@ defineProps({
     type: String,
     default: ''
   }
-
 })
 defineEmits(['close'])
 
@@ -44,7 +43,7 @@ defineEmits(['close'])
 </script>
 
 <template>
-  <Teleport to="#kui-dialog" v-if="show">
+  <Teleport to="#kui-root" v-if="show">
     <div :class="className">
       <slot></slot>
     </div>

src/components/public/kui/message/index.ts

@@ -0,0 +1,50 @@
+import MessageManager from "./instance.ts";
+import _message from "./kui-message-list.vue";
+import {MessageConfig, MessageFn, NotifyType} from "@/types/BaseTypes.ts";
+import {isNumber, isString} from "@/util/util.ts";
+import {App, AppContext} from "vue";
+
+let msg: MessageManager | null = null;
+const types = ["log", "info", "success", "warning", "warn", "error", "loading"] as const;
+
+
+const _msgName = _message.name ?? "kui-message-list";
+const message = types.reduce((pre, val) => {
+    pre[val] = (config: string | MessageConfig, appContext?: AppContext | number) => {
+        let duration = 2000;
+        if (isString(config)) {
+            config = { content: config as string };
+        }
+        if (isNumber(appContext)){
+            duration = appContext as number;
+        }
+        let type = val;
+        if(type === "log"){
+            type = "info";
+        }
+        if(type === "warn"){
+            type = "warning";
+        }
+
+        const _config: MessageConfig = {
+            type: type as NotifyType,
+            duration: duration,
+            ...(config as MessageConfig)
+        };
+        if (!msg) {
+            msg = new MessageManager(appContext as AppContext);
+        }
+        console.log("kui-message", _config)
+
+        return msg!.add(_config);
+    };
+    return pre;
+}, {} as any)
+
+const Message = Object.assign({
+    ...message,
+    install: (app: App) => {
+        app.component(_msgName, _message);
+    },
+});
+export default Message as MessageFn;

src/components/public/kui/message/instance.ts

@@ -0,0 +1,75 @@
+import { AppContext, Ref, createVNode, reactive, ref, render } from "vue";
+import Message from "./kui-message-list.vue";
+import {MessageConfig, MessageItem} from "@/types/BaseTypes.ts";
+
+class MessageManager {
+  private container: HTMLElement | null;
+  private readonly messageList: Ref<MessageItem[]>;
+
+  constructor(appContext?: AppContext) {
+    this.messageList = ref([]);
+
+    const mask = document.createElement("div");
+    mask.setAttribute("class", `kui-mask-message`);
+    this.container = mask;
+
+    const vm = createVNode(Message, {
+      list: this.messageList.value,
+      onClose: this.remove,
+    });
+
+    if (appContext) {
+      vm.appContext = appContext;
+    }
+    render(vm, this.container);
+    // 默认渲染至 kui-root 中
+    let targetDom = document.getElementById("kui-root")
+    if (!targetDom) {
+      targetDom = document.body
+    }
+    targetDom.appendChild(this.container);
+  }
+
+  /**
+   * 添加消息提示
+   * @param {MessageConfig} config
+   * @returns
+   */
+  add = (config: MessageConfig) => {
+    const id = config.id ?? `_kui_message_${Math.random().toString()}`;
+
+    const message: MessageItem = reactive({ id, ...config });
+    this.messageList.value.push(message);
+
+    // 处理可能存在的同时移除情况。
+    const len = this.messageList.value.length;
+    if (len > 1 && this.messageList.value[len - 1]?.duration === message.duration) {
+      message.duration = message.duration ?? 3000 + 200 * len;
+    }
+
+    return {
+      close: () => this.remove(id),
+    };
+  };
+
+  /**
+   * 移除消息提示
+   * @param {string | number} id 消息id
+   */
+  remove = (id: string | number) => {
+    for (let i = 0; i < this.messageList.value.length; i++) {
+      const { id: itemId } = this.messageList.value[i];
+
+      if (id === itemId) {
+        this.messageList.value.splice(i, 1);
+        break;
+      }
+    }
+  };
+
+  clear = ()=>{
+    this.messageList.value = [];
+  }
+}
+
+export default MessageManager;

src/components/public/kui/message/kui-message-list.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import {PropType} from "vue";
+import {MessageItem} from "@/types/BaseTypes.ts";
+import kuiMessage from "./kui-message.vue";
+
+defineProps({
+  list: { type: Array as PropType<MessageItem[]>, default: () => [] },
+});
+const emits = defineEmits<{
+  (e: "close", id: string | number): void;
+}>();
+
+const onClose = (id: string | number) => emits("close", id);
+
+</script>
+
+<template>
+  <TransitionGroup class="kui-message-list" name="fademsg" tag="ul">
+    <template v-for="v in list" :key="`${v.id}`">
+      <kui-message
+          :id="v.id"
+          :type="v.type"
+          :text="v.content"
+          :duration="v.duration"
+          :closeable="v.closeable"
+          @close="onClose"
+      />
+    </template>
+  </TransitionGroup>
+</template>
+
+<style>
+.kui-mask-message {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 1001;
+}
+.kui-message-list {
+  position: relative;
+  top: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  font-size: 16px;
+}
+.kui-message-list .kui-message {
+  min-width: 80px;
+  width: max-content;
+  border-radius: 3px;
+  background: #ffffff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 5px 8px;
+  border: 1px solid #f0f0f0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 14px;
+  line-height: 1;
+  text-align: center;
+  list-style: none;
+  overflow: hidden;
+  -webkit-appearance: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.kui-message-list .kui-message-icon {
+  font-size: 18px;
+  margin-right: 6px;
+}
+.kui-message-list .info {
+  color: #626161;
+}
+.kui-message-list .success {
+  color: #52c41a;
+}
+.kui-message-list .error {
+  color: #f5222d;
+}
+.kui-message-list .warning {
+  color: #fa8c16;
+}
+.kui-message-list .loading {
+  display: inline-block;
+  color: #1677ff;
+  animation: rotating 0.8s linear infinite;
+  -webkit-animation: rotating 0.8s linear infinite;
+}
+.kui-message-list .kui-message-content {
+  font-size: 14px;
+  font-weight: normal;
+  letter-spacing: .2px;
+  color: #262626;
+}
+.kui-message-list .kui-message-close {
+  margin-left: 6px;
+}
+.kui-message-list .kui-message-close .ri-close-line {
+  color: #8c8c8c;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.kui-message-list .kui-message-close .ri-close-line::before {
+  padding: 2px;
+  border-radius: 10px;
+  transition: all 0.2s ease;
+}
+.kui-message-list .kui-message-close .ri-close-line:hover {
+  color: #595959;
+}
+.kui-message-list .kui-message-close .ri-close-line:hover::before {
+  background-color: #f0f0f0;
+  transition: all 0.2s ease;
+}
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+    -webkit-transform: rotate(365deg);
+  }
+}
+.fademsg-move,
+.fademsg-enter-active,
+.fademsg-leave-active {
+  transition: all 0.2s cubic-bezier(0, 0, 1, 1);
+}
+.fademsg-enter-from,
+.fademsg-leave-to {
+  opacity: 0;
+}
+.fademsg-leave-active {
+  position: absolute;
+}
+</style>

src/components/public/kui/message/kui-message.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+
+import {NotifyType} from "@/types/BaseTypes.ts";
+import {nextTick, onMounted, onUnmounted, PropType, ref} from "vue";
+import IconSvg from "@/components/public/icon/iconSvg.vue";
+
+const props = defineProps({
+  id: {type: [String, Number], default: ""},
+  type: {
+    type: String as PropType<NotifyType>,
+    default: NotifyType.info
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+  duration: {
+    type: Number,
+    default: 2000
+  },
+  // 是否可关闭
+  closeable: {
+    type: Boolean,
+    default: false
+  },
+})
+const emits = defineEmits<{
+  close: [id: string | number];
+}>();
+
+const timer = ref(0);
+const init = () => {
+  if (props.duration > 0 && props.type !== NotifyType.Loading) {
+    console.log("timer", props.duration)
+    timer.value = window.setTimeout(handleClose, props.duration);
+  }
+};
+const clearTimer = () => {
+  if (timer) {
+    window.clearTimeout(timer.value);
+    timer.value = 0;
+  }
+};
+
+const handleClose = () => {
+  emits("close", props.id);
+};
+
+onMounted(() => {
+  nextTick(() => init());
+});
+
+onUnmounted(() => {
+  clearTimer();
+});
+
+
+</script>
+
+<template>
+    <li class="kui-message" >
+      <icon-svg :class="`kui-message-icon ${type}`" :icon-name="type"></icon-svg>
+      <span>{{text}}</span>
+      <span v-if="closeable" class="kui-message-close" @click="handleClose">
+        <icon-svg icon-name="close"></icon-svg>
+      </span>
+    </li>
+</template>
+
+<style scoped>
+</style>

src/types/BaseTypes.ts

@@ -0,0 +1,42 @@
+// 弹窗类型 type: success, error, info, warning
+import {AppContext} from "vue";
+
+export enum NotifyType {
+    success = 'success',
+    error = 'error',
+    info = 'info',
+    warning = 'warning',
+    Loading = "loading",
+}
+
+export interface MessageItem {
+    id: number | string;
+    type?: NotifyType;
+    content: string;
+    duration?: number;
+    closeable?: boolean;
+}
+
+export interface MessageConfig {
+    id?: number | string;
+    type?: NotifyType;
+    content: string;
+    duration?: number;
+    closeable?: boolean;
+}
+
+export interface messageFn {
+    (config: string | MessageConfig, appContext?: AppContext | number): number | string;
+    (config: string | MessageConfig, duration? : number): number | string;
+}
+
+// 扩展类型
+export interface MessageFn extends messageFn {
+    log: messageFn;
+    success: messageFn;
+    error: messageFn;
+    info: messageFn;
+    warn: messageFn;
+    warning: messageFn;
+    loading: messageFn;
+}

src/util/util.ts

@@ -0,0 +1,8 @@
+/**
+ * 判断变量是否为字符串
+ * @param {*} data
+ * @returns {Boolean}
+ */
+export const isString = (data: any): boolean => typeof data === "string";
+
+export const isNumber = (data: any): boolean => typeof data === "number";