再次优化css等
This commit is contained in:
yml2213
@@ -0,0 +1,282 @@
|
||||
/* ============================================================
|
||||
管理员配置页面共享结构样式
|
||||
引入: AdminFulfillmentBindings.css, AdminKuaishouCloudFulfillment.css
|
||||
各页面自行覆盖颜色、圆角、主题属性
|
||||
============================================================ */
|
||||
|
||||
/* ---------- 面板头部 & 分区标题 ---------- */
|
||||
.panel-header,
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.panel-header-copy {
|
||||
min-width: 280px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.panel-header h1,
|
||||
.panel-header-copy h1,
|
||||
.section-title-row h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panel-header p,
|
||||
.panel-header-copy p,
|
||||
.section-title-row p {
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
/* ---------- 头部工具 ---------- */
|
||||
.header-tags,
|
||||
.header-actions,
|
||||
.section-header-tools,
|
||||
.section-mini-stats,
|
||||
.section-action-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-actions,
|
||||
.section-header-tools {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* ---------- 卡片容器 ---------- */
|
||||
.overview-card,
|
||||
.table-card,
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
|
||||
.table-card--dense {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ---------- 概览文件 & 统计 ---------- */
|
||||
.overview-file {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.overview-file code {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 8px 12px;
|
||||
border-radius: 14px;
|
||||
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;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.overview-notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ---------- 分区工具 ---------- */
|
||||
.section-title-row--tight {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---------- 字段块 ---------- */
|
||||
.field-block {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-block span {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-block--action {
|
||||
align-content: end;
|
||||
}
|
||||
|
||||
.field-block--action :deep(.el-button) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field-help {
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ---------- 文本输入 ---------- */
|
||||
.text-input {
|
||||
width: 100%;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
/* ---------- 校验 & 错误 ---------- */
|
||||
.validation-banner,
|
||||
.binding-inline-error {
|
||||
margin: 10px 0 0;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.binding-inline-error {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* ---------- 数据表 ---------- */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell-stack {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cell-subtle {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* ---------- 绑定卡片 ---------- */
|
||||
.binding-card {
|
||||
margin-top: 12px;
|
||||
padding: 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.binding-subtle {
|
||||
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);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 7px 12px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.binding-collapsed-preview {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* ---------- 操作栏 ---------- */
|
||||
.binding-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---------- 复选框 ---------- */
|
||||
.checkbox-line {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---------- 工具栏提示 ---------- */
|
||||
.toolbar-hint {
|
||||
margin: 10px 0 0;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
@@ -1,45 +1,28 @@
|
||||
@import '../../styles/admin-config-pages.css';
|
||||
|
||||
/* ============================================================
|
||||
AdminFulfillmentBindings — 绿色主题覆盖 & 页面特有样式
|
||||
============================================================ */
|
||||
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.panel-header,
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* ---------- 主题：标题文字 ---------- */
|
||||
.panel-header h1,
|
||||
.panel-header-copy h1,
|
||||
.section-title-row h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.panel-header p,
|
||||
.panel-header-copy p,
|
||||
.section-title-row p {
|
||||
margin: 6px 0 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.panel-header-copy {
|
||||
min-width: 280px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---------- 主题：标签 chip (绿色) ---------- */
|
||||
.header-tag,
|
||||
.section-note-chip,
|
||||
.mini-stat-chip,
|
||||
@@ -58,79 +41,7 @@
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.overview-card,
|
||||
.table-card,
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
|
||||
.table-card--dense {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.overview-file {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.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: var(--text-primary);
|
||||
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: var(--radius-lg);
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
color: var(--text-primary);
|
||||
font-size: 22px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.overview-notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ---------- 主题：概览标签 ---------- */
|
||||
.overview-note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -143,25 +54,39 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-title-row--tight {
|
||||
align-items: center;
|
||||
/* ---------- 主题覆写：header-actions 间距 ---------- */
|
||||
.header-actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-header-tools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
/* ---------- 主题覆写：卡片圆角 ---------- */
|
||||
.overview-card,
|
||||
.table-card,
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.section-mini-stats,
|
||||
.section-action-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
.overview-file code {
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：概览统计 ---------- */
|
||||
.overview-stat {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
color: var(--text-primary);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* ---------- 查询工具栏 (本页特有) ---------- */
|
||||
.lookup-toolbar,
|
||||
.lookup-summary {
|
||||
display: grid;
|
||||
@@ -173,16 +98,6 @@
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.field-block--action :deep(.el-button) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar-hint {
|
||||
margin: 10px 0 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.lookup-summary {
|
||||
margin-top: 14px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -201,120 +116,23 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.binding-card {
|
||||
margin-top: 12px;
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.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: var(--text-primary);
|
||||
}
|
||||
|
||||
.binding-subtle {
|
||||
color: var(--text-secondary);
|
||||
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: var(--text-primary);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 7px 12px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.binding-collapsed-preview {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 12px;
|
||||
}
|
||||
|
||||
.validation-banner {
|
||||
margin: 12px 0 0;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: #fff4f2;
|
||||
border: 1px solid rgba(244, 63, 94, 0.18);
|
||||
color: var(--color-danger);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.field-block {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：字段块 ---------- */
|
||||
.field-block span {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-help {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：文本输入 ---------- */
|
||||
.text-input {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
padding: 0 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
@@ -335,56 +153,15 @@
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
}
|
||||
|
||||
.binding-inline-error {
|
||||
margin: 10px 0 0;
|
||||
/* ---------- 主题覆写：校验/错误/空状态 ---------- */
|
||||
.validation-banner {
|
||||
background: #fff4f2;
|
||||
border: 1px solid rgba(244, 63, 94, 0.18);
|
||||
color: var(--color-danger);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.binding-actions {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox-line {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 12px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
||||
color: var(--text-primary);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.cell-stack {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cell-subtle {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
.binding-inline-error {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
@@ -392,10 +169,62 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: var(--color-danger);
|
||||
/* ---------- 主题覆写：表格 ---------- */
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 12px 10px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.cell-subtle {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：绑定卡片 ---------- */
|
||||
.binding-card {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.binding-title-row {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.binding-subtle {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.binding-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 12px;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：折叠/操作/复选框 ---------- */
|
||||
.binding-collapsed-preview {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.checkbox-line {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.toolbar-hint {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ==============================================
|
||||
响应式
|
||||
============================================== */
|
||||
@media (max-width: 900px) {
|
||||
.panel-header,
|
||||
.section-title-row,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '../../styles/admin-config-pages.css';
|
||||
|
||||
.admin-panel {
|
||||
--panel-ink: var(--text-primary);
|
||||
--panel-muted: var(--text-secondary);
|
||||
@@ -651,8 +653,336 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
从 admin-config-pages.css 继承的共享结构样式，本页仅覆盖主题
|
||||
============================================================ */
|
||||
|
||||
.panel-header,
|
||||
/* ---------- 主题覆写：标题颜色 ---------- */
|
||||
.panel-header h1,
|
||||
.panel-header-copy h1,
|
||||
.section-title-row h3 {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.panel-header p,
|
||||
.panel-header-copy p,
|
||||
.section-title-row p {
|
||||
color: #64748b;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：chip 标签 (蓝色) ---------- */
|
||||
.header-tag,
|
||||
.mini-stat-chip,
|
||||
.overview-note {
|
||||
color: #175cd3;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：卡片圆角 ---------- */
|
||||
.overview-card,
|
||||
.table-card,
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
border-radius: 20px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.overview-file code {
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：概览统计 ---------- */
|
||||
.overview-stat {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
color: #1d3555;
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
/* ---------- 查询工具栏 (本页特有) ---------- */
|
||||
.lookup-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 1fr) 110px 130px 180px;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
/* ---------- 字段块 ---------- */
|
||||
.field-block span {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.field-help,
|
||||
.toolbar-hint,
|
||||
.cell-subtle {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* ---------- 文本输入 (蓝色聚焦环) ---------- */
|
||||
.text-input {
|
||||
min-height: 36px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(86, 108, 138, 0.22);
|
||||
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;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：校验/错误 ---------- */
|
||||
.validation-banner,
|
||||
.binding-inline-error {
|
||||
background: #fff5f4;
|
||||
border: 1px solid rgba(180, 35, 24, 0.14);
|
||||
color: #b42318;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：表格 ---------- */
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 11px 10px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.cell-stack strong {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：绑定卡片 ---------- */
|
||||
.binding-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.binding-title-row {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.binding-subtle {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.binding-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
color: #1d3555;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.binding-collapsed-preview {
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.checkbox-line {
|
||||
color: #1d3555;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-actions {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.toolbar-hint {
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.empty-inline {
|
||||
padding: 14px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---------- 映射编辑 (本页特有) ---------- */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ---------- mini-stat-chip 交互态 (本页特有) ---------- */
|
||||
.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-label {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* ---------- Element Plus 蓝色主题覆盖 ---------- */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -71,15 +71,6 @@ function resetFilters() {
|
||||
void loadMessageDeliveries(1)
|
||||
}
|
||||
|
||||
function formatResponse(item: AdminMessageDeliveryListItem) {
|
||||
if (item.responseStatus <= 0 && !item.errorMessage) return '-'
|
||||
const parts = []
|
||||
if (item.responseStatus > 0) parts.push(`HTTP ${item.responseStatus}`)
|
||||
const msg = String(item.response?.Error_Msg || item.response?.msg || item.response?.message || item.response?.error || '').trim()
|
||||
if (msg) parts.push(msg)
|
||||
return parts.join(' · ') || item.errorMessage || '-'
|
||||
}
|
||||
|
||||
onMounted(loadMessageDeliveries)
|
||||
</script>
|
||||
|
||||
@@ -92,21 +83,24 @@ onMounted(loadMessageDeliveries)
|
||||
</AdminPageHeader>
|
||||
|
||||
<!-- 筛选 -->
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<el-card shadow="never" class="section-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">筛选消息</span>
|
||||
<span class="card-desc">按服务商、平台、发送状态、店铺等条件筛选。</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="filter-grid">
|
||||
<el-input v-model="provider" placeholder="服务商，如 agiso" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="platform" placeholder="业务平台，如 xianyu" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-select v-model="status" placeholder="发送状态" clearable>
|
||||
<el-input v-model="provider" class="filter-control" placeholder="服务商，如 agiso" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="platform" class="filter-control" placeholder="业务平台，如 xianyu" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-select v-model="status" class="filter-control" placeholder="发送状态" clearable>
|
||||
<el-option v-for="opt in adminMessageDeliveryStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-input v-model="shopId" placeholder="店铺 ID（精确匹配）" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="taskNo" placeholder="任务编号" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<span class="filter-hint">消息体、Claim 链接、接口回执和失败原因都已经拆分展示，查问题会更直观。</span>
|
||||
<el-input v-model="shopId" class="filter-control" placeholder="店铺 ID（精确匹配）" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="taskNo" class="filter-control" placeholder="任务编号" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-date-picker v-model="dateFrom" class="filter-control" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-model="dateTo" class="filter-control" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
<div class="filter-buttons">
|
||||
<el-button round @click="resetFilters">重置</el-button>
|
||||
<el-button round type="primary" @click="loadMessageDeliveries(1)">查询</el-button>
|
||||
@@ -115,102 +109,76 @@ onMounted(loadMessageDeliveries)
|
||||
</el-card>
|
||||
|
||||
<!-- 摘要 -->
|
||||
<div v-if="!loading && items.length > 0" class="summary-grid">
|
||||
<el-card shadow="never" class="summary-card summary-card--success">
|
||||
<span class="summary-label">当前页成功</span>
|
||||
<strong class="summary-value">{{ summary.successCount }}</strong>
|
||||
<span class="summary-meta">消息已被平台受理或发送完成</span>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="summary-card summary-card--danger">
|
||||
<span class="summary-label">当前页失败</span>
|
||||
<strong class="summary-value">{{ summary.failedCount }}</strong>
|
||||
<span class="summary-meta">优先查看失败原因和接口返回</span>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="summary-card summary-card--warning">
|
||||
<span class="summary-label">当前页等待</span>
|
||||
<strong class="summary-value">{{ summary.pendingCount }}</strong>
|
||||
<span class="summary-meta">等待发送或等待外部回调更新</span>
|
||||
</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.successCount }}</strong></span>
|
||||
<span class="summary-metric" data-tone="danger">发送失败 <strong>{{ summary.failedCount }}</strong></span>
|
||||
<span class="summary-metric" data-tone="warning">等待中 <strong>{{ summary.pendingCount }}</strong></span>
|
||||
</div>
|
||||
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="消息发送记录加载中">
|
||||
<el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="消息发送记录加载中">
|
||||
<template v-if="items.length === 0 && !loading">
|
||||
<el-empty description="当前筛选下还没有消息发送记录。" :image-size="60" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="records-toolbar">
|
||||
<div class="orders-toolbar">
|
||||
<strong>发送明细</strong>
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
|
||||
<div class="record-list">
|
||||
<article v-for="item in items" :key="item.deliveryId" class="record-card">
|
||||
<div class="record-top">
|
||||
<div class="record-identity">
|
||||
<span class="record-id">#{{ item.deliveryId }}</span>
|
||||
<div class="record-source-line">
|
||||
<span class="source-pill">{{ item.provider || '-' }}</span>
|
||||
<span class="source-separator">/</span>
|
||||
<span class="source-pill">{{ item.platform || '-' }}</span>
|
||||
<span class="source-chip">{{ item.shopName || item.shopId || '-' }}</span>
|
||||
<span class="source-chip source-chip--muted">{{ item.channel || '-' }}</span>
|
||||
<el-table :data="items" stripe size="small" class="orders-table">
|
||||
<el-table-column label="消息ID" width="100">
|
||||
<template #default="{ row }">
|
||||
<span class="order-no">#{{ row.deliveryId }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接收者" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-title">{{ row.recipientKey || row.shopName || row.shopId || '-' }}</span>
|
||||
<span class="cell-subline">{{ row.shopName || row.shopId || '-' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="消息类型" min-width="140">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-title">{{ row.channel || '-' }}</span>
|
||||
<div class="cell-meta-row">
|
||||
<span class="compact-chip">{{ row.provider || '-' }}</span>
|
||||
<span class="compact-chip">{{ row.platform || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<AdminStatusTag :status="item.status" />
|
||||
</div>
|
||||
|
||||
<div class="record-grid">
|
||||
<section class="record-section">
|
||||
<span class="section-label">订单 / 任务</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ item.platformOrderId || '-' }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span v-if="item.orderId" class="meta-chip">
|
||||
订单
|
||||
<RouterLink class="inline-link" :to="`/admin/orders/${item.orderId}`">{{ item.orderId }}</RouterLink>
|
||||
</span>
|
||||
<span v-if="item.taskId" class="meta-chip">
|
||||
任务
|
||||
<RouterLink class="inline-link" :to="`/admin/tasks/${item.taskId}`">{{ item.taskNo || item.taskId }}</RouterLink>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="item.taskStatus" class="tag-row">
|
||||
<AdminStatusTag :status="item.taskStatus" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="record-section record-section-message">
|
||||
<span class="section-label">消息内容</span>
|
||||
<div class="message-cell" :title="item.messageContent">{{ item.messageContent || '-' }}</div>
|
||||
<a v-if="item.claimUrl" class="claim-link" :href="item.claimUrl" target="_blank" rel="noreferrer">打开 Claim 链接</a>
|
||||
</section>
|
||||
|
||||
<section class="record-section">
|
||||
<span class="section-label">接口结果</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatResponse(item) }}</div>
|
||||
<div class="cell-subtle">HTTP {{ item.responseStatus || 0 }}</div>
|
||||
<div v-if="item.requestUrl" class="cell-subtle cell-subtle-break">{{ item.requestUrl }}</div>
|
||||
<div v-if="item.errorMessage" class="error-inline">{{ item.errorMessage }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="record-section">
|
||||
<span class="section-label">时间</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">创建 {{ formatAdminDateTime(item.createdAt) }}</div>
|
||||
<div class="cell-subtle">发送 {{ formatAdminDateTime(item.sentAt) }}</div>
|
||||
<div class="cell-subtle">更新 {{ formatAdminDateTime(item.updatedAt) }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<AdminStatusTag :status="row.status" />
|
||||
</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 v-if="row.sentAt" class="cell-subline">发送 {{ formatAdminDateTime(row.sentAt) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="140">
|
||||
<template #default="{ row }">
|
||||
<div class="action-stack">
|
||||
<a v-if="row.claimUrl" class="detail-link" :href="row.claimUrl" target="_blank" rel="noreferrer">Claim 链接</a>
|
||||
<RouterLink v-if="row.orderId" class="detail-link" :to="`/admin/orders/${row.orderId}`">订单 #{{ row.orderId }}</RouterLink>
|
||||
<RouterLink v-if="row.taskId" class="detail-link" :to="`/admin/tasks/${row.taskId}`">任务 {{ row.taskNo || row.taskId }}</RouterLink>
|
||||
<span v-if="!row.claimUrl && !row.orderId && !row.taskId" class="cell-subline">-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
@@ -230,187 +198,147 @@ onMounted(loadMessageDeliveries)
|
||||
.deliveries-page { display: grid; gap: 0; }
|
||||
|
||||
.total-badge {
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
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;
|
||||
}
|
||||
|
||||
.filter-card { margin-top: var(--space-4); }
|
||||
.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;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
.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;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.summary-card { position: relative; overflow: hidden; }
|
||||
.summary-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto -26px -26px auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: var(--radius-full);
|
||||
opacity: 0.14;
|
||||
}
|
||||
.summary-card--success::after { background: var(--color-success); }
|
||||
.summary-card--danger::after { background: var(--color-danger); }
|
||||
.summary-card--warning::after { background: var(--color-warning); }
|
||||
|
||||
.summary-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
|
||||
.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
|
||||
.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
|
||||
|
||||
.table-card { margin-top: var(--space-4); overflow: visible; }
|
||||
|
||||
.records-toolbar { margin-bottom: var(--space-3); }
|
||||
.records-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.records-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.record-list { display: grid; gap: var(--space-3); }
|
||||
|
||||
.record-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.record-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
|
||||
.record-identity { display: grid; gap: var(--space-2); min-width: 0; }
|
||||
|
||||
.record-id {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
min-height: 24px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary-dark);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.record-source-line { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
|
||||
.source-pill, .source-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
.source-pill { background: #f1f6ff; color: var(--color-primary-dark); }
|
||||
.source-chip { background: #f4f7fb; color: var(--text-secondary); }
|
||||
.source-chip--muted { color: var(--text-muted); }
|
||||
.source-separator { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
|
||||
|
||||
.record-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.record-section {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
padding: var(--space-3);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
.record-section-message { grid-column: span 2; }
|
||||
|
||||
.section-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
|
||||
.cell-stack { display: grid; gap: 6px; min-width: 0; }
|
||||
.cell-title { color: var(--text-primary); font-weight: 700; word-break: break-word; }
|
||||
.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.cell-subtle-break { word-break: break-all; }
|
||||
|
||||
.message-cell {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
line-height: 1.6;
|
||||
color: #334155;
|
||||
font-size: var(--text-sm);
|
||||
min-height: 72px;
|
||||
min-height: 38px;
|
||||
padding: 0;
|
||||
margin-top: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.claim-link, .inline-link { color: var(--color-primary-dark); text-decoration: none; }
|
||||
.claim-link {
|
||||
.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;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
gap: 5px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary-light);
|
||||
border: 1px solid rgba(23, 92, 211, 0.16);
|
||||
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; }
|
||||
|
||||
.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
.meta-chip {
|
||||
.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;
|
||||
gap: 4px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f5f8fc;
|
||||
color: #304866;
|
||||
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; }
|
||||
|
||||
.error-inline { color: var(--color-danger); line-height: 1.6; font-size: var(--text-xs); }
|
||||
|
||||
@media (max-width: 1200px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid,
|
||||
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.record-section-message { grid-column: span 1; }
|
||||
.filter-actions { flex-direction: column; align-items: flex-start; }
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid,
|
||||
.summary-grid { grid-template-columns: 1fr; }
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.record-top { flex-direction: column; align-items: flex-start; }
|
||||
.order-no { font-size: var(--text-base); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,10 +63,6 @@ function resolveBuyerLabel(item: AdminOrderListItem) {
|
||||
return item.buyerName || item.buyerId || '未识别'
|
||||
}
|
||||
|
||||
function resolveContactLabel(item: AdminOrderListItem) {
|
||||
return item.receiverContact || '未提供'
|
||||
}
|
||||
|
||||
function resolveShopLabel(item: AdminOrderListItem) {
|
||||
return item.shopName || item.shopId || '未识别店铺'
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { RefreshRight } from '@element-plus/icons-vue'
|
||||
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
import AdminPlatformAgisoSection from '@/components/admin/AdminPlatformAgisoSection.vue'
|
||||
import AdminPlatformCloudtentaclesSection from '@/components/admin/AdminPlatformCloudtentaclesSection.vue'
|
||||
import AdminPlatformNinetyoneSection from '@/components/admin/AdminPlatformNinetyoneSection.vue'
|
||||
@@ -202,13 +203,8 @@ onMounted(loadConfigs)
|
||||
|
||||
<template>
|
||||
<div class="platform-page">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>平台配置</h1>
|
||||
<p>按平台分别管理来源接入、凭据与店铺能力。</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<AdminPageHeader title="平台配置" description="按平台分别管理来源接入、凭据与店铺能力。">
|
||||
<template #extra>
|
||||
<el-button circle title="刷新全部配置" @click="loadConfigs">
|
||||
<template #icon><el-icon><RefreshRight /></el-icon></template>
|
||||
</el-button>
|
||||
@@ -219,8 +215,8 @@ onMounted(loadConfigs)
|
||||
>
|
||||
新增 Agiso 店铺
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<!-- 权限不足 -->
|
||||
<el-result
|
||||
@@ -416,31 +412,6 @@ onMounted(loadConfigs)
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: var(--text-3xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 概览卡片网格 */
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
@@ -488,10 +459,6 @@ onMounted(loadConfigs)
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@@ -140,7 +140,7 @@ onMounted(loadUsers)
|
||||
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<section class="users-table-section">
|
||||
<el-card shadow="never" class="section-card">
|
||||
<div class="users-table-toolbar">
|
||||
<strong>用户列表</strong>
|
||||
<span>共 {{ pagination.total }} 个账号</span>
|
||||
@@ -200,7 +200,7 @@ onMounted(loadUsers)
|
||||
style="margin-top: 16px; justify-content: center"
|
||||
@current-change="loadUsers"
|
||||
/>
|
||||
</section>
|
||||
</el-card>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -228,10 +228,7 @@ onMounted(loadUsers)
|
||||
.filter-control--role,
|
||||
.filter-control--status { width: 128px; }
|
||||
.filter-control--password { width: 210px; }
|
||||
.users-table-section {
|
||||
margin-top: var(--space-5);
|
||||
overflow: visible;
|
||||
}
|
||||
.section-card { margin-top: var(--space-4); }
|
||||
.users-table-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -90,17 +90,6 @@ function resetFilters() {
|
||||
void loadEvents(1)
|
||||
}
|
||||
|
||||
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(item: AdminWebhookEventListItem) {
|
||||
return item.totalAmount ? `${item.totalAmount} ${item.currency}` : '-'
|
||||
}
|
||||
|
||||
function formatVisibilityLabel(value: string) {
|
||||
return value === 'ignored' ? '已忽略' : '重要'
|
||||
}
|
||||
@@ -117,23 +106,26 @@ onMounted(loadEvents)
|
||||
</AdminPageHeader>
|
||||
|
||||
<!-- 筛选 -->
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<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" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-input v-model="platform" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-select v-model="processed" placeholder="处理结果" clearable>
|
||||
<el-input v-model="provider" class="filter-control" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-input v-model="platform" class="filter-control" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(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" placeholder="可见级别" clearable>
|
||||
<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" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-input v-model="relatedOrderId" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<span class="filter-hint">Webhook 事件已拆成来源、摘要、订单、验签、请求来源几个信息块，排查会更直观。</span>
|
||||
<el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-input v-model="relatedOrderId" class="filter-control" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-date-picker v-model="dateFrom" class="filter-control" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-model="dateTo" class="filter-control" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
<div class="filter-buttons">
|
||||
<el-button round @click="resetFilters">重置</el-button>
|
||||
<el-button round type="primary" @click="loadEvents(1)">查询</el-button>
|
||||
@@ -142,134 +134,89 @@ onMounted(loadEvents)
|
||||
</el-card>
|
||||
|
||||
<!-- 摘要 -->
|
||||
<div v-if="!loading && items.length > 0" class="summary-grid">
|
||||
<el-card shadow="never" class="summary-card summary-card--success">
|
||||
<span class="summary-label">当前页处理成功</span>
|
||||
<strong class="summary-value">{{ summary.processedCount }}</strong>
|
||||
<span class="summary-meta">已通过处理链路，通常无需人工介入</span>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="summary-card summary-card--danger">
|
||||
<span class="summary-label">当前页异常 / 失败</span>
|
||||
<strong class="summary-value">{{ summary.failedCount }}</strong>
|
||||
<span class="summary-meta">优先查看验签、处理错误和请求来源</span>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="summary-card summary-card--primary">
|
||||
<span class="summary-label">当前页重要事件</span>
|
||||
<strong class="summary-value">{{ summary.importantCount }}</strong>
|
||||
<span class="summary-meta">仅重要模式下更适合日常排查</span>
|
||||
</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" style="margin-top: 16px" />
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="Webhook 列表加载中">
|
||||
<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="events-toolbar">
|
||||
<div class="orders-toolbar">
|
||||
<strong>Webhook 列表</strong>
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
|
||||
<div class="event-list">
|
||||
<article v-for="item in items" :key="item.eventId" class="event-card">
|
||||
<div class="event-card-top">
|
||||
<div class="event-identity">
|
||||
<RouterLink :to="`/admin/webhook-events/${item.eventId}`" class="event-no">
|
||||
#{{ item.eventId }} · {{ formatAdminWebhookEventType(item.eventType) }}
|
||||
<el-table :data="items" stripe size="small" class="orders-table">
|
||||
<el-table-column label="事件ID" width="100">
|
||||
<template #default="{ row }">
|
||||
<RouterLink :to="`/admin/webhook-events/${row.eventId}`" class="order-no">
|
||||
#{{ 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 class="event-meta-row">
|
||||
<span class="compact-chip">{{ item.provider || '-' }}</span>
|
||||
<span class="compact-chip">{{ item.platform || '-' }}</span>
|
||||
<span v-if="item.shopName || item.shopId" class="compact-chip compact-chip--muted">{{ item.shopName || item.shopId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-top-actions">
|
||||
<span class="compact-chip compact-chip--muted">{{ formatVisibilityLabel(item.visibilityLevel) }}</span>
|
||||
<el-button v-if="canReplay" :loading="actionLoadingId === item.eventId" size="small" @click="submitReplay(item)">重放</el-button>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="event-grid">
|
||||
<section class="event-section">
|
||||
<span class="section-label">来源</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
|
||||
<div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">原始平台 {{ item.platformRaw }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
|
||||
<span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">事件摘要</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
|
||||
<div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
|
||||
<span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
|
||||
</div>
|
||||
<div class="mono-inline event-key" :title="item.eventKey">Key: {{ item.eventKey }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">订单与店铺</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">平台单 {{ item.platformOrderId || '-' }}</div>
|
||||
<div class="cell-subtle">买家 {{ item.buyerName || item.buyerId || '-' }}</div>
|
||||
<div class="cell-subtle">金额 {{ formatAmount(item) }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span class="meta-chip">
|
||||
关联订单
|
||||
<template v-if="item.relatedOrderId">
|
||||
<RouterLink class="inline-link" :to="`/admin/orders/${item.relatedOrderId}`">{{ item.relatedOrderId }}</RouterLink>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</span>
|
||||
<span class="meta-chip">任务 {{ item.taskCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">验签与处理</span>
|
||||
<div class="cell-stack">
|
||||
<div class="tag-row">
|
||||
<AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
|
||||
<AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
|
||||
</div>
|
||||
<div class="cell-subtle" :title="item.requestSign || '-'">签名 {{ item.requestSign || '-' }}</div>
|
||||
<div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">请求来源</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ item.sourceHost || '-' }}</div>
|
||||
<div class="cell-subtle">IP {{ item.sourceIp || '-' }}</div>
|
||||
<div class="cell-subtle line-clamp-2">UA {{ item.userAgent || '-' }}</div>
|
||||
<div class="cell-subtle">请求时间 {{ formatRequestTimestamp(item.requestTimestamp) }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">时间</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
|
||||
<div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</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"
|
||||
@@ -289,87 +236,92 @@ onMounted(loadEvents)
|
||||
.webhooks-page { display: grid; gap: 0; }
|
||||
|
||||
.total-badge {
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
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;
|
||||
}
|
||||
|
||||
.filter-card { margin-top: var(--space-4); }
|
||||
.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;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
.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;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
min-height: 38px;
|
||||
padding: 0;
|
||||
margin-top: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-card { position: relative; overflow: hidden; }
|
||||
.summary-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto -26px -26px auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
.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);
|
||||
opacity: 0.14;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
background: #f8fafc;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.summary-card--success::after { background: var(--color-success); }
|
||||
.summary-card--danger::after { background: var(--color-danger); }
|
||||
.summary-card--primary::after { background: var(--color-primary); }
|
||||
.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-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
|
||||
.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
|
||||
.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
|
||||
.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); }
|
||||
|
||||
.table-card { margin-top: var(--space-4); overflow: visible; }
|
||||
|
||||
.events-toolbar { margin-bottom: var(--space-3); }
|
||||
.events-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.events-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.event-list { display: grid; gap: var(--space-3); }
|
||||
|
||||
.event-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||
.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;
|
||||
}
|
||||
|
||||
.event-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
|
||||
.event-identity { min-width: 0; display: grid; gap: var(--space-2); }
|
||||
.cell-stack { display: grid; gap: 5px; }
|
||||
|
||||
.event-no {
|
||||
.order-no {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1.1;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
@@ -377,17 +329,16 @@ onMounted(loadEvents)
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.event-no:hover { color: var(--color-primary-dark); }
|
||||
.order-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.event-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
.event-top-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
|
||||
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
min-height: 24px;
|
||||
max-width: 240px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid var(--border-default);
|
||||
@@ -397,69 +348,45 @@ onMounted(loadEvents)
|
||||
}
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.event-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
.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); }
|
||||
|
||||
.event-section {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 10px 11px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
.status-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
.status-stack :deep(.el-tag) { max-width: 100%; }
|
||||
|
||||
.section-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); }
|
||||
|
||||
.cell-stack { display: grid; gap: 6px; min-width: 0; }
|
||||
.cell-title { color: var(--text-primary); font-weight: 700; line-height: 1.4; word-break: break-word; }
|
||||
.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; word-break: break-word; }
|
||||
.inline-link { color: var(--color-primary-dark); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
|
||||
.inline-link:hover { text-decoration: underline; }
|
||||
|
||||
.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||||
.meta-chip {
|
||||
.action-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
|
||||
.detail-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
color: #475467;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||
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;
|
||||
}
|
||||
|
||||
.inline-link { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
|
||||
|
||||
.mono-inline { color: #344054; font-size: var(--text-xs); line-height: 1.6; font-family: var(--font-mono); overflow-wrap: anywhere; }
|
||||
.event-key { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
|
||||
|
||||
.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); line-height: 1.5; }
|
||||
|
||||
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-actions { flex-direction: column; align-items: flex-start; }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid,
|
||||
.summary-grid,
|
||||
.event-grid { grid-template-columns: 1fr; }
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.event-card-top { flex-direction: column; align-items: flex-start; }
|
||||
.event-no { font-size: 18px; }
|
||||
.order-no { font-size: var(--text-base); }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user