.

src/components/PagingTable.vue

@@ -3,7 +3,7 @@
         <slot name="filter"></slot>
     </div>
     <ElConfigProvider :size="isMobile ? '' : 'small'">
-        <ElTable :data="tableData" :height="tableHeight" stripe v-loading="loading">
+        <ElTable :data="tableData" :height="height || tableHeight" stripe v-loading="loading">
             <slot></slot>
         </ElTable>
     </ElConfigProvider>
@@ -36,6 +36,10 @@ const props = defineProps({
     order: {
         type: Object,
         default: () => ({ createdAt: 'DESC' })
+    },
+    height: {
+        type: Number,
+        default: 0
     }
 })
 const search = computed(() => {

src/enums/index.js

@@ -25,3 +25,14 @@ export const UserRole = {
     admin: '管理员',
     api: 'API用户'
 }
+export const TaskType = {
+    bridge2zk: 'bridge2zk',
+    bridge2eth: 'bridge2eth',
+    orbiter2zk: 'orbiter2zk',
+    orbiter2eth: 'orbiter2eth',
+    swapUsdc: 'swapUsdc',
+    swapEth: 'swapEth',
+    addLiquidity: 'addLiquidity',
+    removeLiquidity: 'removeLiquidity',
+    mint: 'mint'
+}

src/views/HomeView.vue

@@ -1,91 +1,108 @@
 <template>
     <ElConfigProvider size="small">
-        <ElCard shadow="never">
-            <div class="text-sm flex flex-col items-center">
-                <div class="flex items-center">
-                    Mainnet
-                    <ElIcon class="ml-2 mr-2">
-                        <ArrowNarrowRight />
-                    </ElIcon>
-                    zkSync Era
-                    <ElInput class="ml-2 !w-20" v-model="depositAmount" />
-                    <ElButton type="primary" class="ml-2" @click="deposit(0)" :loading="depositing">官方</ElButton>
-                    <ElButton type="primary" class="ml-2" @click="deposit(1)" :loading="depositing">Orbiter</ElButton>
-                </div>
+        <ElRow :gutter="20">
+            <ElCol :span="12">
+                <ElCard shadow="never">
+                    <div class="text-sm flex flex-col items-center">
+                        <div class="flex items-center">
+                            Mainnet
+                            <ElIcon class="ml-2 mr-2">
+                                <ArrowNarrowRight />
+                            </ElIcon>
+                            zkSync Era
+                            <ElInput class="ml-2 !w-20" v-model="depositAmount" />
+                            <ElButton type="primary" class="ml-2" @click="deposit(0)" :loading="depositing">
+                                官方
+                            </ElButton>
+                            <ElButton type="primary" class="ml-2" @click="deposit(1)" :loading="depositing">
+                                Orbiter
+                            </ElButton>
+                        </div>
 
-                <div class="flex items-center mt-4">
-                    zkSync Era
-                    <ElIcon class="ml-2 mr-2">
-                        <ArrowNarrowRight />
-                    </ElIcon>
-                    Mainnet
-                    <ElInput class="ml-2 !w-20" v-model="widthdrawAmount" />
-                    <ElButton type="primary" class="ml-2" @click="widthdraw(0)" :loading="widthdrawing">官方</ElButton>
-                    <ElButton type="primary" class="ml-2" @click="widthdraw(1)" :loading="widthdrawing">
-                        Orbiter
-                    </ElButton>
-                </div>
-                <div class="flex items-center mt-4">
-                    ETH
-                    <ElIcon class="ml-2 mr-2">
-                        <ArrowsRightLeft />
-                    </ElIcon>
-                    USDC
-                    <ElInput class="ml-2 !w-20" v-model="liquidityAmount" />
-                    <ElButton class="ml-2" type="primary" @click="addLiquidity" :loading="addingLiquidity">
-                        增加流动性
-                    </ElButton>
-                    <ElButton class="ml-2" type="primary" @click="removeLiquidity" :loading="addingLiquidity">
-                        移除流动性
-                    </ElButton>
-                </div>
-                <div class="flex items-center mt-4">
-                    ETH
-                    <ElIcon class="ml-2 mr-2">
-                        <ArrowNarrowRight />
-                    </ElIcon>
-                    <ElInput class="!w-20 mr-2" v-model="exactOutAmount" />
-                    USDC
-                    <ElButton class="ml-2" type="primary" @click="swapExactOut" :loading="swaping"> SWAP </ElButton>
-                </div>
-                <div class="flex items-center mt-4">
-                    <ElInput class="!w-20 mr-2" v-model="exactInAmount" />
-                    USDC
-                    <ElIcon class="ml-2 mr-2">
-                        <ArrowNarrowRight />
-                    </ElIcon>
-                    ETH
-                    <ElButton class="ml-2" type="primary" @click="swapExactIn" :loading="swaping"> SWAP </ElButton>
-                </div>
-                <div class="flex items-center mt-4">
-                    <ElButton type="primary" @click="mint" :loading="minting">mint</ElButton>
-                </div> 
-            </div>
-        </ElCard>
+                        <div class="flex items-center mt-4">
+                            zkSync Era
+                            <ElIcon class="ml-2 mr-2">
+                                <ArrowNarrowRight />
+                            </ElIcon>
+                            Mainnet
+                            <ElInput class="ml-2 !w-20" v-model="widthdrawAmount" />
+                            <ElButton type="primary" class="ml-2" @click="widthdraw(0)" :loading="widthdrawing"
+                                >官方</ElButton
+                            >
+                            <ElButton type="primary" class="ml-2" @click="widthdraw(1)" :loading="widthdrawing">
+                                Orbiter
+                            </ElButton>
+                        </div>
+                        <div class="flex items-center mt-4">
+                            ETH
+                            <ElIcon class="ml-2 mr-2">
+                                <ArrowsRightLeft />
+                            </ElIcon>
+                            USDC
+                            <ElInput class="ml-2 !w-20" v-model="liquidityAmount" />
+                            <ElButton class="ml-2" type="primary" @click="addLiquidity" :loading="addingLiquidity">
+                                增加流动性
+                            </ElButton>
+                            <ElButton class="ml-2" type="primary" @click="removeLiquidity" :loading="addingLiquidity">
+                                移除流动性
+                            </ElButton>
+                        </div>
+                        <div class="flex items-center mt-4">
+                            ETH
+                            <ElIcon class="ml-2 mr-2">
+                                <ArrowNarrowRight />
+                            </ElIcon>
+                            <ElInput class="!w-20 mr-2" v-model="exactOutAmount" />
+                            USDC
+                            <ElButton class="ml-2" type="primary" @click="swapExactOut" :loading="swaping">
+                                SWAP
+                            </ElButton>
+                        </div>
+                        <div class="flex items-center mt-4">
+                            <ElInput class="!w-20 mr-2" v-model="exactInAmount" />
+                            USDC
+                            <ElIcon class="ml-2 mr-2">
+                                <ArrowNarrowRight />
+                            </ElIcon>
+                            ETH
+                            <ElButton class="ml-2" type="primary" @click="swapExactIn" :loading="swaping">
+                                SWAP
+                            </ElButton>
+                        </div>
+                        <div class="flex items-center mt-4">
+                            <ElButton type="primary" @click="mint" :loading="minting">mint</ElButton>
+                        </div>
+                    </div>
+                </ElCard>
 
-        <div class="mb-3 mt-3">
-            <ElButton @click="onAddAccount">添加账号</ElButton>
-            <ElButton @click="importAccounts">批量导入</ElButton>
-        </div>
-        <ElCard shadow="never">
-            <ElTable :data="accounts" size="small" ref="table" @row-click="rowClick">
-                <el-table-column type="selection" width="55" />
-                <ElTableColumn prop="name" label="名称"></ElTableColumn>
-                <ElTableColumn prop="address" label="地址" min-width="150">
-                    <template #default="{ row }">
-                        <WalletAddress :address="row.address" />
-                    </template>
-                </ElTableColumn>
-                <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 width="80" fixed="right">
-                    <template #default="{ row }">
-                        <ElButton type="danger" size="small" @click="deleteAccount(row)">删除</ElButton>
-                    </template>
-                </ElTableColumn>
-            </ElTable>
-        </ElCard>
+                <div class="mb-3 mt-3">
+                    <ElButton @click="onAddAccount">添加账号</ElButton>
+                    <ElButton @click="importAccounts">批量导入</ElButton>
+                </div>
+                <ElCard shadow="never">
+                    <ElTable :data="accounts" size="small" ref="table" @row-click="rowClick">
+                        <el-table-column type="selection" width="55" />
+                        <ElTableColumn prop="name" label="名称"></ElTableColumn>
+                        <ElTableColumn prop="address" label="地址" min-width="150">
+                            <template #default="{ row }">
+                                <WalletAddress :address="row.address" />
+                            </template>
+                        </ElTableColumn>
+                        <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 width="80" fixed="right">
+                            <template #default="{ row }">
+                                <ElButton type="danger" size="small" @click="deleteAccount(row)">删除</ElButton>
+                            </template>
+                        </ElTableColumn>
+                    </ElTable>
+                </ElCard>
+            </ElCol>
+            <ElCol :span="12">
+                <TaskView />
+            </ElCol>
+        </ElRow>
     </ElConfigProvider>
     <ElDialog v-model="showAddDialog" title="添加账号" class="!w-10/12 max-w-md">
         <ElForm :model="addForm" :rules="addRules" ref="addFormRef">
@@ -111,6 +128,8 @@ import { ethers, Wallet } from 'ethers'
 import { ArrowNarrowRight, ArrowsRightLeft } from '@vicons/tabler'
 import { useFileDialog, useIntervalFn } from '@vueuse/core'
 import WalletAddress from '@/components/WalletAddress.vue'
+import { TaskType } from '@/enums'
+import TaskView from '@/views/TaskView.vue'
 const network = inject('network')
 watch(network, () => {
     getAccounts()
@@ -243,12 +262,14 @@ async function deposit(type) {
     depositing.value = true
     try {
         console.log(table.value.getSelectionRows())
-        await http.post(type === 0 ? '/web3/zk-deposit' : '/web3/orbiter-deposit', {
-            amount: depositAmount.value,
-            accountId: table.value.getSelectionRows()[0].id,
-            network: network.value
+        await http.put('/tasks', {
+            accounts: table.value.getSelectionRows().map((i) => i.id),
+            params: {
+                amount: depositAmount.value
+            },
+            type: type === 0 ? TaskType.bridge2zk : TaskType.orbiter2zk
         })
-        ElMessage.success('成功')
+        ElMessage.success('任务添加成功')
         depositing.value = false
     } catch (error) {
         depositing.value = false

src/views/TaskView.vue

@@ -0,0 +1,28 @@
+<template>
+    <ElCard shadow="never" header="任务">
+        <PagingTable url="/tasks" :height="300" ref="pt">
+            <ElTableColumn prop="id" label="ID" width="50" />
+            <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
+            <ElTableColumn prop="startTime" label="执行时间" :formatter="timeFormatter" width="150" />
+            <ElTableColumn prop="type" label="任务类型" :formatter="taskTypeFormatter" />
+            <ElTableColumn prop="status" label="状态" />
+            <ElTableColumn prop="progress" label="进度" :formatter="progressFormatter" />
+        </PagingTable>
+    </ElCard>
+</template>
+<script setup>
+import { ref } from 'vue'
+import PagingTable from '@/components/PagingTable.vue'
+import { useTimeFormatter, useEnumFormatter } from '@/utils/formatter'
+import { TaskType } from '@/enums'
+import { useIntervalFn } from '@vueuse/core'
+const timeFormatter = useTimeFormatter()
+const taskTypeFormatter = useEnumFormatter(TaskType)
+const pt = ref(null)
+useIntervalFn(() => {
+    pt.value && pt.value.refresh()
+}, 2000)
+function progressFormatter(row, column, value, index) {
+    return `${value + 1}/${row.accounts.length}`
+}
+</script>