🎈 perf: 暂存

src/components/PagedWrapper.vue

@@ -38,7 +38,7 @@ type Succeed = SucceedRespOf<z.infer<T>>;
 type DataList = Succeed['data']['data'];
 const {
   schema,
-  getRequestOptions,
+  requestOptions: getRequestOptions,
   num,
   hidePager = false,
 } = defineProps<{
@@ -48,7 +48,7 @@ const {
   paginationBackground?: boolean;
   paginationLayout?: string;
   hidePager?: boolean;
-  getRequestOptions: (page: number, num: number) => AxiosRequestConfig;
+  requestOptions: (page: number, num: number) => AxiosRequestConfig;
 }>();
 defineSlots<{
   default: (props: { data: DataList }) => unknown;

src/components/club/ClubList.vue

@@ -5,7 +5,7 @@
     :hide-pager="brief"
     :schema="clubListRespSchema"
     :num="10"
-    :get-request-options="getClubListRequestOptions"
+    :request-options="getClubListRequestOptions"
   >
     <template #default="{ data }">
       <div class="flex gap-10px">
@@ -36,7 +36,7 @@ const { click = false, brief = false } = defineProps<{
 const emit = defineEmits<{
   click: [club: Club];
 }>();
-const getClubListRequestOptions: ComponentProps<typeof PagedWrapper>['getRequestOptions'] = (
+const getClubListRequestOptions: ComponentProps<typeof PagedWrapper>['requestOptions'] = (
   page,
   num,
 ) => ({

src/components/manage/ManageBreadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-card>
-    <el-breadcrumb>
+  <el-card class="breadcrumb-card">
+    <el-breadcrumb :separator-icon="ArrowRight">
       <template v-for="matched in $route.matched">
         <el-breadcrumb-item v-if="matched.meta.breadcrumb" :to="$router.resolve(matched)">
           {{ matched.meta.breadcrumb }}
@@ -9,3 +9,6 @@
     </el-breadcrumb>
   </el-card>
 </template>
+<script setup lang="ts">
+import { ArrowRight } from '@element-plus/icons-vue';
+</script>

src/schemas/response.ts

@@ -33,10 +33,10 @@ export const createPagedRespSchema = <T extends z.ZodTypeAny>(data: T) =>
       total: z.number(),
     }),
   );
-export type AnyPagedRespSchema = ReturnType<typeof createPagedRespSchema>;
-export type SucceedRespOf<T> = Extract<T, { type: 'success' }>;
 export type AnyRespSchema = ReturnType<typeof createRespSchema>;
 export type ErrorResp = Extract<z.infer<AnyRespSchema>, { type: 'error' }>;
+export type SucceedRespOf<T> = Extract<T, { type: 'success' }>;
+export type AnyPagedRespSchema = ReturnType<typeof createPagedRespSchema>;
 export const ordinarySchema = createRespSchema(z.literal(true));
 export const idAndNameSchema = z.object({
   id: z.number(),

src/stores/user.ts

@@ -89,6 +89,7 @@ export const useUserStore = defineStore('user', () => {
     try {
       const resp = await getUserInfo({
         validationErrorCB(resp) {
+          console.log('error');
           // 验证失败，则清除token
           if (resp.status === 401) {
             token.value = null;

src/views/manage/ManageClubPage.vue

@@ -1,8 +1,35 @@
 <template>
-  <el-main>
+  <el-main class="flex flex-col gap-5px">
     <manage-breadcrumb />
+    <el-card body-class="flex">
+      <el-input v-model="searchClubName" class="w-50 m-r-12px" placeholder="请输入社团名称" />
+      <el-button type="primary" plain>查询</el-button>
+      <el-button type="warning" plain>重置</el-button>
+    </el-card>
+    <el-card>
+      <paged-wrapper
+        :schema="clubListRespSchema"
+        :request-options="options"
+        :num="20"
+        v-slot="{ data }"
+      >
+        <el-table :data="data"></el-table>
+      </paged-wrapper>
+    </el-card>
   </el-main>
 </template>
 <script setup lang="ts">
 import ManageBreadcrumb from '@/components/manage/ManageBreadcrumb.vue';
+import PagedWrapper from '@/components/PagedWrapper.vue';
+import { clubListRespSchema, type SucceedRespOf } from '@/schemas/response';
+import { ref } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { z } from 'zod';
+const searchClubName = ref('');
+const loading = ref(true);
+const clubList = ref<SucceedRespOf<z.infer<typeof clubListRespSchema>>['data']['data']>();
+const options: ComponentProps<typeof PagedWrapper>['requestOptions'] = (page, num) => ({
+  url: '/api/club/',
+  params: { page, num },
+});
 </script>

src/views/manage/ManagePage.vue

@@ -57,6 +57,9 @@
   &-leave-to {
     opacity: 0;
   }
+  :deep(.el-card) {
+    --el-card-padding: 15px;
+  }
 }
 </style>
 <script setup lang="ts">