修复

src/styles/cards.scss

@@ -0,0 +1,65 @@
+// 触摸友好的卡片样式
+
+.touch-card {
+  border-radius: 16px;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  
+  .v-card-title {
+    font-size: 1.25rem;
+    padding: 16px 20px;
+  }
+  
+  .v-card-text {
+    padding: 16px 20px;
+  }
+  
+  .v-card-actions {
+    padding: 12px 20px;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+// 卡片发光效果
+.glow-card {
+  position: relative;
+  overflow: hidden;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), 
+                rgba(255, 255, 255, 0.2) 0%, 
+                rgba(255, 255, 255, 0) 60%);
+    opacity: 0;
+    transition: opacity 0.5s;
+    pointer-events: none;
+  }
+  
+  &:hover::after {
+    opacity: 1;
+  }
+}
+
+// 网格布局优化
+.grid-masonry {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-auto-rows: 20px;
+  grid-gap: 16px;
+}
+
+// 空科目网格
+.empty-subjects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-gap: 16px;
+  margin-top: 16px;
+} 

src/styles/global.scss

@@ -0,0 +1,86 @@
+// 全局 UI 美化样式
+
+// 卡片悬浮效果
+.hover-card {
+  transition: transform 0.2s ease, box-shadow 0.3s ease;
+  will-change: transform, box-shadow;
+  
+  &:hover, &:focus {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
+  }
+  
+  &:active {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+  }
+}
+
+// 触摸友好的按钮
+.touch-button {
+  min-height: 48px;
+  min-width: 48px;
+  border-radius: 12px;
+  padding: 12px 24px;
+  
+  &.v-btn--icon {
+    min-height: 56px;
+    min-width: 56px;
+  }
+}
+
+// 波纹效果增强
+.ripple-enhanced {
+  position: relative;
+  overflow: hidden;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), 
+                rgba(255, 255, 255, 0.2) 0%, 
+                rgba(255, 255, 255, 0) 60%);
+    opacity: 0;
+    transition: opacity 0.5s;
+    pointer-events: none;
+  }
+  
+  &:active::after {
+    opacity: 1;
+    transition: opacity 0.2s;
+  }
+}
+
+// 平滑滚动
+html {
+  scroll-behavior: smooth;
+}
+
+// 触摸友好的列表项
+.touch-list-item {
+  min-height: 56px;
+  padding: 12px 16px;
+}
+
+// 大型触摸目标
+.large-touch-target {
+  min-height: 56px;
+  min-width: 56px;
+}
+
+// 全屏模式样式
+.fullscreen-mode {
+  .v-app-bar {
+    background-color: rgba(var(--v-theme-surface-variant), 0.85) !important;
+    backdrop-filter: blur(10px);
+  }
+  
+  .main-window {
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+} 

src/styles/transitions.scss

@@ -163,3 +163,76 @@ $standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
   user-select: none;
   -webkit-touch-callout: none;
 }
+
+// 动画过渡效果
+
+// 网格项目过渡
+.grid-enter-active,
+.grid-leave-active {
+  transition: all 0.5s ease;
+}
+
+.grid-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.grid-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+// 列表项目过渡
+.v-list-enter-active,
+.v-list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-list-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.v-list-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+// 页面过渡
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+// 淡入淡出
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// 缩放过渡
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.3s;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}