first commit.

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>

src/admin/index.vue

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

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>

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

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>

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

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

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

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>

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

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";

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

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;

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

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />