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;
}