From 4f004bb128e8e731e573188ec381bcaec6306850 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Thu, 9 Mar 2023 20:30:36 +0800
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=E8=A7=84=E8=8C=83=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F&=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80round=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/badge/__demo__/BadgeDot.vue    |   6 +-
 .../components/badge/__demo__/BadgeOffset.vue |   6 +-
 .../components/badge/__demo__/BadgeOnly.vue   |   8 +-
 .../components/badge/__demo__/BadgeSlot.vue   |   6 +-
 .../src/components/badge/style/var.scss       |   1 +
 .../src/components/menu/style/index.scss      |   4 +-
 .../src/components/menu/style/var.scss        |   2 +
 .../opendesign/src/components/rate/ORate.vue  |   5 +-
 .../opendesign/src/components/tag/OTag.vue    |  81 ++-----------
 .../src/components/tag/__demo__/IndexTag.vue  |  16 +--
 .../components/tag/__demo__/TagCheckable.vue  |  14 +--
 .../__demo__/{TagStatus.vue => TagColor.vue}  |  15 +--
 .../{TagBordered.vue => TagOutline.vue}       |   9 +-
 .../src/components/tag/__demo__/TagRound.vue  |  27 +++++
 .../src/components/tag/__demo__/TagShape.vue  |  11 --
 .../src/components/tag/style/index.scss       |  71 +----------
 .../src/components/tag/style/var.scss         | 111 +++++++++++++++---
 .../opendesign/src/components/tag/types.ts    |  67 ++++++++++-
 18 files changed, 249 insertions(+), 211 deletions(-)
 rename packages/opendesign/src/components/tag/__demo__/{TagStatus.vue => TagColor.vue} (42%)
 rename packages/opendesign/src/components/tag/__demo__/{TagBordered.vue => TagOutline.vue} (35%)
 create mode 100644 packages/opendesign/src/components/tag/__demo__/TagRound.vue
 delete mode 100644 packages/opendesign/src/components/tag/__demo__/TagShape.vue

diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
index 78a23715a..30cd6db2a 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
@@ -9,12 +9,12 @@ const link = 'www.openeuler.org';
 </script>
 
 <template>
-  <h4>红点徽章</h4>
+  <h4>点状徽章</h4>
   <section>
-    <OBadge dot>
+    <OBadge color="danger" dot>
       <OButton variant="solid" />
     </OBadge>
-    <OBadge dot>
+    <OBadge color="danger" dot>
       <OLink :href="link">普通链接</OLink>
     </OBadge>
   </section>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
index 472adc082..f2f23a11e 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
@@ -7,13 +7,13 @@ import { OBadge } from '../index';
 <template>
   <h4>徽章位置偏移</h4>
   <section>
-    <OBadge :value="9" :offset="[5, 10]">
+    <OBadge :value="9" :offset="[5, 10]" color="danger">
       <OButton variant="solid" />
     </OBadge>
-    <OBadge :value="9" :offset="[5, 20]">
+    <OBadge :value="9" :offset="[5, 20]" color="danger">
       <OButton variant="solid" />
     </OBadge>
-    <OBadge :value="9" :offset="['50%', '20%']">
+    <OBadge :value="9" :offset="['50%', '20%']" color="danger">
       <OButton variant="solid" />
     </OBadge>
   </section>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
index 0340a7bbe..21ae52cf4 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
@@ -7,9 +7,9 @@ import { OBadge } from '../index';
 <template>
   <h4>单独使用</h4>
   <section>
-    <OBadge :value="9" />
-    <OBadge :value="100" />
-    <OBadge value="hot" />
-    <OBadge dot />
+    <OBadge :value="9" color="danger" />
+    <OBadge :value="100" color="danger" />
+    <OBadge value="hot" color="danger" />
+    <OBadge dot color="danger" />
   </section>
 </template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
index 9fd996743..ee7a4c2d0 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
@@ -8,9 +8,11 @@ import { OBadge } from '../index';
 <template>
   <h4>自定义徽章内容</h4>
   <section>
-    <OBadge>
+    <OBadge color="danger">
       <OButton variant="solid" />
-      <template #content> <IconAdd /></template>
+      <template #content>
+        <IconAdd />
+      </template>
     </OBadge>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/badge/style/var.scss b/packages/opendesign/src/components/badge/style/var.scss
index 43581227b..8cf92c680 100644
--- a/packages/opendesign/src/components/badge/style/var.scss
+++ b/packages/opendesign/src/components/badge/style/var.scss
@@ -6,6 +6,7 @@
   --badge-bg-color: var(--o-color-control1);
 
   --badge-radius: var(--o-size-l);
+
   --badge-padding: 8px;
 
   --badge-dot-size: 8px;
diff --git a/packages/opendesign/src/components/menu/style/index.scss b/packages/opendesign/src/components/menu/style/index.scss
index 9a5012006..6796624cb 100644
--- a/packages/opendesign/src/components/menu/style/index.scss
+++ b/packages/opendesign/src/components/menu/style/index.scss
@@ -35,7 +35,7 @@
   display: flex;
   align-items: center;
   padding: 16px 48px 16px 24px;
-  border-radius: 8px;
+  border-radius: var(--sub-menu-radius);
   margin-bottom: 4px;
   cursor: pointer;
   transition: background-color var(--o-duration-m2) var(--o-easing-standard);
@@ -76,7 +76,7 @@
 .o-menu-item {
   font-size: var(--menu-item-text-size);
   line-height: var(--menu-item-text-height);
-  border-radius: 8px;
+  border-radius: var(--menu-item-radius);
   padding: 12px 16px 12px 36px;
   cursor: pointer;
   overflow: hidden;
diff --git a/packages/opendesign/src/components/menu/style/var.scss b/packages/opendesign/src/components/menu/style/var.scss
index 044682569..9719d272c 100644
--- a/packages/opendesign/src/components/menu/style/var.scss
+++ b/packages/opendesign/src/components/menu/style/var.scss
@@ -9,6 +9,7 @@
   --sub-menu-text-size: var(--o-font_size-h4);
   --sub-menu-text-height: var(--o-line_height-h4);
   --sub-menu-icon-height: var(--o-font_size-h1);
+  --sub-menu-radius: var(--o-radius-control-s);
 }
 
 .o-menu-item {
@@ -17,4 +18,5 @@
   --menu-item-bg-active: var(--o-color-control2);
   --menu-item-bg-hover: var(--o-color-control2-light);
   --menu-item-color-disabled: var(--o-color-info4);
+  --menu-item-radius: var(--o-radius-control-s);
 }
diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue
index a7810a426..1667b3f9a 100644
--- a/packages/opendesign/src/components/rate/ORate.vue
+++ b/packages/opendesign/src/components/rate/ORate.vue
@@ -3,6 +3,7 @@ import { computed, ref, watch } from 'vue';
 import { rateProps } from './types';
 import { defaultSize } from '../_shared/global';
 import { IconStar } from '../icons';
+import { isUndefined } from '../_shared/is';
 
 const props = defineProps(rateProps);
 
@@ -16,7 +17,9 @@ const realValue = ref(props.modelValue ?? props.defaultValue);
 watch(
   () => props.modelValue,
   (val) => {
-    realValue.value = val ?? props.defaultValue;
+    if (!isUndefined(val)) {
+      realValue.value = val;
+    }
   }
 );
 
diff --git a/packages/opendesign/src/components/tag/OTag.vue b/packages/opendesign/src/components/tag/OTag.vue
index 7b5fa5585..c96429eb4 100644
--- a/packages/opendesign/src/components/tag/OTag.vue
+++ b/packages/opendesign/src/components/tag/OTag.vue
@@ -1,59 +1,12 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { defaultSize, defaultShape } from '../_shared/global';
-import type { SizeT, ShapeT } from '../_shared/global';
-import type { TagStatusT } from './types';
+import { defaultSize } from '../_shared/global';
+import { getRoundClass } from '../_shared/style-class';
+import { tagProps } from './types';
 import { IconClose } from '../_shared/icons';
 import { isUndefined } from '../_shared/is';
 
-interface TagPropT {
-  /**
-   * 标签状态
-   * 'normal' | 'success' | 'warning' | 'danger'
-   */
-  status?: TagStatusT;
-  /**
-   * 是否有边框
-   */
-  bordered?: boolean;
-  /**
-   * 标签尺寸
-   * 'normal' | 'large' | 'small'
-   */
-  size?: SizeT;
-  /**
-   * 标签形状
-   * 'normal' | 'round'
-   */
-  shape?: ShapeT;
-  /**
-   * 是否可关闭
-   */
-  closable?: boolean;
-  /**
-   * 是否可选中
-   */
-  checkable?: boolean;
-  /**
-   * 是否被选中(标签可选中时该属性生效)
-   */
-  checked?: boolean;
-  /**
-   * 非受控状态时，默认是否选中(标签可选中时该属性生效)
-   */
-  defaultChecked?: boolean;
-}
-
-const props = withDefaults(defineProps<TagPropT>(), {
-  status: 'normal',
-  bordered: false,
-  size: undefined,
-  shape: undefined,
-  closable: false,
-  checkable: false,
-  checked: undefined,
-  defaultChecked: false,
-});
+const props = defineProps(tagProps);
 
 const emits = defineEmits<{
   (e: 'update:checked', val: boolean): void;
@@ -61,28 +14,19 @@ const emits = defineEmits<{
   (e: 'close'): void;
 }>();
 
+const round = getRoundClass(props, 'tag');
+
 // 是否可见
 const isVisible = ref(true);
 
-// 监听checked属性改变
-const isCheckedPropChange = ref(false);
-
-watch(
-  () => props.checked,
-  () => {
-    isCheckedPropChange.value = true;
-  }
-);
-
 // 是否选中
 const _checked = ref(props.defaultChecked);
 const isChecked = computed(() => {
   if (!props.checkable) {
     return false;
   }
-
-  if (!isUndefined(props.checked) || isCheckedPropChange.value) {
-    return props.checked ?? false;
+  if (!isUndefined(props.checked)) {
+    return props.checked;
   }
 
   return _checked.value;
@@ -117,13 +61,14 @@ const onClose = (ev: Event) => {
     v-if="isVisible"
     class="o-tag"
     :class="[
-      `o-tag-status-${props.status}`,
-      `o-tag-size-${props.size || defaultSize}`,
-      `o-tag-shape-${props.shape || defaultShape}`,
-      { 'o-tag-bordered': props.bordered },
+      `o-tag-${props.color}`,
+      `o-tag-${props.size || defaultSize}`,
+      `o-tag-${props.variant}`,
+      round.class.value,
       { 'o-tag-checkable': props.checkable },
       { 'o-tag-checked': isChecked },
     ]"
+    :style="round.style.value"
     @click="onClick"
   >
     <span v-if="$slots.icon" class="o-tag-icon prefix">
diff --git a/packages/opendesign/src/components/tag/__demo__/IndexTag.vue b/packages/opendesign/src/components/tag/__demo__/IndexTag.vue
index 2862b691c..072a3d9a7 100644
--- a/packages/opendesign/src/components/tag/__demo__/IndexTag.vue
+++ b/packages/opendesign/src/components/tag/__demo__/IndexTag.vue
@@ -2,22 +2,22 @@
 import '../style';
 
 import TagBasic from './TagBasic.vue';
-import TagClosable from './TagClosable.vue';
-import TagShape from './TagShape.vue';
+import TagColor from './TagColor.vue';
 import TagSize from './TagSize.vue';
-import TagStatus from './TagStatus.vue';
-import TagBordered from './TagBordered.vue';
+import TagShape from './TagRound.vue';
+import TagOutline from './TagOutline.vue';
+import TagClosable from './TagClosable.vue';
 import TagCheckable from './TagCheckable.vue';
 </script>
 
 <template>
   <div class="page-demo">
     <TagBasic />
-    <TagClosable />
-    <TagShape />
+    <TagColor />
     <TagSize />
-    <TagStatus />
-    <TagBordered />
+    <TagShape />
+    <TagClosable />
+    <TagOutline />
     <TagCheckable />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
index 810737ca7..6e47fd73c 100644
--- a/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
+++ b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
@@ -15,12 +15,12 @@ const handleChange = (val: boolean) => {
   <h4>可选中标签</h4>
   <section>
     <OTag v-model:checked="tagVal1" checkable @change="handleChange">Tag1</OTag>
-    <OTag v-model:checked="tagVal2" status="success" checkable @change="handleChange">Tag2</OTag>
-    <OTag v-model:checked="tagVal3" status="warning" checkable @change="handleChange">Tag3</OTag>
-    <OTag v-model:checked="tagVal4" status="danger" checkable @change="handleChange">Tag4</OTag>
-    <OTag :default-checked="true" checkable bordered @change="handleChange">Tag5</OTag>
-    <OTag :default-checked="true" status="success" checkable bordered @change="handleChange">Tag6</OTag>
-    <OTag :default-checked="true" status="warning" checkable bordered @change="handleChange">Tag7</OTag>
-    <OTag :default-checked="true" status="danger" checkable bordered @change="handleChange">Tag8</OTag>
+    <OTag v-model:checked="tagVal2" color="success" checkable @change="handleChange">Tag2</OTag>
+    <OTag v-model:checked="tagVal3" color="warning" checkable @change="handleChange">Tag3</OTag>
+    <OTag v-model:checked="tagVal4" color="danger" checkable @change="handleChange">Tag4</OTag>
+    <OTag :default-checked="true" variant="outline" checkable @change="handleChange">Tag5</OTag>
+    <OTag :default-checked="true" color="success" variant="outline" checkable @change="handleChange">Tag6</OTag>
+    <OTag :default-checked="true" color="warning" variant="outline" checkable @change="handleChange">Tag7</OTag>
+    <OTag :default-checked="true" color="danger" variant="outline" checkable @change="handleChange">Tag8</OTag>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagStatus.vue b/packages/opendesign/src/components/tag/__demo__/TagColor.vue
similarity index 42%
rename from packages/opendesign/src/components/tag/__demo__/TagStatus.vue
rename to packages/opendesign/src/components/tag/__demo__/TagColor.vue
index 4c6be2435..cca7728a8 100644
--- a/packages/opendesign/src/components/tag/__demo__/TagStatus.vue
+++ b/packages/opendesign/src/components/tag/__demo__/TagColor.vue
@@ -3,17 +3,12 @@ import { OTag } from '../index';
 </script>
 
 <template>
-  <h4>Status</h4>
+  <h4>Color</h4>
   <section>
     <OTag>Normal Tag</OTag>
-    <OTag status="success">Success Tag</OTag>
-    <OTag status="warning">Warning Tag</OTag>
-    <OTag status="danger">Danger Tag</OTag>
+    <OTag color="primary">Primary Tag</OTag>
+    <OTag color="success">Success Tag</OTag>
+    <OTag color="warning">Warning Tag</OTag>
+    <OTag color="danger">Danger Tag</OTag>
   </section>
 </template>
-
-<style>
-a {
-  color: #b2c0e4;
-}
-</style>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagBordered.vue b/packages/opendesign/src/components/tag/__demo__/TagOutline.vue
similarity index 35%
rename from packages/opendesign/src/components/tag/__demo__/TagBordered.vue
rename to packages/opendesign/src/components/tag/__demo__/TagOutline.vue
index 9cfdfe483..666206d11 100644
--- a/packages/opendesign/src/components/tag/__demo__/TagBordered.vue
+++ b/packages/opendesign/src/components/tag/__demo__/TagOutline.vue
@@ -5,9 +5,10 @@ import { OTag } from '../index';
 <template>
   <h4>带边框标签</h4>
   <section>
-    <OTag bordered>Tag1</OTag>
-    <OTag status="success" bordered>Tag2</OTag>
-    <OTag status="warning" bordered>Tag3</OTag>
-    <OTag status="danger" bordered>Tag4</OTag>
+    <OTag variant="outline">Tag1</OTag>
+    <OTag color="primary" variant="outline">Tag2</OTag>
+    <OTag color="success" variant="outline">Tag2</OTag>
+    <OTag color="warning" variant="outline">Tag3</OTag>
+    <OTag color="danger" variant="outline">Tag4</OTag>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagRound.vue b/packages/opendesign/src/components/tag/__demo__/TagRound.vue
new file mode 100644
index 000000000..85edc9cc3
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagRound.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { OTag } from '../index';
+</script>
+
+<template>
+  <h4>Round</h4>
+  <section>
+    <div>
+      <section>
+        <p>round="pill"</p>
+        <OTag round="pill" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+    <div>
+      <section>
+        <p>round="2px"</p>
+        <OTag round="2px" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+    <div>
+      <section>
+        <p>round="4px"</p>
+        <OTag round="4px" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagShape.vue b/packages/opendesign/src/components/tag/__demo__/TagShape.vue
deleted file mode 100644
index 322d54e26..000000000
--- a/packages/opendesign/src/components/tag/__demo__/TagShape.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { OTag } from '../index';
-</script>
-
-<template>
-  <h4>Shape</h4>
-  <section>
-    <OTag shape="normal">Normal Tag</OTag>
-    <OTag shape="round">Round Tag</OTag>
-  </section>
-</template>
diff --git a/packages/opendesign/src/components/tag/style/index.scss b/packages/opendesign/src/components/tag/style/index.scss
index 2476fe195..3561e8d55 100644
--- a/packages/opendesign/src/components/tag/style/index.scss
+++ b/packages/opendesign/src/components/tag/style/index.scss
@@ -4,11 +4,10 @@
   font-size: var(--tag-text-size);
   line-height: var(--tag-text-height);
   height: var(--tag-height);
-  border: 1px solid var(--tag-border);
+  border: 1px solid var(--tag-bd-color);
   border-radius: var(--tag-radius);
   padding: var(--tag-padding);
-  transition: all var(--o-duration-s) var(--o-easing-standard);
-  background-color: var(--tag-bg);
+  background-color: var(--tag-bg-color);
   color: var(--tag-color);
   white-space: nowrap;
 
@@ -17,42 +16,6 @@
   justify-content: center;
 }
 
-.o-tag-size-small {
-  --tag-padding: 0 7px;
-  --tag-height: var(--tag-height-s);
-  --tag-radius: var(--tag-radius-s);
-}
-
-.o-tag-size-medium {
-  --tag-padding: 4px 15px;
-  --tag-height: var(--tag-height-m);
-  --tag-radius: var(--tag-radius-m);
-}
-
-.o-tag-size-large {
-  --tag-padding: 4px 19px;
-  --tag-height: var(--tag-height-l);
-  --tag-radius: var(--tag-radius-l);
-}
-
-.o-tag-status-success {
-  --tag-color: var(--tag-color-success);
-  --tag-bg: var(--tag-bg-success);
-  --tag-border: var(--tag-border-success);
-}
-
-.o-tag-status-warning {
-  --tag-color: var(--tag-color-warning);
-  --tag-bg: var(--tag-bg-warning);
-  --tag-border: var(--tag-border-warning);
-}
-
-.o-tag-status-danger {
-  --tag-color: var(--tag-color-danger);
-  --tag-bg: var(--tag-bg-danger);
-  --tag-border: var(--tag-border-danger);
-}
-
 .o-tag-icon {
   display: inline-flex;
   align-items: center;
@@ -73,36 +36,6 @@
   cursor: pointer;
 }
 
-.o-tag-shape-round {
-  --tag-radius: var(--tag-height-l);
-}
-
-.o-tag-bordered {
-  --tag-bg: transparent;
-  &.o-tag-status-success {
-    --tag-color: var(--tag-bg-success);
-  }
-  &.o-tag-status-warning {
-    --tag-color: var(--tag-bg-warning);
-  }
-  &.o-tag-status-danger {
-    --tag-color: var(--tag-bg-danger);
-  }
-}
-
 .o-tag-checkable {
   cursor: pointer;
-  &:not(.o-tag-checked) {
-    --tag-bg: transparent;
-    --tag-border: transparent;
-    &.o-tag-status-success {
-      --tag-color: var(--tag-bg-success);
-    }
-    &.o-tag-status-warning {
-      --tag-color: var(--tag-bg-warning);
-    }
-    &.o-tag-status-danger {
-      --tag-color: var(--tag-bg-danger);
-    }
-  }
 }
diff --git a/packages/opendesign/src/components/tag/style/var.scss b/packages/opendesign/src/components/tag/style/var.scss
index 5601dc939..58789c560 100644
--- a/packages/opendesign/src/components/tag/style/var.scss
+++ b/packages/opendesign/src/components/tag/style/var.scss
@@ -1,27 +1,102 @@
-.o-tag {
+.o-tag-normal {
   --tag-color: var(--o-color-info1);
-  --tag-color-success: var(--o-color-info1-inverse);
-  --tag-color-warning: var(--o-color-info1-inverse);
-  --tag-color-danger: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-control1-light);
+  --tag-bd-color: var(--o-color-control1-light);
+}
+
+.o-tag-primary {
+  --tag-color: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-primary1);
+  --tag-bd-color: var(--o-color-primary1);
+}
+
+.o-tag-success {
+  --tag-color: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-success1);
+  --tag-bd-color: var(--o-color-success1);
+}
+
+.o-tag-warning {
+  --tag-color: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-warning1);
+  --tag-bd-color: var(--o-color-warning1);
+}
 
-  --tag-bg: var(--o-color-control1-light);
-  --tag-bg-success: var(--o-color-success1);
-  --tag-bg-warning: var(--o-color-warning1);
-  --tag-bg-danger: var(--o-color-danger1);
+.o-tag-danger {
+  --tag-color: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-danger1);
+  --tag-bd-color: var(--o-color-danger1);
+}
 
-  --tag-border: var(--o-color-control1-light);
-  --tag-border-success: var(--o-color-success1);
-  --tag-border-warning: var(--o-color-warning1);
-  --tag-border-danger: var(--o-color-danger1);
+.o-tag-small {
+  --tag-padding: 0 7px;
+  --tag-radius: var(--o-radius-control-s);
+  --tag-text-size: var(--o-font_size-tip1);
+  --tag-text-height: var(--o-line_height-tip1);
+}
 
+.o-tag-medium {
+  --tag-padding: 0 15px;
+  --tag-radius: var(--o-radius-control-m);
   --tag-text-size: var(--o-font_size-text);
   --tag-text-height: var(--o-line_height-text);
+}
+
+.o-tag-large {
+  --tag-padding: 4px 19px;
+  --tag-radius: var(--o-radius-control-l);
+}
+
+.o-tag-round-pill {
+  --tag-radius: var(--o-size-l);
+}
+
+.o-tag-outline {
+  --tag-bg-color: transparent;
+
+  &.o-tag-normal {
+    --tag-color: var(--o-color-info1);
+  }
+
+  &.o-tag-primary {
+    --tag-color: var(--o-color-primary1);
+  }
+
+  &.o-tag-success {
+    --tag-color: var(--o-color-success1);
+  }
+
+  &.o-tag-warning {
+    --tag-color: var(--o-color-warning1);
+  }
+
+  &.o-tag-danger {
+    --tag-color: var(--o-color-danger1);
+  }
+}
+
+.o-tag-checkable {
+  &:not(.o-tag-checked) {
+    --tag-bg-color: transparent;
+    --tag-bd-color: transparent;
+    &.o-tag-normal {
+      --tag-color: var(--o-color-info1);
+    }
+
+    &.o-tag-primary {
+      --tag-color: var(--o-color-primary1);
+    }
+
+    &.o-tag-success {
+      --tag-color: var(--o-color-success1);
+    }
 
-  --tag-height-s: var(--o-size-s);
-  --tag-height-m: var(--o-size-m);
-  --tag-height-l: var(--o-size-l);
+    &.o-tag-warning {
+      --tag-color: var(--o-color-warning1);
+    }
 
-  --tag-radius-s: var(--o-radius-control-s);
-  --tag-radius-m: var(--o-radius-control-s);
-  --tag-radius-l: var(--o-radius-control-s);
+    &.o-tag-danger {
+      --tag-color: var(--o-color-danger1);
+    }
+  }
 }
diff --git a/packages/opendesign/src/components/tag/types.ts b/packages/opendesign/src/components/tag/types.ts
index 0d963e640..4652b89ab 100644
--- a/packages/opendesign/src/components/tag/types.ts
+++ b/packages/opendesign/src/components/tag/types.ts
@@ -1 +1,66 @@
-export type TagStatusT = 'normal' | 'success' | 'warning' | 'danger';
+import { ExtractPropTypes, PropType } from 'vue';
+import { SizeT, RoundT, ColorT, VariantT } from '../_shared/global';
+
+export type TagVariantT = 'solid' | 'outline';
+
+export const tagProps = {
+  /**
+   * 标签颜色
+   * 'normal' | 'primary' | 'success' | 'warning' | 'danger';
+   */
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal',
+  },
+  /**
+   * 标签类型
+   * 'solid' | 'outline'
+   */
+  variant: {
+    type: String as PropType<VariantT>,
+    default: 'solid',
+  },
+  /**
+   * 标签尺寸
+   * 'large' | 'medium' | 'small'
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>,
+  },
+  /**
+   * 是否可关闭
+   */
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否可选中
+   */
+  checkable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 双向绑定值，是否被选中(标签可选中时该属性生效)
+   */
+  checked: {
+    type: Boolean,
+    default: undefined,
+  },
+  /**
+   * 非受控状态时，默认是否选中(标签可选中时该属性生效)
+   */
+  defaultChecked: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export type TagPropsT = ExtractPropTypes<typeof tagProps>;
-- 
Gitee


From d35cb14a3275d573ac8bc2d58b90d90ad7305418 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Fri, 10 Mar 2023 09:55:25 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=BC=80=E5=85=B3?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F&=E9=9D=9E=E5=8F=97=E6=8E=A7=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../checkbox-group/OCheckboxGroup.vue         |  3 +-
 .../opendesign/src/components/menu/OMenu.vue  | 14 +++-
 .../components/radio-group/ORadioGroup.vue    |  1 +
 .../switch/__demo__/SwitchRound.vue           |  6 +-
 .../src/components/switch/style/index.scss    | 81 +++++--------------
 .../src/components/switch/style/var.scss      | 15 ++--
 6 files changed, 43 insertions(+), 77 deletions(-)

diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
index 95dbdd780..c989836e2 100644
--- a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
@@ -11,7 +11,7 @@ const emits = defineEmits<{
   (e: 'change', val: Array<string | number>): void;
 }>();
 
-const realValue = ref(props.modelValue ?? props.defaultValue);
+const realValue = ref(isArray(props.modelValue) ? props.modelValue : props.defaultValue);
 
 watch(
   () => props.modelValue,
@@ -27,6 +27,7 @@ const isMinimum = computed(() => (isUndefined(props.min) ? false : realValue.val
 const isMaximum = computed(() => (isUndefined(props.max) ? false : realValue.value.length >= props.max));
 
 const updateModelValue = (val: Array<string | number>) => {
+  realValue.value = val;
   emits('update:modelValue', val);
 };
 
diff --git a/packages/opendesign/src/components/menu/OMenu.vue b/packages/opendesign/src/components/menu/OMenu.vue
index 32d5fbefe..729453141 100644
--- a/packages/opendesign/src/components/menu/OMenu.vue
+++ b/packages/opendesign/src/components/menu/OMenu.vue
@@ -3,7 +3,7 @@ import { onMounted, provide, ref, toRefs, watch } from 'vue';
 import { menuInjectKey } from './provide';
 import { menuProps } from './types';
 import MenuTree from './menu';
-import { isUndefined } from '../_shared/is';
+import { isArray, isUndefined } from '../_shared/is';
 
 const props = defineProps(menuProps);
 
@@ -23,11 +23,14 @@ const realValue = ref(modelValue?.value ?? defaultValue.value);
 watch(
   () => modelValue?.value,
   (val) => {
-    realValue.value = isUndefined(val) ? '' : val;
+    if (!isUndefined(val)) {
+      realValue.value = val;
+    }
   }
 );
 
 const updateModelValue = (val: string) => {
+  realValue.value = val;
   emits('update:modelValue', val);
   emits('change', val);
 };
@@ -46,15 +49,18 @@ onMounted(() => {
 });
 
 // 展开节点列表
-const realExpanded = ref(expanded?.value ?? defaultExpanded.value);
+const realExpanded = ref(isArray(expanded?.value) ? expanded?.value : defaultExpanded.value);
 watch(
   () => expanded?.value,
   (val) => {
-    realExpanded.value = isUndefined(val) ? [] : val;
+    if (isArray(val)) {
+      realExpanded.value = val;
+    }
   }
 );
 
 const updateExpanded = (val: Array<string>) => {
+  realExpanded.value = val;
   emits('update:expanded', val);
   emits('expanded-change', val);
 };
diff --git a/packages/opendesign/src/components/radio-group/ORadioGroup.vue b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
index 23ce85353..f24bc80ca 100644
--- a/packages/opendesign/src/components/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
@@ -23,6 +23,7 @@ watch(
 );
 
 const updateModelValue = (val: string | number | boolean) => {
+  realValue.value = val;
   emits('update:modelValue', val);
 };
 
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue b/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue
index 94a815ae8..56bf2965f 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue
@@ -5,7 +5,7 @@ const switchVal1 = ref(false);
 const switchVal2 = ref(true);
 const switchVal3 = ref(true);
 
-const r2 = '2px';
+const r2 = '6px';
 const r4 = '4px';
 </script>
 
@@ -23,7 +23,7 @@ const r4 = '4px';
 
     <div>
       <section>
-        <p>round="2px"</p>
+        <p>round={{ r2 }}</p>
         <OSWitch v-model="switchVal2" :round="r2" size="small" />
         <OSWitch v-model="switchVal2" :round="r2" size="medium" />
         <OSWitch v-model="switchVal2" :round="r2" size="large" />
@@ -32,7 +32,7 @@ const r4 = '4px';
 
     <div>
       <section>
-        <p>round="4px"</p>
+        <p>round={{ r4 }}</p>
         <OSWitch v-model="switchVal3" :round="r4" size="small" />
         <OSWitch v-model="switchVal3" :round="r4" size="medium" />
         <OSWitch v-model="switchVal3" :round="r4" size="large" />
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index 1d771e491..2ee22e462 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -12,16 +12,6 @@
   cursor: pointer;
 }
 
-.o-switch-checked {
-  background-color: var(--switch-bg-color-checked);
-}
-
-.o-switch-disabled,
-.o-switch-loading {
-  cursor: not-allowed;
-  background-color: var(--switch-bg-color-disabled);
-}
-
 .o-switch-disabled.o-switch-checked,
 .o-switch-loading.o-switch-checked {
   background-color: var(--switch-bg-color-checked-disabled);
@@ -43,9 +33,10 @@
   transform: translateY(-50%);
   width: var(--switch-handler-size);
   height: var(--switch-handler-size);
-  border-radius: var(--switch-handler-radius);
+  border-radius: calc(var(--switch-radius) - 2px);
   background-color: var(--switch-handler-bg-color);
   transition: left var(--o-duration-s) var(--o-easing-standard);
+  left: var(--switch-handler-offset);
 
   .o-switch-icon-loading {
     width: 100%;
@@ -63,73 +54,37 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-left: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-content-padding));
+  padding-right: var(--switch-content-padding);
 }
 
-.o-switch-large {
-  min-width: 60px;
+.o-switch-checked {
+  background-color: var(--switch-bg-color-checked);
+
   .o-switch-handler {
-    left: 4px;
+    left: calc(100% - var(--switch-handler-offset) - var(--switch-handler-size));
   }
 
   .o-switch-content {
-    padding-left: 28px;
-    padding-right: 8px;
+    padding-left: var(--switch-content-padding);
+    padding-right: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-content-padding));
   }
+}
 
-  &.o-switch-checked {
-    .o-switch-handler {
-      left: calc(100% - 24px);
-    }
+.o-switch-disabled,
+.o-switch-loading {
+  cursor: not-allowed;
+  background-color: var(--switch-bg-color-disabled);
+}
 
-    .o-switch-content {
-      padding-left: 8px;
-      padding-right: 28px;
-    }
-  }
+.o-switch-large {
+  min-width: 60px;
 }
 
 .o-switch-medium {
   min-width: 40px;
-
-  .o-switch-handler {
-    left: 2px;
-  }
-
-  .o-switch-content {
-    padding-left: 20px;
-    padding-right: 4px;
-  }
-
-  &.o-switch-checked {
-    .o-switch-handler {
-      left: calc(100% - 18px);
-    }
-    .o-switch-content {
-      padding-left: 4px;
-      padding-right: 20px;
-    }
-  }
 }
 
 .o-switch-small {
   min-width: 30px;
-
-  .o-switch-handler {
-    left: 2px;
-  }
-
-  .o-switch-content {
-    padding-left: 15px;
-    padding-right: 2px;
-  }
-
-  &.o-switch-checked {
-    .o-switch-handler {
-      left: calc(100% - 14px);
-    }
-    .o-switch-content {
-      padding-left: 2px;
-      padding-right: 15px;
-    }
-  }
 }
diff --git a/packages/opendesign/src/components/switch/style/var.scss b/packages/opendesign/src/components/switch/style/var.scss
index 0dd36036d..4251299c2 100644
--- a/packages/opendesign/src/components/switch/style/var.scss
+++ b/packages/opendesign/src/components/switch/style/var.scss
@@ -11,29 +11,32 @@
 
 .o-switch-large {
   --switch-height: 28px;
-  --switch-radius: 2px;
+  --switch-radius: 8px;
   --switch-text-size: var(--o-font_size-h4);
   --switch-text-height: var(--o-line_height-h4);
   --switch-handler-size: 20px;
-  --switch-handler-radius: 2px;
+  --switch-content-padding: 8px;
+  --switch-handler-offset: 4px;
 }
 
 .o-switch-medium {
   --switch-height: 20px;
-  --switch-radius: 2px;
+  --switch-radius: 6px;
   --switch-text-size: var(--o-font_size-tip1);
   --switch-text-height: var(--o-line_height-tip1);
   --switch-handler-size: 16px;
-  --switch-handler-radius: 2px;
+  --switch-content-padding: 6px;
+  --switch-handler-offset: 4px;
 }
 
 .o-switch-small {
   --switch-height: 16px;
-  --switch-radius: 2px;
+  --switch-radius: 4px;
   --switch-text-size: var(--o-font_size-tip2);
   --switch-text-height: var(--o-line_height-tip2);
   --switch-handler-size: 12px;
-  --switch-handler-radius: 2px;
+  --switch-content-padding: 4px;
+  --switch-handler-offset: 2px;
 }
 
 .o-switch-round-pill {
-- 
Gitee


From 20b6ca6183c0d18dc36b0bdf8fda804c696c31d8 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Fri, 10 Mar 2023 11:10:21 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix
---
 .../src/components/breadcrumb/OBreadcrumbItem.vue  | 14 +++-----------
 .../components/checkbox-group/OCheckboxGroup.vue   |  6 +++---
 .../src/components/checkbox-group/provide.ts       |  2 +-
 .../src/components/checkbox/OCheckbox.vue          |  6 +++---
 .../src/components/dropdown/ODropdownItem.vue      |  1 +
 .../opendesign/src/components/menu/OMenuItem.vue   |  6 +++---
 .../src/components/radio-group/ORadioGroup.vue     |  6 +++---
 .../src/components/radio-group/provide.ts          |  2 +-
 .../opendesign/src/components/radio/ORadio.vue     |  8 ++++----
 .../opendesign/src/components/switch/OSwitch.vue   |  6 +++---
 packages/opendesign/src/components/tag/OTag.vue    | 12 ++++++------
 11 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
index 1be9187d1..8f37f5cdb 100644
--- a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
+++ b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
@@ -7,26 +7,18 @@ import { IconChevronRight } from '../_shared/icons';
 defineProps(breadcrumbItemProps);
 
 const breadcrumbInjection = inject(breadcrumbInjectKey, null);
-
-const emits = defineEmits<{
-  (e: 'click'): void;
-}>();
-
-const onClick = () => {
-  emits('click');
-};
 </script>
 
 <template>
   <div class="o-breadcrumb-item">
     <!-- label -->
-    <a v-if="href" :href="href" :target="target" class="o-breadcrumb-item-label" @click="onClick">
+    <a v-if="href" :href="href" :target="target" class="o-breadcrumb-item-label">
       <slot></slot>
     </a>
-    <router-link v-else-if="to" :to="to" :replace="replace" @click="onClick">
+    <router-link v-else-if="to" :to="to" :replace="replace">
       <slot></slot>
     </router-link>
-    <span v-else class="o-breadcrumb-item-label" @click="onClick">
+    <span v-else class="o-breadcrumb-item-label">
       <slot></slot>
     </span>
     <!-- separator -->
diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
index c989836e2..7ad11cd76 100644
--- a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
@@ -8,7 +8,7 @@ const props = defineProps(checkboxGroupProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: Array<string | number>): void;
-  (e: 'change', val: Array<string | number>): void;
+  (e: 'change', val: Array<string | number>, ev: Event): void;
 }>();
 
 const realValue = ref(isArray(props.modelValue) ? props.modelValue : props.defaultValue);
@@ -31,8 +31,8 @@ const updateModelValue = (val: Array<string | number>) => {
   emits('update:modelValue', val);
 };
 
-const onChange = (val: Array<string | number>) => {
-  emits('change', val);
+const onChange = (val: Array<string | number>, ev: Event) => {
+  emits('change', val, ev);
 };
 
 provide(checkboxGroupInjectKey, {
diff --git a/packages/opendesign/src/components/checkbox-group/provide.ts b/packages/opendesign/src/components/checkbox-group/provide.ts
index c761b6681..d22eeb7bc 100644
--- a/packages/opendesign/src/components/checkbox-group/provide.ts
+++ b/packages/opendesign/src/components/checkbox-group/provide.ts
@@ -6,5 +6,5 @@ export const checkboxGroupInjectKey: InjectionKey<{
   isMinimum: Ref<boolean>;
   isMaximum: Ref<boolean>;
   updateModelValue: (val: Array<string | number>) => void;
-  onChange: (val: Array<string | number>) => void;
+  onChange: (val: Array<string | number>, ev: Event) => void;
 }> = Symbol('provide-checkbox-group');
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index b684a6107..2348aa4ab 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -9,7 +9,7 @@ const props = defineProps(checkboxProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: Array<string | number>): void;
-  (e: 'change', val: Array<string | number>): void;
+  (e: 'change', val: Array<string | number>, ev: Event): void;
 }>();
 
 const checkboxGroupInjection = inject(checkboxGroupInjectKey, null);
@@ -75,8 +75,8 @@ const onChange = (ev: Event) => {
   emits('update:modelValue', val);
   checkboxGroupInjection?.updateModelValue(val);
   nextTick(() => {
-    emits('change', val);
-    checkboxGroupInjection?.onChange(val);
+    emits('change', val, ev);
+    checkboxGroupInjection?.onChange(val, ev);
   });
 };
 
diff --git a/packages/opendesign/src/components/dropdown/ODropdownItem.vue b/packages/opendesign/src/components/dropdown/ODropdownItem.vue
index 54c0ca1cc..85f49e857 100644
--- a/packages/opendesign/src/components/dropdown/ODropdownItem.vue
+++ b/packages/opendesign/src/components/dropdown/ODropdownItem.vue
@@ -7,6 +7,7 @@ const props = defineProps(dropdownItemProps);
 const dropdownInjection = inject(dropdownInjectKey, null);
 
 const onItemClick = () => {
+  console.log(1);
   if (props.disabled) {
     return;
   }
diff --git a/packages/opendesign/src/components/menu/OMenuItem.vue b/packages/opendesign/src/components/menu/OMenuItem.vue
index 2fc28b708..4da6ea244 100644
--- a/packages/opendesign/src/components/menu/OMenuItem.vue
+++ b/packages/opendesign/src/components/menu/OMenuItem.vue
@@ -7,7 +7,7 @@ import { isUndefined } from '../_shared/is';
 const props = defineProps(menuItemProps);
 
 const emits = defineEmits<{
-  (e: 'click'): void;
+  (e: 'click', ev: Event): void;
 }>();
 
 const menuInjection = inject(menuInjectKey, null);
@@ -20,7 +20,7 @@ const isActive = computed(() => {
   return false;
 });
 
-const onItemClick = (ev: Event) => {
+const onItemClick = (ev: MouseEvent) => {
   ev.stopPropagation();
 
   if (props.disabled) {
@@ -31,7 +31,7 @@ const onItemClick = (ev: Event) => {
     return;
   }
 
-  emits('click');
+  emits('click', ev);
 
   menuInjection?.updateModelValue(props.value);
 };
diff --git a/packages/opendesign/src/components/radio-group/ORadioGroup.vue b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
index f24bc80ca..0593e7cd2 100644
--- a/packages/opendesign/src/components/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
@@ -8,7 +8,7 @@ const props = defineProps(radioGroupProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
-  (e: 'change', val: string | number | boolean): void;
+  (e: 'change', val: string | number | boolean, ev: Event): void;
 }>();
 
 const realValue = ref(props.modelValue ?? props.defaultValue);
@@ -27,8 +27,8 @@ const updateModelValue = (val: string | number | boolean) => {
   emits('update:modelValue', val);
 };
 
-const onChange = (val: string | number | boolean) => {
-  emits('change', val);
+const onChange = (val: string | number | boolean, ev: Event) => {
+  emits('change', val, ev);
 };
 
 provide(radioGroupInjectKey, {
diff --git a/packages/opendesign/src/components/radio-group/provide.ts b/packages/opendesign/src/components/radio-group/provide.ts
index 2e32cd96d..513274434 100644
--- a/packages/opendesign/src/components/radio-group/provide.ts
+++ b/packages/opendesign/src/components/radio-group/provide.ts
@@ -4,5 +4,5 @@ export const radioGroupInjectKey: InjectionKey<{
   realValue: Ref<string | number | boolean>;
   disabled: Ref<boolean>;
   updateModelValue: (val: string | number | boolean) => void;
-  onChange: (val: string | number | boolean) => void;
+  onChange: (val: string | number | boolean, ev: Event) => void;
 }> = Symbol('provide-radio-group');
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
index f58b7a41f..d474afc8f 100644
--- a/packages/opendesign/src/components/radio/ORadio.vue
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -8,7 +8,7 @@ const props = defineProps(radioProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
-  (e: 'change', val: string | number | boolean): void;
+  (e: 'change', val: string | number | boolean, ev: Event): void;
 }>();
 
 const radioGroupInjection = inject(radioGroupInjectKey, null);
@@ -47,7 +47,7 @@ const onClick = (ev: Event) => {
   ev.stopPropagation();
 };
 
-const onChange = () => {
+const onChange = (ev: Event) => {
   if (isDisabled.value) {
     return;
   }
@@ -58,8 +58,8 @@ const onChange = () => {
   emits('update:modelValue', val);
   radioGroupInjection?.updateModelValue(val);
   nextTick(() => {
-    emits('change', val);
-    radioGroupInjection?.onChange(val);
+    emits('change', val, ev);
+    radioGroupInjection?.onChange(val, ev);
   });
 };
 </script>
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
index eb804e054..4cdd01388 100644
--- a/packages/opendesign/src/components/switch/OSwitch.vue
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -10,7 +10,7 @@ const props = defineProps(switchProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
-  (e: 'change', val: string | number | boolean): void;
+  (e: 'change', val: string | number | boolean, ev: Event): void;
 }>();
 
 const round = getRoundClass(props, 'switch');
@@ -50,7 +50,7 @@ const isChangeable = (): Promise<boolean> => {
   return isBoolean(res) ? Promise.resolve(res) : res;
 };
 
-const onClick = () => {
+const onClick = (ev: Event) => {
   isChangeable()
     .then((flag) => {
       if (flag) {
@@ -58,7 +58,7 @@ const onClick = () => {
         _checked.value = checked;
         const val = checked ? props.checkedValue : props.uncheckedValue;
         emits('update:modelValue', val);
-        emits('change', val);
+        emits('change', val, ev);
       }
     })
     .catch((err) => {
diff --git a/packages/opendesign/src/components/tag/OTag.vue b/packages/opendesign/src/components/tag/OTag.vue
index c96429eb4..6ca956340 100644
--- a/packages/opendesign/src/components/tag/OTag.vue
+++ b/packages/opendesign/src/components/tag/OTag.vue
@@ -10,8 +10,8 @@ const props = defineProps(tagProps);
 
 const emits = defineEmits<{
   (e: 'update:checked', val: boolean): void;
-  (e: 'change', val: boolean): void;
-  (e: 'close'): void;
+  (e: 'change', val: boolean, ev: MouseEvent): void;
+  (e: 'close', ev: MouseEvent): void;
 }>();
 
 const round = getRoundClass(props, 'tag');
@@ -40,19 +40,19 @@ watch(
   { immediate: true }
 );
 
-const onClick = () => {
+const onClick = (ev: MouseEvent) => {
   if (props.checkable) {
     const checked = !isChecked.value;
     _checked.value = checked;
     emits('update:checked', checked);
-    emits('change', checked);
+    emits('change', checked, ev);
   }
 };
 
-const onClose = (ev: Event) => {
+const onClose = (ev: MouseEvent) => {
   ev.stopPropagation();
   isVisible.value = false;
-  emits('close');
+  emits('close', ev);
 };
 </script>
 
-- 
Gitee