use composables.

src/shared/Header/index.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { useLoginStore } from "../store/login"
-import { useSignupStore } from "~/shared/store/signup"
+import { Sunny, Moon } from "@element-plus/icons-vue"
 import { logout } from "../api"
 import { useUserStore } from "../store/user"
+import { isDark, toggleDark } from "~/shared/composables/dark"
+import { toggleLogin, toggleSignup } from "~/shared/composables/modal"
 
-const loginStore = useLoginStore()
-const signupStore = useSignupStore()
 const userStore = useUserStore()
 const router = useRouter()
 
@@ -34,26 +33,33 @@ onMounted(userStore.getMyProfile)
     <el-menu-item index="/status">提交</el-menu-item>
     <el-menu-item index="/rank">排名</el-menu-item>
   </el-menu>
-  <div v-if="userStore.isFinished && !userStore.isAuthed" class="actions">
-    <el-button @click="loginStore.show">登录</el-button>
-    <el-button @click="signupStore.show">注册</el-button>
-  </div>
-  <div v-if="userStore.isFinished && userStore.isAuthed" class="actions">
-    <el-dropdown @command="handleDropdown">
-      <el-button>{{ userStore.user.username }}</el-button>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item>我的主页</el-dropdown-item>
-          <el-dropdown-item>我的提交</el-dropdown-item>
-          <el-dropdown-item>我的设置</el-dropdown-item>
-          <el-dropdown-item v-if="userStore.isAdminRole">
-            后台管理
-          </el-dropdown-item>
-          <el-dropdown-item divided command="logout">退出</el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-  </div>
+  <el-space class="actions">
+    <el-button
+      circle
+      :icon="isDark ? Sunny : Moon"
+      @click="toggleDark()"
+    ></el-button>
+    <div v-if="userStore.isFinished && !userStore.isAuthed">
+      <el-button @click="toggleLogin(true)">登录</el-button>
+      <el-button @click="toggleSignup(true)">注册</el-button>
+    </div>
+    <div v-if="userStore.isFinished && userStore.isAuthed">
+      <el-dropdown @command="handleDropdown">
+        <el-button>{{ userStore.user.username }}</el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>我的主页</el-dropdown-item>
+            <el-dropdown-item>我的提交</el-dropdown-item>
+            <el-dropdown-item>我的设置</el-dropdown-item>
+            <el-dropdown-item v-if="userStore.isAdminRole">
+              后台管理
+            </el-dropdown-item>
+            <el-dropdown-item divided command="logout">退出</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </el-space>
 </template>
 
 <style scoped>

src/shared/Login/index.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { FormInstance } from "element-plus"
-import { useSignupStore } from "~/shared/store/signup"
 import { login } from "../api"
-import { useLoginStore } from "../store/login"
+import { loginModal, toggleLogin, toggleSignup } from "../composables/modal"
 import { useUserStore } from "../store/user"
 
-const loginStore = useLoginStore()
-const signupStore = useSignupStore()
 const userStore = useUserStore()
 const loginRef = ref<FormInstance>()
 const form = reactive({
@@ -29,15 +26,15 @@ async function submit() {
   if (valid) {
     await execute()
     if (!error.value) {
-      loginStore.hide()
+      toggleLogin(false)
       userStore.getMyProfile()
     }
   }
 }
 
 function goSignup() {
-  loginStore.hide()
-  signupStore.show()
+  toggleLogin(false)
+  toggleSignup(true)
 }
 </script>
 
@@ -46,7 +43,7 @@ function goSignup() {
     style="max-width: 400px"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
-    v-model="loginStore.visible"
+    v-model="loginModal"
     title="登录"
   >
     <el-form

src/shared/Monaco/index.vue

@@ -3,6 +3,7 @@ import type * as Monaco from "monaco-editor"
 import { LANGUAGE_VALUE } from "utils/constants"
 import { LANGUAGE } from "utils/types"
 import { isMobile } from "utils/breakpoints"
+import { isDark } from "../composables/dark"
 
 interface Props {
   value: string
@@ -35,7 +36,7 @@ onMounted(function () {
 
   editor = window.monaco.editor.create(monacoEditorRef.value, {
     model,
-    theme: "dark", // 官方自带三种主题vs, hc-black, or vs-dark
+    theme: isDark.value ? "dark" : "light", // 官方自带三种主题vs, hc-black, or vs-dark
     minimap: {
       enabled: false,
     },
@@ -78,6 +79,10 @@ onMounted(function () {
       model.setValue(props.value)
     }
   })
+
+  watchEffect(() => {
+    window.monaco.editor.setTheme(isDark.value ? "dark" : "light")
+  })
 })
 
 onUnmounted(() => {

src/shared/Signup/index.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useSignupStore } from "../store/signup"
-const store = useSignupStore()
+import { signupModal } from "../composables/modal"
 </script>
 
 <template>
   <el-dialog
     :close-on-click-modal="false"
     :close-on-press-escape="false"
-    v-model="store.visible"
+    v-model="signupModal"
     title="注册"
   >
   </el-dialog>

src/shared/composables/dark.ts

@@ -0,0 +1,2 @@
+export const isDark = useDark({ storageKey: "theme-appearance" })
+export const toggleDark = useToggle(isDark)

src/shared/composables/modal.ts

@@ -0,0 +1,2 @@
+export const [loginModal, toggleLogin] = useToggle()
+export const [signupModal, toggleSignup] = useToggle()

src/shared/monaco/index.vue

@@ -3,6 +3,7 @@ import type * as Monaco from "monaco-editor"
 import { LANGUAGE_VALUE } from "utils/constants"
 import { LANGUAGE } from "utils/types"
 import { isMobile } from "utils/breakpoints"
+import { isDark } from "../composables/dark"
 
 interface Props {
   value: string
@@ -35,7 +36,7 @@ onMounted(function () {
 
   editor = window.monaco.editor.create(monacoEditorRef.value, {
     model,
-    theme: "dark", // 官方自带三种主题vs, hc-black, or vs-dark
+    theme: isDark.value ? "dark" : "light", // 官方自带三种主题vs, hc-black, or vs-dark
     minimap: {
       enabled: false,
     },
@@ -78,6 +79,10 @@ onMounted(function () {
       model.setValue(props.value)
     }
   })
+
+  watchEffect(() => {
+    window.monaco.editor.setTheme(isDark.value ? "dark" : "light")
+  })
 })
 
 onUnmounted(() => {

src/shared/store/login.ts

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

src/shared/store/signup.ts

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