更新若干界面

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

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
-import { ElMessage } from 'element-plus';
+import { computed, reactive, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
 
 const props = defineProps({
   modelValue: {
@@ -17,69 +17,143 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'save-remark']);
-const remarkText = ref('');
+const emit = defineEmits(["update:modelValue", "save-remark", "detail-action"]);
+const remarkText = ref("");
+const remarkDialogVisible = ref(false);
+const platformDialogVisible = ref(false);
+const unavailableDialogVisible = ref(false);
+const unextractDialogVisible = ref(false);
+const platformForm = reactive({ platform: "local" });
 
-function typeText(type) {
-  if (type === 'account') return '账号密码';
-  if (type === 'account_tk') return '账号密码+Token';
-  return 'Token';
-}
-
-const PLATFORM_MAP = {
-  local: { label: '本地', type: 'info' },
-  xianyu: { label: '闲鱼', type: 'warning' },
-  taobao: { label: '淘宝', type: 'info' },
-  pinduoduo: { label: '拼多多', type: 'danger' },
-  jingdong: { label: '京东', type: 'primary' },
-  douyin: { label: '抖音', type: 'success' },
-  ziyoushangcheng: { label: '自有商城', type: 'warning' },
+const TYPE_MAP = {
+  account: { label: "账号密码", type: "success" },
+  account_tk: { label: "账号密码+Token", type: "primary" },
+  tk: { label: "Token", type: "warning" },
 };
 
-const platformLabel = computed(() => {
-  if (!props.row?.extractedPlatform) return '-';
-  return PLATFORM_MAP[props.row.extractedPlatform]?.label || props.row.extractedPlatform;
+const PLATFORM_MAP = {
+  local: { label: "本地", type: "info" },
+  xianyu: { label: "闲鱼", type: "warning" },
+  taobao: { label: "淘宝", type: "info" },
+  pinduoduo: { label: "拼多多", type: "danger" },
+  jingdong: { label: "京东", type: "primary" },
+  douyin: { label: "抖音", type: "success" },
+  ziyoushangcheng: { label: "自有商城", type: "warning" },
+};
+
+const statusInfo = computed(() => {
+  const status = Number(props.row?.extractStatus || 0);
+  if (status === 2) return { label: "补号", type: "warning" };
+  if (status === 3) return { label: "续杯", type: "primary" };
+  if (props.row?.extracted) return { label: "已提取", type: "success" };
+  return { label: "未提取", type: "info" };
 });
 
-const platformType = computed(() => {
-  if (!props.row?.extractedPlatform) return 'info';
-  return PLATFORM_MAP[props.row.extractedPlatform]?.type || 'info';
+const typeInfo = computed(() => {
+  return (
+    TYPE_MAP[props.row?.type] || { label: props.row?.type || "-", type: "info" }
+  );
 });
 
+const platformInfo = computed(() => {
+  const key = props.row?.extractedPlatform;
+  if (!key) return { label: "-", type: "info" };
+  return PLATFORM_MAP[key] || { label: key, type: "info" };
+});
+
+const isUsedInfo = computed(() => {
+  const raw = props.row?.isUsed;
+  if (raw === null || raw === undefined || raw === "") {
+    return { label: "未探测", type: "info" };
+  }
+  const n = Number(raw);
+  if (n === 1) return { label: "可用", type: "success" };
+  if (n === 0) return { label: "已用完", type: "danger" };
+  return { label: String(raw), type: "info" };
+});
+
+const hasAccountPassword = computed(
+  () => !!(props.row?.account || props.row?.password),
+);
+const hasToken = computed(() => !!props.row?.token);
+
 watch(
   () => props.row,
   (row) => {
-    remarkText.value = row?.remark || '';
+    remarkText.value = row?.remark || "";
+    platformForm.platform = row?.extractedPlatform || "local";
   },
-  { immediate: true }
+  { immediate: true },
 );
 
+function closeDialog() {
+  emit("update:modelValue", false);
+}
+
+function openRemarkDialog() {
+  remarkText.value = props.row?.remark || "";
+  remarkDialogVisible.value = true;
+}
+
 function onSaveRemark() {
   if (!props.row?.id) return;
-  emit('save-remark', { id: props.row.id, remark: remarkText.value || '' });
+  emit("save-remark", { id: props.row.id, remark: remarkText.value || "" });
+  remarkDialogVisible.value = false;
+}
+
+function onSetUnavailable() {
+  if (!props.row?.id) return;
+  emit("detail-action", { action: "unavailable", id: props.row.id });
+  unavailableDialogVisible.value = false;
+}
+
+function onUpdatePlatform() {
+  if (!props.row?.id) return;
+  emit("detail-action", {
+    action: "platform",
+    id: props.row.id,
+    platform: platformForm.platform,
+  });
+  platformDialogVisible.value = false;
+}
+
+function onUnextract() {
+  if (!props.row?.id) return;
+  emit("detail-action", { action: "unextract", id: props.row.id });
+  unextractDialogVisible.value = false;
+}
+
+async function copyText(text, successText) {
+  const val = String(text || "").trim();
+  if (!val) {
+    ElMessage.warning("暂无可复制内容");
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(val);
+    ElMessage.success(successText || "已复制");
+  } catch {
+    ElMessage.error("复制失败，请检查浏览器权限");
+  }
 }
 
 function copyAccountPassword() {
-  const account = props.row?.account || '';
-  const password = props.row?.password || '';
-  if (!account && !password) {
-    ElMessage.warning('暂无账号密码可复制');
-    return;
-  }
-  navigator.clipboard.writeText(`${account}\n${password}`.trim()).then(() => {
-    ElMessage.success('已复制账号+密码');
-  });
+  const parts = [];
+  if (props.row?.account) parts.push(props.row.account);
+  if (props.row?.password) parts.push(props.row.password);
+  copyText(parts.join("\n"), "已复制账号+密码");
 }
 
 function copyToken() {
-  const token = props.row?.token || '';
-  if (!token) {
-    ElMessage.warning('暂无 Token 可复制');
-    return;
-  }
-  navigator.clipboard.writeText(token).then(() => {
-    ElMessage.success('已复制 Token');
-  });
+  copyText(props.row?.token, "已复制 Token");
+}
+
+function copyAll() {
+  const parts = [];
+  if (props.row?.account) parts.push(`账号：${props.row.account}`);
+  if (props.row?.password) parts.push(`密码：${props.row.password}`);
+  if (props.row?.token) parts.push(`Token：${props.row.token}`);
+  copyText(parts.join("\n"), "已复制完整账号信息");
 }
 </script>
 
@@ -87,84 +161,406 @@ function copyToken() {
   <el-dialog
     class="pool-detail-dialog"
     :model-value="modelValue"
-    title="账号详情"
-    width="90%"
+    width="760px"
+    destroy-on-close
+    :show-close="false"
     @update:model-value="(v) => emit('update:modelValue', v)"
   >
-    <el-descriptions :column="1" border v-if="row">
-      <el-descriptions-item label="ID">{{ row.id }}</el-descriptions-item>
-      <el-descriptions-item label="账号类型">{{ typeText(row.type) }}</el-descriptions-item>
-      <el-descriptions-item label="账号">{{ row.account || '-' }}</el-descriptions-item>
-      <el-descriptions-item label="密码">{{ row.password || '-' }}</el-descriptions-item>
-      <el-descriptions-item label="Token">
-        <span class="token-text">{{ row.token || '-' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="提取状态">
-        {{
-          row.extractStatus === 2 ? '补号' : row.extracted ? '已提取' : '未提取'
-        }}
-      </el-descriptions-item>
-      <el-descriptions-item label="探测可用">
-        {{
-          row.isUsed === null || row.isUsed === undefined
-            ? '未探测'
-            : Number(row.isUsed) === 1
-              ? '可用'
-              : Number(row.isUsed) === 0
-                ? '已用完'
-                : String(row.isUsed)
-        }}
-      </el-descriptions-item>
-      <el-descriptions-item label="提取时间">{{ row.extractedAt || '-' }}</el-descriptions-item>
-      <el-descriptions-item label="提取平台">
-        <el-tag v-if="row.extractedPlatform" :type="platformType" size="small">
-          {{ platformLabel }}
-        </el-tag>
-        <span v-else>-</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="复制">
-        <div class="copy-actions">
-          <el-button size="small" @click="copyAccountPassword">账号+密码</el-button>
-          <el-button size="small" type="primary" @click="copyToken">Token</el-button>
+    <template #header>
+      <div class="detail-header">
+        <div>
+          <div class="detail-title">账号详情</div>
+          <div class="detail-subtitle">
+            通过弹窗执行账号状态、平台、备注等维护操作
+          </div>
         </div>
-      </el-descriptions-item>
-      <el-descriptions-item label="备注">
-        <div class="remark-edit-wrap">
-          <el-input v-model="remarkText" type="textarea" :rows="3" placeholder="请输入备注" />
-          <el-button type="primary" size="small" :loading="saveLoading" @click="onSaveRemark">
-            保存备注
+        <div class="header-actions">
+          <el-button circle plain @click="closeDialog">×</el-button>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="row" class="detail-body">
+      <div class="info-grid">
+        <div class="info-card">
+          <div class="info-label">ID</div>
+          <div class="info-value">{{ row?.id || "-" }}</div>
+        </div>
+        <div class="info-card">
+          <div class="info-label">账号类型</div>
+          <div class="info-value">
+            <el-tag :type="typeInfo.type" round>{{ typeInfo.label }}</el-tag>
+          </div>
+        </div>
+        <div class="info-card">
+          <div class="info-label">提取状态</div>
+          <div class="info-value">
+            <el-tag :type="statusInfo.type" effect="dark" round>
+              {{ statusInfo.label }}
+            </el-tag>
+          </div>
+        </div>
+        <div class="info-card">
+          <div class="info-label">提取平台</div>
+          <div class="info-value">
+            <el-tag
+              v-if="row.extractedPlatform"
+              :type="platformInfo.type"
+              size="small"
+            >
+              {{ platformInfo.label }}
+            </el-tag>
+            <span v-else>-</span>
+          </div>
+        </div>
+        <div class="info-card">
+          <div class="info-label">提取时间</div>
+          <div class="info-value">{{ row.extractedAt || "-" }}</div>
+        </div>
+        <div class="info-card">
+          <div class="info-label">可用检测</div>
+          <div class="info-value">
+            <el-tag :type="isUsedInfo.type" round>
+              {{ isUsedInfo.label }}
+            </el-tag>
+          </div>
+        </div>
+        <div class="info-card">
+          <div class="info-label">账号</div>
+          <div class="info-value">{{ row.account || "-" }}</div>
+        </div>
+        <div class="info-card">
+          <div class="info-label">密码</div>
+          <div class="info-value">{{ row.password || "-" }}</div>
+        </div>
+      </div>
+
+      <div class="section-card">
+        <div class="section-head">
+          <div>
+            <div class="section-title">Token</div>
+            <div class="section-subtitle">
+              长 Token 已做自动换行，便于检查与复制
+            </div>
+          </div>
+          <el-button
+            size="small"
+            type="primary"
+            plain
+            :disabled="!hasToken"
+            @click="copyToken"
+          >
+            复制 Token
           </el-button>
         </div>
-      </el-descriptions-item>
-    </el-descriptions>
+        <pre class="token-box">{{ row.token || "暂无 Token" }}</pre>
+      </div>
+
+      <div class="section-card">
+        <div class="section-head">
+          <div>
+            <div class="section-title">快捷功能</div>
+            <div class="section-subtitle">按使用场景复制账号信息</div>
+          </div>
+        </div>
+        <div class="copy-actions">
+          <el-button
+            :disabled="!hasAccountPassword"
+            @click="copyAccountPassword"
+          >
+            复制账号+密码
+          </el-button>
+          <el-button
+            type="primary"
+            plain
+            :disabled="!hasToken"
+            @click="copyToken"
+          >
+            复制 Token
+          </el-button>
+          <el-button
+            type="success"
+            plain
+            :disabled="!hasAccountPassword && !hasToken"
+            @click="copyAll"
+          >
+            复制全部
+          </el-button>
+        </div>
+      </div>
+
+      <div class="section-card">
+        <div class="section-head">
+          <div>
+            <div class="section-title">维护操作</div>
+            <div class="section-subtitle">
+              点击按钮后打开确认/编辑弹窗，再执行对应操作
+            </div>
+          </div>
+        </div>
+        <div class="copy-actions">
+          <el-button
+            type="danger"
+            plain
+            @click="unavailableDialogVisible = true"
+          >
+            改不可用
+          </el-button>
+          <el-button
+            type="warning"
+            plain
+            @click="platformDialogVisible = true"
+          >
+            改平台
+          </el-button>
+          <el-button type="info" plain @click="unextractDialogVisible = true">
+            反提取
+          </el-button>
+          <el-button type="primary" plain @click="openRemarkDialog">
+            改备注
+          </el-button>
+        </div>
+      </div>
+
+      <div class="section-card">
+        <div class="section-head">
+          <div>
+            <div class="section-title">备注</div>
+            <div class="section-subtitle">备注改为弹窗编辑，当前仅展示</div>
+          </div>
+        </div>
+        <div class="remark-display">{{ row.remark || "暂无备注" }}</div>
+      </div>
+    </div>
+  </el-dialog>
+
+  <el-dialog
+    v-model="unavailableDialogVisible"
+    title="改不可用"
+    width="420px"
+    append-to-body
+  >
+    <el-alert type="warning" :closable="false">
+      确认将当前账号标记为不可用/已用完？
+    </el-alert>
+    <template #footer>
+      <el-button @click="unavailableDialogVisible = false">取消</el-button>
+      <el-button type="danger" :loading="saveLoading" @click="onSetUnavailable">
+        确认改不可用
+      </el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="platformDialogVisible"
+    title="改平台"
+    width="420px"
+    append-to-body
+  >
+    <el-form label-width="84px">
+      <el-form-item label="提取平台">
+        <el-select v-model="platformForm.platform" style="width: 100%">
+          <el-option
+            v-for="(v, k) in PLATFORM_MAP"
+            :key="k"
+            :label="v.label"
+            :value="k"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="platformDialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saveLoading" @click="onUpdatePlatform">
+        确认修改
+      </el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="unextractDialogVisible"
+    title="反提取"
+    width="420px"
+    append-to-body
+  >
+    <el-alert type="warning" :closable="false">
+      反提取会把账号恢复为未提取，并清空提取时间与提取平台。
+    </el-alert>
+    <template #footer>
+      <el-button @click="unextractDialogVisible = false">取消</el-button>
+      <el-button type="warning" :loading="saveLoading" @click="onUnextract">
+        确认反提取
+      </el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="remarkDialogVisible"
+    title="改备注"
+    width="520px"
+    append-to-body
+  >
+    <el-input
+      v-model="remarkText"
+      type="textarea"
+      :rows="5"
+      resize="none"
+      placeholder="请输入备注"
+    />
+    <template #footer>
+      <el-button @click="remarkDialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saveLoading" @click="onSaveRemark">
+        保存备注
+      </el-button>
+    </template>
   </el-dialog>
 </template>
 
 <style scoped>
-.token-text {
-  word-break: break-all;
-  white-space: pre-wrap;
-  line-height: 1.6;
+:deep(.pool-detail-dialog) {
+  max-width: calc(100vw - 28px);
+  border-radius: 18px;
+  overflow: hidden;
 }
 
-.remark-edit-wrap {
+:deep(.pool-detail-dialog .el-dialog__header) {
+  padding: 18px 22px;
+  margin: 0;
+  border-bottom: 1px solid #eef0f5;
+}
+
+:deep(.pool-detail-dialog .el-dialog__body) {
+  padding: 18px 22px 22px;
+  background: #f6f8fb;
+}
+
+:deep(.el-tag) {
+  border-radius: 4px !important;
+}
+
+.detail-header,
+.header-actions,
+.section-head,
+.copy-actions {
+  display: flex;
+  align-items: center;
+}
+
+.detail-header {
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.detail-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.detail-subtitle,
+.section-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.header-actions {
+  gap: 10px;
+}
+
+.header-actions .el-button {
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.detail-body {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 14px;
+}
+
+.section-card,
+.info-card {
+  background: #fff;
+  border: 1px solid #edf0f6;
+  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.06);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.info-card {
+  border-radius: 14px;
+  padding: 14px;
+  min-width: 0;
+}
+
+.info-label {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.info-value {
+  color: #303133;
+  font-size: 14px;
+  font-weight: 600;
+  word-break: break-all;
+  min-height: 20px;
+}
+
+.section-card {
+  border-radius: 16px;
+  padding: 16px;
+}
+
+.section-head {
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.token-box {
+  margin: 0;
+  padding: 14px;
+  max-height: 220px;
+  overflow: auto;
+  border-radius: 12px;
+  background: #111827;
+  color: #d1e7ff;
+  font-size: 12px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 .copy-actions {
-  display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 10px;
 }
 
-.remark-edit-wrap .el-button {
-  align-self: flex-start;
+.copy-actions .el-button {
+  margin: 0;
 }
 
-:deep(.pool-detail-dialog) {
-  max-width: 560px;
+.remark-display {
+  padding: 12px;
+  min-height: 42px;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #303133;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 @media (max-width: 768px) {
@@ -173,21 +569,32 @@ function copyToken() {
     margin: 0 auto;
   }
 
+  :deep(.pool-detail-dialog .el-dialog__header) {
+    padding: 14px 14px;
+  }
+
   :deep(.pool-detail-dialog .el-dialog__body) {
     padding: 12px;
-    max-height: 70vh;
+    max-height: 76vh;
     overflow-y: auto;
   }
 
-  :deep(.pool-detail-dialog .el-descriptions__label) {
-    width: 72px;
-    word-break: break-all;
-    white-space: normal;
+  .detail-header,
+  .section-head {
+    align-items: flex-start;
   }
 
-  .remark-edit-wrap .el-button {
+  .section-head {
+    flex-direction: column;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .copy-actions .el-button,
+  .section-head .el-button {
     width: 100%;
-    align-self: stretch;
   }
 }
 </style>

src/views/accountpool/cursor/components/edit.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, reactive, watch } from "vue";
+import { ElMessage } from "element-plus";
 
 const props = defineProps({
   modelValue: {
@@ -90,8 +91,8 @@ function parseBatchRows() {
       const [account, password, token] = line
         .split(",")
         .map((x) => (x || "").trim());
-      if (!account || !password || !token) {
-        errors.push(`第 ${index + 1} 行格式错误，应为 account,password,token`);
+      if (!account || !token) {
+        errors.push(`第 ${index + 1} 行格式错误，应为 account,password,token（password 可为空）`);
         return;
       }
       parsed.push({
@@ -139,7 +140,8 @@ function handleSubmit() {
     }
 
     if (form.type === "account_tk") {
-      if (!form.account || !form.password || !form.token) {
+      if (!form.account || !form.token) {
+        ElMessage.warning("请输入账号和 Token，密码可为空");
         return;
       }
       emit("submit", {
@@ -177,6 +179,7 @@ function handleSubmit() {
 
   const { parsed, errors } = parseBatchRows();
   if (errors.length || parsed.length === 0) {
+    ElMessage.warning(errors[0] || "请填写批量内容");
     return;
   }
   emit("submit", {