设备管理优化

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

@@ -42,3 +42,60 @@ export function extractAccountPool(module, data) {
     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">
-        <i class="fa fa-bars"></i>
+      <el-button v-if="showTopToggle" size="small" @click="handleCollapse">
+        <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 = () => {
-  store.state.isCollapse = !store.state.isCollapse;
+  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

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, reactive, watch } from 'vue';
+import { computed, reactive, watch } from "vue";
+import { ElMessage } from "element-plus";
 
 const props = defineProps({
   modelValue: {
@@ -8,35 +9,35 @@ const props = defineProps({
   },
   mode: {
     type: String,
-    default: 'single', // single | batch
+    default: "single", // single | batch
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'submit']);
+const emit = defineEmits(["update:modelValue", "submit"]);
 
 const form = reactive({
-  type: 'account', // account | tk | account_tk
-  account: '',
-  password: '',
-  token: '',
-  batchText: '',
-  remark: '',
+  type: "tk", // account | tk | account_tk
+  account: "",
+  password: "",
+  token: "",
+  batchText: "",
+  remark: "",
 });
 
-const isBatch = computed(() => props.mode === 'batch');
+const isBatch = computed(() => props.mode === "batch");
 
 const dialogTitle = computed(() => {
-  return isBatch.value ? '批量添加账号' : '添加账号';
+  return isBatch.value ? "批量添加账号" : "添加账号";
 });
 
 const formatExample = computed(() => {
-  if (form.type === 'account') {
-    return 'account,password';
+  if (form.type === "account") {
+    return "account,password";
   }
-  if (form.type === 'account_tk') {
-    return 'account,password,token';
+  if (form.type === "account_tk") {
+    return "account,password,token";
   }
-  return 'token';
+  return "token";
 });
 
 watch(
@@ -44,20 +45,20 @@ watch(
   (visible) => {
     if (!visible) return;
     resetForm();
-  }
+  },
 );
 
 function closeDialog() {
-  emit('update:modelValue', false);
+  emit("update:modelValue", false);
 }
 
 function resetForm() {
-  form.type = 'account';
-  form.account = '';
-  form.password = '';
-  form.token = '';
-  form.batchText = '';
-  form.remark = '';
+  form.type = "tk";
+  form.account = "";
+  form.password = "";
+  form.token = "";
+  form.batchText = "";
+  form.remark = "";
 }
 
 function parseBatchRows() {
@@ -70,32 +71,32 @@ function parseBatchRows() {
   const errors = [];
 
   rows.forEach((line, index) => {
-    if (form.type === 'account') {
-      const [account, password] = line.split(',').map((x) => (x || '').trim());
+    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',
+        type: "account",
         account,
         password,
-        token: '',
+        token: "",
         remark: form.remark,
       });
       return;
     }
 
-    if (form.type === 'account_tk') {
+    if (form.type === "account_tk") {
       const [account, password, token] = line
-        .split(',')
-        .map((x) => (x || '').trim());
-      if (!account || !password || !token) {
-        errors.push(`第 ${index + 1} 行格式错误，应为 account,password,token`);
+        .split(",")
+        .map((x) => (x || "").trim());
+      if (!account || !token) {
+        errors.push(`第 ${index + 1} 行格式错误，应为 account,password,token（password 可为空）`);
         return;
       }
       parsed.push({
-        type: 'account_tk',
+        type: "account_tk",
         account,
         password,
         token,
@@ -105,9 +106,9 @@ function parseBatchRows() {
     }
 
     parsed.push({
-      type: 'tk',
-      account: '',
-      password: '',
+      type: "tk",
+      account: "",
+      password: "",
       token: line,
       remark: form.remark,
     });
@@ -118,18 +119,18 @@ function parseBatchRows() {
 
 function handleSubmit() {
   if (!isBatch.value) {
-    if (form.type === 'account') {
+    if (form.type === "account") {
       if (!form.account || !form.password) {
         return;
       }
-      emit('submit', {
-        mode: 'single',
+      emit("submit", {
+        mode: "single",
         rows: [
           {
-            type: 'account',
+            type: "account",
             account: form.account.trim(),
             password: form.password.trim(),
-            token: '',
+            token: "",
             remark: form.remark.trim(),
           },
         ],
@@ -138,15 +139,16 @@ function handleSubmit() {
       return;
     }
 
-    if (form.type === 'account_tk') {
-      if (!form.account || !form.password || !form.token) {
+    if (form.type === "account_tk") {
+      if (!form.account || !form.token) {
+        ElMessage.warning("请输入账号和 Token，密码可为空");
         return;
       }
-      emit('submit', {
-        mode: 'single',
+      emit("submit", {
+        mode: "single",
         rows: [
           {
-            type: 'account_tk',
+            type: "account_tk",
             account: form.account.trim(),
             password: form.password.trim(),
             token: form.token.trim(),
@@ -159,13 +161,13 @@ function handleSubmit() {
     }
 
     if (!form.token) return;
-    emit('submit', {
-      mode: 'single',
+    emit("submit", {
+      mode: "single",
       rows: [
         {
-          type: 'tk',
-          account: '',
-          password: '',
+          type: "tk",
+          account: "",
+          password: "",
           token: form.token.trim(),
           remark: form.remark.trim(),
         },
@@ -177,10 +179,11 @@ function handleSubmit() {
 
   const { parsed, errors } = parseBatchRows();
   if (errors.length || parsed.length === 0) {
+    ElMessage.warning(errors[0] || "请填写批量内容");
     return;
   }
-  emit('submit', {
-    mode: 'batch',
+  emit("submit", {
+    mode: "batch",
     rows: parsed,
   });
   closeDialog();
@@ -198,19 +201,27 @@ function handleSubmit() {
     <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 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-input
+              v-model="form.account"
+              placeholder="请输入账号"
+              clearable
+            />
           </el-form-item>
           <el-form-item label="密码">
-            <el-input v-model="form.password" placeholder="请输入密码" clearable />
+            <el-input
+              v-model="form.password"
+              placeholder="请输入密码"
+              clearable
+            />
           </el-form-item>
           <el-form-item v-if="form.type === 'account_tk'" label="Token">
             <el-input

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/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

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

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

@@ -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

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

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

@@ -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/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-col :span="16">
-        <el-card shadow="hover" header="用户增长趋势">
+    <el-row :gutter="20" class="charts-row charts-row--token-bar">
+      <el-col :xs="24" :sm="24" :md="12">
+        <el-card shadow="hover" header="Token售卖统计">
           <div ref="lineChartRef" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :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 * as echarts from "echarts";
-import { User, Pointer, Connection, Histogram } from "@element-plus/icons-vue";
+import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
+import * as echarts from 'echarts';
+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: "总用户数",
-    value: 12840,
-    icon: User,
-    color: "#3973FF",
-    percentage: 12,
-    isUp: true,
-  },
-  {
-    title: "今日新增",
-    value: 156,
-    icon: Pointer,
-    color: "#67C23A",
-    percentage: 5,
-    isUp: true,
-  },
-  {
-    title: "活跃用户",
-    value: 3420,
-    icon: Connection,
-    color: "#E6A23C",
-    percentage: 2,
-    isUp: false,
-  },
-  {
-    title: "留存率",
-    value: 85,
-    icon: Histogram,
-    color: "#F56C6C",
-    percentage: 1,
+    title: '今日售卖',
+    value: 0,
+    icon: ShoppingCart,
+    color: '#F56C6C',
+    percentage: 0,
     isUp: true,
+    trendLabel: '较昨日',
   },
 ]);
 
-const initCharts = () => {
-  if (lineChartRef.value) {
-    lineChartInstance.value = echarts.init(lineChartRef.value);
-    lineChartInstance.value.setOption({
-      tooltip: { trigger: "axis" },
-      grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
-      xAxis: {
-        type: "category",
-        boundaryGap: false,
-        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      },
-      yAxis: { type: "value" },
-      series: [
-        {
-          name: "新增用户",
-          type: "line",
-          smooth: true,
-          data: [120, 132, 101, 134, 90, 230, 210],
-          areaStyle: { opacity: 0.3 },
-          itemStyle: { color: "#3973FF" },
-        },
-      ],
-    });
+/** 三条产品线当日销量之和，及相对昨日的涨跌比例（用于首页第四张卡片） */
+function todaySalesVsYesterday(cursor: number[], kiro: number[], windsurf: number[]) {
+  const n = Math.min(cursor.length, kiro.length, windsurf.length);
+  if (n < 1) return { today: 0, pct: 0, isUp: true };
+  const iToday = n - 1;
+  const today = cursor[iToday] + kiro[iToday] + windsurf[iToday];
+  if (n < 2) return { today, pct: 0, isUp: true };
+  const iY = n - 2;
+  const yesterday = cursor[iY] + kiro[iY] + windsurf[iY];
+  if (yesterday > 0) {
+    const raw = Math.round(((today - yesterday) / yesterday) * 100);
+    return { today, pct: Math.abs(raw), isUp: today >= yesterday };
   }
+  return { today, pct: today > 0 ? 100 : 0, isUp: true };
+}
 
-  if (pieChartRef.value) {
-    pieChartInstance.value = echarts.init(pieChartRef.value);
-    pieChartInstance.value.setOption({
-      tooltip: { trigger: "item" },
-      legend: { bottom: "0%", left: "center" },
-      series: [
-        {
-          name: "等级分布",
-          type: "pie",
-          radius: ["40%", "70%"],
-          avoidLabelOverlap: false,
-          itemStyle: { borderRadius: 10, borderColor: "#fff", borderWidth: 2 },
-          label: { show: false },
-          data: [
-            { value: 1048, name: "普通用户" },
-            { value: 735, name: "VIP会员" },
-            { value: 580, name: "超级管理员" },
-            { value: 484, name: "运营人员" },
-          ],
-        },
-      ],
-    });
+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' },
+    legend: {
+      orient: 'vertical',
+      right: '5%',
+      top: 'center',
+    },
+    series: [
+      {
+        name: '等级分布',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['35%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
+        label: { show: false },
+        data: [
+          { value: 1048, name: '普通用户' },
+          { value: 735, name: 'VIP会员' },
+          { value: 580, name: '超级管理员' },
+          { value: 484, name: '运营人员' },
+        ],
+      },
+    ],
+  });
 };
 
+const initLineChartShell = () => {
+  if (!lineChartRef.value) return;
+  lineChartInstance.value = echarts.init(lineChartRef.value);
+  lineChartInstance.value.setOption(
+    buildSalesLineOption([], [], [], []),
+    { notMerge: true },
+  );
+};
+
+const initBarChartShell = () => {
+  if (!barChartRef.value) return;
+  barChartInstance.value = echarts.init(barChartRef.value);
+  barChartInstance.value.setOption(
+    buildInventoryBarOption(['Cursor', 'Kiro', 'Windsurf'], [0, 0, 0], [0, 0, 0]),
+    { notMerge: true },
+  );
+};
+
+// --- 生命周期与自适应 ---
 const handleResize = () => {
   lineChartInstance.value?.resize();
   pieChartInstance.value?.resize();
+  barChartInstance.value?.resize();
 };
 
-onMounted(() => {
-  initCharts();
-  window.addEventListener("resize", handleResize);
+onMounted(async () => {
+  await nextTick();
+  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 {
-              color: #67c23a;
-            }
-            &.down {
-              color: #f56c6c;
-            }
-            span {
-              color: #909399;
-              margin-left: 4px;
-            }
+            &.up { color: #67c23a; }
+            &.down { color: #f56c6c; }
+            span { color: #909399; margin-left: 4px; }
           }
         }
       }
@@ -209,16 +394,45 @@ 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;
   border-bottom: 1px solid #ebeef5;
 }
-</style>
+</style>

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