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

<template>
  <!-- 只读形态：整组是一个 role="img"，名称由 aria-label 播报（不留下可聚焦的星） -->
  <view
    v-if="readonly"
    class="kole-m-rate"
    :class="rateClass"
    role="img"
    :aria-label="label + ' ' + value + ' 分（满分 ' + max + ' 分）'"
  >
    <view class="kole-m-rate__stars">
      <view v-for="(i, k) in starIndexes" :key="k" class="kole-m-rate__star">
        <view class="kole-m-rate__glyph">
          <text class="kole-m-rate__base">★</text>
          <text class="kole-m-rate__fill" :style="{ width: ratioOf(i) * 100 + '%' }">★</text>
        </view>
      </view>
    </view>
    <slot>
      <text class="kole-m-rate__text">{{ value }} 分</text>
    </slot>
  </view>

  <view
    v-else
    class="kole-m-rate"
    :class="rateClass"
    role="radiogroup"
    :aria-label="label"
    :aria-disabled="disabled ? 'true' : 'false'"
  >
    <view class="kole-m-rate__stars">
      <view
        v-for="(i, k) in starIndexes"
        :key="k"
        class="kole-m-rate__star"
        :role="disabled ? '' : 'radio'"
        :aria-checked="ratioOf(i) >= 1 ? 'true' : 'false'"
        :aria-label="i + 1 + ' 星'"
        :aria-disabled="disabled ? 'true' : 'false'"
        @tap="pick(i, $event)"
      >
        <view class="kole-m-rate__glyph">
          <text class="kole-m-rate__base">★</text>
          <text class="kole-m-rate__fill" :style="{ width: ratioOf(i) * 100 + '%' }">★</text>
        </view>
        <template v-if="allowHalf">
          <!-- uni 端取不到 DOM 的 e.target，半星靠两个分区各自挂处理器（左半取 N-0.5） -->
          <view class="kole-m-rate__half kole-m-rate__half--left" @tap.stop="pickLeft(i)"></view>
          <view class="kole-m-rate__half kole-m-rate__half--right" @tap.stop="pick(i)"></view>
        </template>
      </view>
    </view>
    <slot>
      <text class="kole-m-rate__text">{{ value }} 分</text>
    </slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 评分（移动端）— 规格 §36
   跨端差异：
   ① 星用 view + role="radio"（小程序没有可聚焦的原生 button 语义差异），点击用 @tap；
   ② 半星判定取不到 DOM 的 e.target，改用 @tap 在左右两个半区视图上的**各自处理器**：
      左半区视图自己发 tap 就取 N-0.5，其余一律取 N（这是跨端下唯一可靠的分区方式）；
   ③ 填充比例用内联 width 的百分比（与 H5 同一表达：灰底星 + 品牌色覆盖层）；
   ④ 只读形态不渲染任何可点区域，整组一个 role="img"。
   尺寸用 rpx：88rpx = 375pt 下的 44px 触控最小边长，星形 48rpx = 24px。 */
import { computed } from 'vue';

const props = defineProps({
  value: { type: Number, default: 0 },
  max: { type: Number, default: 5 },
  allowHalf: { type: Boolean, default: false },
  size: { type: String, default: 'default' },
  readonly: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  label: { type: String, default: '评分' }
});
const emit = defineEmits(['change']);

const starIndexes = computed(() => Array.from({ length: props.max }, (_, i) => i));

const rateClass = computed(() => [
  props.allowHalf ? 'kole-m-rate--half' : '',
  props.size === 'small' ? 'kole-m-rate--small' : '',
  props.readonly ? 'kole-m-rate--readonly' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

function ratioOf(i) {
  return Math.max(0, Math.min(1, props.value - i));
}

/* 星本体被点时取整星（半区视图有自己的处理器，命中它时不会走到这里） */
function pick(i) {
  if (props.readonly || props.disabled) return;
  emit('change', i + 1);
}

/* 左半区：取 N-0.5（仅 allowHalf） */
function pickLeft(i) {
  if (props.readonly || props.disabled || !props.allowHalf) return;
  emit('change', i + 1 - 0.5);
}
</script>

<style>
.kole-m-rate {
  --kole-m-rate-star: 48rpx;   /* 星形字号（= 视觉边长，24px @375pt） */
  --kole-m-rate-gap: 16rpx;    /* 星与星之间的间距 */
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--kole-m-touch-target);
  padding-left: var(--kole-m-gutter);
  padding-right: var(--kole-m-gutter);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: 32rpx;
}

/* 变体 size=small：紧凑（列表里展示已有评分，配 readonly） */
.kole-m-rate--small { --kole-m-rate-star: 36rpx; }

.kole-m-rate__stars {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 每颗星撑到 88rpx 高（热区），星形本体只占中间 48rpx */
.kole-m-rate__star {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kole-m-touch-target);
  padding-left: 8rpx;
  padding-right: 8rpx;
}

/* 星形本体：灰底 + 品牌色覆盖层（覆盖层宽度 = 填充比例，表达半星） */
.kole-m-rate__glyph {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--kole-m-rate-star);
  line-height: 1;
}

.kole-m-rate__base { color: var(--kole-color-icon-inactive); }

.kole-m-rate__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--kole-color-brand);
}

/* 半星的点击分区：盖在星形本体左右各一半上（仅 allowHalf 时出现） */
.kole-m-rate__half {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.kole-m-rate--half .kole-m-rate__half { display: block; }

.kole-m-rate__half--left { left: 0; }
.kole-m-rate__half--right { right: 0; }

.kole-m-rate__text {
  flex: 1;
  padding-left: 24rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

/* 变体 readonly=true：只读展示（无半星分区、无按下反馈） */
.kole-m-rate--readonly .kole-m-rate__half { display: none; }

/* 状态 disabled：整条置灰 */
.kole-m-rate.is-disabled .kole-m-rate__base,
.kole-m-rate.is-disabled .kole-m-rate__fill { color: var(--kole-color-text-disabled); }

.kole-m-rate.is-disabled .kole-m-rate__text { color: var(--kole-color-text-disabled); }
</style>