更新布局和微调整页面样式

This commit is contained in:
wmp
2025-09-20 17:03:16 +08:00
parent 53feaa5e7d
commit 4f3671c8a6
10 changed files with 636 additions and 544 deletions

View File

@@ -64,8 +64,8 @@ function DashboardContent() {
}
return (
<div className="min-h-screen bg-gray-100">
<nav className="bg-white shadow-sm">
<div className=" bg-gray-100 w-screen h-screen flex flex-col">
<nav className="bg-white flex-none h-16 shadow-sm">
<div className="px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16 items-center">
<div className="flex items-center">
@@ -85,14 +85,14 @@ function DashboardContent() {
</div>
</nav>
<div className="px-4 sm:px-6 lg:px-8 py-8">
<div className="flex flex-3 overflow-hidden px-4 sm:px-6 lg:px-8 py-8">
<div className="border-b border-gray-200 mb-6">
<nav className="-mb-px flex space-x-8">
<nav className="flex flex-col w-64 -mb-px space-x-8">
{tabs.map((tab) => (
<button
key={tab.id}
onClick={() => handleTabClick(tab.id)}
className={`py-2 px-1 border-b-2 font-medium text-sm ${
className={`py-2 px-1 h-12 border-b-2 font-medium text-sm ${
activeTab === tab.id
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
@@ -104,7 +104,7 @@ function DashboardContent() {
</nav>
</div>
<div className="grid grid-cols-1 gap-6">
<div className="grid grid-cols-1 gap-6 flex-auto">
{activeTab === 'gatewayInfo' && <Gatewayinfo />}
{activeTab === 'gateway' && <GatewayConfig />}
{activeTab === 'city' && <CityNodeStats />}
@@ -120,7 +120,7 @@ function DashboardContent() {
export default function Dashboard() {
return (
<Suspense fallback={
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className=" bg-gray-100 flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
<p className="mt-4 text-gray-600">...</p>