fix routes.

src/main.ts

@@ -4,14 +4,14 @@ import { createPinia } from "pinia"
 import storage from "utils/storage"
 import { STORAGE_KEY } from "utils/constants"
 
-import { routes } from "./routes"
+import { ojs, admins } from "./routes"
 import App from "./App.vue"
 
 import { toggleLogin } from "./shared/composables/modal"
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [routes],
+  routes: [ojs, admins],
 })
 
 router.beforeEach((to, from, next) => {

src/routes.ts

@@ -1,7 +1,7 @@
 import { RouteRecordRaw } from "vue-router"
 import { loadChart } from "./shared/composables/chart"
 
-export const routes: RouteRecordRaw = {
+export const ojs: RouteRecordRaw = {
   path: "/",
   component: () => import("~/shared/layout/default.vue"),
   children: [
@@ -89,86 +89,87 @@ export const routes: RouteRecordRaw = {
       component: () => import("learn/index.vue"),
       name: "learn",
     },
+  ],
+}
+
+export const admins: RouteRecordRaw = {
+  path: "/admin",
+  component: () => import("~/shared/layout/admin.vue"),
+  children: [
     {
-      path: "/admin",
+      path: "",
-      component: () => import("~/shared/layout/admin.vue"),
+      name: "admin home",
-      children: [
+      component: () => import("~/admin/setting/home.vue"),
-        {
+    },
-          path: "",
+    {
-          name: "admin home",
+      path: "config",
-          component: () => import("~/admin/setting/home.vue"),
+      name: "admin config",
-        },
+      component: () => import("admin/setting/config.vue"),
-        {
+    },
-          path: "config",
+    {
-          name: "admin config",
+      path: "announcement",
-          component: () => import("admin/setting/config.vue"),
+      name: "admin announcement",
-        },
+      component: () => import("admin/setting/announcement.vue"),
-        {
+    },
-          path: "announcement",
+    {
-          name: "admin announcement",
+      path: "user/list",
-          component: () => import("admin/setting/announcement.vue"),
+      name: "admin user list",
-        },
+      component: () => import("admin/user/list.vue"),
-        {
+    },
-          path: "user/list",
+    {
-          name: "admin user list",
+      path: "user/generate",
-          component: () => import("admin/user/list.vue"),
+      name: "admin user generate",
-        },
+      component: () => import("~/admin/user/generate.vue"),
-        {
+    },
-          path: "user/generate",
+    {
-          name: "admin user generate",
+      path: "problem/list",
-          component: () => import("~/admin/user/generate.vue"),
+      name: "admin problem list",
-        },
+      component: () => import("admin/problem/list.vue"),
-        {
+    },
-          path: "problem/list",
+    {
-          name: "admin problem list",
+      path: "problem/create",
-          component: () => import("admin/problem/list.vue"),
+      name: "admin problem create",
-        },
+      component: () => import("admin/problem/detail.vue"),
-        {
+    },
-          path: "problem/create",
+    {
-          name: "admin problem create",
+      path: "problem/edit/:problemID",
-          component: () => import("admin/problem/detail.vue"),
+      name: "admin problem edit",
-        },
+      component: () => import("admin/problem/detail.vue"),
-        {
+      props: true,
-          path: "problem/edit/:problemID",
+    },
-          name: "admin problem edit",
+    {
-          component: () => import("admin/problem/detail.vue"),
+      path: "contest/list",
-          props: true,
+      name: "admin contest list",
-        },
+      component: () => import("admin/contest/list.vue"),
-        {
+    },
-          path: "contest/list",
+    {
-          name: "admin contest list",
+      path: "contest/create",
-          component: () => import("admin/contest/list.vue"),
+      name: "admin contest create",
-        },
+      component: () => import("admin/contest/detail.vue"),
-        {
+    },
-          path: "contest/create",
+    {
-          name: "admin contest create",
+      path: "contest/edit/:contestID",
-          component: () => import("admin/contest/detail.vue"),
+      name: "admin contest edit",
-        },
+      component: () => import("admin/contest/detail.vue"),
-        {
+      props: true,
-          path: "contest/edit/:contestID",
+    },
-          name: "admin contest edit",
+    {
-          component: () => import("admin/contest/detail.vue"),
+      path: "contest/:contestID/problem/list",
-          props: true,
+      name: "admin contest problem list",
-        },
+      component: () => import("admin/problem/list.vue"),
-        {
+      props: true,
-          path: "contest/:contestID/problem/list",
+    },
-          name: "admin contest problem list",
+    {
-          component: () => import("admin/problem/list.vue"),
+      path: "contest/:contestID/problem/create",
-          props: true,
+      name: "admin contest problem create",
-        },
+      component: () => import("admin/problem/detail.vue"),
-        {
+      props: true,
-          path: "contest/:contestID/problem/create",
+    },
-          name: "admin contest problem create",
+    {
-          component: () => import("admin/problem/detail.vue"),
+      path: "contest/:contestID/problem/edit/:problemID",
-          props: true,
+      name: "admin contest problem edit",
-        },
+      component: () => import("admin/problem/detail.vue"),
-        {
+      props: true,
-          path: "contest/:contestID/problem/edit/:problemID",
-          name: "admin contest problem edit",
-          component: () => import("admin/problem/detail.vue"),
-          props: true,
-        },
-      ],
     },
   ],
 }

src/shared/layout/admin.vue

@@ -8,6 +8,10 @@ const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
 const options: MenuOption[] = [
+  {
+    label: () => h(RouterLink, { to: "/" }, { default: () => "返回 OJ" }),
+    key: "return to OJ",
+  },
   {
     label: () => h(RouterLink, { to: "/admin" }, { default: () => "首页" }),
     key: "admin home",
@@ -101,19 +105,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="admin">
+  <n-layout has-sider position="absolute">
-    <n-layout-sider width="160" bordered>
+    <n-layout-sider width="160" bordered :native-scrollbar="false">
       <n-menu :options="options" :value="active" />
     </n-layout-sider>
     <n-layout-content content-style="padding: 16px; min-width: 600px">
       <router-view></router-view>
     </n-layout-content>
-  </div>
+  </n-layout>
 </template>
 
-<style scoped>
+<style scoped></style>
-.admin {
-  margin: -16px;
-  display: flex;
-}
-</style>