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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch, onBeforeUnmount } from "vue";
+import { computed, reactive, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
 
 const props = defineProps({
@@ -15,21 +15,9 @@ 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", "prev", "next"]);
+const emit = defineEmits(["update:modelValue", "save-remark", "detail-action"]);
 const remarkText = ref("");
 const remarkDialogVisible = ref(false);
 const platformDialogVisible = ref(false);
@@ -196,29 +184,6 @@ 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>
@@ -244,25 +209,7 @@ onBeforeUnmount(() => {
       </div>
     </template>
 
-    <div v-if="row" class="detail-body" v-loading="loading">
+    <div v-if="row" class="detail-body">
-      <!-- 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>
@@ -384,13 +331,13 @@ onBeforeUnmount(() => {
           <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
@@ -527,20 +474,18 @@ onBeforeUnmount(() => {
 :deep(.pool-detail-dialog) {
   max-width: calc(100vw - 28px);
   border-radius: 18px;
-  overflow: visible;
+  overflow: hidden;
 }
 
 :deep(.pool-detail-dialog .el-dialog__header) {
-  padding: 18px 60px;
+  padding: 18px 22px;
   margin: 0;
   border-bottom: 1px solid #eef0f5;
 }
 
 :deep(.pool-detail-dialog .el-dialog__body) {
-  padding: 18px 60px 22px;
+  padding: 18px 22px 22px;
   background: #f6f8fb;
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
 }
 
 :deep(.el-tag) {
@@ -586,7 +531,6 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   gap: 14px;
-  position: relative;
 }
 
 .section-card,
@@ -598,76 +542,28 @@ onBeforeUnmount(() => {
 
 .info-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  gap: 12px;
 }
 
 .info-card {
-  border-radius: 10px;
+  border-radius: 14px;
-  padding: 8px 12px;
+  padding: 14px;
   min-width: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 
 .info-label {
   color: #909399;
-  font-size: 11px;
+  font-size: 12px;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
 }
 
 .info-value {
   color: #303133;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
   word-break: break-all;
-  min-height: 18px;
+  min-height: 20px;
-}
-
-/* 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 {
@@ -728,11 +624,11 @@ onBeforeUnmount(() => {
   }
 
   :deep(.pool-detail-dialog .el-dialog__header) {
-    padding: 14px 44px;
+    padding: 14px 14px;
   }
 
   :deep(.pool-detail-dialog .el-dialog__body) {
-    padding: 12px 44px 16px;
+    padding: 12px;
     max-height: 76vh;
     overflow-y: auto;
   }
@@ -747,26 +643,12 @@ onBeforeUnmount(() => {
   }
 
   .info-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 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,7 +88,6 @@ 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");
@@ -189,11 +188,7 @@ function handleSelectionChange(rows) {
 }
 
 function openDetail(row) {
-  if (detailVisible.value) {
-    detailLoading.value = true;
-  } else {
   loading.value = true;
-  }
   getAccountPoolDetail(moduleKey, row.id)
     .then((res) => {
       if (res?.code !== 200) {
@@ -205,7 +200,6 @@ function openDetail(row) {
     })
     .finally(() => {
       loading.value = false;
-      detailLoading.value = false;
     });
 }
 
@@ -317,26 +311,6 @@ 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;
@@ -1195,11 +1169,6 @@ 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"
     />