feat: 添加`json编辑器demo`

locales/en.yaml

@@ -49,6 +49,7 @@ menus:
   hsseamless: Seamless Scroll
   hscontextmenu: Context Menu
   hstypeit: Typeit Components
+  hsjsoneditor: JSON Editor
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1

locales/zh-CN.yaml

@@ -49,6 +49,7 @@ menus:
   hsseamless: 无缝滚动
   hscontextmenu: 右键菜单
   hstypeit: 打字机组件
+  hsjsoneditor: JSON编辑器
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1

package.json

@@ -72,7 +72,7 @@
     "vue": "^3.2.40",
     "vue-form-create2": "^1.2.8",
     "vue-i18n": "^9.2.2",
-    "vue-json-pretty": "^2.1.1",
+    "vue-json-pretty": "^2.2.2",
     "vue-pdf-embed": "^1.1.4",
     "vue-router": "^4.1.5",
     "vue-types": "^4.2.1",

pnpm-lock.yaml

@@ -112,7 +112,7 @@ specifiers:
   vue-eslint-parser: ^8.2.0
   vue-form-create2: ^1.2.8
   vue-i18n: ^9.2.2
-  vue-json-pretty: ^2.1.1
+  vue-json-pretty: ^2.2.2
   vue-pdf-embed: ^1.1.4
   vue-router: ^4.1.5
   vue-tsc: ^0.40.13

src/router/modules/components.ts

@@ -109,6 +109,14 @@ const componentsRouter: RouteConfigsTable = {
       meta: {
         title: $t("menus.hstypeit")
       }
+    },
+    {
+      path: "/components/json-editor",
+      name: "JsonEditor",
+      component: () => import("/@/views/components/json-editor/index.vue"),
+      meta: {
+        title: $t("menus.hsjsoneditor")
+      }
     }
   ]
 };

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>