yunzerwebsite/platform-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
扫地僧 2026-04-29 18:29:34 +08:00
commit bbecc5650d
15 changed files with 1330 additions and 501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/accountPool.js
View File

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

73
src/components/CommonAside.vue
View File

@ -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(() => {
if (isMobile.value) {
return store.state.isCollapse ? "0px" : "220px";
}
return store.state.isCollapse ? "64px" : "200px";
});
const width = computed(() => (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;
left: 0;
top: 0;
bottom: 0;
z-index: 1200;
max-width: 80vw;
width: 100% !important;
}
: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>

6
src/components/CommonHeader.vue
View File

@ -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 = () => {
if (window.innerWidth <= 768) {
emit('collapse');
} else {
store.state.isCollapse = !store.state.isCollapse;
}
};
const showTopToggle = computed(() => store.state.isCollapse);

23
src/views/Main.vue
View File

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

116
src/views/accountpool/cursor/components/edit.vue
View File

@ -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
account: '',
password: '',
token: '',
batchText: '',
remark: '',
type: "tk", // account | tk | account_tk
account: "",
password: "",
token: "",
batchText: "",
remark: "",
});
const isBatch = computed(() => props.mode === 'batch');
const isBatch = computed(() => props.mode === "batch");
const dialogTitle = computed(() => {
return isBatch.value ? '批量添加账号' : '添加账号';
return isBatch.value ? "批量添加账号" : "添加账号";
});
const formatExample = computed(() => {
if (form.type === 'account') {
return 'account,password';
if (form.type === "account") {
return "account,password";
}
if (form.type === 'account_tk') {
return 'account,password,token';
if (form.type === "account_tk") {
return "account,password,token";
}
return 'token';
return "token";
});
watch(
@ -44,20 +44,20 @@ watch(
(visible) => {
if (!visible) return;
resetForm();
}
},
);
function closeDialog() {
emit('update:modelValue', false);
emit("update:modelValue", false);
}
function resetForm() {
form.type = 'account';
form.account = '';
form.password = '';
form.token = '';
form.batchText = '';
form.remark = '';
form.type = "tk";
form.account = "";
form.password = "";
form.token = "";
form.batchText = "";
form.remark = "";
}
function parseBatchRows() {
@ -70,32 +70,32 @@ function parseBatchRows() {
const errors = [];
rows.forEach((line, index) => {
if (form.type === 'account') {
const [account, password] = line.split(',').map((x) => (x || '').trim());
if (form.type === "account") {
const [account, password] = line.split(",").map((x) => (x || "").trim());
if (!account || !password) {
errors.push(`第 ${index + 1} 行格式错误，应为 account,password`);
return;
}
parsed.push({
type: 'account',
type: "account",
account,
password,
token: '',
token: "",
remark: form.remark,
});
return;
}
if (form.type === 'account_tk') {
if (form.type === "account_tk") {
const [account, password, token] = line
.split(',')
.map((x) => (x || '').trim());
.split(",")
.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',
account: '',
password: '',
type: "tk",
account: "",
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', {
mode: 'single',
emit("submit", {
mode: "single",
rows: [
{
type: 'account',
type: "account",
account: form.account.trim(),
password: form.password.trim(),
token: '',
token: "",
remark: form.remark.trim(),
},
],
@ -138,15 +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', {
mode: 'single',
emit("submit", {
mode: "single",
rows: [
{
type: 'account_tk',
type: "account_tk",
account: form.account.trim(),
password: form.password.trim(),
token: form.token.trim(),
@ -159,13 +159,13 @@ function handleSubmit() {
}
if (!form.token) return;
emit('submit', {
mode: 'single',
emit("submit", {
mode: "single",
rows: [
{
type: 'tk',
account: '',
password: '',
type: "tk",
account: "",
password: "",
token: form.token.trim(),
remark: form.remark.trim(),
},
@ -179,8 +179,8 @@ function handleSubmit() {
if (errors.length || parsed.length === 0) {
return;
}
emit('submit', {
mode: 'batch',
emit("submit", {
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

49
src/views/accountpool/cursor/components/replenish.vue Normal file
View File

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

348
src/views/accountpool/cursor/index.vue
View File

@ -1,10 +1,10 @@
<script setup>
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import Edit from './components/edit.vue';
import DetailDialog from './components/detail.vue';
import ExtractDialog from './components/extract.vue';
import PatchDialog from '../components/patch.vue';
import { computed, onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import Edit from "./components/edit.vue";
import DetailDialog from "./components/detail.vue";
import ExtractDialog from "./components/extract.vue";
import ReplenishDialog from "./components/replenish.vue";
import {
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: '',
status: '',
keyword: "",
status: "",
});
const activeTypeTab = ref('all');
const activeTypeTab = ref("all");
const extractForm = reactive({
platform: 'local',
type: 'account',
remark: '',
platform: "local",
type: "account",
remark: "",
});
const tableData = ref([]);
@ -52,16 +57,16 @@ const pagination = reactive({
const pagedList = computed(() => tableData.value);
function resetQuery() {
query.keyword = '';
query.status = '';
query.keyword = "";
query.status = "";
}
const typeTabs = computed(() => {
return [
{ label: '全部', value: 'all' },
{ label: '账号密码', value: 'account' },
{ label: '账号密码+Token', value: 'account_tk' },
{ label: 'Token', value: 'tk' },
{ label: "全部", value: "all" },
{ label: "账号密码", value: "account" },
{ label: "账号密码+Token", value: "account_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 {
const results = await Promise.all(
selectedRows.value.map((row) =>
extractAccountPool(moduleKey, {
id: row.id,
type: row.type,
platform: 'local',
})
)
)
.then(() => {
ElMessage.success('批量提取成功');
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(() => {
} finally {
loading.value = false;
});
}
}
function typeText(type) {
if (type === 'account') return '账号密码';
if (type === 'account_tk') return '账号密码+Token';
return 'Token';
if (type === "account") return "账号密码";
if (type === "account_tk") return "账号密码+Token";
return "Token";
}
const tooltipOpts = {
popperClass: 'pool-tooltip',
popperStyle: { maxWidth: '600px', wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
};
const PLATFORM_MAP = {
local: { label: '本地', type: 'info' },
xianyu: { label: '闲鱼', type: 'warning' },
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 {
id: pick('id', 'Id', 'ID'),
type: pick('data_type', 'dataType', 'type'),
account: pick('account', 'Account'),
password: pick('password', 'Password'),
token: pick('token', 'Token'),
remark: pick('remark', 'Remark'),
extracted: Number(pick('is_extracted', 'isExtracted', 'IsExtracted')) === 1,
extractedAt: formatTime(pickNullable('extracted_time', 'extractedAt')),
extractedPlatform: pickNullable('extracted_platform', 'extractedPlatform'),
createdAt: formatTime(pick('create_time', 'createdAt')),
id: pick("id", "Id", "ID"),
type: pick("data_type", "dataType", "type"),
account: pick("account", "Account"),
password: pick("password", "Password"),
token: pick("token", "Token"),
remark: pick("remark", "Remark"),
extracted: Number(pick("is_extracted", "isExtracted", "IsExtracted")) === 1,
extractedAt: formatTime(pickNullable("extracted_time", "extractedAt")),
extractedPlatform: pickNullable("extracted_platform", "extractedPlatform"),
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: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
{ value: 'krio', label: 'Krio', desc: 'Krio 号池' },
{ 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` },
{
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 = `// 纯 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 prop="remark" label="备注" min-width="140" />
<el-table-column label="操作" width="220" align="center">
<el-table-column label="操作" width="220" fixed="right" align="center">
<template #default="{ row }">
<el-button link type="primary" @click="openDetail(row)">详情</el-button>
<el-button link type="warning" :disabled="row.extracted" @click="openExtractByRow(row)">提取</el-button>
<el-button v-if="row.extracted" link type="success" @click="copyCardInfo(row)">复制</el-button>
<el-button link type="primary" @click="openDetail(row)"
>详情</el-button
>
<el-button
link
type="warning"
:disabled="row.extracted"
@click="openExtractByRow(row)"
>提取</el-button
>
<el-button
v-if="row.extracted"
link
type="success"
@click="copyCardInfo(row)"
>复制</el-button
>
</template>
</el-table-column>
</el-table>
@ -503,16 +591,13 @@ 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">
该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
@ -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>

49
src/views/accountpool/kiro/components/replenish.vue Normal file
View File

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

379
src/views/accountpool/kiro/index.vue
View File

@ -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 activeTypeTab = ref('all');
const query = reactive({ keyword: "", status: "" });
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.status = '';
query.keyword = "";
query.status = "";
}
const typeTabs = computed(() => [
{ label: '全部', value: 'all' },
{ label: '账号密码', value: 'account' },
{ label: '账号密码+Token', value: 'account_tk' },
{ label: 'Token', value: 'tk' },
{ label: "全部", value: "all" },
{ label: "账号密码", value: "account" },
{ label: "账号密码+Token", value: "account_tk" },
{ label: "Token", value: "tk" },
]);
watch(() => [query.keyword, query.status, activeTypeTab.value], () => {
watch(
() => [query.keyword, query.status, activeTypeTab.value],
() => {
pagination.page = 1;
fetchList();
});
watch(() => [pagination.page, pagination.pageSize], () => { 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; }
ElMessage.success('提取成功');
if (res?.code !== 200) { ElMessage.error(res?.msg || "提取失败"); return; }
ElMessage.success("提取成功");
extractVisible.value = false;
const row = normalizeRow(res.data || {});
navigator.clipboard.writeText(rowToText(row)).catch(() => {});
await fetchList();
} finally { loading.value = false; }
} 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 {
const results = await Promise.all(
selectedRows.value.map((row) =>
extractAccountPool(moduleKey, { id: row.id, type: row.type, platform: 'local' })
)
).then(() => { ElMessage.success('批量提取成功'); fetchList(); })
.finally(() => { loading.value = false; });
extractAccountPool(moduleKey, {
id: row.id, type: row.type,
platform: batchExtractForm.platform,
remark: batchExtractForm.remark || '',
}),
),
);
const succeeded = results.filter((r) => r?.code === 200).map((r) => normalizeRow(r.data || {}));
const failCount = results.length - succeeded.length;
if (failCount > 0) {
ElMessage.warning(`${succeeded.length} 条成功，${failCount} 条失败`);
} else {
ElMessage.success("批量提取成功");
}
batchExtractVisible.value = false;
if (succeeded.length) {
const text = succeeded.map(rowToText).filter(Boolean).join('\n');
navigator.clipboard.writeText(text).catch(() => {});
}
fetchList();
} finally {
loading.value = false;
}
}
function rowToText(row) {
const parts = [];
if (row.account) parts.push(row.account);
if (row.password) parts.push(row.password);
if (row.token) parts.push(row.token);
return parts.join(' / ');
}
async function handleReplenish() {
loading.value = true;
try {
const res = await replenishAccountPool(moduleKey, {
type: replenishForm.type,
platform: replenishForm.platform,
remark: replenishForm.remark || '',
});
if (res?.code !== 200) { ElMessage.error(res?.msg || '补号失败'); return; }
ElMessage.success('补号成功，已复制到剪贴板');
replenishVisible.value = false;
const row = normalizeRow(res.data || {});
navigator.clipboard.writeText(rowToText(row)).catch(() => {});
await fetchList();
} finally {
loading.value = false;
}
}
function typeText(type) {
if (type === 'account') return '账号密码';
if (type === 'account_tk') return '账号密码+Token';
return 'Token';
if (type === "account") return "账号密码";
if (type === "account_tk") return "账号密码+Token";
return "Token";
}
const tooltipOpts = {
popperClass: 'pool-tooltip',
popperStyle: { maxWidth: '600px', wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
};
const PLATFORM_MAP = {
local: { label: '本地', type: 'info' },
xianyu: { label: '闲鱼', type: 'warning' },
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 platformTagType(platform) { return PLATFORM_MAP[platform]?.type || 'info'; }
function platformText(platform) {
return PLATFORM_MAP[platform]?.label || platform || "-";
}
function platformTagType(platform) {
return PLATFORM_MAP[platform]?.type || "info";
}
function normalizeRow(raw) {
const pick = (...keys) => {
for (const key of keys) {
if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
}
return '';
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 {
id: pick('id', 'Id', 'ID'),
type: pick('data_type', 'dataType', 'type'),
account: pick('account', 'Account'),
password: pick('password', 'Password'),
token: pick('token', 'Token'),
remark: pick('remark', 'Remark'),
extracted: Number(pick('is_extracted', 'isExtracted', 'IsExtracted')) === 1,
extractedAt: formatTime(pickNullable('extracted_time', 'extractedAt')),
extractedPlatform: pickNullable('extracted_platform', 'extractedPlatform'),
createdAt: formatTime(pick('create_time', 'createdAt')),
id: pick("id", "Id", "ID"),
type: pick("data_type", "dataType", "type"),
account: pick("account", "Account"),
password: pick("password", "Password"),
token: pick("token", "Token"),
remark: pick("remark", "Remark"),
extracted: Number(pick("is_extracted", "isExtracted", "IsExtracted")) === 1,
extractedAt: formatTime(pickNullable("extracted_time", "extractedAt")),
extractedPlatform: pickNullable("extracted_platform", "extractedPlatform"),
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() {
isMobile.value = window.innerWidth <= 768;
}
onMounted(() => {
updateDeviceType();
window.addEventListener('resize', updateDeviceType);
fetchList();
});
onUnmounted(() => {
window.removeEventListener('resize', updateDeviceType);
});
onMounted(() => { fetchList(); });
// ---- 接口说明数据 ----
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: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
{ value: 'krio', label: 'Krio', desc: 'Krio 号池' },
{ 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` },
{
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 = `// 纯 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-select v-model="query.status" placeholder="提取状态" clearable class="w-140">
<el-input
v-model="query.keyword"
placeholder="搜索账号 / token / 备注"
clearable
class="w-260"
/>
<el-select
v-model="query.status"
placeholder="提取状态"
clearable
class="w-140"
>
<el-option label="未提取" value="unused" />
<el-option label="已提取" value="extracted" />
</el-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 class="pool-table" :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
<el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="52" />
<el-table-column prop="id" label="ID" width="80" />
<el-table-column label="账号类型" width="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 prop="remark" label="备注" min-width="140" />
<el-table-column label="操作" width="220" align="center">
<el-table-column label="操作" width="220" fixed="right" align="center">
<template #default="{ row }">
<el-button link type="primary" @click="openDetail(row)">详情</el-button>
<el-button link type="warning" :disabled="row.extracted" @click="openExtractByRow(row)">提取</el-button>
<el-button v-if="row.extracted" link type="success" @click="copyCardInfo(row)">复制</el-button>
<el-button link type="primary" @click="openDetail(row)"
>详情</el-button
>
<el-button
link
type="warning"
:disabled="row.extracted"
@click="openExtractByRow(row)"
>提取</el-button
>
<el-button
v-if="row.extracted"
link
type="success"
@click="copyCardInfo(row)"
>复制</el-button
>
</template>
</el-table-column>
</el-table>
@ -397,16 +538,13 @@ 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">
该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
@ -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>

49
src/views/accountpool/windsurf/components/replenish.vue Normal file
View File

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

380
src/views/accountpool/windsurf/index.vue
View File

@ -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 activeTypeTab = ref('all');
const query = reactive({ keyword: "", status: "" });
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.status = '';
query.keyword = "";
query.status = "";
}
const typeTabs = computed(() => [
{ label: '全部', value: 'all' },
{ label: '账号密码', value: 'account' },
{ label: '账号密码+Token', value: 'account_tk' },
{ label: 'Token', value: 'tk' },
{ label: "全部", value: "all" },
{ label: "账号密码", value: "account" },
{ label: "账号密码+Token", value: "account_tk" },
{ label: "Token", value: "tk" },
]);
watch(() => [query.keyword, query.status, activeTypeTab.value], () => {
watch(
() => [query.keyword, query.status, activeTypeTab.value],
() => {
pagination.page = 1;
fetchList();
});
watch(() => [pagination.page, pagination.pageSize], () => { 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; }
ElMessage.success('提取成功');
if (res?.code !== 200) { ElMessage.error(res?.msg || "提取失败"); return; }
ElMessage.success("提取成功");
extractVisible.value = false;
const row = normalizeRow(res.data || {});
navigator.clipboard.writeText(rowToText(row)).catch(() => {});
await fetchList();
} finally { loading.value = false; }
} 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 {
const results = await Promise.all(
selectedRows.value.map((row) =>
extractAccountPool(moduleKey, { id: row.id, type: row.type, platform: 'local' })
)
).then(() => { ElMessage.success('批量提取成功'); fetchList(); })
.finally(() => { loading.value = false; });
extractAccountPool(moduleKey, {
id: row.id, type: row.type,
platform: batchExtractForm.platform,
remark: batchExtractForm.remark || '',
}),
),
);
const succeeded = results.filter((r) => r?.code === 200).map((r) => normalizeRow(r.data || {}));
const failCount = results.length - succeeded.length;
if (failCount > 0) {
ElMessage.warning(`${succeeded.length} 条成功，${failCount} 条失败`);
} else {
ElMessage.success("批量提取成功");
}
batchExtractVisible.value = false;
if (succeeded.length) {
const text = succeeded.map(rowToText).filter(Boolean).join('\n');
navigator.clipboard.writeText(text).catch(() => {});
}
fetchList();
} finally {
loading.value = false;
}
}
function rowToText(row) {
const parts = [];
if (row.account) parts.push(row.account);
if (row.password) parts.push(row.password);
if (row.token) parts.push(row.token);
return parts.join(' / ');
}
async function handleReplenish() {
loading.value = true;
try {
const res = await replenishAccountPool(moduleKey, {
type: replenishForm.type,
platform: replenishForm.platform,
remark: replenishForm.remark || '',
});
if (res?.code !== 200) { ElMessage.error(res?.msg || '补号失败'); return; }
ElMessage.success('补号成功，已复制到剪贴板');
replenishVisible.value = false;
const row = normalizeRow(res.data || {});
navigator.clipboard.writeText(rowToText(row)).catch(() => {});
await fetchList();
} finally {
loading.value = false;
}
}
function typeText(type) {
if (type === 'account') return '账号密码';
if (type === 'account_tk') return '账号密码+Token';
return 'Token';
if (type === "account") return "账号密码";
if (type === "account_tk") return "账号密码+Token";
return "Token";
}
const tooltipOpts = {
popperClass: 'pool-tooltip',
popperStyle: { maxWidth: '600px', wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
};
const PLATFORM_MAP = {
local: { label: '本地', type: 'info' },
xianyu: { label: '闲鱼', type: 'warning' },
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 platformTagType(platform) { return PLATFORM_MAP[platform]?.type || 'info'; }
function platformText(platform) {
return PLATFORM_MAP[platform]?.label || platform || "-";
}
function platformTagType(platform) {
return PLATFORM_MAP[platform]?.type || "info";
}
function normalizeRow(raw) {
const pick = (...keys) => {
for (const key of keys) {
if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
}
return '';
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 {
id: pick('id', 'Id', 'ID'),
type: pick('data_type', 'dataType', 'type'),
account: pick('account', 'Account'),
password: pick('password', 'Password'),
token: pick('token', 'Token'),
remark: pick('remark', 'Remark'),
extracted: Number(pick('is_extracted', 'isExtracted', 'IsExtracted')) === 1,
extractedAt: formatTime(pickNullable('extracted_time', 'extractedAt')),
extractedPlatform: pickNullable('extracted_platform', 'extractedPlatform'),
createdAt: formatTime(pick('create_time', 'createdAt')),
id: pick("id", "Id", "ID"),
type: pick("data_type", "dataType", "type"),
account: pick("account", "Account"),
password: pick("password", "Password"),
token: pick("token", "Token"),
remark: pick("remark", "Remark"),
extracted: Number(pick("is_extracted", "isExtracted", "IsExtracted")) === 1,
extractedAt: formatTime(pickNullable("extracted_time", "extractedAt")),
extractedPlatform: pickNullable("extracted_platform", "extractedPlatform"),
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() {
isMobile.value = window.innerWidth <= 768;
}
onMounted(() => {
updateDeviceType();
window.addEventListener('resize', updateDeviceType);
fetchList();
});
onUnmounted(() => {
window.removeEventListener('resize', updateDeviceType);
});
onMounted(() => { fetchList(); });
// ---- 接口说明数据 ----
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: 'windsurf', label: 'Windsurf', desc: 'Windsurf 号池' },
{ value: 'krio', label: 'Krio', desc: 'Krio 号池' },
{ 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` },
{
label: "闲鱼 · 提取 Windsurf Token",
url: `${BASE_URL}/api/getcard?type=xianyu&module=windsurf&data_type=tk`,
},
{
label: "拼多多 · 提取 Windsurf 账号密码",
url: `${BASE_URL}/api/getcard?type=pinduoduo&module=windsurf&data_type=account`,
},
{
label: "京东 · 提取 Cursor 任意类型",
url: `${BASE_URL}/api/getcard?type=jingdong&module=cursor`,
},
{
label: "抖音 · 提取 Krio Token",
url: `${BASE_URL}/api/getcard?type=douyin&module=krio&data_type=tk`,
},
];
const successResp = `// 纯 Token 类型（data_type=tk）
@ -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-select v-model="query.status" placeholder="提取状态" clearable class="w-140">
<el-input
v-model="query.keyword"
placeholder="搜索账号 / token / 备注"
clearable
class="w-260"
/>
<el-select
v-model="query.status"
placeholder="提取状态"
clearable
class="w-140"
>
<el-option label="未提取" value="unused" />
<el-option label="已提取" value="extracted" />
</el-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 class="pool-table" :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
<el-table :data="pagedList" border stripe style="width: 100%" :loading="loading" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="52" />
<el-table-column prop="id" label="ID" width="80" />
<el-table-column label="账号类型" width="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 prop="remark" label="备注" min-width="140" />
<el-table-column label="操作" width="220" align="center">
<el-table-column label="操作" width="220" fixed="right" align="center">
<template #default="{ row }">
<el-button link type="primary" @click="openDetail(row)">详情</el-button>
<el-button link type="warning" :disabled="row.extracted" @click="openExtractByRow(row)">提取</el-button>
<el-button v-if="row.extracted" link type="success" @click="copyCardInfo(row)">复制</el-button>
<el-button link type="primary" @click="openDetail(row)"
>详情</el-button
>
<el-button
link
type="warning"
:disabled="row.extracted"
@click="openExtractByRow(row)"
>提取</el-button
>
<el-button
v-if="row.extracted"
link
type="success"
@click="copyCardInfo(row)"
>复制</el-button
>
</template>
</el-table-column>
</el-table>
@ -397,16 +537,13 @@ 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">
该接口为对外公开接口，无需登录认证，每次调用自动提取一条未使用的卡密并标记为已提取（不可重复）。
@ -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>

45
src/views/analytics/users/index.vue
View File

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

157
src/views/home/index.vue
View File

@ -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 * as echarts from "echarts";
import { User, Pointer, Connection, Histogram } from "@element-plus/icons-vue";
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
import * as echarts from 'echarts';
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: "今日新增",
value: 156,
icon: Pointer,
color: "#67C23A",
percentage: 5,
isUp: true,
},
{
title: "活跃用户",
value: 3420,
icon: Connection,
color: "#E6A23C",
percentage: 2,
isUp: false,
},
{
title: "留存率",
value: 85,
icon: Histogram,
color: "#F56C6C",
percentage: 1,
isUp: true,
},
{ title: '总用户数', value: 12840, icon: User, color: '#3973FF', percentage: 12, isUp: true },
{ title: '今日新增', value: 156, icon: Pointer, color: '#67C23A', percentage: 5, isUp: true },
{ title: '活跃用户', value: 3420, icon: Connection, color: '#E6A23C', percentage: 2, isUp: false },
{ title: '留存率', value: 85, icon: Histogram, color: '#F56C6C', percentage: 1, isUp: true },
]);
// --- 初始化图表 ---
const initCharts = () => {
// 折线图配置
if (lineChartRef.value) {
lineChartInstance.value = echarts.init(lineChartRef.value);
lineChartInstance.value.setOption({
tooltip: { trigger: "axis" },
grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
tooltip: { trigger: 'axis' },
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: "新增用户",
type: "line",
name: '新增用户',
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" },
legend: { bottom: "0%", left: "center" },
tooltip: { trigger: 'item' },
legend: {
orient: 'vertical',
right: '5%',
top: 'center',
},
series: [
{
name: "等级分布",
type: "pie",
radius: ["40%", "70%"],
name: '等级分布',
type: 'pie',
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: 735, name: "VIP会员" },
{ value: 580, name: "超级管理员" },
{ value: 484, name: "运营人员" },
],
},
],
{ value: 1048, name: '普通用户' },
{ value: 735, name: 'VIP会员' },
{ value: 580, 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 {
color: #67c23a;
}
&.down {
color: #f56c6c;
}
span {
color: #909399;
margin-left: 4px;
}
&.up { color: #67c23a; }
&.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,6 +202,29 @@ 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;

108
src/views/login/index.vue
View File

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

1
新建 文本文档.txt Normal file
View File

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