onixbyte/dev-lab
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update layout and styling for hero and home components

Browse Source
This commit is contained in:
Zihlu Wang
2026-01-15 15:42:11 +08:00
parent ca0d5edc49
commit c4e0778b72
2 changed files with 52 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/hero-layout/index.tsx
+2 -4
View File
@@ -45,10 +45,8 @@ export default function HeroLayout() {
</header> </header>
{/* Main Content Area */} {/* Main Content Area */}
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 flex-grow"> <main className="flex-1 p-4 overflow-hidden">
<div className="px-4 py-6 sm:px-0"> <Outlet />
<Outlet />
</div>
</main> </main>
{/* Footer */} {/* Footer */}
src/page/home/index.tsx
+50 -63
View File
@@ -39,73 +39,60 @@ export default function Home() {
}, [jsonInput, query]) }, [jsonInput, query])
return ( return (
<div className="min-h-screen bg-slate-50 p-6 font-sans text-slate-900"> <div className="h-full flex gap-4">
<div className="max-w-7xl mx-auto space-y-6"> {/* 左侧输入面板 - 40% */}
<header className="flex flex-col gap-2"> <div className="w-2/5 flex flex-col gap-4">
<h1 className="text-2xl font-bold tracking-tight text-slate-800"> <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex-1 flex flex-col">
TypeScript JSONPath Explorer <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
</h1> <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
<p className="text-slate-500 text-sm"> JSON Source
Debug and visualises your JSONPath queries with real-time highlighting. </span>
</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>
<textarea
className="flex-1 w-full 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">
<div className="bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden"> <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center"> JSONPath Expression
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500"> </label>
Visualised Result <input
</span> type="text"
<span className="text-xs font-medium px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full"> 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"
{result.matchedPaths.length} matches value={query}
</span> onChange={(e) => setQuery(e.target.value)}
</div> placeholder="e.g. $..roles"
/>
</div>
</div>
<div className="p-6 overflow-auto max-h-[580px] font-mono text-sm leading-relaxed"> {/* 右侧可视化面板 - 60% */}
{result.error ? ( <div className="w-3/5 bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden">
<div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs"> <div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
<strong>Error:</strong> {result.error} <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
</div> Visualised Result
) : ( </span>
<JsonTreeNode <span className="text-xs font-medium px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full">
data={result.parsed} {result.matchedPaths.length} matches
path={["$"]} </span>
matchedPaths={result.matchedPaths} </div>
/>
)} <div className="flex-1 p-6 overflow-auto 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> </div>
</div> ) : (
<JsonTreeNode
data={result.parsed}
path={["$"]}
matchedPaths={result.matchedPaths}
/>
)}
</div> </div>
</div> </div>
</div> </div>