From d113881a82798c4308127233e8413f6f94b8bf57 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Mon, 24 Apr 2023 11:04:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20message=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87&color=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E4=BF=AE=E6=94=B9=E4=B8=BAstatus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/message/OMessage.vue       | 11 +++---
 .../src/components/message/OMessageList.vue   | 12 +++++-
 .../message/__demo__/MessageBasic.vue         | 38 ++++++++++++++-----
 .../src/components/message/style/var.scss     |  2 +-
 .../src/components/message/types.ts           | 14 ++++---
 .../src/components/message/use-message.ts     | 24 ++++++++----
 6 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/packages/opendesign/src/components/message/OMessage.vue b/packages/opendesign/src/components/message/OMessage.vue
index 2d802bb5..13e3f545 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 0b45998f..09a4fe19 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 da165187..7c5ab047 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 f68fc07f..d76e543e 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 6f7d7b19..532b52cd 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 4df6da19..e4f20dbd 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 = () => {
-- 
Gitee


From 3320a27978d17a550a8ca8c1f0eed5e6e4e580bd Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Mon, 24 Apr 2023 11:06:20 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=AF=84=E5=88=86=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=B8=A6=E6=8F=8F=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/rate/ORate.vue  | 63 +++++++++++++++----
 .../components/rate/__demo__/IndexRate.vue    |  4 +-
 .../components/rate/__demo__/RateBasic.vue    |  4 +-
 .../src/components/rate/style/index.ts        |  1 +
 .../src/components/rate/style/var.scss        | 17 +++++
 .../opendesign/src/components/rate/types.ts   |  6 ++
 6 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue
index 56b7b55f..0b763faf 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 cf400f88..e7a8246f 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 9cc0ed61..31ae94a0 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 591b2fbd..6f99fb5d 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 ac5d5968..fe3399b2 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 0a97f368..d624bb57 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>;
-- 
Gitee