diff --git a/packages/opendesign/src/components/message/OMessage.vue b/packages/opendesign/src/components/message/OMessage.vue
index 2d802bb5a28d04407c853bf9cdca54d062b62a0b..13e3f5455aa6a93022962f06e06784862b95e254 100644
--- a/packages/opendesign/src/components/message/OMessage.vue
+++ b/packages/opendesign/src/components/message/OMessage.vue
@@ -6,8 +6,7 @@ import { IconAlert, IconError, IconPoint, IconSuccess } from '../icon';
 const props = defineProps(messageProps);
 
 const iconMap = {
-  normal: IconPoint,
-  primary: IconPoint,
+  info: IconPoint,
   success: IconSuccess,
   warning: IconAlert,
   danger: IconError,
@@ -17,7 +16,7 @@ const emits = defineEmits<{
   (e: 'close'): void;
 }>();
 
-const icon = computed(() => iconMap[props.color]);
+const icon = computed(() => iconMap[props.status]);
 
 let timer = 0;
 
@@ -49,9 +48,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="o-message" :class="[`o-message-${props.color}`]" @mouseenter="clearTimer" @mouseleave="startTimer">
+  <div class="o-message" :class="[`o-message-${props.status}`]" @mouseenter="clearTimer" @mouseleave="startTimer">
     <span class="o-message-icon">
-      <component :is="icon" />
+      <slot name="icon">
+        <component :is="icon" />
+      </slot>
     </span>
     <span class="o-message-label">{{ props.content }}</span>
   </div>
diff --git a/packages/opendesign/src/components/message/OMessageList.vue b/packages/opendesign/src/components/message/OMessageList.vue
index 0b45998fa44dfa1313083207bbd92b423166344b..09a4fe1970f928dd8a3dc31738d0797b3e2ef399 100644
--- a/packages/opendesign/src/components/message/OMessageList.vue
+++ b/packages/opendesign/src/components/message/OMessageList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Ref } from 'vue';
+import { Ref, shallowRef } from 'vue';
 import { ref } from 'vue';
 import { MessagePositionT, MessageParamsT } from './types';
 import OMessage from './OMessage.vue';
@@ -31,6 +31,10 @@ const add = (params: MessageParamsT) => {
     id: getUniqueId(),
     ...params,
   };
+
+  if (params.icon) {
+    option.icon = shallowRef(params.icon);
+  }
   optionList.value.push(option);
 };
 
@@ -60,7 +64,11 @@ defineExpose({ add, remove, removeAll });
 <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)" />
+      <OMessage v-for="item in optionList" :key="item.id" :content="item.content" :status="item.status" :duration="item.duration" @close="handleClose(item)">
+        <template v-if="item.icon" #icon>
+          <component :is="item.icon" />
+        </template>
+      </OMessage>
     </TransitionGroup>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/message/__demo__/MessageBasic.vue b/packages/opendesign/src/components/message/__demo__/MessageBasic.vue
index da16518755a6e919309adab89e119e1524b400de..7c5ab047259d8cb8593adcdb1e54e461831833cb 100644
--- a/packages/opendesign/src/components/message/__demo__/MessageBasic.vue
+++ b/packages/opendesign/src/components/message/__demo__/MessageBasic.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
+import { h } from 'vue';
+
 import '../style';
 import useMessage from '../use-message';
+import { IconAdd, IconLoading } from '../../icon';
 
 import { OButton } from '../../button';
 import '../../button/style';
 
 const message = useMessage();
 
-const handleNormalBtnClick = () => {
-  message.normal({
-    content: '用于表示普通操作信息提示，3秒后消失',
-  });
-};
-
-const handlePrimaryBtnClick = () => {
-  message.primary({
+const handleInfoBtnClick = () => {
+  message.info({
     content: '用于表示普通操作信息提示，3秒后消失',
   });
 };
@@ -36,15 +33,36 @@ const handleDangerBtnClick = () => {
     content: '用于表示操作引起严重的后果，3秒后消失',
   });
 };
+
+const handleInfoBtnClick2 = () => {
+  message.open({
+    content: '自定义Icon',
+    status: 'info',
+    icon: IconAdd,
+  });
+};
+
+const handleInfoWarningClick2 = () => {
+  message.open({
+    content: '排队中，请稍后',
+    status: 'warning',
+    icon: h(IconLoading, { class: 'o-rotating' }),
+  });
+};
 </script>
 
 <template>
   <h4>基础用法</h4>
   <section>
-    <OButton color="normal" @click="handleNormalBtnClick">Info Message</OButton>
-    <OButton color="primary" @click="handlePrimaryBtnClick">Primary Message</OButton>
+    <OButton color="primary" @click="handleInfoBtnClick">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>
+
+  <h4>自定义Icon</h4>
+  <section>
+    <OButton color="primary" @click="handleInfoBtnClick2">自定义Icon</OButton>
+    <OButton color="warning" @click="handleInfoWarningClick2">loading</OButton>
+  </section>
 </template>
diff --git a/packages/opendesign/src/components/message/style/var.scss b/packages/opendesign/src/components/message/style/var.scss
index f68fc07fa75b7001f9745eb1c2c6d5a3fde2e11d..d76e543e501998ef54db016cba071e4445243933 100644
--- a/packages/opendesign/src/components/message/style/var.scss
+++ b/packages/opendesign/src/components/message/style/var.scss
@@ -17,7 +17,7 @@
   --message-gap: 16px;
 }
 
-.o-message-primary {
+.o-message-info {
   --message-bg-color: var(--o-color-primary4-light);
   --message-bd-color: var(--o-color-primary1);
   --message-icon-color: var(--o-color-primary1);
diff --git a/packages/opendesign/src/components/message/types.ts b/packages/opendesign/src/components/message/types.ts
index 6f7d7b190b24f3c9afbb9a8287903cc809240ab5..532b52cd28fcbdb534b1b94fe948ff40cb81ed77 100644
--- a/packages/opendesign/src/components/message/types.ts
+++ b/packages/opendesign/src/components/message/types.ts
@@ -1,10 +1,12 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import { ColorT } from '../_shared/global';
+import type { Component, ExtractPropTypes, PropType } from 'vue';
+
+export const MessageStatusTypes = ['info', 'success', 'warning', 'danger'] as const;
+export type MessageStatusT = typeof MessageStatusTypes[number];
 
 export const messageProps = {
-  color: {
-    type: String as PropType<ColorT>,
-    default: 'normal',
+  status: {
+    type: String as PropType<MessageStatusT>,
+    default: 'info',
   },
   content: {
     type: String,
@@ -23,4 +25,4 @@ export type MessagePropsT = ExtractPropTypes<typeof messageProps>;
 
 export type MessagePositionT = 'top' | 'bottom';
 
-export type MessageParamsT = Partial<MessagePropsT & { position: MessagePositionT }>;
+export type MessageParamsT = Partial<MessagePropsT & { position: MessagePositionT; icon: Component }>;
diff --git a/packages/opendesign/src/components/message/use-message.ts b/packages/opendesign/src/components/message/use-message.ts
index 4df6da19a1718eb1f4545073b8f423a0e35a9480..e4f20dbde0aab522bacc0a7b5ee75ff7e004c3bc 100644
--- a/packages/opendesign/src/components/message/use-message.ts
+++ b/packages/opendesign/src/components/message/use-message.ts
@@ -4,7 +4,7 @@ import { MessageParamsT } from './types';
 import OMessageList from './OMessageList.vue';
 
 const DEFAULT_OPTIONS: MessageParamsT = {
-  color: 'normal',
+  status: 'info',
   position: 'top',
   duration: 3000,
 };
@@ -57,15 +57,15 @@ const normal = (params: MessageParamsT): void => {
   const options: MessageParamsT = normalizeOptions(params);
   showMessage({
     ...options,
-    color: 'normal',
+    status: 'info',
   });
 };
 
-const primary = (params: MessageParamsT): void => {
+const info = (params: MessageParamsT): void => {
   const options: MessageParamsT = normalizeOptions(params);
   showMessage({
     ...options,
-    color: 'primary',
+    status: 'info',
   });
 };
 
@@ -73,7 +73,7 @@ const success = (params: MessageParamsT): void => {
   const options: MessageParamsT = normalizeOptions(params);
   showMessage({
     ...options,
-    color: 'success',
+    status: 'success',
   });
 };
 
@@ -81,7 +81,7 @@ const warning = (params: MessageParamsT): void => {
   const options: MessageParamsT = normalizeOptions(params);
   showMessage({
     ...options,
-    color: 'warning',
+    status: 'warning',
   });
 };
 
@@ -89,16 +89,24 @@ const danger = (params: MessageParamsT): void => {
   const options: MessageParamsT = normalizeOptions(params);
   showMessage({
     ...options,
-    color: 'danger',
+    status: 'danger',
+  });
+};
+
+const open = (params: MessageParamsT): void => {
+  const options: MessageParamsT = normalizeOptions(params);
+  showMessage({
+    ...options,
   });
 };
 
 const Message = {
   normal,
-  primary,
+  info,
   success,
   warning,
   danger,
+  open,
 };
 
 const useMessage = () => {
diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue
index 56b7b55f217f6759a0bc2b37b009351b3a603343..0b763faf454138765b4ba54368e120f43bd3a0e3 100644
--- a/packages/opendesign/src/components/rate/ORate.vue
+++ b/packages/opendesign/src/components/rate/ORate.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+
+import { OPopover } from '../popover';
 import { rateProps } from './types';
 import { defaultSize } from '../_shared/global';
 import { IconStar } from '../icon';
-import { isUndefined } from '../_shared/is';
+import { isArray, isUndefined } from '../_shared/is';
 
 const props = defineProps(rateProps);
 
@@ -75,21 +77,56 @@ const iconStatus = computed(() => {
   }
   return statusArr;
 });
+
+const showLabel = computed(() => {
+  if (!isArray(props.labels)) {
+    return false;
+  }
+  console.log(props.labels);
+  return props.labels.length === props.count;
+});
 </script>
 
 <template>
   <div class="o-rate" :class="[`o-rate-${props.color}`, `o-rate-${props.size || defaultSize}`]" @mouseleave="resetHoverIndex">
-    <div v-for="(item, key) in count" :key="key" class="o-rate-item" :class="{ 'is-full': iconStatus[key] === 'full', 'is-half': iconStatus[key] === 'half' }">
-      <span class="o-rate-icon o-rate-icon-top" @mouseenter="setHoverIndex(key, true)" @click="setValue(key, true)">
-        <slot name="icon" :index="item" :status="iconStatus[key]">
-          <IconStar />
-        </slot>
-      </span>
-      <span class="o-rate-icon o-rate-icon-bottom" @mouseenter="setHoverIndex(key, false)" @click="setValue(key, false)">
-        <slot name="icon" :index="item" :status="iconStatus[key]">
-          <IconStar />
-        </slot>
-      </span>
-    </div>
+    <template v-if="showLabel">
+      <OPopover v-for="(item, key) in count" :key="key" :adjust-width="false" :adjust-min-width="false" :visible="true" wrap-class="o-rate-popover">
+        <template #target>
+          <div class="o-rate-item" :class="{ 'is-full': iconStatus[key] === 'full', 'is-half': iconStatus[key] === 'half' }">
+            <span class="o-rate-icon o-rate-icon-top" @mouseenter="setHoverIndex(key, true)" @click="setValue(key, true)">
+              <slot name="icon" :index="item" :status="iconStatus[key]">
+                <IconStar />
+              </slot>
+            </span>
+            <span class="o-rate-icon o-rate-icon-bottom" @mouseenter="setHoverIndex(key, false)" @click="setValue(key, false)">
+              <slot name="icon" :index="item" :status="iconStatus[key]">
+                <IconStar />
+              </slot>
+            </span>
+          </div>
+        </template>
+        <span>{{ labels && labels[key] }}</span>
+      </OPopover>
+    </template>
+
+    <template v-else>
+      <div
+        v-for="(item, key) in count"
+        :key="key"
+        class="o-rate-item"
+        :class="{ 'is-full': iconStatus[key] === 'full', 'is-half': iconStatus[key] === 'half' }"
+      >
+        <span class="o-rate-icon o-rate-icon-top" @mouseenter="setHoverIndex(key, true)" @click="setValue(key, true)">
+          <slot name="icon" :index="item" :status="iconStatus[key]">
+            <IconStar />
+          </slot>
+        </span>
+        <span class="o-rate-icon o-rate-icon-bottom" @mouseenter="setHoverIndex(key, false)" @click="setValue(key, false)">
+          <slot name="icon" :index="item" :status="iconStatus[key]">
+            <IconStar />
+          </slot>
+        </span>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/rate/__demo__/IndexRate.vue b/packages/opendesign/src/components/rate/__demo__/IndexRate.vue
index cf400f88c042c731d3f12d169b3fa6f9e400d2b3..e7a8246f69998ba45a19538617473c7c1ee0fcd0 100644
--- a/packages/opendesign/src/components/rate/__demo__/IndexRate.vue
+++ b/packages/opendesign/src/components/rate/__demo__/IndexRate.vue
@@ -13,11 +13,11 @@ import RateColor from './RateColor.vue';
 <template>
   <div class="page-demo">
     <RateBasic />
-    <RateSize />
+    <!-- <RateSize />
     <RateColor />
     <RateAllowHalf />
     <RateClearable />
     <RateCount />
-    <RateIcon />
+    <RateIcon /> -->
   </div>
 </template>
diff --git a/packages/opendesign/src/components/rate/__demo__/RateBasic.vue b/packages/opendesign/src/components/rate/__demo__/RateBasic.vue
index 9cc0ed61ebff2d4af639dd335d7756f894872d51..31ae94a05f7cee9da1fad7004365f6ca116078b9 100644
--- a/packages/opendesign/src/components/rate/__demo__/RateBasic.vue
+++ b/packages/opendesign/src/components/rate/__demo__/RateBasic.vue
@@ -8,13 +8,15 @@ const rateVal2 = ref(0);
 const handleChange = (val: number) => {
   console.log(val);
 };
+
+let labels = ref(['1', '2', '3', '4', '5']);
 </script>
 
 <template>
   <h4>基础用法</h4>
   <section>
     <ORate v-model="rateVal1" @change="handleChange" />
-    <ORate :default-value="rateVal2" @change="handleChange" />
+    <ORate :default-value="rateVal2" :labels="labels" @change="handleChange" />
   </section>
 </template>
 
diff --git a/packages/opendesign/src/components/rate/style/index.ts b/packages/opendesign/src/components/rate/style/index.ts
index 591b2fbd72dcd5e987362d645b561bd2fac42716..6f99fb5d4c5d2bc6e1756e11351cb2e74fe493e2 100644
--- a/packages/opendesign/src/components/rate/style/index.ts
+++ b/packages/opendesign/src/components/rate/style/index.ts
@@ -1,2 +1,3 @@
 import '../../style';
+import '../../popover/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/rate/style/var.scss b/packages/opendesign/src/components/rate/style/var.scss
index ac5d5968d84368eef086a29e540b0f6a11166c0c..fe3399b242ca451b66eb73a60eed48fc4d5bf348 100644
--- a/packages/opendesign/src/components/rate/style/var.scss
+++ b/packages/opendesign/src/components/rate/style/var.scss
@@ -5,6 +5,13 @@
   --rate-gap: 0;
 }
 
+.o-rate-popover {
+  --rate-popover-color: var(--o-color-info1);
+  --rate-popover-text-size: var(--o-font_size-text1);
+  --rate-popover-text-height: var(--o-line_height-text1);
+  --rate-popover-padding: 2px 8px;
+}
+
 .o-rate-large {
   --rate-size: var(--o-icon_size-s);
 }
@@ -28,3 +35,13 @@
 .o-rate-danger {
   --rate-color-active: var(--o-color-danger1);
 }
+
+.o-rate-popover {
+  .o-popover-body {
+    color: var(--rate-popover-color);
+    font-size: var(--rate-popover-text-size);
+    line-height: var(--rate-popover-text-height);
+    padding: var(--rate-popover-padding);
+    min-width: auto;
+  }
+}
diff --git a/packages/opendesign/src/components/rate/types.ts b/packages/opendesign/src/components/rate/types.ts
index 0a97f3685566db6b60ab74fb9c8bc0853599e8d0..d624bb571490a4d9e1d8c51f60a29cf8686911c2 100644
--- a/packages/opendesign/src/components/rate/types.ts
+++ b/packages/opendesign/src/components/rate/types.ts
@@ -56,6 +56,12 @@ export const rateProps = {
     type: Boolean,
     default: false,
   },
+  /**
+   * 文字
+   */
+  labels: {
+    type: Array as PropType<Array<string>>,
+  },
 };
 
 export type RatePropsT = ExtractPropTypes<typeof rateProps>;