From 2b53e42b81d7f94896dc5102ee06861b1b6113a2 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 20 Mar 2023 19:51:59 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=8F=92=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/card/OCard.vue  | 24 ++++++++++---------
 .../components/card/__demo__/CardBasic.vue    | 23 ++++++++++++++++++
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue
index d856473d..5013452c 100644
--- a/packages/opendesign/src/components/card/OCard.vue
+++ b/packages/opendesign/src/components/card/OCard.vue
@@ -43,19 +43,21 @@ const hasContent = computed(() => {
         <OFigure :ratio="props.coverRatio" class="o-card-cover-img" :src="props.cover" :class="{ 'is-full': !props.coverRatio }" />
       </slot>
     </div>
-    <div v-if="hasContent || $slots.title || $slots.default" class="o-card-main">
-      <div>
-        <div class="o-card-title">
-          <slot name="title">{{ props.title }}</slot>
+    <div v-if="hasContent || $slots.title || $slots.content || $slots.default" class="o-card-main">
+      <slot>
+        <div>
+          <div v-if="props.title || $slots.title" class="o-card-title">
+            <slot name="title">{{ props.title }}</slot>
+          </div>
+          <div class="o-card-content">
+            <div v-if="props.content" class="o-card-detail">{{ props.content }}</div>
+            <slot name="content"></slot>
+          </div>
         </div>
-        <div class="o-card-content">
-          <div class="o-card-detail">{{ props.content }}</div>
-          <slot></slot>
+        <div v-if="$slots.actions" class="o-card-actions">
+          <slot name="actions"></slot>
         </div>
-      </div>
-      <div v-if="$slots.actions" class="o-card-actions">
-        <slot name="actions"></slot>
-      </div>
+      </slot>
     </div>
   </HtmlTag>
 </template>
diff --git a/packages/opendesign/src/components/card/__demo__/CardBasic.vue b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
index 835fbac3..26869dc2 100644
--- a/packages/opendesign/src/components/card/__demo__/CardBasic.vue
+++ b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
@@ -74,6 +74,17 @@ const card = {
         </template>
       </OCard>
     </div>
+    <div class="flex">
+      <OCard class="card col3" hoverable>
+        <div class="card-icon">
+          <div class="icon"><IconStar /></div>
+          <div>
+            <div class="title">{{ card.title }}</div>
+            <div class="btns">{{ card.content }}</div>
+          </div>
+        </div>
+      </OCard>
+    </div>
   </section>
 </template>
 <style lang="scss">
@@ -101,4 +112,16 @@ const card = {
 .card2 {
   // height: 260px;
 }
+.card-icon {
+  display: flex;
+  align-items: flex-start;
+  .icon {
+    font-size: 60px;
+    margin-right: 12px;
+  }
+  .title {
+    font-size: 20px;
+    margin-bottom: 12px;
+  }
+}
 </style>
-- 
Gitee


From e1c3f1f4394007c85f9533da6d0e752f8d210069 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 20 Mar 2023 21:44:36 +0800
Subject: [PATCH 2/6] =?UTF-8?q?figure=E4=BF=AE=E5=A4=8D=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E7=AB=AF=E6=B8=B2=E6=9F=93=E6=97=B6=EF=BC=8C=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E8=BF=87=E5=BF=AB=E6=9C=AA=E5=88=B7=E6=96=B0load=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/card/style/index.scss      |  2 +-
 .../src/components/card/style/var.scss        |  1 +
 .../src/components/figure/OFigure.vue         | 23 +++++++++++++++----
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/opendesign/src/components/card/style/index.scss b/packages/opendesign/src/components/card/style/index.scss
index 38bc0087..e670142c 100644
--- a/packages/opendesign/src/components/card/style/index.scss
+++ b/packages/opendesign/src/components/card/style/index.scss
@@ -42,7 +42,7 @@
 }
 
 .o-card-main {
-  padding: 24px;
+  padding: var(--card-main-padding);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/packages/opendesign/src/components/card/style/var.scss b/packages/opendesign/src/components/card/style/var.scss
index 6b71a675..9475659e 100644
--- a/packages/opendesign/src/components/card/style/var.scss
+++ b/packages/opendesign/src/components/card/style/var.scss
@@ -2,6 +2,7 @@
   --card-radius: var(--o-radius-control-l);
   --card-title-max-row: 0;
   --card-detail-max-row: 0;
+  --card-main-padding: 24px;
 }
 
 .o-card-medium {
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
index 5abeeb81..4d563d67 100644
--- a/packages/opendesign/src/components/figure/OFigure.vue
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, onMounted } from 'vue';
 import { PrestColorPool } from '../_shared/utils';
 import HtmlTag from '../_shared/components/html-tag';
 
@@ -8,6 +8,7 @@ import { figureProps } from './types';
 const props = defineProps(figureProps);
 
 const emits = defineEmits<{ (e: 'error'): void }>();
+const imgRef = ref<HTMLImageElement | null>(null);
 
 const isLoading = ref(true);
 const isError = ref(false);
@@ -44,7 +45,7 @@ watch(
   () => props.src,
   (src?: string) => {
     if (src && props.background) {
-      const img = document.createElement('img');
+      const img = new Image();
       img.onload = onImgLoaded;
       img.onerror = onImgError;
       img.src = src;
@@ -52,6 +53,12 @@ watch(
   },
   { immediate: true }
 );
+onMounted(() => {
+  // 修复服务端渲染时，加载过快未刷新load状态问题
+  if (imgRef.value && imgRef.value.complete) {
+    onImgLoaded();
+  }
+});
 </script>
 <template>
   <HtmlTag
@@ -81,9 +88,17 @@ watch(
           backgroundImage: bgSrc,
         }"
       >
-        <img v-if="!props.background && !isError" :src="props.src" :alt="props.alt" class="o-figure-img-ratio" @load="onImgLoaded" @error="onImgError" />
+        <img
+          v-if="!props.background && !isError"
+          ref="imgRef"
+          :src="props.src"
+          :alt="props.alt"
+          class="o-figure-img-ratio"
+          @load="onImgLoaded"
+          @error="onImgError"
+        />
       </div>
-      <img v-else-if="!isError" :src="props.src" :alt="props.alt" class="o-figure-img" @load="onImgLoaded" @error="onImgError" />
+      <img v-else-if="!isError" ref="imgRef" :src="props.src" :alt="props.alt" class="o-figure-img" @load="onImgLoaded" @error="onImgError" />
     </template>
     <slot></slot>
   </HtmlTag>
-- 
Gitee


From d05bbf16ddd69a696f3abc18e960b1780ad3a662 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 20 Mar 2023 23:30:17 +0800
Subject: [PATCH 3/6] =?UTF-8?q?textarea=20resize=20=E6=94=AF=E6=8C=81=20h\?=
 =?UTF-8?q?v?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/textarea/OTextarea.vue   |  4 ++--
 .../opendesign/src/components/textarea/textarea.ts     | 10 ++++++++++
 packages/opendesign/src/components/textarea/types.ts   |  4 ++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
index 16409d64..de7bd065 100644
--- a/packages/opendesign/src/components/textarea/OTextarea.vue
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -4,7 +4,7 @@ import { defaultSize } from '../_shared/global';
 import { isFunction } from '../_shared/is';
 import { IconClose } from '../_shared/icons';
 import { trigger } from '../_shared/event';
-import { toInputString } from './textarea';
+import { getResizeValue, toInputString } from './textarea';
 import { OResizeObserver } from '../resize-observer';
 import { textareaProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
@@ -40,7 +40,7 @@ watch(
 );
 
 const resizeValue = computed(() => {
-  return props.autoHeight || props.disabled ? 'none' : props.resize;
+  return props.autoHeight || props.disabled ? 'none' : getResizeValue(props.resize);
 });
 
 const getValueLength = (val: string) => {
diff --git a/packages/opendesign/src/components/textarea/textarea.ts b/packages/opendesign/src/components/textarea/textarea.ts
index 7c05e51f..72b9319c 100644
--- a/packages/opendesign/src/components/textarea/textarea.ts
+++ b/packages/opendesign/src/components/textarea/textarea.ts
@@ -1,8 +1,18 @@
 import { isNull, isUndefined } from '../_shared/is';
+import { ResizeT } from './types';
 
 export function toInputString(val: unknown): string {
   if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) {
     return '';
   }
   return String(val);
+}
+
+export function getResizeValue(resize: ResizeT) {
+  if (resize === 'h') {
+    return 'horizontal';
+  } else if (resize ==='v') {
+    return 'vertical';
+  }
+  return resize;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/textarea/types.ts b/packages/opendesign/src/components/textarea/types.ts
index e33b3145..26cb0f81 100644
--- a/packages/opendesign/src/components/textarea/types.ts
+++ b/packages/opendesign/src/components/textarea/types.ts
@@ -1,6 +1,6 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import type { SizeT, RoundT, VariantT } from '../_shared/global';
-
+export type ResizeT = 'both' | 'horizontal'| 'h' | 'vertical' | 'v' | 'none';
 export const textareaProps = {
   /**
    * 下拉框的值
@@ -78,7 +78,7 @@ export const textareaProps = {
    * 是否支持调整尺寸
    */
   resize: {
-    type: String as PropType<'both' | 'horizontal' | 'vertical' | 'none'>,
+    type: String as PropType<ResizeT>,
     default: 'vertical'
   },
   /**
-- 
Gitee


From cc5203edb00dbc6fbd64dbd9666a3d6396af1b81 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Mon, 20 Mar 2023 23:09:58 +0800
Subject: [PATCH 4/6] =?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 1ed48e797ab1ac18155a4a8f1e2aab9925f0c417 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Mon, 20 Mar 2023 23:14:54 +0800
Subject: [PATCH 5/6] =?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 | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index 049dff26..07353b2c 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -29,10 +29,13 @@ export * from './menu';
 export * from './breadcrumb';
 export * from './progress';
 export * from './dropdown';
-// export * from './scrollbar';
 export * from './dialog';
 export * from './figure';
 export * from './card';
+export * from './message';
+
+// export * from './scrollbar';
+
 
 export * from './intersection-observer';
 export * from './resize-observer';
-- 
Gitee


From 3d029c6e74db35828ac99f0f94db50e5b5a64e97 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 20 Mar 2023 23:48:08 +0800
Subject: [PATCH 6/6] horizontal=>h vertical=>v

---
 packages/opendesign/src/components/_shared/global.ts          | 2 +-
 packages/opendesign/src/components/checkbox-group/types.ts    | 4 ++--
 packages/opendesign/src/components/divider/ODivider.vue       | 2 +-
 packages/opendesign/src/components/divider/style/index.scss   | 2 +-
 packages/opendesign/src/components/divider/style/var.scss     | 2 +-
 packages/opendesign/src/components/divider/types.ts           | 4 ++--
 packages/opendesign/src/components/radio-group/types.ts       | 4 ++--
 .../src/components/textarea/__demo__/TextareaBasic.vue        | 4 ++--
 packages/opendesign/src/components/textarea/types.ts          | 1 +
 9 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index c1c457c6..bc88dd0f 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -18,7 +18,7 @@ export function initRound(type: 'pill' | 'normal') {
 
 
 // 方向
-export type DirectionT = 'horizontal' | 'vertical';
+export type DirectionT = 'h' | 'v';
 
 export type VariantT = 'solid' | 'outline' | 'text';
 
diff --git a/packages/opendesign/src/components/checkbox-group/types.ts b/packages/opendesign/src/components/checkbox-group/types.ts
index 5bffd3e6..55353399 100644
--- a/packages/opendesign/src/components/checkbox-group/types.ts
+++ b/packages/opendesign/src/components/checkbox-group/types.ts
@@ -24,11 +24,11 @@ export const checkboxGroupProps = {
   },
   /**
    * 多选框组方向
-   * 'horizontal' | 'vertical'
+   * 'h' | 'v'
    */
   direction: {
     type: String as PropType<DirectionT>,
-    default: 'horizontal',
+    default: 'h',
   },
   /**
    * 多选框组支持选中的最小多选框数量
diff --git a/packages/opendesign/src/components/divider/ODivider.vue b/packages/opendesign/src/components/divider/ODivider.vue
index 9e6f8521..99276e1b 100644
--- a/packages/opendesign/src/components/divider/ODivider.vue
+++ b/packages/opendesign/src/components/divider/ODivider.vue
@@ -10,7 +10,7 @@ const props = defineProps(dividerProps);
     class="o-divider"
     :class="[`o-divider-${props.type}`, `o-divider-${props.direction}`, { [`o-divider-content-${props.contentPosition}`]: $slots.default }]"
   >
-    <template v-if="props.direction === 'horizontal'">
+    <template v-if="props.direction === 'h'">
       <div class="o-divider-line"></div>
       <template v-if="$slots.default">
         <div class="o-divider-content">
diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss
index cd82a86e..1a5e334e 100644
--- a/packages/opendesign/src/components/divider/style/index.scss
+++ b/packages/opendesign/src/components/divider/style/index.scss
@@ -7,7 +7,7 @@
   font-weight: 500;
 }
 
-.o-divider-horizontal {
+.o-divider-h {
   display: flex;
   align-items: center;
   width: 100%;
diff --git a/packages/opendesign/src/components/divider/style/var.scss b/packages/opendesign/src/components/divider/style/var.scss
index 186ef4f5..c15c6f69 100644
--- a/packages/opendesign/src/components/divider/style/var.scss
+++ b/packages/opendesign/src/components/divider/style/var.scss
@@ -7,7 +7,7 @@
   --o-divider-text-height: var(--o-line_height-text1);
 }
 
-.o-divider-horizontal {
+.o-divider-h {
   --o-divider-gap: var(--o-gap-3);
 }
 
diff --git a/packages/opendesign/src/components/divider/types.ts b/packages/opendesign/src/components/divider/types.ts
index 7e84fbee..b2d821a8 100644
--- a/packages/opendesign/src/components/divider/types.ts
+++ b/packages/opendesign/src/components/divider/types.ts
@@ -15,11 +15,11 @@ export const dividerProps = {
   },
   /**
    * 分割线方向
-   * 'horizontal' | 'vertical'
+   * 'h' | 'v'
    */
   direction: {
     type: String as PropType<DirectionT>,
-    default: 'horizontal',
+    default: 'h',
   },
   /**
    * 自定义内容位置
diff --git a/packages/opendesign/src/components/radio-group/types.ts b/packages/opendesign/src/components/radio-group/types.ts
index 4ac84ac2..2ae682f8 100644
--- a/packages/opendesign/src/components/radio-group/types.ts
+++ b/packages/opendesign/src/components/radio-group/types.ts
@@ -24,11 +24,11 @@ export const radioGroupProps = {
   },
   /**
    * 单选框组方向
-   * 'horizontal' | 'vertical'
+   * 'h' | 'v'
    */
   direction: {
     type: String as PropType<DirectionT>,
-    default: 'horizontal',
+    default: 'h',
   },
 };
 
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
index 605910e6..72574e31 100644
--- a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
@@ -80,11 +80,11 @@ const printEvent = (event: string, val?: string | number) => {
     </div>
     <div>
       <div>horizontal:</div>
-      <OTextarea v-model="val1" resize="horizontal" />
+      <OTextarea v-model="val1" resize="h" />
     </div>
     <div>
       <div>vertical:(default)</div>
-      <OTextarea v-model="val1" resize="vertical" />
+      <OTextarea v-model="val1" resize="v" />
     </div>
     <div>
       <div>none:</div>
diff --git a/packages/opendesign/src/components/textarea/types.ts b/packages/opendesign/src/components/textarea/types.ts
index 26cb0f81..7877ba2e 100644
--- a/packages/opendesign/src/components/textarea/types.ts
+++ b/packages/opendesign/src/components/textarea/types.ts
@@ -1,5 +1,6 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import type { SizeT, RoundT, VariantT } from '../_shared/global';
+
 export type ResizeT = 'both' | 'horizontal'| 'h' | 'vertical' | 'v' | 'none';
 export const textareaProps = {
   /**
-- 
Gitee