fix.

src/oj/problem/components/Editor.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { LANGUAGE_LABEL, SOURCES } from "../../../utils/constants"
-import { Problem } from "../../../utils/types"
-import { useCodeStore } from "../../store/code"
-import { submissionExists } from "../../api"
+import { SOURCES } from "utils/constants"
+import { Problem } from "utils/types"
+import Monaco from "~/shared/Monaco/index.vue"
+import { useCodeStore } from "oj/store/code"
+import { submissionExists } from "oj/api"
 import { TabsPaneContext } from "element-plus"
 
-import Monaco from "../../../shared/Monaco/index.vue"
 import SubmitPanel from "./SubmitPanel.vue"
 import TestcasePanel from "./TestcasePanel.vue"
 
@@ -54,12 +54,9 @@ function onTab(pane: TabsPaneContext) {
   <el-form inline>
     <el-form-item label="语言" label-width="60">
       <el-select v-model="code.language" class="language">
-        <el-option
-          v-for="item in problem.languages"
-          :key="item"
-          :value="item"
-          :label="LANGUAGE_LABEL[item]"
-        >
+        <el-option v-for="item in problem.languages" :key="item" :value="item">
+          <img class="logo" :src="`/${item}.svg`" alt="logo" />&nbsp;&nbsp;
+          <span>{{ item }}</span>
         </el-option>
       </el-select>
     </el-form-item>
@@ -82,10 +79,14 @@ function onTab(pane: TabsPaneContext) {
 
 <style scoped>
 .language {
-  width: 100px;
+  width: 110px;
 }
 
 .editor {
   min-height: 200px;
 }
+
+.logo {
+  width: 12px;
+}
 </style>

src/oj/problem/components/ProblemContent.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Problem } from "../../../utils/types"
 import { Flag, CloseBold, Select } from "@element-plus/icons-vue"
-import { useCodeStore } from "../../store/code"
-import { SOURCES } from "../../../utils/constants"
-import { createTestSubmission } from "../../../utils/judge"
+import { useCodeStore } from "oj/store/code"
+import { SOURCES } from "utils/constants"
+import { Problem } from "utils/types"
+import { createTestSubmission } from "utils/judge"
 
 interface Props {
   problem: Problem

src/oj/problem/components/ProblemInfo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { DIFFICULTY } from "../../../utils/constants"
-import { getACRate, getTagColor, parseTime } from "../../../utils/functions"
-import { isDesktop } from "../../../utils/breakpoints"
-import { Problem } from "../../../utils/types"
+import { DIFFICULTY } from "utils/constants"
+import { getACRate, getTagColor, parseTime } from "utils/functions"
+import { isDesktop } from "utils/breakpoints"
+import { Problem } from "utils/types"
 
 interface Props {
   problem: Problem

src/oj/problem/components/SubmissionList.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import Pagination from "~/shared/Pagination/index.vue"
+
+const query = reactive({
+  page: 1,
+  limit: 10,
+})
+const total = ref(100)
+</script>
+<template>
+  <el-table max-height="calc(100vh - 171px)"></el-table>
+  <Pagination
+    :total="total"
+    v-model:limit="query.limit"
+    v-model:page="query.page"
+  />
+</template>
+<style scoped></style>

src/oj/problem/components/SubmitPanel.vue

@@ -1,20 +1,13 @@
 <script setup lang="ts">
 import party from "party-js"
 import { Ref } from "vue"
-import {
-  SOURCES,
-  JUDGE_STATUS,
-  SubmissionStatus,
-} from "../../../utils/constants"
-import {
-  submissionMemoryFormat,
-  submissionTimeFormat,
-} from "../../../utils/functions"
-import { Problem, Submission, SubmitCodePayload } from "../../../utils/types"
-import { getSubmission, submitCode } from "../../api"
+import { SOURCES, JUDGE_STATUS, SubmissionStatus } from "utils/constants"
+import { submissionMemoryFormat, submissionTimeFormat } from "utils/functions"
+import { Problem, Submission, SubmitCodePayload } from "utils/types"
+import { getSubmission, submitCode } from "oj/api"
+import { useCodeStore } from "oj/store/code"
 
 import SubmissionResultTag from "../../components/SubmissionResultTag.vue"
-import { useCodeStore } from "../../store/code"
 
 const problem = inject<Ref<Problem>>("problem")
 const { code } = useCodeStore()
@@ -198,7 +191,12 @@ defineExpose({ submit })
       <el-scrollbar v-if="msg" height="354" class="result" noresize>
         <div>{{ msg }}</div>
       </el-scrollbar>
-      <el-table v-if="infoTable.length" height="354" :data="infoTable" stripe>
+      <el-table
+        v-if="infoTable.length"
+        max-height="354"
+        :data="infoTable"
+        stripe
+      >
         <el-table-column prop="test_case" label="测试用例" align="center" />
         <el-table-column label="测试状态" width="120" align="center">
           <template #default="scope">

src/oj/problem/components/TestcasePanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { createTestSubmission } from "../../../utils/judge"
-import { useCodeStore } from "../../store/code"
+import { createTestSubmission } from "utils/judge"
+import { useCodeStore } from "oj/store/code"
 
 const input = ref("")
 const result = ref("")

src/oj/problem/detail.vue

@@ -2,8 +2,9 @@
 import Editor from "./components/Editor.vue"
 import ProblemContent from "./components/ProblemContent.vue"
 import ProblemInfo from "./components/ProblemInfo.vue"
-import { getProblem } from "../api"
-import { isDesktop, isMobile } from "../../utils/breakpoints"
+import SubmissionList from "./components/SubmissionList.vue"
+import { getProblem } from "oj/api"
+import { isDesktop, isMobile } from "utils/breakpoints"
 
 interface Props {
   problemID: string
@@ -32,11 +33,13 @@ provide("problem", readonly(problem))
         <el-tab-pane v-if="isMobile" label="代码编辑" lazy>
           <Editor :problem="problem" />
         </el-tab-pane>
+        <el-tab-pane label="提交列表" lazy>
+          <SubmissionList />
+        </el-tab-pane>
         <el-tab-pane label="比赛信息" v-if="props.contestID" lazy></el-tab-pane>
-        <el-tab-pane label="题目信息" lazy>
+        <el-tab-pane label="统计信息" lazy>
           <ProblemInfo :problem="problem" />
         </el-tab-pane>
-        <el-tab-pane label="提交列表">3</el-tab-pane>
       </el-tabs>
     </el-col>
     <el-col v-if="isDesktop" :span="12">

src/oj/problem/list.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { useUserStore } from "../../shared/store/user"
-import { filterEmptyValue, getTagColor } from "../../utils/functions"
-import { isDesktop } from "../../utils/breakpoints"
-import { getProblemList, getProblemTagList, getRandomProblemID } from "../api"
+import { useUserStore } from "~/shared/store/user"
+import { filterEmptyValue, getTagColor } from "utils/functions"
+import { isDesktop } from "utils/breakpoints"
+import { getProblemList, getProblemTagList, getRandomProblemID } from "oj/api"
+
+import Pagination from "~/shared/Pagination/index.vue"
 
 const difficultyOptions = [
   { label: "全部", value: "" },
@@ -182,35 +184,15 @@ onMounted(listProblems)
     />
     <el-table-column v-if="isDesktop" prop="rate" label="通过率" width="100" />
   </el-table>
-  <el-pagination
-    class="right margin"
-    :layout="isDesktop ? 'prev,pager,next,sizes' : 'prev,next,sizes'"
-    background
+  <Pagination
     :total="total"
-    :page-sizes="[10, 20, 30]"
-    :pager-count="5"
-    v-model:page-size="query.limit"
-    v-model:current-page="query.page"
+    v-model:limit="query.limit"
+    v-model: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>