add auto-imports.

src/learn/index.vue

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

src/main.ts

@@ -1,4 +1,3 @@
-import { createApp } from "vue"
 import { createRouter, createWebHistory } from "vue-router"
 import { createPinia } from "pinia"
 import "normalize.css"

src/oj/api.ts

@@ -1,8 +1,8 @@
+import { useAxios } from "@vueuse/integrations/useAxios"
+import http from "./../utils/http"
 import { getACRate } from "./../utils/functions"
 import { DIFFICULTY } from "./../utils/constants"
 import { Problem, SubmitCodePayload, Submission } from "./../utils/types"
-import http from "./../utils/http"
-import { useAxios } from "@vueuse/integrations/useAxios"
 
 function filterResult(result: Problem) {
   const newResult: any = {

src/oj/components/submission-result-tag.vue

@@ -9,7 +9,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <el-tag :type="JUDGE_STATUS[result]['type']" disable-transitions>
+  <el-tag :type="(JUDGE_STATUS[result]['type'] as any)" disable-transitions>
     {{ JUDGE_STATUS[result]["name"] }}
   </el-tag>
 </template>

src/oj/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import Login from "../shared/user/login.vue"
-import Signup from "./components/signup.vue"
-import Header from "./components/header.vue"
+import Signup from "../shared/user/signup.vue"
+import Header from "../shared/layout/header.vue"
 </script>
 
 <template>
   <el-container>
-    <el-header>
+    <el-header class="header">
       <Header />
     </el-header>
     <el-main><router-view></router-view></el-main>
@@ -16,7 +16,7 @@ import Header from "./components/header.vue"
 </template>
 
 <style scoped>
-.el-header {
+.header {
   display: flex;
 }
 </style>

src/oj/problem/components/editor-exec.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { useToggle } from "@vueuse/core"
 import { TabsPaneContext } from "element-plus"
-import { inject, onMounted, Ref, ref } from "vue"
 import { Problem } from "../../../utils/types"
 import { submissionExists } from "../../api"
 import SubmitPanel from "./submit-panel.vue"
 
 const tab = ref("testcase")
 const submitPanelRef = ref<{ submit: Function }>()
-const problem = inject<Ref<Problem>>("problem")
+const problem = inject("problem") as Problem
+const id = ref(problem.id)
 const [tried] = useToggle()
 
 onMounted(() => {
@@ -16,7 +15,7 @@ onMounted(() => {
 })
 
 async function checkIfTried() {
-  const res = await submissionExists(problem!.value.id)
+  const res = await submissionExists(id.value)
   tried.value = res.data
 }
 

src/oj/problem/components/editor.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import loader, { Monaco } from "@monaco-editor/loader"
-import { ref, onBeforeUnmount, onMounted, watch, reactive, provide } from "vue"
 import {
   LANGUAGE_LABEL,
   LANGUAGE_VALUE,

src/oj/problem/components/problem-info.vue

@@ -29,7 +29,10 @@ defineProps<Props>()
       {{ problem.memory_limit }}MB
     </el-descriptions-item>
     <el-descriptions-item label="难度">
-      <el-tag disable-transitions :type="getTagColor(problem.difficulty)">
+      <el-tag
+        disable-transitions
+        :type="(getTagColor(problem.difficulty) as any)"
+      >
         {{ DIFFICULTY[problem.difficulty] }}
       </el-tag>
     </el-descriptions-item>

src/oj/problem/components/submit-panel.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { useTimeout, useTimeoutFn, useToggle } from "@vueuse/core"
-import { computed, inject, Ref, ref, watch } from "vue"
 import party from "party-js"
-import { useRoute } from "vue-router"
 import {
   SOURCES,
   JUDGE_STATUS,
@@ -19,12 +16,16 @@ import {
   SubmitCodePayload,
 } from "../../../utils/types"
 import { getSubmission, submitCode } from "../../api"
+
 import SubmissionResultTag from "../../components/submission-result-tag.vue"
+
 const code = inject<{ value: string; language: LANGUAGE }>("code", {
   value: "",
   language: "C",
 })
-const problem = inject<Ref<Problem>>("problem")
+const problem = inject("problem") as Problem
+const template = ref(problem.template)
+const id = ref(problem.id)
 
 const route = useRoute()
 const contestID = <string>route.params.contestID || ""
@@ -79,7 +80,7 @@ const submitDisabled = computed(() => {
   const value = code.value
   if (
     value.trim() === "" ||
-    value === problem!.value.template[code.language] ||
+    value === template.value[code.language] ||
     value === SOURCES[code.language]
   ) {
     return true
@@ -151,7 +152,7 @@ const infoTable = computed(() => {
 
 async function submit() {
   const data: SubmitCodePayload = {
-    problem_id: problem!.value.id,
+    problem_id: id.value,
     language: code.language,
     code: code.value,
   }
@@ -198,7 +199,7 @@ defineExpose({ submit })
       <el-alert
         v-if="submission"
         :closable="false"
-        :type="JUDGE_STATUS[submission.result]['alertType']"
+        :type="(JUDGE_STATUS[submission.result]['alertType'] as any)"
         :title="JUDGE_STATUS[submission.result]['name']"
       >
       </el-alert>

src/oj/problem/detail.vue

@@ -4,7 +4,6 @@ import ProblemContent from "./components/problem-content.vue"
 import ProblemInfo from "./components/problem-info.vue"
 import { getProblem } from "../api"
 import { isDesktop, isMobile } from "../../utils/breakpoints"
-import { provide, readonly } from "vue"
 
 interface Props {
   problemID: string

src/oj/problem/list.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { onMounted, ref, reactive, watch } from "vue"
-import { useRoute, useRouter } from "vue-router"
 import { useUserStore } from "../../shared/stores/user"
 import { filterEmptyValue, getTagColor } from "../../utils/functions"
 import { isDesktop } from "../../utils/breakpoints"
@@ -22,7 +20,7 @@ const total = ref(0)
 const { data: tags } = getProblemTagList()
 
 const query = reactive({
-  keyword: route.query.keyword || "",
+  keyword: (route.query.keyword as string) || "",
   difficulty: route.query.difficulty || "",
   tag: route.query.tag || "",
   page: parseInt(<string>route.query.page) || 1,
@@ -30,7 +28,7 @@ const query = reactive({
 })
 
 async function listProblems() {
-  query.keyword = route.query.keyword || ""
+  query.keyword = (route.query.keyword as string) || ""
   query.difficulty = route.query.difficulty || ""
   query.tag = route.query.tag || ""
   query.page = parseInt(<string>route.query.page) || 1
@@ -155,7 +153,10 @@ onMounted(listProblems)
     <el-table-column prop="title" label="标题" />
     <el-table-column label="难度" width="100">
       <template #default="scope">
-        <el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
+        <el-tag
+          disable-transitions
+          :type="(getTagColor(scope.row.difficulty) as any)"
+        >
           {{ scope.row.difficulty }}
         </el-tag>
       </template>

src/oj/status/detail.vue

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

src/oj/stores/signup.ts

@@ -1,6 +1,3 @@
-import { useToggle } from "@vueuse/core"
-import { defineStore } from "pinia"
-
 export const useSignupStore = defineStore("signup", () => {
   const [visible] = useToggle()
 

src/routes.ts

@@ -7,6 +7,7 @@ const routes = [
     component: Home,
     children: [
       { path: "", component: Problems },
+      { path: "/learn", component: () => import("./learn/index.vue") },
       {
         path: "problem/:problemID",
         component: () => import("./oj/problem/detail.vue"),
@@ -41,9 +42,12 @@ const routes = [
         path: "rank",
         component: () => import("./oj/rank/list.vue"),
       },
+      {
+        path: "/admin",
+        component: () => import("./admin/index.vue"),
+      },
     ],
   },
-  { path: "/admin", component: () => import("./admin/index.vue") },
 ]
 
 export default routes

src/shared/layout/header.vue

@@ -1,10 +1,8 @@
 <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 "../stores/login"
+import { useSignupStore } from "../../oj/stores/signup"
+import { useUserStore } from "../stores/user"
+import { logout } from "../api"
 
 const loginStore = useLoginStore()
 const signupStore = useSignupStore()
@@ -30,6 +28,7 @@ onMounted(userStore.getMyProfile)
 
 <template>
   <el-menu router mode="horizontal" :default-active="$route.path">
+    <el-menu-item index="/learn">自学</el-menu-item>
     <el-menu-item index="/">题库</el-menu-item>
     <el-menu-item index="/contest">竞赛</el-menu-item>
     <el-menu-item index="/status">提交</el-menu-item>

src/shared/stores/login.ts

@@ -1,6 +1,3 @@
-import { useToggle } from "@vueuse/core"
-import { defineStore } from "pinia"
-
 export const useLoginStore = defineStore("login", () => {
   const [visible] = useToggle()
 

src/shared/stores/user.ts

@@ -1,5 +1,3 @@
-import { defineStore } from "pinia"
-import { computed } from "vue"
 import {
   PROBLEM_PERMISSION,
   STORAGE_KEY,

src/shared/user/login.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { FormInstance } from "element-plus"
-import { computed, reactive, ref } from "vue"
 import { useSignupStore } from "../../oj/stores/signup"
 import { login } from "../../shared/api"
 import { useLoginStore } from "../stores/login"
@@ -74,7 +73,7 @@ function goSignup() {
         </el-button>
         <el-button @click="goSignup">没有账号，立即注册</el-button>
       </el-form-item>
-      <el-alert v-if="msg" :title="msg" show-icon type="danger" />
+      <el-alert v-if="msg" :title="msg" show-icon type="error" />
     </el-form>
   </el-dialog>
 </template>

src/shared/user/signup.vue

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

src/utils/breakpoints.ts

@@ -1,4 +1,4 @@
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+import { breakpointsTailwind } from "@vueuse/core"
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 

src/utils/functions.ts

@@ -1,4 +1,3 @@
-import { useDateFormat } from "@vueuse/core"
 import { STORAGE_KEY } from "./constants"
 
 export function getACRate(acCount: number, totalCount: number) {
@@ -23,7 +22,7 @@ export function buildProblemCodeKey(problemID: string, contestID = "") {
   return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
 }
 
-export function getTagColor(tag: string) {
+export function getTagColor(tag: "Low" | "Mid" | "High") {
   return {
     Low: "success",
     Mid: "",

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module "element-plus/dist/locale/zh-cn.mjs"