From cb69fa9e3fe4125f2c6cd3e6af430090b56ec1be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E9=A3=8E=E4=BD=BF=E5=91=BD=E5=BF=85=E8=BE=BE?=
 <1664677472@qq.com>
Date: Mon, 9 Sep 2024 05:02:39 -0700
Subject: [PATCH] feat(button): [button] Adapting to the SMB theme (#2079)

* feat(button): [button] Adapting to the SMB theme

* feat(button): [button] Adapting to the SMB theme

* feat(button): [button] Adapting to the SMB theme
---
 .../button/basic-usage-composition-api.vue    | 16 +++++---------
 .../demos/pc/app/button/basic-usage.spec.ts   | 22 -------------------
 .../sites/demos/pc/app/button/basic-usage.vue | 16 +++++---------
 3 files changed, 10 insertions(+), 44 deletions(-)

diff --git a/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
index 11f02921a..3baf8be69 100644
--- a/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
@@ -1,29 +1,23 @@
 <template>
   <tiny-layout>
+    <p>基本按钮</p>
     <tiny-row>
       <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
-      <tiny-button>次要按钮</tiny-button>
+      <tiny-button> 次要按钮 </tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>
       <tiny-button type="warning"> 警告按钮 </tiny-button>
       <tiny-button type="danger"> 危险按钮 </tiny-button>
     </tiny-row>
+    <p>朴素按钮</p>
     <tiny-row>
       <tiny-button type="primary" plain> 主要按钮 </tiny-button>
-      <tiny-button plain>次要按钮 </tiny-button>
+      <tiny-button plain> 次要按钮 </tiny-button>
       <tiny-button type="success" plain> 成功按钮 </tiny-button>
       <tiny-button type="info" plain> 信息按钮 </tiny-button>
       <tiny-button type="warning" plain> 警告按钮 </tiny-button>
       <tiny-button type="danger" plain> 危险按钮 </tiny-button>
     </tiny-row>
-    <tiny-row>
-      <tiny-button type="primary" round> 主要按钮 </tiny-button>
-      <tiny-button round> 圆角按钮 </tiny-button>
-      <tiny-button type="success" round> 成功按钮 </tiny-button>
-      <tiny-button type="info" round> 信息按钮 </tiny-button>
-      <tiny-button type="warning" round> 警告按钮 </tiny-button>
-      <tiny-button type="danger" round> 危险按钮 </tiny-button>
-    </tiny-row>
     <tiny-row>
       <tiny-button :icon="IconSearch" circle></tiny-button>
       <tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@@ -49,7 +43,7 @@ const IconSearch = iconSearch()
 
 <style scoped>
 .tiny-row {
-  margin-bottom: 20px;
+  margin: 20px 0;
 }
 .tiny-button {
   margin-bottom: 10px;
diff --git a/examples/sites/demos/pc/app/button/basic-usage.spec.ts b/examples/sites/demos/pc/app/button/basic-usage.spec.ts
index 418a695d9..c5d4d66fd 100644
--- a/examples/sites/demos/pc/app/button/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/button/basic-usage.spec.ts
@@ -21,25 +21,3 @@ test('测试朴素按钮', async ({ page }) => {
   await expect(page.getByRole('button', { name: '警告按钮' }).nth(1)).toHaveClass(/tiny-button--warning is-plain/)
   await expect(page.getByRole('button', { name: '危险按钮' }).nth(1)).toHaveClass(/tiny-button--danger is-plain/)
 })
-
-test('测试圆角按钮', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('button#base')
-  await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/is-round/)
-  await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary is-round/)
-  await expect(page.getByRole('button', { name: '成功按钮' }).nth(2)).toHaveClass(/tiny-button--success is-round/)
-  await expect(page.getByRole('button', { name: '信息按钮' }).nth(2)).toHaveClass(/tiny-button--info is-round/)
-  await expect(page.getByRole('button', { name: '警告按钮' }).nth(2)).toHaveClass(/tiny-button--warning is-round/)
-  await expect(page.getByRole('button', { name: '危险按钮' }).nth(2)).toHaveClass(/tiny-button--danger is-round/)
-})
-
-test('测试是否是圆形按钮', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('button#base')
-  await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/tiny-button--default/)
-  await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary/)
-  await expect(page.locator('button:nth-child(3)').first()).toHaveClass(/tiny-button--success/)
-  await expect(page.locator('button:nth-child(4)').first()).toHaveClass(/tiny-button--info/)
-  await expect(page.locator('button:nth-child(5)').first()).toHaveClass(/tiny-button--warning/)
-  await expect(page.locator('button:nth-child(6)').first()).toHaveClass(/tiny-button--danger/)
-})
diff --git a/examples/sites/demos/pc/app/button/basic-usage.vue b/examples/sites/demos/pc/app/button/basic-usage.vue
index 16d5f33eb..81bce35b1 100644
--- a/examples/sites/demos/pc/app/button/basic-usage.vue
+++ b/examples/sites/demos/pc/app/button/basic-usage.vue
@@ -1,29 +1,23 @@
 <template>
   <tiny-layout>
+    <p>基本按钮</p>
     <tiny-row>
       <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
-      <tiny-button>次要按钮</tiny-button>
+      <tiny-button> 次要按钮 </tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>
       <tiny-button type="warning"> 警告按钮 </tiny-button>
       <tiny-button type="danger"> 危险按钮 </tiny-button>
     </tiny-row>
+    <p>朴素按钮</p>
     <tiny-row>
       <tiny-button type="primary" plain> 主要按钮 </tiny-button>
-      <tiny-button plain>次要按钮 </tiny-button>
+      <tiny-button plain> 次要按钮 </tiny-button>
       <tiny-button type="success" plain> 成功按钮 </tiny-button>
       <tiny-button type="info" plain> 信息按钮 </tiny-button>
       <tiny-button type="warning" plain> 警告按钮 </tiny-button>
       <tiny-button type="danger" plain> 危险按钮 </tiny-button>
     </tiny-row>
-    <tiny-row>
-      <tiny-button type="primary" round> 主要按钮 </tiny-button>
-      <tiny-button round> 圆角按钮 </tiny-button>
-      <tiny-button type="success" round> 成功按钮 </tiny-button>
-      <tiny-button type="info" round> 信息按钮 </tiny-button>
-      <tiny-button type="warning" round> 警告按钮 </tiny-button>
-      <tiny-button type="danger" round> 危险按钮 </tiny-button>
-    </tiny-row>
     <tiny-row>
       <tiny-button :icon="IconSearch" circle></tiny-button>
       <tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@@ -60,7 +54,7 @@ export default {
 
 <style scoped>
 .tiny-row {
-  margin-bottom: 20px;
+  margin: 20px 0;
 }
 .tiny-button {
   margin-bottom: 10px;