1

2025-03-16 10:18:47 +08:00
parent 69c67a7e52
commit ec9f355f1b
7 changed files with 176 additions and 108 deletions
@@ -10,17 +10,23 @@
      </template>
      <v-card-title class="text-h6">学生列表</v-card-title>
      <template #append>
-        <unsaved-warning
-          :show="unsavedChanges"
-          message="有未保存的更改"
-        />
+        <unsaved-warning :show="unsavedChanges" message="有未保存的更改" />
+        <v-btn
+          prepend-icon="mdi-sort-alphabetical-variant"
+          variant="text"
+          class="mr-2"
+          @click="sortStudentsByPinyin"
+          :disabled="modelValue.list.length === 0"
+        >
+          按姓名首字母排序
+        </v-btn>
        <v-btn
          :color="modelValue.advanced ? 'primary' : undefined"
          variant="text"
          prepend-icon="mdi-code-braces"
          @click="toggleAdvanced"
        >
-          {{ modelValue.advanced ? '返回基础编辑' : '高级编辑' }}
+          {{ modelValue.advanced ? "返回基础编辑" : "高级编辑" }}
        </v-btn>
      </template>
    </v-card-item>
@@ -33,13 +39,7 @@
        class="mb-4"
      />

-      <v-alert
-        v-if="error"
-        type="error"
-        variant="tonal"
-        closable
-        class="mb-4"
-      >
+      <v-alert v-if="error" type="error" variant="tonal" closable class="mb-4">
        {{ error }}
      </v-alert>

@@ -83,7 +83,7 @@
              <v-hover v-slot="{ isHovering, props }">
                <v-card
                  v-bind="props"
-                  :elevation="isMobile ? 1 : (isHovering ? 4 : 1)"
+                  :elevation="isMobile ? 1 : isHovering ? 4 : 1"
                  class="student-card"
                  border
                >
@@ -145,7 +145,10 @@
                      {{ student }}
                    </span>

-                    <div class="d-flex gap-1 action-buttons" :class="{ 'opacity-100': isHovering || isMobile }">
+                    <div
+                      class="d-flex gap-1 action-buttons"
+                      :class="{ 'opacity-100': isHovering || isMobile }"
+                    >
                      <v-btn
                        icon="mdi-pencil"
                        variant="text"
@@ -213,13 +216,14 @@
 </template>

 <script>
-import UnsavedWarning from '../common/UnsavedWarning.vue'
-import '@/styles/warnings.scss'
+import UnsavedWarning from "../common/UnsavedWarning.vue";
+import "@/styles/warnings.scss";
+import { pinyin } from "pinyin-pro";

 export default {
-  name: 'StudentListCard',
+  name: "StudentListCard",
  components: {
-    UnsavedWarning
+    UnsavedWarning,
  },
  props: {
    modelValue: {
@@ -227,27 +231,27 @@ export default {
      required: true,
      default: () => ({
        list: [],
-        text: '',
-        advanced: false
-      })
+        text: "",
+        advanced: false,
+      }),
    },
    loading: Boolean,
    error: String,
    isMobile: Boolean,
-    unsavedChanges: Boolean
+    unsavedChanges: Boolean,
  },

  data() {
    return {
-      newStudentName: '',
+      newStudentName: "",
      editState: {
        index: -1,
-        name: ''
-      }
-    }
+        name: "",
+      },
+    };
  },

-  emits: ['update:modelValue', 'save', 'reload'],
+  emits: ["update:modelValue", "save", "reload"],

  computed: {
    text: {
@@ -256,8 +260,8 @@ export default {
      },
      set(value) {
        this.handleTextInput(value);
-      }
-    }
+      },
+    },
  },

  methods: {
@@ -266,15 +270,15 @@ export default {
      const advanced = !this.modelValue.advanced;
      this.updateModelValue({
        advanced,
-        text: advanced ? this.modelValue.list.join('\n') : this.modelValue.text,
-        list: this.modelValue.list
+        text: advanced ? this.modelValue.list.join("\n") : this.modelValue.text,
+        list: this.modelValue.list,
      });
    },

    updateModelValue(newData) {
-      this.$emit('update:modelValue', {
+      this.$emit("update:modelValue", {
        ...this.modelValue,
-        ...newData
+        ...newData,
      });
    },

@@ -286,16 +290,16 @@ export default {
      const newList = [...this.modelValue.list, name];
      this.updateModelValue({
        list: newList,
-        text: newList.join('\n')
+        text: newList.join("\n"),
      });
-      this.newStudentName = '';
+      this.newStudentName = "";
    },

    removeStudent(index) {
      const newList = this.modelValue.list.filter((_, i) => i !== index);
      this.updateModelValue({
        list: newList,
-        text: newList.join('\n')
+        text: newList.join("\n"),
      });
    },

@@ -303,9 +307,9 @@ export default {
      const newList = [...this.modelValue.list];
      let targetIndex;

-      if (direction === 'top') {
+      if (direction === "top") {
        targetIndex = 0;
-      } else if (direction === 'up') {
+      } else if (direction === "up") {
        targetIndex = index - 1;
      } else {
        targetIndex = index + 1;
@@ -317,7 +321,7 @@ export default {

        this.updateModelValue({
          list: newList,
-          text: newList.join('\n')
+          text: newList.join("\n"),
        });
      }
    },
@@ -336,9 +340,9 @@ export default {

      this.updateModelValue({
        list: newList,
-        text: newList.join('\n')
+        text: newList.join("\n"),
      });
-      this.editState = { index: -1, name: '' };
+      this.editState = { index: -1, name: "" };
    },

    handleClick(index, student) {
@@ -349,17 +353,30 @@ export default {

    handleTextInput(value) {
      const list = value
-        .split('\n')
-        .map(s => s.trim())
-        .filter(s => s);
+        .split("\n")
+        .map((s) => s.trim())
+        .filter((s) => s);

      this.updateModelValue({
        text: value,
-        list
+        list,
      });
-    }
-  }
-}
+    },
+
+    sortStudentsByPinyin() {
+      const newList = [...this.modelValue.list].sort((a, b) => {
+        const pinyinA = pinyin(a, { toneType: "none" });
+        const pinyinB = pinyin(b, { toneType: "none" });
+        return pinyinA.localeCompare(pinyinB);
+      });
+
+      this.updateModelValue({
+        list: newList,
+        text: newList.join("\n"),
+      });
+    },
+  },
+};
 </script>

 <style scoped>
@@ -379,7 +396,8 @@ export default {
 }

@keyframes pulse-warning {
-  0%, 100% {
+  0%,
+  100% {
    border-color: rgba(var(--v-theme-warning), 1) !important;
  }
  50% {
@@ -1,8 +1,5 @@
 <template>
-  <settings-card
-    title="数据源设置"
-    icon="mdi-database-cog"
-  >
+  <settings-card title="数据源设置" icon="mdi-database-cog">
    <v-list>
      <!-- 服务器模式设置 -->
      <template v-if="currentProvider === 'server'">
@@ -31,7 +28,9 @@
            <v-icon icon="mdi-database" class="mr-3" />
          </template>
          <v-list-item-title>清除数据库缓存</v-list-item-title>
-          <v-list-item-subtitle>这将清除所有IndexedDB中的数据</v-list-item-subtitle>
+          <v-list-item-subtitle
+            >这将清除所有IndexedDB中的数据</v-list-item-subtitle
+          >
          <template #append>
            <v-btn
              color="error"
@@ -49,11 +48,7 @@
          </template>
          <v-list-item-title>导出数据库</v-list-item-title>
          <template #append>
-            <v-btn
-              variant="tonal"
-              size="small"
-              @click="exportData"
-            >
+            <v-btn variant="tonal" size="small" @click="exportData">
              导出
            </v-btn>
          </template>
@@ -68,8 +63,12 @@
        <v-card-text>{{ confirmMessage }}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
-          <v-btn color="grey" variant="text" @click="confirmDialog = false">取消</v-btn>
-          <v-btn color="error" variant="tonal" @click="handleConfirm">确认</v-btn>
+          <v-btn color="grey" variant="text" @click="confirmDialog = false"
+            >取消</v-btn
+          >
+          <v-btn color="error" variant="tonal" @click="handleConfirm"
+            >确认</v-btn
+          >
        </v-card-actions>
      </v-card>
    </v-dialog>
@@ -77,54 +76,59 @@
 </template>

 <script>
-import SettingsCard from '@/components/SettingsCard.vue';
-import { getSetting } from '@/utils/settings';
-
+import SettingsCard from "@/components/SettingsCard.vue";
+import { getSetting } from "@/utils/settings";
+import axios from "axios";
 export default {
-  name: 'DataProviderSettingsCard',
+  name: "DataProviderSettingsCard",
  components: { SettingsCard },

  data() {
    return {
      loading: false,
+      serverchecktime: {},
      confirmDialog: false,
-      confirmTitle: '',
-      confirmMessage: '',
-      confirmAction: null
+      confirmTitle: "",
+      confirmMessage: "",
+      confirmAction: null,
    };
  },

  computed: {
    currentProvider() {
-      return getSetting('server.provider');
-    }
+      return getSetting("server.provider");
+    },
  },

  methods: {
    async checkServerConnection() {
      this.loading = true;
+      this.serverchecktime = new Date();
      try {
-        const domain = getSetting('server.domain');
-        const response = await fetch(`${domain}`, {
-          method: 'GET',
-          headers: { 'Accept': 'application/json' }
+        const domain = getSetting("server.domain");
+        const response = await axios.get(`${domain}/api/test`, {
+          method: "GET",
+          headers: { Accept: "application/json" },
        });

-        if (response.ok) {
-          this.$message.success('连接成功', '服务器连接正常');
+        if (response.data.status === "success") {
+          this.$message.success(
+            "连接成功",
+            "服务器连接正常 延迟" + (new Date() - this.serverchecktime) + "ms"
+          );
        } else {
-          throw new Error('服务器响应异常');
+          throw new Error("服务器响应异常");
        }
      } catch (error) {
-        this.$message.error('连接失败', error.message || '无法连接到服务器');
+        this.$message.error("连接失败", error.message || "无法连接到服务器");
      } finally {
        this.loading = false;
      }
    },

    confirmClearLocalStorage() {
-      this.confirmTitle = '确认清除';
-      this.confirmMessage = '此操作将清除所有本地存储的数据，确定要继续吗？';
+      this.confirmTitle = "确认清除";
+      this.confirmMessage = "此操作将清除所有本地存储的数据，确定要继续吗？";
      this.confirmAction = this.clearLocalStorage;
      this.confirmDialog = true;
    },
@@ -132,35 +136,35 @@ export default {
    clearLocalStorage() {
      try {
        localStorage.clear();
-        this.$message.success('清除成功', '本地存储数据已清除');
+        this.$message.success("清除成功", "本地存储数据已清除");
        this.confirmDialog = false;
      } catch (error) {
-        this.$message.error('清除失败', error.message);
+        this.$message.error("清除失败", error.message);
      }
    },

    confirmClearIndexedDB() {
-      this.confirmTitle = '确认清除';
-      this.confirmMessage = '此操作将清除所有IndexedDB中的数据，确定要继续吗？';
+      this.confirmTitle = "确认清除";
+      this.confirmMessage = "此操作将清除所有IndexedDB中的数据，确定要继续吗？";
      this.confirmAction = this.clearIndexedDB;
      this.confirmDialog = true;
    },

    async clearIndexedDB() {
      try {
-        const DBName = 'HomeworkDB';
+        const DBName = "HomeworkDB";
        // 删除整个数据库
        await window.indexedDB.deleteDatabase(DBName);
-        this.$message.success('清除成功', '数据库缓存已清除');
+        this.$message.success("清除成功", "数据库缓存已清除");
        this.confirmDialog = false;
      } catch (error) {
-        this.$message.error('清除失败', error.message);
+        this.$message.error("清除失败", error.message);
      }
    },

    async exportData() {
      try {
-        const DBName = 'HomeworkDB';
+        const DBName = "HomeworkDB";
        const data = { indexedDB: {} };

        // 打开数据库
@@ -175,7 +179,7 @@ export default {

        // 导出每个存储对象的数据
        for (const storeName of stores) {
-          const transaction = db.transaction(storeName, 'readonly');
+          const transaction = db.transaction(storeName, "readonly");
          const store = transaction.objectStore(storeName);

          // 获取存储对象中的所有数据
@@ -189,19 +193,21 @@ export default {
        }

        // 创建并下载文件
-        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const blob = new Blob([JSON.stringify(data, null, 2)], {
+          type: "application/json",
+        });
        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        const timestamp = new Date().toISOString().split('T')[0];
+        const a = document.createElement("a");
+        const timestamp = new Date().toISOString().split("T")[0];
        a.href = url;
        a.download = `homework-indexeddb-${timestamp}.json`;
        a.click();
        URL.revokeObjectURL(url);

-        this.$message.success('导出成功', 'IndexedDB数据已导出');
+        this.$message.success("导出成功", "IndexedDB数据已导出");
      } catch (error) {
-        console.error('导出失败:', error);
-        this.$message.error('导出失败', error.message || '无法导出数据库数据');
+        console.error("导出失败:", error);
+        this.$message.error("导出失败", error.message || "无法导出数据库数据");
      }
    },

@@ -209,7 +215,7 @@ export default {
      if (this.confirmAction) {
        this.confirmAction();
      }
-    }
-  }
+    },
+  },
 };
 </script>
@@ -79,13 +79,39 @@ export default {
    },
  },
  methods: {
-    save() {
-      Object.entries(this.localSettings).forEach(([key, value]) => {
-        setSetting(`server.${key}`, value);
-      });
-      this.originalSettings = { ...this.localSettings };
-      this.$emit("saved");
-      window.location.reload();
+    async save() {
+      try {
+        // 先保存设置
+        Object.entries(this.localSettings).forEach(([key, value]) => {
+          const success = setSetting(`server.${key}`, value);
+          if (!success) {
+            throw new Error(`保存设置 ${key} 失败`);
+          }
+        });
+
+        // 如果切换到服务器模式，验证服务器连接
+        if (this.localSettings.provider === 'server' && this.localSettings.domain) {
+          const testUrl = `${this.localSettings.domain.replace(/\/$/, '')}/api/test`;
+          try {
+            const response = await fetch(testUrl);
+            if (!response.ok) {
+              throw new Error('服务器连接测试失败');
+            }
+          } catch (error) {
+            throw new Error('无法连接到服务器，请检查域名设置');
+          }
+        }
+
+        this.originalSettings = { ...this.localSettings };
+        this.$emit('saved');
+
+        // 延迟刷新页面，让用户看到保存成功的提示
+        setTimeout(() => {
+          //window.location.reload();
+        }, 1000);
+      } catch (error) {
+        this.$message?.error('保存失败', error.message);
+      }
    },
    reset() {
      this.localSettings = { ...this.originalSettings };