1

src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar>
+  <v-app-bar class="no-select">
     <template #prepend>
       <v-app-bar-nav-icon icon="mdi-home" />
     </template>
@@ -50,7 +50,7 @@
   </v-app-bar>
   <div class="d-flex">
     <!-- 主要内容区域 -->
-    <v-container class="main-window flex-grow-1" fluid>
+    <v-container class="main-window flex-grow-1 no-select" fluid>
       <!-- 有内容的科目卡片 -->
       <div ref="gridContainer" class="grid-masonry">
         <TransitionGroup name="grid">
@@ -66,7 +66,10 @@
             <v-card
               border
               height="100%"
+              class="glow-track"
               @click="!isEditingDisabled && openDialog(item.key)"
+              @mousemove="handleMouseMove"
+              @touchmove="handleTouchMove"
             >
               <v-card-title>{{ item.name }}</v-card-title>
               <v-card-text :style="state.contentStyle">
@@ -125,7 +128,7 @@
     <!-- 出勤统计区域 -->
     <v-col
       v-if="state.studentList && state.studentList.length"
-      class="attendance-area"
+      class="attendance-area no-select"
       cols="1"
       @click="setAttendanceArea()"
     >
@@ -943,6 +946,27 @@ export default {
         value,
       };
     },
+
+    handleMouseMove(e) {
+      const card = e.currentTarget;
+      const rect = card.getBoundingClientRect();
+      const x = ((e.clientX - rect.left) / rect.width) * 100;
+      const y = ((e.clientY - rect.top) / rect.height) * 100;
+      card.style.setProperty('--x', `${x}%`);
+      card.style.setProperty('--y', `${y}%`);
+    },
+
+    handleTouchMove(e) {
+      if (e.touches.length === 1) {
+        const touch = e.touches[0];
+        const card = e.currentTarget;
+        const rect = card.getBoundingClientRect();
+        const x = ((touch.clientX - rect.left) / rect.width) * 100;
+        const y = ((touch.clientY - rect.top) / rect.height) * 100;
+        card.style.setProperty('--x', `${x}%`);
+        card.style.setProperty('--y', `${y}%`);
+      }
+    },
   },
 };
 </script>

src/styles/transitions.scss

@@ -77,6 +77,23 @@ $standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
   }
 }
 
+// 优化卡片触摸体验
+.v-card {
+  touch-action: manipulation;
+
+  &:active {
+    transform: scale(0.99);
+    transition-duration: 80ms;
+  }
+
+  @media (pointer: coarse) {
+    &::before {
+      // 增加触摸反馈区域
+      margin: -8px;
+    }
+  }
+}
+
 // 修改对话框过渡动画 - 移除点击波纹效果
 .v-dialog {
   &::before {
@@ -116,10 +133,32 @@ $standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
 // 按钮状态变化动画
 .v-btn {
   transition: background-color 250ms $standard-easing,
-              transform 200ms $emphasized-decelerate;
+              transform 150ms $emphasized-decelerate;
+  touch-action: manipulation;
+  min-height: 40px;  // 确保触摸目标足够大
 
   &:active {
-    transform: scale(0.96);
+    transform: scale(0.98);
-    transition-duration: 100ms;
+    transition-duration: 80ms;
+  }
+
+  @media (pointer: coarse) {
+    // 触摸设备上的特殊处理
+    padding: 8px 16px;
+    margin: 4px;
+
+    &::before {
+      // 增加触摸反馈区域
+      margin: -8px;
     }
   }
+}
+
+// 禁用文字选择
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}