admin_new/src/modules/openapi/AuditLogListView.vue

<script setup lang="ts">
/**
 * F006 集成管理 - 审计日志
 * W4.3:套老 vue audit-log.vue 结构 + v1.7 设计规范
 *
 * 后端端点:
 *   GET  /sys/openapi/audit-log/page  列表分页(57 条实测)
 *   GET  /sys/openapi/audit-log/{id}  详情
 *   POST /sys/openapi/audit-log/save  MCP server 异步写入
 *
 * 字段(来自 OpenApiAuditLogEntity):
 *   id / appId / customerCode / customerName / appName
 *   callType / toolOrEndpoint / requestId / requestSummary
 *   responseCode / responseStatus / costMs / ip / userAgent
 *   errorMessage / createDate
 *
 * 4 种响应状态:
 *   0=成功 / 1=业务失败 / 2=系统异常 / 3=鉴权失败
 *
 * 2 种调用类型:
 *   MCP(主) / REST(预留)
 *
 * 设计规范:§16 列表页 + §17.7 紧凑弹窗 + §17.8 主题色弹窗 + §17.9 列优化
 */
import { onMounted, ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { httpGet } from '@/utils/request'
import DataTable from '@/components/DataTable/DataTable.vue'

interface AuditLog {
  id: string
  appId: string
  customerCode: string
  customerName?: string
  appName?: string
  callType: 'MCP' | 'REST' | string
  toolOrEndpoint: string
  requestId: string
  requestSummary?: string | null
  responseCode?: number | null
  responseStatus: 0 | 1 | 2 | 3
  costMs: number
  ip?: string | null
  userAgent?: string | null
  errorMessage?: string | null
  createDate: string | number
}

interface CustomerOpt { value: string; label: string }
interface AppOpt { value: string; label: string }

const route = useRoute()
const router = useRouter()

const STATUS_MAP: Record<number, { label: string; type: string }> = {
  0: { label: '成功', type: 'success' },
  1: { label: '业务失败', type: 'warning' },
  2: { label: '系统异常', type: 'danger' },
  3: { label: '鉴权失败', type: 'info' }
}

const STATUS_TABS = [
  { value: '', label: '全部' },
  { value: '0', label: '成功' },
  { value: '1', label: '业务失败' },
  { value: '2', label: '系统异常' },
  { value: '3', label: '鉴权失败' }
]

const list = ref<AuditLog[]>([])
const total = ref(0)
const loading = ref(false)
const page = ref(1)
const limit = ref(20)

const filters = reactive({
  searchKey: '',
  appId: '',
  customerCode: '',
  callType: ''
})

const customerOptions = ref<CustomerOpt[]>([])
const appOptions = ref<AppOpt[]>([])

const detailVisible = ref(false)
const currentRow = ref<AuditLog | null>(null)

const loadError = ref<string | null>(null)

function fmtDate(ts?: string | number | null) {
  if (!ts) return '--'
  const n = typeof ts === 'string' ? Date.parse(ts) : ts
  if (!n) return '--'
  const d = new Date(n)
  if (isNaN(d.getTime())) return String(ts)
  const pad = (x: number) => String(x).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}

function formatIp(ip?: string | null): string {
  if (!ip) return '--'
  const m = ip.match(/^::ffff:(\d+\.\d+\.\d+\.\d+)$/i)
  return m ? m[1] : ip
}

function statusLabel(s: number) {
  return STATUS_MAP[s]?.label ?? String(s)
}

function statusType(s: number): 'success' | 'warning' | 'danger' | 'info' {
  return (STATUS_MAP[s]?.type ?? 'info') as any
}

function costColor(ms: number): string {
  if (ms > 1000) return 'var(--el-color-danger)'
  if (ms > 500) return 'var(--el-color-warning)'
  return 'var(--el-text-color-regular)'
}

async function load() {
  loading.value = true
  loadError.value = null
  try {
    const data = await httpGet<{ total: number; list: any[] }>('/sys/openapi/audit-log/page', {
      page: page.value,
      limit: limit.value,
      ...(filters.searchKey ? { searchKey: filters.searchKey } : {}),
      ...(filters.appId ? { appId: filters.appId } : {}),
      ...(filters.customerCode ? { customerCode: filters.customerCode } : {}),
      ...(filters.callType ? { callType: filters.callType } : {})
    })
    list.value = (data.list || []).map((it: any) => ({
      id: String(it.id),
      appId: it.appId || '--',
      customerCode: it.customerCode || '--',
      customerName: it.customerName || it.customerCode || '--',
      appName: it.appName || '--',
      callType: it.callType || '--',
      toolOrEndpoint: it.toolOrEndpoint || '--',
      requestId: it.requestId || '--',
      requestSummary: it.requestSummary,
      responseCode: it.responseCode,
      responseStatus: (it.responseStatus ?? 0) as 0 | 1 | 2 | 3,
      costMs: it.costMs ?? 0,
      ip: it.ip,
      userAgent: it.userAgent,
      errorMessage: it.errorMessage,
      createDate: it.createDate
    }))
    total.value = data.total || 0
  } catch (e: any) {
    console.error('审计日志加载失败', e)
    list.value = []
    total.value = 0
    loadError.value = e?.msg || e?.message || '后端接口异常(详见 console)'
  } finally {
    loading.value = false
  }
}

async function loadCustomers() {
  try {
    const data = await httpGet<any[]>('/sys/openapi/customer/list')
    if (Array.isArray(data)) {
      customerOptions.value = data.map((c: any) => ({
        value: c.customerCode,
        label: c.customerName
      }))
    }
  } catch (e) {
    console.error('客户列表加载失败', e)
  }
}

async function loadApps() {
  try {
    const data = await httpGet<{ list: any[] }>('/sys/openapi/app/page', { page: 1, limit: 100 })
    const apps = data.list || []
    appOptions.value = apps.map((a: any) => ({
      value: a.appId,
      label: a.appName || a.appId
    }))
  } catch (e) {
    console.error('App 列表加载失败', e)
  }
}

function onSearch() { page.value = 1; load() }
function onReset() {
  filters.searchKey = ''
  filters.appId = ''
  filters.customerCode = ''
  filters.callType = ''
  page.value = 1
  load()
}
function onPageChange(p: number) { page.value = p; load() }
function onLimitChange(l: number) { limit.value = l; page.value = 1; load() }
function onStatusTab(v: string) {
  if (v === '') {
    onReset()
  } else {
    filters.searchKey = ''
    filters.appId = ''
    filters.customerCode = ''
    filters.callType = ''
    page.value = 1
    loadWithStatus(v)
  }
}

async function loadWithStatus(status: string) {
  loading.value = true
  loadError.value = null
  try {
    const data = await httpGet<{ total: number; list: any[] }>('/sys/openapi/audit-log/page', {
      page: page.value,
      limit: limit.value,
      responseStatus: Number(status)
    })
    list.value = (data.list || []).map((it: any) => ({
      id: String(it.id),
      appId: it.appId || '--',
      customerCode: it.customerCode || '--',
      customerName: it.customerName || it.customerCode || '--',
      appName: it.appName || '--',
      callType: it.callType || '--',
      toolOrEndpoint: it.toolOrEndpoint || '--',
      requestId: it.requestId || '--',
      requestSummary: it.requestSummary,
      responseCode: it.responseCode,
      responseStatus: (it.responseStatus ?? 0) as 0 | 1 | 2 | 3,
      costMs: it.costMs ?? 0,
      ip: it.ip,
      userAgent: it.userAgent,
      errorMessage: it.errorMessage,
      createDate: it.createDate
    }))
    total.value = data.total || 0
  } catch (e: any) {
    console.error('审计日志加载失败', e)
    list.value = []
    total.value = 0
    loadError.value = e?.msg || e?.message || '后端接口异常(详见 console)'
  } finally {
    loading.value = false
  }
}

async function detailHandle(row: AuditLog) {
  try {
    const data = await httpGet<any>(`/sys/openapi/audit-log/${row.id}`)
    currentRow.value = {
      ...row,
      ...data,
      id: String(data.id),
      responseStatus: data.responseStatus ?? row.responseStatus,
      costMs: data.costMs ?? row.costMs,
      createDate: data.createDate || row.createDate
    }
    detailVisible.value = true
  } catch (e: any) {
    ElMessage.error(e?.msg || e?.message || '详情加载失败')
  }
}

const activeStatus = computed(() => {
  return filters.searchKey || filters.appId || filters.customerCode || filters.callType ? '' : ''
})

function applyQueryParams() {
  const q = route.query
  if (q.customerCode && typeof q.customerCode === 'string') {
    filters.customerCode = q.customerCode
  }
  if (q.appId && typeof q.appId === 'string') {
    filters.appId = q.appId
  }
  if (q.username && typeof q.username === 'string') {
    filters.searchKey = q.username
  }
}

onMounted(() => {
  applyQueryParams()
  load()
  loadCustomers()
  loadApps()
})
</script>

<template>
  <div class="rr-openapi-audit">
    <div class="rr-page-header">
      <div class="rr-page-titles">
        <h2 class="rr-page-title">审计日志</h2>
        <p class="rr-page-sub">共 {{ total }} 条调用记录</p>
      </div>
      <div class="rr-page-actions">
        <el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
        <el-button type="primary" class="rr-btn-primary" @click="onSearch">查询</el-button>
      </div>
    </div>

    <div class="rr-tabs-row">
      <div class="rr-tabs">
        <div
          v-for="t in STATUS_TABS"
          :key="t.value"
          class="rr-tab"
          :class="{ active: !filters.searchKey && !filters.appId && !filters.customerCode && !filters.callType && activeStatus === t.value }"
          @click="onStatusTab(t.value)"
        >{{ t.label }}</div>
      </div>
      <div class="rr-filters">
        <el-input
          v-model="filters.searchKey"
          placeholder="搜索 工具 / 请求ID / 摘要"
          clearable
          class="rr-search-input"
          size="small"
          :prefix-icon="'Search'"
          @keyup.enter="onSearch"
        />
        <el-select
          v-model="filters.customerCode"
          placeholder="客户"
          class="rr-customer-select"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="opt in customerOptions"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
        <el-select
          v-model="filters.appId"
          placeholder="App"
          class="rr-app-select"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="opt in appOptions"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
        <el-select
          v-model="filters.callType"
          placeholder="类型"
          class="rr-type-select"
          clearable
          size="small"
        >
          <el-option value="MCP" label="MCP" />
          <el-option value="REST" label="REST" />
        </el-select>
      </div>
    </div>

    <div class="rr-list-card">
      <DataTable
        :columns="[
          { prop: 'createDate', label: '时间', width: 170, slot: 'createDate' },
          { prop: 'customerName', label: '客户', width: 140 },
          { prop: 'appName', label: '应用', minWidth: 160 },
          { prop: 'callType', label: '类型', width: 80, slot: 'callType' },
          { prop: 'toolOrEndpoint', label: '工具/接口', minWidth: 200, slot: 'tool' },
          { prop: 'responseStatus', label: '状态', width: 100, slot: 'status' },
          { prop: 'costMs', label: '耗时', width: 90, slot: 'costMs' },
          { prop: 'ip', label: '客户端 IP', width: 140, slot: 'ip' },
          { prop: 'requestId', label: '请求 ID', width: 180, slot: 'requestId' },
          { label: '操作', width: 100, slot: 'action' }
        ]"
        :data="list"
        :loading="loading"
        :total="total"
        :page="page"
        :limit="limit"
        :show-pagination="true"
        :error="loadError"
        empty-text="暂无审计记录"
        borderless
        row-key="id"
        @page-change="onPageChange"
        @limit-change="onLimitChange"
      >
        <template #createDate="{ row }">
          <span class="rr-time">{{ fmtDate(row.createDate) }}</span>
        </template>

        <template #callType="{ row }">
          <span :class="['rr-type-badge', `rr-type-${row.callType}`]">{{ row.callType }}</span>
        </template>

        <template #tool="{ row }">
          <code class="rr-mono">{{ row.toolOrEndpoint }}</code>
        </template>

        <template #status="{ row }">
          <el-tag :type="statusType(row.responseStatus)" size="small" effect="light">
            {{ statusLabel(row.responseStatus) }}
          </el-tag>
        </template>

        <template #costMs="{ row }">
          <span :style="{ color: costColor(row.costMs) }">{{ row.costMs }} ms</span>
        </template>

        <template #ip="{ row }">
          <span class="rr-mono-sm">{{ formatIp(row.ip) }}</span>
        </template>

        <template #requestId="{ row }">
          <code class="rr-mono-sm">{{ row.requestId }}</code>
        </template>

        <template #action="{ row }">
          <el-button
            text
            type="primary"
            size="small"
            @click="detailHandle(row)"
          >详情</el-button>
        </template>
      </DataTable>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      title="审计日志详情"
      width="720"
      class="rr-dialog-compact"
      align-center
      destroy-on-close
      :style="{ borderRadius: '12px', overflow: 'hidden' }"
    >
      <div v-if="currentRow" class="rr-detail">
        <div class="rr-detail-row">
          <div class="rr-detail-label">请求 ID</div>
          <div class="rr-detail-value">
            <code class="rr-mono">{{ currentRow.requestId }}</code>
          </div>
        </div>
        <div class="rr-detail-row">
          <div class="rr-detail-label">AppID</div>
          <div class="rr-detail-value">
            <code class="rr-mono">{{ currentRow.appId }}</code>
          </div>
        </div>
        <div class="rr-detail-row">
          <div class="rr-detail-label">客户编码</div>
          <div class="rr-detail-value">{{ currentRow.customerCode }}</div>
        </div>
        <div class="rr-detail-row">
          <div class="rr-detail-label">调用类型</div>
          <div class="rr-detail-value">
            <span :class="['rr-type-badge', `rr-type-${currentRow.callType}`]">{{ currentRow.callType }}</span>
          </div>
        </div>
        <div class="rr-detail-row">
          <div class="rr-detail-label">响应状态</div>
          <div class="rr-detail-value">
            <el-tag :type="statusType(currentRow.responseStatus)" size="small" effect="light">
              {{ statusLabel(currentRow.responseStatus) }}
            </el-tag>
          </div>
        </div>
        <div class="rr-detail-row rr-detail-full">
          <div class="rr-detail-label">工具 / 接口</div>
          <div class="rr-detail-value">
            <code class="rr-mono">{{ currentRow.toolOrEndpoint }}</code>
          </div>
        </div>
        <div class="rr-detail-row">
          <div class="rr-detail-label">响应码</div>
          <div class="rr-detail-value">{{ currentRow.responseCode ?? '--' }}</div>
        </div>
        <div class="rr-detail-row">
          <div class="rr-detail-label">耗时</div>
          <div class="rr-detail-value">
            <span :style="{ color: costColor(currentRow.costMs) }">{{ currentRow.costMs }} ms</span>
          </div>
        </div>
        <div class="rr-detail-row rr-detail-full">
          <div class="rr-detail-label">客户端 IP</div>
          <div class="rr-detail-value">{{ formatIp(currentRow.ip) }}</div>
        </div>
        <div class="rr-detail-row rr-detail-full">
          <div class="rr-detail-label">User Agent</div>
          <div class="rr-detail-value rr-detail-muted">{{ currentRow.userAgent || '--' }}</div>
        </div>
        <div class="rr-detail-row rr-detail-full">
          <div class="rr-detail-label">请求摘要</div>
          <div class="rr-detail-value">
            <pre v-if="currentRow.requestSummary" class="rr-pre">{{ currentRow.requestSummary }}</pre>
            <span v-else class="rr-detail-muted">--</span>
          </div>
        </div>
        <div v-if="currentRow.errorMessage" class="rr-detail-row rr-detail-full">
          <div class="rr-detail-label">错误信息</div>
          <div class="rr-detail-value">
            <span class="rr-error">{{ currentRow.errorMessage }}</span>
          </div>
        </div>
        <div class="rr-detail-row rr-detail-full">
          <div class="rr-detail-label">时间</div>
          <div class="rr-detail-value">{{ fmtDate(currentRow.createDate) }}</div>
        </div>
      </div>

      <template #footer>
        <div class="rr-dialog-footer">
          <el-button type="primary" @click="detailVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.rr-openapi-audit {
  padding: 16px;
}

.rr-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rr-page-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rr-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.rr-page-sub {
  margin: 0;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.rr-page-actions {
  display: flex;
  gap: 8px;
}

.rr-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 16px;
}

.rr-tabs {
  display: flex;
  gap: 24px;
  flex: 1;
}

.rr-tab {
  position: relative;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--el-text-color-secondary);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.rr-tab:hover { color: var(--el-text-color-primary); }
.rr-tab.active {
  color: var(--el-color-primary);
  font-weight: 600;
}
.rr-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--el-color-primary);
  border-radius: 1px;
}

.rr-filters {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.rr-search-input { width: 240px; }
.rr-customer-select { width: 180px; }
.rr-app-select { width: 180px; }
.rr-type-select { width: 90px; }

.rr-list-card {
  background: var(--el-bg-color);
  border-radius: 12px;
  padding: 4px;
}

.rr-time {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.rr-mono {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  padding: 2px 6px;
  background: var(--el-fill-color-light);
  border-radius: 4px;
  color: var(--el-text-color-primary);
}

.rr-mono-sm {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--el-text-color-regular);
}

.rr-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
}
.rr-type-MCP {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.rr-type-REST {
  background: var(--el-color-success-light-9);
  color: var(--el-color-success);
}

.rr-error {
  color: var(--el-color-danger);
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.rr-pre {
  margin: 0;
  padding: 8px 10px;
  background: var(--el-fill-color-light);
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--el-text-color-regular);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow: auto;
}

.rr-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}

.rr-detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rr-detail-full {
  grid-column: 1 / -1;
}

.rr-detail-label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}

.rr-detail-value {
  font-size: 13px;
  color: var(--el-text-color-primary);
  word-break: break-all;
}

.rr-detail-muted {
  color: var(--el-text-color-placeholder);
}

.rr-dialog-compact :deep(.el-dialog__header) {
  padding: 14px 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.rr-dialog-compact :deep(.el-dialog__body) {
  padding: 16px 20px;
}

.rr-dialog-compact :deep(.el-dialog__footer) {
  padding: 12px 20px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.rr-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>