设备管理优化

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite --open",
     "clean": "node scripts/clean-dist.mjs",
-    "build": "vite build",
+    "build": "node --max-old-space-size=4096 ./node_modules/vite/bin/vite.js build",
     "preview": "vite preview"
   },
   "dependencies": {

src/api/accountPool.js

@@ -51,6 +51,38 @@ export function updateAccountPoolRemark(module, data) {
   });
 }
 
+export function setAccountPoolUnavailable(module, data) {
+  return request({
+    url: `${base(module)}/setUnavailable`,
+    method: 'post',
+    data,
+  });
+}
+
+export function updateAccountPoolUsable(module, data) {
+  return request({
+    url: `${base(module)}/updateUsable`,
+    method: 'post',
+    data,
+  });
+}
+
+export function updateAccountPoolPlatform(module, data) {
+  return request({
+    url: `${base(module)}/updatePlatform`,
+    method: 'post',
+    data,
+  });
+}
+
+export function unextractAccountPool(module, data) {
+  return request({
+    url: `${base(module)}/unextract`,
+    method: 'post',
+    data,
+  });
+}
+
 export function replenishAccountPool(module, data) {
   return request({
     url: `${base(module)}/replenish`,
@@ -58,3 +90,12 @@ export function replenishAccountPool(module, data) {
     data,
   });
 }
+
+/** 使用厂商 Token 探测是否可用（服务端转发）。Cursor 传 { id, accessToken }（会话 JWT）以便回写 is_used；仅传 accessToken 也可探测但不更新库；Windsurf/Kiro 传 { id } */
+export function probeAccountPoolToken(module, data) {
+  return request({
+    url: `${base(module)}/probeToken`,
+    method: 'post',
+    data,
+  });
+}

src/api/cursorActivationCode.ts

@@ -0,0 +1,106 @@
+// @ts-ignore request 封装是 JS 文件，项目未提供 TS 声明
+import request from '@/utils/request';
+
+const baseUrl = '/platform/cursor/activationcode';
+
+export interface CursorActivationCodeQuery {
+  page?: number;
+  pageSize?: number;
+  keyword?: string;
+  status?: number | string;
+  type?: number | string;
+  bindStatus?: number | string;
+}
+
+export interface CursorActivationCodePayload {
+  id?: number | string;
+  code?: string;
+  type?: number;
+  status?: number;
+  durationDays?: number;
+  bindAccount?: string;
+  bindDeviceId?: number | string;
+  ownerUserId?: number | string;
+  ownerUserName?: string;
+  activatedAt?: string;
+  expiredAt?: string;
+  remark?: string;
+}
+
+export interface GenerateActivationCodePayload {
+  count: number;
+  type?: number;
+  durationDays?: number;
+  ownerUserId?: number | string;
+  ownerUserName?: string;
+  remark?: string;
+}
+
+export function getCursorActivationCodeList(params: CursorActivationCodeQuery) {
+  return request({
+    url: `${baseUrl}/list`,
+    method: 'get',
+    params,
+  });
+}
+
+export function getCursorActivationCodeDetail(id: number | string) {
+  return request({
+    url: `${baseUrl}/detail/${id}`,
+    method: 'get',
+  });
+}
+
+export function addCursorActivationCode(data: CursorActivationCodePayload) {
+  return request({
+    url: `${baseUrl}/add`,
+    method: 'post',
+    data,
+  });
+}
+
+export function updateCursorActivationCode(data: CursorActivationCodePayload) {
+  return request({
+    url: `${baseUrl}/update`,
+    method: 'post',
+    data,
+  });
+}
+
+export function deleteCursorActivationCode(id: number | string) {
+  return request({
+    url: `${baseUrl}/delete/${id}`,
+    method: 'post',
+  });
+}
+
+export function generateCursorActivationCode(data: GenerateActivationCodePayload) {
+  return request({
+    url: `${baseUrl}/generate`,
+    method: 'post',
+    data,
+  });
+}
+
+export function enableCursorActivationCode(id: number | string) {
+  return request({
+    url: `${baseUrl}/enable/${id}`,
+    method: 'post',
+  });
+}
+
+export function disableCursorActivationCode(id: number | string) {
+  return request({
+    url: `${baseUrl}/disable/${id}`,
+    method: 'post',
+  });
+}
+
+export function exportCursorActivationCode(params: CursorActivationCodeQuery) {
+  return request({
+    url: `${baseUrl}/export`,
+    method: 'get',
+    params,
+    responseType: 'blob',
+  });
+}

src/api/cursorEquipment.js

@@ -0,0 +1,65 @@
+import request from '@/utils/request';
+
+const baseUrl = '/platform/cursor/equipment';
+
+export function getCursorEquipmentList(params) {
+  return request({
+    url: `${baseUrl}/list`,
+    method: 'get',
+    params,
+  });
+}
+
+export function getCursorEquipmentDetail(id) {
+  return request({
+    url: `${baseUrl}/detail/${id}`,
+    method: 'get',
+  });
+}
+
+export function addCursorEquipment(data) {
+  return request({
+    url: `${baseUrl}/add`,
+    method: 'post',
+    data,
+  });
+}
+
+export function updateCursorEquipment(data) {
+  return request({
+    url: `${baseUrl}/update`,
+    method: 'post',
+    data,
+  });
+}
+
+export function deleteCursorEquipment(id) {
+  return request({
+    url: `${baseUrl}/delete/${id}`,
+    method: 'post',
+  });
+}
+
+export function activateCursorEquipment(data) {
+  return request({
+    url: `${baseUrl}/activate`,
+    method: 'post',
+    data,
+  });
+}
+
+export function getCursorEquipmentActivationRecords(params) {
+  return request({
+    url: `${baseUrl}/activationRecords`,
+    method: 'get',
+    params,
+  });
+}
+
+export function getCursorEquipmentExtractRecords(params) {
+  return request({
+    url: `${baseUrl}/extractRecords`,
+    method: 'get',
+    params,
+  });
+}

src/api/cursorEquipment.ts

@@ -0,0 +1,90 @@
+// @ts-ignore request 封装是 JS 文件，项目未提供 TS 声明
+import request from '@/utils/request';
+
+const baseUrl = '/platform/cursor/equipment';
+
+export interface CursorEquipmentQuery {
+  page?: number;
+  pageSize?: number;
+  keyword?: string;
+  status?: number | string;
+  system?: string;
+  os?: string;
+}
+
+export interface CursorEquipmentPayload {
+  id?: number;
+  deviceInfo?: string;
+  machineCode?: string;
+  status?: number;
+  system?: string;
+  version?: string;
+  bindAccount?: string;
+  ownerUserId?: number;
+  ownerUserName?: string;
+  activationTime?: string;
+  expireTime?: string;
+  remark?: string;
+}
+
+export function getCursorEquipmentList(params: CursorEquipmentQuery) {
+  return request({
+    url: `${baseUrl}/list`,
+    method: 'get',
+    params,
+  });
+}
+
+export function getCursorEquipmentDetail(id: number | string) {
+  return request({
+    url: `${baseUrl}/detail/${id}`,
+    method: 'get',
+  });
+}
+
+export function addCursorEquipment(data: CursorEquipmentPayload) {
+  return request({
+    url: `${baseUrl}/add`,
+    method: 'post',
+    data,
+  });
+}
+
+export function updateCursorEquipment(data: CursorEquipmentPayload) {
+  return request({
+    url: `${baseUrl}/update`,
+    method: 'post',
+    data,
+  });
+}
+
+export function deleteCursorEquipment(id: number | string) {
+  return request({
+    url: `${baseUrl}/delete/${id}`,
+    method: 'post',
+  });
+}
+
+export function activateCursorEquipment(data: { id: number | string }) {
+  return request({
+    url: `${baseUrl}/activate`,
+    method: 'post',
+    data,
+  });
+}
+
+export function getCursorEquipmentActivationRecords(params: Record<string, any>) {
+  return request({
+    url: `${baseUrl}/activationRecords`,
+    method: 'get',
+    params,
+  });
+}
+
+export function getCursorEquipmentExtractRecords(params: Record<string, any>) {
+  return request({
+    url: `${baseUrl}/extractRecords`,
+    method: 'get',
+    params,
+  });
+}

src/api/home.js

@@ -0,0 +1,21 @@
+import request from '@/utils/request';
+
+/**
+ * 按天统计号池已提取（售卖）数量，依据 extracted_time
+ * @param {{ days?: number }} params days 默认 14，最大 90
+ */
+export function getAccountPoolDailyExtract(params) {
+  return request({
+    url: '/platform/home/accountPoolDailyExtract',
+    method: 'get',
+    params,
+  });
+}
+
+/** 号池账号总数 / 已售卖（按 Cursor、Kiro、Windsurf） */
+export function getAccountPoolInventoryTotals() {
+  return request({
+    url: '/platform/home/accountPoolInventoryTotals',
+    method: 'get',
+  });
+}

src/components/CommonAside.vue

@@ -14,7 +14,6 @@
 
     <!-- 菜单主体 -->
     <el-menu
-      v-else
       :collapse="isCollapse"
       :collapse-transition="false"
       :background-color="asideBgColor"
@@ -23,6 +22,7 @@
       :active-background-color="activeBgColor"
       class="el-menu-vertical-demo"
       :unique-opened="true"
+      :default-openeds="defaultOpeneds"
       @select="handleMenuSelect"
       :default-active="route.path"
     >
@@ -167,6 +167,10 @@ import { useAllDataStore, useMenuStore } from "@/stores";
 
 const emit = defineEmits(["menu-click"]);
 
+const toggleMobile = () => {
+  store.state.isCollapse = !store.state.isCollapse;
+};
+
 const router = useRouter();
 const route = useRoute();
 const menuStore = useMenuStore();
@@ -183,7 +187,22 @@ const asideTextColor = ref("#bfcbd9");
 const activeColor = ref("#3973FF");
 const activeBgColor = ref("#3973FF");
 
+const isMobile = ref(false);
+const mobileOpen = computed(() => isMobile.value && !isCollapse.value);
+
 const currentModuleId = ref(null);
+
+const closeMobile = () => {
+  if (isMobile.value) {
+    store.state.isCollapse = true;
+  }
+};
+
+defineExpose({
+  toggleMobile,
+  closeMobile,
+});
+
 const updateDeviceType = () => {
   isMobile.value = window.innerWidth <= 768;
   // 手机端默认收起侧边栏
@@ -265,10 +284,29 @@ const currentModule = computed(() => {
 });
 
 const displayMenus = computed(() => {
-  // 侧边栏始终展示完整菜单树，不随当前路由切换为“子菜单视图”
+  // 侧边栏始终展示完整菜单树，不随当前路由切换为"子菜单视图"
   return list.value;
 });
 
+const findOpenMenuPaths = (menus, targetPath, ancestors = []) => {
+  for (const menu of menus) {
+    const currentPath = menu.path || menu.id.toString();
+    if (menu.path && (targetPath === menu.path || targetPath.startsWith(menu.path + "/"))) {
+      return [...ancestors, currentPath];
+    }
+    if (menu.children && menu.children.length > 0) {
+      const found = findOpenMenuPaths(menu.children, targetPath, [...ancestors, currentPath]);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+const defaultOpeneds = computed(() => {
+  const result = findOpenMenuPaths(displayMenus.value, route.path);
+  return result || [];
+});
+
 const asideTitle = computed(() => {
   if (isCollapse.value) return "管理";
   return "菜单";
@@ -292,7 +330,7 @@ const processMenus = (menus) => {
     .map((menu) => ({
       id: menu.id,
       path: menu.path,
-      icon: menu.icon || "Document",
+      icon: menu.icon || null,
       title: menu.title,
       route: menu.path,
       component_path: menu.component_path,
@@ -363,7 +401,7 @@ const fetchMenus = async () => {
 };
 
 const handleCollapse = () => {
-  store.state.isCollapse = !store.state.isCollapse;
+  toggleMobile();
 };
 
 const handleMenuRefresh = () => {
@@ -522,13 +560,13 @@ h3 {
   // 高亮样式
   .el-menu-item.is-active {
     html:not(.dark) & {
-      background-color: rgba(57, 115, 255, 0.3) !important;
+      background-color: rgba(255, 255, 255, 0.2) !important;
+      border-left: 3px solid #ffffff;
     }
     html.dark & {
       background-color: rgba(60, 60, 60, 0.8) !important;
     }
     color: #ffffff !important;
-    border-left: 3px solid #4f84ff;
     margin-left: -3px;
 
     .menu-icon {
@@ -555,12 +593,17 @@ h3 {
     }
 
     &.is-opened .el-sub-menu__title {
-      background: rgba(255, 255, 255, 0.08) !important;
+      background: rgba(255, 255, 255, 0.12) !important;
+      margin-left: -3px;
     }
 
     .el-menu-item {
       padding-left: 48px !important;
       font-size: 13px;
+
+      &.is-active {
+        background: rgba(255, 255, 255, 0.18) !important;
+      }
     }
   }
 
@@ -585,6 +628,10 @@ h3 {
     .el-sub-menu.is-opened .el-sub-menu__title {
       background: rgba(64, 158, 255, 0.08) !important;
     }
+
+    .el-sub-menu .el-menu-item.is-active {
+      background: rgba(64, 158, 255, 0.15) !important;
+    }
   }
 }
 
@@ -616,7 +663,22 @@ h3 {
 // 响应式设计
 @media (max-width: 768px) {
   .common-aside {
-    width: 100% !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 240px !important;
+    max-width: 80vw;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition:
+      transform 0.3s ease,
+      width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 0.3s ease;
+  }
+
+  .common-aside.mobile-open {
+    transform: translateX(0);
   }
 
   :deep(.el-menu) {

src/views/accountpool/components/patch.vue

@@ -54,6 +54,8 @@ function normalizeRow(raw) {
     const p = (v) => String(v).padStart(2, '0');
     return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
   };
+  const st = Number(pick('is_extracted', 'isExtracted', 'IsExtracted'));
+  const extractStatus = Number.isFinite(st) ? st : 0;
   return {
     id: pick('id', 'Id', 'ID'),
     type: pick('data_type', 'dataType', 'type'),
@@ -61,7 +63,8 @@ function normalizeRow(raw) {
     password: pick('password', 'Password'),
     token: pick('token', 'Token'),
     remark: pick('remark', 'Remark'),
-    extracted: Number(pick('is_extracted', 'isExtracted', 'IsExtracted')) === 1,
+    extractStatus,
+    extracted: extractStatus !== 0,
     extractedAt: formatTime(pickNullable('extracted_time', 'extractedAt')),
     extractedPlatform: pickNullable('extracted_platform', 'extractedPlatform'),
     createdAt: formatTime(pick('create_time', 'createdAt')),

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,171 @@ 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 usableDialogVisible = ref(false);
+const unextractDialogVisible = ref(false);
+const platformForm = reactive({ platform: "local" });
+const usableForm = reactive({ usable: 1 });
 
-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";
+    const raw = row?.isUsed;
+    if (raw === null || raw === undefined || raw === "") {
+      usableForm.usable = 1;
+    } else {
+      usableForm.usable = Number(raw) === 0 ? 0 : 1;
+    }
   },
-  { 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 openUsableDialog() {
+  const raw = props.row?.isUsed;
+  if (raw === null || raw === undefined || raw === "") {
+    usableForm.usable = 1;
+  } else {
+    usableForm.usable = Number(raw) === 0 ? 0 : 1;
+  }
+  usableDialogVisible.value = true;
+}
+
+function onUpdateUsable() {
+  if (!props.row?.id) return;
+  emit("detail-action", {
+    action: "usable",
+    id: props.row.id,
+    usable: usableForm.usable,
+  });
+  usableDialogVisible.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,71 +189,431 @@ 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.extracted ? '已提取' : '未提取' }}
-      </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="success" plain @click="openUsableDialog">
+            改可用状态
+          </el-button>
+          <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="usableDialogVisible"
+    title="改可用状态"
+    width="420px"
+    append-to-body
+  >
+    <el-form label-width="84px">
+      <el-form-item label="可用状态">
+        <el-radio-group v-model="usableForm.usable">
+          <el-radio :value="1">可用</el-radio>
+          <el-radio :value="0">不可用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="usableDialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saveLoading" @click="onUpdateUsable">
+        确认修改
+      </el-button>
+    </template>
+  </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) {
@@ -160,21 +622,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", {

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

@@ -20,13 +20,23 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  replenish: {
+    type: Boolean,
+    default: false,
+  },
   platformMap: {
     type: Object,
     default: () => ({}),
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'update:platform', 'update:remark', 'confirm']);
+const emit = defineEmits([
+  'update:modelValue',
+  'update:platform',
+  'update:remark',
+  'update:replenish',
+  'confirm',
+]);
 
 function typeText(type) {
   if (type === 'account') return '账号密码';
@@ -47,6 +57,14 @@ function typeText(type) {
       <el-form-item label="提取类型">
         <el-input :model-value="typeText(type)" disabled />
       </el-form-item>
+      <el-form-item label="是否补号">
+        <el-switch
+          :model-value="replenish"
+          active-text="是"
+          inactive-text="否"
+          @update:model-value="(v) => emit('update:replenish', v)"
+        />
+      </el-form-item>
       <el-form-item label="提取平台">
         <el-select
           :model-value="platform"

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

@@ -1,76 +1,159 @@
 <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: { type: Boolean, default: false },
-  row: { type: Object, default: null },
-  saveLoading: { type: Boolean, default: false },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Object,
+    default: null,
+  },
+  saveLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-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>
 
@@ -78,67 +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.extracted ? '已提取' : '未提取' }}</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) {
@@ -147,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/kiro/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', {

src/views/accountpool/kiro/components/extract.vue

@@ -5,10 +5,17 @@ const props = defineProps({
   type: { type: String, default: 'account' },
   platform: { type: String, default: 'local' },
   remark: { type: String, default: '' },
+  replenish: { type: Boolean, default: false },
   platformMap: { type: Object, default: () => ({}) },
 });
 
-const emit = defineEmits(['update:modelValue', 'update:platform', 'update:remark', 'confirm']);
+const emit = defineEmits([
+  'update:modelValue',
+  'update:platform',
+  'update:remark',
+  'update:replenish',
+  'confirm',
+]);
 
 function typeText(type) {
   if (type === 'account') return '账号密码';
@@ -29,6 +36,14 @@ function typeText(type) {
       <el-form-item label="提取类型">
         <el-input :model-value="typeText(type)" disabled />
       </el-form-item>
+      <el-form-item label="是否补号">
+        <el-switch
+          :model-value="replenish"
+          active-text="是"
+          inactive-text="否"
+          @update:model-value="(v) => emit('update:replenish', v)"
+        />
+      </el-form-item>
       <el-form-item label="提取平台">
         <el-select
           :model-value="platform"

src/views/accountpool/kiro/index.vue

@@ -1,11 +1,19 @@
 <script setup>
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { ElMessage } from 'element-plus';
-import Edit from './components/edit.vue';
-import DetailDialog from './components/detail.vue';
-import ExtractDialog from './components/extract.vue';
-import ReplenishDialog from './components/replenish.vue';
-import PatchDialog from '../components/patch.vue';
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch,
+} from "vue";
+import { ElMessage } from "element-plus";
+import Edit from "./components/edit.vue";
+import DetailDialog from "./components/detail.vue";
+import ExtractDialog from "./components/extract.vue";
+import ReplenishDialog from "./components/replenish.vue";
+import PatchDialog from "../components/patch.vue";
 import {
   addAccountPool,
   batchAddAccountPool,
@@ -13,8 +21,12 @@ import {
   getAccountPoolDetail,
   getAccountPoolList,
   updateAccountPoolRemark,
+  setAccountPoolUnavailable,
+  updateAccountPoolPlatform,
+  unextractAccountPool,
   replenishAccountPool,
-} from '@/api/accountPool';
+  probeAccountPoolToken,
+} from "@/api/accountPool";
 
 const moduleKey = "krio";
 
@@ -25,30 +37,39 @@ const detailVisible = ref(false);
 const extractVisible = ref(false);
 const extractTargetRow = ref(null);
 const batchExtractVisible = ref(false);
-const batchExtractForm = reactive({ platform: 'local', remark: '' });
+const batchExtractForm = reactive({ platform: "local", remark: "" });
 const replenishVisible = ref(false);
-const replenishForm = reactive({ type: 'tk', platform: 'local', remark: '' });
+const replenishForm = reactive({ type: "tk", platform: "local", remark: "" });
 const apiDocVisible = ref(false);
 const patchVisible = ref(false);
 
-const query = reactive({ keyword: "", status: "" });
+const query = reactive({ keyword: "", status: "", platform: "" });
 const activeTypeTab = ref("all");
 
-const extractForm = reactive({ platform: 'local', type: 'account', remark: '' });
+const extractForm = reactive({
+  platform: "local",
+  type: "account",
+  remark: "",
+  replenish: false,
+});
 
 const tableData = ref([]);
 const total = ref(0);
 const selectedRows = ref([]);
 const detailRow = ref(null);
 const detailRemarkSaving = ref(false);
+const probeLoadingId = ref(null);
 const isMobile = ref(false);
 const pagination = reactive({ page: 1, pageSize: 30 });
 
+const skipWatchFetchDuringUnusedJump = ref(false);
+
 const pagedList = computed(() => tableData.value);
 
 function resetQuery() {
   query.keyword = "";
   query.status = "";
+  query.platform = "";
 }
 
 const typeTabs = computed(() => [
@@ -59,8 +80,9 @@ const typeTabs = computed(() => [
 ]);
 
 watch(
-  () => [query.keyword, query.status, activeTypeTab.value],
+  () => [query.keyword, query.status, query.platform, activeTypeTab.value],
   () => {
+    if (skipWatchFetchDuringUnusedJump.value) return;
     pagination.page = 1;
     fetchList();
   },
@@ -68,6 +90,7 @@ watch(
 watch(
   () => [pagination.page, pagination.pageSize],
   () => {
+    if (skipWatchFetchDuringUnusedJump.value) return;
     fetchList();
   },
 );
@@ -123,7 +146,8 @@ function openExtractByRow(row) {
   extractTargetRow.value = row;
   extractForm.platform = "local";
   extractForm.type = row.type;
-  extractForm.remark = row.remark || '';
+  extractForm.remark = row.remark || "";
+  extractForm.replenish = false;
   extractVisible.value = true;
 }
 
@@ -136,17 +160,20 @@ function buildCopyTextByRow(row) {
   if (row?.account) parts.push(row.account);
   if (row?.password) parts.push(row.password);
   if (row?.token) parts.push(row.token);
-  return parts.join('\n');
+  return parts.join("\n");
 }
 
 async function copyToClipboard(text) {
-  if (!text) { ElMessage.warning('无可复制内容'); return false; }
+  if (!text) {
+    ElMessage.warning("无可复制内容");
+    return false;
+  }
   try {
     await navigator.clipboard.writeText(text);
-    ElMessage.success('已复制');
+    ElMessage.success("已复制");
     return true;
   } catch (e) {
-    ElMessage.error('复制失败，请检查浏览器权限');
+    ElMessage.error("复制失败，请检查浏览器权限");
     return false;
   }
 }
@@ -155,11 +182,21 @@ async function handleExtract() {
   loading.value = true;
   try {
     const target = extractTargetRow.value;
-    if (!target) { ElMessage.warning("未找到提取目标"); return; }
+    if (!target) {
+      ElMessage.warning("未找到提取目标");
+      return;
+    }
     const res = await extractAccountPool(moduleKey, {
-      id: target.id, type: target.type, platform: extractForm.platform, remark: extractForm.remark || '',
+      id: target.id,
+      type: target.type,
+      platform: extractForm.platform,
+      remark: extractForm.remark || "",
+      replenish: !!extractForm.replenish,
     });
-    if (res?.code !== 200) { ElMessage.error(res?.msg || "提取失败"); return; }
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || "提取失败");
+      return;
+    }
     ElMessage.success("提取成功");
     extractVisible.value = false;
     const row = normalizeRow(res.data || {});
@@ -175,19 +212,62 @@ async function handleSaveRemark(payload) {
   detailRemarkSaving.value = true;
   try {
     const res = await updateAccountPoolRemark(moduleKey, payload);
-    if (res?.code !== 200) { ElMessage.error(res?.msg || '备注更新失败'); return; }
-    ElMessage.success('备注已更新');
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || "备注更新失败");
+      return;
+    }
+    ElMessage.success("备注已更新");
     if (detailRow.value?.id === payload.id) {
-      detailRow.value = { ...detailRow.value, remark: payload.remark || '' };
+      detailRow.value = { ...detailRow.value, remark: payload.remark || "" };
     }
     await fetchList();
-  } finally { detailRemarkSaving.value = false; }
+  } finally {
+    detailRemarkSaving.value = false;
+  }
+}
+
+async function refreshDetailRow(id) {
+  if (!id) return;
+  const res = await getAccountPoolDetail(moduleKey, id);
+  if (res?.code === 200) {
+    detailRow.value = normalizeRow(res.data || {});
+  }
+}
+
+async function handleDetailAction(payload) {
+  if (!payload?.id || !payload?.action) return;
+  detailRemarkSaving.value = true;
+  try {
+    let res;
+    if (payload.action === "unavailable") {
+      res = await setAccountPoolUnavailable(moduleKey, { id: payload.id });
+    } else if (payload.action === "platform") {
+      res = await updateAccountPoolPlatform(moduleKey, {
+        id: payload.id,
+        platform: payload.platform,
+      });
+    } else if (payload.action === "unextract") {
+      res = await unextractAccountPool(moduleKey, { id: payload.id });
+    }
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || "操作失败");
+      return;
+    }
+    ElMessage.success("操作成功");
+    await refreshDetailRow(payload.id);
+    await fetchList();
+  } finally {
+    detailRemarkSaving.value = false;
+  }
 }
 
 function markExtractForSelected() {
-  if (!selectedRows.value.length) { ElMessage.warning("请先选择数据"); return; }
-  batchExtractForm.platform = 'local';
-  batchExtractForm.remark = '';
+  if (!selectedRows.value.length) {
+    ElMessage.warning("请先选择数据");
+    return;
+  }
+  batchExtractForm.platform = "local";
+  batchExtractForm.remark = "";
   batchExtractVisible.value = true;
 }
 
@@ -197,13 +277,16 @@ async function handleBatchExtract() {
     const results = await Promise.all(
       selectedRows.value.map((row) =>
         extractAccountPool(moduleKey, {
-          id: row.id, type: row.type,
+          id: row.id,
+          type: row.type,
           platform: batchExtractForm.platform,
-          remark: batchExtractForm.remark || '',
+          remark: batchExtractForm.remark || "",
         }),
       ),
     );
-    const succeeded = results.filter((r) => r?.code === 200).map((r) => normalizeRow(r.data || {}));
+    const succeeded = results
+      .filter((r) => r?.code === 200)
+      .map((r) => normalizeRow(r.data || {}));
     const failCount = results.length - succeeded.length;
     if (failCount > 0) {
       ElMessage.warning(`${succeeded.length} 条成功，${failCount} 条失败`);
@@ -212,7 +295,7 @@ async function handleBatchExtract() {
     }
     batchExtractVisible.value = false;
     if (succeeded.length) {
-      const text = succeeded.map(rowToText).filter(Boolean).join('\n');
+      const text = succeeded.map(rowToText).filter(Boolean).join("\n");
       navigator.clipboard.writeText(text).catch(() => {});
     }
     fetchList();
@@ -226,7 +309,7 @@ function rowToText(row) {
   if (row.account) parts.push(row.account);
   if (row.password) parts.push(row.password);
   if (row.token) parts.push(row.token);
-  return parts.join(' / ');
+  return parts.join(" / ");
 }
 
 async function handleReplenish() {
@@ -235,10 +318,13 @@ async function handleReplenish() {
     const res = await replenishAccountPool(moduleKey, {
       type: replenishForm.type,
       platform: replenishForm.platform,
-      remark: replenishForm.remark || '',
+      remark: replenishForm.remark || "",
     });
-    if (res?.code !== 200) { ElMessage.error(res?.msg || '补号失败'); return; }
-    ElMessage.success('补号成功，已复制到剪贴板');
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || "补号失败");
+      return;
+    }
+    ElMessage.success("补号成功，已复制到剪贴板");
     replenishVisible.value = false;
     const row = normalizeRow(res.data || {});
     navigator.clipboard.writeText(rowToText(row)).catch(() => {});
@@ -255,16 +341,20 @@ function typeText(type) {
 }
 
 const tooltipOpts = {
-  popperClass: 'pool-tooltip',
-  popperStyle: { maxWidth: '600px', wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
+  popperClass: "pool-tooltip",
+  popperStyle: {
+    maxWidth: "600px",
+    wordBreak: "break-all",
+    whiteSpace: "pre-wrap",
+  },
 };
 
 const PLATFORM_MAP = {
-  local:     { label: '本地',   type: 'info' },
-  xianyu:    { label: '闲鱼',   type: 'warning' },
-  pinduoduo: { label: '拼多多', type: 'danger' },
-  jingdong:  { label: '京东',   type: 'primary' },
-  douyin:    { label: '抖音',   type: 'success' },
+  local: { label: "本地", type: "info" },
+  xianyu: { label: "闲鱼", type: "warning" },
+  pinduoduo: { label: "拼多多", type: "danger" },
+  jingdong: { label: "京东", type: "primary" },
+  douyin: { label: "抖音", type: "success" },
 };
 
 function platformText(platform) {
@@ -294,6 +384,8 @@ function normalizeRow(raw) {
     const p = (v) => String(v).padStart(2, "0");
     return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
   };
+  const st = Number(pick("is_extracted", "isExtracted", "IsExtracted"));
+  const extractStatus = Number.isFinite(st) ? st : 0;
   return {
     id: pick("id", "Id", "ID"),
     type: pick("data_type", "dataType", "type"),
@@ -301,13 +393,28 @@ function normalizeRow(raw) {
     password: pick("password", "Password"),
     token: pick("token", "Token"),
     remark: pick("remark", "Remark"),
-    extracted: Number(pick("is_extracted", "isExtracted", "IsExtracted")) === 1,
+    extractStatus,
+    extracted: extractStatus !== 0,
     extractedAt: formatTime(pickNullable("extracted_time", "extractedAt")),
     extractedPlatform: pickNullable("extracted_platform", "extractedPlatform"),
     createdAt: formatTime(pick("create_time", "createdAt")),
   };
 }
 
+function extractStatusLabel(row) {
+  if (row?.extractStatus === 2) return "补号";
+  if (row?.extractStatus === 3) return "续杯";
+  if (row?.extracted) return "已提取";
+  return "未提取";
+}
+
+function extractStatusTagType(row) {
+  if (row?.extractStatus === 2) return "warning";
+  if (row?.extractStatus === 3) return "primary";
+  if (row?.extracted) return "success";
+  return "info";
+}
+
 async function fetchList() {
   loading.value = true;
   try {
@@ -316,6 +423,7 @@ async function fetchList() {
       pageSize: pagination.pageSize,
       keyword: query.keyword || undefined,
       status: query.status || undefined,
+      platform: query.platform || undefined,
       type: activeTypeTab.value === "all" ? undefined : activeTypeTab.value,
     });
     if (res?.code !== 200) {
@@ -330,23 +438,68 @@ async function fetchList() {
   }
 }
 
-onMounted(() => { fetchList(); });
+async function jumpToLastUnusedPage() {
+  const type = activeTypeTab.value === "all" ? undefined : activeTypeTab.value;
+  const res = await getAccountPoolList(moduleKey, {
+    page: 1,
+    pageSize: pagination.pageSize,
+    keyword: query.keyword || undefined,
+    status: "unused",
+    type,
+  });
+  if (res?.code !== 200) {
+    ElMessage.error(res?.msg || "获取列表失败");
+    return;
+  }
+  const cnt = Number(res?.data?.total || 0);
+  if (cnt === 0) {
+    ElMessage.warning("暂无未提取数据");
+    return;
+  }
+  const lastPage = Math.max(1, Math.ceil(cnt / pagination.pageSize));
+  skipWatchFetchDuringUnusedJump.value = true;
+  pagination.page = lastPage;
+  query.status = "unused";
+  await nextTick();
+  skipWatchFetchDuringUnusedJump.value = false;
+  await fetchList();
+  ElMessage.success(`已跳转未提取第 ${lastPage} 页（共 ${cnt} 条）`);
+}
+
+onMounted(() => {
+  fetchList();
+});
 
 // ---- 接口说明数据 ----
 const BASE_URL = "https://api.yunzer.cn";
 
 const paramDocs = [
-  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / pinduoduo / jingdong / douyin / local' },
-  { name: 'module', required: true, desc: '号池模块，指定从哪个产品的号池提取', values: 'cursor / windsurf / krio' },
-  { name: 'data_type', required: false, desc: '账号类型，不传则提取任意类型', values: 'account / tk / account_tk' },
+  {
+    name: "type",
+    required: true,
+    desc: "来源平台，用于标记本次提取来自哪个渠道",
+    values: "xianyu / pinduoduo / jingdong / douyin / local",
+  },
+  {
+    name: "module",
+    required: true,
+    desc: "号池模块，指定从哪个产品的号池提取",
+    values: "cursor / windsurf / krio",
+  },
+  {
+    name: "data_type",
+    required: false,
+    desc: "账号类型，不传则提取任意类型",
+    values: "account / tk / account_tk",
+  },
 ];
 
 const platformDocs = [
-  { value: 'xianyu',    label: '闲鱼',   desc: '闲鱼平台发货调用' },
-  { value: 'pinduoduo', label: '拼多多', desc: '拼多多平台发货调用' },
-  { value: 'jingdong',  label: '京东',   desc: '京东平台发货调用' },
-  { value: 'douyin',    label: '抖音',   desc: '抖音平台发货调用' },
-  { value: 'local',     label: '本地',   desc: '本地手动调用' },
+  { value: "xianyu", label: "闲鱼", desc: "闲鱼平台发货调用" },
+  { value: "pinduoduo", label: "拼多多", desc: "拼多多平台发货调用" },
+  { value: "jingdong", label: "京东", desc: "京东平台发货调用" },
+  { value: "douyin", label: "抖音", desc: "抖音平台发货调用" },
+  { value: "local", label: "本地", desc: "本地手动调用" },
 ];
 
 const moduleDocs = [
@@ -390,7 +543,9 @@ const errorResp = `// 无可用卡密
 { "code": 400, "msg": "缺少参数 type（来源平台）" }`;
 
 function copyText(text) {
-  navigator.clipboard.writeText(text).then(() => { ElMessage.success('已复制'); });
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage.success("已复制");
+  });
 }
 
 function copyCardInfo(row) {
@@ -398,10 +553,39 @@ function copyCardInfo(row) {
   if (row.account) parts.push(row.account);
   if (row.password) parts.push(row.password);
   if (row.token) parts.push(row.token);
-  if (!parts.length) { ElMessage.warning('无可复制内容'); return; }
-  navigator.clipboard.writeText(parts.join('\n')).then(() => { ElMessage.success('已复制'); });
+  if (!parts.length) {
+    ElMessage.warning("无可复制内容");
+    return;
+  }
+  navigator.clipboard.writeText(parts.join("\n")).then(() => {
+    ElMessage.success("已复制");
+  });
 }
 
+async function handleProbeToken(row) {
+  if (!row?.token) {
+    ElMessage.warning("该行无 Token");
+    return;
+  }
+  probeLoadingId.value = row.id;
+  try {
+    const res = await probeAccountPoolToken(moduleKey, { id: row.id });
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || "探测失败");
+      return;
+    }
+    const d = res?.data || {};
+    if (d.ok) {
+      ElMessage.success(d.detail || "官方接口响应正常");
+    } else {
+      ElMessage.error(d.detail || "不可用或校验失败");
+    }
+  } catch {
+    ElMessage.error("探测请求失败");
+  } finally {
+    probeLoadingId.value = null;
+  }
+}
 </script>
 
 <template>
@@ -427,13 +611,43 @@ function copyCardInfo(row) {
           >
             <el-option label="未提取" value="unused" />
             <el-option label="已提取" value="extracted" />
+            <el-option label="补号" value="replenished" />
+            <el-option label="续杯" value="renewed" />
           </el-select>
+          <el-select
+            v-model="query.platform"
+            placeholder="提取平台"
+            clearable
+            class="w-140"
+          >
+            <el-option
+              v-for="(v, k) in PLATFORM_MAP"
+              :key="k"
+              :value="k"
+              :label="v.label"
+            />
+          </el-select>
+          <el-button
+            type="primary"
+            plain
+            title="按当前搜索与账号类型，筛选未提取并跳到最后一页"
+            @click="jumpToLastUnusedPage"
+          >
+            未提取末页
+          </el-button>
           <el-button @click="resetQuery">重置</el-button>
         </div>
         <div class="toolbar-right">
-          <el-button type="primary" @click="openAddDialog('single')">添加账号</el-button>
-          <el-button type="success" @click="openAddDialog('batch')">批量添加</el-button>
-          <el-button @click="markExtractForSelected">批量标记提取</el-button>
+          <el-button type="primary" @click="openAddDialog('single')"
+            >添加账号</el-button
+          >
+          <el-button type="success" @click="openAddDialog('batch')"
+            >批量添加</el-button
+          >
+          <el-button type="warning" @click="replenishVisible = true"
+            >补号</el-button
+          >
+          <el-button @click="markExtractForSelected">批量提取</el-button>
           <el-button @click="apiDocVisible = true">接口说明</el-button>
         </div>
       </div>
@@ -447,61 +661,107 @@ function copyCardInfo(row) {
         />
       </el-tabs>
 
-      <el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="52" />
-        <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column label="账号类型" width="160" align="center">
-          <template #default="{ row }"><el-tag>{{ typeText(row.type) }}</el-tag></template>
-        </el-table-column>
-        <el-table-column prop="account" label="账号" min-width="180" show-overflow-tooltip :tooltip-options="tooltipOpts" />
-        <el-table-column prop="password" label="密码" min-width="160" show-overflow-tooltip :tooltip-options="tooltipOpts">
-          <template #default="{ row }">{{ row.password || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="Token" min-width="200" show-overflow-tooltip :tooltip-options="tooltipOpts">
-          <template #default="{ row }">{{ row.token || '-' }}</template>
-        </el-table-column>
-        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip :tooltip-options="tooltipOpts" />
-        <el-table-column label="提取状态" width="100">
-          <template #default="{ row }">
-            <el-tag :type="row.extracted ? 'success' : 'info'">{{
-              row.extracted ? "已提取" : "未提取"
-            }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="extractedAt" label="提取时间" width="180" />
-        <el-table-column label="提取平台" width="110">
-          <template #default="{ row }">
-            <el-tag
-              v-if="row.extractedPlatform"
-              :type="platformTagType(row.extractedPlatform)"
-              size="small"
+      <div class="table-scroll">
+        <el-table
+          :data="pagedList"
+          border
+          stripe
+          style="width: 100%"
+          :loading="loading"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="52" />
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column label="账号类型" width="160" align="center">
+            <template #default="{ row }"
+              ><el-tag>{{ typeText(row.type) }}</el-tag></template
             >
-              {{ platformText(row.extractedPlatform) }}
-            </el-tag>
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="220" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button link type="primary" @click="openDetail(row)"
-              >详情</el-button
-            >
-            <el-button
-              link
-              type="warning"
-              :disabled="row.extracted"
-              @click="openExtractByRow(row)"
-              >提取</el-button
-            >
-            <el-button
-              v-if="row.extracted"
-              link
-              type="success"
-              @click="copyCardInfo(row)"
-              >复制</el-button
-            >
-          </template>
-        </el-table-column>
+          </el-table-column>
+          <el-table-column
+            prop="account"
+            label="账号"
+            min-width="180"
+            show-overflow-tooltip
+            :tooltip-options="tooltipOpts"
+          />
+          <el-table-column
+            prop="password"
+            label="密码"
+            min-width="160"
+            show-overflow-tooltip
+            :tooltip-options="tooltipOpts"
+          >
+            <template #default="{ row }">{{ row.password || "-" }}</template>
+          </el-table-column>
+          <el-table-column
+            label="Token"
+            min-width="200"
+            show-overflow-tooltip
+            :tooltip-options="tooltipOpts"
+          >
+            <template #default="{ row }">{{ row.token || "-" }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="remark"
+            label="备注"
+            min-width="140"
+            show-overflow-tooltip
+            :tooltip-options="tooltipOpts"
+          />
+          <el-table-column label="提取状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="extractStatusTagType(row)">{{
+                extractStatusLabel(row)
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="extractedAt" label="提取时间" width="180" />
+          <el-table-column label="提取平台" width="110">
+            <template #default="{ row }">
+              <el-tag
+                v-if="row.extractedPlatform"
+                :type="platformTagType(row.extractedPlatform)"
+                size="small"
+              >
+                {{ platformText(row.extractedPlatform) }}
+              </el-tag>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="300"
+            fixed="right"
+            align="center"
+          >
+            <template #default="{ row }">
+              <el-button link type="primary" @click="openDetail(row)"
+                >详情</el-button
+              >
+              <el-button
+                v-if="row.token"
+                link
+                type="info"
+                :loading="probeLoadingId === row.id"
+                @click="handleProbeToken(row)"
+                >查可用</el-button
+              >
+              <el-button
+                v-if="!row.extractedAt && !row.extracted"
+                link
+                type="warning"
+                @click="openExtractByRow(row)"
+                >提取</el-button
+              >
+              <el-button
+                v-if="row.extracted"
+                link
+                type="success"
+                @click="copyCardInfo(row)"
+                >复制</el-button
+              >
+            </template>
+          </el-table-column>
         </el-table>
       </div>
 
@@ -510,7 +770,9 @@ function copyCardInfo(row) {
           v-model:current-page="pagination.page"
           v-model:page-size="pagination.pageSize"
           background
-          :layout="isMobile ? 'prev, pager, next' : 'total, prev, pager, next, jumper'"
+          :layout="
+            isMobile ? 'prev, pager, next' : 'total, prev, pager, next, jumper'
+          "
           :page-sizes="[30, 50, 100]"
           :total="total"
         />
@@ -524,6 +786,7 @@ function copyCardInfo(row) {
       :row="detailRow"
       :save-loading="detailRemarkSaving"
       @save-remark="handleSaveRemark"
+      @detail-action="handleDetailAction"
     />
 
     <ExtractDialog
@@ -532,12 +795,27 @@ function copyCardInfo(row) {
       :type="extractForm.type"
       :platform="extractForm.platform"
       :remark="extractForm.remark"
+      :replenish="extractForm.replenish"
       :platform-map="PLATFORM_MAP"
       @update:platform="(v) => (extractForm.platform = v)"
       @update:remark="(v) => (extractForm.remark = v)"
+      @update:replenish="(v) => (extractForm.replenish = v)"
       @confirm="handleExtract"
     />
 
+    <ReplenishDialog
+      v-model="replenishVisible"
+      :loading="loading"
+      :type="replenishForm.type"
+      :platform="replenishForm.platform"
+      :remark="replenishForm.remark"
+      :platform-map="PLATFORM_MAP"
+      @update:type="(v) => (replenishForm.type = v)"
+      @update:platform="(v) => (replenishForm.platform = v)"
+      @update:remark="(v) => (replenishForm.remark = v)"
+      @confirm="handleReplenish"
+    />
+
     <!-- 接口说明抽屉 -->
     <el-drawer
       v-model="apiDocVisible"
@@ -620,40 +898,141 @@ function copyCardInfo(row) {
 </template>
 
 <style scoped>
-.account-pool-page { padding: 12px; }
-.card-header { display: flex; align-items: center; justify-content: space-between; }
-.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
-.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.w-260 { width: 260px; }
-.w-140 { width: 140px; }
-.type-tabs { margin-bottom: 12px; }
-.pager { display: flex; justify-content: flex-end; margin-top: 14px; }
-.table-scroll { width: 100%; overflow-x: hidden; }
-.pool-table { min-width: 980px; }
+.account-pool-page {
+  padding: 12px;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.toolbar-left,
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.w-260 {
+  width: 260px;
+}
+.w-140 {
+  width: 140px;
+}
+.type-tabs {
+  margin-bottom: 12px;
+}
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+.table-scroll {
+  width: 100%;
+  overflow-x: hidden;
+}
+.pool-table {
+  min-width: 980px;
+}
 
 @media (max-width: 768px) {
-  .account-pool-page { padding: 8px; }
-  .toolbar { gap: 8px; }
-  .toolbar-left, .toolbar-right { width: 100%; gap: 8px; }
-  .w-260, .w-140 { width: 100%; }
+  .account-pool-page {
+    padding: 8px;
+  }
+  .toolbar {
+    gap: 8px;
+  }
+  .toolbar-left,
+  .toolbar-right {
+    width: 100%;
+    gap: 8px;
+  }
+  .w-260,
+  .w-140 {
+    width: 100%;
+  }
   .toolbar-right .el-button {
     flex: 1 1 calc(50% - 8px);
     min-width: 120px;
     margin: 0;
   }
-  .type-tabs :deep(.el-tabs__nav-wrap) { overflow-x: auto; overflow-y: hidden; }
-  .pager { justify-content: center; }
+  .type-tabs :deep(.el-tabs__nav-wrap) {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .pager {
+    justify-content: center;
+  }
+}
+.api-doc {
+  padding: 0 4px;
+  font-size: 13px;
+}
+.doc-section {
+  margin-bottom: 24px;
+}
+.doc-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 10px;
+  color: #303133;
+  border-left: 3px solid #409eff;
+  padding-left: 8px;
+}
+.method-tag {
+  margin-right: 8px;
+  vertical-align: middle;
+}
+.url-code {
+  background: #f5f7fa;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #e6a23c;
+  word-break: break-all;
+}
+.example-item {
+  margin-bottom: 10px;
+}
+.example-label {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 4px;
+}
+.example-url-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #f5f7fa;
+  padding: 6px 10px;
+  border-radius: 4px;
+}
+.example-url {
+  flex: 1;
+  font-size: 12px;
+  color: #409eff;
+  word-break: break-all;
+}
+.code-block {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px 16px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
 }
-.api-doc { padding: 0 4px; font-size: 13px; }
-.doc-section { margin-bottom: 24px; }
-.doc-title { font-weight: 600; font-size: 14px; margin-bottom: 10px; color: #303133; border-left: 3px solid #409eff; padding-left: 8px; }
-.method-tag { margin-right: 8px; vertical-align: middle; }
-.url-code { background: #f5f7fa; padding: 4px 10px; border-radius: 4px; font-size: 13px; color: #e6a23c; word-break: break-all; }
-.example-item { margin-bottom: 10px; }
-.example-label { font-size: 12px; color: #909399; margin-bottom: 4px; }
-.example-url-wrap { display: flex; align-items: center; gap: 8px; background: #f5f7fa; padding: 6px 10px; border-radius: 4px; }
-.example-url { flex: 1; font-size: 12px; color: #409eff; word-break: break-all; }
-.code-block { background: #1e1e1e; color: #d4d4d4; padding: 12px 16px; border-radius: 6px; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
 </style>
 
 <style>
@@ -662,4 +1041,4 @@ function copyCardInfo(row) {
   white-space: pre-wrap;
   word-break: break-all;
 }
-</style>
+</style>

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

@@ -1,76 +1,159 @@
 <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: { type: Boolean, default: false },
-  row: { type: Object, default: null },
-  saveLoading: { type: Boolean, default: false },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Object,
+    default: null,
+  },
+  saveLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-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>
 
@@ -78,67 +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.extracted ? '已提取' : '未提取' }}</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) {
@@ -147,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/windsurf/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', {

src/views/accountpool/windsurf/components/extract.vue

@@ -5,10 +5,17 @@ const props = defineProps({
   type: { type: String, default: 'account' },
   platform: { type: String, default: 'local' },
   remark: { type: String, default: '' },
+  replenish: { type: Boolean, default: false },
   platformMap: { type: Object, default: () => ({}) },
 });
 
-const emit = defineEmits(['update:modelValue', 'update:platform', 'update:remark', 'confirm']);
+const emit = defineEmits([
+  'update:modelValue',
+  'update:platform',
+  'update:remark',
+  'update:replenish',
+  'confirm',
+]);
 
 function typeText(type) {
   if (type === 'account') return '账号密码';
@@ -29,6 +36,14 @@ function typeText(type) {
       <el-form-item label="提取类型">
         <el-input :model-value="typeText(type)" disabled />
       </el-form-item>
+      <el-form-item label="是否补号">
+        <el-switch
+          :model-value="replenish"
+          active-text="是"
+          inactive-text="否"
+          @update:model-value="(v) => emit('update:replenish', v)"
+        />
+      </el-form-item>
       <el-form-item label="提取平台">
         <el-select
           :model-value="platform"

src/views/accountpool/windsurf/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import Edit from './components/edit.vue';
 import DetailDialog from './components/detail.vue';
@@ -12,7 +12,11 @@ import {
   getAccountPoolDetail,
   getAccountPoolList,
   updateAccountPoolRemark,
+  setAccountPoolUnavailable,
+  updateAccountPoolPlatform,
+  unextractAccountPool,
   replenishAccountPool,
+  probeAccountPoolToken,
 } from '@/api/accountPool';
 
 const moduleKey = "windsurf";
@@ -30,24 +34,28 @@ const replenishForm = reactive({ type: 'tk', platform: 'local', remark: '' });
 const apiDocVisible = ref(false);
 const patchVisible = ref(false);
 
-const query = reactive({ keyword: "", status: "" });
+const query = reactive({ keyword: "", status: "", platform: "" });
 const activeTypeTab = ref("all");
 
-const extractForm = reactive({ platform: 'local', type: 'account', remark: '' });
+const extractForm = reactive({ platform: 'local', type: 'account', remark: '', replenish: false });
 
 const tableData = ref([]);
 const total = ref(0);
 const selectedRows = ref([]);
 const detailRow = ref(null);
 const detailRemarkSaving = ref(false);
+const probeLoadingId = ref(null);
 const isMobile = ref(false);
 const pagination = reactive({ page: 1, pageSize: 30 });
 
+const skipWatchFetchDuringUnusedJump = ref(false);
+
 const pagedList = computed(() => tableData.value);
 
 function resetQuery() {
   query.keyword = "";
   query.status = "";
+  query.platform = "";
 }
 
 const typeTabs = computed(() => [
@@ -58,8 +66,9 @@ const typeTabs = computed(() => [
 ]);
 
 watch(
-  () => [query.keyword, query.status, activeTypeTab.value],
+  () => [query.keyword, query.status, query.platform, activeTypeTab.value],
   () => {
+    if (skipWatchFetchDuringUnusedJump.value) return;
     pagination.page = 1;
     fetchList();
   },
@@ -67,6 +76,7 @@ watch(
 watch(
   () => [pagination.page, pagination.pageSize],
   () => {
+    if (skipWatchFetchDuringUnusedJump.value) return;
     fetchList();
   },
 );
@@ -123,6 +133,7 @@ function openExtractByRow(row) {
   extractForm.platform = "local";
   extractForm.type = row.type;
   extractForm.remark = row.remark || '';
+  extractForm.replenish = false;
   extractVisible.value = true;
 }
 
@@ -156,7 +167,11 @@ async function handleExtract() {
     const target = extractTargetRow.value;
     if (!target) { ElMessage.warning("未找到提取目标"); return; }
     const res = await extractAccountPool(moduleKey, {
-      id: target.id, type: target.type, platform: extractForm.platform, remark: extractForm.remark || '',
+      id: target.id,
+      type: target.type,
+      platform: extractForm.platform,
+      remark: extractForm.remark || '',
+      replenish: !!extractForm.replenish,
     });
     if (res?.code !== 200) { ElMessage.error(res?.msg || "提取失败"); return; }
     ElMessage.success("提取成功");
@@ -183,6 +198,41 @@ async function handleSaveRemark(payload) {
   } finally { detailRemarkSaving.value = false; }
 }
 
+async function refreshDetailRow(id) {
+  if (!id) return;
+  const res = await getAccountPoolDetail(moduleKey, id);
+  if (res?.code === 200) {
+    detailRow.value = normalizeRow(res.data || {});
+  }
+}
+
+async function handleDetailAction(payload) {
+  if (!payload?.id || !payload?.action) return;
+  detailRemarkSaving.value = true;
+  try {
+    let res;
+    if (payload.action === 'unavailable') {
+      res = await setAccountPoolUnavailable(moduleKey, { id: payload.id });
+    } else if (payload.action === 'platform') {
+      res = await updateAccountPoolPlatform(moduleKey, {
+        id: payload.id,
+        platform: payload.platform,
+      });
+    } else if (payload.action === 'unextract') {
+      res = await unextractAccountPool(moduleKey, { id: payload.id });
+    }
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '操作失败');
+      return;
+    }
+    ElMessage.success('操作成功');
+    await refreshDetailRow(payload.id);
+    await fetchList();
+  } finally {
+    detailRemarkSaving.value = false;
+  }
+}
+
 function markExtractForSelected() {
   if (!selectedRows.value.length) { ElMessage.warning("请先选择数据"); return; }
   batchExtractForm.platform = 'local';
@@ -293,6 +343,8 @@ function normalizeRow(raw) {
     const p = (v) => String(v).padStart(2, "0");
     return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
   };
+  const st = Number(pick("is_extracted", "isExtracted", "IsExtracted"));
+  const extractStatus = Number.isFinite(st) ? st : 0;
   return {
     id: pick("id", "Id", "ID"),
     type: pick("data_type", "dataType", "type"),
@@ -300,13 +352,28 @@ function normalizeRow(raw) {
     password: pick("password", "Password"),
     token: pick("token", "Token"),
     remark: pick("remark", "Remark"),
-    extracted: Number(pick("is_extracted", "isExtracted", "IsExtracted")) === 1,
+    extractStatus,
+    extracted: extractStatus !== 0,
     extractedAt: formatTime(pickNullable("extracted_time", "extractedAt")),
     extractedPlatform: pickNullable("extracted_platform", "extractedPlatform"),
     createdAt: formatTime(pick("create_time", "createdAt")),
   };
 }
 
+function extractStatusLabel(row) {
+  if (row?.extractStatus === 2) return "补号";
+  if (row?.extractStatus === 3) return "续杯";
+  if (row?.extracted) return "已提取";
+  return "未提取";
+}
+
+function extractStatusTagType(row) {
+  if (row?.extractStatus === 2) return "warning";
+  if (row?.extractStatus === 3) return "primary";
+  if (row?.extracted) return "success";
+  return "info";
+}
+
 async function fetchList() {
   loading.value = true;
   try {
@@ -315,6 +382,7 @@ async function fetchList() {
       pageSize: pagination.pageSize,
       keyword: query.keyword || undefined,
       status: query.status || undefined,
+      platform: query.platform || undefined,
       type: activeTypeTab.value === "all" ? undefined : activeTypeTab.value,
     });
     if (res?.code !== 200) {
@@ -329,6 +397,34 @@ async function fetchList() {
   }
 }
 
+async function jumpToLastUnusedPage() {
+  const type = activeTypeTab.value === 'all' ? undefined : activeTypeTab.value;
+  const res = await getAccountPoolList(moduleKey, {
+    page: 1,
+    pageSize: pagination.pageSize,
+    keyword: query.keyword || undefined,
+    status: 'unused',
+    type,
+  });
+  if (res?.code !== 200) {
+    ElMessage.error(res?.msg || '获取列表失败');
+    return;
+  }
+  const cnt = Number(res?.data?.total || 0);
+  if (cnt === 0) {
+    ElMessage.warning('暂无未提取数据');
+    return;
+  }
+  const lastPage = Math.max(1, Math.ceil(cnt / pagination.pageSize));
+  skipWatchFetchDuringUnusedJump.value = true;
+  pagination.page = lastPage;
+  query.status = 'unused';
+  await nextTick();
+  skipWatchFetchDuringUnusedJump.value = false;
+  await fetchList();
+  ElMessage.success(`已跳转未提取第 ${lastPage} 页（共 ${cnt} 条）`);
+}
+
 onMounted(() => { fetchList(); });
 
 // ---- 接口说明数据 ----
@@ -401,6 +497,31 @@ function copyCardInfo(row) {
   navigator.clipboard.writeText(parts.join('\n')).then(() => { ElMessage.success('已复制'); });
 }
 
+async function handleProbeToken(row) {
+  if (!row?.token) {
+    ElMessage.warning('该行无 Token');
+    return;
+  }
+  probeLoadingId.value = row.id;
+  try {
+    const res = await probeAccountPoolToken(moduleKey, { id: row.id });
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '探测失败');
+      return;
+    }
+    const d = res?.data || {};
+    if (d.ok) {
+      ElMessage.success(d.detail || '官方接口响应正常');
+    } else {
+      ElMessage.error(d.detail || '不可用或校验失败');
+    }
+  } catch {
+    ElMessage.error('探测请求失败');
+  } finally {
+    probeLoadingId.value = null;
+  }
+}
+
 </script>
 
 <template>
@@ -426,13 +547,37 @@ function copyCardInfo(row) {
           >
             <el-option label="未提取" value="unused" />
             <el-option label="已提取" value="extracted" />
+            <el-option label="补号" value="replenished" />
+            <el-option label="续杯" value="renewed" />
           </el-select>
+          <el-select
+            v-model="query.platform"
+            placeholder="提取平台"
+            clearable
+            class="w-140"
+          >
+            <el-option
+              v-for="(v, k) in PLATFORM_MAP"
+              :key="k"
+              :value="k"
+              :label="v.label"
+            />
+          </el-select>
+          <el-button
+            type="primary"
+            plain
+            title="按当前搜索与账号类型，筛选未提取并跳到最后一页"
+            @click="jumpToLastUnusedPage"
+          >
+            未提取末页
+          </el-button>
           <el-button @click="resetQuery">重置</el-button>
         </div>
         <div class="toolbar-right">
           <el-button type="primary" @click="openAddDialog('single')">添加账号</el-button>
           <el-button type="success" @click="openAddDialog('batch')">批量添加</el-button>
-          <el-button @click="markExtractForSelected">批量标记提取</el-button>
+          <el-button type="warning" @click="replenishVisible = true">补号</el-button>
+          <el-button @click="markExtractForSelected">批量提取</el-button>
           <el-button @click="apiDocVisible = true">接口说明</el-button>
         </div>
       </div>
@@ -446,7 +591,8 @@ function copyCardInfo(row) {
         />
       </el-tabs>
 
-      <el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
+      <div class="table-scroll">
+        <el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="52" />
         <el-table-column prop="id" label="ID" width="80" />
         <el-table-column label="账号类型" width="160" align="center">
@@ -462,8 +608,8 @@ function copyCardInfo(row) {
         <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip :tooltip-options="tooltipOpts" />
         <el-table-column label="提取状态" width="100">
           <template #default="{ row }">
-            <el-tag :type="row.extracted ? 'success' : 'info'">{{
-              row.extracted ? "已提取" : "未提取"
+            <el-tag :type="extractStatusTagType(row)">{{
+              extractStatusLabel(row)
             }}</el-tag>
           </template>
         </el-table-column>
@@ -480,15 +626,23 @@ function copyCardInfo(row) {
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="220" fixed="right" align="center">
+        <el-table-column label="操作" width="300" fixed="right" align="center">
           <template #default="{ row }">
             <el-button link type="primary" @click="openDetail(row)"
               >详情</el-button
             >
             <el-button
+              v-if="row.token"
+              link
+              type="info"
+              :loading="probeLoadingId === row.id"
+              @click="handleProbeToken(row)"
+              >查可用</el-button
+            >
+            <el-button
+              v-if="!row.extractedAt && !row.extracted"
               link
               type="warning"
-              :disabled="row.extracted"
               @click="openExtractByRow(row)"
               >提取</el-button
             >
@@ -523,6 +677,7 @@ function copyCardInfo(row) {
       :row="detailRow"
       :save-loading="detailRemarkSaving"
       @save-remark="handleSaveRemark"
+      @detail-action="handleDetailAction"
     />
 
     <ExtractDialog
@@ -531,12 +686,27 @@ function copyCardInfo(row) {
       :type="extractForm.type"
       :platform="extractForm.platform"
       :remark="extractForm.remark"
+      :replenish="extractForm.replenish"
       :platform-map="PLATFORM_MAP"
       @update:platform="(v) => (extractForm.platform = v)"
       @update:remark="(v) => (extractForm.remark = v)"
+      @update:replenish="(v) => (extractForm.replenish = v)"
       @confirm="handleExtract"
     />
 
+    <ReplenishDialog
+      v-model="replenishVisible"
+      :loading="loading"
+      :type="replenishForm.type"
+      :platform="replenishForm.platform"
+      :remark="replenishForm.remark"
+      :platform-map="PLATFORM_MAP"
+      @update:type="(v) => (replenishForm.type = v)"
+      @update:platform="(v) => (replenishForm.platform = v)"
+      @update:remark="(v) => (replenishForm.remark = v)"
+      @confirm="handleReplenish"
+    />
+
     <!-- 接口说明抽屉 -->
     <el-drawer
       v-model="apiDocVisible"
@@ -661,4 +831,4 @@ function copyCardInfo(row) {
   white-space: pre-wrap;
   word-break: break-all;
 }
-</style>
+</style>

src/views/cursor/activationcode/index.vue

@@ -0,0 +1,957 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
+import {
+  addCursorActivationCode,
+  deleteCursorActivationCode,
+  disableCursorActivationCode,
+  enableCursorActivationCode,
+  exportCursorActivationCode,
+  generateCursorActivationCode,
+  getCursorActivationCodeDetail,
+  getCursorActivationCodeList,
+  updateCursorActivationCode,
+} from '../../../api/cursorActivationCode';
+
+type ActivationCodeRow = Record<string, any>;
+
+const loading = ref(false);
+const actionLoading = ref(false);
+const editVisible = ref(false);
+const generateVisible = ref(false);
+const detailVisible = ref(false);
+const isMobile = ref(false);
+const currentRow = ref<ActivationCodeRow | null>(null);
+const selectedRows = ref<ActivationCodeRow[]>([]);
+const tableData = ref<ActivationCodeRow[]>([]);
+const total = ref(0);
+const formRef = ref<FormInstance>();
+const generateFormRef = ref<FormInstance>();
+
+const query = reactive({
+  keyword: '',
+  status: '',
+  type: '',
+  bindStatus: '',
+});
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+});
+
+const form = reactive({
+  id: '',
+  code: '',
+  type: 30,
+  status: 0,
+  durationDays: 30,
+  bindAccount: '',
+  bindDeviceId: '',
+  ownerUserId: '',
+  ownerUserName: '',
+  activatedAt: '',
+  expiredAt: '',
+  remark: '',
+});
+
+const generateForm = reactive({
+  count: 10,
+  type: 30,
+  durationDays: 30,
+  ownerUserId: '',
+  ownerUserName: '',
+  remark: '',
+});
+
+const statusOptions = [
+  { label: '未使用', value: 0 },
+  { label: '已使用', value: 1 },
+  { label: '已过期', value: 2 },
+  { label: '已禁用', value: 3 },
+];
+
+const typeOptions = [
+  { label: '天卡', value: 1, days: 1 },
+  { label: '周卡', value: 7, days: 7 },
+  { label: '月卡', value: 30, days: 30 },
+  { label: '季卡', value: 90, days: 90 },
+  { label: '年卡', value: 365, days: 365 },
+  { label: '自定义', value: 0, days: 0 },
+];
+
+const bindStatusOptions = [
+  { label: '未绑定', value: 0 },
+  { label: '已绑定', value: 1 },
+];
+
+const statusMap: Record<string, { label: string; type: string }> = {
+  '0': { label: '未使用', type: 'info' },
+  '1': { label: '已使用', type: 'success' },
+  '2': { label: '已过期', type: 'warning' },
+  '3': { label: '已禁用', type: 'danger' },
+};
+
+const rules: FormRules = {
+  code: [{ required: true, message: '请输入激活码', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择卡密类型', trigger: 'change' }],
+  durationDays: [{ required: true, message: '请输入有效天数', trigger: 'blur' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
+};
+
+const generateRules: FormRules = {
+  count: [{ required: true, message: '请输入生成数量', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择卡密类型', trigger: 'change' }],
+  durationDays: [{ required: true, message: '请输入有效天数', trigger: 'blur' }],
+};
+
+const summary = computed(() => {
+  const unused = tableData.value.filter((item) => Number(item.status) === 0).length;
+  const used = tableData.value.filter((item) => Number(item.status) === 1).length;
+  const expired = tableData.value.filter((item) => Number(item.status) === 2).length;
+  const disabled = tableData.value.filter((item) => Number(item.status) === 3).length;
+
+  return [
+    { label: '当前页激活码', value: tableData.value.length, type: 'primary' },
+    { label: '未使用', value: unused, type: 'info' },
+    { label: '已使用', value: used, type: 'success' },
+    { label: '过期/禁用', value: expired + disabled, type: 'danger' },
+  ];
+});
+
+watch(
+  () => [query.keyword, query.status, query.type, query.bindStatus],
+  () => {
+    pagination.page = 1;
+    fetchList();
+  },
+);
+
+watch(
+  () => [pagination.page, pagination.pageSize],
+  () => {
+    fetchList();
+  },
+);
+
+function pick(raw: any, ...keys: string[]) {
+  for (const key of keys) {
+    if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
+  }
+  return '';
+}
+
+function formatTime(value: any) {
+  if (!value) return '';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return String(value);
+  const p = (v: number) => String(v).padStart(2, '0');
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+
+function normalizeRow(raw: any): ActivationCodeRow {
+  const status = Number(pick(raw, 'status', 'Status') || 0);
+  const type = Number(pick(raw, 'type', 'Type', 'card_type', 'cardType') || 0);
+  const bindAccount = pick(raw, 'bind_account', 'bindAccount', 'BindAccount', 'account', 'Account', 'email', 'Email');
+  const bindDeviceId = pick(raw, 'bind_device_id', 'bindDeviceId', 'BindDeviceID', 'device_id', 'deviceId');
+
+  return {
+    id: pick(raw, 'id', 'ID', 'Id'),
+    code: pick(raw, 'code', 'Code', 'activation_code', 'activationCode', 'card_no', 'cardNo'),
+    type,
+    typeName: typeLabel(type),
+    status,
+    durationDays: Number(pick(raw, 'duration_days', 'durationDays', 'DurationDays', 'days', 'Days') || 0),
+    bindAccount,
+    bindDeviceId,
+    bindStatus: bindAccount || bindDeviceId ? 1 : 0,
+    deviceInfo: pick(raw, 'device_info', 'deviceInfo', 'DeviceInfo'),
+    machineCode: pick(raw, 'machine_code', 'machineCode', 'MachineCode'),
+    ownerUserId: pick(raw, 'owner_user_id', 'ownerUserId', 'OwnerUserID'),
+    ownerUserName: pick(raw, 'owner_user_name', 'ownerUserName', 'OwnerUserName', 'owner', 'Owner', 'user_name', 'userName'),
+    activatedAt: formatTime(pick(raw, 'activated_at', 'activatedAt', 'activation_time', 'activationTime')),
+    expiredAt: formatTime(pick(raw, 'expired_at', 'expiredAt', 'expire_time', 'expireTime')),
+    createdAt: formatTime(pick(raw, 'created_at', 'createdAt', 'create_time', 'createTime', 'CreatedAt')),
+    updatedAt: formatTime(pick(raw, 'updated_at', 'updatedAt', 'update_time', 'updateTime', 'UpdatedAt')),
+    remark: pick(raw, 'remark', 'Remark'),
+    raw,
+  };
+}
+
+function statusLabel(status: string | number) {
+  const key = String(status ?? '');
+  return statusMap[key]?.label || key || '-';
+}
+
+function statusTagType(status: string | number) {
+  return statusMap[String(status ?? '')]?.type || 'info';
+}
+
+function typeLabel(type: string | number) {
+  const item = typeOptions.find((option) => Number(option.value) === Number(type));
+  return item?.label || (type ? `${type}天` : '自定义');
+}
+
+function resetQuery() {
+  query.keyword = '';
+  query.status = '';
+  query.type = '';
+  query.bindStatus = '';
+}
+
+function resetForm() {
+  form.id = '';
+  form.code = '';
+  form.type = 30;
+  form.status = 0;
+  form.durationDays = 30;
+  form.bindAccount = '';
+  form.bindDeviceId = '';
+  form.ownerUserId = '';
+  form.ownerUserName = '';
+  form.activatedAt = '';
+  form.expiredAt = '';
+  form.remark = '';
+  formRef.value?.clearValidate();
+}
+
+function resetGenerateForm() {
+  generateForm.count = 10;
+  generateForm.type = 30;
+  generateForm.durationDays = 30;
+  generateForm.ownerUserId = '';
+  generateForm.ownerUserName = '';
+  generateForm.remark = '';
+  generateFormRef.value?.clearValidate();
+}
+
+function handleSelectionChange(rows: ActivationCodeRow[]) {
+  selectedRows.value = rows;
+}
+
+function handleTypeChange(type: number) {
+  const item = typeOptions.find((option) => Number(option.value) === Number(type));
+  if (item && item.days > 0) form.durationDays = item.days;
+}
+
+function handleGenerateTypeChange(type: number) {
+  const item = typeOptions.find((option) => Number(option.value) === Number(type));
+  if (item && item.days > 0) generateForm.durationDays = item.days;
+}
+
+async function fetchList() {
+  loading.value = true;
+  try {
+    const res = await getCursorActivationCodeList({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      keyword: query.keyword || undefined,
+      status: query.status === '' ? undefined : query.status,
+      type: query.type === '' ? undefined : query.type,
+      bindStatus: query.bindStatus === '' ? undefined : query.bindStatus,
+    });
+
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '获取激活码列表失败');
+      return;
+    }
+
+    const list = Array.isArray(res?.data?.list) ? res.data.list : Array.isArray(res?.data) ? res.data : [];
+    tableData.value = list.map(normalizeRow);
+    total.value = Number(res?.data?.total || list.length || 0);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openAdd() {
+  currentRow.value = null;
+  resetForm();
+  editVisible.value = true;
+}
+
+function openEdit(row: ActivationCodeRow) {
+  currentRow.value = row;
+  resetForm();
+  form.id = String(row.id || '');
+  form.code = row.code || '';
+  form.type = Number(row.type || 0);
+  form.status = Number(row.status || 0);
+  form.durationDays = Number(row.durationDays || 0);
+  form.bindAccount = row.bindAccount || '';
+  form.bindDeviceId = row.bindDeviceId ? String(row.bindDeviceId) : '';
+  form.ownerUserId = row.ownerUserId ? String(row.ownerUserId) : '';
+  form.ownerUserName = row.ownerUserName || '';
+  form.activatedAt = row.activatedAt || '';
+  form.expiredAt = row.expiredAt || '';
+  form.remark = row.remark || '';
+  editVisible.value = true;
+}
+
+function openGenerate() {
+  resetGenerateForm();
+  generateVisible.value = true;
+}
+
+async function openDetail(row: ActivationCodeRow) {
+  loading.value = true;
+  try {
+    const res = await getCursorActivationCodeDetail(row.id);
+    if (res?.code === 200) {
+      currentRow.value = normalizeRow(res.data || row.raw || row);
+    } else {
+      currentRow.value = row;
+      ElMessage.warning(res?.msg || '详情接口异常，已展示列表数据');
+    }
+    detailVisible.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleSave() {
+  await formRef.value?.validate();
+
+  actionLoading.value = true;
+  try {
+    const data = {
+      id: form.id || undefined,
+      code: form.code,
+      type: Number(form.type),
+      status: Number(form.status),
+      durationDays: Number(form.durationDays || 0),
+      bindAccount: form.bindAccount || undefined,
+      bindDeviceId: form.bindDeviceId || undefined,
+      ownerUserId: form.ownerUserId || undefined,
+      ownerUserName: form.ownerUserName || undefined,
+      activatedAt: form.activatedAt || undefined,
+      expiredAt: form.expiredAt || undefined,
+      remark: form.remark || undefined,
+    };
+
+    const api = form.id ? updateCursorActivationCode : addCursorActivationCode;
+    const res = await api(data);
+
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '保存失败');
+      return;
+    }
+
+    ElMessage.success(form.id ? '激活码已更新' : '激活码已新增');
+    editVisible.value = false;
+    await fetchList();
+  } finally {
+    actionLoading.value = false;
+  }
+}
+
+async function handleGenerate() {
+  await generateFormRef.value?.validate();
+
+  actionLoading.value = true;
+  try {
+    const res = await generateCursorActivationCode({
+      count: Number(generateForm.count || 1),
+      type: Number(generateForm.type),
+      durationDays: Number(generateForm.durationDays || 0),
+      ownerUserId: generateForm.ownerUserId || undefined,
+      ownerUserName: generateForm.ownerUserName || undefined,
+      remark: generateForm.remark || undefined,
+    });
+
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '生成失败');
+      return;
+    }
+
+    ElMessage.success('激活码已生成');
+    generateVisible.value = false;
+    await fetchList();
+  } finally {
+    actionLoading.value = false;
+  }
+}
+
+async function handleDelete(row: ActivationCodeRow) {
+  try {
+    await ElMessageBox.confirm(`确认删除激活码「${row.code || row.id}」？`, '删除激活码', {
+      type: 'warning',
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+    });
+  } catch {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const res = await deleteCursorActivationCode(row.id);
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '删除失败');
+      return;
+    }
+
+    ElMessage.success('激活码已删除');
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleBatchDelete() {
+  if (!selectedRows.value.length) {
+    ElMessage.warning('请选择需要删除的激活码');
+    return;
+  }
+
+  try {
+    await ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 个激活码？`, '批量删除', {
+      type: 'warning',
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+    });
+  } catch {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    for (const row of selectedRows.value) {
+      const res = await deleteCursorActivationCode(row.id);
+      if (res?.code !== 200) {
+        ElMessage.error(res?.msg || `删除「${row.code || row.id}」失败`);
+        return;
+      }
+    }
+
+    ElMessage.success('选中激活码已删除');
+    selectedRows.value = [];
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleToggleStatus(row: ActivationCodeRow) {
+  const isDisabled = Number(row.status) === 3;
+  const title = isDisabled ? '启用激活码' : '禁用激活码';
+  const text = isDisabled ? '确认启用该激活码？' : '确认禁用该激活码？';
+
+  try {
+    await ElMessageBox.confirm(text, title, {
+      type: 'info',
+      confirmButtonText: isDisabled ? '确认启用' : '确认禁用',
+      cancelButtonText: '取消',
+    });
+  } catch {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const api = isDisabled ? enableCursorActivationCode : disableCursorActivationCode;
+    const res = await api(row.id);
+
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '操作失败');
+      return;
+    }
+
+    ElMessage.success(isDisabled ? '激活码已启用' : '激活码已禁用');
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+function copyCode(code: unknown) {
+  const text = String(code || '').trim();
+  if (!text) {
+    ElMessage.warning('暂无激活码可复制');
+    return;
+  }
+
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage.success('激活码已复制');
+  });
+}
+
+async function handleExport() {
+  loading.value = true;
+  try {
+    const res = await exportCursorActivationCode({
+      keyword: query.keyword || undefined,
+      status: query.status === '' ? undefined : query.status,
+      type: query.type === '' ? undefined : query.type,
+      bindStatus: query.bindStatus === '' ? undefined : query.bindStatus,
+    });
+
+    const blob = res instanceof Blob ? res : res?.data instanceof Blob ? res.data : null;
+    if (!blob) {
+      ElMessage.success('导出请求已提交');
+      return;
+    }
+
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `cursor-activation-code-${Date.now()}.xlsx`;
+    link.click();
+    window.URL.revokeObjectURL(url);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function updateDeviceType() {
+  isMobile.value = window.innerWidth <= 768;
+}
+
+onMounted(() => {
+  updateDeviceType();
+  window.addEventListener('resize', updateDeviceType);
+  fetchList();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateDeviceType);
+});
+</script>
+
+<template>
+  <div class="cursor-activation-code-page">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span>激活码管理（Cursor）</span>
+          <div class="header-actions">
+            <el-button type="success" @click="openGenerate">批量生成</el-button>
+            <el-button type="primary" @click="openAdd">新增激活码</el-button>
+          </div>
+        </div>
+      </template>
+
+      <div class="summary-grid">
+        <div v-for="item in summary" :key="item.label" class="summary-card">
+          <div class="summary-label">{{ item.label }}</div>
+          <div class="summary-value" :class="`is-${item.type}`">{{ item.value }}</div>
+        </div>
+      </div>
+
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <el-input v-model="query.keyword" placeholder="搜索激活码 / 账号 / 设备 / 归属用户" clearable class="w-320" />
+          <el-select v-model="query.status" placeholder="使用状态" clearable class="w-140">
+            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-select v-model="query.type" placeholder="卡密类型" clearable class="w-140">
+            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-select v-model="query.bindStatus" placeholder="绑定状态" clearable class="w-140">
+            <el-option v-for="item in bindStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-button @click="resetQuery">重置</el-button>
+        </div>
+        <div class="toolbar-right">
+          <el-button :disabled="!selectedRows.length" type="danger" plain @click="handleBatchDelete">批量删除</el-button>
+          <el-button @click="handleExport">导出</el-button>
+          <el-button :loading="loading" @click="fetchList">刷新</el-button>
+        </div>
+      </div>
+
+      <div class="table-scroll">
+        <el-table
+          v-loading="loading"
+          class="activation-code-table"
+          :data="tableData"
+          border
+          stripe
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="52" />
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column label="激活码" min-width="260" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span class="code-text">{{ row.code || '-' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="类型" width="100" align="center">
+            <template #default="{ row }">{{ row.typeName || typeLabel(row.type) }}</template>
+          </el-table-column>
+          <el-table-column label="有效天数" width="100" align="center">
+            <template #default="{ row }">{{ row.durationDays || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusTagType(row.status)">
+                {{ statusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="绑定信息" min-width="220" show-overflow-tooltip>
+            <template #default="{ row }">
+              <div>{{ row.bindAccount || '-' }}</div>
+              <div class="muted">设备：{{ row.machineCode || row.bindDeviceId || '-' }}</div>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column prop="ownerUserName" label="归属用户" min-width="130" show-overflow-tooltip /> -->
+          <el-table-column prop="activatedAt" label="激活时间" width="180">
+            <template #default="{ row }">{{ row.activatedAt || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="expiredAt" label="过期时间" width="180">
+            <template #default="{ row }">{{ row.expiredAt || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="createdAt" label="创建时间" width="180">
+            <template #default="{ row }">{{ row.createdAt || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
+          <el-table-column label="操作" width="290" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button link type="primary" @click="openDetail(row)">详情</el-button>
+              <el-button v-if="row.code" link type="primary" @click="copyCode(row.code)">复制</el-button>
+              <el-button link type="warning" @click="openEdit(row)">编辑</el-button>
+              <el-button link :type="Number(row.status) === 3 ? 'success' : 'info'" @click="handleToggleStatus(row)">
+                {{ Number(row.status) === 3 ? '启用' : '禁用' }}
+              </el-button>
+              <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pager">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          background
+          :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="editVisible"
+      :title="form.id ? '编辑激活码' : '新增激活码'"
+      width="720px"
+      class="activation-code-edit-dialog"
+    >
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="激活码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入激活码" clearable />
+        </el-form-item>
+        <el-row :gutter="12">
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="卡密类型" prop="type">
+              <el-select v-model="form.type" placeholder="请选择卡密类型" class="full" @change="handleTypeChange">
+                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="有效天数" prop="durationDays">
+              <el-input-number v-model="form.durationDays" :min="0" :max="9999" class="full" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="12">
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="状态" prop="status">
+              <el-select v-model="form.status" placeholder="请选择状态" class="full">
+                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="归属用户ID">
+              <el-input v-model="form.ownerUserId" placeholder="请输入归属用户ID" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="归属用户">
+          <el-input v-model="form.ownerUserName" placeholder="请输入归属用户名称" clearable />
+        </el-form-item>
+        <el-row :gutter="12">
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="绑定账号">
+              <el-input v-model="form.bindAccount" placeholder="请输入绑定账号" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="绑定设备ID">
+              <el-input v-model="form.bindDeviceId" placeholder="请输入绑定设备ID" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="12">
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="激活时间">
+              <el-date-picker
+                v-model="form.activatedAt"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="请选择激活时间"
+                class="full"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="过期时间">
+              <el-date-picker
+                v-model="form.expiredAt"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="请选择过期时间"
+                class="full"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="editVisible = false">取消</el-button>
+        <el-button type="primary" :loading="actionLoading" @click="handleSave">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="generateVisible" title="批量生成激活码" width="620px" class="activation-code-generate-dialog">
+      <el-form ref="generateFormRef" :model="generateForm" :rules="generateRules" label-width="110px">
+        <el-row :gutter="12">
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="生成数量" prop="count">
+              <el-input-number v-model="generateForm.count" :min="1" :max="10000" class="full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="卡密类型" prop="type">
+              <el-select
+                v-model="generateForm.type"
+                placeholder="请选择卡密类型"
+                class="full"
+                @change="handleGenerateTypeChange"
+              >
+                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="有效天数" prop="durationDays">
+          <el-input-number v-model="generateForm.durationDays" :min="0" :max="9999" class="full" />
+        </el-form-item>
+        <el-row :gutter="12">
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="归属用户ID">
+              <el-input v-model="generateForm.ownerUserId" placeholder="请输入归属用户ID" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="归属用户">
+              <el-input v-model="generateForm.ownerUserName" placeholder="请输入归属用户名称" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="备注">
+          <el-input v-model="generateForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="generateVisible = false">取消</el-button>
+        <el-button type="primary" :loading="actionLoading" @click="handleGenerate">确认生成</el-button>
+      </template>
+    </el-dialog>
+
+    <el-drawer v-model="detailVisible" title="激活码详情" size="640px" direction="rtl" class="activation-code-detail-drawer">
+      <el-descriptions v-if="currentRow" :column="1" border>
+        <el-descriptions-item label="ID">{{ currentRow.id || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="激活码">
+          <span class="code-text">{{ currentRow.code || '-' }}</span>
+          <el-button v-if="currentRow.code" link type="primary" @click="copyCode(currentRow.code)">复制</el-button>
+        </el-descriptions-item>
+        <el-descriptions-item label="卡密类型">{{ currentRow.typeName || typeLabel(currentRow.type) }}</el-descriptions-item>
+        <el-descriptions-item label="有效天数">{{ currentRow.durationDays || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="statusTagType(currentRow.status)">
+            {{ statusLabel(currentRow.status) }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="绑定账号">{{ currentRow.bindAccount || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="绑定设备">{{ currentRow.machineCode || currentRow.bindDeviceId || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="设备信息">{{ currentRow.deviceInfo || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="归属用户">{{ currentRow.ownerUserName || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="归属用户ID">{{ currentRow.ownerUserId || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="激活时间">{{ currentRow.activatedAt || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="过期时间">{{ currentRow.expiredAt || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ currentRow.createdAt || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="更新时间">{{ currentRow.updatedAt || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="备注">{{ currentRow.remark || '-' }}</el-descriptions-item>
+      </el-descriptions>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.cursor-activation-code-page {
+  padding: 12px;
+}
+
+.card-header,
+.header-actions,
+.toolbar,
+.toolbar-left,
+.toolbar-right,
+.code-cell {
+  display: flex;
+  align-items: center;
+}
+
+.card-header {
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.header-actions,
+.toolbar-left,
+.toolbar-right,
+.code-cell {
+  gap: 8px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.summary-card {
+  padding: 14px 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: #fbfcff;
+}
+
+.summary-label {
+  color: #909399;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.summary-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #409eff;
+
+  &.is-success {
+    color: #67c23a;
+  }
+
+  &.is-info {
+    color: #909399;
+  }
+
+  &.is-danger {
+    color: #f56c6c;
+  }
+}
+
+.toolbar {
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.toolbar-left,
+.toolbar-right {
+  flex-wrap: wrap;
+}
+
+.w-320 {
+  width: 320px;
+}
+
+.w-140 {
+  width: 140px;
+}
+
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.activation-code-table {
+  min-width: 1360px;
+}
+
+.code-text {
+  font-family: Consolas, Monaco, 'Courier New', monospace;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.muted {
+  color: #909399;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.full {
+  width: 100%;
+}
+
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+:deep(.activation-code-edit-dialog),
+:deep(.activation-code-generate-dialog) {
+  max-width: calc(100vw - 24px);
+}
+
+@media (max-width: 768px) {
+  .cursor-activation-code-page {
+    padding: 8px;
+  }
+
+  .card-header,
+  .header-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .summary-grid {
+    grid-template-columns: repeat(2, minmax(120px, 1fr));
+  }
+
+  .toolbar-left,
+  .toolbar-right,
+  .w-320,
+  .w-140 {
+    width: 100%;
+  }
+
+  .toolbar-right .el-button,
+  .header-actions .el-button {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .pager {
+    justify-content: center;
+  }
+
+  :deep(.activation-code-detail-drawer) {
+    width: 100vw !important;
+  }
+}
+</style>

src/views/cursor/equipment/components/activationRecords.vue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus';
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Object,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  records: {
+    type: Array,
+    default: () => [],
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  page: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 20,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:page', 'update:pageSize', 'refresh']);
+
+function statusText(status: unknown) {
+  const value = String(status || '');
+  if (value === 'success' || value === '1') return '成功';
+  if (value === 'failed' || value === '0') return '失败';
+  return value || '-';
+}
+
+function statusType(status: unknown) {
+  const value = String(status || '');
+  if (value === 'success' || value === '1') return 'success';
+  if (value === 'failed' || value === '0') return 'danger';
+  return 'info';
+}
+
+function copyCode(code: unknown) {
+  const text = String(code || '').trim();
+  if (!text) {
+    ElMessage.warning('暂无激活码可复制');
+    return;
+  }
+
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage.success('激活码已复制');
+  });
+}
+</script>
+
+<template>
+  <el-drawer
+    class="equipment-record-drawer"
+    :model-value="modelValue"
+    title="激活记录"
+    size="760px"
+    direction="rtl"
+    @update:model-value="(v: boolean) => emit('update:modelValue', v)"
+    @opened="emit('refresh')"
+  >
+    <div class="record-header">
+      <div>
+        <div class="record-title">{{ row?.name || '-' }}</div>
+        <div class="record-subtitle">设备编号：{{ row?.deviceNo || '-' }}</div>
+      </div>
+      <el-button :loading="loading" @click="emit('refresh')">刷新</el-button>
+    </div>
+
+    <el-table v-loading="loading" :data="records" border stripe style="width: 100%">
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column label="状态" width="90" align="center">
+        <template #default="{ row: item }">
+          <el-tag :type="statusType(item.status)" size="small">
+            {{ statusText(item.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="激活码" min-width="260" show-overflow-tooltip>
+        <template #default="{ row: item }">
+          <span class="code-text">{{ item.activationCode || item.code || '-' }}</span>
+          <el-button v-if="item.activationCode || item.code" link type="primary" @click="copyCode(item.activationCode || item.code)">
+            复制
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="machineCode" label="机器码" min-width="180" show-overflow-tooltip />
+      <el-table-column prop="deviceInfo" label="设备信息" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="durationDays" label="有效天数" width="100" align="center" />
+      <el-table-column prop="activatedAt" label="激活时间" width="180">
+        <template #default="{ row: item }">{{ item.activatedAt || item.createdAt || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="expiredAt" label="到期时间" width="180">
+        <template #default="{ row: item }">{{ item.expiredAt || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
+    </el-table>
+
+    <div class="record-pager">
+      <el-pagination
+        :current-page="page"
+        :page-size="pageSize"
+        background
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @update:current-page="(v: number) => emit('update:page', v)"
+        @update:page-size="(v: number) => emit('update:pageSize', v)"
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped lang="less">
+.record-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.record-title {
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.6;
+}
+
+.record-subtitle {
+  color: #909399;
+  font-size: 13px;
+}
+
+.record-pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+.code-text {
+  font-family: Consolas, Monaco, 'Courier New', monospace;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+@media (max-width: 768px) {
+  :deep(.equipment-record-drawer) {
+    width: 100vw !important;
+  }
+
+  .record-header {
+    align-items: flex-start;
+  }
+
+  .record-pager {
+    justify-content: center;
+  }
+}
+</style>

src/views/cursor/equipment/components/delete.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Object,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'confirm']);
+
+function close() {
+  emit('update:modelValue', false);
+}
+</script>
+
+<template>
+  <el-dialog
+    class="equipment-delete-dialog"
+    :model-value="modelValue"
+    title="删除设备"
+    width="460px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-alert type="warning" :closable="false" show-icon>
+      删除后设备及相关记录可能无法恢复，请谨慎操作。
+    </el-alert>
+
+    <div v-if="props.row" class="delete-content">
+      <div class="delete-row">
+        <span class="label">设备名称：</span>
+        <span>{{ props.row.name || '-' }}</span>
+      </div>
+      <div class="delete-row">
+        <span class="label">设备编号：</span>
+        <span>{{ props.row.deviceNo || '-' }}</span>
+      </div>
+      <div class="delete-row">
+        <span class="label">机器码：</span>
+        <span class="code">{{ props.row.machineCode || '-' }}</span>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button type="danger" :loading="loading" @click="emit('confirm')">确认删除</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="less">
+.delete-content {
+  margin-top: 16px;
+  padding: 12px 14px;
+  background: #f8fafc;
+  border-radius: 6px;
+}
+
+.delete-row {
+  display: flex;
+  gap: 8px;
+  line-height: 1.8;
+  font-size: 14px;
+
+  .label {
+    flex-shrink: 0;
+    color: #909399;
+  }
+
+  .code {
+    word-break: break-all;
+  }
+}
+
+:deep(.equipment-delete-dialog) {
+  max-width: calc(100vw - 24px);
+}
+</style>

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

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const statusMap: Record<string, { label: string; type: string }> = {
+  active: { label: '已激活', type: 'success' },
+  inactive: { label: '未激活', type: 'info' },
+  disabled: { label: '禁用', type: 'danger' },
+  expired: { label: '已过期', type: 'warning' },
+};
+
+const statusInfo = computed(() => {
+  const status = String(props.row?.status || 'inactive');
+  return statusMap[status] || { label: status || '-', type: 'info' };
+});
+
+function display(value: unknown) {
+  if (value === null || value === undefined || value === '') return '-';
+  return String(value);
+}
+
+function copyText(text: unknown, label = '内容') {
+  const value = String(text || '').trim();
+  if (!value) {
+    ElMessage.warning(`暂无${label}可复制`);
+    return;
+  }
+  navigator.clipboard.writeText(value).then(() => {
+    ElMessage.success(`${label}已复制`);
+  });
+}
+</script>
+
+<template>
+  <el-dialog
+    class="equipment-detail-dialog"
+    :model-value="modelValue"
+    title="设备详情"
+    width="760px"
+    @update:model-value="(v: boolean) => emit('update:modelValue', v)"
+  >
+    <el-descriptions v-if="row" :column="2" border>
+      <el-descriptions-item label="设备ID">
+        {{ display(row.id) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="设备状态">
+        <el-tag :type="statusInfo.type">{{ statusInfo.label }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="设备名称">
+        {{ display(row.name) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="设备编号">
+        <span class="value-with-action">
+          <span>{{ display(row.deviceNo) }}</span>
+          <el-button v-if="row.deviceNo" link type="primary" @click="copyText(row.deviceNo, '设备编号')">
+            复制
+          </el-button>
+        </span>
+      </el-descriptions-item>
+      <el-descriptions-item label="机器码">
+        <span class="code-text">{{ display(row.machineCode) }}</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="绑定激活码">
+        <span class="code-text">{{ display(row.licenseCode) }}</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="系统平台">
+        {{ display(row.os) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="版本">
+        {{ display(row.version) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="绑定账号">
+        {{ display(row.raw?.bindAccount || row.raw?.bind_account) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="归属用户">
+        {{ display(row.owner) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="激活次数">
+        {{ Number(row.activationCount || 0) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="提取次数">
+        {{ Number(row.extractCount || 0) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="最后激活时间">
+        {{ display(row.lastActivatedAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="最后提取时间">
+        {{ display(row.lastExtractedAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="过期时间">
+        {{ display(row.expiredAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ display(row.createdAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="备注" :span="2">
+        <span class="remark-text">{{ display(row.remark) }}</span>
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="less">
+.value-with-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+}
+
+.code-text,
+.remark-text {
+  word-break: break-all;
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+:deep(.equipment-detail-dialog) {
+  max-width: calc(100vw - 24px);
+}
+
+@media (max-width: 768px) {
+  :deep(.equipment-detail-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin: 0 auto;
+  }
+
+  :deep(.equipment-detail-dialog .el-dialog__body) {
+    padding: 12px;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  :deep(.el-descriptions__body .el-descriptions__table) {
+    display: block;
+  }
+
+  :deep(.el-descriptions__body tbody),
+  :deep(.el-descriptions__body tr),
+  :deep(.el-descriptions__body th),
+  :deep(.el-descriptions__body td) {
+    display: block;
+    width: 100% !important;
+  }
+}
+</style>

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

@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Object,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'submit']);
+
+const formRef = ref();
+
+const form = reactive({
+  id: '',
+  name: '',
+  deviceNo: '',
+  machineCode: '',
+  licenseCode: '',
+  os: '',
+  version: '',
+  account: '',
+  owner: '',
+  status: 'inactive',
+  expiredAt: '',
+  remark: '',
+});
+
+const rules = {
+  name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
+  deviceNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
+  machineCode: [{ required: true, message: '请输入机器码', trigger: 'blur' }],
+  status: [{ required: true, message: '请选择设备状态', trigger: 'change' }],
+};
+
+function resetForm() {
+  form.id = '';
+  form.name = '';
+  form.deviceNo = '';
+  form.machineCode = '';
+  form.licenseCode = '';
+  form.os = '';
+  form.version = '';
+  form.account = '';
+  form.owner = '';
+  form.status = 'inactive';
+  form.expiredAt = '';
+  form.remark = '';
+  formRef.value?.clearValidate?.();
+}
+
+function fillForm(row: any) {
+  form.id = row?.id || '';
+  form.name = row?.name || '';
+  form.deviceNo = row?.deviceNo || '';
+  form.machineCode = row?.machineCode || '';
+  form.licenseCode = row?.licenseCode || '';
+  form.os = row?.os || '';
+  form.version = row?.version || '';
+  form.account = row?.account || '';
+  form.owner = row?.owner || '';
+  form.status = row?.status || 'inactive';
+  form.expiredAt = row?.expiredAt || '';
+  form.remark = row?.remark || '';
+}
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (!visible) return;
+    resetForm();
+    if (props.row) fillForm(props.row);
+  },
+);
+
+async function handleSubmit() {
+  await formRef.value?.validate?.();
+  emit('submit', { ...form });
+}
+</script>
+
+<template>
+  <el-dialog
+    class="equipment-edit-dialog"
+    :model-value="modelValue"
+    :title="row?.id ? '编辑设备' : '新增设备'"
+    width="720px"
+    destroy-on-close
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="96px">
+      <el-row :gutter="14">
+        <el-col :xs="24" :sm="12">
+          <el-form-item label="设备名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入设备名称" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <el-form-item label="设备编号" prop="deviceNo">
+            <el-input v-model="form.deviceNo" placeholder="请输入设备编号" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="机器码" prop="machineCode">
+            <el-input v-model="form.machineCode" placeholder="请输入设备机器码 / 指纹" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="授权码">
+            <el-input v-model="form.licenseCode" placeholder="请输入授权码" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <el-form-item label="系统平台">
+            <el-select v-model="form.os" placeholder="请选择系统平台" clearable style="width: 100%">
+              <el-option label="Windows" value="Windows" />
+              <el-option label="macOS" value="macOS" />
+              <el-option label="Linux" value="Linux" />
+              <el-option label="其他" value="Other" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <el-form-item label="版本">
+            <el-input v-model="form.version" placeholder="请输入客户端版本" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <el-form-item label="绑定账号">
+            <el-input v-model="form.account" placeholder="请输入绑定账号" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <el-form-item label="归属用户">
+            <el-input v-model="form.owner" placeholder="请输入归属用户" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <el-form-item label="设备状态" prop="status">
+            <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
+              <el-option label="未激活" value="inactive" />
+              <el-option label="正常" value="active" />
+              <el-option label="禁用" value="disabled" />
+              <el-option label="已过期" value="expired" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <el-form-item label="过期时间">
+            <el-date-picker
+              v-model="form.expiredAt"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择过期时间"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="备注">
+            <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="less">
+:deep(.equipment-edit-dialog) {
+  max-width: calc(100vw - 24px);
+}
+
+@media (max-width: 768px) {
+  :deep(.equipment-edit-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin: 0 auto;
+  }
+
+  :deep(.equipment-edit-dialog .el-dialog__body) {
+    padding: 12px;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/cursor/equipment/components/extractRecords.vue

@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus';
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Object,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  records: {
+    type: Array,
+    default: () => [],
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  page: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 20,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:page', 'update:pageSize', 'refresh']);
+
+function copyContent(content: unknown, label = '提取内容') {
+  const text = String(content || '').trim();
+  if (!text) {
+    ElMessage.warning(`暂无${label}可复制`);
+    return;
+  }
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage.success(`${label}已复制`);
+  });
+}
+
+function statusText(status: unknown) {
+  const value = String(status || '');
+  if (value === 'success' || value === '1') return '已提取';
+  if (value === '2') return '补号';
+  if (value === '3') return '异常';
+  if (value === 'failed' || value === '0') return '未提取';
+  return value || '-';
+}
+
+function statusType(status: unknown) {
+  const value = String(status || '');
+  if (value === 'success' || value === '1') return 'success';
+  if (value === '2') return 'warning';
+  if (value === '3' || value === 'failed') return 'danger';
+  return 'info';
+}
+</script>
+
+<template>
+  <el-drawer
+    class="equipment-record-drawer"
+    :model-value="modelValue"
+    title="提取记录"
+    size="860px"
+    direction="rtl"
+    @update:model-value="(v: boolean) => emit('update:modelValue', v)"
+    @opened="emit('refresh')"
+  >
+    <div class="record-header">
+      <div>
+        <div class="record-title">{{ row?.name || '-' }}</div>
+        <div class="record-subtitle">设备编号：{{ row?.deviceNo || '-' }}</div>
+      </div>
+      <el-button :loading="loading" @click="emit('refresh')">刷新</el-button>
+    </div>
+
+    <el-table v-loading="loading" :data="records" border stripe style="width: 100%">
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column label="状态" width="90" align="center">
+        <template #default="{ row: item }">
+          <el-tag :type="statusType(item.status)" size="small">
+            {{ statusText(item.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="platform" label="提取平台" width="110">
+        <template #default="{ row: item }">{{ item.platform || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="type" label="数据类型" width="110">
+        <template #default="{ row: item }">{{ item.type || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="Cursor账号" min-width="170" show-overflow-tooltip>
+        <template #default="{ row: item }">
+          <span>{{ item.account || '-' }}</span>
+          <el-button v-if="item.account" link type="primary" @click="copyContent(item.account, 'Cursor账号')">
+            复制
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="密码" min-width="150" show-overflow-tooltip>
+        <template #default="{ row: item }">
+          <span>{{ item.password || '-' }}</span>
+          <el-button v-if="item.password" link type="primary" @click="copyContent(item.password, '密码')">
+            复制
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="Token" min-width="240" show-overflow-tooltip>
+        <template #default="{ row: item }">
+          <span>{{ item.token || '-' }}</span>
+          <el-button v-if="item.token" link type="primary" @click="copyContent(item.token, 'Token')">
+            复制
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="提取内容" min-width="260" show-overflow-tooltip>
+        <template #default="{ row: item }">
+          <span>{{ item.content || '-' }}</span>
+          <el-button v-if="item.content" link type="primary" @click="copyContent(item.content, '提取内容')">
+            复制
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="extractedAt" label="提取时间" width="180">
+        <template #default="{ row: item }">{{ item.extractedAt || item.createdAt || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
+    </el-table>
+
+    <div class="record-pager">
+      <el-pagination
+        :current-page="page"
+        :page-size="pageSize"
+        background
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @update:current-page="(v: number) => emit('update:page', v)"
+        @update:page-size="(v: number) => emit('update:pageSize', v)"
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped lang="less">
+.record-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.record-title {
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.6;
+}
+
+.record-subtitle {
+  color: #909399;
+  font-size: 13px;
+}
+
+.record-pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+@media (max-width: 768px) {
+  :deep(.equipment-record-drawer) {
+    width: 100vw !important;
+  }
+
+  .record-header {
+    align-items: flex-start;
+  }
+
+  .record-pager {
+    justify-content: center;
+  }
+}
+</style>

src/views/cursor/equipment/index.vue

@@ -0,0 +1,695 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import DetailDialog from './components/detail.vue';
+import EditDialog from './components/edit.vue';
+import DeleteDialog from './components/delete.vue';
+import ActivationRecords from './components/activationRecords.vue';
+import ExtractRecords from './components/extractRecords.vue';
+import {
+  activateCursorEquipment,
+  addCursorEquipment,
+  deleteCursorEquipment,
+  getCursorEquipmentActivationRecords,
+  getCursorEquipmentDetail,
+  getCursorEquipmentExtractRecords,
+  getCursorEquipmentList,
+  updateCursorEquipment,
+} from '../../../api/cursorEquipment';
+
+type EquipmentRow = Record<string, any>;
+
+const loading = ref(false);
+const actionLoading = ref(false);
+const detailVisible = ref(false);
+const editVisible = ref(false);
+const deleteVisible = ref(false);
+const activationVisible = ref(false);
+const extractVisible = ref(false);
+const currentRow = ref<EquipmentRow | null>(null);
+const selectedRows = ref<EquipmentRow[]>([]);
+const tableData = ref<EquipmentRow[]>([]);
+const total = ref(0);
+const isMobile = ref(false);
+
+const query = reactive({
+  keyword: '',
+  status: '',
+  os: '',
+});
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+});
+
+const activationState = reactive({
+  loading: false,
+  records: [] as EquipmentRow[],
+  total: 0,
+  page: 1,
+  pageSize: 20,
+});
+
+const extractState = reactive({
+  loading: false,
+  records: [] as EquipmentRow[],
+  total: 0,
+  page: 1,
+  pageSize: 20,
+});
+
+const statusOptions = [
+  { label: '未激活', value: 0 },
+  { label: '已激活', value: 1 },
+  { label: '禁用', value: 3 },
+  { label: '已过期', value: 2 },
+];
+
+const osOptions = [
+  { label: 'Windows', value: 'Windows' },
+  { label: 'macOS', value: 'macOS' },
+  { label: 'Linux', value: 'Linux' },
+  { label: '其他', value: 'Other' },
+];
+
+const statusMap: Record<string, { label: string; type: string }> = {
+  active: { label: '已激活', type: 'success' },
+  inactive: { label: '未激活', type: 'info' },
+  disabled: { label: '禁用', type: 'danger' },
+  expired: { label: '已过期', type: 'warning' },
+};
+
+const summary = computed(() => {
+  const active = tableData.value.filter((item) => item.status === 'active').length;
+  const inactive = tableData.value.filter((item) => item.status === 'inactive').length;
+  const disabled = tableData.value.filter((item) => item.status === 'disabled').length;
+  const expired = tableData.value.filter((item) => item.status === 'expired').length;
+  return [
+    { label: '当前页设备', value: tableData.value.length, type: 'primary' },
+    { label: '已激活设备', value: active, type: 'success' },
+    { label: '未激活', value: inactive, type: 'info' },
+    { label: '禁用/过期', value: disabled + expired, type: 'danger' },
+  ];
+});
+
+watch(
+  () => [query.keyword, query.status, query.os],
+  () => {
+    pagination.page = 1;
+    fetchList();
+  },
+);
+
+watch(
+  () => [pagination.page, pagination.pageSize],
+  () => {
+    fetchList();
+  },
+);
+
+watch(
+  () => [activationState.page, activationState.pageSize],
+  () => {
+    if (activationVisible.value) fetchActivationRecords();
+  },
+);
+
+watch(
+  () => [extractState.page, extractState.pageSize],
+  () => {
+    if (extractVisible.value) fetchExtractRecords();
+  },
+);
+
+function pick(raw: any, ...keys: string[]) {
+  for (const key of keys) {
+    if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
+  }
+  return '';
+}
+
+function formatTime(value: any) {
+  if (!value) return '';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return String(value);
+  const p = (v: number) => String(v).padStart(2, '0');
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+
+function normalizeEquipmentStatus(status: any) {
+  const value = String(status ?? '').trim();
+
+  if (value === '0' || value === 'inactive') return 'inactive';
+  if (value === '1' || value === 'active' || value === 'normal') return 'active';
+  if (value === '2' || value === 'expired') return 'expired';
+  if (value === '3' || value === 'disabled' || value === 'disable') return 'disabled';
+
+  return value || 'inactive';
+}
+
+function normalizeRow(raw: any): EquipmentRow {
+  const status = normalizeEquipmentStatus(pick(raw, 'status', 'Status'));
+  return {
+    id: pick(raw, 'id', 'ID', 'Id'),
+    name: pick(raw, 'name', 'device_name', 'deviceName', 'Name', 'DeviceName'),
+    deviceNo: pick(raw, 'device_no', 'deviceNo', 'DeviceNo', 'serial_no', 'serialNo'),
+    machineCode: pick(raw, 'machine_code', 'machineCode', 'MachineCode', 'fingerprint'),
+    licenseCode: pick(raw, 'bindActivationCode', 'activationCode', 'activation_code', 'code', 'Code', 'license_code', 'licenseCode', 'LicenseCode'),
+    os: pick(raw, 'system', 'System', 'os', 'OS', 'platform', 'Platform'),
+    version: pick(raw, 'version', 'Version', 'client_version', 'clientVersion'),
+    account: pick(raw, 'bindActivationCode', 'activationCode', 'activation_code', 'code', 'Code', 'license_code', 'licenseCode', 'LicenseCode'),
+    owner: pick(raw, 'owner', 'Owner', 'user_name', 'userName', 'tenant_name', 'tenantName'),
+    status,
+    activationCount: Number(pick(raw, 'activation_count', 'activationCount', 'ActivationCount') || 0),
+    extractCount: Number(pick(raw, 'extract_count', 'extractCount', 'ExtractCount') || 0),
+    lastActivatedAt: formatTime(pick(raw, 'lastActivatedAt', 'last_activated_at', 'activationTime', 'activation_time', 'activated_at', 'activatedAt')),
+    lastExtractedAt: formatTime(pick(raw, 'last_extracted_at', 'lastExtractedAt', 'extracted_at')),
+    expiredAt: formatTime(pick(raw, 'expiredAt', 'expired_at', 'expireTime', 'expire_time')),
+    createdAt: formatTime(pick(raw, 'create_time', 'created_at', 'createdAt', 'CreatedAt')),
+    remark: pick(raw, 'remark', 'Remark'),
+    raw,
+  };
+}
+
+function normalizeRecord(raw: any): EquipmentRow {
+  return {
+    id: pick(raw, 'id', 'ID', 'Id'),
+    status: pick(raw, 'status', 'Status', 'result', 'Result', 'isExtracted', 'is_extracted'),
+    activationCode: pick(raw, 'activationCode', 'activation_code', 'code', 'Code'),
+    durationDays: pick(raw, 'durationDays', 'duration_days'),
+    machineCode: pick(raw, 'machineCode', 'machine_code', 'MachineCode'),
+    deviceInfo: pick(raw, 'deviceInfo', 'device_info', 'DeviceInfo'),
+    expiredAt: formatTime(pick(raw, 'expiredAt', 'expired_at', 'expireTime', 'expire_time')),
+    activatedAt: formatTime(pick(raw, 'activatedAt', 'activated_at', 'activationTime', 'activation_time')),
+    account: pick(raw, 'account', 'Account', 'email', 'Email'),
+    password: pick(raw, 'password', 'Password'),
+    token: pick(raw, 'token', 'Token'),
+    platform: pick(raw, 'platform', 'Platform', 'source', 'Source', 'extractedPlatform', 'extracted_platform'),
+    type: pick(raw, 'type', 'Type', 'data_type', 'dataType'),
+    content: pick(raw, 'content', 'Content', 'extract_content', 'extractContent'),
+    ip: pick(raw, 'ip', 'IP', 'client_ip', 'clientIp'),
+    clientVersion: pick(raw, 'client_version', 'clientVersion', 'version', 'Version'),
+    createdAt: formatTime(pick(raw, 'create_time', 'created_at', 'createdAt', 'CreatedAt')),
+    extractedAt: formatTime(pick(raw, 'extractedAt', 'extracted_at', 'extracted_time')),
+    remark: pick(raw, 'remark', 'Remark', 'message', 'Message'),
+    raw,
+  };
+}
+
+function statusLabel(status: string) {
+  return statusMap[status]?.label || status || '-';
+}
+
+function statusTagType(status: string) {
+  return statusMap[status]?.type || 'info';
+}
+
+function resetQuery() {
+  query.keyword = '';
+  query.status = '';
+  query.os = '';
+}
+
+function handleSelectionChange(rows: EquipmentRow[]) {
+  selectedRows.value = rows;
+}
+
+async function fetchList() {
+  loading.value = true;
+  try {
+    const res = await getCursorEquipmentList({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      keyword: query.keyword || undefined,
+      status: query.status === '' ? undefined : query.status,
+      os: query.os || undefined,
+    });
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '获取设备列表失败');
+      return;
+    }
+    const list = Array.isArray(res?.data?.list) ? res.data.list : Array.isArray(res?.data) ? res.data : [];
+    tableData.value = list.map(normalizeRow);
+    total.value = Number(res?.data?.total || list.length || 0);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function openDetail(row: EquipmentRow) {
+  loading.value = true;
+  try {
+    const res = await getCursorEquipmentDetail(row.id);
+    if (res?.code === 200) {
+      currentRow.value = normalizeRow(res.data || row.raw || row);
+    } else {
+      currentRow.value = row;
+      ElMessage.warning(res?.msg || '详情接口异常，已展示列表数据');
+    }
+    detailVisible.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openAdd() {
+  currentRow.value = null;
+  editVisible.value = true;
+}
+
+function openEdit(row: EquipmentRow) {
+  currentRow.value = row;
+  editVisible.value = true;
+}
+
+function openDelete(row: EquipmentRow) {
+  currentRow.value = row;
+  deleteVisible.value = true;
+}
+
+async function handleSave(payload: EquipmentRow) {
+  actionLoading.value = true;
+  try {
+    const api = payload.id ? updateCursorEquipment : addCursorEquipment;
+    const res = await api(payload);
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '保存失败');
+      return;
+    }
+    ElMessage.success(payload.id ? '设备已更新' : '设备已新增');
+    editVisible.value = false;
+    await fetchList();
+  } finally {
+    actionLoading.value = false;
+  }
+}
+
+async function handleDelete() {
+  if (!currentRow.value?.id) return;
+  actionLoading.value = true;
+  try {
+    const res = await deleteCursorEquipment(currentRow.value.id);
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '删除失败');
+      return;
+    }
+    ElMessage.success('设备已删除');
+    deleteVisible.value = false;
+    await fetchList();
+  } finally {
+    actionLoading.value = false;
+  }
+}
+
+async function handleActivate(row: EquipmentRow) {
+  try {
+    await ElMessageBox.confirm(`确认激活设备「${row.name || row.deviceNo || row.id}」？`, '激活设备', {
+      type: 'info',
+      confirmButtonText: '确认激活',
+      cancelButtonText: '取消',
+    });
+  } catch {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const res = await activateCursorEquipment({ id: row.id });
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '激活失败');
+      return;
+    }
+    ElMessage.success('设备已激活');
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openActivationRecords(row: EquipmentRow) {
+  currentRow.value = row;
+  activationState.page = 1;
+  activationState.records = [];
+  activationState.total = 0;
+  activationVisible.value = true;
+}
+
+function openExtractRecords(row: EquipmentRow) {
+  currentRow.value = row;
+  extractState.page = 1;
+  extractState.records = [];
+  extractState.total = 0;
+  extractVisible.value = true;
+}
+
+async function fetchActivationRecords() {
+  if (!currentRow.value?.id) return;
+  activationState.loading = true;
+  try {
+    const res = await getCursorEquipmentActivationRecords({
+      equipmentId: currentRow.value.id,
+      page: activationState.page,
+      pageSize: activationState.pageSize,
+    });
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '获取激活记录失败');
+      return;
+    }
+    const list = Array.isArray(res?.data?.list) ? res.data.list : Array.isArray(res?.data) ? res.data : [];
+    activationState.records = list.map(normalizeRecord);
+    activationState.total = Number(res?.data?.total || list.length || 0);
+  } finally {
+    activationState.loading = false;
+  }
+}
+
+async function fetchExtractRecords() {
+  if (!currentRow.value?.id) return;
+  extractState.loading = true;
+  try {
+    const res = await getCursorEquipmentExtractRecords({
+      equipmentId: currentRow.value.id,
+      page: extractState.page,
+      pageSize: extractState.pageSize,
+    });
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '获取提取记录失败');
+      return;
+    }
+    const list = Array.isArray(res?.data?.list) ? res.data.list : Array.isArray(res?.data) ? res.data : [];
+    extractState.records = list.map(normalizeRecord);
+    extractState.total = Number(res?.data?.total || list.length || 0);
+  } finally {
+    extractState.loading = false;
+  }
+}
+
+function updateDeviceType() {
+  isMobile.value = window.innerWidth <= 768;
+}
+
+onMounted(() => {
+  updateDeviceType();
+  window.addEventListener('resize', updateDeviceType);
+  fetchList();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateDeviceType);
+});
+</script>
+
+<template>
+  <div class="cursor-equipment-page">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span>设备管理（Cursor）</span>
+          <el-button type="primary" @click="openAdd">新增设备</el-button>
+        </div>
+      </template>
+
+      <div class="summary-grid">
+        <div v-for="item in summary" :key="item.label" class="summary-card">
+          <div class="summary-label">{{ item.label }}</div>
+          <div class="summary-value" :class="`is-${item.type}`">{{ item.value }}</div>
+        </div>
+      </div>
+
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <el-input
+            v-model="query.keyword"
+            placeholder="搜索设备名称 / 编号 / 机器码 / 激活码"
+            clearable
+            class="w-300"
+          />
+          <el-select v-model="query.status" placeholder="设备状态" clearable class="w-140">
+            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-select v-model="query.os" placeholder="系统平台" clearable class="w-140">
+            <el-option v-for="item in osOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-button @click="resetQuery">重置</el-button>
+        </div>
+        <div class="toolbar-right">
+          <el-button :loading="loading" @click="fetchList">刷新</el-button>
+        </div>
+      </div>
+
+      <div class="table-scroll">
+        <el-table
+          v-loading="loading"
+          class="equipment-table"
+          :data="tableData"
+          border
+          stripe
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="52" />
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column label="设备信息" min-width="220">
+            <template #default="{ row }">
+              <div class="device-name">{{ row.name || '-' }}</div>
+              <div class="device-no">编号：{{ row.deviceNo || '-' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="machineCode" label="机器码" min-width="220" show-overflow-tooltip />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusTagType(row.status)">
+                {{ statusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="os" label="系统" width="100" align="center">
+            <template #default="{ row }">{{ row.os || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="version" label="版本" width="110" align="center">
+            <template #default="{ row }">{{ row.version || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="account" label="绑定激活码" min-width="160" show-overflow-tooltip />
+          <el-table-column prop="owner" label="归属用户" min-width="130" show-overflow-tooltip />
+          <el-table-column label="激活/提取" width="120" align="center">
+            <template #default="{ row }">
+              <div class="count-line">
+                <span>激活 {{ row.activationCount }}</span>
+                <span>提取 {{ row.extractCount }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="lastActivatedAt" label="最后激活" width="180">
+            <template #default="{ row }">{{ row.lastActivatedAt || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="expiredAt" label="过期时间" width="180">
+            <template #default="{ row }">{{ row.expiredAt || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
+          <el-table-column label="操作" width="310" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button link type="primary" @click="openDetail(row)">详情</el-button>
+              <el-button link type="warning" @click="openEdit(row)">编辑</el-button>
+              <el-button v-if="row.status !== 'active'" link type="success" @click="handleActivate(row)">激活</el-button>
+              <el-button link type="info" @click="openActivationRecords(row)">激活记录</el-button>
+              <el-button link type="info" @click="openExtractRecords(row)">提取记录</el-button>
+              <el-button link type="danger" @click="openDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pager">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          background
+          :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+        />
+      </div>
+    </el-card>
+
+    <DetailDialog v-model="detailVisible" :row="currentRow || undefined" />
+
+    <EditDialog
+      v-model="editVisible"
+      :row="currentRow || undefined"
+      :loading="actionLoading"
+      @submit="handleSave"
+    />
+
+    <DeleteDialog
+      v-model="deleteVisible"
+      :row="currentRow || undefined"
+      :loading="actionLoading"
+      @confirm="handleDelete"
+    />
+
+    <ActivationRecords
+      v-model="activationVisible"
+      v-model:page="activationState.page"
+      v-model:page-size="activationState.pageSize"
+      :row="currentRow || undefined"
+      :loading="activationState.loading"
+      :records="activationState.records"
+      :total="activationState.total"
+      @refresh="fetchActivationRecords"
+    />
+
+    <ExtractRecords
+      v-model="extractVisible"
+      v-model:page="extractState.page"
+      v-model:page-size="extractState.pageSize"
+      :row="currentRow || undefined"
+      :loading="extractState.loading"
+      :records="extractState.records"
+      :total="extractState.total"
+      @refresh="fetchExtractRecords"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.cursor-equipment-page {
+  padding: 12px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.summary-card {
+  padding: 14px 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: #fbfcff;
+}
+
+.summary-label {
+  color: #909399;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.summary-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #409eff;
+
+  &.is-success {
+    color: #67c23a;
+  }
+
+  &.is-info {
+    color: #909399;
+  }
+
+  &.is-danger {
+    color: #f56c6c;
+  }
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.toolbar-left,
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.w-300 {
+  width: 300px;
+}
+
+.w-140 {
+  width: 140px;
+}
+
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.equipment-table {
+  min-width: 1280px;
+}
+
+.device-name {
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.6;
+}
+
+.device-no {
+  color: #909399;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.count-line {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: #606266;
+  font-size: 12px;
+}
+
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+@media (max-width: 768px) {
+  .cursor-equipment-page {
+    padding: 8px;
+  }
+
+  .card-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .summary-grid {
+    grid-template-columns: repeat(2, minmax(120px, 1fr));
+  }
+
+  .toolbar-left,
+  .toolbar-right,
+  .w-300,
+  .w-140 {
+    width: 100%;
+  }
+
+  .toolbar-right .el-button {
+    width: 100%;
+  }
+
+  .pager {
+    justify-content: center;
+  }
+}
+</style>

src/views/home/index.vue

@@ -12,7 +12,7 @@
               <div class="value">{{ item.value.toLocaleString() }}</div>
               <div class="trend" :class="item.isUp ? 'up' : 'down'">
                 {{ item.isUp ? '↑' : '↓' }} {{ item.percentage }}%
-                <span>较上月</span>
+                <span>{{ item.trendLabel ?? '较上月' }}</span>
               </div>
             </div>
           </div>
@@ -20,13 +20,21 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="20" class="charts-row">
-      <el-col :xs="24" :sm="24" :md="16">
-        <el-card shadow="hover" header="用户增长趋势">
+    <el-row :gutter="20" class="charts-row charts-row--token-bar">
+      <el-col :xs="24" :sm="24" :md="12">
+        <el-card shadow="hover" header="Token售卖统计">
           <div ref="lineChartRef" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="8">
+      <el-col :xs="24" :sm="24" :md="12">
+        <el-card shadow="hover" header="号池账号统计">
+          <div ref="barChartRef" class="chart-box"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="charts-row">
+      <el-col :span="24">
         <el-card shadow="hover" header="用户等级分布">
           <div ref="pieChartRef" class="chart-box"></div>
         </el-card>
@@ -36,9 +44,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
+import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
 import * as echarts from 'echarts';
-import { User, Pointer, Connection, Histogram } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { User, Pointer, Connection, ShoppingCart } from '@element-plus/icons-vue';
+import { getAccountPoolDailyExtract, getAccountPoolInventoryTotals } from '@/api/home';
 
 // --- 类型定义 ---
 interface SummaryItem {
@@ -48,92 +58,284 @@ interface SummaryItem {
   color: string;
   percentage: number;
   isUp: boolean;
+  /** 趋势说明，默认「较上月」 */
+  trendLabel?: string;
 }
 
 // --- 响应式数据 ---
 const lineChartRef = ref<HTMLElement | null>(null);
 const pieChartRef = ref<HTMLElement | null>(null);
+const barChartRef = ref<HTMLElement | null>(null);
 const lineChartInstance = shallowRef<echarts.ECharts | null>(null);
 const pieChartInstance = shallowRef<echarts.ECharts | null>(null);
+const barChartInstance = shallowRef<echarts.ECharts | null>(null);
 
 const summaryData = ref<SummaryItem[]>([
   { title: '总用户数', value: 12840, icon: User, color: '#3973FF', percentage: 12, isUp: true },
   { title: '今日新增', value: 156, icon: Pointer, color: '#67C23A', percentage: 5, isUp: true },
   { title: '活跃用户', value: 3420, icon: Connection, color: '#E6A23C', percentage: 2, isUp: false },
-  { title: '留存率', value: 85, icon: Histogram, color: '#F56C6C', percentage: 1, isUp: true },
+  {
+    title: '今日售卖',
+    value: 0,
+    icon: ShoppingCart,
+    color: '#F56C6C',
+    percentage: 0,
+    isUp: true,
+    trendLabel: '较昨日',
+  },
 ]);
 
-// --- 初始化图表 ---
-const initCharts = () => {
-  // 折线图配置
-  if (lineChartRef.value) {
-    lineChartInstance.value = echarts.init(lineChartRef.value);
-    lineChartInstance.value.setOption({
-      tooltip: { trigger: 'axis' },
-      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-      },
-      yAxis: { type: 'value' },
-      series: [
-        {
-          name: '新增用户',
-          type: 'line',
-          smooth: true,
-          data: [120, 132, 101, 134, 90, 230, 210],
-          areaStyle: { opacity: 0.3 },
-          itemStyle: { color: '#3973FF' }
-        }
-      ]
-    });
+/** 三条产品线当日销量之和，及相对昨日的涨跌比例（用于首页第四张卡片） */
+function todaySalesVsYesterday(cursor: number[], kiro: number[], windsurf: number[]) {
+  const n = Math.min(cursor.length, kiro.length, windsurf.length);
+  if (n < 1) return { today: 0, pct: 0, isUp: true };
+  const iToday = n - 1;
+  const today = cursor[iToday] + kiro[iToday] + windsurf[iToday];
+  if (n < 2) return { today, pct: 0, isUp: true };
+  const iY = n - 2;
+  const yesterday = cursor[iY] + kiro[iY] + windsurf[iY];
+  if (yesterday > 0) {
+    const raw = Math.round(((today - yesterday) / yesterday) * 100);
+    return { today, pct: Math.abs(raw), isUp: today >= yesterday };
   }
+  return { today, pct: today > 0 ? 100 : 0, isUp: true };
+}
 
-  // 饼图配置
-  if (pieChartRef.value) {
-    pieChartInstance.value = echarts.init(pieChartRef.value);
-    pieChartInstance.value.setOption({
-      tooltip: { trigger: 'item' },
-      legend: {
-        orient: 'vertical',
-        right: '5%',
-        top: 'center',
+function buildSalesLineOption(
+  days: string[],
+  cursor: number[],
+  kiro: number[],
+  windsurf: number[],
+) {
+  const showSymbol = days.length <= 31;
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+    },
+    legend: {
+      data: ['Cursor', 'Kiro', 'Windsurf'],
+      top: 4,
+    },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: 52, containLabel: true },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: days,
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+    },
+    series: [
+      {
+        name: 'Cursor',
+        type: 'line',
+        smooth: true,
+        showSymbol,
+        data: cursor,
+        areaStyle: { opacity: 0.08 },
+        lineStyle: { width: 2 },
+        itemStyle: { color: '#3973FF' },
       },
-      series: [
-        {
-          name: '等级分布',
-          type: 'pie',
-          radius: ['40%', '70%'],
-          center: ['35%', '50%'],
-          avoidLabelOverlap: false,
-          itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
-          label: { show: false },
-          data: [
-            { value: 1048, name: '普通用户' },
-            { value: 735, name: 'VIP会员' },
-            { value: 580, name: '超级管理员' },
-            { value: 484, name: '运营人员' }
-          ]
-        }
-      ]
-    });
+      {
+        name: 'Kiro',
+        type: 'line',
+        smooth: true,
+        showSymbol,
+        data: kiro,
+        areaStyle: { opacity: 0.08 },
+        lineStyle: { width: 2 },
+        itemStyle: { color: '#67C23A' },
+      },
+      {
+        name: 'Windsurf',
+        type: 'line',
+        smooth: true,
+        showSymbol,
+        data: windsurf,
+        areaStyle: { opacity: 0.08 },
+        lineStyle: { width: 2 },
+        itemStyle: { color: '#E6A23C' },
+      },
+    ],
+  };
+}
+
+function buildInventoryBarOption(labels: string[], totalData: number[], soldData: number[]) {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+    },
+    legend: {
+      data: ['账号总数', '已售卖'],
+      top: 8,
+    },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: 48, containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisTick: { alignWithLabel: true },
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+    },
+    series: [
+      {
+        name: '账号总数',
+        type: 'bar',
+        data: totalData,
+        barMaxWidth: 56,
+        itemStyle: { color: '#409EFF', borderRadius: [4, 4, 0, 0] },
+      },
+      {
+        name: '已售卖',
+        type: 'bar',
+        data: soldData,
+        barMaxWidth: 56,
+        itemStyle: { color: '#67C23A', borderRadius: [4, 4, 0, 0] },
+      },
+    ],
+  };
+}
+
+async function loadAccountPoolInventoryTotals() {
+  await nextTick();
+  if (!barChartRef.value) return;
+  if (!barChartInstance.value) {
+    barChartInstance.value = echarts.init(barChartRef.value);
   }
+  try {
+    const res = await getAccountPoolInventoryTotals();
+    if (res?.code !== 200) {
+      ElMessage.error((res as { msg?: string })?.msg || '加载号池统计失败');
+      return;
+    }
+    const data = (res as { data?: { modules?: Array<{ label: string; total: number; sold: number }> } }).data;
+    const mods = Array.isArray(data?.modules) ? data!.modules : [];
+    const labels = mods.map((m) => m.label || '');
+    const totalData = mods.map((m) => Number(m.total) || 0);
+    const soldData = mods.map((m) => Number(m.sold) || 0);
+    barChartInstance.value.setOption(
+      buildInventoryBarOption(labels.length ? labels : ['Cursor', 'Kiro', 'Windsurf'], totalData, soldData),
+      { notMerge: true },
+    );
+  } catch {
+    ElMessage.error('加载号池统计失败');
+  }
+}
+
+async function loadAccountPoolDailyExtract() {
+  await nextTick();
+  if (!lineChartRef.value) return;
+  if (!lineChartInstance.value) {
+    lineChartInstance.value = echarts.init(lineChartRef.value);
+  }
+  try {
+    const res = await getAccountPoolDailyExtract({ days: 14 });
+    if (res?.code !== 200) {
+      ElMessage.error((res as { msg?: string })?.msg || '加载售卖数据失败');
+      return;
+    }
+    const d = (res as { data?: Record<string, unknown> }).data || {};
+    const days = Array.isArray(d.days) ? (d.days as string[]) : [];
+    const cursor = Array.isArray(d.cursor) ? (d.cursor as number[]) : [];
+    const kiro = Array.isArray(d.kiro) ? (d.kiro as number[]) : [];
+    const windsurf = Array.isArray(d.windsurf) ? (d.windsurf as number[]) : [];
+    lineChartInstance.value.setOption(buildSalesLineOption(days, cursor, kiro, windsurf), {
+      notMerge: true,
+    });
+
+    const sale = todaySalesVsYesterday(cursor, kiro, windsurf);
+    const row = summaryData.value[3];
+    if (row) {
+      summaryData.value[3] = {
+        ...row,
+        value: sale.today,
+        percentage: sale.pct,
+        isUp: sale.isUp,
+      };
+    }
+  } catch {
+    ElMessage.error('加载售卖数据失败');
+  }
+}
+
+const initPieChart = () => {
+  if (!pieChartRef.value) return;
+  pieChartInstance.value = echarts.init(pieChartRef.value);
+  pieChartInstance.value.setOption({
+    tooltip: { trigger: 'item' },
+    legend: {
+      orient: 'vertical',
+      right: '5%',
+      top: 'center',
+    },
+    series: [
+      {
+        name: '等级分布',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['35%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
+        label: { show: false },
+        data: [
+          { value: 1048, name: '普通用户' },
+          { value: 735, name: 'VIP会员' },
+          { value: 580, name: '超级管理员' },
+          { value: 484, name: '运营人员' },
+        ],
+      },
+    ],
+  });
+};
+
+const initLineChartShell = () => {
+  if (!lineChartRef.value) return;
+  lineChartInstance.value = echarts.init(lineChartRef.value);
+  lineChartInstance.value.setOption(
+    buildSalesLineOption([], [], [], []),
+    { notMerge: true },
+  );
+};
+
+const initBarChartShell = () => {
+  if (!barChartRef.value) return;
+  barChartInstance.value = echarts.init(barChartRef.value);
+  barChartInstance.value.setOption(
+    buildInventoryBarOption(['Cursor', 'Kiro', 'Windsurf'], [0, 0, 0], [0, 0, 0]),
+    { notMerge: true },
+  );
 };
 
 // --- 生命周期与自适应 ---
 const handleResize = () => {
   lineChartInstance.value?.resize();
   pieChartInstance.value?.resize();
+  barChartInstance.value?.resize();
 };
 
-onMounted(() => {
-  initCharts();
+onMounted(async () => {
+  await nextTick();
+  initLineChartShell();
+  initBarChartShell();
+  initPieChart();
+  void loadAccountPoolDailyExtract();
+  void loadAccountPoolInventoryTotals();
   window.addEventListener('resize', handleResize);
 });
 
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize);
+  lineChartInstance.value?.dispose();
+  lineChartInstance.value = null;
+  pieChartInstance.value?.dispose();
+  pieChartInstance.value = null;
+  barChartInstance.value?.dispose();
+  barChartInstance.value = null;
 });
 </script>
 
@@ -199,6 +401,9 @@ onUnmounted(() => {
       height: 350px;
       width: 100%;
     }
+    &--token-bar .chart-box {
+      height: 340px;
+    }
   }
 }
 

vite.config.js

@@ -27,6 +27,7 @@ export default defineConfig({
     },
   },
   server: {
+    host: "127.0.0.1",
     port: 5000,
     // 开发时前端在 5000，接口走相对路径 /platform/*、/backend/*，转发到本地 Go（当前 httpport=8081）
     proxy: {