完成全项目响应式审核与换机交接

components/GenealogyCard.vue

@@ -3,6 +3,9 @@
   <view
     class="genealogy-card"
     :class="{ 'genealogy-card--current': selected }"
+    role="button"
+    :aria-label="accessibleLabel"
+    hover-class="genealogy-card--pressed"
     @click="$emit('select', genealogy)"
   >
     <image
@@ -61,12 +64,19 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+
+const props = defineProps({
   genealogy: { type: Object, required: true },
   role: { type: String, required: true },
   selected: { type: Boolean, default: false },
 });
 defineEmits(["select"]);
+
+const accessibleLabel = computed(
+  () =>
+    `${props.genealogy.name}，${props.role}${props.selected ? '，当前家谱' : ''}，${props.genealogy.location}，${props.genealogy.memberCount} 位成员`,
+);
 </script>
 
 <style scoped lang="scss">
@@ -86,6 +96,9 @@ defineEmits(["select"]);
 .genealogy-card--current {
   background: transparent;
 }
+.genealogy-card--pressed {
+  opacity: 0.72;
+}
 
 .row-frame {
   grid-area: 1 / 1 / 2 / -1;