From 29aa7746640d7d0c0f01f3e0d3f23ef3250086a7 Mon Sep 17 00:00:00 2001
From: zhang <zc857179121@qq.com>
Date: 星期五, 13 六月 2025 16:50:39 +0800
Subject: [PATCH] 数据为空的校验补充
---
zy-acs-flow/src/map/JsonShow.jsx | 85 +++++++++++++++++++++++++++++-------------
1 files changed, 59 insertions(+), 26 deletions(-)
diff --git a/zy-acs-flow/src/map/JsonShow.jsx b/zy-acs-flow/src/map/JsonShow.jsx
index 5723f64..fd70475 100644
--- a/zy-acs-flow/src/map/JsonShow.jsx
+++ b/zy-acs-flow/src/map/JsonShow.jsx
@@ -1,5 +1,10 @@
import React, { useState, useRef, useEffect } from 'react';
-import { Box, Typography, Paper } from '@mui/material';
+import { Box, Typography, Paper, useTheme } from '@mui/material';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import jsonLang from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import { xcode, atomOneDark, a11yLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/
const parseJson = (jsonStr) => {
let json = '';
@@ -10,6 +15,59 @@
json = 'Invalid JSON';
}
return json;
+}
+
+SyntaxHighlighter.registerLanguage('json', jsonLang);
+
+const JsonShow = ({ data, height = 500 }) => {
+ const theme = useTheme();
+ const themeMode = theme.palette.mode;
+
+ const [json, setJson] = useState(null);
+
+ useEffect(() => {
+ if (data) {
+ setJson(parseJson(data));
+ }
+ }, [data]);
+
+ return (
+ <Paper
+ elevation={3}
+ sx={{
+ padding: 2,
+ maxHeight: height,
+ overflow: 'auto',
+ backgroundColor: theme.palette.background.paper,
+ borderRadius: 2,
+ }}
+ >
+ <pre style={{ margin: 0, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+ {json === 'Invalid JSON' ? (
+ <Typography color="error">Invalid JSON</Typography>
+ ) : (
+
+ <SyntaxHighlighter
+ language="json"
+ style={themeMode === 'dark' ? atomOneDark : xcode}
+ customStyle={{
+ backgroundColor: 'transparent',
+ padding: 0,
+ fontSize: '0.875rem', // 14px
+ fontFamily: 'monospace',
+ whiteSpace: 'pre-wrap',
+ wordBreak: 'break-word',
+ // fontWeight: 'bold',
+ }}
+ showLineNumbers
+ >
+ {json}
+ </SyntaxHighlighter>
+ // renderFormattedJson(json)
+ )}
+ </pre>
+ </Paper>
+ );
}
const renderFormattedJson = (json) => {
@@ -43,30 +101,5 @@
};
-const JsonShow = ({ data, height = 500 }) => {
- let json = parseJson(data);
-
- return (
- <Paper
- elevation={3}
- sx={{
- padding: 2,
- maxHeight: height,
- overflow: 'auto',
- backgroundColor: '#f5f5f5',
- borderRadius: 2,
- }}
- >
- <pre style={{ margin: 0, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
- {json === 'Invalid JSON' ? (
- <Typography color="error">Invalid JSON</Typography>
- ) : (
- renderFormattedJson(json)
- )}
- </pre>
- </Paper>
- );
-
-}
export default JsonShow;
\ No newline at end of file
--
Gitblit v1.9.1