first commit.

2023-01-04 10:20:18 +08:00
commit 919fcf5ba9
39 changed files with 4196 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,18 @@
+# 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.
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,35 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OJ</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "oj-next",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.2.2",
+    "element-plus": "^2.2.28",
+    "pinia": "^2.0.28",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "typescript": "^4.9.3",
+    "unplugin-auto-import": "^0.12.1",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.0",
+    "vue-tsc": "^1.0.11"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+
+const locale = zhCn;
+</script>
+
+<template>
+  <el-config-provider :locale="locale">
+    <router-view></router-view>
+  </el-config-provider>
+</template>
+
+<style scoped></style>
--- a/src/admin/index.vue
+++ b/src/admin/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <router-view></router-view>
+</template>
+
+<style scoped>
+</style>
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,74 @@
+import { createApp } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import { createPinia } from "pinia";
+import "element-plus/theme-chalk/display.css";
+import App from "./App.vue";
+
+import Home from "./oj/index.vue";
+import Problems from "./oj/problem/list.vue";
+import storage from "./utils/storage";
+import { STORAGE_KEY } from "./utils/constants";
+import { useLoginStore } from "./shared/stores/login";
+
+const routes = [
+  {
+    path: "/",
+    component: Home,
+    children: [
+      { path: "", component: Problems },
+      {
+        path: "problem/:id",
+        component: () => import("./oj/problem/detail.vue"),
+      },
+      {
+        path: "status",
+        component: () => import("./oj/status/list.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "status/:id",
+        component: () => import("./oj/status/detail.vue"),
+      },
+      {
+        path: "contest",
+        component: () => import("./oj/contest/list.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "contest/:id",
+        component: () => import("./oj/contest/detail.vue"),
+      },
+      {
+        path: "rank",
+        component: () => import("./oj/rank/list.vue"),
+      },
+    ],
+  },
+  { path: "/admin", component: () => import("./admin/index.vue") },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
+    if (!storage.get(STORAGE_KEY.AUTHED)) {
+      const login = useLoginStore();
+      login.show();
+      next("/");
+    } else {
+      next();
+    }
+  } else {
+    next();
+  }
+});
+
+const pinia = createPinia();
+
+const app = createApp(App);
+app.use(router);
+app.use(pinia);
+app.mount("#app");
--- a/src/oj/api.ts
+++ b/src/oj/api.ts
@@ -0,0 +1,58 @@
+import { getACRate } from "./../utils/functions";
+import http from "./../utils/http";
+
+const difficultDict = {
+  Low: "简单",
+  Mid: "中等",
+  High: "困难",
+};
+
+function filterResult(result: any) {
+  const newResult = {
+    displayID: result._id,
+    title: result.title,
+    difficulty: difficultDict[<"Low" | "Mid" | "High">result.difficulty],
+    tags: result.tags,
+    submission: result.submission_number,
+    rate: getACRate(result.accepted_number, result.submission_number),
+  };
+  return newResult;
+}
+
+export async function getProblemList(
+  offset = 0,
+  limit = 10,
+  searchParams: any = {}
+) {
+  let params: any = {
+    paging: true,
+    offset,
+    limit,
+  };
+  Object.keys(searchParams).forEach((element) => {
+    if (searchParams[element]) {
+      params[element] = searchParams[element];
+    }
+  });
+  const res = await http.get("problem", {
+    params,
+  });
+  return {
+    results: res.data.results.map(filterResult),
+    total: res.data.total,
+  };
+}
+
+export function getProblemTagList() {
+  return http.get("problem/tags");
+}
+
+export function getProblem(id: number) {
+  return http.get("problem", {
+    params: { problem_id: id },
+  });
+}
+
+export function getWebsite() {
+  return http.get("website");
+}
--- a/src/oj/components/header.vue
+++ b/src/oj/components/header.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useLoginStore } from "../../shared/stores/login";
+import { useSignupStore } from "../stores/signup";
+import { useUserStore } from "../../shared/stores/user";
+import { onMounted } from "vue";
+import { logout } from "../../shared/api";
+import { useRouter } from "vue-router";
+
+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="/">题库</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.isLoaded && !userStore.isAuthed" class="actions">
+    <el-button @click="loginStore.show">登录</el-button>
+    <el-button @click="signupStore.show">注册</el-button>
+  </div>
+  <div v-if="userStore.isLoaded && userStore.isAuthed" class="actions">
+    <el-dropdown @command="handleDropdown">
+      <h3>{{ userStore.user.username }}</h3>
+      <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;
+}
+</style>
--- a/src/oj/contest/detail.vue
+++ b/src/oj/contest/detail.vue
--- a/src/oj/contest/list.vue
+++ b/src/oj/contest/list.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    contest list
+</template>
+
+<style scoped>
+</style>
--- a/src/oj/contests/index.vue
+++ b/src/oj/contests/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    contests
+</template>
+
+<style scoped>
+</style>
--- a/src/oj/index.vue
+++ b/src/oj/index.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Login from "../shared/user/login.vue";
+import Signup from "./user/signup.vue";
+import Header from "./components/header.vue";
+</script>
+
+<template>
+  <el-container>
+    <el-header>
+      <Header />
+    </el-header>
+    <el-main><router-view></router-view></el-main>
+    <Login />
+    <Signup />
+  </el-container>
+</template>
+
+<style scoped>
+.el-header {
+  display: flex;
+}
+</style>
--- a/src/oj/problem/detail.vue
+++ b/src/oj/problem/detail.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    problem id
+</template>
+
+<style scoped>
+</style>
--- a/src/oj/problem/list.vue
+++ b/src/oj/problem/list.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { onMounted, ref, reactive, watch, VueElement } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { filterEmptyValue } from "../../utils/functions";
+import { getProblemList, getProblemTagList } from "../api";
+
+const difficultyOptions = [
+  { label: "全部", value: "" },
+  { label: "简单", value: "Low" },
+  { label: "中等", value: "Mid" },
+  { label: "困难", value: "High" },
+];
+
+const router = useRouter();
+const route = useRoute();
+const problems = ref([]);
+const tags = ref(<{ id: number; name: string }[]>[]);
+const total = ref(0);
+
+const query = reactive({
+  keyword: route.query.keyword || "",
+  difficulty: route.query.difficulty || "",
+  tag: route.query.tag || "",
+  page: parseInt(<string>route.query.page) || 1,
+  limit: parseInt(<string>route.query.limit) || 10,
+});
+
+function getTagColor(tag: string) {
+  return {
+    简单: "success",
+    中等: "",
+    困难: "danger",
+  }[tag];
+}
+
+async function listTags() {
+  const res = await getProblemTagList();
+  tags.value = res.data;
+}
+
+async function listProblems() {
+  query.keyword = route.query.keyword || "";
+  query.difficulty = route.query.difficulty || "";
+  query.tag = route.query.tag || "";
+  query.page = parseInt(<string>route.query.page) || 1;
+  query.limit = parseInt(<string>route.query.limit) || 10;
+
+  if (query.page < 1) query.page = 1;
+  const offset = (query.page - 1) * query.limit;
+  const res = await getProblemList(offset, query.limit, {
+    keyword: query.keyword,
+    tag: query.tag,
+    difficulty: query.difficulty,
+  });
+  total.value = res.total;
+  problems.value = res.results;
+}
+
+function routePush() {
+  router.push({
+    path: "/",
+    query: filterEmptyValue(query),
+  });
+}
+
+function search() {
+  query.page = 1;
+  routePush();
+}
+
+function clear() {
+  query.keyword = "";
+  query.tag = "";
+  query.difficulty = "";
+  query.page = 1;
+  routePush();
+}
+
+watch(() => query.page, routePush);
+
+watch(
+  () => query.tag || query.difficulty || query.limit,
+  () => {
+    query.page = 1;
+    routePush();
+  }
+);
+
+watch(() => route.query, listProblems);
+
+onMounted(() => {
+  listTags();
+  listProblems();
+});
+</script>
+
+<template>
+  <el-form :inline="true">
+    <el-form-item label="难度">
+      <el-select v-model="query.difficulty">
+        <el-option
+          v-for="item in difficultyOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="标签">
+      <el-select v-model="query.tag" clearable>
+        <el-option
+          v-for="item in tags"
+          :key="item.id"
+          :label="item.name"
+          :value="item.name"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="搜索">
+      <el-input
+        v-model="query.keyword"
+        placeholder="输入编号或标题后回车"
+        clearable
+        @change="search"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="" @click="clear">重置</el-button>
+    </el-form-item>
+  </el-form>
+  <el-table class="hidden-md-and-up" :data="problems" stripe>
+    <el-table-column prop="displayID" label="ID" width="80" />
+    <el-table-column prop="title" label="标题" />
+    <el-table-column label="难度" width="100">
+      <template #default="scope">
+        <el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
+          {{ scope.row.difficulty }}
+        </el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-table class="hidden-sm-and-down pointer" :data="problems" stripe>
+    <el-table-column prop="my_status" label="状态" width="80">
+    </el-table-column>
+    <el-table-column prop="displayID" label="编号" width="100" />
+    <el-table-column prop="title" label="标题" />
+    <el-table-column label="难度" width="100">
+      <template #default="scope">
+        <el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
+          {{ scope.row.difficulty }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="标签" width="200">
+      <template #default="scope">
+        <el-space>
+          <el-tag
+            disable-transitions
+            v-for="tag in scope.row.tags"
+            :key="tag"
+            type="info"
+            >{{ tag }}</el-tag
+          >
+        </el-space>
+      </template>
+    </el-table-column>
+    <el-table-column prop="submission" label="提交数" width="100" />
+    <el-table-column prop="rate" label="通过率" width="100" />
+  </el-table>
+  <el-pagination
+    class="right hidden-md-and-up margin"
+    layout="sizes,prev,next"
+    background
+    :total="total"
+    :page-sizes="[10, 30, 50, 100]"
+    v-model:page-size="query.limit"
+    v-model:current-page="query.page"
+  />
+  <el-pagination
+    class="right margin hidden-sm-and-down"
+    layout="sizes,prev,pager,next"
+    background
+    :total="total"
+    :page-sizes="[10, 30, 50, 100]"
+    v-model:page-size="query.limit"
+    v-model:current-page="query.page"
+  />
+</template>
+
+<style scoped>
+.margin {
+  margin-top: 24px;
+}
+.right {
+  float: right;
+}
+.pointer {
+  cursor: pointer;
+}
+
+.panel {
+  width: 400px;
+  padding: 0 4px;
+}
+
+.panel-tag {
+  margin: 4px;
+}
+</style>
--- a/src/oj/rank/list.vue
+++ b/src/oj/rank/list.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    rank list
+</template>
+
+<style scoped>
+</style>
--- a/src/oj/status/detail.vue
+++ b/src/oj/status/detail.vue
--- a/src/oj/status/list.vue
+++ b/src/oj/status/list.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    status list
+</template>
+
+<style scoped>
+</style>
--- a/src/oj/stores/signup.ts
+++ b/src/oj/stores/signup.ts
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useSignupStore = defineStore("signup", () => {
+  const visible = ref(false);
+
+  function show() {
+    visible.value = true;
+  }
+
+  function hide() {
+    visible.value = false;
+  }
+
+  return { visible, show, hide };
+});
--- a/src/oj/user/signup.vue
+++ b/src/oj/user/signup.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useSignupStore } from "../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>
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -0,0 +1,15 @@
+import http from "../utils/http";
+
+export function login(data: { username: string; password: string }) {
+  return http.post("login", data);
+}
+
+export function logout() {
+  return http.get("logout");
+}
+
+export function getUserInfo(username: string) {
+  return http.get("profile", {
+    params: { username },
+  });
+}
--- a/src/shared/stores/login.ts
+++ b/src/shared/stores/login.ts
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useLoginStore = defineStore("login", () => {
+  const visible = ref(false);
+
+  function show() {
+    visible.value = true;
+  }
+
+  function hide() {
+    visible.value = false;
+  }
+
+  return { visible, show, hide };
+});
--- a/src/shared/stores/user.ts
+++ b/src/shared/stores/user.ts
@@ -0,0 +1,51 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import {
+  PROBLEM_PERMISSION,
+  STORAGE_KEY,
+  USER_TYPE,
+} from "../../utils/constants";
+import storage from "../../utils/storage";
+import { getUserInfo } from "../api";
+
+export const useUserStore = defineStore("user", () => {
+  const profile = ref<any>({});
+  const isLoaded = ref(false);
+  const user = computed(() => profile.value.user || {});
+  const isAuthed = computed(() => !!user.value.email);
+  const isAdminRole = computed(
+    () =>
+      user.value.admin_type === USER_TYPE.ADMIN ||
+      user.value.admin_type === USER_TYPE.SUPER_ADMIN
+  );
+  const isSuperAdmin = computed(
+    () => user.value.admin_type === USER_TYPE.SUPER_ADMIN
+  );
+  const hasProblemPermission = computed(
+    () => user.value.problem_permission !== PROBLEM_PERMISSION.NONE
+  );
+
+  async function getMyProfile() {
+    isLoaded.value = false;
+    const res = await getUserInfo("");
+    isLoaded.value = true;
+    profile.value = res.data || {};
+    storage.set(STORAGE_KEY.AUTHED, !!user.value.email);
+  }
+
+  function clearMyProfile() {
+    profile.value = {};
+    storage.clear();
+  }
+  return {
+    profile,
+    isLoaded,
+    user,
+    isAdminRole,
+    isSuperAdmin,
+    hasProblemPermission,
+    isAuthed,
+    getMyProfile,
+    clearMyProfile,
+  };
+});
--- a/src/shared/user/login.vue
+++ b/src/shared/user/login.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { FormInstance } from "element-plus";
+import { reactive, ref } from "vue";
+import { useSignupStore } from "../../oj/stores/signup";
+import { login } from "../../shared/api";
+import { useLoginStore } from "../stores/login";
+import { useUserStore } from "../stores/user";
+
+const loginStore = useLoginStore();
+const signupStore = useSignupStore();
+const userStore = useUserStore();
+const loading = ref(false);
+const errorMessage = ref("");
+const loginRef = ref<FormInstance>();
+const form = reactive({
+  username: "",
+  password: "",
+});
+const rules = reactive({
+  username: [{ required: true, message: "用户名必填", trigger: "blur" }],
+  password: [
+    { required: true, message: "密码必填", trigger: "blur" },
+    { min: 6, max: 20, message: "长度在6到20位之间", trigger: "change" },
+  ],
+});
+
+async function submit() {
+  if (!loginRef.value) return;
+  await loginRef.value.validate(async (valid) => {
+    if (valid) {
+      loading.value = true;
+      errorMessage.value = "";
+      try {
+        await login(form);
+        loginStore.hide();
+        await userStore.getMyProfile();
+      } catch (err) {
+        errorMessage.value = "用户名或密码不正确";
+      }
+      loading.value = false;
+    }
+  });
+}
+
+function goSignup() {
+  loginStore.hide();
+  signupStore.show();
+}
+</script>
+
+<template>
+  <el-dialog
+    style="max-width: 400px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    v-model="loginStore.visible"
+    title="登录"
+  >
+    <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"></el-input>
+      </el-form-item>
+      <el-form-item label="密码" required prop="password">
+        <el-input
+          v-model="form.password"
+          type="password"
+          show-password
+          @change="submit"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :loading="loading" @click="submit"
+          >登录</el-button
+        >
+        <el-button @click="goSignup">没有账号，立即注册</el-button>
+      </el-form-item>
+      <el-alert
+        v-if="errorMessage"
+        :title="errorMessage"
+        show-icon
+        type="error"
+      />
+    </el-form>
+  </el-dialog>
+</template>
+
+<style scoped></style>
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -0,0 +1,129 @@
+export const JUDGE_STATUS = {
+  "-2": {
+    name: "Compile Error",
+    short: "CE",
+    color: "yellow",
+    type: "warning",
+  },
+  "-1": {
+    name: "Wrong Answer",
+    short: "WA",
+    color: "red",
+    type: "error",
+  },
+  "0": {
+    name: "Accepted",
+    short: "AC",
+    color: "green",
+    type: "success",
+  },
+  "1": {
+    name: "Time Limit Exceeded",
+    short: "TLE",
+    color: "red",
+    type: "error",
+  },
+  "2": {
+    name: "Time Limit Exceeded",
+    short: "TLE",
+    color: "red",
+    type: "error",
+  },
+  "3": {
+    name: "Memory Limit Exceeded",
+    short: "MLE",
+    color: "red",
+    type: "error",
+  },
+  "4": {
+    name: "Runtime Error",
+    short: "RE",
+    color: "red",
+    type: "error",
+  },
+  "5": {
+    name: "System Error",
+    short: "SE",
+    color: "red",
+    type: "error",
+  },
+  "6": {
+    name: "Pending",
+    color: "yellow",
+    type: "warning",
+  },
+  "7": {
+    name: "Judging",
+    color: "blue",
+    type: "info",
+  },
+  "8": {
+    name: "Partial Accepted",
+    short: "PAC",
+    color: "blue",
+    type: "info",
+  },
+  "9": {
+    name: "Submitting",
+    color: "yellow",
+    type: "warning",
+  },
+};
+
+export const CONTEST_STATUS = {
+  NOT_START: "1",
+  UNDERWAY: "0",
+  ENDED: "-1",
+};
+
+export const CONTEST_STATUS_REVERSE = {
+  "1": {
+    name: "Not Started",
+    color: "yellow",
+  },
+  "0": {
+    name: "Underway",
+    color: "green",
+  },
+  "-1": {
+    name: "Ended",
+    color: "red",
+  },
+};
+
+export const RULE_TYPE = {
+  ACM: "ACM",
+  OI: "OI",
+};
+
+export const CONTEST_TYPE = {
+  PUBLIC: "Public",
+  PRIVATE: "Password Protected",
+};
+
+export const USER_TYPE = {
+  REGULAR_USER: "Regular User",
+  ADMIN: "Admin",
+  SUPER_ADMIN: "Super Admin",
+};
+
+export const PROBLEM_PERMISSION = {
+  NONE: "None",
+  OWN: "Own",
+  ALL: "All",
+};
+
+export const STORAGE_KEY = {
+  AUTHED: "authed",
+  PROBLEM_CODE: "problemCode",
+  USER: "user",
+};
+
+export function buildProblemCodeKey(problemID: number, contestID = null) {
+  if (contestID) {
+    return `${STORAGE_KEY.PROBLEM_CODE}_${contestID}_${problemID}`;
+  }
+  return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`;
+}
+
+export const GOOGLE_ANALYTICS_ID = "UA-111499601-1";
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -0,0 +1,14 @@
+export function getACRate(acCount: number, totalCount: number) {
+  let rate = totalCount === 0 ? 0.0 : ((acCount / totalCount) * 100).toFixed(2);
+  return `${rate}%`;
+}
+
+export function filterEmptyValue(object: any) {
+  let query: any = {};
+  Object.keys(object).forEach((key) => {
+    if (object[key] || object[key] === 0 || object[key] === false) {
+      query[key] = object[key];
+    }
+  });
+  return query;
+}
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -0,0 +1,26 @@
+import axios from "axios";
+
+const http = axios.create({
+  baseURL: "/api",
+  xsrfHeaderName: "X-CSRFToken",
+  xsrfCookieName: "csrftoken",
+});
+
+// TODO
+http.interceptors.response.use(
+  (res) => {
+    if (res.data.error) {
+      // 若后端返回为登录，则为session失效，应退出当前登录用户
+      if (res.data.data.startsWith("Please login")) {
+      }
+      return Promise.reject(res.data);
+    } else {
+      return Promise.resolve(res.data);
+    }
+  },
+  (err) => {
+    return Promise.reject(err);
+  }
+);
+
+export default http;
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -0,0 +1,21 @@
+const localStorage = window.localStorage;
+
+export default {
+  set(key: string, value: any) {
+    localStorage.setItem(key, JSON.stringify(value));
+  },
+  get(key: string) {
+    const content = localStorage.getItem(key);
+    if (content) {
+      return JSON.parse(content);
+    } else {
+      return null;
+    }
+  },
+  remove(key: string) {
+    localStorage.removeItem(key);
+  },
+  clear() {
+    localStorage.clear();
+  },
+};
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,37 @@
+import { defineConfig } from "vite";
+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";
+
+const url = "https://oj.hyyz.izhai.net";
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
+  server: {
+    proxy: {
+      "/api": {
+        target: url,
+        changeOrigin: true,
+        headers: {
+          Referer: url,
+        },
+      },
+      "/public": {
+        target: url,
+        changeOrigin: true,
+        headers: {
+          Referer: url,
+        },
+      },
+    },
+  },
+});
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`