diff --git a/.gitignore b/.gitignore
index 7f5020f..3f3e24c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,6 +29,8 @@ frontend/components.d.ts
 # Docker / local data
 .docker-data/
 backups/
+deploy/backup/
+distribution-admin/
 .DS_Store
 backend/api
 
diff --git a/backend/internal/modules/listing/dto.go b/backend/internal/modules/listing/dto.go
index 6358e57..3c3024f 100644
--- a/backend/internal/modules/listing/dto.go
+++ b/backend/internal/modules/listing/dto.go
@@ -93,6 +93,11 @@ type TransferOwnerRequest struct {
 	Reason       string `json:"reason"`
 }
 
+type AdminUpdateScreenshotsRequest struct {
+	ScreenshotURLs   []string       `json:"screenshot_urls" binding:"required,min=1"`
+	ScreenshotGroups map[string]any `json:"screenshot_groups"`
+}
+
 type AdminListQuery struct {
 	OwnerID      uint64
 	Keyword      string
diff --git a/backend/internal/modules/listing/handler_admin.go b/backend/internal/modules/listing/handler_admin.go
index b66f750..8c7234c 100644
--- a/backend/internal/modules/listing/handler_admin.go
+++ b/backend/internal/modules/listing/handler_admin.go
@@ -182,3 +182,27 @@ func (h *Handler) Reject(c *gin.Context) {
 	}
 	response.OK(c, item)
 }
+
+func (h *Handler) UpdateScreenshots(c *gin.Context) {
+	adminID, ok := currentAdminID(c)
+	if !ok {
+		response.Unauthorized(c, "缺少管理员上下文")
+		return
+	}
+	id, ok := parseID(c)
+	if !ok {
+		return
+	}
+	var req AdminUpdateScreenshotsRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		response.BadRequest(c, "截图参数不正确")
+		return
+	}
+	item, err := h.service.UpdateScreenshots(c.Request.Context(), adminID, id, req, auditMeta(c))
+	if err != nil {
+		writeListingError(c, err)
+		return
+	}
+	response.OK(c, item)
+}
+
diff --git a/backend/internal/modules/listing/review.go b/backend/internal/modules/listing/review.go
index 80121f2..2ea4e74 100644
--- a/backend/internal/modules/listing/review.go
+++ b/backend/internal/modules/listing/review.go
@@ -386,3 +386,52 @@ func (r *Repository) Reject(ctx context.Context, listingID uint64, req ReviewReq
 	})
 	return dto, err
 }
+
+func (r *Repository) UpdateScreenshots(ctx context.Context, adminID uint64, listingID uint64, req AdminUpdateScreenshotsRequest, meta AuditMeta) (*ListingDTO, error) {
+	var dto *ListingDTO
+	err := r.db.WithContext(ctx).Transaction(func(tx *gorm.DB) error {
+		listing, account, err := r.findForReviewUpdate(tx, listingID)
+		if err != nil {
+			return err
+		}
+		if listing.Status == "rented" || listing.InTransaction {
+			return ErrListingLocked
+		}
+
+		screenshots, err := marshalScreenshots(req.ScreenshotURLs)
+		if err != nil {
+			return err
+		}
+		account.ScreenshotURLS = screenshots
+
+		if req.ScreenshotGroups != nil {
+			summary := decodeAssetSummary(account.AssetSummary)
+			if summary == nil {
+				summary = map[string]any{}
+			}
+			summary["screenshot_groups"] = req.ScreenshotGroups
+			assetSummary, err := marshalAssetSummary(summary)
+			if err != nil {
+				return err
+			}
+			account.AssetSummary = assetSummary
+		}
+
+		if err := tx.Save(account).Error; err != nil {
+			return err
+		}
+
+		if err := appendAuditLog(tx, adminID, "listing.update_screenshots", "listing", listing.ID, meta, map[string]any{
+			"listing_id":      listing.ID,
+			"account_id":      account.ID,
+			"screenshot_urls": req.ScreenshotURLs,
+		}); err != nil {
+			return err
+		}
+
+		dto = toDTO(*account, *listing)
+		return nil
+	})
+	return dto, err
+}
+
diff --git a/backend/internal/modules/listing/service_review.go b/backend/internal/modules/listing/service_review.go
index fe5bb81..fd0ea95 100644
--- a/backend/internal/modules/listing/service_review.go
+++ b/backend/internal/modules/listing/service_review.go
@@ -81,3 +81,14 @@ func (s *Service) Reject(ctx context.Context, id uint64, req ReviewRequest) (*Li
 	}
 	return s.repo.Reject(ctx, id, req)
 }
+
+func (s *Service) UpdateScreenshots(ctx context.Context, adminID uint64, id uint64, req AdminUpdateScreenshotsRequest, meta AuditMeta) (*ListingDTO, error) {
+	if s.repo == nil {
+		return nil, ErrDependencyUnavailable
+	}
+	if len(req.ScreenshotURLs) == 0 {
+		return nil, ErrInvalidInput
+	}
+	return s.repo.UpdateScreenshots(ctx, adminID, id, req, meta)
+}
+
diff --git a/backend/internal/modules/listing/service_test.go b/backend/internal/modules/listing/service_test.go
index 2ccb380..08a6ae3 100644
--- a/backend/internal/modules/listing/service_test.go
+++ b/backend/internal/modules/listing/service_test.go
@@ -699,3 +699,73 @@ func TestApplyPublicScreenshotGroups(t *testing.T) {
 		t.Fatalf("expected /api/listings/88/screenshots/1, got %#v", skinList)
 	}
 }
+
+func TestUpdateScreenshots(t *testing.T) {
+	db := database.NewTestDB()
+	if err := database.MigrateListingLifecycleTestSchema(db); err != nil {
+		t.Fatalf("failed to migrate test db: %v", err)
+	}
+	if err := db.AutoMigrate(&model.AuditLog{}); err != nil {
+		t.Fatalf("failed to migrate audit log: %v", err)
+	}
+	repo := NewRepository(db, nil)
+	account := model.GameAccount{
+		OwnerID:       1,
+		GameName:      "delta_force",
+		ServerRegion:  "QQ",
+		LoginPlatform: "QQ账号密码",
+		Title:         "待审核商品",
+		Status:        "draft",
+	}
+	if err := db.Create(&account).Error; err != nil {
+		t.Fatalf("failed to create account: %v", err)
+	}
+	listing := model.RentalListing{
+		ListingNo:    "202609070001",
+		AccountID:    account.ID,
+		OwnerID:      1,
+		Status:       "draft",
+		ReviewStatus: "pending",
+	}
+	if err := db.Create(&listing).Error; err != nil {
+		t.Fatalf("failed to create listing: %v", err)
+	}
+
+	meta := AuditMeta{IP: "127.0.0.1", UserAgent: "TestAgent", RequestID: "req-1"}
+	req := AdminUpdateScreenshotsRequest{
+		ScreenshotURLs: []string{
+			"/api/files/object?key=edited1.png",
+			"/api/files/object?key=edited2.png",
+		},
+		ScreenshotGroups: map[string]any{
+			"coin":   []string{"/api/files/object?key=edited1.png"},
+			"gameId": []string{"/api/files/object?key=edited2.png"},
+		},
+	}
+
+	updated, err := repo.UpdateScreenshots(t.Context(), 999, listing.ID, req, meta)
+	if err != nil {
+		t.Fatalf("UpdateScreenshots failed: %v", err)
+	}
+
+	if len(updated.ScreenshotURLS) != 2 || updated.ScreenshotURLS[0] != "/api/files/object?key=edited1.png" {
+		t.Fatalf("unexpected screenshot_urls: %#v", updated.ScreenshotURLS)
+	}
+
+	groups, ok := updated.AssetSummary["screenshot_groups"].(map[string]any)
+	if !ok {
+		t.Fatalf("screenshot_groups not found in AssetSummary: %#v", updated.AssetSummary)
+	}
+	coinList, ok := groups["coin"].([]string)
+	if !ok {
+		if anyList, isAny := groups["coin"].([]any); isAny {
+			for _, v := range anyList {
+				coinList = append(coinList, v.(string))
+			}
+		}
+	}
+	if len(coinList) != 1 || coinList[0] != "/api/files/object?key=edited1.png" {
+		t.Fatalf("unexpected coin screenshots: %#v", coinList)
+	}
+}
+
diff --git a/backend/internal/router/router.go b/backend/internal/router/router.go
index 21d8804..9597ac6 100644
--- a/backend/internal/router/router.go
+++ b/backend/internal/router/router.go
@@ -649,6 +649,7 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
 			adminRoutes.PUT("/listings/:id/external-adjustment", requirePerm("listing:edit_external"), listingHandler.AdjustExternalListing)
 			adminRoutes.POST("/listings/:id/transfer-owner", requirePerm("listing:approve"), listingHandler.TransferOwner)
 			adminRoutes.POST("/listings/:id/reject", requirePerm("listing:reject"), listingHandler.Reject)
+			adminRoutes.PUT("/listings/:id/screenshots", requirePerm("listing:approve"), listingHandler.UpdateScreenshots)
 			adminRoutes.POST("/listings/:id/offline", requirePerm("listing:offline"), listingHandler.AdminOffline)
 			adminRoutes.POST("/listings/:id/mark-abnormal", requirePerm("listing:offline"), listingHandler.AdminMarkAbnormal)
 
diff --git a/frontend/src/features/admin/components/AdminListingReviewEvidenceDialog.vue b/frontend/src/features/admin/components/AdminListingReviewEvidenceDialog.vue
new file mode 100644
index 0000000..ca5f9ed
--- /dev/null
+++ b/frontend/src/features/admin/components/AdminListingReviewEvidenceDialog.vue
@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { EditPen, FullScreen, Pointer } from '@element-plus/icons-vue'
+import type { Listing } from '@/features/listings'
+import { formatListingCode } from '@/shared/utils/listingDisplay'
+
+interface ReviewScreenshotItem {
+  url: string
+  label: string
+  categoryKey?: string
+}
+
+const props = defineProps<{
+  visible: boolean
+  listing: Listing | null
+  previewUrls: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'viewImage', payload: { images: ReviewScreenshotItem[]; index: number }): void
+  (e: 'peekImage', payload: { images: ReviewScreenshotItem[]; index: number }): void
+  (e: 'editScreenshot', payload: { shot: ReviewScreenshotItem; listing: Listing }): void
+}>()
+
+const standardSlots = [
+  { key: 'coin', label: '纯币截图' },
+  { key: 'tencentSecurity', label: '腾讯安全中心截图' },
+  { key: 'skin', label: '皮肤截图' },
+  { key: 'gameId', label: '游戏ID截图' },
+  { key: 'totalAsset', label: '总资产截图' },
+]
+
+const evidenceCategory = ref('all')
+
+watch(
+  () => props.visible,
+  visible => {
+    if (visible) {
+      evidenceCategory.value = 'all'
+    }
+  }
+)
+
+const evidenceReviewScreenshots = computed(() => getListingScreenshots(props.listing))
+
+const filteredEvidenceScreenshots = computed(() => {
+  if (evidenceCategory.value === 'all') {
+    return evidenceReviewScreenshots.value
+  }
+  return evidenceReviewScreenshots.value.filter(s => s.categoryKey === evidenceCategory.value)
+})
+
+function isDefaultScreenshot(url: string) {
+  return url.includes('/api/listings/default-upload-screenshot')
+}
+
+function getListingScreenshots(item: Listing | null): ReviewScreenshotItem[] {
+  if (!item) return []
+  const groups = item.asset_summary?.screenshot_groups
+
+  if (typeof groups === 'object' && groups !== null) {
+    const grouped = standardSlots.flatMap(slot => {
+      const urls = (groups as Record<string, unknown>)[slot.key]
+      if (!Array.isArray(urls)) return []
+      const validUrls = urls.filter((url): url is string => typeof url === 'string' && Boolean(url))
+      return validUrls.map((url, index) => ({
+        categoryKey: slot.key,
+        label: validUrls.length > 1 ? `${slot.label}${index + 1}` : slot.label,
+        url,
+      }))
+    })
+    if (grouped.length > 0) {
+      const groupedUrlSet = new Set(grouped.map(s => s.url))
+      const extraUrls = (item.screenshot_urls || []).filter(url => !groupedUrlSet.has(url))
+      const extras = extraUrls.map((url, index) => ({
+        categoryKey: 'extra',
+        label: `账号截图${grouped.length + index + 1}`,
+        url,
+      }))
+      return [...grouped, ...extras]
+    }
+  }
+
+  const defaultLabels = ['纯币截图', '游戏ID截图', '总资产截图', '腾讯安全中心截图', '皮肤截图']
+  return (item.screenshot_urls || []).map((url, index) => ({
+    categoryKey: standardSlots[index]?.key || 'extra',
+    label: defaultLabels[index] || `账号截图${index + 1}`,
+    url,
+  }))
+}
+
+function handleView(index: number) {
+  emit('viewImage', {
+    images: filteredEvidenceScreenshots.value,
+    index,
+  })
+}
+
+function handleEdit(shot: ReviewScreenshotItem) {
+  if (props.listing) {
+    emit('editScreenshot', { shot, listing: props.listing })
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="visible"
+    title="全量凭证截图核验"
+    width="900px"
+    append-to-body
+    @update:model-value="emit('update:visible', $event)"
+  >
+    <div v-if="listing" class="dialog-body evidence-dialog">
+      <div class="evidence-header-bar">
+        <div class="evidence-item-info">
+          <span class="evidence-code">#{{ formatListingCode(listing) }}</span>
+          <strong>{{ listing.title }}</strong>
+        </div>
+        <div class="evidence-tabs">
+          <el-radio-group v-model="evidenceCategory" size="small">
+            <el-radio-button label="all"
+              >全部 ({{ evidenceReviewScreenshots.length }})</el-radio-button
+            >
+            <el-radio-button label="coin">纯币</el-radio-button>
+            <el-radio-button label="tencentSecurity">安全中心</el-radio-button>
+            <el-radio-button label="skin">皮肤</el-radio-button>
+            <el-radio-button label="gameId">游戏ID</el-radio-button>
+            <el-radio-button label="totalAsset">总资产</el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+
+      <div v-if="filteredEvidenceScreenshots.length" class="screenshot-gallery-grid dialog-gallery">
+        <div
+          v-for="(shot, index) in filteredEvidenceScreenshots"
+          :key="shot.url"
+          class="screenshot-card"
+          @click="handleView(index)"
+        >
+          <div class="image-wrapper">
+            <img :src="previewUrls[shot.url] || shot.url" :alt="shot.label" loading="lazy" />
+            <span v-if="isDefaultScreenshot(shot.url)" class="default-badge">默认占位图</span>
+            <span class="category-tag">{{ shot.label }}</span>
+            <div class="image-overlay" @click.stop>
+              <el-button
+                size="small"
+                type="primary"
+                :icon="Pointer"
+                circle
+                title="按住速览（松手即关闭）"
+                @mousedown.stop.prevent="
+                  emit('peekImage', { images: filteredEvidenceScreenshots, index })
+                "
+                @touchstart.stop.prevent="
+                  emit('peekImage', { images: filteredEvidenceScreenshots, index })
+                "
+              />
+              <el-button
+                size="small"
+                type="primary"
+                :icon="FullScreen"
+                circle
+                title="弹窗大图 (Esc关闭)"
+                @click="handleView(index)"
+              />
+              <el-button
+                size="small"
+                type="warning"
+                :icon="EditPen"
+                circle
+                title="在线编辑打码"
+                @click="handleEdit(shot)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-empty v-else description="该分类下暂无截图凭证" :image-size="80" />
+    </div>
+    <template #footer>
+      <el-button @click="emit('update:visible', false)">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.evidence-header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.evidence-item-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.evidence-code {
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: monospace;
+}
+
+.dialog-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: 14px;
+  max-height: 560px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.screenshot-card {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: all 0.25s ease;
+}
+
+.screenshot-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+  border-color: #93c5fd;
+}
+
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.image-wrapper img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.default-badge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: rgba(217, 119, 6, 0.95);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  z-index: 2;
+}
+
+.category-tag {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(
+    to top,
+    rgba(15, 23, 42, 0.9) 0%,
+    rgba(15, 23, 42, 0.4) 70%,
+    transparent 100%
+  );
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  padding: 14px 6px 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.image-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 3;
+}
+
+.screenshot-card:hover .image-overlay {
+  opacity: 1;
+}
+</style>
diff --git a/frontend/src/features/admin/components/AdminListingReviewPreviewDialog.vue b/frontend/src/features/admin/components/AdminListingReviewPreviewDialog.vue
new file mode 100644
index 0000000..f661eb2
--- /dev/null
+++ b/frontend/src/features/admin/components/AdminListingReviewPreviewDialog.vue
@@ -0,0 +1,655 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  ArrowLeft,
+  ArrowRight,
+  Close,
+  EditPen,
+  FullScreen,
+  Lock,
+  RefreshRight,
+  TopRight,
+  ZoomIn,
+  ZoomOut,
+} from '@element-plus/icons-vue'
+
+export interface PreviewScreenshotItem {
+  url: string
+  label: string
+  categoryKey?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    images: PreviewScreenshotItem[]
+    initialIndex?: number
+    isPeekMode?: boolean
+    previewUrls?: Record<string, string>
+  }>(),
+  {
+    initialIndex: 0,
+    isPeekMode: false,
+    previewUrls: () => ({}),
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'update:isPeekMode', value: boolean): void
+  (e: 'edit', payload: { shot: PreviewScreenshotItem; index: number }): void
+  (e: 'openRaw', url: string): void
+}>()
+
+const currentIndex = ref(0)
+const zoomScale = ref(1)
+const rotationDeg = ref(0)
+
+watch(
+  () => props.initialIndex,
+  newIdx => {
+    currentIndex.value = Math.max(0, Math.min(newIdx, props.images.length - 1))
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.visible,
+  visible => {
+    if (visible) {
+      zoomScale.value = 1
+      rotationDeg.value = 0
+    }
+  }
+)
+
+const currentItem = computed<PreviewScreenshotItem | null>(() => {
+  if (!props.images.length) return null
+  return props.images[currentIndex.value] || props.images[0] || null
+})
+
+const currentDisplayUrl = computed(() => {
+  if (!currentItem.value) return ''
+  return props.previewUrls[currentItem.value.url] || currentItem.value.url
+})
+
+const imageTransformStyle = computed(() => ({
+  transform: `scale(${zoomScale.value}) rotate(${rotationDeg.value}deg)`,
+  transition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+}))
+
+function handlePrev() {
+  if (currentIndex.value > 0) {
+    currentIndex.value -= 1
+    resetTransform()
+  } else if (props.images.length > 1) {
+    currentIndex.value = props.images.length - 1
+    resetTransform()
+  }
+}
+
+function handleNext() {
+  if (currentIndex.value < props.images.length - 1) {
+    currentIndex.value += 1
+    resetTransform()
+  } else if (props.images.length > 1) {
+    currentIndex.value = 0
+    resetTransform()
+  }
+}
+
+function handleZoomIn() {
+  zoomScale.value = Math.min(3, +(zoomScale.value + 0.25).toFixed(2))
+}
+
+function handleZoomOut() {
+  zoomScale.value = Math.max(0.5, +(zoomScale.value - 0.25).toFixed(2))
+}
+
+function handleResetZoom() {
+  zoomScale.value = 1
+  rotationDeg.value = 0
+}
+
+function handleRotate() {
+  rotationDeg.value = (rotationDeg.value + 90) % 360
+}
+
+function resetTransform() {
+  zoomScale.value = 1
+  rotationDeg.value = 0
+}
+
+function lockToDialog() {
+  emit('update:isPeekMode', false)
+}
+
+function handleClose() {
+  emit('update:visible', false)
+  emit('update:isPeekMode', false)
+}
+
+function handleEdit() {
+  if (currentItem.value) {
+    emit('edit', { shot: currentItem.value, index: currentIndex.value })
+    handleClose()
+  }
+}
+
+function handleOpenRaw() {
+  if (currentItem.value) {
+    emit('openRaw', currentItem.value.url)
+  }
+}
+
+function handleGlobalMouseUp() {
+  if (props.visible && props.isPeekMode) {
+    handleClose()
+  }
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (!props.visible) return
+
+  if (e.key === 'Escape') {
+    e.stopPropagation()
+    handleClose()
+  } else if (e.key === 'ArrowLeft') {
+    e.stopPropagation()
+    handlePrev()
+  } else if (e.key === 'ArrowRight') {
+    e.stopPropagation()
+    handleNext()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('mouseup', handleGlobalMouseUp)
+  window.addEventListener('touchend', handleGlobalMouseUp)
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mouseup', handleGlobalMouseUp)
+  window.removeEventListener('touchend', handleGlobalMouseUp)
+  window.removeEventListener('keydown', handleKeyDown)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="preview-fade">
+      <div
+        v-if="visible && currentItem"
+        class="admin-preview-overlay"
+        :class="{ 'is-peek': isPeekMode }"
+        @click.self="handleClose"
+      >
+        <!-- Peek Mode Floating Top Status Bar -->
+        <div v-if="isPeekMode" class="peek-hud-pill">
+          <span class="hud-dot" />
+          <span class="hud-text">按住速览中 · 松开鼠标自动关闭</span>
+          <button class="hud-btn-lock" type="button" @click.stop="lockToDialog">
+            <el-icon><Lock /></el-icon>
+            <span>固定为弹窗</span>
+          </button>
+        </div>
+
+        <!-- Dialog Container -->
+        <div class="admin-preview-container" :class="{ 'is-peek': isPeekMode }">
+          <!-- Top Header -->
+          <div class="preview-header">
+            <div class="header-left">
+              <span class="category-pill">{{ currentItem.label }}</span>
+              <span v-if="images.length > 1" class="index-badge">
+                {{ currentIndex + 1 }} / {{ images.length }}
+              </span>
+              <span v-if="!isPeekMode" class="hotkey-tip">快捷键：← / → 翻页 · Esc 退出</span>
+            </div>
+
+            <!-- Toolbar Controls -->
+            <div class="header-toolbar">
+              <button
+                class="tool-btn"
+                title="缩小"
+                type="button"
+                :disabled="zoomScale <= 0.5"
+                @click="handleZoomOut"
+              >
+                <el-icon><ZoomOut /></el-icon>
+              </button>
+              <button
+                class="tool-btn reset-btn"
+                title="还原比例"
+                type="button"
+                @click="handleResetZoom"
+              >
+                {{ Math.round(zoomScale * 100) }}%
+              </button>
+              <button
+                class="tool-btn"
+                title="放大"
+                type="button"
+                :disabled="zoomScale >= 3"
+                @click="handleZoomIn"
+              >
+                <el-icon><ZoomIn /></el-icon>
+              </button>
+              <button class="tool-btn" title="顺时针旋转 90°" type="button" @click="handleRotate">
+                <el-icon><RefreshRight /></el-icon>
+              </button>
+              <button
+                class="tool-btn"
+                title="新标签页打开原图"
+                type="button"
+                @click="handleOpenRaw"
+              >
+                <el-icon><TopRight /></el-icon>
+              </button>
+              <button
+                class="tool-btn close-btn"
+                title="关闭预览 (Esc)"
+                type="button"
+                @click="handleClose"
+              >
+                <el-icon><Close /></el-icon>
+              </button>
+            </div>
+          </div>
+
+          <!-- Main Image Viewport -->
+          <div class="preview-body" @click.self="handleClose">
+            <!-- Left Arrow -->
+            <button
+              v-if="images.length > 1"
+              class="nav-btn prev-btn"
+              title="上一张 (←)"
+              type="button"
+              @click.stop="handlePrev"
+            >
+              <el-icon><ArrowLeft /></el-icon>
+            </button>
+
+            <!-- Image Stage -->
+            <div class="image-stage" @click.self="handleClose">
+              <img
+                :src="currentDisplayUrl"
+                :alt="currentItem.label"
+                :style="imageTransformStyle"
+                class="preview-image"
+                draggable="false"
+              />
+            </div>
+
+            <!-- Right Arrow -->
+            <button
+              v-if="images.length > 1"
+              class="nav-btn next-btn"
+              title="下一张 (→)"
+              type="button"
+              @click.stop="handleNext"
+            >
+              <el-icon><ArrowRight /></el-icon>
+            </button>
+          </div>
+
+          <!-- Footer Action Bar -->
+          <div class="preview-footer">
+            <div class="footer-left">
+              <span class="file-info">{{ currentItem.label }}</span>
+            </div>
+            <div class="footer-actions">
+              <button class="action-btn edit-btn" type="button" @click="handleEdit">
+                <el-icon><EditPen /></el-icon>
+                <span>在线编辑 / 马赛克打码</span>
+              </button>
+              <button class="action-btn secondary-btn" type="button" @click="handleOpenRaw">
+                <el-icon><FullScreen /></el-icon>
+                <span>浏览器原图</span>
+              </button>
+              <button class="action-btn close-action-btn" type="button" @click="handleClose">
+                <span>关闭预览 (Esc)</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.preview-fade-enter-active,
+.preview-fade-leave-active {
+  transition:
+    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.preview-fade-enter-from,
+.preview-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+.admin-preview-overlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 3500;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(10, 15, 29, 0.88);
+  backdrop-filter: blur(8px);
+  padding: 24px;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.peek-hud-pill {
+  position: absolute;
+  top: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 16px;
+  border-radius: 999px;
+  background: rgba(30, 41, 59, 0.92);
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  color: #f8fafc;
+  font-size: 13px;
+  font-weight: 600;
+  z-index: 3600;
+  animation: hudPulse 2s infinite ease-in-out;
+}
+
+@keyframes hudPulse {
+  0%,
+  100% {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+  50% {
+    box-shadow:
+      0 8px 28px rgba(59, 130, 246, 0.35),
+      0 0 0 1px rgba(96, 165, 250, 0.4);
+  }
+}
+
+.hud-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #38bdf8;
+  box-shadow: 0 0 8px #38bdf8;
+}
+
+.hud-btn-lock {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: #2563eb;
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  padding: 3px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.hud-btn-lock:hover {
+  background: #1d4ed8;
+}
+
+.admin-preview-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1060px;
+  max-height: 88vh;
+  background: #0f172a;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 14px;
+  box-shadow:
+    0 24px 60px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+  animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes modalPop {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 18px;
+  background: rgba(15, 23, 42, 0.95);
+  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.category-pill {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 700;
+  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
+}
+
+.index-badge {
+  color: #94a3b8;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: monospace;
+}
+
+.hotkey-tip {
+  color: #64748b;
+  font-size: 12px;
+  margin-left: 8px;
+}
+
+.header-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: rgba(51, 65, 85, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  color: #e2e8f0;
+  font-size: 15px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tool-btn:hover:not(:disabled) {
+  background: rgba(71, 85, 105, 0.8);
+  color: #ffffff;
+  border-color: rgba(148, 163, 184, 0.3);
+}
+
+.tool-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tool-btn.reset-btn {
+  width: auto;
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.tool-btn.close-btn:hover {
+  background: #ef4444;
+  border-color: #ef4444;
+  color: #ffffff;
+}
+
+.preview-body {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 420px;
+  max-height: calc(88vh - 120px);
+  background: #020617;
+  overflow: hidden;
+  padding: 16px;
+}
+
+.image-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: calc(88vh - 160px);
+  object-fit: contain;
+  border-radius: 6px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  transform-origin: center center;
+}
+
+.nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(30, 41, 59, 0.75);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  color: #f8fafc;
+  font-size: 20px;
+  cursor: pointer;
+  z-index: 10;
+  backdrop-filter: blur(4px);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-btn:hover {
+  background: rgba(37, 99, 235, 0.9);
+  color: #ffffff;
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
+}
+
+.prev-btn {
+  left: 20px;
+}
+
+.next-btn {
+  right: 20px;
+}
+
+.preview-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 18px;
+  background: rgba(15, 23, 42, 0.95);
+  border-top: 1px solid rgba(51, 65, 85, 0.6);
+}
+
+.file-info {
+  color: #94a3b8;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.edit-btn {
+  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
+}
+
+.edit-btn:hover {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  transform: translateY(-1px);
+}
+
+.secondary-btn {
+  background: rgba(51, 65, 85, 0.6);
+  border-color: rgba(148, 163, 184, 0.2);
+  color: #e2e8f0;
+}
+
+.secondary-btn:hover {
+  background: rgba(71, 85, 105, 0.8);
+  color: #ffffff;
+}
+
+.close-action-btn {
+  background: transparent;
+  color: #94a3b8;
+  border-color: rgba(148, 163, 184, 0.15);
+}
+
+.close-action-btn:hover {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #f87171;
+}
+</style>
diff --git a/frontend/src/features/admin/components/AdminListingReviewPriceDialog.vue b/frontend/src/features/admin/components/AdminListingReviewPriceDialog.vue
new file mode 100644
index 0000000..e44597e
--- /dev/null
+++ b/frontend/src/features/admin/components/AdminListingReviewPriceDialog.vue
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { Listing } from '@/features/listings'
+import { centToYuan, formatMoneyWithSymbol, yuanToCent } from '@/shared/utils/money'
+import { getCoinWan, getListingConsumablePrice } from '@/shared/utils/listingDisplay'
+
+const props = defineProps<{
+  visible: boolean
+  listing: Listing | null
+  loading: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (
+    e: 'save',
+    payload: {
+      listingId: number
+      payload: { buyer_ratio?: number; buyer_total_price_cent?: number; reason: string }
+    }
+  ): void
+}>()
+
+const priceAdjustMode = ref<'ratio' | 'price'>('ratio')
+const priceAdjustForm = reactive({
+  buyer_ratio: 0,
+  buyer_total_price: 0,
+  reason: '',
+})
+
+watch(
+  () => [props.visible, props.listing] as const,
+  ([visible, listing]) => {
+    if (visible && listing) {
+      priceAdjustMode.value = 'ratio'
+      priceAdjustForm.buyer_ratio = buyerRatio(listing)
+      priceAdjustForm.buyer_total_price = buyerTotalPrice(listing)
+      priceAdjustForm.reason = ''
+    }
+  }
+)
+
+watch(priceAdjustMode, (mode, previousMode) => {
+  if (!props.listing || !previousMode || mode === previousMode) return
+  const preview = calculatePriceAdjustPreview(props.listing, previousMode)
+  if (mode === 'price') {
+    priceAdjustForm.buyer_total_price = preview.buyerTotalPrice || buyerTotalPrice(props.listing)
+  } else {
+    priceAdjustForm.buyer_ratio = preview.buyerRatio || buyerRatio(props.listing)
+  }
+})
+
+const priceAdjustPreview = computed(() =>
+  props.listing ? calculatePriceAdjustPreview(props.listing) : null
+)
+
+function money(value: number) {
+  return formatMoneyWithSymbol(value)
+}
+
+function quantity(value: number) {
+  const rounded = Math.round(Number(value || 0) * 10) / 10
+  return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(1)
+}
+
+function ratioText(value: number) {
+  return value > 0 ? `1:${quantity(value)}` : '-'
+}
+
+function previewMoney(value: number) {
+  return value > 0 ? money(value) : '--'
+}
+
+function roundPreviewMoney(value: number) {
+  if (!Number.isFinite(value) || value <= 0) return 0
+  return Math.round(value * 10) / 10
+}
+
+function roundPreviewRatio(value: number) {
+  if (!Number.isFinite(value) || value <= 0) return 0
+  return Math.round(value * 10) / 10
+}
+
+function priceBreakdown(row: Listing) {
+  const breakdown = row.asset_summary?.price_breakdown
+  return typeof breakdown === 'object' && breakdown !== null
+    ? (breakdown as Record<string, unknown>)
+    : {}
+}
+
+function breakdownNumber(row: Listing, key: string) {
+  const value = priceBreakdown(row)[key]
+  if (typeof value === 'number') return value
+  if (typeof value === 'string' && value.trim()) {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : 0
+  }
+  return 0
+}
+
+function sellerTotalPrice(row: Listing) {
+  const value = breakdownNumber(row, 'seller_total_price')
+  if (value > 0) return value
+  const price = centToYuan(row.price_cent)
+  const fallback = price - getListingConsumablePrice(row)
+  return fallback > 0 ? fallback : price
+}
+
+function sellerCoinBasePrice(row: Listing) {
+  const value = breakdownNumber(row, 'seller_coin_base_price')
+  if (value > 0) return value
+  return Math.max(0, sellerTotalPrice(row) - getListingConsumablePrice(row))
+}
+
+function sellerRatio(row: Listing) {
+  const value =
+    breakdownNumber(row, 'seller_ratio') || breakdownNumber(row, 'seller_reference_ratio')
+  if (value > 0) return value
+  const base = sellerCoinBasePrice(row)
+  return base > 0 ? getCoinWan(row) / base : 0
+}
+
+function buyerTotalPrice(row: Listing) {
+  const value = breakdownNumber(row, 'buyer_total_price')
+  return value > 0 ? value : centToYuan(row.price_cent)
+}
+
+function buyerCoinBasePrice(row: Listing) {
+  const value = breakdownNumber(row, 'buyer_coin_base_price')
+  if (value > 0) return value
+  return Math.max(0, buyerTotalPrice(row) - getListingConsumablePrice(row))
+}
+
+function buyerRatio(row: Listing) {
+  const value = breakdownNumber(row, 'buyer_ratio')
+  if (value > 0) return value
+  const base = buyerCoinBasePrice(row)
+  return base > 0 ? getCoinWan(row) / base : 0
+}
+
+function calculatePriceAdjustPreview(
+  row: Listing,
+  mode: 'ratio' | 'price' = priceAdjustMode.value
+) {
+  const consumablePrice = getListingConsumablePrice(row)
+  const coinWan = getCoinWan(row)
+  if (mode === 'price') {
+    const buyerTotalPrice = roundPreviewMoney(Number(priceAdjustForm.buyer_total_price || 0))
+    const buyerCoinBasePrice = roundPreviewMoney(buyerTotalPrice - consumablePrice)
+    const buyerRatio = buyerCoinBasePrice > 0 ? roundPreviewRatio(coinWan / buyerCoinBasePrice) : 0
+    return { buyerCoinBasePrice, buyerTotalPrice, buyerRatio }
+  }
+  const buyerRatioInput = Number(priceAdjustForm.buyer_ratio || 0)
+  const buyerCoinBasePrice = buyerRatioInput > 0 ? roundPreviewMoney(coinWan / buyerRatioInput) : 0
+  const buyerTotalPrice =
+    buyerCoinBasePrice > 0 ? roundPreviewMoney(buyerCoinBasePrice + consumablePrice) : 0
+  const buyerRatio = buyerCoinBasePrice > 0 ? roundPreviewRatio(coinWan / buyerCoinBasePrice) : 0
+  return { buyerCoinBasePrice, buyerTotalPrice, buyerRatio }
+}
+
+function handleSave() {
+  if (!props.listing) return
+  const payload =
+    priceAdjustMode.value === 'ratio'
+      ? {
+          buyer_ratio: Number(priceAdjustForm.buyer_ratio || 0),
+          reason: priceAdjustForm.reason.trim(),
+        }
+      : {
+          buyer_total_price_cent: yuanToCent(Number(priceAdjustForm.buyer_total_price || 0)),
+          reason: priceAdjustForm.reason.trim(),
+        }
+  if ((payload.buyer_ratio || payload.buyer_total_price_cent || 0) <= 0) {
+    ElMessage.warning('请填写有效的加价后比例或价格')
+    return
+  }
+  emit('save', {
+    listingId: props.listing.id,
+    payload,
+  })
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="visible"
+    title="调整审核定价"
+    width="580px"
+    append-to-body
+    @update:model-value="emit('update:visible', $event)"
+  >
+    <div v-if="listing" class="dialog-body price-adjust-dialog">
+      <div class="adjust-preview-grid">
+        <div class="preview-box">
+          <span class="box-label">卖家发布价</span>
+          <strong class="box-val">{{ money(sellerTotalPrice(listing)) }}</strong>
+          <small>底价比例: {{ ratioText(sellerRatio(listing)) }}</small>
+        </div>
+        <div class="preview-box preview-box--highlight">
+          <span class="box-label">调整后买家展示价</span>
+          <strong class="box-val highlight-val">
+            {{ previewMoney(priceAdjustPreview?.buyerTotalPrice || 0) }}
+          </strong>
+          <small>含消耗品: {{ money(getListingConsumablePrice(listing)) }}</small>
+        </div>
+        <div class="preview-box">
+          <span class="box-label">调整后比例</span>
+          <strong class="box-val highlight-val">
+            {{ ratioText(priceAdjustPreview?.buyerRatio || 0) }}
+          </strong>
+          <small>纯币: {{ previewMoney(priceAdjustPreview?.buyerCoinBasePrice || 0) }}</small>
+        </div>
+      </div>
+
+      <div class="adjust-mode-section">
+        <el-radio-group v-model="priceAdjustMode" class="adjust-mode">
+          <el-radio-button label="ratio">按加价后比例调整</el-radio-button>
+          <el-radio-button label="price">按买家端总售价调整</el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <div class="adjust-fields-box">
+        <label v-if="priceAdjustMode === 'ratio'" class="adjust-field">
+          <span class="field-title">调整后买家比例 (哈夫币万 / 元)</span>
+          <el-input-number
+            v-model="priceAdjustForm.buyer_ratio"
+            :min="0.1"
+            :step="0.5"
+            :precision="1"
+            controls-position="right"
+          />
+        </label>
+        <label v-else class="adjust-field">
+          <span class="field-title">调整后买家端展示总售价 (元)</span>
+          <el-input-number
+            v-model="priceAdjustForm.buyer_total_price"
+            :min="1"
+            :step="10"
+            :precision="0"
+            controls-position="right"
+          />
+        </label>
+
+        <label class="adjust-field">
+          <span class="field-title">调价原因 (内部记录与审计追踪)</span>
+          <el-input
+            v-model="priceAdjustForm.reason"
+            type="textarea"
+            :rows="3"
+            maxlength="100"
+            show-word-limit
+            placeholder="例如：市场比例波动调整、大额号主协商加点、外部渠道定价校准等"
+          />
+        </label>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="emit('update:visible', false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleSave"> 保存并更新价格 </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.adjust-preview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.preview-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.preview-box--highlight {
+  border-color: #93c5fd;
+  background: #eff6ff;
+}
+
+.box-label {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.box-val {
+  color: #0f172a;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.highlight-val {
+  color: #2563eb;
+}
+
+.preview-box small {
+  color: #64748b;
+  font-size: 11px;
+}
+
+.adjust-mode-section {
+  margin-bottom: 14px;
+}
+
+.adjust-mode {
+  width: 100%;
+}
+
+.adjust-mode :deep(.el-radio-button) {
+  width: 50%;
+}
+
+.adjust-mode :deep(.el-radio-button__inner) {
+  width: 100%;
+  font-weight: 700;
+}
+
+.adjust-fields-box {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.adjust-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-title {
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.adjust-field :deep(.el-input-number) {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/features/admin/components/AdminListingReviewRejectDialog.vue b/frontend/src/features/admin/components/AdminListingReviewRejectDialog.vue
new file mode 100644
index 0000000..108a95c
--- /dev/null
+++ b/frontend/src/features/admin/components/AdminListingReviewRejectDialog.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Check, InfoFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import type { Listing } from '@/features/listings'
+import { formatListingCode, readAssetString } from '@/shared/utils/listingDisplay'
+
+const props = defineProps<{
+  visible: boolean
+  listing: Listing | null
+  submitting: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'reject', payload: { listingId: number; reason: string }): void
+}>()
+
+const rejectReasonOptions = [
+  '默认截图，需补充真实截图',
+  '账号资产信息不完整',
+  '价格或押金异常',
+  '封禁记录需补充说明',
+  '联系方式异常',
+  '截图与所填信息不符',
+  '缺少安全中心实机截图',
+]
+
+const rejectReason = ref('')
+
+watch(
+  () => [props.visible, props.listing] as const,
+  ([visible, listing]) => {
+    if (visible && listing) {
+      rejectReason.value = listing.review_reason || ''
+      const ban = readAssetString(listing, 'ban_record')
+      const hasBan = ban && ban !== '-' && !ban.includes('无')
+      const hasDefaultShot = listing.screenshot_urls?.some(url =>
+        url.includes('/api/listings/default-upload-screenshot')
+      )
+
+      if (hasBan && !rejectReason.value.includes('封禁记录')) {
+        toggleRejectReason('封禁记录需补充说明')
+      } else if (hasDefaultShot && !rejectReason.value.includes('默认截图')) {
+        toggleRejectReason('默认截图，需补充真实截图')
+      }
+    }
+  }
+)
+
+function toggleRejectReason(reason: string) {
+  const current = rejectReason.value.trim()
+  if (!current) {
+    rejectReason.value = reason
+    return
+  }
+  const parts = current
+    .split(/[；;]/)
+    .map(p => p.trim())
+    .filter(Boolean)
+  const idx = parts.indexOf(reason)
+  if (idx >= 0) {
+    parts.splice(idx, 1)
+  } else {
+    parts.push(reason)
+  }
+  rejectReason.value = parts.join('；')
+}
+
+function isReasonSelected(reason: string) {
+  const parts = rejectReason.value
+    .split(/[；;]/)
+    .map(p => p.trim())
+    .filter(Boolean)
+  return parts.includes(reason)
+}
+
+function handleConfirm() {
+  if (!props.listing) return
+  const reason = rejectReason.value.trim()
+  if (!reason) {
+    ElMessage.warning('请填写拒绝原因')
+    return
+  }
+  emit('reject', {
+    listingId: props.listing.id,
+    reason,
+  })
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="visible"
+    title="拒绝发布商品"
+    width="640px"
+    append-to-body
+    @update:model-value="emit('update:visible', $event)"
+  >
+    <div v-if="listing" class="dialog-body reject-dialog">
+      <div class="dialog-item-header">
+        <span class="dialog-code">#{{ formatListingCode(listing) }}</span>
+        <strong>{{ listing.title }}</strong>
+      </div>
+
+      <div class="reject-quick-tags">
+        <p class="quick-tags-title">快捷原因选择（点击可追加或取消）：</p>
+        <div class="quick-tags-list">
+          <button
+            v-for="reason in rejectReasonOptions"
+            :key="reason"
+            type="button"
+            class="quick-reason-pill"
+            :class="{ selected: isReasonSelected(reason) }"
+            @click="toggleRejectReason(reason)"
+          >
+            <el-icon v-if="isReasonSelected(reason)"><Check /></el-icon>
+            {{ reason }}
+          </button>
+        </div>
+      </div>
+
+      <div class="reject-input-block">
+        <el-input
+          v-model="rejectReason"
+          type="textarea"
+          :rows="4"
+          maxlength="200"
+          show-word-limit
+          placeholder="请详细填写审核拒绝原因，将通过短信与站内信通知号主修改后重新提交..."
+        />
+      </div>
+      <div class="reject-tip">
+        <el-icon><InfoFilled /></el-icon>
+        号主修改后可重新提交审核，原商品信息将进入已下架/待重新发布状态。
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="emit('update:visible', false)">取消</el-button>
+      <el-button
+        type="danger"
+        :loading="submitting"
+        :disabled="!rejectReason.trim()"
+        @click="handleConfirm"
+      >
+        确认拒绝并通知号主
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.dialog-item-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.dialog-code {
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: monospace;
+}
+
+.reject-quick-tags {
+  margin-bottom: 14px;
+}
+
+.quick-tags-title {
+  margin: 0 0 8px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.quick-tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.quick-reason-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  background: #ffffff;
+  padding: 5px 10px;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.quick-reason-pill:hover {
+  border-color: #2563eb;
+  color: #2563eb;
+}
+
+.quick-reason-pill.selected {
+  border-color: #2563eb;
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.reject-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+  color: #64748b;
+  font-size: 12px;
+}
+</style>
diff --git a/frontend/src/features/admin/components/AdminListingReviewShortcutsDialog.vue b/frontend/src/features/admin/components/AdminListingReviewShortcutsDialog.vue
new file mode 100644
index 0000000..7c67648
--- /dev/null
+++ b/frontend/src/features/admin/components/AdminListingReviewShortcutsDialog.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
+</script>
+
+<template>
+  <el-dialog
+    :model-value="visible"
+    title="审核工作台快捷键指南"
+    width="480px"
+    append-to-body
+    @update:model-value="emit('update:visible', $event)"
+  >
+    <div class="shortcuts-guide-table">
+      <div class="shortcut-row">
+        <kbd class="key-badge">↑</kbd> 或 <kbd class="key-badge">K</kbd>
+        <span class="key-desc">切换选中上一个商品</span>
+      </div>
+      <div class="shortcut-row">
+        <kbd class="key-badge">↓</kbd> 或 <kbd class="key-badge">J</kbd>
+        <span class="key-desc">切换选中下一个商品</span>
+      </div>
+      <div class="shortcut-row">
+        <kbd class="key-badge">Alt</kbd> + <kbd class="key-badge">A</kbd> 或
+        <kbd class="key-badge">A</kbd>
+        <span class="key-desc">审核通过并立即上架</span>
+      </div>
+      <div class="shortcut-row">
+        <kbd class="key-badge">Alt</kbd> + <kbd class="key-badge">R</kbd> 或
+        <kbd class="key-badge">R</kbd>
+        <span class="key-desc">打开拒绝审核弹窗</span>
+      </div>
+      <div class="shortcut-row">
+        <kbd class="key-badge">Alt</kbd> + <kbd class="key-badge">P</kbd> 或
+        <kbd class="key-badge">P</kbd>
+        <span class="key-desc">打开价格调整弹窗</span>
+      </div>
+      <div class="shortcut-row">
+        <kbd class="key-badge">Esc</kbd>
+        <span class="key-desc">关闭当前弹窗或画廊预览</span>
+      </div>
+      <div class="shortcut-row">
+        <kbd class="key-badge">?</kbd>
+        <span class="key-desc">随时查看本快捷键指南</span>
+      </div>
+    </div>
+    <template #footer>
+      <el-button type="primary" @click="emit('update:visible', false)">知道了</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.shortcuts-guide-table {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.shortcut-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+  font-size: 13px;
+}
+
+.key-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1px solid #cbd5e1;
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #0f172a;
+  font-family: monospace;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.key-desc {
+  margin-left: auto;
+  color: #475569;
+  font-weight: 600;
+}
+</style>
diff --git a/frontend/src/features/admin/components/ImageEditorDialog.vue b/frontend/src/features/admin/components/ImageEditorDialog.vue
new file mode 100644
index 0000000..5cfdde2
--- /dev/null
+++ b/frontend/src/features/admin/components/ImageEditorDialog.vue
@@ -0,0 +1,888 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { Delete, FullScreen, RefreshLeft, ZoomIn, ZoomOut } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { fetchAdminFileBlob, fetchFileBlobByURL, uploadAdminFile } from '@/shared/api/files'
+import { adminUpdateListingScreenshots, type Listing } from '@/features/listings'
+import { readError } from '@/shared/utils/error'
+
+const props = defineProps<{
+  visible: boolean
+  listing: Listing | null
+  imageUrl: string
+  imageLabel: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'saved', payload: { oldUrl: string; newUrl: string }): void
+}>()
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const containerRef = ref<HTMLDivElement | null>(null)
+
+// 编辑状态
+type ToolMode = 'view' | 'mosaic' | 'crop'
+const currentTool = ref<ToolMode>('mosaic')
+const mosaicBrushSize = ref<number>(24) // 16, 24, 36, 48
+const mosaicBlockSize = 8 // 马赛克块大小
+
+// 缩放与视图
+const zoomLevel = ref<number>(1)
+const loading = ref<boolean>(false)
+const saving = ref<boolean>(false)
+
+// 撤销历史栈
+const undoStack = ref<ImageData[]>([])
+let originalImageData: ImageData | null = null
+let activeObjectURL: string | null = null
+
+// 裁剪框状态 (以画布原始像素为基准)
+const cropRect = ref<{ x: number; y: number; width: number; height: number } | null>(null)
+const isCropping = ref<boolean>(false)
+let cropDragMode: string | null = null
+let cropStartX = 0
+let cropStartY = 0
+let cropStartRect = { x: 0, y: 0, width: 0, height: 0 }
+
+// 绘画状态
+let isDrawing = false
+let lastDrawPos: { x: number; y: number } | null = null
+
+watch(
+  () => props.visible,
+  visible => {
+    if (visible && props.imageUrl) {
+      nextTick(() => {
+        initEditor()
+      })
+    } else {
+      cleanup()
+    }
+  }
+)
+
+function cleanup() {
+  if (activeObjectURL) {
+    URL.revokeObjectURL(activeObjectURL)
+    activeObjectURL = null
+  }
+  undoStack.value = []
+  originalImageData = null
+  cropRect.value = null
+  currentTool.value = 'mosaic'
+}
+
+onBeforeUnmount(cleanup)
+
+function extractObjectKey(url: string) {
+  try {
+    const parsed = new URL(url, window.location.origin)
+    return parsed.searchParams.get('key') || ''
+  } catch {
+    return ''
+  }
+}
+
+async function initEditor() {
+  loading.value = true
+  try {
+    let blob: Blob
+    const key = extractObjectKey(props.imageUrl)
+    if (key) {
+      blob = await fetchAdminFileBlob(key)
+    } else {
+      blob = await fetchFileBlobByURL(props.imageUrl)
+    }
+
+    if (activeObjectURL) {
+      URL.revokeObjectURL(activeObjectURL)
+    }
+    activeObjectURL = URL.createObjectURL(blob)
+
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    await new Promise((resolve, reject) => {
+      img.onload = resolve
+      img.onerror = reject
+      img.src = activeObjectURL!
+    })
+
+    const canvas = canvasRef.value
+    if (!canvas) return
+    const ctx = canvas.getContext('2d', { willReadFrequently: true })
+    if (!ctx) return
+
+    canvas.width = img.naturalWidth
+    canvas.height = img.naturalHeight
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.drawImage(img, 0, 0)
+
+    originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+    undoStack.value = [ctx.getImageData(0, 0, canvas.width, canvas.height)]
+
+    fitToContainer()
+    currentTool.value = 'mosaic'
+  } catch (error) {
+    ElMessage.error(readError(error, '加载图片失败，请重试'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function fitToContainer() {
+  const container = containerRef.value
+  const canvas = canvasRef.value
+  if (!container || !canvas) return
+
+  const containerW = container.clientWidth - 48
+  const containerH = container.clientHeight - 48
+  if (containerW <= 0 || containerH <= 0) return
+
+  const scaleW = containerW / canvas.width
+  const scaleH = containerH / canvas.height
+  zoomLevel.value = Math.min(1, Math.min(scaleW, scaleH))
+}
+
+// 坐标映射：视口鼠标事件 -> 画布内部像素坐标
+function getCanvasPos(e: MouseEvent): { x: number; y: number } {
+  const canvas = canvasRef.value
+  if (!canvas) return { x: 0, y: 0 }
+  const rect = canvas.getBoundingClientRect()
+  const scaleX = canvas.width / rect.width
+  const scaleY = canvas.height / rect.height
+  return {
+    x: Math.round((e.clientX - rect.left) * scaleX),
+    y: Math.round((e.clientY - rect.top) * scaleY),
+  }
+}
+
+// ---------------- 马赛克核心算法 ----------------
+function applyMosaic(cx: number, cy: number, radius: number) {
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  if (!ctx) return
+
+  const startX = Math.max(0, Math.floor(cx - radius))
+  const startY = Math.max(0, Math.floor(cy - radius))
+  const endX = Math.min(canvas.width, Math.ceil(cx + radius))
+  const endY = Math.min(canvas.height, Math.ceil(cy + radius))
+  const w = endX - startX
+  const h = endY - startY
+  if (w <= 0 || h <= 0) return
+
+  const imgData = ctx.getImageData(startX, startY, w, h)
+  const data = imgData.data
+  const bs = mosaicBlockSize
+
+  // 遍历块
+  for (let by = 0; by < h; by += bs) {
+    for (let bx = 0; bx < w; bx += bs) {
+      // 检查当前块中心是否在笔刷圆形范围内
+      const blockCenterX = startX + bx + bs / 2
+      const blockCenterY = startY + by + bs / 2
+      const dist = Math.hypot(blockCenterX - cx, blockCenterY - cy)
+      if (dist > radius) continue
+
+      let rSum = 0,
+        gSum = 0,
+        bSum = 0,
+        aSum = 0,
+        count = 0
+      const bw = Math.min(bs, w - bx)
+      const bh = Math.min(bs, h - by)
+
+      // 求平均值
+      for (let py = 0; py < bh; py++) {
+        for (let px = 0; px < bw; px++) {
+          const idx = ((by + py) * w + (bx + px)) * 4
+          rSum += data[idx] ?? 0
+          gSum += data[idx + 1] ?? 0
+          bSum += data[idx + 2] ?? 0
+          aSum += data[idx + 3] ?? 0
+          count++
+        }
+      }
+
+      if (count === 0) continue
+      const rAvg = Math.round(rSum / count)
+      const gAvg = Math.round(gSum / count)
+      const bAvg = Math.round(bSum / count)
+      const aAvg = Math.round(aSum / count)
+
+      // 填充块
+      for (let py = 0; py < bh; py++) {
+        for (let px = 0; px < bw; px++) {
+          const idx = ((by + py) * w + (bx + px)) * 4
+          data[idx] = rAvg
+          data[idx + 1] = gAvg
+          data[idx + 2] = bAvg
+          data[idx + 3] = aAvg
+        }
+      }
+    }
+  }
+
+  ctx.putImageData(imgData, startX, startY)
+}
+
+function handleMouseDown(e: MouseEvent) {
+  if (currentTool.value === 'mosaic') {
+    isDrawing = true
+    const pos = getCanvasPos(e)
+    lastDrawPos = pos
+    applyMosaic(pos.x, pos.y, mosaicBrushSize.value)
+  } else if (currentTool.value === 'crop') {
+    handleCropMouseDown(e)
+  }
+}
+
+function handleMouseMove(e: MouseEvent) {
+  if (currentTool.value === 'mosaic' && isDrawing) {
+    const pos = getCanvasPos(e)
+    if (lastDrawPos) {
+      // 线性插值，平滑打码连线
+      const dist = Math.hypot(pos.x - lastDrawPos.x, pos.y - lastDrawPos.y)
+      const step = Math.max(1, mosaicBrushSize.value / 3)
+      const count = Math.ceil(dist / step)
+      for (let i = 1; i <= count; i++) {
+        const t = i / count
+        const ix = lastDrawPos.x + (pos.x - lastDrawPos.x) * t
+        const iy = lastDrawPos.y + (pos.y - lastDrawPos.y) * t
+        applyMosaic(ix, iy, mosaicBrushSize.value)
+      }
+    } else {
+      applyMosaic(pos.x, pos.y, mosaicBrushSize.value)
+    }
+    lastDrawPos = pos
+  } else if (currentTool.value === 'crop') {
+    handleCropMouseMove(e)
+  }
+}
+
+function handleMouseUp() {
+  if (currentTool.value === 'mosaic' && isDrawing) {
+    isDrawing = false
+    lastDrawPos = null
+    pushUndoState()
+  } else if (currentTool.value === 'crop') {
+    handleCropMouseUp()
+  }
+}
+
+function pushUndoState() {
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+  const current = ctx.getImageData(0, 0, canvas.width, canvas.height)
+  undoStack.value.push(current)
+  if (undoStack.value.length > 20) {
+    undoStack.value.shift()
+  }
+}
+
+function handleUndo() {
+  if (undoStack.value.length <= 1) return
+  undoStack.value.pop() // 弹出当前状态
+  const prev = undoStack.value[undoStack.value.length - 1]
+  const canvas = canvasRef.value
+  if (!canvas || !prev) return
+  canvas.width = prev.width
+  canvas.height = prev.height
+  const ctx = canvas.getContext('2d')
+  if (ctx) {
+    ctx.putImageData(prev, 0, 0)
+  }
+  cropRect.value = null
+}
+
+function handleReset() {
+  if (!originalImageData) return
+  const canvas = canvasRef.value
+  if (!canvas) return
+  canvas.width = originalImageData.width
+  canvas.height = originalImageData.height
+  const ctx = canvas.getContext('2d')
+  if (ctx) {
+    ctx.putImageData(originalImageData, 0, 0)
+  }
+  undoStack.value = [originalImageData]
+  cropRect.value = null
+  currentTool.value = 'mosaic'
+  fitToContainer()
+  ElMessage.info('已恢复为原图')
+}
+
+// ---------------- 裁剪相关交互 ----------------
+function startCropMode() {
+  currentTool.value = 'crop'
+  const canvas = canvasRef.value
+  if (!canvas) return
+  // 默认选中中间 80%
+  const w = Math.round(canvas.width * 0.8)
+  const h = Math.round(canvas.height * 0.8)
+  const x = Math.round((canvas.width - w) / 2)
+  const y = Math.round((canvas.height - h) / 2)
+  cropRect.value = { x, y, width: w, height: h }
+}
+
+function handleCropMouseDown(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  const handle = target.dataset.handle
+  const pos = getCanvasPos(e)
+  if (handle) {
+    cropDragMode = handle
+  } else if (cropRect.value && isInsideCrop(pos.x, pos.y)) {
+    cropDragMode = 'move'
+  } else {
+    // 重新拉一个裁剪框
+    cropDragMode = 'create'
+    cropRect.value = { x: pos.x, y: pos.y, width: 0, height: 0 }
+  }
+  cropStartX = pos.x
+  cropStartY = pos.y
+  cropStartRect = cropRect.value
+    ? { ...cropRect.value }
+    : { x: pos.x, y: pos.y, width: 0, height: 0 }
+  isCropping.value = true
+}
+
+function isInsideCrop(cx: number, cy: number) {
+  if (!cropRect.value) return false
+  const r = cropRect.value
+  return cx >= r.x && cx <= r.x + r.width && cy >= r.y && cy <= r.y + r.height
+}
+
+function handleCropMouseMove(e: MouseEvent) {
+  if (!isCropping.value || !cropDragMode || !cropRect.value) return
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const pos = getCanvasPos(e)
+  const dx = pos.x - cropStartX
+  const dy = pos.y - cropStartY
+
+  if (cropDragMode === 'create') {
+    const x = Math.min(cropStartX, pos.x)
+    const y = Math.min(cropStartY, pos.y)
+    const width = Math.abs(pos.x - cropStartX)
+    const height = Math.abs(pos.y - cropStartY)
+    cropRect.value = {
+      x: Math.max(0, x),
+      y: Math.max(0, y),
+      width: Math.min(canvas.width - x, width),
+      height: Math.min(canvas.height - y, height),
+    }
+  } else if (cropDragMode === 'move') {
+    let nx = cropStartRect.x + dx
+    let ny = cropStartRect.y + dy
+    nx = Math.max(0, Math.min(canvas.width - cropStartRect.width, nx))
+    ny = Math.max(0, Math.min(canvas.height - cropStartRect.height, ny))
+    cropRect.value = {
+      ...cropStartRect,
+      x: nx,
+      y: ny,
+    }
+  } else if (cropDragMode === 'nw') {
+    const newX = Math.max(
+      0,
+      Math.min(cropStartRect.x + cropStartRect.width - 20, cropStartRect.x + dx)
+    )
+    const newY = Math.max(
+      0,
+      Math.min(cropStartRect.y + cropStartRect.height - 20, cropStartRect.y + dy)
+    )
+    cropRect.value = {
+      x: newX,
+      y: newY,
+      width: cropStartRect.x + cropStartRect.width - newX,
+      height: cropStartRect.y + cropStartRect.height - newY,
+    }
+  } else if (cropDragMode === 'se') {
+    const newW = Math.max(20, Math.min(canvas.width - cropStartRect.x, cropStartRect.width + dx))
+    const newH = Math.max(20, Math.min(canvas.height - cropStartRect.y, cropStartRect.height + dy))
+    cropRect.value = {
+      ...cropStartRect,
+      width: newW,
+      height: newH,
+    }
+  } else if (cropDragMode === 'ne') {
+    const newY = Math.max(
+      0,
+      Math.min(cropStartRect.y + cropStartRect.height - 20, cropStartRect.y + dy)
+    )
+    const newW = Math.max(20, Math.min(canvas.width - cropStartRect.x, cropStartRect.width + dx))
+    cropRect.value = {
+      x: cropStartRect.x,
+      y: newY,
+      width: newW,
+      height: cropStartRect.y + cropStartRect.height - newY,
+    }
+  } else if (cropDragMode === 'sw') {
+    const newX = Math.max(
+      0,
+      Math.min(cropStartRect.x + cropStartRect.width - 20, cropStartRect.x + dx)
+    )
+    const newH = Math.max(20, Math.min(canvas.height - cropStartRect.y, cropStartRect.height + dy))
+    cropRect.value = {
+      x: newX,
+      y: cropStartRect.y,
+      width: cropStartRect.x + cropStartRect.width - newX,
+      height: newH,
+    }
+  }
+}
+
+function handleCropMouseUp() {
+  isCropping.value = false
+  cropDragMode = null
+}
+
+function applyCrop() {
+  if (!cropRect.value) return
+  const r = cropRect.value
+  if (r.width < 10 || r.height < 10) {
+    ElMessage.warning('裁剪区域过小')
+    return
+  }
+
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const croppedData = ctx.getImageData(r.x, r.y, r.width, r.height)
+  canvas.width = r.width
+  canvas.height = r.height
+  ctx.putImageData(croppedData, 0, 0)
+
+  cropRect.value = null
+  currentTool.value = 'mosaic'
+  pushUndoState()
+  fitToContainer()
+  ElMessage.success('裁剪已应用')
+}
+
+function cancelCrop() {
+  cropRect.value = null
+  currentTool.value = 'mosaic'
+}
+
+// ---------------- 保存与替换 ----------------
+async function handleSave() {
+  const canvas = canvasRef.value
+  if (!canvas || !props.listing) return
+
+  saving.value = true
+  try {
+    const blob = await new Promise<Blob | null>(resolve => {
+      canvas.toBlob(resolve, 'image/jpeg', 0.92)
+    })
+    if (!blob) {
+      throw new Error('导出画布失败')
+    }
+
+    const file = new File([blob], `edited_screenshot_${Date.now()}.jpg`, { type: 'image/jpeg' })
+    const uploaded = await uploadAdminFile(file, 'listing_screenshot')
+    if (!uploaded || !uploaded.url) {
+      throw new Error('上传截图失败')
+    }
+
+    // 替换 listing 中的 screenshot_urls
+    const currentList = [...(props.listing.screenshot_urls || [])]
+    const targetIdx = currentList.findIndex(u => u === props.imageUrl)
+    if (targetIdx !== -1) {
+      currentList[targetIdx] = uploaded.url
+    } else {
+      currentList.push(uploaded.url)
+    }
+
+    // 同步替换 screenshot_groups 中的相应项
+    let updatedGroups: Record<string, unknown> | undefined = undefined
+    const groups = props.listing.asset_summary?.screenshot_groups
+    if (typeof groups === 'object' && groups !== null) {
+      const copyGroups: Record<string, unknown> = JSON.parse(JSON.stringify(groups))
+      for (const [key, val] of Object.entries(copyGroups)) {
+        if (Array.isArray(val)) {
+          copyGroups[key] = val.map(u => (u === props.imageUrl ? uploaded.url : u))
+        }
+      }
+      updatedGroups = copyGroups
+    }
+
+    await adminUpdateListingScreenshots(props.listing.id, {
+      screenshot_urls: currentList,
+      screenshot_groups: updatedGroups,
+    })
+
+    emit('saved', { oldUrl: props.imageUrl, newUrl: uploaded.url })
+    ElMessage.success('截图已成功更新并保存')
+    emit('update:visible', false)
+  } catch (error) {
+    ElMessage.error(readError(error, '保存失败，请稍后重试'))
+  } finally {
+    saving.value = false
+  }
+}
+
+// 辅助样式：裁剪遮罩计算
+const cropStyle = computed(() => {
+  if (!cropRect.value || !canvasRef.value) return {}
+  const canvas = canvasRef.value
+  const r = cropRect.value
+  return {
+    left: `${(r.x / canvas.width) * 100}%`,
+    top: `${(r.y / canvas.height) * 100}%`,
+    width: `${(r.width / canvas.width) * 100}%`,
+    height: `${(r.height / canvas.height) * 100}%`,
+  }
+})
+</script>
+
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="`编辑截图 · ${imageLabel || '账号截图'}`"
+    width="940px"
+    top="4vh"
+    destroy-on-close
+    class="image-editor-dialog"
+    @update:model-value="emit('update:visible', $event)"
+  >
+    <div v-loading="loading" class="editor-shell">
+      <!-- 顶部工具栏 -->
+      <div class="editor-toolbar">
+        <div class="tool-group">
+          <span class="tool-group-label">工具:</span>
+          <el-radio-group v-model="currentTool" size="small">
+            <el-radio-button value="mosaic">马赛克打码</el-radio-button>
+            <el-radio-button value="crop" @click="startCropMode">矩形裁剪</el-radio-button>
+          </el-radio-group>
+        </div>
+
+        <!-- 马赛克大小选项 -->
+        <div v-if="currentTool === 'mosaic'" class="tool-group mosaic-options">
+          <span class="tool-group-label">画笔大小:</span>
+          <div class="brush-size-chips">
+            <button
+              type="button"
+              class="size-chip"
+              :class="{ active: mosaicBrushSize === 16 }"
+              @click="mosaicBrushSize = 16"
+            >
+              小 (16px)
+            </button>
+            <button
+              type="button"
+              class="size-chip"
+              :class="{ active: mosaicBrushSize === 28 }"
+              @click="mosaicBrushSize = 28"
+            >
+              中 (28px)
+            </button>
+            <button
+              type="button"
+              class="size-chip"
+              :class="{ active: mosaicBrushSize === 44 }"
+              @click="mosaicBrushSize = 44"
+            >
+              大 (44px)
+            </button>
+          </div>
+        </div>
+
+        <!-- 裁剪操作按钮 -->
+        <div v-if="currentTool === 'crop'" class="tool-group crop-actions">
+          <el-button type="primary" size="small" @click="applyCrop">应用裁剪</el-button>
+          <el-button size="small" @click="cancelCrop">取消裁剪</el-button>
+        </div>
+
+        <div class="toolbar-divider"></div>
+
+        <!-- 历史与重置 -->
+        <div class="tool-group">
+          <el-tooltip content="撤销上一步" placement="top">
+            <el-button
+              size="small"
+              :icon="RefreshLeft"
+              :disabled="undoStack.length <= 1"
+              @click="handleUndo"
+            />
+          </el-tooltip>
+          <el-tooltip content="重置为原图" placement="top">
+            <el-button size="small" :icon="Delete" @click="handleReset" />
+          </el-tooltip>
+        </div>
+
+        <div class="toolbar-divider"></div>
+
+        <!-- 缩放操作 -->
+        <div class="tool-group zoom-group">
+          <el-tooltip content="放大" placement="top">
+            <el-button
+              size="small"
+              :icon="ZoomIn"
+              :disabled="zoomLevel >= 2"
+              @click="zoomLevel = Math.min(2, zoomLevel + 0.15)"
+            />
+          </el-tooltip>
+          <span class="zoom-text">{{ Math.round(zoomLevel * 100) }}%</span>
+          <el-tooltip content="缩小" placement="top">
+            <el-button
+              size="small"
+              :icon="ZoomOut"
+              :disabled="zoomLevel <= 0.2"
+              @click="zoomLevel = Math.max(0.2, zoomLevel - 0.15)"
+            />
+          </el-tooltip>
+          <el-tooltip content="适应屏幕" placement="top">
+            <el-button size="small" :icon="FullScreen" @click="fitToContainer" />
+          </el-tooltip>
+        </div>
+      </div>
+
+      <!-- 画布工作区 -->
+      <div
+        ref="containerRef"
+        class="canvas-workspace"
+        :class="`tool-${currentTool}`"
+        @mousedown="handleMouseDown"
+        @mousemove="handleMouseMove"
+        @mouseup="handleMouseUp"
+        @mouseleave="handleMouseUp"
+      >
+        <div
+          class="canvas-wrapper"
+          :style="{
+            transform: `scale(${zoomLevel})`,
+          }"
+        >
+          <canvas ref="canvasRef" class="editor-canvas" />
+
+          <!-- 裁剪框覆盖层 -->
+          <div
+            v-if="currentTool === 'crop' && cropRect"
+            class="crop-overlay-box"
+            :style="cropStyle"
+          >
+            <div class="crop-border"></div>
+            <!-- 八向控制手柄 -->
+            <div class="crop-handle nw" data-handle="nw"></div>
+            <div class="crop-handle ne" data-handle="ne"></div>
+            <div class="crop-handle sw" data-handle="sw"></div>
+            <div class="crop-handle se" data-handle="se"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部提示与尺寸说明 -->
+      <div class="editor-statusbar">
+        <span v-if="currentTool === 'mosaic'" class="status-hint">
+          💡 提示：在图片需要遮挡的敏感信息（账号ID、二维码等）上按住鼠标左键涂抹即可打马赛克。
+        </span>
+        <span v-else-if="currentTool === 'crop'" class="status-hint">
+          💡 提示：拖拽裁剪边框调整所选范围，调整完毕后点击上方「应用裁剪」。
+        </span>
+        <span v-if="canvasRef" class="status-meta">
+          画布尺寸：{{ canvasRef.width }} × {{ canvasRef.height }} 像素
+        </span>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="emit('update:visible', false)">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">保存并替换截图</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.editor-shell {
+  display: flex;
+  flex-direction: column;
+  height: 640px;
+  background: #0f172a;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 顶部操作条 */
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 16px;
+  background: #1e293b;
+  border-bottom: 1px solid #334155;
+  color: #f1f5f9;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.tool-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tool-group-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #94a3b8;
+}
+
+.toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background: #334155;
+  margin: 0 4px;
+}
+
+.brush-size-chips {
+  display: flex;
+  gap: 6px;
+}
+
+.size-chip {
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid #475569;
+  background: #334155;
+  color: #cbd5e1;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.size-chip:hover {
+  border-color: #ff8533;
+  color: #fff;
+}
+
+.size-chip.active {
+  background: #ff6a00;
+  border-color: #ff6a00;
+  color: #fff;
+}
+
+.zoom-text {
+  font-family: monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #cbd5e1;
+  min-width: 42px;
+  text-align: center;
+}
+
+/* 画布工作区 */
+.canvas-workspace {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  background: #0b1120;
+  background-image:
+    radial-gradient(#1e293b 1px, transparent 1px), radial-gradient(#1e293b 1px, #0b1120 1px);
+  background-size: 20px 20px;
+  background-position:
+    0 0,
+    10px 10px;
+}
+
+.canvas-workspace.tool-mosaic {
+  cursor: crosshair;
+}
+
+.canvas-workspace.tool-crop {
+  cursor: default;
+}
+
+.canvas-wrapper {
+  position: relative;
+  transform-origin: center center;
+  transition: transform 0.05s ease-out;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
+  user-select: none;
+}
+
+.editor-canvas {
+  display: block;
+  background: #fff;
+  border-radius: 4px;
+}
+
+/* 裁剪框 */
+.crop-overlay-box {
+  position: absolute;
+  pointer-events: auto;
+  border: 2px dashed #ff6a00;
+  background: rgba(255, 106, 0, 0.08);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
+  cursor: move;
+}
+
+.crop-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #ffffff;
+  border: 2px solid #ff6a00;
+  border-radius: 2px;
+}
+
+.crop-handle.nw {
+  top: -6px;
+  left: -6px;
+  cursor: nwse-resize;
+}
+.crop-handle.ne {
+  top: -6px;
+  right: -6px;
+  cursor: nesw-resize;
+}
+.crop-handle.sw {
+  bottom: -6px;
+  left: -6px;
+  cursor: nesw-resize;
+}
+.crop-handle.se {
+  bottom: -6px;
+  right: -6px;
+  cursor: nwse-resize;
+}
+
+/* 底部状态栏 */
+.editor-statusbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background: #1e293b;
+  border-top: 1px solid #334155;
+  font-size: 12px;
+  color: #94a3b8;
+  flex-shrink: 0;
+}
+
+.status-hint {
+  color: #e2e8f0;
+}
+
+.status-meta {
+  font-family: monospace;
+  color: #64748b;
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
diff --git a/frontend/src/features/admin/views/AdminListingReviewView.css b/frontend/src/features/admin/views/AdminListingReviewView.css
index 20599a7..dbb1b08 100644
--- a/frontend/src/features/admin/views/AdminListingReviewView.css
+++ b/frontend/src/features/admin/views/AdminListingReviewView.css
@@ -1,75 +1,160 @@
+/* ========== Admin Listing Review Page Styling ========== */
 .review-page {
-  min-height: calc(100vh - 128px);
+  min-height: calc(100vh - 120px);
+  padding-bottom: 80px;
 }
 
 .review-header {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
+  align-items: center;
 }
 
+.refresh-stamp {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 500;
+  margin-right: 8px;
+}
+
+/* ========== Top Summary Metric Cards ========== */
 .review-summary {
   display: grid;
-  grid-template-columns: repeat(4, minmax(120px, 1fr));
-  gap: 12px;
-  margin-bottom: 14px;
+  grid-template-columns: repeat(4, minmax(180px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
 }
 
 .summary-card {
+  position: relative;
   min-width: 0;
-  border: 1px solid #e8edf4;
-  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
   background: #ffffff;
-  padding: 14px 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  padding: 16px 20px;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
   text-align: left;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.summary-card-inner {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.summary-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  font-size: 22px;
+  flex-shrink: 0;
+  transition: transform 0.25s ease;
+}
+
+.summary-card-text {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.summary-card-text span {
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.summary-card-text strong {
+  margin: 4px 0 2px;
+  color: #0f172a;
+  font-size: 26px;
+  font-weight: 800;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.summary-card-text small {
+  color: #94a3b8;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* Thematic colors for cards */
+.summary-card--all .summary-card-icon {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.summary-card--external .summary-card-icon {
+  background: #f5f3ff;
+  color: #7c3aed;
+}
+
+.summary-card--warning .summary-card-icon {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.summary-card--danger .summary-card-icon {
+  background: #fef2f2;
+  color: #dc2626;
 }
 
 .summary-card:hover {
-  border-color: #1477ff;
-  box-shadow: 0 2px 8px rgba(20, 119, 255, 0.15);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
 }
 
-.summary-card.active {
-  border-color: #1477ff;
-  background: #1477ff;
-  box-shadow: 0 2px 8px rgba(20, 119, 255, 0.25);
+.summary-card:hover .summary-card-icon {
+  transform: scale(1.08);
 }
 
-.summary-card.active span {
-  color: #ffffff;
+/* Active Filter States */
+.summary-card--all.active {
+  border-color: #2563eb;
+  background: #f0f7ff;
+  box-shadow:
+    0 0 0 1px #2563eb,
+    0 6px 20px rgba(37, 99, 235, 0.15);
 }
 
-.summary-card.active strong {
-  color: #ffffff;
+.summary-card--external.active {
+  border-color: #7c3aed;
+  background: #faf5ff;
+  box-shadow:
+    0 0 0 1px #7c3aed,
+    0 6px 20px rgba(124, 58, 237, 0.15);
 }
 
-.review-summary span,
-.queue-footer span,
-.panel-title span,
-.inventory-grid span,
-.resource-table span,
-.price-decision-card span,
-.adjust-current span,
-.adjust-field span {
-  color: #8f9bba;
-  font-size: 12px;
-  font-weight: 600;
+.summary-card--warning.active {
+  border-color: #d97706;
+  background: #fffdf5;
+  box-shadow:
+    0 0 0 1px #d97706,
+    0 6px 20px rgba(217, 119, 6, 0.15);
 }
 
-.review-summary strong {
-  display: block;
-  margin-top: 5px;
-  color: #1b2559;
-  font-size: 24px;
-  font-weight: 800;
+.summary-card--danger.active {
+  border-color: #dc2626;
+  background: #fff5f5;
+  box-shadow:
+    0 0 0 1px #dc2626,
+    0 6px 20px rgba(220, 38, 38, 0.15);
 }
 
+/* ========== Review Workbench Split Layout ========== */
 .review-workbench {
   display: grid;
-  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
-  gap: 16px;
+  grid-template-columns: 380px minmax(0, 1fr);
+  gap: 20px;
   align-items: start;
 }
 
@@ -80,432 +165,1108 @@
   min-width: 0;
 }
 
+/* ========== Left: Queue Sidebar ========== */
 .review-queue {
   position: sticky;
   top: 16px;
-  border-radius: 8px;
+  height: calc(100vh - 120px);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
   background: #ffffff;
-  padding: 14px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
 }
 
 .queue-toolbar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 120px;
+  display: flex;
+  flex-direction: column;
   gap: 10px;
   margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.queue-filter-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.queue-select {
+  width: 100%;
+}
+
+.queue-count-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.shortcut-tip {
+  color: #94a3b8;
+  font-size: 11px;
 }
 
 .queue-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-right: 4px;
+}
+
+/* Queue Card Item */
+.queue-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #ffffff;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.item-accent-bar {
+  width: 4px;
+  background: #94a3b8;
+  flex-shrink: 0;
+  transition:
+    width 0.2s ease,
+    background 0.2s ease;
+}
+
+.queue-item.has-default-shot .item-accent-bar {
+  background: #f59e0b;
+}
+
+.queue-item.has-deposit-risk .item-accent-bar {
+  background: #f97316;
+}
+
+.queue-item.has-ban .item-accent-bar {
+  background: #ef4444;
+}
+
+.queue-card-content {
+  flex: 1;
+  min-width: 0;
+  padding: 12px 14px;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  max-height: calc(100vh - 300px);
-  overflow: auto;
-  padding-right: 2px;
 }
 
-.queue-item {
-  width: 100%;
-  min-height: 112px;
-  border: 1px solid #e8ecf1;
-  border-radius: 8px;
-  background: #ffffff;
-  padding: 12px;
-  text-align: left;
-  cursor: pointer;
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s,
-    background 0.2s;
-}
-
-.queue-item:hover,
-.queue-item.active {
-  border-color: #4f7cff;
-  background: #f8faff;
-  box-shadow: 0 6px 18px rgba(79, 124, 255, 0.1);
-}
-
-.queue-title-row,
-.queue-footer,
-.panel-title,
-.hero-title {
+.queue-top-line {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  gap: 12px;
 }
 
-.queue-title-row strong {
-  display: block;
-  min-width: 0;
-  color: #1b2559;
-  font-size: 14px;
-  font-weight: 800;
-  line-height: 1.4;
-}
-
-.queue-title-row span {
-  flex-shrink: 0;
-  color: #4f7cff;
-  font-weight: 800;
-}
-
-.queue-title-row .queue-code {
-  display: inline-flex;
-  margin-bottom: 4px;
-  padding: 2px 7px;
-  border-radius: 999px;
-  background: #eff6ff;
-  font-size: 12px;
-}
-
-.queue-meta,
-.risk-strip,
-.skin-list,
-.reject-reasons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.queue-meta {
-  margin: 10px 0;
-}
-
-.queue-meta span {
-  border-radius: 6px;
-  background: #f0f2f5;
-  padding: 4px 7px;
-  color: #4b5563;
+.queue-code {
+  color: #64748b;
   font-size: 12px;
   font-weight: 700;
+  font-family: monospace;
 }
 
-.queue-footer {
+.queue-coin {
+  display: inline-flex;
   align-items: center;
+  gap: 4px;
+  color: #b45309;
+  background: #fef3c7;
+  padding: 2px 7px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 800;
 }
 
-.queue-tags,
-.panel-tags {
+.queue-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.queue-thumb {
+  position: relative;
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f1f5f9;
+  flex-shrink: 0;
+  border: 1px solid #e2e8f0;
+}
+
+.queue-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-warning-badge {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(217, 119, 6, 0.9);
+  color: #ffffff;
+  font-size: 9px;
+  font-weight: 700;
+  text-align: center;
+  line-height: 13px;
+}
+
+.queue-title {
+  flex: 1;
+  min-width: 0;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.queue-specs {
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-end;
   gap: 6px;
 }
 
+.spec-pill {
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.queue-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 6px;
+  border-top: 1px solid #f8fafc;
+}
+
+.queue-price-block {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.queue-price {
+  color: #2563eb;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.queue-deposit {
+  color: #64748b;
+  font-size: 11px;
+}
+
+.queue-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+/* Hover & Active Queue Item */
+.queue-item:hover {
+  border-color: #93c5fd;
+  background: #f8fafc;
+  transform: translateX(2px);
+}
+
+.queue-item.active {
+  border-color: #2563eb;
+  background: #f0f7ff;
+  box-shadow:
+    0 0 0 1px #2563eb,
+    0 4px 16px rgba(37, 99, 235, 0.12);
+}
+
+.queue-item.active .item-accent-bar {
+  background: #2563eb;
+  width: 6px;
+}
+
+.queue-item.active .queue-title {
+  color: #1d4ed8;
+}
+
+/* ========== Right: Audit Workbench Main Area ========== */
 .review-detail {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 18px;
 }
 
 .review-hero-panel,
 .review-panel {
-  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
   background: #ffffff;
-  padding: 18px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  padding: 20px 24px;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
 }
 
-.hero-title h2,
-.panel-title h3 {
-  margin: 0;
-  color: #1b2559;
-  font-size: 18px;
-  font-weight: 800;
-  line-height: 1.35;
+/* Hero Panel */
+.hero-top-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
 }
 
-.hero-title p {
-  margin: 0 0 6px;
-  color: #8f9bba;
-  font-size: 12px;
+.hero-meta-strip {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.hero-code-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f1f5f9;
+  color: #334155;
+  font-size: 13px;
   font-weight: 700;
+  font-family: monospace;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.hero-code-badge:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+.copy-icon {
+  font-size: 13px;
+}
+
+.hero-submit-time {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #64748b;
+  font-size: 12px;
 }
 
 .hero-actions {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.risk-strip {
-  margin-top: 14px;
-}
-
-.review-metrics {
-  grid-template-columns: repeat(5, minmax(132px, 1fr));
-  gap: 12px;
-  margin-bottom: 0;
-}
-
-.review-metrics .metric-card {
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.review-metrics .metric-card strong {
-  font-size: 20px;
-}
-
-.review-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.panel-title {
   align-items: center;
-  margin-bottom: 14px;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
-.price-panel-title p {
-  margin: 5px 0 0;
-  color: #8f9bba;
+.action-link {
+  text-decoration: none;
+}
+
+.btn-approve {
+  font-weight: 700;
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
+}
+
+.hero-title {
+  margin: 0 0 14px;
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.35;
+}
+
+.risk-tag-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+/* Panel Heading Component */
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.heading-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.heading-icon {
+  font-size: 20px;
+  color: #2563eb;
+}
+
+.heading-left h3 {
+  margin: 0;
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.heading-left p {
+  margin: 3px 0 0;
+  color: #64748b;
+  font-size: 12px;
+}
+
+/* ========== Interactive Pricing Pipeline ========== */
+.pricing-pipeline {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1.15fr 1fr;
+  align-items: center;
+  gap: 12px;
+}
+
+.pipeline-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 130px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #f8fafc;
+  padding: 14px 16px;
+}
+
+.pipeline-card .card-badge {
+  display: inline-block;
+  align-self: flex-start;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #e2e8f0;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.pipeline-card .card-value {
+  color: #0f172a;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.15;
+}
+
+.pipeline-card .card-meta {
+  color: #475569;
   font-size: 12px;
   font-weight: 600;
 }
 
-.price-decision-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(150px, 1fr));
-  gap: 12px;
+.pipeline-card .card-breakdown {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 500;
+  padding-top: 6px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-.price-decision-card {
-  display: grid;
-  gap: 7px;
-  min-width: 0;
-  min-height: 128px;
-  border: 1px solid #e8ecf1;
-  border-radius: 8px;
-  background: #f8f9fe;
-  padding: 14px;
-}
-
-.price-decision-card strong {
-  color: #1b2559;
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1.1;
-}
-
-.price-decision-card p,
-.price-decision-card small {
-  margin: 0;
-  color: #4b5563;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.45;
-}
-
-.price-decision-card small {
-  color: #8f9bba;
-}
-
-.price-decision-card.buyer {
-  border-color: #bfdbfe;
-  background: #eff6ff;
-}
-
-.price-decision-card.buyer strong {
-  color: #2563eb;
-}
-
-.price-decision-card.rule {
+.pipeline-card--rule {
   border-color: #fed7aa;
   background: #fff7ed;
 }
 
-.price-decision-card.rule strong {
+.pipeline-card--rule .card-badge {
+  background: #ffedd5;
+  color: #c2410c;
+}
+
+.pipeline-card--rule .markup-value {
   color: #ea580c;
 }
 
-.price-decision-card.deposit {
+.admin-reason {
+  color: #ea580c;
+  font-weight: 700;
+}
+
+.pipeline-card--buyer {
+  border: 2px solid #2563eb;
+  background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
+  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
+}
+
+.pipeline-card--buyer .card-badge--highlight {
+  background: #2563eb;
+  color: #ffffff;
+}
+
+.pipeline-card--buyer .card-value--highlight {
+  color: #1d4ed8;
+  font-size: 26px;
+}
+
+.pipeline-card--deposit {
   border-color: #e0e7ff;
   background: #f5f7ff;
 }
 
-.detail-list {
-  display: grid;
-  gap: 10px;
-  margin: 0;
+.pipeline-card--deposit .card-badge {
+  background: #ede9fe;
+  color: #6d28d9;
 }
 
-.detail-list div {
-  display: grid;
-  grid-template-columns: 86px minmax(0, 1fr);
-  gap: 10px;
-  align-items: start;
+.pipeline-arrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: #94a3b8;
+  font-size: 18px;
 }
 
-.detail-list dt {
-  color: #8f9bba;
-  font-size: 12px;
+.arrow-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: #94a3b8;
+}
+
+.warning-text {
+  color: #dc2626 !important;
   font-weight: 700;
 }
 
-.detail-list dd {
-  min-width: 0;
-  margin: 0;
-  color: #1f2937;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.inventory-grid {
+/* ========== Dual Columns: Core Specs Grid ========== */
+.review-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(110px, 1fr));
-  gap: 10px;
-  margin-bottom: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
 }
 
-.inventory-grid div {
-  border-radius: 8px;
-  background: #f8f9fe;
-  padding: 12px;
-}
-
-.inventory-grid strong {
-  display: block;
-  margin-top: 4px;
-  color: #1b2559;
-  font-size: 22px;
-  font-weight: 900;
-}
-
-.resource-table {
+.spec-grid {
   display: grid;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.resource-table div {
-  display: grid;
-  grid-template-columns: minmax(120px, 1fr) 72px minmax(120px, 1fr);
-  gap: 10px;
-  align-items: center;
-  border-bottom: 1px solid #f0f2f5;
-  padding-bottom: 8px;
-}
-
-.resource-table strong {
-  color: #1f2937;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.resource-table em {
-  color: #8f9bba;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-}
-
-.skin-list {
-  align-items: center;
-}
-
-.skin-list > span {
-  color: #8f9bba;
-  font-size: 13px;
-}
-
-.screenshot-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
 }
 
-.screenshot-tile {
+.spec-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+  border: 1px solid #f1f5f9;
+}
+
+.spec-item--full {
+  grid-column: 1 / -1;
+}
+
+.spec-label {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.spec-val {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.rank-badge {
+  display: inline-block;
+  align-self: flex-start;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.ban-val {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 700;
+}
+
+.safe-icon {
+  color: #16a34a;
+  font-size: 16px;
+}
+
+.ban-icon {
+  color: #dc2626;
+  font-size: 16px;
+}
+
+.spec-item.ban-warning {
+  border-color: #fca5a5;
+  background: #fef2f2;
+}
+
+.spec-item.ban-warning .spec-val {
+  color: #b91c1c;
+}
+
+.copyable-val {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* ========== Inventory & Consumables ========== */
+.consumable-total-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 12px;
+}
+
+.consumable-total-badge strong {
+  color: #2563eb;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.heavy-gear-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.gear-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.gear-icon {
+  font-size: 28px;
+}
+
+.gear-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.gear-info span {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.gear-info strong {
+  color: #0f172a;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.gear-info em {
+  color: #64748b;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+}
+
+.resource-pill-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.resource-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f1f5f9;
+  font-size: 12px;
+}
+
+.res-name {
+  color: #334155;
+  font-weight: 600;
+}
+
+.res-qty {
+  color: #2563eb;
+  font-weight: 800;
+}
+
+.res-mode {
+  color: #64748b;
+}
+
+.skins-section {
+  padding-top: 12px;
+  border-top: 1px solid #f1f5f9;
+}
+
+.skins-header {
+  margin-bottom: 8px;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.skin-chips-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.skin-chip {
+  display: inline-flex;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #ecfdf5;
+  border: 1px solid #a7f3d0;
+  color: #047857;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.empty-skins-tip {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+/* ========== Verification Checklist & Screenshot Gallery ========== */
+.verification-checklist {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.check-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  font-size: 12px;
+}
+
+.check-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.check-label {
+  flex: 1;
+  min-width: 0;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.check-status-tag {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.check-item--provided {
+  border-color: #bbf7d0;
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.check-item--provided .check-icon {
+  color: #16a34a;
+}
+
+.check-item--default {
+  border-color: #fde68a;
+  background: #fffbeb;
+  color: #b45309;
+}
+
+.check-item--default .check-icon {
+  color: #d97706;
+}
+
+.check-item--missing {
+  border-color: #e2e8f0;
+  background: #f8fafc;
+  color: #94a3b8;
+}
+
+.check-item--missing .check-icon {
+  color: #cbd5e1;
+}
+
+.screenshot-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: 14px;
+}
+
+.screenshot-card {
   position: relative;
   display: block;
   width: 100%;
   aspect-ratio: 16 / 9;
+  border-radius: 10px;
   overflow: hidden;
-  border: 1px solid #e8ecf1;
-  border-radius: 8px;
-  background: #f8f9fe;
-  padding: 0;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
   cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.screenshot-tile img {
+.screenshot-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+  border-color: #93c5fd;
+}
+
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.image-wrapper img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.screenshot-tile span {
+.default-badge {
   position: absolute;
   top: 8px;
   left: 8px;
-  border-radius: 6px;
-  background: rgba(245, 158, 11, 0.95);
-  padding: 3px 7px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: rgba(217, 119, 6, 0.95);
+  backdrop-filter: blur(4px);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  z-index: 2;
+}
+
+.category-tag {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(
+    to top,
+    rgba(15, 23, 42, 0.9) 0%,
+    rgba(15, 23, 42, 0.4) 70%,
+    transparent 100%
+  );
   color: #ffffff;
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 700;
+  text-align: center;
+  padding: 14px 6px 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.image-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 8px;
+  background: rgba(15, 23, 42, 0.65);
+  backdrop-filter: blur(3px);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 3;
+}
+
+.screenshot-card:hover .image-overlay {
+  opacity: 1;
+}
+
+.image-overlay .el-button {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  transition: transform 0.15s ease;
+}
+
+.image-overlay .el-button:hover {
+  transform: scale(1.1);
 }
 
 .empty-warning {
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-height: 84px;
+  gap: 10px;
   border-radius: 8px;
   background: #fff7ed;
+  border: 1px solid #fed7aa;
   padding: 16px;
   color: #c2410c;
   font-weight: 700;
+  font-size: 13px;
 }
 
-.dialog-screenshots {
-  max-height: 540px;
-  overflow: auto;
+/* ========== Floating Sticky Action Dock ========== */
+.floating-dock {
+  position: fixed;
+  bottom: 24px;
+  right: 32px;
+  z-index: 900;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 10px 18px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  box-shadow:
+    0 10px 30px rgba(15, 23, 42, 0.15),
+    0 2px 8px rgba(15, 23, 42, 0.08);
+  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.reject-dialog p {
-  margin-top: 0;
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.reject-reasons {
-  margin: 12px 0;
-}
-
-.price-adjust-dialog {
-  display: grid;
-  gap: 14px;
-}
-
-.adjust-current {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+.dock-info {
+  display: flex;
+  align-items: center;
   gap: 10px;
 }
 
-.adjust-current div {
-  display: grid;
-  gap: 5px;
-  border-radius: 8px;
-  background: #f8f9fe;
-  padding: 12px;
+.dock-code {
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: monospace;
 }
 
-.adjust-current strong {
-  color: #1b2559;
-  font-size: 18px;
-  font-weight: 900;
+.dock-title {
+  max-width: 220px;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.adjust-current .preview-value {
+.dock-price {
   color: #2563eb;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.dock-risk-tag {
+  color: #dc2626;
+  background: #fee2e2;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.dock-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-approve-dock {
+  font-weight: 700;
+  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
+}
+
+/* ========== Dialogs Styling ========== */
+.dialog-item-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.dialog-code {
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: monospace;
+}
+
+.reject-quick-tags {
+  margin-bottom: 14px;
+}
+
+.quick-tags-title {
+  margin: 0 0 8px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.quick-tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.quick-reason-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  background: #ffffff;
+  padding: 5px 10px;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.quick-reason-pill:hover {
+  border-color: #2563eb;
+  color: #2563eb;
+}
+
+.quick-reason-pill.selected {
+  border-color: #2563eb;
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.reject-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+  color: #64748b;
+  font-size: 12px;
+}
+
+/* Price Adjust Modal */
+.adjust-preview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.preview-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.preview-box--highlight {
+  border-color: #93c5fd;
+  background: #eff6ff;
+}
+
+.box-label {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.box-val {
+  color: #0f172a;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.highlight-val {
+  color: #2563eb;
+}
+
+.preview-box small {
+  color: #64748b;
+  font-size: 11px;
+}
+
+.adjust-mode-section {
+  margin-bottom: 14px;
 }
 
 .adjust-mode {
@@ -518,73 +1279,182 @@
 
 .adjust-mode :deep(.el-radio-button__inner) {
   width: 100%;
-  border-color: #d7deea;
-  font-weight: 800;
+  font-weight: 700;
 }
 
-.adjust-mode :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
-  border-color: #2563eb;
-  background: #2563eb;
-  box-shadow: -1px 0 0 0 #2563eb;
+.adjust-fields-box {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
 .adjust-field {
-  display: grid;
-  gap: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.adjust-field > span {
-  color: #52607a;
+.field-title {
+  color: #475569;
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .adjust-field :deep(.el-input-number) {
   width: 100%;
 }
 
+/* Evidence Dialog */
+.evidence-header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.evidence-item-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.evidence-code {
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: monospace;
+}
+
+.dialog-gallery {
+  max-height: 560px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+/* Shortcuts Cheatsheet */
+.shortcuts-guide-table {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.shortcut-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+  font-size: 13px;
+}
+
+.key-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1px solid #cbd5e1;
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #0f172a;
+  font-family: monospace;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.key-desc {
+  margin-left: auto;
+  color: #475569;
+  font-weight: 600;
+}
+
+/* Empty Workbench */
 .empty-detail {
   min-height: 420px;
   display: grid;
   place-items: center;
-  border-radius: 8px;
+  border-radius: 12px;
   background: #ffffff;
 }
 
-@media (max-width: 1280px) {
+/* ========== Responsive Breakpoints ========== */
+@media (max-width: 1360px) {
+  .review-workbench {
+    grid-template-columns: 340px minmax(0, 1fr);
+  }
+
+  .pricing-pipeline {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+  }
+
+  .pipeline-arrow {
+    display: none;
+  }
+}
+
+@media (max-width: 1100px) {
+  .review-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .review-workbench {
     grid-template-columns: 1fr;
   }
 
   .review-queue {
     position: static;
+    height: auto;
+    max-height: 480px;
   }
 
-  .queue-list {
-    max-height: none;
+  .floating-dock {
+    right: 16px;
+    left: 16px;
+    justify-content: space-between;
+  }
+
+  .dock-title {
+    max-width: 140px;
   }
 }
 
-@media (max-width: 900px) {
-  .review-summary,
-  .price-decision-grid,
+@media (max-width: 768px) {
+  .review-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .pricing-pipeline {
+    grid-template-columns: 1fr;
+  }
+
   .review-grid {
     grid-template-columns: 1fr;
   }
 
-  .adjust-current {
+  .heavy-gear-grid {
     grid-template-columns: 1fr;
   }
 
-  .hero-title {
+  .verification-checklist {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .hero-top-row {
     flex-direction: column;
   }
 
   .hero-actions {
+    width: 100%;
     justify-content: flex-start;
   }
 
-  .queue-toolbar {
-    grid-template-columns: 1fr;
+  .floating-dock {
+    display: none;
   }
 }
diff --git a/frontend/src/features/admin/views/AdminListingReviewView.vue b/frontend/src/features/admin/views/AdminListingReviewView.vue
index 0559b70..d7edc31 100644
--- a/frontend/src/features/admin/views/AdminListingReviewView.vue
+++ b/frontend/src/features/admin/views/AdminListingReviewView.vue
@@ -1,12 +1,36 @@
 <script setup lang="ts">
 import { readError } from '@/shared/utils/error'
-import { Check, Close, Picture, Refresh, Search, WarningFilled } from '@element-plus/icons-vue'
+import {
+  ArrowDown,
+  Check,
+  CircleCheck,
+  CircleClose,
+  Clock,
+  Close,
+  Coin,
+  CopyDocument,
+  Document,
+  EditPen,
+  HelpFilled,
+  FullScreen,
+  Picture,
+  Pointer,
+  PriceTag,
+  Refresh,
+  Right,
+  Search,
+  Select,
+  TopRight,
+  User,
+  Warning,
+  WarningFilled,
+} from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 
 import { fetchAdminFileBlob } from '@/shared/api/files'
 import { adminPath } from '@/shared/utils/adminPath'
-import { centToYuan, formatCent, formatMoneyWithSymbol, yuanToCent } from '@/shared/utils/money'
+import { centToYuan, formatCent, formatMoneyWithSymbol } from '@/shared/utils/money'
 import {
   adjustListingReviewPrice,
   approveListing,
@@ -14,6 +38,14 @@ import {
   rejectListing,
   type Listing,
 } from '@/features/listings'
+import ImageEditorDialog from '../components/ImageEditorDialog.vue'
+import AdminListingReviewRejectDialog from '../components/AdminListingReviewRejectDialog.vue'
+import AdminListingReviewPriceDialog from '../components/AdminListingReviewPriceDialog.vue'
+import AdminListingReviewEvidenceDialog from '../components/AdminListingReviewEvidenceDialog.vue'
+import AdminListingReviewShortcutsDialog from '../components/AdminListingReviewShortcutsDialog.vue'
+import AdminListingReviewPreviewDialog, {
+  type PreviewScreenshotItem,
+} from '../components/AdminListingReviewPreviewDialog.vue'
 import {
   assetRegions,
   formatListingCode,
@@ -34,15 +66,38 @@ type RiskLevel = 'danger' | 'warning' | 'info'
 interface RiskItem {
   label: string
   level: RiskLevel
+  type?: 'ban' | 'deposit' | 'screenshot' | 'general'
+}
+
+interface ReviewScreenshotItem {
+  url: string
+  label: string
+  categoryKey?: string
+}
+
+interface ChecklistItem {
+  key: string
+  label: string
+  status: 'provided' | 'default' | 'missing'
+  count: number
 }
 
 const _defaultScreenshotURL = '/api/listings/default-upload-screenshot?v=webp1'
-const rejectReasonOptions = [
-  '默认截图，需补充真实截图',
-  '账号资产信息不完整',
-  '价格或押金异常',
-  '封禁记录需补充说明',
-  '联系方式异常',
+
+const sortOptions = [
+  { label: '最新提交 (默认)', value: 'default' },
+  { label: '风险优先 (封禁/默认图)', value: 'risk' },
+  { label: '价格从高到低', value: 'price_desc' },
+  { label: '价格从低到高', value: 'price_asc' },
+  { label: '哈夫币从多到少', value: 'coin_desc' },
+]
+
+const standardSlots = [
+  { key: 'coin', label: '纯币截图' },
+  { key: 'gameId', label: '游戏ID截图' },
+  { key: 'totalAsset', label: '总资产截图' },
+  { key: 'tencentSecurity', label: '腾讯安全中心截图' },
+  { key: 'skin', label: '皮肤截图' },
 ]
 
 const loading = ref(false)
@@ -50,36 +105,78 @@ const submitting = ref(false)
 const listings = ref<Listing[]>([])
 const selectedID = ref<number | null>(null)
 const activeListing = ref<Listing | null>(null)
+const rejectDialogVisible = ref(false)
 const evidenceListing = ref<Listing | null>(null)
-const rejectReason = ref('')
+const evidenceDialogVisible = ref(false)
+const editorVisible = ref(false)
+const editingScreenshot = ref<{ url: string; label: string; listing: Listing } | null>(null)
 const priceAdjustListing = ref<Listing | null>(null)
+const priceAdjustDialogVisible = ref(false)
 const adjustingPrice = ref(false)
-const priceAdjustMode = ref<'ratio' | 'price'>('ratio')
-const priceAdjustForm = reactive({
-  buyer_ratio: 0,
-  buyer_total_price: 0,
-  reason: '',
-})
+
 const filters = reactive({
   keyword: '',
   risk: 'all',
+  sortBy: 'default',
 })
 const previewURLs = reactive<Record<string, string>>({})
 const createdObjectURLs = new Set<string>()
+const lastRefreshedAt = ref<string>('')
+const shortcutsDialogVisible = ref(false)
+
+// Centered Preview Dialog & Press-and-Hold Peek
+const previewVisible = ref(false)
+const previewInitialIndex = ref(0)
+const previewScreenshots = ref<ReviewScreenshotItem[]>([])
+const isPeekMode = ref(false)
+let cardHoldTimer: ReturnType<typeof setTimeout> | null = null
+let didActivatePeek = false
 
 const selectedListing = computed(
   () => listings.value.find(item => item.id === selectedID.value) || listings.value[0] || null
 )
+
+const isDepositRisky = (row: Listing) => {
+  const consumable = getListingConsumablePrice(row)
+  return consumable > 0 && centToYuan(row.deposit_amount_cent) <= consumable
+}
+
 const filteredListings = computed(() => {
   const keyword = filters.keyword.trim().toLowerCase()
-  return listings.value.filter(item => {
+  const result = listings.value.filter(item => {
     if (filters.risk === 'external' && !isExternalUpload(item)) return false
     if (filters.risk === 'defaultImage' && !hasDefaultScreenshot(item)) return false
     if (filters.risk === 'ban' && !hasBanRecord(item)) return false
+    if (filters.risk === 'deposit' && !isDepositRisky(item)) return false
     if (!keyword) return true
     return reviewSearchText(item).includes(keyword)
   })
+
+  return result.sort((a, b) => {
+    if (filters.sortBy === 'risk') {
+      const scoreA =
+        (hasBanRecord(a) ? 10 : 0) + (hasDefaultScreenshot(a) ? 5 : 0) + (isDepositRisky(a) ? 3 : 0)
+      const scoreB =
+        (hasBanRecord(b) ? 10 : 0) + (hasDefaultScreenshot(b) ? 5 : 0) + (isDepositRisky(b) ? 3 : 0)
+      return scoreB - scoreA
+    }
+    if (filters.sortBy === 'price_desc') {
+      return b.price_cent - a.price_cent
+    }
+    if (filters.sortBy === 'price_asc') {
+      return a.price_cent - b.price_cent
+    }
+    if (filters.sortBy === 'coin_desc') {
+      return getCoinWan(b) - getCoinWan(a)
+    }
+    return new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime()
+  })
 })
+
+const currentSelectedIndex = computed(() =>
+  filteredListings.value.findIndex(item => item.id === selectedID.value)
+)
+
 const activeRisks = computed(() => (selectedListing.value ? riskItems(selectedListing.value) : []))
 const selectedResources = computed(() =>
   selectedListing.value ? getListingResources(selectedListing.value) : []
@@ -87,10 +184,41 @@ const selectedResources = computed(() =>
 const selectedSkins = computed(() =>
   selectedListing.value ? getSkinNames(selectedListing.value) : []
 )
-const priceAdjustPreview = computed(() =>
-  priceAdjustListing.value ? calculatePriceAdjustPreview(priceAdjustListing.value) : null
+const selectedReviewScreenshots = computed(() =>
+  selectedListing.value ? getListingScreenshots(selectedListing.value) : []
 )
 
+// Checklist of required screenshots for the selected listing
+const reviewChecklist = computed<ChecklistItem[]>(() => {
+  if (!selectedListing.value) return []
+  const item = selectedListing.value
+  const groups = item.asset_summary?.screenshot_groups
+  const hasGroups = typeof groups === 'object' && groups !== null
+
+  return standardSlots.map(slot => {
+    let urls: string[] = []
+    if (hasGroups) {
+      const raw = (groups as Record<string, unknown>)[slot.key]
+      if (Array.isArray(raw)) {
+        urls = raw.filter((u): u is string => typeof u === 'string' && Boolean(u))
+      }
+    } else {
+      const idx = standardSlots.findIndex(s => s.key === slot.key)
+      if (item.screenshot_urls && item.screenshot_urls[idx]) {
+        urls = [item.screenshot_urls[idx]]
+      }
+    }
+
+    if (!urls.length) {
+      return { key: slot.key, label: slot.label, status: 'missing', count: 0 }
+    }
+    if (urls.some(u => isDefaultScreenshot(u))) {
+      return { key: slot.key, label: slot.label, status: 'default', count: urls.length }
+    }
+    return { key: slot.key, label: slot.label, status: 'provided', count: urls.length }
+  })
+})
+
 watch(
   () => selectedListing.value,
   async listing => {
@@ -102,20 +230,14 @@ watch(
   { immediate: true }
 )
 
-watch(priceAdjustMode, (mode, previousMode) => {
-  if (!priceAdjustListing.value || !previousMode || mode === previousMode) return
-  const preview = calculatePriceAdjustPreview(priceAdjustListing.value, previousMode)
-  if (mode === 'price') {
-    priceAdjustForm.buyer_total_price =
-      preview.buyerTotalPrice || buyerTotalPrice(priceAdjustListing.value)
-  } else {
-    priceAdjustForm.buyer_ratio = preview.buyerRatio || buyerRatio(priceAdjustListing.value)
-  }
+onMounted(() => {
+  void loadListings()
+  window.addEventListener('keydown', handleGlobalKeydown)
 })
 
-onMounted(loadListings)
 onBeforeUnmount(() => {
   createdObjectURLs.forEach(url => URL.revokeObjectURL(url))
+  window.removeEventListener('keydown', handleGlobalKeydown)
 })
 
 async function loadListings() {
@@ -125,6 +247,12 @@ async function loadListings() {
     if (!selectedID.value || !listings.value.some(item => item.id === selectedID.value)) {
       selectedID.value = listings.value[0]?.id || null
     }
+    const now = new Date()
+    lastRefreshedAt.value = now.toLocaleTimeString('zh-CN', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    })
   } finally {
     loading.value = false
   }
@@ -134,6 +262,92 @@ function selectListing(row: Listing) {
   selectedID.value = row.id
 }
 
+function selectNextListing() {
+  if (!filteredListings.value.length) return
+  const currentIndex = filteredListings.value.findIndex(item => item.id === selectedID.value)
+  if (currentIndex < filteredListings.value.length - 1) {
+    selectListing(filteredListings.value[currentIndex + 1]!)
+  } else {
+    ElMessage.info('已经是列表最后一条待审商品')
+  }
+}
+
+function selectPrevListing() {
+  if (!filteredListings.value.length) return
+  const currentIndex = filteredListings.value.findIndex(item => item.id === selectedID.value)
+  if (currentIndex > 0) {
+    selectListing(filteredListings.value[currentIndex - 1]!)
+  } else {
+    ElMessage.info('已经是列表第一条商品')
+  }
+}
+
+function handleGlobalKeydown(e: KeyboardEvent) {
+  const activeEl = document.activeElement
+  const isInput =
+    activeEl instanceof HTMLInputElement ||
+    activeEl instanceof HTMLTextAreaElement ||
+    activeEl?.getAttribute('contenteditable') === 'true'
+
+  if (isInput) return
+
+  const isAnyDialogOpen =
+    rejectDialogVisible.value ||
+    priceAdjustDialogVisible.value ||
+    evidenceDialogVisible.value ||
+    editorVisible.value ||
+    shortcutsDialogVisible.value ||
+    previewVisible.value
+
+  if (isAnyDialogOpen) {
+    if (e.key === 'Escape') {
+      rejectDialogVisible.value = false
+      priceAdjustDialogVisible.value = false
+      evidenceDialogVisible.value = false
+      editorVisible.value = false
+      shortcutsDialogVisible.value = false
+      previewVisible.value = false
+    }
+    return
+  }
+
+  if (e.key === '?' || (e.shiftKey && e.key === '/')) {
+    e.preventDefault()
+    shortcutsDialogVisible.value = true
+    return
+  }
+
+  if (e.key === 'ArrowDown' || e.key === 'j') {
+    e.preventDefault()
+    selectNextListing()
+    return
+  }
+
+  if (e.key === 'ArrowUp' || e.key === 'k') {
+    e.preventDefault()
+    selectPrevListing()
+    return
+  }
+
+  if (selectedListing.value) {
+    if ((e.altKey && e.key.toLowerCase() === 'a') || (e.key === 'a' && !e.ctrlKey && !e.metaKey)) {
+      e.preventDefault()
+      void handleApprove(selectedListing.value)
+      return
+    }
+    if ((e.altKey && e.key.toLowerCase() === 'r') || (e.key === 'r' && !e.ctrlKey && !e.metaKey)) {
+      e.preventDefault()
+      openReject(selectedListing.value)
+      return
+    }
+    if ((e.altKey && e.key.toLowerCase() === 'p') || (e.key === 'p' && !e.ctrlKey && !e.metaKey)) {
+      e.preventDefault()
+      openPriceAdjust(selectedListing.value)
+      return
+    }
+  }
+}
+
 function replaceListing(next: Listing) {
   const index = listings.value.findIndex(item => item.id === next.id)
   if (index >= 0) {
@@ -151,10 +365,10 @@ function replaceListing(next: Listing) {
 
 async function handleApprove(row: Listing) {
   try {
-    await ElMessageBox.confirm(`确认通过「${row.title}」并上架？`, '审核通过确认', {
+    await ElMessageBox.confirm(`确认通过「${row.title}」并立即上架？`, '审核通过确认', {
       confirmButtonText: '通过并上架',
       cancelButtonText: '取消',
-      type: 'warning',
+      type: 'success',
     })
   } catch {
     return
@@ -162,7 +376,7 @@ async function handleApprove(row: Listing) {
   submitting.value = true
   try {
     await approveListing(row.id)
-    ElMessage.success('审核通过，商品已上架')
+    ElMessage.success('审核通过，商品已成功上架')
     await loadListings()
   } catch (error) {
     ElMessage.error(readError(error, '审核失败'))
@@ -173,70 +387,16 @@ async function handleApprove(row: Listing) {
 
 function openReject(row: Listing) {
   activeListing.value = row
-  rejectReason.value = row.review_reason || ''
+  rejectDialogVisible.value = true
 }
 
-function openPriceAdjust(row: Listing) {
-  priceAdjustListing.value = row
-  priceAdjustMode.value = 'ratio'
-  priceAdjustForm.buyer_ratio = buyerRatio(row)
-  priceAdjustForm.buyer_total_price = buyerTotalPrice(row)
-  priceAdjustForm.reason = ''
-}
-
-async function handleSavePriceAdjust() {
-  if (!priceAdjustListing.value) return
-  const payload =
-    priceAdjustMode.value === 'ratio'
-      ? {
-          buyer_ratio: Number(priceAdjustForm.buyer_ratio || 0),
-          reason: priceAdjustForm.reason.trim(),
-        }
-      : {
-          buyer_total_price_cent: yuanToCent(Number(priceAdjustForm.buyer_total_price || 0)),
-          reason: priceAdjustForm.reason.trim(),
-        }
-  if ((payload.buyer_ratio || payload.buyer_total_price_cent || 0) <= 0) {
-    ElMessage.warning('请填写有效的加价后比例或价格')
-    return
-  }
-  adjustingPrice.value = true
-  try {
-    const updated = await adjustListingReviewPrice(priceAdjustListing.value.id, payload)
-    replaceListing(updated)
-    priceAdjustListing.value = null
-    ElMessage.success('价格已更新')
-  } catch (error) {
-    ElMessage.error(readError(error, '价格调整失败'))
-  } finally {
-    adjustingPrice.value = false
-  }
-}
-
-function appendRejectReason(reason: string) {
-  const current = rejectReason.value.trim()
-  if (!current) {
-    rejectReason.value = reason
-    return
-  }
-  if (!current.includes(reason)) {
-    rejectReason.value = `${current}；${reason}`
-  }
-}
-
-async function handleReject() {
-  if (!activeListing.value) return
-  const reason = rejectReason.value.trim()
-  if (!reason) {
-    ElMessage.warning('请填写拒绝原因')
-    return
-  }
+async function onRejectConfirm(payload: { listingId: number; reason: string }) {
   submitting.value = true
   try {
-    await rejectListing(activeListing.value.id, reason)
+    await rejectListing(payload.listingId, payload.reason)
     ElMessage.success('已拒绝发布并通知号主')
+    rejectDialogVisible.value = false
     activeListing.value = null
-    rejectReason.value = ''
     await loadListings()
   } catch (error) {
     ElMessage.error(readError(error, '拒绝失败'))
@@ -245,8 +405,32 @@ async function handleReject() {
   }
 }
 
+function openPriceAdjust(row: Listing) {
+  priceAdjustListing.value = row
+  priceAdjustDialogVisible.value = true
+}
+
+async function onPriceAdjustSave(payload: {
+  listingId: number
+  payload: { buyer_ratio?: number; buyer_total_price_cent?: number; reason: string }
+}) {
+  adjustingPrice.value = true
+  try {
+    const updated = await adjustListingReviewPrice(payload.listingId, payload.payload)
+    replaceListing(updated)
+    priceAdjustDialogVisible.value = false
+    priceAdjustListing.value = null
+    ElMessage.success('价格已更新并生效')
+  } catch (error) {
+    ElMessage.error(readError(error, '价格调整失败'))
+  } finally {
+    adjustingPrice.value = false
+  }
+}
+
 function openEvidence(row: Listing) {
   evidenceListing.value = row
+  evidenceDialogVisible.value = true
   loadScreenshotPreviews(row)
 }
 
@@ -289,20 +473,6 @@ function ratioText(value: number) {
   return value > 0 ? `1:${quantity(value)}` : '-'
 }
 
-function previewMoney(value: number) {
-  return value > 0 ? money(value) : '--'
-}
-
-function roundPreviewMoney(value: number) {
-  if (!Number.isFinite(value) || value <= 0) return 0
-  return Math.round(value * 10) / 10
-}
-
-function roundPreviewRatio(value: number) {
-  if (!Number.isFinite(value) || value <= 0) return 0
-  return Math.round(value * 10) / 10
-}
-
 function sellerTotalPrice(row: Listing) {
   const value = breakdownNumber(row, 'seller_total_price')
   if (value > 0) return value
@@ -343,32 +513,19 @@ function buyerRatio(row: Listing) {
   return base > 0 ? getCoinWan(row) / base : 0
 }
 
-function calculatePriceAdjustPreview(
-  row: Listing,
-  mode: 'ratio' | 'price' = priceAdjustMode.value
-) {
-  const consumablePrice = getListingConsumablePrice(row)
-  const coinWan = getCoinWan(row)
-  if (mode === 'price') {
-    const buyerTotalPrice = roundPreviewMoney(Number(priceAdjustForm.buyer_total_price || 0))
-    const buyerCoinBasePrice = roundPreviewMoney(buyerTotalPrice - consumablePrice)
-    const buyerRatio = buyerCoinBasePrice > 0 ? roundPreviewRatio(coinWan / buyerCoinBasePrice) : 0
-    return { buyerCoinBasePrice, buyerTotalPrice, buyerRatio }
-  }
-  const buyerRatioInput = Number(priceAdjustForm.buyer_ratio || 0)
-  const buyerCoinBasePrice = buyerRatioInput > 0 ? roundPreviewMoney(coinWan / buyerRatioInput) : 0
-  const buyerTotalPrice =
-    buyerCoinBasePrice > 0 ? roundPreviewMoney(buyerCoinBasePrice + consumablePrice) : 0
-  const buyerRatio = buyerCoinBasePrice > 0 ? roundPreviewRatio(coinWan / buyerCoinBasePrice) : 0
-  return { buyerCoinBasePrice, buyerTotalPrice, buyerRatio }
-}
-
 function platformMarkupAmount(row: Listing) {
   const value = breakdownNumber(row, 'platform_markup_amount')
   if (value > 0) return value
   return Math.max(0, buyerTotalPrice(row) - sellerTotalPrice(row))
 }
 
+function platformMarkupPercentage(row: Listing) {
+  const markup = platformMarkupAmount(row)
+  const seller = sellerTotalPrice(row)
+  if (seller <= 0 || markup <= 0) return 0
+  return Math.round((markup / seller) * 1000) / 10
+}
+
 function priceRuleType(row: Listing) {
   const value = priceBreakdown(row).platform_rule_type
   return typeof value === 'string' && value ? value : 'none'
@@ -466,33 +623,82 @@ function isDefaultScreenshot(url: string) {
   return url.includes('/api/listings/default-upload-screenshot')
 }
 
+function formatRelativeTime(dateStr?: string) {
+  if (!dateStr) return '-'
+  const timestamp = new Date(dateStr).getTime()
+  if (Number.isNaN(timestamp)) return dateStr
+  const diff = Date.now() - timestamp
+  if (diff < 60 * 1000) return '刚刚'
+  if (diff < 60 * 60 * 1000) return `${Math.floor(diff / (60 * 1000))} 分钟前`
+  if (diff < 24 * 60 * 60 * 1000) return `${Math.floor(diff / (60 * 60 * 1000))} 小时前`
+  if (diff < 7 * 24 * 60 * 60 * 1000) return `${Math.floor(diff / (24 * 60 * 60 * 1000))} 天前`
+  return formatDateTime(dateStr).slice(0, 16)
+}
+
+async function copyText(text: string, label: string) {
+  if (!text || text === '-') {
+    ElMessage.info(`暂无可复制的${label}`)
+    return
+  }
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text)
+    } else {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+    }
+    ElMessage.success(`已复制${label}: ${text}`)
+  } catch {
+    ElMessage.info(`复制失败: ${text}`)
+  }
+}
+
 function riskItems(row: Listing): RiskItem[] {
   const items: RiskItem[] = []
   if (isExternalUpload(row)) {
     items.push({
       label: `外部上传：${uploaderName(row)} / 渠道：${sourceChannel(row)}`,
       level: 'info',
+      type: 'general',
     })
   } else {
-    items.push({ label: `来源渠道：${sourceChannel(row)}`, level: 'info' })
+    items.push({ label: `来源渠道：${sourceChannel(row)}`, level: 'info', type: 'general' })
   }
   const infoCount = items.length
-  if (!row.screenshot_urls?.length) items.push({ label: '没有账号截图', level: 'danger' })
-  if (hasDefaultScreenshot(row)) items.push({ label: '使用默认截图', level: 'warning' })
-  if (hasBanRecord(row)) items.push({ label: `封禁记录：${banRecordText(row)}`, level: 'danger' })
-  if (
-    getListingConsumablePrice(row) > 0 &&
-    centToYuan(row.deposit_amount_cent) <= getListingConsumablePrice(row)
-  ) {
-    items.push({ label: '押金不高于消耗品价值', level: 'danger' })
+  if (!row.screenshot_urls?.length) {
+    items.push({ label: '缺少账号截图凭证', level: 'danger', type: 'screenshot' })
+  }
+  if (hasDefaultScreenshot(row)) {
+    items.push({ label: '使用系统默认占位图', level: 'warning', type: 'screenshot' })
+  }
+  if (hasBanRecord(row)) {
+    items.push({ label: `封禁记录：${banRecordText(row)}`, level: 'danger', type: 'ban' })
+  }
+  if (isDepositRisky(row)) {
+    items.push({
+      label: `押金低于消耗品价值(¥${getListingConsumablePrice(row)})`,
+      level: 'danger',
+      type: 'deposit',
+    })
+  }
+  if (readAssetNumber(row, 'daily_loss_m') <= 0) {
+    items.push({ label: '缺少每日损耗数据', level: 'warning', type: 'general' })
+  }
+  if (readAssetNumber(row, 'fire_level') <= 40) {
+    items.push({ label: '烽火等级接近门槛', level: 'warning', type: 'general' })
+  }
+  if (!readAssetString(row, 'season_insurance')) {
+    items.push({ label: '未填写保险格数', level: 'warning', type: 'general' })
+  }
+  if (items.length === infoCount) {
+    items.push({ label: '未发现明显风控违规', level: 'info', type: 'general' })
   }
-  if (readAssetNumber(row, 'daily_loss_m') <= 0)
-    items.push({ label: '缺少每日损耗', level: 'warning' })
-  if (readAssetNumber(row, 'fire_level') <= 40)
-    items.push({ label: '烽火等级接近下限', level: 'warning' })
-  if (!readAssetString(row, 'season_insurance'))
-    items.push({ label: '缺少保险格数', level: 'warning' })
-  if (items.length === infoCount) items.push({ label: '未发现明显风险', level: 'info' })
   return items
 }
 
@@ -549,88 +755,299 @@ async function loadScreenshotPreviews(row: Listing) {
   }
 }
 
-async function openScreenshot(url: string) {
+function getListingScreenshots(item: Listing | null): ReviewScreenshotItem[] {
+  if (!item) return []
+  const groups = item.asset_summary?.screenshot_groups
+  const slots = [
+    { key: 'coin', label: '纯币截图' },
+    { key: 'tencentSecurity', label: '腾讯安全中心截图' },
+    { key: 'skin', label: '皮肤截图' },
+    { key: 'gameId', label: '游戏ID截图' },
+    { key: 'totalAsset', label: '总资产截图' },
+  ]
+
+  if (typeof groups === 'object' && groups !== null) {
+    const grouped = slots.flatMap(slot => {
+      const urls = (groups as Record<string, unknown>)[slot.key]
+      if (!Array.isArray(urls)) return []
+      const validUrls = urls.filter((url): url is string => typeof url === 'string' && Boolean(url))
+      return validUrls.map((url, index) => ({
+        categoryKey: slot.key,
+        label: validUrls.length > 1 ? `${slot.label}${index + 1}` : slot.label,
+        url,
+      }))
+    })
+    if (grouped.length > 0) {
+      const groupedUrlSet = new Set(grouped.map(s => s.url))
+      const extraUrls = (item.screenshot_urls || []).filter(url => !groupedUrlSet.has(url))
+      const extras = extraUrls.map((url, index) => ({
+        categoryKey: 'extra',
+        label: `账号截图${grouped.length + index + 1}`,
+        url,
+      }))
+      return [...grouped, ...extras]
+    }
+  }
+
+  const defaultLabels = ['纯币截图', '游戏ID截图', '总资产截图', '腾讯安全中心截图', '皮肤截图']
+  return (item.screenshot_urls || []).map((url, index) => ({
+    categoryKey: standardSlots[index]?.key || 'extra',
+    label: defaultLabels[index] || `账号截图${index + 1}`,
+    url,
+  }))
+}
+
+function openPreviewDialog(images: ReviewScreenshotItem[], initialIndex = 0) {
+  if (!images.length) return
+  previewScreenshots.value = images
+  previewInitialIndex.value = Math.max(0, Math.min(initialIndex, images.length - 1))
+  isPeekMode.value = false
+  previewVisible.value = true
+}
+
+function startPeekPreview(images: ReviewScreenshotItem[], initialIndex = 0) {
+  if (!images.length) return
+  previewScreenshots.value = images
+  previewInitialIndex.value = Math.max(0, Math.min(initialIndex, images.length - 1))
+  isPeekMode.value = true
+  previewVisible.value = true
+}
+
+function handleCardMouseDown(images: ReviewScreenshotItem[], index: number, e: MouseEvent) {
+  if (e.button !== 0) return
+  didActivatePeek = false
+  if (cardHoldTimer) clearTimeout(cardHoldTimer)
+  cardHoldTimer = setTimeout(() => {
+    didActivatePeek = true
+    startPeekPreview(images, index)
+  }, 180)
+}
+
+function handleCardMouseUp() {
+  if (cardHoldTimer) {
+    clearTimeout(cardHoldTimer)
+    cardHoldTimer = null
+  }
+}
+
+function handleCardClick(images: ReviewScreenshotItem[], index: number) {
+  if (didActivatePeek) {
+    didActivatePeek = false
+    return
+  }
+  openPreviewDialog(images, index)
+}
+
+function handlePreviewEdit(payload: { shot: PreviewScreenshotItem; index: number }) {
+  openEditor(payload.shot, selectedListing.value)
+}
+
+function openRawScreenshot(url: string) {
   if (isDefaultScreenshot(url)) {
     window.open(url, '_blank')
     return
   }
+  const preview = previewURLs[url]
+  if (preview) {
+    window.open(preview, '_blank')
+    return
+  }
   try {
     const key = extractObjectKey(url)
     if (!key) {
       window.open(url, '_blank')
       return
     }
-    const blob = await fetchAdminFileBlob(key)
-    window.open(URL.createObjectURL(blob), '_blank')
+    fetchAdminFileBlob(key)
+      .then(blob => {
+        window.open(URL.createObjectURL(blob), '_blank')
+      })
+      .catch(() => {
+        window.open(url, '_blank')
+      })
   } catch {
     window.open(url, '_blank')
   }
 }
+
+function openEditor(shot: { url: string; label: string }, listing: Listing | null) {
+  if (!listing) return
+  editingScreenshot.value = {
+    url: shot.url,
+    label: shot.label,
+    listing,
+  }
+  editorVisible.value = true
+}
+
+async function handleScreenshotSaved(payload: { oldUrl: string; newUrl: string }) {
+  if (!editingScreenshot.value) return
+  const listingId = editingScreenshot.value.listing.id
+  const targetListing = listings.value.find(item => item.id === listingId)
+  if (!targetListing) return
+
+  const nextUrls = (targetListing.screenshot_urls || []).map(u =>
+    u === payload.oldUrl ? payload.newUrl : u
+  )
+  if (!nextUrls.includes(payload.newUrl)) {
+    nextUrls.push(payload.newUrl)
+  }
+  targetListing.screenshot_urls = nextUrls
+
+  const rawGroups = targetListing.asset_summary?.screenshot_groups
+  if (typeof rawGroups === 'object' && rawGroups !== null) {
+    for (const [k, v] of Object.entries(rawGroups as Record<string, unknown>)) {
+      if (Array.isArray(v)) {
+        ;(rawGroups as Record<string, unknown>)[k] = v.map(u =>
+          u === payload.oldUrl ? payload.newUrl : u
+        )
+      }
+    }
+  }
+
+  if (evidenceListing.value?.id === listingId) {
+    evidenceListing.value.screenshot_urls = nextUrls
+  }
+
+  await loadScreenshotPreviews(targetListing)
+  editorVisible.value = false
+  editingScreenshot.value = null
+}
 </script>
 
 <template>
   <section class="page review-page">
+    <!-- Header Row -->
     <div class="page-header-row review-header">
       <div class="page-header">
-        <p class="eyebrow">Review</p>
+        <p class="eyebrow">Audit Workbench · 审核工作台</p>
         <h1>商品审核</h1>
-        <p>集中核对账号资产、上传来源、价格、押金和截图风险。</p>
+        <p>核对账号资产、上号凭证、渠道溯源与定价风控，确保商品上架合规与买家保障。</p>
       </div>
       <div class="toolbar-actions">
-        <el-button :icon="Refresh" :loading="loading" @click="loadListings">刷新</el-button>
+        <span v-if="lastRefreshedAt" class="refresh-stamp">
+          <el-icon><Clock /></el-icon>
+          最后刷新 {{ lastRefreshedAt }}
+        </span>
+        <el-button :icon="HelpFilled" plain @click="shortcutsDialogVisible = true">
+          快捷键 (?)
+        </el-button>
+        <el-button type="primary" :icon="Refresh" :loading="loading" @click="loadListings">
+          刷新待审池
+        </el-button>
       </div>
     </div>
 
+    <!-- Summary Metrics Dashboard -->
     <div class="review-summary">
       <button
-        class="summary-card"
+        class="summary-card summary-card--all"
         :class="{ active: filters.risk === 'all' }"
+        type="button"
         @click="filters.risk = 'all'"
       >
-        <span>待审核</span>
-        <strong>{{ listings.length }}</strong>
+        <div class="summary-card-inner">
+          <div class="summary-card-icon">
+            <el-icon><Document /></el-icon>
+          </div>
+          <div class="summary-card-text">
+            <span>待审核总量</span>
+            <strong>{{ listings.length }}</strong>
+            <small>全站待审池</small>
+          </div>
+        </div>
       </button>
+
       <button
-        class="summary-card"
+        class="summary-card summary-card--external"
         :class="{ active: filters.risk === 'external' }"
+        type="button"
         @click="filters.risk = 'external'"
       >
-        <span>外部上传</span>
-        <strong>{{ listings.filter(isExternalUpload).length }}</strong>
+        <div class="summary-card-inner">
+          <div class="summary-card-icon">
+            <el-icon><User /></el-icon>
+          </div>
+          <div class="summary-card-text">
+            <span>外部渠道提交</span>
+            <strong>{{ listings.filter(isExternalUpload).length }}</strong>
+            <small>商户 / 渠道合作</small>
+          </div>
+        </div>
       </button>
+
       <button
-        class="summary-card"
+        class="summary-card summary-card--warning"
         :class="{ active: filters.risk === 'defaultImage' }"
+        type="button"
         @click="filters.risk = 'defaultImage'"
       >
-        <span>默认截图</span>
-        <strong>{{ listings.filter(hasDefaultScreenshot).length }}</strong>
+        <div class="summary-card-inner">
+          <div class="summary-card-icon">
+            <el-icon><Picture /></el-icon>
+          </div>
+          <div class="summary-card-text">
+            <span>默认截图瑕疵</span>
+            <strong>{{ listings.filter(hasDefaultScreenshot).length }}</strong>
+            <small>需督促补充真实截图</small>
+          </div>
+        </div>
       </button>
+
       <button
-        class="summary-card"
+        class="summary-card summary-card--danger"
         :class="{ active: filters.risk === 'ban' }"
+        type="button"
         @click="filters.risk = 'ban'"
       >
-        <span>封禁风险</span>
-        <strong>{{ listings.filter(hasBanRecord).length }}</strong>
+        <div class="summary-card-inner">
+          <div class="summary-card-icon">
+            <el-icon><WarningFilled /></el-icon>
+          </div>
+          <div class="summary-card-text">
+            <span>封禁违规高危</span>
+            <strong>{{ listings.filter(hasBanRecord).length }}</strong>
+            <small>存在安全拦截记录</small>
+          </div>
+        </div>
       </button>
     </div>
 
+    <!-- Review Workbench -->
     <div class="review-workbench">
+      <!-- Left: Queue Sidebar -->
       <aside class="review-queue">
         <div class="queue-toolbar">
           <el-input
             v-model="filters.keyword"
             :prefix-icon="Search"
             clearable
-            placeholder="搜索编号、标题、客服、渠道、段位、皮肤"
+            placeholder="搜索编号、标题、客服、渠道、段位、皮肤..."
           />
-          <el-select v-model="filters.risk" placeholder="风险筛选">
-            <el-option label="全部待审" value="all" />
-            <el-option label="外部上传" value="external" />
-            <el-option label="默认截图" value="defaultImage" />
-            <el-option label="有封禁记录" value="ban" />
-          </el-select>
+          <div class="queue-filter-row">
+            <el-select v-model="filters.risk" class="queue-select" placeholder="风险分类">
+              <el-option label="全部待审" value="all" />
+              <el-option label="外部上传" value="external" />
+              <el-option label="默认截图" value="defaultImage" />
+              <el-option label="封禁记录" value="ban" />
+              <el-option label="押金风险" value="deposit" />
+            </el-select>
+            <el-select v-model="filters.sortBy" class="queue-select" placeholder="排序规则">
+              <el-option
+                v-for="opt in sortOptions"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+          </div>
+          <div class="queue-count-strip">
+            <span
+              >共 {{ filteredListings.length }} 项 (当前第
+              {{ currentSelectedIndex >= 0 ? currentSelectedIndex + 1 : 1 }} 项)</span
+            >
+            <span class="shortcut-tip">按 [↑ / ↓] 快速切换</span>
+          </div>
         </div>
 
         <div v-loading="loading" class="queue-list">
@@ -638,178 +1055,320 @@ async function openScreenshot(url: string) {
             v-for="item in filteredListings"
             :key="item.id"
             class="queue-item"
-            :class="{ active: selectedListing?.id === item.id }"
+            :class="{
+              active: selectedListing?.id === item.id,
+              'has-ban': hasBanRecord(item),
+              'has-default-shot': hasDefaultScreenshot(item),
+              'has-deposit-risk': isDepositRisky(item),
+            }"
             type="button"
             @click="selectListing(item)"
           >
-            <div class="queue-title-row">
-              <div>
-                <span class="queue-code">编号 {{ formatListingCode(item) }}</span>
-                <strong>{{ item.title }}</strong>
+            <div class="item-accent-bar" />
+
+            <div class="queue-card-content">
+              <div class="queue-top-line">
+                <span class="queue-code">#{{ formatListingCode(item) }}</span>
+                <span class="queue-coin">
+                  <el-icon><Coin /></el-icon>
+                  {{ formatHafCoinM(getCoinWan(item)) }}
+                </span>
               </div>
-              <span>{{ formatHafCoinM(getCoinWan(item)) }}</span>
-            </div>
-            <div class="queue-meta">
-              <span>{{ item.rank_level || '-' }}</span>
-              <span>{{ assetText(item, 'season_insurance') }}</span>
-              <span
-                >{{ assetText(item, 'stamina_level') }}/{{ assetText(item, 'load_level') }}</span
-              >
-              <span>KD {{ assetNumberText(item, 'secret_kd') }}</span>
-            </div>
-            <div class="queue-footer">
-              <span
-                >¥{{ formatCent(item.price_cent) }} / 押 ¥{{
-                  formatCent(item.deposit_amount_cent)
-                }}</span
-              >
-              <div class="queue-tags">
-                <el-tag size="small" type="primary" effect="plain">{{
-                  sourceChannel(item)
-                }}</el-tag>
-                <el-tag v-if="isExternalUpload(item)" size="small" type="info">{{
-                  uploaderName(item)
-                }}</el-tag>
-                <el-tag v-if="hasDefaultScreenshot(item)" size="small" type="warning"
-                  >默认图</el-tag
-                >
+
+              <div class="queue-title-row">
+                <div class="queue-thumb">
+                  <img
+                    :src="
+                      previewURLs[item.screenshot_urls?.[0] || ''] ||
+                      item.screenshot_urls?.[0] ||
+                      _defaultScreenshotURL
+                    "
+                    alt="缩略图"
+                    loading="lazy"
+                  />
+                  <span v-if="hasDefaultScreenshot(item)" class="thumb-warning-badge">默认图</span>
+                </div>
+                <strong class="queue-title" :title="item.title">{{ item.title }}</strong>
+              </div>
+
+              <div class="queue-specs">
+                <span class="spec-pill">{{ item.rank_level || '段位未知' }}</span>
+                <span class="spec-pill">{{
+                  assetText(item, 'season_insurance') || '保险未填'
+                }}</span>
+                <span class="spec-pill">KD {{ assetNumberText(item, 'secret_kd') }}</span>
+              </div>
+
+              <div class="queue-footer">
+                <div class="queue-price-block">
+                  <strong class="queue-price">¥{{ formatCent(item.price_cent) }}</strong>
+                  <span class="queue-deposit">押 ¥{{ formatCent(item.deposit_amount_cent) }}</span>
+                </div>
+                <div class="queue-tags">
+                  <el-tag size="small" type="primary" effect="plain">{{
+                    sourceChannel(item)
+                  }}</el-tag>
+                  <el-tag v-if="isExternalUpload(item)" size="small" type="info">{{
+                    uploaderName(item)
+                  }}</el-tag>
+                  <el-tag v-if="hasBanRecord(item)" size="small" type="danger" effect="dark">
+                    封禁
+                  </el-tag>
+                </div>
               </div>
             </div>
           </button>
+
           <el-empty
             v-if="!loading && !filteredListings.length"
             description="暂无符合条件的待审核商品"
+            :image-size="80"
           />
         </div>
       </aside>
 
+      <!-- Right: Review Details & Decision Workbench -->
       <main v-if="selectedListing" class="review-detail">
+        <!-- 1. Hero Title & Action Panel -->
         <section class="review-hero-panel">
-          <div class="hero-title">
-            <div>
-              <p>商品编号 {{ formatListingCode(selectedListing) }}</p>
-              <h2>{{ selectedListing.title }}</h2>
+          <div class="hero-top-row">
+            <div class="hero-meta-strip">
+              <span
+                class="hero-code-badge"
+                @click="copyText(formatListingCode(selectedListing), '商品编号')"
+              >
+                商品编号 #{{ formatListingCode(selectedListing) }}
+                <el-icon class="copy-icon" title="点击复制编号"><CopyDocument /></el-icon>
+              </span>
+              <span class="hero-submit-time">
+                <el-icon><Clock /></el-icon>
+                {{ formatDateTime(selectedListing.created_at || selectedListing.updated_at) }}
+                ({{ formatRelativeTime(selectedListing.created_at || selectedListing.updated_at) }})
+              </span>
+              <el-tag size="small" type="warning" effect="dark">待审核</el-tag>
             </div>
+
             <div class="hero-actions">
-              <RouterLink :to="adminPath(`listings/${selectedListing.id}`)">
-                <el-button>详情页</el-button>
+              <RouterLink
+                :to="adminPath(`listings/${selectedListing.id}`)"
+                target="_blank"
+                class="action-link"
+              >
+                <el-button :icon="TopRight" plain>详情页</el-button>
               </RouterLink>
+              <el-button
+                :icon="PriceTag"
+                type="primary"
+                plain
+                @click="openPriceAdjust(selectedListing)"
+              >
+                调整价格
+              </el-button>
               <el-button
                 :icon="Close"
                 type="danger"
                 :loading="submitting"
                 @click="openReject(selectedListing)"
-                >拒绝</el-button
               >
+                拒绝 (R)
+              </el-button>
               <el-button
                 :icon="Check"
                 type="primary"
+                class="btn-approve"
                 :loading="submitting"
                 @click="handleApprove(selectedListing)"
-                >通过</el-button
               >
+                通过并上架 (A)
+              </el-button>
             </div>
           </div>
-          <div class="risk-strip">
+
+          <h2 class="hero-title">{{ selectedListing.title }}</h2>
+
+          <div class="risk-tag-strip">
             <el-tag
               v-for="risk in activeRisks"
               :key="risk.label"
               :type="riskTagType(risk.level)"
               effect="light"
+              round
             >
               {{ risk.label }}
             </el-tag>
           </div>
         </section>
 
+        <!-- 2. Interactive Pricing Pipeline Flow -->
         <section class="review-panel price-review-panel">
-          <div class="panel-title price-panel-title">
-            <div>
-              <h3>价格审核</h3>
-              <p>核对卖家提交价格、平台加价规则和最终买家展示价。</p>
+          <div class="panel-heading">
+            <div class="heading-left">
+              <el-icon class="heading-icon"><PriceTag /></el-icon>
+              <div>
+                <h3>价格核算与加价决策流</h3>
+                <p>核对卖家提交价格、平台加价规则与最终买家展示价格。</p>
+              </div>
             </div>
-            <el-button type="primary" plain @click="openPriceAdjust(selectedListing)"
-              >调整价格</el-button
-            >
+            <el-button type="primary" plain size="small" @click="openPriceAdjust(selectedListing)">
+              <el-icon><EditPen /></el-icon>
+              调整审核价格
+            </el-button>
           </div>
-          <div class="price-decision-grid">
-            <div class="price-decision-card seller">
-              <span>卖家发布</span>
-              <strong>{{ money(sellerTotalPrice(selectedListing)) }}</strong>
-              <p>发布比例 {{ ratioText(sellerRatio(selectedListing)) }}</p>
-              <small
-                >纯币 {{ money(sellerCoinBasePrice(selectedListing)) }} / 物品
-                {{ money(getListingConsumablePrice(selectedListing)) }}</small
+
+          <div class="pricing-pipeline">
+            <!-- Step 1: Seller Price -->
+            <div class="pipeline-card pipeline-card--seller">
+              <div class="card-badge">卖家发布价</div>
+              <strong class="card-value">{{ money(sellerTotalPrice(selectedListing)) }}</strong>
+              <div class="card-meta">
+                <span
+                  >发布比例 <strong>{{ ratioText(sellerRatio(selectedListing)) }}</strong></span
+                >
+              </div>
+              <div class="card-breakdown">
+                <span>纯币 {{ money(sellerCoinBasePrice(selectedListing)) }}</span>
+                <span>物品 {{ money(getListingConsumablePrice(selectedListing)) }}</span>
+              </div>
+            </div>
+
+            <div class="pipeline-arrow">
+              <el-icon><Right /></el-icon>
+              <span class="arrow-label">平台加价</span>
+            </div>
+
+            <!-- Step 2: Markup Rule -->
+            <div class="pipeline-card pipeline-card--rule">
+              <div class="card-badge">{{ priceRuleLabel(selectedListing) }}</div>
+              <strong class="card-value markup-value"
+                >+{{ money(platformMarkupAmount(selectedListing)) }}</strong
               >
+              <div class="card-meta">
+                <span>{{ priceRuleText(selectedListing) }}</span>
+              </div>
+              <div class="card-breakdown">
+                <span>毛利率 ~{{ platformMarkupPercentage(selectedListing) }}%</span>
+                <span
+                  v-if="adminAdjustReason(selectedListing)"
+                  class="admin-reason"
+                  :title="adminAdjustReason(selectedListing)"
+                >
+                  已人工调整
+                </span>
+              </div>
             </div>
-            <div class="price-decision-card rule">
-              <span>当前加价规则</span>
-              <strong>{{ priceRuleLabel(selectedListing) }}</strong>
-              <p>{{ priceRuleText(selectedListing) }}</p>
-              <small>平台加价 {{ money(platformMarkupAmount(selectedListing)) }}</small>
+
+            <div class="pipeline-arrow">
+              <el-icon><Right /></el-icon>
+              <span class="arrow-label">最终展示</span>
             </div>
-            <div class="price-decision-card buyer">
-              <span>加价后展示</span>
-              <strong>{{ money(buyerTotalPrice(selectedListing)) }}</strong>
-              <p>加价后比例 {{ ratioText(buyerRatio(selectedListing)) }}</p>
-              <small>纯币 {{ money(buyerCoinBasePrice(selectedListing)) }} / 总价含物品</small>
+
+            <!-- Step 3: Buyer Display Price -->
+            <div class="pipeline-card pipeline-card--buyer">
+              <div class="card-badge card-badge--highlight">买家端展示售价</div>
+              <strong class="card-value card-value--highlight">{{
+                money(buyerTotalPrice(selectedListing))
+              }}</strong>
+              <div class="card-meta">
+                <span
+                  >展示比例 <strong>{{ ratioText(buyerRatio(selectedListing)) }}</strong></span
+                >
+              </div>
+              <div class="card-breakdown">
+                <span>纯币 {{ money(buyerCoinBasePrice(selectedListing)) }}</span>
+                <span>包含消耗品</span>
+              </div>
             </div>
-            <div class="price-decision-card deposit">
-              <span>押金与损耗</span>
-              <strong>¥{{ formatCent(selectedListing.deposit_amount_cent) }}</strong>
-              <p>每日损耗 {{ dailyLossText(selectedListing) }}</p>
-              <small>哈夫币 {{ formatHafCoinM(getCoinWan(selectedListing)) }}</small>
+
+            <!-- Step 4: Deposit & Protection -->
+            <div class="pipeline-card pipeline-card--deposit">
+              <div class="card-badge">押金与风控</div>
+              <strong class="card-value"
+                >¥{{ formatCent(selectedListing.deposit_amount_cent) }}</strong
+              >
+              <div class="card-meta">
+                <span>每日损耗 {{ dailyLossText(selectedListing) }}</span>
+              </div>
+              <div class="card-breakdown">
+                <span :class="{ 'warning-text': isDepositRisky(selectedListing) }">
+                  {{ isDepositRisky(selectedListing) ? '⚠️ 押金低于消耗品' : '✅ 押金覆盖充足' }}
+                </span>
+                <span>哈夫币 {{ formatHafCoinM(getCoinWan(selectedListing)) }}</span>
+              </div>
             </div>
           </div>
         </section>
 
+        <!-- 3. Dual Columns: Core Game Specs & Origin Info -->
         <section class="review-grid">
-          <div class="review-panel">
-            <div class="panel-title">
-              <h3>账号属性</h3>
+          <!-- Card A: Game Attributes -->
+          <div class="review-panel spec-panel">
+            <div class="panel-heading">
+              <div class="heading-left">
+                <el-icon class="heading-icon"><Select /></el-icon>
+                <h3>账号核心战备属性</h3>
+              </div>
             </div>
-            <dl class="detail-list">
-              <div>
-                <dt>上号方式</dt>
-                <dd>{{ selectedListing.login_platform || '-' }}</dd>
+            <div class="spec-grid">
+              <div class="spec-item">
+                <span class="spec-label">区服渠道</span>
+                <strong class="spec-val">{{ selectedListing.server_region || '-' }}</strong>
               </div>
-              <div>
-                <dt>区服</dt>
-                <dd>{{ selectedListing.server_region || '-' }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">登录方式</span>
+                <strong class="spec-val">{{ selectedListing.login_platform || '-' }}</strong>
               </div>
-              <div>
-                <dt>段位</dt>
-                <dd>{{ selectedListing.rank_level || '-' }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">段位评级</span>
+                <span class="rank-badge">{{ selectedListing.rank_level || '-' }}</span>
               </div>
-              <div>
-                <dt>烽火等级</dt>
-                <dd>{{ assetNumberText(selectedListing, 'fire_level') }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">烽火等级</span>
+                <strong class="spec-val"
+                  >{{ assetNumberText(selectedListing, 'fire_level') }} 级</strong
+                >
               </div>
-              <div>
-                <dt>保险格数</dt>
-                <dd>{{ assetText(selectedListing, 'season_insurance') }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">保险箱格数</span>
+                <strong class="spec-val">{{
+                  assetText(selectedListing, 'season_insurance')
+                }}</strong>
               </div>
-              <div>
-                <dt>绝密KD</dt>
-                <dd>{{ assetNumberText(selectedListing, 'secret_kd') }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">绝密 KD</span>
+                <strong class="spec-val">{{
+                  assetNumberText(selectedListing, 'secret_kd')
+                }}</strong>
               </div>
-              <div>
-                <dt>体力/负重</dt>
-                <dd>
+              <div class="spec-item">
+                <span class="spec-label">体力 / 负重</span>
+                <strong class="spec-val">
                   {{ assetText(selectedListing, 'stamina_level') }} /
                   {{ assetText(selectedListing, 'load_level') }}
-                </dd>
+                </strong>
               </div>
-              <div>
-                <dt>封禁记录</dt>
-                <dd>{{ banRecordText(selectedListing) }}</dd>
+              <div
+                class="spec-item spec-item--full"
+                :class="{ 'ban-warning': hasBanRecord(selectedListing) }"
+              >
+                <span class="spec-label">封禁核验</span>
+                <div class="spec-val ban-val">
+                  <el-icon v-if="hasBanRecord(selectedListing)" class="ban-icon"
+                    ><WarningFilled
+                  /></el-icon>
+                  <el-icon v-else class="safe-icon"><CircleCheck /></el-icon>
+                  <span>{{ banRecordText(selectedListing) }}</span>
+                </div>
               </div>
-            </dl>
+            </div>
           </div>
 
-          <div class="review-panel">
-            <div class="panel-title">
-              <h3>上传信息</h3>
+          <!-- Card B: Upload & Ownership Information -->
+          <div class="review-panel spec-panel">
+            <div class="panel-heading">
+              <div class="heading-left">
+                <el-icon class="heading-icon"><User /></el-icon>
+                <h3>来源溯源与号主信息</h3>
+              </div>
               <div class="panel-tags">
                 <el-tag size="small" type="primary" effect="plain">{{
                   sourceChannel(selectedListing)
@@ -819,237 +1378,321 @@ async function openScreenshot(url: string) {
                 >
               </div>
             </div>
-            <dl class="detail-list">
-              <div>
-                <dt>来源渠道</dt>
-                <dd>{{ sourceChannel(selectedListing) }}</dd>
+            <div class="spec-grid">
+              <div class="spec-item">
+                <span class="spec-label">来源渠道</span>
+                <strong class="spec-val">{{ sourceChannel(selectedListing) }}</strong>
               </div>
-              <div>
-                <dt>上传人</dt>
-                <dd>{{ uploaderName(selectedListing) }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">上传经办人</span>
+                <strong class="spec-val">{{ uploaderName(selectedListing) }}</strong>
               </div>
-              <div>
-                <dt>号主</dt>
-                <dd>
+              <div class="spec-item">
+                <span class="spec-label">号主身份</span>
+                <strong class="spec-val">
                   {{
-                    selectedListing.owner_phone ||
                     selectedListing.owner_nickname ||
-                    selectedListing.owner_id
+                    selectedListing.owner_phone ||
+                    `UID: ${selectedListing.owner_id}`
                   }}
-                </dd>
+                </strong>
               </div>
-              <div>
-                <dt>联系电话</dt>
-                <dd>{{ contactPhone(selectedListing) }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">联系电话</span>
+                <div class="spec-val copyable-val">
+                  <span>{{ contactPhone(selectedListing) }}</span>
+                  <el-button
+                    v-if="contactPhone(selectedListing) !== '-'"
+                    size="small"
+                    text
+                    :icon="CopyDocument"
+                    title="复制手机号"
+                    @click="copyText(contactPhone(selectedListing), '联系电话')"
+                  />
+                </div>
               </div>
-              <div>
-                <dt>常用地区</dt>
-                <dd>{{ commonRegionText(selectedListing) }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">常用地区</span>
+                <strong class="spec-val">{{ commonRegionText(selectedListing) }}</strong>
               </div>
-              <div>
-                <dt>在线时间</dt>
-                <dd>{{ ownerOnlineText(selectedListing) }}</dd>
+              <div class="spec-item">
+                <span class="spec-label">在线时段</span>
+                <strong class="spec-val">{{ ownerOnlineText(selectedListing) }}</strong>
               </div>
-              <div>
-                <dt>提交时间</dt>
-                <dd>{{ formatDateTime(selectedListing.updated_at) }}</dd>
+              <div class="spec-item spec-item--full">
+                <span class="spec-label">提交时间</span>
+                <strong class="spec-val">{{ formatDateTime(selectedListing.updated_at) }}</strong>
               </div>
-            </dl>
+            </div>
           </div>
         </section>
 
-        <section class="review-panel">
-          <div class="panel-title">
-            <h3>库存资产</h3>
-            <span>额外消耗品约 {{ money(getListingConsumablePrice(selectedListing)) }}</span>
-          </div>
-          <div class="inventory-grid">
-            <div>
-              <span>AWM子弹</span
-              ><strong>{{ getResourceQuantity(selectedListing, 'awmAmmo') }}</strong>
+        <!-- 4. Inventory & Consumables -->
+        <section class="review-panel inventory-panel">
+          <div class="panel-heading">
+            <div class="heading-left">
+              <el-icon class="heading-icon"><Coin /></el-icon>
+              <h3>物资装备与外观资产</h3>
             </div>
-            <div>
-              <span>6头</span><strong>{{ getResourceQuantity(selectedListing, 'helmet6') }}</strong>
-            </div>
-            <div>
-              <span>6甲</span><strong>{{ getResourceQuantity(selectedListing, 'armor6') }}</strong>
+            <div class="consumable-total-badge">
+              <span>额外物资估值</span>
+              <strong>{{ money(getListingConsumablePrice(selectedListing)) }}</strong>
             </div>
           </div>
-          <div v-if="selectedResources.length" class="resource-table">
-            <div v-for="resource in selectedResources" :key="resource.key">
-              <span>{{ resource.label }}</span>
-              <strong>{{ resource.quantity }}</strong>
-              <em>{{ resource.mode }} · {{ resource.price }}</em>
+
+          <!-- Key Heavy Gear Badges -->
+          <div class="heavy-gear-grid">
+            <div class="gear-card gear-card--ammo">
+              <div class="gear-icon">🎯</div>
+              <div class="gear-info">
+                <span>AWM 专用子弹</span>
+                <strong>{{ getResourceQuantity(selectedListing, 'awmAmmo') }} <em>发</em></strong>
+              </div>
+            </div>
+            <div class="gear-card gear-card--helmet">
+              <div class="gear-icon">🪖</div>
+              <div class="gear-info">
+                <span>6级高级头盔</span>
+                <strong>{{ getResourceQuantity(selectedListing, 'helmet6') }} <em>顶</em></strong>
+              </div>
+            </div>
+            <div class="gear-card gear-card--armor">
+              <div class="gear-icon">🛡️</div>
+              <div class="gear-info">
+                <span>6级高级防弹衣</span>
+                <strong>{{ getResourceQuantity(selectedListing, 'armor6') }} <em>件</em></strong>
+              </div>
             </div>
           </div>
-          <div class="skin-list">
-            <el-tag v-for="skin in selectedSkins" :key="skin" type="success" effect="plain">{{
-              skin
-            }}</el-tag>
-            <span v-if="!selectedSkins.length">暂无皮肤数据</span>
+
+          <!-- Resources Detail Table -->
+          <div v-if="selectedResources.length" class="resource-pill-grid">
+            <div v-for="res in selectedResources" :key="res.key" class="resource-chip">
+              <span class="res-name">{{ res.label }}</span>
+              <strong class="res-qty">×{{ res.quantity }}</strong>
+              <small class="res-mode">{{ res.mode }} · {{ res.price }}</small>
+            </div>
+          </div>
+
+          <!-- Skins Collection -->
+          <div class="skins-section">
+            <div class="skins-header">
+              <span>皮肤外观 (共 {{ selectedSkins.length }} 件)</span>
+            </div>
+            <div v-if="selectedSkins.length" class="skin-chips-wrapper">
+              <span v-for="skin in selectedSkins" :key="skin" class="skin-chip">
+                {{ skin }}
+              </span>
+            </div>
+            <p v-else class="empty-skins-tip">暂无登记皮肤数据</p>
           </div>
         </section>
 
-        <section class="review-panel">
-          <div class="panel-title">
-            <h3>账号截图</h3>
-            <el-button :icon="Picture" size="small" @click="openEvidence(selectedListing)"
-              >查看全部</el-button
-            >
+        <!-- 5. Screenshots Review & Verification Suite -->
+        <section class="review-panel screenshots-panel">
+          <div class="panel-heading">
+            <div class="heading-left">
+              <el-icon class="heading-icon"><Picture /></el-icon>
+              <div>
+                <h3>账号截图凭证审核</h3>
+                <p>核对各分类凭证真实性，点击放大画廊预览，支持直接裁剪打码替换。</p>
+              </div>
+            </div>
+            <div class="panel-actions">
+              <el-button :icon="Picture" size="small" @click="openEvidence(selectedListing)">
+                查看全部凭证 ({{ selectedReviewScreenshots.length }})
+              </el-button>
+            </div>
           </div>
-          <div v-if="selectedListing.screenshot_urls?.length" class="screenshot-grid">
-            <button
-              v-for="url in selectedListing.screenshot_urls"
-              :key="url"
-              type="button"
-              class="screenshot-tile"
-              @click="openScreenshot(url)"
+
+          <!-- 5-Point Verification Checklist Bar -->
+          <div class="verification-checklist">
+            <div
+              v-for="item in reviewChecklist"
+              :key="item.key"
+              class="check-item"
+              :class="`check-item--${item.status}`"
             >
-              <img :src="previewURLs[url] || url" alt="账号截图" />
-              <span v-if="isDefaultScreenshot(url)">默认图片</span>
-            </button>
+              <el-icon v-if="item.status === 'provided'" class="check-icon"
+                ><CircleCheck
+              /></el-icon>
+              <el-icon v-else-if="item.status === 'default'" class="check-icon"
+                ><Warning
+              /></el-icon>
+              <el-icon v-else class="check-icon"><CircleClose /></el-icon>
+              <span class="check-label">{{ item.label }}</span>
+              <span class="check-status-tag">
+                {{
+                  item.status === 'provided'
+                    ? `已提供 (${item.count})`
+                    : item.status === 'default'
+                      ? '默认图'
+                      : '未提供'
+                }}
+              </span>
+            </div>
           </div>
+
+          <!-- Screenshots Gallery Grid -->
+          <div v-if="selectedReviewScreenshots.length" class="screenshot-gallery-grid">
+            <div
+              v-for="(shot, index) in selectedReviewScreenshots"
+              :key="shot.url"
+              class="screenshot-card"
+              @mousedown="handleCardMouseDown(selectedReviewScreenshots, index, $event)"
+              @mouseup="handleCardMouseUp"
+              @mouseleave="handleCardMouseUp"
+              @click="handleCardClick(selectedReviewScreenshots, index)"
+            >
+              <div class="image-wrapper">
+                <img :src="previewURLs[shot.url] || shot.url" :alt="shot.label" loading="lazy" />
+                <span v-if="isDefaultScreenshot(shot.url)" class="default-badge">
+                  <el-icon><Warning /></el-icon> 默认占位图
+                </span>
+                <span class="category-tag">{{ shot.label }}</span>
+
+                <!-- Hover Overlay Actions -->
+                <div class="image-overlay" @click.stop>
+                  <el-button
+                    size="small"
+                    type="primary"
+                    :icon="Pointer"
+                    circle
+                    title="按住速览（松手即关闭）"
+                    @mousedown.stop.prevent="startPeekPreview(selectedReviewScreenshots, index)"
+                    @touchstart.stop.prevent="startPeekPreview(selectedReviewScreenshots, index)"
+                  />
+                  <el-button
+                    size="small"
+                    type="primary"
+                    :icon="FullScreen"
+                    circle
+                    title="弹窗大图 (Esc关闭)"
+                    @click.stop="openPreviewDialog(selectedReviewScreenshots, index)"
+                  />
+                  <el-button
+                    size="small"
+                    type="warning"
+                    :icon="EditPen"
+                    circle
+                    title="在线裁剪/马赛克打码"
+                    @click.stop="openEditor(shot, selectedListing)"
+                  />
+                  <el-button
+                    size="small"
+                    :icon="TopRight"
+                    circle
+                    title="新标签页打开原图"
+                    @click.stop="openRawScreenshot(shot.url)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div v-else class="empty-warning">
             <el-icon><WarningFilled /></el-icon>
-            <span>暂无截图</span>
+            <span>该商品未上传任何截图凭证，请谨慎审核或直接拒绝！</span>
           </div>
         </section>
       </main>
 
+      <!-- Empty State -->
       <main v-else class="review-detail empty-detail">
-        <el-empty description="暂无待审核商品" />
+        <el-empty description="待审核队列为空，暂无需要审核的商品" :image-size="120" />
       </main>
     </div>
 
-    <el-dialog
-      :model-value="!!activeListing"
-      title="拒绝发布"
-      width="620px"
-      @update:model-value="activeListing = null"
-    >
-      <div v-if="activeListing" class="dialog-body reject-dialog">
-        <p>
-          <strong>{{ activeListing.title }}</strong>
-        </p>
-        <div class="reject-reasons">
-          <el-button
-            v-for="reason in rejectReasonOptions"
-            :key="reason"
-            size="small"
-            @click="appendRejectReason(reason)"
-          >
-            {{ reason }}
-          </el-button>
-        </div>
-        <el-input
-          v-model="rejectReason"
-          type="textarea"
-          :rows="5"
-          placeholder="填写拒绝原因，号主会在通知中看到审核结果"
-        />
+    <!-- Floating Sticky Action Dock (Bottom of page for fast decisions) -->
+    <div v-if="selectedListing" class="floating-dock">
+      <div class="dock-info">
+        <span class="dock-code">#{{ formatListingCode(selectedListing) }}</span>
+        <span class="dock-title" :title="selectedListing.title">{{ selectedListing.title }}</span>
+        <span class="dock-price">售价 {{ money(buyerTotalPrice(selectedListing)) }}</span>
+        <span v-if="hasBanRecord(selectedListing)" class="dock-risk-tag">🚨 存在封禁</span>
       </div>
-      <template #footer>
-        <el-button @click="activeListing = null">取消</el-button>
-        <el-button type="danger" :loading="submitting" @click="handleReject">确认拒绝</el-button>
-      </template>
-    </el-dialog>
-
-    <el-dialog
-      :model-value="!!priceAdjustListing"
-      title="调整审核价格"
-      width="560px"
-      @update:model-value="priceAdjustListing = null"
-    >
-      <div v-if="priceAdjustListing" class="dialog-body price-adjust-dialog">
-        <div class="adjust-current">
-          <div>
-            <span>卖家发布价</span>
-            <strong>{{ money(sellerTotalPrice(priceAdjustListing)) }}</strong>
-          </div>
-          <div>
-            <span>调整后买家价</span>
-            <strong class="preview-value">{{
-              previewMoney(priceAdjustPreview?.buyerTotalPrice || 0)
-            }}</strong>
-          </div>
-          <div>
-            <span>调整后买家比例</span>
-            <strong class="preview-value">{{
-              ratioText(priceAdjustPreview?.buyerRatio || 0)
-            }}</strong>
-          </div>
-        </div>
-        <el-radio-group v-model="priceAdjustMode" class="adjust-mode">
-          <el-radio-button label="ratio">按加价后比例</el-radio-button>
-          <el-radio-button label="price">按加价后价格</el-radio-button>
-        </el-radio-group>
-        <label v-if="priceAdjustMode === 'ratio'" class="adjust-field">
-          <span>加价后比例</span>
-          <el-input-number
-            v-model="priceAdjustForm.buyer_ratio"
-            :min="0"
-            :step="0.1"
-            :controls="false"
-          />
-        </label>
-        <label v-else class="adjust-field">
-          <span>加价后价格</span>
-          <el-input-number
-            v-model="priceAdjustForm.buyer_total_price"
-            :min="0"
-            :step="1"
-            :controls="false"
-          />
-        </label>
-        <label class="adjust-field">
-          <span>调价原因</span>
-          <el-input
-            v-model="priceAdjustForm.reason"
-            type="textarea"
-            :rows="3"
-            placeholder="可填写调价原因，便于审计追踪"
-          />
-        </label>
-      </div>
-      <template #footer>
-        <el-button @click="priceAdjustListing = null">取消</el-button>
-        <el-button type="primary" :loading="adjustingPrice" @click="handleSavePriceAdjust"
-          >保存调整</el-button
+      <div class="dock-actions">
+        <el-button :icon="PriceTag" size="default" plain @click="openPriceAdjust(selectedListing)">
+          调整价格 (P)
+        </el-button>
+        <el-button
+          :icon="Close"
+          size="default"
+          type="danger"
+          :loading="submitting"
+          @click="openReject(selectedListing)"
         >
-      </template>
-    </el-dialog>
-
-    <el-dialog
-      :model-value="!!evidenceListing"
-      title="账号资产截图"
-      width="860px"
-      @update:model-value="evidenceListing = null"
-    >
-      <div v-if="evidenceListing" class="dialog-body">
-        <p>
-          <strong>{{ evidenceListing.title }}</strong>
-        </p>
-        <div
-          v-if="evidenceListing.screenshot_urls?.length"
-          class="screenshot-grid dialog-screenshots"
+          拒绝 (R)
+        </el-button>
+        <el-button
+          :icon="Check"
+          size="default"
+          type="primary"
+          class="btn-approve-dock"
+          :loading="submitting"
+          @click="handleApprove(selectedListing)"
         >
-          <button
-            v-for="url in evidenceListing.screenshot_urls"
-            :key="url"
-            type="button"
-            class="screenshot-tile"
-            @click="openScreenshot(url)"
-          >
-            <img :src="previewURLs[url] || url" alt="账号截图" />
-            <span v-if="isDefaultScreenshot(url)">默认图片</span>
-          </button>
-        </div>
-        <p v-else>暂无截图</p>
+          通过并上架 (A)
+        </el-button>
+        <el-button
+          size="default"
+          :icon="ArrowDown"
+          title="切换下一个 (J)"
+          @click="selectNextListing"
+        >
+          下一单 (J)
+        </el-button>
       </div>
-      <template #footer>
-        <el-button @click="evidenceListing = null">关闭</el-button>
-      </template>
-    </el-dialog>
+    </div>
+
+    <!-- Centered Screenshot Preview Modal (Supports Peek On Hold & Persistent Dialog) -->
+    <AdminListingReviewPreviewDialog
+      v-model:visible="previewVisible"
+      v-model:is-peek-mode="isPeekMode"
+      :images="previewScreenshots"
+      :initial-index="previewInitialIndex"
+      :preview-urls="previewURLs"
+      @edit="handlePreviewEdit"
+      @open-raw="openRawScreenshot"
+    />
+
+    <!-- Reject Reason Dialog Component -->
+    <AdminListingReviewRejectDialog
+      v-model:visible="rejectDialogVisible"
+      :listing="activeListing"
+      :submitting="submitting"
+      @reject="onRejectConfirm"
+    />
+
+    <!-- Price Adjust Dialog Component -->
+    <AdminListingReviewPriceDialog
+      v-model:visible="priceAdjustDialogVisible"
+      :listing="priceAdjustListing"
+      :loading="adjustingPrice"
+      @save="onPriceAdjustSave"
+    />
+
+    <!-- Evidence All Screenshots Modal Component -->
+    <AdminListingReviewEvidenceDialog
+      v-model:visible="evidenceDialogVisible"
+      :listing="evidenceListing"
+      :preview-urls="previewURLs"
+      @view-image="openPreviewDialog($event.images, $event.index)"
+      @peek-image="startPeekPreview($event.images, $event.index)"
+      @edit-screenshot="openEditor($event.shot, $event.listing)"
+    />
+
+    <!-- Keyboard Shortcuts Cheatsheet Modal Component -->
+    <AdminListingReviewShortcutsDialog v-model:visible="shortcutsDialogVisible" />
+
+    <!-- Online Image Editor Dialog -->
+    <ImageEditorDialog
+      v-model:visible="editorVisible"
+      :listing="editingScreenshot?.listing || null"
+      :image-url="editingScreenshot?.url || ''"
+      :image-label="editingScreenshot?.label || ''"
+      @saved="handleScreenshotSaved"
+    />
   </section>
 </template>
 
diff --git a/frontend/src/features/listings/api/listings.ts b/frontend/src/features/listings/api/listings.ts
index 19ed28a..9e97b3a 100644
--- a/frontend/src/features/listings/api/listings.ts
+++ b/frontend/src/features/listings/api/listings.ts
@@ -300,3 +300,19 @@ export async function rejectListing(id: number, reason: string) {
   })
   return data.data
 }
+
+export interface AdminListingScreenshotsPayload {
+  screenshot_urls: string[]
+  screenshot_groups?: Record<string, unknown>
+}
+
+export async function adminUpdateListingScreenshots(
+  id: number,
+  payload: AdminListingScreenshotsPayload
+) {
+  const { data } = await apiClient.put<ApiResponse<Listing>>(
+    `/admin/listings/${id}/screenshots`,
+    payload
+  )
+  return data.data
+}