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

<template>
  <div>
    <div v-if="loading" class="flex items-center justify-center py-10">
      <div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-600"></div>
    </div>

    <div v-else class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
        <thead class="sticky top-0 z-10 bg-gray-50/50 dark:bg-dark-800/50">
          <tr>
            <th
              scope="col"
              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
            >
              {{ t('admin.ops.errorLog.timeId') }}
            </th>
            <th
              scope="col"
              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
            >
              {{ t('admin.ops.errorLog.context') }}
            </th>
            <th
              scope="col"
              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
            >
              {{ t('admin.ops.errorLog.status') }}
            </th>
            <th
              scope="col"
              class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
            >
              {{ t('admin.ops.errorLog.message') }}
            </th>
            <th
              scope="col"
              class="whitespace-nowrap px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
            >
              {{ t('admin.ops.errorLog.latency') }}
            </th>
            <th
              scope="col"
              class="whitespace-nowrap px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
            >
              {{ t('admin.ops.errorLog.action') }}
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-dark-700">
          <tr v-if="rows.length === 0" class="bg-white dark:bg-dark-900">
            <td colspan="6" class="py-16 text-center text-sm text-gray-400 dark:text-dark-500">
              {{ t('admin.ops.errorLog.noErrors') }}
            </td>
          </tr>

          <tr
            v-for="log in rows"
            :key="log.id"
            class="group cursor-pointer transition-all duration-200 hover:bg-gray-50/80 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:hover:bg-dark-800/50 dark:focus:ring-offset-dark-900"
            tabindex="0"
            role="button"
            @click="emit('openErrorDetail', log.id)"
            @keydown.enter.prevent="emit('openErrorDetail', log.id)"
            @keydown.space.prevent="emit('openErrorDetail', log.id)"
          >
            <!-- Time & ID -->
            <td class="px-6 py-4">
              <div class="flex flex-col gap-0.5">
                <span class="font-mono text-xs font-bold text-gray-900 dark:text-gray-200">
                  {{ formatDateTime(log.created_at).split(' ')[1] }}
                </span>
                <span
                  class="font-mono text-[10px] text-gray-400 transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400"
                  :title="log.request_id || log.client_request_id"
                >
                  {{ (log.request_id || log.client_request_id || '').substring(0, 12) }}
                </span>
              </div>
            </td>

	            <!-- Context (Platform/Model) -->
	            <td class="px-6 py-4">
	              <div class="flex flex-col items-start gap-1.5">
	                <span
	                  class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-tight text-gray-600 dark:bg-dark-700 dark:text-gray-300"
	                >
	                  {{ log.platform || '-' }}
	                </span>
	                <span
	                  v-if="log.model"
	                  class="max-w-[160px] truncate font-mono text-[10px] text-gray-500 dark:text-dark-400"
	                  :title="log.model"
	                >
	                  {{ log.model }}
	                </span>
	                <div
	                  v-if="log.group_id || log.account_id"
	                  class="flex flex-wrap items-center gap-2 font-mono text-[10px] font-semibold text-gray-400 dark:text-dark-500"
	                >
	                  <span v-if="log.group_id">{{ t('admin.ops.errorLog.grp') }} {{ log.group_id }}</span>
	                  <span v-if="log.account_id">{{ t('admin.ops.errorLog.acc') }} {{ log.account_id }}</span>
	                </div>
	              </div>
	            </td>

            <!-- Status & Severity -->
            <td class="px-6 py-4">
              <div class="flex flex-wrap items-center gap-2">
                <span
                  :class="[
                    'inline-flex items-center rounded-lg px-2 py-1 text-xs font-black ring-1 ring-inset shadow-sm',
                    getStatusClass(log.status_code)
                  ]"
                >
                  {{ log.status_code }}
                </span>
                <span
                  v-if="log.severity"
                  :class="['rounded-md px-2 py-0.5 text-[10px] font-black shadow-sm', getSeverityClass(log.severity)]"
                >
                  {{ log.severity }}
                </span>
              </div>
            </td>

            <!-- Message -->
            <td class="px-6 py-4">
              <div class="max-w-md lg:max-w-2xl">
                <p class="truncate text-xs font-semibold text-gray-700 dark:text-gray-300" :title="log.message">
                  {{ formatSmartMessage(log.message) || '-' }}
                </p>
                <div class="mt-1.5 flex flex-wrap gap-x-3 gap-y-1">
                  <div v-if="log.phase" class="flex items-center gap-1">
                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
                    <span class="text-[9px] font-black uppercase tracking-tighter text-gray-400">{{ log.phase }}</span>
                  </div>
                  <div v-if="log.client_ip" class="flex items-center gap-1">
                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
                    <span class="text-[9px] font-mono font-bold text-gray-400">{{ log.client_ip }}</span>
                  </div>
                </div>
              </div>
            </td>

            <!-- Latency -->
            <td class="px-6 py-4 text-right">
              <div class="flex flex-col items-end">
                <span class="font-mono text-xs font-black" :class="getLatencyClass(log.latency_ms ?? null)">
                  {{ log.latency_ms != null ? Math.round(log.latency_ms) + 'ms' : '--' }}
                </span>
              </div>
            </td>

            <!-- Actions -->
            <td class="px-6 py-4 text-right" @click.stop>
              <button type="button" class="btn btn-secondary btn-sm" @click="emit('openErrorDetail', log.id)">
                {{ t('admin.ops.errorLog.details') }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <Pagination
      v-if="total > 0"
      :total="total"
      :page="page"
      :page-size="pageSize"
      :page-size-options="[10, 20, 50, 100, 200, 500]"
      @update:page="emit('update:page', $event)"
      @update:pageSize="emit('update:pageSize', $event)"
    />
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import Pagination from '@/components/common/Pagination.vue'
import type { OpsErrorLog } from '@/api/admin/ops'
import { getSeverityClass, formatDateTime } from '../utils/opsFormatters'

const { t } = useI18n()

interface Props {
  rows: OpsErrorLog[]
  total: number
  loading: boolean
  page: number
  pageSize: number
}

interface Emits {
  (e: 'openErrorDetail', id: number): void
  (e: 'update:page', value: number): void
  (e: 'update:pageSize', value: number): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

function getStatusClass(code: number): string {
  if (code >= 500) return 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-500/30'
  if (code === 429) return 'bg-purple-50 text-purple-700 ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400 dark:ring-purple-500/30'
  if (code >= 400) return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-500/30'
  return 'bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-900/30 dark:text-gray-400 dark:ring-gray-500/30'
}

function getLatencyClass(latency: number | null): string {
  if (!latency) return 'text-gray-400'
  if (latency > 10000) return 'text-red-600 font-black'
  if (latency > 5000) return 'text-red-500 font-bold'
  if (latency > 2000) return 'text-orange-500 font-medium'
  return 'text-gray-600 dark:text-gray-400'
}

function formatSmartMessage(msg: string): string {
  if (!msg) return ''

  if (msg.startsWith('{') || msg.startsWith('[')) {
    try {
      const obj = JSON.parse(msg)
      if (obj?.error?.message) return String(obj.error.message)
      if (obj?.message) return String(obj.message)
      if (obj?.detail) return String(obj.detail)
      if (typeof obj === 'object') return JSON.stringify(obj).substring(0, 150)
    } catch {
      // ignore parse error
    }
  }

  if (msg.includes('context deadline exceeded')) return 'context deadline exceeded'
  if (msg.includes('connection refused')) return 'connection refused'
  if (msg.toLowerCase().includes('rate limit')) return 'rate limit'

  return msg.length > 200 ? msg.substring(0, 200) + '...' : msg
}
</script>