feat(tag): [tag] add round prop to support circular border radius

examples/sites/demos/apis/tag.js

@@ -175,6 +175,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
           mfDemo: ''
+        },
+        {
+          name: 'round',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否为圆角的模式',
+            'en-US': 'Whether it is a circular mode'
+          },
+          mode: ['pc'],
+          pcDemo: 'round',
+          mfDemo: ''
         }
       ],
       events: [

examples/sites/demos/pc/app/tag/round-composition-api.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="tag-round-demo">
+    <h4>Round 属性示例</h4>
+
+    <tiny-tag type="primary" round>圆角标签</tiny-tag>
+    <tiny-tag type="success" round>成功标签</tiny-tag>
+    <tiny-tag type="warning" round>警告标签</tiny-tag>
+    <tiny-tag type="danger" round>危险标签</tiny-tag>
+
+    <tiny-tag type="info" round only-icon>
+      <tiny-icon-heartempty />
+    </tiny-tag>
+  </div>
+</template>
+
+<script setup>
+import { TinyTag } from '@opentiny/vue'
+import { IconHeartempty } from '@opentiny/vue-icon'
+
+const tinyIconHeartempty = IconHeartempty()
+</script>
+
+<style scoped>
+.tiny-tag {
+  margin-right: 12px;
+  margin-bottom: 12px;
+}
+
+h4 {
+  margin-bottom: 16px;
+  color: #333;
+}
+</style>

examples/sites/demos/pc/app/tag/round.spec.ts

@@ -0,0 +1,85 @@
+import { test, expect } from '@playwright/test'
+
+test('round 属性基础测试', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#round-usage')
+
+  // 测试圆角标签是否存在
+  const roundTag = page.locator('.tiny-tag').filter({ hasText: '圆角标签' }).first()
+  await expect(roundTag).toHaveCount(1)
+
+  // 验证圆角标签具有圆角样式
+  await expect(roundTag).toHaveCSS('border-radius', '9999px')
+
+  // 测试成功标签的圆角
+  const successTag = page.locator('.tiny-tag').filter({ hasText: '成功标签' }).first()
+  await expect(successTag).toHaveCSS('border-radius', '9999px')
+
+  // 测试警告标签的圆角
+  const warningTag = page.locator('.tiny-tag').filter({ hasText: '警告标签' }).first()
+  await expect(warningTag).toHaveCSS('border-radius', '9999px')
+
+  // 测试危险标签的圆角
+  const dangerTag = page.locator('.tiny-tag').filter({ hasText: '危险标签' }).first()
+  await expect(dangerTag).toHaveCSS('border-radius', '9999px')
+})
+
+test('round 属性特殊标签测试', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#round-usage')
+
+  // 测试圆角图标标签
+  const iconTag = page.locator('.tiny-tag--only-icon').first()
+  await expect(iconTag).toHaveCSS('border-radius', '9999px')
+
+  // 测试圆角配置式标签
+  const valueTag = page.locator('.tiny-tag').filter({ hasText: '圆角配置标签' })
+  await expect(valueTag).toHaveCount(1)
+  await expect(valueTag).toHaveCSS('border-radius', '9999px')
+})
+
+test('round 属性样式验证', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#round-usage')
+
+  // 验证所有具有round属性的标签都具有正确的圆角样式
+  const roundTags = page.locator('.tiny-tag')
+  const count = await roundTags.count()
+
+  for (let i = 0; i < count; i++) {
+    const tag = roundTags.nth(i)
+    await expect(tag).toHaveCSS('border-radius', '9999px')
+  }
+
+  // 验证标签数量是否正确
+  expect(count).toBe(6) // 4个基础标签 + 1个图标标签 + 1个配置标签
+})
+
+test('round 属性视觉呈现测试', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#round-usage')
+
+  // 测试不同类型的标签视觉呈现
+  const typeClasses = [
+    'tiny-tag--primary',
+    'tiny-tag--success',
+    'tiny-tag--warning',
+    'tiny-tag--danger',
+    'tiny-tag--info'
+  ]
+
+  for (const typeClass of typeClasses) {
+    const tag = page.locator(`.tiny-tag.${typeClass}`).first()
+    await expect(tag).toBeVisible()
+
+    // 验证圆角样式
+    const borderRadius = await tag.evaluate((el) => {
+      return window.getComputedStyle(el).borderRadius
+    })
+    expect(borderRadius).toBe('9999px')
+
+    // 验证标签可见且具有内容
+    const isVisible = await tag.isVisible()
+    expect(isVisible).toBe(true)
+  }
+})

examples/sites/demos/pc/app/tag/round.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tag-round-demo">
+    <h4>Round 属性示例</h4>
+
+    <tiny-tag type="primary" :round="true">圆角标签</tiny-tag>
+    <tiny-tag type="success" :round="true">成功标签</tiny-tag>
+    <tiny-tag type="warning" :round="true">警告标签</tiny-tag>
+    <tiny-tag type="danger" :round="true">危险标签</tiny-tag>
+
+    <tiny-tag type="info" :round="true" :only-icon="true">
+      <template #default>
+        <icon-heartempty />
+      </template>
+    </tiny-tag>
+  </div>
+</template>
+
+<script>
+import { Tag, Icon } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag,
+    IconHeartempty: Icon.IconHeartempty
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag {
+  margin-right: 12px;
+  margin-bottom: 12px;
+}
+
+h4 {
+  margin-bottom: 16px;
+  color: #333;
+}
+</style>

examples/sites/demos/pc/app/tag/webdoc/tag.js

@@ -114,6 +114,30 @@ export default {
       },
       codeFiles: ['delete.vue']
     },
+    {
+      demoId: 'round',
+      name: {
+        'zh-CN': '圆角',
+        'en-US': 'Round'
+      },
+      desc: {
+        'zh-CN': '通过 <code>round</code> 设置圆角。',
+        'en-US': 'Set the round through <code>round</code> .'
+      },
+      codeFiles: ['round.vue'],
+      api: {
+        props: {
+          round: {
+            type: 'boolean',
+            defaultValue: 'false',
+            desc: {
+              'zh-CN': '是否为圆角的模式',
+              'en-US': 'Whether it is a round mode'
+            }
+          }
+        }
+      }
+    },
     {
       demoId: 'slot-default',
       name: {

packages/vue/src/tag/src/index.ts

@@ -43,6 +43,10 @@ export const tagProps = {
     type: [String, Number],
     default: null
   },
+  round: {
+    type: Boolean,
+    default: false
+  },
   // mobile
   mini: {
     type: Boolean,

packages/vue/src/tag/src/pc.vue

@@ -33,7 +33,8 @@ export default defineComponent({
     'value',
     'beforeDelete',
     'onlyIcon',
-    'maxWidth'
+    'maxWidth',
+    'round'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api, h }) as unknown as ITagApi
@@ -53,7 +54,8 @@ export default defineComponent({
       state,
       value,
       onlyIcon,
-      maxWidth
+      maxWidth,
+      round
     } = this
 
     let styles = {}
@@ -65,7 +67,8 @@ export default defineComponent({
       effect ? `tiny-tag--${effect}` : '',
       hit && 'is-hit',
       disabled ? 'is-disabled' : '',
-      onlyIcon ? 'tiny-tag--only-icon' : ''
+      onlyIcon ? 'tiny-tag--only-icon' : '',
+      round ? 'tiny-tag--round' : ''
     ]
 
     if (color) {
@@ -82,6 +85,10 @@ export default defineComponent({
       styles.maxWidth = maxWidth
     }
 
+    if (round) {
+      styles.borderRadius = '9999px'
+    }
+
     const tagElement =
       value || (slots.default && slots.default()) ? (
         <span data-tag="tiny-tag" class={classes} style={styles} onClick={handleClick}>