refactor(usage): 错误表提取共享徽章工具与 IP 批量工具条,后端排序解析归并 SetSort

- 新增 utils/errorBadges.ts(状态码/请求类型徽章、排序 key 映射)与 IpGeoBatchToolbar 组件,两张错误表接入
- OpsErrorLogFilter.SetSort 统一 admin/用户端 sort 参数解析
- 范围限定功能自身文件,UsageTable 基线保持不动

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: DaydreamCoding

backend/internal/handler/admin/ops_handler.go

@@ -77,8 +77,7 @@ func NewOpsHandler(opsService *service.OpsService) *OpsHandler {
 // Column whitelist and order normalization live in the repository; unknown
 // values degrade to the default (created_at DESC), mirroring the usage list.
 func applyOpsErrorSortParams(c *gin.Context, filter *service.OpsErrorLogFilter) {
-	filter.SortBy = strings.TrimSpace(c.Query("sort_by"))
-	filter.SortOrder = strings.TrimSpace(c.Query("sort_order"))
+	filter.SetSort(c.Query("sort_by"), c.Query("sort_order"))
 }
 
 // GET /api/v1/admin/ops/errors

backend/internal/handler/usage_handler.go

@@ -323,8 +323,7 @@ func (h *UsageHandler) ListErrors(c *gin.Context) {
 	}
 
 	// 排序对齐用量明细:列白名单与方向归一在 repo 层,非法值回退 created_at DESC。
-	filter.SortBy = strings.TrimSpace(c.Query("sort_by"))
-	filter.SortOrder = strings.TrimSpace(c.Query("sort_order"))
+	filter.SetSort(c.Query("sort_by"), c.Query("sort_order"))
 
 	result, err := h.opsService.ListUserErrorRequests(c.Request.Context(), subject.UserID, filter)
 	if err != nil {

backend/internal/service/ops_models.go

@@ -1,6 +1,9 @@
 package service
 
-import "time"
+import (
+	"strings"
+	"time"
+)
 
 type OpsSystemLog struct {
 	ID              int64          `json:"id"`
@@ -166,6 +169,13 @@ type OpsErrorLogFilter struct {
 	SortOrder string
 }
 
+// SetSort normalizes raw sort_by/sort_order query values into the filter.
+// Shared by the admin and user-facing error list handlers.
+func (f *OpsErrorLogFilter) SetSort(sortBy, sortOrder string) {
+	f.SortBy = strings.TrimSpace(sortBy)
+	f.SortOrder = strings.TrimSpace(sortOrder)
+}
+
 type OpsErrorLogList struct {
 	Errors   []*OpsErrorLog `json:"errors"`
 	Total    int            `json:"total"`

frontend/src/components/common/IpGeoBatchToolbar.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    v-if="uniqueIps.length > 0"
+    class="flex flex-shrink-0 items-center justify-end gap-2 border-b border-gray-200 px-4 py-2 dark:border-dark-700"
+  >
+    <span v-if="pendingCount > 0" class="text-xs text-gray-500 dark:text-gray-400">
+      {{ t('usage.ipGeo.pending', { count: pendingCount }) }}
+    </span>
+    <button
+      type="button"
+      class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-primary-600 transition-colors hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-primary-400 dark:hover:bg-primary-900/30"
+      :disabled="loading || pendingCount === 0"
+      @click="run"
+    >
+      {{ loading ? t('usage.ipGeo.batchFetching') : t('usage.ipGeo.batchFetch') }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { fetchBatch, getEntry } from '@/utils/ipGeoLookup'
+
+// 当前页 IP 批量地理查询工具条:传入原始 IP 列表(可含空值),内部去重;
+// 无 IP 时自身不渲染。批量失败 emit failed,由使用方弹提示。
+const props = defineProps<{
+  ips: Array<string | null | undefined>
+}>()
+
+const emit = defineEmits<{
+  (e: 'failed'): void
+}>()
+
+const { t } = useI18n()
+
+const uniqueIps = computed(() =>
+  Array.from(new Set(props.ips.filter((ip): ip is string => Boolean(ip))))
+)
+
+const pendingCount = computed(() =>
+  uniqueIps.value.filter((ip) => {
+    const status = getEntry(ip).status
+    return status === 'idle' || status === 'error'
+  }).length
+)
+
+const loading = ref(false)
+
+const run = async () => {
+  loading.value = true
+  try {
+    const ok = await fetchBatch(uniqueIps.value)
+    if (!ok) emit('failed')
+  } finally {
+    loading.value = false
+  }
+}
+</script>

frontend/src/components/user/UserErrorRequestsTable.vue

@@ -1,22 +1,7 @@
 <template>
   <div class="flex min-h-0 flex-1 flex-col">
     <div class="card flex min-h-0 flex-1 flex-col overflow-hidden">
-      <div
-        v-if="currentPageIps.length > 0"
-        class="flex flex-shrink-0 items-center justify-end gap-2 border-b border-gray-200 px-4 py-2 dark:border-dark-700"
-      >
-        <span v-if="pendingIpCount > 0" class="text-xs text-gray-500 dark:text-gray-400">
-          {{ t('usage.ipGeo.pending', { count: pendingIpCount }) }}
-        </span>
-        <button
-          type="button"
-          class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-primary-600 transition-colors hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-primary-400 dark:hover:bg-primary-900/30"
-          :disabled="ipGeoBatchLoading || pendingIpCount === 0"
-          @click="handleBatchFetchIpGeo"
-        >
-          {{ ipGeoBatchLoading ? t('usage.ipGeo.batchFetching') : t('usage.ipGeo.batchFetch') }}
-        </button>
-      </div>
+      <IpGeoBatchToolbar :ips="rows.map((r) => r.client_ip)" @failed="emit('ipGeoBatchFailed')" />
 
       <DataTable
         :columns="columns"
@@ -143,8 +128,15 @@ import EmptyState from '@/components/common/EmptyState.vue'
 import Pagination from '@/components/common/Pagination.vue'
 import UserErrorDetailModal from '@/components/user/UserErrorDetailModal.vue'
 import IpGeoCell from '@/components/common/IpGeoCell.vue'
+import IpGeoBatchToolbar from '@/components/common/IpGeoBatchToolbar.vue'
 import { formatDateTime } from '@/utils/format'
-import { fetchBatch, getEntry } from '@/utils/ipGeoLookup'
+import {
+  mapErrorSortKey,
+  numericRequestTypeKind,
+  requestTypeBadgeClass,
+  requestTypeLabelKey,
+  statusCodeBadgeClass,
+} from '@/utils/errorBadges'
 import type { UserErrorRequest } from '@/types'
 import type { Column } from '@/components/common/types'
 
@@ -165,9 +157,8 @@ const emit = defineEmits<{
   (e: 'sort', sortBy: string, sortOrder: 'asc' | 'desc'): void
 }>()
 
-// 列 key → 后端 sort_by:status 列实际按 status_code 排序
 function onSort(key: string, order: 'asc' | 'desc') {
-  emit('sort', key === 'status' ? 'status_code' : key, order)
+  emit('sort', mapErrorSortKey(key), order)
 }
 
 const { t } = useI18n()
@@ -195,37 +186,10 @@ const columns = computed<Column[]>(() =>
     : allColumns.value
 )
 
-// 类型徽章:request_type 1/2/3 → 同步/流式/WS;缺失时按 stream 布尔回退。
-// 配色对齐 UsageTable getRequestTypeBadgeClass(stream 蓝、sync 灰、ws 紫)。
 function requestTypeBadge(row: UserErrorRequest): { label: string; className: string } | null {
-  const rt = row.request_type ?? (row.stream == null ? 0 : row.stream ? 2 : 1)
-  if (rt === 3) return { label: t('usage.ws'), className: 'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-200' }
-  if (rt === 2) return { label: t('usage.stream'), className: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' }
-  if (rt === 1) return { label: t('usage.sync'), className: 'bg-gray-100 text-gray-800 dark:bg-dark-700 dark:text-gray-200' }
-  return null
-}
-
-const ipGeoBatchLoading = ref(false)
-
-const currentPageIps = computed(() =>
-  Array.from(new Set(props.rows.map((row) => row.client_ip).filter((ip): ip is string => Boolean(ip))))
-)
-
-const pendingIpCount = computed(() =>
-  currentPageIps.value.filter((ip) => {
-    const status = getEntry(ip).status
-    return status === 'idle' || status === 'error'
-  }).length
-)
-
-const handleBatchFetchIpGeo = async () => {
-  ipGeoBatchLoading.value = true
-  try {
-    const ok = await fetchBatch(currentPageIps.value)
-    if (!ok) emit('ipGeoBatchFailed')
-  } finally {
-    ipGeoBatchLoading.value = false
-  }
+  const kind = numericRequestTypeKind(row.request_type, row.stream)
+  if (!kind) return null
+  return { label: t(requestTypeLabelKey(kind)), className: requestTypeBadgeClass(kind) }
 }
 
 const showDetail = ref(false)
@@ -236,11 +200,5 @@ function openDetail(id: number) {
   showDetail.value = true
 }
 
-// 状态码配色对齐管理端错误表(OpsErrorLogTable.getStatusClass)
-function statusClass(code: number) {
-  if (code >= 500) return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-  if (code === 429) return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
-  if (code >= 400) return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
-  return 'bg-gray-100 text-gray-800 dark:bg-dark-700 dark:text-gray-200'
-}
+const statusClass = statusCodeBadgeClass
 </script>

frontend/src/utils/errorBadges.ts

@@ -0,0 +1,54 @@
+/**
+ * 错误请求/用量明细共享的徽章配色与列映射。
+ * 配色统一 bg-X-100/text-X-800 体系,与 UsageTable 一致。
+ */
+
+import type { UsageRequestType } from '@/types'
+
+export type UsageRequestKind = UsageRequestType
+
+/** 状态码徽章:≥500 红、429 紫、≥400 琥珀、其余灰 */
+export function statusCodeBadgeClass(code: number): string {
+  if (code >= 500) return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+  if (code === 429) return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
+  if (code >= 400) return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
+  return 'bg-gray-100 text-gray-800 dark:bg-dark-700 dark:text-gray-200'
+}
+
+/** 请求类型徽章配色(cyber 红、ws 紫、stream 蓝、sync 灰、未知琥珀) */
+export function requestTypeBadgeClass(kind: UsageRequestKind): string {
+  if (kind === 'cyber') return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+  if (kind === 'ws_v2') return 'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-200'
+  if (kind === 'stream') return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+  if (kind === 'sync') return 'bg-gray-100 text-gray-800 dark:bg-dark-700 dark:text-gray-200'
+  return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
+}
+
+/** 请求类型 i18n 键(展示方自行 t()) */
+export function requestTypeLabelKey(kind: UsageRequestKind): string {
+  if (kind === 'cyber') return 'usage.cyber'
+  if (kind === 'ws_v2') return 'usage.ws'
+  if (kind === 'stream') return 'usage.stream'
+  if (kind === 'sync') return 'usage.sync'
+  return 'usage.unknown'
+}
+
+/**
+ * 数字 request_type(1 同步/2 流式/3 WS)→ kind;
+ * 缺失时按 stream 布尔回退,两者都缺返回 null(展示为 -)。
+ */
+export function numericRequestTypeKind(
+  requestType?: number | null,
+  stream?: boolean | null
+): UsageRequestKind | null {
+  const rt = requestType ?? (stream == null ? 0 : stream ? 2 : 1)
+  if (rt === 3) return 'ws_v2'
+  if (rt === 2) return 'stream'
+  if (rt === 1) return 'sync'
+  return null
+}
+
+/** 错误表列 key → 后端 sort_by(status 列实际按 status_code 排序) */
+export function mapErrorSortKey(key: string): string {
+  return key === 'status' ? 'status_code' : key
+}

frontend/src/views/admin/ops/components/OpsErrorLogTable.vue

@@ -1,22 +1,7 @@
 <template>
   <div class="flex h-full min-h-0 flex-col">
     <div class="card flex min-h-0 flex-1 flex-col overflow-hidden">
-      <div
-        v-if="currentPageIps.length > 0"
-        class="flex flex-shrink-0 items-center justify-end gap-2 border-b border-gray-200 px-4 py-2 dark:border-dark-700"
-      >
-        <span v-if="pendingIpCount > 0" class="text-xs text-gray-500 dark:text-gray-400">
-          {{ t('usage.ipGeo.pending', { count: pendingIpCount }) }}
-        </span>
-        <button
-          type="button"
-          class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-primary-600 transition-colors hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-primary-400 dark:hover:bg-primary-900/30"
-          :disabled="ipGeoBatchLoading || pendingIpCount === 0"
-          @click="handleBatchFetchIpGeo"
-        >
-          {{ ipGeoBatchLoading ? t('usage.ipGeo.batchFetching') : t('usage.ipGeo.batchFetch') }}
-        </button>
-      </div>
+      <IpGeoBatchToolbar :ips="rows.map((r) => r.client_ip)" @failed="emit('ipGeoBatchFailed')" />
 
       <DataTable
         :columns="columns"
@@ -194,17 +179,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import DataTable from '@/components/common/DataTable.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Pagination from '@/components/common/Pagination.vue'
 import IpGeoCell from '@/components/common/IpGeoCell.vue'
+import IpGeoBatchToolbar from '@/components/common/IpGeoBatchToolbar.vue'
 import type { OpsErrorLog } from '@/api/admin/ops'
 import type { Column } from '@/components/common/types'
 import { getSeverityClass, formatDateTime } from '../utils/opsFormatters'
-import { fetchBatch, getEntry } from '@/utils/ipGeoLookup'
 import { mapErrorCategory } from '@/utils/errorCategory'
+import { mapErrorSortKey, statusCodeBadgeClass } from '@/utils/errorBadges'
 
 const { t } = useI18n()
 
@@ -313,40 +299,11 @@ interface Emits {
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
-// 列 key → 后端 sort_by:status 列实际按 status_code 排序
 function onSort(key: string, order: 'asc' | 'desc') {
-  emit('sort', key === 'status' ? 'status_code' : key, order)
-}
-
-const ipGeoBatchLoading = ref(false)
-
-const currentPageIps = computed(() =>
-  Array.from(new Set(props.rows.map((row) => row.client_ip).filter((ip): ip is string => Boolean(ip))))
-)
-
-const pendingIpCount = computed(() =>
-  currentPageIps.value.filter((ip) => {
-    const status = getEntry(ip).status
-    return status === 'idle' || status === 'error'
-  }).length
-)
-
-const handleBatchFetchIpGeo = async () => {
-  ipGeoBatchLoading.value = true
-  try {
-    const ok = await fetchBatch(currentPageIps.value)
-    if (!ok) emit('ipGeoBatchFailed')
-  } finally {
-    ipGeoBatchLoading.value = false
-  }
+  emit('sort', mapErrorSortKey(key), order)
 }
 
-function getStatusClass(code: number): string {
-  if (code >= 500) return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-  if (code === 429) return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
-  if (code >= 400) return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
-  return 'bg-gray-100 text-gray-800 dark:bg-dark-700 dark:text-gray-200'
-}
+const getStatusClass = statusCodeBadgeClass
 
 function formatSmartMessage(msg: string): string {
   if (!msg) return ''