From 7bd7ea34adef3a393d44e25e3984a798d2c59e4e Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 19 Oct 2022 23:24:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0`json=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8demo`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                            |   1 +
 locales/zh-CN.yaml                         |   1 +
 package.json                               |   2 +-
 pnpm-lock.yaml                             |   2 +-
 src/router/modules/components.ts           |   8 ++
 src/views/components/json-editor/index.vue | 102 +++++++++++++++++++++
 6 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100644 src/views/components/json-editor/index.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index 119922862..d737a7fa3 100644
--- a/locales/en.yaml
+++ b/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
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index c1d071a5c..b15dec00e 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -49,6 +49,7 @@ menus:
   hsseamless: 无缝滚动
   hscontextmenu: 右键菜单
   hstypeit: 打字机组件
+  hsjsoneditor: JSON编辑器
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1
diff --git a/package.json b/package.json
index 34e49c867..5d6827664 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45e800afd..40d78797d 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 3037d70db..30c501cd6 100644
--- a/src/router/modules/components.ts
+++ b/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")
+      }
     }
   ]
 };
diff --git a/src/views/components/json-editor/index.vue b/src/views/components/json-editor/index.vue
new file mode 100644
index 000000000..c28fe5694
--- /dev/null
+++ b/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>