Merge branch 'master' of https://git.yunzer.cn/yunzerwebsite/platform-vue

src/api/accountPool.js

@@ -50,3 +50,11 @@ export function updateAccountPoolRemark(module, data) {
     data,
   });
 }
+
+export function replenishAccountPool(module, data) {
+  return request({
+    url: `${base(module)}/replenish`,
+    method: 'post',
+    data,
+  });
+}

src/components/CommonAside.vue

@@ -27,7 +27,10 @@
       :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">
@@ -150,6 +153,10 @@
       </el-button>
     </div>
   </el-aside>
+
+  <teleport to="body">
+    <div v-if="mobileOpen" class="aside-mobile-overlay" @click="closeMobile" />
+  </teleport>
 </template>
 
 <script setup>
@@ -169,13 +176,7 @@ const errorMsg = computed(() => menuStore.error || "加载菜单失败");
 
 const store = useAllDataStore();
 const isCollapse = computed(() => store.state.isCollapse);
-const isMobile = ref(false);
+const width = computed(() => (store.state.isCollapse ? "64px" : "200px"));
-const width = computed(() => {
-  if (isMobile.value) {
-    return store.state.isCollapse ? "0px" : "220px";
-  }
-  return store.state.isCollapse ? "64px" : "200px";
-});
 
 const asideBgColor = ref("#304156");
 const asideTextColor = ref("#bfcbd9");
@@ -334,6 +335,8 @@ const list = computed(() => {
 });
 
 const handleMenuSelect = (index) => {
+  // 移动端点击菜单后关闭侧边栏
+  closeMobile();
   if (index === "/home") {
     emit("menu-click", {
       path: "/home",
@@ -451,6 +454,38 @@ 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;
+    }
+  }
 }
 
 // 菜单样式
@@ -581,12 +616,7 @@ h3 {
 // 响应式设计
 @media (max-width: 768px) {
   .common-aside {
-    position: fixed;
+    width: 100% !important;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 1200;
-    max-width: 80vw;
   }
 
   :deep(.el-menu) {
@@ -598,3 +628,18 @@ h3 {
   }
 }
 </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

@@ -72,6 +72,8 @@
 <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";
@@ -198,7 +200,11 @@ 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);

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;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, watch } from 'vue';
+import { computed, reactive, watch } from "vue";
 
 const props = defineProps({
   modelValue: {
@@ -8,35 +8,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
+  type: "tk", // account | tk | account_tk
-  account: '',
+  account: "",
-  password: '',
+  password: "",
-  token: '',
+  token: "",
-  batchText: '',
+  batchText: "",
-  remark: '',
+  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') {
+  if (form.type === "account") {
-    return 'account,password';
+    return "account,password";
   }
-  if (form.type === 'account_tk') {
+  if (form.type === "account_tk") {
-    return 'account,password,token';
+    return "account,password,token";
   }
-  return 'token';
+  return "token";
 });
 
 watch(
@@ -44,20 +44,20 @@ watch(
   (visible) => {
     if (!visible) return;
     resetForm();
-  }
+  },
 );
 
 function closeDialog() {
-  emit('update:modelValue', false);
+  emit("update:modelValue", false);
 }
 
 function resetForm() {
-  form.type = 'account';
+  form.type = "tk";
-  form.account = '';
+  form.account = "";
-  form.password = '';
+  form.password = "";
-  form.token = '';
+  form.token = "";
-  form.batchText = '';
+  form.batchText = "";
-  form.remark = '';
+  form.remark = "";
 }
 
 function parseBatchRows() {
@@ -70,32 +70,32 @@ function parseBatchRows() {
   const errors = [];
 
   rows.forEach((line, index) => {
-    if (form.type === 'account') {
+    if (form.type === "account") {
-      const [account, password] = line.split(',').map((x) => (x || '').trim());
+      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(',')
+        .split(",")
-        .map((x) => (x || '').trim());
+        .map((x) => (x || "").trim());
       if (!account || !password || !token) {
         errors.push(`第 ${index + 1} 行格式错误，应为 account,password,token`);
         return;
       }
       parsed.push({
-        type: 'account_tk',
+        type: "account_tk",
         account,
         password,
         token,
@@ -105,9 +105,9 @@ function parseBatchRows() {
     }
 
     parsed.push({
-      type: 'tk',
+      type: "tk",
-      account: '',
+      account: "",
-      password: '',
+      password: "",
       token: line,
       remark: form.remark,
     });
@@ -118,18 +118,18 @@ function parseBatchRows() {
 
 function handleSubmit() {
   if (!isBatch.value) {
-    if (form.type === 'account') {
+    if (form.type === "account") {
       if (!form.account || !form.password) {
         return;
       }
-      emit('submit', {
+      emit("submit", {
-        mode: 'single',
+        mode: "single",
         rows: [
           {
-            type: 'account',
+            type: "account",
             account: form.account.trim(),
             password: form.password.trim(),
-            token: '',
+            token: "",
             remark: form.remark.trim(),
           },
         ],
@@ -138,15 +138,15 @@ function handleSubmit() {
       return;
     }
 
-    if (form.type === 'account_tk') {
+    if (form.type === "account_tk") {
       if (!form.account || !form.password || !form.token) {
         return;
       }
-      emit('submit', {
+      emit("submit", {
-        mode: 'single',
+        mode: "single",
         rows: [
           {
-            type: 'account_tk',
+            type: "account_tk",
             account: form.account.trim(),
             password: form.password.trim(),
             token: form.token.trim(),
@@ -159,13 +159,13 @@ function handleSubmit() {
     }
 
     if (!form.token) return;
-    emit('submit', {
+    emit("submit", {
-      mode: 'single',
+      mode: "single",
       rows: [
         {
-          type: 'tk',
+          type: "tk",
-          account: '',
+          account: "",
-          password: '',
+          password: "",
           token: form.token.trim(),
           remark: form.remark.trim(),
         },
@@ -179,8 +179,8 @@ function handleSubmit() {
   if (errors.length || parsed.length === 0) {
     return;
   }
-  emit('submit', {
+  emit("submit", {
-    mode: 'batch',
+    mode: "batch",
     rows: parsed,
   });
   closeDialog();
@@ -198,19 +198,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/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/cursor/index.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from "vue";
-import { ElMessage } from 'element-plus';
+import { ElMessage } from "element-plus";
-import Edit from './components/edit.vue';
+import Edit from "./components/edit.vue";
-import DetailDialog from './components/detail.vue';
+import DetailDialog from "./components/detail.vue";
-import ExtractDialog from './components/extract.vue';
+import ExtractDialog from "./components/extract.vue";
-import PatchDialog from '../components/patch.vue';
+import ReplenishDialog from "./components/replenish.vue";
 import {
   addAccountPool,
   batchAddAccountPool,
@@ -12,29 +12,34 @@ import {
   getAccountPoolDetail,
   getAccountPoolList,
   updateAccountPoolRemark,
-} from '@/api/accountPool';
+  replenishAccountPool,
+} from "@/api/accountPool";
 
-const moduleKey = 'cursor';
+const moduleKey = "cursor";
 
 const loading = ref(false);
 const editVisible = ref(false);
-const editMode = ref('single');
+const editMode = ref("single");
 const detailVisible = ref(false);
 const extractVisible = ref(false);
 const extractTargetRow = ref(null);
+const batchExtractVisible = ref(false);
+const batchExtractForm = reactive({ platform: "local", remark: "" });
+const replenishVisible = ref(false);
+const replenishForm = reactive({ type: "tk", platform: "local", remark: "" });
 const apiDocVisible = ref(false);
 const patchVisible = ref(false);
 
 const query = reactive({
-  keyword: '',
+  keyword: "",
-  status: '',
+  status: "",
 });
-const activeTypeTab = ref('all');
+const activeTypeTab = ref("all");
 
 const extractForm = reactive({
-  platform: 'local',
+  platform: "local",
-  type: 'account',
+  type: "account",
-  remark: '',
+  remark: "",
 });
 
 const tableData = ref([]);
@@ -52,16 +57,16 @@ const pagination = reactive({
 const pagedList = computed(() => tableData.value);
 
 function resetQuery() {
-  query.keyword = '';
+  query.keyword = "";
-  query.status = '';
+  query.status = "";
 }
 
 const typeTabs = computed(() => {
   return [
-    { label: '全部', value: 'all' },
+    { label: "全部", value: "all" },
-    { label: '账号密码', value: 'account' },
+    { label: "账号密码", value: "account" },
-    { label: '账号密码+Token', value: 'account_tk' },
+    { label: "账号密码+Token", value: "account_tk" },
-    { label: 'Token', value: 'tk' },
+    { label: "Token", value: "tk" },
   ];
 });
 
@@ -70,21 +75,27 @@ watch(
   () => {
     pagination.page = 1;
     fetchList();
-  }
+  },
 );
 
 watch(
   () => [pagination.page, pagination.pageSize],
   () => {
     fetchList();
-  }
+  },
 );
 
-function openAddDialog(mode = 'single') {
+function openAddDialog(mode = "single") {
   editMode.value = mode;
   editVisible.value = true;
 }
 
+function nowText() {
+  const d = new Date();
+  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())}`;
+}
+
 async function saveRows(rows) {
   if (!rows.length) return;
   if (rows.length === 1) {
@@ -99,7 +110,7 @@ async function handleEditSubmit(payload) {
   try {
     await saveRows(payload.rows || []);
     ElMessage.success(
-      payload.mode === 'batch' ? '批量添加成功' : '账号添加成功'
+      payload.mode === "batch" ? "批量添加成功" : "账号添加成功",
     );
     await fetchList();
   } finally {
@@ -116,7 +127,7 @@ function openDetail(row) {
   getAccountPoolDetail(moduleKey, row.id)
     .then((res) => {
       if (res?.code !== 200) {
-        ElMessage.error(res?.msg || '获取详情失败');
+        ElMessage.error(res?.msg || "获取详情失败");
         return;
       }
       detailRow.value = normalizeRow(res.data || {});
@@ -127,11 +138,18 @@ function openDetail(row) {
     });
 }
 
+function openExtractDialog() {
+  extractTargetRow.value = null;
+  extractForm.platform = "local";
+  extractForm.type = "account";
+  extractVisible.value = true;
+}
+
 function openExtractByRow(row) {
   extractTargetRow.value = row;
-  extractForm.platform = 'local';
+  extractForm.platform = "local";
   extractForm.type = row.type;
-  extractForm.remark = row.remark || '';
+  extractForm.remark = row.remark || "";
   extractVisible.value = true;
 }
 
@@ -167,21 +185,23 @@ async function handleExtract() {
   try {
     const target = extractTargetRow.value;
     if (!target) {
-      ElMessage.warning('未找到提取目标');
+      ElMessage.warning("未找到提取目标");
       return;
     }
     const res = await extractAccountPool(moduleKey, {
       id: target.id,
       type: target.type,
       platform: extractForm.platform,
-      remark: extractForm.remark || '',
+      remark: extractForm.remark || "",
     });
     if (res?.code !== 200) {
-      ElMessage.error(res?.msg || '提取失败');
+      ElMessage.error(res?.msg || "提取失败");
       return;
     }
-    ElMessage.success('提取成功');
+    ElMessage.success("提取成功");
     extractVisible.value = false;
+    const row = normalizeRow(res.data || {});
+    navigator.clipboard.writeText(rowToText(row)).catch(() => {});
     await fetchList();
   } finally {
     loading.value = false;
@@ -194,12 +214,12 @@ async function handleSaveRemark(payload) {
   try {
     const res = await updateAccountPoolRemark(moduleKey, payload);
     if (res?.code !== 200) {
-      ElMessage.error(res?.msg || '备注更新失败');
+      ElMessage.error(res?.msg || "备注更新失败");
       return;
     }
-    ElMessage.success('备注已更新');
+    ElMessage.success("备注已更新");
     if (detailRow.value?.id === payload.id) {
-      detailRow.value = { ...detailRow.value, remark: payload.remark || '' };
+      detailRow.value = { ...detailRow.value, remark: payload.remark || "" };
     }
     await fetchList();
   } finally {
@@ -209,50 +229,72 @@ async function handleSaveRemark(payload) {
 
 function markExtractForSelected() {
   if (!selectedRows.value.length) {
-    ElMessage.warning('请先选择数据');
+    ElMessage.warning("请先选择数据");
     return;
   }
+  batchExtractForm.platform = "local";
+  batchExtractForm.remark = "";
+  batchExtractVisible.value = true;
+}
+
+async function handleBatchExtract() {
   loading.value = true;
-  Promise.all(
+  try {
-    selectedRows.value.map((row) =>
+    const results = await Promise.all(
-      extractAccountPool(moduleKey, {
+      selectedRows.value.map((row) =>
-        id: row.id,
+        extractAccountPool(moduleKey, {
-        type: row.type,
+          id: row.id,
-        platform: 'local',
+          type: row.type,
-      })
+          platform: batchExtractForm.platform,
-    )
+          remark: batchExtractForm.remark || "",
-  )
+        }),
-    .then(() => {
+      ),
-      ElMessage.success('批量提取成功');
+    );
-      fetchList();
+    const succeeded = results
-    })
+      .filter((r) => r?.code === 200)
-    .finally(() => {
+      .map((r) => normalizeRow(r.data || {}));
-      loading.value = false;
+    const failCount = results.length - succeeded.length;
-    });
+    if (failCount > 0) {
+      ElMessage.warning(`${succeeded.length} 条成功，${failCount} 条失败`);
+    } else {
+      ElMessage.success("批量提取成功");
+    }
+    batchExtractVisible.value = false;
+    if (succeeded.length) {
+      const text = succeeded.map(rowToText).filter(Boolean).join("\n");
+      navigator.clipboard.writeText(text).catch(() => {});
+    }
+    fetchList();
+  } finally {
+    loading.value = false;
+  }
 }
 
 function typeText(type) {
-  if (type === 'account') return '账号密码';
+  if (type === "account") return "账号密码";
-  if (type === 'account_tk') return '账号密码+Token';
+  if (type === "account_tk") return "账号密码+Token";
-  return 'Token';
+  return "Token";
 }
 
+const tooltipOpts = {
+  popperClass: 'pool-tooltip',
+  popperStyle: { maxWidth: '600px', wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
+};
+
 const PLATFORM_MAP = {
   local:      { label: '本地',   type: 'info' },
   xianyu:     { label: '闲鱼',   type: 'warning' },
-  taobao:     { label: '淘宝',   type: 'info' },
   pinduoduo:  { label: '拼多多', type: 'danger' },
   jingdong:   { label: '京东',   type: 'primary' },
   douyin:     { label: '抖音',   type: 'success' },
-  ziyoushangcheng: { label: '自有商城', type: 'warning' },
 };
 
 function platformText(platform) {
-  return PLATFORM_MAP[platform]?.label || (platform || '-');
+  return PLATFORM_MAP[platform]?.label || platform || "-";
 }
 
 function platformTagType(platform) {
-  return PLATFORM_MAP[platform]?.type || 'info';
+  return PLATFORM_MAP[platform]?.type || "info";
 }
 
 function normalizeRow(raw) {
@@ -260,7 +302,7 @@ function normalizeRow(raw) {
     for (const key of keys) {
       if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
     }
-    return '';
+    return "";
   };
   // 指针类型字段（可能为 null），单独处理
   const pickNullable = (...keys) => {
@@ -270,23 +312,23 @@ function normalizeRow(raw) {
     return null;
   };
   const formatTime = (val) => {
-    if (!val) return '';
+    if (!val) return "";
     const d = new Date(val);
     if (isNaN(d)) return val;
-    const p = (v) => String(v).padStart(2, '0');
+    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())}`;
+    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
   };
   return {
-    id: pick('id', 'Id', 'ID'),
+    id: pick("id", "Id", "ID"),
-    type: pick('data_type', 'dataType', 'type'),
+    type: pick("data_type", "dataType", "type"),
-    account: pick('account', 'Account'),
+    account: pick("account", "Account"),
-    password: pick('password', 'Password'),
+    password: pick("password", "Password"),
-    token: pick('token', 'Token'),
+    token: pick("token", "Token"),
-    remark: pick('remark', 'Remark'),
+    remark: pick("remark", "Remark"),
-    extracted: Number(pick('is_extracted', 'isExtracted', 'IsExtracted')) === 1,
+    extracted: Number(pick("is_extracted", "isExtracted", "IsExtracted")) === 1,
-    extractedAt: formatTime(pickNullable('extracted_time', 'extractedAt')),
+    extractedAt: formatTime(pickNullable("extracted_time", "extractedAt")),
-    extractedPlatform: pickNullable('extracted_platform', 'extractedPlatform'),
+    extractedPlatform: pickNullable("extracted_platform", "extractedPlatform"),
-    createdAt: formatTime(pick('create_time', 'createdAt')),
+    createdAt: formatTime(pick("create_time", "createdAt")),
   };
 }
 
@@ -298,10 +340,10 @@ async function fetchList() {
       pageSize: pagination.pageSize,
       keyword: query.keyword || undefined,
       status: query.status || undefined,
-      type: activeTypeTab.value === 'all' ? undefined : activeTypeTab.value,
+      type: activeTypeTab.value === "all" ? undefined : activeTypeTab.value,
     });
     if (res?.code !== 200) {
-      ElMessage.error(res?.msg || '获取列表失败');
+      ElMessage.error(res?.msg || "获取列表失败");
       return;
     }
     const list = Array.isArray(res?.data?.list) ? res.data.list : [];
@@ -327,35 +369,45 @@ onUnmounted(() => {
 });
 
 // ---- 接口说明数据 ----
-const BASE_URL = 'https://api.yunzer.cn';
+const BASE_URL = "https://api.yunzer.cn";
 
 const paramDocs = [
-  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / taobao / pinduoduo / jingdong / douyin / ziyoushangcheng / local' },
+  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / taobao / pinduoduo / jingdong / local' },
   { name: 'module', required: true, desc: '号池模块，指定从哪个产品的号池提取', values: 'cursor / windsurf / krio' },
   { name: 'data_type', required: false, desc: '账号类型，不传则提取任意类型', values: 'account / tk / account_tk' },
 ];
 
 const platformDocs = [
   { value: 'xianyu',    label: '闲鱼',   desc: '闲鱼平台发货调用' },
-  { value: 'taobao',    label: '淘宝',   desc: '淘宝平台发货调用' },
   { value: 'pinduoduo', label: '拼多多', desc: '拼多多平台发货调用' },
   { value: 'jingdong',  label: '京东',   desc: '京东平台发货调用' },
   { value: 'douyin',    label: '抖音',   desc: '抖音平台发货调用' },
-  { value: 'ziyoushangcheng', label: '自有商城', desc: '自有商城平台发货调用' },
   { value: 'local',     label: '本地',   desc: '本地手动调用' },
 ];
 
 const moduleDocs = [
-  { value: 'cursor', label: 'Cursor', desc: 'Cursor 号池' },
+  { value: "cursor", label: "Cursor", desc: "Cursor 号池" },
-  { value: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
+  { value: "windsurf", label: "Windsurf", desc: "Windsurf 号池" },
-  { value: 'krio', label: 'Krio', desc: 'Krio 号池' },
+  { value: "krio", label: "Krio", desc: "Krio 号池" },
 ];
 
 const examples = [
-  { label: '闲鱼 · 提取 Cursor Token', url: `${BASE_URL}/api/getcard?type=xianyu&module=cursor&data_type=tk` },
+  {
-  { label: '拼多多 · 提取 Cursor 账号密码', url: `${BASE_URL}/api/getcard?type=pinduoduo&module=cursor&data_type=account` },
+    label: "闲鱼 · 提取 Cursor Token",
-  { label: '京东 · 提取 Windsurf 任意类型', url: `${BASE_URL}/api/getcard?type=jingdong&module=windsurf` },
+    url: `${BASE_URL}/api/getcard?type=xianyu&module=cursor&data_type=tk`,
-  { label: '抖音 · 提取 Krio Token', url: `${BASE_URL}/api/getcard?type=douyin&module=krio&data_type=tk` },
+  },
+  {
+    label: "拼多多 · 提取 Cursor 账号密码",
+    url: `${BASE_URL}/api/getcard?type=pinduoduo&module=cursor&data_type=account`,
+  },
+  {
+    label: "京东 · 提取 Windsurf 任意类型",
+    url: `${BASE_URL}/api/getcard?type=jingdong&module=windsurf`,
+  },
+  {
+    label: "抖音 · 提取 Krio Token",
+    url: `${BASE_URL}/api/getcard?type=douyin&module=krio&data_type=tk`,
+  },
 ];
 
 const successResp = `// 纯 Token 类型（data_type=tk）
@@ -375,12 +427,19 @@ const errorResp = `// 无可用卡密
 
 function copyText(text) {
   navigator.clipboard.writeText(text).then(() => {
-    ElMessage.success('已复制');
+    ElMessage.success("已复制");
   });
 }
 
 function copyCardInfo(row) {
-  copyToClipboard(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);
+  if (!parts.length) { ElMessage.warning('无可复制内容'); return; }
+  navigator.clipboard.writeText(parts.join('\n')).then(() => {
+    ElMessage.success('已复制');
+  });
 }
 
 </script>
@@ -402,14 +461,18 @@ function copyCardInfo(row) {
             clearable
             class="w-260"
           />
-          <el-select v-model="query.status" placeholder="提取状态" clearable class="w-140">
+          <el-select
+            v-model="query.status"
+            placeholder="提取状态"
+            clearable
+            class="w-140"
+          >
             <el-option label="未提取" value="unused" />
             <el-option label="已提取" value="extracted" />
           </el-select>
           <el-button @click="resetQuery">重置</el-button>
         </div>
         <div class="toolbar-right">
-          <el-button type="warning" @click="openPatchDialog">补卡</el-button>
           <el-button type="primary" @click="openAddDialog('single')">添加账号</el-button>
           <el-button type="success" @click="openAddDialog('batch')">批量添加</el-button>
           <el-button @click="markExtractForSelected">批量标记提取</el-button>
@@ -438,33 +501,58 @@ function copyCardInfo(row) {
         >
         <el-table-column type="selection" width="52" />
         <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column label="账号类型" width="100" align="center">
+        <el-table-column label="账号类型" width="160" align="center">
           <template #default="{ row }">
             <el-tag>{{ typeText(row.type) }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="提取状态" width="100" align="center">
+        <el-table-column prop="account" label="账号" min-width="180" show-overflow-tooltip :tooltip-options="tooltipOpts" />
+        <el-table-column prop="password" label="密码" min-width="160" show-overflow-tooltip :tooltip-options="tooltipOpts">
+          <template #default="{ row }">{{ row.password || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="Token" min-width="200" show-overflow-tooltip :tooltip-options="tooltipOpts">
+          <template #default="{ row }">{{ row.token || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip :tooltip-options="tooltipOpts" />
+        <el-table-column label="提取状态" width="100">
           <template #default="{ row }">
             <el-tag :type="row.extracted ? 'success' : 'info'">
-              {{ row.extracted ? '已提取' : '未提取' }}
+              {{ row.extracted ? "已提取" : "未提取" }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="提取平台" width="120" align="center" >
+        <el-table-column prop="extractedAt" label="提取时间" width="180" />
+        <el-table-column label="提取平台" width="120">
           <template #default="{ row }">
-            <el-tag v-if="row.extractedPlatform" :type="platformTagType(row.extractedPlatform)" size="small">
+            <el-tag
+              v-if="row.extractedPlatform"
+              :type="platformTagType(row.extractedPlatform)"
+              size="small"
+            >
               {{ platformText(row.extractedPlatform) }}
             </el-tag>
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column prop="extractedAt" label="提取时间" width="180"  align="center" />
+        <el-table-column label="操作" width="220" fixed="right" align="center"> 
-        <el-table-column prop="remark" label="备注" min-width="140" />
-        <el-table-column label="操作" width="220" align="center">
           <template #default="{ row }">
-            <el-button link type="primary" @click="openDetail(row)">详情</el-button>
+            <el-button link type="primary" @click="openDetail(row)"
-            <el-button link type="warning" :disabled="row.extracted" @click="openExtractByRow(row)">提取</el-button>
+              >详情</el-button
-            <el-button v-if="row.extracted" link type="success" @click="copyCardInfo(row)">复制</el-button>
+            >
+            <el-button
+              link
+              type="warning"
+              :disabled="row.extracted"
+              @click="openExtractByRow(row)"
+              >提取</el-button
+            >
+            <el-button
+              v-if="row.extracted"
+              link
+              type="success"
+              @click="copyCardInfo(row)"
+              >复制</el-button
+            >
           </template>
         </el-table-column>
         </el-table>
@@ -503,18 +591,15 @@ function copyCardInfo(row) {
       @confirm="handleExtract"
     />
 
-    <PatchDialog
-      v-model="patchVisible"
-      :module="moduleKey"
-      :platform-map="PLATFORM_MAP"
-      :default-account-type="activeTypeTab === 'all' ? 'account' : activeTypeTab"
-      @success="fetchList"
-    />
-
     <!-- 接口说明抽屉 -->
-    <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
+    <el-drawer
+      v-model="apiDocVisible"
+      title="提卡接口说明"
+      size="560px"
+      direction="rtl"
+    >
       <div class="api-doc">
-        <el-alert type="info" :closable="false" style="margin-bottom:16px">
+        <el-alert type="info" :closable="false" style="margin-bottom: 16px">
           该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
         </el-alert>
 
@@ -528,10 +613,15 @@ function copyCardInfo(row) {
           <div class="doc-title">请求参数</div>
           <el-table :data="paramDocs" border size="small">
             <el-table-column prop="name" label="参数名" width="120" />
-            <el-table-column prop="required" label="必填" width="60" align="center">
+            <el-table-column
+              prop="required"
+              label="必填"
+              width="60"
+              align="center"
+            >
               <template #default="{ row }">
                 <el-tag :type="row.required ? 'danger' : 'info'" size="small">
-                  {{ row.required ? '是' : '否' }}
+                  {{ row.required ? "是" : "否" }}
                 </el-tag>
               </template>
             </el-table-column>
@@ -546,7 +636,13 @@ function copyCardInfo(row) {
             <div class="example-label">{{ ex.label }}</div>
             <div class="example-url-wrap">
               <code class="example-url">{{ ex.url }}</code>
-              <el-button link type="primary" size="small" @click="copyText(ex.url)">复制</el-button>
+              <el-button
+                link
+                type="primary"
+                size="small"
+                @click="copyText(ex.url)"
+                >复制</el-button
+              >
             </div>
           </div>
         </div>
@@ -756,4 +852,44 @@ function copyCardInfo(row) {
   margin: 0;
 }
 
+.extract-result-item {
+  margin-bottom: 4px;
+}
+
+.result-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 6px 0;
+  font-size: 13px;
+}
+
+.result-label {
+  flex-shrink: 0;
+  width: 44px;
+  color: #909399;
+}
+
+.result-val {
+  flex: 1;
+  word-break: break-all;
+  color: #303133;
+}
+
+.token-val {
+  font-family: monospace;
+  font-size: 12px;
+  color: #409eff;
+}
 </style>
+
+<style>
+.pool-tooltip.el-popper {
+  max-width: 600px !important;
+  white-space: pre-wrap !important;
+  word-break: break-all !important;
+}
+.pool-tooltip .el-popper__arrow {
+  display: block;
+}
+</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/kiro/index.vue

@@ -4,6 +4,7 @@ import { ElMessage } from 'element-plus';
 import Edit from './components/edit.vue';
 import DetailDialog from './components/detail.vue';
 import ExtractDialog from './components/extract.vue';
+import ReplenishDialog from './components/replenish.vue';
 import PatchDialog from '../components/patch.vue';
 import {
   addAccountPool,
@@ -12,21 +13,26 @@ import {
   getAccountPoolDetail,
   getAccountPoolList,
   updateAccountPoolRemark,
+  replenishAccountPool,
 } from '@/api/accountPool';
 
-const moduleKey = 'krio';
+const moduleKey = "krio";
 
 const loading = ref(false);
 const editVisible = ref(false);
-const editMode = ref('single');
+const editMode = ref("single");
 const detailVisible = ref(false);
 const extractVisible = ref(false);
 const extractTargetRow = ref(null);
+const batchExtractVisible = ref(false);
+const batchExtractForm = reactive({ platform: 'local', remark: '' });
+const replenishVisible = ref(false);
+const replenishForm = reactive({ type: 'tk', platform: 'local', remark: '' });
 const apiDocVisible = ref(false);
 const patchVisible = ref(false);
 
-const query = reactive({ keyword: '', status: '' });
+const query = reactive({ keyword: "", status: "" });
-const activeTypeTab = ref('all');
+const activeTypeTab = ref("all");
 
 const extractForm = reactive({ platform: 'local', type: 'account', remark: '' });
 
@@ -41,31 +47,42 @@ const pagination = reactive({ page: 1, pageSize: 30 });
 const pagedList = computed(() => tableData.value);
 
 function resetQuery() {
-  query.keyword = '';
+  query.keyword = "";
-  query.status = '';
+  query.status = "";
 }
 
 const typeTabs = computed(() => [
-  { label: '全部', value: 'all' },
+  { label: "全部", value: "all" },
-  { label: '账号密码', value: 'account' },
+  { label: "账号密码", value: "account" },
-  { label: '账号密码+Token', value: 'account_tk' },
+  { label: "账号密码+Token", value: "account_tk" },
-  { label: 'Token', value: 'tk' },
+  { label: "Token", value: "tk" },
 ]);
 
-watch(() => [query.keyword, query.status, activeTypeTab.value], () => {
+watch(
-  pagination.page = 1;
+  () => [query.keyword, query.status, activeTypeTab.value],
-  fetchList();
+  () => {
-});
+    pagination.page = 1;
-watch(() => [pagination.page, pagination.pageSize], () => { fetchList(); });
+    fetchList();
+  },
+);
+watch(
+  () => [pagination.page, pagination.pageSize],
+  () => {
+    fetchList();
+  },
+);
 
-function openAddDialog(mode = 'single') {
+function openAddDialog(mode = "single") {
   editMode.value = mode;
   editVisible.value = true;
 }
 
 async function saveRows(rows) {
   if (!rows.length) return;
-  if (rows.length === 1) { await addAccountPool(moduleKey, rows[0]); return; }
+  if (rows.length === 1) {
+    await addAccountPool(moduleKey, rows[0]);
+    return;
+  }
   await batchAddAccountPool(moduleKey, rows);
 }
 
@@ -73,27 +90,38 @@ async function handleEditSubmit(payload) {
   loading.value = true;
   try {
     await saveRows(payload.rows || []);
-    ElMessage.success(payload.mode === 'batch' ? '批量添加成功' : '账号添加成功');
+    ElMessage.success(
+      payload.mode === "batch" ? "批量添加成功" : "账号添加成功",
+    );
     await fetchList();
-  } finally { loading.value = false; }
+  } finally {
+    loading.value = false;
+  }
 }
 
-function handleSelectionChange(rows) { selectedRows.value = rows; }
+function handleSelectionChange(rows) {
+  selectedRows.value = rows;
+}
 
 function openDetail(row) {
   loading.value = true;
   getAccountPoolDetail(moduleKey, row.id)
     .then((res) => {
-      if (res?.code !== 200) { ElMessage.error(res?.msg || '获取详情失败'); return; }
+      if (res?.code !== 200) {
+        ElMessage.error(res?.msg || "获取详情失败");
+        return;
+      }
       detailRow.value = normalizeRow(res.data || {});
       detailVisible.value = true;
     })
-    .finally(() => { loading.value = false; });
+    .finally(() => {
+      loading.value = false;
+    });
 }
 
 function openExtractByRow(row) {
   extractTargetRow.value = row;
-  extractForm.platform = 'local';
+  extractForm.platform = "local";
   extractForm.type = row.type;
   extractForm.remark = row.remark || '';
   extractVisible.value = true;
@@ -127,15 +155,19 @@ async function handleExtract() {
   loading.value = true;
   try {
     const target = extractTargetRow.value;
-    if (!target) { ElMessage.warning('未找到提取目标'); return; }
+    if (!target) { ElMessage.warning("未找到提取目标"); return; }
     const res = await extractAccountPool(moduleKey, {
       id: target.id, type: target.type, platform: extractForm.platform, remark: extractForm.remark || '',
     });
-    if (res?.code !== 200) { ElMessage.error(res?.msg || '提取失败'); return; }
+    if (res?.code !== 200) { ElMessage.error(res?.msg || "提取失败"); return; }
-    ElMessage.success('提取成功');
+    ElMessage.success("提取成功");
     extractVisible.value = false;
+    const row = normalizeRow(res.data || {});
+    navigator.clipboard.writeText(rowToText(row)).catch(() => {});
     await fetchList();
-  } finally { loading.value = false; }
+  } finally {
+    loading.value = false;
+  }
 }
 
 async function handleSaveRemark(payload) {
@@ -153,41 +185,101 @@ async function handleSaveRemark(payload) {
 }
 
 function markExtractForSelected() {
-  if (!selectedRows.value.length) { ElMessage.warning('请先选择数据'); return; }
+  if (!selectedRows.value.length) { ElMessage.warning("请先选择数据"); return; }
+  batchExtractForm.platform = 'local';
+  batchExtractForm.remark = '';
+  batchExtractVisible.value = true;
+}
+
+async function handleBatchExtract() {
   loading.value = true;
-  Promise.all(
+  try {
-    selectedRows.value.map((row) =>
+    const results = await Promise.all(
-      extractAccountPool(moduleKey, { id: row.id, type: row.type, platform: 'local' })
+      selectedRows.value.map((row) =>
-    )
+        extractAccountPool(moduleKey, {
-  ).then(() => { ElMessage.success('批量提取成功'); fetchList(); })
+          id: row.id, type: row.type,
-   .finally(() => { loading.value = false; });
+          platform: batchExtractForm.platform,
+          remark: batchExtractForm.remark || '',
+        }),
+      ),
+    );
+    const succeeded = results.filter((r) => r?.code === 200).map((r) => normalizeRow(r.data || {}));
+    const failCount = results.length - succeeded.length;
+    if (failCount > 0) {
+      ElMessage.warning(`${succeeded.length} 条成功，${failCount} 条失败`);
+    } else {
+      ElMessage.success("批量提取成功");
+    }
+    batchExtractVisible.value = false;
+    if (succeeded.length) {
+      const text = succeeded.map(rowToText).filter(Boolean).join('\n');
+      navigator.clipboard.writeText(text).catch(() => {});
+    }
+    fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+function rowToText(row) {
+  const parts = [];
+  if (row.account) parts.push(row.account);
+  if (row.password) parts.push(row.password);
+  if (row.token) parts.push(row.token);
+  return parts.join(' / ');
+}
+
+async function handleReplenish() {
+  loading.value = true;
+  try {
+    const res = await replenishAccountPool(moduleKey, {
+      type: replenishForm.type,
+      platform: replenishForm.platform,
+      remark: replenishForm.remark || '',
+    });
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '补号失败'); return; }
+    ElMessage.success('补号成功，已复制到剪贴板');
+    replenishVisible.value = false;
+    const row = normalizeRow(res.data || {});
+    navigator.clipboard.writeText(rowToText(row)).catch(() => {});
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
 }
 
 function typeText(type) {
-  if (type === 'account') return '账号密码';
+  if (type === "account") return "账号密码";
-  if (type === 'account_tk') return '账号密码+Token';
+  if (type === "account_tk") return "账号密码+Token";
-  return 'Token';
+  return "Token";
 }
 
+const tooltipOpts = {
+  popperClass: 'pool-tooltip',
+  popperStyle: { maxWidth: '600px', wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
+};
+
 const PLATFORM_MAP = {
   local:     { label: '本地',   type: 'info' },
   xianyu:    { label: '闲鱼',   type: 'warning' },
-  taobao:    { label: '淘宝',   type: 'info' },
   pinduoduo: { label: '拼多多', type: 'danger' },
   jingdong:  { label: '京东',   type: 'primary' },
   douyin:    { label: '抖音',   type: 'success' },
-  ziyoushangcheng: { label: '自有商城', type: 'warning' },
 };
 
-function platformText(platform) { return PLATFORM_MAP[platform]?.label || (platform || '-'); }
+function platformText(platform) {
-function platformTagType(platform) { return PLATFORM_MAP[platform]?.type || 'info'; }
+  return PLATFORM_MAP[platform]?.label || platform || "-";
+}
+function platformTagType(platform) {
+  return PLATFORM_MAP[platform]?.type || "info";
+}
 
 function normalizeRow(raw) {
   const pick = (...keys) => {
     for (const key of keys) {
       if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
     }
-    return '';
+    return "";
   };
   const pickNullable = (...keys) => {
     for (const key of keys) {
@@ -196,23 +288,23 @@ function normalizeRow(raw) {
     return null;
   };
   const formatTime = (val) => {
-    if (!val) return '';
+    if (!val) return "";
     const d = new Date(val);
     if (isNaN(d)) return val;
-    const p = (v) => String(v).padStart(2, '0');
+    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())}`;
+    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
   };
   return {
-    id: pick('id', 'Id', 'ID'),
+    id: pick("id", "Id", "ID"),
-    type: pick('data_type', 'dataType', 'type'),
+    type: pick("data_type", "dataType", "type"),
-    account: pick('account', 'Account'),
+    account: pick("account", "Account"),
-    password: pick('password', 'Password'),
+    password: pick("password", "Password"),
-    token: pick('token', 'Token'),
+    token: pick("token", "Token"),
-    remark: pick('remark', 'Remark'),
+    remark: pick("remark", "Remark"),
-    extracted: Number(pick('is_extracted', 'isExtracted', 'IsExtracted')) === 1,
+    extracted: Number(pick("is_extracted", "isExtracted", "IsExtracted")) === 1,
-    extractedAt: formatTime(pickNullable('extracted_time', 'extractedAt')),
+    extractedAt: formatTime(pickNullable("extracted_time", "extractedAt")),
-    extractedPlatform: pickNullable('extracted_platform', 'extractedPlatform'),
+    extractedPlatform: pickNullable("extracted_platform", "extractedPlatform"),
-    createdAt: formatTime(pick('create_time', 'createdAt')),
+    createdAt: formatTime(pick("create_time", "createdAt")),
   };
 }
 
@@ -220,62 +312,66 @@ async function fetchList() {
   loading.value = true;
   try {
     const res = await getAccountPoolList(moduleKey, {
-      page: pagination.page, pageSize: pagination.pageSize,
+      page: pagination.page,
+      pageSize: pagination.pageSize,
       keyword: query.keyword || undefined,
       status: query.status || undefined,
-      type: activeTypeTab.value === 'all' ? undefined : activeTypeTab.value,
+      type: activeTypeTab.value === "all" ? undefined : activeTypeTab.value,
     });
-    if (res?.code !== 200) { ElMessage.error(res?.msg || '获取列表失败'); return; }
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || "获取列表失败");
+      return;
+    }
     const list = Array.isArray(res?.data?.list) ? res.data.list : [];
     tableData.value = list.map(normalizeRow);
     total.value = Number(res?.data?.total || 0);
-  } finally { loading.value = false; }
+  } finally {
+    loading.value = false;
+  }
 }
 
-function updateDeviceType() {
+onMounted(() => { fetchList(); });
-  isMobile.value = window.innerWidth <= 768;
-}
-
-onMounted(() => {
-  updateDeviceType();
-  window.addEventListener('resize', updateDeviceType);
-  fetchList();
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateDeviceType);
-});
 
 // ---- 接口说明数据 ----
-const BASE_URL = 'https://api.yunzer.cn';
+const BASE_URL = "https://api.yunzer.cn";
 
 const paramDocs = [
-  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / taobao / pinduoduo / jingdong / douyin / ziyoushangcheng / local' },
+  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / pinduoduo / jingdong / douyin / local' },
   { name: 'module', required: true, desc: '号池模块，指定从哪个产品的号池提取', values: 'cursor / windsurf / krio' },
   { name: 'data_type', required: false, desc: '账号类型，不传则提取任意类型', values: 'account / tk / account_tk' },
 ];
 
 const platformDocs = [
   { value: 'xianyu',    label: '闲鱼',   desc: '闲鱼平台发货调用' },
-  { value: 'taobao',    label: '淘宝',   desc: '淘宝平台发货调用' },
   { value: 'pinduoduo', label: '拼多多', desc: '拼多多平台发货调用' },
   { value: 'jingdong',  label: '京东',   desc: '京东平台发货调用' },
   { value: 'douyin',    label: '抖音',   desc: '抖音平台发货调用' },
-  { value: 'ziyoushangcheng', label: '自有商城', desc: '自有商城平台发货调用' },
   { value: 'local',     label: '本地',   desc: '本地手动调用' },
 ];
 
 const moduleDocs = [
-  { value: 'cursor',   label: 'Cursor',   desc: 'Cursor 号池' },
+  { value: "cursor", label: "Cursor", desc: "Cursor 号池" },
-  { value: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
+  { value: "windsurf", label: "Windsurf", desc: "Windsurf 号池" },
-  { value: 'krio',     label: 'Krio',     desc: 'Krio 号池' },
+  { value: "krio", label: "Krio", desc: "Krio 号池" },
 ];
 
 const examples = [
-  { label: '闲鱼 · 提取 Krio Token', url: `${BASE_URL}/api/getcard?type=xianyu&module=krio&data_type=tk` },
+  {
-  { label: '拼多多 · 提取 Krio 账号密码', url: `${BASE_URL}/api/getcard?type=pinduoduo&module=krio&data_type=account` },
+    label: "闲鱼 · 提取 Krio Token",
-  { label: '京东 · 提取 Cursor 任意类型', url: `${BASE_URL}/api/getcard?type=jingdong&module=cursor` },
+    url: `${BASE_URL}/api/getcard?type=xianyu&module=krio&data_type=tk`,
-  { label: '抖音 · 提取 Windsurf Token', url: `${BASE_URL}/api/getcard?type=douyin&module=windsurf&data_type=tk` },
+  },
+  {
+    label: "拼多多 · 提取 Krio 账号密码",
+    url: `${BASE_URL}/api/getcard?type=pinduoduo&module=krio&data_type=account`,
+  },
+  {
+    label: "京东 · 提取 Cursor 任意类型",
+    url: `${BASE_URL}/api/getcard?type=jingdong&module=cursor`,
+  },
+  {
+    label: "抖音 · 提取 Windsurf Token",
+    url: `${BASE_URL}/api/getcard?type=douyin&module=windsurf&data_type=tk`,
+  },
 ];
 
 const successResp = `// 纯 Token 类型（data_type=tk）
@@ -294,11 +390,16 @@ const errorResp = `// 无可用卡密
 { "code": 400, "msg": "缺少参数 type（来源平台）" }`;
 
 function copyText(text) {
-  copyToClipboard(text);
+  navigator.clipboard.writeText(text).then(() => { ElMessage.success('已复制'); });
 }
 
 function copyCardInfo(row) {
-  copyToClipboard(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);
+  if (!parts.length) { ElMessage.warning('无可复制内容'); return; }
+  navigator.clipboard.writeText(parts.join('\n')).then(() => { ElMessage.success('已复制'); });
 }
 
 </script>
@@ -312,15 +413,24 @@ function copyCardInfo(row) {
 
       <div class="toolbar">
         <div class="toolbar-left">
-          <el-input v-model="query.keyword" placeholder="搜索账号 / token / 备注" clearable class="w-260" />
+          <el-input
-          <el-select v-model="query.status" placeholder="提取状态" clearable class="w-140">
+            v-model="query.keyword"
+            placeholder="搜索账号 / token / 备注"
+            clearable
+            class="w-260"
+          />
+          <el-select
+            v-model="query.status"
+            placeholder="提取状态"
+            clearable
+            class="w-140"
+          >
             <el-option label="未提取" value="unused" />
             <el-option label="已提取" value="extracted" />
           </el-select>
           <el-button @click="resetQuery">重置</el-button>
         </div>
         <div class="toolbar-right">
-          <el-button type="warning" @click="openPatchDialog">补卡</el-button>
           <el-button type="primary" @click="openAddDialog('single')">添加账号</el-button>
           <el-button type="success" @click="openAddDialog('batch')">批量添加</el-button>
           <el-button @click="markExtractForSelected">批量标记提取</el-button>
@@ -329,36 +439,67 @@ function copyCardInfo(row) {
       </div>
 
       <el-tabs v-model="activeTypeTab" class="type-tabs">
-        <el-tab-pane v-for="tab in typeTabs" :key="tab.value" :label="tab.label" :name="tab.value" />
+        <el-tab-pane
+          v-for="tab in typeTabs"
+          :key="tab.value"
+          :label="tab.label"
+          :name="tab.value"
+        />
       </el-tabs>
 
-      <div class="table-scroll">
+      <el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
-        <el-table class="pool-table" :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="52" />
         <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column label="账号类型" width="100" align="center">
+        <el-table-column label="账号类型" width="160" align="center">
           <template #default="{ row }"><el-tag>{{ typeText(row.type) }}</el-tag></template>
         </el-table-column>
-        <el-table-column label="提取状态" width="100" align="center">
+        <el-table-column prop="account" label="账号" min-width="180" show-overflow-tooltip :tooltip-options="tooltipOpts" />
+        <el-table-column prop="password" label="密码" min-width="160" show-overflow-tooltip :tooltip-options="tooltipOpts">
+          <template #default="{ row }">{{ row.password || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="Token" min-width="200" show-overflow-tooltip :tooltip-options="tooltipOpts">
+          <template #default="{ row }">{{ row.token || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip :tooltip-options="tooltipOpts" />
+        <el-table-column label="提取状态" width="100">
           <template #default="{ row }">
-            <el-tag :type="row.extracted ? 'success' : 'info'">{{ row.extracted ? '已提取' : '未提取' }}</el-tag>
+            <el-tag :type="row.extracted ? 'success' : 'info'">{{
+              row.extracted ? "已提取" : "未提取"
+            }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="提取平台" width="110" align="center" >
+        <el-table-column prop="extractedAt" label="提取时间" width="180" />
+        <el-table-column label="提取平台" width="110">
           <template #default="{ row }">
-            <el-tag v-if="row.extractedPlatform" :type="platformTagType(row.extractedPlatform)" size="small">
+            <el-tag
+              v-if="row.extractedPlatform"
+              :type="platformTagType(row.extractedPlatform)"
+              size="small"
+            >
               {{ platformText(row.extractedPlatform) }}
             </el-tag>
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column prop="extractedAt" label="提取时间" width="180"  align="center" />
+        <el-table-column label="操作" width="220" fixed="right" align="center">
-        <el-table-column prop="remark" label="备注" min-width="140" />
-        <el-table-column label="操作" width="220" align="center">
           <template #default="{ row }">
-            <el-button link type="primary" @click="openDetail(row)">详情</el-button>
+            <el-button link type="primary" @click="openDetail(row)"
-            <el-button link type="warning" :disabled="row.extracted" @click="openExtractByRow(row)">提取</el-button>
+              >详情</el-button
-            <el-button v-if="row.extracted" link type="success" @click="copyCardInfo(row)">复制</el-button>
+            >
+            <el-button
+              link
+              type="warning"
+              :disabled="row.extracted"
+              @click="openExtractByRow(row)"
+              >提取</el-button
+            >
+            <el-button
+              v-if="row.extracted"
+              link
+              type="success"
+              @click="copyCardInfo(row)"
+              >复制</el-button
+            >
           </template>
         </el-table-column>
         </el-table>
@@ -397,18 +538,15 @@ function copyCardInfo(row) {
       @confirm="handleExtract"
     />
 
-    <PatchDialog
-      v-model="patchVisible"
-      :module="moduleKey"
-      :platform-map="PLATFORM_MAP"
-      :default-account-type="activeTypeTab === 'all' ? 'account' : activeTypeTab"
-      @success="fetchList"
-    />
-
     <!-- 接口说明抽屉 -->
-    <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
+    <el-drawer
+      v-model="apiDocVisible"
+      title="提卡接口说明"
+      size="560px"
+      direction="rtl"
+    >
       <div class="api-doc">
-        <el-alert type="info" :closable="false" style="margin-bottom:16px">
+        <el-alert type="info" :closable="false" style="margin-bottom: 16px">
           该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
         </el-alert>
         <div class="doc-section">
@@ -420,9 +558,16 @@ function copyCardInfo(row) {
           <div class="doc-title">请求参数</div>
           <el-table :data="paramDocs" border size="small">
             <el-table-column prop="name" label="参数名" width="120" />
-            <el-table-column prop="required" label="必填" width="60" align="center">
+            <el-table-column
+              prop="required"
+              label="必填"
+              width="60"
+              align="center"
+            >
               <template #default="{ row }">
-                <el-tag :type="row.required ? 'danger' : 'info'" size="small">{{ row.required ? '是' : '否' }}</el-tag>
+                <el-tag :type="row.required ? 'danger' : 'info'" size="small">{{
+                  row.required ? "是" : "否"
+                }}</el-tag>
               </template>
             </el-table-column>
             <el-table-column prop="desc" label="说明" />
@@ -435,7 +580,13 @@ function copyCardInfo(row) {
             <div class="example-label">{{ ex.label }}</div>
             <div class="example-url-wrap">
               <code class="example-url">{{ ex.url }}</code>
-              <el-button link type="primary" size="small" @click="copyText(ex.url)">复制</el-button>
+              <el-button
+                link
+                type="primary"
+                size="small"
+                @click="copyText(ex.url)"
+                >复制</el-button
+              >
             </div>
           </div>
         </div>
@@ -504,3 +655,11 @@ function copyCardInfo(row) {
 .example-url { flex: 1; font-size: 12px; color: #409eff; word-break: break-all; }
 .code-block { background: #1e1e1e; color: #d4d4d4; padding: 12px 16px; border-radius: 6px; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
 </style>
+
+<style>
+.pool-tooltip.el-popper {
+  max-width: 600px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

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

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

src/views/accountpool/windsurf/index.vue

@@ -4,7 +4,7 @@ import { ElMessage } from 'element-plus';
 import Edit from './components/edit.vue';
 import DetailDialog from './components/detail.vue';
 import ExtractDialog from './components/extract.vue';
-import PatchDialog from '../components/patch.vue';
+import ReplenishDialog from './components/replenish.vue';import PatchDialog from '../components/patch.vue';
 import {
   addAccountPool,
   batchAddAccountPool,
@@ -12,21 +12,26 @@ import {
   getAccountPoolDetail,
   getAccountPoolList,
   updateAccountPoolRemark,
+  replenishAccountPool,
 } from '@/api/accountPool';
 
-const moduleKey = 'windsurf';
+const moduleKey = "windsurf";
 
 const loading = ref(false);
 const editVisible = ref(false);
-const editMode = ref('single');
+const editMode = ref("single");
 const detailVisible = ref(false);
 const extractVisible = ref(false);
 const extractTargetRow = ref(null);
+const batchExtractVisible = ref(false);
+const batchExtractForm = reactive({ platform: 'local', remark: '' });
+const replenishVisible = ref(false);
+const replenishForm = reactive({ type: 'tk', platform: 'local', remark: '' });
 const apiDocVisible = ref(false);
 const patchVisible = ref(false);
 
-const query = reactive({ keyword: '', status: '' });
+const query = reactive({ keyword: "", status: "" });
-const activeTypeTab = ref('all');
+const activeTypeTab = ref("all");
 
 const extractForm = reactive({ platform: 'local', type: 'account', remark: '' });
 
@@ -41,31 +46,42 @@ const pagination = reactive({ page: 1, pageSize: 30 });
 const pagedList = computed(() => tableData.value);
 
 function resetQuery() {
-  query.keyword = '';
+  query.keyword = "";
-  query.status = '';
+  query.status = "";
 }
 
 const typeTabs = computed(() => [
-  { label: '全部', value: 'all' },
+  { label: "全部", value: "all" },
-  { label: '账号密码', value: 'account' },
+  { label: "账号密码", value: "account" },
-  { label: '账号密码+Token', value: 'account_tk' },
+  { label: "账号密码+Token", value: "account_tk" },
-  { label: 'Token', value: 'tk' },
+  { label: "Token", value: "tk" },
 ]);
 
-watch(() => [query.keyword, query.status, activeTypeTab.value], () => {
+watch(
-  pagination.page = 1;
+  () => [query.keyword, query.status, activeTypeTab.value],
-  fetchList();
+  () => {
-});
+    pagination.page = 1;
-watch(() => [pagination.page, pagination.pageSize], () => { fetchList(); });
+    fetchList();
+  },
+);
+watch(
+  () => [pagination.page, pagination.pageSize],
+  () => {
+    fetchList();
+  },
+);
 
-function openAddDialog(mode = 'single') {
+function openAddDialog(mode = "single") {
   editMode.value = mode;
   editVisible.value = true;
 }
 
 async function saveRows(rows) {
   if (!rows.length) return;
-  if (rows.length === 1) { await addAccountPool(moduleKey, rows[0]); return; }
+  if (rows.length === 1) {
+    await addAccountPool(moduleKey, rows[0]);
+    return;
+  }
   await batchAddAccountPool(moduleKey, rows);
 }
 
@@ -73,27 +89,38 @@ async function handleEditSubmit(payload) {
   loading.value = true;
   try {
     await saveRows(payload.rows || []);
-    ElMessage.success(payload.mode === 'batch' ? '批量添加成功' : '账号添加成功');
+    ElMessage.success(
+      payload.mode === "batch" ? "批量添加成功" : "账号添加成功",
+    );
     await fetchList();
-  } finally { loading.value = false; }
+  } finally {
+    loading.value = false;
+  }
 }
 
-function handleSelectionChange(rows) { selectedRows.value = rows; }
+function handleSelectionChange(rows) {
+  selectedRows.value = rows;
+}
 
 function openDetail(row) {
   loading.value = true;
   getAccountPoolDetail(moduleKey, row.id)
     .then((res) => {
-      if (res?.code !== 200) { ElMessage.error(res?.msg || '获取详情失败'); return; }
+      if (res?.code !== 200) {
+        ElMessage.error(res?.msg || "获取详情失败");
+        return;
+      }
       detailRow.value = normalizeRow(res.data || {});
       detailVisible.value = true;
     })
-    .finally(() => { loading.value = false; });
+    .finally(() => {
+      loading.value = false;
+    });
 }
 
 function openExtractByRow(row) {
   extractTargetRow.value = row;
-  extractForm.platform = 'local';
+  extractForm.platform = "local";
   extractForm.type = row.type;
   extractForm.remark = row.remark || '';
   extractVisible.value = true;
@@ -127,15 +154,19 @@ async function handleExtract() {
   loading.value = true;
   try {
     const target = extractTargetRow.value;
-    if (!target) { ElMessage.warning('未找到提取目标'); return; }
+    if (!target) { ElMessage.warning("未找到提取目标"); return; }
     const res = await extractAccountPool(moduleKey, {
       id: target.id, type: target.type, platform: extractForm.platform, remark: extractForm.remark || '',
     });
-    if (res?.code !== 200) { ElMessage.error(res?.msg || '提取失败'); return; }
+    if (res?.code !== 200) { ElMessage.error(res?.msg || "提取失败"); return; }
-    ElMessage.success('提取成功');
+    ElMessage.success("提取成功");
     extractVisible.value = false;
+    const row = normalizeRow(res.data || {});
+    navigator.clipboard.writeText(rowToText(row)).catch(() => {});
     await fetchList();
-  } finally { loading.value = false; }
+  } finally {
+    loading.value = false;
+  }
 }
 
 async function handleSaveRemark(payload) {
@@ -153,41 +184,101 @@ async function handleSaveRemark(payload) {
 }
 
 function markExtractForSelected() {
-  if (!selectedRows.value.length) { ElMessage.warning('请先选择数据'); return; }
+  if (!selectedRows.value.length) { ElMessage.warning("请先选择数据"); return; }
+  batchExtractForm.platform = 'local';
+  batchExtractForm.remark = '';
+  batchExtractVisible.value = true;
+}
+
+async function handleBatchExtract() {
   loading.value = true;
-  Promise.all(
+  try {
-    selectedRows.value.map((row) =>
+    const results = await Promise.all(
-      extractAccountPool(moduleKey, { id: row.id, type: row.type, platform: 'local' })
+      selectedRows.value.map((row) =>
-    )
+        extractAccountPool(moduleKey, {
-  ).then(() => { ElMessage.success('批量提取成功'); fetchList(); })
+          id: row.id, type: row.type,
-   .finally(() => { loading.value = false; });
+          platform: batchExtractForm.platform,
+          remark: batchExtractForm.remark || '',
+        }),
+      ),
+    );
+    const succeeded = results.filter((r) => r?.code === 200).map((r) => normalizeRow(r.data || {}));
+    const failCount = results.length - succeeded.length;
+    if (failCount > 0) {
+      ElMessage.warning(`${succeeded.length} 条成功，${failCount} 条失败`);
+    } else {
+      ElMessage.success("批量提取成功");
+    }
+    batchExtractVisible.value = false;
+    if (succeeded.length) {
+      const text = succeeded.map(rowToText).filter(Boolean).join('\n');
+      navigator.clipboard.writeText(text).catch(() => {});
+    }
+    fetchList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+function rowToText(row) {
+  const parts = [];
+  if (row.account) parts.push(row.account);
+  if (row.password) parts.push(row.password);
+  if (row.token) parts.push(row.token);
+  return parts.join(' / ');
+}
+
+async function handleReplenish() {
+  loading.value = true;
+  try {
+    const res = await replenishAccountPool(moduleKey, {
+      type: replenishForm.type,
+      platform: replenishForm.platform,
+      remark: replenishForm.remark || '',
+    });
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '补号失败'); return; }
+    ElMessage.success('补号成功，已复制到剪贴板');
+    replenishVisible.value = false;
+    const row = normalizeRow(res.data || {});
+    navigator.clipboard.writeText(rowToText(row)).catch(() => {});
+    await fetchList();
+  } finally {
+    loading.value = false;
+  }
 }
 
 function typeText(type) {
-  if (type === 'account') return '账号密码';
+  if (type === "account") return "账号密码";
-  if (type === 'account_tk') return '账号密码+Token';
+  if (type === "account_tk") return "账号密码+Token";
-  return 'Token';
+  return "Token";
 }
 
+const tooltipOpts = {
+  popperClass: 'pool-tooltip',
+  popperStyle: { maxWidth: '600px', wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
+};
+
 const PLATFORM_MAP = {
   local:     { label: '本地',   type: 'info' },
   xianyu:    { label: '闲鱼',   type: 'warning' },
-  taobao:    { label: '淘宝',   type: 'info' },
   pinduoduo: { label: '拼多多', type: 'danger' },
   jingdong:  { label: '京东',   type: 'primary' },
   douyin:    { label: '抖音',   type: 'success' },
-  ziyoushangcheng: { label: '自有商城', type: 'warning' },
 };
 
-function platformText(platform) { return PLATFORM_MAP[platform]?.label || (platform || '-'); }
+function platformText(platform) {
-function platformTagType(platform) { return PLATFORM_MAP[platform]?.type || 'info'; }
+  return PLATFORM_MAP[platform]?.label || platform || "-";
+}
+function platformTagType(platform) {
+  return PLATFORM_MAP[platform]?.type || "info";
+}
 
 function normalizeRow(raw) {
   const pick = (...keys) => {
     for (const key of keys) {
       if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
     }
-    return '';
+    return "";
   };
   const pickNullable = (...keys) => {
     for (const key of keys) {
@@ -196,23 +287,23 @@ function normalizeRow(raw) {
     return null;
   };
   const formatTime = (val) => {
-    if (!val) return '';
+    if (!val) return "";
     const d = new Date(val);
     if (isNaN(d)) return val;
-    const p = (v) => String(v).padStart(2, '0');
+    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())}`;
+    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
   };
   return {
-    id: pick('id', 'Id', 'ID'),
+    id: pick("id", "Id", "ID"),
-    type: pick('data_type', 'dataType', 'type'),
+    type: pick("data_type", "dataType", "type"),
-    account: pick('account', 'Account'),
+    account: pick("account", "Account"),
-    password: pick('password', 'Password'),
+    password: pick("password", "Password"),
-    token: pick('token', 'Token'),
+    token: pick("token", "Token"),
-    remark: pick('remark', 'Remark'),
+    remark: pick("remark", "Remark"),
-    extracted: Number(pick('is_extracted', 'isExtracted', 'IsExtracted')) === 1,
+    extracted: Number(pick("is_extracted", "isExtracted", "IsExtracted")) === 1,
-    extractedAt: formatTime(pickNullable('extracted_time', 'extractedAt')),
+    extractedAt: formatTime(pickNullable("extracted_time", "extractedAt")),
-    extractedPlatform: pickNullable('extracted_platform', 'extractedPlatform'),
+    extractedPlatform: pickNullable("extracted_platform", "extractedPlatform"),
-    createdAt: formatTime(pick('create_time', 'createdAt')),
+    createdAt: formatTime(pick("create_time", "createdAt")),
   };
 }
 
@@ -220,62 +311,66 @@ async function fetchList() {
   loading.value = true;
   try {
     const res = await getAccountPoolList(moduleKey, {
-      page: pagination.page, pageSize: pagination.pageSize,
+      page: pagination.page,
+      pageSize: pagination.pageSize,
       keyword: query.keyword || undefined,
       status: query.status || undefined,
-      type: activeTypeTab.value === 'all' ? undefined : activeTypeTab.value,
+      type: activeTypeTab.value === "all" ? undefined : activeTypeTab.value,
     });
-    if (res?.code !== 200) { ElMessage.error(res?.msg || '获取列表失败'); return; }
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || "获取列表失败");
+      return;
+    }
     const list = Array.isArray(res?.data?.list) ? res.data.list : [];
     tableData.value = list.map(normalizeRow);
     total.value = Number(res?.data?.total || 0);
-  } finally { loading.value = false; }
+  } finally {
+    loading.value = false;
+  }
 }
 
-function updateDeviceType() {
+onMounted(() => { fetchList(); });
-  isMobile.value = window.innerWidth <= 768;
-}
-
-onMounted(() => {
-  updateDeviceType();
-  window.addEventListener('resize', updateDeviceType);
-  fetchList();
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateDeviceType);
-});
 
 // ---- 接口说明数据 ----
-const BASE_URL = 'https://api.yunzer.cn';
+const BASE_URL = "https://api.yunzer.cn";
 
 const paramDocs = [
-  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / taobao / pinduoduo / jingdong / douyin / ziyoushangcheng / local' },
+  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / pinduoduo / jingdong / douyin / local' },
   { name: 'module', required: true, desc: '号池模块，指定从哪个产品的号池提取', values: 'cursor / windsurf / krio' },
   { name: 'data_type', required: false, desc: '账号类型，不传则提取任意类型', values: 'account / tk / account_tk' },
 ];
 
 const platformDocs = [
   { value: 'xianyu',    label: '闲鱼',   desc: '闲鱼平台发货调用' },
-  { value: 'taobao',    label: '淘宝',   desc: '淘宝平台发货调用' },
   { value: 'pinduoduo', label: '拼多多', desc: '拼多多平台发货调用' },
   { value: 'jingdong',  label: '京东',   desc: '京东平台发货调用' },
   { value: 'douyin',    label: '抖音',   desc: '抖音平台发货调用' },
-  { value: 'ziyoushangcheng', label: '自有商城', desc: '自有商城平台发货调用' },
   { value: 'local',     label: '本地',   desc: '本地手动调用' },
 ];
 
 const moduleDocs = [
-  { value: 'cursor',   label: 'Cursor',   desc: 'Cursor 号池' },
+  { value: "cursor", label: "Cursor", desc: "Cursor 号池" },
-  { value: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
+  { value: "windsurf", label: "Windsurf", desc: "Windsurf 号池" },
-  { value: 'krio',     label: 'Krio',     desc: 'Krio 号池' },
+  { value: "krio", label: "Krio", desc: "Krio 号池" },
 ];
 
 const examples = [
-  { label: '闲鱼 · 提取 Windsurf Token', url: `${BASE_URL}/api/getcard?type=xianyu&module=windsurf&data_type=tk` },
+  {
-  { label: '拼多多 · 提取 Windsurf 账号密码', url: `${BASE_URL}/api/getcard?type=pinduoduo&module=windsurf&data_type=account` },
+    label: "闲鱼 · 提取 Windsurf Token",
-  { label: '京东 · 提取 Cursor 任意类型', url: `${BASE_URL}/api/getcard?type=jingdong&module=cursor` },
+    url: `${BASE_URL}/api/getcard?type=xianyu&module=windsurf&data_type=tk`,
-  { label: '抖音 · 提取 Krio Token', url: `${BASE_URL}/api/getcard?type=douyin&module=krio&data_type=tk` },
+  },
+  {
+    label: "拼多多 · 提取 Windsurf 账号密码",
+    url: `${BASE_URL}/api/getcard?type=pinduoduo&module=windsurf&data_type=account`,
+  },
+  {
+    label: "京东 · 提取 Cursor 任意类型",
+    url: `${BASE_URL}/api/getcard?type=jingdong&module=cursor`,
+  },
+  {
+    label: "抖音 · 提取 Krio Token",
+    url: `${BASE_URL}/api/getcard?type=douyin&module=krio&data_type=tk`,
+  },
 ];
 
 const successResp = `// 纯 Token 类型（data_type=tk）
@@ -294,11 +389,16 @@ const errorResp = `// 无可用卡密
 { "code": 400, "msg": "缺少参数 type（来源平台）" }`;
 
 function copyText(text) {
-  copyToClipboard(text);
+  navigator.clipboard.writeText(text).then(() => { ElMessage.success('已复制'); });
 }
 
 function copyCardInfo(row) {
-  copyToClipboard(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);
+  if (!parts.length) { ElMessage.warning('无可复制内容'); return; }
+  navigator.clipboard.writeText(parts.join('\n')).then(() => { ElMessage.success('已复制'); });
 }
 
 </script>
@@ -312,15 +412,24 @@ function copyCardInfo(row) {
 
       <div class="toolbar">
         <div class="toolbar-left">
-          <el-input v-model="query.keyword" placeholder="搜索账号 / token / 备注" clearable class="w-260" />
+          <el-input
-          <el-select v-model="query.status" placeholder="提取状态" clearable class="w-140">
+            v-model="query.keyword"
+            placeholder="搜索账号 / token / 备注"
+            clearable
+            class="w-260"
+          />
+          <el-select
+            v-model="query.status"
+            placeholder="提取状态"
+            clearable
+            class="w-140"
+          >
             <el-option label="未提取" value="unused" />
             <el-option label="已提取" value="extracted" />
           </el-select>
           <el-button @click="resetQuery">重置</el-button>
         </div>
         <div class="toolbar-right">
-          <el-button type="warning" @click="openPatchDialog">补卡</el-button>
           <el-button type="primary" @click="openAddDialog('single')">添加账号</el-button>
           <el-button type="success" @click="openAddDialog('batch')">批量添加</el-button>
           <el-button @click="markExtractForSelected">批量标记提取</el-button>
@@ -329,36 +438,67 @@ function copyCardInfo(row) {
       </div>
 
       <el-tabs v-model="activeTypeTab" class="type-tabs">
-        <el-tab-pane v-for="tab in typeTabs" :key="tab.value" :label="tab.label" :name="tab.value" />
+        <el-tab-pane
+          v-for="tab in typeTabs"
+          :key="tab.value"
+          :label="tab.label"
+          :name="tab.value"
+        />
       </el-tabs>
 
-      <div class="table-scroll">
+      <el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
-        <el-table class="pool-table" :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="52" />
         <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column label="账号类型" width="100" align="center">
+        <el-table-column label="账号类型" width="160" align="center">
           <template #default="{ row }"><el-tag>{{ typeText(row.type) }}</el-tag></template>
         </el-table-column>
-        <el-table-column label="提取状态" width="100" align="center">
+        <el-table-column prop="account" label="账号" min-width="180" show-overflow-tooltip :tooltip-options="tooltipOpts" />
+        <el-table-column prop="password" label="密码" min-width="160" show-overflow-tooltip :tooltip-options="tooltipOpts">
+          <template #default="{ row }">{{ row.password || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="Token" min-width="200" show-overflow-tooltip :tooltip-options="tooltipOpts">
+          <template #default="{ row }">{{ row.token || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip :tooltip-options="tooltipOpts" />
+        <el-table-column label="提取状态" width="100">
           <template #default="{ row }">
-            <el-tag :type="row.extracted ? 'success' : 'info'">{{ row.extracted ? '已提取' : '未提取' }}</el-tag>
+            <el-tag :type="row.extracted ? 'success' : 'info'">{{
+              row.extracted ? "已提取" : "未提取"
+            }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="提取平台" width="110" align="center" >
+        <el-table-column prop="extractedAt" label="提取时间" width="180" />
+        <el-table-column label="提取平台" width="110">
           <template #default="{ row }">
-            <el-tag v-if="row.extractedPlatform" :type="platformTagType(row.extractedPlatform)" size="small">
+            <el-tag
+              v-if="row.extractedPlatform"
+              :type="platformTagType(row.extractedPlatform)"
+              size="small"
+            >
               {{ platformText(row.extractedPlatform) }}
             </el-tag>
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column prop="extractedAt" label="提取时间" width="180" align="center" />
+        <el-table-column label="操作" width="220" fixed="right" align="center">
-        <el-table-column prop="remark" label="备注" min-width="140" />
-        <el-table-column label="操作" width="220" align="center">
           <template #default="{ row }">
-            <el-button link type="primary" @click="openDetail(row)">详情</el-button>
+            <el-button link type="primary" @click="openDetail(row)"
-            <el-button link type="warning" :disabled="row.extracted" @click="openExtractByRow(row)">提取</el-button>
+              >详情</el-button
-            <el-button v-if="row.extracted" link type="success" @click="copyCardInfo(row)">复制</el-button>
+            >
+            <el-button
+              link
+              type="warning"
+              :disabled="row.extracted"
+              @click="openExtractByRow(row)"
+              >提取</el-button
+            >
+            <el-button
+              v-if="row.extracted"
+              link
+              type="success"
+              @click="copyCardInfo(row)"
+              >复制</el-button
+            >
           </template>
         </el-table-column>
         </el-table>
@@ -397,18 +537,15 @@ function copyCardInfo(row) {
       @confirm="handleExtract"
     />
 
-    <PatchDialog
-      v-model="patchVisible"
-      :module="moduleKey"
-      :platform-map="PLATFORM_MAP"
-      :default-account-type="activeTypeTab === 'all' ? 'account' : activeTypeTab"
-      @success="fetchList"
-    />
-
     <!-- 接口说明抽屉 -->
-    <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
+    <el-drawer
+      v-model="apiDocVisible"
+      title="提卡接口说明"
+      size="560px"
+      direction="rtl"
+    >
       <div class="api-doc">
-        <el-alert type="info" :closable="false" style="margin-bottom:16px">
+        <el-alert type="info" :closable="false" style="margin-bottom: 16px">
           该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
         </el-alert>
         <div class="doc-section">
@@ -420,9 +557,16 @@ function copyCardInfo(row) {
           <div class="doc-title">请求参数</div>
           <el-table :data="paramDocs" border size="small">
             <el-table-column prop="name" label="参数名" width="120" />
-            <el-table-column prop="required" label="必填" width="60" align="center">
+            <el-table-column
+              prop="required"
+              label="必填"
+              width="60"
+              align="center"
+            >
               <template #default="{ row }">
-                <el-tag :type="row.required ? 'danger' : 'info'" size="small">{{ row.required ? '是' : '否' }}</el-tag>
+                <el-tag :type="row.required ? 'danger' : 'info'" size="small">{{
+                  row.required ? "是" : "否"
+                }}</el-tag>
               </template>
             </el-table-column>
             <el-table-column prop="desc" label="说明" />
@@ -435,7 +579,13 @@ function copyCardInfo(row) {
             <div class="example-label">{{ ex.label }}</div>
             <div class="example-url-wrap">
               <code class="example-url">{{ ex.url }}</code>
-              <el-button link type="primary" size="small" @click="copyText(ex.url)">复制</el-button>
+              <el-button
+                link
+                type="primary"
+                size="small"
+                @click="copyText(ex.url)"
+                >复制</el-button
+              >
             </div>
           </div>
         </div>
@@ -504,3 +654,11 @@ function copyCardInfo(row) {
 .example-url { flex: 1; font-size: 12px; color: #409eff; word-break: break-all; }
 .code-block { background: #1e1e1e; color: #d4d4d4; padding: 12px 16px; border-radius: 6px; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
 </style>
+
+<style>
+.pool-tooltip.el-popper {
+  max-width: 600px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

src/views/analytics/users/index.vue

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

src/views/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 }">
@@ -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>
@@ -36,10 +36,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, shallowRef } from "vue";
+import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-import { User, Pointer, Connection, Histogram } from "@element-plus/icons-vue";
+import { User, Pointer, Connection, Histogram } from '@element-plus/icons-vue';
 
+// --- 类型定义 ---
 interface SummaryItem {
   title: string;
   value: number;
@@ -49,96 +50,78 @@ interface SummaryItem {
   isUp: boolean;
 }
 
+// --- 响应式数据 ---
 const lineChartRef = ref<HTMLElement | null>(null);
 const pieChartRef = ref<HTMLElement | null>(null);
 const lineChartInstance = shallowRef<echarts.ECharts | null>(null);
 const pieChartInstance = shallowRef<echarts.ECharts | null>(null);
 
 const summaryData = ref<SummaryItem[]>([
-  {
+  { title: '总用户数', value: 12840, icon: User, color: '#3973FF', percentage: 12, isUp: true },
-    title: "总用户数",
+  { title: '今日新增', value: 156, icon: Pointer, color: '#67C23A', percentage: 5, isUp: true },
-    value: 12840,
+  { title: '活跃用户', value: 3420, icon: Connection, color: '#E6A23C', percentage: 2, isUp: false },
-    icon: User,
+  { title: '留存率', value: 85, icon: Histogram, color: '#F56C6C', percentage: 1, isUp: true },
-    color: "#3973FF",
-    percentage: 12,
-    isUp: true,
-  },
-  {
-    title: "今日新增",
-    value: 156,
-    icon: Pointer,
-    color: "#67C23A",
-    percentage: 5,
-    isUp: true,
-  },
-  {
-    title: "活跃用户",
-    value: 3420,
-    icon: Connection,
-    color: "#E6A23C",
-    percentage: 2,
-    isUp: false,
-  },
-  {
-    title: "留存率",
-    value: 85,
-    icon: Histogram,
-    color: "#F56C6C",
-    percentage: 1,
-    isUp: true,
-  },
 ]);
 
+// --- 初始化图表 ---
 const initCharts = () => {
+  // 折线图配置
   if (lineChartRef.value) {
     lineChartInstance.value = echarts.init(lineChartRef.value);
     lineChartInstance.value.setOption({
-      tooltip: { trigger: "axis" },
+      tooltip: { trigger: 'axis' },
-      grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
       xAxis: {
-        type: "category",
+        type: 'category',
         boundaryGap: false,
-        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
-      yAxis: { type: "value" },
+      yAxis: { type: 'value' },
       series: [
         {
-          name: "新增用户",
+          name: '新增用户',
-          type: "line",
+          type: 'line',
           smooth: true,
           data: [120, 132, 101, 134, 90, 230, 210],
           areaStyle: { opacity: 0.3 },
-          itemStyle: { color: "#3973FF" },
+          itemStyle: { color: '#3973FF' }
-        },
+        }
-      ],
+      ]
     });
   }
 
+  // 饼图配置
   if (pieChartRef.value) {
     pieChartInstance.value = echarts.init(pieChartRef.value);
     pieChartInstance.value.setOption({
-      tooltip: { trigger: "item" },
+      tooltip: { trigger: 'item' },
-      legend: { bottom: "0%", left: "center" },
+      legend: {
+        orient: 'vertical',
+        right: '5%',
+        top: 'center',
+      },
       series: [
         {
-          name: "等级分布",
+          name: '等级分布',
-          type: "pie",
+          type: 'pie',
-          radius: ["40%", "70%"],
+          radius: ['40%', '70%'],
+          center: ['35%', '50%'],
           avoidLabelOverlap: false,
-          itemStyle: { borderRadius: 10, borderColor: "#fff", borderWidth: 2 },
+          itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
           label: { show: false },
           data: [
-            { value: 1048, name: "普通用户" },
+            { value: 1048, name: '普通用户' },
-            { value: 735, name: "VIP会员" },
+            { value: 735, name: 'VIP会员' },
-            { value: 580, name: "超级管理员" },
+            { value: 580, name: '超级管理员' },
-            { value: 484, name: "运营人员" },
+            { value: 484, name: '运营人员' }
-          ],
+          ]
-        },
+        }
-      ],
+      ]
     });
   }
 };
 
+// --- 生命周期与自适应 ---
 const handleResize = () => {
   lineChartInstance.value?.resize();
   pieChartInstance.value?.resize();
@@ -146,23 +129,25 @@ const handleResize = () => {
 
 onMounted(() => {
   initCharts();
-  window.addEventListener("resize", handleResize);
+  window.addEventListener('resize', handleResize);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize);
 });
 </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 +155,7 @@ onUnmounted(() => {
         .icon-box {
           width: 56px;
           height: 56px;
+          flex-shrink: 0;
           border-radius: 12px;
           display: flex;
           align-items: center;
@@ -180,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;
@@ -192,16 +182,9 @@ onUnmounted(() => {
           }
           .trend {
             font-size: 12px;
-            &.up {
+            &.up { color: #67c23a; }
-              color: #67c23a;
+            &.down { color: #f56c6c; }
-            }
+            span { color: #909399; margin-left: 4px; }
-            &.down {
-              color: #f56c6c;
-            }
-            span {
-              color: #909399;
-              margin-left: 4px;
-            }
           }
         }
       }
@@ -209,6 +192,9 @@ onUnmounted(() => {
   }
 
   .charts-row {
+    .el-col {
+      margin-bottom: 16px;
+    }
     .chart-box {
       height: 350px;
       width: 100%;
@@ -216,9 +202,32 @@ 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;
   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>

新建 文本文档.txt

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