fix: fix demo (#634)

Author: anlyyao

src/action-sheet/_example/align.tsx

@@ -8,10 +8,10 @@ export default function ListExample() {
   return (
     <div className="action-sheet-demo">
       <div className="action-sheet-demo-btns">
-        <Button block variant="outline" theme="primary" onClick={() => setAlignCenterVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setAlignCenterVisible(true)}>
           居中列表型
         </Button>
-        <Button block variant="outline" theme="primary" onClick={() => setAlignLeftVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setAlignLeftVisible(true)}>
           左对齐列表型
         </Button>
       </div>

src/action-sheet/_example/grid-multiple.tsx

@@ -8,7 +8,7 @@ export default function GridMultipleExample() {
   return (
     <div className="action-sheet-demo">
       <div className="action-sheet-demo-btns">
-        <Button block variant="outline" theme="primary" onClick={() => setMultiPageVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setMultiPageVisible(true)}>
           宫格型-多页
         </Button>
       </div>

src/action-sheet/_example/grid.tsx

@@ -10,13 +10,13 @@ export default function GridExample() {
   return (
     <div className="action-sheet-demo">
       <div className="action-sheet-demo-btns">
-        <Button block variant="outline" theme="primary" onClick={() => setNormalVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setNormalVisible(true)}>
           常规宫格型
         </Button>
-        <Button block variant="outline" theme="primary" onClick={() => setDescVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setDescVisible(true)}>
           带描述宫格型
         </Button>
-        <Button block variant="outline" theme="primary" onClick={() => setBadgeVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setBadgeVisible(true)}>
           带徽标宫格型
         </Button>
       </div>

src/action-sheet/_example/list.tsx

@@ -26,19 +26,19 @@ export default function ListExample() {
   return (
     <div className="action-sheet-demo">
       <div className="action-sheet-demo-btns">
-        <Button block variant="outline" theme="primary" onClick={() => setNormalVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setNormalVisible(true)}>
           常规列表型
         </Button>
-        <Button block variant="outline" theme="primary" onClick={() => openByMethod()}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => openByMethod()}>
           函数调用
         </Button>
-        <Button block variant="outline" theme="primary" onClick={() => setDescVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setDescVisible(true)}>
           带描述列表型
         </Button>
-        <Button block variant="outline" theme="primary" onClick={() => setIconVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setIconVisible(true)}>
           带图标列表型
         </Button>
-        <Button block variant="outline" theme="primary" onClick={() => setBadgeVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setBadgeVisible(true)}>
           带徽标列表型
         </Button>
       </div>

src/action-sheet/_example/status.tsx

@@ -8,7 +8,7 @@ export default function ListExample() {
   return (
     <div className="action-sheet-demo">
       <div className="action-sheet-demo-btns">
-        <Button block variant="outline" theme="primary" onClick={() => setStatusVisible(true)}>
+        <Button block size="large" variant="outline" theme="primary" onClick={() => setStatusVisible(true)}>
           列表型选项状态
         </Button>
       </div>

src/back-top/_example/base.tsx

@@ -30,10 +30,24 @@ export default function Base({ visible, onClose, container }) {
     <>
       {visible ? <BackTop text={theme.text} theme={theme.theme} onToTop={handleToTop} container={container} /> : null}
       <div className="button-group">
-        <Button className="button" variant="outline" theme="primary" onClick={() => onClick('round', '顶部')}>
+        <Button
+          className="button"
+          block
+          size="large"
+          variant="outline"
+          theme="primary"
+          onClick={() => onClick('round', '顶部')}
+        >
           圆形返回顶部
         </Button>
-        <Button className="button" variant="outline" theme="primary" onClick={() => onClick('half-round', '返回顶部')}>
+        <Button
+          className="button"
+          block
+          size="large"
+          variant="outline"
+          theme="primary"
+          onClick={() => onClick('half-round', '返回顶部')}
+        >
           半圆形返回顶部
         </Button>
       </div>

src/back-top/_example/index.tsx

@@ -31,7 +31,7 @@ export default function Base() {
         title="BackTop 返回顶部"
         summary="当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部"
       />
-      <TDemoBlock title="形状" summary="">
+      <TDemoBlock title="形状" summary="" padding>
         <BaseDemo visible={visible} onClose={onClose} container={() => containerRef.current} />
       </TDemoBlock>
 

src/back-top/_example/style/index.less

@@ -3,19 +3,8 @@
   overflow: auto;
   height: 100vh;
 
-  .button-group {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    box-sizing: border-box;
-    align-items: center;
-  }
-
   .button {
-    width: 90%;
-    height: 45px;
-    background-color: #fff;
-    margin-bottom: 15px;
+    margin-bottom: 16px;
   }
 
   .group {

src/message/_example/index.tsx

@@ -10,13 +10,13 @@ export default function Demo() {
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="Message 消息通知" summary="用于轻量级反馈或提示，不会打断用户操作。 " />
-      <TDemoBlock title="01 组件类型" summary="消息通知内容为文本、带操作按钮">
+      <TDemoBlock title="01 组件类型" summary="消息通知内容为文本、带操作按钮" padding>
         <Base />
       </TDemoBlock>
-      <TDemoBlock title="02 组件状态" summary="消息组件风格">
+      <TDemoBlock title="02 组件状态" summary="消息组件风格" padding>
         <Theme />
       </TDemoBlock>
-      <TDemoBlock title="03 关闭所有通知" summary="关闭所有通知">
+      <TDemoBlock title="03 关闭所有通知" summary="关闭所有通知" padding>
         <CloseAll />
       </TDemoBlock>
     </div>

src/message/_example/style/index.less

@@ -1,17 +1,3 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .button {
-  width: 90%;
-  height: 45px;
-  background-color: #fff;
-  margin-bottom: 15px;
-}
-
-.close-button {
-  height: 28px;
-  padding: 3px 16px;
+  margin-bottom: 16px;
 }