From 6e37b3fc82a87cf4785f0928bcb7e3acdc161503 Mon Sep 17 00:00:00 2001
From: James <72028410+James-9696@users.noreply.github.com>
Date: Thu, 19 Sep 2024 18:43:54 -0700
Subject: [PATCH] feat(drawer): [drawer] modify smb theme (#2150)

---
 .../app/drawer/basic-usage-composition-api.vue |  2 +-
 .../sites/demos/pc/app/drawer/basic-usage.vue  |  2 +-
 .../app/drawer/footer-slot-composition-api.vue | 18 ++++++++++++++----
 .../demos/pc/app/drawer/footer-slot.spec.ts    |  3 +--
 .../sites/demos/pc/app/drawer/footer-slot.vue  | 18 ++++++++++++++----
 .../app/drawer/show-footer-composition-api.vue |  2 +-
 .../sites/demos/pc/app/drawer/show-footer.vue  |  2 +-
 .../app/drawer/tips-props-composition-api.vue  |  5 +++--
 .../sites/demos/pc/app/drawer/tips-props.vue   |  5 +++--
 9 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
index abec476f6b..74a21a8117 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/basic-usage.vue b/examples/sites/demos/pc/app/drawer/basic-usage.vue
index 75c25642e6..82f546b029 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drawer/basic-usage.vue
@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
index 4705085b7f..5adf7297c8 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
@@ -2,11 +2,16 @@
   <div>
     <tiny-button @click="openDrawer" type="primary"> 底部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
       <template #footer>
-        <div class="my-footer">
-          <span>自定义底部文本</span>
-          <tiny-button type="primary" native-type="submit" @click="visible = false">确认提交</tiny-button>
+        <div class="foot-text">
+          <div>
+            <tiny-button type="text">文本按钮</tiny-button>
+          </div>
+          <div class="my-footer">
+            <tiny-button native-type="submit" @click="visible = false">取消</tiny-button>
+            <tiny-button type="primary" native-type="submit" @click="visible = false">确认</tiny-button>
+          </div>
         </div>
       </template>
     </tiny-drawer>
@@ -30,4 +35,9 @@ function openDrawer() {
   justify-content: space-between;
   align-items: center;
 }
+.foot-text {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot.spec.ts b/examples/sites/demos/pc/app/drawer/footer-slot.spec.ts
index 5dbf77e3b3..4cd848bf9f 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/footer-slot.spec.ts
@@ -11,6 +11,5 @@ test('底部插槽', async ({ page }) => {
 
   await page.waitForTimeout(300)
   await expect(footer).toBeVisible()
-  await expect(footer.locator('> div')).toHaveClass('my-footer')
-  await expect(footer).toContainText('自定义底部文本')
+  await expect(footer.locator('> div')).toHaveClass('foot-text')
 })
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot.vue b/examples/sites/demos/pc/app/drawer/footer-slot.vue
index 8b5465be20..db38156237 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot.vue
+++ b/examples/sites/demos/pc/app/drawer/footer-slot.vue
@@ -2,12 +2,17 @@
   <div>
     <tiny-button @click="openDrawer" type="primary"> 底部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
 
       <template #footer>
-        <div class="my-footer">
-          <span>自定义底部文本</span>
-          <tiny-button type="primary" native-type="submit" @click="visible = false">确认提交</tiny-button>
+        <div class="foot-text">
+          <div>
+            <tiny-button type="text">文本按钮</tiny-button>
+          </div>
+          <div class="my-footer">
+            <tiny-button native-type="submit" @click="visible = false">取消</tiny-button>
+            <tiny-button type="primary" native-type="submit" @click="visible = false">确认</tiny-button>
+          </div>
         </div>
       </template>
     </tiny-drawer>
@@ -41,4 +46,9 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+.foot-text {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue b/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
index b647f708ed..e03516b4b8 100644
--- a/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
@@ -9,7 +9,7 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/show-footer.vue b/examples/sites/demos/pc/app/drawer/show-footer.vue
index 5ba7eb1483..3c5f8ebea0 100644
--- a/examples/sites/demos/pc/app/drawer/show-footer.vue
+++ b/examples/sites/demos/pc/app/drawer/show-footer.vue
@@ -9,7 +9,7 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue b/examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue
index 06d04e2727..71701a0a14 100644
--- a/examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue
@@ -2,7 +2,7 @@
   <div class="demo-drawer">
     <tiny-button @click="openDrawer" type="primary"> 展开抽屉 </tiny-button>
     <tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -14,7 +14,8 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const tipsProps = reactive({
   content: '这是一段帮助提示。。。',
-  placement: 'right'
+  placement: 'right',
+  effect: 'light'
 })
 
 function openDrawer() {
diff --git a/examples/sites/demos/pc/app/drawer/tips-props.vue b/examples/sites/demos/pc/app/drawer/tips-props.vue
index 8dc2e7ae78..3950b9ed5c 100644
--- a/examples/sites/demos/pc/app/drawer/tips-props.vue
+++ b/examples/sites/demos/pc/app/drawer/tips-props.vue
@@ -2,7 +2,7 @@
   <div class="demo-drawer">
     <tiny-button @click="openDrawer" type="primary"> 展开抽屉 </tiny-button>
     <tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -20,7 +20,8 @@ export default {
       visible: false,
       tipsProps: {
         content: '这是一段帮助提示。。。',
-        placement: 'right'
+        placement: 'right',
+        effect: 'light'
       }
     }
   },