From 28b9556d42e16af163b8b918ff5572912a1feef0 Mon Sep 17 00:00:00 2001 From: unknown <1987250181@qq.com> Date: Wed, 26 Nov 2025 23:50:09 +0800 Subject: [PATCH 1/2] feat(tag): [tag] add round prop to support circular border radius --- examples/sites/demos/apis/tag.js | 12 +++ .../pc/app/tag/round-composition-api.vue | 33 +++++++ examples/sites/demos/pc/app/tag/round.spec.ts | 85 +++++++++++++++++++ examples/sites/demos/pc/app/tag/round.vue | 39 +++++++++ examples/sites/demos/pc/app/tag/webdoc/tag.js | 24 ++++++ packages/vue/src/tag/src/index.ts | 4 + packages/vue/src/tag/src/pc.vue | 13 ++- 7 files changed, 207 insertions(+), 3 deletions(-) create mode 100644 examples/sites/demos/pc/app/tag/round-composition-api.vue create mode 100644 examples/sites/demos/pc/app/tag/round.spec.ts create mode 100644 examples/sites/demos/pc/app/tag/round.vue diff --git a/examples/sites/demos/apis/tag.js b/examples/sites/demos/apis/tag.js index fb6e0acbaf..f8109fb9fe 100644 --- a/examples/sites/demos/apis/tag.js +++ b/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: [ diff --git a/examples/sites/demos/pc/app/tag/round-composition-api.vue b/examples/sites/demos/pc/app/tag/round-composition-api.vue new file mode 100644 index 0000000000..6c82e569fd --- /dev/null +++ b/examples/sites/demos/pc/app/tag/round-composition-api.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/examples/sites/demos/pc/app/tag/round.spec.ts b/examples/sites/demos/pc/app/tag/round.spec.ts new file mode 100644 index 0000000000..ccb74325bd --- /dev/null +++ b/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) + } +}) diff --git a/examples/sites/demos/pc/app/tag/round.vue b/examples/sites/demos/pc/app/tag/round.vue new file mode 100644 index 0000000000..50ba4220f7 --- /dev/null +++ b/examples/sites/demos/pc/app/tag/round.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js index f268875fd5..0091ccc755 100644 --- a/examples/sites/demos/pc/app/tag/webdoc/tag.js +++ b/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': '通过 round 设置圆角。', + 'en-US': 'Set the round through round .' + }, + 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: { diff --git a/packages/vue/src/tag/src/index.ts b/packages/vue/src/tag/src/index.ts index 4c55ac2ded..35bab2330e 100644 --- a/packages/vue/src/tag/src/index.ts +++ b/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, diff --git a/packages/vue/src/tag/src/pc.vue b/packages/vue/src/tag/src/pc.vue index 9db3a687fe..f8224be773 100644 --- a/packages/vue/src/tag/src/pc.vue +++ b/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()) ? ( From 5659acb9d1761606e4f8276c97e3e617403b7b94 Mon Sep 17 00:00:00 2001 From: unknown <1987250181@qq.com> Date: Sat, 29 Nov 2025 00:10:40 +0800 Subject: [PATCH 2/2] test(tag): fix round attribute e2e test --- examples/sites/demos/pc/app/tag/round.spec.ts | 87 ++----------------- 1 file changed, 7 insertions(+), 80 deletions(-) diff --git a/examples/sites/demos/pc/app/tag/round.spec.ts b/examples/sites/demos/pc/app/tag/round.spec.ts index ccb74325bd..65f83fa99d 100644 --- a/examples/sites/demos/pc/app/tag/round.spec.ts +++ b/examples/sites/demos/pc/app/tag/round.spec.ts @@ -1,85 +1,12 @@ import { test, expect } from '@playwright/test' -test('round 属性基础测试', async ({ page }) => { - page.on('pageerror', (exception) => expect(exception).not.toBeNull()) - await page.goto('tag#round-usage') +test('圆角', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('tag#round') - // 测试圆角标签是否存在 - const roundTag = page.locator('.tiny-tag').filter({ hasText: '圆角标签' }).first() - await expect(roundTag).toHaveCount(1) + const tags = page.locator('.all-demos-container').locator('.tiny-tag') + const count = await tags.count() - // 验证圆角标签具有圆角样式 - 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) - } + // 动态创建与元素数量相同的期望数组 + await expect(tags).toHaveClass(Array(count).fill(/tiny-tag--round/)) })