xiaotutongxue/frontend-pc/src/views/log/LogDetailDrawer.vue

<script setup lang="ts">
import type { OperationLog } from '@/apis/xt/log'
import {
  NButton,
  NDescriptions,
  NDescriptionsItem,
  NDrawer,
  NDrawerContent,
  NTag,
  useMessage
} from 'naive-ui'
import { computed, ref } from 'vue'
import { actionText, MODULE_OPTIONS, SENSITIVE_ACTIONS } from '@/apis/xt/log'

/**
 * 操作日志详情。
 *
 * 输入是**一整行 `OperationLog`**（列表已经把它全查回来了），所以这里**不再打接口** ——
 * 详情只是"把列表里被截断/没展示的字段摊开"，多点一次网络请求没有任何信息增益。
 *
 * ## 为什么几处刻意"不截断"
 *
 * 这一屏是排查用的：
 * - `userAgent` 要能整条读完 —— 兼容性问题全在尾巴上（内核版本、各家小程序的 webview 标识），
 *   截成省略号等于把最有用的一段藏掉；
 * - `beforeVal → afterVal` 要能整段读完 —— 列表里那是单行摘要，这里再截一次就白点进来了。
 * 两者统一 `word-break: break-all`。
 *
 * ## 为什么灰字写「请求参数 / 耗时：本版本未采集」
 *
 * 库里 `request_param` / `duration_ms` 两列**没有任何写入点**（全库 0 行有值，见 `apis/xt/log.ts` 的说明）。
 * 空着会让人以为"这条日志恰好没采到"，从而一直等一个永远不会出现的字段 —— 如实说没有，比留白有用。
 */
defineOptions({ name: 'LogDetailDrawer' })

const props = withDefaults(defineProps<{
  /**
   * 租户 id → 单位名。
   *
   * 列表页（平台身份）已经查过一次，这里复用同一个映射，**不为一个名字再打一次 `/tenants`**；
   * 拿不到时退回 `#id` —— 详情页显示 `#3` 不好看，但比编一个名字安全。
   */
  tenantNames?: Record<number, string>
}>(), { tenantNames: () => ({}) })

const message = useMessage()

const visible = ref(false)
const log = ref<OperationLog | null>(null)

/** 动作标签：敏感动作（改证件号 / 看完整证件号 / 删名册项 / 停用学校）在列表与详情里**同一套口径** */
const actTag = computed<{ text: string, type: 'info' | 'error' }>(() => {
  const action = log.value?.action
  return {
    text: actionText(action),
    type: action && SENSITIVE_ACTIONS.includes(action) ? 'error' : 'info'
  }
})

/**
 * 单位（列表里那一列的口径，与筛选下拉同词）。
 *
 * ⚠️ 平台自己的动作（开通/停用学校这类）写的是 `tenant_id = 0`，**不是 null** ——
 * 直接显示会变成莫名其妙的 `#0`。
 */
const tenantText = computed(() => {
  const id = log.value?.tenantId
  if (id === 0) {
    return '平台'
  }
  if (id == null) {
    return '—'
  }
  return props.tenantNames[id] ?? `#${id}`
})

/** 操作人：详情里**带上 `#id`**（与列表相反）—— 排查时要能对上库里那一行 */
const operatorText = computed(() => {
  const row = log.value
  if (!row) {
    return '—'
  }
  const id = row.operatorId != null ? `#${row.operatorId}` : ''
  return [row.operatorName, id].filter(Boolean).join(' ') || '—'
})

/** 模块：查不到就**原样回显那个码**，不编中文名（否则和后端日志里的码对不上） */
const moduleText = computed(() => {
  const m = log.value?.module
  if (!m) {
    return '—'
  }
  return MODULE_OPTIONS.find((o) => o.value === m)?.label ?? m
})

const targetText = computed(() => {
  const row = log.value
  if (!row?.targetType) {
    return '—'
  }
  return `${row.targetType} #${row.targetId ?? '—'}`
})

/**
 * `extraJson` 美化。
 *
 * 解析失败就**原样展示**：日志里最忌讳"这一段我帮你藏起来了" ——
 * 后端将来多写一种格式时，原样展示至少还能被人肉读出来。
 */
const extraPretty = computed(() => {
  const raw = log.value?.extraJson
  if (!raw) {
    return ''
  }
  try {
    return JSON.stringify(JSON.parse(raw), null, 2)
  } catch {
    return raw
  }
})

/** 时间到**秒**：排查时"12:00"与"12:00:31"是两件事 */
function fmtTime(v?: string): string {
  return v ? v.replace('T', ' ').slice(0, 19) : '—'
}

async function copy(text: string | undefined, label: string): Promise<void> {
  if (!text) {
    message.warning(`${label}为空，没有可复制的内容`)
    return
  }
  try {
    await navigator.clipboard.writeText(text)
    message.success(`已复制${label}`)
  } catch {
    message.warning('浏览器不允许自动复制，请手动选中后复制')
  }
}

function open(row: OperationLog): void {
  log.value = row
  visible.value = true
}

defineExpose({ open })
</script>

<template>
  <NDrawer v-model:show="visible" :width="760" placement="right">
    <NDrawerContent :native-scrollbar="false" closable>
      <template #header>
        <span>日志详情</span>
        <NTag v-if="log" class="logd__head-tag" size="small" :bordered="false" :type="actTag.type">
          {{ actTag.text }}
        </NTag>
        <span v-if="log" class="logd__head-sub">{{ fmtTime(log.createTime) }}</span>
      </template>

      <template v-if="log">
        <div class="section-title logd__sec">
          基本信息
        </div>
        <NDescriptions :column="2" size="small" bordered>
          <NDescriptionsItem label="时间">
            {{ fmtTime(log.createTime) }}
          </NDescriptionsItem>
          <NDescriptionsItem label="日志 ID">
            {{ log.id }}
          </NDescriptionsItem>
          <NDescriptionsItem label="单位">
            {{ tenantText }}
          </NDescriptionsItem>
          <NDescriptionsItem label="操作人">
            {{ operatorText }}
          </NDescriptionsItem>
          <NDescriptionsItem label="模块">
            {{ moduleText }}
          </NDescriptionsItem>
          <NDescriptionsItem label="动作">
            <NTag size="small" :bordered="false" :type="actTag.type">
              {{ actTag.text }}
            </NTag>
          </NDescriptionsItem>
          <NDescriptionsItem label="对象" :span="2">
            {{ targetText }}
          </NDescriptionsItem>
        </NDescriptions>

        <div class="section-title logd__sec">
          变更前后
          <span class="section-title__note">
            证件号/手机号已在服务端脱敏；超过 512 字符的值在服务端就被截断了
          </span>
        </div>
        <div class="logd__diff">
          <div class="logd__col">
            <div class="logd__col-head">
              <span class="logd__col-label">变更前</span>
              <NButton text size="small" :disabled="!log.beforeVal" @click="copy(log.beforeVal, '变更前')">
                复制
              </NButton>
            </div>
            <div class="logd__val" :class="{ 'logd__val--empty': !log.beforeVal }">
              {{ log.beforeVal || '—' }}
            </div>
          </div>
          <div class="logd__col">
            <div class="logd__col-head">
              <span class="logd__col-label">变更后</span>
              <NButton text size="small" :disabled="!log.afterVal" @click="copy(log.afterVal, '变更后')">
                复制
              </NButton>
            </div>
            <div class="logd__val" :class="{ 'logd__val--empty': !log.afterVal }">
              {{ log.afterVal || '—' }}
            </div>
          </div>
        </div>

        <div class="section-title logd__sec">
          请求
        </div>
        <div class="logd__req">
          <span class="logd__method">{{ log.requestMethod || '—' }}</span>
          <span class="logd__uri">{{ log.requestUri || '—' }}</span>
        </div>
        <!-- 如实说没采集：空着会被当成"这条恰好没采到"，然后一直等一个不存在的字段 -->
        <div class="logd__note">
          请求参数 / 耗时：本版本未采集
        </div>

        <div class="section-title logd__sec">
          来源
        </div>
        <NDescriptions :column="1" size="small" bordered>
          <NDescriptionsItem label="IP">
            {{ log.ip || '—' }}
          </NDescriptionsItem>
          <NDescriptionsItem label="User-Agent">
            <!-- 整条展示、不截断：兼容性问题全在 UA 的尾巴上 -->
            <span class="logd__ua">{{ log.userAgent || '—' }}</span>
          </NDescriptionsItem>
        </NDescriptions>

        <div class="section-title logd__sec">
          排查信息
        </div>
        <NDescriptions :column="2" size="small" bordered>
          <NDescriptionsItem label="traceId">
            <span class="logd__code">{{ log.traceId || '—' }}</span>
            <NButton v-if="log.traceId" text size="small" class="logd__copy" @click="copy(log.traceId, 'traceId')">
              复制
            </NButton>
          </NDescriptionsItem>
          <NDescriptionsItem label="bizCode">
            {{ log.bizCode ?? '—' }}
          </NDescriptionsItem>
        </NDescriptions>

        <!-- 没有 extraJson 就整块不显示：一个空标题只会让人以为"内容加载失败" -->
        <template v-if="extraPretty">
          <div class="section-title logd__sec">
            补充上下文
          </div>
          <pre class="logd__json">{{ extraPretty }}</pre>
        </template>
      </template>
    </NDrawerContent>
  </NDrawer>
</template>

<style scoped>
.logd__head-tag {
  margin-left: 8px;
}

.logd__head-sub {
  margin-left: 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--xt-text-3);
}

/* 全局 `.section-title` 只有下间距，抽屉里的分区会与上一块内容贴在一起 */
.logd__sec {
  margin-top: 18px;
}

/* 变更前后：两块并排，各占一半（窄屏下会自动变窄，值本身换行不截断） */
.logd__diff {
  display: flex;
  gap: 12px;
}

.logd__col {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--xt-band-bg);
  border: 1px solid var(--xt-card-border-weak);
  border-radius: 8px;
}

.logd__col-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.logd__col-label {
  font-size: 12px;
  color: var(--xt-text-2);
}

.logd__val {
  font-size: 13px;
  line-height: 1.6;
  /* 不截断：整段展示，长串靠 break-all 折行 */
  word-break: break-all;
  white-space: pre-wrap;
}

.logd__val--empty {
  color: var(--xt-text-3);
}

.logd__req {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.logd__method {
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--xt-primary, #0052d9);
}

.logd__uri {
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: 13px;
  word-break: break-all;
}

.logd__note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--xt-text-3);
}

.logd__ua {
  font-size: 12px;
  line-height: 1.6;
  word-break: break-all;
}

.logd__code {
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: 12px;
  word-break: break-all;
}

.logd__copy {
  margin-left: 8px;
}

/* 补充上下文：等宽 + 可滚动（值可能很长，撑高抽屉不如让它自己滚） */
.logd__json {
  max-height: 320px;
  padding: 12px;
  margin: 0;
  overflow: auto;
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--xt-band-bg);
  border: 1px solid var(--xt-card-border-weak);
  border-radius: 8px;
}
</style>