feat: 添加json编辑器demo

src/views/components/json-editor/index.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { reactive, watch } from "vue";
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+
+defineOptions({
+  name: "JsonEditor"
+});
+
+const defaultData = {
+  status: 200,
+  text: "",
+  error: null,
+  config: undefined,
+  data: [
+    {
+      news_id: 51184,
+      title: "iPhone X Review: Innovative future with real black technology",
+      source: "Netease phone"
+    },
+    {
+      news_id: 51183,
+      title:
+        "Traffic paradise: How to design streets for people and unmanned vehicles in the future?",
+      source: "Netease smart",
+      link: "http://netease.smart/traffic-paradise/1235"
+    },
+    {
+      news_id: 51182,
+      title:
+        "Teslamask's American Business Relations: The government does not pay billions to build factories",
+      source: "AI Finance",
+      members: ["Daniel", "Mike", "John"]
+    }
+  ]
+};
+
+const state = reactive({
+  val: JSON.stringify(defaultData),
+  data: defaultData,
+  showLine: true,
+  showLineNumber: true,
+  showDoubleQuotes: true,
+  showLength: true,
+  editable: true,
+  showIcon: true,
+  editableTrigger: "click",
+  deep: 3
+});
+
+watch(
+  () => state.val,
+  newVal => {
+    try {
+      state.data = JSON.parse(newVal);
+    } catch (err) {
+      // console.log('JSON ERROR');
+    }
+  }
+);
+
+watch(
+  () => state.data,
+  newVal => {
+    try {
+      state.val = JSON.stringify(newVal);
+    } catch (err) {
+      // console.log('JSON ERROR');
+    }
+  }
+);
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          JSON编辑器组件，采用开源的
+          <el-link
+            href="https://github.com/leezng/vue-json-pretty"
+            target="_blank"
+            style="font-size: 16px; margin: 0 4px 5px"
+          >
+            vue-json-pretty（支持大数据量）
+          </el-link></span
+        >
+      </div>
+    </template>
+    <vue-json-pretty
+      v-model:data="state.data"
+      :deep="state.deep"
+      :show-double-quotes="state.showDoubleQuotes"
+      :show-line="state.showLine"
+      :show-length="state.showLength"
+      :show-icon="state.showIcon"
+      :show-line-number="state.showLineNumber"
+      :editable="state.editable"
+      :editable-trigger="state.editableTrigger"
+    />
+  </el-card>
+</template>