更新组件演示页面，方便用户直接使用组件，去除tn-button的默认背景色，tn-avatar修改参数默认值，修复tn-avatar-group最开始头像进行了偏移、修复无法使用标签的bug，tn-badge修改参数默认值，tn-collapse-item修复背景颜色失效问题，滚动通知移除默认背景颜色和字体大小，tn-count-down修复时间单位不正确问题，列表组件修复背景颜色问题，tn-nav-bar返回按钮修改为可进行修改的图标，tn-step添加点击步骤进行跳转，tn-loading修复默认激活颜色出错问题，tn-tag移除默认背景颜色，优化阴影大小css

basicPage/button/button.vue

@@ -1,6 +1,6 @@
 <template>
   
-  <view class="basic-button">
+  <view class="basic-button tn-safe-area-inset-bottom">
   
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>按钮</tn-nav-bar>
@@ -8,31 +8,77 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
-        <tn-button
-          :backgroundColor="backgroundColor"
-          :fontColor="fontColor"
-          :fontSize="fontSize"
-          :shape="shape"
-          :shadow="shadow"
-          :width="width"
-          :height="height"
-          :size="size"
-          :fontBold="fontBold"
-          :padding="padding"
-          :margin="margin"
-          :plain="plain"
-          :border="border"
-          :borderBold="borderBold"
-          :disabled="disabled"
-          :loading="loading"
-        >
-          <block v-if="shape !== 'icon'">演示按钮</block>
-          <block v-else>
-            <text class="tn-icon-discover-planet-fill"></text>
-          </block>
-        </tn-button>
-      </dynamic-demo-template>
+      <demo-title title="基础">
+        <tn-button>按钮</tn-button>
+      </demo-title>
+      
+      <demo-title title="大小">
+        <view>
+          <tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button size="lg" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+        <view class="tn-margin-top">
+          <tn-button padding="20rpx 40rpx" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button margin="10rpx 10rpx" :fontBold="true">按钮</tn-button>
+        </view>
+        <view class="tn-margin-top">
+          <tn-button width="100%">按钮</tn-button>
+        </view>
+      </demo-title>
+      
+      <demo-title title="形状">
+        <tn-button margin="10rpx 10rpx">按钮</tn-button>
+        <tn-button shape="round" margin="10rpx 10rpx">按钮</tn-button>
+        <tn-button shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
+        <tn-button width="150rpx" height="100rpx" :fontSize="40" shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view>
+          <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+        <view class="tn-margin-top">
+          <tn-button backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+      </demo-title>
+      
+      <demo-title title="边框">
+        <view>
+          <tn-button :plain="true" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" :borderBold="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+      </demo-title>
+      
+      <demo-title title="阴影">
+        <tn-button :shadow="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-bg-teal" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-main-gradient-indigo" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-cool-bg-color-7" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" :plain="true" height="100rpx" width="100%" :border="false" margin="10rpx 0">镂空无边框</tn-button>
+      </demo-title>
+      
+      <demo-title title="加载中">
+        <tn-button :loading="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+      </demo-title>
+      
+      <demo-title title="禁止点击">
+        <tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
       
     </view>
   
@@ -41,190 +87,23 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'basicButton',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        backgroundColor: '',
-        fontColor: '',
-        fontSize: 0,
-        shape: '',
-        shadow: false,
-        width: '',
-        height: '',
-        size: '',
-        fontBold: false,
-        padding: '',
-        margin: '',
-        plain: false,
-        border: true,
-        borderBold: false,
-        disabled: false,
-        loading: false,
-        tips: ['无需依赖额外的样式文件','使用tn-button组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              },
-              {
-                title: '自定义大小',
-                optional: ['默认','自定义'],
-                methods: 'sizeChange'
-              },
-              {
-                title: '内置大小',
-                optional: ['默认','sm','lg'],
-                methods: 'insertSizeChange'
-              },
-              {
-                title: '形状',
-                optional: ['默认','圆角','图标'],
-                methods: 'shapeChange'
-              },
-              {
-                title: '显示阴影',
-                optional: ['不显示','显示'],
-                methods: 'shadowChange'
-              },
-              {
-                title: '字体加粗控制',
-                optional: ['默认','加粗'],
-                methods: 'fontBoldChange'
-              },
-              {
-                title: '镂空控制',
-                optional: ['默认','镂空'],
-                methods: 'plainChange'
-              },
-              {
-                title: '镂空边框控制',
-                optional: ['显示','不显示'],
-                methods: 'borderChange'
-              },
-              {
-                title: '镂空边框加粗控制',
-                optional: ['默认','加粗'],
-                methods: 'borderBoldChange'
-              },
-              {
-                title: '禁用控制',
-                optional: ['关闭','开启'],
-                methods: 'disabledChange'
-              },
-              {
-                title: '加载控制',
-                optional: ['关闭','开启'],
-                methods: 'loadingChange'
-              }
-            ]
-          }
-        ]
+        
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换自定义颜色
-      colorChange(event) {
-        switch(event.index) {
-          case 0:
-            this.backgroundColor = ''
-            this.fontColor = ''
-            break
-          case 1:
-            this.backgroundColor = 'tn-bg-indigo'
-            this.fontColor = '#4030E8'
-            break
-        }
-      },
-      // 切换自定义大小
-      sizeChange(event) {
-        switch(event.index) {
-          case 0:
-            this.width = 'auto'
-            this.height = ''
-            this.fontSize = 0
-            this.padding = ''
-            this.$refs.demoTemplate.updateSectionBtnsState(2, true)
-            break
-          case 1:
-            this.width = '200rpx'
-            this.height = '80rpx'
-            this.fontSize = 36
-            this.padding = '10rpx 20rpx'
-            this.size = ''
-            this.$refs.demoTemplate.updateSectionBtnsState(2, false)
-            break
-        }
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换按钮形状
-      shapeChange(event) {
-        switch(event.index) {
-          case 0:
-            this.shape = ''
-            break
-          case 1:
-            this.shape = 'round'
-            break
-          case 2:
-            this.shape = 'icon'
-            break
-        }
-      },
-      // 切换阴影状态
-      shadowChange(event) {
-        if (event.index === 0) {
-          this.shadow = false
-          this.$refs.demoTemplate.updateSectionBtnsState(10, true)
-        } else {
-          this.shadow = true
-          this.loading = false
-          this.$refs.demoTemplate.updateSectionBtnsState(10, false)
-        }
-      },
-      // 切换内置尺寸状态
-      insertSizeChange(event) {
-        this.size = event.index === 0 ? '' : event.name
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换字体加粗状态
-      fontBoldChange(event) {
-        this.fontBold = event.index === 0 ? false : true
-      },
-      // 切换镂空状态
-      plainChange(event) {
-        this.plain = event.index === 0 ? false : true
-      },
-      // 切换镂空边框状态
-      borderChange(event) {
-        this.border = event.index === 0 ? true : false
-      },
-      // 切换镂空边框加粗状态
-      borderBoldChange(event) {
-        this.borderBold = event.index === 0 ? false : true
-      },
-      // 切换禁用状态
-      disabledChange(event) {
-        this.disabled = event.index === 0 ? false : true
-      },
-      // 切换加载状态
-      loadingChange(event) {
-        this.loading = event.index === 0 ? false : true
-      },
-      
     },
   }
 </script>
 
 <style lang="scss" scoped>
-  
+  .basic-button {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
 </style>