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

<template>
  <view class="kole-m-grid" :class="gridClass">
    <!-- 纯展示格子：不绑点击、无交互角色（规格 §14.6） -->
    <view
      v-for="row in staticRows"
      :key="'static-' + row.index"
      class="kole-m-grid__item kole-m-grid__item--static"
      :class="{ 'is-disabled': row.item.disabled }"
    >
      <text v-if="row.item.icon" class="kole-m-grid__icon" aria-hidden="true">{{ row.item.icon }}</text>
      <text v-if="row.item.text" class="kole-m-grid__text">{{ row.item.text }}</text>
    </view>

    <view
      v-for="row in actionRows"
      :key="'action-' + row.index"
      class="kole-m-grid__item"
      :class="{ 'is-disabled': row.item.disabled }"
      :role="row.item.disabled ? '' : 'button'"
      :aria-disabled="row.item.disabled ? 'true' : 'false'"
      @tap="onItemTap(row)"
    >
      <text v-if="row.item.icon" class="kole-m-grid__icon" aria-hidden="true">{{ row.item.icon }}</text>
      <text v-if="row.item.text" class="kole-m-grid__text">{{ row.item.text }}</text>
    </view>

    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 宫格（移动端）— 规格 §14
   跨端差异：小程序与 App 端没有 <button> 的布局语义，可点格子用 view + role="button"
   （role 在 H5 产物里生效，与 Tag / Cell 的写法一致），点击一律 @tap；
   尺寸用 rpx（88rpx = 375pt 下的 44px 触控最小边长）。
   两段列表（可点 / 纯展示）是刻意的：小程序模板不支持在同一元素上同时用 v-for 与 v-if，
   分开渲染才能让「可点格子有交互角色、纯展示格子没有」在编译后依然成立。 */
import { computed } from 'vue';

const props = defineProps({
  columns: { type: Number, default: 4 },
  border: { type: Boolean, default: false },
  square: { type: Boolean, default: false },
  items: { type: Array, default: () => [] }
});
const emit = defineEmits(['select']);

const gridClass = computed(() => [
  `kole-m-grid--${props.columns}`,
  props.border ? 'kole-m-grid--border' : '',
  props.square ? 'kole-m-grid--square' : ''
].filter(Boolean));

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

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

<style>
/* rpx 化的移动端令牌（与其它 uni-app 端组件同一写法） */
.kole-m-grid {
  --kole-m-grid-columns: 4;
  --kole-m-grid-icon-size: 64rpx;
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-label: 28rpx;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--kole-color-card-bg);
}

/* 变体 columns：每行格数（小程序端不用 grid 布局，用「宽度 = 100% / 列数」的 flex 折行） */
.kole-m-grid--2 { --kole-m-grid-columns: 2; }
.kole-m-grid--3 { --kole-m-grid-columns: 3; }
.kole-m-grid--4 { --kole-m-grid-columns: 4; }

.kole-m-grid__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% / var(--kole-m-grid-columns));
  min-height: var(--kole-m-touch-target);
  padding: 32rpx 16rpx;
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-label);
  line-height: 1.3;
  text-align: center;
}

/* 状态 active：按下反馈（触屏不用 :hover） */
.kole-m-grid__item:active { background-color: var(--kole-color-table-header-bg); }

.kole-m-grid__item--static:active { background-color: var(--kole-color-card-bg); }

/* 状态 disabled：置灰且不可点 */
.kole-m-grid__item.is-disabled {
  color: var(--kole-color-text-disabled);
}

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

.kole-m-grid__icon {
  font-size: var(--kole-m-grid-icon-size);
  line-height: 1;
  color: var(--kole-color-brand);
}

.kole-m-grid__text {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 变体 square=true：格子撑成正方形（750rpx = 视口宽度） */
.kole-m-grid--square .kole-m-grid__item {
  height: calc(750rpx / var(--kole-m-grid-columns));
}

/* 变体 border=true：格线画在容器上沿/左沿 + 每格右沿/下沿，相邻边不叠粗 */
.kole-m-grid--border {
  border-top: 1rpx solid var(--kole-color-border);
  border-left: 1rpx solid var(--kole-color-border);
}

.kole-m-grid--border .kole-m-grid__item {
  border-right: 1rpx solid var(--kole-color-border);
  border-bottom: 1rpx solid var(--kole-color-border);
}
</style>