From 3c021c1bd82bd87db61b09e750abf95839df29f3 Mon Sep 17 00:00:00 2001
From: SunWuyuan <sun@wuyuan.dev>
Date: Sun, 23 Mar 2025 10:20:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/cards/DisplaySettingsCard.vue    | 138 +++++++++++++++---
 src/pages/index.vue                           |  80 ++++++++--
 src/styles/cards.scss                         |  65 +++++++++
 src/styles/global.scss                        |  86 +++++++++++
 src/styles/transitions.scss                   |  73 +++++++++
 src/utils/settings.js                         |  10 ++
 6 files changed, 414 insertions(+), 38 deletions(-)
 create mode 100644 src/styles/cards.scss
 create mode 100644 src/styles/global.scss

diff --git a/src/components/settings/cards/DisplaySettingsCard.vue b/src/components/settings/cards/DisplaySettingsCard.vue
index 1dab30f..758f683 100644
--- a/src/components/settings/cards/DisplaySettingsCard.vue
+++ b/src/components/settings/cards/DisplaySettingsCard.vue
@@ -1,25 +1,26 @@
 <template>
   <settings-card
     title="显示设置"
-    icon="mdi-monitor-dashboard"
+    icon="mdi-monitor"
+    border
   >
     <v-form v-model="isValid" @submit.prevent="save">
       <v-list>
         <v-list-item>
           <template #prepend>
-            <v-icon icon="mdi-eye" class="mr-3" />
+            <v-icon icon="mdi-card-outline" class="mr-3" />
           </template>
-          <v-list-item-title>空科目显示</v-list-item-title>
+          <v-list-item-title>空科目显示方式</v-list-item-title>
           <v-list-item-subtitle>选择空科目的显示方式</v-list-item-subtitle>
           <template #append>
-            <v-btn-toggle
-              v-model="localSettings.emptySubjectDisplay"
-              density="comfortable"
-              color="primary"
-            >
-              <v-btn value="button" :ripple="false">按钮</v-btn>
-              <v-btn value="card" :ripple="false">卡片</v-btn>
-            </v-btn-toggle>
+            <v-select
+              v-model="emptySubjectDisplay"
+              :items="displayOptions"
+              density="compact"
+              hide-details
+              variant="outlined"
+              style="max-width: 150px"
+            />
           </template>
         </v-list-item>
 
@@ -27,14 +28,13 @@
 
         <v-list-item>
           <template #prepend>
-            <v-icon icon="mdi-sort" class="mr-3" />
+            <v-icon icon="mdi-sort-variant" class="mr-3" />
           </template>
           <v-list-item-title>动态排序</v-list-item-title>
-          <v-list-item-subtitle>根据科目动态排序</v-list-item-subtitle>
+          <v-list-item-subtitle>优化卡片布局以提高显示效果</v-list-item-subtitle>
           <template #append>
             <v-switch
-              disabled
-              v-model="localSettings.dynamicSort"
+              v-model="dynamicSort"
               density="comfortable"
               hide-details
             />
@@ -47,11 +47,11 @@
           <template #prepend>
             <v-icon icon="mdi-dice-multiple" class="mr-3" />
           </template>
-          <v-list-item-title>随机点名按钮</v-list-item-title>
-          <v-list-item-subtitle>指向IslandCaller的链接</v-list-item-subtitle>
+          <v-list-item-title>显示随机按钮</v-list-item-title>
+          <v-list-item-subtitle>在主页显示随机点名按钮</v-list-item-subtitle>
           <template #append>
             <v-switch
-              v-model="localSettings.showRandomButton"
+              v-model="showRandomButton"
               density="comfortable"
               hide-details
             />
@@ -65,10 +65,44 @@
             <v-icon icon="mdi-fullscreen" class="mr-3" />
           </template>
           <v-list-item-title>显示全屏按钮</v-list-item-title>
-          <v-list-item-subtitle>在主页面显示全屏切换按钮</v-list-item-subtitle>
+          <v-list-item-subtitle>在主页显示全屏切换按钮</v-list-item-subtitle>
           <template #append>
             <v-switch
-              v-model="localSettings.showFullscreenButton"
+              v-model="showFullscreenButton"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <v-divider class="my-2" />
+
+        <v-list-item>
+          <template #prepend>
+            <v-icon icon="mdi-cards-outline" class="mr-3" />
+          </template>
+          <v-list-item-title>卡片悬浮效果</v-list-item-title>
+          <v-list-item-subtitle>启用卡片悬停时的动画效果</v-list-item-subtitle>
+          <template #append>
+            <v-switch
+              v-model="cardHoverEffect"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <v-divider class="my-2" />
+
+        <v-list-item>
+          <template #prepend>
+            <v-icon icon="mdi-gesture-tap" class="mr-3" />
+          </template>
+          <v-list-item-title>增强触摸模式</v-list-item-title>
+          <v-list-item-subtitle>优化触摸屏操作体验</v-list-item-subtitle>
+          <template #append>
+            <v-switch
+              v-model="enhancedTouchMode"
               density="comfortable"
               hide-details
             />
@@ -109,18 +143,78 @@ export default {
       emptySubjectDisplay: getSetting('display.emptySubjectDisplay'),
       dynamicSort: getSetting('display.dynamicSort'),
       showRandomButton: getSetting('display.showRandomButton'),
-      showFullscreenButton: getSetting('display.showFullscreenButton')
+      showFullscreenButton: getSetting('display.showFullscreenButton'),
+      cardHoverEffect: getSetting('display.cardHoverEffect'),
+      enhancedTouchMode: getSetting('display.enhancedTouchMode')
     };
 
     return {
       localSettings: { ...settings },
       originalSettings: settings,
-      isValid: true
+      isValid: true,
+      displayOptions: [
+        { title: '卡片', value: 'card' },
+        { title: '按钮', value: 'button' }
+      ]
     };
   },
   computed: {
     hasChanges() {
       return JSON.stringify(this.localSettings) !== JSON.stringify(this.originalSettings);
+    },
+    emptySubjectDisplay: {
+      get() {
+        return this.localSettings.emptySubjectDisplay;
+      },
+      set(value) {
+        this.localSettings.emptySubjectDisplay = value;
+        this.$emit('saved');
+      }
+    },
+    dynamicSort: {
+      get() {
+        return this.localSettings.dynamicSort;
+      },
+      set(value) {
+        this.localSettings.dynamicSort = value;
+        this.$emit('saved');
+      }
+    },
+    showRandomButton: {
+      get() {
+        return this.localSettings.showRandomButton;
+      },
+      set(value) {
+        this.localSettings.showRandomButton = value;
+        this.$emit('saved');
+      }
+    },
+    showFullscreenButton: {
+      get() {
+        return this.localSettings.showFullscreenButton;
+      },
+      set(value) {
+        this.localSettings.showFullscreenButton = value;
+        this.$emit('saved');
+      }
+    },
+    cardHoverEffect: {
+      get() {
+        return this.localSettings.cardHoverEffect;
+      },
+      set(value) {
+        this.localSettings.cardHoverEffect = value;
+        this.$emit('saved');
+      }
+    },
+    enhancedTouchMode: {
+      get() {
+        return this.localSettings.enhancedTouchMode;
+      },
+      set(value) {
+        this.localSettings.enhancedTouchMode = value;
+        this.$emit('saved');
+      }
     }
   },
   methods: {
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 123fc7e..fd4e432 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -373,6 +373,7 @@ import { useDisplay } from "vuetify";
 import "../styles/index.scss";
 import "../styles/transitions.scss"; // 添加新的样式导入
 import { debounce, throttle } from "@/utils/debounce";
+import '../styles/global.scss';
 
 export default {
   name: "Classworks 作业板",
@@ -514,7 +515,9 @@ export default {
       return result;
     },
     unusedSubjects() {
-      const usedKeys = Object.keys(this.state.boardData.homework);
+      const usedKeys = Object.keys(this.state.boardData.homework).filter(
+        key => this.state.boardData.homework[key].content?.trim()
+      );
       return this.state.availableSubjects.filter(
         (subject) => !usedKeys.includes(subject.key)
       );
@@ -784,14 +787,11 @@ export default {
 
       // 如果内容发生变化(包括清空)，就视为修改
       if (content !== originalContent.trim()) {
-        if (content) {
-          // 使用精简的数据结构
-          this.state.boardData.homework[this.currentEditSubject] = {
-            content,
-          };
-        } else {
-          delete this.state.boardData.homework[this.currentEditSubject];
-        }
+        // 无论内容是否为空，都保留科目结构
+        this.state.boardData.homework[this.currentEditSubject] = {
+          content: content,
+        };
+        
         this.state.synced = false;
 
         // 处理自动保存
@@ -1181,8 +1181,8 @@ export default {
       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}%`);
+      card.style.setProperty('--x', `${x}%`);
+      card.style.setProperty('--y', `${y}%`);
     },
 
     handleTouchMove(e) {
@@ -1192,8 +1192,8 @@ export default {
         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}%`);
+        card.style.setProperty('--x', `${x}%`);
+        card.style.setProperty('--y', `${y}%`);
       }
     },
 
@@ -1285,8 +1285,56 @@ export default {
   },
 };
 </script>
-<style scoped>
-.gray-text {
-  opacity: 0.6;
+<style lang="scss">
+// 添加卡片发光效果
+.glow-track {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  
+  &::before {
+    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.15) 0%, 
+                rgba(255, 255, 255, 0) 70%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+    z-index: 1;
+  }
+  
+  &:hover::before {
+    opacity: 1;
+  }
+}
+
+// 添加卡片悬浮效果
+.grid-item .v-card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
+  }
+  
+  &:active {
+    transform: translateY(-2px);
+  }
+}
+
+// 添加空科目卡片样式
+.empty-subject-card {
+  transition: all 0.3s ease;
+  opacity: 0.8;
+  
+  &:hover {
+    opacity: 1;
+    transform: translateY(-4px);
+  }
 }
 </style>
diff --git a/src/styles/cards.scss b/src/styles/cards.scss
new file mode 100644
index 0000000..43b627f
--- /dev/null
+++ b/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;
+} 
\ No newline at end of file
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..59b02eb
--- /dev/null
+++ b/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;
+  }
+} 
\ No newline at end of file
diff --git a/src/styles/transitions.scss b/src/styles/transitions.scss
index e195579..1523bcb 100644
--- a/src/styles/transitions.scss
+++ b/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);
+}
diff --git a/src/utils/settings.js b/src/utils/settings.js
index 2b39744..2c21f70 100644
--- a/src/utils/settings.js
+++ b/src/utils/settings.js
@@ -102,6 +102,16 @@ const settingsDefinitions = {
     default: true,
     description: "是否显示全屏按钮",
   },
+  "display.cardHoverEffect": {
+    type: "boolean",
+    default: true,
+    description: "是否启用卡片悬浮效果",
+  },
+  "display.enhancedTouchMode": {
+    type: "boolean",
+    default: true,
+    description: "是否启用增强触摸模式（更大的触摸目标）",
+  },
 
   // 服务器设置（合并了数据提供者设置）
   "server.domain": {