fix.

src/shared/Copy.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { DocumentCopy, Select } from "@element-plus/icons-vue"
+import copy from "copy-text-to-clipboard"
+
+defineProps<{ value: string }>()
+const [copied, toggle] = useToggle()
+const { start } = useTimeoutFn(() => toggle(false), 1000, { immediate: false })
+
+function handleClick(value: string) {
+  copy(value)
+  toggle(true)
+  start()
+}
+</script>
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-icon @click="handleClick(value)">
+        <component :is="copied ? Select : DocumentCopy"></component>
+      </n-icon>
+    </template>
+    {{ copied ? "已复制" : "复制" }}
+  </n-tooltip>
+</template>

src/shared/Header.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Sunny, Moon } from "@element-plus/icons-vue"
-import { logout } from "../api"
-import { useUserStore } from "../store/user"
+import { logout } from "./api"
+import { useUserStore } from "./store/user"
 import { isDark, toggleDark } from "~/shared/composables/dark"
 import { toggleLogin, toggleSignup } from "~/shared/composables/modal"
 import type {

src/shared/Login.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { login } from "../api"
-import { loginModal, toggleLogin, toggleSignup } from "../composables/modal"
-import { useUserStore } from "../store/user"
+import { login } from "./api"
+import { loginModal, toggleLogin, toggleSignup } from "./composables/modal"
+import { useUserStore } from "./store/user"
 import type { FormRules } from "naive-ui"
 
 const userStore = useUserStore()

src/shared/Monaco.vue

@@ -3,7 +3,7 @@ import type * as Monaco from "monaco-editor"
 import { LANGUAGE_VALUE } from "utils/constants"
 import { LANGUAGE } from "utils/types"
 import { isMobile } from "~/shared/composables/breakpoints"
-import { isDark } from "../composables/dark"
+import { isDark } from "./composables/dark"
 
 interface Props {
   value: string

src/shared/Monaco/index.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import type * as Monaco from "monaco-editor"
-import { LANGUAGE_VALUE } from "utils/constants"
-import { LANGUAGE } from "utils/types"
-import { isMobile } from "~/shared/composables/breakpoints"
-import { isDark } from "../composables/dark"
-
-interface Props {
-  value: string
-  language?: LANGUAGE
-  height?: string
-  fontSize?: number
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  language: "C",
-  height: "100%",
-  fontSize: 20,
-  class: "",
-})
-
-const emit = defineEmits<{
-  (e: "change", value: string): void
-}>()
-
-const monacoEditorRef = ref()
-let editor: Monaco.editor.IStandaloneCodeEditor
-
-onMounted(function () {
-  const model = window.monaco.editor.createModel(
-    props.value,
-    LANGUAGE_VALUE[props.language]
-  )
-
-  editor = window.monaco.editor.create(monacoEditorRef.value, {
-    model,
-    theme: isDark.value ? "dark" : "light", // 官方自带三种主题vs, hc-black, or vs-dark
-    minimap: {
-      enabled: false,
-    },
-    lineNumbersMinChars: 3,
-    automaticLayout: true, // 自适应布局
-    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(() => {
-    const value = model.getValue().toString()
-    emit("change", value)
-  })
-
-  editor.onKeyDown((e) => {
-    if ((e.ctrlKey || e.metaKey) && e.code === "KeyS") {
-      e.preventDefault()
-    }
-    if ((e.ctrlKey || e.metaKey) && e.code === "KeyR") {
-      e.preventDefault()
-    }
-  })
-
-  watchEffect(() => {
-    window.monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language])
-  })
-
-  watchEffect(() => {
-    if (props.value !== model.getValue()) {
-      model.setValue(props.value)
-    }
-  })
-
-  watchEffect(() => {
-    window.monaco.editor.setTheme(isDark.value ? "dark" : "light")
-  })
-})
-
-onUnmounted(() => {
-  editor && editor.dispose()
-})
-</script>
-<template>
-  <div
-    ref="monacoEditorRef"
-    :class="props.class"
-    :style="{ height: props.height }"
-  ></div>
-</template>
-<style scoped></style>

src/shared/Signup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormRules } from "naive-ui"
-import { signupModal, toggleLogin, toggleSignup } from "../composables/modal"
+import { signupModal, toggleLogin, toggleSignup } from "./composables/modal"
 
 const form = reactive({
   username: "",

src/shared/layout/default.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import Login from "../Login/index.vue"
-import Signup from "../Signup/index.vue"
-import Header from "../Header/index.vue"
+import Login from "../Login.vue"
+import Signup from "../Signup.vue"
+import Header from "../Header.vue"
 </script>
 
 <template>
-  <n-layout>
+  <n-layout position="absolute" :native-scrollbar="false">
     <n-layout-header bordered class="header">
       <Header />
     </n-layout-header>