主页修改与消息调整

src/components/MainLayout/MainLayout.vue

@@ -9,7 +9,8 @@ import {
 import { useRoute, useRouter } from "vue-router";
 import QM_LOGO from "./qm-logo.png";
 import VueQrcode from "@chenfengyuan/vue-qrcode";
-import SiteMessageNotificationVue from "@/features/SiteMessage/SiteMessageNotification.vue";
+import SiteMessageNotification from "@/features/SiteMessage/SiteMessageNotification.vue";
+import { MenuSubItem, getMenuDict, parseMapLine } from "./menuConfig";
 
 const router = useRouter();
 const route = useRoute();
@@ -48,28 +49,22 @@ interface MenuOption {
   name: string;
   routeName: string;
 }
-const menuRouterDict: Record<string, string> = {
-  STU_ONLINE_EXAM: "/online-exam",
-  STU_ONLINE_HOMEWORK: "/online-homework",
-  STU_ONLINE_PRACTICE: "/online-practice",
-  STU_OFFLINE_EXAM: "/offline-exam",
-  STU_NOTICE: "SiteMessage",
-  STU_MODIFY_PWD: "ChangePassword",
-};
+
 let curMenu = $ref("");
 let menuOptions = $ref<MenuOption[]>([]);
 let curMenuOption = $ref<MenuOption | undefined>();
-let breadcrumbs = $ref<MenuOption[]>([]);
+let breadcrumbs = $ref<MenuSubItem[]>([]);
 
 const getMenus = async () => {
   const res = await studentClientMenuApi(store.user.rootOrgId);
+  const menuDict = getMenuDict();
   menuOptions = res.data
     .sort((a, b) => b.weight - a.weight)
     .map((item) => {
       return {
         id: item.id,
         name: item.name,
-        routeName: menuRouterDict[item.routeCode.toUpperCase()],
+        routeName: menuDict[item.routeCode.toUpperCase()],
       };
     });
 };
@@ -81,10 +76,9 @@ const swithMenu = (menu: MenuOption) => {
 
 // route change
 const routerChange = () => {
-  curMenuOption = menuOptions.find((item) => item.routeName === route.name);
-  if (!curMenuOption) return;
-  curMenu = curMenuOption.routeName;
-  breadcrumbs = [{ ...curMenuOption }];
+  breadcrumbs = parseMapLine(route.name as string);
+  curMenu = breadcrumbs[0]?.routeName;
+  curMenuOption = menuOptions.find((item) => item.routeName === curMenu);
 };
 
 const toModifyPwd = () => {
@@ -250,7 +244,7 @@ watch(
       </div>
     </div>
   </div>
-  <SiteMessageNotificationVue />
+  <SiteMessageNotification />
 </template>
 
 <style scoped>

src/components/MainLayout/menuConfig.ts

@@ -0,0 +1,81 @@
+export interface MenuSubItem {
+  name: string;
+  routeName: string;
+  children?: MenuSubItem[];
+}
+
+type MenuItem = {
+  code: string;
+} & MenuSubItem;
+
+export const menuMap: MenuItem[] = [
+  {
+    code: "STU_ONLINE_EXAM",
+    name: "在线考试",
+    routeName: "OnlineExam",
+  },
+  {
+    code: "STU_ONLINE_HOMEWORK",
+    name: "在线作业",
+    routeName: "OnlineHomework",
+  },
+  {
+    code: "STU_ONLINE_PRACTICE",
+    name: "在线练习",
+    routeName: "OnlinePractice",
+  },
+  {
+    code: "STU_OFFLINE_EXAM",
+    name: "离线考试",
+    routeName: "OfflineExam",
+  },
+  {
+    code: "STU_NOTICE",
+    name: "公告通知",
+    routeName: "SiteMessage",
+    children: [
+      {
+        name: "通知详情",
+        routeName: "SiteMessageDetail",
+      },
+    ],
+  },
+  {
+    code: "STU_MODIFY_PWD",
+    name: "修改密码",
+    routeName: "ChangePassword",
+  },
+];
+
+export const getMenuDict = () => {
+  const menuDict: Record<string, string> = {};
+  menuMap.forEach((menu) => {
+    menuDict[menu.code] = menu.routeName;
+  });
+  return menuDict;
+};
+
+export const parseMapLine = (routeName: string) => {
+  let finded = false;
+  let mapLine: MenuSubItem[] = [];
+  const parseTree = (list: MenuSubItem[], parents: MenuSubItem[]) => {
+    list.forEach((item) => {
+      if (finded) return;
+      const curParent = [...parents];
+      curParent.push({
+        name: item.name,
+        routeName: item.routeName,
+      });
+      if (item.routeName === routeName) {
+        finded = true;
+        mapLine = curParent;
+        return;
+      }
+      if (item.children && item.children.length) {
+        parseTree(item.children, curParent);
+      }
+    });
+  };
+  parseTree(menuMap, []);
+  return mapLine;
+};

src/features/OfflineExam/OfflineExam.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class=""></div>
+</template>

src/features/SiteMessage/SiteMessage.vue

@@ -7,6 +7,7 @@ import { h, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { RowKey } from "naive-ui/lib/data-table/src/interface";
 import { MailOpen, MailUnread } from "@vicons/ionicons5";
+import { fetchSiteMessage } from "./siteMessageUpdate";
 
 const message = useMessage();
 const router = useRouter();
@@ -61,11 +62,11 @@ const toMarkRead = async () => {
   await updateNotieReadStatusApi(selectedMessageIds.join());
   message.success("修改成功！");
   store.updateSiteMessagesTimeStamp();
-  void store.fetchSiteMessage();
+  void fetchSiteMessage();
 };
 
 onMounted(() => {
-  void store.fetchSiteMessage();
+  void fetchSiteMessage();
 });
 </script>
 

src/features/SiteMessage/SiteMessageDetail.vue

@@ -5,6 +5,7 @@ import { useRoute } from "vue-router";
 import { onMounted, watch } from "vue";
 import { ArrowBack } from "@vicons/ionicons5";
 import { updateNotieReadStatusApi } from "@/api/siteMessage";
+import { fetchSiteMessage } from "./siteMessageUpdate";
 
 let notice: SiteMessage | undefined = $ref();
 const route = useRoute();
@@ -17,7 +18,7 @@ const markMessageRead = async (noticeId: string) => {
   if (!noticeId) return;
   await updateNotieReadStatusApi(noticeId);
   store.updateSiteMessagesTimeStamp();
-  void store.fetchSiteMessage();
+  void fetchSiteMessage();
 };
 
 const initData = () => {

src/features/SiteMessage/SiteMessageNotification.vue

@@ -3,6 +3,7 @@ import { store } from "@/store/store";
 import { watch, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { ChevronForward } from "@vicons/ionicons5";
+import { fetchSiteMessage } from "./siteMessageUpdate";
 
 const router = useRouter();
 
@@ -42,8 +43,6 @@ const toIgnore = () => {
 watch(
   () => store.siteMessage.messages,
   () => {
-    console.log("site message change");
-
     updateSiteMessage();
   },
   {
@@ -53,7 +52,7 @@ watch(
 );
 
 onMounted(() => {
-  void store.fetchSiteMessage();
+  void fetchSiteMessage();
 });
 </script>
 

src/features/SiteMessage/siteMessageUpdate.ts

@@ -0,0 +1,25 @@
+import { messageListApi } from "@/api/siteMessage";
+import { store } from "@/store/store";
+
+export async function fetchSiteMessage() {
+  const res = await messageListApi(store.user.id, store.siteMessagesTimeStamp);
+  const messages = res.data.map((item) => {
+    const nitem = { ...item };
+    if (item.hasRecalled) {
+      nitem.title = "发送者已撤回消息：" + nitem.title;
+      nitem.content = "该消息已经被发送者撤回。";
+    }
+    return nitem;
+  });
+  const prevSiteMessage = Object.assign(
+    {},
+    {
+      messages: [],
+      firstUnreadMessage: null,
+      ignoreMessageIds: [],
+      unreadCount: 0,
+    },
+    store.siteMessage
+  );
+  store.siteMessage = Object.assign({}, prevSiteMessage, { messages });
+}

src/router/index.ts

@@ -4,6 +4,7 @@ import MainLayout from "@/components/MainLayout/MainLayout.vue";
 import ChangePassword from "@/features/ChangePassword/ChangePassword.vue";
 import SiteMessage from "@/features/SiteMessage/SiteMessage.vue";
 import SiteMessageDetail from "@/features/SiteMessage/SiteMessageDetail.vue";
+import OfflineExam from "@/features/OfflineExam/OfflineExam.vue";
 import { resetStore, store } from "@/store/store";
 
 const routes: RouteRecordRaw[] = [
@@ -28,6 +29,11 @@ const routes: RouteRecordRaw[] = [
         component: SiteMessageDetail,
         name: "SiteMessageDetail",
       },
+      {
+        path: "offline-exam",
+        component: OfflineExam,
+        name: "OfflineExam",
+      },
     ],
   },
   {

src/store/store.ts

@@ -1,6 +1,5 @@
 import { defineStore } from "pinia";
 import { Store } from "@/types/student-client";
-import { messageListApi } from "@/api/siteMessage";
 
 const initStore: Store = {
   user: {} as Store["user"],
@@ -70,31 +69,6 @@ export const useStore = defineStore("ecs", {
     updateSiteMessagesTimeStamp() {
       store.siteMessagesTimeStamp = Date.now();
     },
-    async fetchSiteMessage() {
-      const res = await messageListApi(
-        store.user.id,
-        store.siteMessagesTimeStamp
-      );
-      const messages = res.data.map((item) => {
-        const nitem = { ...item };
-        if (item.hasRecalled) {
-          nitem.title = "发送者已撤回消息：" + nitem.title;
-          nitem.content = "该消息已经被发送者撤回。";
-        }
-        return nitem;
-      });
-      const prevSiteMessage = Object.assign(
-        {},
-        {
-          messages: [],
-          firstUnreadMessage: null,
-          ignoreMessageIds: [],
-          unreadCount: 0,
-        },
-        store.siteMessage
-      );
-      store.siteMessage = Object.assign({}, prevSiteMessage, { messages });
-    },
   },
 });
 

src/styles/cssvar.css

@@ -12,7 +12,6 @@
   --app-color-primary-light: #679cd4;
   --app-color-success: #13bb8a;
   --app-color-success-light: #46b379;
-  --app-color-success-light: #328358;
   --app-color-warning: #f0a020;
   --app-color-warning-light: #f3b34d;
   --app-color-error: #ed4014;