From 08e95a3efc113b59e6152c4d867cbbb7bbd5e3f7 Mon Sep 17 00:00:00 2001
From: SunWuyuan <sun@wuyuan.dev>
Date: Sun, 9 Mar 2025 14:15:54 +0800
Subject: [PATCH] 1

---
 src/components/settings/StudentListCard.vue | 91 +++++++++++++++++++--
 src/utils/dataProvider.js                   | 10 +--
 2 files changed, 89 insertions(+), 12 deletions(-)

diff --git a/src/components/settings/StudentListCard.vue b/src/components/settings/StudentListCard.vue
index b680810..527fd98 100644
--- a/src/components/settings/StudentListCard.vue
+++ b/src/components/settings/StudentListCard.vue
@@ -1,11 +1,23 @@
 <template>
-  <v-card border>
+  <v-card
+    border
+    :color="hasChanges ? 'warning-subtle' : undefined"
+    :class="{ 'unsaved-changes': hasChanges }"
+  >
     <v-card-item>
       <template #prepend>
         <v-icon icon="mdi-account-group" size="large" class="mr-2" />
       </template>
       <v-card-title class="text-h6">学生列表</v-card-title>
       <template #append>
+        <v-chip
+          v-if="hasChanges"
+          color="warning"
+          size="small"
+          class="mr-2"
+        >
+          未保存
+        </v-chip>
         <v-btn
           :color="modelValue.advanced ? 'primary' : undefined"
           variant="text"
@@ -163,7 +175,7 @@
         <!-- 高级编辑模式 -->
         <div v-else class="pt-2">
           <v-textarea
-            v-model="modelValue.text"
+            v-model="text"
             label="批量编辑学生列表"
             placeholder="每行输入一个学生姓名"
             hint="使用文本编辑模式批量编辑学生名单，保存时会自动去除空行"
@@ -182,8 +194,8 @@
             prepend-icon="mdi-content-save"
             size="large"
             :loading="loading"
-            :disabled="loading"
-            @click="$emit('save')"
+            :disabled="loading || !hasChanges"
+            @click="handleSave"
           >
             保存名单
           </v-btn>
@@ -193,7 +205,7 @@
             prepend-icon="mdi-refresh"
             size="large"
             :loading="loading"
-            :disabled="loading"
+            :disabled="loading || !hasChanges"
             @click="$emit('reload')"
           >
             重载名单
@@ -219,19 +231,60 @@ export default {
     },
     loading: Boolean,
     error: String,
-    isMobile: Boolean
+    isMobile: Boolean,
+    originalList: {
+      type: Array,
+      default: () => []
+    }
   },
 
   data() {
     return {
       newStudent: '',
       editingIndex: -1,
-      editingName: ''
+      editingName: '',
+      internalOriginalList: [] // 添加内部状态
+    }
+  },
+
+  created() {
+    // 初始化内部状态
+    this.internalOriginalList = [...this.originalList];
+  },
+
+  watch: {
+    originalList: {
+      handler(newList) {
+        this.internalOriginalList = [...newList];
+      },
+      immediate: true
     }
   },
 
   emits: ['update:modelValue', 'save', 'reload'],
 
+  computed: {
+    text: {
+      get() {
+        return this.modelValue.text;
+      },
+      set(value) {
+        this.handleTextInput(value);
+      }
+    },
+    hasChanges() {
+      const currentList = this.modelValue.list;
+      const originalList = this.internalOriginalList;
+
+      if (currentList.length !== originalList.length) {
+        return true;
+      }
+
+      // 使用 JSON 字符串比较来优化性能
+      return JSON.stringify(currentList) !== JSON.stringify(originalList);
+    }
+  },
+
   methods: {
     toggleAdvanced() {
       const advanced = !this.modelValue.advanced;
@@ -321,6 +374,19 @@ export default {
       }
       this.editingIndex = -1;
       this.editingName = '';
+    },
+
+    handleClick(index, student) {
+      // 如果是移动端，点击即开始编辑
+      if (this.isMobile) {
+        this.startEdit(index, student);
+      }
+    },
+
+    async handleSave() {
+      await this.$emit('save');
+      // 保存成功后更新内部状态
+      this.internalOriginalList = [...this.modelValue.list];
     }
   }
 }
@@ -336,6 +402,17 @@ export default {
   transition: opacity 0.2s ease;
 }
 
+.unsaved-changes {
+  animation: subtle-pulse 2s infinite;
+  border: 2px solid rgb(var(--v-theme-warning));
+}
+
+@keyframes subtle-pulse {
+  0% { border-color: rgba(var(--v-theme-warning), 1); }
+  50% { border-color: rgba(var(--v-theme-warning), 0.5); }
+  100% { border-color: rgba(var(--v-theme-warning), 1); }
+}
+
 @media (max-width: 600px) {
   .action-buttons {
     opacity: 1;
diff --git a/src/utils/dataProvider.js b/src/utils/dataProvider.js
index 85c48a3..1535d07 100644
--- a/src/utils/dataProvider.js
+++ b/src/utils/dataProvider.js
@@ -40,7 +40,7 @@ const providers = {
         return formatResponse(JSON.parse(rawData));
       } catch (error) {
 
-        return formatError('读取本地数据失败');
+        return formatError('读取本地数据失败：'+error);
       }
     },
 
@@ -57,7 +57,7 @@ const providers = {
         localStorage.setItem(storageKey, JSON.stringify(data));
         return formatResponse(null, '保存成功');
       } catch (error) {
-        return formatError('保存本地数据失败');
+        return formatError('保存本地数据失败:'+error);
       }
     },
 
@@ -80,7 +80,7 @@ const providers = {
 
         return formatResponse(JSON.parse(rawData));
       } catch (error) {
-        return formatError('读取本地配置失败');
+        return formatError('读取本地配置失败:'+error);
       }
     },
 
@@ -95,7 +95,7 @@ const providers = {
         localStorage.setItem(storageKey, JSON.stringify(config));
         return formatResponse(null, '保存成功');
       } catch (error) {
-        return formatError('保存本地配置失败');
+        return formatError('保存本地配置失败:'+error);
       }
     }
   },
@@ -145,7 +145,7 @@ const providers = {
 
     async saveConfig(key, config) {
       try {
-        const res = await axios.post(`${key}/config`, config);
+        const res = await axios.put(`${key}/config`, config);
         if (res.data?.status === false) {
           return formatError(res.data.msg || '保存失败', 'SAVE_ERROR');
         }