From 94435ebce01b134576ccdc284cc7b94c9ffcb0af Mon Sep 17 00:00:00 2001
From: kaokei <kaokei.rst@gmail.com>
Date: Thu, 11 Dec 2025 09:58:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0replacer=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E6=96=B9=E4=BE=BF=E8=87=AA=E5=AE=9A=E4=B9=89=E5=BA=8F?=
 =?UTF-8?q?=E5=88=97=E5=8C=96json=E5=AF=B9=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/Basic.vue             | 13 ++++++++++++-
 src/components/Tree/index.tsx |  5 ++++-
 src/index.ts                  |  2 ++
 src/utils/index.ts            | 21 ++++++++++++++-------
 4 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/example/Basic.vue b/example/Basic.vue
index c6724ac..7e35171 100644
--- a/example/Basic.vue
+++ b/example/Basic.vue
@@ -102,6 +102,7 @@
             ? state.useRenderNodeActionsSlot
             : undefined
         "
+        :replacer="replacer"
         style="position: relative"
       >
         <template v-if="state.useRenderNodeKeySlot" #renderNodeKey="{ node, defaultKey }">
@@ -133,7 +134,7 @@
 <script>
 import { defineComponent, reactive, watch } from 'vue';
 import { useDarkMode } from './useDarkMode';
-import VueJsonPretty from 'src';
+import VueJsonPretty, { defaultReplacer } from 'src';
 
 const defaultData = {
   status: 200,
@@ -204,12 +205,22 @@ export default defineComponent({
       },
     );
 
+    function replacer(key, value) {
+      if(value && typeof value === 'object') {
+        if(value.news_id === 51184) {
+          return ['number', 51184]
+        }
+      }
+      return defaultReplacer(key, value);
+    }
+
     return {
       state,
       pathCollapsible,
       localDarkMode,
       toggleLocalDarkMode,
       globalDarkModeState,
+      replacer,
     };
   },
 });
diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
index 4225bb4..604713d 100644
--- a/src/components/Tree/index.tsx
+++ b/src/components/Tree/index.tsx
@@ -70,6 +70,9 @@ export default defineComponent({
       type: String as PropType<'light' | 'dark'>,
       default: 'light',
     },
+    replacer: {
+      type: Function as PropType<(key?: string | symbol, value?: unknown) => [string, unknown]>,
+    },
   },
 
   slots: ['renderNodeKey', 'renderNodeValue', 'renderNodeActions'],
@@ -87,7 +90,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const treeRef = ref<HTMLElement>();
 
-    const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
+    const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath, 0, void 0, props.replacer));
 
     const initHiddenPaths = (deep: number, collapsedNodeLength: number) => {
       return originFlatData.value.reduce((acc, item) => {
diff --git a/src/index.ts b/src/index.ts
index 36881a9..2332827 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,6 @@
 import { Plugin } from 'vue';
 import Tree from './components/Tree';
 
+export { getDataType, defaultReplacer } from './utils/index'
+
 export default Tree as typeof Tree & Plugin;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index cb8eea8..6c71723 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -29,11 +29,17 @@ export function getDataType(value: unknown): string {
   return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
 }
 
+export function defaultReplacer(key?: string | symbol, value?: unknown): [string, unknown] {
+  const dataType = getDataType(value);
+  return [dataType, value];
+}
+
 export function jsonFlatten(
-  data: JSONDataType,
+  dataInput: JSONDataType,
   path = 'root',
   level = 0,
   options?: JSONFlattenOptions,
+  replacer = defaultReplacer
 ): JSONFlattenReturnType[] {
   const {
     key,
@@ -42,7 +48,7 @@ export function jsonFlatten(
     showComma = false,
     length = 1,
   } = options || ({} as JSONFlattenOptions);
-  const dataType = getDataType(data);
+  const [dataType, data] = replacer(key, dataInput);
 
   if (dataType === 'array') {
     const inner = arrFlat(
@@ -52,7 +58,7 @@ export function jsonFlatten(
           showComma: idx !== arr.length - 1,
           length,
           type,
-        }),
+        }, replacer),
       ),
     ) as JSONFlattenReturnType[];
     return [
@@ -61,14 +67,14 @@ export function jsonFlatten(
         key,
         length: (data as unknown[]).length,
         type: 'arrayStart',
-      })[0],
+      }, replacer)[0],
     ].concat(
       inner,
       jsonFlatten(']', path, level, {
         showComma,
         length: (data as unknown[]).length,
         type: 'arrayEnd',
-      })[0],
+      }, replacer)[0],
     );
   } else if (dataType === 'object') {
     const keys = Object.keys(data as Record<string, JSONDataType>);
@@ -84,6 +90,7 @@ export function jsonFlatten(
             length,
             type,
           },
+          replacer,
         ),
       ),
     ) as JSONFlattenReturnType[];
@@ -94,10 +101,10 @@ export function jsonFlatten(
         index,
         length: keys.length,
         type: 'objectStart',
-      })[0],
+      }, replacer)[0],
     ].concat(
       inner,
-      jsonFlatten('}', path, level, { showComma, length: keys.length, type: 'objectEnd' })[0],
+      jsonFlatten('}', path, level, { showComma, length: keys.length, type: 'objectEnd' }, replacer)[0],
     );
   }
 

From 2e0da00000985524f61ea63cae74331fd056c3c0 Mon Sep 17 00:00:00 2001
From: kaokei <kaokei.rst@gmail.com>
Date: Thu, 11 Dec 2025 13:54:38 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BD=BF=E7=94=A8contentDataType=E4=BB=A3?=
 =?UTF-8?q?=E6=9B=BFgetDataType?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tree/index.tsx     | 1 +
 src/components/TreeNode/index.tsx | 2 +-
 src/utils/index.ts                | 2 ++
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
index 604713d..67db88b 100644
--- a/src/components/Tree/index.tsx
+++ b/src/components/Tree/index.tsx
@@ -198,6 +198,7 @@ export default defineComponent({
             ...startHiddenItem,
             showComma: item.showComma,
             content: isObject ? '{...}' : '[...]',
+            contentDataType: 'string',
             type: isObject ? 'objectCollapsed' : 'arrayCollapsed',
           } as NodeDataType;
           startHiddenItem = null;
diff --git a/src/components/TreeNode/index.tsx b/src/components/TreeNode/index.tsx
index 2c1313b..ff65409 100644
--- a/src/components/TreeNode/index.tsx
+++ b/src/components/TreeNode/index.tsx
@@ -149,7 +149,7 @@ export default defineComponent({
   ],
 
   setup(props, { emit }) {
-    const dataType = computed<string>(() => getDataType(props.node.content));
+    const dataType = computed<string>(() => props.node.contentDataType);
 
     const valueClass = computed(() => `vjs-value vjs-value-${dataType.value}`);
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6c71723..3818c93 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -17,6 +17,7 @@ export type JSONDataType = string | number | boolean | unknown[] | Record<string
 
 export interface JSONFlattenReturnType extends JSONFlattenOptions {
   content: string | number | null | boolean;
+  contentDataType: string;
   level: number;
   path: string;
 }
@@ -111,6 +112,7 @@ export function jsonFlatten(
   return [
     {
       content: data as JSONFlattenReturnType['content'],
+      contentDataType: dataType,
       level,
       key,
       index,