feat(drawer): [drawer] modify smb theme (#2150)

opentiny · Sep 20, 2024 · 6e37b3f · 6e37b3f
1 parent c65b638
commit 6e37b3f
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
       }
     }
   },