jiapuapp/components/genealogy/SwitcherDialog.vue

<template>
  <view v-if="visible" class="genealogy-switcher-layer" @click="emit('close')">
    <view
      class="genealogy-switcher"
      role="dialog"
      aria-modal="true"
      aria-label="切换当前家谱"
      @click.stop
    >
      <view class="genealogy-switcher__content">
        <text class="dialog-title">切换当前家谱</text>
        <view
          class="genealogy-switcher__close"
          role="button"
          aria-label="关闭"
          hover-class="action-hover"
          @click="emit('close')"
        >
          <image
            class="genealogy-switcher__close-icon"
            src="/static/assets/modules/genealogy/transparent/dialog-close.png"
            mode="aspectFit"
          />
        </view>
        <scroll-view class="genealogy-switcher__list" scroll-y>
          <button
            v-for="genealogy in genealogies"
            :key="genealogy.id"
            class="switcher-item"
            :class="{ 'switcher-item--active': genealogy.id === selectedGenealogyId }"
            :aria-pressed="genealogy.id === selectedGenealogyId"
            :aria-label="`${genealogy.name}，${genealogy.location}，${genealogy.memberCount} 位成员`"
            @click="emit('select', genealogy)"
          >
            <view>
              <text class="switcher-item__name">{{ genealogy.name }}</text>
              <text class="switcher-item__meta">
                {{ genealogy.location }} · {{ genealogy.memberCount }} 位成员
              </text>
            </view>
            <text class="switcher-item__state">
              {{ genealogy.id === selectedGenealogyId ? "当前" : "选择" }}
            </text>
          </button>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  visible: { type: Boolean, required: true },
  genealogies: { type: Array, required: true },
  selectedGenealogyId: { type: [String, Number], default: null },
});

const emit = defineEmits(["close", "select"]);
</script>

<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;

.genealogy-switcher-layer {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 40rpx;
  background: rgba(34, 20, 12, 0.58);
}

.genealogy-switcher {
  @include adaptive.adaptive-genealogy-switcher;
  width: 670rpx;
  max-width: 100%;
  min-height: 600rpx;
  max-height: calc(100vh - 120rpx);
}

.genealogy-switcher__content {
  display: grid;
  min-height: 600rpx;
  max-height: calc(100vh - 120rpx);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  box-sizing: border-box;
  padding: 120rpx 58rpx 140rpx;
}

.genealogy-switcher__content > .dialog-title {
  grid-area: 1 / 1;
}

.dialog-title {
  color: $brand-red;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(22px, 42rpx, 28px);
  font-weight: 700;
  letter-spacing: 4rpx;
}

.genealogy-switcher__close {
  display: flex;
  grid-area: 1 / 1;
  align-self: start;
  justify-self: end;
  width: 80rpx;
  height: 80rpx;
  align-items: center;
  justify-content: center;
  margin-top: -42rpx;
  margin-right: -24rpx;
}

.genealogy-switcher__close-icon {
  width: 80rpx;
  height: 80rpx;
}

.genealogy-switcher__list {
  grid-area: 2 / 1;
  width: 100%;
  min-height: 0;
  max-height: calc(100vh - 456rpx);
  margin-top: 24rpx;
  overflow-y: auto;
}

.switcher-item {
  display: flex;
  width: 100%;
  min-height: 112rpx;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin: 0;
  padding: 18rpx 16rpx;
  border: 1rpx solid transparent;
  border-bottom-color: rgba(181, 138, 75, 0.42);
  background: transparent;
  line-height: normal;
  text-align: left;
}

.switcher-item::after {
  border: 0;
}

.switcher-item__name,
.switcher-item__meta {
  display: block;
}

.switcher-item__name {
  color: $ink;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(17px, 32rpx, 22px);
  font-weight: 700;
}

.switcher-item__meta {
  margin-top: 6rpx;
  color: #62584c;
  font-size: clamp(15px, 24rpx, 18px);
}

.switcher-item__state {
  color: $brand-red;
  font-size: clamp(15px, 25rpx, 18px);
  font-weight: 600;
}

.switcher-item--active {
  border-color: rgba(159, 23, 15, 0.22);
  background: rgba(159, 23, 15, 0.055);
}

.switcher-item--active .switcher-item__name {
  color: $brand-red;
}

.action-hover {
  opacity: 0.82;
}
</style>