fix.

src/shared/Header/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useLoginStore } from "../store/login"
-import { useSignupStore } from "../../oj/store/signup"
-import { useUserStore } from "../store/user"
+import { useSignupStore } from "~/shared/store/signup"
 import { logout } from "../api"
+import { useUserStore } from "../store/user"
 
 const loginStore = useLoginStore()
 const signupStore = useSignupStore()

src/shared/Login/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { FormInstance } from "element-plus"
-import { useSignupStore } from "../../oj/store/signup"
+import { useSignupStore } from "~/shared/store/signup"
 import { login } from "../api"
 import { useLoginStore } from "../store/login"
 import { useUserStore } from "../store/user"

src/shared/Monaco/index.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type * as Monaco from "monaco-editor"
-import loader from "@monaco-editor/loader"
-import { LANGUAGE_VALUE } from "../../utils/constants"
-import { LANGUAGE } from "../../utils/types"
-import { isMobile } from "../../utils/breakpoints"
+import { LANGUAGE_VALUE } from "utils/constants"
+import { LANGUAGE } from "utils/types"
+import { isMobile } from "utils/breakpoints"
 
 interface Props {
   value: string
@@ -25,20 +24,18 @@ const emit = defineEmits<{
 }>()
 
 const monacoEditorRef = ref()
-let editor: Monaco.editor.IStandaloneCodeEditor | null
+let editor: Monaco.editor.IStandaloneCodeEditor
 
-onMounted(async function () {
-  const monaco = await loader.init()
-
-  const model = monaco.editor.createModel(
+onMounted(function () {
+  const model = window.monaco.editor.createModel(
     props.value,
     LANGUAGE_VALUE[props.language],
-    monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`)
+    window.monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`)
   )
 
-  editor = monaco.editor.create(monacoEditorRef.value, {
+  editor = window.monaco.editor.create(monacoEditorRef.value, {
     model,
-    theme: "vs-dark", // 官方自带三种主题vs, hc-black, or vs-dark
+    theme: "dark", // 官方自带三种主题vs, hc-black, or vs-dark
     minimap: {
       enabled: false,
     },
@@ -47,6 +44,15 @@ onMounted(async function () {
     tabSize: 4,
     fontSize: isMobile.value ? 20 : 24, // 字体大小
     scrollBeyondLastLine: false,
+    lineDecorationsWidth: 0,
+    scrollBeyondLastColumn: 0,
+    glyphMargin: false,
+    scrollbar: {
+      useShadows: false,
+      vertical: "hidden",
+      horizontal: "hidden",
+    },
+    overviewRulerLanes: 0,
   })
 
   model.onDidChangeContent(() => {
@@ -64,7 +70,7 @@ onMounted(async function () {
   })
 
   watchEffect(() => {
-    monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language])
+    window.monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language])
   })
 
   watchEffect(() => {

src/shared/Pagination/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { isDesktop } from "utils/breakpoints"
+interface Props {
+  total: number
+  limit: number
+  page: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  limit: 10,
+  page: 1,
+})
+
+const emit = defineEmits(["update:limit", "update:page"])
+
+const limit = ref(props.limit)
+const page = ref(props.page)
+
+watch(limit, () => emit("update:limit", limit))
+watch(page, () => emit("update:page", page))
+</script>
+
+<template>
+  <el-pagination
+    class="right margin"
+    :layout="isDesktop ? 'prev,pager,next,sizes' : 'prev,next,sizes'"
+    background
+    :total="props.total"
+    :page-sizes="[10, 20, 30]"
+    :pager-count="5"
+    v-model:page-size="limit"
+    v-model:current-page="page"
+  />
+</template>
+<style scoped>
+.margin {
+  margin-top: 24px;
+}
+.right {
+  float: right;
+}
+</style>

src/shared/Signup/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSignupStore } from "../../oj/store/signup"
+import { useSignupStore } from "../store/signup"
 const store = useSignupStore()
 </script>
 

src/shared/Split/index.vue

@@ -36,7 +36,6 @@
 import Resizer from "./Resizer.vue"
 import Pane from "./Pane.vue"
 import { computed, ref } from "vue"
-import { classNameToArray } from "element-plus/es/utils"
 
 interface Props {
   minPercent?: number

src/shared/api.ts

@@ -1,5 +1,5 @@
 import { useAxios } from "@vueuse/integrations/useAxios"
-import http from "../utils/http"
+import http from "utils/http"
 
 export function login(data: { username: string; password: string }) {
   return useAxios("login", { method: "post", data }, http, {

src/shared/layout/admin.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <el-container>
+    <el-main>
+      <router-view></router-view>
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped></style>

src/shared/layout/default.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Login from "../Login/index.vue"
+import Signup from "../Signup/index.vue"
+import Header from "../Header/index.vue"
+</script>
+
+<template>
+  <el-container>
+    <el-header class="header">
+      <Header />
+    </el-header>
+    <el-main>
+      <router-view></router-view>
+    </el-main>
+    <Login />
+    <Signup />
+  </el-container>
+</template>
+
+<style scoped>
+.header {
+  display: flex;
+}
+</style>

src/shared/monaco/index.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type * as Monaco from "monaco-editor"
-import loader from "@monaco-editor/loader"
-import { LANGUAGE_VALUE } from "../../utils/constants"
-import { LANGUAGE } from "../../utils/types"
-import { isMobile } from "../../utils/breakpoints"
+import { LANGUAGE_VALUE } from "utils/constants"
+import { LANGUAGE } from "utils/types"
+import { isMobile } from "utils/breakpoints"
 
 interface Props {
   value: string
@@ -25,20 +24,18 @@ const emit = defineEmits<{
 }>()
 
 const monacoEditorRef = ref()
-let editor: Monaco.editor.IStandaloneCodeEditor | null
+let editor: Monaco.editor.IStandaloneCodeEditor
 
-onMounted(async function () {
-  const monaco = await loader.init()
-
-  const model = monaco.editor.createModel(
+onMounted(function () {
+  const model = window.monaco.editor.createModel(
     props.value,
     LANGUAGE_VALUE[props.language],
-    monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`)
+    window.monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`)
   )
 
-  editor = monaco.editor.create(monacoEditorRef.value, {
+  editor = window.monaco.editor.create(monacoEditorRef.value, {
     model,
-    theme: "vs-dark", // 官方自带三种主题vs, hc-black, or vs-dark
+    theme: "dark", // 官方自带三种主题vs, hc-black, or vs-dark
     minimap: {
       enabled: false,
     },
@@ -47,6 +44,15 @@ onMounted(async function () {
     tabSize: 4,
     fontSize: isMobile.value ? 20 : 24, // 字体大小
     scrollBeyondLastLine: false,
+    lineDecorationsWidth: 0,
+    scrollBeyondLastColumn: 0,
+    glyphMargin: false,
+    scrollbar: {
+      useShadows: false,
+      vertical: "hidden",
+      horizontal: "hidden",
+    },
+    overviewRulerLanes: 0,
   })
 
   model.onDidChangeContent(() => {
@@ -64,7 +70,7 @@ onMounted(async function () {
   })
 
   watchEffect(() => {
-    monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language])
+    window.monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language])
   })
 
   watchEffect(() => {

src/shared/split/index.vue

@@ -36,7 +36,6 @@
 import Resizer from "./Resizer.vue"
 import Pane from "./Pane.vue"
 import { computed, ref } from "vue"
-import { classNameToArray } from "element-plus/es/utils"
 
 interface Props {
   minPercent?: number

src/shared/store/signup.ts

@@ -0,0 +1,13 @@
+export const useSignupStore = defineStore("signup", () => {
+  const [visible] = useToggle()
+
+  function show() {
+    visible.value = true
+  }
+
+  function hide() {
+    visible.value = false
+  }
+
+  return { visible, show, hide }
+})

src/shared/store/user.ts

@@ -1,9 +1,5 @@
-import {
-  PROBLEM_PERMISSION,
-  STORAGE_KEY,
-  USER_TYPE,
-} from "../../utils/constants"
-import storage from "../../utils/storage"
+import { PROBLEM_PERMISSION, STORAGE_KEY, USER_TYPE } from "utils/constants"
+import storage from "utils/storage"
 import { getUserInfo } from "../api"
 
 export const useUserStore = defineStore("user", () => {