Add vuedraggable dependency for improved drag-and-drop functionality. Refactor index.vue to use subject names as keys and streamline subject management. Update settings.vue to include SubjectManagementCard for better subject configuration.

src/pages/settings.vue

@@ -2,12 +2,12 @@
   <div class="settings-page">
     <v-app-bar elevation="1">
       <template #prepend>
-
         <v-btn
           icon="mdi-arrow-left"
           variant="text"
           @click="$router.push('/')"
-        /> <v-btn
+        />
+        <v-btn
           icon="mdi-menu"
           variant="text"
           @click="drawer = !drawer"
@@ -113,7 +113,9 @@
             @saved="onSettingsSaved"
           />
         </v-tabs-window-item>
-
+        <v-tabs-window-item value="student">
+          <student-list-card border :is-mobile="isMobile" />
+        </v-tabs-window-item>
         <v-tabs-window-item value="share">
           <settings-link-generator border class="mt-4" />
         </v-tabs-window-item>
@@ -150,15 +152,15 @@
           />
         </v-tabs-window-item>
 
-        <v-tabs-window-item value="student">
-          <student-list-card border :is-mobile="isMobile" />
-        </v-tabs-window-item>
+
         <v-tabs-window-item value="randomPicker">
           <random-picker-card border :is-mobile="isMobile" />
         </v-tabs-window-item>
-        <v-tabs-window-item value="homework">
+        <v-tabs-window-item value="subject">
+          <subject-management-card border /> <br />
           <homework-template-card border />
         </v-tabs-window-item>
+
         <v-tabs-window-item value="developer"
           ><settings-card border title="开发者选项" icon="mdi-developer-board">
             <v-list>
@@ -237,7 +239,8 @@ import SettingsExplorer from "@/components/settings/SettingsExplorer.vue";
 import SettingsLinkGenerator from "@/components/SettingsLinkGenerator.vue";
 import NamespaceSettingsCard from "@/components/settings/cards/NamespaceSettingsCard.vue";
 import RandomPickerCard from "@/components/settings/cards/RandomPickerCard.vue";
-import HomeworkTemplateCard from '@/components/settings/cards/HomeworkTemplateCard.vue';
+import HomeworkTemplateCard from "@/components/settings/cards/HomeworkTemplateCard.vue";
+import SubjectManagementCard from "@/components/settings/cards/SubjectManagementCard.vue";
 export default {
   name: "Settings",
   components: {
@@ -257,6 +260,7 @@ export default {
     NamespaceSettingsCard,
     RandomPickerCard,
     HomeworkTemplateCard,
+    SubjectManagementCard,
   },
   setup() {
     const { mobile } = useDisplay();
@@ -359,6 +363,16 @@ export default {
               },
             ]
           : []),
+        {
+          title: "科目",
+          icon: "mdi-book-edit",
+          value: "subject",
+        },
+        {
+          title: "学生列表",
+          icon: "mdi-account-group",
+          value: "student",
+        },
         {
           title: "分享设置",
           icon: "mdi-share",
@@ -384,21 +398,13 @@ export default {
           icon: "mdi-theme-light-dark",
           value: "theme",
         },
-        {
-          title: "学生列表",
-          icon: "mdi-account-group",
-          value: "student",
-        },
+
         {
           title: "随机点名",
           icon: "mdi-dice-multiple",
           value: "randomPicker",
         },
-        {
-          title: "作业模板",
-          icon: "mdi-book-edit",
-          value: "homework",
-        },
+
         {
           title: "开发者",
           icon: "mdi-developer-board",
@@ -425,7 +431,7 @@ export default {
       handler(newValue) {
         this.drawer = !newValue;
       },
-      immediate: true
+      immediate: true,
     },
     studentData: {
       handler(newData) {