feat: 添加作业内容复制到今天的功能，优化浮动工具栏

Author: Sunwuyuan

src/components/FloatingToolbar.vue

@@ -1,81 +1,96 @@
 <template>
-  <v-slide-y-transition>
-    <v-card
-      :class="{ 'toolbar-expanded': isExpanded }"
-      class="floating-toolbar"
-      elevation="4"
-      rounded="xl"
-    >
-
-
-      <v-btn-group class="toolbar-buttons" variant="text">
-        <v-btn
-          v-ripple
-          :title="'查看昨天'"
-          class="toolbar-btn"
-          icon="mdi-chevron-left"
-          variant="text"
-          @click="$emit('prev-day')"
-        />
-        <v-btn
-          v-ripple
-          :title="'缩小字体'"
-          class="toolbar-btn"
-          icon="mdi-format-font-size-decrease"
-          variant="text"
-          @click="$emit('zoom', 'out')"
-        />
-        <v-btn
-          v-ripple
-          :title="'放大字体'"
-          class="toolbar-btn"
-          icon="mdi-format-font-size-increase"
-          variant="text"
-          @click="$emit('zoom', 'up')"
-        />
-        <v-menu :close-on-content-click="false" location="top">
-          <template #activator="{ props }">
-            <v-btn
-              v-ripple
-              :title="'选择日期'"
-              class="toolbar-btn"
-              icon="mdi-calendar"
-              v-bind="props"
-              variant="text"
-            />
-          </template>
-          <v-card border class="date-picker-card">
-            <v-date-picker
-              :model-value="selectedDate"
-              color="primary"
-              @update:model-value="handleDateSelect"
-            />
-          </v-card>
-        </v-menu>
-        <v-btn
-          v-ripple
-          :loading="loading"
-          :title="'刷新数据'"
-          class="toolbar-btn"
-          icon="mdi-refresh"
-          variant="text"
-          @click="$emit('refresh')"
-        />
-
-        <v-btn
-          v-if="!isToday"
-          v-ripple
-          :title="'查看明天'"
-          class="toolbar-btn"
-          icon="mdi-chevron-right"
-          variant="text"
-          @click="$emit('next-day')"
-        />
-      </v-btn-group>
-
-
-    </v-card>
-  </v-slide-y-transition>
+  <div class="floating-toolbar-container">
+    <v-slide-y-transition>
+      <v-card
+        :class="{ 'toolbar-expanded': isExpanded }"
+        class="floating-toolbar"
+        elevation="4"
+        rounded="xl"
+      >
+        <v-btn-group class="toolbar-buttons" variant="text">
+          <v-btn
+            v-ripple
+            :title="'查看昨天'"
+            class="toolbar-btn"
+            icon="mdi-chevron-left"
+            variant="text"
+            @click="$emit('prev-day')"
+          />
+          <v-btn
+            v-ripple
+            :title="'缩小字体'"
+            class="toolbar-btn"
+            icon="mdi-format-font-size-decrease"
+            variant="text"
+            @click="$emit('zoom', 'out')"
+          />
+          <v-btn
+            v-ripple
+            :title="'放大字体'"
+            class="toolbar-btn"
+            icon="mdi-format-font-size-increase"
+            variant="text"
+            @click="$emit('zoom', 'up')"
+          />
+          <v-menu :close-on-content-click="false" location="top">
+            <template #activator="{ props }">
+              <v-btn
+                v-ripple
+                :title="'选择日期'"
+                class="toolbar-btn"
+                icon="mdi-calendar"
+                v-bind="props"
+                variant="text"
+              />
+            </template>
+            <v-card border class="date-picker-card">
+              <v-date-picker
+                :model-value="selectedDate"
+                color="primary"
+                @update:model-value="handleDateSelect"
+              />
+            </v-card>
+          </v-menu>
+          <v-btn
+            v-ripple
+            :loading="loading"
+            :title="'刷新数据'"
+            class="toolbar-btn"
+            icon="mdi-refresh"
+            variant="text"
+            @click="$emit('refresh')"
+          />
+
+          <v-btn
+            v-if="!isToday"
+            v-ripple
+            :title="'查看明天'"
+            class="toolbar-btn"
+            icon="mdi-chevron-right"
+            variant="text"
+            @click="$emit('next-day')"
+          />
+        </v-btn-group>
+      </v-card>
+    </v-slide-y-transition>
+
+    <!-- Side Action Button -->
+    <v-slide-x-reverse-transition>
+      <v-btn
+        v-if="!isToday"
+        :loading="copyToTodayLoading"
+        :disabled="copyToTodayLoading"
+        class="side-action-btn"
+        color="primary"
+        elevation="4"
+        prepend-icon="mdi-content-copy"
+        rounded="xl"
+        size="large"
+        text="复制作业内容到今天"
+        @click="$emit('copy-to-today')"
+      >复制到今天</v-btn>
+    </v-slide-x-reverse-transition>
+  </div>
 </template>
 
 <script>
@@ -98,6 +113,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    copyToTodayLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -113,12 +132,24 @@ export default {
 </script>
 
 <style scoped>
-.floating-toolbar {
+.floating-toolbar-container {
   position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.floating-toolbar {
+  position: absolute;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 100;
+
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   background: rgba(255, 255, 255, 0.7) !important;
   backdrop-filter: blur(12px);
@@ -132,14 +163,25 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 0px;
+  padding: 0 4px;
+  pointer-events: auto;
+  will-change: transform;
 }
 
 .floating-toolbar:hover {
   transform: translateX(-50%) translateY(-4px);
   background: rgba(255, 255, 255, 0.8) !important;
 }
 
+.toolbar-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.toolbar-btn {
+  margin: 0 2px;
+}
+
 .toolbar-btn:hover {
   background: rgba(255, 255, 255, 0.3) !important;
   transform: scale(1.05);
@@ -149,6 +191,17 @@ export default {
   transform: scale(0.95);
 }
 
+.side-action-btn {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  pointer-events: auto;
+  z-index: 101;
+  background: rgba(255, 255, 255, 0.9) !important;
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
 .date-picker-card {
   border-radius: 16px;
   overflow: hidden;
@@ -161,7 +214,8 @@ export default {
 @media (max-width: 600px) {
   .floating-toolbar {
     bottom: 16px;
-    width: 95%;
+    width: auto;
+    max-width: 95%;
     padding: 2px;
   }
 
@@ -173,10 +227,12 @@ export default {
 
   .toolbar-btn {
     margin: 0;
+    min-width: 40px; /* Ensure touch target */
   }
 
-  .nav-btn {
-    margin: 0 2px;
+  .side-action-btn {
+    bottom: 80px; /* Move above toolbar on mobile */
+    right: 16px;
   }
 }
 
@@ -199,5 +255,11 @@ export default {
     background: rgba(30, 30, 30, 0.9) !important;
     border: 1px solid rgba(255, 255, 255, 0.1);
   }
+
+  .side-action-btn {
+    background: rgba(30, 30, 30, 0.9) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white !important;
+  }
 }
 </style>

src/pages/index.vue

@@ -207,6 +207,7 @@
   <floating-toolbar
     :is-today="isToday"
     :loading="loading.download"
+    :copy-to-today-loading="loading.copyToToday"
     :selected-date="state.selectedDateObj"
     :unread-count="unreadCount"
     @refresh="downloadData"
@@ -216,6 +217,7 @@
     @date-select="handleDateSelect"
     @prev-day="navigateDay(-1)"
     @next-day="navigateDay(1)"
+    @copy-to-today="copyHomeworkToToday"
   />
 
   <!-- 添加ICP备案悬浮组件 -->
@@ -433,6 +435,7 @@ export default {
         download: false,
         upload: false,
         students: false,
+        copyToToday: false,
       },
       debouncedUpload: null,
       debouncedAttendanceSave: null,
@@ -1914,6 +1917,67 @@ export default {
       this.handleDateSelect(currentDate);
     },
 
+    async copyHomeworkToToday() {
+      if (this.loading.copyToToday) return;
+
+      try {
+        this.loading.copyToToday = true;
+
+        // 1. 保存当前选中日期的作业数据
+        const sourceDate = this.state.dateString;
+        const sourceHomework = JSON.parse(JSON.stringify(this.state.boardData.homework));
+
+        // 2. 切换到今天并加载今天的数据（主要是为了获取考勤等其他数据）
+        const today = this.getToday();
+        const todayString = this.formatDate(today);
+
+        // 临时切换到今天以加载数据
+        this.state.dateString = todayString;
+        await this.downloadData();
+
+        // 3. 直接替换今天的作业数据（删除原有作业，使用源日期的作业）
+        // 深拷贝源日期的作业数据
+        const newHomework = {};
+        for (const key in sourceHomework) {
+          if (sourceHomework[key] && sourceHomework[key].content) {
+            // 如果是自定义卡片，保留完整结构
+            if (sourceHomework[key].type === 'custom') {
+              newHomework[key] = JSON.parse(JSON.stringify(sourceHomework[key]));
+            } else {
+              // 普通作业，只复制内容
+              newHomework[key] = {
+                content: sourceHomework[key].content
+              };
+            }
+          }
+        }
+
+        // 直接替换作业数据
+        this.state.boardData.homework = newHomework;
+        this.state.synced = false;
+
+        // 4. 保存到今天
+        await this.uploadData();
+
+        // 5. 更新视图状态为今天
+        this.state.selectedDate = todayString;
+        this.state.selectedDateObj = today;
+        this.state.isToday = true;
+
+        // 6. 更新URL
+        const url = new URL(window.location);
+        url.searchParams.delete('date');
+        window.history.pushState({}, '', url);
+
+        this.$message.success("复制成功", `已将 ${sourceDate} 的作业内容复制到今天（已替换原有作业）`);
+      } catch (error) {
+        console.error("复制作业失败:", error);
+        this.$message.error("复制失败", error.message || "请重试");
+      } finally {
+        this.loading.copyToToday = false;
+      }
+    },
+
     // 解析预配数据
     parsePreconfigData() {
       try {