From b78bc65ce7874a4e4732cad5feb1b809018bac9e Mon Sep 17 00:00:00 2001
From: chewenye <15818182980@163.com>
Date: Sun, 29 Jun 2025 04:32:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6json-viewer=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81bigint=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA=20cwy=20(#6?=
 =?UTF-8?q?377)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 车文烨 <chewy@china-lehua.com>
---
 packages/effects/common-ui/package.json        |  1 +
 .../src/components/json-viewer/index.vue       | 18 ++++++++++++++++++
 pnpm-lock.yaml                                 |  3 +++
 3 files changed, 22 insertions(+)

diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index c9674985a..fdd9e793f 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -40,6 +40,7 @@
     "@vben/types": "workspace:*",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
+    "json-bigint": "catalog:",
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
     "vue": "catalog:",
diff --git a/packages/effects/common-ui/src/components/json-viewer/index.vue b/packages/effects/common-ui/src/components/json-viewer/index.vue
index aa1d90d33..b69c655ea 100644
--- a/packages/effects/common-ui/src/components/json-viewer/index.vue
+++ b/packages/effects/common-ui/src/components/json-viewer/index.vue
@@ -18,6 +18,9 @@ import { $t } from '@vben/locales';
 
 import { isBoolean } from '@vben-core/shared/utils';
 
+// @ts-ignore
+import JsonBigint from 'json-bigint';
+
 defineOptions({ name: 'JsonViewer' });
 
 const props = withDefaults(defineProps<JsonViewerProps>(), {
@@ -68,6 +71,20 @@ function handleClick(event: MouseEvent) {
   emit('click', event);
 }
 
+// 支持显示 bigint 数据，如较长的订单号
+const jsonData = computed<Record<string, any>>(() => {
+  if (typeof props.value !== 'string') {
+    return props.value || {};
+  }
+
+  try {
+    return JsonBigint({ storeAsString: true }).parse(props.value);
+  } catch (error) {
+    console.error('JSON parse error:', error);
+    return {};
+  }
+});
+
 const bindProps = computed<Recordable<any>>(() => {
   const copyable = {
     copyText: $t('ui.jsonViewer.copy'),
@@ -79,6 +96,7 @@ const bindProps = computed<Recordable<any>>(() => {
   return {
     ...props,
     ...attrs,
+    value: jsonData.value,
     onCopied: (event: JsonViewerAction) => emit('copied', event),
     onKeyclick: (key: string) => emit('keyClick', key),
     onClick: (event: MouseEvent) => handleClick(event),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 57789eb42..8c58aef38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1554,6 +1554,9 @@ importers:
       '@vueuse/integrations':
         specifier: 'catalog:'
         version: 13.1.0(async-validator@4.2.5)(axios@1.9.0)(focus-trap@7.6.4)(jwt-decode@4.0.0)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.13(typescript@5.8.3))
+      json-bigint:
+        specifier: 'catalog:'
+        version: 1.0.0
       qrcode:
         specifier: 'catalog:'
         version: 1.5.4