CSS 重构：消除重复代码，提取共享样式
- 新增 admin-list-pages.css 共享样式（7个列表页统一使用） - AdminKuaishouCloudFulfillment.css 删除 488 行重复副本 - AdminInventoryView CSS 提取到独立文件（-268行） - formatTaskEventPayload 等 6 个函数提取到 admin-display.ts - 各列表页 CSS 精简为 @import + 少量页面特有样式 - 净减少 CSS 约 1300 行 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
yml2213
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
c6eb0d60b1
commit
2535bd8092
@@ -0,0 +1,288 @@
|
||||
/* ============================================================
|
||||
管理员列表页共享样式
|
||||
引入: AdminOrdersView, AdminTasksView, AdminMessageDeliveriesView,
|
||||
AdminWebhookEventsView, AdminUsersView, AdminInventoryView
|
||||
各页面自行覆盖 grid-template-columns 等布局差异
|
||||
============================================================ */
|
||||
|
||||
/* ---------- 页面包裹 ---------- */
|
||||
.list-page {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ---------- 总量标签 ---------- */
|
||||
.total-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(37, 89, 167, 0.14);
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
color: #2559a7;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---------- 卡片区域 ---------- */
|
||||
.section-card {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
/* ---------- 卡片头部 ---------- */
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* ---------- 筛选网格 ---------- */
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
min-width: 156px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* ---------- 摘要条 ---------- */
|
||||
.summary-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 38px;
|
||||
padding: 0;
|
||||
margin-top: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.summary-metric {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
background: #f8fafc;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-metric strong {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.summary-metric[data-tone='success'] { color: var(--color-success-dark); background: var(--color-success-light); border-color: #bbf7d0; }
|
||||
.summary-metric[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
|
||||
.summary-metric[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #bfdbfe; }
|
||||
.summary-metric[data-tone='warning'] { color: var(--color-warning-dark); background: var(--color-warning-light); border-color: #fed7aa; }
|
||||
.summary-metric[data-tone='muted'] { color: var(--text-secondary); background: #f8fafc; border-color: var(--border-default); }
|
||||
|
||||
/* ---------- 表格工具栏 ---------- */
|
||||
.table-toolbar {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.table-toolbar strong {
|
||||
display: block;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.table-toolbar span {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* ---------- el-table 统一主题变量 ---------- */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-border-color: rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
|
||||
.data-table :deep(.el-table__inner-wrapper::before) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.data-table :deep(th.el-table__cell) {
|
||||
height: 42px;
|
||||
background: var(--el-table-header-bg-color);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---------- 单元格通用 ---------- */
|
||||
.cell-stack {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.cell-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
max-width: 240px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.compact-chip--muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cell-title {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell-subline {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #475467;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* ---------- ID 链接 ---------- */
|
||||
.id-link {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.id-link:hover {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
/* ---------- 详情链接按钮 ---------- */
|
||||
.detail-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--color-primary-dark);
|
||||
background: var(--color-primary-light);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.detail-link:hover {
|
||||
border-color: var(--border-hover);
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
/* ---------- 操作 & 状态容器 ---------- */
|
||||
.action-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-stack :deep(.el-tag) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* ---------- 响应式 ---------- */
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.filter-buttons {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.filter-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
.filter-buttons :deep(.el-button) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
@@ -65,3 +65,117 @@ export function formatTaskEventType(eventType: string) {
|
||||
|
||||
return formatStatusWithRaw(eventType, labelMap)
|
||||
}
|
||||
|
||||
export function formatRedeemOutcomeLabel(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
switch (normalized) {
|
||||
case 'success':
|
||||
return '兑换成功'
|
||||
case 'code_used':
|
||||
return '兑换码已使用'
|
||||
case 'code_invalid':
|
||||
return '兑换码错误'
|
||||
case 'captcha_rejected':
|
||||
return '验证码错误'
|
||||
case 'failed':
|
||||
return '兑换失败'
|
||||
default:
|
||||
return normalized || '-'
|
||||
}
|
||||
}
|
||||
|
||||
export function formatRedeemResolutionStatus(value: string) {
|
||||
return value === 'success' ? '已完成' : value === 'failed' ? '失败收口' : (value || '-')
|
||||
}
|
||||
|
||||
export function formatAutoDeliveryTrigger(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
switch (normalized) {
|
||||
case 'claim_redeemed':
|
||||
return '用户兑换完成后触发'
|
||||
case 'manual_dispatch_completed':
|
||||
return '人工履约完成后触发'
|
||||
case 'task_delivered':
|
||||
return '任务交付完成后触发'
|
||||
default:
|
||||
return normalized || '-'
|
||||
}
|
||||
}
|
||||
|
||||
export function formatAutoDeliveryReason(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
switch (normalized) {
|
||||
case 'waiting_other_tasks':
|
||||
return '订单下仍有任务未完成交付'
|
||||
case 'already_sent':
|
||||
return '该订单已经执行过自动发货'
|
||||
case 'auto_delivery_disabled':
|
||||
return '自动发货开关已关闭'
|
||||
case 'missing_config':
|
||||
return '缺少 Agiso 自动发货配置'
|
||||
case 'request_failed':
|
||||
return 'Agiso 接口返回失败'
|
||||
case 'request_error':
|
||||
return '请求 Agiso 接口时发生异常'
|
||||
case 'delivery_not_confirmed':
|
||||
return '接口返回成功，但订单状态未确认进入已发货'
|
||||
case 'task_not_delivered':
|
||||
return '当前任务尚未进入已交付状态'
|
||||
case 'not_supported':
|
||||
return '当前订单不支持 Agiso 咸鱼自动发货'
|
||||
default:
|
||||
return normalized || '-'
|
||||
}
|
||||
}
|
||||
|
||||
export function formatKuaishouRoleInfoLabel(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
switch (normalized) {
|
||||
case 'name':
|
||||
return '角色名称'
|
||||
case 'rid':
|
||||
return '角色 ID'
|
||||
default:
|
||||
return normalized || '-'
|
||||
}
|
||||
}
|
||||
|
||||
export function formatTaskEventPayload(payload: Record<string, unknown>) {
|
||||
const parts = [
|
||||
payload.outcome ? `结果 ${payload.outcome}` : '',
|
||||
payload.resultCode ? `代码 ${payload.resultCode}` : '',
|
||||
payload.resultMessage ? `说明 ${payload.resultMessage}` : '',
|
||||
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}` : '',
|
||||
payload.bindUrl ? `绑定链接 ${payload.bindUrl}` : '',
|
||||
payload.sendType ? `发送类型 ${payload.sendType}` : '',
|
||||
payload.note ? `备注 ${payload.note}` : '',
|
||||
payload.previousOutcome ? `切换原因 ${formatRedeemOutcomeLabel(String(payload.previousOutcome || ''))}` : '',
|
||||
payload.deliveryReference ? `单号 ${payload.deliveryReference}` : '',
|
||||
payload.platformOrderId ? `平台单 ${payload.platformOrderId}` : '',
|
||||
payload.trigger ? `触发 ${formatAutoDeliveryTrigger(String(payload.trigger || ''))}` : '',
|
||||
payload.reason ? `原因 ${payload.reason}` : '',
|
||||
payload.purchaseTriggered === true ? '已触发购买' : '',
|
||||
payload.usedKnapsack === true ? '使用背包库存' : '',
|
||||
payload.responseStatus ? `HTTP ${payload.responseStatus}` : '',
|
||||
payload.requestId ? `请求 ${payload.requestId}` : '',
|
||||
payload.errorMessage ? `错误 ${payload.errorMessage}` : '',
|
||||
].filter(Boolean)
|
||||
|
||||
if (parts.length > 0) {
|
||||
return parts.join(' · ')
|
||||
}
|
||||
|
||||
return JSON.stringify(payload || {})
|
||||
}
|
||||
|
||||
@@ -72,7 +72,7 @@ onMounted(loadAuditLogs)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="audit-page">
|
||||
<div class="audit-page list-page">
|
||||
<AdminPageHeader title="操作审计" description="集中查看高风险后台动作，便于排查谁在什么时间改了什么。">
|
||||
<template #extra>
|
||||
<span class="total-label">{{ totalLabel }}</span>
|
||||
@@ -170,10 +170,7 @@ onMounted(loadAuditLogs)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.audit-page {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
@import '../../styles/admin-list-pages.css';
|
||||
|
||||
.total-label {
|
||||
color: var(--text-secondary);
|
||||
|
||||
@@ -0,0 +1,228 @@
|
||||
@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 { display: grid; min-width: 0; }
|
||||
|
||||
.native-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.native-input:focus {
|
||||
border-color: rgba(37, 89, 167, 0.38);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 0 0 3px rgba(37, 89, 167, 0.08);
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
.sku-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.sku-chip {
|
||||
display: inline-grid;
|
||||
gap: 4px;
|
||||
max-width: 100%;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(86, 108, 138, 0.16);
|
||||
background: rgba(248, 250, 252, 0.78);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.sku-chip:hover { transform: translateY(-1px); border-color: rgba(37, 89, 167, 0.26); box-shadow: 0 12px 24px rgba(37, 89, 167, 0.08); }
|
||||
.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; }
|
||||
|
||||
.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-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; }
|
||||
|
||||
.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: 1200px) {
|
||||
.form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.form-grid,
|
||||
.summary-grid,
|
||||
.pool-grid,
|
||||
.helper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.card-header { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.form-grid,
|
||||
.summary-grid,
|
||||
.pool-grid,
|
||||
.helper-grid { grid-template-columns: 1fr; }
|
||||
.single-row,
|
||||
.action-row,
|
||||
.sku-helper-bar { flex-direction: column; align-items: stretch; }
|
||||
.status-stack, .action-stack { justify-content: flex-start; }
|
||||
}
|
||||
@@ -278,7 +278,7 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="inventory-page">
|
||||
<div class="inventory-page list-page">
|
||||
<AdminPageHeader title="库存管理" description="按内部履约 SKU 和凭据类型管理库存、预占和发放。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条库存</span>
|
||||
@@ -449,7 +449,7 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
当前筛选共 {{ pagination.total }} 条，本页可用 {{ pageSummary.availableCount }} 条，预占 {{ pageSummary.reservedCount }} 条，已发放 {{ pageSummary.deliveredCount }} 条，作废 {{ pageSummary.invalidCount }} 条。
|
||||
</div>
|
||||
|
||||
<el-table :data="items" stripe size="small" class="inventory-table">
|
||||
<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">
|
||||
@@ -530,271 +530,4 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.inventory-page { display: grid; gap: 0; }
|
||||
|
||||
.total-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(37, 89, 167, 0.14);
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
color: #2559a7;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-card { margin-top: var(--space-4); }
|
||||
|
||||
.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
|
||||
.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
|
||||
.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.sku-input-wrap { display: grid; min-width: 0; }
|
||||
|
||||
.native-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.native-input:focus {
|
||||
border-color: rgba(37, 89, 167, 0.38);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 0 0 3px rgba(37, 89, 167, 0.08);
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
.sku-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.sku-chip {
|
||||
display: inline-grid;
|
||||
gap: 4px;
|
||||
max-width: 100%;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(86, 108, 138, 0.16);
|
||||
background: rgba(248, 250, 252, 0.78);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.sku-chip:hover { transform: translateY(-1px); border-color: rgba(37, 89, 167, 0.26); box-shadow: 0 12px 24px rgba(37, 89, 167, 0.08); }
|
||||
.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; }
|
||||
|
||||
.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-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; }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.inventory-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-border-color: rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
.inventory-table :deep(.el-table__inner-wrapper::before) { display: none; }
|
||||
.inventory-table :deep(th.el-table__cell) {
|
||||
height: 42px;
|
||||
background: var(--el-table-header-bg-color);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.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: 1200px) {
|
||||
.form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.form-grid,
|
||||
.summary-grid,
|
||||
.pool-grid,
|
||||
.helper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.card-header { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.form-grid,
|
||||
.summary-grid,
|
||||
.pool-grid,
|
||||
.helper-grid { grid-template-columns: 1fr; }
|
||||
.single-row,
|
||||
.action-row,
|
||||
.sku-helper-bar { flex-direction: column; align-items: stretch; }
|
||||
.status-stack, .action-stack { justify-content: flex-start; }
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./AdminInventoryView.css"></style>
|
||||
|
||||
@@ -531,19 +531,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-button) {
|
||||
min-height: 34px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-button--primary) {
|
||||
--el-button-bg-color: var(--accent);
|
||||
--el-button-border-color: var(--accent);
|
||||
--el-button-hover-bg-color: var(--accent-strong);
|
||||
--el-button-hover-border-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-input__wrapper),
|
||||
.admin-panel :deep(.el-textarea__inner),
|
||||
.admin-panel :deep(.el-select__wrapper) {
|
||||
@@ -983,489 +970,3 @@
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.panel-header-copy h1,
|
||||
.section-title-row h3 {
|
||||
margin: 0;
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.panel-header-copy p,
|
||||
.section-title-row p {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.header-tags,
|
||||
.header-actions,
|
||||
.section-header-tools,
|
||||
.section-mini-stats,
|
||||
.section-action-group,
|
||||
.binding-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-actions,
|
||||
.section-header-tools {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header-tag,
|
||||
.mini-stat-chip,
|
||||
.overview-note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 93, 216, 0.08);
|
||||
color: #175cd3;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mini-stat-chip--button {
|
||||
border: 1px solid rgba(15, 93, 216, 0.12);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.mini-stat-chip--active {
|
||||
border-color: rgba(15, 93, 216, 0.32);
|
||||
background: rgba(15, 93, 216, 0.14);
|
||||
}
|
||||
|
||||
.overview-card,
|
||||
.table-card,
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.table-card--dense {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.overview-file {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.overview-label {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.overview-file code {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 8px 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
color: #1d3555;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.overview-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.overview-stat {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
color: #1d3555;
|
||||
font-size: var(--text-2xl);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.overview-notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-title-row--tight {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lookup-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 1fr) 110px 130px 180px;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.field-block {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-block span {
|
||||
color: #1d3555;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-block--action {
|
||||
align-content: end;
|
||||
}
|
||||
|
||||
.field-block--action :deep(.el-button) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(86, 108, 138, 0.22);
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
color: #1d3555;
|
||||
outline: none;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.text-input:focus {
|
||||
border-color: rgba(15, 93, 216, 0.42);
|
||||
box-shadow: 0 0 0 4px rgba(15, 93, 216, 0.08);
|
||||
}
|
||||
|
||||
.text-input--readonly,
|
||||
.text-input:disabled {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.textarea-input {
|
||||
min-height: 72px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field-help,
|
||||
.toolbar-hint,
|
||||
.cell-subtle {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.toolbar-hint {
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.error-copy,
|
||||
.validation-banner,
|
||||
.binding-inline-error {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.validation-banner,
|
||||
.binding-inline-error {
|
||||
margin: 10px 0 0;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: #fff5f4;
|
||||
border: 1px solid rgba(180, 35, 24, 0.14);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 11px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell-stack {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cell-stack strong {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.empty-inline {
|
||||
padding: 14px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.binding-card {
|
||||
margin-top: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.binding-card--invalid {
|
||||
border-color: rgba(220, 38, 38, 0.3);
|
||||
box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
|
||||
}
|
||||
|
||||
.binding-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.binding-summary {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.binding-title-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.binding-subtle {
|
||||
color: #64748b;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-full);
|
||||
padding: 2px 10px;
|
||||
background: #fff1f2;
|
||||
color: #be123c;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.binding-status-chip--done {
|
||||
background: #ecfdf3;
|
||||
color: #027a48;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: #1d3555;
|
||||
border-radius: var(--radius-full);
|
||||
padding: 7px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.binding-collapsed-preview {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.binding-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mapping-editor {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.mapping-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.mapping-panel--external {
|
||||
background: rgba(239, 246, 255, 0.72);
|
||||
}
|
||||
|
||||
.mapping-panel--internal {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
border-color: rgba(15, 93, 216, 0.16);
|
||||
}
|
||||
|
||||
.mapping-panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.mapping-panel-head strong {
|
||||
color: #1d3555;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mapping-panel-head span {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.mapping-grid,
|
||||
.mapping-extra {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 12px;
|
||||
}
|
||||
|
||||
.mapping-arrow {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #175cd3;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mapping-arrow span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
min-width: 54px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 93, 216, 0.08);
|
||||
border: 1px solid rgba(15, 93, 216, 0.14);
|
||||
}
|
||||
|
||||
.mapping-extra {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed rgba(86, 108, 138, 0.18);
|
||||
}
|
||||
|
||||
.checkbox-line {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1d3555;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-actions {
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-button) {
|
||||
min-height: 34px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-button--primary) {
|
||||
--el-button-bg-color: #3a91f7;
|
||||
--el-button-border-color: #3a91f7;
|
||||
--el-button-hover-bg-color: #0f5dd8;
|
||||
--el-button-hover-border-color: #0f5dd8;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.overview-stats,
|
||||
.lookup-toolbar,
|
||||
.binding-grid,
|
||||
.mapping-editor {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mapping-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.panel-header,
|
||||
.section-title-row,
|
||||
.section-header-tools,
|
||||
.binding-actions,
|
||||
.binding-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.overview-stats,
|
||||
.lookup-toolbar,
|
||||
.binding-grid,
|
||||
.mapping-editor,
|
||||
.mapping-grid,
|
||||
.mapping-extra {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@ onMounted(loadMessageDeliveries)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="deliveries-page">
|
||||
<div class="deliveries-page list-page">
|
||||
<AdminPageHeader title="消息发送记录" description="查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条记录</span>
|
||||
@@ -125,15 +125,15 @@ onMounted(loadMessageDeliveries)
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="orders-toolbar">
|
||||
<div class="orders-toolbar table-toolbar">
|
||||
<strong>发送明细</strong>
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="items" stripe size="small" class="orders-table">
|
||||
<el-table :data="items" stripe size="small" class="orders-table data-table">
|
||||
<el-table-column label="消息ID" width="100">
|
||||
<template #default="{ row }">
|
||||
<span class="order-no">#{{ row.deliveryId }}</span>
|
||||
<span class="order-no id-link">#{{ row.deliveryId }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接收者" min-width="160">
|
||||
@@ -195,150 +195,9 @@ onMounted(loadMessageDeliveries)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.deliveries-page { display: grid; gap: 0; }
|
||||
|
||||
.total-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(37, 89, 167, 0.14);
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
color: #2559a7;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-card { margin-top: var(--space-4); }
|
||||
|
||||
.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
|
||||
.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
|
||||
.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
|
||||
@import '../../styles/admin-list-pages.css';
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-control { width: 100%; min-width: 0; }
|
||||
.filter-buttons { display: flex; gap: 10px; min-width: 156px; justify-content: flex-end; }
|
||||
|
||||
.summary-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 38px;
|
||||
padding: 0;
|
||||
margin-top: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-title { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; margin-right: 2px; }
|
||||
.summary-metric {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
background: #f8fafc;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.summary-metric strong { color: var(--text-primary); font-size: var(--text-base); line-height: 1; }
|
||||
.summary-metric[data-tone='success'] { color: var(--color-success-dark); background: var(--color-success-light); border-color: #bbf7d0; }
|
||||
.summary-metric[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
|
||||
.summary-metric[data-tone='warning'] { color: var(--color-warning-dark); background: var(--color-warning-light); border-color: #fed7aa; }
|
||||
|
||||
.orders-toolbar { margin-bottom: var(--space-3); }
|
||||
.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.orders-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.orders-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-border-color: rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
.orders-table :deep(.el-table__inner-wrapper::before) { display: none; }
|
||||
.orders-table :deep(th.el-table__cell) {
|
||||
height: 42px;
|
||||
background: var(--el-table-header-bg-color);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell-stack { display: grid; gap: 5px; }
|
||||
|
||||
.order-no {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
max-width: 240px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
|
||||
.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
|
||||
|
||||
.action-stack { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||||
|
||||
.detail-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--color-primary-dark);
|
||||
background: var(--color-primary-light);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.order-no { font-size: var(--text-base); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -103,7 +103,7 @@ onMounted(loadOrders)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="orders-page">
|
||||
<div class="orders-page list-page">
|
||||
<AdminPageHeader title="订单列表" description="查看平台订单、支付状态、商品摘要和对应任务推进情况。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条订单</span>
|
||||
@@ -155,16 +155,16 @@ onMounted(loadOrders)
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="orders-toolbar">
|
||||
<div class="orders-toolbar table-toolbar">
|
||||
<strong>订单明细</strong>
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="items" stripe size="small" class="orders-table">
|
||||
<el-table :data="items" stripe size="small" class="orders-table data-table">
|
||||
<el-table-column label="订单信息" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<RouterLink :to="`/admin/orders/${row.orderId}`" class="order-no" :title="row.platformOrderId">
|
||||
<RouterLink :to="`/admin/orders/${row.orderId}`" class="order-no id-link" :title="row.platformOrderId">
|
||||
{{ row.platformOrderId }}
|
||||
</RouterLink>
|
||||
<div class="cell-meta-row">
|
||||
@@ -244,130 +244,14 @@ onMounted(loadOrders)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.orders-page { display: grid; gap: 0; }
|
||||
|
||||
.total-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(37, 89, 167, 0.14);
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
color: #2559a7;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-card { margin-top: var(--space-4); }
|
||||
|
||||
.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
|
||||
.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
|
||||
.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
|
||||
@import '../../styles/admin-list-pages.css';
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 1fr) minmax(130px, 0.6fr) minmax(180px, 0.9fr) minmax(320px, 1.4fr) minmax(150px, 0.55fr);
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-control { width: 100%; min-width: 0; }
|
||||
.filter-buttons { display: flex; gap: 10px; min-width: 156px; justify-content: flex-end; }
|
||||
|
||||
.summary-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 38px;
|
||||
padding: 0;
|
||||
margin-top: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-title { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; margin-right: 2px; }
|
||||
.summary-metric {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
background: #f8fafc;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.summary-metric strong { color: var(--text-primary); font-size: var(--text-base); line-height: 1; }
|
||||
.summary-metric[data-tone='success'] { color: var(--color-success-dark); background: var(--color-success-light); border-color: #bbf7d0; }
|
||||
.summary-metric[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
|
||||
.summary-metric[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #bfdbfe; }
|
||||
.summary-metric[data-tone='warning'] { color: var(--color-warning-dark); background: var(--color-warning-light); border-color: #fed7aa; }
|
||||
.summary-metric[data-tone='muted'] { color: var(--text-secondary); background: #f8fafc; border-color: var(--border-default); }
|
||||
|
||||
.orders-toolbar { margin-bottom: var(--space-3); }
|
||||
.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.orders-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.orders-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-border-color: rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
.orders-table :deep(.el-table__inner-wrapper::before) { display: none; }
|
||||
.orders-table :deep(th.el-table__cell) {
|
||||
height: 42px;
|
||||
background: var(--el-table-header-bg-color);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell-stack { display: grid; gap: 5px; }
|
||||
|
||||
.order-no {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.order-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
max-width: 240px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
|
||||
.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
|
||||
.amount-text { white-space: nowrap; }
|
||||
|
||||
.status-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
.status-stack :deep(.el-tag) { max-width: 100%; }
|
||||
|
||||
.progress-row-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -394,32 +278,7 @@ onMounted(loadOrders)
|
||||
.follow-up-chip[data-tone='warning'] { color: #b54708; background: var(--color-warning-light); border-color: #fedf89; }
|
||||
.follow-up-chip[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
|
||||
|
||||
.detail-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--color-primary-dark);
|
||||
background: var(--color-primary-light);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.order-no { font-size: var(--text-base); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,7 +22,7 @@ import {
|
||||
} from '@/services/admin'
|
||||
import type { AdminTaskActionResponse, AdminTaskDetail } from '@/types/admin'
|
||||
import { hasAdminRole } from '@/utils/admin-auth'
|
||||
import { formatTaskEventType } from '@/utils/admin-display'
|
||||
import { formatAutoDeliveryReason, formatAutoDeliveryTrigger, formatKuaishouRoleInfoLabel, formatRedeemOutcomeLabel, formatRedeemResolutionStatus, formatTaskEventPayload, formatTaskEventType } from '@/utils/admin-display'
|
||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||
|
||||
const route = useRoute()
|
||||
@@ -335,120 +335,6 @@ function openExternalLink(value: string) {
|
||||
window.open(text, '_blank', 'noopener,noreferrer')
|
||||
}
|
||||
|
||||
function formatTaskEventPayload(payload: Record<string, unknown>) {
|
||||
const parts = [
|
||||
payload.outcome ? `结果 ${payload.outcome}` : '',
|
||||
payload.resultCode ? `代码 ${payload.resultCode}` : '',
|
||||
payload.resultMessage ? `说明 ${payload.resultMessage}` : '',
|
||||
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}` : '',
|
||||
payload.bindUrl ? `绑定链接 ${payload.bindUrl}` : '',
|
||||
payload.sendType ? `发送类型 ${payload.sendType}` : '',
|
||||
payload.note ? `备注 ${payload.note}` : '',
|
||||
payload.previousOutcome ? `切换原因 ${formatRedeemOutcomeLabel(String(payload.previousOutcome || ''))}` : '',
|
||||
payload.deliveryReference ? `单号 ${payload.deliveryReference}` : '',
|
||||
payload.platformOrderId ? `平台单 ${payload.platformOrderId}` : '',
|
||||
payload.trigger ? `触发 ${formatAutoDeliveryTrigger(String(payload.trigger || ''))}` : '',
|
||||
payload.reason ? `原因 ${payload.reason}` : '',
|
||||
payload.purchaseTriggered === true ? '已触发购买' : '',
|
||||
payload.usedKnapsack === true ? '使用背包库存' : '',
|
||||
payload.responseStatus ? `HTTP ${payload.responseStatus}` : '',
|
||||
payload.requestId ? `请求 ${payload.requestId}` : '',
|
||||
payload.errorMessage ? `错误 ${payload.errorMessage}` : '',
|
||||
].filter(Boolean)
|
||||
|
||||
if (parts.length > 0) {
|
||||
return parts.join(' · ')
|
||||
}
|
||||
|
||||
return JSON.stringify(payload || {})
|
||||
}
|
||||
|
||||
function formatRedeemOutcomeLabel(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
switch (normalized) {
|
||||
case 'success':
|
||||
return '兑换成功'
|
||||
case 'code_used':
|
||||
return '兑换码已使用'
|
||||
case 'code_invalid':
|
||||
return '兑换码错误'
|
||||
case 'captcha_rejected':
|
||||
return '验证码错误'
|
||||
case 'failed':
|
||||
return '兑换失败'
|
||||
default:
|
||||
return normalized || '-'
|
||||
}
|
||||
}
|
||||
|
||||
function formatRedeemResolutionStatus(value: string) {
|
||||
return value === 'success' ? '已完成' : value === 'failed' ? '失败收口' : (value || '-')
|
||||
}
|
||||
|
||||
function formatAutoDeliveryTrigger(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
switch (normalized) {
|
||||
case 'claim_redeemed':
|
||||
return '用户兑换完成后触发'
|
||||
case 'manual_dispatch_completed':
|
||||
return '人工履约完成后触发'
|
||||
case 'task_delivered':
|
||||
return '任务交付完成后触发'
|
||||
default:
|
||||
return normalized || '-'
|
||||
}
|
||||
}
|
||||
|
||||
function formatAutoDeliveryReason(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
switch (normalized) {
|
||||
case 'waiting_other_tasks':
|
||||
return '订单下仍有任务未完成交付'
|
||||
case 'already_sent':
|
||||
return '该订单已经执行过自动发货'
|
||||
case 'auto_delivery_disabled':
|
||||
return '自动发货开关已关闭'
|
||||
case 'missing_config':
|
||||
return '缺少 Agiso 自动发货配置'
|
||||
case 'request_failed':
|
||||
return 'Agiso 接口返回失败'
|
||||
case 'request_error':
|
||||
return '请求 Agiso 接口时发生异常'
|
||||
case 'delivery_not_confirmed':
|
||||
return '接口返回成功，但订单状态未确认进入已发货'
|
||||
case 'task_not_delivered':
|
||||
return '当前任务尚未进入已交付状态'
|
||||
case 'not_supported':
|
||||
return '当前订单不支持 Agiso 咸鱼自动发货'
|
||||
default:
|
||||
return normalized || '-'
|
||||
}
|
||||
}
|
||||
|
||||
function formatKuaishouRoleInfoLabel(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
switch (normalized) {
|
||||
case 'name':
|
||||
return '角色名称'
|
||||
case 'rid':
|
||||
return '角色 ID'
|
||||
default:
|
||||
return normalized || '-'
|
||||
}
|
||||
}
|
||||
|
||||
function resolveTaskAutoDeliveryStatus(taskDetail: AdminTaskDetail) {
|
||||
if (taskDetail.task.agisoAutoDelivery?.status) {
|
||||
return taskDetail.task.agisoAutoDelivery.status
|
||||
|
||||
@@ -126,7 +126,7 @@ function resetFilters() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tasks-page">
|
||||
<div class="tasks-page list-page">
|
||||
<AdminPageHeader title="交付任务" description="更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条任务</span>
|
||||
@@ -166,16 +166,16 @@ function resetFilters() {
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="tasks-toolbar">
|
||||
<div class="tasks-toolbar table-toolbar">
|
||||
<strong>任务列表</strong>
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="items" stripe size="small" class="tasks-table">
|
||||
<el-table :data="items" stripe size="small" class="tasks-table data-table">
|
||||
<el-table-column label="任务 / 商品" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<RouterLink :to="`/admin/tasks/${row.taskId}`" class="task-no" :title="row.taskNo">
|
||||
<RouterLink :to="`/admin/tasks/${row.taskId}`" class="task-no id-link" :title="row.taskNo">
|
||||
{{ row.taskNo }}
|
||||
</RouterLink>
|
||||
<div class="cell-meta-row">
|
||||
@@ -287,96 +287,13 @@ function resetFilters() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tasks-page { display: grid; gap: 0; }
|
||||
|
||||
.total-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(37, 89, 167, 0.14);
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
color: #2559a7;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-card { margin-top: var(--space-4); }
|
||||
|
||||
.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
|
||||
.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
|
||||
.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
|
||||
@import '../../styles/admin-list-pages.css';
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(210px, 0.95fr);
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
.filter-grid :deep(.el-date-editor) { width: 100%; }
|
||||
|
||||
.filter-buttons { display: flex; gap: 10px; justify-content: flex-end; min-width: 156px; }
|
||||
|
||||
.tasks-toolbar { margin-bottom: var(--space-3); }
|
||||
.tasks-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.tasks-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.tasks-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-border-color: rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
.tasks-table :deep(.el-table__inner-wrapper::before) { display: none; }
|
||||
.tasks-table :deep(th.el-table__cell) {
|
||||
height: 42px;
|
||||
background: var(--el-table-header-bg-color);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell-stack { display: grid; gap: 5px; }
|
||||
|
||||
.task-no {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.task-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
max-width: 100%;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
|
||||
.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
|
||||
.cell-subline--strong { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
.progress-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
|
||||
.progress-row :deep(.el-tag) { min-width: 0; max-width: calc(100% - 42px); }
|
||||
.progress-row :deep(.el-tag__content) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
@@ -399,20 +316,8 @@ function resetFilters() {
|
||||
|
||||
.cell-error { display: block; min-width: 0; line-height: 1.55; color: #475467; word-break: break-word; font-size: var(--text-xs); }
|
||||
|
||||
.cell-subline--strong { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
.action-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
.action-stack :deep(.el-button) { flex: 0 0 auto; margin-left: 0; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.task-no { font-size: var(--text-base); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -109,7 +109,7 @@ onMounted(loadUsers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="users-page">
|
||||
<div class="users-page list-page">
|
||||
<AdminPageHeader title="后台用户" description="管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。" />
|
||||
|
||||
<el-result v-if="!hasAdminRole('admin')" icon="warning" title="仅管理员可以访问用户管理。" />
|
||||
@@ -141,11 +141,11 @@ onMounted(loadUsers)
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<div class="users-table-toolbar">
|
||||
<div class="users-table-toolbar table-toolbar">
|
||||
<strong>用户列表</strong>
|
||||
<span>共 {{ pagination.total }} 个账号</span>
|
||||
</div>
|
||||
<el-table :data="items" stripe size="small" v-loading="loading" element-loading-text="用户列表加载中" class="users-table" style="width: 100%">
|
||||
<el-table :data="items" stripe size="small" v-loading="loading" element-loading-text="用户列表加载中" class="users-table data-table" style="width: 100%">
|
||||
<el-table-column prop="userId" label="ID" width="52" align="center" />
|
||||
<el-table-column prop="username" label="账号" width="112" show-overflow-tooltip />
|
||||
<el-table-column label="角色" width="82">
|
||||
@@ -206,7 +206,8 @@ onMounted(loadUsers)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.users-page { display: grid; gap: 0; }
|
||||
@import '../../styles/admin-list-pages.css';
|
||||
|
||||
.users-tools {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
@@ -228,7 +229,6 @@ onMounted(loadUsers)
|
||||
.filter-control--role,
|
||||
.filter-control--status { width: 128px; }
|
||||
.filter-control--password { width: 210px; }
|
||||
.section-card { margin-top: var(--space-4); }
|
||||
.users-table-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -246,23 +246,7 @@ onMounted(loadUsers)
|
||||
font-weight: 700;
|
||||
}
|
||||
.users-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.36);
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-border-color: rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
.users-table :deep(.el-table__inner-wrapper::before) { display: none; }
|
||||
.users-table :deep(th.el-table__cell) {
|
||||
height: 42px;
|
||||
background: var(--el-table-header-bg-color);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
.users-table :deep(td.el-table__cell) {
|
||||
height: 44px;
|
||||
|
||||
@@ -98,7 +98,7 @@ onMounted(loadEvents)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="webhooks-page">
|
||||
<div class="webhooks-page list-page">
|
||||
<AdminPageHeader title="Webhook 日志" description="查看平台推送处理情况、验签结果、请求来源和错误信息。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条事件</span>
|
||||
@@ -150,15 +150,15 @@ onMounted(loadEvents)
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="orders-toolbar">
|
||||
<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">
|
||||
<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">
|
||||
<RouterLink :to="`/admin/webhook-events/${row.eventId}`" class="order-no id-link">
|
||||
#{{ row.eventId }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
@@ -233,160 +233,16 @@ onMounted(loadEvents)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.webhooks-page { display: grid; gap: 0; }
|
||||
|
||||
.total-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(37, 89, 167, 0.14);
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
color: #2559a7;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-card { margin-top: var(--space-4); }
|
||||
|
||||
.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
|
||||
.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
|
||||
.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
|
||||
@import '../../styles/admin-list-pages.css';
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-control { width: 100%; min-width: 0; }
|
||||
.filter-buttons { display: flex; gap: 10px; min-width: 156px; justify-content: flex-end; }
|
||||
|
||||
.summary-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 38px;
|
||||
padding: 0;
|
||||
margin-top: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-title { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; margin-right: 2px; }
|
||||
.summary-metric {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
background: #f8fafc;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.summary-metric strong { color: var(--text-primary); font-size: var(--text-base); line-height: 1; }
|
||||
.summary-metric[data-tone='success'] { color: var(--color-success-dark); background: var(--color-success-light); border-color: #bbf7d0; }
|
||||
.summary-metric[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
|
||||
.summary-metric[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #bfdbfe; }
|
||||
|
||||
.orders-toolbar { margin-bottom: var(--space-3); }
|
||||
.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.orders-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.orders-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
|
||||
--el-table-border-color: rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
.orders-table :deep(.el-table__inner-wrapper::before) { display: none; }
|
||||
.orders-table :deep(th.el-table__cell) {
|
||||
height: 42px;
|
||||
background: var(--el-table-header-bg-color);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell-stack { display: grid; gap: 5px; }
|
||||
|
||||
.order-no {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.order-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
max-width: 240px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
|
||||
.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
|
||||
|
||||
.status-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
.status-stack :deep(.el-tag) { max-width: 100%; }
|
||||
|
||||
.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 { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
|
||||
.detail-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--color-primary-dark);
|
||||
background: var(--color-primary-light);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.order-no { font-size: var(--text-base); }
|
||||
}
|
||||
.action-stack { flex-direction: column; align-items: center; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user