From 46c5df86acf77adc71bf03c1857168995d67aceb Mon Sep 17 00:00:00 2001 From: yml Date: Fri, 5 Jun 2026 20:29:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=95=86=E5=93=81=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2=20=20=E5=BF=AB=E9=80=9F=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E7=AD=9B=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/views/AdminListingReviewView.vue | 44 ++++-- .../admin/views/AdminListingsView.vue | 125 +++++++++++++----- frontend/src/styles/admin.css | 106 +++++++++++---- 3 files changed, 204 insertions(+), 71 deletions(-) diff --git a/frontend/src/features/admin/views/AdminListingReviewView.vue b/frontend/src/features/admin/views/AdminListingReviewView.vue index 705c75c..329995e 100644 --- a/frontend/src/features/admin/views/AdminListingReviewView.vue +++ b/frontend/src/features/admin/views/AdminListingReviewView.vue @@ -525,22 +525,22 @@ function readError(error: unknown, fallback: string) {
-
+
-
+ +
-
+ +
-
+ +
+
@@ -810,12 +810,36 @@ function readError(error: unknown, fallback: string) { margin-bottom: 14px; } -.review-summary div { +.summary-card { min-width: 0; + border: 1px solid #e8edf4; border-radius: 8px; background: #ffffff; padding: 14px 16px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); + text-align: left; + cursor: pointer; + transition: all 0.2s ease; +} + +.summary-card:hover { + border-color: #1477ff; + box-shadow: 0 2px 8px rgba(20, 119, 255, 0.15); + transform: translateY(-1px); +} + +.summary-card.active { + border-color: #1477ff; + background: #1477ff; + box-shadow: 0 2px 8px rgba(20, 119, 255, 0.25); +} + +.summary-card.active span { + color: #ffffff; +} + +.summary-card.active strong { + color: #ffffff; } .review-summary span, diff --git a/frontend/src/features/admin/views/AdminListingsView.vue b/frontend/src/features/admin/views/AdminListingsView.vue index 0bccd47..0b18376 100644 --- a/frontend/src/features/admin/views/AdminListingsView.vue +++ b/frontend/src/features/admin/views/AdminListingsView.vue @@ -83,6 +83,18 @@ function resetFilters() { void queryListings() } +function setStatusFilter(status: string) { + filters.status = filters.status === status ? '' : status + filters.review_status = '' + void queryListings() +} + +function setReviewStatusFilter(reviewStatus: string) { + filters.review_status = filters.review_status === reviewStatus ? '' : reviewStatus + filters.status = '' + void queryListings() +} + async function handlePageSizeChange(size: number) { pageSize.value = size currentPage.value = 1 @@ -332,40 +344,87 @@ function formatQuantity(value: number) {
-
- 结果 {{ totalListings }} - 本页 {{ listings.length }} - 已上架 {{ publishedCount }} - 已锁定 {{ rentedCount }} - 待审核 {{ pendingCount }} + +
+
+ 全部商品 + {{ totalListings }} +
+
+ 已上架 + {{ publishedCount }} +
+
+ 已锁定 + {{ rentedCount }} +
+
+ 待审核 + {{ pendingCount }} +
- - - - - - - - - - - - - - - - - - - - - - -
- 重置 - 查询 - 复制截图 - 下载截图 + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ 重置 + 查询 + 复制截图 + 下载截图 +
diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css index de8b19e..651492f 100644 --- a/frontend/src/styles/admin.css +++ b/frontend/src/styles/admin.css @@ -442,64 +442,114 @@ h1 { } .listing-control-panel { - display: grid; - grid-template-columns: minmax(340px, 0.65fr) minmax(520px, 1fr) auto; - align-items: end; - gap: 14px; - margin-bottom: 14px; - border-radius: 14px; + display: flex; + flex-direction: column; + gap: 16px; + margin-bottom: 16px; + border-radius: 12px; background: #ffffff; - padding: 14px 16px; + padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } -.listing-metric-strip { +/* 统计卡片行 */ +.listing-stats-row { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 12px; +} + +.stat-card { display: flex; - flex-wrap: wrap; + flex-direction: column; gap: 8px; + padding: 16px 18px; + border: 1px solid #e8edf4; + border-radius: 10px; + background: #ffffff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); + transition: all 0.2s ease; } -.listing-metric-strip span { - display: inline-flex; - align-items: baseline; - gap: 6px; - min-height: 34px; - border-radius: 8px; - background: #f8f9fe; - padding: 8px 10px; - color: #8f9bba; - font-size: 12px; +.stat-card.clickable { + cursor: pointer; +} + +.stat-card.clickable:hover { + border-color: #1477ff; + box-shadow: 0 2px 8px rgba(20, 119, 255, 0.15); + transform: translateY(-1px); +} + +.stat-card.active { + border-color: #1477ff; + background: #1477ff; + box-shadow: 0 2px 8px rgba(20, 119, 255, 0.25); +} + +.stat-card .stat-label { + color: #6b7785; + font-size: 13px; font-weight: 600; + line-height: 1; } -.listing-metric-strip strong { - color: #1b2559; - font-size: 16px; +.stat-card.active .stat-label { + color: #ffffff; +} + +.stat-card .stat-value { + color: #17233d; + font-size: 28px; font-weight: 800; + line-height: 1; + letter-spacing: -0.5px; +} + +.stat-card.active .stat-value { + color: #ffffff; +} + +/* 筛选和操作行 */ +.listing-filter-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding-top: 4px; + border-top: 1px solid #f0f3f7; } .listing-filter-bar { - display: grid; - grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.8fr) minmax(170px, 0.8fr); - gap: 12px; + display: flex; + align-items: center; + gap: 0; + margin: 0; } .listing-filter-bar .el-form-item { margin-bottom: 0; + margin-right: 20px; +} + +.listing-filter-bar .el-form-item:last-child { + margin-right: 0; } .listing-filter-bar .el-form-item__label { - color: #8f9bba; + color: #6b7785; font-size: 12px; font-weight: 600; - letter-spacing: 0.2px; + margin-bottom: 6px; + line-height: 1; } .listing-action-strip { display: flex; align-items: center; - justify-content: flex-end; gap: 8px; + flex-shrink: 0; +} padding-bottom: 1px; white-space: nowrap; }