From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目

---
 src/components/JsonEditor/src/JsonEditor.vue |  126 ++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 126 insertions(+), 0 deletions(-)

diff --git a/src/components/JsonEditor/src/JsonEditor.vue b/src/components/JsonEditor/src/JsonEditor.vue
new file mode 100644
index 0000000..f3789ee
--- /dev/null
+++ b/src/components/JsonEditor/src/JsonEditor.vue
@@ -0,0 +1,126 @@
+<template>
+  <div ref="jsonEditorContainer" class="json-editor" :style="{ height }"></div>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import JSONEditor, { JSONEditorMode, JSONEditorOptions } from 'jsoneditor'
+import 'jsoneditor/dist/jsoneditor.min.css'
+import { JsonEditorEmits, JsonEditorExpose, JsonEditorProps } from '../types'
+
+/** 鍩轰簬 https://github.com/josdejong/jsoneditor 浜屾灏佽缁勪欢锛屾彁渚� JSON 缂栬緫鍣ㄥ姛鑳姐�� */
+defineOptions({ name: 'JsonEditor' })
+
+const props = withDefaults(defineProps<JsonEditorProps>(), {
+  mode: 'view' as JSONEditorMode,
+  height: '400px',
+  showModeSelection: false,
+  showNavigationBar: false,
+  showStatusBar: false,
+  showMainMenuBar: true
+})
+
+const emits = defineEmits<JsonEditorEmits>()
+const jsonObj = useVModel(props, 'modelValue', emits) as Ref<any>
+const jsonEditorContainer = ref<HTMLElement | null>(null)
+let jsonEditor: JSONEditor | null = null
+
+// 璁剧疆榛樿鍊�
+const height = props.height
+
+// 鍒濆鍖朖SONEditor
+const initJsonEditor = () => {
+  if (!jsonEditorContainer.value) return
+
+  // 鍚堝苟榛樿閰嶇疆鍜岀敤鎴疯嚜瀹氫箟閰嶇疆
+  const options: JSONEditorOptions = {
+    mode: props.mode,
+    modes: props.showModeSelection
+      ? (['tree', 'code', 'form', 'text', 'view', 'preview'] as JSONEditorMode[])
+      : undefined,
+    navigationBar: props.showNavigationBar,
+    statusBar: props.showStatusBar,
+    mainMenuBar: props.showMainMenuBar,
+    onChange: () => {
+      jsonObj.value = jsonEditor?.get()
+      emits('change', jsonEditor?.get())
+    },
+    onValidationError: (errors: any) => {
+      emits('error', errors)
+    },
+    ...props.options
+  } as JSONEditorOptions
+
+  // 鍒涘缓JSONEditor瀹炰緥
+  jsonEditor = new JSONEditor(jsonEditorContainer.value, options)
+
+  // 璁剧疆鍒濆鍊�
+  if (jsonObj.value) {
+    jsonEditor.set(jsonObj.value)
+  }
+
+  if (props.mode === 'view') {
+    jsonEditor?.expandAll() // 榛樿灞曞紑鍏ㄩ儴
+  }
+}
+
+// 鐩戝惉鏁版嵁鍙樺寲
+watch(
+  () => jsonObj.value,
+  (newValue) => {
+    if (!jsonEditor) return
+
+    try {
+      // 闃叉鏃犻檺寰幆鏇存柊
+      const currentJson = jsonEditor.get()
+      if (JSON.stringify(currentJson) !== JSON.stringify(newValue)) {
+        jsonEditor.update(newValue)
+      }
+    } catch (error) {
+      console.error('JSON鏇存柊澶辫触:', error)
+    }
+  },
+  { deep: true }
+)
+
+// 鐩戝惉妯″紡鍙樺寲
+watch(
+  () => props.mode,
+  (newMode) => {
+    if (!jsonEditor) return
+    try {
+      jsonEditor.setMode(newMode)
+    } catch (error) {
+      console.error('鍒囨崲妯″紡澶辫触:', error)
+    }
+  }
+)
+
+// 鐢熷懡鍛ㄦ湡閽╁瓙
+onMounted(() => {
+  initJsonEditor()
+})
+
+onBeforeUnmount(() => {
+  if (jsonEditor) {
+    jsonEditor.destroy()
+    jsonEditor = null
+  }
+})
+
+// 鏆撮湶鏂规硶
+defineExpose<JsonEditorExpose>({
+  // 鑾峰彇缂栬緫鍣ㄥ疄渚嬶紝浠ヤ究鍙互璋冪敤鏇村JSONEditor鐨勫師鐢熸柟娉�
+  getEditor: () => jsonEditor
+})
+</script>
+
+<style lang="scss" scoped>
+/* 闅愯棌 Ace 缂栬緫鍣ㄧ殑 powered by ace 鏍囪 */
+:deep(.jsoneditor-menu) {
+  /* 闅愯棌 powered by ace 鏍囪 */
+  .jsoneditor-poweredBy {
+    display: none !important;
+  }
+}
+</style>

--
Gitblit v1.8.0