update

src/components/Corner.vue

@@ -98,7 +98,7 @@ function clickMenu(name: string) {
       window.open(ADMIN_URL)
       break
     case "submissions":
-      router.push({ name: "submissions" })
+      router.push({ name: "submissions", params: { page: 1 } })
       break
     case "logout":
       handleLogout()

src/pages/Submissions.vue

@@ -6,14 +6,22 @@
           <n-button quaternary @click="$router.push({ name: 'home' })">
             返回首页
           </n-button>
-          <n-pagination
+          <n-flex align="center">
-            v-model:page="query.page"
+            <div>
-            :page-size="10"
+              <n-input
-            :item-count="count"
+                style="width: 120px"
-            simple
+                v-model:value="query.username"
-          >
+                clearable
-            <template #prefix>总共 {{ count }} 条</template>
+              />
-          </n-pagination>
+            </div>
+            <n-pagination
+              v-model:page="query.page"
+              :page-size="10"
+              :item-count="count"
+              simple
+            >
+            </n-pagination>
+          </n-flex>
         </n-flex>
         <n-data-table striped :columns="columns" :data="data"></n-data-table>
       </n-flex>
@@ -57,11 +65,16 @@ import { parseTime } from "../utils/helper"
 import TaskTitle from "../components/submissions/TaskTitle.vue"
 import Preview from "../components/Preview.vue"
 import { submission } from "../store/submission"
+import { useRouter } from "vue-router"
+import { watchDebounced } from "@vueuse/core"
+
+const router = useRouter()
 
 const data = ref<SubmissionOut[]>([])
 const count = ref(0)
 const query = reactive({
   page: 1,
+  username: "",
 })
 
 const html = computed(() => submission.value.html)
@@ -137,7 +150,21 @@ function afterScore() {
   })
 }
 
-watch(() => query.page, init)
+watch(
+  () => query.page,
+  (v) => {
+    init()
+    router.push({ params: { page: v } })
+  },
+)
+watchDebounced(
+  () => query.username,
+  () => {
+    query.page = 1
+    init()
+  },
+  { debounce: 500, maxWait: 1000 },
+)
 onMounted(init)
 onUnmounted(() => {
   submission.value = {

src/pages/UserManage.vue

@@ -155,7 +155,6 @@ async function init() {
   count.value = data.count
 }
 
-watch(() => query.page, init)
 watch(
   () => query.role,
   () => {
@@ -173,7 +172,10 @@ watchDebounced(
 )
 watch(
   () => query.page,
-  (v) => router.push({ params: { page: v } }),
+  (v) => {
+    init()
+    router.push({ params: { page: v } })
+  },
 )
 
 onMounted(init)

src/router.ts

@@ -7,7 +7,7 @@ import { STORAGE_KEY } from "./utils/const"
 const routes = [
   { path: "/", name: "home", component: Home },
   {
-    path: "/submissions",
+    path: "/submissions/:page",
     name: "submissions",
     component: () => import("./pages/Submissions.vue"),
   },