更新

platform/src/views/accountpool/cursor/components/detail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
+import { computed, reactive, ref, watch, onBeforeUnmount } from "vue";
 import { ElMessage } from "element-plus";
 
 const props = defineProps({
@@ -15,9 +15,21 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hasPrev: {
+    type: Boolean,
+    default: false,
+  },
+  hasNext: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(["update:modelValue", "save-remark", "detail-action"]);
+const emit = defineEmits(["update:modelValue", "save-remark", "detail-action", "prev", "next"]);
 const remarkText = ref("");
 const remarkDialogVisible = ref(false);
 const platformDialogVisible = ref(false);
@@ -184,6 +196,29 @@ function copyAll() {
   if (props.row?.token) parts.push(`Token：${props.row.token}`);
   copyText(parts.join("\n"), "已复制完整账号信息");
 }
+
+function handleKeyDown(e) {
+  if (e.key === "ArrowLeft" && props.hasPrev && !props.loading) {
+    emit("prev");
+  } else if (e.key === "ArrowRight" && props.hasNext && !props.loading) {
+    emit("next");
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      window.addEventListener("keydown", handleKeyDown);
+    } else {
+      window.removeEventListener("keydown", handleKeyDown);
+    }
+  }
+);
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handleKeyDown);
+});
 </script>
 
 <template>
@@ -209,7 +244,25 @@ function copyAll() {
       </div>
     </template>
 
-    <div v-if="row" class="detail-body">
+    <div v-if="row" class="detail-body" v-loading="loading">
+      <!-- Prev/Next Navigation Buttons -->
+      <div 
+        class="nav-btn prev-btn" 
+        :class="{ 'is-disabled': !hasPrev || loading }" 
+        title="上一个 (Left Arrow)" 
+        @click="hasPrev && !loading && emit('prev')"
+      >
+        <el-icon><ArrowLeft /></el-icon>
+      </div>
+      <div 
+        class="nav-btn next-btn" 
+        :class="{ 'is-disabled': !hasNext || loading }" 
+        title="下一个 (Right Arrow)" 
+        @click="hasNext && !loading && emit('next')"
+      >
+        <el-icon><ArrowRight /></el-icon>
+      </div>
+
       <div class="info-grid">
         <div class="info-card">
           <div class="info-label">ID</div>
@@ -331,13 +384,13 @@ function copyAll() {
           <el-button type="success" plain @click="openUsableDialog">
             改可用状态
           </el-button>
-          <el-button
+          <!-- <el-button
             type="danger"
             plain
             @click="unavailableDialogVisible = true"
           >
             改不可用
-          </el-button>
+          </el-button> -->
           <el-button
             type="warning"
             plain
@@ -474,18 +527,20 @@ function copyAll() {
 :deep(.pool-detail-dialog) {
   max-width: calc(100vw - 28px);
   border-radius: 18px;
-  overflow: hidden;
+  overflow: visible;
 }
 
 :deep(.pool-detail-dialog .el-dialog__header) {
-  padding: 18px 22px;
+  padding: 18px 60px;
   margin: 0;
   border-bottom: 1px solid #eef0f5;
 }
 
 :deep(.pool-detail-dialog .el-dialog__body) {
-  padding: 18px 22px 22px;
+  padding: 18px 60px 22px;
   background: #f6f8fb;
+  border-bottom-left-radius: 18px;
+  border-bottom-right-radius: 18px;
 }
 
 :deep(.el-tag) {
@@ -531,6 +586,7 @@ function copyAll() {
   display: flex;
   flex-direction: column;
   gap: 14px;
+  position: relative;
 }
 
 .section-card,
@@ -542,28 +598,76 @@ function copyAll() {
 
 .info-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
+  gap: 10px;
 }
 
 .info-card {
-  border-radius: 14px;
+  border-radius: 10px;
-  padding: 14px;
+  padding: 8px 12px;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .info-label {
   color: #909399;
-  font-size: 12px;
+  font-size: 11px;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 
 .info-value {
   color: #303133;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   word-break: break-all;
-  min-height: 20px;
+  min-height: 18px;
+}
+
+/* Navigation buttons styles */
+.nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #fff;
+  border: 1px solid #edf0f6;
+  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 100;
+  transition: all 0.2s ease;
+  color: #606266;
+}
+
+.nav-btn:hover:not(.is-disabled) {
+  background: #409eff;
+  color: #fff;
+  border-color: #409eff;
+  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.35);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.nav-btn.is-disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  background: #f5f7fa;
+  color: #c0c4cc;
+  border-color: #e4e7ed;
+  box-shadow: none;
+}
+
+.prev-btn {
+  left: -110px;
+}
+
+.next-btn {
+  right: -110px;
 }
 
 .section-card {
@@ -624,11 +728,11 @@ function copyAll() {
   }
 
   :deep(.pool-detail-dialog .el-dialog__header) {
-    padding: 14px 14px;
+    padding: 14px 44px;
   }
 
   :deep(.pool-detail-dialog .el-dialog__body) {
-    padding: 12px;
+    padding: 12px 44px 16px;
     max-height: 76vh;
     overflow-y: auto;
   }
@@ -643,12 +747,26 @@ function copyAll() {
   }
 
   .info-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
   }
 
   .copy-actions .el-button,
   .section-head .el-button {
     width: 100%;
   }
+
+  .nav-btn {
+    width: 32px;
+    height: 32px;
+  }
+
+  .prev-btn {
+    left: -36px;
+  }
+
+  .next-btn {
+    right: -36px;
+  }
 }
 </style>

platform/src/views/accountpool/cursor/index.vue

@@ -88,6 +88,7 @@ const total = ref(0);
 const selectedRows = ref([]);
 const detailRow = ref(null);
 const detailRemarkSaving = ref(false);
+const detailLoading = ref(false);
 const probeLoadingId = ref(null);
 const batchProbeDialogVisible = ref(false);
 const batchProbePhase = ref("running");
@@ -188,7 +189,11 @@ function handleSelectionChange(rows) {
 }
 
 function openDetail(row) {
-  loading.value = true;
+  if (detailVisible.value) {
+    detailLoading.value = true;
+  } else {
+    loading.value = true;
+  }
   getAccountPoolDetail(moduleKey, row.id)
     .then((res) => {
       if (res?.code !== 200) {
@@ -200,6 +205,7 @@ function openDetail(row) {
     })
     .finally(() => {
       loading.value = false;
+      detailLoading.value = false;
     });
 }
 
@@ -311,6 +317,26 @@ async function refreshDetailRow(id) {
   }
 }
 
+const currentIndex = computed(() => {
+  if (!detailRow.value || !tableData.value.length) return -1;
+  return tableData.value.findIndex((item) => item.id === detailRow.value.id);
+});
+
+const hasPrev = computed(() => currentIndex.value > 0);
+const hasNext = computed(() => currentIndex.value > -1 && currentIndex.value < tableData.value.length - 1);
+
+function handlePrevDetail() {
+  if (hasPrev.value) {
+    openDetail(tableData.value[currentIndex.value - 1]);
+  }
+}
+
+function handleNextDetail() {
+  if (hasNext.value) {
+    openDetail(tableData.value[currentIndex.value + 1]);
+  }
+}
+
 async function handleDetailAction(payload) {
   if (!payload?.id || !payload?.action) return;
   detailRemarkSaving.value = true;
@@ -1098,13 +1124,13 @@ function closeBatchProbeDialog() {
             </el-tag>
           </template>
         </el-table-column>
-        <!-- <el-table-column label="accessToken失效时间" width="190" align="center">
+        <el-table-column label="accessToken失效时间" width="190" align="center">
           <template #default="{ row }">
             <el-tag :type="accessTokenExpireTagType(row.accessTokenExpireStatus)" size="small">
               {{ row.accessTokenExpireText || "-" }}
             </el-tag>
           </template>
-        </el-table-column> -->
+        </el-table-column>
         <el-table-column label="提取平台" width="120">
           <template #default="{ row }">
             <el-tag
@@ -1169,6 +1195,11 @@ function closeBatchProbeDialog() {
       v-model="detailVisible"
       :row="detailRow"
       :save-loading="detailRemarkSaving"
+      :has-prev="hasPrev"
+      :has-next="hasNext"
+      :loading="detailLoading"
+      @prev="handlePrevDetail"
+      @next="handleNextDetail"
       @save-remark="handleSaveRemark"
       @detail-action="handleDetailAction"
     />