fix: 补齐审计 JSON 单元格组件

2026-06-11 23:55:48 +08:00
parent 2daf93ab24
commit a37f641c6c
1 changed files with 119 additions and 0 deletions
@@ -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>