yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化商品管理筛选功能

Browse Source
This commit is contained in:
yml2213
2026-07-09 23:55:19 +08:00
parent 0a5448b3f5
commit ef67375132
9 changed files with 252 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/internal/modules/listing/dto.go
+4
View File
@@ -81,6 +81,10 @@ type AdminListQuery struct {
Load []string
SkinGroup []string
SkinName []string
MinCoin *float64
MaxCoin *float64
MinDeposit *float64
MaxDeposit *float64
Limit int
Page int
PageSize int
backend/internal/modules/listing/handler_parse.go
+4
View File
@@ -79,6 +79,10 @@ func parseAdminListQuery(c *gin.Context) (AdminListQuery, bool) {
query.Load = parseCSVQuery(c.Query("load"))
query.SkinGroup = parseCSVQuery(c.Query("skin_group"))
query.SkinName = parseCSVQuery(firstNonEmpty(c.Query("skin_name"), c.Query("skin")))
query.MinCoin = parseOptionalFloat(c.Query("min_coin"))
query.MaxCoin = parseOptionalFloat(c.Query("max_coin"))
query.MinDeposit = parseOptionalFloat(c.Query("min_deposit"))
query.MaxDeposit = parseOptionalFloat(c.Query("max_deposit"))
return query, true
}
backend/internal/modules/listing/query.go
+33
View File
@@ -3,6 +3,7 @@ package listing
import (
"context"
"fmt"
"math"
"strconv"
"strings"
"time"
@@ -113,9 +114,41 @@ func (r *Repository) applyAdminListFilters(db *gorm.DB, query AdminListQuery) *g
if query.ReviewStatus != "" {
db = db.Where("l.review_status = ?", query.ReviewStatus)
}
if query.MinCoin != nil {
db = db.Where(
"EXISTS (SELECT 1 FROM game_accounts AS coin_account WHERE coin_account.id = l.account_id AND coin_account.haf_coin_amount >= ?)",
coinMToAdminAmount(*query.MinCoin),
)
}
if query.MaxCoin != nil {
db = db.Where(
"EXISTS (SELECT 1 FROM game_accounts AS coin_account WHERE coin_account.id = l.account_id AND coin_account.haf_coin_amount <= ?)",
coinMToAdminAmount(*query.MaxCoin),
)
}
if query.MinDeposit != nil {
db = db.Where("l.deposit_amount_cent >= ?", yuanToAdminCent(*query.MinDeposit))
}
if query.MaxDeposit != nil {
db = db.Where("l.deposit_amount_cent <= ?", yuanToAdminCent(*query.MaxDeposit))
}
return db
}
func coinMToAdminAmount(value float64) int64 {
if value <= 0 || math.IsNaN(value) || math.IsInf(value, 0) {
return 0
}
return int64(math.Round(value * 1000000))
}
func yuanToAdminCent(value float64) int64 {
if value <= 0 || math.IsNaN(value) || math.IsInf(value, 0) {
return 0
}
return int64(math.Round(value * 100))
}
func (r *Repository) FindAdmin(ctx context.Context, listingID uint64) (*ListingDTO, error) {
return r.findDTO(ctx, "l.id = ?", listingID)
}
frontend/src/features/admin/views/AdminListingsView.vue
+60 -26
View File
@@ -36,6 +36,10 @@ const filters = reactive<AdminListingQuery>({
load: '',
skin_group: '',
skin_name: '',
min_coin: undefined,
max_coin: undefined,
min_deposit: undefined,
max_deposit: undefined,
})
type FilterPopover = 'asset' | 'skin'
@@ -148,6 +152,10 @@ function resetFilters() {
filters.owner_id = ''
filters.status = ''
filters.review_status = ''
filters.min_coin = undefined
filters.max_coin = undefined
filters.min_deposit = undefined
filters.max_deposit = undefined
clearAssetFilters(false)
clearSkinFilters(false)
void queryListings()
@@ -551,32 +559,63 @@ function formatQuantity(value: number) {
<!-- 筛选和操作行 -->
<div class="listing-filter-row">
<el-form class="listing-filter-bar" inline>
<el-form-item label="编号">
<el-form class="listing-filter-bar" label-position="top">
<el-form-item class="filter-keyword" label="编号">
<el-input
v-model="filters.keyword"
clearable
placeholder="商品编号 / 订单编号"
style="width: 210px"
@keyup.enter="queryListings"
@clear="queryListings"
/>
</el-form-item>
<el-form-item label="号主 ID">
<el-input
v-model="filters.owner_id"
clearable
placeholder="筛选号主"
style="width: 160px"
/>
<el-form-item class="filter-owner" label="号主 ID">
<el-input v-model="filters.owner_id" clearable placeholder="筛选号主" />
</el-form-item>
<el-form-item label="商品状态">
<el-select
v-model="filters.status"
clearable
placeholder="全部状态"
style="width: 140px"
>
<el-form-item class="filter-range" label="纯币(M)">
<div class="admin-range-filter">
<el-input-number
v-model="filters.min_coin"
:min="0"
:precision="1"
:step="10"
:controls="false"
placeholder="最低"
/>
<span class="admin-range-separator">-</span>
<el-input-number
v-model="filters.max_coin"
:min="0"
:precision="1"
:step="10"
:controls="false"
placeholder="最高"
/>
</div>
</el-form-item>
<el-form-item class="filter-range" label="押金(元)">
<div class="admin-range-filter">
<el-input-number
v-model="filters.min_deposit"
:min="0"
:precision="1"
:step="100"
:controls="false"
placeholder="最低"
/>
<span class="admin-range-separator">-</span>
<el-input-number
v-model="filters.max_deposit"
:min="0"
:precision="1"
:step="100"
:controls="false"
placeholder="最高"
/>
</div>
</el-form-item>
<el-form-item class="filter-select" label="商品状态">
<el-select v-model="filters.status" clearable placeholder="全部状态">
<el-option label="草稿" value="draft" />
<el-option label="已上架" value="published" />
<el-option label="已锁定" value="rented" />
@@ -585,20 +624,15 @@ function formatQuantity(value: number) {
<el-option label="异常" value="abnormal" />
</el-select>
</el-form-item>
<el-form-item label="审核状态">
<el-select
v-model="filters.review_status"
clearable
placeholder="全部审核"
style="width: 140px"
>
<el-form-item class="filter-select" label="审核状态">
<el-select v-model="filters.review_status" clearable placeholder="全部审核">
<el-option label="未提交" value="none" />
<el-option label="待审核" value="pending" />
<el-option label="已通过" value="approved" />
<el-option label="已拒绝" value="rejected" />
</el-select>
</el-form-item>
<el-form-item label="资产">
<el-form-item class="filter-select" label="资产">
<el-popover
:visible="activeFilterPopover === 'asset'"
trigger="click"
@@ -692,7 +726,7 @@ function formatQuantity(value: number) {
</div>
</el-popover>
</el-form-item>
<el-form-item label="皮肤">
<el-form-item class="filter-skin" label="皮肤">
<el-popover
:visible="activeFilterPopover === 'skin'"
trigger="click"
frontend/src/features/listings/api/listings.ts
+7 -1
View File
@@ -171,6 +171,10 @@ export interface AdminListingQuery {
load?: string
skin_group?: string
skin_name?: string
min_coin?: number
max_coin?: number
min_deposit?: number
max_deposit?: number
limit?: number
page?: number
page_size?: number
@@ -185,7 +189,9 @@ export interface AdminListingPage {
export async function fetchAdminListings(query: AdminListingQuery = {}) {
const params = Object.fromEntries(
Object.entries(query).filter(([, value]) => value !== '' && value !== undefined)
Object.entries(query).filter(
([, value]) => value !== '' && value !== undefined && value !== null
)
)
const { data } = await apiClient.get<ApiResponse<AdminListingPage>>('/admin/listings', { params })
return normalizeAdminListingPage(data.data, query)
frontend/src/features/listings/views/ListingDetailView.vue
+26 -6
View File
@@ -131,6 +131,7 @@ const detailScreenshots = computed(() => {
url,
}))
})
const detailScreenshotUrls = computed(() => detailScreenshots.value.map(shot => shot.url))
function readGroupedScreenshots(item: Listing) {
const groups = item.asset_summary?.screenshot_groups
@@ -462,8 +463,20 @@ function handleToggleFavorite() {
<span>{{ detailScreenshots.length }} 张</span>
</div>
<div class="detail-screenshot-grid">
<figure v-for="shot in detailScreenshots" :key="shot.url" class="detail-screenshot">
<AuthImage :source="shot.url" :alt="shot.label" />
<figure
v-for="(shot, index) in detailScreenshots"
:key="shot.url"
class="detail-screenshot"
>
<AuthImage
:source="shot.url"
:alt="shot.label"
image-class="detail-screenshot-image"
fallback-class="detail-screenshot-image"
fit="cover"
:preview-src-list="detailScreenshotUrls"
:preview-initial-index="index"
/>
<figcaption>{{ shot.label }}</figcaption>
</figure>
</div>
@@ -908,12 +921,20 @@ function handleToggleFavorite() {
margin: 0;
}
.detail-screenshot img {
.detail-screenshot-image {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
overflow: hidden;
border-radius: 12px;
border: 1px solid #edf0f4;
background: #f8fafc;
cursor: zoom-in;
}
.detail-screenshot-image :deep(.el-image__inner) {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-screenshot figcaption {
@@ -996,8 +1017,7 @@ function handleToggleFavorite() {
margin-bottom: 0;
border: 1px solid rgba(245, 158, 11, 0.2);
background:
linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92)),
#fffbeb;
linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92)), #fffbeb;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
frontend/src/features/listings/views/MobileListingDetailView.vue
+31 -3
View File
@@ -133,6 +133,7 @@ const detailScreenshots = computed(() => {
url,
}))
})
const detailScreenshotUrls = computed(() => detailScreenshots.value.map(shot => shot.url))
function readGroupedScreenshots(item: Listing) {
const groups = item.asset_summary?.screenshot_groups
@@ -328,7 +329,9 @@ function handleToggleFavorite() {
:source="detailScreenshots[0].url"
:alt="getListingTitle(listing)"
image-class="cover-img"
fit="cover"
loading="eager"
:preview-src-list="detailScreenshotUrls"
/>
<div v-else class="cover-placeholder">
<van-icon name="photo-o" :size="40" color="#ccc" />
@@ -449,8 +452,20 @@ function handleToggleFavorite() {
<div v-if="detailScreenshots.length" class="info-card">
<h3 class="card-subtitle">账号截图</h3>
<div class="screenshot-grid">
<figure v-for="shot in detailScreenshots" :key="shot.url" class="screenshot-item">
<AuthImage :source="shot.url" :alt="shot.label" image-class="screenshot-thumb" />
<figure
v-for="(shot, index) in detailScreenshots"
:key="shot.url"
class="screenshot-item"
>
<AuthImage
:source="shot.url"
:alt="shot.label"
image-class="screenshot-thumb"
fallback-class="screenshot-thumb"
fit="cover"
:preview-src-list="detailScreenshotUrls"
:preview-initial-index="index"
/>
<figcaption>{{ shot.label }}</figcaption>
</figure>
</div>
@@ -630,6 +645,12 @@ function handleToggleFavorite() {
}
.cover-img {
width: 100%;
height: 100%;
cursor: zoom-in;
}
.cover-img :deep(.el-image__inner) {
width: 100%;
height: 100%;
object-fit: cover;
@@ -876,11 +897,18 @@ function handleToggleFavorite() {
.screenshot-thumb {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
overflow: hidden;
border-radius: 8px;
background: #f8fafc;
cursor: pointer;
}
.screenshot-thumb :deep(.el-image__inner) {
width: 100%;
height: 100%;
object-fit: cover;
}
.screenshot-item figcaption {
margin-top: 4px;
color: #6b7280;
frontend/src/shared/components/business/AuthImage.vue
+5
View File
@@ -14,6 +14,7 @@ const props = withDefaults(
decoding?: 'async' | 'sync' | 'auto'
previewSrcList?: string[]
previewTeleported?: boolean
previewInitialIndex?: number
fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
imageStyle?: any
}>(),
@@ -25,6 +26,7 @@ const props = withDefaults(
loading: 'lazy',
decoding: 'async',
previewTeleported: true,
previewInitialIndex: 0,
}
)
@@ -105,11 +107,14 @@ onBeforeUnmount(cleanup)
<template>
<el-image
v-if="imageURL && usePreview"
:class="imageClass"
:src="imageURL"
:alt="alt"
:fit="fit"
:style="imageStyle"
:preview-src-list="previewURLs"
:preview-teleported="previewTeleported"
:initial-index="previewInitialIndex"
/>
<img
v-else-if="imageURL"
frontend/src/styles/admin.css
+82 -20
View File
@@ -523,53 +523,97 @@ h1 {
/* 筛选和操作行 */
.listing-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 4px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 16px 24px;
padding-top: 16px;
border-top: 1px solid #f0f3f7;
}
.listing-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
display: grid;
grid-template-columns: minmax(220px, 1.2fr) minmax(150px, 0.78fr) minmax(220px, 1fr) minmax(
220px,
1fr
);
align-items: end;
gap: 12px 16px;
margin: 0;
row-gap: 10px;
min-width: 0;
}
.listing-filter-bar .el-form-item {
margin-bottom: 0;
margin-right: 20px;
}
.listing-filter-bar .el-form-item:last-child {
margin-right: 0;
min-width: 0;
}
.listing-filter-bar .el-form-item__label {
display: block;
height: 16px;
padding: 0;
margin-bottom: 6px;
color: #6b7785;
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
line-height: 1;
}
.listing-filter-bar .el-form-item__content {
width: 100%;
min-width: 0;
}
.listing-filter-bar .el-input,
.listing-filter-bar .el-select,
.listing-filter-bar .admin-filter-chip,
.listing-filter-bar .admin-range-filter {
width: 100%;
}
.listing-filter-bar .el-input__wrapper,
.listing-filter-bar .el-select__wrapper {
min-height: 34px;
}
.filter-skin {
min-width: 0;
}
.admin-range-filter {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 6px;
}
.admin-range-filter .el-input-number {
width: 100%;
}
.admin-range-filter .el-input__wrapper {
padding-right: 8px;
padding-left: 8px;
}
.admin-range-separator {
color: #94a3b8;
font-size: 12px;
font-weight: 700;
}
.listing-action-strip {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding-bottom: 1px;
padding-bottom: 0;
white-space: nowrap;
}
.admin-filter-chip {
display: inline-flex;
width: 104px;
height: 32px;
height: 34px;
align-items: center;
justify-content: space-between;
gap: 6px;
@@ -588,7 +632,7 @@ h1 {
}
.admin-filter-chip.wide {
width: 150px;
width: 100%;
}
.admin-filter-chip span {
@@ -937,12 +981,30 @@ h1 {
margin-left: 0;
}
@media (max-width: 1280px) {
.listing-filter-row {
grid-template-columns: 1fr;
}
.listing-filter-bar {
grid-template-columns: repeat(2, minmax(180px, 1fr));
}
.listing-action-strip {
justify-content: flex-end;
}
}
@media (max-width: 980px) {
.listing-control-panel {
grid-template-columns: 1fr;
align-items: stretch;
}
.listing-filter-row {
grid-template-columns: 1fr;
}
.listing-filter-bar {
grid-template-columns: 1fr;
}