From de9acf14c1f363d88634859b6ee7af81ff9a8726 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Mon, 20 Mar 2023 23:09:58 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Emessage=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=8F=90=E7=A4=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/message/OMessage.vue       |  42 +++++++
 .../src/components/message/OMessageList.vue   |  66 +++++++++++
 .../message/__demo__/IndexMessage.vue         |  10 ++
 .../message/__demo__/MessageBasic.vue         |  43 +++++++
 .../src/components/message/index.ts           |  14 +++
 .../src/components/message/style/index.scss   |  43 +++++++
 .../src/components/message/style/index.ts     |   2 +
 .../src/components/message/style/var.scss     |  29 +++++
 .../src/components/message/types.ts           |  26 +++++
 .../src/components/message/use-message.ts     | 108 ++++++++++++++++++
 packages/portal/src/router.ts                 |  12 ++
 11 files changed, 395 insertions(+)
 create mode 100644 packages/opendesign/src/components/message/OMessage.vue
 create mode 100644 packages/opendesign/src/components/message/OMessageList.vue
 create mode 100644 packages/opendesign/src/components/message/__demo__/IndexMessage.vue
 create mode 100644 packages/opendesign/src/components/message/__demo__/MessageBasic.vue
 create mode 100644 packages/opendesign/src/components/message/index.ts
 create mode 100644 packages/opendesign/src/components/message/style/index.scss
 create mode 100644 packages/opendesign/src/components/message/style/index.ts
 create mode 100644 packages/opendesign/src/components/message/style/var.scss
 create mode 100644 packages/opendesign/src/components/message/types.ts
 create mode 100644 packages/opendesign/src/components/message/use-message.ts

diff --git a/packages/opendesign/src/components/message/OMessage.vue b/packages/opendesign/src/components/message/OMessage.vue
new file mode 100644
index 00000000..b55cef66
--- /dev/null
+++ b/packages/opendesign/src/components/message/OMessage.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+import { messageProps } from './types';
+
+const props = defineProps(messageProps);
+
+const emits = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+let timer = 0;
+
+const clearTimer = () => {
+  if (timer) {
+    window.clearTimeout(timer);
+    timer = 0;
+  }
+};
+
+const startTimer = () => {
+  if (props.duration <= 0) {
+    return;
+  }
+
+  timer = window.setTimeout(() => {
+    emits('close');
+    clearTimer();
+  }, props.duration);
+};
+
+onMounted(() => {
+  startTimer();
+});
+
+onUnmounted(() => {
+  clearTimer();
+});
+</script>
+
+<template>
+  <div class="o-message" :class="[`o-message-${props.color}`]" @mouseenter="clearTimer" @mouseleave="startTimer">{{ props.content }}</div>
+</template>
diff --git a/packages/opendesign/src/components/message/OMessageList.vue b/packages/opendesign/src/components/message/OMessageList.vue
new file mode 100644
index 00000000..0b45998f
--- /dev/null
+++ b/packages/opendesign/src/components/message/OMessageList.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { MessagePositionT, MessageParamsT } from './types';
+import OMessage from './OMessage.vue';
+
+interface MessageListPropsT {
+  position?: MessagePositionT;
+  onDestory?: () => void;
+}
+
+const props = withDefaults(defineProps<MessageListPropsT>(), {
+  position: 'top',
+  onDestory: undefined,
+});
+
+const getUniqueId = (() => {
+  let id = 0;
+  return () => {
+    id += 1;
+    return id;
+  };
+})();
+
+type MessageListOptionT = MessageParamsT & { id: number };
+
+const optionList: Ref<Array<MessageListOptionT>> = ref([]);
+
+const add = (params: MessageParamsT) => {
+  const option = {
+    id: getUniqueId(),
+    ...params,
+  };
+  optionList.value.push(option);
+};
+
+const remove = (idx: number) => {
+  optionList.value.splice(idx, 1);
+};
+
+const removeAll = () => {
+  optionList.value = [];
+};
+
+const handleClose = (item: MessageListOptionT) => {
+  const { id, onClose } = item;
+  onClose?.();
+
+  const idx = optionList.value.findIndex((option) => option.id === id);
+  remove(idx);
+
+  if (optionList.value.length === 0 && props.onDestory) {
+    props.onDestory();
+  }
+};
+
+defineExpose({ add, remove, removeAll });
+</script>
+
+<template>
+  <div v-if="optionList.length" class="o-message-list" :class="[`o-message-${props.position}`]">
+    <TransitionGroup name="fade-message">
+      <OMessage v-for="item in optionList" :key="item.id" :content="item.content" :color="item.color" :duration="item.duration" @close="handleClose(item)" />
+    </TransitionGroup>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/message/__demo__/IndexMessage.vue b/packages/opendesign/src/components/message/__demo__/IndexMessage.vue
new file mode 100644
index 00000000..e074ad35
--- /dev/null
+++ b/packages/opendesign/src/components/message/__demo__/IndexMessage.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import MessageBasic from './MessageBasic.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <MessageBasic />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/message/__demo__/MessageBasic.vue b/packages/opendesign/src/components/message/__demo__/MessageBasic.vue
new file mode 100644
index 00000000..651c77c8
--- /dev/null
+++ b/packages/opendesign/src/components/message/__demo__/MessageBasic.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import '../style';
+import useMessage from '../use-message';
+
+import { OButton } from '../../button';
+import '../../button/style';
+
+const message = useMessage();
+
+const handlePrimaryBtnClick = () => {
+  message.normal({
+    content: '用于表示普通操作信息提示，3秒后消失',
+  });
+};
+
+const handleSuccessBtnClick = () => {
+  message.success({
+    content: '用于表示操作顺利达成，3秒后消失',
+  });
+};
+
+const handleWarningBtnClick = () => {
+  message.warning({
+    content: '用于表示操作引起一定后果，3秒后消失',
+  });
+};
+
+const handleDangerBtnClick = () => {
+  message.danger({
+    content: '用于表示操作引起严重的后果，3秒后消失',
+  });
+};
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <OButton color="normal" @click="handlePrimaryBtnClick">Info Message</OButton>
+    <OButton color="success" @click="handleSuccessBtnClick">Success Message</OButton>
+    <OButton color="warning" @click="handleWarningBtnClick">Warning Message</OButton>
+    <OButton color="danger" @click="handleDangerBtnClick">Danger Message</OButton>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/message/index.ts b/packages/opendesign/src/components/message/index.ts
new file mode 100644
index 00000000..c5bf9797
--- /dev/null
+++ b/packages/opendesign/src/components/message/index.ts
@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+
+import _OMessage from './OMessage.vue';
+import useMessage from './use-message';
+
+const OMessage = Object.assign(_OMessage, {
+  install(app: App) {
+    app.component(_OMessage.name, _OMessage);
+  },
+});
+
+export * from './types';
+
+export { OMessage, useMessage };
diff --git a/packages/opendesign/src/components/message/style/index.scss b/packages/opendesign/src/components/message/style/index.scss
new file mode 100644
index 00000000..370d2754
--- /dev/null
+++ b/packages/opendesign/src/components/message/style/index.scss
@@ -0,0 +1,43 @@
+@use './var.scss';
+
+.o-message {
+  display: flex;
+  align-items: center;
+  padding: var(--message-padding);
+  font-size: var(--message-text-size);
+  line-height: var(--message-text-height);
+  color: var(--message-color);
+  background-color: var(--message-bg-color);
+  border-radius: var(--message-radius);
+  border: 1px solid var(--message-bd-color);
+  width: fit-content;
+  transition: all var(--o-duration-m1) var(--o-easing-standard-out);
+}
+
+.o-message + .o-message {
+  margin-top: 16px;
+}
+
+.o-message-list {
+  position: fixed;
+  z-index: 1001;
+  left: 50%;
+  top: 32px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.fade-message-enter-from {
+  opacity: 0;
+}
+
+.fade-message-enter-active,
+.fade-message-leave-active {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-out);
+}
+
+.fade-message-leave-to {
+  opacity: 0;
+}
diff --git a/packages/opendesign/src/components/message/style/index.ts b/packages/opendesign/src/components/message/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/message/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/message/style/var.scss b/packages/opendesign/src/components/message/style/var.scss
new file mode 100644
index 00000000..70cb1eeb
--- /dev/null
+++ b/packages/opendesign/src/components/message/style/var.scss
@@ -0,0 +1,29 @@
+.o-message {
+  --message-padding: 8px 16px;
+  --message-text-size: var(--o-font_size-text1);
+  --message-text-height: var(--o-line_height-text1);
+
+  --message-color: var(--o-color-info1);
+
+  --message-radius: var(--o-radius-control-m);
+}
+
+.o-message-normal {
+  --message-bg-color: var(--o-color-control-light);
+  --message-bd-color: var(--o-color-control1);
+}
+
+.o-message-success {
+  --message-bg-color: var(--o-color-success4-light);
+  --message-bd-color: var(--o-color-success1);
+}
+
+.o-message-warning {
+  --message-bg-color: var(--o-color-warning4-light);
+  --message-bd-color: var(--o-color-warning1);
+}
+
+.o-message-danger {
+  --message-bg-color: var(--o-color-danger4-light);
+  --message-bd-color: var(--o-color-danger1);
+}
diff --git a/packages/opendesign/src/components/message/types.ts b/packages/opendesign/src/components/message/types.ts
new file mode 100644
index 00000000..6f7d7b19
--- /dev/null
+++ b/packages/opendesign/src/components/message/types.ts
@@ -0,0 +1,26 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { ColorT } from '../_shared/global';
+
+export const messageProps = {
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal',
+  },
+  content: {
+    type: String,
+    default: '',
+  },
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  onClose: {
+    type: Function as PropType<() => void>,
+  },
+};
+
+export type MessagePropsT = ExtractPropTypes<typeof messageProps>;
+
+export type MessagePositionT = 'top' | 'bottom';
+
+export type MessageParamsT = Partial<MessagePropsT & { position: MessagePositionT }>;
diff --git a/packages/opendesign/src/components/message/use-message.ts b/packages/opendesign/src/components/message/use-message.ts
new file mode 100644
index 00000000..4df6da19
--- /dev/null
+++ b/packages/opendesign/src/components/message/use-message.ts
@@ -0,0 +1,108 @@
+import { createVNode, render } from 'vue';
+import { isString } from '../_shared/is';
+import { MessageParamsT } from './types';
+import OMessageList from './OMessageList.vue';
+
+const DEFAULT_OPTIONS: MessageParamsT = {
+  color: 'normal',
+  position: 'top',
+  duration: 3000,
+};
+
+const instanceMap = new Map();
+
+const normalizeOptions = (params: MessageParamsT) => {
+  const options: MessageParamsT = !params || isString(params) ? { content: params } : params;
+
+  const normalized = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+  };
+
+  return normalized;
+};
+
+const showMessage = (params: MessageParamsT) => {
+  const { position } = params;
+
+  const instance = instanceMap.get(position);
+  if (!instance) {
+    let wrap: HTMLDivElement | null = document.createElement('div');
+
+    const vnode = createVNode(OMessageList, {
+      position: params.position,
+      onDestory: () => {
+        if (wrap) {
+          document.body.removeChild(wrap);
+          wrap = null;
+        }
+        instanceMap.set(position, undefined);
+      },
+    });
+
+    render(vnode, wrap);
+
+    const vm = vnode.component!;
+    vm.exposed?.add(params);
+
+    instanceMap.set(position, vm);
+
+    document.body.appendChild(wrap);
+  } else {
+    instance.exposed?.add(params);
+  }
+};
+
+const normal = (params: MessageParamsT): void => {
+  const options: MessageParamsT = normalizeOptions(params);
+  showMessage({
+    ...options,
+    color: 'normal',
+  });
+};
+
+const primary = (params: MessageParamsT): void => {
+  const options: MessageParamsT = normalizeOptions(params);
+  showMessage({
+    ...options,
+    color: 'primary',
+  });
+};
+
+const success = (params: MessageParamsT): void => {
+  const options: MessageParamsT = normalizeOptions(params);
+  showMessage({
+    ...options,
+    color: 'success',
+  });
+};
+
+const warning = (params: MessageParamsT): void => {
+  const options: MessageParamsT = normalizeOptions(params);
+  showMessage({
+    ...options,
+    color: 'warning',
+  });
+};
+
+const danger = (params: MessageParamsT): void => {
+  const options: MessageParamsT = normalizeOptions(params);
+  showMessage({
+    ...options,
+    color: 'danger',
+  });
+};
+
+const Message = {
+  normal,
+  primary,
+  success,
+  warning,
+  danger,
+};
+
+const useMessage = () => {
+  return Message;
+};
+
+export default useMessage;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index f57e6dfa..4848a27a 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -68,6 +68,12 @@ export const routes = [
     label: '下拉框',
     component: () => import('@components/select/__demo__/IndexSelect.vue'),
   },
+  // {
+  //   path: '/cascader',
+  //   name: 'Cascader',
+  //   label: '级联选择器',
+  //   component: () => import('@components/cascader/__demo__/IndexCascader.vue'),
+  // },
   {
     path: '/radio',
     name: 'Radio',
@@ -164,6 +170,12 @@ export const routes = [
     label: '卡片',
     component: () => import('@components/card/__demo__/IndexCard.vue'),
   },
+  {
+    path: '/message',
+    name: 'Message',
+    label: '消息提示',
+    component: () => import('@components/message/__demo__/IndexMessage.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee


From d05b8c5fd19502f772482b5294e013d8857679ea Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Mon, 20 Mar 2023 23:14:54 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=AF=BC=E5=87=BAmessagebox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index 175db70d..b55680ec 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -27,9 +27,12 @@ export * from './form';
 export * from './menu';
 export * from './breadcrumb';
 export * from './progress';
-// export * from './dropdown';
-// export * from './scrollbar';
+export * from './dropdown';
 export * from './dialog';
+export * from './message';
+
+// export * from './scrollbar';
+
 
 export * from './intersection-observer';
 export * from './resize-observer';
-- 
Gitee