aurora-admin/frameworks-mobile/Steps.uniapp.vue

<template>
  <view class="kole-m-steps" :class="stepsClass" role="list">
    <view
      v-for="(s, i) in steps"
      :key="i"
      class="kole-m-steps__item"
      :class="itemClass(s)"
      role="listitem"
      :aria-current="s && s.status === 'process' ? 'step' : ''"
    >
      <text class="kole-m-steps__dot">{{ dotOf(s) }}</text>
      <view class="kole-m-steps__content"><text class="kole-m-steps__label">{{ s && s.label }}</text></view>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 步骤条（移动端）— 规格 §15
   跨端差异：用 view / text（ol/li 不是 uni 基础组件），列表语义靠 role="list"/"listitem"；
   尺寸用 rpx（2rpx ≈ 1px）；纯展示组件，无手势与点击。 */
import { computed } from 'vue';

const props = defineProps({
  direction: { type: String, default: 'horizontal' },
  steps: { type: Array, default: () => [] }
});

const stepsClass = computed(() => [props.direction === 'vertical' ? 'kole-m-steps--vertical' : ''].filter(Boolean));

function itemClass(s) {
  if (!s) return [];
  const out = [];
  if (s.status === 'process') out.push('kole-m-steps__item--process');
  if (s.status === 'finish') out.push('kole-m-steps__item--finish');
  if (s.status === 'error') out.push('kole-m-steps__item--error');
  return out;
}

/* 状态不只靠颜色：已完成用勾选字符，失败用感叹号（规格 §15.6） */
function dotOf(s) {
  if (!s) return '';
  if (s.status === 'finish') return '✓';
  if (s.status === 'error') return '!';
  return String(s.index || 0);
}
</script>

<style>
.kole-m-steps {
  --kole-m-steps-dot-size: 48rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-font-size-caption: 22rpx;
  --kole-m-gutter: 32rpx;
  display: flex;
  align-items: flex-start;
  padding: 32rpx var(--kole-m-gutter);
  background-color: var(--kole-color-card-bg);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-steps__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 144rpx;
  color: var(--kole-color-text-secondary);
  text-align: center;
}

.kole-m-steps__dot {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kole-m-steps-dot-size);
  height: var(--kole-m-steps-dot-size);
  border: 2rpx solid var(--kole-color-border);
  border-radius: 50%;
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-caption);
  line-height: 1;
}

.kole-m-steps__label {
  margin-top: 16rpx;
  font-size: var(--kole-m-font-size-label);
}

/* 连接线：由每项的 ::after 画到下一项（最后一项不画） */
.kole-m-steps__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 24rpx;
  left: calc(50% + 28rpx);
  width: calc(100% - 48rpx);
  height: 2rpx;
  background-color: var(--kole-color-border);
}

.kole-m-steps__item--process { color: var(--kole-color-brand); }

.kole-m-steps__item--process .kole-m-steps__dot {
  border-color: var(--kole-color-brand);
  background-color: var(--kole-color-brand);
  color: var(--kole-color-text-inverse);
}

.kole-m-steps__item--finish { color: var(--kole-color-text-body); }

.kole-m-steps__item--finish .kole-m-steps__dot {
  border-color: var(--kole-color-brand);
  color: var(--kole-color-brand);
}

.kole-m-steps__item--finish:not(:last-child)::after { background-color: var(--kole-color-brand); }

.kole-m-steps__item--error { color: var(--kole-color-error); }

.kole-m-steps__item--error .kole-m-steps__dot {
  border-color: var(--kole-color-error);
  color: var(--kole-color-error);
}

.kole-m-steps--vertical {
  flex-direction: column;
}

.kole-m-steps--vertical .kole-m-steps__item {
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  margin-bottom: 32rpx;
  text-align: left;
}

.kole-m-steps--vertical .kole-m-steps__item:not(:last-child)::after {
  top: 56rpx;
  left: 24rpx;
  width: 2rpx;
  height: calc(100% - 48rpx);
}

.kole-m-steps__content { flex: 1; }
</style>