first commit.

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");
+}

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>

src/oj/contest/list.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    contest list
+</template>
+
+<style scoped>
+</style>

src/oj/contests/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    contests
+</template>
+
+<style scoped>
+</style>

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>

src/oj/problem/detail.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    problem id
+</template>
+
+<style scoped>
+</style>

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>

src/oj/rank/list.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    rank list
+</template>
+
+<style scoped>
+</style>

src/oj/status/list.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    status list
+</template>
+
+<style scoped>
+</style>

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 };
+});

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>