尽量使用ele-plus
This commit is contained in:
yml2213
@@ -0,0 +1,415 @@
|
||||
.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,
|
||||
.section-title-row h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.panel-header 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;
|
||||
}
|
||||
|
||||
.header-tag,
|
||||
.section-note-chip,
|
||||
.mini-stat-chip,
|
||||
.summary-label,
|
||||
.overview-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
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: var(--color-primary-dark);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
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;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-title-row--tight {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-header-tools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-mini-stats,
|
||||
.section-action-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lookup-toolbar,
|
||||
.lookup-summary {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.lookup-toolbar {
|
||||
grid-template-columns: 96px 110px minmax(140px, 1fr) minmax(180px, 1.2fr) 136px;
|
||||
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));
|
||||
}
|
||||
|
||||
.lookup-summary-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.lookup-summary-item strong {
|
||||
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);
|
||||
}
|
||||
|
||||
.text-input--invalid {
|
||||
border-color: rgba(220, 38, 38, 0.45);
|
||||
background: #fff8f8;
|
||||
}
|
||||
|
||||
.text-input--invalid:focus {
|
||||
outline: none;
|
||||
border-color: rgba(220, 38, 38, 0.6);
|
||||
box-shadow: 0 0 0 3px rgba(254, 226, 226, 0.95);
|
||||
}
|
||||
|
||||
.text-input--readonly {
|
||||
color: var(--text-secondary);
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
}
|
||||
|
||||
.binding-inline-error {
|
||||
margin: 10px 0 0;
|
||||
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);
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
.empty-inline {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.panel-header,
|
||||
.section-title-row,
|
||||
.section-header-tools,
|
||||
.binding-actions,
|
||||
.binding-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.overview-stats,
|
||||
.lookup-toolbar,
|
||||
.lookup-summary,
|
||||
.binding-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -902,420 +902,4 @@ onMounted(loadConfigs)
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.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,
|
||||
.section-title-row h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.panel-header 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;
|
||||
}
|
||||
|
||||
.header-tag,
|
||||
.section-note-chip,
|
||||
.mini-stat-chip,
|
||||
.summary-label,
|
||||
.overview-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
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: var(--color-primary-dark);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
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;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-title-row--tight {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-header-tools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-mini-stats,
|
||||
.section-action-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lookup-toolbar,
|
||||
.lookup-summary {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.lookup-toolbar {
|
||||
grid-template-columns: 96px 110px minmax(140px, 1fr) minmax(180px, 1.2fr) 136px;
|
||||
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));
|
||||
}
|
||||
|
||||
.lookup-summary-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.lookup-summary-item strong {
|
||||
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);
|
||||
}
|
||||
|
||||
.text-input--invalid {
|
||||
border-color: rgba(220, 38, 38, 0.45);
|
||||
background: #fff8f8;
|
||||
}
|
||||
|
||||
.text-input--invalid:focus {
|
||||
outline: none;
|
||||
border-color: rgba(220, 38, 38, 0.6);
|
||||
box-shadow: 0 0 0 3px rgba(254, 226, 226, 0.95);
|
||||
}
|
||||
|
||||
.text-input--readonly {
|
||||
color: var(--text-secondary);
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
}
|
||||
|
||||
.binding-inline-error {
|
||||
margin: 10px 0 0;
|
||||
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);
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
.empty-inline {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.panel-header,
|
||||
.section-title-row,
|
||||
.section-header-tools,
|
||||
.binding-actions,
|
||||
.binding-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.overview-stats,
|
||||
.lookup-toolbar,
|
||||
.lookup-summary,
|
||||
.binding-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./AdminFulfillmentBindings.css"></style>
|
||||
|
||||
@@ -281,20 +281,15 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
<div class="inventory-page">
|
||||
<AdminPageHeader title="库存管理" description="按内部履约 SKU 和凭据类型管理库存、预占和发放。">
|
||||
<template #extra>
|
||||
<div class="header-tags">
|
||||
<span class="header-tag">按 SKU + 凭据类型入池</span>
|
||||
<span class="header-tag">腾讯兑换优先使用 tencent_code</span>
|
||||
<span class="header-tag">命中库存后自动流转或转人工</span>
|
||||
</div>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条库存</span>
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<!-- 查询筛选 -->
|
||||
<el-card shadow="never" class="section-card">
|
||||
<template #header>
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<span class="card-title">查询库存池</span>
|
||||
<p class="card-desc">按内部履约 SKU、凭据类型、批次和状态快速定位库存。</p>
|
||||
<span class="card-desc">按内部履约 SKU、凭据类型、批次和状态快速定位库存。</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="form-grid">
|
||||
@@ -314,12 +309,11 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 入库与导入 -->
|
||||
<el-card shadow="never" class="section-card">
|
||||
<template #header>
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<span class="card-title">入库与导入</span>
|
||||
<p class="card-desc">填写内部履约 SKU，不是平台侧 sku_code。建议同类商品长期复用同一个内部名称。</p>
|
||||
<span class="card-desc">填写内部履约 SKU，不是平台侧 sku_code。建议同类商品长期复用同一个内部名称。</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -385,42 +379,39 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<!-- 库存列表 -->
|
||||
<el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="库存列表加载中">
|
||||
<template v-if="items.length === 0 && !loading">
|
||||
<el-empty description="当前筛选下没有库存项，可以先在上方录入内部履约 SKU 对应的库存。" :image-size="60" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- 摘要 -->
|
||||
<div class="summary-grid">
|
||||
<el-card shadow="never" class="stat-card">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">当前页内部 SKU</span>
|
||||
<strong class="stat-value">{{ pageOverview.skuCount }}</strong>
|
||||
<span class="stat-meta">当前页去重后的内部履约 SKU 数量</span>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="stat-card">
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">当前页库存池</span>
|
||||
<strong class="stat-value">{{ pageOverview.groupCount }}</strong>
|
||||
<span class="stat-meta">按 内部履约 SKU + 凭据类型 聚合后的池子数量</span>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="stat-card">
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">可立即分配</span>
|
||||
<strong class="stat-value">{{ pageSummary.availableCount }}</strong>
|
||||
<span class="stat-meta">当前页还能直接被任务预占的库存项</span>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="stat-card">
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">预占中</span>
|
||||
<strong class="stat-value">{{ pageSummary.reservedCount }}</strong>
|
||||
<span class="stat-meta">当前页已经被任务锁定的库存项</span>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 库存池概览 -->
|
||||
<div class="pool-section">
|
||||
<div style="margin-bottom: 14px">
|
||||
<h3 class="card-title">当前页库存池概览</h3>
|
||||
<p class="card-desc">先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</p>
|
||||
<div class="card-header" style="margin-bottom: 14px">
|
||||
<span class="card-title">当前页库存池概览</span>
|
||||
<span class="card-desc">先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</span>
|
||||
</div>
|
||||
<div class="pool-grid">
|
||||
<article v-for="group in inventoryGroups" :key="group.key" class="pool-card">
|
||||
@@ -454,19 +445,17 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-toolbar">
|
||||
当前筛选共 {{ pagination.total }} 条，本页可用 {{ pageSummary.availableCount }} 条，预占 {{ pageSummary.reservedCount }} 条，已发放 {{ pageSummary.deliveredCount }} 条，作废 {{ pageSummary.invalidCount }} 条。
|
||||
</div>
|
||||
|
||||
<el-table :data="items" stripe size="small">
|
||||
<el-table :data="items" stripe size="small" class="inventory-table">
|
||||
<el-table-column label="库存项" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="item-cell">
|
||||
<span class="item-title">#{{ row.inventoryItemId }}</span>
|
||||
<RouterLink v-if="row.reservedByTaskNo" :to="`/admin/tasks/${row.reservedByTaskNo}`" class="item-title">#{{ row.inventoryItemId }}</RouterLink>
|
||||
<span v-else class="item-title">#{{ row.inventoryItemId }}</span>
|
||||
<code class="item-value">{{ row.displayValue }}</code>
|
||||
<span class="item-subline">批次 {{ row.batchNo || '未分批' }}</span>
|
||||
<span class="item-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -475,27 +464,32 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
<div class="sku-cell">
|
||||
<span class="sku-title">{{ row.skuCode }}</span>
|
||||
<span class="sku-subline">{{ getCredentialTypeLabel(row.credentialType) }}</span>
|
||||
<span class="sku-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
|
||||
<span class="sku-subline sku-raw">{{ row.credentialType || '-' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态 / 绑定" min-width="180">
|
||||
<el-table-column label="批次 / 库存组" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="status-cell">
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag :status="row.status" />
|
||||
<AdminStatusTag :status="row.systemBindingStatus" />
|
||||
<AdminStatusTag :status="row.userBindingStatus" />
|
||||
</div>
|
||||
<div class="info-cell">
|
||||
<span class="info-subline">批次 {{ row.batchNo || '未分批' }}</span>
|
||||
<span class="info-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
|
||||
<span class="status-copy">{{ formatInventoryStatus(row) }}</span>
|
||||
<span v-if="row.invalidReason" class="status-warning">原因：{{ row.invalidReason }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态 / 绑定" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag :status="row.status" />
|
||||
<AdminStatusTag :status="row.systemBindingStatus" />
|
||||
<AdminStatusTag :status="row.userBindingStatus" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联任务 / 订单" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="link-cell">
|
||||
<div class="info-cell">
|
||||
<span class="link-title">{{ row.reservedByTaskNo || '-' }}</span>
|
||||
<span class="link-subline">任务号</span>
|
||||
<span class="link-title">{{ row.platformOrderId || '-' }}</span>
|
||||
@@ -503,9 +497,9 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间" min-width="160">
|
||||
<el-table-column label="时间" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="time-cell">
|
||||
<div class="info-cell">
|
||||
<span class="time-line">入库 {{ formatAdminDateTime(row.createdAt) }}</span>
|
||||
<span class="time-line">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
|
||||
<span v-if="row.deliveredAt" class="time-line">发放 {{ formatAdminDateTime(row.deliveredAt) }}</span>
|
||||
@@ -515,12 +509,11 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
<el-table-column label="操作" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="action-stack">
|
||||
<el-button v-if="hasAdminRole('admin') && row.status === 'reserved'" :loading="actionLoadingId === row.inventoryItemId" link @click="runRowAction(row.inventoryItemId, () => releaseAdminInventoryItem(row.inventoryItemId), '库存项已释放', `确认释放库存项 #${row.inventoryItemId} 吗？释放后任务需要重新分配库存。`)">释放</el-button>
|
||||
<el-button v-if="hasAdminRole('admin') && row.status === 'available'" :loading="actionLoadingId === row.inventoryItemId" link type="danger" @click="runRowAction(row.inventoryItemId, () => invalidateAdminInventoryItem(row.inventoryItemId, { reason: '后台手动作废' }), '库存项已作废', `确认作废库存项 #${row.inventoryItemId} 吗？作废后不会再参与自动分配。`)">作废</el-button>
|
||||
<el-button v-if="hasAdminRole('admin') && row.status === 'reserved'" :loading="actionLoadingId === row.inventoryItemId" size="small" @click="runRowAction(row.inventoryItemId, () => releaseAdminInventoryItem(row.inventoryItemId), '库存项已释放', `确认释放库存项 #${row.inventoryItemId} 吗？释放后任务需要重新分配库存。`)">释放</el-button>
|
||||
<el-button v-if="hasAdminRole('admin') && row.status === 'available'" :loading="actionLoadingId === row.inventoryItemId" size="small" type="danger" plain @click="runRowAction(row.inventoryItemId, () => invalidateAdminInventoryItem(row.inventoryItemId, { reason: '后台手动作废' }), '库存项已作废', `确认作废库存项 #${row.inventoryItemId} 吗？作废后不会再参与自动分配。`)">作废</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty><el-empty :image-size="60" description="暂无库存项" /></template>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
@@ -540,118 +533,268 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
|
||||
<style scoped>
|
||||
.inventory-page { display: grid; gap: 0; }
|
||||
|
||||
.header-tags { display: flex; flex-wrap: wrap; gap: 10px; }
|
||||
.header-tag {
|
||||
.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;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.section-card { margin-top: var(--space-4); }
|
||||
|
||||
.card-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
|
||||
.card-desc { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
|
||||
|
||||
.form-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
|
||||
.sku-input-wrap { display: grid; }
|
||||
|
||||
.native-input {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-default);
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.single-row, .action-row { display: flex; gap: var(--space-3); align-items: center; margin-top: 14px; }
|
||||
|
||||
.helper-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: 14px; }
|
||||
.helper-item {
|
||||
display: grid; gap: 6px;
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(244, 248, 255, 0.84);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
.helper-item-wide { grid-column: span 1; }
|
||||
.helper-title { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; 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; letter-spacing: 0.04em; }
|
||||
.helper-copy { color: #334155; line-height: 1.6; }
|
||||
|
||||
.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;
|
||||
padding: 10px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(86, 108, 138, 0.16);
|
||||
background: linear-gradient(180deg, rgba(244, 248, 255, 0.92), rgba(255, 255, 255, 0.98));
|
||||
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 { font-weight: 700; }
|
||||
.sku-chip-meta { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
|
||||
.stat-card { text-align: left; }
|
||||
.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-xl);
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(248, 250, 252, 0.8);
|
||||
}
|
||||
.pool-topline { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
|
||||
.pool-title-block { display: grid; gap: 6px; }
|
||||
.pool-title { margin: 0; font-size: 18px; color: var(--text-primary); }
|
||||
.pool-subtitle { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.pool-total { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; 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; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.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: 10px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.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;
|
||||
}
|
||||
|
||||
.item-cell, .sku-cell, .status-cell, .link-cell, .time-cell { display: grid; gap: 6px; }
|
||||
.item-title, .sku-title, .link-title { font-weight: 700; color: var(--text-primary); }
|
||||
.item-value { display: inline-flex; width: fit-content; max-width: 100%; padding: 6px 8px; border-radius: 10px; background: rgba(15, 23, 42, 0.06); color: #0f172a; white-space: pre-wrap; word-break: break-all; }
|
||||
.item-subline, .sku-subline, .link-subline, .time-line, .status-copy { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.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; }
|
||||
|
||||
.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)); }
|
||||
.pool-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)); }
|
||||
.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; }
|
||||
.header-tags, .single-row, .action-row, .sku-helper-bar { flex-direction: column; align-items: stretch; }
|
||||
.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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -114,28 +114,22 @@ onMounted(loadOrders)
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<section class="filter-panel">
|
||||
<el-card shadow="never" class="section-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">查询订单</span>
|
||||
<span class="card-desc">按平台订单号、支付状态、SKU 和日期范围筛选。</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="filter-grid">
|
||||
<el-input
|
||||
v-model="platformOrderId"
|
||||
class="filter-control filter-control--order"
|
||||
placeholder="平台订单号（模糊匹配）"
|
||||
clearable
|
||||
@keyup.enter="loadOrders(1)"
|
||||
/>
|
||||
<el-select v-model="payStatus" class="filter-control filter-control--status" placeholder="支付状态" clearable>
|
||||
<el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号（模糊匹配）" clearable @keyup.enter="loadOrders(1)" />
|
||||
<el-select v-model="payStatus" class="filter-control" placeholder="支付状态" clearable>
|
||||
<el-option v-for="opt in adminPayStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="skuCode"
|
||||
class="filter-control filter-control--sku"
|
||||
placeholder="SKU，如 dnf-cdk-a"
|
||||
clearable
|
||||
@keyup.enter="loadOrders(1)"
|
||||
/>
|
||||
<el-input v-model="skuCode" class="filter-control" placeholder="SKU，如 dnf-cdk-a" clearable @keyup.enter="loadOrders(1)" />
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
class="filter-control date-range-filter"
|
||||
class="filter-control"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@@ -147,9 +141,8 @@ onMounted(loadOrders)
|
||||
<el-button round type="primary" @click="loadOrders(1)">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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.paidCount }}</strong></span>
|
||||
@@ -160,7 +153,7 @@ onMounted(loadOrders)
|
||||
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<section class="orders-section" 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>
|
||||
@@ -171,78 +164,74 @@ onMounted(loadOrders)
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
|
||||
<div class="order-list">
|
||||
<article v-for="item in items" :key="item.orderId" class="order-card">
|
||||
<div class="order-card-top">
|
||||
<div class="order-identity">
|
||||
<RouterLink :to="`/admin/orders/${item.orderId}`" class="order-no" :title="item.platformOrderId">
|
||||
{{ item.platformOrderId }}
|
||||
<el-table :data="items" stripe size="small" class="orders-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">
|
||||
{{ row.platformOrderId }}
|
||||
</RouterLink>
|
||||
<div class="order-meta-row">
|
||||
<span class="compact-chip">{{ item.platform || '-' }}</span>
|
||||
<span class="compact-chip">{{ resolveShopLabel(item) }}</span>
|
||||
<span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(item) }}</span>
|
||||
<div class="cell-meta-row">
|
||||
<span class="compact-chip">{{ row.platform || '-' }}</span>
|
||||
<span class="compact-chip">{{ resolveShopLabel(row) }}</span>
|
||||
<span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(row) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-top-actions">
|
||||
<AdminStatusTag :status="item.payStatus" :show-raw="false" />
|
||||
<RouterLink :to="`/admin/orders/${item.orderId}`" class="detail-link">详情</RouterLink>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品摘要" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-title" :title="resolveItemSummary(row)">{{ resolveItemSummary(row) }}</span>
|
||||
<span class="cell-subline">{{ row.itemCount }} 项，合计 {{ row.totalQuantity }} 件</span>
|
||||
<span class="cell-subline" :title="resolveBindingSummary(row)">{{ resolveBindingSummary(row) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-row-grid">
|
||||
<section class="order-field order-field--buyer">
|
||||
<span class="section-label">订单信息</span>
|
||||
<div class="info-cell">
|
||||
<span class="info-title">{{ resolveBuyerLabel(item) }}</span>
|
||||
<span class="info-subline">联系方式 {{ resolveContactLabel(item) }}</span>
|
||||
<span class="info-subline">店铺 {{ resolveShopLabel(item) }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="order-field order-field--item">
|
||||
<span class="section-label">商品摘要</span>
|
||||
<div class="info-cell">
|
||||
<span class="info-title" :title="resolveItemSummary(item)">{{ resolveItemSummary(item) }}</span>
|
||||
<span class="info-subline">{{ item.itemCount }} 项，合计 {{ item.totalQuantity }} 件</span>
|
||||
<span class="info-subline" :title="resolveBindingSummary(item)">{{ resolveBindingSummary(item) }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="order-field order-field--status">
|
||||
<span class="section-label">交付状态</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="支付/状态" min-width="140">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<AdminStatusTag :status="row.payStatus" :show-raw="false" />
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag :status="item.orderStatus" :show-raw="false" />
|
||||
<AdminStatusTag :status="item.systemBindingStatus" :show-raw="false" />
|
||||
<AdminStatusTag :status="item.userBindingStatus" :show-raw="false" />
|
||||
<span class="follow-up-chip" :data-tone="resolveFollowUpTone(item)">{{ resolveFollowUpText(item) }}</span>
|
||||
<AdminStatusTag :status="row.orderStatus" :show-raw="false" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="order-field order-field--amount">
|
||||
<span class="section-label">金额 / 时间</span>
|
||||
<div class="info-cell">
|
||||
<span class="info-title amount-text">{{ item.totalAmount }} {{ item.currency }}</span>
|
||||
<span class="info-subline">支付 {{ formatAdminDateTime(item.paidAt) }}</span>
|
||||
<span class="info-subline">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
|
||||
<span class="info-subline">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="order-field order-field--tasks">
|
||||
<span class="section-label">任务进度</span>
|
||||
<div class="task-progress-inline">
|
||||
<span class="progress-chip" :data-tone="resolveBindingTone(item.completedBindingTaskCount, item.taskCount)">
|
||||
完整绑定 {{ item.completedBindingTaskCount }}/{{ item.taskCount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="交付状态" min-width="230">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag :status="row.systemBindingStatus" :show-raw="false" />
|
||||
<AdminStatusTag :status="row.userBindingStatus" :show-raw="false" />
|
||||
</div>
|
||||
<span class="follow-up-chip" :data-tone="resolveFollowUpTone(row)">{{ resolveFollowUpText(row) }}</span>
|
||||
<div class="progress-row-stack">
|
||||
<span class="progress-chip" :data-tone="resolveBindingTone(row.completedBindingTaskCount, row.taskCount)">
|
||||
完整 {{ row.completedBindingTaskCount }}/{{ row.taskCount }}
|
||||
</span>
|
||||
<span class="progress-chip" :data-tone="resolveBindingTone(item.systemBoundTaskCount, item.taskCount)">
|
||||
系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
|
||||
<span class="progress-chip" :data-tone="resolveBindingTone(row.systemBoundTaskCount, row.taskCount)">
|
||||
系统 {{ row.systemBoundTaskCount }}/{{ row.taskCount }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="金额 / 时间" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-title amount-text">{{ row.totalAmount }} {{ row.currency }}</span>
|
||||
<span class="cell-subline">支付 {{ formatAdminDateTime(row.paidAt) }}</span>
|
||||
<span class="cell-subline">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<RouterLink :to="`/admin/orders/${row.orderId}`" class="detail-link">详情</RouterLink>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
@@ -254,7 +243,7 @@ onMounted(loadOrders)
|
||||
@current-change="loadOrders"
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -262,41 +251,33 @@ onMounted(loadOrders)
|
||||
.orders-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-panel {
|
||||
margin-top: var(--space-4);
|
||||
padding: 0;
|
||||
}
|
||||
.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: minmax(220px, 1.25fr) minmax(136px, 0.6fr) minmax(220px, 1fr) minmax(390px, 1.55fr) auto;
|
||||
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; }
|
||||
.date-range-filter {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
min-width: 156px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.filter-buttons { display: flex; gap: 10px; min-width: 156px; justify-content: flex-end; }
|
||||
|
||||
.summary-strip {
|
||||
display: flex;
|
||||
@@ -308,13 +289,7 @@ onMounted(loadOrders)
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -328,7 +303,6 @@ onMounted(loadOrders)
|
||||
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; }
|
||||
@@ -336,47 +310,35 @@ onMounted(loadOrders)
|
||||
.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-section {
|
||||
margin-top: var(--space-4);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.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); }
|
||||
|
||||
.order-list { display: grid; gap: var(--space-3); }
|
||||
|
||||
.order-card {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(247, 250, 255, 0.42);
|
||||
.orders-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
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;
|
||||
}
|
||||
|
||||
.order-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
background: rgba(247, 250, 255, 0.68);
|
||||
box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
|
||||
}
|
||||
|
||||
.order-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.order-identity { min-width: 0; display: grid; gap: var(--space-2); }
|
||||
.cell-stack { display: grid; gap: 5px; }
|
||||
|
||||
.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;
|
||||
@@ -386,30 +348,7 @@ onMounted(loadOrders)
|
||||
}
|
||||
.order-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.order-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.order-top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 26px;
|
||||
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; }
|
||||
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
@@ -424,43 +363,21 @@ onMounted(loadOrders)
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.order-row-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 0.95fr) minmax(190px, 1.25fr) minmax(230px, 1.35fr) minmax(170px, 1fr) minmax(150px, 0.9fr);
|
||||
column-gap: var(--space-4);
|
||||
row-gap: var(--space-3);
|
||||
min-width: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.order-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.info-cell { display: grid; gap: 5px; min-width: 0; }
|
||||
.info-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
|
||||
.info-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
|
||||
.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%; }
|
||||
|
||||
.task-progress-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
|
||||
.progress-row-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.progress-chip,
|
||||
.follow-up-chip {
|
||||
@@ -474,7 +391,6 @@ onMounted(loadOrders)
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-chip[data-tone='success'] { color: #0f766e; background: var(--color-success-light); border-color: #a6f4c5; }
|
||||
.progress-chip[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #b2ddff; }
|
||||
.progress-chip[data-tone='warning'] { color: #b54708; background: var(--color-warning-light); border-color: #fedf89; }
|
||||
@@ -482,27 +398,32 @@ 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; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid {
|
||||
grid-template-columns: minmax(200px, 1fr) minmax(132px, 0.56fr) minmax(200px, 0.9fr) minmax(340px, 1.25fr) auto;
|
||||
.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;
|
||||
}
|
||||
.filter-buttons { justify-content: flex-end; }
|
||||
.order-row-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.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)); }
|
||||
.date-range-filter { grid-column: span 2; }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
.order-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.date-range-filter { grid-column: auto; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.order-card-top { flex-direction: column; align-items: flex-start; }
|
||||
.order-top-actions { width: 100%; justify-content: space-between; }
|
||||
.order-row-grid { grid-template-columns: 1fr; }
|
||||
.order-no { font-size: 18px; }
|
||||
.order-no { font-size: var(--text-base); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,487 @@
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.claim-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-card,
|
||||
.hero-card,
|
||||
.error-copy {
|
||||
padding: 18px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
margin: 10px 0 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 26%),
|
||||
linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.96));
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.hero-copy h2 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 30px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero-copy p,
|
||||
.hero-inline span,
|
||||
.hero-link-row span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
color: var(--color-primary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.hero-metric {
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(255,255,255,.82);
|
||||
}
|
||||
|
||||
.hero-metric span {
|
||||
display: block;
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.hero-metric strong {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.hero-metric--blue { box-shadow: inset 0 0 0 1px rgba(59,130,246,.08); }
|
||||
.hero-metric--green { box-shadow: inset 0 0 0 1px rgba(16,185,129,.08); }
|
||||
.hero-metric--amber { box-shadow: inset 0 0 0 1px rgba(245,158,11,.08); }
|
||||
.hero-metric--slate { box-shadow: inset 0 0 0 1px rgba(100,116,139,.08); }
|
||||
|
||||
.hero-inline,
|
||||
.hero-link-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.section-copy {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.auto-delivery-tag-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auto-delivery-note {
|
||||
margin-top: 14px;
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(248,250,252,.92);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.auto-delivery-note p {
|
||||
margin: 0 0 var(--space-2);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.auto-delivery-note p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: var(--space-3) 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
width: 160px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.redeem-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.redeem-summary-card,
|
||||
.redeem-attempt-card {
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(248,250,252,.92);
|
||||
}
|
||||
|
||||
.redeem-summary-card span,
|
||||
.redeem-attempt-grid span {
|
||||
display: block;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.redeem-summary-card strong,
|
||||
.redeem-attempt-grid strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.redeem-attempts {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.redeem-attempt-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.redeem-outcome {
|
||||
color: var(--color-primary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.redeem-attempt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.redeem-attempt-copy {
|
||||
margin: var(--space-3) 0 0;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.table-empty {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.binding-primary {
|
||||
margin-top: 4px;
|
||||
color: var(--color-success);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.binding-meta {
|
||||
margin-top: 4px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.manual-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.field-block {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.manual-hint {
|
||||
margin: 14px 0 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.manual-summary {
|
||||
margin-top: var(--space-4);
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(248,250,252,.9);
|
||||
}
|
||||
|
||||
.manual-summary p {
|
||||
margin: 0 0 var(--space-2);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.manual-summary p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.flow-card {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 28%),
|
||||
linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
|
||||
}
|
||||
|
||||
.flow-card-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.flow-head-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.kuaishou-focus-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.flow-block {
|
||||
padding: var(--space-4);
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(248,250,252,.9);
|
||||
}
|
||||
|
||||
.flow-block--spotlight {
|
||||
background:
|
||||
linear-gradient(160deg, rgba(255,255,255,.98), rgba(239,246,255,.95)),
|
||||
rgba(248,250,252,.9);
|
||||
}
|
||||
|
||||
.flow-block h4 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.flow-block p {
|
||||
margin: 10px 0 0;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.flow-meta-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.flow-meta-list div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.flow-meta-list span {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.flow-meta-list strong {
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.flow-meta-list--dense {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.flow-meta-list--two-column {
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
}
|
||||
|
||||
.spotlight-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.spotlight-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.flow-copy {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.flow-collapse {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.checklist-grid {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255,255,255,.84);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.checklist-item-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.checklist-item-head span {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.checklist-item strong {
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.role-hero {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.role-hero div {
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255,255,255,.88);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.role-hero span {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.role-hero strong {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.35;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.role-warning {
|
||||
margin: 14px 0 0;
|
||||
padding: var(--space-3) 14px;
|
||||
border-radius: 14px;
|
||||
background: var(--color-warning-light);
|
||||
color: #b54708;
|
||||
}
|
||||
|
||||
.event-copy {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.event-time {
|
||||
margin-top: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.screenshot-link {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--space-3);
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.screenshot-empty {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.screenshot-preview {
|
||||
display: block;
|
||||
width: min(100%, 720px);
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border-default);
|
||||
box-shadow: 0 20px 48px rgba(15,23,42,.08);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-inline,
|
||||
.hero-link-row,
|
||||
.flow-card-head,
|
||||
.flow-head-actions,
|
||||
.spotlight-head,
|
||||
.spotlight-actions,
|
||||
.checklist-item-head {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
@@ -1100,492 +1100,4 @@ onBeforeUnmount(clearScreenshotPreview)
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.claim-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-card,
|
||||
.hero-card,
|
||||
.error-copy {
|
||||
padding: 18px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
margin: 10px 0 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 26%),
|
||||
linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.96));
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.hero-copy h2 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 30px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero-copy p,
|
||||
.hero-inline span,
|
||||
.hero-link-row span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
color: var(--color-primary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.hero-metric {
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(255,255,255,.82);
|
||||
}
|
||||
|
||||
.hero-metric span {
|
||||
display: block;
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.hero-metric strong {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.hero-metric--blue { box-shadow: inset 0 0 0 1px rgba(59,130,246,.08); }
|
||||
.hero-metric--green { box-shadow: inset 0 0 0 1px rgba(16,185,129,.08); }
|
||||
.hero-metric--amber { box-shadow: inset 0 0 0 1px rgba(245,158,11,.08); }
|
||||
.hero-metric--slate { box-shadow: inset 0 0 0 1px rgba(100,116,139,.08); }
|
||||
|
||||
.hero-inline,
|
||||
.hero-link-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.section-copy {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.auto-delivery-tag-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auto-delivery-note {
|
||||
margin-top: 14px;
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(248,250,252,.92);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.auto-delivery-note p {
|
||||
margin: 0 0 var(--space-2);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.auto-delivery-note p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: var(--space-3) 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
width: 160px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.redeem-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.redeem-summary-card,
|
||||
.redeem-attempt-card {
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(248,250,252,.92);
|
||||
}
|
||||
|
||||
.redeem-summary-card span,
|
||||
.redeem-attempt-grid span {
|
||||
display: block;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.redeem-summary-card strong,
|
||||
.redeem-attempt-grid strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.redeem-attempts {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.redeem-attempt-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.redeem-outcome {
|
||||
color: var(--color-primary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.redeem-attempt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.redeem-attempt-copy {
|
||||
margin: var(--space-3) 0 0;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.table-empty {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.binding-primary {
|
||||
margin-top: 4px;
|
||||
color: var(--color-success);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.binding-meta {
|
||||
margin-top: 4px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.manual-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.field-block {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.manual-hint {
|
||||
margin: 14px 0 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.manual-summary {
|
||||
margin-top: var(--space-4);
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(248,250,252,.9);
|
||||
}
|
||||
|
||||
.manual-summary p {
|
||||
margin: 0 0 var(--space-2);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.manual-summary p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.flow-card {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 28%),
|
||||
linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
|
||||
}
|
||||
|
||||
.flow-card-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.flow-head-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.kuaishou-focus-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.flow-block {
|
||||
padding: var(--space-4);
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border-default);
|
||||
background: rgba(248,250,252,.9);
|
||||
}
|
||||
|
||||
.flow-block--spotlight {
|
||||
background:
|
||||
linear-gradient(160deg, rgba(255,255,255,.98), rgba(239,246,255,.95)),
|
||||
rgba(248,250,252,.9);
|
||||
}
|
||||
|
||||
.flow-block h4 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.flow-block p {
|
||||
margin: 10px 0 0;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.flow-meta-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.flow-meta-list div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.flow-meta-list span {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.flow-meta-list strong {
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.flow-meta-list--dense {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.flow-meta-list--two-column {
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
}
|
||||
|
||||
.spotlight-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.spotlight-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.flow-copy {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.flow-collapse {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.checklist-grid {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255,255,255,.84);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.checklist-item-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.checklist-item-head span {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.checklist-item strong {
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.role-hero {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.role-hero div {
|
||||
padding: 14px var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255,255,255,.88);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.role-hero span {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.role-hero strong {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.35;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.role-warning {
|
||||
margin: 14px 0 0;
|
||||
padding: var(--space-3) 14px;
|
||||
border-radius: 14px;
|
||||
background: var(--color-warning-light);
|
||||
color: #b54708;
|
||||
}
|
||||
|
||||
.event-copy {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.event-time {
|
||||
margin-top: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.screenshot-link {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--space-3);
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.screenshot-empty {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.screenshot-preview {
|
||||
display: block;
|
||||
width: min(100%, 720px);
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border-default);
|
||||
box-shadow: 0 20px 48px rgba(15,23,42,.08);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-inline,
|
||||
.hero-link-row,
|
||||
.flow-card-head,
|
||||
.flow-head-actions,
|
||||
.spotlight-head,
|
||||
.spotlight-actions,
|
||||
.checklist-item-head {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./AdminTaskDetail.css"></style>
|
||||
|
||||
@@ -133,7 +133,13 @@ function resetFilters() {
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<section class="filter-panel">
|
||||
<el-card shadow="never" class="section-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">查询任务</span>
|
||||
<span class="card-desc">按状态、任务号、订单号、角色标识、SKU 和日期筛选。</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="filter-grid">
|
||||
<el-select v-model="status" placeholder="状态" clearable>
|
||||
<el-option v-for="opt in adminTaskStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
@@ -149,12 +155,12 @@ function resetFilters() {
|
||||
<el-button round type="primary" @click="loadTasks(1)">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</el-card>
|
||||
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
<el-alert v-if="lastClaimUrl" :title="`最近生成的领取链接：${lastClaimUrl}`" type="info" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<section class="tasks-section" 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>
|
||||
@@ -165,115 +171,106 @@ function resetFilters() {
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
|
||||
<div class="task-list">
|
||||
<article v-for="item in items" :key="item.taskId" class="task-card">
|
||||
<div class="task-card-top">
|
||||
<div class="task-identity">
|
||||
<RouterLink :to="`/admin/tasks/${item.taskId}`" class="task-no" :title="item.taskNo">
|
||||
{{ item.taskNo }}
|
||||
<el-table :data="items" stripe size="small" class="tasks-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">
|
||||
{{ row.taskNo }}
|
||||
</RouterLink>
|
||||
<div class="task-meta-row">
|
||||
<span class="compact-chip" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
|
||||
<span class="compact-chip compact-chip--muted">重试 {{ item.retryCount }} 次</span>
|
||||
<div class="cell-meta-row">
|
||||
<span class="compact-chip" :title="row.platformOrderId">订单 {{ row.platformOrderId }}</span>
|
||||
<span class="compact-chip compact-chip--muted">重试 {{ row.retryCount }} 次</span>
|
||||
</div>
|
||||
<span class="cell-title" :title="row.skuName || row.skuCode">{{ row.skuName || row.skuCode }}</span>
|
||||
<span class="cell-subline">SKU {{ row.skuCode || '-' }}</span>
|
||||
</div>
|
||||
<AdminStatusTag :status="item.status" />
|
||||
</div>
|
||||
|
||||
<div class="task-grid">
|
||||
<section class="task-section">
|
||||
<span class="section-label">任务进度</span>
|
||||
<div class="progress-cell">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="进度" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<div class="progress-row">
|
||||
<span class="progress-label">任务</span>
|
||||
<AdminStatusTag :status="item.status" />
|
||||
<AdminStatusTag :status="row.status" />
|
||||
</div>
|
||||
<div class="progress-row">
|
||||
<span class="progress-label">系统</span>
|
||||
<AdminStatusTag :status="item.systemBindingStatus" />
|
||||
<AdminStatusTag :status="row.systemBindingStatus" />
|
||||
</div>
|
||||
<div class="progress-row">
|
||||
<span class="progress-label">完整</span>
|
||||
<AdminStatusTag :status="item.userBindingStatus" />
|
||||
<AdminStatusTag :status="row.userBindingStatus" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">商品 / 凭据</span>
|
||||
<div class="goods-cell">
|
||||
<span class="goods-title" :title="item.skuName || item.skuCode">{{ item.skuName || item.skuCode }}</span>
|
||||
<span class="goods-subline">SKU {{ item.skuCode || '-' }}</span>
|
||||
<span class="goods-subline" :title="item.inventoryDisplayMasked || '-'">凭据 {{ item.inventoryDisplayMasked || '-' }}</span>
|
||||
<span class="goods-subline" :title="formatBindingRoles(item)">绑定 {{ formatBindingRoles(item) }}</span>
|
||||
<span class="goods-subline goods-subline-strong" :title="formatBindingCountSummary(item)">{{ formatBindingCountSummary(item) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色 / 凭据" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-title" :title="row.roleName || row.roleId || '-'">{{ row.roleName || '-' }}</span>
|
||||
<span class="cell-subline" :title="row.roleId || '-'">角色ID {{ row.roleId || '-' }}</span>
|
||||
<span class="cell-subline">登录 {{ row.loginType || '-' }}</span>
|
||||
<span class="cell-subline" :title="row.inventoryDisplayMasked || '-'">凭据 {{ row.inventoryDisplayMasked || '-' }}</span>
|
||||
<span class="cell-subline" :title="formatBindingRoles(row)">绑定 {{ formatBindingRoles(row) }}</span>
|
||||
<span class="cell-subline cell-subline--strong" :title="formatBindingCountSummary(row)">{{ formatBindingCountSummary(row) }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">角色绑定</span>
|
||||
<div class="role-cell">
|
||||
<span class="role-title" :title="item.roleName || item.roleId || '-'">{{ item.roleName || '-' }}</span>
|
||||
<span class="role-subline" :title="item.roleId || '-'">角色ID {{ item.roleId || '-' }}</span>
|
||||
<span class="role-subline">登录 {{ item.loginType || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-subline">创建 {{ formatAdminDateTime(row.createdAt) }}</span>
|
||||
<span class="cell-subline">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
|
||||
<span v-if="row.claimedAt" class="cell-subline">领取 {{ formatAdminDateTime(row.claimedAt) }}</span>
|
||||
<span v-if="row.roleConfirmedAt" class="cell-subline">确认 {{ formatAdminDateTime(row.roleConfirmedAt) }}</span>
|
||||
<span v-if="row.redeemedAt" class="cell-subline">兑换 {{ formatAdminDateTime(row.redeemedAt) }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">时间</span>
|
||||
<div class="time-cell">
|
||||
<span class="time-line">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
|
||||
<span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
|
||||
<span v-if="item.claimedAt" class="time-line">领取 {{ formatAdminDateTime(item.claimedAt) }}</span>
|
||||
<span v-if="item.roleConfirmedAt" class="time-line">确认 {{ formatAdminDateTime(item.roleConfirmedAt) }}</span>
|
||||
<span v-if="item.redeemedAt" class="time-line">兑换 {{ formatAdminDateTime(item.redeemedAt) }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="task-section task-section--actions">
|
||||
<span class="section-label">异常 / 操作</span>
|
||||
<div class="task-end">
|
||||
<span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
|
||||
<div class="action-cell">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常 / 操作" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-error" :title="row.lastError || '-'">{{ row.lastError || '当前无异常' }}</span>
|
||||
<div class="action-stack">
|
||||
<el-button
|
||||
v-if="canManageTaskLifecycle"
|
||||
:disabled="item.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(item.status)"
|
||||
:loading="actionLoadingId === item.taskId"
|
||||
:disabled="row.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(row.status)"
|
||||
:loading="actionLoadingId === row.taskId"
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
size="small"
|
||||
@click="runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)"
|
||||
@click="runAction(row.taskId, () => retryAdminTask(row.taskId), '任务已重试', `确认重试任务 ${row.taskNo} 吗？`)"
|
||||
>
|
||||
重试
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
|
||||
v-if="canManageTaskLifecycle && row.executorKey !== 'manual_dispatch'"
|
||||
size="small"
|
||||
@click="handleActionCommand('regenerate_claim_link', item)"
|
||||
@click="handleActionCommand('regenerate_claim_link', row)"
|
||||
>
|
||||
重发链接
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canManageTaskLifecycle"
|
||||
size="small"
|
||||
@click="handleActionCommand('manual_review', item)"
|
||||
@click="handleActionCommand('manual_review', row)"
|
||||
>
|
||||
转人工
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canCloseTasks && !['redeemed', 'closed'].includes(item.status)"
|
||||
v-if="canCloseTasks && !['redeemed', 'closed'].includes(row.status)"
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleActionCommand('close', item)"
|
||||
@click="handleActionCommand('close', row)"
|
||||
>
|
||||
关闭任务
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
@@ -285,7 +282,7 @@ function resetFilters() {
|
||||
@current-change="loadTasks"
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -293,19 +290,23 @@ function resetFilters() {
|
||||
.tasks-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-panel { 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;
|
||||
@@ -313,54 +314,39 @@ function resetFilters() {
|
||||
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-section { margin-top: var(--space-4); overflow: visible; }
|
||||
.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); }
|
||||
|
||||
.task-list { display: grid; gap: var(--space-3); }
|
||||
|
||||
.task-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(247, 250, 255, 0.42);
|
||||
.tasks-table {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-default);
|
||||
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
|
||||
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;
|
||||
}
|
||||
|
||||
.task-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
background: rgba(247, 250, 255, 0.68);
|
||||
box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
|
||||
}
|
||||
|
||||
.task-card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.task-identity { min-width: 0; display: grid; gap: var(--space-2); }
|
||||
.cell-stack { display: grid; gap: 5px; }
|
||||
|
||||
.task-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;
|
||||
@@ -370,14 +356,14 @@ function resetFilters() {
|
||||
}
|
||||
.task-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.task-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
min-height: 24px;
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid var(--border-default);
|
||||
@@ -385,51 +371,16 @@ function resetFilters() {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.task-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr);
|
||||
gap: var(--space-3);
|
||||
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); }
|
||||
.cell-subline--strong { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
.task-section {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
|
||||
.task-section--actions {
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: 112px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.progress-cell { display: grid; gap: var(--space-2); min-width: 0; }
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
|
||||
.progress-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -446,56 +397,22 @@ function resetFilters() {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.goods-cell, .role-cell, .time-cell { display: grid; gap: 5px; min-width: 0; }
|
||||
.time-line { min-width: 0; color: #475467; font-size: var(--text-xs); line-height: 1.5; }
|
||||
.goods-title, .role-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
|
||||
.goods-subline, .role-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
|
||||
.goods-subline-strong { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
.cell-error { display: block; min-width: 0; line-height: 1.55; color: #475467; word-break: break-word; font-size: var(--text-xs); }
|
||||
|
||||
.task-end {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.action-cell {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
max-width: 360px;
|
||||
}
|
||||
.action-cell :deep(.el-button) {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
.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) {
|
||||
.task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.task-section--actions {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
.task-end { grid-template-columns: 1fr; }
|
||||
.action-cell { justify-content: flex-start; max-width: none; }
|
||||
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-buttons { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.task-grid,
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.task-card-top { flex-direction: column; align-items: flex-start; }
|
||||
.task-no { font-size: 18px; }
|
||||
.task-no { font-size: var(--text-base); }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user