114 lines
4.2 KiB
TypeScript
114 lines
4.2 KiB
TypeScript
import { useMemo, useState } from "react"
|
|
import jp from "jsonpath"
|
|
import JsonTreeNode from "@/components/json-tree-node"
|
|
|
|
/**
|
|
* Home page component that displays the main landing content.
|
|
*/
|
|
export default function Home() {
|
|
const initialData = {
|
|
centre_id: "LON-01",
|
|
location: "London",
|
|
is_active: true,
|
|
staff_members: [
|
|
{ id: 101, name: "Alice", roles: ["Admin", "Manager"] },
|
|
{ id: 102, name: "Bob", roles: ["Developer"] },
|
|
],
|
|
config: {
|
|
colour_scheme: "Dark Mode",
|
|
retention_days: 30,
|
|
},
|
|
}
|
|
|
|
const [jsonInput, setJsonInput] = useState<string>(JSON.stringify(initialData, null, 2))
|
|
const [query, setQuery] = useState<string>("$.staff_members[*].name")
|
|
|
|
// 计算匹配结果
|
|
const result = useMemo(() => {
|
|
try {
|
|
const parsed = JSON.parse(jsonInput)
|
|
const nodes = jp.nodes(parsed, query)
|
|
return {
|
|
parsed,
|
|
matchedPaths: nodes.map((n) => jp.stringify(n.path)),
|
|
error: null,
|
|
}
|
|
} catch (e) {
|
|
return { parsed: null, matchedPaths: [], error: (e as Error).message }
|
|
}
|
|
}, [jsonInput, query])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 p-6 font-sans text-slate-900">
|
|
<div className="max-w-7xl mx-auto space-y-6">
|
|
<header className="flex flex-col gap-2">
|
|
<h1 className="text-2xl font-bold tracking-tight text-slate-800">
|
|
TypeScript JSONPath Explorer
|
|
</h1>
|
|
<p className="text-slate-500 text-sm">
|
|
Debug and visualises your JSONPath queries with real-time highlighting.
|
|
</p>
|
|
</header>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* 控制面板 */}
|
|
<div className="flex flex-col gap-4">
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
|
JSON Source
|
|
</span>
|
|
</div>
|
|
<textarea
|
|
className="w-full h-100 p-4 font-mono text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none"
|
|
value={jsonInput}
|
|
onChange={(e) => setJsonInput(e.target.value)}
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
|
|
<label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
|
|
JSONPath Expression
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full p-3 font-mono text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all shadow-sm"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="e.g. $..roles"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 可视化面板 */}
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden">
|
|
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
|
Visualised Result
|
|
</span>
|
|
<span className="text-xs font-medium px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full">
|
|
{result.matchedPaths.length} matches
|
|
</span>
|
|
</div>
|
|
|
|
<div className="p-6 overflow-auto max-h-[580px] font-mono text-sm leading-relaxed">
|
|
{result.error ? (
|
|
<div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs">
|
|
<strong>Error:</strong> {result.error}
|
|
</div>
|
|
) : (
|
|
<JsonTreeNode
|
|
data={result.parsed}
|
|
path={["$"]}
|
|
matchedPaths={result.matchedPaths}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|