.

src/utils/formatter.js

@@ -1,7 +1,7 @@
 import { format } from 'date-fns'
 export function useTimeFormatter(pattern = 'yyyy-MM-dd HH:mm') {
     return function (row, column, value, index) {
-        return format(new Date(value), pattern)
+        return value ? format(new Date(value), pattern) : ''
     }
 }
 

src/views/AccountsView.vue

@@ -11,8 +11,15 @@
                 </ElIcon>
             </div>
         </template>
-        <ElTable :data="accounts" size="small" ref="table" :height="tableHeight">
-            <el-table-column type="selection" width="55" />
+        <ElTable
+            :data="accounts"
+            size="small"
+            ref="table"
+            :height="tableHeight"
+            @row-click="onRowClick"
+            class="select-none"
+        >
+            <el-table-column type="selection" width="55" fixed="left" />
             <ElTableColumn prop="name" label="名称"></ElTableColumn>
             <ElTableColumn prop="address" label="地址" min-width="150">
                 <template #default="{ row }">
@@ -22,6 +29,42 @@
             <ElTableColumn prop="ethBalance" label="ETH余额" min-width="160" />
             <ElTableColumn prop="zkBalance" label="ETH余额(ZK)" min-width="160" />
             <ElTableColumn prop="zkUsdcBalance" label="USDC余额(ZK)" min-width="160" />
+            <ElTableColumn prop="offBridgeNum" label="官方跨链" width="100" sortable></ElTableColumn>
+            <ElTableColumn
+                prop="lastOffBridge"
+                label="官方跨链"
+                width="150"
+                :formatter="timeFormatter"
+                sortable
+            ></ElTableColumn>
+            <ElTableColumn prop="thirdBridgeNum" label="非官跨链" width="100" sortable></ElTableColumn>
+            <ElTableColumn
+                prop="lastThirdBridge"
+                label="非官跨链"
+                width="150"
+                :formatter="timeFormatter"
+                sortable
+            ></ElTableColumn>
+            <ElTableColumn prop="addLiquidityNum" label="增加流动性" width="100" sortable></ElTableColumn>
+            <ElTableColumn
+                prop="lastAddLiquidity"
+                label="增加流动性"
+                width="150"
+                :formatter="timeFormatter"
+                sortable
+            ></ElTableColumn>
+            <ElTableColumn prop="removeLiquidityNum" label="移除流动性" width="100" sortable></ElTableColumn>
+            <ElTableColumn
+                prop="lastRemoveLiquidity"
+                label="移除流动性"
+                width="150"
+                :formatter="timeFormatter"
+                sortable
+            ></ElTableColumn>
+            <ElTableColumn prop="swapNum" label="swap" width="100" sortable></ElTableColumn>
+            <ElTableColumn prop="lastSwap" label="swap" width="150" :formatter="timeFormatter" sortable></ElTableColumn>
+            <ElTableColumn prop="mintNum" label="mint" width="100" sortable></ElTableColumn>
+            <ElTableColumn prop="mint" label="mint时间" width="150" :formatter="timeFormatter" sortable></ElTableColumn>
             <ElTableColumn width="80" fixed="right">
                 <template #default="{ row }">
                     <ElButton type="danger" size="small" @click="deleteAccount(row)">删除</ElButton>
@@ -47,11 +90,13 @@
 <script setup>
 import { inject, watch, ref, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { useFileDialog, useIntervalFn, useElementSize } from '@vueuse/core'
+import { useFileDialog, useIntervalFn, useElementSize, useMagicKeys } from '@vueuse/core'
 import { http } from '@/plugins/http'
 import { ethers, Wallet } from 'ethers'
-import { RotateClockwise } from '@vicons/tabler'
+import { RotateClockwise, DotsVertical } from '@vicons/tabler'
+import { useTimeFormatter } from '@/utils/formatter'
 
+const timeFormatter = useTimeFormatter()
 const el = ref(null)
 const { width, height } = useElementSize(el)
 const tableHeight = computed(() => {
@@ -72,6 +117,28 @@ const savingAccount = ref(false)
 watch(network, () => {
     refresh()
 })
+const { shift, ctrl } = useMagicKeys({ passive: false })
+const firstIndex = ref(null)
+function onRowClick(row, column, event) {
+    if (shift.value) {
+        let secondIndex = accounts.value.findIndex((item) => item.id === row.id)
+        console.log('secondIndex', secondIndex)
+        if (firstIndex.value != null) {
+            let secondIndex = accounts.value.findIndex((item) => item.id === row.id)
+            const min = Math.min(firstIndex.value, secondIndex)
+            const max = Math.max(firstIndex.value, secondIndex)
+            console.log('min', min, 'max', max)
+            for (let i = min + 1; i < max; i++) {
+                table.value.toggleRowSelection(accounts.value[i])
+            }
+            firstIndex.value = null
+        } else {
+            console.log('firstIndex', firstIndex)
+            firstIndex.value = secondIndex
+        }
+    }
+    table.value.toggleRowSelection(row)
+}
 
 function onAddAccount() {
     if (addFormRef.value) {