From cfd97e2b24dfa21aeaf9fd1edf1c7197d74127b4 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Mon, 27 Oct 2025 18:08:49 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix(tag):=20=E6=9B=B4=E6=96=B0=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E6=98=A0=E5=B0=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/tag/style/media.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/opendesign/src/tag/style/media.scss b/packages/opendesign/src/tag/style/media.scss
index 72856697..71efe342 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);
-- 
Gitee


From 1ec993c73ef30a0ed4dec88a449fb09e39e843e8 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Mon, 27 Oct 2025 18:11:39 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix(tag):=20=E4=BF=AE=E5=A4=8Dtag=E5=8F=97?=
 =?UTF-8?q?=E6=8E=A7=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/tag/OTag.vue          | 24 +++++++------------
 .../src/tag/__demo__/TagClosable.vue          |  6 +++++
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/opendesign/src/tag/OTag.vue b/packages/opendesign/src/tag/OTag.vue
index 2dea969d..cf36e547 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>
diff --git a/packages/opendesign/src/tag/__demo__/TagClosable.vue b/packages/opendesign/src/tag/__demo__/TagClosable.vue
index 167c4cf4..3c94a8e3 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>
-- 
Gitee


From 237197c2bdc6a9d7d76484e23625911eb32d97f1 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Mon, 27 Oct 2025 18:12:38 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat(tag):=20=E6=96=B0=E5=A2=9Etag=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E7=9A=AE=E8=82=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/tag/OTag.vue          |  2 +-
 .../opendesign/src/tag/style/theme-ak.scss    | 24 ++++++++++++
 .../src/tag/style/theme-ascend.scss           |  2 +
 .../src/tag/style/theme-common.scss           | 17 +++++++++
 .../src/tag/style/theme-kunpeng.scss          |  2 +
 .../src/tag/style/theme-openeuler.scss        | 38 +++++++++++++++++++
 6 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 packages/opendesign/src/tag/style/theme-ak.scss
 create mode 100644 packages/opendesign/src/tag/style/theme-common.scss

diff --git a/packages/opendesign/src/tag/OTag.vue b/packages/opendesign/src/tag/OTag.vue
index cf36e547..9b9736ba 100644
--- a/packages/opendesign/src/tag/OTag.vue
+++ b/packages/opendesign/src/tag/OTag.vue
@@ -39,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/style/theme-ak.scss b/packages/opendesign/src/tag/style/theme-ak.scss
new file mode 100644
index 00000000..e8deea12
--- /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 e69de29b..8d3c7489 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 00000000..933b775b
--- /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 e69de29b..8d3c7489 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 e69de29b..92db6d2a 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);
+  }
+}
-- 
Gitee


From a2cfaa27831e0a716c9481fbeea68b926285a961 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Mon, 27 Oct 2025 18:19:07 +0800
Subject: [PATCH 4/4] =?UTF-8?q?doc(tag):=20=E5=AE=8C=E5=96=84=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/tag/__docs__/__case__/TagBasic.vue    |  4 +-
 .../src/tag/__docs__/__case__/TagClosable.vue | 10 +--
 .../src/tag/__docs__/__case__/TagColor.vue    |  4 +-
 .../src/tag/__docs__/__case__/TagOutline.vue  |  4 +-
 .../src/tag/__docs__/__case__/TagRound.vue    | 30 ++++-----
 .../src/tag/__docs__/__case__/TagSize.vue     |  4 +-
 .../src/tag/__docs__/__case__/TagUsage.vue    | 46 ++++++++++++++
 .../tag/__docs__/__case__/ThemeActivity.vue   | 25 ++++++++
 .../__docs__/__case__/ThemeActivityEuler.vue  | 24 +++++++
 .../src/tag/__docs__/__case__/ThemeInfo.vue   | 20 ++++++
 .../src/tag/__docs__/__case__/ThemeState.vue  | 21 +++++++
 .../src/tag/__docs__/__case__/tagUsage.ts     | 62 -------------------
 .../src/tag/__docs__/index.en-US.md           | 15 +++--
 .../src/tag/__docs__/index.zh-CN.md           | 10 ++-
 packages/opendesign/src/tag/types.ts          | 29 ++++++---
 15 files changed, 196 insertions(+), 112 deletions(-)
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/TagUsage.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/ThemeActivity.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/ThemeActivityEuler.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/ThemeInfo.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/ThemeState.vue
 delete mode 100644 packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts

diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue b/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue
index 95872a4b..d744492c 100644
--- a/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue
@@ -11,12 +11,12 @@ import { OTag, OIconAdd } from '@opensig/opendesign';
 </script>
 
 <template>
-  <section>
+  <div class="col">
     <OTag>Tag1</OTag>
     <OTag>Tag2</OTag>
     <OTag>
       <template #icon><OIconAdd /></template>
       Icon Tag
     </OTag>
-  </section>
+  </div>
 </template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue b/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue
index 4de8dc48..ddbf94d6 100644
--- a/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue
@@ -14,17 +14,11 @@ const handleClose = () => {
 </script>
 
 <template>
-  <section>
+  <div class="col">
     <OTag closable @close="handleClose">Tag1</OTag>
     <OTag color="primary" closable @close="handleClose">Tag2</OTag>
     <OTag color="success" closable @close="handleClose">Tag3</OTag>
     <OTag color="warning" closable @close="handleClose">Tag4</OTag>
     <OTag color="danger" closable @close="handleClose">Tag5</OTag>
-
-    <OTag size="small" closable @close="handleClose">Tag1</OTag>
-    <OTag color="primary" size="small" closable @close="handleClose">Tag2</OTag>
-    <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>
-  </section>
+  </div>
 </template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue b/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue
index 3bc757b0..3b575f80 100644
--- a/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue
@@ -11,11 +11,11 @@ import { OTag } from '@opensig/opendesign';
 </script>
 
 <template>
-  <section>
+  <div class="col">
     <OTag>Normal 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>
+  </div>
 </template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue b/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue
index e831a178..536c673f 100644
--- a/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue
@@ -11,7 +11,7 @@ import { OTag } from '@opensig/opendesign';
 </script>
 
 <template>
-  <section>
+  <div class="col">
     <OTag variant="outline">Tag1</OTag>
     <OTag color="primary" variant="outline">Tag2</OTag>
     <OTag color="success" variant="outline">Tag2</OTag>
@@ -23,5 +23,5 @@ import { OTag } from '@opensig/opendesign';
     <OTag color="success" closable variant="outline">Tag2</OTag>
     <OTag color="warning" closable variant="outline">Tag3</OTag>
     <OTag color="danger" closable variant="outline">Tag4</OTag>
-  </section>
+  </div>
 </template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue b/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue
index fb7b1543..2be62ce1 100644
--- a/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue
@@ -1,8 +1,10 @@
 <docs lang="md">
 <!--zh-CN-->
+
 ### Round
 
 <!--en-US-->
+
 ### Round
 </docs>
 
@@ -12,23 +14,15 @@ import { OTag } from '@opensig/opendesign';
 
 <template>
   <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>
+    <p>round="pill"</p>
+    <OTag round="pill" color="primary">Primary Tag</OTag>
+  </section>
+  <section>
+    <p>round="2px"</p>
+    <OTag round="2px" color="primary">Primary Tag</OTag>
+  </section>
+  <section>
+    <p>round="4px"</p>
+    <OTag round="4px" color="primary">Primary Tag</OTag>
   </section>
 </template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue b/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue
index d60c0509..a355978a 100644
--- a/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue
@@ -11,8 +11,8 @@ import { OTag } from '@opensig/opendesign';
 </script>
 
 <template>
-  <section>
+  <div class="col">
     <OTag>Medium Tag</OTag>
     <OTag size="small">Small Tag</OTag>
-  </section>
+  </div>
 </template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagUsage.vue b/packages/opendesign/src/tag/__docs__/__case__/TagUsage.vue
new file mode 100644
index 00000000..83a40252
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagUsage.vue
@@ -0,0 +1,46 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用
+
+<!-- en US -->
+
+## Usage
+</docs>
+<script setup lang="ts">
+import { propsToAttrStr } from '../../../_demo/utils';
+import { ColorTypes, TagVariantTypes, TagSizeTypes } from '@opensig/opendesign';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types.ts';
+
+const _schema = {
+  color: {
+    type: 'list',
+    list: ColorTypes,
+  },
+  variant: {
+    type: 'list',
+    list: TagVariantTypes,
+  },
+  size: {
+    type: 'list',
+    list: TagSizeTypes,
+  },
+  round: {
+    type: 'string',
+    default: 'pill',
+  },
+  closable: {
+    type: 'boolean',
+    default: false,
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _template: DocDemoTemplate<typeof _schema> = (_props) => `
+<OTag ${propsToAttrStr(_props)}>
+  <template #icon><OIconAdd /></template>
+  Icon Tag
+</OTag>
+`;
+
+const _ctx = {};
+</script>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/ThemeActivity.vue b/packages/opendesign/src/tag/__docs__/__case__/ThemeActivity.vue
new file mode 100644
index 00000000..67b82d26
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/ThemeActivity.vue
@@ -0,0 +1,25 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 主题规范
+
+#### 运营标签
+
+<!-- en-US -->
+
+### Theme Specification
+
+#### Operation Tags
+</docs>
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <div class="col">
+    <OTag color="primary" round="pill">NEW</OTag>
+    <OTag color="primary" round="pill">HOT</OTag>
+    <OTag color="primary" round="pill">推荐</OTag>
+    <OTag round="pill" class="c-tag-activity">运营标签</OTag>
+  </div>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/ThemeActivityEuler.vue b/packages/opendesign/src/tag/__docs__/__case__/ThemeActivityEuler.vue
new file mode 100644
index 00000000..c528621e
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/ThemeActivityEuler.vue
@@ -0,0 +1,24 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 主题规范
+
+#### 运营标签
+
+<!-- en-US -->
+
+### Theme Specification
+
+#### Operation Tags
+</docs>
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <div class="col">
+    <OTag color="primary" round="pill">NEW</OTag>
+    <OTag color="primary" round="pill">HOT</OTag>
+    <OTag color="primary" round="pill">推荐</OTag>
+  </div>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/ThemeInfo.vue b/packages/opendesign/src/tag/__docs__/__case__/ThemeInfo.vue
new file mode 100644
index 00000000..e189bc72
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/ThemeInfo.vue
@@ -0,0 +1,20 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 信息标签
+
+<!-- en-US -->
+
+## Info Tags
+</docs>
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <div class="col">
+    <OTag round="pill">Python</OTag>
+    <OTag round="pill">C++</OTag>
+    <OTag round="pill" class="c-tag-normal-inverse">Python</OTag>
+  </div>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/ThemeState.vue b/packages/opendesign/src/tag/__docs__/__case__/ThemeState.vue
new file mode 100644
index 00000000..6d338b82
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/ThemeState.vue
@@ -0,0 +1,21 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 状态标签
+
+<!-- en-US -->
+
+#### State Tags
+</docs>
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <div class="col">
+    <OTag round="pill" color="success">已完成</OTag>
+    <OTag round="pill" class="c-tag-unstart">未开始</OTag>
+    <OTag round="pill" class="c-tag-processing">处理中</OTag>
+    <OTag round="pill" color="danger">未通过</OTag>
+  </div>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts b/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts
deleted file mode 100644
index 0471179d..00000000
--- a/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { propsToAttrStr } from '../../../_demo/utils';
-import { ColorTypes, TagVariantTypes, TagSizeTypes } from '@opensig/opendesign';
-import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types.ts';
-
-export const docs = {
-  'zh-CN':
-    'Tag组件以紧凑的视觉形式清晰标识分类、状态、属性或关键词，帮助用户快速识别内容特征。可配置项包含：  \n' +
-    '- 标签颜色`color`  \n' +
-    '- 标签类型`variant`  \n' +
-    '- 标签尺寸`size`  \n' +
-    '- 圆角值`round`  \n' +
-    '- 是否可关闭`closable`  \n' +
-    '- 是否可见(双向绑定)`visible`  \n' +
-    '- 是否默认可见(非受控)`defaultVisible`  \n' +
-    '- 关闭前的钩子函数`beforeClose`  \n' +
-    '\n\n支持多色主题、自定义图标及可关闭交互，无缝融入筛选面板、数据表格、内容卡片等场景',
-  'en-US':
-    'The Tag component clearly identifies categories, statuses, attributes, or keywords in a compact visual form, helping users quickly identify content features. Configurable items include:  \n' +
-    '- Tag color `color`  ' +
-    '- Tag type `variant`  ' +
-    '- Tag size `size`  ' +
-    '- Border radius `round`  ' +
-    '- Whether closable `closable`  ' +
-    '- Visibility (two-way binding) `visible`  ' +
-    '- Default visibility (uncontrolled) `defaultVisible`  ' +
-    '- Hook function before closing `beforeClose`  ' +
-    '\n\nSupports multi-color themes, custom icons, and closable interactions, seamlessly integrating into scenarios such as filter panels, data tables, and content cards'
-};
-
-
-export const schema = {
-  color: {
-    type: 'list',
-    list: ColorTypes,
-  },
-  variant: {
-    type: 'list',
-    list: TagVariantTypes,
-  },
-  size: {
-    type: 'list',
-    list: TagSizeTypes,
-  },
-  round: {
-    type: 'string',
-    default: 'pill'
-  },
-  closable: {
-    type: 'boolean',
-    default: false,
-  },
-} satisfies Record<string, DocDemoSchema>;
-
-export const template: DocDemoTemplate<typeof schema> = (_props) => {
-  return `
-    <OTag ${propsToAttrStr(_props)}>Tag2</OTag>
-    <OTag ${propsToAttrStr(_props)}>
-      <template #icon><OIconAdd /></template>
-      Icon Tag
-    </OTag>
-  `;
-};
diff --git a/packages/opendesign/src/tag/__docs__/index.en-US.md b/packages/opendesign/src/tag/__docs__/index.en-US.md
index ff269687..343619d5 100644
--- a/packages/opendesign/src/tag/__docs__/index.en-US.md
+++ b/packages/opendesign/src/tag/__docs__/index.en-US.md
@@ -3,13 +3,14 @@ sidebar: OTag
 kind: display
 ---
 
-# tag
+# Tag
 
 ## Usage
 
-<!-- @usage tagUsage -->
 
-## Cases
+<!-- @usage TagUsage -->
+
+## Demo
 
 <!-- @case TagBasic -->
 <!-- @case TagClosable -->
@@ -17,7 +18,11 @@ kind: display
 <!-- @case TagOutline -->
 <!-- @case TagRound -->
 <!-- @case TagSize -->
+<!-- @case:a|k ThemeActivity -->
+<!-- @case:e ThemeActivityEuler -->
+<!-- @case:a|k|e ThemeInfo -->
+<!-- @case:a|k|e ThemeState -->
 
-## Api
+## API
 
-<!-- @api OTag -->
\ No newline at end of file
+<!-- @api OTag -->
diff --git a/packages/opendesign/src/tag/__docs__/index.zh-CN.md b/packages/opendesign/src/tag/__docs__/index.zh-CN.md
index 99b6853b..f679f936 100644
--- a/packages/opendesign/src/tag/__docs__/index.zh-CN.md
+++ b/packages/opendesign/src/tag/__docs__/index.zh-CN.md
@@ -7,7 +7,7 @@ kind: display
 
 ## 使用
 
-<!-- @usage tagUsage -->
+<!-- @usage TagUsage -->
 
 ## 示例
 
@@ -17,7 +17,11 @@ kind: display
 <!-- @case TagOutline -->
 <!-- @case TagRound -->
 <!-- @case TagSize -->
+<!-- @case:a|k ThemeActivity -->
+<!-- @case:e ThemeActivityEuler -->
+<!-- @case:a|k|e ThemeInfo -->
+<!-- @case:a|k|e ThemeState -->
 
-## Api
+## API
 
-<!-- @api OTag -->
\ No newline at end of file
+<!-- @api OTag -->
diff --git a/packages/opendesign/src/tag/types.ts b/packages/opendesign/src/tag/types.ts
index 1606f8c4..7146cab5 100644
--- a/packages/opendesign/src/tag/types.ts
+++ b/packages/opendesign/src/tag/types.ts
@@ -12,55 +12,68 @@ export type TagSizeT = (typeof TagSizeTypes)[number];
 
 export const tagProps = {
   /**
-   * 标签颜色 ColorT
+   * @zh-CN 标签颜色
+   * @en-US Tag color
+   * @default 'normal'
    */
   color: {
     type: String as PropType<ColorT>,
     default: 'normal',
   },
   /**
-   * 标签类型 TagVariantT
+   * @zh-CN 标签类型
+   * @en-US Tag variant
+   * @default 'solid'
    */
   variant: {
     type: String as PropType<TagVariantT>,
     default: 'solid',
   },
   /**
-   * 标签尺寸 TagSizeT
+   * @zh-CN 标签尺寸
+   * @en-US Tag size
+   * @default 'medium'
    */
   size: {
     type: String as PropType<TagSizeT>,
     default: 'medium',
   },
   /**
-   * 圆角值 RoundT
+   * @zh-CN 标签圆角
+   * @en-US Tag round
    */
   round: {
     type: String as PropType<RoundT>,
   },
   /**
-   * 是否可关闭
+   * @zh-CN 是否可关闭
+   * @en-US Whether closable
+   * @default false
    */
   closable: {
     type: Boolean,
     default: false,
   },
   /**
-   * tag是否可见 v-model
+   * @zh-CN 是否可见 (双向绑定)
+   * @en-US Whether visible (two-way binding)
    */
   visible: {
     type: Boolean,
     default: undefined,
   },
   /**
-   * 非受控模式，tag是否默认可见
+   * @zh-CN 非受控模式，是否默认可见
+   * @en-US Uncontrolled mode, whether visible by default
+   * @default true
    */
   defaultVisible: {
     type: Boolean,
     default: true,
   },
   /**
-   * 关闭前的钩子函数
+   * @zh-CN 关闭前的钩子函数
+   * @en-US Hook function before closing
    */
   beforeClose: {
     type: Function as PropType<() => Promise<boolean> | boolean>,
-- 
Gitee