feat(components): update ProblemDetail layout and DataTable click logic

src/components/DataTable.vue

@@ -5,9 +5,10 @@
       :data="dataRef"
       :show-header="showHeader"
       :border="border"
-      :class="['custom-table', { 'large-font': largeFont }]"
+      :class="['custom-table', { 'large-font': largeFont, 'clickable-rows': clickable }]"
       @mouseenter.native="handleMouseEnter"
       @mouseleave.native="handleMouseLeave"
+      @row-click="handleRowClick"
     >
       <el-table-column
         v-for="col in columns"
@@ -49,6 +50,7 @@ const props = withDefaults(
     border?: boolean
     scrollThreshold?: number
     largeFont?: boolean
+    clickable?: boolean
   }>(),
   {
     autoScroll: false,
@@ -58,9 +60,18 @@ const props = withDefaults(
     border: false,
     scrollThreshold: 5,
     largeFont: false,
+    clickable: true,
   }
 )
 
+const emit = defineEmits<{
+  (e: 'row-click', row: any): void
+}>()
+
+const handleRowClick = (row: any) => {
+  emit('row-click', row)
+}
+
 const tableRef = ref<any>(null)
 const scrollId = ref<number | null>(null)
 const scrollSpeed = 0.5 // 滚动速度，每帧滚动的像素数
@@ -254,6 +265,17 @@ onUnmounted(() => {
       color: #02bcad;
     }
 
+    // 可点击行样式
+    &.clickable-rows {
+      :deep(.el-table__body .el-table__row) {
+        cursor: pointer;
+
+        &:hover > td {
+          background-color: rgba(0, 255, 230, 0.15) !important;
+        }
+      }
+    }
+
     // 大字体样式
     &.large-font {
       :deep(.el-table__body-wrapper tr) {

src/components/InstitutionDetailModal.vue

@@ -289,7 +289,7 @@ const createObserver = () => {
       })
     },
     {
-      rootMargin: '200px', // 在元素进入视口前200px开始加载
+      rootMargin: '500px', // 在元素进入视口前500px开始加载
       threshold: 0.1,
     }
   )

src/views/HomeView.vue

@@ -36,6 +36,7 @@
               height="314px"
               width="100%"
               style="padding: 0 16px 30px"
+              @row-click="handleViewDetail"
             >
               <template #riskLevel="{ row }">
                 <div class="risk-icon" :class="row.riskLevel"></div>
@@ -61,6 +62,7 @@
               height="370px"
               width="100%"
               style="padding: 0 28px; margin-top: 36px"
+              @row-click="handleViewDetail"
             >
               <template #riskLevel="{ row }">
                 <div class="risk-icon" :class="row.riskLevel"></div>
@@ -92,6 +94,7 @@
               height="560px"
               width="100%"
               style="padding: 0 28px; margin-top: 36px"
+              @row-click="handleViewDetail"
             >
               <template #riskLevel="{ row }">
                 <div class="risk-icon" :class="row.riskLevel"></div>
@@ -116,6 +119,7 @@
               height="330px"
               width="100%"
               style="padding: 0 28px; margin-top: 36px"
+              @row-click="handleViewDetail"
             >
               <template #date="{ row }">
                 <div class="table-cell">{{ row.date }}</div>
@@ -143,6 +147,7 @@
               height="328px"
               width="100%"
               style="padding: 0 16px; margin-top: 36px"
+              @row-click="handleViewDetail"
             >
               <template #riskLevel="{ row }">
                 <div class="risk-icon" :class="row.riskLevel"></div>
@@ -177,11 +182,18 @@
 
     <!-- 底部 -->
     <Footer />
+
+    <!-- 问题详情弹窗 -->
+    <ProblemDetail
+      :visible="showProblemDetail"
+      :row-data="selectedRow"
+      @close="showProblemDetail = false"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import 'swiper/css'
 import Header from '../components/Header.vue'
 import Footer from '../components/Footer.vue'
@@ -194,12 +206,21 @@ import HorizontalProgressChart from '../components/HorizontalProgressChart.vue'
 import ImageCarousel from '../components/ImageCarousel.vue'
 import RegionElderly from '../components/RegionElderly.vue'
 import ElderlyInstitutionService from '../components/ElderlyInstitutionService.vue'
+import ProblemDetail from '../components/ProblemDetail.vue'
 import { subsidyData } from '../data/subsidy'
 import { foodData } from '../data/food'
 import { housingData } from '../data/housing'
 import { clothingData } from '../data/clothing'
 import { dignityData } from '../data/dignity'
 
+const showProblemDetail = ref(false)
+const selectedRow = ref<any>(null)
+
+const handleViewDetail = (row: any) => {
+  selectedRow.value = row
+  showProblemDetail.value = true
+}
+
 // 生命周期
 onMounted(() => {
   onUnmounted(() => {})