增加续杯激活

This commit is contained in:
扫地僧 2026-06-15 23:43:55 +08:00
parent c6b97f79f2
commit 8ea225d819
6 changed files with 1165 additions and 1 deletions

@ -1 +0,0 @@
Subproject commit e776179c72c44ecd4e6e197f0c88253e8ab71bae

View File

@ -0,0 +1,106 @@
// @ts-ignore request 封装是 JS 文件,项目未提供 TS 声明
import request from '@/utils/request';
const baseUrl = '/platform/cursor/activationcode';
export interface CursorActivationCodeQuery {
page?: number;
pageSize?: number;
keyword?: string;
status?: number | string;
type?: number | string;
bindStatus?: number | string;
}
export interface CursorActivationCodePayload {
id?: number | string;
code?: string;
type?: number;
status?: number;
durationDays?: number;
bindAccount?: string;
bindDeviceId?: number | string;
ownerUserId?: number | string;
ownerUserName?: string;
activatedAt?: string;
expiredAt?: string;
remark?: string;
}
export interface GenerateActivationCodePayload {
count: number;
type?: number;
durationDays?: number;
ownerUserId?: number | string;
ownerUserName?: string;
remark?: string;
}
export function getCursorActivationCodeList(params: CursorActivationCodeQuery) {
return request({
url: `${baseUrl}/list`,
method: 'get',
params,
});
}
export function getCursorActivationCodeDetail(id: number | string) {
return request({
url: `${baseUrl}/detail/${id}`,
method: 'get',
});
}
export function addCursorActivationCode(data: CursorActivationCodePayload) {
return request({
url: `${baseUrl}/add`,
method: 'post',
data,
});
}
export function updateCursorActivationCode(data: CursorActivationCodePayload) {
return request({
url: `${baseUrl}/update`,
method: 'post',
data,
});
}
export function deleteCursorActivationCode(id: number | string) {
return request({
url: `${baseUrl}/delete/${id}`,
method: 'post',
});
}
export function generateCursorActivationCode(data: GenerateActivationCodePayload) {
return request({
url: `${baseUrl}/generate`,
method: 'post',
data,
});
}
export function enableCursorActivationCode(id: number | string) {
return request({
url: `${baseUrl}/enable/${id}`,
method: 'post',
});
}
export function disableCursorActivationCode(id: number | string) {
return request({
url: `${baseUrl}/disable/${id}`,
method: 'post',
});
}
export function exportCursorActivationCode(params: CursorActivationCodeQuery) {
return request({
url: `${baseUrl}/export`,
method: 'get',
params,
responseType: 'blob',
});
}

View File

@ -0,0 +1,90 @@
// @ts-ignore request 封装是 JS 文件,项目未提供 TS 声明
import request from '@/utils/request';
const baseUrl = '/platform/cursor/equipment';
export interface CursorEquipmentQuery {
page?: number;
pageSize?: number;
keyword?: string;
status?: number | string;
system?: string;
os?: string;
}
export interface CursorEquipmentPayload {
id?: number;
deviceInfo?: string;
machineCode?: string;
status?: number;
system?: string;
version?: string;
bindAccount?: string;
ownerUserId?: number;
ownerUserName?: string;
activationTime?: string;
expireTime?: string;
remark?: string;
}
export function getCursorEquipmentList(params: CursorEquipmentQuery) {
return request({
url: `${baseUrl}/list`,
method: 'get',
params,
});
}
export function getCursorEquipmentDetail(id: number | string) {
return request({
url: `${baseUrl}/detail/${id}`,
method: 'get',
});
}
export function addCursorEquipment(data: CursorEquipmentPayload) {
return request({
url: `${baseUrl}/add`,
method: 'post',
data,
});
}
export function updateCursorEquipment(data: CursorEquipmentPayload) {
return request({
url: `${baseUrl}/update`,
method: 'post',
data,
});
}
export function deleteCursorEquipment(id: number | string) {
return request({
url: `${baseUrl}/delete/${id}`,
method: 'post',
});
}
export function activateCursorEquipment(data: { id: number | string }) {
return request({
url: `${baseUrl}/activate`,
method: 'post',
data,
});
}
export function getCursorEquipmentActivationRecords(params: Record<string, any>) {
return request({
url: `${baseUrl}/activationRecords`,
method: 'get',
params,
});
}
export function getCursorEquipmentExtractRecords(params: Record<string, any>) {
return request({
url: `${baseUrl}/extractRecords`,
method: 'get',
params,
});
}

View File

@ -615,11 +615,20 @@ function copyCardInfo(row) {
const CURSOR_PRO_LIMIT_TEXT = 'Get Cursor Pro for more Agent usage, unlimited Tab, and more.'; const CURSOR_PRO_LIMIT_TEXT = 'Get Cursor Pro for more Agent usage, unlimited Tab, and more.';
function formatCursorProbeDialogText(d) { function formatCursorProbeDialogText(d) {
// 1. ok
if (d && typeof d.ok === 'boolean') {
return d.ok ? '该TOKEN可用' : `该TOKEN已用完 (${d.detail || '额度枯竭'})`;
}
// 2.
const CURSOR_PRO_LIMIT_TEXT = 'Get Cursor Pro for more Agent usage, unlimited Tab, and more.';
const detail = String(d?.detail || ''); const detail = String(d?.detail || '');
const rawPreview = String(d?.rawPreview || ''); const rawPreview = String(d?.rawPreview || '');
if (detail.includes(CURSOR_PRO_LIMIT_TEXT) || rawPreview.includes(CURSOR_PRO_LIMIT_TEXT)) { if (detail.includes(CURSOR_PRO_LIMIT_TEXT) || rawPreview.includes(CURSOR_PRO_LIMIT_TEXT)) {
return '该TOKEN已用完'; return '该TOKEN已用完';
} }
return '该TOKEN可用'; return '该TOKEN可用';
} }

View File

@ -0,0 +1,959 @@
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
import {
addCursorActivationCode,
deleteCursorActivationCode,
disableCursorActivationCode,
enableCursorActivationCode,
exportCursorActivationCode,
generateCursorActivationCode,
getCursorActivationCodeDetail,
getCursorActivationCodeList,
updateCursorActivationCode,
} from '../../../api/cursorActivationCode';
type ActivationCodeRow = Record<string, any>;
const loading = ref(false);
const actionLoading = ref(false);
const editVisible = ref(false);
const generateVisible = ref(false);
const detailVisible = ref(false);
const isMobile = ref(false);
const currentRow = ref<ActivationCodeRow | null>(null);
const selectedRows = ref<ActivationCodeRow[]>([]);
const tableData = ref<ActivationCodeRow[]>([]);
const total = ref(0);
const formRef = ref<FormInstance>();
const generateFormRef = ref<FormInstance>();
const query = reactive({
keyword: '',
status: '',
type: '',
bindStatus: '',
});
const pagination = reactive({
page: 1,
pageSize: 20,
});
const form = reactive({
id: '',
code: '',
type: 30,
status: 0,
durationDays: 30,
bindAccount: '',
bindDeviceId: '',
ownerUserId: '',
ownerUserName: '',
activatedAt: '',
expiredAt: '',
remark: '',
});
const generateForm = reactive({
count: 10,
type: 30,
durationDays: 30,
ownerUserId: '',
ownerUserName: '',
remark: '',
});
const statusOptions = [
{ label: '未使用', value: 0 },
{ label: '已使用', value: 1 },
{ label: '已过期', value: 2 },
{ label: '已禁用', value: 3 },
];
const typeOptions = [
{ label: '天卡', value: 1, days: 1 },
{ label: '周卡', value: 7, days: 7 },
{ label: '月卡', value: 30, days: 30 },
{ label: '季卡', value: 90, days: 90 },
{ label: '年卡', value: 365, days: 365 },
{ label: '自定义', value: 0, days: 0 },
];
const bindStatusOptions = [
{ label: '未绑定', value: 0 },
{ label: '已绑定', value: 1 },
];
const statusMap: Record<string, { label: string; type: string }> = {
'0': { label: '未使用', type: 'info' },
'1': { label: '已使用', type: 'success' },
'2': { label: '已过期', type: 'warning' },
'3': { label: '已禁用', type: 'danger' },
};
const rules: FormRules = {
code: [{ required: true, message: '请输入激活码', trigger: 'blur' }],
type: [{ required: true, message: '请选择卡密类型', trigger: 'change' }],
durationDays: [{ required: true, message: '请输入有效天数', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
};
const generateRules: FormRules = {
count: [{ required: true, message: '请输入生成数量', trigger: 'blur' }],
type: [{ required: true, message: '请选择卡密类型', trigger: 'change' }],
durationDays: [{ required: true, message: '请输入有效天数', trigger: 'blur' }],
};
const summary = computed(() => {
const unused = tableData.value.filter((item) => Number(item.status) === 0).length;
const used = tableData.value.filter((item) => Number(item.status) === 1).length;
const expired = tableData.value.filter((item) => Number(item.status) === 2).length;
const disabled = tableData.value.filter((item) => Number(item.status) === 3).length;
return [
{ label: '当前页激活码', value: tableData.value.length, type: 'primary' },
{ label: '未使用', value: unused, type: 'info' },
{ label: '已使用', value: used, type: 'success' },
{ label: '过期/禁用', value: expired + disabled, type: 'danger' },
];
});
watch(
() => [query.keyword, query.status, query.type, query.bindStatus],
() => {
pagination.page = 1;
fetchList();
},
);
watch(
() => [pagination.page, pagination.pageSize],
() => {
fetchList();
},
);
function pick(raw: any, ...keys: string[]) {
for (const key of keys) {
if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
}
return '';
}
function formatTime(value: any) {
if (!value) return '';
const d = new Date(value);
if (Number.isNaN(d.getTime())) return String(value);
const p = (v: number) => String(v).padStart(2, '0');
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
}
function normalizeRow(raw: any): ActivationCodeRow {
const status = Number(pick(raw, 'status', 'Status') || 0);
const type = Number(pick(raw, 'type', 'Type', 'card_type', 'cardType') || 0);
const bindAccount = pick(raw, 'bind_account', 'bindAccount', 'BindAccount', 'account', 'Account', 'email', 'Email');
const bindDeviceId = pick(raw, 'bind_device_id', 'bindDeviceId', 'BindDeviceID', 'device_id', 'deviceId');
return {
id: pick(raw, 'id', 'ID', 'Id'),
code: pick(raw, 'code', 'Code', 'activation_code', 'activationCode', 'card_no', 'cardNo'),
type,
typeName: typeLabel(type),
status,
durationDays: Number(pick(raw, 'duration_days', 'durationDays', 'DurationDays', 'days', 'Days') || 0),
bindAccount,
bindDeviceId,
bindStatus: bindAccount || bindDeviceId ? 1 : 0,
deviceInfo: pick(raw, 'device_info', 'deviceInfo', 'DeviceInfo'),
machineCode: pick(raw, 'machine_code', 'machineCode', 'MachineCode'),
ownerUserId: pick(raw, 'owner_user_id', 'ownerUserId', 'OwnerUserID'),
ownerUserName: pick(raw, 'owner_user_name', 'ownerUserName', 'OwnerUserName', 'owner', 'Owner', 'user_name', 'userName'),
activatedAt: formatTime(pick(raw, 'activated_at', 'activatedAt', 'activation_time', 'activationTime')),
expiredAt: formatTime(pick(raw, 'expired_at', 'expiredAt', 'expire_time', 'expireTime')),
createdAt: formatTime(pick(raw, 'created_at', 'createdAt', 'create_time', 'createTime', 'CreatedAt')),
updatedAt: formatTime(pick(raw, 'updated_at', 'updatedAt', 'update_time', 'updateTime', 'UpdatedAt')),
remark: pick(raw, 'remark', 'Remark'),
raw,
};
}
function statusLabel(status: string | number) {
const key = String(status ?? '');
return statusMap[key]?.label || key || '-';
}
function statusTagType(status: string | number) {
return statusMap[String(status ?? '')]?.type || 'info';
}
function typeLabel(type: string | number) {
const item = typeOptions.find((option) => Number(option.value) === Number(type));
return item?.label || (type ? `${type}` : '自定义');
}
function resetQuery() {
query.keyword = '';
query.status = '';
query.type = '';
query.bindStatus = '';
}
function resetForm() {
form.id = '';
form.code = '';
form.type = 30;
form.status = 0;
form.durationDays = 30;
form.bindAccount = '';
form.bindDeviceId = '';
form.ownerUserId = '';
form.ownerUserName = '';
form.activatedAt = '';
form.expiredAt = '';
form.remark = '';
formRef.value?.clearValidate();
}
function resetGenerateForm() {
generateForm.count = 10;
generateForm.type = 30;
generateForm.durationDays = 30;
generateForm.ownerUserId = '';
generateForm.ownerUserName = '';
generateForm.remark = '';
generateFormRef.value?.clearValidate();
}
function handleSelectionChange(rows: ActivationCodeRow[]) {
selectedRows.value = rows;
}
function handleTypeChange(type: number) {
const item = typeOptions.find((option) => Number(option.value) === Number(type));
if (item && item.days > 0) form.durationDays = item.days;
}
function handleGenerateTypeChange(type: number) {
const item = typeOptions.find((option) => Number(option.value) === Number(type));
if (item && item.days > 0) generateForm.durationDays = item.days;
}
async function fetchList() {
loading.value = true;
try {
const res = await getCursorActivationCodeList({
page: pagination.page,
pageSize: pagination.pageSize,
keyword: query.keyword || undefined,
status: query.status === '' ? undefined : query.status,
type: query.type === '' ? undefined : query.type,
bindStatus: query.bindStatus === '' ? undefined : query.bindStatus,
});
if (res?.code !== 200) {
ElMessage.error(res?.msg || '获取激活码列表失败');
return;
}
const list = Array.isArray(res?.data?.list) ? res.data.list : Array.isArray(res?.data) ? res.data : [];
tableData.value = list.map(normalizeRow);
total.value = Number(res?.data?.total || list.length || 0);
} finally {
loading.value = false;
}
}
function openAdd() {
currentRow.value = null;
resetForm();
editVisible.value = true;
}
function openEdit(row: ActivationCodeRow) {
currentRow.value = row;
resetForm();
form.id = String(row.id || '');
form.code = row.code || '';
form.type = Number(row.type || 0);
form.status = Number(row.status || 0);
form.durationDays = Number(row.durationDays || 0);
form.bindAccount = row.bindAccount || '';
form.bindDeviceId = row.bindDeviceId ? String(row.bindDeviceId) : '';
form.ownerUserId = row.ownerUserId ? String(row.ownerUserId) : '';
form.ownerUserName = row.ownerUserName || '';
form.activatedAt = row.activatedAt || '';
form.expiredAt = row.expiredAt || '';
form.remark = row.remark || '';
editVisible.value = true;
}
function openGenerate() {
resetGenerateForm();
generateVisible.value = true;
}
async function openDetail(row: ActivationCodeRow) {
loading.value = true;
try {
const res = await getCursorActivationCodeDetail(row.id);
if (res?.code === 200) {
currentRow.value = normalizeRow(res.data || row.raw || row);
} else {
currentRow.value = row;
ElMessage.warning(res?.msg || '详情接口异常,已展示列表数据');
}
detailVisible.value = true;
} finally {
loading.value = false;
}
}
async function handleSave() {
await formRef.value?.validate();
actionLoading.value = true;
try {
const data = {
id: form.id || undefined,
code: form.code,
type: Number(form.type),
status: Number(form.status),
durationDays: Number(form.durationDays || 0),
bindAccount: form.bindAccount || undefined,
bindDeviceId: form.bindDeviceId || undefined,
ownerUserId: form.ownerUserId || undefined,
ownerUserName: form.ownerUserName || undefined,
activatedAt: form.activatedAt || undefined,
expiredAt: form.expiredAt || undefined,
remark: form.remark || undefined,
};
const api = form.id ? updateCursorActivationCode : addCursorActivationCode;
const res = await api(data);
if (res?.code !== 200) {
ElMessage.error(res?.msg || '保存失败');
return;
}
ElMessage.success(form.id ? '激活码已更新' : '激活码已新增');
editVisible.value = false;
await fetchList();
} finally {
actionLoading.value = false;
}
}
async function handleGenerate() {
await generateFormRef.value?.validate();
actionLoading.value = true;
try {
const res = await generateCursorActivationCode({
count: Number(generateForm.count || 1),
type: Number(generateForm.type),
durationDays: Number(generateForm.durationDays || 0),
ownerUserId: generateForm.ownerUserId || undefined,
ownerUserName: generateForm.ownerUserName || undefined,
remark: generateForm.remark || undefined,
});
if (res?.code !== 200) {
ElMessage.error(res?.msg || '生成失败');
return;
}
ElMessage.success('激活码已生成');
generateVisible.value = false;
await fetchList();
} finally {
actionLoading.value = false;
}
}
async function handleDelete(row: ActivationCodeRow) {
try {
await ElMessageBox.confirm(`确认删除激活码「${row.code || row.id}」?`, '删除激活码', {
type: 'warning',
confirmButtonText: '确认删除',
cancelButtonText: '取消',
});
} catch {
return;
}
loading.value = true;
try {
const res = await deleteCursorActivationCode(row.id);
if (res?.code !== 200) {
ElMessage.error(res?.msg || '删除失败');
return;
}
ElMessage.success('激活码已删除');
await fetchList();
} finally {
loading.value = false;
}
}
async function handleBatchDelete() {
if (!selectedRows.value.length) {
ElMessage.warning('请选择需要删除的激活码');
return;
}
try {
await ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 个激活码?`, '批量删除', {
type: 'warning',
confirmButtonText: '确认删除',
cancelButtonText: '取消',
});
} catch {
return;
}
loading.value = true;
try {
for (const row of selectedRows.value) {
const res = await deleteCursorActivationCode(row.id);
if (res?.code !== 200) {
ElMessage.error(res?.msg || `删除「${row.code || row.id}」失败`);
return;
}
}
ElMessage.success('选中激活码已删除');
selectedRows.value = [];
await fetchList();
} finally {
loading.value = false;
}
}
async function handleToggleStatus(row: ActivationCodeRow) {
const isDisabled = Number(row.status) === 3;
const title = isDisabled ? '启用激活码' : '禁用激活码';
const text = isDisabled ? '确认启用该激活码?' : '确认禁用该激活码?';
try {
await ElMessageBox.confirm(text, title, {
type: 'info',
confirmButtonText: isDisabled ? '确认启用' : '确认禁用',
cancelButtonText: '取消',
});
} catch {
return;
}
loading.value = true;
try {
const api = isDisabled ? enableCursorActivationCode : disableCursorActivationCode;
const res = await api(row.id);
if (res?.code !== 200) {
ElMessage.error(res?.msg || '操作失败');
return;
}
ElMessage.success(isDisabled ? '激活码已启用' : '激活码已禁用');
await fetchList();
} finally {
loading.value = false;
}
}
function copyCode(code: unknown) {
const text = String(code || '').trim();
if (!text) {
ElMessage.warning('暂无激活码可复制');
return;
}
navigator.clipboard.writeText(text).then(() => {
ElMessage.success('激活码已复制');
});
}
async function handleExport() {
loading.value = true;
try {
const res = await exportCursorActivationCode({
keyword: query.keyword || undefined,
status: query.status === '' ? undefined : query.status,
type: query.type === '' ? undefined : query.type,
bindStatus: query.bindStatus === '' ? undefined : query.bindStatus,
});
const blob = res instanceof Blob ? res : res?.data instanceof Blob ? res.data : null;
if (!blob) {
ElMessage.success('导出请求已提交');
return;
}
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `cursor-activation-code-${Date.now()}.xlsx`;
link.click();
window.URL.revokeObjectURL(url);
} finally {
loading.value = false;
}
}
function updateDeviceType() {
isMobile.value = window.innerWidth <= 768;
}
onMounted(() => {
updateDeviceType();
window.addEventListener('resize', updateDeviceType);
fetchList();
});
onUnmounted(() => {
window.removeEventListener('resize', updateDeviceType);
});
</script>
<template>
<div class="cursor-activation-code-page">
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>激活码管理Cursor</span>
<div class="header-actions">
<el-button type="success" @click="openGenerate">批量生成</el-button>
<el-button type="primary" @click="openAdd">新增激活码</el-button>
</div>
</div>
</template>
<div class="summary-grid">
<div v-for="item in summary" :key="item.label" class="summary-card">
<div class="summary-label">{{ item.label }}</div>
<div class="summary-value" :class="`is-${item.type}`">{{ item.value }}</div>
</div>
</div>
<div class="toolbar">
<div class="toolbar-left">
<el-input v-model="query.keyword" placeholder="搜索激活码 / 账号 / 设备 / 归属用户" clearable class="w-320" />
<el-select v-model="query.status" placeholder="使用状态" clearable class="w-140">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="query.type" placeholder="卡密类型" clearable class="w-140">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="query.bindStatus" placeholder="绑定状态" clearable class="w-140">
<el-option v-for="item in bindStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button @click="resetQuery">重置</el-button>
</div>
<div class="toolbar-right">
<el-button :disabled="!selectedRows.length" type="danger" plain @click="handleBatchDelete">批量删除</el-button>
<el-button @click="handleExport">导出</el-button>
<el-button :loading="loading" @click="fetchList">刷新</el-button>
</div>
</div>
<div class="table-scroll">
<el-table
v-loading="loading"
class="activation-code-table"
:data="tableData"
border
stripe
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="52" />
<el-table-column prop="id" label="ID" width="80" />
<el-table-column label="激活码" min-width="260" show-overflow-tooltip>
<template #default="{ row }">
<div class="code-cell">
<span class="code-text">{{ row.code || '-' }}</span>
<el-button v-if="row.code" link type="primary" @click="copyCode(row.code)">复制</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="类型" width="100" align="center">
<template #default="{ row }">{{ row.typeName || typeLabel(row.type) }}</template>
</el-table-column>
<el-table-column label="有效天数" width="100" align="center">
<template #default="{ row }">{{ row.durationDays || '-' }}</template>
</el-table-column>
<el-table-column label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="statusTagType(row.status)">
{{ statusLabel(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="绑定信息" min-width="220" show-overflow-tooltip>
<template #default="{ row }">
<div>{{ row.bindAccount || '-' }}</div>
<div class="muted">设备{{ row.machineCode || row.bindDeviceId || '-' }}</div>
</template>
</el-table-column>
<el-table-column prop="ownerUserName" label="归属用户" min-width="130" show-overflow-tooltip />
<el-table-column prop="activatedAt" label="激活时间" width="180">
<template #default="{ row }">{{ row.activatedAt || '-' }}</template>
</el-table-column>
<el-table-column prop="expiredAt" label="过期时间" width="180">
<template #default="{ row }">{{ row.expiredAt || '-' }}</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" width="180">
<template #default="{ row }">{{ row.createdAt || '-' }}</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
<el-table-column label="操作" width="250" fixed="right" align="center">
<template #default="{ row }">
<el-button link type="primary" @click="openDetail(row)">详情</el-button>
<el-button link type="warning" @click="openEdit(row)">编辑</el-button>
<el-button link :type="Number(row.status) === 3 ? 'success' : 'info'" @click="handleToggleStatus(row)">
{{ Number(row.status) === 3 ? '启用' : '禁用' }}
</el-button>
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pager">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
background
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:page-sizes="[20, 50, 100]"
:total="total"
/>
</div>
</el-card>
<el-dialog
v-model="editVisible"
:title="form.id ? '编辑激活码' : '新增激活码'"
width="720px"
class="activation-code-edit-dialog"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
<el-form-item label="激活码" prop="code">
<el-input v-model="form.code" placeholder="请输入激活码" clearable />
</el-form-item>
<el-row :gutter="12">
<el-col :xs="24" :sm="12">
<el-form-item label="卡密类型" prop="type">
<el-select v-model="form.type" placeholder="请选择卡密类型" class="full" @change="handleTypeChange">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="有效天数" prop="durationDays">
<el-input-number v-model="form.durationDays" :min="0" :max="9999" class="full" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :xs="24" :sm="12">
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择状态" class="full">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="归属用户ID">
<el-input v-model="form.ownerUserId" placeholder="请输入归属用户ID" clearable />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="归属用户">
<el-input v-model="form.ownerUserName" placeholder="请输入归属用户名称" clearable />
</el-form-item>
<el-row :gutter="12">
<el-col :xs="24" :sm="12">
<el-form-item label="绑定账号">
<el-input v-model="form.bindAccount" placeholder="请输入绑定账号" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="绑定设备ID">
<el-input v-model="form.bindDeviceId" placeholder="请输入绑定设备ID" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :xs="24" :sm="12">
<el-form-item label="激活时间">
<el-date-picker
v-model="form.activatedAt"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择激活时间"
class="full"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="过期时间">
<el-date-picker
v-model="form.expiredAt"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择过期时间"
class="full"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="editVisible = false">取消</el-button>
<el-button type="primary" :loading="actionLoading" @click="handleSave">保存</el-button>
</template>
</el-dialog>
<el-dialog v-model="generateVisible" title="批量生成激活码" width="620px" class="activation-code-generate-dialog">
<el-form ref="generateFormRef" :model="generateForm" :rules="generateRules" label-width="110px">
<el-row :gutter="12">
<el-col :xs="24" :sm="12">
<el-form-item label="生成数量" prop="count">
<el-input-number v-model="generateForm.count" :min="1" :max="10000" class="full" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="卡密类型" prop="type">
<el-select
v-model="generateForm.type"
placeholder="请选择卡密类型"
class="full"
@change="handleGenerateTypeChange"
>
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="有效天数" prop="durationDays">
<el-input-number v-model="generateForm.durationDays" :min="0" :max="9999" class="full" />
</el-form-item>
<el-row :gutter="12">
<el-col :xs="24" :sm="12">
<el-form-item label="归属用户ID">
<el-input v-model="generateForm.ownerUserId" placeholder="请输入归属用户ID" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="归属用户">
<el-input v-model="generateForm.ownerUserName" placeholder="请输入归属用户名称" clearable />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注">
<el-input v-model="generateForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="generateVisible = false">取消</el-button>
<el-button type="primary" :loading="actionLoading" @click="handleGenerate">确认生成</el-button>
</template>
</el-dialog>
<el-drawer v-model="detailVisible" title="激活码详情" size="640px" direction="rtl" class="activation-code-detail-drawer">
<el-descriptions v-if="currentRow" :column="1" border>
<el-descriptions-item label="ID">{{ currentRow.id || '-' }}</el-descriptions-item>
<el-descriptions-item label="激活码">
<span class="code-text">{{ currentRow.code || '-' }}</span>
<el-button v-if="currentRow.code" link type="primary" @click="copyCode(currentRow.code)">复制</el-button>
</el-descriptions-item>
<el-descriptions-item label="卡密类型">{{ currentRow.typeName || typeLabel(currentRow.type) }}</el-descriptions-item>
<el-descriptions-item label="有效天数">{{ currentRow.durationDays || '-' }}</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag :type="statusTagType(currentRow.status)">
{{ statusLabel(currentRow.status) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="绑定账号">{{ currentRow.bindAccount || '-' }}</el-descriptions-item>
<el-descriptions-item label="绑定设备">{{ currentRow.machineCode || currentRow.bindDeviceId || '-' }}</el-descriptions-item>
<el-descriptions-item label="设备信息">{{ currentRow.deviceInfo || '-' }}</el-descriptions-item>
<el-descriptions-item label="归属用户">{{ currentRow.ownerUserName || '-' }}</el-descriptions-item>
<el-descriptions-item label="归属用户ID">{{ currentRow.ownerUserId || '-' }}</el-descriptions-item>
<el-descriptions-item label="激活时间">{{ currentRow.activatedAt || '-' }}</el-descriptions-item>
<el-descriptions-item label="过期时间">{{ currentRow.expiredAt || '-' }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ currentRow.createdAt || '-' }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ currentRow.updatedAt || '-' }}</el-descriptions-item>
<el-descriptions-item label="备注">{{ currentRow.remark || '-' }}</el-descriptions-item>
</el-descriptions>
</el-drawer>
</div>
</template>
<style lang="less" scoped>
.cursor-activation-code-page {
padding: 12px;
}
.card-header,
.header-actions,
.toolbar,
.toolbar-left,
.toolbar-right,
.code-cell {
display: flex;
align-items: center;
}
.card-header {
justify-content: space-between;
gap: 12px;
}
.header-actions,
.toolbar-left,
.toolbar-right,
.code-cell {
gap: 8px;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.summary-card {
padding: 14px 16px;
border: 1px solid #ebeef5;
border-radius: 8px;
background: #fbfcff;
}
.summary-label {
color: #909399;
font-size: 13px;
margin-bottom: 8px;
}
.summary-value {
font-size: 24px;
font-weight: 700;
color: #409eff;
&.is-success {
color: #67c23a;
}
&.is-info {
color: #909399;
}
&.is-danger {
color: #f56c6c;
}
}
.toolbar {
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.toolbar-left,
.toolbar-right {
flex-wrap: wrap;
}
.w-320 {
width: 320px;
}
.w-140 {
width: 140px;
}
.table-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.activation-code-table {
min-width: 1360px;
}
.code-text {
font-family: Consolas, Monaco, 'Courier New', monospace;
font-weight: 600;
word-break: break-all;
}
.muted {
color: #909399;
font-size: 12px;
line-height: 1.6;
}
.full {
width: 100%;
}
.pager {
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
:deep(.activation-code-edit-dialog),
:deep(.activation-code-generate-dialog) {
max-width: calc(100vw - 24px);
}
@media (max-width: 768px) {
.cursor-activation-code-page {
padding: 8px;
}
.card-header,
.header-actions {
align-items: stretch;
flex-direction: column;
}
.summary-grid {
grid-template-columns: repeat(2, minmax(120px, 1fr));
}
.toolbar-left,
.toolbar-right,
.w-320,
.w-140 {
width: 100%;
}
.toolbar-right .el-button,
.header-actions .el-button {
width: 100%;
margin-left: 0;
}
.pager {
justify-content: center;
}
:deep(.activation-code-detail-drawer) {
width: 100vw !important;
}
}
</style>

View File

@ -27,6 +27,7 @@ export default defineConfig({
}, },
}, },
server: { server: {
host: "127.0.0.1",
port: 5000, port: 5000,
// 开发时前端在 5000接口走相对路径 /platform/*、/backend/*,转发到本地 Go当前 httpport=8081 // 开发时前端在 5000接口走相对路径 /platform/*、/backend/*,转发到本地 Go当前 httpport=8081
proxy: { proxy: {