使用element ui-2

This commit is contained in:
yml
2026-05-21 21:45:07 +08:00
parent a39d43c4d6
commit 9656a92c8f
28 changed files with 133 additions and 371 deletions
+5 -24
View File
@@ -30,25 +30,6 @@
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;
@@ -106,27 +87,27 @@
line-height: 1;
}
.summary-metric[data-tone="success"] {
.summary-metric[data-tone='success'] {
color: var(--color-success-dark);
background: var(--color-success-light);
border-color: #bbf7d0;
}
.summary-metric[data-tone="danger"] {
.summary-metric[data-tone='danger'] {
color: var(--color-danger-dark);
background: var(--color-danger-light);
border-color: #fecaca;
}
.summary-metric[data-tone="primary"] {
.summary-metric[data-tone='primary'] {
color: var(--color-primary-dark);
background: var(--color-primary-light);
border-color: #bfdbfe;
}
.summary-metric[data-tone="warning"] {
.summary-metric[data-tone='warning'] {
color: var(--color-warning-dark);
background: var(--color-warning-light);
border-color: #fed7aa;
}
.summary-metric[data-tone="muted"] {
.summary-metric[data-tone='muted'] {
color: var(--text-secondary);
background: #f8fafc;
border-color: var(--border-default);
+56 -8
View File
@@ -117,16 +117,64 @@
}
/* ---- 通用工具类 ---- */
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.w-full { width: 100%; }
.text-muted-xs { font-size: var(--text-xs); color: var(--text-muted); }
.fw-600 { font-weight: 600; }
.text-danger { color: var(--color-danger); }
.ml-2 { margin-left: var(--space-2); }
.mt-4 {
margin-top: var(--space-4);
}
.mb-4 {
margin-bottom: var(--space-4);
}
.w-full {
width: 100%;
}
.text-muted-xs {
font-size: var(--text-xs);
color: var(--text-muted);
}
.text-muted-xs.mt-1 {
margin-top: var(--space-1);
}
.fw-600 {
font-weight: 600;
}
.text-danger {
color: var(--color-danger);
}
.ml-2 {
margin-left: var(--space-2);
}
.pagination-center {
margin-top: var(--space-4);
display: flex;
justify-content: center;
}
.filter-col-160 { width: 160px; }
.card-header {
display: flex;
justify-content: space-between;
gap: var(--space-3);
align-items: flex-end;
}
.card-header--split {
align-items: center;
}
.card-title {
display: block;
color: var(--text-primary);
font-size: var(--text-lg);
font-weight: 600;
}
.card-desc {
display: block;
margin-top: 4px;
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: 1.6;
}
.card-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.filter-col-160 {
width: 160px;
}
@@ -7,29 +7,8 @@
border-radius: var(--radius-lg);
}
.card-header {
display: grid;
gap: var(--space-1);
}
.card-header--split {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-4);
}
.card-title {
display: block;
font-size: var(--text-base);
font-weight: 700;
color: var(--text-primary);
}
.card-desc {
display: block;
margin-top: 4px;
font-size: var(--text-sm);
color: var(--text-secondary);
}
.overview-card {
@@ -7,29 +7,8 @@
border-radius: var(--radius-lg);
}
.card-header {
display: grid;
gap: var(--space-1);
}
.card-header--split {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-4);
}
.card-title {
display: block;
color: var(--text-primary);
font-size: var(--text-base);
font-weight: 700;
}
.card-desc {
display: block;
margin-top: 4px;
color: var(--text-secondary);
font-size: var(--text-sm);
}
.overview-card {
@@ -37,6 +37,13 @@ function querySkuSuggestions(query: string, callback: (items: SkuSuggestion[]) =
callback(items)
}
function handleSkuSuggestionSelect(item: Record<string, unknown>) {
const skuCode = typeof item.skuCode === 'string' ? item.skuCode : ''
if (skuCode) {
props.applySkuSuggestion(skuCode)
}
}
</script>
<template>
@@ -58,7 +65,7 @@ function querySkuSuggestions(query: string, callback: (items: SkuSuggestion[]) =
:fetch-suggestions="querySkuSuggestions"
placeholder="内部履约 SKU,可选已有同类型,也可自定义新的中文名"
clearable
@select="(item: SkuSuggestion) => applySkuSuggestion(item.skuCode)"
@select="handleSkuSuggestionSelect"
>
<template #default="{ item }">
<div class="autocomplete-option">
@@ -132,9 +139,9 @@ function querySkuSuggestions(query: string, callback: (items: SkuSuggestion[]) =
type="textarea"
:rows="8"
placeholder="批量导入支持两种格式:&#10;1. 每行一个凭据内容(使用上方默认内部 SKU / 凭据类型 / 批次 / 库存组)&#10;2. 每行一条:内部SKU|凭据类型|批次号|库存组|凭据内容"
style="margin-top: 14px"
class="bulk-input"
/>
<p class="helper-text" style="margin-top: 8px">
<p class="helper-text helper-text--spaced">
示例sjz_hdl_test01|tencent_code|sjz-20260412|A组|DJQFf7HgXXXXXXXXXX
</p>
@@ -222,6 +229,14 @@ function querySkuSuggestions(query: string, callback: (items: SkuSuggestion[]) =
margin: 0;
}
.helper-text--spaced {
margin-top: var(--space-2);
}
.bulk-input {
margin-top: 14px;
}
.sku-chip-row {
display: flex;
flex-wrap: wrap;
@@ -264,10 +279,6 @@ function querySkuSuggestions(query: string, callback: (items: SkuSuggestion[]) =
.helper-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-header {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
@@ -1,5 +1,8 @@
<script setup lang="ts">
import { adminInventoryCredentialTypeOptions, adminInventoryStatusOptions } from '@/utils/admin-options'
import {
adminInventoryCredentialTypeOptions,
adminInventoryStatusOptions,
} from '@/utils/admin-options'
const filterSkuCode = defineModel<string>('filterSkuCode', { required: true })
const filterCredentialType = defineModel<string>('filterCredentialType', { required: true })
@@ -90,10 +93,6 @@ defineProps<{
.form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-header {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
@@ -43,7 +43,7 @@ defineProps<{
</div>
<div class="pool-section">
<div class="card-header" style="margin-bottom: 14px">
<div class="card-header pool-section-header">
<span class="card-title">当前页库存池概览</span>
<span class="card-desc"
>先看哪组内部履约 SKU 还有量再决定补库存查任务还是切去人工履约</span
@@ -123,6 +123,11 @@ defineProps<{
.pool-section {
margin-bottom: 18px;
}
.pool-section-header {
margin-bottom: 14px;
}
.pool-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -86,20 +86,6 @@ defineProps<Props>()
gap: var(--space-4);
}
.card-title {
display: block;
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
}
.card-desc {
display: block;
margin-top: 6px;
color: var(--text-secondary);
line-height: 1.7;
}
.form-grid {
margin-top: 18px;
display: grid;
@@ -72,20 +72,6 @@ defineProps<Props>()
gap: var(--space-4);
}
.card-title {
display: block;
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
}
.card-desc {
display: block;
margin-top: 6px;
color: var(--text-secondary);
line-height: 1.7;
}
.review-stage {
margin-top: 18px;
border-radius: var(--radius-lg);
@@ -301,7 +301,6 @@ onMounted(loadConfigs)
]"
:key="card.key"
:class="['overview-card', { 'is-active': activePlatform === card.key }]"
:body-style="{ padding: '18px', cursor: 'pointer' }"
shadow="hover"
@click="switchTab(card.key)"
>
@@ -473,7 +472,14 @@ onMounted(loadConfigs)
}
.overview-card {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.overview-card :deep(.el-card__body) {
padding: 18px;
}
.overview-card.is-active {
@@ -104,7 +104,7 @@ defineProps<Props>()
<el-tag
:type="shop.enabled ? 'success' : 'info'"
size="small"
style="margin-left: auto; margin-right: 12px"
class="shop-status-tag"
>
{{ shop.enabled ? '已启用' : '已停用' }}
</el-tag>
@@ -168,9 +168,7 @@ defineProps<Props>()
<template #default="{ row }">
<div>
<div>{{ row.displayShopName || row.shopId }}</div>
<div class="text-muted-xs">
ID: {{ row.shopId }}
</div>
<div class="text-muted-xs">ID: {{ row.shopId }}</div>
</div>
</template>
</el-table-column>
@@ -216,26 +214,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-3);
}
.card-actions {
display: flex;
gap: var(--space-2);
@@ -261,10 +239,14 @@ defineProps<Props>()
color: var(--text-muted);
}
.shop-status-tag {
margin-left: auto;
margin-right: var(--space-3);
}
.shop-brief {
font-size: var(--text-xs);
color: var(--text-muted);
margin-left: auto;
}
.shop-footer {
@@ -106,12 +106,8 @@ defineProps<Props>()
<template #default="{ row }">
<div>
<div class="fw-600">{{ row.productName || row.productNo || '-' }}</div>
<div class="text-muted-xs">
productNo: {{ row.productNo || '-' }}
</div>
<div class="text-muted-xs">
数量:{{ row.buyNum || 0 }}
</div>
<div class="text-muted-xs">productNo: {{ row.productNo || '-' }}</div>
<div class="text-muted-xs">数量:{{ row.buyNum || 0 }}</div>
</div>
</template>
</el-table-column>
@@ -119,13 +115,8 @@ defineProps<Props>()
<template #default="{ row }">
<div>
<el-tag size="small">{{ row.orderStatus }}</el-tag>
<div class="text-muted-xs" style="margin-top: 4px">
任务 {{ row.taskCount }}
</div>
<div
v-if="row.failReason"
class="text-xs text-danger"
>
<div class="text-muted-xs mt-1">任务 {{ row.taskCount }}</div>
<div v-if="row.failReason" class="text-xs text-danger">
{{ row.failReason }}
</div>
</div>
@@ -175,26 +166,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-3);
}
.card-actions {
display: flex;
gap: var(--space-2);
@@ -253,26 +253,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-3);
}
.card-actions {
display: flex;
gap: var(--space-2);
@@ -106,18 +106,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.debug-buttons {
display: flex;
gap: var(--space-2);
@@ -64,12 +64,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.card-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
}
.session-list {
display: flex;
flex-direction: column;
@@ -64,18 +64,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.result-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -188,26 +188,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-3);
}
.card-actions {
display: flex;
gap: var(--space-2);
@@ -30,10 +30,4 @@ defineProps<Props>()
.section-card {
border-radius: var(--radius-lg);
}
.card-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
}
</style>
@@ -40,18 +40,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.debug-pre {
margin: 0;
padding: var(--space-4);
@@ -268,26 +268,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-3);
}
.card-actions {
display: flex;
gap: var(--space-2);
@@ -112,26 +112,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-3);
}
.card-actions {
display: flex;
gap: var(--space-2);
@@ -30,10 +30,4 @@ defineProps<Props>()
.section-card {
border-radius: var(--radius-lg);
}
.card-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
}
</style>
@@ -114,17 +114,12 @@ defineProps<Props>()
</el-form-item>
</el-form>
<el-table :data="scheduledJobs" stripe size="small" style="margin-top: 8px">
<el-table :data="scheduledJobs" stripe size="small" class="jobs-table">
<el-table-column label="任务" min-width="200">
<template #default="{ row: job }">
<div>
<div class="fw-600">{{ formatJobType(job.type) }}</div>
<el-switch
v-model="job.enabled"
size="small"
active-text="启用"
style="margin-top: 4px"
/>
<el-switch v-model="job.enabled" size="small" active-text="启用" class="job-switch" />
</div>
</template>
</el-table-column>
@@ -231,26 +226,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-3);
}
.card-actions {
display: flex;
gap: var(--space-2);
@@ -263,6 +238,14 @@ defineProps<Props>()
gap: var(--space-2);
}
.jobs-table {
margin-top: var(--space-2);
}
.job-switch {
margin-top: var(--space-1);
}
.param-row {
display: flex;
align-items: center;
@@ -118,26 +118,6 @@ defineProps<Props>()
border-radius: var(--radius-lg);
}
.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);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-3);
}
.card-actions {
display: flex;
gap: var(--space-2);
@@ -147,7 +147,7 @@
margin-bottom: 14px;
}
.redeem-summary-card,
.metric-card,
.redeem-attempt-card {
padding: 14px var(--space-4);
border-radius: var(--radius-md);
@@ -155,7 +155,7 @@
background: rgba(248, 250, 252, 0.92);
}
.redeem-summary-card span,
.metric-card span,
.redeem-attempt-grid span {
display: block;
color: var(--text-secondary);
@@ -163,7 +163,7 @@
margin-bottom: 6px;
}
.redeem-summary-card strong,
.metric-card strong,
.redeem-attempt-grid strong {
color: var(--text-primary);
}
@@ -19,23 +19,23 @@ defineProps<Props>()
<p class="section-copy">这里展示这条任务最近一次触发咸鱼自动发货的状态原因和接口回执摘要</p>
<div class="redeem-summary-grid">
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>当前状态</span>
<div class="auto-delivery-tag-line">
<AdminStatusTag :status="autoDeliveryStatus" />
</div>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>触发来源</span>
<strong>{{
formatAutoDeliveryTrigger(detail.task.agisoAutoDelivery?.trigger || '')
}}</strong>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>最近执行</span>
<strong>{{ formatAdminDateTime(detail.task.agisoAutoDelivery?.updatedAt) }}</strong>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>接口回执</span>
<strong>
{{
@@ -74,25 +74,25 @@ const emit = defineEmits<{
</div>
<div class="redeem-summary-grid">
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>准备状态</span>
<div class="auto-delivery-tag-line">
<AdminStatusTag :status="flow.binding.prepareStatus" />
</div>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>发货状态</span>
<div class="auto-delivery-tag-line">
<AdminStatusTag :status="flow.dispatch.status" />
</div>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>退号状态</span>
<div class="auto-delivery-tag-line">
<AdminStatusTag :status="flow.returnNumber.status" />
</div>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>当前任务状态</span>
<div class="auto-delivery-tag-line">
<AdminStatusTag :status="detail.task.status" />
@@ -18,19 +18,19 @@ defineProps<Props>()
</p>
<div class="redeem-summary-grid">
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>处理结果</span>
<strong>{{ formatRedeemResolutionStatus(detail.redeemResolution!.status) }}</strong>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>任务收口状态</span>
<strong>{{ detail.redeemResolution!.taskStatus || detail.task.status || '-' }}</strong>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>更换新码次数</span>
<strong>{{ detail.redeemResolution!.replacementCount }}</strong>
</el-card>
<el-card shadow="never" class="redeem-summary-card">
<el-card shadow="never" class="metric-card">
<span>完成时间</span>
<strong>{{ formatAdminDateTime(detail.redeemResolution!.finishedAt) }}</strong>
</el-card>