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

<template>
  <view class="kole-m-list" :class="listClass" role="list" :aria-live="items.length ? '' : 'polite'">
    <text v-if="header" class="kole-m-list__header">{{ header }}</text>

    <template v-if="items.length">
      <view v-for="row in rows" :key="row.index" class="kole-m-list__wrap">
        <view
          v-if="row.item.static"
          class="kole-m-list__item"
          :class="{ 'is-disabled': row.item.disabled }"
          role="listitem"
          :aria-disabled="row.item.disabled ? 'true' : 'false'"
        >
          <text v-if="row.item.prefix" class="kole-m-list__prefix">{{ row.item.prefix }}</text>
          <view class="kole-m-list__body">
            <text class="kole-m-list__title">{{ row.item.title }}</text>
            <text v-if="row.item.desc" class="kole-m-list__desc">{{ row.item.desc }}</text>
          </view>
          <view class="kole-m-list__suffix">
            <text v-if="row.item.value" class="kole-m-list__value">{{ row.item.value }}</text>
            <text v-if="row.item.arrow" class="kole-m-list__arrow">›</text>
          </view>
        </view>

        <view
          v-else
          class="kole-m-list__item"
          :class="{ 'is-disabled': row.item.disabled }"
          :role="row.item.disabled ? '' : 'button'"
          :aria-disabled="row.item.disabled ? 'true' : 'false'"
          @tap="onSelect(row)"
        >
          <text v-if="row.item.prefix" class="kole-m-list__prefix">{{ row.item.prefix }}</text>
          <view class="kole-m-list__body">
            <text class="kole-m-list__title">{{ row.item.title }}</text>
            <text v-if="row.item.desc" class="kole-m-list__desc">{{ row.item.desc }}</text>
          </view>
          <view class="kole-m-list__suffix">
            <text v-if="row.item.value" class="kole-m-list__value">{{ row.item.value }}</text>
            <text v-if="row.item.arrow" class="kole-m-list__arrow">›</text>
          </view>
        </view>
      </view>
      <slot></slot>
    </template>

    <!-- 状态 empty：空列表占位（宿主可换成自己的插槽内容） -->
    <slot v-else name="empty">
      <text class="kole-m-list__empty">{{ emptyText || '暂无数据' }}</text>
    </slot>

    <text v-if="footer" class="kole-m-list__footer">{{ footer }}</text>
  </view>
</template>

<script setup>
/* uni-app 端 · 列表（移动端）— 规格 §24
   跨端差异：小程序没有 ul/li/button 的列表语义，行一律用 view（标记 role="listitem" / "button"），
   可点行用 @tap；分隔线画在包裹层 .kole-m-list__wrap 的上沿（与 H5 端同一策略 —— 行本身
   既可能是纯展示层也可能是可点层，线挂在行下沿会在两种结构里对不上）。
   尺寸用 rpx（88rpx = 375pt 下的 44px，故 default 行高 112rpx / compact 88rpx）。 */
import { computed } from 'vue';

const props = defineProps({
  items: { type: Array, default: () => [] },
  size: { type: String, default: 'default' },
  border: { type: Boolean, default: true },
  divider: { type: String, default: 'inset' },
  header: { type: String, default: '' },
  footer: { type: String, default: '' },
  emptyText: { type: String, default: '' }
});
const emit = defineEmits(['select']);

const listClass = computed(() => [
  props.size === 'compact' ? 'kole-m-list--compact' : '',
  props.border ? 'kole-m-list--border' : '',
  `kole-m-list--${props.divider}`
].filter(Boolean));

/* 行里带上原始下标：select 回传的是被点行在 items 里的下标 */
const rows = computed(() => (props.items || []).map((item, index) => ({ item: item || {}, index: index })));

function onSelect(row) {
  if (!row || !row.item || row.item.disabled) return;
  emit('select', row.index);
}
</script>

<style>
.kole-m-list {
  --kole-m-list-row-height: 112rpx;                 /* default 行高（compact 88rpx） */
  --kole-m-list-divider-inset: 32rpx;               /* 分隔线左端缩进（= 页面留白） */
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-list--compact {
  --kole-m-list-row-height: 88rpx;
  font-size: var(--kole-m-font-size-label);
}

.kole-m-list--inset { --kole-m-list-divider-inset: 32rpx; }
.kole-m-list--full { --kole-m-list-divider-inset: 0rpx; }

.kole-m-list__header,
.kole-m-list__footer {
  display: block;
  padding: 24rpx var(--kole-m-gutter) 16rpx;
  background-color: var(--kole-color-page-bg);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-list__footer { padding-top: 16rpx; padding-bottom: 24rpx; }

.kole-m-list__wrap { position: relative; }

/* 变体 border=true：相邻行之间一条 1rpx 分隔线 */
.kole-m-list--border .kole-m-list__wrap + .kole-m-list__wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--kole-m-list-divider-inset);
  right: 0;
  height: 1rpx;
  background-color: var(--kole-color-border);
}

.kole-m-list__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--kole-m-list-row-height);
  padding: 24rpx var(--kole-m-gutter);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: inherit;
}

/* 状态 active：按下反馈是整行背景变化（触屏不用 :hover） */
.kole-m-list__item:active { background-color: var(--kole-color-table-header-bg); }

.kole-m-list__item.is-disabled { color: var(--kole-color-text-disabled); }

.kole-m-list__prefix {
  flex-shrink: 0;
  margin-right: 24rpx;
  color: var(--kole-color-text-secondary);
}

.kole-m-list__body { flex: 1; display: flex; flex-direction: column; }

.kole-m-list__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--kole-color-text-title);
}

.kole-m-list__desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-text-secondary);
}

.kole-m-list__suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  max-width: 45%;
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-text-secondary);
}

.kole-m-list__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kole-m-list__arrow {
  flex-shrink: 0;
  padding-left: 12rpx;
  color: var(--kole-color-text-placeholder);
}

.kole-m-list__empty {
  display: block;
  padding: 80rpx var(--kole-m-gutter);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
  text-align: center;
}
</style>