初始化

easyflow-ui-usercenter/app/src/components/json/ShowJson.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { preferences } from '@easyflow/preferences';
+
+import { ElEmpty } from 'element-plus';
+import { JsonViewer } from 'vue3-json-viewer';
+
+import 'vue3-json-viewer/dist/vue3-json-viewer.css';
+
+defineProps({
+  value: {
+    required: true,
+  },
+});
+
+const themeMode = ref(preferences.theme.mode);
+watch(
+  () => preferences.theme.mode,
+  (newVal) => {
+    themeMode.value = newVal;
+  },
+);
+</script>
+
+<template>
+  <div class="res-container">
+    <JsonViewer v-if="value" :value="value" copyable :theme="themeMode" />
+    <ElEmpty image="/empty.png" v-else />
+  </div>
+</template>
+
+<style scoped>
+.res-container {
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  padding: 10px;
+}
+</style>