diff --git a/examples/sites/demos/pc/app/color-picker/alpha.spec.ts b/examples/sites/demos/pc/app/color-picker/alpha.spec.ts
new file mode 100644
index 000000000..bcbd1d1b3
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-picker/alpha.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('测试Alpha', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#enable-alpha')
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByText('演示AlphaAlpha选择。取消选择').click()
+  await page.getByText('用户选择了取消').click()
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByText('#804040FF').click()
+})
diff --git a/examples/sites/demos/pc/app/color-picker/base.spec.ts b/examples/sites/demos/pc/app/color-picker/base.spec.ts
new file mode 100644
index 000000000..e3bacb85e
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-picker/base.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#basic-usage')
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.locator('#basic-usage').getByRole('img').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})
diff --git a/examples/sites/demos/pc/app/color-picker/default-visible.spec.ts b/examples/sites/demos/pc/app/color-picker/default-visible.spec.ts
new file mode 100644
index 000000000..2546f67eb
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-picker/default-visible.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('默认显示色盘', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#default-visible')
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})
diff --git a/examples/sites/demos/pc/app/color-picker/dynamic-color-change.spec.ts b/examples/sites/demos/pc/app/color-picker/dynamic-color-change.spec.ts
new file mode 100644
index 000000000..45e502be5
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-picker/dynamic-color-change.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('动态切换颜色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#dynamic-color-change')
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+})
diff --git a/examples/sites/demos/pc/app/color-picker/event.spec.ts b/examples/sites/demos/pc/app/color-picker/event.spec.ts
new file mode 100644
index 000000000..bedaa8451
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-picker/event.spec.ts
@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('事件触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#event')
+  await page.locator('#event').getByRole('img').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.locator('#event').getByRole('img').click()
+  await page.getByRole('button', { name: '取消' }).click()
+})
diff --git a/examples/sites/demos/pc/app/color-select-panel/alpha.spec.ts b/examples/sites/demos/pc/app/color-select-panel/alpha.spec.ts
new file mode 100644
index 000000000..b3f4a8eb4
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-select-panel/alpha.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('测试Alpha', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#alpha')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})
diff --git a/examples/sites/demos/pc/app/color-select-panel/base.spec.ts b/examples/sites/demos/pc/app/color-select-panel/base.spec.ts
new file mode 100644
index 000000000..ef94de065
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-select-panel/base.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#basic-usage')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})
diff --git a/examples/sites/demos/pc/app/color-select-panel/event.spec.ts b/examples/sites/demos/pc/app/color-select-panel/event.spec.ts
new file mode 100644
index 000000000..a0fb2fc9e
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-select-panel/event.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('事件触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#event')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
+})
diff --git a/examples/sites/demos/pc/app/color-select-panel/history.spec.ts b/examples/sites/demos/pc/app/color-select-panel/history.spec.ts
new file mode 100644
index 000000000..aee87b58e
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-select-panel/history.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('历史记录', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#history')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Append history color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '历史记录' }).click()
+  await page.getByRole('button', { name: 'Pop history color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '历史记录' }).click()
+})
diff --git a/examples/sites/demos/pc/app/color-select-panel/predefine.spec.ts b/examples/sites/demos/pc/app/color-select-panel/predefine.spec.ts
new file mode 100644
index 000000000..0a8a219cb
--- /dev/null
+++ b/examples/sites/demos/pc/app/color-select-panel/predefine.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('预定义颜色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#predefine')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Append predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)').click()
+  await page.getByRole('button', { name: 'Pop predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.getByRole('button', { name: 'Append predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+})
diff --git a/examples/sites/demos/pc/app/crop/aspect-ratio.spec.ts b/examples/sites/demos/pc/app/crop/aspect-ratio.spec.ts
new file mode 100644
index 000000000..5028eb9f7
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/aspect-ratio.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('裁剪框宽高比', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#aspect-ratio')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.icon').first().click()
+  await page.locator('.iconButton > .tiny-svg').first().click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(7) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/auto-crop-area.spec.ts b/examples/sites/demos/pc/app/crop/auto-crop-area.spec.ts
new file mode 100644
index 000000000..bad3fde60
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/auto-crop-area.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('自动裁剪面积', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#auto-crop-area')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.icon').first().click()
+  await page.locator('.icon').first().click()
+  await page.locator('.iconButton > .tiny-svg').first().click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(7) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/basic-usage.spec.ts b/examples/sites/demos/pc/app/crop/basic-usage.spec.ts
new file mode 100644
index 000000000..70cd81560
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/basic-usage.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#basic-usage')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(3) > .icon').click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/crop-meth.spec.ts b/examples/sites/demos/pc/app/crop/crop-meth.spec.ts
new file mode 100644
index 000000000..f41685152
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/crop-meth.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('裁剪框方法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#crop-meth')
+  await page.getByRole('link', { name: '裁剪框方法 事件' }).click()
+  await page.getByRole('button', { name: '启用裁剪框' }).click()
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(2)').click()
+  await page.locator('.icon').first().click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/drag-mode-composition-api.vue b/examples/sites/demos/pc/app/crop/drag-mode-composition-api.vue
index 210308207..905a4f53f 100644
--- a/examples/sites/demos/pc/app/crop/drag-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/drag-mode-composition-api.vue
@@ -5,7 +5,7 @@
       :cropvisible="visible"
       @update:cropvisible="visible = $event"
       :src="imgUrl"
-      :movable="false"
+      :movable="true"
       drag-mode="move"
     ></tiny-crop>
   </div>
diff --git a/examples/sites/demos/pc/app/crop/drag-mode.spec.ts b/examples/sites/demos/pc/app/crop/drag-mode.spec.ts
new file mode 100644
index 000000000..9efe71282
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/drag-mode.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('拖拽模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#drag-mode')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
+  const crops = page.locator('#drag-mode').getByRole('img').nth(1).boundingBox()
+  const { x, y } = await crops
+  // 开始拖拽
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x + 50, y - 100)
+  await page.mouse.move(x - 50, y + 150)
+  await page.mouse.up()
+})
diff --git a/examples/sites/demos/pc/app/crop/drag-mode.vue b/examples/sites/demos/pc/app/crop/drag-mode.vue
index 189efddea..183617694 100644
--- a/examples/sites/demos/pc/app/crop/drag-mode.vue
+++ b/examples/sites/demos/pc/app/crop/drag-mode.vue
@@ -5,7 +5,7 @@
       :cropvisible="visible"
       @update:cropvisible="visible = $event"
       :src="imgUrl"
-      :movable="false"
+      :movable="true"
       drag-mode="move"
     ></tiny-crop>
   </div>
diff --git a/examples/sites/demos/pc/app/crop/event-about-crop.spec.ts b/examples/sites/demos/pc/app/crop/event-about-crop.spec.ts
new file mode 100644
index 000000000..685258063
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/event-about-crop.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('裁剪相关事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#event-about-crop')
+  await page.getByRole('button', { name: '获取Canvas数据' }).click()
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(7) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/event-ready.spec.ts b/examples/sites/demos/pc/app/crop/event-ready.spec.ts
new file mode 100644
index 000000000..2276d523b
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/event-ready.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('ready 事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#event-ready')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(9)').click()
+  await page.getByRole('button', { name: '销毁 cropper' }).click()
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.icon').first().click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/get-container-data.spec.ts b/examples/sites/demos/pc/app/crop/get-container-data.spec.ts
new file mode 100644
index 000000000..1898e422c
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/get-container-data.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('获取容器数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#get-container-data')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
+  await page.locator('div:nth-child(3) > .icon').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(4)').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(9)').click()
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+  await page.getByRole('button', { name: '获取容器数据' }).click()
+})
diff --git a/examples/sites/demos/pc/app/crop/get-crop-box-data.spec.ts b/examples/sites/demos/pc/app/crop/get-crop-box-data.spec.ts
new file mode 100644
index 000000000..0ccb0bef6
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/get-crop-box-data.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('获取剪切框数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#get-crop-box-data')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(3) > .icon > path:nth-child(2)').click()
+  await page.locator('div:nth-child(3) > .icon > path:nth-child(2)').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(8)').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+  await page.getByRole('button', { name: '获取裁剪框数据' }).click()
+})
diff --git a/examples/sites/demos/pc/app/crop/get-cropped-canvas.spec.ts b/examples/sites/demos/pc/app/crop/get-cropped-canvas.spec.ts
new file mode 100644
index 000000000..235853090
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/get-cropped-canvas.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('获取裁剪后的图片数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#get-cropped-canvas')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+  await page.getByRole('button', { name: '获取裁剪后的图片数据' }).click()
+})
diff --git a/examples/sites/demos/pc/app/crop/get-data.spec.ts b/examples/sites/demos/pc/app/crop/get-data.spec.ts
new file mode 100644
index 000000000..4a3421a94
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/get-data.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('获取裁剪后的图片数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#get-data')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(3) > .icon').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+  await page.getByRole('button', { name: '获取裁剪区域数据' }).click()
+  await page.getByRole('button', { name: '清除裁剪区域数据' }).click()
+  await page.getByRole('button', { name: '获取裁剪区域数据' }).click()
+})
diff --git a/examples/sites/demos/pc/app/crop/get-image-data.spec.ts b/examples/sites/demos/pc/app/crop/get-image-data.spec.ts
new file mode 100644
index 000000000..e763501de
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/get-image-data.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('获取图像数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#get-image-data')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(9)').click()
+  await page.getByRole('button', { name: '获取图像数据' }).click()
+})
diff --git a/examples/sites/demos/pc/app/crop/min-crop-box-width-height.spec.ts b/examples/sites/demos/pc/app/crop/min-crop-box-width-height.spec.ts
new file mode 100644
index 000000000..bc5fd3b6a
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/min-crop-box-width-height.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('裁剪框最小宽高', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#min-crop-box-width-height')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(3) > .icon').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/no-background.spec.ts b/examples/sites/demos/pc/app/crop/no-background.spec.ts
new file mode 100644
index 000000000..16a31a052
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/no-background.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('不显示网格背景', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#no-background')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(3) > .icon').click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(8)').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/no-guides.spec.ts b/examples/sites/demos/pc/app/crop/no-guides.spec.ts
new file mode 100644
index 000000000..3aebb3349
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/no-guides.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('不显示虚线', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#no-guides')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/no-modal.spec.ts b/examples/sites/demos/pc/app/crop/no-modal.spec.ts
new file mode 100644
index 000000000..0c199de26
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/no-modal.spec.ts
@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('不显示模态背景', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#no-modal')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.icon').first().click()
+  await page.locator('div:nth-child(3) > .icon').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/replace-image.spec.ts b/examples/sites/demos/pc/app/crop/replace-image.spec.ts
new file mode 100644
index 000000000..8a0f9cdc8
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/replace-image.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('替换图片', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#replace-image')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(3) > .icon').click()
+  await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
+  await page.getByRole('button', { name: '替换图片' }).click()
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/view-mode-composition-api.vue b/examples/sites/demos/pc/app/crop/view-mode-composition-api.vue
index 257293dd9..598599980 100644
--- a/examples/sites/demos/pc/app/crop/view-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/view-mode-composition-api.vue
@@ -1,14 +1,20 @@
 <template>
   <div>
     <tiny-button text="图片裁剪" @click="visible = !visible"></tiny-button>
-    <tiny-crop :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl" :view-mode="1"></tiny-crop>
+    <tiny-button text="切换模式" @click="changeMode"></tiny-button>
+    <tiny-crop :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl" :view-mode="num"></tiny-crop>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { Button as TinyButton, Crop as TinyCrop, Modal } from '@opentiny/vue'
 
 const visible = ref(false)
+let num = ref(0)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+function changeMode() {
+  num.value = Math.ceil(Math.random() * 3)
+  Modal.message({ message: '模式:' + num.value })
+}
 </script>
diff --git a/examples/sites/demos/pc/app/crop/view-mode.spec.ts b/examples/sites/demos/pc/app/crop/view-mode.spec.ts
new file mode 100644
index 000000000..5e6bb1d8c
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/view-mode.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test'
+
+test('视图模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#view-mode')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+  await page.getByRole('button', { name: '切换模式' }).click()
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(6)').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+  await page.getByRole('button', { name: '切换模式' }).click()
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(7) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
+  await page.locator('div:nth-child(3) > .icon').dblclick()
+  await page.locator('.icon').first().click()
+  await page.locator('.icon').first().click({
+    clickCount: 4
+  })
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/view-mode.vue b/examples/sites/demos/pc/app/crop/view-mode.vue
index c652a4e71..ccc3322a6 100644
--- a/examples/sites/demos/pc/app/crop/view-mode.vue
+++ b/examples/sites/demos/pc/app/crop/view-mode.vue
@@ -1,12 +1,13 @@
 <template>
   <div>
     <tiny-button text="图片裁剪" @click="visible = !visible"></tiny-button>
-    <tiny-crop :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl" :view-mode="1"></tiny-crop>
+    <tiny-button text="切换模式" @click="changeMode"></tiny-button>
+    <tiny-crop :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl" :view-mode="num"></tiny-crop>
   </div>
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { Button, Crop, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -15,9 +16,16 @@ export default {
   },
   data() {
     return {
+      num: 0,
       imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
       visible: false
     }
+  },
+  methods: {
+    changeMode() {
+      this.num = Math.ceil(Math.random() * 3)
+      Modal.message({ message: '模式:' + this.num })
+    }
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/crop/wheel-zoom-ratio.spec.ts b/examples/sites/demos/pc/app/crop/wheel-zoom-ratio.spec.ts
new file mode 100644
index 000000000..6b1885b56
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/wheel-zoom-ratio.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('鼠标滚轮缩放图像时比例', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#wheel-zoom-ratio')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.mouse.wheel(100, 100)
+  await page.mouse.wheel(50, 50)
+  await page.locator('.cropper-face').click({
+    button: 'middle'
+  })
+  await page.locator('.cropper-face').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+})
diff --git a/examples/sites/demos/pc/app/crop/zoom-on-wheel.spec.ts b/examples/sites/demos/pc/app/crop/zoom-on-wheel.spec.ts
new file mode 100644
index 000000000..398d95f1a
--- /dev/null
+++ b/examples/sites/demos/pc/app/crop/zoom-on-wheel.spec.ts
@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用鼠标滚轮缩放图像', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#zoom-on-wheel')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.mouse.wheel(100, 100)
+  await page.mouse.wheel(50, 50)
+  await page.locator('.cropper-face').click()
+})