删除库存和旧回调管理

This commit is contained in:
yml
2026-05-25 23:07:19 +08:00
parent 90ad866ecc
commit 2c7464b1eb
87 changed files with 94 additions and 5794 deletions
@@ -59,7 +59,6 @@ function resolveType(status: string): ElTagType {
if (
[
'waiting_inventory',
'retry_pending',
'manual_review',
'invalid',
@@ -98,7 +97,6 @@ function resolveLabel(status: string) {
refunding: '退款中',
closed: '已关闭',
pending_payment: '待支付',
waiting_inventory: '待库存',
cdk_reserved: '已预占',
link_generated: '已生成链接',
claimed: '已创建会话',
-19
View File
@@ -53,20 +53,6 @@ const router = createRouter({
path: 'tasks/:taskId',
component: () => import('@/views/admin/tasks/AdminTaskDetailView.vue'),
},
{
path: 'cdks',
redirect: '/admin/inventory',
},
{
path: 'inventory',
meta: { allowedRoles: ['admin', 'operator'] },
component: () => import('@/views/admin/inventory/AdminInventoryView.vue'),
},
{
path: 'webhook-events',
meta: { allowedRoles: ['admin', 'operator'] },
component: () => import('@/views/admin/webhook-events/AdminWebhookEventsView.vue'),
},
{
path: 'platform-shops',
meta: { allowedRoles: ['admin'] },
@@ -82,11 +68,6 @@ const router = createRouter({
meta: { allowedRoles: ['admin'] },
redirect: '/admin/platform-fulfillment?tab=kuaishou-cloud',
},
{
path: 'webhook-events/:eventId',
meta: { allowedRoles: ['admin', 'operator'] },
component: () => import('@/views/admin/webhook-events/AdminWebhookEventDetailView.vue'),
},
{
path: 'audit-logs',
meta: { allowedRoles: ['admin'] },
@@ -5,5 +5,3 @@ export * from './audit-logs'
export * from './platform-config'
export * from './orders'
export * from './tasks'
export * from './inventory'
export * from './webhook-events'
@@ -1,51 +0,0 @@
import { apiGet, apiPost } from '@/lib/http'
import type {
AdminInventoryItemListItem,
AdminInventorySkuSuggestion,
AdminPagination,
} from '@/types/admin'
export function fetchAdminInventoryItems(params?: Record<string, unknown>) {
return apiGet<{ items: AdminInventoryItemListItem[]; pagination: AdminPagination }>(
'/api/v1/admin/inventory',
params,
)
}
export function fetchAdminInventorySkuSuggestions(params?: Record<string, unknown>) {
return apiGet<{ items: AdminInventorySkuSuggestion[] }>(
'/api/v1/admin/inventory/sku-suggestions',
params,
)
}
export function importAdminInventoryItems(payload: Record<string, unknown>) {
return apiPost<{ total: number; created: number; duplicated: number }>(
'/api/v1/admin/inventory/import',
payload,
)
}
export function createAdminInventoryItem(payload: Record<string, unknown>) {
return apiPost<{ inventoryItem: AdminInventoryItemListItem | null }>(
'/api/v1/admin/inventory',
payload,
)
}
export function releaseAdminInventoryItem(inventoryItemId: number | string) {
return apiPost<{ inventoryItem: AdminInventoryItemListItem | null }>(
`/api/v1/admin/inventory/${inventoryItemId}/release`,
{},
)
}
export function invalidateAdminInventoryItem(
inventoryItemId: number | string,
payload?: Record<string, unknown>,
) {
return apiPost<{ inventoryItem: AdminInventoryItemListItem | null }>(
`/api/v1/admin/inventory/${inventoryItemId}/invalidate`,
payload || {},
)
}
-14
View File
@@ -25,20 +25,6 @@ export function retryAdminTask(taskId: number | string) {
return apiPost<AdminTaskActionResponse>(`/api/v1/admin/tasks/${taskId}/retry`, {})
}
export function releaseAdminTaskInventory(taskId: number | string) {
return apiPost<AdminTaskActionResponse>(`/api/v1/admin/tasks/${taskId}/release-inventory`, {})
}
export function releaseAdminTaskInventoryBinding(
taskId: number | string,
bindingId: number | string,
) {
return apiPost<AdminTaskActionResponse>(
`/api/v1/admin/tasks/${taskId}/inventory-bindings/${bindingId}/release`,
{},
)
}
export function regenerateAdminTaskClaimLink(taskId: number | string) {
return apiPost<AdminTaskActionResponse>(`/api/v1/admin/tasks/${taskId}/regenerate-claim-link`, {})
}
-10
View File
@@ -25,16 +25,6 @@ export function updateAdminUserStatus(userId: number | string, payload: { status
return apiPost<{ user: AdminUserListItem }>(`/api/v1/admin/users/${userId}/status`, payload)
}
export function updateAdminUserInventoryGroups(
userId: number | string,
payload: { inventoryGroupCodes: string[] },
) {
return apiPost<{ user: AdminUserListItem }>(
`/api/v1/admin/users/${userId}/inventory-groups`,
payload,
)
}
export function resetAdminUserPassword(userId: number | string, payload: { password: string }) {
return apiPost<{ user: AdminUserListItem }>(
`/api/v1/admin/users/${userId}/reset-password`,
@@ -1,22 +0,0 @@
import { apiGet, apiPost } from '@/lib/http'
import type {
AdminPagination,
AdminWebhookEventDetail,
AdminWebhookEventListItem,
AdminWebhookReplayResponse,
} from '@/types/admin'
export function fetchAdminWebhookEvents(params?: Record<string, unknown>) {
return apiGet<{ items: AdminWebhookEventListItem[]; pagination: AdminPagination }>(
'/api/v1/admin/webhook-events',
params,
)
}
export function fetchAdminWebhookEventDetail(eventId: number | string) {
return apiGet<AdminWebhookEventDetail>(`/api/v1/admin/webhook-events/${eventId}`)
}
export function replayAdminWebhookEvent(eventId: number | string) {
return apiPost<AdminWebhookReplayResponse>(`/api/v1/admin/webhook-events/${eventId}/replay`, {})
}
@@ -1,7 +1,6 @@
/* ============================================================
管理员列表页共享样式
引入: AdminOrdersView, AdminTasksView, AdminWebhookEventsView,
AdminUsersView, AdminInventoryView
引入: AdminOrdersView, AdminTasksView, AdminUsersView
各页面自行覆盖 grid-template-columns 等布局差异
============================================================ */
-2
View File
@@ -8,7 +8,6 @@ export interface AdminLoginResponse {
userId: number
username: string
role: AdminRole
inventoryGroupCodes?: string[]
}
}
@@ -19,6 +18,5 @@ export interface AdminSessionSummary {
userId: number
username: string
role: AdminRole
inventoryGroupCodes?: string[]
}
}
@@ -4,5 +4,4 @@ export interface AdminDashboardSummary {
claimingTasks: number
redeemedToday: number
abnormalTasks: number
skuWithInventory: number
}
-10
View File
@@ -29,16 +29,6 @@ export type {
AdminTaskDetail,
} from './tasks'
// Inventory types
export type { AdminInventorySkuSuggestion, AdminInventoryItemListItem } from './inventory'
// Webhook events types
export type {
AdminWebhookEventListItem,
AdminWebhookEventDetail,
AdminWebhookReplayResponse,
} from './webhook-events'
// Platform config types
export type {
AdminNotificationBarkRecipient,
@@ -1,27 +0,0 @@
export interface AdminInventorySkuSuggestion {
skuCode: string
credentialType: string
inventoryGroupCode: string
totalCount: number
availableCount: number
latestUpdatedAt: string | null
}
export interface AdminInventoryItemListItem {
inventoryItemId: number
skuCode: string
batchNo: string
credentialType: string
inventoryGroupCode: string
displayValue: string
status: string
reservedByTaskId: number | null
reservedByTaskNo: string
platformOrderId: string
systemBindingStatus: string
userBindingStatus: string
invalidReason: string
deliveredAt: string | null
createdAt: string
updatedAt: string
}
-13
View File
@@ -77,17 +77,4 @@ export interface AdminOrderDetail {
spec: Record<string, unknown>
}>
tasks: AdminTaskListItem[]
webhookEvents: Array<{
eventId: number
provider: string
platform: string
shopId: string
shopName: string
eventType: string
eventKey: string
signatureValid: boolean
processed: boolean
processError: string
createdAt: string
}>
}
-33
View File
@@ -31,15 +31,12 @@ export interface AdminTaskListItem {
lastError: string
createdAt: string
updatedAt: string
inventoryDisplayMasked: string
inventoryCredentialType: string
claimToken: string
screenshotPath: string
}
export interface AdminTaskOperations {
canRetry: boolean
canReleaseInventory: boolean
canRegenerateClaimLink: boolean
canClose: boolean
canMarkManualReview: boolean
@@ -59,7 +56,6 @@ export interface AdminTaskActionResponse {
deliveryStatus: string
resultCode: string
resultMessage: string
inventoryItemId: number | null
primaryClaimTokenId: number | null
lastError: string
updatedAt: string
@@ -93,34 +89,6 @@ export interface AdminTaskDetail {
expiredAt: string
claimUrl: string
}
inventory: null | {
inventoryItemId: number
skuCode: string
batchNo: string
credentialType: string
displayValue: string
status: string
}
inventoryBindings: Array<{
bindingId: number
inventoryItemId: number
roleKey: string
quantity: number
bindingStatus: string
inventoryStatus: string
skuCode: string
batchNo: string
credentialType: string
displayValue: string
invalidReason: string
consumedAt: string | null
releasedAt: string | null
createdAt: string
updatedAt: string
metadata: Record<string, unknown>
isPrimary: boolean
canRelease: boolean
}>
artifacts: Record<string, unknown>
screenshotUrl: string
review: {
@@ -136,7 +104,6 @@ export interface AdminTaskDetail {
finishedAt: string | null
attempts: Array<{
attempt: number
inventoryItemId: number | null
codeMasked: string
credentialType: string
outcome: string
-1
View File
@@ -5,7 +5,6 @@ export interface AdminUserListItem {
username: string
role: AdminRole
status: AdminUserStatus
inventoryGroupCodes: string[]
createdAt: string
updatedAt: string
}
@@ -1,60 +0,0 @@
export interface AdminWebhookEventListItem {
eventId: number
provider: string
platform: string
platformRaw: string
shopId: string
shopName: string
eventType: string
eventKey: string
signatureValid: boolean
processed: boolean
processError: string
visibilityLevel: string
relatedOrderId: number | null
platformOrderId: string
buyerId: string
buyerName: string
totalAmount: string
totalAmountFen: number
currency: string
itemCount: number
taskCount: number
messageText: string
requestTimestamp: string
requestSign: string
aopic: string
sourceHost: string
sourceIp: string
userAgent: string
createdAt: string
}
export interface AdminWebhookEventDetail extends AdminWebhookEventListItem {
headers: Record<string, unknown>
query: Record<string, unknown>
body: Record<string, unknown>
payload: Record<string, unknown>
}
export interface AdminWebhookReplayResponse {
eventId: number
replayed: boolean
result: {
accepted: boolean
provider: string
platform: string
platformRaw: string
shopId: string
shopName: string
eventType: string
platformOrderId: string
orderId: number
taskCount: number
tasks: Array<{
taskId: number
taskNo: string
status: string
}>
}
}
-2
View File
@@ -3,13 +3,11 @@ export type ClaimTokenStatus = 'active' | 'used' | 'expired' | 'revoked' | (stri
export type ClaimTaskStatus =
| 'pending_payment'
| 'paid'
| 'waiting_inventory'
| 'pending_binding_prepare'
| 'waiting_binding'
| 'dispatched_pending_return'
| 'completed'
| 'failed'
| 'cdk_reserved'
| 'link_generated'
| 'claimed'
| 'role_confirmed'
-32
View File
@@ -24,15 +24,10 @@ export function formatAuditAction(action: string) {
admin_user_role_updated: "修改用户角色",
admin_user_status_updated: "修改用户状态",
admin_user_password_reset: "重置用户密码",
task_release_inventory: "释放任务库存",
task_release_inventory_binding: "释放任务库存绑定",
task_regenerate_claim_link: "重发领取链接",
task_closed: "关闭任务",
task_mark_manual_review: "转人工处理",
task_complete_manual_dispatch: "完成人工履约",
inventory_item_released: "释放库存项",
inventory_item_invalidated: "作废库存项",
webhook_replayed: "重放 Webhook",
platform_shop_config_updated: "更新店铺配置",
platform_fulfillment_config_updated: "更新履约配置",
};
@@ -44,9 +39,6 @@ export function formatAuditTargetType(targetType: string) {
const labelMap: Record<string, string> = {
admin_user: "后台用户",
task: "交付任务",
task_inventory_binding: "任务库存绑定",
inventory_item: "库存项",
webhook_event: "Webhook 事件",
platform_config: "平台配置",
};
@@ -56,10 +48,8 @@ export function formatAuditTargetType(targetType: string) {
export function formatTaskEventType(eventType: string) {
const labelMap: Record<string, string> = {
manual_dispatch_completed: "人工履约已回写",
inventory_binding_released: "库存绑定已释放",
claim_redeem_code_used: "兑换码已使用",
claim_redeem_code_invalid: "兑换码错误",
claim_redeem_inventory_replaced: "已切换新兑换码",
claim_redeem_completed: "兑换链路完成",
};
@@ -114,11 +104,6 @@ export function formatTaskEventPayload(payload: Record<string, unknown>) {
payload.codeMasked ? `凭据 ${payload.codeMasked}` : "",
payload.previousCodeMasked ? `旧码 ${payload.previousCodeMasked}` : "",
payload.nextCodeMasked ? `新码 ${payload.nextCodeMasked}` : "",
payload.inventoryItemId ? `库存项 #${payload.inventoryItemId}` : "",
payload.previousInventoryItemId
? `旧库存 #${payload.previousInventoryItemId}`
: "",
payload.nextInventoryItemId ? `新库存 #${payload.nextInventoryItemId}` : "",
payload.ticketCodeMasked ? `卡券号 ${payload.ticketCodeMasked}` : "",
payload.vnId ? `虚拟号 #${payload.vnId}` : "",
payload.vnPhoneMasked ? `号码 ${payload.vnPhoneMasked}` : "",
@@ -147,20 +132,3 @@ export function formatTaskEventPayload(payload: Record<string, unknown>) {
return JSON.stringify(payload || {});
}
export function formatBindingRoleSummary(
roleKeys: string[] | undefined | null,
emptyLabel = "-"
) {
if (!Array.isArray(roleKeys) || roleKeys.length === 0) return emptyLabel;
return roleKeys.join(" / ");
}
export function formatBindingCountSummary(summary: {
totalBindingCount: number;
reservedBindingCount: number;
consumedBindingCount: number;
releasedBindingCount: number;
}) {
return `${summary.totalBindingCount} 条 · 预占 ${summary.reservedBindingCount} · 已消费 ${summary.consumedBindingCount} · 已释放 ${summary.releasedBindingCount}`;
}
-39
View File
@@ -10,8 +10,6 @@ export const adminTaskStatusOptions = [
{ label: '全部', value: '' },
{ label: '待支付', value: 'pending_payment' },
{ label: '已支付', value: 'paid' },
{ label: '待库存', value: 'waiting_inventory' },
{ label: '已预占', value: 'cdk_reserved' },
{ label: '已生成链接', value: 'link_generated' },
{ label: '已创建会话', value: 'claimed' },
{ label: '已确认角色', value: 'role_confirmed' },
@@ -23,36 +21,6 @@ export const adminTaskStatusOptions = [
{ label: '已关闭', value: 'closed' },
]
export const adminInventoryStatusOptions = [
{ label: '全部', value: '' },
{ label: '可用', value: 'available' },
{ label: '已预占', value: 'reserved' },
{ label: '已发放', value: 'delivered' },
{ label: '已消耗', value: 'consumed' },
{ label: '已作废', value: 'invalid' },
]
export const adminInventoryCredentialTypeOptions = [
{ label: '全部凭据类型', value: '' },
{ label: '兑换码(领取链路)', value: 'claim_code' },
{ label: '卡号卡密', value: 'card_password' },
{ label: '账号密码', value: 'account_password' },
{ label: '激活链接', value: 'activation_link' },
{ label: '纯文本凭据', value: 'text_credential' },
]
export const adminWebhookProcessedOptions = [
{ label: '全部', value: '' },
{ label: '处理成功', value: '1' },
{ label: '处理失败', value: '0' },
]
export const adminWebhookVisibilityOptions = [
{ label: '仅重要', value: 'important' },
{ label: '仅忽略', value: 'ignored' },
{ label: '全部', value: 'all' },
]
export const adminUserRoleOptions = [
{ label: '全部', value: '' },
{ label: '管理员', value: 'admin' },
@@ -71,21 +39,14 @@ export const adminAuditActionOptions = [
{ label: '创建后台用户', value: 'admin_user_created' },
{ label: '修改用户角色', value: 'admin_user_role_updated' },
{ label: '修改用户状态', value: 'admin_user_status_updated' },
{ label: '修改用户库存组', value: 'admin_user_inventory_groups_updated' },
{ label: '重置用户密码', value: 'admin_user_password_reset' },
{ label: '释放任务库存', value: 'task_release_inventory' },
{ label: '重发领取链接', value: 'task_regenerate_claim_link' },
{ label: '关闭任务', value: 'task_closed' },
{ label: '转人工处理', value: 'task_mark_manual_review' },
{ label: '释放库存项', value: 'inventory_item_released' },
{ label: '作废库存项', value: 'inventory_item_invalidated' },
{ label: '重放 Webhook', value: 'webhook_replayed' },
]
export const adminAuditTargetTypeOptions = [
{ label: '全部', value: '' },
{ label: '后台用户', value: 'admin_user' },
{ label: '交付任务', value: 'task' },
{ label: '库存项', value: 'inventory_item' },
{ label: 'Webhook 事件', value: 'webhook_event' },
]
-22
View File
@@ -1,22 +0,0 @@
import { formatStatusWithRaw } from '@/utils/admin-display'
export function formatAdminWebhookEventType(eventType: string) {
const normalized = String(eventType || '').trim()
if (!normalized) {
return '-'
}
const labelMap: Record<string, string> = {
payment_success: '支付成功',
trade_create: '订单创建',
trade_closed: '订单关闭',
buyer_confirm_goods: '确认收货',
auto_delivery_done: '自动发货完成',
auto_delivery_confirmed: '自动发货确认完成',
refund_apply: '买家申请退款',
trade_event: '交易事件',
}
return formatStatusWithRaw(normalized, labelMap)
}
@@ -26,7 +26,6 @@ const cards = [
{ key: 'claimingTasks', label: '领取中' },
{ key: 'redeemedToday', label: '今日成功' },
{ key: 'abnormalTasks', label: '异常任务' },
{ key: 'skuWithInventory', label: '有库存 SKU' },
] as const
</script>
@@ -36,7 +36,7 @@ defineProps<{
<div class="overview-notes">
<el-tag effect="plain">91卡券订单来自已接收的待补全队列</el-tag>
<el-tag effect="plain">内部 SKU 决定最终任务与库存绑定</el-tag>
<el-tag effect="plain">内部 SKU 决定任务与云资源匹配</el-tag>
<el-tag effect="plain">cloud SKU 决定自动购买发货与退号资源</el-tag>
</div>
</el-card>
@@ -1,146 +0,0 @@
<script setup lang="ts">
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
import AdminInventoryEntryCard from './components/AdminInventoryEntryCard.vue'
import AdminInventoryFilterCard from './components/AdminInventoryFilterCard.vue'
import AdminInventoryPoolGrid from './components/AdminInventoryPoolGrid.vue'
import AdminInventoryTable from './components/AdminInventoryTable.vue'
import { useAdminInventory } from './composables/useAdminInventory'
const {
loading,
importing,
creating,
actionLoadingId,
errorMessage,
items,
pagination,
pageSummary,
pageOverview,
inventoryGroups,
// filter
filterSkuCode,
filterCredentialType,
filterStatus,
filterBatchNo,
filterInventoryGroupCode,
// entry
entrySkuCode,
entryCredentialType,
entryBatchNo,
entryInventoryGroupCode,
singleDisplayValue,
bulkText,
skuSuggestionsLoading,
entrySkuSuggestions,
// actions
loadInventoryItems,
resetFilters,
submitCreate,
submitImport,
runRowAction,
useGroupAsFilter,
useGroupAsEntry,
applySkuSuggestion,
// formatters
getCredentialTypeLabel,
getCredentialTypeHint,
getSkuNamingHint,
formatInventoryStatus,
getGroupSuggestion,
// utils
formatAdminDateTime,
} = useAdminInventory()
</script>
<template>
<div class="inventory-page list-page">
<AdminPageHeader title="库存管理" description="按内部履约 SKU 和凭据类型管理库存、预占和发放。">
<template #extra>
<span class="total-badge"> {{ pagination.total }} 条库存</span>
</template>
</AdminPageHeader>
<AdminInventoryFilterCard
v-model:filter-sku-code="filterSkuCode"
v-model:filter-credential-type="filterCredentialType"
v-model:filter-status="filterStatus"
v-model:filter-batch-no="filterBatchNo"
v-model:filter-inventory-group-code="filterInventoryGroupCode"
:load-inventory-items="loadInventoryItems"
:reset-filters="resetFilters"
/>
<AdminInventoryEntryCard
v-model:entry-sku-code="entrySkuCode"
v-model:entry-credential-type="entryCredentialType"
v-model:entry-batch-no="entryBatchNo"
v-model:entry-inventory-group-code="entryInventoryGroupCode"
v-model:single-display-value="singleDisplayValue"
v-model:bulk-text="bulkText"
:creating="creating"
:importing="importing"
:sku-suggestions-loading="skuSuggestionsLoading"
:entry-sku-suggestions="entrySkuSuggestions"
:submit-create="submitCreate"
:submit-import="submitImport"
:apply-sku-suggestion="applySkuSuggestion"
:get-credential-type-label="getCredentialTypeLabel"
:get-credential-type-hint="getCredentialTypeHint"
:get-sku-naming-hint="getSkuNamingHint"
/>
<el-alert
v-if="errorMessage"
:title="errorMessage"
type="error"
show-icon
:closable="false"
class="mt-4"
/>
<el-card
shadow="never"
class="section-card"
v-loading="loading"
element-loading-text="库存列表加载中"
>
<template v-if="items.length === 0 && !loading">
<el-empty
description="当前筛选下没有库存项,可以先在上方录入内部履约 SKU 对应的库存。"
:image-size="60"
/>
</template>
<template v-else>
<AdminInventoryPoolGrid
:inventory-groups="inventoryGroups"
:page-overview="pageOverview"
:page-summary="pageSummary"
:use-group-as-filter="useGroupAsFilter"
:use-group-as-entry="useGroupAsEntry"
:get-credential-type-label="getCredentialTypeLabel"
:get-group-suggestion="getGroupSuggestion"
:format-admin-date-time="formatAdminDateTime"
/>
<AdminInventoryTable
:loading="loading"
:items="items"
:pagination="pagination"
:page-summary="pageSummary"
:action-loading-id="actionLoadingId"
:load-inventory-items="loadInventoryItems"
:run-row-action="runRowAction"
:format-inventory-status="formatInventoryStatus"
:get-credential-type-label="getCredentialTypeLabel"
:format-admin-date-time="formatAdminDateTime"
/>
</template>
</el-card>
</div>
</template>
<style scoped>
@import '../../../styles/admin-list-pages.css';
</style>
@@ -1,296 +0,0 @@
<script setup lang="ts">
import { adminInventoryCredentialTypeOptions } from '@/utils/admin-options'
type SkuSuggestion = {
credentialType: string
inventoryGroupCode: string
skuCode: string
availableCount: number
totalCount: number
}
const entrySkuCode = defineModel<string>('entrySkuCode', { required: true })
const entryCredentialType = defineModel<string>('entryCredentialType', { required: true })
const entryBatchNo = defineModel<string>('entryBatchNo', { required: true })
const entryInventoryGroupCode = defineModel<string>('entryInventoryGroupCode', { required: true })
const singleDisplayValue = defineModel<string>('singleDisplayValue', { required: true })
const bulkText = defineModel<string>('bulkText', { required: true })
const props = defineProps<{
creating: boolean
importing: boolean
skuSuggestionsLoading: boolean
entrySkuSuggestions: SkuSuggestion[]
submitCreate: () => Promise<void>
submitImport: () => Promise<void>
applySkuSuggestion: (skuCode: string) => void
getCredentialTypeLabel: (value: string) => string
getCredentialTypeHint: (value: string) => string
getSkuNamingHint: () => string
}>()
function querySkuSuggestions(query: string, callback: (items: SkuSuggestion[]) => void) {
const keyword = query.trim().toLowerCase()
const items = keyword
? props.entrySkuSuggestions.filter((item) => item.skuCode.toLowerCase().includes(keyword))
: props.entrySkuSuggestions
callback(items)
}
function handleSkuSuggestionSelect(item: Record<string, unknown>) {
const skuCode = typeof item.skuCode === 'string' ? item.skuCode : ''
if (skuCode) {
props.applySkuSuggestion(skuCode)
}
}
</script>
<template>
<el-card shadow="never" class="section-card">
<template #header>
<div class="card-header">
<span class="card-title">入库与导入</span>
<span class="card-desc"
>填写内部履约 SKU不是平台侧 sku_code建议同类商品长期复用同一个内部名称</span
>
</div>
</template>
<div class="form-grid">
<el-autocomplete
v-model="entrySkuCode"
class="sku-input-wrap"
value-key="skuCode"
:fetch-suggestions="querySkuSuggestions"
placeholder="内部履约 SKU,可选已有同类型,也可自定义新的中文名"
clearable
@select="handleSkuSuggestionSelect"
>
<template #default="{ item }">
<div class="autocomplete-option">
<strong>{{ item.skuCode }}</strong>
<span>
{{ item.inventoryGroupCode || '未分组' }} · 可用 {{ item.availableCount }} /
{{ item.totalCount }}
</span>
</div>
</template>
</el-autocomplete>
<el-select v-model="entryCredentialType" placeholder="凭据类型">
<el-option
v-for="opt in adminInventoryCredentialTypeOptions.filter((item) => item.value)"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<el-input v-model="entryBatchNo" placeholder="批次号,可选" clearable />
<el-input v-model="entryInventoryGroupCode" placeholder="库存组,例如 A组 / B组" clearable />
</div>
<div class="sku-helper-bar">
<span class="helper-text">{{ getSkuNamingHint() }}</span>
<span v-if="skuSuggestionsLoading" class="helper-text">正在加载同类型内部 SKU...</span>
</div>
<div v-if="entrySkuSuggestions.length > 0" class="sku-chip-row">
<el-button
v-for="suggestion in entrySkuSuggestions"
:key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}-chip`"
class="sku-chip"
plain
@click="applySkuSuggestion(suggestion.skuCode)"
>
<span class="sku-chip-title">{{ suggestion.skuCode }}</span>
<span class="sku-chip-meta"
>{{ suggestion.inventoryGroupCode || '未分组' }} · 可用 {{ suggestion.availableCount }} /
{{ suggestion.totalCount }}</span
>
</el-button>
</div>
<div class="helper-grid">
<div class="helper-item">
<span class="helper-title">当前默认匹配</span>
<span class="helper-copy">{{ getCredentialTypeLabel(entryCredentialType) }}</span>
</div>
<div class="helper-item">
<span class="helper-title">库存组</span>
<span class="helper-copy">{{ entryInventoryGroupCode || '未分组,默认全局可用' }}</span>
</div>
<div class="helper-item helper-item-wide">
<span class="helper-title">说明</span>
<span class="helper-copy">{{ getCredentialTypeHint(entryCredentialType) }}</span>
</div>
</div>
<div class="single-row">
<el-input
v-model="singleDisplayValue"
placeholder="单条新增的凭据内容"
@keyup.enter="submitCreate"
/>
<el-button :loading="creating" round type="success" @click="submitCreate">单条新增</el-button>
</div>
<el-input
v-model="bulkText"
type="textarea"
:rows="8"
placeholder="批量导入支持两种格式:&#10;1. 每行一个凭据内容(使用上方默认内部 SKU / 凭据类型 / 批次 / 库存组)&#10;2. 每行一条:内部SKU|凭据类型|批次号|库存组|凭据内容"
class="bulk-input"
/>
<p class="helper-text helper-text--spaced">
示例sjz_hdl_test01|claim_code|sjz-20260412|A组|DJQFf7HgXXXXXXXXXX
</p>
<div class="action-row">
<el-button :loading="importing" round type="primary" @click="submitImport"
>批量导入</el-button
>
</div>
</el-card>
</template>
<style scoped>
@import '../../../../styles/admin-list-pages.css';
.form-grid {
display: grid;
grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
gap: var(--space-3);
}
.sku-input-wrap {
min-width: 0;
}
.autocomplete-option {
display: grid;
gap: 2px;
line-height: 1.4;
}
.autocomplete-option span {
color: var(--text-secondary);
font-size: var(--text-xs);
}
.single-row,
.action-row {
display: flex;
gap: var(--space-3);
align-items: center;
margin-top: 14px;
}
.single-row :deep(.el-input) {
min-width: 0;
}
.helper-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
margin-top: 14px;
}
.helper-item {
display: grid;
gap: 6px;
padding: 12px 14px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--radius-md);
background: rgba(248, 250, 252, 0.72);
}
.helper-title {
color: #2559a7;
font-size: var(--text-xs);
font-weight: 700;
}
.helper-copy {
min-width: 0;
color: #334155;
line-height: 1.6;
word-break: break-word;
}
.sku-helper-bar {
display: flex;
justify-content: space-between;
gap: var(--space-3);
align-items: center;
margin-top: var(--space-3);
}
.helper-text {
color: var(--text-secondary);
font-size: var(--text-xs);
margin: 0;
}
.helper-text--spaced {
margin-top: var(--space-2);
}
.bulk-input {
margin-top: 14px;
}
.sku-chip-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: var(--space-3);
}
.sku-chip {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
max-width: 100%;
height: auto;
padding: 8px 12px;
}
.sku-chip-title {
min-width: 0;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sku-chip-meta {
min-width: 0;
color: var(--text-secondary);
font-size: var(--text-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1200px) {
.form-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.form-grid,
.helper-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.form-grid,
.helper-grid {
grid-template-columns: 1fr;
}
.single-row,
.action-row,
.sku-helper-bar {
flex-direction: column;
align-items: stretch;
}
}
</style>
@@ -1,107 +0,0 @@
<script setup lang="ts">
import {
adminInventoryCredentialTypeOptions,
adminInventoryStatusOptions,
} from '@/utils/admin-options'
const filterSkuCode = defineModel<string>('filterSkuCode', { required: true })
const filterCredentialType = defineModel<string>('filterCredentialType', { required: true })
const filterStatus = defineModel<string>('filterStatus', { required: true })
const filterBatchNo = defineModel<string>('filterBatchNo', { required: true })
const filterInventoryGroupCode = defineModel<string>('filterInventoryGroupCode', { required: true })
defineProps<{
loadInventoryItems: (page?: number) => Promise<void>
resetFilters: () => void
}>()
</script>
<template>
<el-card shadow="never" class="section-card">
<template #header>
<div class="card-header">
<span class="card-title">查询库存池</span>
<span class="card-desc">按内部履约 SKU凭据类型批次和状态快速定位库存</span>
</div>
</template>
<div class="form-grid">
<el-input
v-model="filterSkuCode"
placeholder="内部履约 SKU,例如 sjz_hdl_test01"
clearable
@keyup.enter="loadInventoryItems(1)"
/>
<el-select v-model="filterCredentialType" placeholder="凭据类型" clearable>
<el-option
v-for="opt in adminInventoryCredentialTypeOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<el-select v-model="filterStatus" placeholder="状态" clearable>
<el-option
v-for="opt in adminInventoryStatusOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<el-input
v-model="filterBatchNo"
placeholder="批次号"
clearable
@keyup.enter="loadInventoryItems(1)"
/>
<el-input
v-model="filterInventoryGroupCode"
placeholder="库存组,例如 A组"
clearable
@keyup.enter="loadInventoryItems(1)"
/>
</div>
<div class="action-row">
<el-button round type="primary" @click="loadInventoryItems(1)">查询列表</el-button>
<el-button round @click="resetFilters">清空筛选</el-button>
</div>
</el-card>
</template>
<style scoped>
@import '../../../../styles/admin-list-pages.css';
.form-grid {
display: grid;
grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
gap: var(--space-3);
}
.action-row {
display: flex;
gap: var(--space-3);
align-items: center;
margin-top: 14px;
}
@media (max-width: 1200px) {
.form-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.form-grid {
grid-template-columns: 1fr;
}
.action-row {
flex-direction: column;
align-items: stretch;
}
}
</style>
@@ -1,242 +0,0 @@
<script setup lang="ts">
import type { InventoryPoolGroup } from '../composables/types'
defineProps<{
inventoryGroups: InventoryPoolGroup[]
pageOverview: { skuCount: number; groupCount: number }
pageSummary: {
availableCount: number
reservedCount: number
deliveredCount: number
invalidCount: number
}
useGroupAsFilter: (group: InventoryPoolGroup) => void
useGroupAsEntry: (group: InventoryPoolGroup) => void
getCredentialTypeLabel: (value: string) => string
getGroupSuggestion: (group: InventoryPoolGroup) => string
formatAdminDateTime: (value: string) => string
}>()
</script>
<template>
<div class="summary-grid">
<div class="stat-card">
<span class="stat-label">当前页内部 SKU</span>
<strong class="stat-value">{{ pageOverview.skuCount }}</strong>
<span class="stat-meta">当前页去重后的内部履约 SKU 数量</span>
</div>
<div class="stat-card">
<span class="stat-label">当前页库存池</span>
<strong class="stat-value">{{ pageOverview.groupCount }}</strong>
<span class="stat-meta"> 内部履约 SKU + 凭据类型 聚合后的池子数量</span>
</div>
<div class="stat-card">
<span class="stat-label">可立即分配</span>
<strong class="stat-value">{{ pageSummary.availableCount }}</strong>
<span class="stat-meta">当前页还能直接被任务预占的库存项</span>
</div>
<div class="stat-card">
<span class="stat-label">预占中</span>
<strong class="stat-value">{{ pageSummary.reservedCount }}</strong>
<span class="stat-meta">当前页已经被任务锁定的库存项</span>
</div>
</div>
<div class="pool-section">
<div class="card-header pool-section-header">
<span class="card-title">当前页库存池概览</span>
<span class="card-desc"
>先看哪组内部履约 SKU 还有量再决定补库存查任务还是切去人工履约</span
>
</div>
<div class="pool-grid">
<el-card v-for="group in inventoryGroups" :key="group.key" shadow="never" class="pool-card">
<div class="pool-topline">
<div class="pool-title-block">
<h4 class="pool-title">{{ group.skuCode }}</h4>
<span class="pool-subtitle"
>{{ getCredentialTypeLabel(group.credentialType) }} · {{ group.credentialType }} ·
{{ group.inventoryGroupCode || '未分组' }}</span
>
</div>
<span class="pool-total"> {{ group.totalCount }} </span>
</div>
<div class="pool-stats">
<span class="pool-stat">可用 {{ group.availableCount }}</span>
<span class="pool-stat">预占 {{ group.reservedCount }}</span>
<span class="pool-stat">发放 {{ group.deliveredCount }}</span>
<span class="pool-stat">作废 {{ group.invalidCount }}</span>
</div>
<div class="pool-meta">
<span>批次 {{ group.batchSummary }}</span>
<span>最近更新 {{ formatAdminDateTime(group.latestUpdatedAt) }}</span>
</div>
<p class="pool-suggestion">{{ getGroupSuggestion(group) }}</p>
<div class="pool-actions">
<el-button round @click="useGroupAsFilter(group)">只看这个池</el-button>
<el-button round type="primary" @click="useGroupAsEntry(group)">作为入库目标</el-button>
</div>
</el-card>
</div>
</div>
</template>
<style scoped>
.summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.stat-card {
min-width: 0;
padding: 14px 16px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--radius-md);
background: rgba(248, 250, 252, 0.72);
}
.stat-label {
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
}
.stat-value {
font-size: 30px;
line-height: 1;
color: var(--text-primary);
display: block;
margin-top: var(--space-2);
}
.stat-meta {
color: var(--text-secondary);
font-size: var(--text-xs);
display: block;
margin-top: var(--space-1);
}
.pool-section {
margin-bottom: 18px;
}
.pool-section-header {
margin-bottom: 14px;
}
.pool-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.pool-card {
display: grid;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(248, 250, 252, 0.68);
}
.pool-topline {
display: flex;
justify-content: space-between;
gap: var(--space-3);
align-items: flex-start;
}
.pool-title-block {
display: grid;
gap: 6px;
min-width: 0;
}
.pool-title {
min-width: 0;
margin: 0;
color: var(--text-primary);
font-size: var(--text-base);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pool-subtitle {
min-width: 0;
color: var(--text-secondary);
font-size: var(--text-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pool-total {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
min-height: 30px;
padding: 0 10px;
border-radius: var(--radius-full);
background: rgba(37, 89, 167, 0.08);
border: 1px solid rgba(37, 89, 167, 0.12);
color: #2559a7;
font-size: var(--text-xs);
font-weight: 700;
}
.pool-stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.pool-stat {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
border-radius: var(--radius-full);
background: rgba(37, 89, 167, 0.08);
color: #1d4f91;
font-size: var(--text-xs);
font-weight: 700;
}
.pool-meta {
display: grid;
gap: 6px;
min-width: 0;
color: var(--text-secondary);
font-size: var(--text-xs);
word-break: break-word;
}
.pool-suggestion {
margin: 0;
line-height: 1.6;
color: var(--text-secondary);
font-size: var(--text-sm);
}
.pool-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
@media (max-width: 1200px) {
.summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.summary-grid,
.pool-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.summary-grid,
.pool-grid {
grid-template-columns: 1fr;
}
}
</style>
@@ -1,222 +0,0 @@
<script setup lang="ts">
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import type { AdminInventoryItemListItem } from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import { invalidateAdminInventoryItem, releaseAdminInventoryItem } from '@/services/admin'
defineProps<{
loading: boolean
items: AdminInventoryItemListItem[]
pagination: { page: number; pageSize: number; total: number }
pageSummary: { availableCount: number; reservedCount: number; deliveredCount: number; invalidCount: number }
actionLoadingId: number | null
loadInventoryItems: (page?: number) => Promise<void>
runRowAction: (id: number, action: () => Promise<unknown>, msg: string, confirm: string) => Promise<void>
formatInventoryStatus: (item: AdminInventoryItemListItem) => string
getCredentialTypeLabel: (value: string) => string
formatAdminDateTime: (value: string) => string
}>()
</script>
<template>
<div class="table-toolbar">
当前筛选共 {{ pagination.total }} 本页可用 {{ pageSummary.availableCount }} 预占
{{ pageSummary.reservedCount }} 已发放 {{ pageSummary.deliveredCount }} 作废
{{ pageSummary.invalidCount }}
</div>
<el-table :data="items" stripe size="small" class="inventory-table data-table">
<el-table-column label="库存项" min-width="200">
<template #default="{ row }">
<div class="item-cell">
<RouterLink
v-if="row.reservedByTaskNo"
:to="`/admin/tasks/${row.reservedByTaskNo}`"
class="item-title"
>#{{ row.inventoryItemId }}</RouterLink
>
<span v-else class="item-title">#{{ row.inventoryItemId }}</span>
<code class="item-value">{{ row.displayValue }}</code>
</div>
</template>
</el-table-column>
<el-table-column label="内部履约 SKU" min-width="160">
<template #default="{ row }">
<div class="sku-cell">
<span class="sku-title">{{ row.skuCode }}</span>
<span class="sku-subline">{{ getCredentialTypeLabel(row.credentialType) }}</span>
<span class="sku-subline sku-raw">{{ row.credentialType || '-' }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="批次 / 库存组" min-width="160">
<template #default="{ row }">
<div class="info-cell">
<span class="info-subline">批次 {{ row.batchNo || '未分批' }}</span>
<span class="info-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
<span class="status-copy">{{ formatInventoryStatus(row) }}</span>
<span v-if="row.invalidReason" class="status-warning"
>原因{{ row.invalidReason }}</span
>
</div>
</template>
</el-table-column>
<el-table-column label="状态 / 绑定" min-width="180">
<template #default="{ row }">
<div class="status-stack">
<AdminStatusTag :status="row.status" />
<AdminStatusTag :status="row.systemBindingStatus" />
<AdminStatusTag :status="row.userBindingStatus" />
</div>
</template>
</el-table-column>
<el-table-column label="关联任务 / 订单" min-width="160">
<template #default="{ row }">
<div class="info-cell">
<span class="link-title">{{ row.reservedByTaskNo || '-' }}</span>
<span class="link-subline">任务号</span>
<span class="link-title">{{ row.platformOrderId || '-' }}</span>
<span class="link-subline">平台订单号</span>
</div>
</template>
</el-table-column>
<el-table-column label="时间" min-width="180">
<template #default="{ row }">
<div class="info-cell">
<span class="time-line">入库 {{ formatAdminDateTime(row.createdAt) }}</span>
<span class="time-line">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
<span v-if="row.deliveredAt" class="time-line"
>发放 {{ formatAdminDateTime(row.deliveredAt) }}</span
>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template #default="{ row }">
<div class="action-stack">
<el-button
v-if="hasAdminRole('admin') && row.status === 'reserved'"
:loading="actionLoadingId === row.inventoryItemId"
size="small"
@click="
runRowAction(
row.inventoryItemId,
() => releaseAdminInventoryItem(row.inventoryItemId),
'库存项已释放',
`确认释放库存项 #${row.inventoryItemId} 吗?释放后任务需要重新分配库存。`,
)
"
>释放</el-button
>
<el-button
v-if="hasAdminRole('admin') && row.status === 'available'"
:loading="actionLoadingId === row.inventoryItemId"
size="small"
type="danger"
plain
@click="
runRowAction(
row.inventoryItemId,
() =>
invalidateAdminInventoryItem(row.inventoryItemId, {
reason: '后台手动作废',
}),
'库存项已作废',
`确认作废库存项 #${row.inventoryItemId} 吗?作废后不会再参与自动分配。`,
)
"
>作废</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="pagination.total > 0"
v-model:current-page="pagination.page"
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, prev, pager, next"
class="pagination-center"
@current-change="loadInventoryItems"
/>
</template>
<style scoped>
@import '../../../../styles/admin-list-pages.css';
.table-toolbar {
margin-bottom: var(--space-2);
padding-top: var(--space-2);
color: var(--text-secondary);
font-size: var(--text-xs);
line-height: 1.6;
word-break: break-word;
}
.item-cell,
.sku-cell,
.info-cell {
display: grid;
gap: 6px;
}
.item-title,
.sku-title,
.link-title {
color: var(--text-primary);
font-weight: 700;
}
.item-value {
display: inline-flex;
max-width: 100%;
width: fit-content;
padding: 6px 8px;
border-radius: var(--radius-sm);
background: rgba(15, 23, 42, 0.06);
color: #0f172a;
white-space: pre-wrap;
word-break: break-all;
}
.info-subline,
.sku-subline,
.link-subline,
.time-line,
.status-copy {
color: var(--text-secondary);
font-size: var(--text-xs);
line-height: 1.5;
}
.sku-raw {
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.status-stack,
.action-stack {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.action-stack {
justify-content: center;
}
.status-warning {
color: #b54708;
font-size: var(--text-xs);
}
@media (max-width: 640px) {
.status-stack,
.action-stack {
justify-content: flex-start;
}
}
</style>
@@ -1,21 +0,0 @@
export type InventoryImportRow = {
skuCode: string
credentialType: string
batchNo: string
inventoryGroupCode: string
displayValue: string
}
export type InventoryPoolGroup = {
key: string
skuCode: string
credentialType: string
inventoryGroupCode: string
totalCount: number
availableCount: number
reservedCount: number
deliveredCount: number
invalidCount: number
latestUpdatedAt: string
batchSummary: string
}
@@ -1,429 +0,0 @@
import { computed, onMounted, ref, watch } from 'vue'
import { showConfirm, showError, showSuccess } from '@/lib/feedback'
import {
createAdminInventoryItem,
fetchAdminInventoryItems,
fetchAdminInventorySkuSuggestions,
importAdminInventoryItems,
} from '@/services/admin'
import type {
AdminInventoryItemListItem,
AdminInventorySkuSuggestion,
AdminPagination,
} from '@/types/admin'
import { formatAdminDateTime } from '@/utils/admin-time'
import {
adminInventoryCredentialTypeOptions,
adminInventoryStatusOptions,
} from '@/utils/admin-options'
import type { InventoryImportRow, InventoryPoolGroup } from './types'
export function useAdminInventory() {
const loading = ref(true)
const importing = ref(false)
const creating = ref(false)
const actionLoadingId = ref<number | null>(null)
const errorMessage = ref('')
const filterSkuCode = ref('')
const filterCredentialType = ref('')
const filterStatus = ref('')
const filterBatchNo = ref('')
const filterInventoryGroupCode = ref('')
const entrySkuCode = ref('')
const entryCredentialType = ref('claim_code')
const entryBatchNo = ref('')
const entryInventoryGroupCode = ref('')
const singleDisplayValue = ref('')
const bulkText = ref('')
const skuSuggestionsLoading = ref(false)
const inventorySkuSuggestions = ref<AdminInventorySkuSuggestion[]>([])
const items = ref<AdminInventoryItemListItem[]>([])
const pagination = ref<AdminPagination>({
page: 1,
pageSize: 20,
total: 0,
})
const pageSummary = computed(() => {
const availableCount = items.value.filter((item) => item.status === 'available').length
const reservedCount = items.value.filter((item) => item.status === 'reserved').length
const deliveredCount = items.value.filter((item) => item.status === 'consumed').length
const invalidCount = items.value.filter((item) => item.status === 'invalid').length
return { availableCount, reservedCount, deliveredCount, invalidCount }
})
const inventoryGroups = computed<InventoryPoolGroup[]>(() => {
const groupMap = new Map<
string,
{
skuCode: string
credentialType: string
inventoryGroupCode: string
totalCount: number
availableCount: number
reservedCount: number
deliveredCount: number
invalidCount: number
latestUpdatedAt: string
batches: Set<string>
}
>()
for (const item of items.value) {
const key = `${item.skuCode}::${item.credentialType || 'claim_code'}::${item.inventoryGroupCode || ''}`
const current = groupMap.get(key) || {
skuCode: item.skuCode,
credentialType: item.credentialType || 'claim_code',
inventoryGroupCode: item.inventoryGroupCode || '',
totalCount: 0,
availableCount: 0,
reservedCount: 0,
deliveredCount: 0,
invalidCount: 0,
latestUpdatedAt: item.updatedAt,
batches: new Set<string>(),
}
current.totalCount += 1
if (item.status === 'available') current.availableCount += 1
else if (item.status === 'reserved') current.reservedCount += 1
else if (item.status === 'consumed') current.deliveredCount += 1
else if (item.status === 'invalid') current.invalidCount += 1
if (item.batchNo) current.batches.add(item.batchNo)
if (String(item.updatedAt || '') > String(current.latestUpdatedAt || ''))
current.latestUpdatedAt = item.updatedAt
groupMap.set(key, current)
}
return Array.from(groupMap.entries())
.map(([key, value]) => ({
key,
skuCode: value.skuCode,
credentialType: value.credentialType,
inventoryGroupCode: value.inventoryGroupCode,
totalCount: value.totalCount,
availableCount: value.availableCount,
reservedCount: value.reservedCount,
deliveredCount: value.deliveredCount,
invalidCount: value.invalidCount,
latestUpdatedAt: value.latestUpdatedAt,
batchSummary:
value.batches.size > 0 ? Array.from(value.batches).slice(0, 3).join(' / ') : '未分批',
}))
.sort((left, right) => {
if (right.availableCount !== left.availableCount)
return right.availableCount - left.availableCount
if (right.reservedCount !== left.reservedCount)
return right.reservedCount - left.reservedCount
return left.skuCode.localeCompare(right.skuCode)
})
})
const pageOverview = computed(() => ({
skuCount: new Set(items.value.map((item) => item.skuCode)).size,
groupCount: inventoryGroups.value.length,
}))
const entrySkuSuggestions = computed(() => {
const keyword = entrySkuCode.value.trim().toLowerCase()
const suggestions = inventorySkuSuggestions.value.filter(
(item) => item.credentialType === entryCredentialType.value,
)
if (!keyword) return suggestions.slice(0, 12)
return suggestions.filter((item) => item.skuCode.toLowerCase().includes(keyword)).slice(0, 12)
})
function getCredentialTypeLabel(value: string) {
const normalized = String(value || '').trim()
const option = adminInventoryCredentialTypeOptions.find((item) => item.value === normalized)
return option?.label || normalized || '-'
}
function getCredentialTypeHint(value: string) {
const normalized = String(value || '').trim()
if (normalized === 'claim_code')
return '当前领取链路会优先预占这一类兑换码,快手云履约等场景可按内部 SKU 统一匹配。'
if (normalized === 'card_password') return '适合卡号 / 卡密一体的库存项。'
if (normalized === 'account_password') return '适合账号密码、账号令牌等组合凭据。'
if (normalized === 'activation_link') return '适合直接发链接的激活类库存。'
if (normalized === 'text_credential') return '适合任意纯文本凭据。'
return '库存预占时会按凭据类型与内部履约 SKU 一起匹配。'
}
function getSkuNamingHint() {
if (entrySkuSuggestions.value.length > 0)
return `当前凭据类型下已有 ${entrySkuSuggestions.value.length} 个可复用的内部 SKU,也可以直接输入新的中文或英文名称。`
return '内部 SKU 支持中文、英文、数字和常见连接符。建议同一类商品长期使用同一个命名,方便共用库存池。'
}
function formatInventoryStatus(item: AdminInventoryItemListItem) {
if (item.status === 'consumed') return '已完成发放'
if (item.status === 'reserved') return '已被任务预占'
if (item.status === 'invalid') return '已手动作废'
return '可参与后续自动分配'
}
function getGroupSuggestion(group: InventoryPoolGroup) {
if (group.availableCount > 0)
return `当前还有 ${group.availableCount} 条可直接分配的库存,可以继续承接订单。`
if (group.reservedCount > 0)
return `当前没有可用库存,但有 ${group.reservedCount} 条正在被任务预占,建议优先检查任务进度。`
if (group.deliveredCount > 0 && group.invalidCount === 0)
return '当前页看到的库存都已经发放完成,若继续售卖需要补新的库存项。'
if (group.invalidCount > 0 && group.totalCount === group.invalidCount)
return '当前页这组库存都已作废,建议重新补充可用库存。'
return '当前页没有可立即分配的库存,建议补库存或检查对应履约任务。'
}
function useGroupAsFilter(group: InventoryPoolGroup) {
filterSkuCode.value = group.skuCode
filterCredentialType.value = group.credentialType
filterInventoryGroupCode.value = group.inventoryGroupCode
void loadInventoryItems(1)
}
function useGroupAsEntry(group: InventoryPoolGroup) {
entrySkuCode.value = group.skuCode
entryCredentialType.value = group.credentialType
entryInventoryGroupCode.value = group.inventoryGroupCode
if (group.batchSummary !== '未分批' && !group.batchSummary.includes(' / '))
entryBatchNo.value = group.batchSummary
showSuccess(
`已把 ${group.skuCode} / ${group.credentialType} / ${group.inventoryGroupCode || '未分组'} 填入入库表单`,
)
}
function applySkuSuggestion(skuCode: string) {
entrySkuCode.value = String(skuCode || '').trim()
}
function buildImportRows() {
const lines = bulkText.value
.split('\n')
.map((line) => line.trim())
.filter(Boolean)
const rows: InventoryImportRow[] = []
const defaultSkuCode = entrySkuCode.value.trim()
const defaultCredentialType = entryCredentialType.value.trim() || 'claim_code'
const defaultBatchNo = entryBatchNo.value.trim()
for (let index = 0; index < lines.length; index += 1) {
const line = lines[index]
if (line.includes('|')) {
const parts = line.split('|').map((part) => part.trim())
if (parts.length !== 4 && parts.length !== 5)
throw new Error(
`${index + 1} 行格式不正确,请使用 内部SKU|凭据类型|批次号|库存组|凭据内容`,
)
const [skuCode, credentialType, batchNo, inventoryGroupCode, displayValue] =
parts.length === 5 ? parts : [parts[0], parts[1], parts[2], '', parts[3]]
if (!skuCode || !displayValue) throw new Error(`${index + 1} 行缺少内部 SKU 或凭据内容`)
rows.push({
skuCode,
credentialType: credentialType || defaultCredentialType,
batchNo,
inventoryGroupCode: inventoryGroupCode || entryInventoryGroupCode.value.trim(),
displayValue,
})
continue
}
if (!defaultSkuCode)
throw new Error('存在未带内部 SKU 的行,请先填写默认内部履约 SKU,或改用四列导入格式')
rows.push({
skuCode: defaultSkuCode,
credentialType: defaultCredentialType,
batchNo: defaultBatchNo,
inventoryGroupCode: entryInventoryGroupCode.value.trim(),
displayValue: line,
})
}
return rows
}
async function loadInventoryItems(page = pagination.value.page) {
loading.value = true
errorMessage.value = ''
try {
const response = await fetchAdminInventoryItems({
page,
pageSize: pagination.value.pageSize,
skuCode: filterSkuCode.value.trim(),
credentialType: filterCredentialType.value.trim(),
status: filterStatus.value.trim(),
batchNo: filterBatchNo.value.trim(),
inventoryGroupCode: filterInventoryGroupCode.value.trim(),
})
items.value = response.data.items
pagination.value = response.data.pagination
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '读取库存列表失败'
} finally {
loading.value = false
}
}
async function loadInventorySkuSuggestions() {
skuSuggestionsLoading.value = true
try {
const response = await fetchAdminInventorySkuSuggestions({
credentialType: entryCredentialType.value.trim() || 'claim_code',
inventoryGroupCode: entryInventoryGroupCode.value.trim(),
limit: 50,
})
inventorySkuSuggestions.value = response.data.items
} catch (error) {
showError(error instanceof Error ? error.message : '读取内部 SKU 建议失败')
} finally {
skuSuggestionsLoading.value = false
}
}
function resetFilters() {
filterSkuCode.value = ''
filterCredentialType.value = ''
filterStatus.value = ''
filterBatchNo.value = ''
filterInventoryGroupCode.value = ''
void loadInventoryItems(1)
}
async function submitCreate() {
if (!entrySkuCode.value.trim() || !singleDisplayValue.value.trim()) {
showError('请先填写内部履约 SKU 和凭据内容')
return
}
creating.value = true
try {
await createAdminInventoryItem({
skuCode: entrySkuCode.value.trim(),
credentialType: entryCredentialType.value.trim() || 'claim_code',
batchNo: entryBatchNo.value.trim(),
inventoryGroupCode: entryInventoryGroupCode.value.trim(),
displayValue: singleDisplayValue.value.trim(),
})
showSuccess('库存项已新增')
singleDisplayValue.value = ''
await loadInventoryItems(1)
} catch (error) {
showError(error instanceof Error ? error.message : '新增库存项失败')
} finally {
creating.value = false
}
}
async function submitImport() {
const rawLines = bulkText.value
.split('\n')
.map((line) => line.trim())
.filter(Boolean)
if (rawLines.length === 0) {
showError('请至少输入一条待导入库存')
return
}
importing.value = true
try {
const rows = buildImportRows()
const response = await importAdminInventoryItems({ rows })
showSuccess(`导入完成,新增 ${response.data.created} 条,重复 ${response.data.duplicated}`)
bulkText.value = ''
await loadInventoryItems(1)
} catch (error) {
showError(error instanceof Error ? error.message : '导入失败')
} finally {
importing.value = false
}
}
async function runRowAction(
inventoryItemId: number,
action: () => Promise<unknown>,
successMessage: string,
confirmText: string,
) {
try {
await showConfirm(confirmText, '确认操作', {
type: 'warning',
confirmButtonText: '继续执行',
cancelButtonText: '取消',
})
} catch {
return
}
actionLoadingId.value = inventoryItemId
try {
await action()
showSuccess(successMessage)
await loadInventoryItems()
} catch (error) {
showError(error instanceof Error ? error.message : '操作失败')
} finally {
actionLoadingId.value = null
}
}
watch(entryCredentialType, () => {
void loadInventorySkuSuggestions()
})
watch(entryInventoryGroupCode, () => {
void loadInventorySkuSuggestions()
})
onMounted(async () => {
await Promise.all([loadInventoryItems(), loadInventorySkuSuggestions()])
})
return {
// state
loading,
importing,
creating,
actionLoadingId,
errorMessage,
items,
pagination,
pageSummary,
pageOverview,
inventoryGroups,
// filter
filterSkuCode,
filterCredentialType,
filterStatus,
filterBatchNo,
filterInventoryGroupCode,
// entry
entrySkuCode,
entryCredentialType,
entryBatchNo,
entryInventoryGroupCode,
singleDisplayValue,
bulkText,
skuSuggestionsLoading,
inventorySkuSuggestions,
entrySkuSuggestions,
// actions
loadInventoryItems,
resetFilters,
submitCreate,
submitImport,
runRowAction,
useGroupAsFilter,
useGroupAsEntry,
applySkuSuggestion,
// formatters
getCredentialTypeLabel,
getCredentialTypeHint,
getSkuNamingHint,
formatInventoryStatus,
getGroupSuggestion,
// utils
formatAdminDateTime,
adminInventoryCredentialTypeOptions,
adminInventoryStatusOptions,
}
}
@@ -2,9 +2,7 @@
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
Box,
Monitor,
Connection,
DataAnalysis,
Document,
Expand,
@@ -35,7 +33,6 @@ const isSidebarCollapsed = ref(
const currentRole = computed(() => getAdminRole())
const isAdmin = computed(() => currentRole.value === 'admin')
const isOperator = computed(() => currentRole.value === 'operator')
const roleLabel = computed(() => {
if (currentRole.value === 'admin') return '管理员'
@@ -57,14 +54,6 @@ const navItems = computed(() => {
{ to: '/admin/tasks', label: '任务', icon: List },
)
if (isAdmin.value || isOperator.value) {
items.push({ to: '/admin/inventory', label: '库存', icon: Box })
}
if (isAdmin.value || isOperator.value) {
items.push({ to: '/admin/webhook-events', label: 'Webhook', icon: Connection })
}
if (isAdmin.value) {
items.push(
{ to: '/admin/platform-shops', label: '平台配置', icon: Setting },
@@ -5,12 +5,7 @@ import { useRoute } from 'vue-router'
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import { fetchAdminOrderDetail } from '@/services/admin'
import type { AdminOrderDetail } from '@/types/admin'
import {
formatBindingRoleSummary,
formatBindingCountSummary,
} from '@/utils/admin-display'
import { formatAdminDateTime } from '@/utils/admin-time'
import { formatAdminWebhookEventType } from '@/utils/admin-webhook'
const route = useRoute()
const loading = ref(true)
@@ -104,15 +99,6 @@ function formatSpecSummary(spec: Record<string, unknown>) {
系统绑定</small
>
</el-card>
<el-card shadow="never" class="info-tile">
<span>库存绑定</span>
<strong>{{ detail.order.bindingSummary.totalBindingCount }} 条绑定记录</strong>
<small
>预占 {{ detail.order.bindingSummary.reservedBindingCount }} · 已消费
{{ detail.order.bindingSummary.consumedBindingCount }} · 已释放
{{ detail.order.bindingSummary.releasedBindingCount }}</small
>
</el-card>
</div>
<el-table :data="[detail.order]" size="small" :show-header="false">
@@ -176,14 +162,6 @@ function formatSpecSummary(spec: Record<string, unknown>) {
<AdminStatusTag :status="row.userBindingStatus" />
</template>
</el-table-column>
<el-table-column label="库存绑定">
<template #default="{ row }">
<div>{{ formatBindingCountSummary(row.bindingSummary) }}</div>
<div class="binding-copy">
角色 {{ formatBindingRoleSummary(row.bindingSummary.roleKeys) }}
</div>
</template>
</el-table-column>
<el-table-column label="登录方式">
<template #default="{ row }">{{ row.loginType || '-' }}</template>
</el-table-column>
@@ -193,43 +171,6 @@ function formatSpecSummary(spec: Record<string, unknown>) {
</el-table>
</el-card>
<el-card shadow="never" class="section-card">
<h3>Webhook 摘要</h3>
<el-table :data="detail.webhookEvents" size="small">
<el-table-column label="事件 ID">
<template #default="{ row }">
<RouterLink :to="`/admin/webhook-events/${row.eventId}`">{{
row.eventId
}}</RouterLink>
</template>
</el-table-column>
<el-table-column label="类型">
<template #default="{ row }">{{ formatAdminWebhookEventType(row.eventType) }}</template>
</el-table-column>
<el-table-column label="平台 / 店铺">
<template #default="{ row }"
>{{ row.platform }} / {{ row.shopName || row.shopId || '-' }}</template
>
</el-table-column>
<el-table-column label="验签">
<template #default="{ row }">
<AdminStatusTag :status="row.signatureValid ? 'success' : 'failed'" />
</template>
</el-table-column>
<el-table-column label="处理">
<template #default="{ row }">
<AdminStatusTag :status="row.processed ? 'success' : 'failed'" />
</template>
</el-table-column>
<el-table-column label="时间" width="180">
<template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
</el-table-column>
<template #empty>
<el-empty description="当前订单还没有关联的 webhook 记录" />
</template>
</el-table>
</el-card>
<el-card shadow="never" class="section-card">
<h3>原始载荷</h3>
<details class="payload-box">
@@ -5,7 +5,6 @@ import {
closeAdminTask,
markAdminTaskManualReview,
regenerateAdminTaskClaimLink,
releaseAdminTaskInventoryBinding,
retryAdminTask,
} from '@/services/admin'
@@ -14,7 +13,6 @@ import AdminTaskActionBar from './components/AdminTaskActionBar.vue'
import AdminTaskEventsSection from './components/AdminTaskEventsSection.vue'
import AdminTaskHeroSection from './components/AdminTaskHeroSection.vue'
import AdminTaskInfoSection from './components/AdminTaskInfoSection.vue'
import AdminTaskInventoryBindingsSection from './components/AdminTaskInventoryBindingsSection.vue'
import AdminTaskManualDispatchSection from './components/AdminTaskManualDispatchSection.vue'
import AdminTaskRedeemResolutionSection from './components/AdminTaskRedeemResolutionSection.vue'
import AdminTaskScreenshotSection from './components/AdminTaskScreenshotSection.vue'
@@ -135,20 +133,6 @@ onMounted(loadDetail)
<AdminTaskRedeemResolutionSection v-if="detail.redeemResolution" :detail="detail" />
<AdminTaskInventoryBindingsSection
v-if="!isKuaishouCloudTask"
:detail="detail"
:can-view-sensitive-task-data="canViewSensitiveTaskData"
:action-loading="actionLoading"
@release-binding="
runAction(
() => releaseAdminTaskInventoryBinding(detail!.task.taskId, $event),
'库存绑定已释放',
`确认释放该库存绑定吗?`,
)
"
/>
<AdminTaskManualDispatchSection
v-if="detail.task.executorKey === 'manual_dispatch'"
:detail="detail"
@@ -14,10 +14,6 @@ import {
} from "@/services/admin";
import type { AdminTaskListItem } from "@/types/admin";
import { hasAdminRole } from "@/utils/admin-auth";
import {
formatBindingRoleSummary,
formatBindingCountSummary,
} from "@/utils/admin-display";
import { adminTaskStatusOptions } from "@/utils/admin-options";
import { formatAdminDateTime } from "@/utils/admin-time";
@@ -140,7 +136,7 @@ onMounted(() => {
<div class="tasks-page list-page">
<AdminPageHeader
title="交付任务"
description="更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。"
description="更紧凑地查看任务状态、角色绑定和异常信息。"
>
<template #extra>
<span class="total-badge"> {{ pagination.total }} 条任务</span>
@@ -292,7 +288,7 @@ onMounted(() => {
</div>
</template>
</el-table-column>
<el-table-column label="角色 / 凭据" min-width="180">
<el-table-column label="角色信息" min-width="180">
<template #default="{ row }">
<div class="cell-stack">
<span
@@ -306,32 +302,6 @@ onMounted(() => {
<span class="cell-subline"
>登录 {{ row.loginType || "-" }}</span
>
<span
class="cell-subline"
:title="row.inventoryDisplayMasked || '-'"
>凭据 {{ row.inventoryDisplayMasked || "-" }}</span
>
<span
class="cell-subline"
:title="
formatBindingRoleSummary(
row.bindingSummary.roleKeys,
'无绑定角色'
)
"
>绑定
{{
formatBindingRoleSummary(
row.bindingSummary.roleKeys,
"无绑定角色"
)
}}</span
>
<span
class="cell-subline cell-subline--strong"
:title="formatBindingCountSummary(row.bindingSummary)"
>{{ formatBindingCountSummary(row.bindingSummary) }}</span
>
</div>
</template>
</el-table-column>
@@ -367,11 +337,7 @@ onMounted(() => {
v-if="canManageTaskLifecycle"
:disabled="
row.executorKey === 'manual_dispatch' ||
![
'retry_pending',
'manual_review',
'waiting_inventory',
].includes(row.status)
!['retry_pending', 'manual_review'].includes(row.status)
"
:loading="actionLoadingId === row.taskId"
size="small"
@@ -36,21 +36,12 @@ defineProps<Props>()
{{ detail.task.resultMessage || '-' }}
</el-descriptions-item>
<template v-if="canViewSensitiveTaskData">
<el-descriptions-item label="库存凭据">
{{ detail.inventory?.displayValue || '-' }}
</el-descriptions-item>
<el-descriptions-item label="凭据类型">
{{ detail.inventory?.credentialType || '-' }}
</el-descriptions-item>
<el-descriptions-item label="库存状态">
<AdminStatusTag :status="detail.inventory?.status || ''" />
</el-descriptions-item>
<el-descriptions-item label="Claim Token">
{{ detail.claimToken?.token || '-' }}
</el-descriptions-item>
</template>
<el-descriptions-item v-else label="库存 / Token" :span="2">
客服账号不可查看库存凭据与原始领取 Token
<el-descriptions-item v-else label="Claim Token" :span="2">
客服账号不可查看原始领取 Token
</el-descriptions-item>
<el-descriptions-item label="Token 状态">
<AdminStatusTag :status="detail.claimToken?.status || ''" />
@@ -1,98 +0,0 @@
<script setup lang="ts">
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import type { AdminTaskDetail } from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import { formatAdminDateTime } from '@/utils/admin-time'
interface Props {
detail: AdminTaskDetail
canViewSensitiveTaskData: boolean
actionLoading: boolean
}
defineProps<Props>()
const emit = defineEmits<{
releaseBinding: [bindingId: number]
}>()
</script>
<template>
<el-card shadow="never" class="section-card">
<h3>库存绑定</h3>
<p class="section-copy">
这里展示任务当前和历史绑定过的库存项便于核对多库存任务的真实履约轨迹
</p>
<el-table :data="detail.inventoryBindings" size="small">
<el-table-column label="绑定" width="100">
<template #default="{ row: binding }">
<div>#{{ binding.bindingId }}</div>
<div v-if="binding.isPrimary" class="binding-primary">主库存项</div>
</template>
</el-table-column>
<el-table-column label="角色" min-width="120">
<template #default="{ row: binding }">
<div>{{ binding.roleKey || '-' }}</div>
<div class="binding-meta">数量 {{ binding.quantity }}</div>
</template>
</el-table-column>
<el-table-column label="库存项" min-width="180">
<template #default="{ row: binding }">
<div>ID {{ binding.inventoryItemId }}</div>
<div>{{ binding.skuCode || '-' }}</div>
<div class="binding-meta">
{{ binding.credentialType || '-' }} ·
{{ binding.batchNo || '无批次' }}
</div>
</template>
</el-table-column>
<el-table-column label="状态" min-width="160">
<template #default="{ row: binding }">
<div class="status-stack">
<AdminStatusTag :status="binding.bindingStatus" />
<AdminStatusTag :status="binding.inventoryStatus" />
</div>
<div v-if="binding.invalidReason" class="binding-meta">
{{
binding.inventoryStatus === 'invalid'
? '作废原因'
: binding.inventoryStatus === 'consumed'
? '消耗原因'
: '处理原因'
}}{{ binding.invalidReason }}
</div>
</template>
</el-table-column>
<el-table-column label="凭据内容" min-width="180">
<template #default="{ row: binding }">
{{ canViewSensitiveTaskData ? binding.displayValue || '-' : '客服不可见' }}
</template>
</el-table-column>
<el-table-column label="时间" min-width="180">
<template #default="{ row: binding }">
<div>绑定 {{ formatAdminDateTime(binding.createdAt) }}</div>
<div class="binding-meta">消费 {{ formatAdminDateTime(binding.consumedAt) }}</div>
<div class="binding-meta">释放 {{ formatAdminDateTime(binding.releasedAt) }}</div>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template #default="{ row: binding }">
<el-button
v-if="hasAdminRole('admin') && binding.canRelease"
:loading="actionLoading"
link
@click="emit('releaseBinding', binding.bindingId)"
>
释放绑定
</el-button>
<span v-else class="binding-meta">-</span>
</template>
</el-table-column>
<template #empty>
<el-empty description="当前任务还没有库存绑定记录" :image-size="60" />
</template>
</el-table>
</el-card>
</template>
<style scoped src="../AdminTaskDetail.css"></style>
@@ -40,7 +40,7 @@ defineProps<Props>()
<el-card
shadow="never"
v-for="attempt in detail.redeemResolution!.attempts"
:key="`${attempt.attempt}-${attempt.inventoryItemId || 'na'}`"
:key="attempt.attempt"
class="redeem-attempt-card"
>
<div class="redeem-attempt-head">
@@ -48,10 +48,6 @@ defineProps<Props>()
<span class="redeem-outcome">{{ formatRedeemOutcomeLabel(attempt.outcome) }}</span>
</div>
<div class="redeem-attempt-grid">
<div>
<span>库存项</span>
<strong>{{ attempt.inventoryItemId ? `#${attempt.inventoryItemId}` : '-' }}</strong>
</div>
<div>
<span>凭据</span>
<strong>{{ attempt.codeMasked || '-' }}</strong>
@@ -26,11 +26,9 @@ const {
updateRole,
toggleStatus,
promptResetPassword,
promptUpdateInventoryGroups,
// formatters
isCurrentUser,
formatRoleLabel,
formatInventoryGroups,
// utils
hasAdminRole,
formatAdminDateTime,
@@ -78,9 +76,7 @@ const {
:update-role="updateRole"
:toggle-status="toggleStatus"
:prompt-reset-password="promptResetPassword"
:prompt-update-inventory-groups="promptUpdateInventoryGroups"
:format-role-label="formatRoleLabel"
:format-inventory-groups="formatInventoryGroups"
:format-admin-date-time="formatAdminDateTime"
/>
</template>
@@ -13,9 +13,7 @@ defineProps<{
updateRole: (item: AdminUserListItem, nextRole: AdminRole) => Promise<void>
toggleStatus: (item: AdminUserListItem) => Promise<void>
promptResetPassword: (item: AdminUserListItem) => Promise<void>
promptUpdateInventoryGroups: (item: AdminUserListItem) => Promise<void>
formatRoleLabel: (role: AdminRole) => string
formatInventoryGroups: (item: AdminUserListItem) => string[]
formatAdminDateTime: (value: string) => string
}>()
</script>
@@ -39,19 +37,6 @@ defineProps<{
<el-table-column label="角色" width="82">
<template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
</el-table-column>
<el-table-column label="库存组" width="112">
<template #default="{ row }">
<div class="inventory-tags">
<el-tag
v-for="(code, i) in formatInventoryGroups(row)"
:key="i"
size="small"
:type="code === '未绑定' || code === '不限库存组' ? 'info' : undefined"
>{{ code }}</el-tag
>
</div>
</template>
</el-table-column>
<el-table-column label="状态" width="128">
<template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
</el-table-column>
@@ -101,13 +86,6 @@ defineProps<{
@click="toggleStatus(row)"
>{{ row.status === 'active' ? '停用' : '启用' }}</el-button
>
<el-button
:loading="actionLoadingId === row.userId"
size="small"
:disabled="row.role !== 'support'"
@click="promptUpdateInventoryGroups(row)"
>配库存组</el-button
>
<el-button
:loading="actionLoadingId === row.userId"
size="small"
@@ -163,15 +141,6 @@ defineProps<{
.users-table :deep(.el-table__body tr:hover > td.el-table__cell) {
background: var(--el-table-row-hover-bg-color);
}
.inventory-tags {
display: flex;
gap: 4px;
align-items: center;
white-space: nowrap;
}
.inventory-tags :deep(.el-tag) {
flex: 0 0 auto;
}
.date-cell {
display: inline-block;
white-space: nowrap;
@@ -11,7 +11,6 @@ import {
createAdminUser,
fetchAdminUsers,
resetAdminUserPassword,
updateAdminUserInventoryGroups,
updateAdminUserRole,
updateAdminUserStatus,
} from '@/services/admin'
@@ -44,12 +43,6 @@ export function useAdminUsers() {
return '普通运营'
}
function formatInventoryGroups(item: AdminUserListItem) {
if (item.role !== 'support') return ['不限库存组']
if (item.inventoryGroupCodes.length === 0) return ['未绑定']
return item.inventoryGroupCodes
}
async function loadUsers(page = pagination.value.page) {
if (!hasAdminRole('admin')) {
loading.value = false
@@ -170,39 +163,6 @@ export function useAdminUsers() {
}
}
async function promptUpdateInventoryGroups(item: AdminUserListItem) {
if (item.role !== 'support') {
showError('仅客服账号需要绑定库存组')
return
}
try {
const result = await showPrompt(
`请输入 ${item.username} 可用的库存组,多个组用英文逗号分隔`,
'配置库存组',
{
inputType: 'text',
inputValue: item.inventoryGroupCodes.join(','),
inputPlaceholder: '例如 A组,B组,售后组',
confirmButtonText: '保存',
cancelButtonText: '取消',
},
)
const inventoryGroupCodes = String(result.value || '')
.split(',')
.map((v) => v.trim())
.filter(Boolean)
actionLoadingId.value = item.userId
await updateAdminUserInventoryGroups(item.userId, { inventoryGroupCodes })
showSuccess('用户库存组已更新')
await loadUsers()
} catch (error) {
if (isFeedbackDismissed(error)) return
showError(error instanceof Error ? error.message : '更新库存组失败')
} finally {
actionLoadingId.value = null
}
}
onMounted(loadUsers)
return {
@@ -227,11 +187,9 @@ export function useAdminUsers() {
updateRole,
toggleStatus,
promptResetPassword,
promptUpdateInventoryGroups,
// formatters
isCurrentUser,
formatRoleLabel,
formatInventoryGroups,
// utils
hasAdminRole,
formatAdminDateTime,
@@ -1,354 +0,0 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { showConfirm, showError, showSuccess } from '@/lib/feedback'
import { fetchAdminWebhookEventDetail, replayAdminWebhookEvent } from '@/services/admin'
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import type { AdminWebhookEventDetail, AdminWebhookReplayResponse } from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import { formatAdminDateTime } from '@/utils/admin-time'
import { stringifyDisplayJson } from '@/utils/date-time'
import { formatAdminWebhookEventType } from '@/utils/admin-webhook'
const route = useRoute()
const loading = ref(true)
const replayLoading = ref(false)
const errorMessage = ref('')
const detail = ref<AdminWebhookEventDetail | null>(null)
const lastReplayResult = ref<AdminWebhookReplayResponse['result'] | null>(null)
async function loadDetail() {
loading.value = true
errorMessage.value = ''
try {
const response = await fetchAdminWebhookEventDetail(String(route.params.eventId || ''))
detail.value = response.data
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '读取 webhook 详情失败'
} finally {
loading.value = false
}
}
async function submitReplay() {
if (!detail.value) {
return
}
try {
await showConfirm(
`确认重放 webhook #${detail.value.eventId} 吗?这会重新推进订单与任务处理。`,
'确认重放',
{
type: 'warning',
confirmButtonText: '继续重放',
cancelButtonText: '取消',
},
)
} catch {
return
}
replayLoading.value = true
try {
const response = await replayAdminWebhookEvent(detail.value.eventId)
lastReplayResult.value = response.data.result
showSuccess(`Webhook 已重放,生成/更新任务 ${response.data.result.taskCount}`)
await loadDetail()
} catch (error) {
showError(error instanceof Error ? error.message : '重放 webhook 失败')
} finally {
replayLoading.value = false
}
}
function prettyJson(value: Record<string, unknown>) {
return stringifyDisplayJson(value, 2)
}
function formatRequestTimestamp(value: string) {
const normalized = String(value || '').trim()
if (!/^\d{10,13}$/.test(normalized)) {
return normalized || '-'
}
const epochMs = normalized.length === 13 ? Number(normalized) : Number(normalized) * 1000
return formatAdminDateTime(new Date(epochMs).toISOString())
}
function formatAmount(detail: AdminWebhookEventDetail) {
return detail.totalAmount ? `${detail.totalAmount} ${detail.currency}` : '-'
}
onMounted(loadDetail)
</script>
<template>
<section class="admin-panel">
<AdminPageHeader title="Webhook 详情" description="查看原始请求并手动重放处理流程。">
<el-button
v-if="hasAdminRole('admin')"
:loading="replayLoading"
round
type="primary"
@click="submitReplay"
>重放处理</el-button
>
</AdminPageHeader>
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" />
<el-skeleton v-if="loading" :rows="8" animated />
<template v-else-if="detail">
<el-card shadow="never" class="section-card">
<div class="overview-top">
<div>
<h3>{{ formatAdminWebhookEventType(detail.eventType) }}</h3>
<p class="muted-copy">
#{{ detail.eventId }} · {{ detail.provider }} / {{ detail.platform }}
<template v-if="detail.platformRaw && detail.platformRaw !== detail.platform">
· 原始平台 {{ detail.platformRaw }}
</template>
</p>
</div>
<div class="tag-row">
<AdminStatusTag :status="detail.signatureValid ? 'success' : 'failed'" />
<AdminStatusTag :status="detail.processed ? 'success' : 'failed'" />
</div>
</div>
<div class="summary-grid">
<div class="summary-item">
<span class="summary-label">店铺</span>
<strong>{{ detail.shopName || detail.shopId || '-' }}</strong>
<span class="summary-note">ID: {{ detail.shopId || '-' }}</span>
</div>
<div class="summary-item">
<span class="summary-label">平台订单</span>
<strong>{{ detail.platformOrderId || '-' }}</strong>
<span class="summary-note">aopic: {{ detail.aopic || '-' }}</span>
</div>
<div class="summary-item">
<span class="summary-label">关联订单</span>
<strong v-if="detail.relatedOrderId">
<RouterLink class="inline-link" :to="`/admin/orders/${detail.relatedOrderId}`">{{
detail.relatedOrderId
}}</RouterLink>
</strong>
<strong v-else>-</strong>
<span class="summary-note">任务数: {{ detail.taskCount }}</span>
</div>
<div class="summary-item">
<span class="summary-label">买家</span>
<strong>{{ detail.buyerName || detail.buyerId || '-' }}</strong>
<span class="summary-note">买家 ID: {{ detail.buyerId || '-' }}</span>
</div>
<div class="summary-item">
<span class="summary-label">金额</span>
<strong>{{ formatAmount(detail) }}</strong>
<span class="summary-note">商品数: {{ detail.itemCount }}</span>
</div>
<div class="summary-item">
<span class="summary-label">请求时间</span>
<strong>{{ formatRequestTimestamp(detail.requestTimestamp) }}</strong>
<span class="summary-note">入库时间: {{ formatAdminDateTime(detail.createdAt) }}</span>
</div>
<div class="summary-item">
<span class="summary-label">来源 Host</span>
<strong>{{ detail.sourceHost || '-' }}</strong>
<span class="summary-note">来源 IP: {{ detail.sourceIp || '-' }}</span>
</div>
<div class="summary-item">
<span class="summary-label">消息说明</span>
<strong>{{ detail.messageText || '-' }}</strong>
<span class="summary-note">签名: {{ detail.requestSign || '-' }}</span>
</div>
</div>
<div class="event-key-block">
<span class="summary-label">事件 Key</span>
<code>{{ detail.eventKey }}</code>
</div>
<div v-if="detail.processError" class="inline-error">{{ detail.processError }}</div>
</el-card>
<el-card v-if="lastReplayResult" shadow="never" class="section-card">
<h3>最近一次重放结果</h3>
<p class="result-copy">
{{ lastReplayResult.provider }} / {{ lastReplayResult.platform }}
<template
v-if="
lastReplayResult.platformRaw &&
lastReplayResult.platformRaw !== lastReplayResult.platform
"
>
· 原始平台 {{ lastReplayResult.platformRaw }}
</template>
· 平台订单 {{ lastReplayResult.platformOrderId }} · 事件
{{ formatAdminWebhookEventType(lastReplayResult.eventType) }} · 任务数
{{ lastReplayResult.taskCount }}
</p>
<el-table :data="lastReplayResult.tasks" size="small">
<el-table-column prop="taskId" label="任务 ID" />
<el-table-column prop="taskNo" label="任务号" />
<el-table-column label="状态">
<template #default="{ row }">
<AdminStatusTag :status="row.status" />
</template>
</el-table-column>
</el-table>
</el-card>
<el-card shadow="never" class="section-card">
<h3>解析后的 Payload</h3>
<pre class="json-block">{{ prettyJson(detail.payload) }}</pre>
</el-card>
<el-card shadow="never" class="section-card">
<h3>Headers</h3>
<pre class="json-block">{{ prettyJson(detail.headers) }}</pre>
</el-card>
<el-card shadow="never" class="section-card">
<h3>Query</h3>
<pre class="json-block">{{ prettyJson(detail.query) }}</pre>
</el-card>
<el-card shadow="never" class="section-card">
<h3>Body</h3>
<pre class="json-block">{{ prettyJson(detail.body) }}</pre>
</el-card>
</template>
</section>
</template>
<style scoped>
.admin-panel {
display: grid;
gap: var(--space-4);
}
.overview-top {
display: flex;
justify-content: space-between;
gap: var(--space-4);
align-items: flex-start;
}
.overview-top h3,
.section-card h3 {
margin: 0;
color: var(--text-primary);
}
.muted-copy {
margin: var(--space-2) 0 0;
color: var(--text-secondary);
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
margin-top: var(--space-4);
}
.summary-item {
display: grid;
gap: 6px;
padding: 14px;
border-radius: var(--radius-md);
background: var(--bg-page);
border: 1px solid var(--border-default);
}
.summary-label {
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 700;
}
.summary-item strong {
color: var(--text-primary);
word-break: break-all;
}
.summary-note {
color: var(--text-secondary);
font-size: var(--text-xs);
line-height: 1.5;
word-break: break-all;
}
.event-key-block {
display: grid;
gap: var(--space-2);
margin-top: var(--space-4);
padding: 14px;
border-radius: var(--radius-md);
background: var(--bg-page);
border: 1px solid var(--border-default);
}
.event-key-block code {
color: var(--text-primary);
font-size: var(--text-xs);
line-height: 1.6;
word-break: break-all;
white-space: pre-wrap;
}
.inline-error {
margin-top: var(--space-4);
padding: var(--space-3) 14px;
border-radius: 14px;
color: var(--color-danger);
background: var(--color-danger-light);
border: 1px solid #fecdca;
line-height: 1.6;
}
.result-copy {
margin: var(--space-3) 0;
color: var(--text-secondary);
}
.inline-link {
color: var(--color-primary);
}
.json-block {
margin: var(--space-3) 0 0;
padding: 14px;
border-radius: 14px;
background: #0f172a;
color: #e2e8f0;
overflow-y: auto;
font-size: var(--text-xs);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
@media (max-width: 900px) {
.overview-top {
flex-direction: column;
}
.summary-grid {
grid-template-columns: 1fr;
}
}
</style>
@@ -1,415 +0,0 @@
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAdminListPage } from "@/composables/useAdminListPage";
import { useAdminListQuerySync } from "@/composables/useAdminListQuerySync";
import AdminPageHeader from "@/components/admin/AdminPageHeader.vue";
import AdminStatusTag from "@/components/admin/AdminStatusTag.vue";
import { showConfirm, showError, showSuccess } from "@/lib/feedback";
import {
fetchAdminWebhookEvents,
replayAdminWebhookEvent,
} from "@/services/admin";
import type { AdminWebhookEventListItem } from "@/types/admin";
import { hasAdminRole } from "@/utils/admin-auth";
import { formatAdminDateTime } from "@/utils/admin-time";
import { formatAdminWebhookEventType } from "@/utils/admin-webhook";
import {
adminWebhookProcessedOptions,
adminWebhookVisibilityOptions,
} from "@/utils/admin-options";
const route = useRoute();
const router = useRouter();
const { readQueryString, readQueryPage, syncRouteQuery } =
useAdminListQuerySync(route, router);
const actionLoadingId = ref<number | null>(null);
const provider = ref(readQueryString("provider"));
const platform = ref(readQueryString("platform"));
const platformOrderId = ref(readQueryString("platformOrderId"));
const processed = ref(readQueryString("processed"));
const visibility = ref(readQueryString("visibility") || "important");
const relatedOrderId = ref(readQueryString("relatedOrderId"));
const dateRange = ref<string[]>(
[readQueryString("dateFrom"), readQueryString("dateTo")].filter(Boolean)
);
const canReplay = hasAdminRole("admin");
const {
loading,
errorMessage,
items,
pagination,
loadPage: loadEvents,
} = useAdminListPage<AdminWebhookEventListItem>({
defaultErrorMessage: "读取 webhook 列表失败",
fetchPage: (page, pageSize) =>
fetchAdminWebhookEvents({
page,
pageSize,
provider: provider.value.trim(),
platform: platform.value.trim(),
platformOrderId: platformOrderId.value.trim(),
processed: processed.value.trim(),
visibility: visibility.value.trim(),
relatedOrderId: relatedOrderId.value.trim(),
dateFrom: dateRange.value[0] || "",
dateTo: dateRange.value[1] || "",
}),
});
const summary = computed(() => ({
processedCount: items.value.filter((item) => item.processed).length,
failedCount: items.value.filter(
(item) => !item.processed || Boolean(item.processError)
).length,
importantCount: items.value.filter(
(item) => item.visibilityLevel === "important"
).length,
}));
async function submitReplay(item: AdminWebhookEventListItem) {
try {
await showConfirm(`确认重放 webhook #${item.eventId} 吗?`, "确认重放", {
type: "warning",
confirmButtonText: "继续重放",
cancelButtonText: "取消",
});
} catch {
return;
}
actionLoadingId.value = item.eventId;
try {
await replayAdminWebhookEvent(item.eventId);
showSuccess("Webhook 已重放");
await loadEvents();
} catch (error) {
showError(error instanceof Error ? error.message : "重放 webhook 失败");
} finally {
actionLoadingId.value = null;
}
}
function resetFilters() {
provider.value = "";
platform.value = "";
platformOrderId.value = "";
processed.value = "";
visibility.value = "important";
relatedOrderId.value = "";
dateRange.value = [];
void applyFilters(1);
}
async function applyFilters(page = 1) {
await syncRouteQuery(page, {
provider: provider.value,
platform: platform.value,
platformOrderId: platformOrderId.value,
processed: processed.value,
visibility: visibility.value,
relatedOrderId: relatedOrderId.value,
dateFrom: dateRange.value[0] || "",
dateTo: dateRange.value[1] || "",
});
await loadEvents(page);
}
function formatVisibilityLabel(value: string) {
return value === "ignored" ? "已忽略" : "重要";
}
onMounted(() => {
void applyFilters(readQueryPage());
});
</script>
<template>
<div class="webhooks-page list-page">
<AdminPageHeader
title="Webhook 日志"
description="查看平台推送处理情况、验签结果、请求来源和错误信息。"
>
<template #extra>
<span class="total-badge"> {{ pagination.total }} 条事件</span>
</template>
</AdminPageHeader>
<!-- 筛选 -->
<el-card shadow="never" class="section-card">
<template #header>
<div class="card-header">
<span class="card-title">筛选 Webhook</span>
<span class="card-desc"
>按服务商平台处理状态可见级别等条件筛选</span
>
</div>
</template>
<div class="filter-grid">
<el-input
v-model="provider"
class="filter-control"
placeholder="服务商,如 91kaquan"
clearable
@keyup.enter="applyFilters(1)"
/>
<el-input
v-model="platform"
class="filter-control"
placeholder="业务平台,如 kuaishou"
clearable
@keyup.enter="applyFilters(1)"
/>
<el-select
v-model="processed"
class="filter-control"
placeholder="处理结果"
clearable
>
<el-option
v-for="opt in adminWebhookProcessedOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<el-select
v-model="visibility"
class="filter-control"
placeholder="可见级别"
clearable
>
<el-option
v-for="opt in adminWebhookVisibilityOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<el-input
v-model="platformOrderId"
class="filter-control"
placeholder="平台订单号"
clearable
@keyup.enter="applyFilters(1)"
/>
<el-input
v-model="relatedOrderId"
class="filter-control"
placeholder="后台订单 ID"
clearable
@keyup.enter="applyFilters(1)"
/>
<el-date-picker
v-model="dateRange"
class="filter-control"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator=""
value-format="YYYY-MM-DD"
/>
<div class="filter-buttons">
<el-button round @click="resetFilters">重置</el-button>
<el-button round type="primary" @click="applyFilters(1)"
>查询</el-button
>
</div>
</div>
</el-card>
<!-- 摘要 -->
<div v-if="!loading && items.length > 0" class="summary-strip">
<span class="summary-title">当前页</span>
<span class="summary-metric" data-tone="success"
>处理成功 <strong>{{ summary.processedCount }}</strong></span
>
<span class="summary-metric" data-tone="danger"
>异常/失败 <strong>{{ summary.failedCount }}</strong></span
>
<span class="summary-metric" data-tone="primary"
>重要事件 <strong>{{ summary.importantCount }}</strong></span
>
</div>
<el-alert
v-if="errorMessage"
:title="errorMessage"
type="error"
show-icon
:closable="false"
class="mt-4"
/>
<!-- 列表 -->
<el-card
shadow="never"
class="section-card"
v-loading="loading"
element-loading-text="Webhook 列表加载中"
>
<template v-if="items.length === 0 && !loading">
<el-empty
description="当前筛选条件下暂无 Webhook 事件"
:image-size="60"
/>
</template>
<template v-else>
<div class="orders-toolbar table-toolbar">
<strong>Webhook 列表</strong>
<span
> {{ pagination.page }} 当前展示 {{ items.length }} </span
>
</div>
<el-table
:data="items"
stripe
size="small"
class="orders-table data-table"
>
<el-table-column label="事件ID" width="100">
<template #default="{ row }">
<RouterLink
:to="`/admin/webhook-events/${row.eventId}`"
class="order-no id-link"
>
#{{ row.eventId }}
</RouterLink>
</template>
</el-table-column>
<el-table-column label="事件类型" min-width="200">
<template #default="{ row }">
<div class="cell-stack">
<span class="cell-title">{{
formatAdminWebhookEventType(row.eventType)
}}</span>
<div class="cell-meta-row">
<span class="compact-chip">{{ row.provider || "-" }}</span>
<span class="compact-chip">{{ row.platform || "-" }}</span>
<span class="compact-chip compact-chip--muted">{{
row.shopName || row.shopId || "-"
}}</span>
</div>
<span v-if="row.aopic" class="cell-subline"
>aopic {{ row.aopic }}</span
>
</div>
</template>
</el-table-column>
<el-table-column label="平台订单号" min-width="180">
<template #default="{ row }">
<div class="cell-stack">
<span class="cell-title">{{ row.platformOrderId || "-" }}</span>
<span v-if="row.totalAmount" class="cell-subline"
>{{ row.totalAmount }} {{ row.currency }}</span
>
<span v-if="row.buyerName || row.buyerId" class="cell-subline"
>买家 {{ row.buyerName || row.buyerId }}</span
>
<RouterLink
v-if="row.relatedOrderId"
class="inline-link"
:to="`/admin/orders/${row.relatedOrderId}`"
>
关联订单 #{{ row.relatedOrderId }}
</RouterLink>
</div>
</template>
</el-table-column>
<el-table-column label="状态" min-width="150">
<template #default="{ row }">
<div class="cell-stack">
<div class="status-stack">
<AdminStatusTag
:status="row.processed ? 'success' : 'failed'"
/>
<AdminStatusTag
:status="row.signatureValid ? 'success' : 'failed'"
/>
</div>
<span class="cell-subline">{{
formatVisibilityLabel(row.visibilityLevel)
}}</span>
<span v-if="row.processError" class="error-inline">{{
row.processError
}}</span>
</div>
</template>
</el-table-column>
<el-table-column label="创建时间" min-width="160">
<template #default="{ row }">
<div class="cell-stack">
<span class="cell-title">{{
formatAdminDateTime(row.createdAt)
}}</span>
<span class="cell-subline">#{{ row.eventId }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="130" align="center">
<template #default="{ row }">
<div class="action-stack">
<RouterLink
:to="`/admin/webhook-events/${row.eventId}`"
class="detail-link"
>详情</RouterLink
>
<el-button
v-if="canReplay"
:loading="actionLoadingId === row.eventId"
size="small"
@click="submitReplay(row)"
>重放</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="pagination.total > 0"
v-model:current-page="pagination.page"
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, prev, pager, next"
class="pagination-center"
@current-change="applyFilters"
/>
</template>
</el-card>
</div>
</template>
<style scoped>
@import "../../../styles/admin-list-pages.css";
.filter-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.error-inline {
display: block;
color: var(--color-danger);
font-size: var(--text-xs);
}
.inline-link {
color: var(--color-primary-dark);
font-size: var(--text-xs);
font-weight: 700;
text-decoration: none;
}
.inline-link:hover {
text-decoration: underline;
}
.action-stack {
flex-direction: column;
align-items: center;
}
</style>