From 8099de59c089c8d17156f88c0197c4a9b9aa981b Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 22 Feb 2023 11:13:16 +0800
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=E6=A0=BC=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/tag.md                                      | 4 ++--
 packages/opendesign/src/components/checkbox/OCheckbox.vue | 2 +-
 packages/opendesign/src/components/radio/ORadio.vue       | 2 +-
 packages/portal/src/components/TheAside.vue               | 2 ++
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/docs/tag.md b/packages/docs/tag.md
index 3eddd8bf..53dd9197 100644
--- a/packages/docs/tag.md
+++ b/packages/docs/tag.md
@@ -6,8 +6,8 @@
 | :--------------- | :--------------------------------------------- | :------- | ------------------------------------------------------- |
 | status           | 'normal' \| 'success' \| 'warning' \| 'danger' | 'normal' | 标签状态                                                |
 | bordered         | boolean                                        | false    | 是否有边框                                              |
-| size             | 'large' \| 'normal' \| 'small'                 | 'normal' | 标签形状                                                |
-| shape            | 'normal' \| 'round'                            | 'normal' | 尺寸                                                    |
+| size             | 'large' \| 'normal' \| 'small'                 | 'normal' | 标签尺寸                                                |
+| shape            | 'normal' \| 'round'                            | 'normal' | 标签形状                                                |
 | closable         | boolean                                        | false    | 是否可关闭                                              |
 | checkable        | boolean                                        | false    | 是否可选中                                              |
 | checked(v-model) | boolean                                        | false    | 是否被选中（仅 checkable 为 true 生效）                 |
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index ab1113f5..5242f95e 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -38,9 +38,9 @@ const emits = defineEmits<{
 }>();
 
 const checkboxGroupInjection = inject(checkboxGroupInjectKey, null);
+
 // 监听modelValue改变
 const isModelValueChanged = ref(false);
-
 watch(
   () => props.modelValue,
   () => {
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
index 333a337b..5db632cc 100644
--- a/packages/opendesign/src/components/radio/ORadio.vue
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -21,6 +21,7 @@ interface RadioPropT {
    */
   disabled?: boolean;
 }
+
 const props = withDefaults(defineProps<RadioPropT>(), {
   modelValue: undefined,
   defaultChecked: false,
@@ -36,7 +37,6 @@ const radioGroupInjection = inject(radioGroupInjectKey, null);
 
 // 监听modelValue改变
 const isModelValueChanged = ref(false);
-
 watch(
   () => props.modelValue,
   () => {
diff --git a/packages/portal/src/components/TheAside.vue b/packages/portal/src/components/TheAside.vue
index 66203d4e..eb47250e 100644
--- a/packages/portal/src/components/TheAside.vue
+++ b/packages/portal/src/components/TheAside.vue
@@ -46,6 +46,8 @@ const navClick = (item: typeof navList[0]) => {
   background-color: var(--o-color-bg3);
   color: var(--o-color-text1);
   border-right: 1px solid var(--o-color-border2);
+  overflow: auto;
+  height: calc(100vh - 48px);
 }
 .aside-title {
   padding: 8px;
-- 
Gitee


From 182f750b4cc96a52884269616d1cb70ba43eda89 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 22 Feb 2023 23:46:21 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Erate=E8=AF=84?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/rate.md                         | 27 ++++++
 .../opendesign/src/components/rate/ORate.vue  | 95 +++++++++++++++++++
 .../components/rate/__demo__/IndexRate.vue    | 23 +++++
 .../rate/__demo__/RateAllowHalf.vue           | 16 ++++
 .../components/rate/__demo__/RateBasic.vue    | 26 +++++
 .../rate/__demo__/RateClearable.vue           | 16 ++++
 .../components/rate/__demo__/RateColor.vue    | 23 +++++
 .../components/rate/__demo__/RateCount.vue    | 14 +++
 .../src/components/rate/__demo__/RateIcon.vue | 32 +++++++
 .../src/components/rate/__demo__/RateSize.vue | 22 +++++
 .../opendesign/src/components/rate/index.ts   | 13 +++
 .../src/components/rate/style/index.scss      | 44 +++++++++
 .../src/components/rate/style/index.ts        |  2 +
 .../src/components/rate/style/var.scss        | 30 ++++++
 .../opendesign/src/components/rate/types.ts   | 64 +++++++++++++
 .../opendesign/src/icons/svgs/fill/star.svg   |  4 +
 16 files changed, 451 insertions(+)
 create mode 100644 packages/docs/rate.md
 create mode 100644 packages/opendesign/src/components/rate/ORate.vue
 create mode 100644 packages/opendesign/src/components/rate/__demo__/IndexRate.vue
 create mode 100644 packages/opendesign/src/components/rate/__demo__/RateAllowHalf.vue
 create mode 100644 packages/opendesign/src/components/rate/__demo__/RateBasic.vue
 create mode 100644 packages/opendesign/src/components/rate/__demo__/RateClearable.vue
 create mode 100644 packages/opendesign/src/components/rate/__demo__/RateColor.vue
 create mode 100644 packages/opendesign/src/components/rate/__demo__/RateCount.vue
 create mode 100644 packages/opendesign/src/components/rate/__demo__/RateIcon.vue
 create mode 100644 packages/opendesign/src/components/rate/__demo__/RateSize.vue
 create mode 100644 packages/opendesign/src/components/rate/index.ts
 create mode 100644 packages/opendesign/src/components/rate/style/index.scss
 create mode 100644 packages/opendesign/src/components/rate/style/index.ts
 create mode 100644 packages/opendesign/src/components/rate/style/var.scss
 create mode 100644 packages/opendesign/src/components/rate/types.ts
 create mode 100644 packages/opendesign/src/icons/svgs/fill/star.svg

diff --git a/packages/docs/rate.md b/packages/docs/rate.md
new file mode 100644
index 00000000..de58c481
--- /dev/null
+++ b/packages/docs/rate.md
@@ -0,0 +1,27 @@
+# Rate 评分
+
+## props
+
+| name                | type                                           | 默认值   | 说明                       |
+| :------------------ | :--------------------------------------------- | :------- | -------------------------- |
+| count               | number                                         | 5        | 可选，评分数量             |
+| modelValue(v-model) | number                                         | -        | 可选，双向绑定值           |
+| defaultValue        | number                                         | 0        | 可选，非受控状态时，默认值 |
+| size                | 'large' \| 'normal' \| 'small'                 | 'normal' | 标签尺寸                   |
+| color               | 'normal' \| 'primary' \| 'warning' \| 'danger' | 'normal' | 标签颜色                   |
+| readonly            | boolean                                        | false    | 可选，是否只读             |
+| allowHalf           | boolean                                        | false    | 可选，是否支持半选         |
+| clearable           | boolean                                        | false    | 可选，是否支持可清         |
+| 空                  |
+
+## event
+
+| name   | 参数        | 说明                 |
+| :----- | :---------- | :------------------- |
+| change | val: number | 双向绑定值改变时触发 |
+
+## slot
+
+| name | 参数 | 说明           |
+| :--- | :--- | :------------- |
+| icon | -    | 自定义评分图标 |
diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue
new file mode 100644
index 00000000..69aac911
--- /dev/null
+++ b/packages/opendesign/src/components/rate/ORate.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { defaultSize } from '../_shared/global';
+import { rateProps } from './types';
+
+import { IconStar } from '../icons';
+
+const props = defineProps(rateProps);
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', val: number): void;
+  (e: 'change', val: number): void;
+}>();
+
+const realValue = ref(props.modelValue ?? props.defaultValue);
+watch(
+  () => props.modelValue,
+  (val) => {
+    realValue.value = val ?? 0;
+  }
+);
+
+const hoverIndex = ref(-1);
+
+const setHoverIndex = (index: number, isTopIcon: boolean) => {
+  if (props.readonly) {
+    return;
+  }
+
+  hoverIndex.value = props.allowHalf && isTopIcon ? index + 0.5 : index + 1;
+};
+
+const resetHoverIndex = () => {
+  hoverIndex.value = -1;
+};
+
+const setValue = (index: number, isTopIcon: boolean) => {
+  if (props.readonly) {
+    return;
+  }
+
+  if (props.clearable && realValue.value === hoverIndex.value) {
+    resetHoverIndex();
+    realValue.value = 0;
+    emits('update:modelValue', 0);
+    emits('change', 0);
+  } else {
+    hoverIndex.value = props.allowHalf && isTopIcon ? index + 0.5 : index + 1;
+    realValue.value = hoverIndex.value;
+    emits('update:modelValue', hoverIndex.value);
+    emits('change', hoverIndex.value);
+  }
+};
+
+// 记录图标状态
+const iconStatus = computed(() => {
+  const statusArr = new Array(props.count).fill('');
+  for (let i = 0; i < props.count; i++) {
+    const val = hoverIndex.value === -1 ? realValue.value ?? -1 : hoverIndex.value;
+
+    if (!props.allowHalf) {
+      if (i + 1 <= val) {
+        statusArr[i] = 'full';
+      }
+    } else {
+      if (i + 1 <= Math.floor(val)) {
+        statusArr[i] = 'full';
+      } else if (i + 1 === Math.ceil(val)) {
+        statusArr[i] = 'half';
+      }
+    }
+  }
+  return statusArr;
+});
+</script>
+
+<template>
+  <div class="o-rate" :class="[`o-rate-${props.color}`, `o-rate-size-${props.size || defaultSize}`]" @mouseleave="resetHoverIndex">
+    <div
+      v-for="(item, key) in count"
+      :key="key"
+      class="o-rate-item"
+      :class="{ 'is-full-active': iconStatus[key] === 'full', 'is-half-active': iconStatus[key] === 'half' }"
+    >
+      <span class="o-rate-icon o-rate-icon-top" @mouseenter="setHoverIndex(key, true)" @click="setValue(key, true)">
+        <slot v-if="$slots.icon" name="icon"></slot>
+        <IconStar v-else />
+      </span>
+      <span class="o-rate-icon o-rate-icon-bottom" @mouseenter="setHoverIndex(key, false)" @click="setValue(key, false)">
+        <slot v-if="$slots.icon" name="icon"></slot>
+        <IconStar v-else />
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/rate/__demo__/IndexRate.vue b/packages/opendesign/src/components/rate/__demo__/IndexRate.vue
new file mode 100644
index 00000000..cf400f88
--- /dev/null
+++ b/packages/opendesign/src/components/rate/__demo__/IndexRate.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import '../style';
+
+import RateAllowHalf from './RateAllowHalf.vue';
+import RateBasic from './RateBasic.vue';
+import RateSize from './RateSize.vue';
+import RateClearable from './RateClearable.vue';
+import RateCount from './RateCount.vue';
+import RateIcon from './RateIcon.vue';
+import RateColor from './RateColor.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <RateBasic />
+    <RateSize />
+    <RateColor />
+    <RateAllowHalf />
+    <RateClearable />
+    <RateCount />
+    <RateIcon />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/rate/__demo__/RateAllowHalf.vue b/packages/opendesign/src/components/rate/__demo__/RateAllowHalf.vue
new file mode 100644
index 00000000..66fd1820
--- /dev/null
+++ b/packages/opendesign/src/components/rate/__demo__/RateAllowHalf.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORate } from '../index';
+
+const rateVal = ref(2.5);
+const handleChange = (val: number) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <h4>允许半选</h4>
+  <section>
+    <ORate v-model="rateVal" allow-half @change="handleChange" />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/rate/__demo__/RateBasic.vue b/packages/opendesign/src/components/rate/__demo__/RateBasic.vue
new file mode 100644
index 00000000..9cc0ed61
--- /dev/null
+++ b/packages/opendesign/src/components/rate/__demo__/RateBasic.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORate } from '../index';
+
+const rateVal1 = ref(0);
+const rateVal2 = ref(0);
+
+const handleChange = (val: number) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <ORate v-model="rateVal1" @change="handleChange" />
+    <ORate :default-value="rateVal2" @change="handleChange" />
+  </section>
+</template>
+
+<style scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>
diff --git a/packages/opendesign/src/components/rate/__demo__/RateClearable.vue b/packages/opendesign/src/components/rate/__demo__/RateClearable.vue
new file mode 100644
index 00000000..afe1d64f
--- /dev/null
+++ b/packages/opendesign/src/components/rate/__demo__/RateClearable.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORate } from '../index';
+
+const rateVal = ref(3);
+const handleChange = (val: number) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <h4>可清空</h4>
+  <section>
+    <ORate v-model="rateVal" clearable @change="handleChange" />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/rate/__demo__/RateColor.vue b/packages/opendesign/src/components/rate/__demo__/RateColor.vue
new file mode 100644
index 00000000..a4c4e956
--- /dev/null
+++ b/packages/opendesign/src/components/rate/__demo__/RateColor.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORate } from '../index';
+
+const rateVal = ref(3);
+</script>
+
+<template>
+  <h4>不同颜色</h4>
+  <section>
+    <ORate v-model="rateVal" />
+    <ORate v-model="rateVal" color="primary" />
+    <ORate v-model="rateVal" color="warning" />
+    <ORate v-model="rateVal" color="danger" />
+  </section>
+</template>
+
+<style scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>
diff --git a/packages/opendesign/src/components/rate/__demo__/RateCount.vue b/packages/opendesign/src/components/rate/__demo__/RateCount.vue
new file mode 100644
index 00000000..cf45b736
--- /dev/null
+++ b/packages/opendesign/src/components/rate/__demo__/RateCount.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORate } from '../index';
+
+const rateVal = ref(0);
+const count = 10;
+</script>
+
+<template>
+  <h4>自定义评分数量</h4>
+  <section>
+    <ORate v-model="rateVal" :count="count" />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/rate/__demo__/RateIcon.vue b/packages/opendesign/src/components/rate/__demo__/RateIcon.vue
new file mode 100644
index 00000000..c36d0b2e
--- /dev/null
+++ b/packages/opendesign/src/components/rate/__demo__/RateIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORate } from '../index';
+import { IconAdd } from '../../icons';
+import { IconX } from '../../icons';
+
+const rateVal1 = ref(4);
+const rateVal2 = ref(0);
+</script>
+
+<template>
+  <h4>自定义图标</h4>
+  <section>
+    <ORate v-model="rateVal1">
+      <template #icon>
+        <IconAdd />
+      </template>
+    </ORate>
+    <ORate :default-value="rateVal2" allow-half>
+      <template #icon>
+        <IconX />
+      </template>
+    </ORate>
+  </section>
+</template>
+
+<style scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>
diff --git a/packages/opendesign/src/components/rate/__demo__/RateSize.vue b/packages/opendesign/src/components/rate/__demo__/RateSize.vue
new file mode 100644
index 00000000..a7d0b654
--- /dev/null
+++ b/packages/opendesign/src/components/rate/__demo__/RateSize.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORate } from '../index';
+
+const rateVal = ref(0);
+</script>
+
+<template>
+  <h4>不同尺寸</h4>
+  <section>
+    <ORate v-model="rateVal" size="small" />
+    <ORate v-model="rateVal" />
+    <ORate v-model="rateVal" size="large" />
+  </section>
+</template>
+
+<style scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>
diff --git a/packages/opendesign/src/components/rate/index.ts b/packages/opendesign/src/components/rate/index.ts
new file mode 100644
index 00000000..04a152fa
--- /dev/null
+++ b/packages/opendesign/src/components/rate/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+
+import _ORate from './ORate.vue';
+
+export * from './types';
+
+const ORate = Object.assign(_ORate, {
+  install(app: App) {
+    app.component(_ORate.name, _ORate);
+  },
+});
+
+export { ORate };
diff --git a/packages/opendesign/src/components/rate/style/index.scss b/packages/opendesign/src/components/rate/style/index.scss
new file mode 100644
index 00000000..6be90c31
--- /dev/null
+++ b/packages/opendesign/src/components/rate/style/index.scss
@@ -0,0 +1,44 @@
+@use './var.scss';
+
+.o-rate {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  font-size: var(--rate-height);
+  cursor: pointer;
+}
+
+.o-rate-item {
+  position: relative;
+
+  & + .o-rate-item {
+    margin-left: 8px;
+  }
+
+  &.is-half-active {
+    .o-rate-icon-top {
+      opacity: 1;
+    }
+  }
+
+  &.is-full-active {
+    .o-rate-icon-bottom {
+      color: var(--rate-color-active);
+    }
+  }
+}
+
+.o-rate-icon {
+  color: var(--rate-color);
+  transition: all var(--o-duration-m1) var(--o-easing-standard);
+}
+
+.o-rate-icon-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  opacity: 0;
+  overflow: hidden;
+  color: var(--rate-color-active);
+}
diff --git a/packages/opendesign/src/components/rate/style/index.ts b/packages/opendesign/src/components/rate/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/rate/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/rate/style/var.scss b/packages/opendesign/src/components/rate/style/var.scss
new file mode 100644
index 00000000..f8b3c464
--- /dev/null
+++ b/packages/opendesign/src/components/rate/style/var.scss
@@ -0,0 +1,30 @@
+.o-rate {
+  --rate-color: var(--o-color-info1);
+  --rate-color-active: var(--o-color-major1);
+
+  --rate-height: var(--o-font_size-h1);
+}
+
+.o-rate-size-large {
+  --rate-height: var(--o-font_size-display3);
+}
+
+.o-rate-size-small {
+  --rate-height: var(--o-font_size-h4);
+}
+
+.o-rate-primary {
+  --rate-color-active: var(--o-color-primary1);
+}
+
+.o-rate-success {
+  --rate-color-active: var(--o-color-success1);
+}
+
+.o-rate-warning {
+  --rate-color-active: var(--o-color-warning1);
+}
+
+.o-rate-danger {
+  --rate-color-active: var(--o-color-danger1);
+}
diff --git a/packages/opendesign/src/components/rate/types.ts b/packages/opendesign/src/components/rate/types.ts
new file mode 100644
index 00000000..d5e17431
--- /dev/null
+++ b/packages/opendesign/src/components/rate/types.ts
@@ -0,0 +1,64 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ColorT, SizeT } from '../_shared/global';
+
+export const rateProps = {
+  /**
+   * 评分数量
+   */
+  count: {
+    type: Number,
+    default: 5,
+  },
+  /**
+   * 双向绑定值
+   */
+  modelValue: {
+    type: Number,
+  },
+  /**
+   * 非受控状态时，默认值
+   */
+  defaultValue: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 尺寸
+   * "normal" | "small" | "large"
+   */
+  size: {
+    type: String as PropType<SizeT>,
+    default: 'normal',
+  },
+  /**
+   * 颜色类型
+   * 'normal' | 'primary' | 'success' | 'warning' | 'danger'
+   */
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal',
+  },
+  /**
+   * 是否只读
+   */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否支持半选
+   */
+  allowHalf: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否支持可清空
+   */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type RatePropsT = ExtractPropTypes<typeof rateProps>;
diff --git a/packages/opendesign/src/icons/svgs/fill/star.svg b/packages/opendesign/src/icons/svgs/fill/star.svg
new file mode 100644
index 00000000..6deab4a7
--- /dev/null
+++ b/packages/opendesign/src/icons/svgs/fill/star.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>star</title>
+<path fill="currentColor" d="M2.935 13.139c-0.225-0.164-0.322-0.453-0.24-0.719l0.107-0.333c0.078-0.263 0.312-0.45 0.586-0.466l8.512-0.679 3.264-7.846c0.109-0.275 0.384-0.447 0.679-0.426h0.346c0.278-0.006 0.53 0.165 0.626 0.426l3.277 7.846 8.512 0.679c0.274 0.017 0.508 0.203 0.586 0.466l0.107 0.333c0.091 0.258 0.011 0.545-0.2 0.719l-6.42 5.515 1.971 8.273c0.065 0.265-0.035 0.543-0.253 0.706l-0.386 0.213c-0.225 0.152-0.521 0.152-0.746 0l-7.246-4.396-7.286 4.436c-0.225 0.152-0.521 0.152-0.746 0l-0.293-0.2c-0.218-0.163-0.318-0.441-0.253-0.706l1.918-8.326-6.42-5.515z"></path>
+</svg>
-- 
Gitee


From f961320260ce42e16125b4855383eb8aafb62466 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 22 Feb 2023 23:47:35 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Ebadge=E5=BE=BD?=
 =?UTF-8?q?=E6=A0=87=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/badge.md                        |  8 ++++
 .../src/components/badge/OBadge.vue           | 37 ++++++++++++++++
 .../components/badge/__demo__/BadgeBasic.vue  | 20 +++++++++
 .../components/badge/__demo__/BadgeColor.vue  | 20 +++++++++
 .../components/badge/__demo__/BadgeDot.vue    | 21 +++++++++
 .../components/badge/__demo__/BadgeOffset.vue | 26 +++++++++++
 .../components/badge/__demo__/BadgeOnly.vue   | 15 +++++++
 .../components/badge/__demo__/BadgeSlot.vue   | 16 +++++++
 .../components/badge/__demo__/IndexBadge.vue  | 20 +++++++++
 .../opendesign/src/components/badge/index.ts  | 13 ++++++
 .../src/components/badge/style/index.scss     | 44 +++++++++++++++++++
 .../src/components/badge/style/index.ts       |  2 +
 .../src/components/badge/style/var.scss       | 27 ++++++++++++
 .../opendesign/src/components/badge/types.ts  | 43 ++++++++++++++++++
 .../src/components/dropdown/ODropdown.vue     | 17 +++++++
 packages/portal/src/router.ts                 | 12 +++++
 16 files changed, 341 insertions(+)
 create mode 100644 packages/docs/badge.md
 create mode 100644 packages/opendesign/src/components/badge/OBadge.vue
 create mode 100644 packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
 create mode 100644 packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
 create mode 100644 packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
 create mode 100644 packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
 create mode 100644 packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
 create mode 100644 packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
 create mode 100644 packages/opendesign/src/components/badge/__demo__/IndexBadge.vue
 create mode 100644 packages/opendesign/src/components/badge/index.ts
 create mode 100644 packages/opendesign/src/components/badge/style/index.scss
 create mode 100644 packages/opendesign/src/components/badge/style/index.ts
 create mode 100644 packages/opendesign/src/components/badge/style/var.scss
 create mode 100644 packages/opendesign/src/components/badge/types.ts
 create mode 100644 packages/opendesign/src/components/dropdown/ODropdown.vue

diff --git a/packages/docs/badge.md b/packages/docs/badge.md
new file mode 100644
index 00000000..b0e72ebf
--- /dev/null
+++ b/packages/docs/badge.md
@@ -0,0 +1,8 @@
+# Badge 徽标
+
+| name   | type             | 默认值 | 说明                                                                 |
+| :----- | :--------------- | :----- | -------------------------------------------------------------------- |
+| value  | string \| number | ''     | 可选，显示值                                                         |
+| max    | number           | 99     | 可选，最大值，超过最大值显示${max}+(仅当 value 类型为 number 时生效) |
+| offset | number []        | []     | 可选，徽标位置偏移量                                                 |
+| dot    | boolean          | fasle  | 可选，是否显示为小红点                                               |
diff --git a/packages/opendesign/src/components/badge/OBadge.vue b/packages/opendesign/src/components/badge/OBadge.vue
new file mode 100644
index 00000000..35b1aff4
--- /dev/null
+++ b/packages/opendesign/src/components/badge/OBadge.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { isNumber } from '../_shared/is';
+import { badgeProps } from './types';
+
+const props = defineProps(badgeProps);
+
+const content = computed(() => {
+  if (props.dot) {
+    return '';
+  }
+  if (isNumber(props.value) && isNumber(props.max)) {
+    return props.value < props.max ? `${props.value}` : `${props.max}+`;
+  }
+  return props.value;
+});
+
+const style = computed(() => {
+  const [x, y] = props.offset;
+  const right = isNumber(x) ? `-${x}px` : `-${x}`;
+  const top = isNumber(y) ? `${y}px` : `${y}`;
+  return {
+    right,
+    top,
+  };
+});
+</script>
+
+<template>
+  <div class="o-badge" :class="[`o-badge-${props.color}`, { 'o-badge-dot': props.dot, 'o-badge-only': !$slots.default }]">
+    <slot></slot>
+    <sup class="o-badge-content" :style="style">
+      <slot v-if="$slots.content" name="content"></slot>
+      <template v-else>{{ content }}</template>
+    </sup>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
new file mode 100644
index 00000000..7d7da99d
--- /dev/null
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { OButton } from '../../button';
+import '../../button/style';
+import { OBadge } from '../index';
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <OBadge :value="9">
+      <OButton variant="fill" />
+    </OBadge>
+    <OBadge :value="100">
+      <OButton variant="fill" />
+    </OBadge>
+    <OBadge value="hot">
+      <OButton variant="fill" />
+    </OBadge>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue b/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
new file mode 100644
index 00000000..f367ad5c
--- /dev/null
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { OButton } from '../../button';
+import '../../button/style';
+import { OBadge } from '../index';
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <OBadge :value="9" color="primary">
+      <OButton variant="fill" />
+    </OBadge>
+    <OBadge :value="100" color="success">
+      <OButton variant="fill" />
+    </OBadge>
+    <OBadge value="hot" color="warning">
+      <OButton variant="fill" />
+    </OBadge>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
new file mode 100644
index 00000000..3cd80fe2
--- /dev/null
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { OButton } from '../../button';
+import '../../button/style';
+import { OLink } from '../../link';
+import '../../link/style';
+import { OBadge } from '../index';
+
+const link = 'www.openeuler.org';
+</script>
+
+<template>
+  <h4>红点徽章</h4>
+  <section>
+    <OBadge dot>
+      <OButton variant="fill" />
+    </OBadge>
+    <OBadge dot>
+      <OLink :href="link">普通链接</OLink>
+    </OBadge>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
new file mode 100644
index 00000000..c65059e8
--- /dev/null
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { OButton } from '../../button';
+import '../../button/style';
+import { OBadge } from '../index';
+</script>
+
+<template>
+  <h4>徽章位置偏移</h4>
+  <section>
+    <OBadge :value="9" :offset="[5, 10]">
+      <OButton variant="fill" />
+    </OBadge>
+    <OBadge :value="9" :offset="[5, 20]">
+      <OButton variant="fill" />
+    </OBadge>
+    <OBadge :value="9" :offset="['50%', '20%']">
+      <OButton variant="fill" />
+    </OBadge>
+  </section>
+</template>
+
+<style scoped>
+.o-badge + .o-badge {
+  margin-left: 20px;
+}
+</style>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
new file mode 100644
index 00000000..0340a7bb
--- /dev/null
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { OButton } from '../../button';
+import '../../button/style';
+import { OBadge } from '../index';
+</script>
+
+<template>
+  <h4>单独使用</h4>
+  <section>
+    <OBadge :value="9" />
+    <OBadge :value="100" />
+    <OBadge value="hot" />
+    <OBadge dot />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
new file mode 100644
index 00000000..9c84d405
--- /dev/null
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { OButton } from '../../button';
+import '../../button/style';
+import { IconAdd } from '../../icons';
+import { OBadge } from '../index';
+</script>
+
+<template>
+  <h4>自定义徽章内容</h4>
+  <section>
+    <OBadge>
+      <OButton variant="fill" />
+      <template #content> <IconAdd /></template>
+    </OBadge>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/badge/__demo__/IndexBadge.vue b/packages/opendesign/src/components/badge/__demo__/IndexBadge.vue
new file mode 100644
index 00000000..279380bc
--- /dev/null
+++ b/packages/opendesign/src/components/badge/__demo__/IndexBadge.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import '../style';
+import BadgeBasic from './BadgeBasic.vue';
+import BadgeDot from './BadgeDot.vue';
+import BadgeColor from './BadgeColor.vue';
+import BadgeSlot from './BadgeSlot.vue';
+import BadgeOffset from './BadgeOffset.vue';
+import BadgeOnly from './BadgeOnly.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <BadgeBasic />
+    <BadgeDot />
+    <BadgeColor />
+    <BadgeSlot />
+    <BadgeOffset />
+    <BadgeOnly />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/badge/index.ts b/packages/opendesign/src/components/badge/index.ts
new file mode 100644
index 00000000..8df45745
--- /dev/null
+++ b/packages/opendesign/src/components/badge/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+
+import _OBadge from './OBadge.vue';
+
+export * from './types';
+
+const OBadge = Object.assign(_OBadge, {
+  install(app: App) {
+    app.component(_OBadge.name, _OBadge);
+  },
+});
+
+export { OBadge };
diff --git a/packages/opendesign/src/components/badge/style/index.scss b/packages/opendesign/src/components/badge/style/index.scss
new file mode 100644
index 00000000..871e247f
--- /dev/null
+++ b/packages/opendesign/src/components/badge/style/index.scss
@@ -0,0 +1,44 @@
+@use './var.scss';
+
+.o-badge {
+  position: relative;
+  display: inline-block;
+}
+
+.o-badge-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  transform-origin: 100% 0;
+  color: var(--badge-color);
+  background-color: var(--badge-bg);
+  min-width: 20px;
+  font-size: var(--badge-text-size);
+  line-height: var(--badge-text-height);
+  text-align: center;
+  height: var(--badge-text-height);
+  padding-left: 4px;
+  padding-right: 4px;
+  border-radius: var(--badge-border);
+}
+
+.o-badge-dot {
+  .o-badge-content {
+    height: 8px;
+    width: 8px;
+    padding: 0;
+    border-radius: 50%;
+    min-width: unset;
+  }
+}
+
+.o-badge-only {
+  .o-badge-content {
+    position: relative;
+    top: unset;
+    right: unset;
+    transform: none;
+    display: inline-block;
+  }
+}
diff --git a/packages/opendesign/src/components/badge/style/index.ts b/packages/opendesign/src/components/badge/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/badge/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/badge/style/var.scss b/packages/opendesign/src/components/badge/style/var.scss
new file mode 100644
index 00000000..ef9b2432
--- /dev/null
+++ b/packages/opendesign/src/components/badge/style/var.scss
@@ -0,0 +1,27 @@
+.o-badge {
+  --badge-text-size: var(--o-font_size-tip1);
+  --badge-text-height: var(--o-line_height-tip1);
+
+  --badge-border: var(--o-radius-l);
+  --badge-color: var(--o-color-text1-inverse);
+
+  --badge-bg: var(--o-color-danger1);
+
+  --badge-padding: 20px;
+}
+
+.o-badge-primary {
+  --badge-bg: var(--o-color-primary1);
+}
+
+.o-badge-success {
+  --badge-bg: var(--o-color-success1);
+}
+
+.o-badge-warning {
+  --badge-bg: var(--o-color-warning1);
+}
+
+.o-badge-danger {
+  --badge-bg: var(--o-color-danger1);
+}
diff --git a/packages/opendesign/src/components/badge/types.ts b/packages/opendesign/src/components/badge/types.ts
new file mode 100644
index 00000000..315ef0af
--- /dev/null
+++ b/packages/opendesign/src/components/badge/types.ts
@@ -0,0 +1,43 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ColorT } from '../_shared/global';
+
+export const badgeProps = {
+  /**
+   * 显示值
+   */
+  value: {
+    type: [String, Number] as PropType<string | number>,
+    default: '',
+  },
+  /**
+   * 最大值，超过最大值显示${max}+(仅当 value 类型为 number 时生效)
+   */
+  max: {
+    type: Number,
+    default: 99,
+  },
+  /**
+   * 颜色类型
+   * 'normal' | 'primary' | 'success' | 'warning' | 'danger'
+   */
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal',
+  },
+  /**
+   * 是否显示为小红点
+   */
+  dot: {
+    type: Boolean,
+    default: false,
+  }
+  /**
+   * 徽标位置偏移量
+   */,
+  offset: {
+    type: Array as PropType<Array<number | string>>,
+    default: () => [],
+  },
+};
+
+export type BadgePropsT = ExtractPropTypes<typeof badgeProps>;
diff --git a/packages/opendesign/src/components/dropdown/ODropdown.vue b/packages/opendesign/src/components/dropdown/ODropdown.vue
new file mode 100644
index 00000000..ee5c145d
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/ODropdown.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { PopupTriggerT } from '../popup';
+
+interface DropdownPropT {
+  /**
+   * 下拉菜单触发方式
+   */
+  trigger?: PopupTriggerT;
+  optionPosition:
+}
+
+const props = withDefaults(defineProps<DropdownPropT>(), {
+  trigger: 'click',
+});
+</script>
+
+<template></template>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 7a7b8261..8a6366b4 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -129,6 +129,18 @@ export const routes = [
     label: '标签',
     component: () => import('@components/tag/__demo__/IndexTag.vue'),
   },
+  {
+    path: '/badge',
+    name: 'Badge',
+    label: '徽标',
+    component: () => import('@components/badge/__demo__/IndexBadge.vue'),
+  },
+  {
+    path: '/rate',
+    name: 'Rate',
+    label: '评分',
+    component: () => import('@components/rate/__demo__/IndexRate.vue'),
+  },
 ];
 
 export const router = createRouter({
-- 
Gitee