diff --git a/packages/opendesign/src/tag/OTag.vue b/packages/opendesign/src/tag/OTag.vue
index 2dea969d7d08c980e4b389b7107b327a174768af..9b9736ba0b5e98890f20bea496eca640091ee463 100644
--- a/packages/opendesign/src/tag/OTag.vue
+++ b/packages/opendesign/src/tag/OTag.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { getRoundClass } from '../_utils/style-class';
 import { tagProps } from './types';
 import { IconClose } from '../_utils/icons';
-import { isFunction, isUndefined } from '../_utils/is';
+import { isFunction } from '../_utils/is';
 
 const props = defineProps(tagProps);
 
@@ -14,31 +14,23 @@ const emits = defineEmits<{
 
 const round = getRoundClass(props, 'tag');
 
-const isVisible = ref(props.visible ?? props.defaultVisible);
-
-watch(
-  () => props.visible,
-  (val) => {
-    if (!isUndefined(val)) {
-      isVisible.value = val;
-    }
-  }
-);
+const innerIsVisible = ref(props.visible ?? props.defaultVisible);
+const isVisible = computed(() => props.visible ?? innerIsVisible.value);
 
 const onClose = async (ev: MouseEvent) => {
   ev.stopPropagation();
   if (isFunction(props.beforeClose)) {
     const rlt = await props.beforeClose();
     if (rlt) {
-      isVisible.value = false;
-      emits('update:visible', isVisible.value);
+      innerIsVisible.value = false;
+      emits('update:visible', innerIsVisible.value);
       emits('close', ev);
       return;
     }
   }
 
-  isVisible.value = false;
-  emits('update:visible', isVisible.value);
+  innerIsVisible.value = false;
+  emits('update:visible', innerIsVisible.value);
   emits('close', ev);
 };
 </script>
@@ -47,7 +39,7 @@ const onClose = async (ev: MouseEvent) => {
   <span
     v-if="isVisible"
     class="o-tag"
-    :class="[`o-tag-${props.variant}`, `o-tag-${props.color}`, `o-tag-${props.size}`, round.class.value]"
+    :class="[`o-tag-${props.variant}`, `o-tag-${props.color}`, `o-tag-${props.size}`, round.class.value, { 'o-tag-closable': props.closable }]"
     :style="round.style.value"
   >
     <span v-if="$slots.icon" class="o-tag-icon">
diff --git a/packages/opendesign/src/tag/__demo__/TagClosable.vue b/packages/opendesign/src/tag/__demo__/TagClosable.vue
index 167c4cf44cffb76b55dc70405523bbefa9a8b11d..3c94a8e397e4360ab08788a5759ec8f02ae42a38 100644
--- a/packages/opendesign/src/tag/__demo__/TagClosable.vue
+++ b/packages/opendesign/src/tag/__demo__/TagClosable.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { OTag } from '../index';
 const handleClose = () => {
   console.log('close!!!');
 };
+const visible = ref(true);
 </script>
 
 <template>
@@ -19,5 +21,9 @@ const handleClose = () => {
     <OTag color="success" size="small" closable @close="handleClose">Tag3</OTag>
     <OTag color="warning" size="small" closable @close="handleClose">Tag4</OTag>
     <OTag color="danger" size="small" closable @close="handleClose">Tag5</OTag>
+
+    <OTag visible closable>controlled</OTag>
+    <button @click="visible = !visible">switch visible</button>
+    <OTag v-model:visible="visible" closable>controlled</OTag>
   </section>
 </template>
diff --git a/packages/opendesign/src/tag/style/media.scss b/packages/opendesign/src/tag/style/media.scss
index 72856697dc2eaefd99a54c99c6223ffd33d2ab8e..71efe3424a6955bb3b2c922fd15e2c0487755597 100644
--- a/packages/opendesign/src/tag/style/media.scss
+++ b/packages/opendesign/src/tag/style/media.scss
@@ -1,6 +1,6 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('<=pad') {
+@include respond-to('<=pad_v') {
   .o-tag-medium {
     --tag-padding: 0 6px;
     --tag-text-size: var(--o-font_size-tip2);
diff --git a/packages/opendesign/src/tag/style/theme-ak.scss b/packages/opendesign/src/tag/style/theme-ak.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e8deea124f399ba8007227933568f9ea8a3e71bf
--- /dev/null
+++ b/packages/opendesign/src/tag/style/theme-ak.scss
@@ -0,0 +1,24 @@
+.o-tag-normal {
+  --tag-color: var(--o-color-info1);
+  --tag-bg-color: var(--o-color-control3-light);
+  --tag-bd-color: var(--o-color-control3-light);
+
+  &.o-tag-outline {
+    --tag-bd-color: var(--o-color-control1);
+  }
+}
+.o-tag-primary {
+  --tag-bg-color: rgb(var(--o-red-huawei));
+  --tag-bd-color: rgb(var(--o-red-huawei));
+
+  &.o-tag-outline {
+    --tag-color: rgb(var(--o-red-huawei));
+  }
+}
+.c-tag-activity,
+.c-tag-ascend,
+.c-tag-kunpeng {
+  --tag-color: var(--o-color-white);
+  background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%);
+  border: none;
+}
diff --git a/packages/opendesign/src/tag/style/theme-ascend.scss b/packages/opendesign/src/tag/style/theme-ascend.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8d3c7489888dff5288bde9081521983f25d1687a 100644
--- a/packages/opendesign/src/tag/style/theme-ascend.scss
+++ b/packages/opendesign/src/tag/style/theme-ascend.scss
@@ -0,0 +1,2 @@
+@use './theme-common.scss' as *;
+@use './theme-ak.scss' as *;
diff --git a/packages/opendesign/src/tag/style/theme-common.scss b/packages/opendesign/src/tag/style/theme-common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..933b775bd5be4e40d9033b48690db529fe72da97
--- /dev/null
+++ b/packages/opendesign/src/tag/style/theme-common.scss
@@ -0,0 +1,17 @@
+.o-tag-normal.c-tag-normal-inverse {
+  --tag-color: var(--o-color-white);
+  --tag-bg-color: rgba(var(--o-mixedgray-14, var(--o-gray-14)), 0.25);
+  --tag-bd-color: transparent;
+}
+
+.o-tag-normal.c-tag-unstart {
+  --tag-color: var(--o-color-white);
+  --tag-bg-color: rgba(var(--o-mixedgray-12, var(--o-gray-12)), 0.4);
+  --tag-bd-color: transparent;
+}
+
+.o-tag-normal.c-tag-processing {
+  --tag-color: var(--o-color-white);
+  --tag-bg-color: rgba(var(--o-blue-6));
+  --tag-bd-color: rgba(var(--o-blue-6));
+}
diff --git a/packages/opendesign/src/tag/style/theme-kunpeng.scss b/packages/opendesign/src/tag/style/theme-kunpeng.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8d3c7489888dff5288bde9081521983f25d1687a 100644
--- a/packages/opendesign/src/tag/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/tag/style/theme-kunpeng.scss
@@ -0,0 +1,2 @@
+@use './theme-common.scss' as *;
+@use './theme-ak.scss' as *;
diff --git a/packages/opendesign/src/tag/style/theme-openeuler.scss b/packages/opendesign/src/tag/style/theme-openeuler.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..92db6d2ace22efc76237f2d232760f1330007243 100644
--- a/packages/opendesign/src/tag/style/theme-openeuler.scss
+++ b/packages/opendesign/src/tag/style/theme-openeuler.scss
@@ -0,0 +1,38 @@
+@use '../../_styles/mixin.scss' as *;
+@use './theme-common.scss' as *;
+
+.o-tag-normal {
+  --tag-color: var(--o-color-info1);
+  --tag-bg-color: var(--o-color-control4-light);
+  --tag-bd-color: var(--o-color-control4-light);
+
+  &.o-tag-outline {
+    --tag-bd-color: var(--o-color-control1);
+  }
+}
+.o-tag-primary {
+  --tag-bg-color: var(--o-color-danger1);
+  --tag-bd-color: var(--o-color-danger1);
+
+  &.o-tag-outline {
+    --tag-color: var(--o-color-danger1);
+  }
+}
+.o-tag-closable.o-tag-normal {
+  --tag-bg-color: var(--o-color-control2-light);
+  --tag-bd-color: var(--o-color-control2-light);
+
+  @include hover {
+    --tag-bg-color: var(--o-color-control3-light);
+    --tag-bd-color: var(--o-color-control3-light);
+  }
+
+  &.o-tag-outline {
+    --tag-bg-color: var(--o-color-control2);
+    --tag-bd-color: var(--o-color-control2);
+    --tag-bg-color: transparent;
+
+    --tag-icon-close-color-hover: var(--o-color-control3);
+    --tag-icon-close-color-active: var(--o-color-control3);
+  }
+}