From c4279acdae78fc178685bda21ff5458eee9ac256 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 11 Apr 2026 13:56:41 +0000
Subject: [PATCH] fix: address code review feedback for background feature

- Use SETTINGS_CHANGED_EVENT constant to prevent typos
- Enforce 2MB image size limit (block upload instead of warn)
- Fix resetAll to force re-render SettingItem for enabled toggle
- Optimize watchSettings callback to only reload on relevant key changes

Agent-Logs-Url: https://github.com/ZeroCatDev/Classworks/sessions/6dfae4c0-df49-4612-88b8-9e31287538b0

Co-authored-by: Sunwuyuan <88357633+Sunwuyuan@users.noreply.github.com>
---
 src/App.vue                                     | 11 +++++++----
 .../settings/cards/BackgroundSettingsCard.vue   |  8 ++++++--
 src/utils/settings.js                           | 17 ++++++++++-------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1771bc8..56d4c98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -67,10 +67,13 @@ onMounted(() => {
 
   loadBgSettings();
 
-  unwatchSettings = watchSettings(() => {
-    loadBgSettings();
-    // Reapply theme on settings change too
-    theme.global.name.value = getSetting("theme.mode");
+  unwatchSettings = watchSettings((_, event) => {
+    // If event detail is available (same-tab change), only reload on background keys
+    const changedKey = event?.detail?.key;
+    if (!changedKey || changedKey.startsWith("background.") || changedKey === "theme.mode") {
+      loadBgSettings();
+      theme.global.name.value = getSetting("theme.mode");
+    }
   });
 
   window.addEventListener('beforeinstallprompt', (e) => {
diff --git a/src/components/settings/cards/BackgroundSettingsCard.vue b/src/components/settings/cards/BackgroundSettingsCard.vue
index d6d0ab7..d011b50 100644
--- a/src/components/settings/cards/BackgroundSettingsCard.vue
+++ b/src/components/settings/cards/BackgroundSettingsCard.vue
@@ -1,7 +1,7 @@
 <template>
   <settings-card border icon="mdi-image" title="背景设置">
     <v-list>
-      <setting-item :setting-key="'background.enabled'" />
+      <setting-item :key="settingItemKey" :setting-key="'background.enabled'" />
     </v-list>
 
     <v-divider class="mb-4" />
@@ -221,6 +221,7 @@ export default {
       saving: false,
       uploadWarning: '',
       urlPresets: URL_PRESETS,
+      settingItemKey: 0,
     };
   },
 
@@ -332,7 +333,8 @@ export default {
 
       const sizeMB = file.size / 1024 / 1024;
       if (sizeMB > MAX_IMAGE_SIZE_MB) {
-        this.uploadWarning = `图片大小为 ${sizeMB.toFixed(1)}MB，超过 ${MAX_IMAGE_SIZE_MB}MB 建议大小，可能影响性能`;
+        this.uploadWarning = `图片大小为 ${sizeMB.toFixed(1)}MB，超过 ${MAX_IMAGE_SIZE_MB}MB 限制，请压缩后重试`;
+        return;
       }
 
       const reader = new FileReader();
@@ -379,6 +381,8 @@ export default {
       this.localOpacity = getSetting('background.opacity') ?? 30;
       this.imageSource = 'url';
       this.uploadWarning = '';
+      // Force re-render of SettingItem to reflect reset enabled state
+      this.settingItemKey++;
     },
   },
 };
diff --git a/src/utils/settings.js b/src/utils/settings.js
index b942ea9..4760992 100644
--- a/src/utils/settings.js
+++ b/src/utils/settings.js
@@ -62,6 +62,9 @@ async function initializeStorage() {
 // 存储所有设置的localStorage键名
 const SETTINGS_STORAGE_KEY = "Classworks_settings";
 
+// 同标签页设置变化事件名
+const SETTINGS_CHANGED_EVENT = "classworks:settings:changed";
+
 
 // 新增: Classworks云端存储的默认设置
 const classworksCloudDefaults = {
@@ -710,7 +713,7 @@ class SettingsManagerClass {
 
       // 触发同标签页内的设置变化事件
       if (typeof window !== "undefined") {
-        window.dispatchEvent(new CustomEvent("classworks-settings-changed", {
+        window.dispatchEvent(new CustomEvent(SETTINGS_CHANGED_EVENT, {
           detail: { key, value },
         }));
       }
@@ -765,7 +768,7 @@ class SettingsManagerClass {
 
     // 触发同标签页内的设置变化事件
     if (typeof window !== "undefined") {
-      window.dispatchEvent(new CustomEvent("classworks-settings-changed", {
+      window.dispatchEvent(new CustomEvent(SETTINGS_CHANGED_EVENT, {
         detail: { key, value: definition.default },
       }));
     }
@@ -794,19 +797,19 @@ class SettingsManagerClass {
     const storageHandler = (event) => {
       if (event.key === SETTINGS_STORAGE_KEY) {
         this.settingsCache = JSON.parse(event.newValue);
-        callback(this.settingsCache);
+        callback(this.settingsCache, null);
       }
     };
 
-    const customHandler = () => {
-      callback(this.settingsCache);
+    const customHandler = (event) => {
+      callback(this.settingsCache, event);
     };
 
     window.addEventListener("storage", storageHandler);
-    window.addEventListener("classworks-settings-changed", customHandler);
+    window.addEventListener(SETTINGS_CHANGED_EVENT, customHandler);
     return () => {
       window.removeEventListener("storage", storageHandler);
-      window.removeEventListener("classworks-settings-changed", customHandler);
+      window.removeEventListener(SETTINGS_CHANGED_EVENT, customHandler);
     };
   }