feat(steps): add content-center prop to steps and add two saas icons (#2907)

Author: zzcr

examples/sites/demos/apis/steps.js

@@ -29,6 +29,21 @@ export default {
           pcDemo: 'advanced-steps',
           mfDemo: 'advanced-steps'
         },
+        {
+          name: 'content-center',
+          type: 'string',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '使步骤条内容默认居中显示',
+            'en-US': 'Make the step bar content appear centered by default'
+          },
+          meta: {
+            stable: '3.22.0'
+          },
+          mode: ['mobile-first', 'pc'],
+          pcDemo: 'content-center',
+          mfDemo: 'content-center'
+        },
         {
           name: 'count-field',
           type: 'string',

examples/sites/demos/mobile-first/app/steps/content-center.vue

@@ -0,0 +1,35 @@
+<template>
+  <tiny-steps ref="steps" advanced content-center flex :data="data" :active="advancedActive"></tiny-steps>
+</template>
+
+<script>
+import { TinySteps } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySteps
+  },
+  data() {
+    return {
+      advancedActive: 2,
+      data: [
+        {
+          name: '默认',
+          status: '',
+          description:
+            'Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional '
+        },
+        { name: '已完成', status: 'done', description: 'done 已完成' },
+        { name: '进行中', status: 'doing', description: 'doing 进行中' },
+        { name: '错误', status: 'error', description: 'error 错误' },
+        {
+          name: '已禁用',
+          status: 'disabled',
+          description:
+            'disabled 已禁用，描述内容描述内容，超出部分隐藏，描述内容，超出部分隐藏，描述内容，超出部分隐藏，描述内容，超出部分隐藏'
+        }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/steps/webdoc/steps.js

@@ -39,6 +39,19 @@ export default {
       },
       codeFiles: ['advanced-steps.vue']
     },
+    {
+      demoId: 'content-center',
+      name: {
+        'zh-CN': '内容居中',
+        'en-US': 'Content center'
+      },
+      desc: {
+        'zh-CN': '<p>添加 <code>content-center</code> 使步骤条内容默认居中显示。</p>',
+        'en-US':
+          '<p>Adding the attribute<code>content center</code>can make the step bar content appear centered by default.</p>'
+      },
+      codeFiles: ['content-center.vue']
+    },
     {
       demoId: 'advanced-flex',
       name: {

examples/sites/demos/pc/app/steps/content-center-composition-api.vue

@@ -0,0 +1,27 @@
+<template>
+  <tiny-steps ref="steps" advanced content-center flex :data="data" :active="advancedActive"></tiny-steps>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySteps } from '@opentiny/vue'
+
+const advancedActive = ref(2)
+const data = ref([
+  {
+    name: '默认',
+    status: '',
+    description:
+      'Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional '
+  },
+  { name: '已完成', status: 'done', description: 'done 已完成' },
+  { name: '进行中', status: 'doing', description: 'doing 进行中' },
+  { name: '错误', status: 'error', description: 'error 错误' },
+  {
+    name: '已禁用',
+    status: 'disabled',
+    description:
+      'disabled 已禁用，描述内容描述内容，超出部分隐藏，描述内容，超出部分隐藏，描述内容，超出部分隐藏，描述内容，超出部分隐藏'
+  }
+])
+</script>

examples/sites/demos/pc/app/steps/content-center.vue

@@ -0,0 +1,35 @@
+<template>
+  <tiny-steps ref="steps" advanced content-center flex :data="data" :active="advancedActive"></tiny-steps>
+</template>
+
+<script>
+import { TinySteps } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySteps
+  },
+  data() {
+    return {
+      advancedActive: 2,
+      data: [
+        {
+          name: '默认',
+          status: '',
+          description:
+            'Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional '
+        },
+        { name: '已完成', status: 'done', description: 'done 已完成' },
+        { name: '进行中', status: 'doing', description: 'doing 进行中' },
+        { name: '错误', status: 'error', description: 'error 错误' },
+        {
+          name: '已禁用',
+          status: 'disabled',
+          description:
+            'disabled 已禁用，描述内容描述内容，超出部分隐藏，描述内容，超出部分隐藏，描述内容，超出部分隐藏，描述内容，超出部分隐藏'
+        }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/steps/webdoc/steps.js

@@ -52,6 +52,19 @@ export default {
       },
       codeFiles: ['advanced-steps.vue']
     },
+    {
+      demoId: 'content-center',
+      name: {
+        'zh-CN': '内容居中',
+        'en-US': 'Content center'
+      },
+      desc: {
+        'zh-CN': '<p>添加 <code>content-center</code> 使步骤条内容默认居中显示。</p>',
+        'en-US':
+          '<p>Adding the attribute<code>content center</code>can make the step bar content appear centered by default.</p>'
+      },
+      codeFiles: ['content-center.vue']
+    },
     {
       demoId: 'size',
       name: {

packages/theme-saas/src/steps/index.less

@@ -314,6 +314,10 @@
         @apply text-xs;
         @apply truncate;
       }
+
+      &.content-center {
+        @apply flex-none;
+      }
     }
   }
 

packages/theme-saas/src/svgs/lightning-line.svg

@@ -142,6 +142,8 @@
 
   &__nav-next,
   &__nav-prev {
+    @apply flex;
+    @apply items-center;
     @apply absolute;
     @apply cursor-pointer;
     @apply leading-10;