.

src/styles/main.less

@@ -12,9 +12,23 @@ body,
     font-family: 'sh';
     src: url(https://cdn.raex.vip/font/2023-03-24-10-09-25HtghnVXP.ttf);
 }
-.el-card__header {
-    padding: 10px !important;
+.home-view {
+    .el-card__header {
+        padding: 10px !important;
+    }
+    .el-card__body {
+        padding: 10px !important;
+    }
+}
+
+.iloading {
+    animation: loading 1s linear infinite;
+}
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
-.el-card__body{
-    padding: 10px !important;
-}

src/views/AccountsView.vue

@@ -5,6 +5,9 @@
                 <div class="flex-1 mr-4">账号</div>
                 <ElButton @click="onAddAccount">添加账号</ElButton>
                 <ElButton @click="importAccounts">批量导入</ElButton>
+                <ElIcon @click="refresh" class="ml-4 cursor-pointer" :class="{ iloading: loading }">
+                    <RotateClockwise />
+                </ElIcon>
             </div>
         </template>
         <ElTable :data="accounts" size="small" ref="table" :height="tableHeight">
@@ -46,6 +49,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { useFileDialog, useIntervalFn, useElementSize } from '@vueuse/core'
 import { http } from '@/plugins/http'
 import { ethers, Wallet } from 'ethers'
+import { RotateClockwise } from '@vicons/tabler'
 
 const el = ref(null)
 const { width, height } = useElementSize(el)
@@ -159,8 +163,12 @@ async function deleteAccount(account) {
         if ('cancel' !== error) ElMessage.error(error.message)
     }
 }
-
+const loading = ref(false)
 async function refresh() {
+    loading.value = true
+    setTimeout(() => {
+        loading.value = false
+    }, 1000)
     const res = await http.get('/accounts/my', { network: network.value })
     accounts.value = res
 }

src/views/HomeView.vue

@@ -1,11 +1,11 @@
 <template>
     <ElConfigProvider size="small">
-        <ElRow :gutter="20" class="h-full">
-            <ElCol :span="12" class="h-full">
+        <ElRow :gutter="20" class="home-view h-full">
+            <ElCol class="h-full" :xs="24" :sm="12">
                 <AccountsView ref="accountsView" class="h-full" />
             </ElCol>
-            <ElCol :span="12" class="!flex flex-col h-full">
-                <TaskView class=" flex-1" @createTask="onCreateTask" />
+            <ElCol class="!flex flex-col h-full mt-4 md:mt-0" :xs="24" :sm="12">
+                <TaskView class="flex-1" @createTask="onCreateTask" />
                 <LogsView class="flex-1 mt-4" />
             </ElCol>
         </ElRow>
@@ -23,7 +23,11 @@
                     <ElOption v-for="key in TaskType" :key="key" :label="TaskType[key]" :value="key"></ElOption>
                 </ElSelect>
             </ElFormItem>
-            <ElFormItem prop="amount" label="金额">
+            <ElFormItem
+                prop="amount"
+                label="金额"
+                v-if="!(createTaskForm.type === 'mint' || createTaskForm.type === 'removeLiquidity')"
+            >
                 <ElInput v-model="createTaskForm.minAmount" class="!w-36">
                     <template #prepend>MIN</template>
                 </ElInput>
@@ -46,9 +50,6 @@
 import { ref, onMounted, inject, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { http } from '@/plugins/http'
-import { ArrowNarrowRight, ArrowsRightLeft } from '@vicons/tabler'
-import { useFileDialog, useIntervalFn } from '@vueuse/core'
-import WalletAddress from '@/components/WalletAddress.vue'
 import { TaskType } from '@/enums'
 import AccountsView from './AccountsView.vue'
 import TaskView from '@/views/TaskView.vue'
@@ -63,23 +64,25 @@ const showCreateTaskDialog = ref(false)
 const createTaskFormRef = ref(null)
 const createTaskForm = ref({})
 const createTaskRule = {
-    type: [{ required: true, message: '请选择类型', trigger: 'change' }],
+    type: [{ required: true, message: '请选择类型' }],
     amount: [
         {
             validator: (rule, value, callback) => {
                 if (createTaskForm.value.type !== 'min') {
                     if (!(createTaskForm.value.minAmount && createTaskForm.value.maxAmount)) {
                         callback(new Error('请输入金额'))
+                    } else if (Number(createTaskForm.value.minAmount) > Number(createTaskForm.value.maxAmount)) {
+                        callback(new Error('最小金额不能大于最大金额'))
                     } else {
                         callback()
                     }
                 } else {
                     callback()
                 }
-            },
-            trigger: 'change'
+            }
         }
-    ]
+    ],
+    startTime: [{ required: true, message: '请选择执行时间' }]
 }
 const creatingTask = ref(false)
 function onCreateTask() {
@@ -87,6 +90,10 @@ function onCreateTask() {
         ElMessage.warning('请先选择账号')
         return
     }
+    createTaskForm.value = {}
+    if (createTaskFormRef.value) {
+        createTaskFormRef.value.clearValidate()
+    }
     showCreateTaskDialog.value = true
 }
 function createTask() {
@@ -100,7 +107,8 @@ function createTask() {
                         mintAmount: createTaskForm.value.mintAmount,
                         maxAmount: createTaskForm.value.maxAmount
                     },
-                    type: createTaskForm.value.type
+                    type: createTaskForm.value.type,
+                    startTime: createTaskForm.value.startTime
                 })
                 ElMessage.success('任务添加成功')
                 creatingTask.value = false

src/views/LogsView.vue

@@ -3,7 +3,7 @@
         <template #header>
             <div class="flex items-center">
                 <span class="flex-1">日志</span>
-                <ElIcon @click="refresh" class="cursor-pointer" :class="{ loading: loading }">
+                <ElIcon @click="refresh" class="cursor-pointer" :class="{ iloading: loading }">
                     <RotateClockwise />
                 </ElIcon>
             </div>
@@ -20,9 +20,13 @@
             </ElTableColumn>
             <ElTableColumn prop="status" label="状态" align="center" width="80">
                 <template #default="{ row }">
-                    <ElTag :type="row.status === 'success' ? 'success' : 'danger'">
-                        {{ row.status === 'success' ? '成功' : '失败' }}
-                    </ElTag>
+                    <ElTag type="success" v-if="row.status === 'success'"> 成功 </ElTag>
+                    <el-tooltip v-else effect="dark" placement="top" teleported>
+                        <ElTag type="danger"> 失败 </ElTag>
+                        <template #content>
+                            <div class=" max-w-xl">{{ row.error }}</div>
+                        </template>
+                    </el-tooltip>
                 </template>
             </ElTableColumn>
             <ElTableColumn prop="txHash" label="txHash" width="130">
@@ -66,16 +70,3 @@ const tableHeight = computed(() => {
     return height.value - 105
 })
 </script>
-<style lang="less" scoped>
-.loading {
-    animation: loading 1s linear infinite;
-}
-@keyframes loading {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-</style>

src/views/TaskView.vue

@@ -5,7 +5,7 @@
                 <span>任务</span>
                 <ElButton class="ml-4" type="primary" @click="emit('createTask')">新建任务</ElButton>
                 <div class="flex-1"></div>
-                <ElIcon @click="refresh" class="cursor-pointer" :class="{ loading: loading }">
+                <ElIcon @click="refresh" class="cursor-pointer" :class="{ iloading: loading }">
                     <RotateClockwise />
                 </ElIcon>
             </div>
@@ -15,8 +15,14 @@
             <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" />
+            <ElTableColumn prop="status" label="状态" align="center" width="120">
+                <template #default="{ row }">
+                    <ElTag v-if="row.status === 'pending'" type="info">未开始</ElTag>
+                    <ElTag v-if="row.status === 'in_progress'" type="success">执行中</ElTag>
+                    <ElTag v-if="row.status === 'done'" type="primary">已完成</ElTag>
+                </template>
+            </ElTableColumn>
+            <ElTableColumn prop="progress" label="进度" :formatter="progressFormatter" width="100" />
         </PagingTable>
     </ElCard>
 </template>
@@ -52,16 +58,3 @@ const tableHeight = computed(() => {
     return height.value - 105
 })
 </script>
-<style lang="less" scoped>
-.loading {
-    animation: loading 1s linear infinite;
-}
-@keyframes loading {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-</style>