From 44b4e9b6b7ff78997e636db4471a24a29a05c51f Mon Sep 17 00:00:00 2001
From: K <1175047471@qq.com>
Date: Fri, 1 Mar 2024 13:58:16 +0800
Subject: [PATCH] feat: add JsonPreviewModal component

---
 src/components/JsonPreviewModal/index.ts      |  1 +
 src/components/JsonPreviewModal/src/index.vue | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/JsonPreviewModal/index.ts
 create mode 100644 src/components/JsonPreviewModal/src/index.vue

diff --git a/src/components/JsonPreviewModal/index.ts b/src/components/JsonPreviewModal/index.ts
new file mode 100644
index 00000000..b67bf6de
--- /dev/null
+++ b/src/components/JsonPreviewModal/index.ts
@@ -0,0 +1 @@
+export { default } from './src/index.vue'
diff --git a/src/components/JsonPreviewModal/src/index.vue b/src/components/JsonPreviewModal/src/index.vue
new file mode 100644
index 00000000..2af02544
--- /dev/null
+++ b/src/components/JsonPreviewModal/src/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Modal } from 'ant-design-vue'
+import { JsonPreview } from '@/components/CodeEditor'
+
+const modalProps = withDefaults(defineProps<{
+  title?: string
+  width?: string
+  data: string
+}>(), { width: '50%' })
+
+const open = ref(false)
+
+const jsonData = computed(() => {
+  try {
+    return JSON.parse(modalProps.data)
+  }
+  catch {
+    return {}
+  }
+})
+</script>
+
+<template>
+  <div @click="open = true">
+    <slot />
+  </div>
+
+  <Modal v-bind="modalProps" v-model:open="open" :footer="null">
+    <div p="20px" border-rounded bg-gray-50>
+      <JsonPreview :data="jsonData" />
+    </div>
+  </Modal>
+</template>