设备管理优化

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

@@ -0,0 +1,101 @@
+import request from '@/utils/request';
+
+function base(module) {
+  return `/platform/accountPool/${module}`;
+}
+
+export function getAccountPoolList(module, params) {
+  return request({
+    url: `${base(module)}/list`,
+    method: 'get',
+    params,
+  });
+}
+
+export function addAccountPool(module, data) {
+  return request({
+    url: `${base(module)}/add`,
+    method: 'post',
+    data,
+  });
+}
+
+export function batchAddAccountPool(module, rows) {
+  return request({
+    url: `${base(module)}/batchAdd`,
+    method: 'post',
+    data: { rows },
+  });
+}
+
+export function getAccountPoolDetail(module, id) {
+  return request({
+    url: `${base(module)}/detail/${id}`,
+    method: 'get',
+  });
+}
+
+export function extractAccountPool(module, data) {
+  return request({
+    url: `${base(module)}/extract`,
+    method: 'post',
+    data,
+  });
+}
+
+export function updateAccountPoolRemark(module, data) {
+  return request({
+    url: `${base(module)}/updateRemark`,
+    method: 'post',
+    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`,
+    method: 'post',
+    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

@@ -1,5 +1,5 @@
 <template>
-  <el-aside :width="width" class="common-aside">
+  <el-aside :width="width" :class="['common-aside', { 'mobile-open': isMobile && !isCollapse }]">
     <!-- 加载状态 -->
     <div v-if="loading" class="loading-spinner">
       <i class="el-icon-loading" style="font-size: 24px; color: #fff"></i>
@@ -14,7 +14,6 @@
 
     <!-- 菜单主体 -->
     <el-menu
-      v-else
       :collapse="isCollapse"
       :collapse-transition="false"
       :background-color="asideBgColor"
@@ -23,11 +22,15 @@
       :active-background-color="activeBgColor"
       class="el-menu-vertical-demo"
       :unique-opened="true"
+      :default-openeds="defaultOpeneds"
       @select="handleMenuSelect"
       :default-active="route.path"
     >
       <!-- 菜单标题 -->
-      <h3>{{ isCollapse ? "管理" : asideTitle }}</h3>
+      <h3>
+        {{ isCollapse ? "管理" : asideTitle }}
+        <span class="mobile-close-btn" @click="closeMobile">✕</span>
+      </h3>
 
       <!-- 无模块时显示提示（在首页 /home 时不显示，避免重复） -->
       <el-menu-item v-if="!currentModule && route.path !== '/home'" index="/home">
@@ -143,17 +146,31 @@
         </el-sub-menu>
       </template>
     </el-menu>
+
+    <div v-if="!loading && !hasError && !isCollapse" class="aside-toggle-bottom">
+      <el-button class="aside-toggle-btn" size="small" @click="handleCollapse">
+        <el-icon><Fold /></el-icon>
+      </el-button>
+    </div>
   </el-aside>
+
+  <teleport to="body">
+    <div v-if="mobileOpen" class="aside-mobile-overlay" @click="closeMobile" />
+  </teleport>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { Document, Warning } from "@element-plus/icons-vue";
+import { Document, Warning, Fold } from "@element-plus/icons-vue";
 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();
@@ -170,8 +187,30 @@ 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;
+  // 手机端默认收起侧边栏
+  if (isMobile.value) {
+    store.state.isCollapse = true;
+  }
+};
+
 const findMenuItem = (menus, targetIndex) => {
   for (const menu of menus) {
     if (menu.path === targetIndex) {
@@ -245,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 "菜单";
@@ -272,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,
@@ -315,6 +373,8 @@ const list = computed(() => {
 });
 
 const handleMenuSelect = (index) => {
+  // 移动端点击菜单后关闭侧边栏
+  closeMobile();
   if (index === "/home") {
     emit("menu-click", {
       path: "/home",
@@ -328,6 +388,9 @@ const handleMenuSelect = (index) => {
   const menuItem = findMenuItem(list.value, index);
   if (menuItem) {
     emit("menu-click", menuItem);
+    if (isMobile.value) {
+      store.state.isCollapse = true;
+    }
   }
 };
 
@@ -337,6 +400,10 @@ const fetchMenus = async () => {
   } catch (error) {}
 };
 
+const handleCollapse = () => {
+  toggleMobile();
+};
+
 const handleMenuRefresh = () => {
   fetchMenus();
 };
@@ -350,6 +417,9 @@ watch(
 );
 
 onMounted(() => {
+  updateDeviceType();
+  window.addEventListener("resize", updateDeviceType);
+
   if (!menuStore.menus || menuStore.menus.length === 0) {
     setTimeout(() => {
       fetchMenus();
@@ -360,6 +430,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
+  window.removeEventListener("resize", updateDeviceType);
   window.removeEventListener("menu-cache-refreshed", handleMenuRefresh);
 });
 </script>
@@ -386,6 +457,10 @@ onUnmounted(() => {
   }
 }
 
+.common-aside.mobile-open {
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35), 2px 0 12px rgba(0, 0, 0, 0.18);
+}
+
 .loading-spinner {
   display: flex;
   align-items: center;
@@ -417,12 +492,44 @@ h3 {
   margin: 0;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .mobile-close-btn {
+    display: none;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.15);
+    transition: background 0.2s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+      color: #fff;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .mobile-close-btn {
+      display: block;
+    }
+  }
 }
 
 // 菜单样式
 :deep(.el-menu) {
   border-right: none;
-  height: calc(100% - 80px);
+  height: calc(100% - 128px);
   padding: 16px 8px;
   background: transparent;
 
@@ -453,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 {
@@ -486,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;
+      }
     }
   }
 
@@ -516,17 +628,80 @@ 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;
     }
   }
+}
+
+.aside-toggle-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  padding: 12px 8px 14px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
+}
+
+.aside-toggle-btn {
+  width: 100%;
+  max-width: 180px;
+  background-color: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.3);
+  color: #fff;
+}
+
+.aside-toggle-btn:hover {
+  background-color: rgba(255, 255, 255, 0.28);
+  border-color: rgba(255, 255, 255, 0.45);
+  color: #fff;
+}
 
 // 响应式设计
 @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) {
     padding: 12px 4px;
   }
+
+  .aside-toggle-bottom {
+    padding: 10px 8px 12px;
+  }
+}
+</style>
+
+<style>
+.aside-mobile-overlay {
+  display: none;
+}
+@media (max-width: 768px) {
+  .aside-mobile-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 999;
+  }
 }
 </style>

src/components/CommonHeader.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="header">
     <div class="l-content">
-      <el-button size="small" @click="handleCollapse">
+      <el-button v-if="showTopToggle" size="small" @click="handleCollapse">
-        <i class="fa fa-bars"></i>
+        <el-icon><Expand /></el-icon>
       </el-button>
     </div>
     <div class="r-content">
@@ -72,10 +72,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
+
+const emit = defineEmits(['collapse']);
 import { useAllDataStore, useMenuStore, useTabsStore } from "@/stores";
 import { useAuthStore } from "@/stores/auth";
 import { logout, getCurrentUser } from "@/api/login";
-import { User, SwitchButton, Sunny, Moon, Refresh, Bell, HomeFilled } from '@element-plus/icons-vue';
+import { User, SwitchButton, Sunny, Moon, Refresh, Bell, HomeFilled, Expand } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 
 const router = useRouter();
@@ -198,9 +200,15 @@ const roleLabel = computed(() => {
 });
 
 const handleCollapse = () => {
+  if (window.innerWidth <= 768) {
+    emit('collapse');
+  } else {
     store.state.isCollapse = !store.state.isCollapse;
+  }
 };
 
+const showTopToggle = computed(() => store.state.isCollapse);
+
 const goHome = () => {
   tabsStore.closeAll();
   router.push('/home');
@@ -457,6 +465,46 @@ onUnmounted(() => {
   }
 }
 
+@media (max-width: 768px) {
+  .header {
+    padding: 0 10px;
+    gap: 8px;
+  }
+
+  .l-content .el-button {
+    margin-right: 6px;
+  }
+
+  .r-content {
+    gap: 6px;
+
+    .refresh-cache-btn,
+    .home-btn,
+    .theme-toggle-btn,
+    .message-btn {
+      width: 30px;
+      height: 30px;
+      min-height: 30px;
+      min-width: 30px;
+      padding: 0;
+    }
+
+    .el-dropdown-link {
+      gap: 6px;
+
+      .user {
+        width: 30px;
+        height: 30px;
+      }
+
+      .user-name,
+      .user-role-tag {
+        display: none;
+      }
+    }
+  }
+}
+
 // 下拉菜单样式 - 使用全局样式覆盖
 :deep(.el-dropdown) {
   .el-dropdown__popper {

src/views/Main.vue

@@ -10,6 +10,7 @@ import { ElMessage } from 'element-plus';
 const tabsStore = useTabsStore();
 const router = useRouter();
 const route = useRoute();
+const asideRef = ref(null);
 const defaultDashboardPath = '/home';
 
 // 根据当前路由恢复 tab（刷新时使用）
@@ -379,10 +380,12 @@ const canCloseRight = computed(() => {
 <template>
   <div class="common-layout">
     <el-container class="main-container">
-      <common-aside @menu-click="handleAsideMenuClick" />
+      <div class="aside-wrapper">
+        <common-aside ref="asideRef" @menu-click="handleAsideMenuClick" />
+      </div>
       <el-container>
         <el-header class="main-header">
-          <common-header />
+        <common-header @collapse="() => asideRef?.toggleMobile()" />
         </el-header>
         <el-main class="right-main">
           <div class="multi-tabs-wrapper">
@@ -496,6 +499,22 @@ const canCloseRight = computed(() => {
     visibility: visible !important;
     height: 100vh;
   }
+
+  .aside-wrapper {
+    flex-shrink: 0;
+    position: relative;
+    transition: width 0.3s;
+  }
+
+  @media (max-width: 768px) {
+    .aside-wrapper {
+      width: 0 !important;
+      overflow: visible;
+    }
+    .right-main {
+      padding: 12px 8px !important;
+    }
+  }
   .main-header {
     background-color: var(--header-bg-color, #3973ff);
     transition: background-color 0.3s ease;
@@ -658,6 +677,34 @@ const canCloseRight = computed(() => {
     transform: translateY(0);
   }
 }
+
+@media (max-width: 768px) {
+  .common-layout,
+  .main-container {
+    .main-header {
+      height: 64px;
+    }
+
+    .right-main {
+      padding: 8px;
+
+      .multi-tabs-wrapper {
+        margin-bottom: 10px;
+        padding: 6px 8px;
+        gap: 8px;
+      }
+
+      .tabs-extra-actions {
+        display: none;
+      }
+    }
+  }
+
+  .backtop-button {
+    width: 34px;
+    height: 34px;
+  }
+}
 </style>
 
 <style lang="less">

src/views/accountpool/components/patch.vue

@@ -0,0 +1,204 @@
+<script setup>
+import { reactive, ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { extractAccountPool } from '@/api/accountPool';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  /** cursor / windsurf / krio */
+  module: {
+    type: String,
+    required: true,
+  },
+  platformMap: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 打开弹窗时的默认账号类型（与列表 Tab 对齐：全部时用 account） */
+  defaultAccountType: {
+    type: String,
+    default: 'account',
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'success']);
+
+const confirmLoading = ref(false);
+const copiedText = ref('');
+const form = reactive({
+  platform: 'local',
+  type: 'account',
+  remark: '',
+});
+
+function normalizeRow(raw) {
+  const pick = (...keys) => {
+    for (const key of keys) {
+      if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
+    }
+    return '';
+  };
+  const pickNullable = (...keys) => {
+    for (const key of keys) {
+      if (raw?.[key] !== undefined) return raw[key] ?? null;
+    }
+    return null;
+  };
+  const formatTime = (val) => {
+    if (!val) return '';
+    const d = new Date(val);
+    if (isNaN(d)) return val;
+    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'),
+    account: pick('account', 'Account'),
+    password: pick('password', 'Password'),
+    token: pick('token', 'Token'),
+    remark: pick('remark', 'Remark'),
+    extractStatus,
+    extracted: extractStatus !== 0,
+    extractedAt: formatTime(pickNullable('extracted_time', 'extractedAt')),
+    extractedPlatform: pickNullable('extracted_platform', 'extractedPlatform'),
+    createdAt: formatTime(pick('create_time', 'createdAt')),
+  };
+}
+
+function buildCopyTextByRow(row) {
+  const parts = [];
+  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');
+}
+
+async function copyToClipboard(text) {
+  if (!text) {
+    ElMessage.warning('无可复制内容');
+    return false;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('已复制');
+    return true;
+  } catch (e) {
+    ElMessage.error('复制失败，请检查浏览器权限');
+    return false;
+  }
+}
+
+function resetWhenOpen() {
+  form.platform = 'local';
+  form.type = props.defaultAccountType || 'account';
+  form.remark = '';
+  copiedText.value = '';
+}
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (visible) resetWhenOpen();
+  }
+);
+
+function close() {
+  emit('update:modelValue', false);
+}
+
+async function handleConfirm() {
+  confirmLoading.value = true;
+  try {
+    const res = await extractAccountPool(props.module, {
+      id: 0,
+      type: form.type,
+      platform: form.platform,
+      remark: form.remark || '',
+    });
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '补卡失败');
+      return;
+    }
+    const extractedRow = normalizeRow(res?.data || {});
+    const text = buildCopyTextByRow(extractedRow);
+    copiedText.value = text;
+    const copied = await copyToClipboard(text);
+    emit('success');
+    if (copied) close();
+  } finally {
+    confirmLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="补卡"
+    width="520px"
+    :close-on-click-modal="false"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <el-form label-width="92px">
+      <el-form-item label="账号类型">
+        <el-select v-model="form.type" placeholder="请选择账号类型" class="field-full">
+          <el-option label="账号密码" value="account" />
+          <el-option label="账号密码+Token" value="account_tk" />
+          <el-option label="Token" value="tk" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="提取平台">
+        <el-select v-model="form.platform" placeholder="请选择平台" class="field-full">
+          <el-option
+            v-for="(meta, key) in platformMap"
+            :key="key"
+            :label="meta.label"
+            :value="key"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          v-model="form.remark"
+          class="field-full"
+          type="textarea"
+          :rows="3"
+          placeholder="可选"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item v-if="copiedText" label="复制内容">
+        <el-input v-model="copiedText" type="textarea" :rows="4" readonly />
+        <div class="patch-copy-actions">
+          <el-button @click="copyToClipboard(copiedText)">复制</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button type="primary" :loading="confirmLoading" @click="handleConfirm">
+        确定并复制
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.field-full {
+  width: 100%;
+}
+
+.patch-copy-actions {
+  margin-top: 8px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

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

@@ -0,0 +1,653 @@
+<script setup>
+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,
+  },
+});
+
+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 });
+
+const TYPE_MAP = {
+  account: { label: "账号密码", type: "success" },
+  account_tk: { label: "账号密码+Token", type: "primary" },
+  tk: { label: "Token", type: "warning" },
+};
+
+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 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 || "";
+    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 },
+);
+
+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 || "" });
+  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 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() {
+  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>
+
+<template>
+  <el-dialog
+    class="pool-detail-dialog"
+    :model-value="modelValue"
+    width="760px"
+    destroy-on-close
+    :show-close="false"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <template #header>
+      <div class="detail-header">
+        <div>
+          <div class="detail-title">账号详情</div>
+          <div class="detail-subtitle">
+            通过弹窗执行账号状态、平台、备注等维护操作
+          </div>
+        </div>
+        <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>
+        <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>
+:deep(.pool-detail-dialog) {
+  max-width: calc(100vw - 28px);
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+: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: 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 {
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.copy-actions .el-button {
+  margin: 0;
+}
+
+.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) {
+  :deep(.pool-detail-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin: 0 auto;
+  }
+
+  :deep(.pool-detail-dialog .el-dialog__header) {
+    padding: 14px 14px;
+  }
+
+  :deep(.pool-detail-dialog .el-dialog__body) {
+    padding: 12px;
+    max-height: 76vh;
+    overflow-y: auto;
+  }
+
+  .detail-header,
+  .section-head {
+    align-items: flex-start;
+  }
+
+  .section-head {
+    flex-direction: column;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .copy-actions .el-button,
+  .section-head .el-button {
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,267 @@
+<script setup>
+import { computed, reactive, watch } from "vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  mode: {
+    type: String,
+    default: "single", // single | batch
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "submit"]);
+
+const form = reactive({
+  type: "tk", // account | tk | account_tk
+  account: "",
+  password: "",
+  token: "",
+  batchText: "",
+  remark: "",
+});
+
+const isBatch = computed(() => props.mode === "batch");
+
+const dialogTitle = computed(() => {
+  return isBatch.value ? "批量添加账号" : "添加账号";
+});
+
+const formatExample = computed(() => {
+  if (form.type === "account") {
+    return "account,password";
+  }
+  if (form.type === "account_tk") {
+    return "account,password,token";
+  }
+  return "token";
+});
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (!visible) return;
+    resetForm();
+  },
+);
+
+function closeDialog() {
+  emit("update:modelValue", false);
+}
+
+function resetForm() {
+  form.type = "tk";
+  form.account = "";
+  form.password = "";
+  form.token = "";
+  form.batchText = "";
+  form.remark = "";
+}
+
+function parseBatchRows() {
+  const rows = form.batchText
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  const parsed = [];
+  const errors = [];
+
+  rows.forEach((line, index) => {
+    if (form.type === "account") {
+      const [account, password] = line.split(",").map((x) => (x || "").trim());
+      if (!account || !password) {
+        errors.push(`第 ${index + 1} 行格式错误，应为 account,password`);
+        return;
+      }
+      parsed.push({
+        type: "account",
+        account,
+        password,
+        token: "",
+        remark: form.remark,
+      });
+      return;
+    }
+
+    if (form.type === "account_tk") {
+      const [account, password, token] = line
+        .split(",")
+        .map((x) => (x || "").trim());
+      if (!account || !token) {
+        errors.push(`第 ${index + 1} 行格式错误，应为 account,password,token（password 可为空）`);
+        return;
+      }
+      parsed.push({
+        type: "account_tk",
+        account,
+        password,
+        token,
+        remark: form.remark,
+      });
+      return;
+    }
+
+    parsed.push({
+      type: "tk",
+      account: "",
+      password: "",
+      token: line,
+      remark: form.remark,
+    });
+  });
+
+  return { parsed, errors };
+}
+
+function handleSubmit() {
+  if (!isBatch.value) {
+    if (form.type === "account") {
+      if (!form.account || !form.password) {
+        return;
+      }
+      emit("submit", {
+        mode: "single",
+        rows: [
+          {
+            type: "account",
+            account: form.account.trim(),
+            password: form.password.trim(),
+            token: "",
+            remark: form.remark.trim(),
+          },
+        ],
+      });
+      closeDialog();
+      return;
+    }
+
+    if (form.type === "account_tk") {
+      if (!form.account || !form.token) {
+        ElMessage.warning("请输入账号和 Token，密码可为空");
+        return;
+      }
+      emit("submit", {
+        mode: "single",
+        rows: [
+          {
+            type: "account_tk",
+            account: form.account.trim(),
+            password: form.password.trim(),
+            token: form.token.trim(),
+            remark: form.remark.trim(),
+          },
+        ],
+      });
+      closeDialog();
+      return;
+    }
+
+    if (!form.token) return;
+    emit("submit", {
+      mode: "single",
+      rows: [
+        {
+          type: "tk",
+          account: "",
+          password: "",
+          token: form.token.trim(),
+          remark: form.remark.trim(),
+        },
+      ],
+    });
+    closeDialog();
+    return;
+  }
+
+  const { parsed, errors } = parseBatchRows();
+  if (errors.length || parsed.length === 0) {
+    ElMessage.warning(errors[0] || "请填写批量内容");
+    return;
+  }
+  emit("submit", {
+    mode: "batch",
+    rows: parsed,
+  });
+  closeDialog();
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="dialogTitle"
+    width="640px"
+    @close="closeDialog"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="96px">
+      <el-form-item label="账号类型">
+        <el-radio-group v-model="form.type">
+          <el-radio value="tk">Token</el-radio>
+          <el-radio value="account">账号密码</el-radio>
+          <el-radio value="account_tk">账号密码+Token</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <template v-if="!isBatch">
+        <template v-if="form.type === 'account' || form.type === 'account_tk'">
+          <el-form-item label="账号">
+            <el-input
+              v-model="form.account"
+              placeholder="请输入账号"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input
+              v-model="form.password"
+              placeholder="请输入密码"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item v-if="form.type === 'account_tk'" label="Token">
+            <el-input
+              v-model="form.token"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入 token"
+              clearable
+            />
+          </el-form-item>
+        </template>
+        <el-form-item v-else label="Token">
+          <el-input
+            v-model="form.token"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入 token"
+            clearable
+          />
+        </el-form-item>
+      </template>
+
+      <el-form-item v-else label="批量内容">
+        <el-input
+          v-model="form.batchText"
+          type="textarea"
+          :rows="12"
+          :placeholder="`每行一条，格式：${formatExample}`"
+          clearable
+        />
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" placeholder="可选备注" clearable />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确认</el-button>
+    </template>
+  </el-dialog>
+</template>

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

@@ -0,0 +1,131 @@
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  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',
+  'update:replenish',
+  'confirm',
+]);
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+</script>
+
+<template>
+  <el-dialog
+    class="pool-extract-dialog"
+    :model-value="modelValue"
+    title="提取账号"
+    width="90%"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <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"
+          style="width: 100%"
+          @update:model-value="(v) => emit('update:platform', v)"
+        >
+          <el-option
+            v-for="(v, k) in platformMap"
+            :key="k"
+            :value="k"
+            :label="v.label"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="emit('confirm')">
+        确认提取
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+:deep(.pool-extract-dialog) {
+  max-width: 420px;
+}
+
+@media (max-width: 768px) {
+  :deep(.pool-extract-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin: 0 auto;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__body) {
+    padding: 12px;
+  }
+
+  :deep(.pool-extract-dialog .el-form-item__label) {
+    width: 74px !important;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__footer .el-button) {
+    width: calc(50% - 6px);
+    margin: 0;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__footer) {
+    display: flex;
+    gap: 12px;
+    padding: 8px 12px 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  type: { type: String, default: 'tk' },
+  platform: { type: String, default: 'local' },
+  remark: { type: String, default: '' },
+  platformMap: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:type', 'update:platform', 'update:remark', 'confirm']);
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="补号"
+    width="420px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <el-form-item label="账号类型">
+        <el-select :model-value="type" style="width: 100%" @update:model-value="(v) => emit('update:type', v)">
+          <el-option label="Token" value="tk" />
+          <el-option label="账号密码" value="account" />
+          <el-option label="账号密码+Token" value="account_tk" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="提取平台">
+        <el-select :model-value="platform" style="width: 100%" @update:model-value="(v) => emit('update:platform', v)">
+          <el-option v-for="(v, k) in platformMap" :key="k" :value="k" :label="v.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="warning" :loading="loading" @click="emit('confirm')">确认补号</el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/accountpool/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,600 @@
+<script setup>
+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,
+  },
+});
+
+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" });
+
+const TYPE_MAP = {
+  account: { label: "账号密码", type: "success" },
+  account_tk: { label: "账号密码+Token", type: "primary" },
+  tk: { label: "Token", type: "warning" },
+};
+
+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 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 || "";
+    platformForm.platform = row?.extractedPlatform || "local";
+  },
+  { 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 || "" });
+  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 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() {
+  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>
+
+<template>
+  <el-dialog
+    class="pool-detail-dialog"
+    :model-value="modelValue"
+    width="760px"
+    destroy-on-close
+    :show-close="false"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <template #header>
+      <div class="detail-header">
+        <div>
+          <div class="detail-title">账号详情</div>
+          <div class="detail-subtitle">
+            通过弹窗执行账号状态、平台、备注等维护操作
+          </div>
+        </div>
+        <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>
+        <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>
+:deep(.pool-detail-dialog) {
+  max-width: calc(100vw - 28px);
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+: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: 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 {
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.copy-actions .el-button {
+  margin: 0;
+}
+
+.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) {
+  :deep(.pool-detail-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin: 0 auto;
+  }
+
+  :deep(.pool-detail-dialog .el-dialog__header) {
+    padding: 14px 14px;
+  }
+
+  :deep(.pool-detail-dialog .el-dialog__body) {
+    padding: 12px;
+    max-height: 76vh;
+    overflow-y: auto;
+  }
+
+  .detail-header,
+  .section-head {
+    align-items: flex-start;
+  }
+
+  .section-head {
+    flex-direction: column;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .copy-actions .el-button,
+  .section-head .el-button {
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,259 @@
+<script setup>
+import { computed, reactive, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  mode: {
+    type: String,
+    default: 'single', // single | batch
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'submit']);
+
+const form = reactive({
+  type: 'account', // account | tk | account_tk
+  account: '',
+  password: '',
+  token: '',
+  batchText: '',
+  remark: '',
+});
+
+const isBatch = computed(() => props.mode === 'batch');
+
+const dialogTitle = computed(() => {
+  return isBatch.value ? '批量添加账号' : '添加账号';
+});
+
+const formatExample = computed(() => {
+  if (form.type === 'account') {
+    return 'account,password';
+  }
+  if (form.type === 'account_tk') {
+    return 'account,password,token';
+  }
+  return 'token';
+});
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (!visible) return;
+    resetForm();
+  }
+);
+
+function closeDialog() {
+  emit('update:modelValue', false);
+}
+
+function resetForm() {
+  form.type = 'account';
+  form.account = '';
+  form.password = '';
+  form.token = '';
+  form.batchText = '';
+  form.remark = '';
+}
+
+function parseBatchRows() {
+  const rows = form.batchText
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  const parsed = [];
+  const errors = [];
+
+  rows.forEach((line, index) => {
+    if (form.type === 'account') {
+      const [account, password] = line.split(',').map((x) => (x || '').trim());
+      if (!account || !password) {
+        errors.push(`第 ${index + 1} 行格式错误，应为 account,password`);
+        return;
+      }
+      parsed.push({
+        type: 'account',
+        account,
+        password,
+        token: '',
+        remark: form.remark,
+      });
+      return;
+    }
+
+    if (form.type === 'account_tk') {
+      const [account, password, token] = line
+        .split(',')
+        .map((x) => (x || '').trim());
+      if (!account || !token) {
+        errors.push(`第 ${index + 1} 行格式错误，应为 account,password,token（password 可为空）`);
+        return;
+      }
+      parsed.push({
+        type: 'account_tk',
+        account,
+        password,
+        token,
+        remark: form.remark,
+      });
+      return;
+    }
+
+    parsed.push({
+      type: 'tk',
+      account: '',
+      password: '',
+      token: line,
+      remark: form.remark,
+    });
+  });
+
+  return { parsed, errors };
+}
+
+function handleSubmit() {
+  if (!isBatch.value) {
+    if (form.type === 'account') {
+      if (!form.account || !form.password) {
+        return;
+      }
+      emit('submit', {
+        mode: 'single',
+        rows: [
+          {
+            type: 'account',
+            account: form.account.trim(),
+            password: form.password.trim(),
+            token: '',
+            remark: form.remark.trim(),
+          },
+        ],
+      });
+      closeDialog();
+      return;
+    }
+
+    if (form.type === 'account_tk') {
+      if (!form.account || !form.token) {
+        ElMessage.warning('请输入账号和 Token，密码可为空');
+        return;
+      }
+      emit('submit', {
+        mode: 'single',
+        rows: [
+          {
+            type: 'account_tk',
+            account: form.account.trim(),
+            password: form.password.trim(),
+            token: form.token.trim(),
+            remark: form.remark.trim(),
+          },
+        ],
+      });
+      closeDialog();
+      return;
+    }
+
+    if (!form.token) return;
+    emit('submit', {
+      mode: 'single',
+      rows: [
+        {
+          type: 'tk',
+          account: '',
+          password: '',
+          token: form.token.trim(),
+          remark: form.remark.trim(),
+        },
+      ],
+    });
+    closeDialog();
+    return;
+  }
+
+  const { parsed, errors } = parseBatchRows();
+  if (errors.length || parsed.length === 0) {
+    ElMessage.warning(errors[0] || '请填写批量内容');
+    return;
+  }
+  emit('submit', {
+    mode: 'batch',
+    rows: parsed,
+  });
+  closeDialog();
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="dialogTitle"
+    width="640px"
+    @close="closeDialog"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="96px">
+      <el-form-item label="账号类型">
+        <el-radio-group v-model="form.type">
+          <el-radio value="account">账号密码</el-radio>
+          <el-radio value="account_tk">账号密码+Token</el-radio>
+          <el-radio value="tk">Token</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <template v-if="!isBatch">
+        <template v-if="form.type === 'account' || form.type === 'account_tk'">
+          <el-form-item label="账号">
+            <el-input v-model="form.account" placeholder="请输入账号" clearable />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input v-model="form.password" placeholder="请输入密码" clearable />
+          </el-form-item>
+          <el-form-item v-if="form.type === 'account_tk'" label="Token">
+            <el-input
+              v-model="form.token"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入 token"
+              clearable
+            />
+          </el-form-item>
+        </template>
+        <el-form-item v-else label="Token">
+          <el-input
+            v-model="form.token"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入 token"
+            clearable
+          />
+        </el-form-item>
+      </template>
+
+      <el-form-item v-else label="批量内容">
+        <el-input
+          v-model="form.batchText"
+          type="textarea"
+          :rows="12"
+          :placeholder="`每行一条，格式：${formatExample}`"
+          clearable
+        />
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" placeholder="可选备注" clearable />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确认</el-button>
+    </template>
+  </el-dialog>
+</template>

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

@@ -0,0 +1,103 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  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',
+  'update:replenish',
+  'confirm',
+]);
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+</script>
+
+<template>
+  <el-dialog
+    class="pool-extract-dialog"
+    :model-value="modelValue"
+    title="提取账号"
+    width="90%"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <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"
+          style="width: 100%"
+          @update:model-value="(v) => emit('update:platform', v)"
+        >
+          <el-option v-for="(v, k) in platformMap" :key="k" :value="k" :label="v.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="emit('confirm')">确认提取</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+:deep(.pool-extract-dialog) {
+  max-width: 420px;
+}
+
+@media (max-width: 768px) {
+  :deep(.pool-extract-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin: 0 auto;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__body) {
+    padding: 12px;
+  }
+
+  :deep(.pool-extract-dialog .el-form-item__label) {
+    width: 74px !important;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__footer .el-button) {
+    width: calc(50% - 6px);
+    margin: 0;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__footer) {
+    display: flex;
+    gap: 12px;
+    padding: 8px 12px 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  type: { type: String, default: 'tk' },
+  platform: { type: String, default: 'local' },
+  remark: { type: String, default: '' },
+  platformMap: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:type', 'update:platform', 'update:remark', 'confirm']);
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="补号"
+    width="420px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <el-form-item label="账号类型">
+        <el-select :model-value="type" style="width: 100%" @update:model-value="(v) => emit('update:type', v)">
+          <el-option label="Token" value="tk" />
+          <el-option label="账号密码" value="account" />
+          <el-option label="账号密码+Token" value="account_tk" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="提取平台">
+        <el-select :model-value="platform" style="width: 100%" @update:model-value="(v) => emit('update:platform', v)">
+          <el-option v-for="(v, k) in platformMap" :key="k" :value="k" :label="v.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="warning" :loading="loading" @click="emit('confirm')">确认补号</el-button>
+    </template>
+  </el-dialog>
+</template>

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

@@ -0,0 +1,600 @@
+<script setup>
+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,
+  },
+});
+
+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" });
+
+const TYPE_MAP = {
+  account: { label: "账号密码", type: "success" },
+  account_tk: { label: "账号密码+Token", type: "primary" },
+  tk: { label: "Token", type: "warning" },
+};
+
+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 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 || "";
+    platformForm.platform = row?.extractedPlatform || "local";
+  },
+  { 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 || "" });
+  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 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() {
+  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>
+
+<template>
+  <el-dialog
+    class="pool-detail-dialog"
+    :model-value="modelValue"
+    width="760px"
+    destroy-on-close
+    :show-close="false"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <template #header>
+      <div class="detail-header">
+        <div>
+          <div class="detail-title">账号详情</div>
+          <div class="detail-subtitle">
+            通过弹窗执行账号状态、平台、备注等维护操作
+          </div>
+        </div>
+        <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>
+        <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>
+:deep(.pool-detail-dialog) {
+  max-width: calc(100vw - 28px);
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+: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: 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 {
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.copy-actions .el-button {
+  margin: 0;
+}
+
+.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) {
+  :deep(.pool-detail-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin: 0 auto;
+  }
+
+  :deep(.pool-detail-dialog .el-dialog__header) {
+    padding: 14px 14px;
+  }
+
+  :deep(.pool-detail-dialog .el-dialog__body) {
+    padding: 12px;
+    max-height: 76vh;
+    overflow-y: auto;
+  }
+
+  .detail-header,
+  .section-head {
+    align-items: flex-start;
+  }
+
+  .section-head {
+    flex-direction: column;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .copy-actions .el-button,
+  .section-head .el-button {
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,259 @@
+<script setup>
+import { computed, reactive, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  mode: {
+    type: String,
+    default: 'single', // single | batch
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'submit']);
+
+const form = reactive({
+  type: 'account', // account | tk | account_tk
+  account: '',
+  password: '',
+  token: '',
+  batchText: '',
+  remark: '',
+});
+
+const isBatch = computed(() => props.mode === 'batch');
+
+const dialogTitle = computed(() => {
+  return isBatch.value ? '批量添加账号' : '添加账号';
+});
+
+const formatExample = computed(() => {
+  if (form.type === 'account') {
+    return 'account,password';
+  }
+  if (form.type === 'account_tk') {
+    return 'account,password,token';
+  }
+  return 'token';
+});
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (!visible) return;
+    resetForm();
+  }
+);
+
+function closeDialog() {
+  emit('update:modelValue', false);
+}
+
+function resetForm() {
+  form.type = 'account';
+  form.account = '';
+  form.password = '';
+  form.token = '';
+  form.batchText = '';
+  form.remark = '';
+}
+
+function parseBatchRows() {
+  const rows = form.batchText
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  const parsed = [];
+  const errors = [];
+
+  rows.forEach((line, index) => {
+    if (form.type === 'account') {
+      const [account, password] = line.split(',').map((x) => (x || '').trim());
+      if (!account || !password) {
+        errors.push(`第 ${index + 1} 行格式错误，应为 account,password`);
+        return;
+      }
+      parsed.push({
+        type: 'account',
+        account,
+        password,
+        token: '',
+        remark: form.remark,
+      });
+      return;
+    }
+
+    if (form.type === 'account_tk') {
+      const [account, password, token] = line
+        .split(',')
+        .map((x) => (x || '').trim());
+      if (!account || !token) {
+        errors.push(`第 ${index + 1} 行格式错误，应为 account,password,token（password 可为空）`);
+        return;
+      }
+      parsed.push({
+        type: 'account_tk',
+        account,
+        password,
+        token,
+        remark: form.remark,
+      });
+      return;
+    }
+
+    parsed.push({
+      type: 'tk',
+      account: '',
+      password: '',
+      token: line,
+      remark: form.remark,
+    });
+  });
+
+  return { parsed, errors };
+}
+
+function handleSubmit() {
+  if (!isBatch.value) {
+    if (form.type === 'account') {
+      if (!form.account || !form.password) {
+        return;
+      }
+      emit('submit', {
+        mode: 'single',
+        rows: [
+          {
+            type: 'account',
+            account: form.account.trim(),
+            password: form.password.trim(),
+            token: '',
+            remark: form.remark.trim(),
+          },
+        ],
+      });
+      closeDialog();
+      return;
+    }
+
+    if (form.type === 'account_tk') {
+      if (!form.account || !form.token) {
+        ElMessage.warning('请输入账号和 Token，密码可为空');
+        return;
+      }
+      emit('submit', {
+        mode: 'single',
+        rows: [
+          {
+            type: 'account_tk',
+            account: form.account.trim(),
+            password: form.password.trim(),
+            token: form.token.trim(),
+            remark: form.remark.trim(),
+          },
+        ],
+      });
+      closeDialog();
+      return;
+    }
+
+    if (!form.token) return;
+    emit('submit', {
+      mode: 'single',
+      rows: [
+        {
+          type: 'tk',
+          account: '',
+          password: '',
+          token: form.token.trim(),
+          remark: form.remark.trim(),
+        },
+      ],
+    });
+    closeDialog();
+    return;
+  }
+
+  const { parsed, errors } = parseBatchRows();
+  if (errors.length || parsed.length === 0) {
+    ElMessage.warning(errors[0] || '请填写批量内容');
+    return;
+  }
+  emit('submit', {
+    mode: 'batch',
+    rows: parsed,
+  });
+  closeDialog();
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="dialogTitle"
+    width="640px"
+    @close="closeDialog"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="96px">
+      <el-form-item label="账号类型">
+        <el-radio-group v-model="form.type">
+          <el-radio value="account">账号密码</el-radio>
+          <el-radio value="account_tk">账号密码+Token</el-radio>
+          <el-radio value="tk">Token</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <template v-if="!isBatch">
+        <template v-if="form.type === 'account' || form.type === 'account_tk'">
+          <el-form-item label="账号">
+            <el-input v-model="form.account" placeholder="请输入账号" clearable />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input v-model="form.password" placeholder="请输入密码" clearable />
+          </el-form-item>
+          <el-form-item v-if="form.type === 'account_tk'" label="Token">
+            <el-input
+              v-model="form.token"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入 token"
+              clearable
+            />
+          </el-form-item>
+        </template>
+        <el-form-item v-else label="Token">
+          <el-input
+            v-model="form.token"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入 token"
+            clearable
+          />
+        </el-form-item>
+      </template>
+
+      <el-form-item v-else label="批量内容">
+        <el-input
+          v-model="form.batchText"
+          type="textarea"
+          :rows="12"
+          :placeholder="`每行一条，格式：${formatExample}`"
+          clearable
+        />
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" placeholder="可选备注" clearable />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确认</el-button>
+    </template>
+  </el-dialog>
+</template>

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

@@ -0,0 +1,103 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  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',
+  'update:replenish',
+  'confirm',
+]);
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+</script>
+
+<template>
+  <el-dialog
+    class="pool-extract-dialog"
+    :model-value="modelValue"
+    title="提取账号"
+    width="90%"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <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"
+          style="width: 100%"
+          @update:model-value="(v) => emit('update:platform', v)"
+        >
+          <el-option v-for="(v, k) in platformMap" :key="k" :value="k" :label="v.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="emit('confirm')">确认提取</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+:deep(.pool-extract-dialog) {
+  max-width: 420px;
+}
+
+@media (max-width: 768px) {
+  :deep(.pool-extract-dialog) {
+    width: calc(100vw - 24px) !important;
+    margin: 0 auto;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__body) {
+    padding: 12px;
+  }
+
+  :deep(.pool-extract-dialog .el-form-item__label) {
+    width: 74px !important;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__footer .el-button) {
+    width: calc(50% - 6px);
+    margin: 0;
+  }
+
+  :deep(.pool-extract-dialog .el-dialog__footer) {
+    display: flex;
+    gap: 12px;
+    padding: 8px 12px 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  type: { type: String, default: 'tk' },
+  platform: { type: String, default: 'local' },
+  remark: { type: String, default: '' },
+  platformMap: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:type', 'update:platform', 'update:remark', 'confirm']);
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="补号"
+    width="420px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <el-form-item label="账号类型">
+        <el-select :model-value="type" style="width: 100%" @update:model-value="(v) => emit('update:type', v)">
+          <el-option label="Token" value="tk" />
+          <el-option label="账号密码" value="account" />
+          <el-option label="账号密码+Token" value="account_tk" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="提取平台">
+        <el-select :model-value="platform" style="width: 100%" @update:model-value="(v) => emit('update:platform', v)">
+          <el-option v-for="(v, k) in platformMap" :key="k" :value="k" :label="v.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="warning" :loading="loading" @click="emit('confirm')">确认补号</el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/accountpool/windsurf/index.vue

@@ -0,0 +1,834 @@
+<script setup>
+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,
+  extractAccountPool,
+  getAccountPoolDetail,
+  getAccountPoolList,
+  updateAccountPoolRemark,
+  setAccountPoolUnavailable,
+  updateAccountPoolPlatform,
+  unextractAccountPool,
+  replenishAccountPool,
+  probeAccountPoolToken,
+} from '@/api/accountPool';
+
+const moduleKey = "windsurf";
+
+const loading = ref(false);
+const editVisible = ref(false);
+const editMode = ref("single");
+const detailVisible = ref(false);
+const extractVisible = ref(false);
+const extractTargetRow = ref(null);
+const batchExtractVisible = ref(false);
+const batchExtractForm = reactive({ platform: 'local', remark: '' });
+const replenishVisible = ref(false);
+const replenishForm = reactive({ type: 'tk', platform: 'local', remark: '' });
+const apiDocVisible = ref(false);
+const patchVisible = ref(false);
+
+const query = reactive({ keyword: "", status: "", platform: "" });
+const activeTypeTab = ref("all");
+
+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(() => [
+  { label: "全部", value: "all" },
+  { label: "账号密码", value: "account" },
+  { label: "账号密码+Token", value: "account_tk" },
+  { label: "Token", value: "tk" },
+]);
+
+watch(
+  () => [query.keyword, query.status, query.platform, activeTypeTab.value],
+  () => {
+    if (skipWatchFetchDuringUnusedJump.value) return;
+    pagination.page = 1;
+    fetchList();
+  },
+);
+watch(
+  () => [pagination.page, pagination.pageSize],
+  () => {
+    if (skipWatchFetchDuringUnusedJump.value) return;
+    fetchList();
+  },
+);
+
+function openAddDialog(mode = "single") {
+  editMode.value = mode;
+  editVisible.value = true;
+}
+
+async function saveRows(rows) {
+  if (!rows.length) return;
+  if (rows.length === 1) {
+    await addAccountPool(moduleKey, rows[0]);
+    return;
+  }
+  await batchAddAccountPool(moduleKey, rows);
+}
+
+async function handleEditSubmit(payload) {
+  loading.value = true;
+  try {
+    await saveRows(payload.rows || []);
+    ElMessage.success(
+      payload.mode === "batch" ? "批量添加成功" : "账号添加成功",
+    );
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleSelectionChange(rows) {
+  selectedRows.value = rows;
+}
+
+function openDetail(row) {
+  loading.value = true;
+  getAccountPoolDetail(moduleKey, row.id)
+    .then((res) => {
+      if (res?.code !== 200) {
+        ElMessage.error(res?.msg || "获取详情失败");
+        return;
+      }
+      detailRow.value = normalizeRow(res.data || {});
+      detailVisible.value = true;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function openExtractByRow(row) {
+  extractTargetRow.value = row;
+  extractForm.platform = "local";
+  extractForm.type = row.type;
+  extractForm.remark = row.remark || '';
+  extractForm.replenish = false;
+  extractVisible.value = true;
+}
+
+function openPatchDialog() {
+  patchVisible.value = true;
+}
+
+function buildCopyTextByRow(row) {
+  const parts = [];
+  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');
+}
+
+async function copyToClipboard(text) {
+  if (!text) { ElMessage.warning('无可复制内容'); return false; }
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('已复制');
+    return true;
+  } catch (e) {
+    ElMessage.error('复制失败，请检查浏览器权限');
+    return false;
+  }
+}
+
+async function handleExtract() {
+  loading.value = true;
+  try {
+    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 || '',
+      replenish: !!extractForm.replenish,
+    });
+    if (res?.code !== 200) { ElMessage.error(res?.msg || "提取失败"); return; }
+    ElMessage.success("提取成功");
+    extractVisible.value = false;
+    const row = normalizeRow(res.data || {});
+    navigator.clipboard.writeText(rowToText(row)).catch(() => {});
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleSaveRemark(payload) {
+  if (!payload?.id) return;
+  detailRemarkSaving.value = true;
+  try {
+    const res = await updateAccountPoolRemark(moduleKey, payload);
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '备注更新失败'); return; }
+    ElMessage.success('备注已更新');
+    if (detailRow.value?.id === payload.id) {
+      detailRow.value = { ...detailRow.value, remark: payload.remark || '' };
+    }
+    await fetchList();
+  } 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 = '';
+  batchExtractVisible.value = true;
+}
+
+async function handleBatchExtract() {
+  loading.value = true;
+  try {
+    const results = await Promise.all(
+      selectedRows.value.map((row) =>
+        extractAccountPool(moduleKey, {
+          id: row.id, type: row.type,
+          platform: batchExtractForm.platform,
+          remark: batchExtractForm.remark || '',
+        }),
+      ),
+    );
+    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} 条失败`);
+    } else {
+      ElMessage.success("批量提取成功");
+    }
+    batchExtractVisible.value = false;
+    if (succeeded.length) {
+      const text = succeeded.map(rowToText).filter(Boolean).join('\n');
+      navigator.clipboard.writeText(text).catch(() => {});
+    }
+    fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+function rowToText(row) {
+  const parts = [];
+  if (row.account) parts.push(row.account);
+  if (row.password) parts.push(row.password);
+  if (row.token) parts.push(row.token);
+  return parts.join(' / ');
+}
+
+async function handleReplenish() {
+  loading.value = true;
+  try {
+    const res = await replenishAccountPool(moduleKey, {
+      type: replenishForm.type,
+      platform: replenishForm.platform,
+      remark: replenishForm.remark || '',
+    });
+    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(() => {});
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+function typeText(type) {
+  if (type === "account") return "账号密码";
+  if (type === "account_tk") return "账号密码+Token";
+  return "Token";
+}
+
+const tooltipOpts = {
+  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' },
+};
+
+function platformText(platform) {
+  return PLATFORM_MAP[platform]?.label || platform || "-";
+}
+function platformTagType(platform) {
+  return PLATFORM_MAP[platform]?.type || "info";
+}
+
+function normalizeRow(raw) {
+  const pick = (...keys) => {
+    for (const key of keys) {
+      if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
+    }
+    return "";
+  };
+  const pickNullable = (...keys) => {
+    for (const key of keys) {
+      if (raw?.[key] !== undefined) return raw[key] ?? null;
+    }
+    return null;
+  };
+  const formatTime = (val) => {
+    if (!val) return "";
+    const d = new Date(val);
+    if (isNaN(d)) return val;
+    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"),
+    account: pick("account", "Account"),
+    password: pick("password", "Password"),
+    token: pick("token", "Token"),
+    remark: pick("remark", "Remark"),
+    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 {
+    const res = await getAccountPoolList(moduleKey, {
+      page: pagination.page,
+      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) {
+      ElMessage.error(res?.msg || "获取列表失败");
+      return;
+    }
+    const list = Array.isArray(res?.data?.list) ? res.data.list : [];
+    tableData.value = list.map(normalizeRow);
+    total.value = Number(res?.data?.total || 0);
+  } finally {
+    loading.value = false;
+  }
+}
+
+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' },
+];
+
+const platformDocs = [
+  { value: 'xianyu',    label: '闲鱼',   desc: '闲鱼平台发货调用' },
+  { value: 'pinduoduo', label: '拼多多', desc: '拼多多平台发货调用' },
+  { value: 'jingdong',  label: '京东',   desc: '京东平台发货调用' },
+  { value: 'douyin',    label: '抖音',   desc: '抖音平台发货调用' },
+  { value: 'local',     label: '本地',   desc: '本地手动调用' },
+];
+
+const moduleDocs = [
+  { value: "cursor", label: "Cursor", desc: "Cursor 号池" },
+  { value: "windsurf", label: "Windsurf", desc: "Windsurf 号池" },
+  { value: "krio", label: "Krio", desc: "Krio 号池" },
+];
+
+const examples = [
+  {
+    label: "闲鱼 · 提取 Windsurf Token",
+    url: `${BASE_URL}/api/getcard?type=xianyu&module=windsurf&data_type=tk`,
+  },
+  {
+    label: "拼多多 · 提取 Windsurf 账号密码",
+    url: `${BASE_URL}/api/getcard?type=pinduoduo&module=windsurf&data_type=account`,
+  },
+  {
+    label: "京东 · 提取 Cursor 任意类型",
+    url: `${BASE_URL}/api/getcard?type=jingdong&module=cursor`,
+  },
+  {
+    label: "抖音 · 提取 Krio Token",
+    url: `${BASE_URL}/api/getcard?type=douyin&module=krio&data_type=tk`,
+  },
+];
+
+const successResp = `// 纯 Token 类型（data_type=tk）
+eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+
+// 账号密码类型（data_type=account）
+账号：user@example.com / 密码：your_password
+
+// 账号密码+Token 类型（data_type=account_tk）
+账号：user@example.com / 密码：your_password / Token：eyJhbGciOiJIUzI1NiIs...`;
+
+const errorResp = `// 无可用卡密
+{ "code": 404, "msg": "暂无可用卡密" }
+
+// 参数错误
+{ "code": 400, "msg": "缺少参数 type（来源平台）" }`;
+
+function copyText(text) {
+  navigator.clipboard.writeText(text).then(() => { ElMessage.success('已复制'); });
+}
+
+function copyCardInfo(row) {
+  const parts = [];
+  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('已复制'); });
+}
+
+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>
+  <div class="account-pool-page">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header"><span>号池管理（Windsurf）</span></div>
+      </template>
+
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <el-input
+            v-model="query.keyword"
+            placeholder="搜索账号 / token / 备注"
+            clearable
+            class="w-260"
+          />
+          <el-select
+            v-model="query.status"
+            placeholder="提取状态"
+            clearable
+            class="w-140"
+          >
+            <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 type="warning" @click="replenishVisible = true">补号</el-button>
+          <el-button @click="markExtractForSelected">批量提取</el-button>
+          <el-button @click="apiDocVisible = true">接口说明</el-button>
+        </div>
+      </div>
+
+      <el-tabs v-model="activeTypeTab" class="type-tabs">
+        <el-tab-pane
+          v-for="tab in typeTabs"
+          :key="tab.value"
+          :label="tab.label"
+          :name="tab.value"
+        />
+      </el-tabs>
+
+      <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>
+        </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>
+
+      <div class="pager">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          background
+          :layout="isMobile ? 'prev, pager, next' : 'total, prev, pager, next, jumper'"
+          :page-sizes="[30, 50, 100]"
+          :total="total"
+        />
+      </div>
+    </el-card>
+
+    <Edit v-model="editVisible" :mode="editMode" @submit="handleEditSubmit" />
+
+    <DetailDialog
+      v-model="detailVisible"
+      :row="detailRow"
+      :save-loading="detailRemarkSaving"
+      @save-remark="handleSaveRemark"
+      @detail-action="handleDetailAction"
+    />
+
+    <ExtractDialog
+      v-model="extractVisible"
+      :loading="loading"
+      :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"
+      title="提卡接口说明"
+      size="560px"
+      direction="rtl"
+    >
+      <div class="api-doc">
+        <el-alert type="info" :closable="false" style="margin-bottom: 16px">
+          该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
+        </el-alert>
+        <div class="doc-section">
+          <div class="doc-title">接口地址</div>
+          <el-tag type="success" class="method-tag">GET</el-tag>
+          <code class="url-code">https://api.yunzer.cn/api/getcard</code>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">请求参数</div>
+          <el-table :data="paramDocs" border size="small">
+            <el-table-column prop="name" label="参数名" width="120" />
+            <el-table-column
+              prop="required"
+              label="必填"
+              width="60"
+              align="center"
+            >
+              <template #default="{ row }">
+                <el-tag :type="row.required ? 'danger' : 'info'" size="small">{{
+                  row.required ? "是" : "否"
+                }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="desc" label="说明" />
+            <el-table-column prop="values" label="可选值" min-width="160" />
+          </el-table>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">调用示例</div>
+          <div v-for="ex in examples" :key="ex.label" class="example-item">
+            <div class="example-label">{{ ex.label }}</div>
+            <div class="example-url-wrap">
+              <code class="example-url">{{ ex.url }}</code>
+              <el-button
+                link
+                type="primary"
+                size="small"
+                @click="copyText(ex.url)"
+                >复制</el-button
+              >
+            </div>
+          </div>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">成功响应</div>
+          <pre class="code-block">{{ successResp }}</pre>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">失败响应</div>
+          <pre class="code-block">{{ errorResp }}</pre>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">支持的平台（type 参数）</div>
+          <el-table :data="platformDocs" border size="small">
+            <el-table-column prop="value" label="type 值" width="130" />
+            <el-table-column prop="label" label="平台" width="100" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">支持的号池（module 参数）</div>
+          <el-table :data="moduleDocs" border size="small">
+            <el-table-column prop="value" label="module 值" width="130" />
+            <el-table-column prop="label" label="号池" width="100" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</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; }
+
+@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%; }
+  .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; }
+}
+.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>
+.pool-tooltip.el-popper {
+  max-width: 600px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

src/views/analytics/users/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="statistics-container">
     <el-row :gutter="20" class="data-overview">
-      <el-col :span="6" v-for="item in summaryData" :key="item.title">
+      <el-col :xs="12" :sm="12" :md="6" v-for="item in summaryData" :key="item.title">
         <el-card shadow="hover" class="data-card">
           <div class="card-content">
             <div class="icon-box" :style="{ backgroundColor: item.color }">
@@ -21,12 +21,12 @@
     </el-row>
 
     <el-row :gutter="20" class="charts-row">
-      <el-col :span="16">
+      <el-col :xs="24" :sm="24" :md="16">
         <el-card shadow="hover" header="用户增长趋势">
           <div ref="lineChartRef" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :span="8">
+      <el-col :xs="24" :sm="24" :md="8">
         <el-card shadow="hover" header="用户等级分布">
           <div ref="pieChartRef" class="chart-box"></div>
         </el-card>
@@ -95,12 +95,17 @@ const initCharts = () => {
     pieChartInstance.value = echarts.init(pieChartRef.value);
     pieChartInstance.value.setOption({
       tooltip: { trigger: 'item' },
-      legend: { bottom: '0%', left: 'center' },
+      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 },
@@ -141,6 +146,8 @@ onUnmounted(() => {
     margin-bottom: 20px;
 
     .data-card {
+      margin-bottom: 16px;
+
       .card-content {
         display: flex;
         align-items: center;
@@ -148,6 +155,7 @@ onUnmounted(() => {
         .icon-box {
           width: 56px;
           height: 56px;
+          flex-shrink: 0;
           border-radius: 12px;
           display: flex;
           align-items: center;
@@ -158,9 +166,13 @@ onUnmounted(() => {
         }
 
         .text-box {
+          min-width: 0;
           .title {
             font-size: 14px;
             color: #909399;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
           .value {
             font-size: 24px;
@@ -180,6 +192,9 @@ onUnmounted(() => {
   }
 
   .charts-row {
+    .el-col {
+      margin-bottom: 16px;
+    }
     .chart-box {
       height: 350px;
       width: 100%;
@@ -187,6 +202,28 @@ onUnmounted(() => {
   }
 }
 
+@media (max-width: 768px) {
+  .statistics-container {
+    padding: 12px;
+
+    .data-overview .data-card .card-content {
+      .icon-box {
+        width: 44px;
+        height: 44px;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+      .text-box .value {
+        font-size: 20px;
+      }
+    }
+
+    .charts-row .chart-box {
+      height: 300px;
+    }
+  }
+}
+
 // 深度修改 Element Plus 卡片头部样式
 :deep(.el-card__header) {
   font-weight: bold;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="statistics-container">
     <el-row :gutter="20" class="data-overview">
-      <el-col :span="6" v-for="item in summaryData" :key="item.title">
+      <el-col :xs="12" :sm="12" :md="6" v-for="item in summaryData" :key="item.title">
         <el-card shadow="hover" class="data-card">
           <div class="card-content">
             <div class="icon-box" :style="{ backgroundColor: item.color }">
@@ -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-row :gutter="20" class="charts-row charts-row--token-bar">
-      <el-col :span="16">
+      <el-col :xs="24" :sm="24" :md="12">
-        <el-card shadow="hover" header="用户增长趋势">
+        <el-card shadow="hover" header="Token售卖统计">
           <div ref="lineChartRef" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :span="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,10 +44,13 @@
 </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 * 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 {
   title: string;
   value: number;
@@ -47,122 +58,298 @@ 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: "总用户数",
+    title: '今日售卖',
-    value: 12840,
+    value: 0,
-    icon: User,
+    icon: ShoppingCart,
-    color: "#3973FF",
+    color: '#F56C6C',
-    percentage: 12,
+    percentage: 0,
-    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,
+    trendLabel: '较昨日',
   },
 ]);
 
-const initCharts = () => {
+/** 三条产品线当日销量之和，及相对昨日的涨跌比例（用于首页第四张卡片） */
-  if (lineChartRef.value) {
+function todaySalesVsYesterday(cursor: number[], kiro: number[], windsurf: number[]) {
-    lineChartInstance.value = echarts.init(lineChartRef.value);
+  const n = Math.min(cursor.length, kiro.length, windsurf.length);
-    lineChartInstance.value.setOption({
+  if (n < 1) return { today: 0, pct: 0, isUp: true };
-      tooltip: { trigger: "axis" },
+  const iToday = n - 1;
-      grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+  const today = cursor[iToday] + kiro[iToday] + windsurf[iToday];
-      xAxis: {
+  if (n < 2) return { today, pct: 0, isUp: true };
-        type: "category",
+  const iY = n - 2;
-        boundaryGap: false,
+  const yesterday = cursor[iY] + kiro[iY] + windsurf[iY];
-        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  if (yesterday > 0) {
-      },
+    const raw = Math.round(((today - yesterday) / yesterday) * 100);
-      yAxis: { type: "value" },
+    return { today, pct: Math.abs(raw), isUp: today >= yesterday };
-      series: [
+  }
-        {
+  return { today, pct: today > 0 ? 100 : 0, isUp: true };
-          name: "新增用户",
-          type: "line",
-          smooth: true,
-          data: [120, 132, 101, 134, 90, 230, 210],
-          areaStyle: { opacity: 0.3 },
-          itemStyle: { color: "#3973FF" },
-        },
-      ],
-    });
 }
 
-  if (pieChartRef.value) {
+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' },
+      },
+      {
+        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" },
+    tooltip: { trigger: 'item' },
-      legend: { bottom: "0%", left: "center" },
+    legend: {
+      orient: 'vertical',
+      right: '5%',
+      top: 'center',
+    },
     series: [
       {
-          name: "等级分布",
+        name: '等级分布',
-          type: "pie",
+        type: 'pie',
-          radius: ["40%", "70%"],
+        radius: ['40%', '70%'],
+        center: ['35%', '50%'],
         avoidLabelOverlap: false,
-          itemStyle: { borderRadius: 10, borderColor: "#fff", borderWidth: 2 },
+        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
         label: { show: false },
         data: [
-            { value: 1048, name: "普通用户" },
+          { value: 1048, name: '普通用户' },
-            { value: 735, name: "VIP会员" },
+          { value: 735, name: 'VIP会员' },
-            { value: 580, name: "超级管理员" },
+          { value: 580, name: '超级管理员' },
-            { value: 484, 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(() => {
+onMounted(async () => {
-  initCharts();
+  await nextTick();
-  window.addEventListener("resize", handleResize);
+  initLineChartShell();
+  initBarChartShell();
+  initPieChart();
+  void loadAccountPoolDailyExtract();
+  void loadAccountPoolInventoryTotals();
+  window.addEventListener('resize', handleResize);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize);
+  lineChartInstance.value?.dispose();
+  lineChartInstance.value = null;
+  pieChartInstance.value?.dispose();
+  pieChartInstance.value = null;
+  barChartInstance.value?.dispose();
+  barChartInstance.value = null;
 });
 </script>
 
 <style scoped lang="less">
 .statistics-container {
   padding: 20px;
-  min-height: calc(100vh - 180px);
+  min-height: 100vh;
 
   .data-overview {
     margin-bottom: 20px;
 
     .data-card {
+      margin-bottom: 16px;
+
       .card-content {
         display: flex;
         align-items: center;
@@ -170,6 +357,7 @@ onUnmounted(() => {
         .icon-box {
           width: 56px;
           height: 56px;
+          flex-shrink: 0;
           border-radius: 12px;
           display: flex;
           align-items: center;
@@ -180,9 +368,13 @@ onUnmounted(() => {
         }
 
         .text-box {
+          min-width: 0;
           .title {
             font-size: 14px;
             color: #909399;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
           .value {
             font-size: 24px;
@@ -192,16 +384,9 @@ onUnmounted(() => {
           }
           .trend {
             font-size: 12px;
-            &.up {
+            &.up { color: #67c23a; }
-              color: #67c23a;
+            &.down { color: #f56c6c; }
-            }
+            span { color: #909399; margin-left: 4px; }
-            &.down {
-              color: #f56c6c;
-            }
-            span {
-              color: #909399;
-              margin-left: 4px;
-            }
           }
         }
       }
@@ -209,13 +394,42 @@ onUnmounted(() => {
   }
 
   .charts-row {
+    .el-col {
+      margin-bottom: 16px;
+    }
     .chart-box {
       height: 350px;
       width: 100%;
     }
+    &--token-bar .chart-box {
+      height: 340px;
+    }
   }
 }
 
+@media (max-width: 768px) {
+  .statistics-container {
+    padding: 12px;
+
+    .data-overview .data-card .card-content {
+      .icon-box {
+        width: 44px;
+        height: 44px;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+      .text-box .value {
+        font-size: 20px;
+      }
+    }
+
+    .charts-row .chart-box {
+      height: 300px;
+    }
+  }
+}
+
+// 深度修改 Element Plus 卡片头部样式
 :deep(.el-card__header) {
   font-weight: bold;
   font-size: 16px;

src/views/login/index.vue

@@ -544,7 +544,9 @@ const clearCache = async () => {
 <style scoped>
 .login-bg {
   min-height: 100vh;
-  width: 100vw;
+  width: 100%;
+  padding: 24px;
+  box-sizing: border-box;
   background: linear-gradient(120deg, #e6f0ff 0%, #f5fcff 55%, #eaf6ff 100%);
   display: flex;
   align-items: center;
@@ -555,7 +557,8 @@ const clearCache = async () => {
 
 .login-card {
   display: flex;
-  min-width: 770px;
+  width: min(100%, 920px);
+  max-width: 920px;
   background: rgba(255, 255, 255, 0.95);
   border-radius: 22px;
   box-shadow:
@@ -617,7 +620,7 @@ const clearCache = async () => {
   flex-direction: column;
   justify-content: center;
   background: transparent;
-  min-width: 320px;
+  min-width: 0;
 }
 
 .login-title {
@@ -936,24 +939,117 @@ const clearCache = async () => {
 }
 
 @media (max-width: 940px) {
+  .login-bg {
+    padding: 16px;
+  }
+
   .login-card {
-    min-width: 330px;
+    width: 100%;
     flex-direction: column;
   }
 
   .login-side {
     width: 100%;
     min-width: 0;
-    border-radius: 0 0 18px 18px;
+    padding: 32px 18px 24px;
+    border-radius: 0;
+  }
+
+  .brand {
+    margin-bottom: 24px;
+  }
+
+  .brand-title {
+    font-size: 22px;
+  }
+
+  .illus {
+    margin-top: 8px;
   }
 
   .login-panel {
     padding: 30px 22px 34px 22px;
-    min-width: 0;
   }
 
   .copyright {
     padding-top: 13px;
   }
 }
+
+@media (max-width: 640px) {
+  .login-bg {
+    padding: 12px;
+    align-items: stretch;
+  }
+
+  .login-card {
+    min-height: calc(100vh - 24px);
+    border-radius: 18px;
+  }
+
+  .login-side {
+    padding: 24px 16px 20px;
+  }
+
+  .brand {
+    gap: 10px;
+    margin-bottom: 18px;
+  }
+
+  .brand-title {
+    font-size: 18px;
+    letter-spacing: 1px;
+  }
+
+  .login-panel {
+    padding: 24px 16px 28px;
+  }
+
+  .login-title {
+    font-size: 24px;
+  }
+
+  .login-desc {
+    font-size: 14px;
+    margin-bottom: 22px;
+  }
+
+  .input,
+  .code-btn,
+  .login-btn {
+    min-height: 44px;
+  }
+
+  .remember-me-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .action-links {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    line-height: 1.6;
+  }
+}
+
+@media (max-width: 420px) {
+  .login-bg {
+    padding: 0;
+  }
+
+  .login-card {
+    min-height: 100vh;
+    border-radius: 0;
+  }
+
+  .login-side {
+    padding: 20px 14px 18px;
+  }
+
+  .login-panel {
+    padding: 20px 14px 24px;
+  }
+}
 </style>

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: {

新建 文本文档.txt

@@ -0,0 +1 @@
+https://sendcard.yunzer.cn/api/getcard?type=xianyu