change json formatter

package.json

@@ -43,12 +43,12 @@
     "eslint-plugin-oxlint": "^0.11.0",
     "eslint-plugin-vue": "^9.30.0",
     "jsdom": "^25.0.1",
+    "json-formatter-js": "^2.5.18",
     "npm-run-all2": "^7.0.1",
     "oxlint": "^0.11.0",
     "pinia": "^2.3.0",
     "prettier": "^3.3.3",
     "quasar": "^2.17.5",
-    "renderjson": "^1.4.0",
     "rxjs": "^7.8.1",
     "sass": "^1.83.0",
     "sass-embedded": "^1.80.2",

src/pages/host/components/CoHostInfo.vue

@@ -3,11 +3,11 @@ import { onMounted, shallowRef } from 'vue'
 import { db, type ConnectionHost } from '@/db'
 import { useRoute } from 'vue-router'
 import { request } from '@/api'
-import renderjson from 'renderjson'
+import JSONFormatter from 'json-formatter-js'
 const route = useRoute()
 const ctxRef = shallowRef<HTMLElement | undefined>()
 const fetchInfo = async () => {
-  const resp = await db.hosts.get<ConnectionHost>(parseInt(route.params.id as string))
+  const resp = await db.hosts.get({ id: parseInt(route.params.id as string) })
   console.log(resp)
   const data = await request<string>({
     connectionInfo: resp!,
@@ -29,8 +29,8 @@ const fetchInfo = async () => {
         }
       }
     })
-  renderjson.set_show_to_level(1).set_icons('+', '-')
-  ctxRef.value?.appendChild(renderjson(cfg))
+  const formatter = new JSONFormatter(cfg)
+  ctxRef.value?.appendChild(formatter.render())
 }
 onMounted(() => {
   fetchInfo()