diff --git a/examples/sites/demos/pc/app/qr-code/basic-usage.spec.ts b/examples/sites/demos/pc/app/qr-code/basic-usage.spec.ts
new file mode 100644
index 000000000..69f67795b
--- /dev/null
+++ b/examples/sites/demos/pc/app/qr-code/basic-usage.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('qr-code#basic-usage')
+
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/qr-code/icon.spec.ts b/examples/sites/demos/pc/app/qr-code/icon.spec.ts
new file mode 100644
index 000000000..64488adc7
--- /dev/null
+++ b/examples/sites/demos/pc/app/qr-code/icon.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义icon', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#icon')
+
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  const canvasImg = page.locator('.tiny-qr-code-container .mask-icon img')
+  await expect(canvas).toBeVisible()
+  await expect(canvasImg).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/qr-code/level.spec.ts b/examples/sites/demos/pc/app/qr-code/level.spec.ts
new file mode 100644
index 000000000..73df979f2
--- /dev/null
+++ b/examples/sites/demos/pc/app/qr-code/level.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('qr-code#level')
+
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+
+  const button = page.locator('.tiny-radio-button--small')
+  await expect(button.nth(0).locator('.tiny-radio-button__inner')).toHaveText('Low')
+  await expect(button.nth(1).locator('.tiny-radio-button__inner')).toHaveText('Medium')
+  await expect(button.nth(2).locator('.tiny-radio-button__inner')).toHaveText('Quality')
+  await expect(button.nth(3).locator('.tiny-radio-button__inner')).toHaveText('High')
+})
diff --git a/examples/sites/demos/pc/app/qr-code/style.spec.ts b/examples/sites/demos/pc/app/qr-code/style.spec.ts
new file mode 100644
index 000000000..e2e156354
--- /dev/null
+++ b/examples/sites/demos/pc/app/qr-code/style.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('qr-code#style')
+
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js b/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
index a294b893d..ae24942b0 100644
--- a/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
+++ b/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
@@ -40,7 +40,8 @@ export default {
       'props': [
         {
           'name': 'value',
-          'type': 'String',
+          'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '扫描后的文本',
             'en-US': 'scanned text'
@@ -49,7 +50,7 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '200',
           'desc': {
             'zh-CN': '二维码大小',
@@ -59,7 +60,7 @@ export default {
         },
         {
           'name': 'color',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '#000',
           'desc': {
             'zh-CN': '二维码颜色, 仅支持十六进制',
@@ -69,17 +70,18 @@ export default {
         },
         {
           'name': 'bordered',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否有边框',
             'en-US': 'Whether has border style'
           },
-          'demoId': 'basic-usage'
+          'demoId': ''
         },
         {
           'name': 'icon',
-          'type': 'String',
+          'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '二维码中图片的地址（目前只支持图片地址）',
             'en-US': 'include image url (only image link are supported)'
@@ -87,8 +89,8 @@ export default {
           'demoId': 'icon'
         },
         {
-          'name': 'iconSize',
-          'type': 'Number',
+          'name': 'icon-size',
+          'type': 'number',
           'defaultValue': '50',
           'desc': {
             'zh-CN': '二维码中图片的大小，icon 覆盖面积不能超过 30%， 否则影响扫码',
@@ -98,10 +100,10 @@ export default {
         },
         {
           'name': 'level',
-          'type': "'Low' | 'Medium' | 'Quality' | 'High'",
+          'type': 'string',
           'defaultValue': 'Medium',
           'desc': {
-            'zh-CN': '二维码纠错等级',
+            'zh-CN': "二维码纠错等级, 可选 'Low' | 'Medium' | 'Quality' | 'High'",
             'en-US': 'Error Code Level'
           },
           'demoId': 'level'