feat: 组件json-viewer支持bigint数据显示 cwy (#6377)

Co-authored-by: 车文烨 <chewy@china-lehua.com>

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:",

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),

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