xiangyuan-app/src/components/display/step/StepItemInternalDotNumberIcon.vue

<template>
  <!-- 默认的圆点数字图标显示组件 -->
  <view :style="{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: themeContext.resolveSize(size - 4),
    height: themeContext.resolveSize(size - 4),
    borderStyle: 'solid',
    borderRadius: themeContext.resolveSize(size),
    borderColor: themeContext.resolveThemeColor(color),
    borderWidth: themeContext.resolveSize(borderWidth),
  }">
    <text :style="{
      color: themeContext.resolveThemeColor(color),
      fontSize: themeContext.resolveSize(size - 22),
      textAlign: 'center',
    }">
      {{ index }}
    </text>
  </view>
</template>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';
import { computed } from 'vue';

defineProps({
  color: {
    type: String,
    default: 'currentColor',
  },
  size: {
    type: Number,
    default: 24,
  },
  index: {
    type: Number,
    default: 0,
  },

})


const themeContext = useTheme();
const borderWidth = computed(() => themeContext.getVar('StepItemDotNumberIconBorderWidth', 3));

</script>