111

src/components/settings/StudentListCard.vue

@@ -190,7 +190,7 @@
             prepend-icon="mdi-content-save"
             size="large"
             :loading="loading"
-            :disabled="loading || !unsavedChanges"
+            :disabled="loading"
             @click="$emit('save')"
           >
             保存名单
@@ -201,7 +201,7 @@
             prepend-icon="mdi-refresh"
             size="large"
             :loading="loading"
-            :disabled="loading || !unsavedChanges"
+            :disabled="loading"
             @click="$emit('reload')"
           >
             重载名单

src/components/settings/cards/DisplaySettingsCard.vue

@@ -0,0 +1,121 @@
+<template>
+  <settings-card
+    title="显示设置"
+    icon="mdi-monitor-dashboard"
+  >
+    <v-form v-model="isValid" @submit.prevent="save">
+      <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="localSettings.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="localSettings.dynamicSort"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <v-divider class="my-2" />
+
+        <v-list-item>
+          <template #prepend>
+            <v-icon icon="mdi-dice-multiple" class="mr-3" />
+          </template>
+          <v-list-item-title>随机点名按钮</v-list-item-title>
+          <v-list-item-subtitle>指向IslandCaller的链接</v-list-item-subtitle>
+          <template #append>
+            <v-switch
+              v-model="localSettings.showRandomButton"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <div class="d-flex gap-2 mt-4">
+          <v-btn
+            color="primary"
+            type="submit"
+            :disabled="!hasChanges || !isValid"
+            prepend-icon="mdi-content-save"
+          >
+            保存更改
+          </v-btn>
+          <v-btn
+            variant="outlined"
+            @click="reset"
+            :disabled="!hasChanges"
+          >
+            重置
+          </v-btn>
+        </div>
+      </v-list>
+    </v-form>
+  </settings-card>
+</template>
+
+<script>
+import SettingsCard from '@/components/SettingsCard.vue';
+import { getSetting, setSetting } from '@/utils/settings';
+
+export default {
+  name: 'DisplaySettingsCard',
+  components: { SettingsCard },
+  data() {
+    const settings = {
+      emptySubjectDisplay: getSetting('display.emptySubjectDisplay'),
+      dynamicSort: getSetting('display.dynamicSort'),
+      showRandomButton: getSetting('display.showRandomButton')
+    };
+
+    return {
+      localSettings: { ...settings },
+      originalSettings: settings,
+      isValid: true
+    };
+  },
+  computed: {
+    hasChanges() {
+      return JSON.stringify(this.localSettings) !== JSON.stringify(this.originalSettings);
+    }
+  },
+  methods: {
+    save() {
+      Object.entries(this.localSettings).forEach(([key, value]) => {
+        setSetting(`display.${key}`, value);
+      });
+      this.originalSettings = { ...this.localSettings };
+      this.$emit('saved');
+    },
+    reset() {
+      this.localSettings = { ...this.originalSettings };
+    }
+  }
+};
+</script>

src/components/settings/cards/EditSettingsCard.vue

@@ -0,0 +1,135 @@
+<template>
+  <settings-card
+    title="编辑设置"
+    icon="mdi-pencil-cog"
+  >
+    <v-form v-model="isValid" @submit.prevent="save">
+      <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="localSettings.autoSave"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <v-divider v-if="localSettings.autoSave" class="my-2" />
+
+        <v-list-item v-if="localSettings.autoSave">
+          <template #prepend>
+            <v-icon icon="mdi-calendar-lock" 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="localSettings.blockNonTodayAutoSave"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <v-divider class="my-2" />
+
+        <v-list-item>
+          <template #prepend>
+            <v-icon icon="mdi-calendar-alert" 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="localSettings.confirmNonTodaySave"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <v-divider class="my-2" />
+
+        <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="localSettings.refreshBeforeEdit"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <div class="d-flex gap-2 mt-4">
+          <v-btn
+            color="primary"
+            type="submit"
+            :disabled="!hasChanges || !isValid"
+            prepend-icon="mdi-content-save"
+          >
+            保存更改
+          </v-btn>
+          <v-btn
+            variant="outlined"
+            @click="reset"
+            :disabled="!hasChanges"
+          >
+            重置
+          </v-btn>
+        </div>
+      </v-list>
+    </v-form>
+  </settings-card>
+</template>
+
+<script>
+import SettingsCard from '@/components/SettingsCard.vue';
+import { getSetting, setSetting } from '@/utils/settings';
+
+export default {
+  name: 'EditSettingsCard',
+  components: { SettingsCard },
+  data() {
+    const settings = {
+      autoSave: getSetting('edit.autoSave'),
+      blockNonTodayAutoSave: getSetting('edit.blockNonTodayAutoSave'),
+      confirmNonTodaySave: getSetting('edit.confirmNonTodaySave'),
+      refreshBeforeEdit: getSetting('edit.refreshBeforeEdit')
+    };
+
+    return {
+      localSettings: { ...settings },
+      originalSettings: settings,
+      isValid: true
+    };
+  },
+  computed: {
+    hasChanges() {
+      return JSON.stringify(this.localSettings) !== JSON.stringify(this.originalSettings);
+    }
+  },
+  methods: {
+    save() {
+      Object.entries(this.localSettings).forEach(([key, value]) => {
+        setSetting(`edit.${key}`, value);
+      });
+      this.originalSettings = { ...this.localSettings };
+      this.$emit('saved');
+    },
+    reset() {
+      this.localSettings = { ...this.originalSettings };
+    }
+  }
+};
+</script>

src/components/settings/cards/RefreshSettingsCard.vue

@@ -0,0 +1,102 @@
+<template>
+  <settings-card
+    title="刷新设置"
+    icon="mdi-refresh-circle"
+  >
+    <v-form v-model="isValid" @submit.prevent="save">
+      <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="localSettings.auto"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <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="localSettings.interval"
+              type="number"
+              min="1"
+              max="60"
+              density="comfortable"
+              hide-details
+            />
+          </template>
+        </v-list-item>
+
+        <div class="d-flex gap-2 mt-4">
+          <v-btn
+            color="primary"
+            type="submit"
+            :disabled="!hasChanges || !isValid"
+            prepend-icon="mdi-content-save"
+          >
+            保存更改
+          </v-btn>
+          <v-btn
+            variant="outlined"
+            @click="reset"
+            :disabled="!hasChanges"
+          >
+            重置
+          </v-btn>
+        </div>
+      </v-list>
+    </v-form>
+  </settings-card>
+</template>
+
+<script>
+import SettingsCard from '@/components/SettingsCard.vue';
+import { getSetting, setSetting } from '@/utils/settings';
+
+export default {
+  name: 'RefreshSettingsCard',
+  components: { SettingsCard },
+  data() {
+    const settings = {
+      auto: getSetting('refresh.auto'),
+      interval: getSetting('refresh.interval')
+    };
+
+    return {
+      localSettings: { ...settings },
+      originalSettings: settings,
+      isValid: true
+    };
+  },
+  computed: {
+    hasChanges() {
+      return JSON.stringify(this.localSettings) !== JSON.stringify(this.originalSettings);
+    }
+  },
+  methods: {
+    save() {
+      Object.entries(this.localSettings).forEach(([key, value]) => {
+        setSetting(`refresh.${key}`, value);
+      });
+      this.originalSettings = { ...this.localSettings };
+      this.$emit('saved');
+    },
+    reset() {
+      this.localSettings = { ...this.originalSettings };
+    }
+  }
+};
+</script>

src/components/settings/cards/ServerSettingsCard.vue

@@ -0,0 +1,95 @@
+<template>
+  <settings-card title="数据源设置" icon="mdi-database" :loading="loading">
+    <v-form v-model="isValid" @submit.prevent="save">
+      <v-select
+        v-model="localSettings.provider"
+        :items="dataProviders"
+        label="数据提供者"
+        class="mb-4"
+      />
+      <v-expand-transition>
+        <div v-if="localSettings.provider === 'server'">
+          <v-text-field
+            v-model="localSettings.domain"
+            label="服务器域名"
+            placeholder="例如: http://example.com"
+            prepend-inner-icon="mdi-web"
+          />
+        </div>
+      </v-expand-transition>
+
+      <v-text-field
+        v-model="localSettings.classNumber"
+        label="班号"
+        placeholder="例如: 1 或 A"
+        prepend-inner-icon="mdi-account-group"
+        persistent-hint
+      />
+
+      <div class="d-flex gap-2 mt-4">
+        <v-btn
+          color="primary"
+          type="submit"
+          :disabled="!hasChanges || !isValid"
+          prepend-icon="mdi-content-save"
+        >
+          保存更改
+        </v-btn>
+        <v-btn variant="outlined" @click="reset" :disabled="!hasChanges">
+          重置
+        </v-btn>
+      </div>
+    </v-form>
+  </settings-card>
+</template>
+
+<script>
+import SettingsCard from "@/components/SettingsCard.vue";
+import { getSetting, setSetting } from "@/utils/settings";
+
+export default {
+  name: "ServerSettingsCard",
+  components: { SettingsCard },
+  props: {
+    loading: Boolean,
+  },
+  data() {
+    const settings = {
+      provider: getSetting("server.provider"),
+      domain: getSetting("server.domain"),
+      classNumber: getSetting("server.classNumber"),
+    };
+
+    return {
+      localSettings: { ...settings },
+      originalSettings: settings,
+      isValid: true,
+      dataProviders: [
+        { title: "服务器", value: "server" },
+        { title: "本地数据库", value: "indexedDB" },
+      ],
+    };
+  },
+  computed: {
+    hasChanges() {
+      return (
+        JSON.stringify(this.localSettings) !==
+        JSON.stringify(this.originalSettings)
+      );
+    },
+  },
+  methods: {
+    save() {
+      Object.entries(this.localSettings).forEach(([key, value]) => {
+        setSetting(`server.${key}`, value);
+      });
+      this.originalSettings = { ...this.localSettings };
+      this.$emit("saved");
+      window.location.reload();
+    },
+    reset() {
+      this.localSettings = { ...this.originalSettings };
+    },
+  },
+};
+</script>