fix: modify theme and demo

Author: James-9696

examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue

@@ -4,8 +4,8 @@
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box 内容</span>
       <template #footer>
-        <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
-        <tiny-button @click="boxVisibility = false"> 取消 </tiny-button>
+        <tiny-button @click="boxVisibility = false" round>取 消</tiny-button>
+        <tiny-button type="primary" @click="boxVisibility = false" round>确 定</tiny-button>
       </template>
     </tiny-dialog-box>
   </div>

examples/sites/demos/pc/app/dialog-box/basic-usage.spec.ts

@@ -5,10 +5,10 @@ test('dialogBox 基础用法', async ({ page }) => {
   await page.goto('dialog-box#basic-usage')
 
   await page.getByRole('button', { name: /Dialog/ }).click()
-  await page.getByRole('button', { name: '确定' }).click()
+  await page.getByRole('button', { name: '确 定' }).click()
 
   await page.getByRole('button', { name: /Dialog/ }).click()
-  await page.getByRole('button', { name: '取消' }).click()
+  await page.getByRole('button', { name: '取 消' }).click()
 
   // 点击 x 图标
   await page.getByRole('button', { name: /Dialog/ }).click()

examples/sites/demos/pc/app/dialog-box/basic-usage.vue

@@ -4,8 +4,8 @@
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box 内容</span>
       <template #footer>
-        <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
-        <tiny-button @click="boxVisibility = false"> 取消 </tiny-button>
+        <tiny-button @click="boxVisibility = false">取 消</tiny-button>
+        <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
   </div>

examples/sites/demos/pc/app/dialog-box/close-on-click-modal.spec.ts

@@ -3,9 +3,10 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 点击遮罩时不关闭弹窗', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#close-on-click-modal')
-  const dialogBox = page.locator('.tiny-dialog-box')
-  const mask = page.locator('.tiny-dialog-box__wrapper')
-  await page.getByRole('button', { name: /Dialog/ }).click()
+  const demo = page.locator('#close-on-click-modal')
+  const dialogBox = demo.locator('.tiny-dialog-box')
+  const mask = demo.locator('.tiny-dialog-box__wrapper')
+  await demo.getByRole('button', { name: /Dialog/ }).click()
   await expect(dialogBox).toBeVisible()
   await mask.click()
   await expect(dialogBox).toBeVisible()

examples/sites/demos/pc/app/dialog-box/close-on-press-escape.spec.ts

@@ -3,8 +3,9 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 禁用 ESC 关闭', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#close-on-press-escape')
-  const button = page.getByRole('button', { name: /Dialog/ })
-  const dialogBox = page.locator('.tiny-dialog-box')
+  const demo = page.locator('#close-on-press-escape')
+  const button = demo.getByRole('button', { name: /Dialog/ })
+  const dialogBox = demo.locator('.tiny-dialog-box')
   // dialogBox 弹出后，禁用 ESC 关闭
   await button.click()
   await expect(dialogBox).toBeVisible()

examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <tiny-alert description="内容是 Alert 组件"></tiny-alert>
+      <b>自定义内容</b>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyButton, TinyDialogBox, TinyAlert } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>

examples/sites/demos/pc/app/dialog-box/custom-dialog-content.spec.ts

@@ -3,12 +3,13 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 自定义内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-content')
-  const button = page.getByRole('button', { name: /Dialog/ })
-  const dialogBox = page.locator('.tiny-dialog-box')
+  const demo = page.locator('#custom-dialog-content')
+  const button = demo.getByRole('button', { name: /Dialog/ })
+  const dialogBox = demo.locator('.tiny-dialog-box')
   await button.click()
+  expect(demo.locator('b')).toHaveText(/自定义内容/)
   await expect(dialogBox).toBeVisible()
-  await page.locator('.tiny-alert > .tiny-alert__close').click()
   await page.waitForTimeout(300)
-  await page.getByRole('button', { name: /确 定/ }).click()
+  await demo.getByRole('button', { name: /确 定/ }).click()
   await expect(dialogBox).toBeHidden()
 })

examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <tiny-alert description="内容是 Alert 组件"></tiny-alert>
+      <b>自定义内容</b>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>
@@ -11,13 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { TinyButton, TinyDialogBox, TinyAlert } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
     TinyButton,
-    TinyDialogBox,
-    TinyAlert
+    TinyDialogBox
   },
   data() {
     return {

examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue

@@ -4,7 +4,7 @@
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box 内容</span>
       <template #footer>
-        <div style="width: 100%; height: 100%; background: #dddddd">自定义 footer 区域</div>
+        <div style="width: 100%; height: 100%">自定义 footer 区域</div>
       </template>
     </tiny-dialog-box>
   </div>

examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.spec.ts

@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 自定义底部', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-footer')
-  await page.getByRole('button', { name: /Dialog/ }).click()
-  await expect(page.locator('.tiny-dialog-box__footer > div')).toHaveText(/自定义/)
-  await page.getByLabel('Close').click()
+  const demo = page.locator('#custom-dialog-footer')
+  await demo.getByRole('button', { name: /Dialog/ }).click()
+  await expect(demo.locator('.tiny-dialog-box__footer > div')).toHaveText(/自定义/)
+  await demo.getByLabel('Close').click()
 })