add auto-imports.

src/shared/layout/header.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useLoginStore } from "../stores/login"
+import { useSignupStore } from "../../oj/stores/signup"
+import { useUserStore } from "../stores/user"
+import { logout } from "../api"
+
+const loginStore = useLoginStore()
+const signupStore = useSignupStore()
+const userStore = useUserStore()
+const router = useRouter()
+
+async function handleLogout() {
+  await logout()
+  userStore.clearMyProfile()
+  router.replace("/")
+}
+
+function handleDropdown(command: string) {
+  switch (command) {
+    case "logout":
+      handleLogout()
+      break
+  }
+}
+
+onMounted(userStore.getMyProfile)
+</script>
+
+<template>
+  <el-menu router mode="horizontal" :default-active="$route.path">
+    <el-menu-item index="/learn">自学</el-menu-item>
+    <el-menu-item index="/">题库</el-menu-item>
+    <el-menu-item index="/contest">竞赛</el-menu-item>
+    <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>
+</template>
+
+<style scoped>
+.el-menu {
+  flex: 1;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  border-bottom: solid 1px var(--el-menu-border-color);
+}
+</style>

src/shared/stores/login.ts

@@ -1,6 +1,3 @@
-import { useToggle } from "@vueuse/core"
-import { defineStore } from "pinia"
-
 export const useLoginStore = defineStore("login", () => {
   const [visible] = useToggle()
 

src/shared/stores/user.ts

@@ -1,5 +1,3 @@
-import { defineStore } from "pinia"
-import { computed } from "vue"
 import {
   PROBLEM_PERMISSION,
   STORAGE_KEY,

src/shared/user/login.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { FormInstance } from "element-plus"
-import { computed, reactive, ref } from "vue"
 import { useSignupStore } from "../../oj/stores/signup"
 import { login } from "../../shared/api"
 import { useLoginStore } from "../stores/login"
@@ -74,7 +73,7 @@ function goSignup() {
         </el-button>
         <el-button @click="goSignup">没有账号，立即注册</el-button>
       </el-form-item>
-      <el-alert v-if="msg" :title="msg" show-icon type="danger" />
+      <el-alert v-if="msg" :title="msg" show-icon type="error" />
     </el-form>
   </el-dialog>
 </template>

src/shared/user/signup.vue

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