feat: 按导入时间排序

gkd-kit · Jan 23, 2024 · 3ae4c3a · 3ae4c3a
1 parent 5d7dabe
commit 3ae4c3a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
@@ -1,6 +1,6 @@
 import localforage from 'localforage';
 import { reactive, toRaw, watch } from 'vue';
-import { Snapshot } from './types';
+import type { Snapshot } from './types';
 
 const useStorage = <T>(options: LocalForageOptions = {}) => {
   options.driver ??= localforage.INDEXEDDB;
@@ -100,8 +100,11 @@ export const setSnapshot = async (snapshot: Snapshot, bf: ArrayBuffer) => {
   if (githubZipStorage[snapshot.id]) {
     delete githubZipStorage[snapshot.id];
   }
-  await snapshotStorage.setItem(snapshot.id, snapshot);
-  await screenshotStorage.setItem(snapshot.id, bf);
+  importTimeStorage[snapshot.id] = Date.now();
+  await Promise.all([
+    snapshotStorage.setItem(snapshot.id, snapshot),
+    screenshotStorage.setItem(snapshot.id, bf),
+  ]);
 };
 
 export const cacheStorage = useStorage({
@@ -111,6 +114,11 @@ export const cacheStorage = useStorage({
 
 export const urlStorage = useReactiveStorage<Record<string, number>>(`url`, {});
 
+export const importTimeStorage = useReactiveStorage<Record<number, number>>(
+  'importTime',
+  {},
+);
+
 export const githubJpgStorage = useReactiveStorage<Record<number, string>>(
   `githubJpg`,
   {},

diff --git a/src/utils/table.tsx b/src/utils/table.tsx
@@ -4,12 +4,14 @@ import { shallowReactive } from 'vue';
 import { useAutoWrapWidthColumn } from './size';
 import type { Snapshot } from './types';
 import { getDevice } from './node';
+import { importTimeStorage } from './storage';
 
 export const renderDveice = (row: Snapshot) => {
   return `${getDevice(row).manufacturer} Android${
     getDevice(row).release || `13`
   }`;
 };
+
 export const useSnapshotColumns = () => {
   const ctimeCol = shallowReactive<TableBaseColumn<Snapshot>>({
     key: `id`,
@@ -24,6 +26,23 @@ export const useSnapshotColumns = () => {
       return dayjs(row.id).format('MM-DD HH:mm:ss');
     },
   });
+  const mtimeCol = shallowReactive<TableBaseColumn<Snapshot>>({
+    key: `mtime`,
+    title: `导入时间`,
+    width: `130px`,
+    sortOrder: false,
+    sorter(rowA, rowB) {
+      return (
+        (importTimeStorage[rowA.id] || rowA.id) -
+        (importTimeStorage[rowB.id] || rowB.id)
+      );
+    },
+    render(row) {
+      return dayjs(importTimeStorage[row.id] || row.id).format(
+        'MM-DD HH:mm:ss',
+      );
+    },
+  });
 
   const deviceCol = useAutoWrapWidthColumn<Snapshot>({
     key: `versionRelease`,
@@ -95,6 +114,7 @@ export const useSnapshotColumns = () => {
   };
   return {
     ctimeCol,
+    mtimeCol,
     deviceCol,
     appNameCol,
     appIdCol,

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -18,14 +18,14 @@ import { githubUrlToSelfUrl } from '@/utils/url';
 import {
   NButton,
   NDataTable,
+  NIcon,
   NInput,
   NInputGroup,
   NModal,
   NPopover,
   NSpace,
   PaginationProps,
   type DataTableColumns,
-  NIcon,
 } from 'naive-ui';
 import type { SortState } from 'naive-ui/es/data-table/src/interface';
 import {
@@ -76,6 +76,7 @@ const {
   appIdCol,
   appNameCol,
   ctimeCol,
+  mtimeCol,
   deviceCol,
   appVersionCodeCol,
   appVersionNameCol,
@@ -132,6 +133,7 @@ const columns: DataTableColumns<Snapshot> = reactive([
     type: 'selection',
   },
   ctimeCol,
+  mtimeCol,
   deviceCol,
   appNameCol,
   appIdCol,
@@ -165,11 +167,15 @@ const pagination = shallowReactive<PaginationProps>({
 watch(pagination, reseColWidth);
 
 const handleSorterChange = (sorter: SortState) => {
-  if (sorter.columnKey == ctimeCol.key) {
-    ctimeCol.sortOrder = sorter.order;
-  }
+  [ctimeCol, mtimeCol].forEach((c) => {
+    if (sorter.columnKey != c.key) {
+      c.sortOrder = undefined;
+    } else {
+      c.sortOrder = sorter.order;
+    }
+  });
 };
-
+mtimeCol.sortOrder = `descend`;
 const showModal = shallowRef(false);
 const text = shallowRef(``);
 const importNetwork = useTask(async () => {