diff --git a/examples/sites/demos/pc/app/input/event.spec.ts b/examples/sites/demos/pc/app/input/event.spec.ts
index 5a53091da..918afe2f5 100644
--- a/examples/sites/demos/pc/app/input/event.spec.ts
+++ b/examples/sites/demos/pc/app/input/event.spec.ts
@@ -8,8 +8,8 @@ test('[Input]event: input, change', async ({ page }) => {
 
   // input event
   await input.fill('2')
-  const dialogModelInputEvent = await page.locator('.tiny-modal')
-  await expect(dialogModelInputEvent).toContainText('input')
+  const dialogModelInputEvent = await page.locator('.tiny-modal',  { hasText: 'input' })
+  await expect(dialogModelInputEvent).toBeVisible()
 
   // change event
   await input.blur()
diff --git a/examples/sites/demos/pc/app/rate/allow-half.spec.js b/examples/sites/demos/pc/app/rate/allow-half.spec.js
index 68921cb71..0b01ca34c 100644
--- a/examples/sites/demos/pc/app/rate/allow-half.spec.js
+++ b/examples/sites/demos/pc/app/rate/allow-half.spec.js
@@ -5,13 +5,11 @@ test.describe('Rate 允许半选', () => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('rate#allow-half')
 
-    // 判断rate组件是否出现
-    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div')).toBeVisible()
-
     // 点击icon前一半允许半选
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
     const rate = await page.locator('.tiny-rate > span:nth-child(1)').boundingBox()
     await page.mouse.click(rate.x + rate.width / 2, rate.y + rate.height / 2)
+    await page.waitForTimeout(200)
     await expect(icon.nth(0)).toHaveClass(/ratehalf/)
   })
 })
diff --git a/examples/sites/demos/pc/app/rate/basic-usage.spec.js b/examples/sites/demos/pc/app/rate/basic-usage.spec.js
index 9ada43aa8..d0c1e6292 100644
--- a/examples/sites/demos/pc/app/rate/basic-usage.spec.js
+++ b/examples/sites/demos/pc/app/rate/basic-usage.spec.js
@@ -1,13 +1,6 @@
 import { test, expect } from '@playwright/test'
 
 test.describe('Rate 基本用法', () => {
-  test('rate 组件出现', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('rate#allow-half')
-
-    // 判断rate组件是否出现
-    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div')).toBeVisible()
-  })
 
   test('鼠标hover时，icon高亮', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
@@ -41,7 +34,7 @@ test.describe('Rate 基本用法', () => {
     await page.goto('rate#basic-usage')
 
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
-    const text = page.locator('//*[@id="preview"]/div[2]/div[2]/div/span[6]')
+    const text = page.locator('.tiny-rate .tiny-rate__text')
     await icon.nth(0).click()
     await expect(text).toHaveText('很差')
 
diff --git a/examples/sites/demos/pc/app/rate/custom-3-threshold-colors.spec.js b/examples/sites/demos/pc/app/rate/custom-3-threshold-colors.spec.js
index b4826d638..9b9bd05aa 100644
--- a/examples/sites/demos/pc/app/rate/custom-3-threshold-colors.spec.js
+++ b/examples/sites/demos/pc/app/rate/custom-3-threshold-colors.spec.js
@@ -8,6 +8,7 @@ test.describe('rate 自定义 3 分段颜色', () => {
     // hover时三分段颜色
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
     await icon.nth(0).hover()
+    await page.waitForTimeout(200)
     await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
     await icon.nth(1).hover()
     await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(250, 219, 20)')
@@ -20,6 +21,7 @@ test.describe('rate 自定义 3 分段颜色', () => {
 
     // 选中时时三分段颜色
     await icon.nth(0).click()
+    await page.waitForTimeout(200)
     await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
     await icon.nth(1).click()
     await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(250, 219, 20)')
diff --git a/examples/sites/demos/pc/app/rate/not-selected-color.spec.js b/examples/sites/demos/pc/app/rate/not-selected-color.spec.js
index 226cff04e..fa46255b5 100644
--- a/examples/sites/demos/pc/app/rate/not-selected-color.spec.js
+++ b/examples/sites/demos/pc/app/rate/not-selected-color.spec.js
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('Rate 自定义未选中图标类名', () => {
-  test('自定义未选中图标', async ({ page }) => {
+test.describe('Rate 自 定义未选中图标颜色', () => {
+  test(' 定义未选中图标颜色', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('rate#not-selected-color')
 
@@ -10,7 +10,7 @@ test.describe('Rate 自定义未选中图标类名', () => {
     await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 0, 0)')
 
     await icon.nth(4).hover()
-    await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 187, 51)')
+    await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 0, 0)')
 
     await icon.nth(4).click()
     await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 187, 51)')
diff --git a/examples/sites/demos/pc/app/rate/rate-events.spec.js b/examples/sites/demos/pc/app/rate/rate-events.spec.js
index bc63bf1b1..038b6db57 100644
--- a/examples/sites/demos/pc/app/rate/rate-events.spec.js
+++ b/examples/sites/demos/pc/app/rate/rate-events.spec.js
@@ -6,7 +6,7 @@ test.describe('rate change事件', () => {
     await page.goto('rate#rate-events')
 
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
-    const modal = page.locator('.tiny-modal__box')
+    const modal = page.locator('.tiny-modal__box .tiny-modal__text').filter({ hasText: '选中的值是5' })
 
     await icon.nth(4).click()
     await expect(modal).toBeVisible()
diff --git a/examples/sites/demos/pc/app/rate/threshold-value.spec.js b/examples/sites/demos/pc/app/rate/threshold-value.spec.js
index c8dab32c3..0d6f87351 100644
--- a/examples/sites/demos/pc/app/rate/threshold-value.spec.js
+++ b/examples/sites/demos/pc/app/rate/threshold-value.spec.js
@@ -8,6 +8,7 @@ test.describe('rate 自定义三分段界限值', () => {
     // hover时三分段颜色
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
     await icon.nth(0).hover()
+    await page.waitForTimeout(200)
     await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
     await icon.nth(1).hover()
     await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(255, 122, 69)')
@@ -20,6 +21,7 @@ test.describe('rate 自定义三分段界限值', () => {
 
     // 选中时时三分段颜色
     await icon.nth(0).click()
+    await page.waitForTimeout(200)
     await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
     await icon.nth(1).click()
     await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(255, 122, 69)')
diff --git a/examples/sites/demos/pc/app/tag-group/basic-usage.spec.js b/examples/sites/demos/pc/app/tag-group/basic-usage.spec.js
new file mode 100644
index 000000000..55163a6c4
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag-group/basic-usage.spec.js
@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+
+test('TagGroup 基础用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tag-group#basic-usage')
+
+  const tagGroup = page.locator('.tiny-tag-group')
+
+  const tag1 = tagGroup.getByText('标签一')
+  await expect(tag1).toHaveCSS('background-color', 'rgb(238, 240, 245)')
+  await expect(tag1).toHaveCSS('color', 'rgb(87, 93, 108)')
+
+  const tag2 = tagGroup.getByText('标签二')
+  await expect(tag2).toHaveCSS('background-color', 'rgba(51, 51, 51, 0.06)')
+  await expect(tag2).toHaveCSS('color', 'rgb(37, 43, 58)')
+
+  const tag3 = tagGroup.getByText('标签三')
+  await expect(tag3).toHaveCSS('background-color', 'rgb(237, 255, 249)')
+  await expect(tag3).toHaveCSS('color', 'rgb(58, 194, 149)')
+  
+  const tag4 = tagGroup.getByText('标签四')
+  await expect(tag4).toHaveCSS('background-color', 'rgb(255, 243, 232)')
+  await expect(tag4).toHaveCSS('color', 'rgb(227, 125, 41)')
+
+  const tag5 = tagGroup.getByText('标签五')
+  await expect(tag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
+  await expect(tag5).toHaveCSS('color', 'rgb(222, 80, 78)')
+
+})
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js b/examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js
new file mode 100644
index 000000000..0e455b4ef
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js
@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test'
+
+test('TagGroup 主题', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tag-group#tag-group-effect')
+
+  const tagGroupsLocator = page.locator('.tiny-demo-tag-group-effect .tiny-tag-group')
+
+  const darkTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签一' })
+  await expect(darkTag1).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+  await expect(darkTag1).toHaveCSS('color', 'rgb(255, 255, 255)')
+
+  const darkTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签二' })
+  await expect(darkTag2).toHaveCSS('background-color', 'rgb(37, 43, 58)')
+  await expect(darkTag2).toHaveCSS('color', 'rgb(255, 255, 255)')
+
+  const darkTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签三' })
+  await expect(darkTag3).toHaveCSS('background-color', 'rgb(80, 212, 171)')
+  await expect(darkTag3).toHaveCSS('color', 'rgb(255, 255, 255)')
+
+  const darkTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签四' })
+  await expect(darkTag4).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+  await expect(darkTag4).toHaveCSS('color', 'rgb(255, 255, 255)')
+
+  const darkTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签五' })
+  await expect(darkTag5).toHaveCSS('background-color', 'rgb(246, 111, 106)')
+  await expect(darkTag5).toHaveCSS('color', 'rgb(255, 255, 255)')
+
+
+  const lightTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签一' })
+  await expect(lightTag1).toHaveCSS('background-color', 'rgb(238, 240, 245)')
+  await expect(lightTag1).toHaveCSS('color', 'rgb(87, 93, 108)')
+
+  const lightTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签二' })
+  await expect(lightTag2).toHaveCSS('background-color', 'rgba(51, 51, 51, 0.06)')
+  await expect(lightTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
+
+  const lightTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签三' })
+  await expect(lightTag3).toHaveCSS('background-color', 'rgb(237, 255, 249)')
+  await expect(lightTag3).toHaveCSS('color', 'rgb(58, 194, 149)')
+
+  const lightTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签四' })
+  await expect(lightTag4).toHaveCSS('background-color', 'rgb(255, 243, 232)')
+  await expect(lightTag4).toHaveCSS('color', 'rgb(227, 125, 41)')
+
+  const lightTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签五' })
+  await expect(lightTag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
+  await expect(lightTag5).toHaveCSS('color', 'rgb(222, 80, 78)')
+
+
+  const plainTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签一' })
+  await expect(plainTag1).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(plainTag1).toHaveCSS('color', 'rgb(94, 124, 224)')
+
+  const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签二' })
+  await expect(plainTag2).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(plainTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
+
+  const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签三' })
+  await expect(plainTag3).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(plainTag3).toHaveCSS('color', 'rgb(80, 212, 171)')
+
+  const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签四' })
+  await expect(plainTag4).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(plainTag4).toHaveCSS('color', 'rgb(250, 152, 65)')
+
+  const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签五' })
+  await expect(plainTag5).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(plainTag5).toHaveCSS('color', 'rgb(246, 111, 106)')
+
+})
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-event.spec.js b/examples/sites/demos/pc/app/tag-group/tag-group-event.spec.js
new file mode 100644
index 000000000..ac42c1a36
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-event.spec.js
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('TagGroup 事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tag-group#tag-group-event')
+
+  const tag3 = page.locator('.tiny-tag ').filter({ hasText: '标签三' })
+  await tag3.click()
+
+  await expect(page.locator('.tiny-modal__box').filter({ hasText: '当前点击的是第3个标签' })).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js b/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js
new file mode 100644
index 000000000..f4a26f6fd
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('TagGroup 尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tag-group#tag-group-size')
+
+  const mediumTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--medium').nth(0)
+  await expect(mediumTag).toHaveCSS('height', '24px')
+  await expect(mediumTag).toHaveCSS('line-height', '24px')
+  
+
+  const smallTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--small').nth(0)
+  await expect(smallTag).toHaveCSS('height', '20px')
+  await expect(smallTag).toHaveCSS('line-height', '20px')
+
+  const miniTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--mini').nth(0)
+  await expect(miniTag).toHaveCSS('height', '16px')
+  await expect(miniTag).toHaveCSS('line-height', '16px')
+
+})