From 8eed734ba7ca232f4ff819e4006565e88112c931 Mon Sep 17 00:00:00 2001
From: AC-0308 <pzzxtyh@qq.com>
Date: Tue, 22 Jul 2025 15:35:48 +0800
Subject: [PATCH] =?UTF-8?q?doc:=20=F0=9F=93=9D=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE(tag)=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/tag/__docs__/__case__/TagBasic.vue    | 22 +++++++
 .../src/tag/__docs__/__case__/TagClosable.vue | 30 +++++++++
 .../src/tag/__docs__/__case__/TagColor.vue    | 21 +++++++
 .../src/tag/__docs__/__case__/TagOutline.vue  | 27 ++++++++
 .../src/tag/__docs__/__case__/TagRound.vue    | 34 ++++++++++
 .../src/tag/__docs__/__case__/TagSize.vue     | 18 ++++++
 .../src/tag/__docs__/__case__/tagUsage.ts     | 62 +++++++++++++++++++
 .../src/tag/__docs__/index.en-US.md           | 22 +++++++
 .../src/tag/__docs__/index.zh-CN.md           | 22 +++++++
 9 files changed, 258 insertions(+)
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/TagColor.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/TagRound.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/TagSize.vue
 create mode 100644 packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts
 create mode 100644 packages/opendesign/src/tag/__docs__/index.en-US.md
 create mode 100644 packages/opendesign/src/tag/__docs__/index.zh-CN.md

diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue b/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue
new file mode 100644
index 00000000..95872a4b
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue
@@ -0,0 +1,22 @@
+<docs lang="md">
+<!--zh-CN-->
+### 基础用法
+
+<!--en-US-->
+### Basic Usage
+</docs>
+
+<script setup lang="ts">
+import { OTag, OIconAdd } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <OTag>Tag1</OTag>
+    <OTag>Tag2</OTag>
+    <OTag>
+      <template #icon><OIconAdd /></template>
+      Icon Tag
+    </OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue b/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue
new file mode 100644
index 00000000..4de8dc48
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue
@@ -0,0 +1,30 @@
+<docs lang="md">
+<!--zh-CN-->
+### 可关闭按钮
+
+<!--en-US-->
+### Closeable
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+const handleClose = () => {
+  console.log('close!!!');
+};
+</script>
+
+<template>
+  <section>
+    <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>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue b/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue
new file mode 100644
index 00000000..3bc757b0
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue
@@ -0,0 +1,21 @@
+<docs lang="md">
+<!--zh-CN-->
+### Colors
+
+<!--en-US-->
+### Colors
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <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>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue b/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue
new file mode 100644
index 00000000..e831a178
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue
@@ -0,0 +1,27 @@
+<docs lang="md">
+<!--zh-CN-->
+### 带边框标签
+
+<!--en-US-->
+### With Outline
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <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>
+
+    <OTag variant="outline" closable>Tag1</OTag>
+    <OTag color="primary" closable variant="outline">Tag2</OTag>
+    <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>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue b/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue
new file mode 100644
index 00000000..fb7b1543
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue
@@ -0,0 +1,34 @@
+<docs lang="md">
+<!--zh-CN-->
+### Round
+
+<!--en-US-->
+### Round
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<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>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue b/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue
new file mode 100644
index 00000000..d60c0509
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue
@@ -0,0 +1,18 @@
+<docs lang="md">
+<!--zh-CN-->
+### 尺寸
+
+<!--en-US-->
+### Size
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <OTag>Medium Tag</OTag>
+    <OTag size="small">Small Tag</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts b/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts
new file mode 100644
index 00000000..0471179d
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts
@@ -0,0 +1,62 @@
+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
new file mode 100644
index 00000000..63bbad79
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/index.en-US.md
@@ -0,0 +1,22 @@
+---
+sidebar: OTag
+---
+
+# tag
+
+## Usage
+
+<!-- @usage tagUsage -->
+
+## Cases
+
+<!-- @case TagBasic -->
+<!-- @case TagClosable -->
+<!-- @case TagColor -->
+<!-- @case TagOutline -->
+<!-- @case TagRound -->
+<!-- @case TagSize -->
+
+## Api
+
+<!-- @api OTag -->
\ No newline at end of file
diff --git a/packages/opendesign/src/tag/__docs__/index.zh-CN.md b/packages/opendesign/src/tag/__docs__/index.zh-CN.md
new file mode 100644
index 00000000..03ec071f
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/index.zh-CN.md
@@ -0,0 +1,22 @@
+---
+sidebar: OTag 标签
+---
+
+# 标签
+
+## 使用
+
+<!-- @usage tagUsage -->
+
+## 示例
+
+<!-- @case TagBasic -->
+<!-- @case TagClosable -->
+<!-- @case TagColor -->
+<!-- @case TagOutline -->
+<!-- @case TagRound -->
+<!-- @case TagSize -->
+
+## Api
+
+<!-- @api OTag -->
\ No newline at end of file
-- 
Gitee