Merge pull request #420 from teal-front/feature/badge-demo

feat: 示例代码改造-badge组件

src/badge/__test__/demo.test.jsx

@@ -3,24 +3,16 @@
  */
 
 import { mount } from '@vue/test-utils';
-import basicVue from '@/badge/demos/basic.vue';
-import colorVue from '@/badge/demos/color.vue';
-import distVue from '@/badge/demos/dist.vue';
-import maxCountVue from '@/badge/demos/max-count.vue';
+import baseVue from '@/badge/demos/base.vue';
+import buttonVue from '@/badge/demos/button.vue';
+import cellVue from '@/badge/demos/cell.vue';
 import mobileVue from '@/badge/demos/mobile.vue';
-import offsetVue from '@/badge/demos/offset.vue';
-import shapeVue from '@/badge/demos/shape.vue';
-import textVue from '@/badge/demos/text.vue';
 
 const mapper = {
-  basicVue,
-  colorVue,
-  distVue,
-  maxCountVue,
+  baseVue,
+  buttonVue,
+  cellVue,
   mobileVue,
-  offsetVue,
-  shapeVue,
-  textVue,
 };
 
 describe('Badge', () => {

src/badge/demos/base.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <div class="badge-demo">
+      <div class="badge-item">
+        <t-badge dot>消息</t-badge>
+      </div>
+      <div class="badge-item">
+        <t-badge count="16">消息</t-badge>
+      </div>
+      <div class="badge-item">
+        <t-badge count="NEW">消息</t-badge>
+      </div>
+      <div class="badge-item">
+        <t-badge count="···">消息</t-badge>
+      </div>
+    </div>
+  </div>
+</template>

src/badge/demos/button.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <div class="badge-demo">
+      <div class="badge-item">
+        <t-badge dot>
+          <t-button size="small" variant="outline">小按钮</t-button>
+        </t-badge>
+      </div>
+      <div class="badge-item">
+        <t-badge count="16">
+          <t-button size="small" variant="outline">小按钮</t-button>
+        </t-badge>
+      </div>
+      <div class="badge-item">
+        <t-badge count="NEW">
+          <t-button size="small" variant="outline">小按钮</t-button>
+        </t-badge>
+      </div>
+      <div class="badge-item">
+        <t-badge count="···">
+          <t-button size="small" variant="outline">小按钮</t-button>
+        </t-badge>
+      </div>
+    </div>
+  </div>
+</template>

src/badge/demos/cell.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <t-cell-group style="overflow: hidden">
+      <t-cell title="单行标题" arrow>
+        <template #note>
+          <t-badge dot></t-badge>
+        </template>
+      </t-cell>
+      <t-cell title="单行标题" arrow>
+        <template #note>
+          <t-badge count="16"></t-badge>
+        </template>
+      </t-cell>
+      <t-cell title="单行标题" arrow>
+        <template #note>
+          <t-badge count="NEW" shape="round" />
+          <t-badge count="NEW" style="margin-left: 8px" />
+        </template>
+      </t-cell>
+      <t-cell title="单行标题">
+        <template #note>
+          <t-badge shape="ribbon" count="NEW"></t-badge>
+        </template>
+      </t-cell>
+    </t-cell-group>
+  </div>
+</template>

src/badge/demos/mobile.vue

@@ -3,65 +3,26 @@
     <h1 class="title">Badge 徽标</h1>
     <p class="summary">用于告知用户，该区域的状态变化或者待处理任务的数量。</p>
     <tdesign-demo-block title="01 类型" summary="徽标主要分红点、数字、文字和角标提醒">
-      <div class="badge-demo">
-        <div class="badge-item">
-          <t-badge dot>消息</t-badge>
-        </div>
-        <div class="badge-item">
-          <t-badge count="16">消息</t-badge>
-        </div>
-        <div class="badge-item">
-          <t-badge count="NEW">消息</t-badge>
-        </div>
-        <div class="badge-item">
-          <t-badge count="···">消息</t-badge>
-        </div>
-      </div>
-      <div class="badge-demo">
-        <div class="badge-item">
-          <t-badge dot>
-            <t-button size="small" variant="outline">小按钮</t-button>
-          </t-badge>
-        </div>
-        <div class="badge-item">
-          <t-badge count="16">
-            <t-button size="small" variant="outline">小按钮</t-button>
-          </t-badge>
-        </div>
-        <div class="badge-item">
-          <t-badge count="NEW">
-            <t-button size="small" variant="outline">小按钮</t-button>
-          </t-badge>
-        </div>
-        <div class="badge-item">
-          <t-badge count="···">
-            <t-button size="small" variant="outline">小按钮</t-button>
-          </t-badge>
-        </div>
-      </div>
-      <t-cell-group style="overflow: hidden">
-        <t-cell title="单行标题" arrow>
-          <template #note>
-            <t-badge dot></t-badge>
-          </template>
-        </t-cell>
-        <t-cell title="单行标题" arrow>
-          <template #note>
-            <t-badge count="16"></t-badge>
-          </template>
-        </t-cell>
-        <t-cell title="单行标题" arrow>
-          <template #note>
-            <t-badge count="NEW" shape="round" />
-            <t-badge count="NEW" style="margin-left: 8px" />
-          </template>
-        </t-cell>
-        <t-cell title="单行标题">
-          <template #note>
-            <t-badge shape="ribbon" count="NEW"> </t-badge>
-          </template>
-        </t-cell>
-      </t-cell-group>
+      <BaseDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block>
+      <ButtonDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block>
+      <CellDemo />
     </tdesign-demo-block>
   </div>
 </template>
+
+<script lang="ts" setup>
+import BaseDemo from './base.vue';
+import ButtonDemo from './button.vue';
+import CellDemo from './cell.vue';
+</script>
+
+<style>
+.tdesign-mobile-demo-block .badge-demo .badge-item {
+  width: 24%;
+  text-align: center;
+}
+</style>