feat: Enhance exam management features and add sensitive word filtering

- Implement global sensitive word filtering in HitokotoCard component. - Add a test button for Jinrishici API in HitokotoSettings component. - Introduce ConciseExamCard and ExamScheduleCard components for better exam display. - Add functionality to create and manage exam configurations in examschedule.vue. - Implement upcoming exam notifications in the main index page. - Create a new exam store for managing exam data and fetching exam details. - Add RelativeTimeDisplay component for displaying relative time in a user-friendly format.
2025-12-13 20:42:12 +08:00
parent d2efa19107
commit 61d8392d59
11 changed files with 1865 additions and 149 deletions
@@ -0,0 +1,161 @@
+<template>
+  <v-card
+    border
+    class="fill-height d-flex flex-column cursor-pointer hover-elevation"
+    elevation="0"
+    @click="$emit('click')"
+  >
+    <v-card-title
+      class="d-flex align-center py-2 px-3 bg-primary-lighten-5 text-subtitle-1 font-weight-bold"
+    >
+      <span class="text-truncate">{{ exam?.examName || "加载中..." }}</span>
+    </v-card-title>
+
+    <v-card-text class="flex-grow-1 pa-4 overflow-y-auto" :style="contentStyle">
+      <div v-if="loading" class="d-flex justify-center align-center py-4">
+        <v-progress-circular
+          indeterminate
+          size="24"
+          color="primary"
+        ></v-progress-circular>
+      </div>
+
+      <template v-else-if="exam">
+        <!--<div v-if="exam.message" class="text-caption text-grey mb-2 px-1">
+          {{ exam.message }}
+        </div>-->
+
+        <div class="d-flex flex-column">
+          <div v-for="(group, gIndex) in groupedExamInfos" :key="gIndex" class="mb-3">
+            <div class="text-subtitle-2 font-weight-bold text-primary mb-1">
+              <RelativeTimeDisplay :time="group.date" />
+            </div>
+            <div
+              v-for="(info, index) in group.infos"
+              :key="index"
+              class="d-flex align-center justify-space-between py-1 border-b-sm"
+              :class="{
+                'border-none': index === group.infos.length - 1,
+                'text-grey': isPast(info.end),
+              }"
+            >
+              <div class="font-weight-bold mr-2" style="font-size: 1.1em">
+                {{ info.name }}
+              </div>
+              <div
+                class="font-weight-medium text-grey-darken-2"
+                style="font-size: 0.85em"
+              >
+                {{ formatTimeOnly(info.start) }} -
+                {{ formatTimeOnly(info.end) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="text-center text-caption text-grey py-2">无法加载</div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { useExamStore } from "@/stores/examStore";
+import { mapState, mapActions } from "pinia";
+import RelativeTimeDisplay from "@/components/RelativeTimeDisplay.vue";
+
+export default {
+  name: "ConciseExamCard",
+  components: {
+    RelativeTimeDisplay,
+  },
+  props: {
+    examId: {
+      type: String,
+      required: true,
+    },
+    contentStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState(useExamStore, ["exams", "loadingDetails"]),
+    exam() {
+      return this.exams[this.examId];
+    },
+    loading() {
+      return this.loadingDetails[this.examId];
+    },
+    groupedExamInfos() {
+      if (!this.exam || !this.exam.examInfos) return [];
+
+      const sortedInfos = [...this.exam.examInfos].sort(
+        (a, b) => new Date(a.start) - new Date(b.start)
+      );
+      const groups = [];
+      let currentGroup = null;
+
+      sortedInfos.forEach((info) => {
+        const date = new Date(info.start);
+        const dateKey = date.toDateString();
+
+        if (!currentGroup || currentGroup.key !== dateKey) {
+          currentGroup = {
+            key: dateKey,
+            date: info.start,
+            infos: [],
+          };
+          groups.push(currentGroup);
+        }
+        currentGroup.infos.push(info);
+      });
+
+      return groups;
+    },
+  },
+  mounted() {
+    this.fetchExam(this.examId);
+  },
+  methods: {
+    ...mapActions(useExamStore, ["fetchExam"]),
+    formatTimeOnly(timeStr) {
+      if (!timeStr) return "";
+      try {
+        const date = new Date(timeStr);
+        const hours = date.getHours().toString().padStart(2, "0");
+        const minutes = date.getMinutes().toString().padStart(2, "0");
+        return `${hours}:${minutes}`;
+      } catch (e) {
+        return "";
+      }
+    },
+    isPast(timeStr) {
+      if (!timeStr) return false;
+      return new Date(timeStr) < new Date();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.gap-1 {
+  gap: 0px;
+}
+.border-b-sm {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+.border-none {
+  border-bottom: none;
+}
+.hover-elevation {
+  transition: box-shadow 0.2s;
+}
+.hover-elevation:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+}
+</style>
@@ -0,0 +1,113 @@
+<template>
+  <v-card class="fill-height d-flex flex-column rounded-xl" elevation="2">
+    <v-card-title class="d-flex align-center py-3 px-4 bg-primary text-white">
+      <v-icon class="mr-2">mdi-calendar-clock</v-icon>
+      <span class="text-truncate">{{ exam?.examName || '加载中...' }}</span>
+      <v-spacer></v-spacer>
+      <v-btn icon="mdi-close" variant="text" density="comfortable" @click="$emit('close')"></v-btn>
+    </v-card-title>
+
+    <v-card-text class="flex-grow-1 pa-4 overflow-y-auto" :style="contentStyle">
+      <div v-if="loading" class="d-flex justify-center align-center fill-height" style="min-height: 200px;">
+        <v-progress-circular indeterminate color="primary"></v-progress-circular>
+      </div>
+
+      <template v-else-if="exam">
+        <v-alert
+          v-if="exam.message"
+          color="info"
+          variant="tonal"
+          class="mb-4 text-body-1"
+          border="start"
+          density="compact"
+        >
+          {{ exam.message }}
+        </v-alert>
+
+        <v-list density="comfortable" class="pa-0 bg-transparent">
+          <v-list-item v-for="(info, index) in exam.examInfos" :key="index" class="px-0 mb-3">
+            <template #prepend>
+               <v-avatar color="primary" variant="tonal" size="large" class="mr-3 font-weight-bold elevation-1">
+                 {{ info.name.charAt(0) }}
+               </v-avatar>
+            </template>
+
+            <v-list-item-title class="font-weight-bold text-h6 mb-1">
+              {{ info.name }}
+            </v-list-item-title>
+
+            <v-list-item-subtitle class="text-body-1">
+              <div class="d-flex align-center mb-1">
+                 <v-icon size="small" color="success" class="mr-2">mdi-clock-start</v-icon>
+                 <span class="font-weight-medium">{{ formatTime(info.start) }}</span>
+              </div>
+              <div class="d-flex align-center">
+                 <v-icon size="small" color="error" class="mr-2">mdi-clock-end</v-icon>
+                 <span class="font-weight-medium">{{ formatTime(info.end) }}</span>
+              </div>
+            </v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+      </template>
+
+      <div v-else class="d-flex flex-column align-center justify-center fill-height text-grey mt-4">
+        <v-icon size="large" class="mb-2">mdi-alert-circle-outline</v-icon>
+        无法加载考试信息
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { useExamStore } from '@/stores/examStore'
+import { mapState, mapActions } from 'pinia'
+
+export default {
+  name: 'ExamScheduleCard',
+  props: {
+    examId: {
+      type: String,
+      required: true
+    },
+    contentStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    ...mapState(useExamStore, ['exams', 'loadingDetails']),
+    exam() {
+      return this.exams[this.examId]
+    },
+    loading() {
+      return this.loadingDetails[this.examId]
+    }
+  },
+  mounted() {
+    this.fetchExam(this.examId)
+  },
+  methods: {
+    ...mapActions(useExamStore, ['fetchExam']),
+    formatTime(timeStr) {
+      if (!timeStr) return ''
+      try {
+        const date = new Date(timeStr)
+        // Format: MM-DD HH:mm
+        const month = (date.getMonth() + 1).toString().padStart(2, '0')
+        const day = date.getDate().toString().padStart(2, '0')
+        const hours = date.getHours().toString().padStart(2, '0')
+        const minutes = date.getMinutes().toString().padStart(2, '0')
+        return `${month}-${day} ${hours}:${minutes}`
+      } catch (e) {
+        return timeStr
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.v-list-item-title {
+  white-space: normal;
+}
+</style>
@@ -24,16 +24,26 @@
    >
      随机点名
    </v-btn>
-    <v-btn
+    <v-btn-group
      v-if="showExamScheduleButton"
      class="ml-2"
      color="green"
-      prepend-icon="mdi-calendar-check"
-      size="large"
-      @click="$router.push('/examschedule')"
+      variant="elevated"
+      divided
    >
-      考试看板
-    </v-btn>
+      <v-btn
+        prepend-icon="mdi-calendar-check"
+        size="large"
+        @click="$router.push('/examschedule')"
+      >
+        考试看板
+      </v-btn>
+      <v-btn
+        icon="mdi-plus"
+        size="large"
+        @click="$emit('add-exam-card')"
+      />
+    </v-btn-group>
    <v-btn
      v-if="showListCardButton"
      class="ml-2"
@@ -16,6 +16,15 @@
          <hitokoto-card />
        </div>

+        <!-- 考试卡片 -->
+        <div v-else-if="item.type === 'exam'" style="height: 100%">
+          <concise-exam-card
+            :exam-id="item.data.examId"
+            :content-style="contentStyle"
+            @click="$emit('open-exam-detail', item.data.examId)"
+          />
+        </div>
+
        <!-- 出勤卡片 -->
        <v-card
          v-else-if="item.type === 'attendance'"
@@ -185,11 +194,13 @@

 <script>
 import HitokotoCard from "@/components/HitokotoCard.vue";
+import ConciseExamCard from "@/components/home/ConciseExamCard.vue";

 export default {
  name: "HomeworkGrid",
  components: {
    HitokotoCard,
+    ConciseExamCard,
  },
  props: {
    sortedItems: {