naive-ui.

2023-01-17 10:42:50 +08:00
parent 5d0f34c144
commit 01760b8eaa
29 changed files with 4864 additions and 2263 deletions
--- a/README.md
+++ b/README.md
@@ -1,18 +1 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support For `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+OJ next
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "axios": "^1.2.2",
    "copy-text-to-clipboard": "^3.0.1",
    "element-plus": "^2.2.28",
+    "naive-ui": "^2.34.3",
    "normalize.css": "^8.0.1",
    "party-js": "^2.2.0",
    "pinia": "^2.0.28",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import zhCn from "element-plus/dist/locale/zh-cn.mjs"
+import { zhCN, dateZhCN, darkTheme } from "naive-ui"
+import { isDark } from "./shared/composables/dark"
+
+const theme = computed(() => (isDark.value ? darkTheme : null))
 </script>

 <template>
-  <el-config-provider :locale="zhCn">
+  <n-config-provider :theme="theme" :locale="zhCN" :date-locale="dateZhCN">
    <router-view></router-view>
-  </el-config-provider>
+  </n-config-provider>
 </template>

 <style scoped></style>
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -149,6 +149,7 @@ declare global {
  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDialog: typeof import('naive-ui')['useDialog']
  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
  const useDraggable: typeof import('@vueuse/core')['useDraggable']
@@ -181,6 +182,7 @@ declare global {
  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
  const useLink: typeof import('vue-router')['useLink']
+  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
@@ -188,6 +190,7 @@ declare global {
  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
  const useMemoize: typeof import('@vueuse/core')['useMemoize']
  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMessage: typeof import('naive-ui')['useMessage']
  const useMounted: typeof import('@vueuse/core')['useMounted']
  const useMouse: typeof import('@vueuse/core')['useMouse']
  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -195,6 +198,7 @@ declare global {
  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNotification: typeof import('naive-ui')['useNotification']
  const useNow: typeof import('@vueuse/core')['useNow']
  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -45,6 +45,28 @@ declare module '@vue/runtime-core' {
    IEpLoading: typeof import('~icons/ep/loading')['default']
    IEpSelect: typeof import('~icons/ep/select')['default']
    IEpSemiSelect: typeof import('~icons/ep/semi-select')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NDropdownItem: typeof import('naive-ui')['NDropdownItem']
+    NDropdownMenu: typeof import('naive-ui')['NDropdownMenu']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
+    NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutContent: typeof import('naive-ui')['NLayoutContent']
+    NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NModal: typeof import('naive-ui')['NModal']
+    NPagination: typeof import('naive-ui')['NPagination']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTag: typeof import('naive-ui')['NTag']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router"
 import { createPinia } from "pinia"
 import "normalize.css"
-import "element-plus/theme-chalk/dark/css-vars.css"
 import loader from "@monaco-editor/loader"

 import storage from "utils/storage"
--- a/src/oj/components/SubmissionResultTag.vue
+++ b/src/oj/components/SubmissionResultTag.vue
@@ -9,9 +9,9 @@ defineProps<Props>()
 </script>

 <template>
-  <el-tag :type="JUDGE_STATUS[result]['type']" disable-transitions>
+  <n-tag :type="JUDGE_STATUS[result]['type']">
    {{ JUDGE_STATUS[result]["name"] }}
-  </el-tag>
+  </n-tag>
 </template>

 <style scoped></style>
--- a/src/oj/problem/components/SubmitPanel.vue
+++ b/src/oj/problem/components/SubmitPanel.vue
@@ -184,7 +184,7 @@ defineExpose({ submit })
      <el-alert
        v-if="submission"
        :closable="false"
-        :type="JUDGE_STATUS[submission.result]['alertType']"
+        :type="JUDGE_STATUS[submission.result]['type']"
        :title="JUDGE_STATUS[submission.result]['name']"
      >
      </el-alert>
--- a/src/oj/status/list.vue
+++ b/src/oj/status/list.vue
@@ -1,38 +1,65 @@
 <script setup lang="ts">
+import { c, DataTableColumn, SelectOption } from "naive-ui"
+import { NButton } from "naive-ui"
 import Pagination from "~/shared/Pagination/index.vue"
+import SubmissionResultTag from "oj/components/SubmissionResultTag.vue"
 import {
  submissionMemoryFormat,
  submissionTimeFormat,
  parseTime,
  filterEmptyValue,
 } from "utils/functions"
+import { Submission } from "utils/types"
 import { getSubmissions } from "oj/api"
 import { isDesktop } from "~/shared/composables/breakpoints"
-import SubmissionResultTag from "oj/components/SubmissionResultTag.vue"
+
+interface Query {
+  username: string
+  result: string
+  limit: number
+  page: number
+  myself: boolean
+}

 const route = useRoute()
 const router = useRouter()
 const problemID = <string>route.query.problem ?? ""
 const contestID = <string>route.query.contest ?? ""
+
 const submissions = ref([])
 const total = ref(0)
-const query = reactive({
+const query = reactive<Query>({
+  result: <string>route.query.result ?? "",
  page: parseInt(<string>route.query.page) || 1,
  limit: parseInt(<string>route.query.limit) || 10,
  username: <string>route.query.username ?? "",
-  myself: <"1" | "0">route.query.myself,
+  myself: route.query.myself === "1",
 })

+const options: SelectOption[] = [
+  { label: "全部", value: "" },
+  { label: "编译失败", value: "-2" },
+  { label: "答案错误", value: "-1" },
+  { label: "答案正确", value: "0" },
+  { label: "运行超时", value: "1" },
+  { label: "内存超限", value: "3" },
+  { label: "运行时错误", value: "4" },
+  { label: "系统错误", value: "5" },
+  { label: "部分正确", value: "8" },
+]
+
 async function listSubmissions() {
+  query.result = <string>route.query.result ?? ""
  query.page = parseInt(<string>route.query.page) || 1
  query.limit = parseInt(<string>route.query.limit) || 10
  query.username = <string>route.query.username ?? ""
-  query.myself = <"1" | "0">route.query.myself
+  query.myself = route.query.myself === "1"

  if (query.page < 1) query.page = 1
  const offset = query.limit * (query.page - 1)
  const res = await getSubmissions({
    ...query,
+    myself: query.myself ? "1" : "0",
    offset,
    problem_id: problemID,
    contest_id: contestID,
@@ -44,16 +71,30 @@ async function listSubmissions() {
 onMounted(listSubmissions)

 function routerPush() {
+  const newQuery = {
+    ...query,
+    myself: query.myself ? "1" : "0",
+  }
  router.push({
    path: route.path,
-    query: filterEmptyValue(query),
+    query: filterEmptyValue(newQuery),
  })
 }

+function search(value: string) {
+  query.username = value
+}
+
+function clear() {
+  query.username = ""
+  query.myself = false
+  query.result = ""
+}
+
 watch(() => query.page, routerPush)

 watch(
-  () => [query.limit, query.myself, query.username],
+  () => [query.limit, query.myself, query.username, query.result],
  () => {
    query.page = 1
    routerPush()
@@ -66,75 +107,88 @@ watch(
    if (newVal) listSubmissions()
  }
 )
+
+const columns: DataTableColumn<Submission>[] = [
+  {
+    title: "提交时间",
+    key: "create_time",
+    width: 180,
+    render: (row) =>
+      parseTime(row.create_time, isDesktop ? "YYYY-M-D hh:mm:ss" : "M-D hh:mm"),
+  },
+  {
+    title: "编号",
+    key: "id",
+    render: (row) =>
+      h(NButton, { text: true, type: "info" }, () => row.id.slice(0, 12)),
+  },
+  {
+    title: "状态",
+    key: "status",
+    width: 120,
+    render: (row) => h(SubmissionResultTag, { result: row.result }),
+  },
+  {
+    title: "题目",
+    key: "problem",
+    width: 100,
+    render: (row) =>
+      h(NButton, { text: true, type: "info" }, () => row.problem),
+  },
+  {
+    title: "执行耗时",
+    key: "time",
+    width: 100,
+    render: (row) => submissionTimeFormat(row.statistic_info.time_cost),
+  },
+  {
+    title: "占用内存",
+    key: "memory",
+    width: 100,
+    render: (row) => submissionMemoryFormat(row.statistic_info.memory_cost),
+  },
+  { title: "语言", key: "language", width: 100 },
+  {
+    title: "提交者",
+    key: "username",
+    minWidth: 120,
+    render: (row) =>
+      h(NButton, { text: true, type: "info" }, () => row.username),
+  },
+]
 </script>
 <template>
-  <el-form inline>
-    <el-form-item label="提交状态">
-      <el-select></el-select>
-    </el-form-item>
-    <el-form-item label="查看自己">
-      <el-switch></el-switch>
-    </el-form-item>
-    <el-form-item label="搜索提交者">
-      <el-input></el-input>
-    </el-form-item>
-  </el-form>
-  <el-table :data="submissions" stripe>
-    <el-table-column
-      label="提交时间"
-      prop="create_time"
-      :width="isDesktop ? 200 : 120"
-    >
-      <template #default="scope">
-        {{
-          parseTime(
-            scope.row.create_time,
-            isDesktop ? "YYYY-M-D hh:mm:ss" : "M-D hh:mm"
-          )
-        }}
-      </template>
-    </el-table-column>
-    <el-table-column label="编号" min-width="140">
-      <template #default="scope">
-        <el-link type="primary">{{ scope.row.id.slice(0, 12) }}</el-link>
-      </template>
-    </el-table-column>
-    <el-table-column label="状态" prop="result">
-      <template #default="scope">
-        <SubmissionResultTag :result="scope.row.result" />
-      </template>
-    </el-table-column>
-    <el-table-column label="题目" width="90">
-      <template #default="scope">
-        <el-link
-          type="primary"
-          @click="$router.push(`/problem/${scope.row.problem}`)"
-        >
-          {{ scope.row.problem }}
-        </el-link>
-      </template>
-    </el-table-column>
-    <el-table-column v-if="isDesktop" label="执行耗时" width="100">
-      <template #default="scope">
-        {{ submissionTimeFormat(scope.row.statistic_info.time_cost) }}
-      </template>
-    </el-table-column>
-    <el-table-column v-if="isDesktop" label="占用内存" width="100">
-      <template #default="scope">
-        {{ submissionMemoryFormat(scope.row.statistic_info.memory_cost) }}
-      </template>
-    </el-table-column>
-    <el-table-column label="语言" prop="language" width="100"></el-table-column>
-    <el-table-column label="提交者" min-width="120">
-      <template #default="scope">
-        <el-link type="primary">{{ scope.row.username }}</el-link>
-      </template>
-    </el-table-column>
-  </el-table>
+  <n-form :inline="isDesktop" label-placement="left">
+    <n-form-item label="提交状态">
+      <n-select
+        class="select"
+        v-model:value="query.result"
+        :options="options"
+      />
+    </n-form-item>
+    <n-form-item label="只看自己">
+      <n-switch v-model:value="query.myself" />
+    </n-form-item>
+    <n-form-item label="搜索提交者">
+      <n-input @change="search" clearable placeholder="输入后回车" />
+    </n-form-item>
+    <n-form-item>
+      <n-button @click="clear">重置</n-button>
+    </n-form-item>
+  </n-form>
+  <n-data-table striped size="small" :columns="columns" :data="submissions" />
  <Pagination
    :total="total"
    v-model:limit="query.limit"
    v-model:page="query.page"
  />
 </template>
-<style scoped></style>
+<style scoped>
+.select {
+  width: 120px;
+}
+
+.warning {
+  color: red;
+}
+</style>
--- a/src/shared/Header/index.vue
+++ b/src/shared/Header/index.vue
@@ -4,7 +4,12 @@ import { logout } from "../api"
 import { useUserStore } from "../store/user"
 import { isDark, toggleDark } from "~/shared/composables/dark"
 import { toggleLogin, toggleSignup } from "~/shared/composables/modal"
-import { isDesktop } from "../composables/breakpoints"
+import type {
+  MenuOption,
+  DropdownOption,
+  DropdownDividerOption,
+} from "naive-ui"
+import { RouterLink } from "vue-router"

 const userStore = useUserStore()
 const router = useRouter()
@@ -15,8 +20,8 @@ async function handleLogout() {
  router.replace("/")
 }

-function handleDropdown(command: string) {
-  switch (command) {
+function handleDropdown(key: string) {
+  switch (key) {
    case "logout":
      handleLogout()
      break
@@ -24,57 +29,66 @@ function handleDropdown(command: string) {
 }

 onMounted(userStore.getMyProfile)
+
+const menus: MenuOption[] = [
+  {
+    label: () =>
+      h(RouterLink, { to: "/learn#step-1" }, { default: () => "自学" }),
+    key: "learn",
+  },
+  {
+    label: () => h(RouterLink, { to: "/" }, { default: () => "题库" }),
+    key: "problem",
+  },
+  {
+    label: () => h(RouterLink, { to: "/contest" }, { default: () => "比赛" }),
+    key: "contest",
+  },
+  {
+    label: () => h(RouterLink, { to: "/status" }, { default: () => "提交" }),
+    key: "status",
+  },
+  {
+    label: () => h(RouterLink, { to: "/rank" }, { default: () => "排名" }),
+    key: "rank",
+  },
+]
+
+const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
+  { label: "我的主页", key: "home" },
+  { label: "我的提交", key: "status" },
+  { label: "我的设置", key: "setting" },
+  { label: "后台管理", key: "admin", show: userStore.isAdminRole },
+  { type: "divider" },
+  { label: "退出", key: "logout" },
+])
 </script>

 <template>
-  <el-menu
-    v-if="isDesktop"
-    router
-    mode="horizontal"
-    :default-active="$route.path"
-  >
-    <el-menu-item index="/learn#step-1">自学</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>
-  <el-space v-if="isDesktop" 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>
+  <n-space justify="space-between" align="center">
+    <n-menu mode="horizontal" :options="menus" default-value="problem"></n-menu>
+    <n-space>
+      <n-button circle @click="toggleDark()">
+        <template #icon>
+          <n-icon v-if="isDark"><Sunny /></n-icon>
+          <n-icon v-else><Moon /></n-icon>
        </template>
-      </el-dropdown>
-    </div>
-  </el-space>
+      </n-button>
+      <div v-if="userStore.isFinished">
+        <n-dropdown
+          v-if="userStore.isAuthed"
+          :options="options"
+          @select="handleDropdown"
+        >
+          <n-button>{{ userStore.user.username }}</n-button>
+        </n-dropdown>
+        <n-space v-else>
+          <n-button @click="toggleLogin(true)">登录</n-button>
+          <n-button @click="toggleSignup(true)">注册</n-button>
+        </n-space>
+      </div>
+    </n-space>
+  </n-space>
 </template>

-<style scoped>
-.el-menu {
-  flex: 1;
-}
-.actions {
-  display: flex;
-  align-items: center;
-  border-bottom: solid 1px var(--el-menu-border-color);
-}
-</style>
+<style scoped></style>
--- a/src/shared/Login/index.vue
+++ b/src/shared/Login/index.vue
@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import { FormInstance } from "element-plus"
 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()
-const loginRef = ref<FormInstance>()
+const loginRef = ref()
 const form = reactive({
  username: "",
  password: "",
 })
-const rules = reactive({
+const rules: FormRules = {
  username: [{ required: true, message: "用户名必填", trigger: "blur" }],
  password: [
    { required: true, message: "密码必填", trigger: "blur" },
-    { min: 6, max: 20, message: "长度在6到20位之间", trigger: "change" },
+    { min: 6, max: 20, message: "长度在6到20位之间", trigger: "input" },
  ],
-})
+}
 const { isLoading, error, execute } = login(form)
 const msg = computed(() => error.value && "用户名或密码不正确")

 async function submit() {
-  if (!loginRef.value) return
-  const valid = await loginRef.value.validate()
-  if (valid) {
-    await execute()
-    if (!error.value) {
-      toggleLogin(false)
-      userStore.getMyProfile()
+  loginRef.value?.validate(async (errors: FormRules | undefined) => {
+    if (!errors) {
+      await execute()
+      if (!error.value) {
+        toggleLogin(false)
+        userStore.getMyProfile()
+      }
    }
-  }
+  })
 }

 function goSignup() {
@@ -39,41 +39,43 @@ function goSignup() {
 </script>

 <template>
-  <el-dialog
-    style="max-width: 400px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    v-model="loginModal"
+  <n-modal
+    :mask-closable="false"
+    v-model:show="loginModal"
+    preset="card"
    title="登录"
+    style="width: 400px"
+    :auto-focus="false"
  >
-    <el-form
-      ref="loginRef"
-      :model="form"
-      :rules="rules"
-      label-position="right"
-      label-width="70px"
-    >
-      <el-form-item label="用户名" required prop="username">
-        <el-input v-model="form.username" name="username"></el-input>
-      </el-form-item>
-      <el-form-item label="密码" required prop="password">
-        <el-input
-          v-model="form.password"
+    <n-form ref="loginRef" :model="form" :rules="rules" show-require-mark>
+      <n-form-item label="用户名" path="username">
+        <n-input
+          v-model:value="form.username"
+          autofocus
+          clearable
+          name="username"
+        />
+      </n-form-item>
+      <n-form-item label="密码" path="password">
+        <n-input
+          v-model:value="form.password"
+          clearable
          type="password"
-          show-password
-          @change="submit"
          name="password"
-        ></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :loading="isLoading" @click="submit">
-          登录
-        </el-button>
-        <el-button @click="goSignup">没有账号，立即注册</el-button>
-      </el-form-item>
-      <el-alert v-if="msg" :title="msg" show-icon type="error" />
-    </el-form>
-  </el-dialog>
+          @change="submit"
+        />
+      </n-form-item>
+      <n-alert v-if="msg" type="error" :show-icon="false"> {{ msg }}</n-alert>
+      <n-form-item>
+        <n-space>
+          <n-button type="primary" :loading="isLoading" @click="submit">
+            登录
+          </n-button>
+          <n-button @click="goSignup">没有账号，立即注册</n-button>
+        </n-space>
+      </n-form-item>
+    </n-form>
+  </n-modal>
 </template>

 <style scoped></style>
--- a/src/shared/Pagination/index.vue
+++ b/src/shared/Pagination/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { isDesktop } from "~/shared/composables/breakpoints"
+
 interface Props {
  total: number
  limit: number
@@ -21,16 +22,15 @@ watch(page, () => emit("update:page", page))
 </script>

 <template>
-  <el-pagination
+  <n-pagination
    v-if="props.total"
    class="right margin"
-    :layout="isDesktop ? 'prev,pager,next,sizes' : 'prev,next,sizes'"
-    background
-    :total="props.total"
-    :page-sizes="[10, 20, 30]"
-    :pager-count="5"
+    :item-count="props.total"
+    v-model:page="page"
    v-model:page-size="limit"
-    v-model:current-page="page"
+    :page-sizes="[10, 20, 30]"
+    :page-slot="isDesktop ? 7 : 5"
+    show-size-picker
  />
 </template>
 <style scoped>
--- a/src/shared/Signup/index.vue
+++ b/src/shared/Signup/index.vue
@@ -1,15 +1,79 @@
 <script setup lang="ts">
-import { signupModal } from "../composables/modal"
+import type { FormRules } from "naive-ui"
+import { signupModal, toggleLogin, toggleSignup } from "../composables/modal"
+
+const form = reactive({
+  username: "",
+  password: "",
+  passwordAgain: "",
+  email: "",
+})
+const rules: FormRules = {}
+
+const [isLoading] = useToggle()
+const msg = ref("")
+
+function goLogin() {
+  toggleLogin(true)
+  toggleSignup(false)
+}
+
+function submit() {}
 </script>

 <template>
-  <el-dialog
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    v-model="signupModal"
+  <n-modal
+    :mask-closable="false"
+    v-model:show="signupModal"
+    preset="card"
    title="注册"
+    style="width: 400px"
+    :auto-focus="false"
  >
-  </el-dialog>
+    <n-form ref="signupRef" :model="form" :rules="rules" show-require-mark>
+      <n-form-item label="用户名" path="username">
+        <n-input
+          v-model:value="form.username"
+          autofocus
+          clearable
+          name="username"
+        />
+      </n-form-item>
+      <n-form-item label="邮箱" path="email">
+        <n-input
+          v-model:value="form.email"
+          clearable
+          name="email"
+          @change="submit"
+        />
+      </n-form-item>
+      <n-form-item label="密码" path="password">
+        <n-input
+          v-model:value="form.password"
+          clearable
+          type="password"
+          name="password"
+        />
+      </n-form-item>
+      <n-form-item label="确认密码" path="password">
+        <n-input
+          v-model:value="form.passwordAgain"
+          clearable
+          type="password"
+          name="passwordAgain"
+        />
+      </n-form-item>
+      <n-alert v-if="msg" type="error" :show-icon="false"> {{ msg }}</n-alert>
+      <n-form-item>
+        <n-space>
+          <n-button type="primary" :loading="isLoading" @click="submit">
+            登录
+          </n-button>
+          <n-button @click="goLogin">已经注册？现在登录</n-button>
+        </n-space>
+      </n-form-item>
+    </n-form>
+  </n-modal>
 </template>

 <style scoped></style>
--- a/src/shared/Split/Pane.vue
+++ b/src/shared/Split/Pane.vue
@@ -1,46 +0,0 @@
-<template>
-  <div :class="classes">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-
-interface Props {
-  split: "horizontal" | "vertical"
-  className?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  split: "horizontal",
-  className: "",
-})
-
-const classes = computed(() => [props.split, props.className].join(" "))
-</script>
-
-<style scoped>
-.splitter-pane.vertical.splitter-paneL {
-  position: absolute;
-  left: 0px;
-  height: 100%;
-  padding-right: 3px;
-}
-.splitter-pane.vertical.splitter-paneR {
-  position: absolute;
-  right: 0px;
-  height: 100%;
-  padding-left: 3px;
-}
-.splitter-pane.horizontal.splitter-paneL {
-  position: absolute;
-  top: 0px;
-  width: 100%;
-}
-.splitter-pane.horizontal.splitter-paneR {
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
-  padding-top: 3px;
-}
-</style>
--- a/src/shared/Split/Resizer.vue
+++ b/src/shared/Split/Resizer.vue
@@ -1,47 +0,0 @@
-<template>
-  <div :class="classes"></div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-
-interface Props {
-  split: "horizontal" | "vertical"
-  className?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  split: "horizontal",
-  className: "",
-})
-
-const classes = computed(() =>
-  ["splitter-pane-resizer", props.split, props.className].join(" ")
-)
-</script>
-
-<style scoped>
-.splitter-pane-resizer {
-  box-sizing: border-box;
-  background: #000;
-  position: absolute;
-  opacity: 0.2;
-  z-index: 1;
-  background-clip: padding-box;
-}
-.splitter-pane-resizer.horizontal {
-  height: 11px;
-  margin: -5px 0;
-  border-top: 5px solid rgba(255, 255, 255, 0);
-  border-bottom: 5px solid rgba(255, 255, 255, 0);
-  cursor: row-resize;
-  width: 100%;
-}
-.splitter-pane-resizer.vertical {
-  width: 11px;
-  height: 100%;
-  margin-left: -5px;
-  border-left: 5px solid rgba(255, 255, 255, 0);
-  border-right: 5px solid rgba(255, 255, 255, 0);
-  cursor: col-resize;
-}
-</style>
--- a/src/shared/Split/index.vue
+++ b/src/shared/Split/index.vue
@@ -1,141 +0,0 @@
-<template>
-  <div
-    :style="{ cursor, userSelect }"
-    class="vue-splitter-container clearfix"
-    @mouseup="onMouseUp"
-    @mousemove="onMouseMove"
-  >
-    <Pane
-      class="splitter-pane splitter-paneL"
-      :split="split"
-      :style="{ [type]: percent + '%' }"
-    >
-      <slot name="panel"></slot>
-    </Pane>
-
-    <Resizer
-      :className="className"
-      :style="{ [resizeType]: percent + '%' }"
-      :split="split"
-      @mousedown.native="onMouseDown"
-      @click.native="onClick"
-    ></Resizer>
-
-    <Pane
-      class="splitter-pane splitter-paneR"
-      :split="split"
-      :style="{ [type]: 100 - percent + '%' }"
-    >
-      <slot name="paner"></slot>
-    </Pane>
-    <div class="vue-splitter-container-mask" v-if="active"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Resizer from "./Resizer.vue"
-import Pane from "./Pane.vue"
-import { computed, ref } from "vue"
-
-interface Props {
-  minPercent?: number
-  defaultPercent?: number
-  split: "vertical" | "horizontal"
-  className?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  minPercent: 10,
-  defaultPercent: 50,
-  split: "horizontal",
-  className: "",
-})
-
-const emit = defineEmits(["resize"])
-
-const active = ref(false)
-const hasMoved = ref(false)
-const percent = ref(props.defaultPercent)
-const type = ref(props.split === "vertical" ? "width" : "height")
-const resizeType = ref(props.split === "vertical" ? "left" : "top")
-
-const userSelect = computed(() => (active.value ? "none" : "auto"))
-const cursor = computed(() =>
-  active.value ? (props.split === "vertical" ? "col-resize" : "row-resize") : ""
-)
-
-// watch(
-//   () => defaultPercent,
-//   (newValue) => {
-//     percent.value = newValue
-//   }
-// )
-
-function onClick() {
-  if (!hasMoved.value) {
-    percent.value = 50
-    emit("resize", percent.value)
-  }
-}
-function onMouseDown() {
-  active.value = true
-  hasMoved.value = false
-}
-function onMouseUp() {
-  active.value = false
-}
-function onMouseMove(e: any) {
-  if (e.buttons === 0) {
-    active.value = false
-  }
-  if (active.value) {
-    let offset = 0
-    let target = e.currentTarget
-    if (props.split === "vertical") {
-      while (target) {
-        offset += target.offsetLeft
-        target = target.offsetParent
-      }
-    } else {
-      while (target) {
-        offset += target.offsetTop
-        target = target.offsetParent
-      }
-    }
-    const currentPage = props.split === "vertical" ? e.pageX : e.pageY
-    const targetOffset =
-      props.split === "vertical"
-        ? e.currentTarget.offsetWidth
-        : e.currentTarget.offsetHeight
-    const newPercent =
-      Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
-    if (newPercent > props.minPercent && newPercent < 100 - props.minPercent) {
-      percent.value = newPercent
-    }
-    emit("resize", newPercent)
-    hasMoved.value = true
-  }
-}
-</script>
-
-<style scoped>
-.clearfix:after {
-  visibility: hidden;
-  display: block;
-  font-size: 0;
-  content: " ";
-  clear: both;
-  height: 0;
-}
-.vue-splitter-container {
-  height: 100%;
-  position: relative;
-}
-.vue-splitter-container-mask {
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-</style>
--- a/src/shared/composables/dark.ts
+++ b/src/shared/composables/dark.ts
@@ -1,2 +1,2 @@
-export const isDark = useDark({ storageKey: "theme-appearance" })
+export const isDark = useLocalStorage("theme-appearance", false)
 export const toggleDark = useToggle(isDark)
--- a/src/shared/layout/admin.vue
+++ b/src/shared/layout/admin.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts"></script>

 <template>
-  <el-container>
-    <el-main>
+  <n-layout>
+    <n-layout-content bordered>
      <router-view></router-view>
-    </el-main>
-  </el-container>
+    </n-layout-content>
+  </n-layout>
 </template>

 <style scoped></style>
--- a/src/shared/layout/default.vue
+++ b/src/shared/layout/default.vue
@@ -5,20 +5,24 @@ import Header from "../Header/index.vue"
 </script>

 <template>
-  <el-container>
-    <el-header class="header">
+  <n-layout>
+    <n-layout-header bordered class="header">
      <Header />
-    </el-header>
-    <el-main>
+    </n-layout-header>
+    <n-layout-content class="content">
      <router-view></router-view>
-    </el-main>
+    </n-layout-content>
    <Login />
    <Signup />
-  </el-container>
+  </n-layout>
 </template>

 <style scoped>
 .header {
-  display: flex;
+  padding: 8px;
+}
+
+.content {
+  padding: 16px;
 }
 </style>
--- a/src/shared/split/index.vue
+++ b/src/shared/split/index.vue
@@ -1,141 +0,0 @@
-<template>
-  <div
-    :style="{ cursor, userSelect }"
-    class="vue-splitter-container clearfix"
-    @mouseup="onMouseUp"
-    @mousemove="onMouseMove"
-  >
-    <Pane
-      class="splitter-pane splitter-paneL"
-      :split="split"
-      :style="{ [type]: percent + '%' }"
-    >
-      <slot name="panel"></slot>
-    </Pane>
-
-    <Resizer
-      :className="className"
-      :style="{ [resizeType]: percent + '%' }"
-      :split="split"
-      @mousedown.native="onMouseDown"
-      @click.native="onClick"
-    ></Resizer>
-
-    <Pane
-      class="splitter-pane splitter-paneR"
-      :split="split"
-      :style="{ [type]: 100 - percent + '%' }"
-    >
-      <slot name="paner"></slot>
-    </Pane>
-    <div class="vue-splitter-container-mask" v-if="active"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Resizer from "./Resizer.vue"
-import Pane from "./Pane.vue"
-import { computed, ref } from "vue"
-
-interface Props {
-  minPercent?: number
-  defaultPercent?: number
-  split: "vertical" | "horizontal"
-  className?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  minPercent: 10,
-  defaultPercent: 50,
-  split: "horizontal",
-  className: "",
-})
-
-const emit = defineEmits(["resize"])
-
-const active = ref(false)
-const hasMoved = ref(false)
-const percent = ref(props.defaultPercent)
-const type = ref(props.split === "vertical" ? "width" : "height")
-const resizeType = ref(props.split === "vertical" ? "left" : "top")
-
-const userSelect = computed(() => (active.value ? "none" : "auto"))
-const cursor = computed(() =>
-  active.value ? (props.split === "vertical" ? "col-resize" : "row-resize") : ""
-)
-
-// watch(
-//   () => defaultPercent,
-//   (newValue) => {
-//     percent.value = newValue
-//   }
-// )
-
-function onClick() {
-  if (!hasMoved.value) {
-    percent.value = 50
-    emit("resize", percent.value)
-  }
-}
-function onMouseDown() {
-  active.value = true
-  hasMoved.value = false
-}
-function onMouseUp() {
-  active.value = false
-}
-function onMouseMove(e: any) {
-  if (e.buttons === 0) {
-    active.value = false
-  }
-  if (active.value) {
-    let offset = 0
-    let target = e.currentTarget
-    if (props.split === "vertical") {
-      while (target) {
-        offset += target.offsetLeft
-        target = target.offsetParent
-      }
-    } else {
-      while (target) {
-        offset += target.offsetTop
-        target = target.offsetParent
-      }
-    }
-    const currentPage = props.split === "vertical" ? e.pageX : e.pageY
-    const targetOffset =
-      props.split === "vertical"
-        ? e.currentTarget.offsetWidth
-        : e.currentTarget.offsetHeight
-    const newPercent =
-      Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
-    if (newPercent > props.minPercent && newPercent < 100 - props.minPercent) {
-      percent.value = newPercent
-    }
-    emit("resize", newPercent)
-    hasMoved.value = true
-  }
-}
-</script>
-
-<style scoped>
-.clearfix:after {
-  visibility: hidden;
-  display: block;
-  font-size: 0;
-  content: " ";
-  clear: both;
-  height: 0;
-}
-.vue-splitter-container {
-  height: 100%;
-  position: relative;
-}
-.vue-splitter-container-mask {
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-</style>
--- a/src/shims.d.ts
+++ b/src/shims.d.ts
@@ -1,5 +1,3 @@
-declare module "element-plus/dist/locale/zh-cn.mjs"
-
 declare module "*.md" {
  import type { ComponentOptions } from "vue"
  const Component: ComponentOptions
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,3 +1,5 @@
+import { SUBMISSION_RESULT } from "./types"
+
 export enum SubmissionStatus {
  compile_error = -2,
  wrong_answer = -1,
@@ -12,66 +14,59 @@ export enum SubmissionStatus {
  submitting = 9,
 }

-export const JUDGE_STATUS = {
+export const JUDGE_STATUS: {
+  [key in SUBMISSION_RESULT]: {
+    name: string
+    type: "error" | "success" | "warning" | "info"
+  }
+} = {
  "-2": {
    name: "编译失败",
-    type: "danger",
-    alertType: "error",
+    type: "warning",
  },
  "-1": {
    name: "答案错误",
-    type: "danger",
-    alertType: "error",
+    type: "error",
  },
  "0": {
    name: "答案正确",
    type: "success",
-    alertType: "success",
  },
  "1": {
    name: "运行超时",
-    type: "danger",
-    alertType: "error",
+    type: "error",
  },
  "2": {
    name: "运行超时",
-    type: "danger",
-    alertType: "error",
+    type: "error",
  },
  "3": {
    name: "内存超限",
-    type: "danger",
-    alertType: "error",
+    type: "error",
  },
  "4": {
    name: "运行时错误",
-    type: "danger",
-    alertType: "error",
+    type: "warning",
  },
  "5": {
    name: "系统错误",
-    type: "danger",
-    alertType: "error",
+    type: "error",
  },
  "6": {
    name: "等待评分",
    type: "warning",
-    alertType: "warning",
  },
  "7": {
    name: "正在评分",
    type: "warning",
-    alertType: "warning",
  },
  "8": {
    name: "部分正确",
    type: "warning",
-    alertType: "warning",
  },
  "9": {
    name: "正在提交",
    type: "info",
-    alertType: "info",
  },
 }

--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -38,14 +38,14 @@ export function parseTime(utc: Date, format = "YYYY年M月D日") {
  return time.value
 }

-export function submissionMemoryFormat(memory: string) {
+export function submissionMemoryFormat(memory: number | string | undefined) {
  if (memory === undefined) return "--"
  // 1048576 = 1024 * 1024
-  let t = parseInt(memory) / 1048576
+  let t = parseInt(memory + "") / 1048576
  return String(t.toFixed(0)) + "MB"
 }

-export function submissionTimeFormat(time: number) {
+export function submissionTimeFormat(time: number | string | undefined) {
  if (time === undefined) return "--"
  return time + "ms"
 }
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -93,8 +93,10 @@ export interface Submission {
  language: string
  shared: boolean
  statistic_info: {
-    score: number
-    err_info: string
+    score?: number
+    err_info?: string
+    time_cost?: number
+    memory_cost?: number
  }
  ip: string
  // TODO: 这里不知道是什么
@@ -105,7 +107,7 @@ export interface Submission {

 export interface SubmissionListPayload {
  myself?: "1" | "0"
-  result?: SUBMISSION_RESULT
+  result?: string
  username?: string
  contest_id?: string
  problem_id?: string
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
      "oj/*": ["./src/oj/*"],
      "admin/*": ["./src/admin/*"],
      "learn/*": ["./src/learn/*"],
-    }
+    },
+    "types": ["naive-ui/volar"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,7 +3,10 @@ import path from "path"
 import Vue from "@vitejs/plugin-vue"
 import AutoImport from "unplugin-auto-import/vite"
 import Components from "unplugin-vue-components/vite"
-import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
+import {
+  ElementPlusResolver,
+  NaiveUiResolver,
+} from "unplugin-vue-components/resolvers"
 import IconsResolver from "unplugin-icons/resolver"
 import Icons from "unplugin-icons/vite"
 import Markdown from "vite-plugin-vue-markdown"
@@ -28,12 +31,25 @@ export default defineConfig({
  plugins: [
    Vue({ include: [/\.vue$/, /\.md$/] }),
    AutoImport({
-      imports: ["vue", "vue-router", "@vueuse/core", "pinia"],
-      resolvers: [ElementPlusResolver(), IconsResolver()],
+      imports: [
+        "vue",
+        "vue-router",
+        "@vueuse/core",
+        "pinia",
+        {
+          "naive-ui": [
+            "useDialog",
+            "useMessage",
+            "useNotification",
+            "useLoadingBar",
+          ],
+        },
+      ],
      dts: "./src/auto-imports.d.ts",
    }),
    Components({
      resolvers: [
+        NaiveUiResolver(),
        ElementPlusResolver(),
        IconsResolver({ enabledCollections: ["ep"] }),
      ],