problem list.

components.d.ts

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -29,6 +30,8 @@ declare module '@vue/runtime-core' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
+    IEpSelect: typeof import('~icons/ep/select')['default']
+    IEpSemiSelect: typeof import('~icons/ep/semi-select')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

package.json

@@ -6,9 +6,11 @@
   "scripts": {
     "start": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "fmt": "prettier --write src *.d.ts *.ts"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.0.10",
     "axios": "^1.2.2",
     "element-plus": "^2.2.28",
     "pinia": "^2.0.28",
@@ -16,11 +18,14 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
+    "@iconify-json/ep": "^1.1.8",
     "@vitejs/plugin-vue": "^4.0.0",
-    "typescript": "^4.9.3",
+    "prettier": "^2.8.1",
+    "typescript": "^4.9.4",
     "unplugin-auto-import": "^0.12.1",
+    "unplugin-icons": "^0.15.0",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.0",
-    "vue-tsc": "^1.0.11"
+    "vite": "^4.0.4",
+    "vue-tsc": "^1.0.20"
   }
 }

src/.prettierrc.toml

@@ -0,0 +1 @@
+semi=false

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+import zhCn from "element-plus/dist/locale/zh-cn.mjs"
 
-const locale = zhCn;
+const locale = zhCn
 </script>
 
 <template>

src/admin/index.vue

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

src/main.ts

@@ -1,14 +1,14 @@
-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 { 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";
+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 = [
   {
@@ -45,30 +45,30 @@ const routes = [
     ],
   },
   { 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("/");
+      const login = useLoginStore()
+      login.show()
+      next("/")
     } else {
-      next();
+      next()
     }
   } else {
-    next();
+    next()
   }
-});
+})
 
-const pinia = createPinia();
+const pinia = createPinia()
 
-const app = createApp(App);
-app.use(router);
-app.use(pinia);
-app.mount("#app");
+const app = createApp(App)
+app.use(router)
+app.use(pinia)
+app.mount("#app")

src/oj/api.ts

@@ -1,22 +1,29 @@
-import { getACRate } from "./../utils/functions";
-import http from "./../utils/http";
+import { getACRate } from "./../utils/functions"
+import http from "./../utils/http"
 
 const difficultDict = {
   Low: "简单",
   Mid: "中等",
   High: "困难",
-};
+}
 
 function filterResult(result: any) {
-  const newResult = {
+  const newResult: any = {
     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;
+  }
+  if (result.my_status === null || result.my_status === undefined) {
+    newResult.status = "none"
+  } else if (result.my_status === 0) {
+    newResult.status = "done"
+  } else {
+    newResult.status = "tried"
+  }
+  return newResult
 }
 
 export async function getProblemList(
@@ -28,31 +35,35 @@ export async function getProblemList(
     paging: true,
     offset,
     limit,
-  };
+  }
   Object.keys(searchParams).forEach((element) => {
     if (searchParams[element]) {
-      params[element] = 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");
+  return http.get("problem/tags")
+}
+
+export function getRandomProblemID() {
+  return http.get("pickone")
 }
 
 export function getProblem(id: number) {
   return http.get("problem", {
     params: { problem_id: id },
-  });
+  })
 }
 
 export function getWebsite() {
-  return http.get("website");
+  return http.get("website")
 }

src/oj/components/header.vue

@@ -1,31 +1,31 @@
 <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";
+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();
+const loginStore = useLoginStore()
+const signupStore = useSignupStore()
+const userStore = useUserStore()
+const router = useRouter()
 
 async function handleLogout() {
-  await logout();
-  userStore.clearMyProfile();
-  router.replace("/");
+  await logout()
+  userStore.clearMyProfile()
+  router.replace("/")
 }
 
 function handleDropdown(command: string) {
   switch (command) {
     case "logout":
-      handleLogout();
-      break;
+      handleLogout()
+      break
   }
 }
 
-onMounted(userStore.getMyProfile);
+onMounted(userStore.getMyProfile)
 </script>
 
 <template>
@@ -41,7 +41,7 @@ onMounted(userStore.getMyProfile);
   </div>
   <div v-if="userStore.isLoaded && userStore.isAuthed" class="actions">
     <el-dropdown @command="handleDropdown">
-      <h3>{{ userStore.user.username }}</h3>
+      <el-button>{{ userStore.user.username }}</el-button>
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item>我的主页</el-dropdown-item>
@@ -64,5 +64,6 @@ onMounted(userStore.getMyProfile);
 .actions {
   display: flex;
   align-items: center;
+  border-bottom: solid 1px var(--el-menu-border-color);
 }
 </style>

src/oj/contest/list.vue

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

src/oj/contests/index.vue

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

src/oj/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Login from "../shared/user/login.vue";
-import Signup from "./user/signup.vue";
-import Header from "./components/header.vue";
+import Login from "../shared/user/login.vue"
+import Signup from "./user/signup.vue"
+import Header from "./components/header.vue"
 </script>
 
 <template>

src/oj/problem/detail.vue

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

src/oj/problem/list.vue

@@ -1,21 +1,23 @@
 <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";
+import { onMounted, ref, reactive, watch, VueElement } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useUserStore } from "../../shared/stores/user"
+import { filterEmptyValue } from "../../utils/functions"
+import { getProblemList, getProblemTagList, getRandomProblemID } 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 router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+const problems = ref([])
+const tags = ref(<{ id: number; name: string }[]>[])
+const total = ref(0)
 
 const query = reactive({
   keyword: route.query.keyword || "",
@@ -23,75 +25,92 @@ const query = reactive({
   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];
+  }[tag]
 }
 
 async function listTags() {
-  const res = await getProblemTagList();
-  tags.value = res.data;
+  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;
+  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;
+  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;
+  })
+  total.value = res.total
+  problems.value = res.results
 }
 
 function routePush() {
   router.push({
     path: "/",
     query: filterEmptyValue(query),
-  });
+  })
 }
 
 function search() {
-  query.page = 1;
-  routePush();
+  query.page = 1
+  routePush()
 }
 
 function clear() {
-  query.keyword = "";
-  query.tag = "";
-  query.difficulty = "";
-  query.page = 1;
-  routePush();
+  query.keyword = ""
+  query.tag = ""
+  query.difficulty = ""
+  query.page = 1
+  routePush()
 }
 
-watch(() => query.page, routePush);
+async function getRandom() {
+  const res = await getRandomProblemID()
+  router.push("/problem/" + res.data)
+}
+
+function goProblem(row: any) {
+  router.push("/problem/" + row.displayID)
+}
+
+watch(() => query.page, routePush)
 
 watch(
   () => query.tag || query.difficulty || query.limit,
   () => {
-    query.page = 1;
-    routePush();
+    query.page = 1
+    routePush()
   }
-);
+)
 
-watch(() => route.query, listProblems);
+watch(
+  () => route.path === "/" && route.query,
+  (newVal) => {
+    if (newVal) listProblems()
+  }
+)
+
+// TODO: 这里会在登录时候执行两次，有BUG
+watch(() => userStore.isLoaded && userStore.isAuthed, listProblems)
 
 onMounted(() => {
-  listTags();
-  listProblems();
-});
+  listTags()
+  listProblems()
+})
 </script>
 
 <template>
@@ -128,9 +147,15 @@ onMounted(() => {
     </el-form-item>
     <el-form-item>
       <el-button type="" @click="clear">重置</el-button>
+      <el-button type="" @click="getRandom">随机一题</el-button>
     </el-form-item>
   </el-form>
-  <el-table class="hidden-md-and-up" :data="problems" stripe>
+  <el-table
+    class="hidden-md-and-up"
+    :data="problems"
+    stripe
+    @row-click="goProblem"
+  >
     <el-table-column prop="displayID" label="ID" width="80" />
     <el-table-column prop="title" label="标题" />
     <el-table-column label="难度" width="100">
@@ -141,8 +166,25 @@ onMounted(() => {
       </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
+    class="hidden-sm-and-down pointer"
+    :data="problems"
+    stripe
+    @row-click="goProblem"
+  >
+    <el-table-column label="状态" width="80">
+      <template #default="scope">
+        <el-icon
+          v-if="scope.row.status === 'done'"
+          color="var(--el-color-success)"
+          ><i-ep-select
+        /></el-icon>
+        <el-icon
+          v-if="scope.row.status === 'tried'"
+          color="var(--el-color-error)"
+          ><i-ep-semi-select
+        /></el-icon>
+      </template>
     </el-table-column>
     <el-table-column prop="displayID" label="编号" width="100" />
     <el-table-column prop="title" label="标题" />
@@ -171,19 +213,20 @@ onMounted(() => {
   </el-table>
   <el-pagination
     class="right hidden-md-and-up margin"
-    layout="sizes,prev,next"
+    layout="prev,next,sizes"
     background
     :total="total"
-    :page-sizes="[10, 30, 50, 100]"
+    :page-sizes="[10, 20, 30]"
     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"
+    layout="prev,pager,next,sizes"
     background
     :total="total"
-    :page-sizes="[10, 30, 50, 100]"
+    :page-sizes="[10, 20, 30]"
+    :pager-count="5"
     v-model:page-size="query.limit"
     v-model:current-page="query.page"
   />

src/oj/rank/list.vue

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

src/oj/status/list.vue

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

src/oj/stores/signup.ts

@@ -1,16 +1,16 @@
-import { defineStore } from "pinia";
-import { ref } from "vue";
+import { defineStore } from "pinia"
+import { ref } from "vue"
 
 export const useSignupStore = defineStore("signup", () => {
-  const visible = ref(false);
+  const visible = ref(false)
 
   function show() {
-    visible.value = true;
+    visible.value = true
   }
 
   function hide() {
-    visible.value = false;
+    visible.value = false
   }
 
-  return { visible, show, hide };
-});
+  return { visible, show, hide }
+})

src/oj/user/signup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useSignupStore } from "../stores/signup";
-const store = useSignupStore();
+import { useSignupStore } from "../stores/signup"
+const store = useSignupStore()
 </script>
 
 <template>

src/shared/api.ts

@@ -1,15 +1,15 @@
-import http from "../utils/http";
+import http from "../utils/http"
 
 export function login(data: { username: string; password: string }) {
-  return http.post("login", data);
+  return http.post("login", data)
 }
 
 export function logout() {
-  return http.get("logout");
+  return http.get("logout")
 }
 
 export function getUserInfo(username: string) {
   return http.get("profile", {
     params: { username },
-  });
+  })
 }

src/shared/stores/login.ts

@@ -1,16 +1,16 @@
-import { defineStore } from "pinia";
-import { ref } from "vue";
+import { defineStore } from "pinia"
+import { ref } from "vue"
 
 export const useLoginStore = defineStore("login", () => {
-  const visible = ref(false);
+  const visible = ref(false)
 
   function show() {
-    visible.value = true;
+    visible.value = true
   }
 
   function hide() {
-    visible.value = false;
+    visible.value = false
   }
 
-  return { visible, show, hide };
-});
+  return { visible, show, hide }
+})

src/shared/stores/user.ts

@@ -1,41 +1,41 @@
-import { defineStore } from "pinia";
-import { computed, ref } from "vue";
+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";
+} 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 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);
+    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();
+    profile.value = {}
+    storage.clear()
   }
   return {
     profile,
@@ -47,5 +47,5 @@ export const useUserStore = defineStore("user", () => {
     isAuthed,
     getMyProfile,
     clearMyProfile,
-  };
-});
+  }
+})

src/shared/user/login.vue

@@ -1,50 +1,50 @@
 <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";
+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 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;
+  if (!loginRef.value) return
   await loginRef.value.validate(async (valid) => {
     if (valid) {
-      loading.value = true;
-      errorMessage.value = "";
+      loading.value = true
+      errorMessage.value = ""
       try {
-        await login(form);
-        loginStore.hide();
-        await userStore.getMyProfile();
+        await login(form)
+        loginStore.hide()
+        await userStore.getMyProfile()
       } catch (err) {
-        errorMessage.value = "用户名或密码不正确";
+        errorMessage.value = "用户名或密码不正确"
       }
-      loading.value = false;
+      loading.value = false
     }
-  });
+  })
 }
 
 function goSignup() {
-  loginStore.hide();
-  signupStore.show();
+  loginStore.hide()
+  signupStore.show()
 }
 </script>
 

src/utils/constants.ts

@@ -68,13 +68,13 @@ export const JUDGE_STATUS = {
     color: "yellow",
     type: "warning",
   },
-};
+}
 
 export const CONTEST_STATUS = {
   NOT_START: "1",
   UNDERWAY: "0",
   ENDED: "-1",
-};
+}
 
 export const CONTEST_STATUS_REVERSE = {
   "1": {
@@ -89,41 +89,41 @@ export const CONTEST_STATUS_REVERSE = {
     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}_${contestID}_${problemID}`
   }
-  return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`;
+  return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
 }
 
-export const GOOGLE_ANALYTICS_ID = "UA-111499601-1";
+export const GOOGLE_ANALYTICS_ID = "UA-111499601-1"

src/utils/functions.ts

@@ -1,14 +1,14 @@
 export function getACRate(acCount: number, totalCount: number) {
-  let rate = totalCount === 0 ? 0.0 : ((acCount / totalCount) * 100).toFixed(2);
-  return `${rate}%`;
+  let rate = totalCount === 0 ? 0.0 : ((acCount / totalCount) * 100).toFixed(2)
+  return `${rate}%`
 }
 
 export function filterEmptyValue(object: any) {
-  let query: any = {};
+  let query: any = {}
   Object.keys(object).forEach((key) => {
     if (object[key] || object[key] === 0 || object[key] === false) {
-      query[key] = object[key];
+      query[key] = object[key]
     }
-  });
-  return query;
+  })
+  return query
 }

src/utils/http.ts

@@ -1,10 +1,10 @@
-import axios from "axios";
+import axios from "axios"
 
 const http = axios.create({
   baseURL: "/api",
   xsrfHeaderName: "X-CSRFToken",
   xsrfCookieName: "csrftoken",
-});
+})
 
 // TODO
 http.interceptors.response.use(
@@ -13,14 +13,14 @@ http.interceptors.response.use(
       // 若后端返回为登录，则为session失效，应退出当前登录用户
       if (res.data.data.startsWith("Please login")) {
       }
-      return Promise.reject(res.data);
+      return Promise.reject(res.data)
     } else {
-      return Promise.resolve(res.data);
+      return Promise.resolve(res.data)
     }
   },
   (err) => {
-    return Promise.reject(err);
+    return Promise.reject(err)
   }
-);
+)
 
-export default http;
+export default http

src/utils/storage.ts

@@ -1,21 +1,21 @@
-const localStorage = window.localStorage;
+const localStorage = window.localStorage
 
 export default {
   set(key: string, value: any) {
-    localStorage.setItem(key, JSON.stringify(value));
+    localStorage.setItem(key, JSON.stringify(value))
   },
   get(key: string) {
-    const content = localStorage.getItem(key);
+    const content = localStorage.getItem(key)
     if (content) {
-      return JSON.parse(content);
+      return JSON.parse(content)
     } else {
-      return null;
+      return null
     }
   },
   remove(key: string) {
-    localStorage.removeItem(key);
+    localStorage.removeItem(key)
   },
   clear() {
-    localStorage.clear();
+    localStorage.clear()
   },
-};
+}

vite.config.ts

@@ -3,35 +3,35 @@ 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 IconsResolver from "unplugin-icons/resolver";
+import Icons from "unplugin-icons/vite";
 
 const url = "https://oj.hyyz.izhai.net";
+const proxyConfig = {
+  target: url,
+  changeOrigin: true,
+  headers: { Referer: url },
+};
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     AutoImport({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver(), IconsResolver()],
     }),
     Components({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [
+        ElementPlusResolver(),
+        IconsResolver({ enabledCollections: ["ep"] }),
+      ],
     }),
+    Icons({ autoInstall: true }),
   ],
   server: {
     proxy: {
-      "/api": {
-        target: url,
-        changeOrigin: true,
-        headers: {
-          Referer: url,
-        },
-      },
-      "/public": {
-        target: url,
-        changeOrigin: true,
-        headers: {
-          Referer: url,
-        },
-      },
+      "/api": proxyConfig,
+      "/public": proxyConfig,
     },
   },
 });