аааа

frontend/src/pages/SnapshotDashboard.tsx

@@ -491,17 +491,18 @@ function highlightIni(text: string): React.ReactNode[] {
     let node: React.ReactNode
     if (/^\s*[#;]/.test(line)) {
       node = <span style={{ color: '#6a9955' }}>{line}</span>
-    } else if (/^\s*\[.+\]/.test(line)) {
+    } else if (/^\s*\[.+\]/.test(line) && !line.includes('=')) {
       node = <span style={{ color: '#ce9178', fontWeight: 600 }}>{line}</span>
     } else if (line.includes('=')) {
       const eqIdx = line.indexOf('=')
       const key = line.slice(0, eqIdx)
-      const value = line.slice(eqIdx)
+      const eq = '='
+      const value = line.slice(eqIdx + 1)
       node = (
         <>
           <span style={{ color: '#9cdcfe' }}>{key}</span>
-          <span style={{ color: '#d4d4d4' }}>{value.charAt(0)}</span>
+          <span style={{ color: '#d4d4d4' }}>{eq}</span>
-          <span style={{ color: '#dcdcaa' }}>{value.slice(1)}</span>
+          {highlightValue(value)}
         </>
       )
     } else {
@@ -511,6 +512,44 @@ function highlightIni(text: string): React.ReactNode[] {
   })
 }
 
+function highlightValue(value: string): React.ReactNode {
+  const parts: React.ReactNode[] = []
+  let i = 0
+  let key = 0
+  while (i < value.length) {
+    const ch = value[i]
+    if (ch === '"') {
+      const end = value.indexOf('"', i + 1)
+      if (end !== -1) {
+        const str = value.slice(i, end + 1)
+        parts.push(<span key={key++} style={{ color: '#dcdcaa' }}>{str}</span>)
+        i = end + 1
+      } else {
+        parts.push(<span key={key++} style={{ color: '#dcdcaa' }}>{value.slice(i)}</span>)
+        break
+      }
+    } else if (ch === '{' || ch === '}' || ch === '[' || ch === ']' || ch === ':' || ch === ',') {
+      parts.push(<span key={key++} style={{ color: '#808080' }}>{ch}</span>)
+      i++
+    } else if (/\d/.test(ch)) {
+      let num = ''
+      while (i < value.length && /[\d.]/.test(value[i])) {
+        num += value[i]
+        i++
+      }
+      parts.push(<span key={key++} style={{ color: '#b5cea8' }}>{num}</span>)
+    } else if (value.slice(i).startsWith('true') || value.slice(i).startsWith('false') || value.slice(i).startsWith('null')) {
+      const word = value.slice(i).startsWith('true') ? 'true' : value.slice(i).startsWith('false') ? 'false' : 'null'
+      parts.push(<span key={key++} style={{ color: '#569cd6' }}>{word}</span>)
+      i += word.length
+    } else {
+      parts.push(<span key={key++} style={{ color: '#d4d4d4' }}>{ch}</span>)
+      i++
+    }
+  }
+  return <>{parts}</>
+}
+
 function DevicesList({
   objId,
   objName,