From a37f641c6cfab3195d1a02af3ec73dee1f050498 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B9=9B=E5=85=AE?= <zhanxi@staruniongame.com>
Date: Thu, 11 Jun 2026 23:55:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=A5=E9=BD=90=E5=AE=A1=E8=AE=A1=20J?=
 =?UTF-8?q?SON=20=E5=8D=95=E5=85=83=E6=A0=BC=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AuditJsonCell.vue | 119 +++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 src/components/AuditJsonCell.vue

diff --git a/src/components/AuditJsonCell.vue b/src/components/AuditJsonCell.vue
new file mode 100644
index 0000000..819c7d8
--- /dev/null
+++ b/src/components/AuditJsonCell.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+/**
+ * 审计日志 JSON 单元格，负责折叠展示和复制经过后端脱敏后的结构化内容。
+ */
+import { ArrowDown, ArrowRight, CopyDocument } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  value?: unknown
+}>()
+
+const expanded = ref(false)
+
+const normalizedValue = computed(() => {
+  if (typeof props.value === 'string') {
+    try {
+      return JSON.parse(props.value)
+    } catch {
+      return props.value
+    }
+  }
+
+  return props.value ?? null
+})
+
+const formattedJson = computed(() => {
+  if (normalizedValue.value === null || normalizedValue.value === undefined) {
+    return '-'
+  }
+
+  if (typeof normalizedValue.value === 'string') {
+    return normalizedValue.value
+  }
+
+  return JSON.stringify(normalizedValue.value, null, 2)
+})
+
+const previewText = computed(() => {
+  if (formattedJson.value === '-') {
+    return '-'
+  }
+
+  return formattedJson.value.replace(/\s+/g, ' ')
+})
+
+const canToggle = computed(
+  () => formattedJson.value.length > 80 || formattedJson.value.includes('\n'),
+)
+
+async function copyJson() {
+  await navigator.clipboard.writeText(formattedJson.value)
+  ElMessage.success('已复制 JSON')
+}
+</script>
+
+<template>
+  <div class="audit-json-cell" :class="{ expanded }">
+    <div class="json-actions">
+      <ElButton
+        :icon="expanded ? ArrowDown : ArrowRight"
+        size="small"
+        text
+        :disabled="!canToggle"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? '收起' : '展开' }}
+      </ElButton>
+      <ElButton :icon="CopyDocument" size="small" text @click="copyJson">
+        复制
+      </ElButton>
+    </div>
+
+    <pre v-if="expanded" class="json-block">{{ formattedJson }}</pre>
+    <code v-else class="json-preview">{{ previewText }}</code>
+  </div>
+</template>
+
+<style scoped>
+.audit-json-cell {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.json-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.json-preview {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  color: #4b5565;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.json-block {
+  max-width: 100%;
+  max-height: 360px;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid #dfe6f0;
+  border-radius: 8px;
+  background: #0f172a;
+  color: #e5eefc;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre;
+}
+</style>