1

src/components/ServerSelection.vue

@@ -1,34 +1,49 @@
 <template>
-  <v-card title="选择服务器">
+  <v-card border>
+    <v-card>
+      <v-card-title>选择服务器</v-card-title>
+      <v-card-subtitle>没事别乱动</v-card-subtitle>
       <v-card-text>
-      <v-form @submit.prevent="saveServerUrl">
           <v-text-field v-model="serverUrl" label="后端地址" required />
-        <v-btn type="submit" color="primary"> 保存 </v-btn>
-      </v-form>
+          <v-btn type="submit" color="primary" @click="saveServerUrl"> 保存 </v-btn>
       </v-card-text>
     </v-card>
+    <v-card>
+      <v-card-title>设置学生列表</v-card-title>
+      <v-card-subtitle>没事别乱动</v-card-subtitle>
+
+      <v-card-text>
+        <v-textarea v-model="students" label="学生列表" required />
+        <v-btn type="submit" color="primary" @click="saveStudents" border>
+          保存
+        </v-btn>
+      </v-card-text>
+    </v-card></v-card
+  >
   <v-snackbar v-model="snackbar">
     {{ snackbarText }}
   </v-snackbar>
 </template>
 
 <script>
-
+import axios from "axios";
 export default {
   data() {
     return {
       serverUrl: "",
       snackbar: false,
       snackbarText: "",
+      students: "",
+      studentsList: [],
     };
   },
   mounted() {
     this.loadServerUrl();
+    this.loadStudents();
   },
   methods: {
     saveServerUrl() {
       try {
-
         // 格式化URL，去除空格，/结尾，http://开头，使用new URL()
         if (this.serverUrl == "") {
           localStorage.removeItem("backendServerUrl");
@@ -38,7 +53,9 @@ export default {
           return;
         }
         this.serverUrl =
-        new URL(this.serverUrl).protocol + "//" + new URL(this.serverUrl).host;
+          new URL(this.serverUrl).protocol +
+          "//" +
+          new URL(this.serverUrl).host;
         localStorage.setItem("backendServerUrl", this.serverUrl);
         this.snackbarText = "保存成功，请刷新页面。";
         this.snackbar = true;
@@ -48,12 +65,37 @@ export default {
         this.snackbar = true;
       }
     },
+    saveStudents() {
+      try {
+        this.studentsList = this.students.split("\n");
+        axios
+          .post(this.serverUrl + "/setstudentlist", {
+            studentList: this.studentsList,
+            id: 1,
+          })
+          .then((response) => {
+            console.log(response);
+          });
+        localStorage.setItem("studentList", this.students);
+        this.snackbarText = "保存成功，请刷新页面。";
+        this.snackbar = true;
+      } catch (error) {
+        console.log(error);
+        this.snackbarText = "保存失败，请检查学生列表。";
+        this.snackbar = true;
+      }
+    },
     loadServerUrl() {
       const savedUrl = localStorage.getItem("backendServerUrl");
       if (savedUrl) {
         this.serverUrl = savedUrl;
       }
     },
+    loadStudents() {
+      if (localStorage.getItem("studentList")) {
+        this.students = localStorage.getItem("studentList").replace(/,/g, "\n");
+      }
+    },
   },
 };
 </script>

src/pages/index.vue

@@ -28,7 +28,7 @@
               style="padding: 2px !important"
               @click="openDialog(subject)"
             >
-              <v-card>
+              <v-card border>
                 <v-card-title>{{ homeworkData[subject].name }}</v-card-title>
                 <v-card-text :style="contentStyle">
                   <v-list>
@@ -47,6 +47,7 @@
         <div />
       </v-col>
 
+
       <v-col
         v-if="studentList.length"
         class="attendance-area"
@@ -55,15 +56,21 @@
       >
         <h1>出勤</h1>
         <h2>应到:{{ studentList.length }}人</h2>
-        <h2>实到:{{ studentList.length - selectedSet.size }}人</h2>
-        <h2 style="margin-bottom: 5px">请假:{{ selectedSet.size }} 人</h2>
-        <h3 v-for="(i, index) in selectedSet" :key="index">
+        <h2>
+          实到:{{ studentList.length - selectedSet.size - lateSet.size }}人
+        </h2>
+        <h2>请假:{{ selectedSet.size }} 人</h2>
+        <h3 v-for="(i, index) in selectedSet" :key="'absent-' + index">
+          {{ `${index + 1}. ${studentList[i]}` }}
+        </h3>
+        <h2>迟到:{{ lateSet.size }} 人</h2>
+
+        <h3 v-for="(i, index) in lateSet" :key="'late-' + index">
           {{ `${index + 1}. ${studentList[i]}` }}
         </h3>
       </v-col>
     </v-row>
   </v-container>
-
   <v-container fluid>
     <v-btn icon="mdi-plus" variant="text" @click="zoom('up')" />
     <v-btn icon="mdi-minus" variant="text" @click="zoom('out')" />
@@ -91,8 +98,9 @@
     </v-btn>
   </v-container>
   <v-dialog v-model="dialogVisible" width="500" @click:outside="handleClose">
-    <v-card>
+    <v-card border>
       <v-card-title>{{ dialogTitle }}</v-card-title>
+      <v-card-subtitle>写完后点击上传谢谢喵</v-card-subtitle>
       <v-card-text>
         <v-textarea
           ref="inputRef"
@@ -107,8 +115,8 @@
 
   <v-dialog v-model="attendDialogVisible" width="800">
     <v-card>
-      <v-card-title>设置未到学生列表</v-card-title>
-      <v-card-text>
+      <v-card-title>设置学生出勤状态</v-card-title>
+      <v-card-text><v-btn @click="cleanstudentslist">全勤</v-btn>
         <v-container fluid>
           <v-row>
             <v-col
@@ -119,10 +127,16 @@
               md="4"
             >
               <v-card
-                :class="{ selected: selectedSet.has(i) }"
-                variant="outlined"
-                :color="selectedSet.has(i) ? 'primary' : ''"
-                @click="toggleStudent(i)"
+                border
+                :class="{ selected: selectedSet.has(i) || lateSet.has(i) }"
+                :color="
+                  selectedSet.has(i)
+                    ? 'primary'
+                    : lateSet.has(i)
+                    ? 'orange'
+                    : ''
+                "
+                @click="toggleStudentStatus(i)"
               >
                 <v-card-text>
                   {{ `${i + 1}. ${name}` }}
@@ -134,6 +148,7 @@
       </v-card-text>
     </v-card>
   </v-dialog>
+
   <v-dialog v-model="ServerSelectionDialog" width="500">
     <ServerSelection />
   </v-dialog>
@@ -147,6 +162,7 @@
 import axios from "axios";
 import { useDisplay } from "vuetify";
 import ServerSelection from "../components/ServerSelection.vue";
+
 export default {
   name: "HomeworkBoard",
   components: { ServerSelection },
@@ -155,7 +171,8 @@ export default {
       backurl: localStorage.getItem("backendServerUrl") || "",
       currentEditSubject: null,
       studentList: ["加载中"],
-      selectedSet: new Set(),
+      selectedSet: new Set(), // Absent students
+      lateSet: new Set(), // Late students
       dialogVisible: false,
       dialogTitle: "",
       textarea: "",
@@ -194,6 +211,7 @@ export default {
     async initializeData() {
       const res = await axios.get(this.backurl + "/config.json");
       this.studentList = res.data.studentList;
+      localStorage.setItem("studentList", res.data.studentList);
       this.homeworkArrange = res.data.homeworkArrange;
 
       this.initializeHomeworkData();
@@ -261,15 +279,24 @@ export default {
       this.attendDialogVisible = true;
     },
 
-    toggleStudent(index) {
+    toggleStudentStatus(index) {
       if (this.selectedSet.has(index)) {
         this.selectedSet.delete(index);
+        this.lateSet.add(index); // Toggle to late
+      } else if (this.lateSet.has(index)) {
+        this.lateSet.delete(index);
       } else {
-        this.selectedSet.add(index);
+        this.selectedSet.add(index); // Toggle to late
       }
       this.synced = false;
     },
+    cleanstudentslist()
+    {
+      this.selectedSet.clear();
+      this.lateSet.clear();
+      this.synced = false;
 
+    },
     zoom(direction) {
       const step = 2;
       if (direction === "up" && this.fontSize < 100) {
@@ -289,6 +316,7 @@ export default {
           date: this.dateString,
           data: this.homeworkData,
           attendance: Array.from(this.selectedSet),
+          late: Array.from(this.lateSet), // Upload late students as well
         });
         this.synced = true;
         this.showSyncMessage();
@@ -363,6 +391,7 @@ export default {
         return acc;
       }, {});
       this.selectedSet = new Set(res.data.attendance || []);
+      this.lateSet = new Set(res.data.late || []); // Initialize late set
       this.synced = true;
     },