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

<template>
  <view
    class="kole-m-progress"
    :class="progressClass"
    :style="percentStyle"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    :aria-valuenow="value"
    :aria-valuetext="status === 'error' ? '失败 ' + value + '%' : ''"
  >
    <template v-if="type === 'circle'">
      <view class="kole-m-progress__ring">
        <view class="kole-m-progress__hole" aria-hidden="true">
          <text class="kole-m-progress__hole-text">{{ text }}</text>
        </view>
      </view>
    </template>

    <template v-else>
      <view class="kole-m-progress__track">
        <view class="kole-m-progress__bar" :style="{ width: value + '%' }">
          <text v-if="labelPlacement === 'inside'" class="kole-m-progress__label" aria-hidden="true">{{ text }}</text>
        </view>
      </view>
      <text v-if="labelPlacement !== 'inside'" class="kole-m-progress__label" aria-hidden="true">{{ text }}</text>
    </template>

    <text v-if="status === 'success'" class="kole-m-progress__status" aria-hidden="true">✓</text>
    <text v-if="status === 'error'" class="kole-m-progress__status" aria-hidden="true">!</text>
    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 进度条（移动端）— 规格 §26
   跨端差异：全部用 view / text；条体宽度用百分比内联样式（与 H5 端同一取值口径）；
   环形用 conic-gradient 画（H5 / App 目标直接支持；微信小程序基础库 2.9.0+ 亦支持），
   环心挖空的底色用 --kole-m-progress-hole-bg 覆盖（与所在容器同底）。
   尺寸用 rpx（88rpx = 375pt 下的 44px）。 */
import { computed } from 'vue';

const props = defineProps({
  percentage: { type: Number, default: 0 },
  type: { type: String, default: 'line' },
  status: { type: String, default: 'normal' },
  labelPlacement: { type: String, default: 'right' },
  label: { type: String, default: '' },
  paused: { type: Boolean, default: false }
});

const value = computed(() => Math.max(0, Math.min(100, Number(props.percentage) || 0)));
const text = computed(() => props.label || value.value + '%');
const percentStyle = computed(() => ({ '--kole-m-progress-percent': String(value.value) }));

const progressClass = computed(() => [
  `kole-m-progress--${props.type}`,
  props.type === 'line' ? `kole-m-progress--${props.labelPlacement}` : '',
  props.status === 'success' ? 'kole-m-progress--success' : '',
  props.status === 'error' ? 'kole-m-progress--error' : '',
  props.paused ? 'is-paused' : ''
].filter(Boolean));
</script>

<style>
.kole-m-progress {
  --kole-m-progress-height: 12rpx;
  --kole-m-progress-size: 176rpx;
  --kole-m-progress-stroke: 12rpx;
  --kole-m-progress-duration: 240ms;
  --kole-m-progress-percent: 0;
  --kole-m-progress-hole-bg: var(--kole-color-card-bg);
  --kole-m-font-size-label: 28rpx;
  --kole-m-font-size-caption: 22rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-progress__track {
  position: relative;
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  height: var(--kole-m-progress-height);
  border-radius: 999rpx;
  background-color: var(--kole-color-disabled-bg);
}

.kole-m-progress__bar {
  display: block;
  height: 100%;
  border-radius: 999rpx;
  background-color: var(--kole-color-brand);
  transition: width var(--kole-m-progress-duration) ease-out;
}

/* 变体 labelPlacement=inside：条体加高到 40rpx，文案落在**条体内部**
   （品牌底 + 反色字 5.85:1；压在灰色轨道上是真实缺陷）。 */
.kole-m-progress--inside { --kole-m-progress-height: 40rpx; }

.kole-m-progress--inside .kole-m-progress__bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kole-m-progress--inside .kole-m-progress__label {
  overflow: hidden;
  white-space: nowrap;
  color: var(--kole-color-text-inverse);
  font-size: var(--kole-m-font-size-caption);
  line-height: 1;
}

.kole-m-progress--right .kole-m-progress__label {
  flex-shrink: 0;
  min-width: 72rpx;
  padding-left: 16rpx;
  text-align: right;
}

/* 变体 type=circle：环形（外圈 conic-gradient + 环心挖空） */
.kole-m-progress--circle {
  display: flex;
  justify-content: center;
  width: auto;
}

.kole-m-progress__ring {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kole-m-progress-size);
  height: var(--kole-m-progress-size);
  border-radius: 50%;
  background: conic-gradient(var(--kole-color-brand) calc(var(--kole-m-progress-percent) * 1%), var(--kole-color-disabled-bg) 0);
  transition: background var(--kole-m-progress-duration) ease-out;
}

.kole-m-progress__hole {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(var(--kole-m-progress-size) - var(--kole-m-progress-stroke) * 2);
  height: calc(var(--kole-m-progress-size) - var(--kole-m-progress-stroke) * 2);
  border-radius: 50%;
  background-color: var(--kole-m-progress-hole-bg);
}

.kole-m-progress__hole-text { color: var(--kole-color-text-body); font-size: var(--kole-m-font-size-label); }

.kole-m-progress.is-paused .kole-m-progress__bar,
.kole-m-progress.is-paused .kole-m-progress__ring { opacity: 0.5; }

.kole-m-progress.kole-m-progress--success .kole-m-progress__bar { background-color: var(--kole-color-success); }

.kole-m-progress.kole-m-progress--success .kole-m-progress__ring {
  background: conic-gradient(var(--kole-color-success) calc(var(--kole-m-progress-percent) * 1%), var(--kole-color-disabled-bg) 0);
}

.kole-m-progress.kole-m-progress--error .kole-m-progress__bar { background-color: var(--kole-color-error); }

.kole-m-progress.kole-m-progress--error .kole-m-progress__ring {
  background: conic-gradient(var(--kole-color-error) calc(var(--kole-m-progress-percent) * 1%), var(--kole-color-disabled-bg) 0);
}

.kole-m-progress__status {
  flex-shrink: 0;
  padding-left: 12rpx;
  color: var(--kole-color-text-secondary);
}
</style>