submission list.

src/components.d.ts

@@ -24,6 +24,7 @@ declare module '@vue/runtime-core' {
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -33,6 +34,7 @@ declare module '@vue/runtime-core' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']

src/oj/api.ts

@@ -83,6 +83,6 @@ export function submitCode(data: SubmitCodePayload) {
   return http.post("submission", data)
 }
 
-export function listSubmissions(params: SubmissionListPayload) {
-  return useAxios("submissions", { params }, http, { immediate: false })
+export function getSubmissions(params: SubmissionListPayload) {
+  return http.get("submissions", { params })
 }

src/oj/problem/components/ProblemContent.vue

@@ -90,7 +90,6 @@ const type = (status: Sample["status"]) =>
     :closable="false"
     center
     title="🎉 本 题 已 经 被 你 解 决 啦"
-    effect="dark"
   >
   </el-alert>
 

src/oj/problem/list.vue

@@ -47,16 +47,16 @@ async function listProblems() {
   problems.value = res.results
 }
 
-function routePush() {
+function routerPush() {
   router.push({
-    path: "/",
+    path: route.path,
     query: filterEmptyValue(query),
   })
 }
 
 function search() {
   query.page = 1
-  routePush()
+  routerPush()
 }
 
 function clear() {
@@ -64,7 +64,7 @@ function clear() {
   query.tag = ""
   query.difficulty = ""
   query.page = 1
-  routePush()
+  routerPush()
 }
 
 async function getRandom() {
@@ -76,13 +76,13 @@ function goProblem(row: any) {
   router.push("/problem/" + row._id)
 }
 
-watch(() => query.page, routePush)
+watch(() => query.page, routerPush)
 
 watch(
   () => [query.tag, query.difficulty, query.limit],
   () => {
     query.page = 1
-    routePush()
+    routerPush()
   }
 )
 

src/oj/status/list.vue

@@ -1,43 +1,102 @@
 <script setup lang="ts">
 import Pagination from "~/shared/Pagination/index.vue"
-import { SubmissionListPayload } from "utils/types"
 import {
   submissionMemoryFormat,
   submissionTimeFormat,
   parseTime,
+  filterEmptyValue,
 } from "utils/functions"
-import { listSubmissions } from "oj/api"
+import { getSubmissions } from "oj/api"
+import { isDesktop } from "~/shared/composables/breakpoints"
 import SubmissionResultTag from "oj/components/SubmissionResultTag.vue"
 
 const route = useRoute()
-const problemID = <string>route.query.problem
-const contestID = <string>route.query.contest
-const query = reactive<SubmissionListPayload>({
-  page: 1,
-  limit: 10,
-  offset: 0,
-  username: "",
-  myself: "0",
+const router = useRouter()
+const problemID = <string>route.query.problem ?? ""
+const contestID = <string>route.query.contest ?? ""
+const submissions = ref([])
+const total = ref(0)
+const query = reactive({
+  page: parseInt(<string>route.query.page) || 1,
+  limit: parseInt(<string>route.query.limit) || 10,
+  username: <string>route.query.username ?? "",
+  myself: <"1" | "0">route.query.myself,
+})
+
+async function listSubmissions() {
+  query.page = parseInt(<string>route.query.page) || 1
+  query.limit = parseInt(<string>route.query.limit) || 10
+  query.username = <string>route.query.username ?? ""
+  query.myself = <"1" | "0">route.query.myself
+
+  if (query.page < 1) query.page = 1
+  const offset = query.limit * (query.page - 1)
+  const res = await getSubmissions({
+    ...query,
+    offset,
     problem_id: problemID,
     contest_id: contestID,
   })
+  submissions.value = res.data.results
+  total.value = res.data.total
+}
 
-const { data, isLoading, isFinished, execute } = listSubmissions(query)
+onMounted(listSubmissions)
 
-onMounted(() => {
-  execute()
+function routerPush() {
+  router.push({
+    path: route.path,
+    query: filterEmptyValue(query),
   })
+}
+
+watch(() => query.page, routerPush)
+
+watch(
+  () => [query.limit, query.myself, query.username],
+  () => {
+    query.page = 1
+    routerPush()
+  }
+)
+
+watch(
+  () => route.path === "/status" && route.query,
+  (newVal) => {
+    if (newVal) listSubmissions()
+  }
+)
 </script>
 <template>
-  <el-table v-if="isFinished" :loading="isLoading" :data="data.results">
-    <el-table-column label="提交时间" prop="create_time">
+  <el-form inline>
+    <el-form-item label="提交状态">
+      <el-select></el-select>
+    </el-form-item>
+    <el-form-item label="查看自己">
+      <el-switch></el-switch>
+    </el-form-item>
+    <el-form-item label="搜索提交者">
+      <el-input></el-input>
+    </el-form-item>
+  </el-form>
+  <el-table :data="submissions" stripe>
+    <el-table-column
+      label="提交时间"
+      prop="create_time"
+      :width="isDesktop ? 200 : 120"
+    >
       <template #default="scope">
-        {{ parseTime(scope.row.create_time, "YYYY-M-D hh:mm:ss") }}
+        {{
+          parseTime(
+            scope.row.create_time,
+            isDesktop ? "YYYY-M-D hh:mm:ss" : "M-D hh:mm"
+          )
+        }}
       </template>
     </el-table-column>
-    <el-table-column label="编号">
+    <el-table-column label="编号" min-width="140">
       <template #default="scope">
-        {{ scope.row.id.slice(0, 12) }}
+        <el-link type="primary">{{ scope.row.id.slice(0, 12) }}</el-link>
       </template>
     </el-table-column>
     <el-table-column label="状态" prop="result">
@@ -45,23 +104,35 @@ onMounted(() => {
         <SubmissionResultTag :result="scope.row.result" />
       </template>
     </el-table-column>
-    <el-table-column label="题目" prop="problem"></el-table-column>
-    <el-table-column label="执行耗时">
+    <el-table-column label="题目" width="90">
+      <template #default="scope">
+        <el-link
+          type="primary"
+          @click="$router.push(`/problem/${scope.row.problem}`)"
+        >
+          {{ scope.row.problem }}
+        </el-link>
+      </template>
+    </el-table-column>
+    <el-table-column v-if="isDesktop" label="执行耗时" width="100">
       <template #default="scope">
         {{ submissionTimeFormat(scope.row.statistic_info.time_cost) }}
       </template>
     </el-table-column>
-    <el-table-column label="占用内存">
+    <el-table-column v-if="isDesktop" label="占用内存" width="100">
       <template #default="scope">
         {{ submissionMemoryFormat(scope.row.statistic_info.memory_cost) }}
       </template>
     </el-table-column>
-    <el-table-column label="语言" prop="language"></el-table-column>
-    <el-table-column label="提交者" prop="username"></el-table-column>
+    <el-table-column label="语言" prop="language" width="100"></el-table-column>
+    <el-table-column label="提交者" min-width="120">
+      <template #default="scope">
+        <el-link type="primary">{{ scope.row.username }}</el-link>
+      </template>
+    </el-table-column>
   </el-table>
   <Pagination
-    v-if="isFinished"
-    :total="data.total"
+    :total="total"
     v-model:limit="query.limit"
     v-model:page="query.page"
   />

src/shared/Pagination/index.vue

@@ -22,6 +22,7 @@ watch(page, () => emit("update:page", page))
 
 <template>
   <el-pagination
+    v-if="props.total"
     class="right margin"
     :layout="isDesktop ? 'prev,pager,next,sizes' : 'prev,next,sizes'"
     background