perf: 完成历史记录人脸库列表功能

config/vite.config.dev.ts

@@ -12,9 +12,9 @@ export default mergeConfig(
       proxy: {
         '/api': {
           // 代理路径前缀
-          target: 'http://192.168.1.12:8001/', // 目标服务器地址
+          target: 'http://192.168.1.12:8002/', // 目标服务器地址
           changeOrigin: true, // 修改请求头中的 Origin
-          rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径（可选）
+          rewrite: path => path.replace(/^\/api/, ''), // 重写路径（可选）
         },
       },
     },

src/components/navbar/index.vue

@@ -148,7 +148,10 @@
             :size="32"
             :style="{ marginRight: '8px', cursor: 'pointer' }"
           >
-            <img alt="avatar" :src="avatar" />
+            <img
+              alt="avatar"
+              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
+            />
           </a-avatar>
           <template #content>
             <a-doption>
@@ -159,7 +162,7 @@
                 </span>
               </a-space>
             </a-doption>
-            <a-doption>
+            <!-- <a-doption>
               <a-space @click="$router.push({ name: 'Info' })">
                 <icon-user />
                 <span>
@@ -182,7 +185,7 @@
                   {{ $t('messageBox.logout') }}
                 </span>
               </a-space>
-            </a-doption>
+            </a-doption> -->
           </template>
         </a-dropdown>
       </li>

src/config/settings.json

@@ -6,7 +6,7 @@
   "topMenu": false,
   "hideMenu": false,
   "menuCollapse": false,
-  "footer": true,
+  "footer": false,
   "themeColor": "#165DFF",
   "menuWidth": 200,
   "globalSettings": false,

src/layout/default-layout.vue

@@ -28,7 +28,7 @@
                 :heading="5"
                 v-if="!collapsed"
               >
-                Arco Pro
+                site-web
               </a-typography-title>
             </a-space>
           </div>

src/types/global.ts

@@ -24,8 +24,9 @@ export interface PostData {
 }
 
 export interface Pagination {
-  pageIndex: number;
-  personNumber: number;
+  current: number;
+  pageSize: number;
+  total?: number;
 }
 
 export type TimeRanger = [string, string];

src/views/dashboard/face-list/index.vue

@@ -8,14 +8,13 @@
         :data="renderData"
         :bordered="false"
         :size="size"
+        @page-change="onPageChange"
       >
         <template #index="{ rowIndex }">
-          {{
-            rowIndex + 1 + (pagination.pageIndex - 1) * pagination.personNumber
-          }}
+          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
         </template>
         <template #picture="{ record }">
-          <a-image width="100" :src="record.picture" />
+          <a-image width="40" :src="record.picture" />
         </template>
       </a-table>
     </a-card>
@@ -23,107 +22,120 @@
 </template>
 
 <script lang="ts" name="FaceListPage" setup>
-  import { computed, ref, reactive, watch, nextTick } from 'vue';
-  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-  import { useI18n } from 'vue-i18n';
-  import useLoading from '@/hooks/loading';
-  import { Pagination } from '@/types/global';
-  import type { RecordParams } from '@/api/record';
-  import { queryFaceList } from '@/api/face';
-  import type { DataList } from '@/api/face';
+import { computed, ref, reactive, watch, nextTick } from 'vue';
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { useI18n } from 'vue-i18n';
+import useLoading from '@/hooks/loading';
+import { Pagination } from '@/types/global';
+import type { RecordParams } from '@/api/record';
+import { queryFaceList } from '@/api/face';
+import type { DataList } from '@/api/face';
 
-  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
-  type Column = TableColumnData & { checked?: true };
+type SizeProps = 'mini' | 'small' | 'medium' | 'large';
+type Column = TableColumnData & { checked?: true };
+interface FaceParams {
+  pageIndex: number;
+  personNumber: number;
+}
+const { loading, setLoading } = useLoading(true);
+const { t } = useI18n();
+const generateFormModel = () => {
+  return {
+    pageIndex: 1,
+    personNumber: 20,
+  } as FaceParams;
+};
+const renderData = ref<DataList[]>([] as DataList[]);
+const formModel = ref<FaceParams>(generateFormModel());
 
-  const { loading, setLoading } = useLoading(true);
-  const { t } = useI18n();
-  const renderData = ref<DataList[]>([] as DataList[]);
-  const cloneColumns = ref<Column[]>([
-    {
-      title: t('faceList.columns.index'),
-      dataIndex: 'index',
-      slotName: 'index',
-      ellipsis: true,
-      tooltip: true,
-      width: 60,
-    },
-    {
-      title: t('recordList.columns.picture'),
-      dataIndex: 'picture',
-      slotName: 'picture',
-      width: 120,
-    },
-    {
-      title: t('faceList.columns.name'),
-      dataIndex: 'name',
-      ellipsis: true,
-      tooltip: true,
-    },
-    {
-      title: t('faceList.columns.nameCh'),
-      dataIndex: 'nameCh',
-    },
-    {
-      title: t('faceList.columns.company'),
-      dataIndex: 'company',
-      ellipsis: true,
-    },
-    {
-      title: t('faceList.columns.Position'),
-      dataIndex: 'Position',
-      ellipsis: true,
-      tooltip: { position: 'left' },
-    },
-    {
-      title: t('faceList.columns.id'),
-      dataIndex: 'id',
-      ellipsis: true,
-    },
-  ]);
+const cloneColumns = ref<Column[]>([
+  {
+    title: t('faceList.columns.index'),
+    dataIndex: 'index',
+    slotName: 'index',
+    ellipsis: true,
+    tooltip: true,
+    width: 60,
+  },
+  {
+    title: t('recordList.columns.picture'),
+    dataIndex: 'picture',
+    slotName: 'picture',
+    width: 100,
+  },
+  {
+    title: t('faceList.columns.name'),
+    dataIndex: 'name',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: t('faceList.columns.nameCh'),
+    dataIndex: 'nameCh',
+  },
+  {
+    title: t('faceList.columns.company'),
+    dataIndex: 'company',
+    ellipsis: true,
+  },
+  {
+    title: t('faceList.columns.Position'),
+    dataIndex: 'Position',
+    ellipsis: true,
+    tooltip: { position: 'left' },
+  },
+  {
+    title: t('faceList.columns.id'),
+    dataIndex: 'id',
+    ellipsis: true,
+  },
+]);
 
-  const size = ref<SizeProps>('medium');
+const size = ref<SizeProps>('medium');
 
-  const basePagination: Pagination = {
-    pageIndex: 1,
-    personNumber: 20,
-  };
-  const pagination = reactive({
-    ...basePagination,
-  });
-  const fetchData = async (
-    params: RecordParams = { pageIndex: 1, personNumber: 20 }
-  ) => {
-    setLoading(true);
-    try {
-      queryFaceList(params).then((res) => {
-        console.log('res', res);
-        renderData.value = res.data;
-        pagination.pageIndex = params.pageIndex;
-        pagination.personNumber = res.total;
-      });
-    } catch (err) {
-      // you can report use errorHandler or other
-    } finally {
-      setLoading(false);
-    }
-  };
+const basePagination: Pagination = {
+  current: 1,
+  pageSize: 20,
+};
+const pagination = reactive({
+  ...basePagination,
+});
+const fetchData = async () => {
+  setLoading(true);
+  try {
+    queryFaceList(formModel.value).then(res => {
+      renderData.value = res.data;
+      pagination.current = formModel.value.pageIndex;
+      pagination.pageSize = pagination.pageSize;
+      pagination.total = res.total;
+    });
+  } catch (err) {
+    // you can report use errorHandler or other
+  } finally {
+    setLoading(false);
+  }
+};
+fetchData();
+const onPageChange = (current: number) => {
+  formModel.value.pageIndex = current;
   fetchData();
+};
 </script>
 
 <style scoped lang="less">
-  .container {
-    padding: 10px;
+.container {
+  padding: 10px;
 
-    :deep(.arco-list-content) {
-      overflow-x: hidden;
-    }
+  :deep(.arco-list-content) {
+    overflow-x: hidden;
+  }
 
-    :deep(.arco-card-meta-title) {
-      font-size: 14px;
-    }
+  :deep(.arco-card-meta-title) {
+    font-size: 14px;
+  }
 
-    .general-card {
-      padding-top: 10px;
-    }
+  .general-card {
+    padding-top: 10px;
   }
+}
 </style>

src/views/dashboard/record-list/index.vue

@@ -9,18 +9,14 @@
         :data="renderData"
         :bordered="false"
         :size="size"
+        @page-change="onPageChange"
       >
         <template #index="{ rowIndex }">
-          {{
-            rowIndex + 1 + (pagination.pageIndex - 1) * pagination.personNumber
-          }}
+          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
         </template>
         <template #picture="{ record }">
           <div :key="record.id">
-            <a-image
-              width="100"
-              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
-            />
+            <a-image width="40" :src="record.picture" />
           </div>
         </template>
       </a-table>
@@ -29,122 +25,136 @@
 </template>
 
 <script lang="ts" name="RecordListPage" setup>
-  import { computed, ref, reactive, watch, nextTick } from 'vue';
-  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-  import { useI18n } from 'vue-i18n';
-  import useLoading from '@/hooks/loading';
-  import { Pagination } from '@/types/global';
-  import { queryRecordList } from '@/api/record';
-  import type { RecordParams, DataList } from '@/api/record';
-  import { useIntervalFn } from '@vueuse/core';
+import { computed, ref, reactive, watch, nextTick } from 'vue';
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { useI18n } from 'vue-i18n';
+import useLoading from '@/hooks/loading';
+import { Pagination } from '@/types/global';
+import { queryRecordList } from '@/api/record';
+import type { RecordParams, DataList } from '@/api/record';
+import { useIntervalFn } from '@vueuse/core';
+interface FaceParams {
+  pageIndex: number;
+  personNumber: number;
+}
+type SizeProps = 'mini' | 'small' | 'medium' | 'large';
+type Column = TableColumnData & { checked?: true };
 
-  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
-  type Column = TableColumnData & { checked?: true };
-
-  const { loading, setLoading } = useLoading(true);
-  const { t } = useI18n();
-  const renderData = ref<DataList[]>([]);
-  const cloneColumns = ref<Column[]>([
-    {
-      title: t('recordList.columns.index'),
-      dataIndex: 'index',
-      slotName: 'index',
-      ellipsis: true,
-      tooltip: true,
-      width: 60,
-    },
-    {
-      title: t('recordList.columns.time'),
-      dataIndex: 'time',
-      ellipsis: true,
-      tooltip: true,
-      width: 180,
-    },
-    {
-      title: t('recordList.columns.picture'),
-      dataIndex: 'picture',
-      slotName: 'picture',
-      width: 120,
-    },
-    {
-      title: t('recordList.columns.name'),
-      dataIndex: 'name',
-      ellipsis: true,
-      tooltip: true,
-    },
-    {
-      title: t('recordList.columns.nameCh'),
-      dataIndex: 'nameCh',
-    },
-    {
-      title: t('recordList.columns.company'),
-      dataIndex: 'company',
-      ellipsis: true,
-    },
-    {
-      title: t('recordList.columns.Position'),
-      dataIndex: 'Position',
-      ellipsis: true,
-      tooltip: { position: 'left' },
-    },
-    {
-      title: t('recordList.columns.id'),
-      dataIndex: 'id',
-      ellipsis: true,
-    },
-    {
-      title: t('recordList.columns.result'),
-      dataIndex: 'result',
-      ellipsis: true,
-    },
-  ]);
-  const size = ref<SizeProps>('medium');
-
-  const basePagination: Pagination = {
+const { loading, setLoading } = useLoading(true);
+const { t } = useI18n();
+const renderData = ref<DataList[]>([]);
+const generateFormModel = () => {
+  return {
     pageIndex: 1,
     personNumber: 20,
-  };
-  const pagination = reactive({
-    ...basePagination,
-  });
-  const fetchData = async (
-    params: RecordParams = { pageIndex: 1, personNumber: 20 }
-  ) => {
-    setLoading(true);
-    try {
-      queryRecordList(params).then((res) => {
-        console.log('res', res);
-        renderData.value = res.data;
-        pagination.pageIndex = params.pageIndex;
-        pagination.personNumber = res.total;
-      });
-    } catch (err) {
-      // you can report use errorHandler or other
-    } finally {
-      setLoading(false);
-    }
-  };
+  } as FaceParams;
+};
+const formModel = ref<FaceParams>(generateFormModel());
+
+const cloneColumns = ref<Column[]>([
+  {
+    title: t('recordList.columns.index'),
+    dataIndex: 'index',
+    slotName: 'index',
+    ellipsis: true,
+    tooltip: true,
+    width: 60,
+  },
+  {
+    title: t('recordList.columns.time'),
+    dataIndex: 'time',
+    ellipsis: true,
+    tooltip: true,
+    width: 180,
+  },
+  {
+    title: t('recordList.columns.picture'),
+    dataIndex: 'picture',
+    slotName: 'picture',
+    width: 100,
+  },
+  {
+    title: t('recordList.columns.name'),
+    dataIndex: 'name',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: t('recordList.columns.nameCh'),
+    dataIndex: 'nameCh',
+  },
+  {
+    title: t('recordList.columns.company'),
+    dataIndex: 'company',
+    ellipsis: true,
+  },
+  {
+    title: t('recordList.columns.Position'),
+    dataIndex: 'Position',
+    ellipsis: true,
+    tooltip: { position: 'left' },
+  },
+  {
+    title: t('recordList.columns.id'),
+    dataIndex: 'id',
+    ellipsis: true,
+  },
+  {
+    title: t('recordList.columns.result'),
+    dataIndex: 'result',
+    ellipsis: true,
+  },
+]);
+const size = ref<SizeProps>('medium');
+
+const basePagination: Pagination = {
+  current: 1,
+  pageSize: 20,
+};
+const pagination = reactive({
+  ...basePagination,
+});
+const fetchData = async () => {
+  setLoading(true);
+  try {
+    queryRecordList(formModel.value).then(res => {
+      renderData.value = res.data;
+      pagination.current = formModel.value.pageIndex;
+      pagination.pageSize = pagination.pageSize;
+      pagination.total = res.total;
+    });
+  } catch (err) {
+    // you can report use errorHandler or other
+  } finally {
+    setLoading(false);
+  }
+};
+fetchData();
+const { pause, resume, isActive } = useIntervalFn(() => {
+  /* your function */
+  formModel.value.pageIndex = 1;
+  fetchData();
+}, 50000);
+const onPageChange = (current: number) => {
+  formModel.value.pageIndex = current;
   fetchData();
-  const { pause, resume, isActive } = useIntervalFn(() => {
-    /* your function */
-    fetchData();
-  }, 50000);
+};
 </script>
 
 <style scoped lang="less">
-  .container {
-    padding: 10px;
+.container {
+  padding: 10px;
 
-    :deep(.arco-list-content) {
-      overflow-x: hidden;
-    }
+  :deep(.arco-list-content) {
+    overflow-x: hidden;
+  }
 
-    :deep(.arco-card-meta-title) {
-      font-size: 14px;
-    }
+  :deep(.arco-card-meta-title) {
+    font-size: 14px;
+  }
 
-    .general-card {
-      padding-top: 10px;
-    }
+  .general-card {
+    padding-top: 10px;
   }
+}
 </style>