From 10b7f3784f144059f9ede454a13959fceee1f4c7 Mon Sep 17 00:00:00 2001
From: SunWuyuan <sun@wuyuan.dev>
Date: Sat, 8 Mar 2025 21:51:00 +0800
Subject: [PATCH 1/2] 1

---
 src/components/MessageLog.vue               |  268 +++++
 src/components/SettingsCard.vue             |   54 +
 src/components/settings/AboutCard.vue       |   72 ++
 src/components/settings/StudentListCard.vue |  344 ++++++
 src/main.js                                 |    4 +
 src/pages/index.vue                         | 1177 ++++++++-----------
 src/pages/settings.vue                      | 1123 ++++++++----------
 src/styles/index.scss                       |  176 +++
 src/styles/settings.scss                    |   71 ++
 src/utils/dataProvider.js                   |  177 +++
 src/utils/debounce.js                       |   27 +
 src/utils/message.js                        |  153 +++
 src/utils/settings.js                       |   94 +-
 13 files changed, 2451 insertions(+), 1289 deletions(-)
 create mode 100644 src/components/MessageLog.vue
 create mode 100644 src/components/SettingsCard.vue
 create mode 100644 src/components/settings/AboutCard.vue
 create mode 100644 src/components/settings/StudentListCard.vue
 create mode 100644 src/styles/index.scss
 create mode 100644 src/utils/dataProvider.js
 create mode 100644 src/utils/debounce.js
 create mode 100644 src/utils/message.js

diff --git a/src/components/MessageLog.vue b/src/components/MessageLog.vue
new file mode 100644
index 0000000..f6ac0de
--- /dev/null
+++ b/src/components/MessageLog.vue
@@ -0,0 +1,268 @@
+<template>
+  <!-- 侧边栏 -->
+  <v-navigation-drawer
+    v-model="drawer"
+    location="right"
+    temporary
+    width="400"
+  >
+    <v-toolbar color="primary">
+      <v-toolbar-title class="text-white">
+        消息记录
+        <v-chip
+          v-if="unreadCount"
+          color="error"
+          size="small"
+          class="ml-2"
+        >
+          {{ unreadCount }}
+        </v-chip>
+      </v-toolbar-title>
+      <v-spacer />
+      <v-btn
+        icon="mdi-delete"
+        variant="text"
+        color="white"
+        @click="clearMessages"
+      />
+    </v-toolbar>
+
+    <v-list class="message-list">
+      <template v-for="(msg, index) in visibleMessages" :key="msg.id">
+        <v-list-item
+          :class="{ 'unread': !msg.read }"
+          class="message-item mb-2"
+          @click="markAsRead(msg.id)"
+        >
+          <template #prepend>
+            <v-icon
+              :icon="getIcon(msg.type)"
+              :color="getColor(msg.type)"
+              size="small"
+            />
+          </template>
+
+          <v-list-item-title>{{ msg.title }}</v-list-item-title>
+          <v-list-item-subtitle v-if="msg.content">
+            {{ msg.content }}
+          </v-list-item-subtitle>
+          <v-list-item-subtitle class="text-caption">
+            {{ formatTime(msg.timestamp) }}
+          </v-list-item-subtitle>
+
+          <template #append>
+            <v-btn
+              icon="mdi-delete"
+              variant="text"
+              size="small"
+              @click.stop="deleteMessage(msg.id)"
+            />
+          </template>
+        </v-list-item>
+        <v-divider v-if="index < visibleMessages.length - 1" />
+      </template>
+
+      <v-btn
+        v-if="hasMoreMessages"
+        block
+        variant="text"
+        @click="loadMoreMessages"
+      >
+        加载更多
+      </v-btn>
+    </v-list>
+  </v-navigation-drawer>
+
+  <!-- 消息提示组 -->
+  <div class="message-container">
+    <TransitionGroup name="message">
+      <v-alert
+        v-for="msg in activeMessages"
+        :key="msg.id"
+        :type="msg.type"
+        variant="tonal"
+        closable
+        class="message-alert mb-2"
+        @click:close="removeActiveMessage(msg.id)"
+      >
+        <div class="d-flex align-center">
+          <span class="font-weight-medium">{{ msg.title }}</span>
+          <v-spacer />
+          <span class="text-caption">{{ formatTime(msg.timestamp) }}</span>
+        </div>
+        <div
+          v-if="msg.content"
+          class="message-content mt-1"
+        >
+          {{ msg.content }}
+        </div>
+      </v-alert>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script>
+import messageService from '@/utils/message';
+import { getSetting } from '@/utils/settings';
+import { debounce } from '@/utils/debounce';
+
+export default {
+  name: 'MessageLog',
+  data: () => ({
+    drawer: false,
+    messages: [],
+    activeMessages: [],
+    unreadCount: 0,
+    maxActiveMessages: getSetting('message.maxActiveMessages'),
+    messageTimeout: getSetting('message.timeout'),
+    showSidebar: getSetting('message.showSidebar'),
+    saveHistory: getSetting('message.saveHistory'),
+    pageSize: 20,
+    currentPage: 1,
+  }),
+
+  computed: {
+    visibleMessages() {
+      return this.messages.slice(0, this.currentPage * this.pageSize);
+    },
+    hasMoreMessages() {
+      return this.visibleMessages.length < this.messages.length;
+    }
+  },
+
+  created() {
+    this.debouncedUpdateMessages = debounce(this.updateMessages, 300);
+  },
+
+  mounted() {
+    messageService.initialize();
+    messageService.onSnackbar(this.showMessage);
+    messageService.onLog(this.debouncedUpdateMessages);
+  },
+
+  methods: {
+    loadMoreMessages() {
+      this.currentPage++;
+    },
+
+    showMessage(message) {
+      if (!this.showSidebar) return;
+
+      this.activeMessages.unshift(message);
+      if (this.activeMessages.length > this.maxActiveMessages) {
+        this.activeMessages.pop();
+      }
+
+      setTimeout(() => {
+        this.removeActiveMessage(message.id);
+      }, this.messageTimeout);
+    },
+
+    removeActiveMessage(id) {
+      const index = this.activeMessages.findIndex(m => m.id === id);
+      if (index !== -1) {
+        this.activeMessages.splice(index, 1);
+      }
+    },
+
+    updateMessages(messages) {
+      if (this.saveHistory) {
+        this.messages = [...messages].reverse();
+        this.unreadCount = messageService.getUnreadCount();
+      }
+    },
+
+    markAsRead(id) {
+      messageService.markAsRead(id);
+    },
+
+    deleteMessage(id) {
+      messageService.deleteMessage(id);
+    },
+
+    clearMessages() {
+      messageService.clearMessages();
+      this.messages = [];
+      this.activeMessages = [];
+    },
+
+    getIcon(type) {
+      const icons = {
+        success: 'mdi-check-circle',
+        error: 'mdi-alert-circle',
+        warning: 'mdi-alert',
+        info: 'mdi-information'
+      };
+      return icons[type] || icons.info;
+    },
+
+    getColor(type) {
+      const colors = {
+        success: 'success',
+        error: 'error',
+        warning: 'warning',
+        info: 'primary'
+      };
+      return colors[type] || colors.info;
+    },
+
+    formatTime: (() => {
+      const cache = new Map();
+      return (timestamp) => {
+        if (cache.has(timestamp)) {
+          return cache.get(timestamp);
+        }
+        const formatted = new Date(timestamp).toLocaleTimeString();
+        cache.set(timestamp, formatted);
+        return formatted;
+      };
+    })()
+  }
+};
+</script>
+
+<style scoped>
+.message-container {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 1000;
+  max-width: 400px;
+}
+
+.message-alert {
+  width: 100%;
+}
+
+.message-list {
+  height: calc(100vh - 64px);
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  will-change: transform;
+}
+
+.message-item {
+  border-left: 3px solid transparent;
+  contain: content;
+}
+
+.message-item.unread {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+}
+
+/* 消息动画 */
+.message-enter-active,
+.message-leave-active {
+  transition: all 0.3s ease;
+}
+
+.message-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.message-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>
diff --git a/src/components/SettingsCard.vue b/src/components/SettingsCard.vue
new file mode 100644
index 0000000..12ec440
--- /dev/null
+++ b/src/components/SettingsCard.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-card elevation="2" class="settings-card rounded-lg">
+    <v-card-item>
+      <template #prepend>
+        <v-icon
+          :icon="icon"
+          size="large"
+          class="mr-2"
+        />
+      </template>
+      <v-card-title class="text-h6">{{ title }}</v-card-title>
+    </v-card-item>
+
+    <v-card-text>
+      <v-progress-linear
+        v-if="loading"
+        indeterminate
+        color="primary"
+        class="mb-4"
+      />
+      <slot />
+    </v-card-text>
+
+    <v-card-actions v-if="$slots.actions" class="pa-4">
+      <slot name="actions" />
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'SettingsCard',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.settings-card {
+  height: 100%;
+}
+</style>
diff --git a/src/components/settings/AboutCard.vue b/src/components/settings/AboutCard.vue
new file mode 100644
index 0000000..6d3984c
--- /dev/null
+++ b/src/components/settings/AboutCard.vue
@@ -0,0 +1,72 @@
+<template>
+  <v-card border>
+    <v-card-item>
+      <template #prepend>
+        <v-icon icon="mdi-information" size="large" class="mr-2" />
+      </template>
+      <v-card-title class="text-h6">关于</v-card-title>
+    </v-card-item>
+
+    <v-card-text>
+      <v-row justify="center" align="center">
+        <v-col cols="12" md="8" class="text-center">
+          <v-avatar size="120" class="mb-4">
+            <v-img
+              src="https://avatars.githubusercontent.com/u/88357633?v=4"
+              alt="作者头像"
+            />
+          </v-avatar>
+
+          <h2 class="text-h5 mb-2">HomeworkPage</h2>
+          <p class="text-body-1 mb-4">
+            由 <a
+              href="https://github.com/sunwuyuan"
+              target="_blank"
+              class="text-decoration-none font-weight-medium"
+            >Sunwuyuan</a> 开发
+          </p>
+
+          <div class="d-flex justify-center gap-2 flex-wrap">
+            <v-btn
+              color="primary"
+              variant="outlined"
+              href="https://github.com/SunWuyuan/homeworkpage-frontend"
+              target="_blank"
+              prepend-icon="mdi-github"
+            >
+              前端 GitHub
+            </v-btn>
+            <v-btn
+              color="primary"
+              variant="outlined"
+              href="https://github.com/SunWuyuan/homeworkpage-backend"
+              target="_blank"
+              prepend-icon="mdi-github"
+            >
+              后端 GitHub
+            </v-btn>
+            <v-btn
+              color="primary"
+              variant="outlined"
+              href="https://github.com/SunWuyuan/homeworkpage-backend/issues"
+              target="_blank"
+              prepend-icon="mdi-bug"
+            >
+              报告问题
+            </v-btn>
+          </div>
+
+          <p class="mt-4 text-caption text-medium-emphasis">
+            GPL License © 2024
+          </p>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'AboutCard'
+}
+</script>
diff --git a/src/components/settings/StudentListCard.vue b/src/components/settings/StudentListCard.vue
new file mode 100644
index 0000000..b680810
--- /dev/null
+++ b/src/components/settings/StudentListCard.vue
@@ -0,0 +1,344 @@
+<template>
+  <v-card border>
+    <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-btn
+          :color="modelValue.advanced ? 'primary' : undefined"
+          variant="text"
+          prepend-icon="mdi-code-braces"
+          @click="toggleAdvanced"
+        >
+          {{ modelValue.advanced ? '返回基础编辑' : '高级编辑' }}
+        </v-btn>
+      </template>
+    </v-card-item>
+
+    <v-card-text>
+      <v-progress-linear
+        v-if="loading"
+        indeterminate
+        color="primary"
+        class="mb-4"
+      />
+
+      <v-alert
+        v-if="error"
+        type="error"
+        variant="tonal"
+        closable
+        class="mb-4"
+      >
+        {{ error }}
+      </v-alert>
+
+      <v-expand-transition>
+        <!-- 普通编辑模式 -->
+        <div v-if="!modelValue.advanced">
+          <v-row class="mb-6">
+            <v-col cols="12" sm="6" md="4">
+              <v-text-field
+                v-model="newStudent"
+                label="添加学生"
+                placeholder="输入学生姓名后回车添加"
+                prepend-inner-icon="mdi-account-plus"
+                variant="outlined"
+                hide-details
+                class="mb-4"
+                @keyup.enter="addStudent"
+              >
+                <template #append>
+                  <v-btn
+                    icon="mdi-plus"
+                    variant="text"
+                    color="primary"
+                    :disabled="!newStudent.trim()"
+                    @click="addStudent"
+                  />
+                </template>
+              </v-text-field>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col
+              v-for="(student, index) in modelValue.list"
+              :key="index"
+              cols="12"
+              sm="6"
+              md="4"
+              lg="3"
+            >
+              <v-hover v-slot="{ isHovering, props }">
+                <v-card
+                  v-bind="props"
+                  :elevation="isMobile ? 1 : (isHovering ? 4 : 1)"
+                  class="student-card"
+                  border
+                >
+                  <v-card-text class="d-flex align-center pa-3">
+                    <v-menu location="bottom" :open-on-hover="!isMobile">
+                      <template #activator="{ props: menuProps }">
+                        <v-btn
+                          variant="tonal"
+                          size="small"
+                          class="mr-3 font-weight-medium"
+                          v-bind="menuProps"
+                        >
+                          {{ index + 1 }}
+                        </v-btn>
+                      </template>
+
+                      <v-list density="compact" nav>
+                        <v-list-item
+                          prepend-icon="mdi-arrow-up-bold"
+                          :disabled="index === 0"
+                          @click="moveStudent(index, 'top')"
+                        >
+                          置顶
+                        </v-list-item>
+                        <v-divider />
+                        <v-list-item
+                          prepend-icon="mdi-arrow-up"
+                          :disabled="index === 0"
+                          @click="moveStudent(index, 'up')"
+                        >
+                          上移
+                        </v-list-item>
+                        <v-list-item
+                          prepend-icon="mdi-arrow-down"
+                          :disabled="index === modelValue.list.length - 1"
+                          @click="moveStudent(index, 'down')"
+                        >
+                          下移
+                        </v-list-item>
+                      </v-list>
+                    </v-menu>
+
+                    <v-text-field
+                      v-if="editingIndex === index"
+                      v-model="editingName"
+                      density="compact"
+                      variant="underlined"
+                      hide-details
+                      class="flex-grow-1"
+                      autofocus
+                      @keyup.enter="saveEdit"
+                      @blur="saveEdit"
+                    />
+                    <span
+                      v-else
+                      class="text-body-1 flex-grow-1"
+                      @click="handleClick(index, student)"
+                    >
+                      {{ student }}
+                    </span>
+
+                    <div class="d-flex gap-1 action-buttons" :class="{ 'opacity-100': isHovering || isMobile }">
+                      <v-btn
+                        icon="mdi-pencil"
+                        variant="text"
+                        color="primary"
+                        size="small"
+                        @click="startEdit(index, student)"
+                      />
+                      <v-btn
+                        icon="mdi-delete"
+                        variant="text"
+                        color="error"
+                        size="small"
+                        @click="removeStudent(index)"
+                      />
+                    </div>
+                  </v-card-text>
+                </v-card>
+              </v-hover>
+            </v-col>
+          </v-row>
+        </div>
+
+        <!-- 高级编辑模式 -->
+        <div v-else class="pt-2">
+          <v-textarea
+            v-model="modelValue.text"
+            label="批量编辑学生列表"
+            placeholder="每行输入一个学生姓名"
+            hint="使用文本编辑模式批量编辑学生名单，保存时会自动去除空行"
+            persistent-hint
+            variant="outlined"
+            rows="10"
+            @input="handleTextInput"
+          />
+        </div>
+      </v-expand-transition>
+
+      <v-row class="mt-6">
+        <v-col cols="12" class="d-flex gap-2">
+          <v-btn
+            color="primary"
+            prepend-icon="mdi-content-save"
+            size="large"
+            :loading="loading"
+            :disabled="loading"
+            @click="$emit('save')"
+          >
+            保存名单
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="outlined"
+            prepend-icon="mdi-refresh"
+            size="large"
+            :loading="loading"
+            :disabled="loading"
+            @click="$emit('reload')"
+          >
+            重载名单
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'StudentListCard',
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+      default: () => ({
+        list: [],
+        text: '',
+        advanced: false
+      })
+    },
+    loading: Boolean,
+    error: String,
+    isMobile: Boolean
+  },
+
+  data() {
+    return {
+      newStudent: '',
+      editingIndex: -1,
+      editingName: ''
+    }
+  },
+
+  emits: ['update:modelValue', 'save', 'reload'],
+
+  methods: {
+    toggleAdvanced() {
+      const advanced = !this.modelValue.advanced;
+      const text = advanced ? this.modelValue.list.join('\n') : this.modelValue.text;
+
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        advanced,
+        text
+      });
+    },
+
+    handleTextInput(value) {
+      const list = value
+        .split('\n')
+        .map(s => s.trim())
+        .filter(s => s);
+
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        text: value,
+        list
+      });
+    },
+
+    addStudent() {
+      const name = this.newStudent.trim();
+      if (name && !this.modelValue.list.includes(name)) {
+        const newList = [...this.modelValue.list, name];
+        this.$emit('update:modelValue', {
+          ...this.modelValue,
+          list: newList,
+          text: newList.join('\n')
+        });
+        this.newStudent = '';
+      }
+    },
+
+    removeStudent(index) {
+      const newList = this.modelValue.list.filter((_, i) => i !== index);
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        list: newList,
+        text: newList.join('\n')
+      });
+    },
+
+    moveStudent(index, direction) {
+      const newList = [...this.modelValue.list];
+      let targetIndex;
+
+      if (direction === 'top') {
+        targetIndex = 0;
+      } else if (direction === 'up') {
+        targetIndex = index - 1;
+      } else {
+        targetIndex = index + 1;
+      }
+
+      if (targetIndex >= 0 && targetIndex < newList.length) {
+        const [student] = newList.splice(index, 1);
+        newList.splice(targetIndex, 0, student);
+
+        this.$emit('update:modelValue', {
+          ...this.modelValue,
+          list: newList,
+          text: newList.join('\n')
+        });
+      }
+    },
+
+    startEdit(index, name) {
+      this.editingIndex = index;
+      this.editingName = name;
+    },
+
+    saveEdit() {
+      if (this.editingIndex !== -1 && this.editingName.trim()) {
+        const newList = [...this.modelValue.list];
+        newList[this.editingIndex] = this.editingName.trim();
+
+        this.$emit('update:modelValue', {
+          ...this.modelValue,
+          list: newList,
+          text: newList.join('\n')
+        });
+      }
+      this.editingIndex = -1;
+      this.editingName = '';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.student-card {
+  transition: all 0.2s ease;
+}
+
+.action-buttons {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+@media (max-width: 600px) {
+  .action-buttons {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index d31eee2..c369c30 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,8 +13,12 @@ import App from './App.vue'
 // Composables
 import { createApp } from 'vue'
 
+import messageService from './utils/message';
+
 const app = createApp(App)
 
 registerPlugins(app)
 
+app.use(messageService);
+
 app.mount('#app')
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 5a119ac..32ed20e 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -5,7 +5,7 @@
     </template>
 
     <v-app-bar-title>
-      {{ classNumber }}班 - {{ titleText }}
+      {{ state.classNumber }}班 - {{ titleText }}
     </v-app-bar-title>
 
     <v-spacer />
@@ -22,10 +22,10 @@
         @click="zoom('up')"
       />
       <v-menu
-        v-model="datePickerDialog"
+        v-model="state.datePickerDialog"
         :close-on-content-click="false"
       >
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
           <v-btn
             icon="mdi-calendar"
             variant="text"
@@ -34,7 +34,7 @@
         </template>
 
         <v-date-picker
-          v-model="selectedDate"
+          v-model="state.selectedDate"
           color="primary"
           @update:model-value="handleDateSelect"
         />
@@ -42,7 +42,7 @@
       <v-btn
         icon="mdi-refresh"
         variant="text"
-        :loading="downloadLoading"
+        :loading="loading.download"
         @click="downloadData"
       />
       <v-btn
@@ -50,6 +50,13 @@
         variant="text"
         @click="$router.push('/settings')"
       />
+      <v-btn
+        icon="mdi-bell"
+        variant="text"
+        :badge="unreadCount || undefined"
+        :badge-color="unreadCount ? 'error' : undefined"
+        @click="$refs.messageLog.drawer = true"
+      />
     </template>
   </v-app-bar>
   <div class="d-flex">
@@ -58,102 +65,140 @@
       class="main-window flex-grow-1"
       fluid
     >
-      <div v-if="showNoDataMessage && !isToday" class="no-data-message">
-        <v-card class="text-center pa-4" >
-          <v-card-title class="text-h6">别看未来的作业了</v-card-title>
+      <div
+        v-if="state.showNoDataMessage && !state.isToday"
+        class="no-data-message"
+      >
+        <v-card class="text-center pa-4">
+          <v-card-title class="text-h6">
+            别看未来的作业了
+          </v-card-title>
           <v-card-text>
-            <div class="text-body-1">{{ noDataMessage }}</div>
+            <div class="text-body-1">
+              {{ state.noDataMessage }}
+            </div>
           </v-card-text>
         </v-card>
       </div>
 
       <template v-else>
-        <div class="grid-masonry" ref="gridContainer">
+        <!-- 有内容的科目卡片 -->
+        <div
+          ref="gridContainer"
+          class="grid-masonry"
+        >
           <div
             v-for="item in sortedItems"
             :key="item.key"
             class="grid-item"
-            :class="{ 
-              'empty-card': !item.content,
-              [`grid-row-${item.rowSpan}`]: true
-            }"
-            :style="{ 
+            :style="{
               'grid-row-end': `span ${item.rowSpan}`,
               order: item.order,
-              cursor: uploadLoading || downloadLoading || isPastDate ? 'not-allowed' : 'pointer',
-              opacity: uploadLoading || downloadLoading ? '0.7' : '1'
             }"
-            @click="!uploadLoading && !downloadLoading && !isPastDate && openDialog(item.key)"
+            @click="!isEditingDisabled && openDialog(item.key)"
           >
-            <v-card border height="100%">
-              <v-card-title :class="{ 'text-subtitle-1': !item.content }">
-                {{ item.name }}
-              </v-card-title>
-              <v-card-text :style="item.content ? contentStyle : null">
-                <template v-if="item.content">
-                  <v-list>
-                    <v-list-item
-                      v-for="text in splitPoint(item.content)"
-                      :key="text"
-                    >
-                      {{ text }}
-                    </v-list-item>
-                  </v-list>
-                </template>
-                <template v-else>
-                  <div class="text-center pa-2">
-                    <v-icon size="small" color="grey">mdi-plus</v-icon>
-                    <div class="text-caption text-grey">点击添加作业</div>
-                  </div>
-                </template>
+            <v-card
+              border
+              height="100%"
+            >
+              <v-card-title>{{ item.name }}</v-card-title>
+              <v-card-text :style="state.contentStyle">
+                <v-list>
+                  <v-list-item
+                    v-for="text in splitPoint(item.content)"
+                    :key="text"
+                  >
+                    {{ text }}
+                  </v-list-item>
+                </v-list>
               </v-card-text>
             </v-card>
           </div>
         </div>
 
-        <!-- 空科目按钮组 -->
-        <v-btn-group v-if="emptySubjectDisplay === 'button'" class="empty-subjects-container">
-          <v-btn
-            v-for="subject in emptySubjects"
-            :key="subject.key"
-            variant="tonal"
-            color="primary"
-            @click="!uploadLoading && !downloadLoading && openDialog(subject.key)"
-            :disabled="uploadLoading || downloadLoading"
+        <!-- 单独显示空科目 -->
+        <div class="empty-subjects mt-4">
+          <template v-if="emptySubjectDisplay === 'button'">
+            <v-btn-group class="gap-2 flex-wrap">
+              <v-btn
+                v-for="subject in unusedSubjects"
+                :key="subject.key"
+                variant="tonal"
+                color="primary"
+                :disabled="isEditingDisabled"
+                @click="openDialog(subject.key)"
+              >
+                <v-icon start>
+                  mdi-plus
+                </v-icon>
+                {{ subject.name }}
+              </v-btn>
+            </v-btn-group>
+          </template>
+          <div
+            v-else
+            class="empty-subjects-grid"
           >
-            <v-icon start>mdi-plus</v-icon>
-            {{ subject.name }}
-          </v-btn>
-        </v-btn-group>
+            <v-card
+              v-for="subject in unusedSubjects"
+              :key="subject.key"
+              border
+              class="empty-subject-card"
+              :disabled="isEditingDisabled"
+              @click="openDialog(subject.key)"
+            >
+              <v-card-title class="text-subtitle-1">
+                {{ subject.name }}
+              </v-card-title>
+              <v-card-text class="text-center">
+                <v-icon
+                  size="small"
+                  color="grey"
+                >
+                  mdi-plus
+                </v-icon>
+                <div class="text-caption text-grey">
+                  点击添加作业
+                </div>
+              </v-card-text>
+            </v-card>
+          </div>
+        </div>
       </template>
     </v-container>
 
     <!-- 出勤统计区域 -->
     <v-col
-      v-if="studentList.length"
+      v-if="state.studentList && state.studentList.length"
       class="attendance-area"
       cols="1"
       @click="!isPastDate ? setAttendanceArea() : null"
     >
       <h1>出勤</h1>
-      <h2>应到: {{ studentList.length }}人</h2>
-      <h2>实到: {{ studentList.length - selectedSet.size }}人</h2>
-      <h2>请假: {{ selectedSet.size }}人</h2>
-      <h3 v-for="(i, index) in selectedSet" :key="'absent-' + index">
-        {{ `${index + 1}. ${studentList[i]}` }}
+      <h2>应到: {{ state.studentList.length }}人</h2>
+      <h2>实到: {{ state.studentList.length - state.selectedSet.size }}人</h2>
+      <h2>请假: {{ state.selectedSet.size }}人</h2>
+      <h3
+        v-for="(i, index) in state.selectedSet"
+        :key="'absent-' + index"
+      >
+        {{ `${index + 1}. ${state.studentList[i]}` }}
       </h3>
-      <h2>迟到: {{ lateSet.size }}人</h2>
-      <h3 v-for="(i, index) in lateSet" :key="'late-' + index">
-        {{ `${index + 1}. ${studentList[i]}` }}
+      <h2>迟到: {{ state.lateSet.size }}人</h2>
+      <h3
+        v-for="(i, index) in state.lateSet"
+        :key="'late-' + index"
+      >
+        {{ `${index + 1}. ${state.studentList[i]}` }}
       </h3>
     </v-col>
   </div>
   <v-container fluid>
     <v-btn
-      v-if="!synced"
+      v-if="!state.synced"
       color="error"
       size="large"
-      :loading="uploadLoading"
+      :loading="loading.upload"
       class="ml-2"
       @click="uploadData"
     >
@@ -169,19 +214,19 @@
     </v-btn>
   </v-container>
   <v-dialog
-    v-model="dialogVisible"
+    v-model="state.dialogVisible"
     width="500"
     @click:outside="handleClose"
   >
     <v-card border>
-      <v-card-title>{{ dialogTitle }}</v-card-title>
+      <v-card-title>{{ state.dialogTitle }}</v-card-title>
       <v-card-subtitle>
         {{ autoSave ? "喵？喵呜！" : "写完后点击上传谢谢喵" }}
       </v-card-subtitle>
       <v-card-text>
         <v-textarea
           ref="inputRef"
-          v-model="textarea"
+          v-model="state.textarea"
           auto-grow
           placeholder="使用换行表示分条"
           rows="5"
@@ -191,7 +236,7 @@
   </v-dialog>
 
   <v-dialog
-    v-model="attendDialogVisible"
+    v-model="state.attendDialogVisible"
     width="800"
   >
     <v-card>
@@ -203,7 +248,7 @@
         <v-container fluid>
           <v-row>
             <v-col
-              v-for="(name, i) in studentList"
+              v-for="(name, i) in state.studentList"
               :key="i"
               cols="12"
               sm="6"
@@ -211,11 +256,13 @@
             >
               <v-card
                 border
-                :class="{ selected: selectedSet.has(i) || lateSet.has(i) }"
+                :class="{
+                  selected: state.selectedSet.has(i) || state.lateSet.has(i),
+                }"
                 :color="
-                  selectedSet.has(i)
+                  state.selectedSet.has(i)
                     ? 'primary'
-                    : lateSet.has(i)
+                    : state.lateSet.has(i)
                       ? 'orange'
                       : ''
                 "
@@ -233,14 +280,14 @@
   </v-dialog>
 
   <v-snackbar
-    v-model="snackbar"
+    v-model="state.snackbar"
     :timeout="2000"
   >
-    {{ snackbarText }}
+    {{ state.snackbarText }}
   </v-snackbar>
 
   <v-dialog
-    v-model="attendanceDialog"
+    v-model="state.attendanceDialog"
     max-width="600"
   >
     <v-card>
@@ -249,20 +296,9 @@
       </v-card-title>
 
       <v-card-text>
-        <v-select
-          v-model="selectedTimeSlot"
-          :items="timeSlots"
-          item-title="name"
-          item-value="id"
-          label="选择时间段"
-          class="mb-4"
-        />
-
         <v-expansion-panels>
           <v-expansion-panel>
-            <v-expansion-panel-title>
-              批量操作
-            </v-expansion-panel-title>
+            <v-expansion-panel-title> 批量操作 </v-expansion-panel-title>
             <v-expansion-panel-text>
               <v-btn-group>
                 <v-btn
@@ -294,11 +330,11 @@
         <v-list class="mt-4">
           <v-list-subheader>学生列表</v-list-subheader>
           <v-list-item
-            v-for="(student, index) in currentTimeSlotStudents"
+            v-for="(student, index) in state.studentList"
             :key="index"
             :title="student"
           >
-            <template v-slot:append>
+            <template #append>
               <v-btn-group>
                 <v-btn
                   :color="isPresent(index) ? 'success' : ''"
@@ -335,196 +371,88 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
+
+  <message-log ref="messageLog" />
 </template>
 
-<style scoped>
-.grid-masonry {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-  padding: 8px;
-  grid-auto-flow: dense;
-}
-
-.grid-item {
-  width: 100%;
-  transition: all 0.2s ease;
-}
-
-.empty-card {
-  transform: scale(0.9);
-  opacity: 0.8;
-  grid-row-end: span 1 !important;
-}
-
-.empty-card:hover {
-  transform: scale(0.95);
-  opacity: 1;
-}
-
-.empty-subjects-container {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-@media (max-width: 1199px) {
-  .grid-masonry {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 799px) {
-  .grid-masonry {
-    grid-template-columns: 1fr;
-  }
-  
-  .empty-card {
-    transform: scale(0.95);
-  }
-}
-
-/* 确保容器高度不超过视口 */
-.main-window {
-  max-height: calc(100vh - 180px);
-  overflow-y: auto;
-}
-
-/* 优化滚动条样式 */
-.main-window::-webkit-scrollbar {
-  width: 8px;
-}
-
-.main-window::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.main-window::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-}
-
-.main-window::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.no-data-message {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-  margin: 20px 0;
-}
-
-.attendance-drawer {
-  border-left: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.attendance-drawer :deep(.v-navigation-drawer__content) {
-  overflow-y: auto;
-}
-
-/* 优化滚动条样式 */
-.attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar) {
-  width: 8px;
-}
-
-.attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-track) {
-  background: transparent;
-}
-
-.attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-thumb) {
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-}
-
-.attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover) {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-/* 响应式调整 */
-@media (max-width: 960px) {
-  .attendance-drawer {
-    display: none;
-  }
-}
-
-.text-success {
-  color: rgb(var(--v-theme-success));
-}
-
-.text-error {
-  color: rgb(var(--v-theme-error));
-}
-
-.text-warning {
-  color: rgb(var(--v-theme-warning));
-}
-
-.attendance-card {
-  display: flex;
-  flex-direction: column;
-}
-
-.attendance-numbers {
-  padding: 20px 0;
-}
-
-.total-number {
-  border-bottom: 1px solid rgba(0,0,0,0.12);
-  padding-bottom: 20px;
-}
-
-.status-number {
-  flex: 1;
-}
-
-.text-h2, .text-h3 {
-  line-height: 1.2;
-}
-</style>
-
 <script>
-import axios from "axios";
+import MessageLog from '@/components/MessageLog.vue';
+import dataProvider from "@/utils/dataProvider";
+import { getSetting, watchSettings, setSetting } from "@/utils/settings";
 import { useDisplay } from "vuetify";
-import { getSetting, watchSettings } from '@/utils/settings';
+import "../styles/index.scss";
+import { debounce, throttle } from '@/utils/debounce';
 
 export default {
   name: "HomeworkBoard",
+  components: {
+    MessageLog
+  },
   data() {
     return {
-      backurl: '',
-      classNumber: '',
-      currentEditSubject: null,
-      studentList: [],
-      selectedSet: new Set(), // Absent students
-      lateSet: new Set(), // Late students
-      dialogVisible: false,
-      dialogTitle: "",
-      textarea: "",
-      dateString: "",
-      synced: false,
-      attendDialogVisible: false,
-      contentStyle: { "font-size": `${getSetting('font.size')}px` },
-      uploadLoading: false,
-      downloadLoading: false,
-      homeworkData: {},
-      snackbar: false,
-      snackbarText: "",
-      fontSize: getSetting('font.size'),
-      datePickerDialog: false,
-      selectedDate: null,
-      refreshInterval: null,
-      subjectOrder: [
-        "语文", "数学", "英语", "物理", "化学", 
-        "生物", "政治", "历史", "地理", "其他"
-      ],
-      showNoDataMessage: false,
-      noDataMessage: '',
-      isToday: false,
-      attendanceDialog: false,
-      selectedTimeSlot: null,
-      timeSlots: [],
-      currentTimeSlotStudents: [],
+      dataKey: "",
+      provider: "",
+      state: {
+        classNumber: "",
+        studentList: [],
+        selectedSet: new Set(),
+        lateSet: new Set(),
+        dialogVisible: false,
+        dialogTitle: "",
+        textarea: "",
+        dateString: "", // 从 state 内统一管理日期
+        synced: false,
+        attendDialogVisible: false,
+        contentStyle: { "font-size": `${getSetting("font.size")}px` },
+        uploadLoading: false,
+        downloadLoading: false,
+        homeworkData: {},
+        snackbar: false,
+        snackbarText: "",
+        fontSize: getSetting("font.size"),
+        datePickerDialog: false,
+        selectedDate: null,
+        refreshInterval: null,
+        subjectOrder: [
+          "语文",
+          "数学",
+          "英语",
+          "物理",
+          "化学",
+          "生物",
+          "政治",
+          "历史",
+          "地理",
+          "其他",
+        ],
+        showNoDataMessage: false,
+        noDataMessage: "",
+        isToday: false,
+        attendanceDialog: false,
+        availableSubjects: [
+          { key: "语文", name: "语文" },
+          { key: "数学", name: "数学" },
+          { key: "英语", name: "英语" },
+          { key: "物理", name: "物理" },
+          { key: "化学", name: "化学" },
+          { key: "生物", name: "生物" },
+          { key: "政治", name: "政治" },
+          { key: "历史", name: "历史" },
+          { key: "地理", name: "地理" },
+          { key: "其他", name: "其他" },
+        ],
+      },
+      loading: {
+        download: false,
+        upload: false,
+        students: false,
+      },
+      debouncedUpload: null,
+      throttledReflow: null,
+      _sortedItemsCache: {
+        key: '',
+        value: []
+      },
     };
   },
 
@@ -535,85 +463,113 @@ export default {
     titleText() {
       const now = new Date();
       const year = now.getFullYear();
-      const month = String(now.getMonth() + 1).padStart(2, '0');
-      const day = String(now.getDate()).padStart(2, '0');
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
       const today = `${year}-${month}-${day}`;
 
       const yesterday = new Date(now);
       yesterday.setDate(yesterday.getDate() - 1);
-      const yesterdayFormatted = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, '0')}-${String(yesterday.getDate()).padStart(2, '0')}`;
-      
-      if (this.dateString === today) {
-        return '今天的作业';
-      } else if (this.dateString === yesterdayFormatted) {
-        return '昨天的作业';
+      const yesterdayFormatted = `${yesterday.getFullYear()}-${String(
+        yesterday.getMonth() + 1
+      ).padStart(2, "0")}-${String(yesterday.getDate()).padStart(2, "0")}`;
+
+      if (this.state.dateString === today) {
+        return "今天的作业";
+      } else if (this.state.dateString === yesterdayFormatted) {
+        return "昨天的作业";
       } else {
-        return `${this.dateString}的作业`;
+        return `${this.state.dateString}的作业`;
       }
     },
     sortedItems() {
-      const items = Object.entries(this.homeworkData)
+      const key = `${JSON.stringify(this.state.homeworkData)}_${this.state.subjectOrder.join()}_${this.dynamicSort}`;
+      if (this._sortedItemsCache.key === key) {
+        return this._sortedItemsCache.value;
+      }
+
+      const items = Object.entries(this.state.homeworkData)
+        .filter(([_, value]) => value.content?.trim())
         .map(([key, value]) => ({
           key,
           name: value.name,
           content: value.content,
-          order: this.subjectOrder.indexOf(key),
-          rowSpan: value.content ? 
-            Math.ceil((value.content.split('\n').filter(line => line.trim()).length + 1) * 0.8) : 1
-        }))
-        .filter(item => {
-          if (this.emptySubjectDisplay === 'button') {
-            return item.content;
-          }
-          return true;
-        });
+          order: this.state.subjectOrder.indexOf(key),
+          rowSpan: Math.ceil((value.content.split('\n').filter(line => line.trim()).length + 1) * 0.8)
+        }));
 
-      // Sort items: prioritize non-empty content first
-      return items.sort((a, b) => {
-        // If one item has content and the other does not, prioritize the one with content
-        if (a.content && !b.content) return -1;
-        if (!a.content && b.content) return 1;
+      const result = this.dynamicSort
+        ? this.optimizeGridLayout(items)
+        : items.sort((a, b) => a.order - b.order);
 
-        // If both have content or both are empty, sort by order
-        return a.order - b.order;
-      });
+      // 使用方法更新缓存
+      this.updateSortedItemsCache(key, result);
+
+      return result;
     },
-    attendanceVisible() {
-      return this.studentList.length > 0;
+    unusedSubjects() {
+      const usedKeys = Object.keys(this.state.homeworkData);
+      return this.state.availableSubjects.filter(
+        (subject) => !usedKeys.includes(subject.key)
+      );
     },
     emptySubjects() {
-      if (this.emptySubjectDisplay !== 'button') return [];
-      
-      return Object.entries(this.homeworkData)
-        .map(([key, value]) => ({
-          key,
-          name: value.name,
-          content: value.content,
-          order: this.subjectOrder.indexOf(key)
-        }))
-        .filter(subject => !subject.content)
-        .sort((a, b) => a.order - b.order);
+      if (this.emptySubjectDisplay !== "button") return [];
+      return this.unusedSubjects;
     },
     autoSave() {
-      return getSetting('edit.autoSave');
+      return getSetting("edit.autoSave");
     },
     refreshBeforeEdit() {
-      return getSetting('edit.refreshBeforeEdit');
+      return getSetting("edit.refreshBeforeEdit");
     },
     emptySubjectDisplay() {
-      return getSetting('display.emptySubjectDisplay');
+      return getSetting("display.emptySubjectDisplay");
     },
     dynamicSort() {
-      return getSetting('display.dynamicSort');
+      return getSetting("display.dynamicSort");
     },
     isPastDate() {
-      const selectedDate = new Date(this.dateString);
+      const selected = new Date(this.state.dateString);
       const today = new Date();
-      // 将时间部分归零以进行比较
-      selectedDate.setHours(0, 0, 0, 0);
+      selected.setHours(0, 0, 0, 0);
       today.setHours(0, 0, 0, 0);
-      return selectedDate < today; // 如果选择的日期在今天之前，则返回 true
+      return selected < today;
     },
+    isEditingDisabled() {
+      return this.state.uploadLoading || this.state.downloadLoading || this.isPastDate;
+    },
+    unreadCount() {
+      return this.$refs.messageLog?.unreadCount || 0;
+    }
+  },
+
+  watch: {
+    homeworkData: {
+      handler() {
+        this.$nextTick(() => {
+          if (this.$refs.waterfall) {
+            this.$refs.waterfall.reflow();
+          }
+        });
+      },
+      deep: true,
+    },
+    "$vuetify.display.width": {
+      handler() {
+        this.throttledReflow();
+      },
+    },
+  },
+
+  created() {
+    // 创建防抖的上传函数
+    this.debouncedUpload = debounce(this.uploadData, 2000);
+    // 创建节流的重排函数
+    this.throttledReflow = throttle(() => {
+      if (this.$refs.gridContainer) {
+        this.optimizeGridLayout(this.sortedItems);
+      }
+    }, 200);
   },
 
   async mounted() {
@@ -621,8 +577,6 @@ export default {
       this.updateBackendUrl();
       await this.initializeData();
       this.setupAutoRefresh();
-      
-      // 监听设置变化
       this.unwatchSettings = watchSettings(() => {
         this.updateSettings();
       });
@@ -636,218 +590,173 @@ export default {
     if (this.unwatchSettings) {
       this.unwatchSettings();
     }
-    if (this.refreshInterval) {
-      clearInterval(this.refreshInterval);
+    if (this.state.refreshInterval) {
+      // 注意刷新间隔存放在 state 内
+      clearInterval(this.state.refreshInterval);
     }
   },
 
   methods: {
     async initializeData() {
+      this.provider = getSetting("server.provider");
+      const domain = getSetting("server.domain");
+      const classNum = getSetting("server.classNumber");
+
+      this.dataKey = this.provider === 'server' ? `${domain}/${classNum}` : classNum;
+      this.state.classNumber = classNum;
+
+      const date = new URLSearchParams(window.location.search).get("date")
+        || new Date().toISOString().split("T")[0];
+      this.state.dateString = date;
+      this.state.isToday = date === new Date().toISOString().split("T")[0];
+
+      await Promise.all([
+        this.downloadData(),
+        this.loadConfig()
+      ]);
+    },
+
+    async downloadData() {
+      if (this.loading.download) return;
+
       try {
-        // 获取配置信息（包含学生列表和时间段）
-        await this.loadConfig();
-        
-        // 获取URL中的日期参数
-        const urlParams = new URLSearchParams(window.location.search);
-        const dateParam = urlParams.get('date');
-        
-        if (dateParam) {
-          this.dateString = dateParam;
+        this.loading.download = true;
+        const response = await dataProvider.loadData(
+          this.provider,
+          this.dataKey,
+          this.state.dateString
+        );
+
+        if (!response.success) {
+          // 处理错误情况
+          if (response.error.code === 'NOT_FOUND') {
+            this.state.showNoDataMessage = true;
+            this.state.noDataMessage = response.error.message;
+            this.state.homeworkData = {};
+            this.state.selectedSet = new Set();
+            this.state.lateSet = new Set();
+          } else {
+            throw new Error(response.error.message);
+          }
         } else {
-          const now = new Date();
-          this.dateString = now.toISOString().split('T')[0];
+          // 处理成功情况
+          const { homework = {}, attendance = {} } = response.data;
+          this.state.homeworkData = homework;
+          this.state.selectedSet = new Set(attendance.absent || []);
+          this.state.lateSet = new Set(attendance.late || []);
+          this.state.synced = true;
+          this.state.showNoDataMessage = false;
+          this.showMessage('下载成功', '数据已更新');
+        }
+      } catch (error) {
+        this.showError('下载失败', error.message);
+      } finally {
+        this.loading.download = false;
+      }
+    },
+
+    async uploadData() {
+      if (this.loading.upload) return;
+
+      try {
+        this.loading.upload = true;
+        const response = await dataProvider.saveData(
+          this.provider,
+          this.dataKey,
+          {
+            homework: this.state.homeworkData,
+            attendance: {
+              absent: Array.from(this.state.selectedSet),
+              late: Array.from(this.state.lateSet)
+            }
+          },
+          this.state.dateString
+        );
+
+        if (!response.success) {
+          throw new Error(response.error.message);
         }
 
-        // 下载当天作业数据
-        await this.downloadData();
+        this.state.synced = true;
+        this.showMessage(response.message || '保存成功');
       } catch (error) {
-        console.error('初始化失败:', error);
-        this.showError('初始化失败，请检查网络连接');
+        console.error('保存失败:', error);
+        this.showError('保存失败', error.message || '请重试');
+      } finally {
+        this.loading.upload = false;
       }
     },
 
     async loadConfig() {
       try {
-        const domain = getSetting('server.domain');
-        const classNum = getSetting('server.classNumber');
-        
-        if (!domain || !classNum) {
-          throw new Error('请先设置服务器域名和班号');
-        }
-
-        const res = await axios.get(`${domain}/${classNum}/config`);
-        // 直接使用返回的数据，不再需要 .data 层
-        this.studentList = res.data.studentList || [];
-        this.timeSlots = res.data.timeSlots || [];
-        
-        // 如果有时间段，默认选择第一个
-        if (this.timeSlots.length > 0) {
-          this.selectedTimeSlot = this.timeSlots[0].id;
-          this.updateCurrentTimeSlotStudents();
-        }
-      } catch (error) {
-        console.error('加载配置失败:', error);
-        throw error;
-      }
-    },
-
-    updateCurrentTimeSlotStudents() {
-      if (this.selectedTimeSlot) {
-        const slot = this.timeSlots.find(s => s.id === this.selectedTimeSlot);
-        this.currentTimeSlotStudents = slot ? slot.students : [];
-      } else {
-        this.currentTimeSlotStudents = this.studentList;
-      }
-    },
-
-    async downloadDataDirectly() {
-      try {
-        const formattedDate = new Date(this.dateString).toISOString().split('T')[0];
-        const res = await axios.get(
-          `${this.backurl}/homework?date=${formattedDate}`
+        const response = await dataProvider.loadConfig(
+          this.provider,
+          this.dataKey
         );
 
-        const today = new Date();
-        this.isToday = today.toISOString().split('T')[0] === formattedDate;
-
-        // Check if the response indicates success
-        if (res.data && res.data.status !== false) {
-          this.showNoDataMessage = false;
-
-          // Process the new data structure
-          const { homework, attendance } = res.data;
-
-          // Initialize homeworkData with existing data or default empty subjects
-          this.homeworkData = {
-            "语文": { name: "语文", content: "" },
-            "数学": { name: "数学", content: "" },
-            "英语": { name: "英语", content: "" },
-            "物理": { name: "物理", content: "" },
-            "化学": { name: "化学", content: "" },
-            "生物": { name: "生物", content: "" },
-            "历史": { name: "历史", content: "" },
-            "地理": { name: "地理", content: "" },
-            "政治": { name: "政治", content: "" },
-            "其他": { name: "其他", content: "" },
-          };
-
-          // Update homeworkData with existing data from the response
-          for (const subject in homework) {
-            if (homework.hasOwnProperty(subject)) {
-              this.homeworkData[subject] = homework[subject];
-            }
-          }
-
-          // Update attendance information if available
-          if (attendance) {
-            this.selectedTimeSlot = attendance.timeSlotId;
-            this.selectedSet = new Set(attendance.absent || []);
-            this.lateSet = new Set(attendance.late || []);
-            this.updateCurrentTimeSlotStudents();
-          } else {
-            this.selectedSet.clear();
-            this.lateSet.clear();
-          }
-
-          this.synced = true;
-        } else {
-          // Handle the error case for today's date
-          if (this.isToday && res.data.status == false) {
-            this.showNoDataMessage = false; // Ensure we show the empty data
-            this.homeworkData = {
-              "语文": { name: "语文", content: "" },
-              "数学": { name: "数学", content: "" },
-              "英语": { name: "英语", content: "" },
-              "物理": { name: "物理", content: "" },
-              "化学": { name: "化学", content: "" },
-              "生物": { name: "生物", content: "" },
-              "历史": { name: "历史", content: "" },
-              "地理": { name: "地理", content: "" },
-              "政治": { name: "政治", content: "" },
-            };
-            this.noDataMessage = ''; // Clear any previous message
-          } else {
-            // Handle other error cases
-            this.showNoDataMessage = true;
-            this.noDataMessage = res.data.msg || '未找到数据';
-            this.homeworkData = {};
-            this.selectedSet.clear();
-            this.lateSet.clear();
-          }
+        if (!response.success) {
+          throw new Error(response.error.message);
         }
+
+        this.state.studentList = response.data.studentList || [];
       } catch (error) {
-        console.error('下载数据失败:', error);
-        this.showError('下载数据失败，请重试');
+        console.error("加载配置失败:", error);
+        this.showError("加载配置失败", error.message);
       }
     },
 
-    async uploadData() {
-      if (this.uploadLoading) return;
-      
-      try {
-        this.uploadLoading = true;
-        await axios.post(`${this.backurl}/homework`, {
-          date: new Date(this.dateString).toISOString().split('T')[0],
-          homework: this.homeworkData, // 修改键名为 homework
-          attendance: {
-            timeSlotId: this.selectedTimeSlot,
-            absent: Array.from(this.selectedSet),
-            late: Array.from(this.lateSet),
-          },
-        });
-        this.synced = true;
-        this.showSyncMessage();
-      } catch (err) {
-        console.error("上传失败:", err);
-        this.showError("上传失败，请重试");
-      } finally {
-        this.uploadLoading = false;
-      }
-    },
-
-    showSyncMessage() {
-      this.snackbar = true;
-      this.snackbarText = "数据已完成与服务器同步";
-    },
-
-    showError(message) {
-      this.snackbar = true;
-      this.snackbarText = message;
-    },
-
     handleClose() {
-      if (this.currentEditSubject) {
-        // Update only the specific subject being edited
-        const currentSubject = this.homeworkData[this.currentEditSubject];
-        if (currentSubject) {
-          currentSubject.content = this.textarea;
-        }
-        this.synced = false;
-        
-        // If auto-save is enabled, upload the data
+      if (!this.currentEditSubject) return;
+
+      const content = this.state.textarea.trim();
+      if (content) {
+        this.state.homeworkData[this.currentEditSubject] = {
+          name: this.state.availableSubjects.find(s => s.key === this.currentEditSubject)?.name,
+          content
+        };
+        this.state.synced = false;
         if (this.autoSave) {
+          // 直接调用上传，移除防抖
           this.uploadData();
         }
+      } else {
+        delete this.state.homeworkData[this.currentEditSubject];
       }
-      this.dialogVisible = false;
+      this.state.dialogVisible = false;
+    },
+
+    showSyncMessage() {
+      this.state.snackbar = true;
+      this.state.snackbarText = "数据已完成与服务器同步";
+    },
+
+    showError(message) {
+      this.state.snackbar = true;
+      this.state.snackbarText = message;
     },
 
     async openDialog(subject) {
-      // 如果启用了编辑前刷新，先刷新数据
       if (this.refreshBeforeEdit) {
         try {
           await this.downloadData();
         } catch (err) {
+          console.error("刷新数据失败:", err);
           this.showError("刷新数据失败，可能显示的不是最新数据");
         }
       }
-
       this.currentEditSubject = subject;
-      this.dialogTitle = this.homeworkData[subject].name;
-      this.textarea = this.homeworkData[subject].content;
-      this.dialogVisible = true;
-
-      // 在下一个 tick 后聚焦输入框
+      // 如果是新科目，需要创建对应的数据结构
+      if (!this.state.homeworkData[subject]) {
+        this.state.homeworkData[subject] = {
+          name:
+            this.state.availableSubjects.find((s) => s.key === subject)?.name ||
+            subject,
+          content: "",
+        };
+      }
+      this.state.dialogTitle = this.state.homeworkData[subject].name;
+      this.state.textarea = this.state.homeworkData[subject].content;
+      this.state.dialogVisible = true;
       this.$nextTick(() => {
         if (this.$refs.inputRef) {
           this.$refs.inputRef.focus();
@@ -860,278 +769,218 @@ export default {
     },
 
     setAttendanceArea() {
-      this.attendDialogVisible = true;
+      this.state.attendDialogVisible = true;
     },
 
     toggleStudentStatus(index) {
-      if (this.selectedSet.has(index)) {
-        this.selectedSet.delete(index);
-        this.lateSet.add(index);
-      } else if (this.lateSet.has(index)) {
-        this.lateSet.delete(index);
+      if (this.state.selectedSet.has(index)) {
+        this.state.selectedSet.delete(index);
+        this.state.lateSet.add(index);
+      } else if (this.state.lateSet.has(index)) {
+        this.state.lateSet.delete(index);
       } else {
-        this.selectedSet.add(index);
+        this.state.selectedSet.add(index);
       }
-      this.synced = false;
-      
-      // 如果启用了自动保存，状态改变时自动上传
+      this.state.synced = false;
       if (this.autoSave) {
         this.uploadData();
       }
     },
-    cleanstudentslist()
-    {
-      this.selectedSet.clear();
-      this.lateSet.clear();
-      this.synced = false;
 
-      // 如果启用了自动保存，清空后自动上传
+    cleanstudentslist() {
+      this.state.selectedSet.clear();
+      this.state.lateSet.clear();
+      this.state.synced = false;
       if (this.autoSave) {
         this.uploadData();
       }
     },
+
     zoom(direction) {
       const step = 2;
-      if (direction === "up" && this.fontSize < 100) {
-        this.fontSize += step;
-      } else if (direction === "out" && this.fontSize > 16) {
-        this.fontSize -= step;
+      if (direction === "up" && this.state.fontSize < 100) {
+        this.state.fontSize += step;
+      } else if (direction === "out" && this.state.fontSize > 16) {
+        this.state.fontSize -= step;
       }
-      this.contentStyle = {
-        "font-size": `${this.fontSize}px`,
+      this.state.contentStyle = {
+        "font-size": `${this.state.fontSize}px`,
       };
-      setSetting('font.size', this.fontSize);
+      setSetting("font.size", this.state.fontSize);
     },
 
     updateBackendUrl() {
-      const domain = getSetting('server.domain');
-      const classNum = getSetting('server.classNumber');
-      
-      if (domain && classNum) {
-        this.backurl = `${domain}/${classNum}`;
-        this.classNumber = classNum;
-      }
+      const provider = getSetting("server.provider");
+      const domain = getSetting("server.domain");
+      const classNum = getSetting("server.classNumber");
+
+      this.provider = provider;
+      this.dataKey = provider === 'server' ? `${domain}/${classNum}` : classNum;
+      this.state.classNumber = classNum;
     },
 
     setupAutoRefresh() {
-      const autoRefresh = getSetting('refresh.auto');
-      const interval = getSetting('refresh.interval');
-      
-      if (this.refreshInterval) {
-        clearInterval(this.refreshInterval);
+      const autoRefresh = getSetting("refresh.auto");
+      const interval = getSetting("refresh.interval");
+      if (this.state.refreshInterval) {
+        clearInterval(this.state.refreshInterval);
       }
-      
       if (autoRefresh) {
-        this.refreshInterval = setInterval(() => {
+        this.state.refreshInterval = setInterval(() => {
           this.downloadData();
         }, interval * 1000);
       }
     },
 
     updateSettings() {
-      // 更新字体大小
-      this.fontSize = getSetting('font.size');
-      this.contentStyle = { "font-size": `${this.fontSize}px` };
-      
-      // 更新自动刷新
+      this.state.fontSize = getSetting("font.size");
+      this.state.contentStyle = { "font-size": `${this.state.fontSize}px` };
       this.setupAutoRefresh();
-      
-      // 更新服务器设置
       this.updateBackendUrl();
     },
 
     handleDateSelect(newDate) {
       if (newDate) {
-        // 使用本地时区处理日期，避免时区偏移
         const date = new Date(newDate);
         const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const day = String(date.getDate()).padStart(2, "0");
         const formattedDate = `${year}-${month}-${day}`;
-        
-        this.dateString = formattedDate;
+        this.state.dateString = formattedDate;
         this.$router.push(`/?date=${formattedDate}`);
         this.downloadData();
       }
     },
 
     optimizeGridLayout(items) {
-      // 首先按内容长度和科目顺序排序
-      const sortedItems = items.sort((a, b) => {
-        // 有内容的排在前面
-        if (a.content && !b.content) return -1;
-        if (!a.content && b.content) return 1;
-        
-        // 内容较长的优先
-        if (a.content && b.content) {
-          const lengthDiff = b.rowSpan - a.rowSpan;
-          if (lengthDiff !== 0) return lengthDiff;
-        }
-        
-        // 最后按科目顺序
-        return a.order - b.order;
+      // 设置最大列数
+      const maxColumns = Math.min(3, Math.floor(window.innerWidth / 300));
+      if (maxColumns <= 1) return items;
+
+      // 使用贪心算法分配
+      const columns = Array.from({ length: maxColumns }, () => ({ height: 0, items: [] }));
+
+      items.forEach(item => {
+        const shortestColumn = columns.reduce(
+          (min, col, i) => col.height < columns[min].height ? i : min,
+          0
+        );
+        columns[shortestColumn].items.push(item);
+        columns[shortestColumn].height += item.rowSpan;
       });
 
-      // 计算每列的当前高度
-      const columnHeights = [0, 0, 0];
-      const columnItems = [[], [], []];
-      
-      // 分配项目到最短的列
-      sortedItems.forEach(item => {
-        const shortestColumn = columnHeights.indexOf(Math.min(...columnHeights));
-        columnHeights[shortestColumn] += item.rowSpan;
-        columnItems[shortestColumn].push(item);
-      });
-
-      // 将所有列的项目合并，并设置显示顺序
-      return columnItems.flat().map((item, index) => ({
+      // 展平结果并添加顺序
+      return columns.flatMap(col => col.items).map((item, index) => ({
         ...item,
         order: index
       }));
     },
 
     fixedGridLayout(items) {
-      // 定义每行的科目顺序
       const rowSubjects = [
         ["语文", "数学", "英语"],
         ["物理", "化学", "生物"],
-        ["政治", "历史", "地理", "其他"]
+        ["政治", "历史", "地理", "其他"],
       ];
-
-      // 按照固定布局排序
-      return items.sort((a, b) => {
-        // 找出科目所在的行号
-        const getRowIndex = (subject) => {
-          for (let i = 0; i < rowSubjects.length; i++) {
-            if (rowSubjects[i].includes(subject)) {
-              return i;
+      return items
+        .sort((a, b) => {
+          const getRowIndex = (subject) => {
+            for (let i = 0; i < rowSubjects.length; i++) {
+              if (rowSubjects[i].includes(subject)) {
+                return i;
+              }
             }
+            return rowSubjects.length;
+          };
+          const getColumnIndex = (subject) => {
+            for (const row of rowSubjects) {
+              const index = row.indexOf(subject);
+              if (index !== -1) return index;
+            }
+            return 999;
+          };
+          const rowA = getRowIndex(a.key);
+          const rowB = getRowIndex(b.key);
+          if (rowA !== rowB) {
+            return rowA - rowB;
           }
-          return rowSubjects.length; // 其他科目放最后
-        };
-
-        // 获取科目在行内的位置
-        const getColumnIndex = (subject) => {
-          for (const row of rowSubjects) {
-            const index = row.indexOf(subject);
-            if (index !== -1) return index;
-          }
-          return 999; // 未知科目放最后
-        };
-
-        const rowA = getRowIndex(a.key);
-        const rowB = getRowIndex(b.key);
-
-        if (rowA !== rowB) {
-          return rowA - rowB;
-        }
-
-        // 同一行内按照预定义顺序排序
-        const colA = getColumnIndex(a.key);
-        const colB = getColumnIndex(b.key);
-        return colA - colB;
-      }).map((item, index) => ({
-        ...item,
-        order: index,
-        // 固定布局时每个卡片占用相同的行高
-        rowSpan: item.content ? 2 : 1
-      }));
+          const colA = getColumnIndex(a.key);
+          const colB = getColumnIndex(b.key);
+          return colA - colB;
+        })
+        .map((item, index) => ({
+          ...item,
+          order: index,
+          rowSpan: item.content ? 2 : 1,
+        }));
     },
 
     setAllPresent() {
-      this.selectedSet.clear();
-      this.lateSet.clear();
+      this.state.selectedSet.clear();
+      this.state.lateSet.clear();
     },
 
     setAllAbsent() {
-      this.currentTimeSlotStudents.forEach((_, index) => {
+      this.state.studentList.forEach((_, index) => {
         this.setAbsent(index);
       });
     },
 
     setAllLate() {
-      this.currentTimeSlotStudents.forEach((_, index) => {
+      this.state.studentList.forEach((_, index) => {
         this.setLate(index);
       });
     },
 
     isPresent(index) {
-      return !this.selectedSet.has(index) && !this.lateSet.has(index);
+      return (
+        !this.state.selectedSet.has(index) && !this.state.lateSet.has(index)
+      );
     },
 
     isAbsent(index) {
-      return this.selectedSet.has(index);
+      return this.state.selectedSet.has(index);
     },
 
     isLate(index) {
-      return this.lateSet.has(index);
+      return this.state.lateSet.has(index);
     },
 
     setPresent(index) {
-      this.selectedSet.delete(index);
-      this.lateSet.delete(index);
+      this.state.selectedSet.delete(index);
+      this.state.lateSet.delete(index);
     },
 
     setAbsent(index) {
-      this.selectedSet.add(index);
-      this.lateSet.delete(index);
+      this.state.selectedSet.add(index);
+      this.state.lateSet.delete(index);
     },
 
     setLate(index) {
-      this.lateSet.add(index);
-      this.selectedSet.delete(index);
+      this.state.lateSet.add(index);
+      this.state.selectedSet.delete(index);
     },
 
     async saveAttendance() {
       try {
         await this.uploadData();
-        this.attendanceDialog = false;
+        this.state.attendanceDialog = false;
       } catch (error) {
-        console.error('保存出勤状态失败:', error);
-        this.showError('保存失败，请重试');
+        console.error("保存出勤状态失败:", error);
+        this.showError("保存失败，请重试");
       }
     },
 
-    async downloadData() {
-      if (this.downloadLoading) return;
-      
-      try {
-        this.downloadLoading = true;
-        await this.downloadDataDirectly();
-      } catch (error) {
-        console.error('下载数据失败:', error);
-        this.showError('下载数据失败，请重试');
-      } finally {
-        this.downloadLoading = false;
-      }
+    showMessage(title, content = '', type = 'success') {
+      this.$message[type](title, content);
+    },
+
+    updateSortedItemsCache(key, value) {
+      this._sortedItemsCache = {
+        key,
+        value
+      };
     },
   },
-
-  watch: {
-    homeworkData: {
-      handler() {
-        this.$nextTick(() => {
-          if (this.$refs.waterfall) {
-            this.$refs.waterfall.reflow();
-          }
-        });
-      },
-      deep: true
-    },
-    // 监听窗口大小变化
-    '$vuetify.display.width': {
-      handler() {
-        this.$nextTick(() => {
-          if (this.$refs.gridContainer) {
-            // 触发重新布局
-            this.optimizeGridLayout(this.sortedItems);
-          }
-        });
-      }
-    },
-    selectedTimeSlot() {
-      this.updateCurrentTimeSlotStudents();
-    }
-  }
 };
 </script>
diff --git a/src/pages/settings.vue b/src/pages/settings.vue
index 423bfbd..92f1d09 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -1,411 +1,288 @@
 <template>
-  <v-app-bar elevation="1">
-    <template #prepend>
-      <v-btn icon="mdi-arrow-left" variant="text" @click="$router.push('/')" class="mr-2" />
-    </template>
-    <v-app-bar-title class="text-h6 font-weight-medium">设置</v-app-bar-title>
-  </v-app-bar>
-
-  <v-container class="py-4">
-    <v-row>
-      <v-col cols="12" md="4">
-        <v-card elevation="2" class="rounded-lg">
-          <v-card-item>
-            <template v-slot:prepend>
-              <v-icon icon="mdi-server" size="large" class="mr-2" />
-            </template>
-            <v-card-title class="text-h6">服务器设置</v-card-title>
-          </v-card-item>
-
-          <v-card-text>
-            <v-text-field v-model="settings.server.domain" label="服务器域名" placeholder="例如: http://example.com"
-              prepend-inner-icon="mdi-web" variant="outlined" density="comfortable" class="mb-4" required />
-            <v-text-field v-model="settings.server.classNumber" label="班号" placeholder="例如: 1 或 A"
-              prepend-inner-icon="mdi-account-group" variant="outlined" density="comfortable" required
-              :rules="[v => !!v || '班号不能为空', v => /^[A-Za-z0-9]+$/.test(v) || '班号只能包含字母和数字']" />
-          </v-card-text>
-
-          <v-card-actions class="px-4 pb-4">
-            <v-btn color="primary" prepend-icon="mdi-content-save" block @click="saveSettings('server')">
-              保存设置
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-
-
-
-      <v-col cols="12" md="4">
-        <v-card elevation="2" class="rounded-lg">
-          <v-card-item>
-            <template v-slot:prepend>
-              <v-icon icon="mdi-refresh" size="large" class="mr-2" />
-            </template>
-            <v-card-title class="text-h6">自动刷新设置（不建议启用）</v-card-title>
-          </v-card-item>
-
-          <v-card-text>
-            <v-switch v-model="settings.refresh.auto" label="启用自动刷新" color="primary" hide-details class="mb-4" />
-            <v-text-field v-model="settings.refresh.interval" type="number" label="刷新间隔" suffix="秒"
-              :disabled="!settings.refresh.auto" variant="outlined" density="comfortable" :rules="[
-                v => v >= 10 || '刷新间隔不能小于10秒',
-                v => v <= 3600 || '刷新间隔不能大于3600秒'
-              ]" />
-          </v-card-text>
-
-          <v-card-actions class="px-4 pb-4">
-            <v-btn color="primary" prepend-icon="mdi-content-save" block @click="saveSettings('refresh')">
-              保存设置
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="4">
-        <v-card elevation="2" class="rounded-lg">
-          <v-card-item>
-            <template v-slot:prepend>
-              <v-icon icon="mdi-format-size" size="large" class="mr-2" />
-            </template>
-            <v-card-title class="text-h6">字体设置</v-card-title>
-          </v-card-item>
-
-          <v-card-text>
-            <v-text-field v-model="settings.font.size" type="number" label="字体大小" suffix="px" variant="outlined"
-              density="comfortable" class="mb-4" :rules="[
-                v => v >= 16 || '字体大小不能小于16px',
-                v => v <= 100 || '字体大小不能大于100px'
-              ]" />
-          </v-card-text>
-
-          <v-card-actions class="px-4 pb-4">
-            <v-btn color="error" variant="outlined" prepend-icon="mdi-refresh" class="flex-grow-1"
-              @click="resetFontSize">
-              重置
-            </v-btn>
-            <v-btn color="primary" prepend-icon="mdi-content-save" class="flex-grow-1" @click="saveSettings('font')">
-              保存设置
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="4">
-        <v-card elevation="2" class="rounded-lg">
-          <v-card-item>
-            <template v-slot:prepend>
-              <v-icon icon="mdi-pencil-cog" size="large" class="mr-2" />
-            </template>
-            <v-card-title class="text-h6">编辑设置</v-card-title>
-          </v-card-item>
-
-          <v-card-text>
-            <v-switch v-model="settings.edit.autoSave" label="启用自动保存" color="primary" hide-details class="mb-4">
-              <template v-slot:append>
-                <v-tooltip location="right">
-                  <template v-slot:activator="{ props }">
-                    <v-icon v-bind="props" icon="mdi-help-circle-outline" size="small" class="ml-2" />
-                  </template>
-                  编辑完成后自动上传到服务器
-                </v-tooltip>
-              </template>
-            </v-switch>
-
-            <v-switch v-model="settings.edit.refreshBeforeEdit" label="编辑前自动刷新" color="primary" hide-details>
-              <template v-slot:append>
-                <v-tooltip location="right">
-                  <template v-slot:activator="{ props }">
-                    <v-icon v-bind="props" icon="mdi-help-circle-outline" size="small" class="ml-2" />
-                  </template>
-                  打开编辑框前自动从服务器获取最新数据
-                </v-tooltip>
-              </template>
-            </v-switch>
-          </v-card-text>
-
-          <v-card-actions class="px-4 pb-4">
-            <v-btn color="primary" prepend-icon="mdi-content-save" block @click="saveSettings('edit')">
-              保存设置
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col> <v-col cols="12" md="4">
-        <v-card elevation="2" class="rounded-lg">
-          <v-card-item>
-            <template v-slot:prepend>
-              <v-icon icon="mdi-card-outline" size="large" class="mr-2" />
-            </template>
-            <v-card-title class="text-h6">显示设置</v-card-title>
-          </v-card-item>
-
-          <v-card-text>
-            <v-switch v-model="settings.display.dynamicSort" label="启用动态排序" hint="动态排序会根据内容长度自动调整卡片位置以优化显示效果"
-              persistent-hint class="mb-4" @change="saveSettings('display')">
-              <template v-slot:append>
-                <v-tooltip location="right">
-                  <template v-slot:activator="{ props }">
-                    <v-icon v-bind="props" icon="mdi-help-circle-outline" size="small" class="ml-2" />
-                  </template>
-                  <div>
-                    <p>启用：根据内容长度动态调整位置</p>
-                    <p>关闭：按语数英/物化生/政史地固定排列</p>
-                  </div>
-                </v-tooltip>
-              </template>
-            </v-switch>
-
-            <v-divider class="my-4" />
-
-            <v-radio-group v-model="settings.display.emptySubjectDisplay" label="空作业显示方式" class="mt-4"
-              @change="saveSettings('display')">
-              <v-radio value="card" label="显示为空卡片">
-                <template v-slot:label>
-                  <div class="d-flex align-center">
-                    显示为空卡片
-                    <v-tooltip location="right">
-                      <template v-slot:activator="{ props }">
-                        <v-icon v-bind="props" icon="mdi-help-circle-outline" size="small" class="ml-2" />
-                      </template>
-                      在主界面中显示为可点击的空白卡片
-                    </v-tooltip>
-                  </div>
-                </template>
-              </v-radio>
-              <v-radio value="button" label="显示为按钮组">
-                <template v-slot:label>
-                  <div class="d-flex align-center">
-                    显示为按钮组
-                    <v-tooltip location="right">
-                      <template v-slot:activator="{ props }">
-                        <v-icon v-bind="props" icon="mdi-help-circle-outline" size="small" class="ml-2" />
-                      </template>
-                      在主界面底部显示为一组添加按钮
-                    </v-tooltip>
-                  </div>
-                </template>
-              </v-radio>
-            </v-radio-group>
-          </v-card-text>
-
-          <v-card-actions class="px-4 pb-4">
-            <v-btn color="primary" prepend-icon="mdi-content-save" block @click="saveSettings('display')">
-              保存设置
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-      <v-col cols="12">
-        <v-card elevation="2" class="rounded-lg">
-          <v-card-item>
-            <template v-slot:prepend>
-              <v-icon icon="mdi-account-multiple" size="large" class="mr-2" />
-            </template>
-            <v-card-title class="text-h6">学生列表设置</v-card-title>
-            <template v-slot:append>
-              <v-btn :color="showAdvancedEdit ? 'primary' : undefined" variant="text" prepend-icon="mdi-code-braces"
-                @click="showAdvancedEdit = !showAdvancedEdit">
-                {{ showAdvancedEdit ? '返回基础编辑' : '高级编辑' }}
-              </v-btn>
-            </template>
-          </v-card-item>
-
-          <v-card-text>
-            <v-progress-linear v-if="studentsLoading" indeterminate color="primary" class="mb-4" />
-
-            <v-alert v-if="studentsError" type="error" variant="tonal" closable class="mb-4">
-              {{ studentsError }}
-            </v-alert>
+  <div class="settings-page">
+    <v-app-bar elevation="1">
+      <template #prepend>
+        <v-btn
+          icon="mdi-arrow-left"
+          variant="text"
+          @click="$router.push('/')"
+        />
+      </template>
+      <v-app-bar-title class="text-h6">设置</v-app-bar-title>
+    </v-app-bar>
 
+    <v-container class="py-4">
+      <v-row>
+        <!-- 数据源设置卡片 -->
+        <v-col cols="12" md="6">
+          <settings-card
+            title="数据源设置"
+            icon="mdi-database"
+            :loading="loading.server"
+          >
+            <v-select
+              v-model="settings.server.provider"
+              :items="dataProviders"
+              label="数据提供者"
+              class="mb-4"
+            />
             <v-expand-transition>
-              <div v-if="!showAdvancedEdit">
-                <v-row class="mb-6">
-                  <v-col cols="12" sm="6" md="4">
-                    <v-text-field v-model="newStudent" label="添加学生" placeholder="输入学生姓名后回车添加"
-                      prepend-inner-icon="mdi-account-plus" variant="outlined" hide-details @keyup.enter="addStudent">
-                      <template #append>
-                        <v-btn icon="mdi-plus" variant="text" color="primary" :disabled="!newStudent.trim()"
-                          @click="addStudent" />
-                      </template>
-                    </v-text-field>
-                  </v-col>
-                </v-row>
-
-                <v-row>
-                  <v-col v-for="(student, index) in studentsList" :key="index" cols="12" sm="6" md="4" lg="3">
-                    <v-hover v-slot="{ isHovering, props }">
-                      <v-card v-bind="props" :elevation="isMobile ? 1 : (isHovering ? 4 : 1)" :class="[
-                        'student-card',
-                        {
-                          'bg-primary-subtle': isHovering && !isMobile,
-                          'mobile': isMobile
-                        }
-                      ]" border>
-                        <v-card-text class="d-flex align-center pa-3">
-                          <v-menu location="bottom" :open-on-hover="!isMobile" :open-on-long-press="isMobile">
-                            <template v-slot:activator="{ props: menuProps }">
-                              <v-btn variant="tonal" size="small" class="mr-3 font-weight-medium" v-bind="menuProps">
-                                {{ index + 1 }}
-                              </v-btn>
-                            </template>
-                            <v-list density="compact" nav>
-                              <v-list-item prepend-icon="mdi-arrow-up-bold" :disabled="index === 0"
-                                @click="moveToTop(index)">
-                                置顶
-                              </v-list-item>
-                              <v-divider />
-                              <v-list-item prepend-icon="mdi-arrow-up" :disabled="index === 0"
-                                @click="moveStudent(index, 'up')">
-                                上移
-                              </v-list-item>
-                              <v-list-item prepend-icon="mdi-arrow-down" :disabled="index === studentsList.length - 1"
-                                @click="moveStudent(index, 'down')">
-                                下移
-                              </v-list-item>
-                              <v-divider />
-                              <v-list-item prepend-icon="mdi-format-list-numbered" @click="setStudentNumber(index)">
-                                设置序号
-                              </v-list-item>
-                            </v-list>
-                          </v-menu>
-
-                          <v-text-field v-if="editingIndex === index" v-model="editingName" density="compact"
-                            variant="underlined" hide-details class="flex-grow-1" @keyup.enter="saveEdit"
-                            @blur="saveEdit" autofocus />
-                          <span v-else class="text-body-1 flex-grow-1"
-                            @click="isMobile ? startEdit(index, student) : null"
-                            @dblclick="!isMobile ? startEdit(index, student) : null">
-                            {{ student }}
-                          </span>
-
-                          <div class="d-flex gap-1 action-buttons" :class="{ 'opacity-100': isHovering || isMobile }">
-                            <v-btn icon="mdi-pencil" variant="text" color="primary" size="small"
-                              @click="startEdit(index, student)" />
-                            <v-btn icon="mdi-delete" variant="text" color="error" size="small"
-                              @click="confirmDelete(index)" />
-                          </div>
-                        </v-card-text>
-                      </v-card>
-                    </v-hover>
-                  </v-col>
-                </v-row>
+              <div v-if="settings.server.provider === 'server'">
+                <v-text-field
+                  v-model="settings.server.domain"
+                  label="服务器域名"
+                  placeholder="例如: http://example.com"
+                  prepend-inner-icon="mdi-web"
+                />
               </div>
             </v-expand-transition>
 
-            <v-expand-transition>
-              <div v-if="showAdvancedEdit" class="pt-2">
-                <v-textarea v-model="students" label="批量编辑学生列表" placeholder="每行输入一个学生姓名" hint="使用文本编辑模式批量编辑学生名单"
-                  persistent-hint variant="outlined" rows="10" />
-              </div>
-            </v-expand-transition>
+            <v-text-field
+              v-model="settings.server.classNumber"
+              label="班号"
+              placeholder="例如: 1 或 A"
+              prepend-inner-icon="mdi-account-group"
+              :hint="settings.server.provider === 'localStorage' ? '使用本地存储时也需要设置班号' : ''"
+              persistent-hint
+            />
+          </settings-card>
+        </v-col>
 
-            <v-row class="mt-6">
-              <v-col cols="12" class="d-flex gap-2">
-                <v-btn color="primary" prepend-icon="mdi-content-save" size="large" :loading="studentsLoading"
-                  :disabled="studentsLoading" @click="saveStudents">
-                  保存学生列表
-                </v-btn>
-                <v-btn color="error" variant="outlined" prepend-icon="mdi-refresh" size="large"
-                  :loading="studentsLoading" :disabled="studentsLoading" @click="reloadStudentList">
-                  重置列表
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-card-text>
-        </v-card>
-      </v-col>
-      <v-col cols="12">
-        <v-card elevation="2" class="rounded-lg">
-          <v-card-item>
-            <template v-slot:prepend>
-              <v-icon icon="mdi-information" size="large" class="mr-2" />
-            </template>
-            <v-card-title class="text-h6">关于</v-card-title>
-          </v-card-item>
+        <!-- 编辑设置卡片 -->
+        <v-col cols="12" md="6">
+          <settings-card
+            title="编辑设置"
+            icon="mdi-pencil-cog"
+          >
+            <v-list>
+              <v-list-item>
+                <template #prepend>
+                  <v-icon icon="mdi-content-save" 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="settings.edit.autoSave"
+                    density="comfortable"
+                    hide-details
+                  />
+                </template>
+              </v-list-item>
 
-          <v-card-text>
-            <v-row justify="center" align="center">
-              <v-col cols="12" md="8" class="text-center">
-                <v-avatar size="120" class="mb-4">
-                  <v-img src="https://avatars.githubusercontent.com/u/88357633?v=4" alt="作者头像" />
-                </v-avatar>
-                <h2 class="text-h5 mb-2">HomeworkPage</h2>
-                <p class="text-body-1 mb-4">
-                  由 <a href="https://github.com/sunwuyuan" target="_blank"
-                    class="text-decoration-none font-weight-medium">Sunwuyuan</a> 开发
-                </p>
-                <div class="d-flex justify-center gap-2 flex-wrap">
-                  <v-btn color="primary" variant="outlined" href="https://github.com/SunWuyuan/homeworkpage-frontend"
-                    target="_blank" prepend-icon="mdi-github">
-                    前端 GitHub
-                  </v-btn>
-                  <v-btn color="primary" variant="outlined" href="https://github.com/SunWuyuan/homeworkpage-backend"
-                    target="_blank" prepend-icon="mdi-github">
-                    后端 GitHub
-                  </v-btn>
-                  <v-btn color="primary" variant="outlined"
-                    href="https://github.com/SunWuyuan/homeworkpage-backend/issues" target="_blank"
-                    prepend-icon="mdi-bug">
-                    报告问题
-                  </v-btn>
-                </div>
-                <p class="mt-4 text-caption text-medium-emphasis">
-                  GPL License © 2024
-                </p>
-              </v-col>
-            </v-row>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+              <v-divider class="my-2" />
 
-  <v-snackbar v-model="snackbar">
-    {{ snackbarText }}
-  </v-snackbar>
+              <v-list-item>
+                <template #prepend>
+                  <v-icon icon="mdi-refresh" 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="settings.edit.refreshBeforeEdit"
+                    density="comfortable"
+                    hide-details
+                  />
+                </template>
+              </v-list-item>
+            </v-list>
+          </settings-card>
+        </v-col>
 
-  <v-dialog v-model="deleteDialog" max-width="300">
-    <v-card>
-      <v-card-title>确认删除</v-card-title>
-      <v-card-text>
-        确定要删除学生 "{{ studentToDelete?.name }}" 吗？
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn color="primary" variant="text" @click="deleteDialog = false">
-          取消
-        </v-btn>
-        <v-btn color="error" variant="text" @click="removeStudent(studentToDelete?.index)">
-          删除
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+        <!-- 刷新设置卡片 -->
+        <v-col cols="12" md="6">
+          <settings-card
+            title="刷新设置"
+            icon="mdi-refresh-circle"
+          >
+            <v-list>
+              <v-list-item>
+                <template #prepend>
+                  <v-icon icon="mdi-refresh" 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="settings.refresh.auto"
+                    density="comfortable"
+                    hide-details
+                  />
+                </template>
+              </v-list-item>
 
-  <v-dialog v-model="numberDialog" max-width="300">
-    <v-card>
-      <v-card-title>设置序号</v-card-title>
-      <v-card-text>
-        <v-text-field v-model="newPosition" type="number" label="新序号" :rules="[
-          v => !!v || '序号不能为空',
-          v => v > 0 || '序号必须大于0',
-          v => v <= studentsList.length || `序号不能大于${studentsList.length}`
-        ]" @keyup.enter="applyNewPosition" />
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn color="primary" variant="text" @click="numberDialog = false">
-          取消
-        </v-btn>
-        <v-btn color="primary" @click="applyNewPosition">
-          确定
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+              <v-divider class="my-2" />
+
+              <v-list-item>
+                <template #prepend>
+                  <v-icon icon="mdi-timer" class="mr-3" />
+                </template>
+                <v-list-item-title>刷新间隔</v-list-item-title>
+                <v-list-item-subtitle>设置自动刷新的时间间隔（分钟）</v-list-item-subtitle>
+                <template #append>
+                  <v-text-field
+                    v-model="settings.refresh.interval"
+                    type="number"
+                    min="1"
+                    max="60"
+                    density="comfortable"
+                    hide-details
+                  />
+                </template>
+              </v-list-item>
+            </v-list>
+          </settings-card>
+        </v-col>
+
+        <!-- 显示设置卡片 -->
+        <v-col cols="12" md="6">
+          <settings-card
+            title="显示设置"
+            icon="mdi-monitor-dashboard"
+          >
+            <v-list>
+              <v-list-item>
+                <template #prepend>
+                  <v-icon icon="mdi-eye" class="mr-3" />
+                </template>
+                <v-list-item-title>空科目显示</v-list-item-title>
+                <v-list-item-subtitle>选择空科目的显示方式</v-list-item-subtitle>
+                <template #append>
+                  <v-btn-toggle
+                    v-model="settings.display.emptySubjectDisplay"
+                    density="comfortable"
+                    color="primary"
+                  >
+                    <v-btn value="button" :ripple="false">
+                      按钮
+                    </v-btn>
+                    <v-btn value="card" :ripple="false">
+                      卡片
+                    </v-btn>
+                  </v-btn-toggle>
+                </template>
+              </v-list-item>
+
+              <v-divider class="my-2" />
+
+              <v-list-item>
+                <template #prepend>
+                  <v-icon icon="mdi-sort" class="mr-3" />
+                </template>
+                <v-list-item-title>动态排序</v-list-item-title>
+                <v-list-item-subtitle>根据科目动态排序</v-list-item-subtitle>
+                <template #append>
+                  <v-switch
+                    disabled
+                    v-model="settings.display.dynamicSort"
+                    density="comfortable"
+                    hide-details
+                  />
+                </template>
+              </v-list-item>
+            </v-list>
+          </settings-card>
+        </v-col>
+
+        <!-- 开发者选项卡片 -->
+        <v-col :cols="12" :md="settings.developer.enabled ? 12 : 6">
+          <settings-card
+            title="开发者选项"
+            icon="mdi-developer-board"
+          >
+            <v-list>
+              <v-list-item>
+                <template #prepend>
+                  <v-icon icon="mdi-code-tags" 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="settings.developer.enabled"
+                    density="comfortable"
+                    hide-details
+                    @change="handleDeveloperChange"
+                  />
+                </template>
+              </v-list-item>
+
+              <template v-if="settings.developer.enabled">
+                <v-divider class="my-2" />
+
+                <v-list-item>
+                  <template #prepend>
+                    <v-icon icon="mdi-file-code" 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="settings.developer.showDebugConfig"
+                      density="comfortable"
+                      hide-details
+                    />
+                  </template>
+                </v-list-item>
+
+                <v-expand-transition>
+                  <div v-if="settings.developer.showDebugConfig">
+                    <v-divider class="my-2" />
+                    <v-textarea
+                      v-model="debugConfig"
+                      label="调试配置"
+                      readonly
+                      rows="10"
+                      class="font-monospace mt-2"
+                    />
+                    <div class="d-flex gap-2">
+                      <v-btn
+                        prepend-icon="mdi-refresh"
+                        variant="text"
+                        @click="refreshDebugConfig"
+                      >
+                        刷新
+                      </v-btn>
+                      <v-btn
+                        prepend-icon="mdi-content-copy"
+                        variant="text"
+                        @click="copyDebugConfig"
+                      >
+                        复制
+                      </v-btn>
+                    </div>
+                  </div>
+                </v-expand-transition>
+              </template>
+            </v-list>
+          </settings-card>
+        </v-col>
+
+        <!-- 学生列表卡片 -->
+        <v-col cols="12">
+          <student-list-card
+            v-model="studentData"
+            :loading="loading.students"
+            :error="studentsError"
+            :is-mobile="isMobile"
+            @save="saveStudents"
+            @reload="loadStudentList"
+          />
+        </v-col>
+
+        <!-- 关于卡片 -->
+        <v-col cols="12">
+          <about-card />
+        </v-col>
+      </v-row>
+    </v-container>
+    <!-- 消息记录组件 -->
+    <message-log ref="messageLog" />
+  </div>
 </template>
 
 <script>
-import axios from 'axios';
 import { useDisplay } from 'vuetify';
 import {
   getSetting,
@@ -413,41 +290,69 @@ import {
   resetSetting,
   watchSettings
 } from '@/utils/settings';
+import MessageLog from '@/components/MessageLog.vue';
+import SettingsCard from '@/components/SettingsCard.vue';
+import StudentListCard from '@/components/settings/StudentListCard.vue';
+import AboutCard from '@/components/settings/AboutCard.vue';
+import '../styles/settings.scss';
+import dataProvider from '@/utils/dataProvider';
 
 export default {
+  name: 'Settings',
+  components: {
+    MessageLog,
+    SettingsCard,
+    StudentListCard,
+    AboutCard
+  },
   setup() {
     const { mobile } = useDisplay();
     return { isMobile: mobile };
   },
-
   data() {
-    return {
-      settings: {
-        server: {
-          domain: getSetting('server.domain'),
-          classNumber: getSetting('server.classNumber'),
-        },
-        refresh: {
-          auto: getSetting('refresh.auto'),
-          interval: getSetting('refresh.interval'),
-        },
-        font: {
-          size: getSetting('font.size'),
-        },
-        edit: {
-          autoSave: getSetting('edit.autoSave'),
-          refreshBeforeEdit: getSetting('edit.refreshBeforeEdit'),
-        },
-        display: {
-          emptySubjectDisplay: getSetting('display.emptySubjectDisplay'),
-          dynamicSort: getSetting('display.dynamicSort'),
-        }
+    const settings = {
+      server: {
+        domain: getSetting('server.domain'),
+        classNumber: getSetting('server.classNumber'),
+        provider: getSetting('server.provider')
+      },
+      refresh: {
+        auto: getSetting('refresh.auto'),
+        interval: getSetting('refresh.interval'),
+      },
+      font: {
+        size: getSetting('font.size'),
+      },
+      edit: {
+        autoSave: getSetting('edit.autoSave'),
+        refreshBeforeEdit: getSetting('edit.refreshBeforeEdit'),
+      },
+      display: {
+        emptySubjectDisplay: getSetting('display.emptySubjectDisplay'),
+        dynamicSort: getSetting('display.dynamicSort'),
+      },
+      developer: {
+        enabled: getSetting('developer.enabled'),
+        showDebugConfig: getSetting('developer.showDebugConfig')
+      },
+      message: {
+        showSidebar: getSetting('message.showSidebar'),
+        maxActiveMessages: getSetting('message.maxActiveMessages'),
+        timeout: getSetting('message.timeout'),
+        saveHistory: getSetting('message.saveHistory')
+      }
+    };
+    return {
+      settings,
+      dataProviders: [
+        { title: '服务器', value: 'server' },
+        { title: '本地存储', value: 'localStorage' }
+      ],
+      studentData: {
+        list: [],
+        text: '',
+        advanced: false
       },
-      students: '',
-      studentsList: [],
-      snackbar: false,
-      snackbarText: '',
-      showAdvancedEdit: false,
       newStudent: '',
       editingIndex: -1,
       editingName: '',
@@ -460,7 +365,31 @@ export default {
       touchTimeout: null,
       studentsLoading: false,
       studentsError: null,
-    };
+      debugConfig: '',
+      loading: {
+        server: false,
+        students: false
+      }
+    }
+  },
+
+  watch: {
+    // 添加深度监听所有设置
+    'settings': {
+      handler(newSettings) {
+        this.handleSettingsChange(newSettings);
+      },
+      deep: true
+    },
+    'studentData': {
+      handler(newData) {
+        // 防止递归更新
+        if (JSON.stringify(newData.list) !== JSON.stringify(this.studentData.list)) {
+          this.studentData.text = newData.list.join('\n');
+        }
+      },
+      deep: true
+    }
   },
 
   mounted() {
@@ -469,6 +398,13 @@ export default {
       this.loadAllSettings();
     });
     this.loadStudentList();
+    this.refreshDebugConfig();
+
+    // 检查开发者选项,如果未启用则关闭相关功能
+    if (!this.settings.developer.enabled) {
+      this.settings.developer.showDebugConfig = false;
+      this.handleSettingsChange(this.settings);
+    }
   },
 
   beforeUnmount() {
@@ -477,53 +413,6 @@ export default {
     }
   },
 
-  watch: {
-    'settings.server': {
-      handler(newVal, oldVal) {
-        if (newVal.domain !== oldVal?.domain || newVal.classNumber !== oldVal?.classNumber) {
-          this.loadStudentList();
-        }
-      },
-      deep: true
-    },
-    'settings.refresh': {
-      handler() {
-        this.saveSettings('refresh');
-      },
-      deep: true
-    },
-    'settings.font': {
-      handler() {
-        this.saveSettings('font');
-      },
-      deep: true
-    },
-    'settings.edit': {
-      handler() {
-        this.saveSettings('edit');
-      },
-      deep: true
-    },
-    'settings.display': {
-      handler() {
-        this.saveSettings('display');
-      },
-      deep: true
-    },
-    students: {
-      handler(newVal) {
-        this.studentsList = newVal.split('\n').filter(s => s.trim());
-      },
-      immediate: true
-    },
-    studentsList: {
-      handler(newVal) {
-        this.students = newVal.join('\n');
-      },
-      deep: true
-    }
-  },
-
   methods: {
     loadAllSettings() {
       Object.keys(this.settings).forEach(section => {
@@ -533,43 +422,71 @@ export default {
       });
     },
 
-    saveSettings(section) {
-      try {
-        Object.keys(this.settings[section]).forEach(key => {
-          setSetting(`${section}.${key}`, this.settings[section][key]);
-        });
-        this.showMessage('设置已保存');
-      } catch (error) {
-        console.error('保存设置失败:', error);
-        this.showMessage('保存设置失败，请检查输入');
+    // 添加统一的设置处理方法
+    handleSettingsChange(newSettings) {
+      // 使用防抖来避免过多更新
+      if (this.settingsChangeTimeout) {
+        clearTimeout(this.settingsChangeTimeout);
       }
+
+      this.settingsChangeTimeout = setTimeout(() => {
+        Object.entries(newSettings).forEach(([section, values]) => {
+          Object.entries(values).forEach(([key, value]) => {
+            const settingKey = `${section}.${key}`;
+            const currentValue = getSetting(settingKey);
+            if (value !== currentValue) {
+              const success = setSetting(settingKey, value);
+              if (success) {
+                this.showMessage('设置已更新', `${settingKey} 已保存`);
+              } else {
+                this.showError('保存失败', `${settingKey} 设置失败`);
+                // 回滚到原值
+                this.settings[section][key] = currentValue;
+              }
+            }
+          });
+        });
+      }, 100); // 添加100ms延迟
+    },
+
+    showMessage(title, content = '', type = 'success') {
+      this.$message[type](title, content);
+    },
+
+    showError(title, content = '') {
+      this.$message.error(title, content);
     },
 
     async loadStudentList() {
       try {
-        this.studentsLoading = true;
+        this.loading.students = true;
         this.studentsError = null;
 
         const domain = getSetting('server.domain');
         const classNum = getSetting('server.classNumber');
+        const provider = getSetting('server.provider');
 
-        if (!domain || !classNum) {
-          throw new Error('请先设置服务器域名和班号');
+        if (!classNum) {
+          throw new Error('请先设置班号');
+        }
+
+        const key = provider === 'server' ? `${domain}/${classNum}` : classNum;
+        const res = await dataProvider.loadConfig(provider, key);
+
+        if (!res.success) {
+          throw new Error(res.error.message);
         }
 
-        const res = await axios.get(`${domain}/${classNum}/config`);
         if (res.data && Array.isArray(res.data.studentList)) {
-          this.studentsList = res.data.studentList;
-          this.students = this.studentsList.join('\n');
-        } else {
-          throw new Error('获取学生列表失败');
+          this.studentData.list = res.data.studentList;
+          this.studentData.text = res.data.studentList.join('\n');
         }
       } catch (error) {
         console.error('加载学生列表失败:', error);
-        this.studentsError = error.message || '加载失败，请检查服务器设置';
-        this.showMessage(this.studentsError);
+        this.studentsError = error.message || '加载失败，请检查设置';
+        this.showError('加载失败', this.studentsError);
       } finally {
-        this.studentsLoading = false;
+        this.loading.students = false;
       }
     },
 
@@ -577,52 +494,34 @@ export default {
       try {
         const domain = getSetting('server.domain');
         const classNum = getSetting('server.classNumber');
+        const provider = getSetting('server.provider');
 
-        if (!domain || !classNum) {
-          throw new Error('请先设置服务器域名和班号');
+        if (!classNum) {
+          throw new Error('请先设置班号');
         }
 
-        await axios.put(`${domain}/${classNum}/config`, {
-          studentList: this.studentsList,
-          timeSlots: [],
+        const key = provider === 'server' ? `${domain}/${classNum}` : classNum;
+        const res = await dataProvider.saveConfig(provider, key, {
+          studentList: this.studentData.list,
+          // 可以在这里添加其他需要同步的配置
         });
 
-        localStorage.setItem('studentList', this.studentsList.join(','));
-        this.showMessage('保存成功');
+        if (!res.success) {
+          throw new Error(res.error.message);
+        }
+
+        this.showMessage('保存成功', '学生列表已更新');
       } catch (error) {
         console.error('保存学生列表失败:', error);
-        this.showMessage(error.message || '保存失败，请检查服务器设置和学生列表');
+        this.showError('保存失败', error.message || '请重试');
       }
     },
 
-    async reloadStudentList() {
-      try {
-        await this.loadStudentList();
-        this.showMessage('已重新加载学生列表');
-      } catch (error) {
-        this.showMessage('重新加载失败');
-      }
-    },
-
-    showMessage(text) {
-      this.snackbarText = text;
-      this.snackbar = true;
-    },
-
-    startEdit(index, name) {
-      if (this.editingIndex !== -1 && this.editingIndex !== index) {
-        this.saveEdit();
-      }
-
-      this.editingIndex = index;
-      this.editingName = name;
-    },
-
     saveEdit() {
       if (this.editingIndex !== -1) {
         const newName = this.editingName.trim();
-        if (newName && newName !== this.studentsList[this.editingIndex]) {
-          this.studentsList[this.editingIndex] = newName;
+        if (newName && newName !== this.studentData.list[this.editingIndex]) {
+          this.studentData.list[this.editingIndex] = newName;
           if (this.settings.edit.autoSave) {
             this.saveStudents();
           }
@@ -632,20 +531,23 @@ export default {
       }
     },
 
+    startEdit(index, name) {
+      this.editingIndex = index;
+      this.editingName = name;
+    },
+
     confirmDelete(index) {
       this.studentToDelete = {
         index,
-        name: this.studentsList[index]
+        name: this.studentData.list[index]
       };
       this.deleteDialog = true;
     },
 
     moveStudent(index, direction) {
       const newIndex = direction === 'up' ? index - 1 : index + 1;
-      if (newIndex >= 0 && newIndex < this.studentsList.length) {
-        [this.studentsList[index], this.studentsList[newIndex]] =
-          [this.studentsList[newIndex], this.studentsList[index]];
-
+      if (newIndex >= 0 && newIndex < this.studentData.list.length) {
+        [this.studentData.list[index], this.studentData.list[newIndex]] = [this.studentData.list[newIndex], this.studentData.list[index]];
         if (this.settings.edit.autoSave) {
           this.saveStudents();
         }
@@ -663,12 +565,12 @@ export default {
       if (
         this.studentToMove !== null &&
         newPos >= 0 &&
-        newPos < this.studentsList.length &&
+        newPos < this.studentData.list.length &&
         newPos !== this.studentToMove
       ) {
-        const student = this.studentsList[this.studentToMove];
-        this.studentsList.splice(this.studentToMove, 1);
-        this.studentsList.splice(newPos, 0, student);
+        const student = this.studentData.list[this.studentToMove];
+        this.studentData.list.splice(this.studentToMove, 1);
+        this.studentData.list.splice(newPos, 0, student);
         if (this.settings.edit.autoSave) this.saveStudents();
       }
       this.numberDialog = false;
@@ -678,10 +580,9 @@ export default {
 
     moveToTop(index) {
       if (index > 0) {
-        const student = this.studentsList[index];
-        this.studentsList.splice(index, 1);
-        this.studentsList.unshift(student);
-
+        const student = this.studentData.list[index];
+        this.studentData.list.splice(index, 1);
+        this.studentData.list.unshift(student);
         if (this.settings.edit.autoSave) {
           this.saveStudents();
         }
@@ -690,8 +591,8 @@ export default {
 
     addStudent() {
       const student = this.newStudent.trim();
-      if (student && !this.studentsList.includes(student)) {
-        this.studentsList.push(student);
+      if (student && !this.studentData.list.includes(student)) {
+        this.studentData.list.push(student);
         this.newStudent = '';
         if (this.settings.edit.autoSave) {
           this.saveStudents();
@@ -701,7 +602,7 @@ export default {
 
     removeStudent(index) {
       if (index !== undefined) {
-        this.studentsList.splice(index, 1);
+        this.studentData.list.splice(index, 1);
         this.deleteDialog = false;
         this.studentToDelete = null;
         if (this.settings.edit.autoSave) this.saveStudents();
@@ -711,81 +612,81 @@ export default {
     resetFontSize() {
       resetSetting('font.size');
       this.settings.font.size = getSetting('font.size');
-      this.showMessage('字体大小已重置为默认值');
+      this.showMessage('字体已重置', '字体大小已恢复默认值');
     },
-  },
-};
+
+    refreshDebugConfig() {
+      const allSettings = {};
+      Object.keys(this.settings).forEach(section => {
+        allSettings[section] = {};
+        Object.keys(this.settings[section]).forEach(key => {
+          allSettings[section][key] = getSetting(`${section}.${key}`);
+        });
+      });
+      this.debugConfig = JSON.stringify(allSettings, null, 2);
+    },
+
+    async copyDebugConfig() {
+      try {
+        await navigator.clipboard.writeText(this.debugConfig);
+        this.showMessage('复制成功', '配置信息已复制到剪贴板');
+      } catch (error) {
+        console.error('复制失败:', error);
+        this.showError('复制失败', '请手动复制');
+      }
+    },
+
+    handleDeveloperChange(enabled) {
+      if (!enabled) {
+        // 关闭开发者选项时重置相关设置
+        this.settings.developer.showDebugConfig = false;
+        this.settings.message = {
+          showSidebar: true,
+          maxActiveMessages: 5,
+          timeout: 5000,
+          saveHistory: true
+        };
+        // 不需要手动调用 saveSettings，watch 会自动处理
+      }
+    },
+
+    resetDeveloperSettings() {
+      this.settings.developer = {
+        enabled: false,
+        showDebugConfig: false
+      };
+      this.settings.message = {
+        showSidebar: true,
+        maxActiveMessages: 5,
+        timeout: 5000,
+        saveHistory: true
+      };
+      this.handleSettingsChange(this.settings);
+      this.showMessage('已重置', '开发者设置已重置为默认值', 'warning');
+    },
+
+    adjustFontSize(direction) {
+      const step = 2;
+      const size = this.settings.font.size;
+      if (direction === 'up' && size < 100) {
+        this.settings.font.size = size + step;
+      } else if (direction === 'down' && size > 16) {
+        this.settings.font.size = size - step;
+      }
+      this.handleSettingsChange(this.settings);
+    }
+  }
+}
 </script>
 
-<style scoped>
-.student-card {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.bg-primary-subtle {
-  background-color: rgb(var(--v-theme-primary), 0.05);
-}
-
-.action-buttons {
-  transition: opacity 0.2s ease;
-  opacity: 0;
-}
-
-.gap-1 {
-  gap: 4px;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.student-card .v-text-field {
-  margin: 0;
-  padding: 0;
-}
-
-@media (max-width: 600px) {
-  .v-container {
-    padding: 12px;
-  }
-
-  .v-col {
-    padding: 8px;
+<style lang="scss">
+.settings-page {
+  .v-card {
+    transition: transform 0.2s, box-shadow 0.2s;
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
+    }
   }
 }
-
-.student-card.mobile {
-  margin-bottom: 8px;
-}
-
-.student-card.mobile .v-btn {
-  min-width: 40px;
-  min-height: 40px;
-}
-
-.student-card.mobile .v-text-field {
-  font-size: 16px;
-}
-
-@media (max-width: 600px) {
-  .v-col {
-    padding: 6px !important;
-  }
-
-  .student-card {
-    margin-bottom: 4px;
-  }
-
-  .action-buttons {
-    opacity: 1;
-  }
-}
-
-.student-card {
-  -webkit-tap-highlight-color: transparent;
-}
-
-.student-card:active {
-  background-color: rgb(var(--v-theme-primary), 0.05);
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..469cc4f
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,176 @@
+
+.grid-masonry {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    padding: 8px;
+    grid-auto-flow: dense;
+  }
+
+  .grid-item {
+    width: 100%;
+    transition: all 0.2s ease;
+  }
+
+  .empty-card {
+    transform: scale(0.9);
+    opacity: 0.8;
+    grid-row-end: span 1 !important;
+  }
+
+  .empty-card:hover {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+
+  .empty-subjects-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 1199px) {
+    .grid-masonry {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 799px) {
+    .grid-masonry {
+      grid-template-columns: 1fr;
+    }
+
+    .empty-card {
+      transform: scale(0.95);
+    }
+  }
+
+  /* 确保容器高度不超过视口 */
+  .main-window {
+    max-height: calc(100vh - 180px);
+    overflow-y: auto;
+  }
+
+  /* 优化滚动条样式 */
+  .main-window::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .main-window::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .main-window::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
+
+  .main-window::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  .no-data-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
+    margin: 20px 0;
+  }
+
+  .attendance-drawer {
+    border-left: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
+  .attendance-drawer :deep(.v-navigation-drawer__content) {
+    overflow-y: auto;
+  }
+
+  /* 优化滚动条样式 */
+  .attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar) {
+    width: 8px;
+  }
+
+  .attendance-drawer
+    :deep(.v-navigation-drawer__content::-webkit-scrollbar-track) {
+    background: transparent;
+  }
+
+  .attendance-drawer
+    :deep(.v-navigation-drawer__content::-webkit-scrollbar-thumb) {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
+
+  .attendance-drawer
+    :deep(.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover) {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  /* 响应式调整 */
+  @media (max-width: 960px) {
+    .attendance-drawer {
+      display: none;
+    }
+  }
+
+  .text-success {
+    color: rgb(var(--v-theme-success));
+  }
+
+  .text-error {
+    color: rgb(var(--v-theme-error));
+  }
+
+  .text-warning {
+    color: rgb(var(--v-theme-warning));
+  }
+
+  .attendance-card {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .attendance-numbers {
+    padding: 20px 0;
+  }
+
+  .total-number {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    padding-bottom: 20px;
+  }
+
+  .status-number {
+    flex: 1;
+  }
+
+  .text-h2,
+  .text-h3 {
+    line-height: 1.2;
+  }
+
+  .empty-subjects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 16px;
+    padding: 8px;
+  }
+
+  .empty-subject-card {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    opacity: 0.8;
+  }
+
+  .empty-subject-card:hover {
+    transform: scale(1.02);
+    opacity: 1;
+  }
+
+  .empty-subjects {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    padding-top: 1rem;
+  }
+
+  .empty-subject-card:not(:disabled):hover {
+    opacity: 1;
+    transform: scale(1.02);
+  }
\ No newline at end of file
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 3e36a27..d92984f 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -8,3 +8,74 @@
 // @use 'vuetify/settings' with (
 //   $color-pack: false
 // );
+
+.student-card {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .bg-primary-subtle {
+    background-color: rgb(var(--v-theme-primary), 0.05);
+  }
+
+  .action-buttons {
+    transition: opacity 0.2s ease;
+    opacity: 0;
+  }
+
+  .gap-1 {
+    gap: 4px;
+  }
+
+  .gap-2 {
+    gap: 8px;
+  }
+
+  .student-card .v-text-field {
+    margin: 0;
+    padding: 0;
+  }
+
+  @media (max-width: 600px) {
+    .v-container {
+      padding: 12px;
+    }
+
+    .v-col {
+      padding: 8px;
+    }
+  }
+
+  .student-card.mobile {
+    margin-bottom: 8px;
+  }
+
+  .student-card.mobile .v-btn {
+    min-width: 40px;
+    min-height: 40px;
+  }
+
+  .student-card.mobile .v-text-field {
+    font-size: 16px;
+  }
+
+  @media (max-width: 600px) {
+    .v-col {
+      padding: 6px !important;
+    }
+
+    .student-card {
+      margin-bottom: 4px;
+    }
+
+    .action-buttons {
+      opacity: 1;
+    }
+  }
+
+  .student-card {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .student-card:active {
+    background-color: rgb(var(--v-theme-primary), 0.05);
+  }
\ No newline at end of file
diff --git a/src/utils/dataProvider.js b/src/utils/dataProvider.js
new file mode 100644
index 0000000..85c48a3
--- /dev/null
+++ b/src/utils/dataProvider.js
@@ -0,0 +1,177 @@
+import axios from 'axios';
+
+const formatResponse = (data, message = null) => ({
+  success: true,
+  data,
+  message
+});
+
+const formatError = (message, code = 'UNKNOWN_ERROR') => ({
+  success: false,
+  error: { code, message }
+});
+
+const providers = {
+  localStorage: {
+    async loadData(key, date) {
+      try {
+        // 检查是否设置了班号
+        const classNumber = key.split('/').pop();
+        if (!classNumber) {
+          return formatError('请先设置班号', 'CONFIG_ERROR');
+        }
+
+        // 使用班号作为本地存储的前缀
+        const storageKey = `homework_${classNumber}_${date}`;
+        const rawData = localStorage.getItem(storageKey);
+
+        if (!rawData) {
+          // 如果是今天的数据且没有找到，返回空结构而不是null
+          const today = new Date().toISOString().split('T')[0];
+          if (date === today) {
+            return formatResponse({
+              homework: {},
+              attendance: { absent: [], late: [] }
+            });
+          }
+          return formatError('数据不存在', 'NOT_FOUND');
+        }
+
+        return formatResponse(JSON.parse(rawData));
+      } catch (error) {
+
+        return formatError('读取本地数据失败');
+      }
+    },
+
+    async saveData(key, data, date) {
+      try {
+        // 检查是否设置了班号
+        const classNumber = key.split('/').pop();
+        if (!classNumber) {
+          return formatError('请先设置班号', 'CONFIG_ERROR');
+        }
+
+        // 使用班号作为本地存储的前缀
+        const storageKey = `homework_${classNumber}_${date}`;
+        localStorage.setItem(storageKey, JSON.stringify(data));
+        return formatResponse(null, '保存成功');
+      } catch (error) {
+        return formatError('保存本地数据失败');
+      }
+    },
+
+    async loadConfig(key) {
+      try {
+        const classNumber = key.split('/').pop();
+        if (!classNumber) {
+          return formatError('请先设置班号', 'CONFIG_ERROR');
+        }
+
+        const storageKey = `config_${classNumber}`;
+        const rawData = localStorage.getItem(storageKey);
+
+        if (!rawData) {
+          return formatResponse({
+            studentList: [],
+            displayOptions: {}
+          });
+        }
+
+        return formatResponse(JSON.parse(rawData));
+      } catch (error) {
+        return formatError('读取本地配置失败');
+      }
+    },
+
+    async saveConfig(key, config) {
+      try {
+        const classNumber = key.split('/').pop();
+        if (!classNumber) {
+          return formatError('请先设置班号', 'CONFIG_ERROR');
+        }
+
+        const storageKey = `config_${classNumber}`;
+        localStorage.setItem(storageKey, JSON.stringify(config));
+        return formatResponse(null, '保存成功');
+      } catch (error) {
+        return formatError('保存本地配置失败');
+      }
+    }
+  },
+
+  server: {
+    async loadData(key, date) {
+      try {
+        const res = await axios.get(`${key}/homework?date=${date}`);
+        if (res.data?.status === false) {
+          return formatError(res.data.msg || '获取数据失败', 'SERVER_ERROR');
+        }
+        return formatResponse(res.data);
+      } catch (error) {
+        return formatError(
+          error.response?.data?.message || '服务器连接失败',
+          'NETWORK_ERROR'
+        );
+      }
+    },
+
+    async saveData(key, data) {
+      try {
+        await axios.post(`${key}/homework`, data);
+        return formatResponse(null, '保存成功');
+      } catch (error) {
+        return formatError(
+          error.response?.data?.message || '保存失败',
+          'SAVE_ERROR'
+        );
+      }
+    },
+
+    async loadConfig(key) {
+      try {
+        const res = await axios.get(`${key}/config`);
+        if (res.data?.status === false) {
+          return formatError(res.data.msg || '获取配置失败', 'SERVER_ERROR');
+        }
+        return formatResponse(res.data);
+      } catch (error) {
+        return formatError(
+          error.response?.data?.message || '服务器连接失败',
+          'NETWORK_ERROR'
+        );
+      }
+    },
+
+    async saveConfig(key, config) {
+      try {
+        const res = await axios.post(`${key}/config`, config);
+        if (res.data?.status === false) {
+          return formatError(res.data.msg || '保存失败', 'SAVE_ERROR');
+        }
+        return formatResponse(null, '保存成功');
+      } catch (error) {
+        return formatError(
+          error.response?.data?.message || '保存失败',
+          'SAVE_ERROR'
+        );
+      }
+    }
+  }
+};
+
+export default {
+  loadData: (provider, key, date) => providers[provider]?.loadData(key, date),
+  saveData: (provider, key, data, date) => providers[provider]?.saveData(key, data, date),
+  loadConfig: (provider, key) => providers[provider]?.loadConfig(key),
+  saveConfig: (provider, key, config) => providers[provider]?.saveConfig(key, config)
+};
+
+export const ErrorCodes = {
+  NOT_FOUND: '数据不存在',
+  NETWORK_ERROR: '网络连接失败',
+  SERVER_ERROR: '服务器错误',
+  SAVE_ERROR: '保存失败',
+  CONFIG_ERROR: '配置错误',
+  UNKNOWN_ERROR: '未知错误'
+};
diff --git a/src/utils/debounce.js b/src/utils/debounce.js
new file mode 100644
index 0000000..e0b1fc2
--- /dev/null
+++ b/src/utils/debounce.js
@@ -0,0 +1,27 @@
+export function debounce(fn, delay) {
+  let timer = null;
+  return function (...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+export function throttle(fn, delay) {
+  let timer = null;
+  let last = 0;
+  return function (...args) {
+    const now = Date.now();
+    if (now - last < delay) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        last = now;
+        fn.apply(this, args);
+      }, delay);
+    } else {
+      last = now;
+      fn.apply(this, args);
+    }
+  };
+}
diff --git a/src/utils/message.js b/src/utils/message.js
new file mode 100644
index 0000000..4d73f98
--- /dev/null
+++ b/src/utils/message.js
@@ -0,0 +1,153 @@
+const messages = [];
+let snackbarCallback = null;
+let logCallback = null;
+
+const MessageType = {
+  SUCCESS: 'success',
+  ERROR: 'error',
+  INFO: 'info',
+  WARNING: 'warning'
+};
+
+const defaultOptions = {
+  timeout: 3000,
+  showSnackbar: true,
+  addToLog: true
+};
+
+const STORAGE_KEY = 'homeworkpage_messages';
+const MAX_MESSAGES = 100; // 最大消息数量
+const MAX_STORAGE_SIZE = 1024 * 1024; // 1MB 存储限制
+
+// 加载保存的消息
+function loadStoredMessages() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      messages.push(...JSON.parse(stored));
+    }
+  } catch (error) {
+    console.error('加载消息历史失败:', error);
+  }
+}
+
+// 清理旧消息
+function cleanOldMessages() {
+  if (messages.length > MAX_MESSAGES) {
+    messages.splice(MAX_MESSAGES);
+  }
+}
+
+// 检查存储大小
+function checkStorageSize(data) {
+  try {
+    const size = new Blob([data]).size;
+    return size <= MAX_STORAGE_SIZE;
+  } catch (error) {
+    console.error('检查存储大小失败:', error);
+    return false;
+  }
+}
+
+// 保存消息到localStorage
+function saveMessages() {
+  try {
+    cleanOldMessages();
+    const data = JSON.stringify(messages);
+
+    if (!checkStorageSize(data)) {
+      // 如果数据太大，删除一半的旧消息
+      messages.splice(Math.floor(messages.length / 2));
+      return saveMessages();
+    }
+
+    localStorage.setItem(STORAGE_KEY, data);
+  } catch (error) {
+    if (error.name === 'QuotaExceededError') {
+      // 如果存储空间不足，清理一些旧消息再试
+      messages.splice(Math.floor(messages.length / 2));
+      return saveMessages();
+    }
+    console.error('保存消息历史失败:', error);
+  }
+}
+
+function createMessage(type, title, content = '', options = {}) {
+  const msgOptions = { ...defaultOptions, ...options };
+  const message = {
+    id: Date.now() + Math.random(),
+    type,
+    title,
+    content: content.substring(0, 500), // 限制内容长度
+    timestamp: new Date(),
+    read: false
+  };
+
+  if (msgOptions.addToLog) {
+    messages.unshift(message); // 新消息添加到开头
+    cleanOldMessages();
+    saveMessages();
+    logCallback?.(messages);
+  }
+
+  if (msgOptions.showSnackbar) {
+    snackbarCallback?.(message);
+  }
+
+  return message;
+}
+
+// 添加防抖函数实现
+function debounce(fn, delay) {
+  let timer = null;
+  return function (...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+export default {
+  install: (app) => {
+    app.config.globalProperties.$message = {
+      success: (title, content, options) => createMessage(MessageType.SUCCESS, title, content, options),
+      error: (title, content, options) => createMessage(MessageType.ERROR, title, content, options),
+      info: (title, content, options) => createMessage(MessageType.INFO, title, content, options),
+      warning: (title, content, options) => createMessage(MessageType.WARNING, title, content, options),
+    };
+  },
+  onSnackbar: (callback) => { snackbarCallback = callback; },
+  onLog: (callback) => { logCallback = callback; },
+  getMessages: () => [...messages],
+  clearMessages: () => {
+    messages.length = 0;
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch (error) {
+      console.error('清除消息历史失败:', error);
+    }
+  },
+  MessageType,
+  markAsRead: (messageId) => {
+    const message = messages.find(m => m.id === messageId);
+    if (message) {
+      message.read = true;
+      saveMessages();
+      logCallback?.(messages);
+    }
+  },
+  deleteMessage: (messageId) => {
+    const index = messages.findIndex(m => m.id === messageId);
+    if (index !== -1) {
+      messages.splice(index, 1);
+      saveMessages();
+      logCallback?.(messages);
+    }
+  },
+  getUnreadCount: () => messages.filter(m => !m.read).length,
+  initialize: () => {
+    loadStoredMessages();
+  },
+  debounce,  // 导出防抖函数
+};
diff --git a/src/utils/settings.js b/src/utils/settings.js
index aacc3b4..b6c9ed1 100644
--- a/src/utils/settings.js
+++ b/src/utils/settings.js
@@ -6,6 +6,7 @@
  * @property {Function} [validate] - 可选的验证函数
  * @property {string} [description] - 配置项描述
  * @property {string} [legacyKey] - 旧版本localStorage键名(用于迁移)
+ * @property {boolean} [requireDeveloper] - 是否需要开发者选项启用
  */
 
 // 存储所有设置的localStorage键名
@@ -17,14 +18,9 @@ const SETTINGS_STORAGE_KEY = 'homeworkpage_settings';
  */
 const settingsDefinitions = {
   // 显示设置
-  // 'display.showEmptySubjects': {
-  //   type: 'boolean',
-  //   default: true,
-  //   description: '是否在主界面显示没有作业内容的科目'
-  // },
   'display.emptySubjectDisplay': {
     type: 'string',
-    default: 'card',
+    default: 'button',  // 修改默认值为 'button'
     validate: value => ['card', 'button'].includes(value),
     description: '空科目的显示方式：卡片或按钮'
   },
@@ -33,8 +29,8 @@ const settingsDefinitions = {
     default: true,
     description: '是否启用动态排序以优化显示效果'
   },
-  
-  // 服务器设置
+
+  // 服务器设置（合并了数据提供者设置）
   'server.domain': {
     type: 'string',
     default: '',
@@ -45,7 +41,13 @@ const settingsDefinitions = {
     type: 'string',
     default: '',
     validate: value => /^[A-Za-z0-9]*$/.test(value),
-    description: '班级编号'
+    description: '班级编号(无论使用哪种存储方式都需要设置)'
+  },
+  'server.provider': {  // 新增项
+    type: 'string',
+    default: 'server',
+    validate: value => ['server', 'localStorage'].includes(value),
+    description: '数据提供者，用于决定数据存储方式'
   },
 
   // 刷新设置
@@ -79,6 +81,46 @@ const settingsDefinitions = {
     type: 'boolean',
     default: true,
     description: '编辑前是否自动刷新'
+  },
+
+  // 开发者选项
+  'developer.enabled': {
+    type: 'boolean',
+    default: false,
+    description: '是否启用开发者选项'
+  },
+  'developer.showDebugConfig': {
+    type: 'boolean',
+    default: false,
+    description: '是否显示调试配置'
+  },
+
+  // 消息设置
+  'message.showSidebar': {
+    type: 'boolean',
+    default: true,
+    description: '是否显示消息记录侧栏',
+    requireDeveloper: true  // 添加标记
+  },
+  'message.maxActiveMessages': {
+    type: 'number',
+    default: 5,
+    validate: value => value >= 1 && value <= 10,
+    description: '同时显示的最大消息数量',
+    requireDeveloper: true
+  },
+  'message.timeout': {
+    type: 'number',
+    default: 5000,
+    validate: value => value >= 1000 && value <= 30000,
+    description: '消息自动关闭时间(毫秒)',
+    requireDeveloper: true
+  },
+  'message.saveHistory': {
+    type: 'boolean',
+    default: true,
+    description: '是否保存消息历史记录',
+    requireDeveloper: true
   }
 };
 
@@ -102,14 +144,14 @@ function loadSettings() {
     console.error('加载设置失败:', error);
     settingsCache = {};
   }
-  
+
   // 确保所有设置项都有值（使用默认值填充）
   for (const [key, definition] of Object.entries(settingsDefinitions)) {
     if (!(key in settingsCache)) {
       settingsCache[key] = definition.default;
     }
   }
-  
+
   return settingsCache;
 }
 
@@ -175,17 +217,33 @@ function getSetting(key) {
   if (!settingsCache) {
     loadSettings();
   }
-  
+
   const definition = settingsDefinitions[key];
   if (!definition) {
     console.warn(`未定义的设置项: ${key}`);
     return null;
   }
 
+  // 添加对开发者选项依赖的检查
+  if (definition.requireDeveloper && !settingsCache['developer.enabled']) {
+    return definition.default;
+  }
+
   const value = settingsCache[key];
   return value !== undefined ? value : definition.default;
 }
 
+// 添加设置变更日志函数
+function logSettingsChange(key, oldValue, newValue) {
+  if (settingsCache['developer.enabled'] && settingsCache['developer.showDebugConfig']) {
+    console.log(`[Settings] ${key}:`, {
+      old: oldValue,
+      new: newValue,
+      time: new Date().toLocaleTimeString()
+    });
+  }
+}
+
 /**
  * 设置配置项的值
  * @param {string} key - 设置项键名
@@ -199,7 +257,14 @@ function setSetting(key, value) {
     return false;
   }
 
+  // 添加对开发者选项依赖的检查
+  if (definition.requireDeveloper && !settingsCache['developer.enabled']) {
+    console.warn(`设置项 ${key} 需要启用开发者选项`);
+    return false;
+  }
+
   try {
+    const oldValue = settingsCache[key];
     // 类型转换
     if (typeof value !== definition.type) {
       value = definition.type === 'boolean' ? Boolean(value) :
@@ -218,6 +283,7 @@ function setSetting(key, value) {
 
     settingsCache[key] = value;
     saveSettings();
+    logSettingsChange(key, oldValue, value);
 
     // 为了保持向后兼容，同时更新旧的localStorage键
     const legacyKey = definition.legacyKey;
@@ -274,7 +340,7 @@ function watchSettings(callback) {
       callback(settingsCache);
     }
   };
-  
+
   window.addEventListener('storage', handler);
   return () => window.removeEventListener('storage', handler);
 }
@@ -289,4 +355,4 @@ export {
   resetSetting,
   resetAllSettings,
   watchSettings
-}; 
\ No newline at end of file
+};

From 1a621f456ece4d1da1e5e3da15328c2ce71c641b Mon Sep 17 00:00:00 2001
From: SunWuyuan <sun@wuyuan.dev>
Date: Sat, 8 Mar 2025 21:54:12 +0800
Subject: [PATCH 2/2] 1

---
 src/App.vue           | 22 +++++++++++++++++++++-
 src/utils/settings.js |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2caa78e..2c216f9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,11 @@
 <template>
   <v-app>
     <v-main>
-      <router-view />
+      <router-view v-slot="{ Component, route }">
+        <transition name="md3" mode="out-in">
+          <component :is="Component" :key="route.path" />
+        </transition>
+      </router-view>
     </v-main>
   </v-app>
 </template>
@@ -9,3 +13,19 @@
 <script setup>
   //
 </script>
+<style>
+
+.md3-enter-active,
+.md3-leave-active {
+  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.md3-enter-from {
+  opacity: 0;
+  transform: translateX(0.5vw);
+}
+
+.md3-leave-to {
+  opacity: 0;
+  transform: translateX(-0.5vw);
+}</style>
diff --git a/src/utils/settings.js b/src/utils/settings.js
index b6c9ed1..eff982b 100644
--- a/src/utils/settings.js
+++ b/src/utils/settings.js
@@ -45,7 +45,7 @@ const settingsDefinitions = {
   },
   'server.provider': {  // 新增项
     type: 'string',
-    default: 'server',
+    default: 'localStorage',
     validate: value => ['server', 'localStorage'].includes(value),
     description: '数据提供者，用于决定数据存储方式'
   },