hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: json view component - dark color

Browse Source
This commit is contained in:
cgoing
2025-03-25 01:56:53 +09:00
parent f0b28d4760
commit d204dd6e7e
1 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/components/JsonView.tsx
View File

@@ -91,7 +91,11 @@ const JsonNode = memo(
if (isEmpty) { if (isEmpty) {
return ( return (
<div className="flex items-center"> <div className="flex items-center">
{name && <span className="mr-1 text-gray-400">{name}:</span>} {name && (
<span className="mr-1 text-gray-600 dark:text-gray-400">
{name}:
</span>
)}
<span className="text-gray-500">{symbolMap.empty}</span> <span className="text-gray-500">{symbolMap.empty}</span>
</div> </div>
); );
@@ -100,24 +104,24 @@ const JsonNode = memo(
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<div <div
className="flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/20" className="flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/10 dark:hover:bg-gray-800/20"
onClick={() => setIsExpanded(!isExpanded)} onClick={() => setIsExpanded(!isExpanded)}
> >
{name && ( {name && (
<span className="mr-1 text-gray-400 group-hover:text-gray-100"> <span className="mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
{name}: {name}:
</span> </span>
)} )}
{isExpanded ? ( {isExpanded ? (
<span className="text-gray-400 group-hover:text-gray-100"> <span className="text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
{symbolMap.open} {symbolMap.open}
</span> </span>
) : ( ) : (
<> <>
<span className="text-gray-600 group-hover:text-gray-100"> <span className="text-gray-600 dark:group-hover:text-gray-100 group-hover:text-gray-400">
{symbolMap.collapsed} {symbolMap.collapsed}
</span> </span>
<span className="ml-1 text-gray-700 group-hover:text-gray-100"> <span className="ml-1 text-gray-700 dark:group-hover:text-gray-100 group-hover:text-gray-400">
{itemCount} {itemCount === 1 ? "item" : "items"} {itemCount} {itemCount === 1 ? "item" : "items"}
</span> </span>
</> </>
@@ -125,7 +129,7 @@ const JsonNode = memo(
</div> </div>
{isExpanded && ( {isExpanded && (
<> <>
<div className="pl-2 ml-4 border-l border-gray-800"> <div className="pl-2 ml-4 border-l border-gray-200 dark:border-gray-800">
{isArray {isArray
? (items as JsonValue[]).map((item, index) => ( ? (items as JsonValue[]).map((item, index) => (
<div key={index} className="my-1"> <div key={index} className="my-1">
@@ -148,7 +152,9 @@ const JsonNode = memo(
</div> </div>
))} ))}
</div> </div>
<div className="text-gray-400">{symbolMap.close}</div> <div className="text-gray-600 dark:text-gray-400">
{symbolMap.close}
</div>
</> </>
)} )}
</div> </div>
@@ -162,7 +168,11 @@ const JsonNode = memo(
if (!isTooLong) { if (!isTooLong) {
return ( return (
<div className="flex mr-1 rounded hover:bg-gray-800/20"> <div className="flex mr-1 rounded hover:bg-gray-800/20">
{name && <span className="mr-1 text-gray-400">{name}:</span>} {name && (
<span className="mr-1 text-gray-600 dark:text-gray-400">
{name}:
</span>
)}
<span className={typeStyleMap.string}>"{value}"</span> <span className={typeStyleMap.string}>"{value}"</span>
</div> </div>
); );
@@ -171,7 +181,7 @@ const JsonNode = memo(
return ( return (
<div className="flex mr-1 rounded group hover:bg-gray-800/20"> <div className="flex mr-1 rounded group hover:bg-gray-800/20">
{name && ( {name && (
<span className="mr-1 text-gray-400 group-hover:text-gray-100"> <span className="mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
{name}: {name}:
</span> </span>
)} )}
@@ -195,7 +205,11 @@ const JsonNode = memo(
default: default:
return ( return (
<div className="flex items-center mr-1 rounded hover:bg-gray-800/20"> <div className="flex items-center mr-1 rounded hover:bg-gray-800/20">
{name && <span className="mr-1 text-gray-400">{name}:</span>} {name && (
<span className="mr-1 text-gray-600 dark:text-gray-400">
{name}:
</span>
)}
<span className={typeStyleMap[dataType] || typeStyleMap.default}> <span className={typeStyleMap[dataType] || typeStyleMap.default}>
{data === null ? "null" : String(data)} {data === null ? "null" : String(data)}
</span> </span>