From d0f6c76984e6c5b18d4768b118d9fe9269871f11 Mon Sep 17 00:00:00 2001
From: Litrix <wbpstn@163.com>
Date: Tue, 7 Jan 2025 13:00:00 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PagedWrapper.vue            |  4 +--
 src/components/club/ClubList.vue           |  4 +--
 src/components/manage/ManageBreadcrumb.vue |  7 ++++--
 src/schemas/response.ts                    |  4 +--
 src/stores/user.ts                         |  1 +
 src/views/manage/ManageClubPage.vue        | 29 +++++++++++++++++++++-
 src/views/manage/ManagePage.vue            |  3 +++
 7 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/components/PagedWrapper.vue b/src/components/PagedWrapper.vue
index a26a1d2..5551220 100644
--- a/src/components/PagedWrapper.vue
+++ b/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;
diff --git a/src/components/club/ClubList.vue b/src/components/club/ClubList.vue
index b189d37..125b730 100644
--- a/src/components/club/ClubList.vue
+++ b/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,
 ) => ({
diff --git a/src/components/manage/ManageBreadcrumb.vue b/src/components/manage/ManageBreadcrumb.vue
index 95fff28..b3e139b 100644
--- a/src/components/manage/ManageBreadcrumb.vue
+++ b/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>
diff --git a/src/schemas/response.ts b/src/schemas/response.ts
index 08cd83c..a910f9e 100644
--- a/src/schemas/response.ts
+++ b/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(),
diff --git a/src/stores/user.ts b/src/stores/user.ts
index f89531a..b18050c 100644
--- a/src/stores/user.ts
+++ b/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;
diff --git a/src/views/manage/ManageClubPage.vue b/src/views/manage/ManageClubPage.vue
index f5d72ff..8d9d46b 100644
--- a/src/views/manage/ManageClubPage.vue
+++ b/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>
diff --git a/src/views/manage/ManagePage.vue b/src/views/manage/ManagePage.vue
index 7be1056..6dab433 100644
--- a/src/views/manage/ManagePage.vue
+++ b/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">