增加提取接口

src/views/accountpool/cursor/index.vue

@@ -18,6 +18,7 @@ const editMode = ref('single');
 const detailVisible = ref(false);
 const extractVisible = ref(false);
 const extractTargetRow = ref(null);
+const apiDocVisible = ref(false);
 
 const query = reactive({
   keyword: '',
@@ -26,16 +27,15 @@ const query = reactive({
 const activeTypeTab = ref('all');
 
 const extractForm = reactive({
-  platform: 'local', // local | xianyu
+  platform: 'local',
-  type: 'account', // account | tk | account_tk
+  type: 'account',
 });
 
-const detailRow = ref(null);
-
 const tableData = ref([]);
 const total = ref(0);
 
 const selectedRows = ref([]);
+const detailRow = ref(null);
 const pagination = reactive({
   page: 1,
   pageSize: 30,
@@ -196,9 +196,20 @@ function typeText(type) {
   return 'Token';
 }
 
+const PLATFORM_MAP = {
+  local:      { label: '本地',   type: 'info' },
+  xianyu:     { label: '闲鱼',   type: 'warning' },
+  pinduoduo:  { label: '拼多多', type: 'danger' },
+  jingdong:   { label: '京东',   type: 'primary' },
+  douyin:     { label: '抖音',   type: 'success' },
+};
+
 function platformText(platform) {
-  if (!platform) return '-';
+  return PLATFORM_MAP[platform]?.label || (platform || '-');
-  return platform === 'local' ? '本地' : '闲鱼';
+}
+
+function platformTagType(platform) {
+  return PLATFORM_MAP[platform]?.type || 'info';
 }
 
 function normalizeRow(raw) {
@@ -247,6 +258,81 @@ async function fetchList() {
 onMounted(() => {
   fetchList();
 });
+
+// ---- 接口说明数据 ----
+const BASE_URL = 'https://api.yunzer.cn';
+
+const paramDocs = [
+  { 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: 'pinduoduo', label: '拼多多', desc: '拼多多平台发货调用' },
+  { value: 'jingdong',  label: '京东',   desc: '京东平台发货调用' },
+  { value: 'douyin',    label: '抖音',   desc: '抖音平台发货调用' },
+  { value: 'local',     label: '本地',   desc: '本地手动调用' },
+];
+
+const moduleDocs = [
+  { value: 'cursor', label: 'Cursor', desc: 'Cursor 号池' },
+  { value: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
+  { value: 'krio', label: 'Krio', desc: 'Krio 号池' },
+];
+
+const examples = [
+  { label: '闲鱼 · 提取 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: '京东 · 提取 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 = `// 账号密码类型（data_type=account）
+{
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "account",
+    "account": "user@example.com",
+    "password": "your_password"
+  }
+}
+
+// 账号密码+Token 类型（data_type=account_tk）
+{
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "account_tk",
+    "account": "user@example.com",
+    "password": "your_password",
+    "token": "eyJhbGciOiJIUzI1NiIs..."
+  }
+}
+
+// 纯 Token 类型（data_type=tk）
+{
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "tk",
+    "token": "eyJhbGciOiJIUzI1NiIs..."
+  }
+}`;
+
+const errorResp = `// 无可用卡密
+{ "code": 404, "msg": "暂无可用卡密" }
+
+// 参数错误
+{ "code": 400, "msg": "缺少参数 type（来源平台）" }`;
+
+function copyText(text) {
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage.success('已复制');
+  });
+}
 </script>
 
 <template>
@@ -276,6 +362,7 @@ onMounted(() => {
           <el-button type="primary" @click="openAddDialog('single')">添加账号</el-button>
           <el-button type="success" @click="openAddDialog('batch')">批量添加</el-button>
           <el-button @click="markExtractForSelected">批量标记提取</el-button>
+          <el-button @click="apiDocVisible = true">接口说明</el-button>
         </div>
       </div>
 
@@ -303,19 +390,15 @@ onMounted(() => {
             <el-tag>{{ typeText(row.type) }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="account" label="账号" min-width="180" />
+        <el-table-column prop="account" label="账号" min-width="180" show-overflow-tooltip />
-        <el-table-column label="密码/Token" min-width="240">
+        <el-table-column label="密码/Token" min-width="240" show-overflow-tooltip>
           <template #default="{ row }">
-            <span v-if="row.type === 'account'">
+            <span v-if="row.type === 'account'">{{ row.password || '-' }}</span>
-              {{ row.password || '-' }}
+            <span v-else-if="row.type === 'account_tk'">{{ `${row.password || '-'} / ${row.token || '-'}` }}</span>
-            </span>
-            <span v-else-if="row.type === 'account_tk'">
-              {{ `${row.password || '-'} / ${row.token || '-'}` }}
-            </span>
             <span v-else>{{ row.token || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="remark" label="备注" min-width="140" />
+        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip />
         <el-table-column label="提取状态" width="100">
           <template #default="{ row }">
             <el-tag :type="row.extracted ? 'success' : 'info'">
@@ -326,10 +409,13 @@ onMounted(() => {
         <el-table-column prop="extractedAt" label="提取时间" width="180" />
         <el-table-column label="提取平台" width="120">
           <template #default="{ row }">
-            {{ platformText(row.extractedPlatform) }}
+            <el-tag v-if="row.extractedPlatform" :type="platformTagType(row.extractedPlatform)" size="small">
+              {{ platformText(row.extractedPlatform) }}
+            </el-tag>
+            <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
+        <el-table-column label="操作" width="180" fixed="right" align="center"> 
           <template #default="{ row }">
             <el-button link type="primary" @click="openDetail(row)">详情</el-button>
             <el-button
@@ -380,7 +466,10 @@ onMounted(() => {
           {{ detailRow.extractedAt || '-' }}
         </el-descriptions-item>
         <el-descriptions-item label="提取平台">
-          {{ platformText(detailRow.extractedPlatform) }}
+          <el-tag v-if="detailRow.extractedPlatform" :type="platformTagType(detailRow.extractedPlatform)" size="small">
+            {{ platformText(detailRow.extractedPlatform) }}
+          </el-tag>
+          <span v-else>-</span>
         </el-descriptions-item>
         <el-descriptions-item label="备注">
           {{ detailRow.remark || '-' }}
@@ -394,10 +483,9 @@ onMounted(() => {
           <el-input :model-value="typeText(extractForm.type)" disabled />
         </el-form-item>
         <el-form-item label="提取平台">
-          <el-radio-group v-model="extractForm.platform">
+          <el-select v-model="extractForm.platform" style="width:100%">
-            <el-radio value="local">本地</el-radio>
+            <el-option v-for="(v, k) in PLATFORM_MAP" :key="k" :value="k" :label="v.label" />
-            <el-radio value="xianyu">闲鱼</el-radio>
+          </el-select>
-          </el-radio-group>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -407,6 +495,76 @@ onMounted(() => {
         </el-button>
       </template>
     </el-dialog>
+
+    <!-- 接口说明抽屉 -->
+    <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
+      <div class="api-doc">
+        <el-alert type="info" :closable="false" style="margin-bottom:16px">
+          该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
+        </el-alert>
+
+        <div class="doc-section">
+          <div class="doc-title">接口地址</div>
+          <el-tag type="success" class="method-tag">GET</el-tag>
+          <code class="url-code">https://api.yunzer.cn/api/getcard</code>
+        </div>
+
+        <div class="doc-section">
+          <div class="doc-title">请求参数</div>
+          <el-table :data="paramDocs" border size="small">
+            <el-table-column prop="name" label="参数名" width="120" />
+            <el-table-column prop="required" label="必填" width="60" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.required ? 'danger' : 'info'" size="small">
+                  {{ row.required ? '是' : '否' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="desc" label="说明" />
+            <el-table-column prop="values" label="可选值" min-width="160" />
+          </el-table>
+        </div>
+
+        <div class="doc-section">
+          <div class="doc-title">调用示例</div>
+          <div v-for="ex in examples" :key="ex.label" class="example-item">
+            <div class="example-label">{{ ex.label }}</div>
+            <div class="example-url-wrap">
+              <code class="example-url">{{ ex.url }}</code>
+              <el-button link type="primary" size="small" @click="copyText(ex.url)">复制</el-button>
+            </div>
+          </div>
+        </div>
+
+        <div class="doc-section">
+          <div class="doc-title">成功响应</div>
+          <pre class="code-block">{{ successResp }}</pre>
+        </div>
+
+        <div class="doc-section">
+          <div class="doc-title">失败响应</div>
+          <pre class="code-block">{{ errorResp }}</pre>
+        </div>
+
+        <div class="doc-section">
+          <div class="doc-title">支持的平台（type 参数）</div>
+          <el-table :data="platformDocs" border size="small">
+            <el-table-column prop="value" label="type 值" width="130" />
+            <el-table-column prop="label" label="平台" width="100" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </div>
+
+        <div class="doc-section">
+          <div class="doc-title">支持的号池（module 参数）</div>
+          <el-table :data="moduleDocs" border size="small">
+            <el-table-column prop="value" label="module 值" width="130" />
+            <el-table-column prop="label" label="号池" width="100" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -459,4 +617,76 @@ onMounted(() => {
   justify-content: flex-end;
   margin-top: 14px;
 }
+
+/* 接口说明抽屉 */
+.api-doc {
+  padding: 0 4px;
+  font-size: 13px;
+}
+
+.doc-section {
+  margin-bottom: 24px;
+}
+
+.doc-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 10px;
+  color: #303133;
+  border-left: 3px solid #409eff;
+  padding-left: 8px;
+}
+
+.method-tag {
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.url-code {
+  background: #f5f7fa;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #e6a23c;
+  word-break: break-all;
+}
+
+.example-item {
+  margin-bottom: 10px;
+}
+
+.example-label {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 4px;
+}
+
+.example-url-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #f5f7fa;
+  padding: 6px 10px;
+  border-radius: 4px;
+}
+
+.example-url {
+  flex: 1;
+  font-size: 12px;
+  color: #409eff;
+  word-break: break-all;
+}
+
+.code-block {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px 16px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
 </style>

src/views/accountpool/kiro/index.vue

@@ -18,28 +18,18 @@ const editMode = ref('single');
 const detailVisible = ref(false);
 const extractVisible = ref(false);
 const extractTargetRow = ref(null);
+const apiDocVisible = ref(false);
 
-const query = reactive({
+const query = reactive({ keyword: '', status: '' });
-  keyword: '',
-  status: '',
-});
 const activeTypeTab = ref('all');
 
-const extractForm = reactive({
+const extractForm = reactive({ platform: 'local', type: 'account' });
-  platform: 'local', // local | xianyu
-  type: 'account', // account | tk | account_tk
-});
-
-const detailRow = ref(null);
 
 const tableData = ref([]);
 const total = ref(0);
-
 const selectedRows = ref([]);
-const pagination = reactive({
+const detailRow = ref(null);
-  page: 1,
+const pagination = reactive({ page: 1, pageSize: 30 });
-  pageSize: 30,
-});
 
 const pagedList = computed(() => tableData.value);
 
@@ -48,29 +38,18 @@ function resetQuery() {
   query.status = '';
 }
 
-const typeTabs = computed(() => {
+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' },
+]);
-  ];
+
+watch(() => [query.keyword, query.status, activeTypeTab.value], () => {
+  pagination.page = 1;
+  fetchList();
 });
-
+watch(() => [pagination.page, pagination.pageSize], () => { fetchList(); });
-watch(
-  () => [query.keyword, query.status, activeTypeTab.value],
-  () => {
-    pagination.page = 1;
-    fetchList();
-  }
-);
-
-watch(
-  () => [pagination.page, pagination.pageSize],
-  () => {
-    fetchList();
-  }
-);
 
 function openAddDialog(mode = 'single') {
   editMode.value = mode;
@@ -79,10 +58,7 @@ function openAddDialog(mode = 'single') {
 
 async function saveRows(rows) {
   if (!rows.length) return;
-  if (rows.length === 1) {
+  if (rows.length === 1) { await addAccountPool(moduleKey, rows[0]); return; }
-    await addAccountPool(moduleKey, rows[0]);
-    return;
-  }
   await batchAddAccountPool(moduleKey, rows);
 }
 
@@ -90,33 +66,22 @@ async function handleEditSubmit(payload) {
   loading.value = true;
   try {
     await saveRows(payload.rows || []);
-    ElMessage.success(
+    ElMessage.success(payload.mode === 'batch' ? '批量添加成功' : '账号添加成功');
-      payload.mode === 'batch' ? '批量添加成功' : '账号添加成功'
-    );
     await fetchList();
-  } finally {
+  } finally { loading.value = false; }
-    loading.value = false;
-  }
 }
 
-function handleSelectionChange(rows) {
+function handleSelectionChange(rows) { selectedRows.value = rows; }
-  selectedRows.value = rows;
-}
 
 function openDetail(row) {
   loading.value = true;
   getAccountPoolDetail(moduleKey, row.id)
     .then((res) => {
-      if (res?.code !== 200) {
+      if (res?.code !== 200) { ElMessage.error(res?.msg || '获取详情失败'); return; }
-        ElMessage.error(res?.msg || '获取详情失败');
-        return;
-      }
       detailRow.value = normalizeRow(res.data || {});
       detailVisible.value = true;
     })
-    .finally(() => {
+    .finally(() => { loading.value = false; });
-      loading.value = false;
-    });
 }
 
 function openExtractByRow(row) {
@@ -130,49 +95,26 @@ async function handleExtract() {
   loading.value = true;
   try {
     const target = extractTargetRow.value;
-    if (!target) {
+    if (!target) { ElMessage.warning('未找到提取目标'); return; }
-      ElMessage.warning('未找到提取目标');
-      return;
-    }
     const res = await extractAccountPool(moduleKey, {
-      id: target.id,
+      id: target.id, type: target.type, platform: extractForm.platform,
-      type: target.type,
-      platform: extractForm.platform,
     });
-    if (res?.code !== 200) {
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '提取失败'); return; }
-      ElMessage.error(res?.msg || '提取失败');
-      return;
-    }
     ElMessage.success('提取成功');
     extractVisible.value = false;
     await fetchList();
-  } finally {
+  } finally { loading.value = false; }
-    loading.value = false;
-  }
 }
 
 function markExtractForSelected() {
-  if (!selectedRows.value.length) {
+  if (!selectedRows.value.length) { ElMessage.warning('请先选择数据'); return; }
-    ElMessage.warning('请先选择数据');
-    return;
-  }
   loading.value = true;
   Promise.all(
     selectedRows.value.map((row) =>
-      extractAccountPool(moduleKey, {
+      extractAccountPool(moduleKey, { id: row.id, type: row.type, platform: 'local' })
-        id: row.id,
-        type: row.type,
-        platform: 'local',
-      })
     )
-  )
+  ).then(() => { ElMessage.success('批量提取成功'); fetchList(); })
-    .then(() => {
+   .finally(() => { loading.value = false; });
-      ElMessage.success('批量提取成功');
-      fetchList();
-    })
-    .finally(() => {
-      loading.value = false;
-    });
 }
 
 function typeText(type) {
@@ -181,10 +123,16 @@ function typeText(type) {
   return 'Token';
 }
 
-function platformText(platform) {
+const PLATFORM_MAP = {
-  if (!platform) return '-';
+  local:     { label: '本地',   type: 'info' },
-  return platform === 'local' ? '本地' : '闲鱼';
+  xianyu:    { label: '闲鱼',   type: 'warning' },
-}
+  pinduoduo: { label: '拼多多', type: 'danger' },
+  jingdong:  { label: '京东',   type: 'primary' },
+  douyin:    { label: '抖音',   type: 'success' },
+};
+
+function platformText(platform) { return PLATFORM_MAP[platform]?.label || (platform || '-'); }
+function platformTagType(platform) { return PLATFORM_MAP[platform]?.type || 'info'; }
 
 function normalizeRow(raw) {
   const pick = (...keys) => {
@@ -211,46 +159,104 @@ async function fetchList() {
   loading.value = true;
   try {
     const res = await getAccountPoolList(moduleKey, {
-      page: pagination.page,
+      page: pagination.page, pageSize: pagination.pageSize,
-      pageSize: pagination.pageSize,
       keyword: query.keyword || undefined,
       status: query.status || undefined,
       type: activeTypeTab.value === 'all' ? undefined : activeTypeTab.value,
     });
-    if (res?.code !== 200) {
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '获取列表失败'); return; }
-      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 {
+  } finally { loading.value = false; }
-    loading.value = false;
+}
+
+onMounted(() => { fetchList(); });
+
+// ---- 接口说明数据 ----
+const BASE_URL = 'https://api.yunzer.cn';
+
+const paramDocs = [
+  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / pinduoduo / jingdong / douyin / local' },
+  { name: 'module', required: true, desc: '号池模块，指定从哪个产品的号池提取', values: 'cursor / windsurf / krio' },
+  { name: 'data_type', required: false, desc: '账号类型，不传则提取任意类型', values: 'account / tk / account_tk' },
+];
+
+const platformDocs = [
+  { value: 'xianyu',    label: '闲鱼',   desc: '闲鱼平台发货调用' },
+  { value: 'pinduoduo', label: '拼多多', desc: '拼多多平台发货调用' },
+  { value: 'jingdong',  label: '京东',   desc: '京东平台发货调用' },
+  { value: 'douyin',    label: '抖音',   desc: '抖音平台发货调用' },
+  { value: 'local',     label: '本地',   desc: '本地手动调用' },
+];
+
+const moduleDocs = [
+  { value: 'cursor',   label: 'Cursor',   desc: 'Cursor 号池' },
+  { value: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
+  { value: 'krio',     label: 'Krio',     desc: 'Krio 号池' },
+];
+
+const examples = [
+  { label: '闲鱼 · 提取 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: '京东 · 提取 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 = `// 账号密码类型（data_type=account）
+{
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "account",
+    "account": "user@example.com",
+    "password": "your_password"
   }
 }
 
-onMounted(() => {
+// 账号密码+Token 类型（data_type=account_tk）
-  fetchList();
+{
-});
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "account_tk",
+    "account": "user@example.com",
+    "password": "your_password",
+    "token": "eyJhbGciOiJIUzI1NiIs..."
+  }
+}
+
+// 纯 Token 类型（data_type=tk）
+{
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "tk",
+    "token": "eyJhbGciOiJIUzI1NiIs..."
+  }
+}`;
+
+const errorResp = `// 无可用卡密
+{ "code": 404, "msg": "暂无可用卡密" }
+
+// 参数错误
+{ "code": 400, "msg": "缺少参数 type（来源平台）" }`;
+
+function copyText(text) {
+  navigator.clipboard.writeText(text).then(() => { ElMessage.success('已复制'); });
+}
 </script>
 
 <template>
   <div class="account-pool-page">
     <el-card shadow="never">
       <template #header>
-        <div class="card-header">
+        <div class="card-header"><span>号池管理（Kiro）</span></div>
-          <span>号池管理（Kiro）</span>
-        </div>
       </template>
 
       <div class="toolbar">
         <div class="toolbar-left">
-          <el-input
+          <el-input v-model="query.keyword" placeholder="搜索账号 / token / 备注" clearable class="w-260" />
-            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" />
@@ -261,70 +267,47 @@ onMounted(() => {
           <el-button type="primary" @click="openAddDialog('single')">添加账号</el-button>
           <el-button type="success" @click="openAddDialog('batch')">批量添加</el-button>
           <el-button @click="markExtractForSelected">批量标记提取</el-button>
+          <el-button @click="apiDocVisible = true">接口说明</el-button>
         </div>
       </div>
 
       <el-tabs v-model="activeTypeTab" class="type-tabs">
-        <el-tab-pane
+        <el-tab-pane v-for="tab in typeTabs" :key="tab.value" :label="tab.label" :name="tab.value" />
-          v-for="tab in typeTabs"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
       </el-tabs>
 
-      <el-table
+      <el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
-        :data="pagedList"
-        border
-        stripe
-        style="width: 100%"
-        :loading="loading"
-        @selection-change="handleSelectionChange"
-      >
         <el-table-column type="selection" width="52" />
         <el-table-column prop="id" label="ID" width="80" />
         <el-table-column label="账号类型" width="160" align="center">
-          <template #default="{ row }">
+          <template #default="{ row }"><el-tag>{{ typeText(row.type) }}</el-tag></template>
-            <el-tag>{{ typeText(row.type) }}</el-tag>
-          </template>
         </el-table-column>
-        <el-table-column prop="account" label="账号" min-width="180" />
+        <el-table-column prop="account" label="账号" min-width="180" show-overflow-tooltip />
-        <el-table-column label="密码/Token" min-width="240">
+        <el-table-column label="密码/Token" min-width="240" show-overflow-tooltip>
           <template #default="{ row }">
-            <span v-if="row.type === 'account'">
+            <span v-if="row.type === 'account'">{{ row.password || '-' }}</span>
-              {{ row.password || '-' }}
+            <span v-else-if="row.type === 'account_tk'">{{ `${row.password || '-'} / ${row.token || '-'}` }}</span>
-            </span>
-            <span v-else-if="row.type === 'account_tk'">
-              {{ `${row.password || '-'} / ${row.token || '-'}` }}
-            </span>
             <span v-else>{{ row.token || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="remark" label="备注" min-width="140" />
+        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip />
         <el-table-column label="提取状态" width="100">
           <template #default="{ row }">
-            <el-tag :type="row.extracted ? 'success' : 'info'">
+            <el-tag :type="row.extracted ? 'success' : 'info'">{{ row.extracted ? '已提取' : '未提取' }}</el-tag>
-              {{ row.extracted ? '已提取' : '未提取' }}
-            </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="extractedAt" label="提取时间" width="180" />
-        <el-table-column label="提取平台" width="120">
+        <el-table-column label="提取平台" width="110">
           <template #default="{ row }">
-            {{ platformText(row.extractedPlatform) }}
+            <el-tag v-if="row.extractedPlatform" :type="platformTagType(row.extractedPlatform)" size="small">
+              {{ platformText(row.extractedPlatform) }}
+            </el-tag>
+            <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
+        <el-table-column label="操作" width="180" fixed="right" align="center">
           <template #default="{ row }">
             <el-button link type="primary" @click="openDetail(row)">详情</el-button>
-            <el-button
+            <el-button link type="warning" :disabled="row.extracted" @click="openExtractByRow(row)">提取</el-button>
-              link
-              type="warning"
-              :disabled="row.extracted"
-              @click="openExtractByRow(row)"
-            >
-              提取
-            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -346,30 +329,19 @@ onMounted(() => {
     <el-dialog v-model="detailVisible" title="账号详情" width="560px">
       <el-descriptions :column="1" border v-if="detailRow">
         <el-descriptions-item label="ID">{{ detailRow.id }}</el-descriptions-item>
-        <el-descriptions-item label="账号类型">
+        <el-descriptions-item label="账号类型">{{ typeText(detailRow.type) }}</el-descriptions-item>
-          {{ typeText(detailRow.type) }}
+        <el-descriptions-item label="账号">{{ detailRow.account || '-' }}</el-descriptions-item>
-        </el-descriptions-item>
+        <el-descriptions-item label="密码">{{ detailRow.password || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="账号">
+        <el-descriptions-item label="Token">{{ detailRow.token || '-' }}</el-descriptions-item>
-          {{ detailRow.account || '-' }}
+        <el-descriptions-item label="提取状态">{{ detailRow.extracted ? '已提取' : '未提取' }}</el-descriptions-item>
-        </el-descriptions-item>
+        <el-descriptions-item label="提取时间">{{ detailRow.extractedAt || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="密码">
-          {{ detailRow.password || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="Token">
-          {{ detailRow.token || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="提取状态">
-          {{ detailRow.extracted ? '已提取' : '未提取' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="提取时间">
-          {{ detailRow.extractedAt || '-' }}
-        </el-descriptions-item>
         <el-descriptions-item label="提取平台">
-          {{ platformText(detailRow.extractedPlatform) }}
+          <el-tag v-if="detailRow.extractedPlatform" :type="platformTagType(detailRow.extractedPlatform)" size="small">
-        </el-descriptions-item>
+            {{ platformText(detailRow.extractedPlatform) }}
-        <el-descriptions-item label="备注">
+          </el-tag>
-          {{ detailRow.remark || '-' }}
+          <span v-else>-</span>
         </el-descriptions-item>
+        <el-descriptions-item label="备注">{{ detailRow.remark || '-' }}</el-descriptions-item>
       </el-descriptions>
     </el-dialog>
 
@@ -379,65 +351,97 @@ onMounted(() => {
           <el-input :model-value="typeText(extractForm.type)" disabled />
         </el-form-item>
         <el-form-item label="提取平台">
-          <el-radio-group v-model="extractForm.platform">
+          <el-select v-model="extractForm.platform" style="width:100%">
-            <el-radio value="local">本地</el-radio>
+            <el-option v-for="(v, k) in PLATFORM_MAP" :key="k" :value="k" :label="v.label" />
-            <el-radio value="xianyu">闲鱼</el-radio>
+          </el-select>
-          </el-radio-group>
         </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="extractVisible = false">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="handleExtract">
+        <el-button type="primary" :loading="loading" @click="handleExtract">确认提取</el-button>
-          确认提取
-        </el-button>
       </template>
     </el-dialog>
+
+    <!-- 接口说明抽屉 -->
+    <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
+      <div class="api-doc">
+        <el-alert type="info" :closable="false" style="margin-bottom:16px">
+          该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
+        </el-alert>
+        <div class="doc-section">
+          <div class="doc-title">接口地址</div>
+          <el-tag type="success" class="method-tag">GET</el-tag>
+          <code class="url-code">https://api.yunzer.cn/api/getcard</code>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">请求参数</div>
+          <el-table :data="paramDocs" border size="small">
+            <el-table-column prop="name" label="参数名" width="120" />
+            <el-table-column prop="required" label="必填" width="60" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.required ? 'danger' : 'info'" size="small">{{ row.required ? '是' : '否' }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="desc" label="说明" />
+            <el-table-column prop="values" label="可选值" min-width="160" />
+          </el-table>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">调用示例</div>
+          <div v-for="ex in examples" :key="ex.label" class="example-item">
+            <div class="example-label">{{ ex.label }}</div>
+            <div class="example-url-wrap">
+              <code class="example-url">{{ ex.url }}</code>
+              <el-button link type="primary" size="small" @click="copyText(ex.url)">复制</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">成功响应</div>
+          <pre class="code-block">{{ successResp }}</pre>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">失败响应</div>
+          <pre class="code-block">{{ errorResp }}</pre>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">支持的平台（type 参数）</div>
+          <el-table :data="platformDocs" border size="small">
+            <el-table-column prop="value" label="type 值" width="130" />
+            <el-table-column prop="label" label="平台" width="100" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">支持的号池（module 参数）</div>
+          <el-table :data="moduleDocs" border size="small">
+            <el-table-column prop="value" label="module 值" width="130" />
+            <el-table-column prop="label" label="号池" width="100" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <style scoped>
-.account-pool-page {
+.account-pool-page { padding: 12px; }
-  padding: 12px;
+.card-header { display: flex; align-items: center; justify-content: space-between; }
-}
+.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
-
+.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.card-header {
+.w-260 { width: 260px; }
-  display: flex;
+.w-140 { width: 140px; }
-  align-items: center;
+.type-tabs { margin-bottom: 12px; }
-  justify-content: space-between;
+.pagination-wrap { display: flex; justify-content: flex-end; margin-top: 14px; }
-}
+.api-doc { padding: 0 4px; font-size: 13px; }
-
+.doc-section { margin-bottom: 24px; }
-.toolbar {
+.doc-title { font-weight: 600; font-size: 14px; margin-bottom: 10px; color: #303133; border-left: 3px solid #409eff; padding-left: 8px; }
-  display: flex;
+.method-tag { margin-right: 8px; vertical-align: middle; }
-  justify-content: space-between;
+.url-code { background: #f5f7fa; padding: 4px 10px; border-radius: 4px; font-size: 13px; color: #e6a23c; word-break: break-all; }
-  align-items: center;
+.example-item { margin-bottom: 10px; }
-  gap: 12px;
+.example-label { font-size: 12px; color: #909399; margin-bottom: 4px; }
-  flex-wrap: wrap;
+.example-url-wrap { display: flex; align-items: center; gap: 8px; background: #f5f7fa; padding: 6px 10px; border-radius: 4px; }
-  margin-bottom: 12px;
+.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>
-.toolbar-left,
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.w-260 {
-  width: 260px;
-}
-
-.w-140 {
-  width: 140px;
-}
-
-.type-tabs {
-  margin-bottom: 12px;
-}
-
-.pagination-wrap {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 14px;
-}
-</style>

src/views/accountpool/windsurf/index.vue

@@ -18,28 +18,18 @@ const editMode = ref('single');
 const detailVisible = ref(false);
 const extractVisible = ref(false);
 const extractTargetRow = ref(null);
+const apiDocVisible = ref(false);
 
-const query = reactive({
+const query = reactive({ keyword: '', status: '' });
-  keyword: '',
-  status: '',
-});
 const activeTypeTab = ref('all');
 
-const extractForm = reactive({
+const extractForm = reactive({ platform: 'local', type: 'account' });
-  platform: 'local', // local | xianyu
-  type: 'account', // account | tk | account_tk
-});
-
-const detailRow = ref(null);
 
 const tableData = ref([]);
 const total = ref(0);
-
 const selectedRows = ref([]);
-const pagination = reactive({
+const detailRow = ref(null);
-  page: 1,
+const pagination = reactive({ page: 1, pageSize: 30 });
-  pageSize: 30,
-});
 
 const pagedList = computed(() => tableData.value);
 
@@ -48,29 +38,18 @@ function resetQuery() {
   query.status = '';
 }
 
-const typeTabs = computed(() => {
+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' },
+]);
-  ];
+
+watch(() => [query.keyword, query.status, activeTypeTab.value], () => {
+  pagination.page = 1;
+  fetchList();
 });
-
+watch(() => [pagination.page, pagination.pageSize], () => { fetchList(); });
-watch(
-  () => [query.keyword, query.status, activeTypeTab.value],
-  () => {
-    pagination.page = 1;
-    fetchList();
-  }
-);
-
-watch(
-  () => [pagination.page, pagination.pageSize],
-  () => {
-    fetchList();
-  }
-);
 
 function openAddDialog(mode = 'single') {
   editMode.value = mode;
@@ -79,10 +58,7 @@ function openAddDialog(mode = 'single') {
 
 async function saveRows(rows) {
   if (!rows.length) return;
-  if (rows.length === 1) {
+  if (rows.length === 1) { await addAccountPool(moduleKey, rows[0]); return; }
-    await addAccountPool(moduleKey, rows[0]);
-    return;
-  }
   await batchAddAccountPool(moduleKey, rows);
 }
 
@@ -90,33 +66,22 @@ async function handleEditSubmit(payload) {
   loading.value = true;
   try {
     await saveRows(payload.rows || []);
-    ElMessage.success(
+    ElMessage.success(payload.mode === 'batch' ? '批量添加成功' : '账号添加成功');
-      payload.mode === 'batch' ? '批量添加成功' : '账号添加成功'
-    );
     await fetchList();
-  } finally {
+  } finally { loading.value = false; }
-    loading.value = false;
-  }
 }
 
-function handleSelectionChange(rows) {
+function handleSelectionChange(rows) { selectedRows.value = rows; }
-  selectedRows.value = rows;
-}
 
 function openDetail(row) {
   loading.value = true;
   getAccountPoolDetail(moduleKey, row.id)
     .then((res) => {
-      if (res?.code !== 200) {
+      if (res?.code !== 200) { ElMessage.error(res?.msg || '获取详情失败'); return; }
-        ElMessage.error(res?.msg || '获取详情失败');
-        return;
-      }
       detailRow.value = normalizeRow(res.data || {});
       detailVisible.value = true;
     })
-    .finally(() => {
+    .finally(() => { loading.value = false; });
-      loading.value = false;
-    });
 }
 
 function openExtractByRow(row) {
@@ -130,49 +95,26 @@ async function handleExtract() {
   loading.value = true;
   try {
     const target = extractTargetRow.value;
-    if (!target) {
+    if (!target) { ElMessage.warning('未找到提取目标'); return; }
-      ElMessage.warning('未找到提取目标');
-      return;
-    }
     const res = await extractAccountPool(moduleKey, {
-      id: target.id,
+      id: target.id, type: target.type, platform: extractForm.platform,
-      type: target.type,
-      platform: extractForm.platform,
     });
-    if (res?.code !== 200) {
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '提取失败'); return; }
-      ElMessage.error(res?.msg || '提取失败');
-      return;
-    }
     ElMessage.success('提取成功');
     extractVisible.value = false;
     await fetchList();
-  } finally {
+  } finally { loading.value = false; }
-    loading.value = false;
-  }
 }
 
 function markExtractForSelected() {
-  if (!selectedRows.value.length) {
+  if (!selectedRows.value.length) { ElMessage.warning('请先选择数据'); return; }
-    ElMessage.warning('请先选择数据');
-    return;
-  }
   loading.value = true;
   Promise.all(
     selectedRows.value.map((row) =>
-      extractAccountPool(moduleKey, {
+      extractAccountPool(moduleKey, { id: row.id, type: row.type, platform: 'local' })
-        id: row.id,
-        type: row.type,
-        platform: 'local',
-      })
     )
-  )
+  ).then(() => { ElMessage.success('批量提取成功'); fetchList(); })
-    .then(() => {
+   .finally(() => { loading.value = false; });
-      ElMessage.success('批量提取成功');
-      fetchList();
-    })
-    .finally(() => {
-      loading.value = false;
-    });
 }
 
 function typeText(type) {
@@ -181,10 +123,16 @@ function typeText(type) {
   return 'Token';
 }
 
-function platformText(platform) {
+const PLATFORM_MAP = {
-  if (!platform) return '-';
+  local:     { label: '本地',   type: 'info' },
-  return platform === 'local' ? '本地' : '闲鱼';
+  xianyu:    { label: '闲鱼',   type: 'warning' },
-}
+  pinduoduo: { label: '拼多多', type: 'danger' },
+  jingdong:  { label: '京东',   type: 'primary' },
+  douyin:    { label: '抖音',   type: 'success' },
+};
+
+function platformText(platform) { return PLATFORM_MAP[platform]?.label || (platform || '-'); }
+function platformTagType(platform) { return PLATFORM_MAP[platform]?.type || 'info'; }
 
 function normalizeRow(raw) {
   const pick = (...keys) => {
@@ -211,46 +159,104 @@ async function fetchList() {
   loading.value = true;
   try {
     const res = await getAccountPoolList(moduleKey, {
-      page: pagination.page,
+      page: pagination.page, pageSize: pagination.pageSize,
-      pageSize: pagination.pageSize,
       keyword: query.keyword || undefined,
       status: query.status || undefined,
       type: activeTypeTab.value === 'all' ? undefined : activeTypeTab.value,
     });
-    if (res?.code !== 200) {
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '获取列表失败'); return; }
-      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 {
+  } finally { loading.value = false; }
-    loading.value = false;
+}
+
+onMounted(() => { fetchList(); });
+
+// ---- 接口说明数据 ----
+const BASE_URL = 'https://api.yunzer.cn';
+
+const paramDocs = [
+  { name: 'type', required: true, desc: '来源平台，用于标记本次提取来自哪个渠道', values: 'xianyu / pinduoduo / jingdong / douyin / local' },
+  { name: 'module', required: true, desc: '号池模块，指定从哪个产品的号池提取', values: 'cursor / windsurf / krio' },
+  { name: 'data_type', required: false, desc: '账号类型，不传则提取任意类型', values: 'account / tk / account_tk' },
+];
+
+const platformDocs = [
+  { value: 'xianyu',    label: '闲鱼',   desc: '闲鱼平台发货调用' },
+  { value: 'pinduoduo', label: '拼多多', desc: '拼多多平台发货调用' },
+  { value: 'jingdong',  label: '京东',   desc: '京东平台发货调用' },
+  { value: 'douyin',    label: '抖音',   desc: '抖音平台发货调用' },
+  { value: 'local',     label: '本地',   desc: '本地手动调用' },
+];
+
+const moduleDocs = [
+  { value: 'cursor',   label: 'Cursor',   desc: 'Cursor 号池' },
+  { value: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
+  { value: 'krio',     label: 'Krio',     desc: 'Krio 号池' },
+];
+
+const examples = [
+  { label: '闲鱼 · 提取 Windsurf Token', url: `${BASE_URL}/api/getcard?type=xianyu&module=windsurf&data_type=tk` },
+  { label: '拼多多 · 提取 Windsurf 账号密码', url: `${BASE_URL}/api/getcard?type=pinduoduo&module=windsurf&data_type=account` },
+  { label: '京东 · 提取 Cursor 任意类型', url: `${BASE_URL}/api/getcard?type=jingdong&module=cursor` },
+  { label: '抖音 · 提取 Krio Token', url: `${BASE_URL}/api/getcard?type=douyin&module=krio&data_type=tk` },
+];
+
+const successResp = `// 账号密码类型（data_type=account）
+{
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "account",
+    "account": "user@example.com",
+    "password": "your_password"
   }
 }
 
-onMounted(() => {
+// 账号密码+Token 类型（data_type=account_tk）
-  fetchList();
+{
-});
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "account_tk",
+    "account": "user@example.com",
+    "password": "your_password",
+    "token": "eyJhbGciOiJIUzI1NiIs..."
+  }
+}
+
+// 纯 Token 类型（data_type=tk）
+{
+  "code": 200,
+  "msg": "success",
+  "data": {
+    "type": "tk",
+    "token": "eyJhbGciOiJIUzI1NiIs..."
+  }
+}`;
+
+const errorResp = `// 无可用卡密
+{ "code": 404, "msg": "暂无可用卡密" }
+
+// 参数错误
+{ "code": 400, "msg": "缺少参数 type（来源平台）" }`;
+
+function copyText(text) {
+  navigator.clipboard.writeText(text).then(() => { ElMessage.success('已复制'); });
+}
 </script>
 
 <template>
   <div class="account-pool-page">
     <el-card shadow="never">
       <template #header>
-        <div class="card-header">
+        <div class="card-header"><span>号池管理（Windsurf）</span></div>
-          <span>号池管理（Windsurf）</span>
-        </div>
       </template>
 
       <div class="toolbar">
         <div class="toolbar-left">
-          <el-input
+          <el-input v-model="query.keyword" placeholder="搜索账号 / token / 备注" clearable class="w-260" />
-            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" />
@@ -261,70 +267,47 @@ onMounted(() => {
           <el-button type="primary" @click="openAddDialog('single')">添加账号</el-button>
           <el-button type="success" @click="openAddDialog('batch')">批量添加</el-button>
           <el-button @click="markExtractForSelected">批量标记提取</el-button>
+          <el-button @click="apiDocVisible = true">接口说明</el-button>
         </div>
       </div>
 
       <el-tabs v-model="activeTypeTab" class="type-tabs">
-        <el-tab-pane
+        <el-tab-pane v-for="tab in typeTabs" :key="tab.value" :label="tab.label" :name="tab.value" />
-          v-for="tab in typeTabs"
-          :key="tab.value"
-          :label="tab.label"
-          :name="tab.value"
-        />
       </el-tabs>
 
-      <el-table
+      <el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
-        :data="pagedList"
-        border
-        stripe
-        style="width: 100%"
-        :loading="loading"
-        @selection-change="handleSelectionChange"
-      >
         <el-table-column type="selection" width="52" />
         <el-table-column prop="id" label="ID" width="80" />
         <el-table-column label="账号类型" width="160" align="center">
-          <template #default="{ row }">
+          <template #default="{ row }"><el-tag>{{ typeText(row.type) }}</el-tag></template>
-            <el-tag>{{ typeText(row.type) }}</el-tag>
-          </template>
         </el-table-column>
-        <el-table-column prop="account" label="账号" min-width="180" />
+        <el-table-column prop="account" label="账号" min-width="180" show-overflow-tooltip />
-        <el-table-column label="密码/Token" min-width="240">
+        <el-table-column label="密码/Token" min-width="240" show-overflow-tooltip>
           <template #default="{ row }">
-            <span v-if="row.type === 'account'">
+            <span v-if="row.type === 'account'">{{ row.password || '-' }}</span>
-              {{ row.password || '-' }}
+            <span v-else-if="row.type === 'account_tk'">{{ `${row.password || '-'} / ${row.token || '-'}` }}</span>
-            </span>
-            <span v-else-if="row.type === 'account_tk'">
-              {{ `${row.password || '-'} / ${row.token || '-'}` }}
-            </span>
             <span v-else>{{ row.token || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="remark" label="备注" min-width="140" />
+        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip />
         <el-table-column label="提取状态" width="100">
           <template #default="{ row }">
-            <el-tag :type="row.extracted ? 'success' : 'info'">
+            <el-tag :type="row.extracted ? 'success' : 'info'">{{ row.extracted ? '已提取' : '未提取' }}</el-tag>
-              {{ row.extracted ? '已提取' : '未提取' }}
-            </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="extractedAt" label="提取时间" width="180" />
-        <el-table-column label="提取平台" width="120">
+        <el-table-column label="提取平台" width="110">
           <template #default="{ row }">
-            {{ platformText(row.extractedPlatform) }}
+            <el-tag v-if="row.extractedPlatform" :type="platformTagType(row.extractedPlatform)" size="small">
+              {{ platformText(row.extractedPlatform) }}
+            </el-tag>
+            <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
+        <el-table-column label="操作" width="180" fixed="right" align="center">
           <template #default="{ row }">
             <el-button link type="primary" @click="openDetail(row)">详情</el-button>
-            <el-button
+            <el-button link type="warning" :disabled="row.extracted" @click="openExtractByRow(row)">提取</el-button>
-              link
-              type="warning"
-              :disabled="row.extracted"
-              @click="openExtractByRow(row)"
-            >
-              提取
-            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -346,30 +329,19 @@ onMounted(() => {
     <el-dialog v-model="detailVisible" title="账号详情" width="560px">
       <el-descriptions :column="1" border v-if="detailRow">
         <el-descriptions-item label="ID">{{ detailRow.id }}</el-descriptions-item>
-        <el-descriptions-item label="账号类型">
+        <el-descriptions-item label="账号类型">{{ typeText(detailRow.type) }}</el-descriptions-item>
-          {{ typeText(detailRow.type) }}
+        <el-descriptions-item label="账号">{{ detailRow.account || '-' }}</el-descriptions-item>
-        </el-descriptions-item>
+        <el-descriptions-item label="密码">{{ detailRow.password || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="账号">
+        <el-descriptions-item label="Token">{{ detailRow.token || '-' }}</el-descriptions-item>
-          {{ detailRow.account || '-' }}
+        <el-descriptions-item label="提取状态">{{ detailRow.extracted ? '已提取' : '未提取' }}</el-descriptions-item>
-        </el-descriptions-item>
+        <el-descriptions-item label="提取时间">{{ detailRow.extractedAt || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="密码">
-          {{ detailRow.password || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="Token">
-          {{ detailRow.token || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="提取状态">
-          {{ detailRow.extracted ? '已提取' : '未提取' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="提取时间">
-          {{ detailRow.extractedAt || '-' }}
-        </el-descriptions-item>
         <el-descriptions-item label="提取平台">
-          {{ platformText(detailRow.extractedPlatform) }}
+          <el-tag v-if="detailRow.extractedPlatform" :type="platformTagType(detailRow.extractedPlatform)" size="small">
-        </el-descriptions-item>
+            {{ platformText(detailRow.extractedPlatform) }}
-        <el-descriptions-item label="备注">
+          </el-tag>
-          {{ detailRow.remark || '-' }}
+          <span v-else>-</span>
         </el-descriptions-item>
+        <el-descriptions-item label="备注">{{ detailRow.remark || '-' }}</el-descriptions-item>
       </el-descriptions>
     </el-dialog>
 
@@ -379,65 +351,97 @@ onMounted(() => {
           <el-input :model-value="typeText(extractForm.type)" disabled />
         </el-form-item>
         <el-form-item label="提取平台">
-          <el-radio-group v-model="extractForm.platform">
+          <el-select v-model="extractForm.platform" style="width:100%">
-            <el-radio value="local">本地</el-radio>
+            <el-option v-for="(v, k) in PLATFORM_MAP" :key="k" :value="k" :label="v.label" />
-            <el-radio value="xianyu">闲鱼</el-radio>
+          </el-select>
-          </el-radio-group>
         </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="extractVisible = false">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="handleExtract">
+        <el-button type="primary" :loading="loading" @click="handleExtract">确认提取</el-button>
-          确认提取
-        </el-button>
       </template>
     </el-dialog>
+
+    <!-- 接口说明抽屉 -->
+    <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
+      <div class="api-doc">
+        <el-alert type="info" :closable="false" style="margin-bottom:16px">
+          该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
+        </el-alert>
+        <div class="doc-section">
+          <div class="doc-title">接口地址</div>
+          <el-tag type="success" class="method-tag">GET</el-tag>
+          <code class="url-code">https://api.yunzer.cn/api/getcard</code>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">请求参数</div>
+          <el-table :data="paramDocs" border size="small">
+            <el-table-column prop="name" label="参数名" width="120" />
+            <el-table-column prop="required" label="必填" width="60" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.required ? 'danger' : 'info'" size="small">{{ row.required ? '是' : '否' }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="desc" label="说明" />
+            <el-table-column prop="values" label="可选值" min-width="160" />
+          </el-table>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">调用示例</div>
+          <div v-for="ex in examples" :key="ex.label" class="example-item">
+            <div class="example-label">{{ ex.label }}</div>
+            <div class="example-url-wrap">
+              <code class="example-url">{{ ex.url }}</code>
+              <el-button link type="primary" size="small" @click="copyText(ex.url)">复制</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">成功响应</div>
+          <pre class="code-block">{{ successResp }}</pre>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">失败响应</div>
+          <pre class="code-block">{{ errorResp }}</pre>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">支持的平台（type 参数）</div>
+          <el-table :data="platformDocs" border size="small">
+            <el-table-column prop="value" label="type 值" width="130" />
+            <el-table-column prop="label" label="平台" width="100" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </div>
+        <div class="doc-section">
+          <div class="doc-title">支持的号池（module 参数）</div>
+          <el-table :data="moduleDocs" border size="small">
+            <el-table-column prop="value" label="module 值" width="130" />
+            <el-table-column prop="label" label="号池" width="100" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <style scoped>
-.account-pool-page {
+.account-pool-page { padding: 12px; }
-  padding: 12px;
+.card-header { display: flex; align-items: center; justify-content: space-between; }
-}
+.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
-
+.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.card-header {
+.w-260 { width: 260px; }
-  display: flex;
+.w-140 { width: 140px; }
-  align-items: center;
+.type-tabs { margin-bottom: 12px; }
-  justify-content: space-between;
+.pagination-wrap { display: flex; justify-content: flex-end; margin-top: 14px; }
-}
+.api-doc { padding: 0 4px; font-size: 13px; }
-
+.doc-section { margin-bottom: 24px; }
-.toolbar {
+.doc-title { font-weight: 600; font-size: 14px; margin-bottom: 10px; color: #303133; border-left: 3px solid #409eff; padding-left: 8px; }
-  display: flex;
+.method-tag { margin-right: 8px; vertical-align: middle; }
-  justify-content: space-between;
+.url-code { background: #f5f7fa; padding: 4px 10px; border-radius: 4px; font-size: 13px; color: #e6a23c; word-break: break-all; }
-  align-items: center;
+.example-item { margin-bottom: 10px; }
-  gap: 12px;
+.example-label { font-size: 12px; color: #909399; margin-bottom: 4px; }
-  flex-wrap: wrap;
+.example-url-wrap { display: flex; align-items: center; gap: 8px; background: #f5f7fa; padding: 6px 10px; border-radius: 4px; }
-  margin-bottom: 12px;
+.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>
-.toolbar-left,
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.w-260 {
-  width: 260px;
-}
-
-.w-140 {
-  width: 140px;
-}
-
-.type-tabs {
-  margin-bottom: 12px;
-}
-
-.pagination-wrap {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 14px;
-}
-</style>