docs(button): refactor button demo

re Tencent#413

src/button/__test__/demo.test.jsx

@@ -4,22 +4,16 @@
 
 import { mount } from '@vue/test-utils';
 import baseVue from '@/button/demos/base.vue';
-import iconVue from '@/button/demos/icon.vue';
-import loadingVue from '@/button/demos/loading.vue';
 import mobileVue from '@/button/demos/mobile.vue';
-import otherVue from '@/button/demos/other.vue';
-import shapeVue from '@/button/demos/shape.vue';
 import sizeVue from '@/button/demos/size.vue';
+import statusVue from '@/button/demos/status.vue';
 import testVue from '@/button/demos/test.vue';
 
 const mapper = {
   baseVue,
-  iconVue,
-  loadingVue,
   mobileVue,
-  otherVue,
-  shapeVue,
   sizeVue,
+  statusVue,
   testVue,
 };
 

src/button/demos/base.vue

@@ -1,24 +1,49 @@
 <template>
-  <div>
-    <t-button size="large" theme="primary" block :disabled="disabled">强按钮</t-button>
-    <t-button size="large" theme="primary" block variant="outline" :disabled="disabled"> 弱按钮 </t-button>
-    <t-button size="large" variant="outline" block :disabled="disabled">次按钮</t-button>
-    <t-button size="large" theme="primary" variant="outline" :icon="iconFunc" block :disabled="disabled"
-      >带图标按钮</t-button
-    >
-    <t-button size="large" theme="danger" block :disabled="disabled">强警告按钮</t-button>
-    <t-button size="large" theme="danger" variant="outline" block :disabled="disabled"> 弱警告按钮 </t-button>
+  <div class="button-demo">
+    <t-button size="large" theme="primary" block>强按钮</t-button>
+    <t-button size="large" theme="primary" block variant="outline"> 弱按钮 </t-button>
+    <t-button size="large" variant="outline" block>次按钮</t-button>
+    <t-button size="large" theme="primary" variant="outline" :icon="iconFunc" block> 带图标按钮 </t-button>
+    <t-button size="large" theme="danger" block>强警告按钮</t-button>
+    <t-button size="large" theme="danger" variant="outline" block> 弱警告按钮 </t-button>
+  </div>
+
+  <div style="background: #a6a6a6; padding: 8px 16px; margin-bottom: 16px">
+    <t-button size="large" variant="outline" ghost block> 幽灵按钮 </t-button>
+  </div>
+  <div class="margin-button">
+    <t-button size="large" theme="primary" variant="text" block> 文字按钮 </t-button>
+  </div>
+  <div class="no-border-radius margin-button">
+    <t-button size="large" theme="primary" block> 通栏按钮 </t-button>
+  </div>
+  <div class="no-border-radius no-border flex margin-button">
+    <t-button size="large" variant="outline" block>次按钮</t-button>
+    <t-button size="large" theme="primary" block>主按钮</t-button>
+  </div>
+
+  <div class="button-demo align-center margin-right">
+    <div class="flex align-center margin-right">
+      <t-button theme="primary" :icon="iconFunc">带图标按钮</t-button>
+      <t-button theme="primary" shape="round" :icon="iconFunc">带图标按钮</t-button>
+    </div>
+    <div class="flex align-center margin-right">
+      <t-button theme="primary" shape="square" :icon="iconFunc"></t-button>
+      <t-button theme="primary" shape="circle" :icon="iconFunc"></t-button>
+    </div>
+  </div>
+
+  <div class="flex align-center margin-right button-demo-loading">
+    <div class="button-demo flex">
+      <t-button size="large" shape="square" theme="primary" loading></t-button>
+      <t-button size="large" theme="primary" loading>加载中...</t-button>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, defineProps, h } from 'vue';
+import { h } from 'vue';
 import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
 
-const props = defineProps({
-  disabled: Boolean,
-});
-
-const { disabled } = toRefs(props);
 const iconFunc = () => h(TIconApp);
 </script>

src/button/demos/mobile.vue

@@ -3,29 +3,11 @@
     <h1 class="title">Button 按钮</h1>
     <p class="summary">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</p>
     <tdesign-demo-block title="01 类型" summary="基础按钮">
-      <div class="button-demo">
-        <BaseButtonDemo />
-      </div>
-      <OtherButtonDemo />
-      <div class="button-demo align-center margin-right">
-        <IconButtonDemo />
-      </div>
-      <div class="flex align-center margin-right button-demo-loading">
-        <LoadingButtonDemo />
-      </div>
+      <BaseButtonDemo />
     </tdesign-demo-block>
 
     <tdesign-demo-block title="02 状态" summary="按钮禁用态">
-      <div class="button-demo">
-        <BaseButtonDemo :disabled="disabled" />
-      </div>
-      <OtherButtonDemo :disabled="disabled" />
-      <div class="button-demo align-center margin-right">
-        <IconButtonDemo :disabled="disabled" />
-      </div>
-      <div class="flex align-center margin-right button-demo-loading">
-        <LoadingButtonDemo :disabled="disabled" />
-      </div>
+      <StatusButtonDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="03 规格" summary="按钮尺寸">
       <div className="button-demo">
@@ -35,13 +17,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
 import './style/index.less';
 import BaseButtonDemo from './base.vue';
-import IconButtonDemo from './icon.vue';
-import LoadingButtonDemo from './loading.vue';
+import StatusButtonDemo from './status.vue';
 import SizeButtonDemo from './size.vue';
-import OtherButtonDemo from './other.vue';
-
-const disabled = ref(true);
 </script>

src/button/demos/size.vue

@@ -5,7 +5,6 @@
     <t-button size="small" theme="primary">按钮 36</t-button>
   </div>
   <div class="flex align-center margin-right">
-    <!-- <t-button size="large" :icon="iconFunc" shape="round" theme="primary">按钮</t-button> -->
     <t-button size="large" theme="primary" shape="round">
       <template #icon>
         <t-icon-app />

src/button/demos/status.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="button-demo">
+    <t-button size="large" theme="primary" block :disabled="disabled">强按钮</t-button>
+    <t-button size="large" theme="primary" block variant="outline" :disabled="disabled"> 弱按钮 </t-button>
+    <t-button size="large" variant="outline" block :disabled="disabled">次按钮</t-button>
+    <t-button size="large" theme="primary" variant="outline" :icon="iconFunc" block :disabled="disabled">
+      带图标按钮
+    </t-button>
+    <t-button size="large" theme="danger" block :disabled="disabled">强警告按钮</t-button>
+    <t-button size="large" theme="danger" variant="outline" block :disabled="disabled"> 弱警告按钮 </t-button>
+  </div>
+
+  <div style="background: #a6a6a6; padding: 8px 16px; margin-bottom: 16px">
+    <t-button size="large" variant="outline" ghost block :disabled="disabled"> 幽灵按钮 </t-button>
+  </div>
+  <div class="margin-button">
+    <t-button size="large" theme="primary" variant="text" block :disabled="disabled"> 文字按钮 </t-button>
+  </div>
+  <div class="no-border-radius margin-button">
+    <t-button size="large" theme="primary" block :disabled="disabled"> 通栏按钮 </t-button>
+  </div>
+  <div class="no-border-radius no-border flex margin-button">
+    <t-button size="large" variant="outline" block :disabled="disabled">次按钮</t-button>
+    <t-button size="large" theme="primary" block :disabled="disabled">主按钮</t-button>
+  </div>
+
+  <div class="button-demo align-center margin-right">
+    <div class="flex align-center margin-right">
+      <t-button theme="primary" :icon="iconFunc" :disabled="disabled">带图标按钮</t-button>
+      <t-button theme="primary" shape="round" :icon="iconFunc" :disabled="disabled">带图标按钮</t-button>
+    </div>
+    <div class="flex align-center margin-right">
+      <t-button theme="primary" shape="square" :icon="iconFunc" :disabled="disabled"></t-button>
+      <t-button theme="primary" shape="circle" :icon="iconFunc" :disabled="disabled"></t-button>
+    </div>
+  </div>
+
+  <div class="flex align-center margin-right button-demo-loading">
+    <div class="button-demo flex">
+      <t-button size="large" shape="square" theme="primary" loading :disabled="disabled"></t-button>
+      <t-button size="large" theme="primary" loading :disabled="disabled">加载中...</t-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
+
+const disabled = ref(true);
+const iconFunc = () => h(TIconApp);
+</script>