首页页面

src/app/(admin)/dashboard/page.tsx

@@ -0,0 +1,243 @@
+import {ReactNode} from 'react'
+
+export type DashboardPageProps = {
+
+}
+
+export default function DashboardPage(props: DashboardPageProps) {
+  return (
+    <div className="flex gap-6">
+
+      {/* 左侧主要内容区域 */}
+      <div className="flex-1">
+
+        {/* 页面标题 */}
+        <div className="mb-8 bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-100">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-blue-600 rounded-lg">
+              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">IP资源监控中心</h1>
+              <p className="mt-2 text-gray-600">实时监控IP资源使用情况和系统性能指标</p>
+            </div>
+          </div>
+        </div>
+
+        {/* 数据卡片网格 */}
+        <div className="grid grid-cols-3 gap-4 mb-6">
+          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+            <div className="flex items-center">
+              <div className="p-3 bg-blue-100 rounded-lg">
+                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                </svg>
+              </div>
+              <div className="ml-4">
+                <h2 className="text-sm font-medium text-gray-600">活跃IP数</h2>
+                <p className="text-2xl font-semibold text-gray-900">8,721</p>
+                <p className="text-sm text-green-600">↑12% 较上月</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+            <div className="flex items-center">
+              <div className="p-3 bg-green-100 rounded-lg">
+                <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div className="ml-4">
+                <h2 className="text-sm font-medium text-gray-600">IP可用率</h2>
+                <p className="text-2xl font-semibold text-gray-900">99.9%</p>
+                <p className="text-sm text-green-600">符合SLA标准</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+            <div className="flex items-center">
+              <div className="p-3 bg-purple-100 rounded-lg">
+                <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <div className="ml-4">
+                <h2 className="text-sm font-medium text-gray-600">平均响应时间</h2>
+                <p className="text-2xl font-semibold text-gray-900">47ms</p>
+                <p className="text-sm text-green-600">优于行业标准</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 监控指标区域 */}
+        <div className="grid grid-cols-2 gap-4 mb-6">
+          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">带宽使用趋势</h3>
+            <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
+              带宽使用量图表
+            </div>
+            <div className="mt-4 grid grid-cols-3 gap-4 text-center text-sm">
+              <div>
+                <p className="text-gray-600">当前带宽</p>
+                <p className="font-semibold">1.2 Gbps</p>
+              </div>
+              <div>
+                <p className="text-gray-600">峰值带宽</p>
+                <p className="font-semibold">2.5 Gbps</p>
+              </div>
+              <div>
+                <p className="text-gray-600">平均带宽</p>
+                <p className="font-semibold">800 Mbps</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">IP地理分布</h3>
+            <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
+              地理分布热力图
+            </div>
+            <div className="mt-4 grid grid-cols-3 gap-4 text-center text-sm">
+              <div>
+                <p className="text-gray-600">亚太地区</p>
+                <p className="font-semibold">45%</p>
+              </div>
+              <div>
+                <p className="text-gray-600">欧美地区</p>
+                <p className="font-semibold">35%</p>
+              </div>
+              <div>
+                <p className="text-gray-600">其他地区</p>
+                <p className="font-semibold">20%</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 告警信息 */}
+        <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-lg font-medium text-gray-900">系统告警</h3>
+            <span className="text-sm text-blue-600 cursor-pointer hover:text-blue-700">查看全部</span>
+          </div>
+          <div className="space-y-3">
+            <div className="flex items-center p-4 bg-red-50 rounded-lg">
+              <div className="p-2 bg-red-100 rounded-lg mr-4">
+                <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <div>
+                <h4 className="text-sm font-medium text-red-900">带宽使用率超过阈值</h4>
+                <p className="text-xs text-red-600 mt-1">5分钟前</p>
+              </div>
+            </div>
+            <div className="flex items-center p-4 bg-yellow-50 rounded-lg">
+              <div className="p-2 bg-yellow-100 rounded-lg mr-4">
+                <svg className="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <div>
+                <h4 className="text-sm font-medium text-yellow-900">IP资源池使用率达到80%</h4>
+                <p className="text-xs text-yellow-600 mt-1">20分钟前</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 右侧边栏 */}
+      <div className="w-80 space-y-6">
+        {/* 用户信息卡片 */}
+        <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+          <div className="flex items-center space-x-4">
+            <div className="relative">
+              <div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
+                <span className="text-xl font-bold text-white">A</span>
+              </div>
+              <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
+            </div>
+            <div>
+              <h4 className="font-semibold text-gray-900">管理员</h4>
+              <p className="text-sm text-gray-600">admin@example.com</p>
+            </div>
+          </div>
+          <div className="mt-6 pt-4 border-t border-gray-100">
+            <div className="grid grid-cols-2 gap-4 text-center">
+              <div className="bg-blue-50 p-3 rounded-lg">
+                <p className="text-sm font-medium text-gray-600">在线时长</p>
+                <p className="text-lg font-semibold text-blue-600">4.5h</p>
+              </div>
+              <div className="bg-green-50 p-3 rounded-lg">
+                <p className="text-sm font-medium text-gray-600">处理工单</p>
+                <p className="text-lg font-semibold text-green-600">12</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 快捷操作 */}
+        <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">快捷操作</h3>
+          <div className="grid grid-cols-2 gap-3">
+            <button className="flex items-center justify-center space-x-2 bg-blue-50 text-blue-700 p-3 rounded-lg hover:bg-blue-100 transition-colors">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+              </svg>
+              <span>新增用户</span>
+            </button>
+            <button className="flex items-center justify-center space-x-2 bg-purple-50 text-purple-700 p-3 rounded-lg hover:bg-purple-100 transition-colors">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+              </svg>
+              <span>工单管理</span>
+            </button>
+            <button className="flex items-center justify-center space-x-2 bg-green-50 text-green-700 p-3 rounded-lg hover:bg-green-100 transition-colors">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              <span>数据报表</span>
+            </button>
+            <button className="flex items-center justify-center space-x-2 bg-orange-50 text-orange-700 p-3 rounded-lg hover:bg-orange-100 transition-colors">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              <span>系统设置</span>
+            </button>
+          </div>
+        </div>
+
+        {/* 系统公告 */}
+        <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow transition-shadow">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-lg font-semibold text-gray-900">系统公告</h3>
+            <span className="text-sm text-blue-600 hover:text-blue-700 cursor-pointer">全部</span>
+          </div>
+          <div className="space-y-4">
+            <div className="flex items-start space-x-3">
+              <div className="w-2 h-2 mt-2 bg-red-500 rounded-full"></div>
+              <div>
+                <p className="text-sm text-gray-900">系统将于本周日凌晨2点进行例行维护升级</p>
+                <p className="text-xs text-gray-500 mt-1">2024-01-20 10:00</p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="w-2 h-2 mt-2 bg-blue-500 rounded-full"></div>
+              <div>
+                <p className="text-sm text-gray-900">IP资源管理系统V2.0版本更新说明</p>
+                <p className="text-xs text-gray-500 mt-1">2024-01-18 15:30</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/(admin)/layout.tsx

@@ -0,0 +1,198 @@
+import Link from 'next/link'
+import {ReactNode} from 'react'
+
+export type AdminLayoutProps = {
+  children: ReactNode
+}
+
+export default function AdminLayout(props: AdminLayoutProps) {
+  return (
+    <div className="min-w-[1200px] overflow-auto bg-gray-50 flex">
+
+      {/* 左侧导航栏 */}
+      <aside className="w-64 h-screen overflow-y-auto bg-white border-r border-gray-200">
+        {/* Logo区域 */}
+        <div className="h-16 flex items-center px-6">
+          <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z"/>
+          </svg>
+          <h1 className="ml-3 text-xl font-bold text-gray-900">管理系统</h1>
+        </div>
+
+        {/* 导航菜单 */}
+        <nav className="mt-4 px-4">
+          <div className="space-y-6">
+            {/* 概览 */}
+            <div>
+              <div className="px-3 mb-2 text-xs font-medium text-gray-500 uppercase tracking-wider">概览</div>
+              <Link
+                href="/dashboard"
+                className="flex items-center px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-md">
+                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+                </svg>
+                仪表盘
+              </Link>
+            </div>
+
+            {/* 用户管理 */}
+            <div>
+              <div className="px-3 mb-2 text-xs font-medium text-gray-500 uppercase tracking-wider">用户管理</div>
+              <div className="space-y-1">
+                <a
+                  href="/users"
+                  className="flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50">
+                  <svg className="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
+                  </svg>
+                  用户列表
+                </a>
+                <a
+                  href="/users/roles"
+                  className="flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50">
+                  <svg className="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+                  </svg>
+                  角色权限
+                </a>
+              </div>
+            </div>
+
+            {/* 订单管理 */}
+            <div>
+              <div className="px-3 mb-2 text-xs font-medium text-gray-500 uppercase tracking-wider">订单管理</div>
+              <div className="space-y-1">
+                <a
+                  href="/orders"
+                  className="flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50">
+                  <svg className="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+                  </svg>
+                  订单列表
+                </a>
+                <a
+                  href="/orders/refunds"
+                  className="flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50">
+                  <svg className="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                      d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"/>
+                  </svg>
+                  退款管理
+                </a>
+              </div>
+            </div>
+
+            {/* 系统设置 */}
+            <div>
+              <div className="px-3 mb-2 text-xs font-medium text-gray-500 uppercase tracking-wider">系统设置</div>
+              <a
+                href="/settings"
+                className="flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50">
+                <svg className="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+                  <path
+                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                </svg>
+                基本设置
+              </a>
+            </div>
+          </div>
+        </nav>
+      </aside>
+
+      {/* 右侧主内容区 */}
+      <div className="flex-1 h-screen flex flex-col">
+
+        {/* 顶部导航栏 */}
+        <header className="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between">
+
+            {/* 面包屑导航 */}
+            <div className="flex items-center">
+              <a href="/dashboard" className="text-gray-600 hover:text-blue-600">首页</a>
+              <svg className="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7"/>
+              </svg>
+              <span className="text-gray-400">当前页面</span>
+            </div>
+
+            {/* 右侧工具栏 */}
+            <div className="flex items-center space-x-3">
+              {/* 搜索框 */}
+              <div className="w-56">
+                <div className="relative">
+                  <input
+                    type="text"
+                    placeholder="搜索..."
+                    className="w-full h-10 pl-10 pr-4 text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+                  />
+                  <svg
+                    className="w-5 h-5 text-gray-400 absolute left-3 top-2.5" fill="none" stroke="currentColor"
+                    viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                  </svg>
+                </div>
+              </div>
+
+              {/* 全屏切换 */}
+              <button
+                className="p-2 text-gray-500 hover:text-gray-600 hover:bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
+                </svg>
+              </button>
+
+              {/* 通知 */}
+              <button
+                className="relative p-2 text-gray-500 hover:text-gray-600 hover:bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+                </svg>
+                <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
+              </button>
+
+              {/* 用户菜单 */}
+              <div className="relative">
+                <button
+                  className="flex items-center space-x-3 p-1.5 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                  <img
+                    src="/images/avatar.jpg"
+                    alt="用户头像"
+                    className="w-9 h-9 rounded-full object-cover border-2 border-gray-200"
+                  />
+                  <div className="text-left">
+                    <div className="font-medium text-gray-800">管理员</div>
+                    <div className="text-gray-500 text-xs">超级管理员</div>
+                  </div>
+                  <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/>
+                  </svg>
+                </button>
+              </div>
+            </div>
+        </header>
+
+        {/* 主内容区域 */}
+        <main className={`flex-1 overflow-auto p-6`}>
+          {props.children}
+        </main>
+      </div>
+    </div>
+  )
+}

src/app/(auth)/login/page.tsx

@@ -0,0 +1,102 @@
+import {ReactNode} from 'react'
+
+export type LoginPageProps = {}
+
+export default function LoginPage(props: LoginPageProps) {
+  return (
+    
+    <div className="flex h-screen w-screen">
+      {/* 左侧背景图 */}
+      <div className="relative flex-1 hidden lg:block">
+        <img 
+          src="/images/login-bg.jpg" 
+          alt="登录背景"
+          className="object-cover w-full h-full"
+        />
+        <div className="absolute inset-0 bg-black/30">
+          <div className="flex items-center justify-center h-full">
+            <h1 className="text-4xl font-bold text-white">
+              欢迎回来
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      {/* 右侧登录表单 */}
+      <div className="w-[600px] flex items-center justify-center p-8">
+        <div className="w-full space-y-8">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold text-gray-900">
+              登录您的账户
+            </h2>
+            <p className="mt-2 text-sm text-gray-600">
+              或者{' '}
+              <a href="#" className="font-medium text-blue-600 hover:text-blue-500">
+                开始14天免费试用
+              </a>
+            </p>
+          </div>
+
+          <form className="mt-8 space-y-6">
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                  邮箱地址
+                </label>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                  密码
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  autoComplete="current-password"
+                  required
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                />
+                <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
+                  记住我
+                </label>
+              </div>
+
+              <div className="text-sm">
+                <a href="#" className="font-medium text-blue-600 hover:text-blue-500">
+                  忘记密码？
+                </a>
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              登录
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/(home)/footer.tsx

@@ -0,0 +1,106 @@
+import Wrap from '@/components/wrap'
+
+export type FooterProps = {}
+
+export default function Footer(props: FooterProps) {
+  return (
+    <footer className="h-[500px] bg-gray-900 p-12 text-white overflow-hidden">
+      <Wrap className="flex flex-col">
+        <div className={`flex-auto overflow-hidden flex justify-between`}>
+          <div className="flex">
+            <div className="flex flex-col items-center">
+              <img src="/logo.svg" alt="logo" className="w-44 h-44 bg-gray-100"/>
+              <span className="text-sm font-light mt-6">关注我们查看更多资讯</span>
+            </div>
+
+          </div>
+
+          <div className={`flex flex-col gap-4`}>
+            <h3>商务合作</h3>
+            <p className={`text-sm text-gray-400 font-light`}>大客户经理:张经理</p>
+            <p className={`text-sm text-gray-400 font-light`}>电话/微信:18751847847</p>
+            <p className={`text-sm text-gray-400 font-light`}>QQ号:800180559</p>
+            <h3>服务保障</h3>
+            <p className={`text-sm text-gray-400 font-light`}>售前服务</p>
+            <p className={`text-sm text-gray-400 font-light`}>技术支持</p>
+          </div>
+
+          <div>
+            <h3>站点导航</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>产品订购</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>获取代理</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>帮助中心</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>企业服务</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>推广返利</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>国内代理</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>短效代理</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>长效代理</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>固定IP代理</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>全球代理</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>动态代理</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>静态代理</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>使用案例</h3>
+            <ul className={`mt-4 h-[184px] flex flex-col flex-wrap gap-4 gap-x-6 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>数据抓取</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>媒体矩阵</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>广告验证</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>价格监控</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>市场调研</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>金融数据</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>SEO优化</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>网站测试</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>获取代理</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>API提取</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>代码示例</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>热门地区</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>代理资讯</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>产品功能</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>使用教程</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>行业资讯</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className={`flex-none mt-6 pt-6 border-t border-gray-300 flex flex-col items-center`}>
+          <p className={`text-sm font-light`}>
+            声明：啊啊HTTP仅提供代理IP服务；严禁用户使用啊啊HTTP从事任何违法犯罪行为，产生的相关责任用户自负，对此啊啊HTTP不承担任何法律责任。
+            <a href="#">自律公约</a>
+          </p>
+          <p className={`text-sm mt-3 font-light`}>
+            南京啊啊啊啊科技有限公司 版权所有网站地图
+            地址：啊啊啊啊啊啊啊啊啊大街57号楚翘城7幢404-405室</p>
+          <p className={`text-sm mt-3 font-light`}>
+            电信业务经营许可证：B1-11111111
+            苏ICP备111111111号-1
+            苏公网安备11111111111111号
+          </p>
+        </div>
+      </Wrap>
+    </footer>
+  )
+}

src/app/(home)/header.tsx

@@ -0,0 +1,101 @@
+'use client'
+import {ReactNode, useEffect, useState} from 'react'
+import Link from 'next/link'
+import Wrap from '@/components/wrap'
+
+export type HeaderProps = {}
+
+export default function Header(props: HeaderProps) {
+  const [isScrolled, setIsScrolled] = useState(window.scrollY > 0)
+
+  const handleScroll = () => {
+    setIsScrolled(window.scrollY > 0)
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  return (
+    <header
+      className={[
+        `w-full h-24 fixed top-0 shadow-lg`,
+        `transition-shadow duration-200 ${isScrolled ? 'bg-white' : 'bg-transparent shadow-transparent'}`,
+      ].join(' ')}>
+      <Wrap className="flex items-center justify-between">
+        {/* 菜单 */}
+        <div className="flex items-center justify-between gap-8">
+          {/* logo */}
+          <Link href="/">
+            <img alt={`logo`} className={`w-16 h-16 rounded-full bg-gray-100`}/>
+          </Link>
+
+          {/* 菜单 */}
+          <nav className={`flex items-center`}>
+            <ul className="flex items-center gap-4 text-xl">
+              <NavItemTop>
+                <Link href={`/`}>首页</Link>
+              </NavItemTop>
+              <NavItemTop>
+                <button>产品订购</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <button>业务场景</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <button>帮助中心</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <Link href={`#`}>企业服务</Link>
+              </NavItemTop>
+              <NavItemTop>
+                <Link href={`#`}>推广返利</Link>
+              </NavItemTop>
+            </ul>
+          </nav>
+        </div>
+        {/* 登录 */}
+        <div className={`flex items-center`}>
+          <a
+            href="#"
+            className={`w-24 h-12 flex items-center justify-center text-xl font-medium`}>
+            <span>登录</span>
+          </a>
+          <a
+            href="#"
+            className={`w-24 h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center text-xl font-medium text-white`}>
+            <span>注册</span>
+          </a>
+        </div>
+      </Wrap>
+    </header>
+  )
+}
+
+type NavItemTopProps = {
+  children: ReactNode
+}
+
+function NavItemTop(props: NavItemTopProps) {
+  return (
+    <li className={`flex items-center text-xl px-2`}>
+      {props.children}
+    </li>
+  )
+}
+
+function SvgDown() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+        strokeLinejoin="round"/>
+    </svg>
+  )
+}

src/app/(home)/page.tsx

@@ -0,0 +1,240 @@
+import {ReactNode} from 'react'
+import Link from 'next/link'
+import Header from '@/app/(home)/header'
+import Wrap from '@/components/wrap'
+import Image from 'next/image'
+import Footer from './footer'
+
+export default function Home() {
+  return (
+    <div className={`overflow-auto flex flex-col items-stretch relative`}>
+      {/* 页头 */}
+      <Header/>
+
+      {/* 正文 */}
+      <main>
+
+        {/* banner */}
+        <section className={`w-full h-[800px] bg-[url('/banner.webp')] bg-cover`}>
+          <Wrap className={`overflow-hidden`}>
+            <h1 className={`mt-64 text-4xl font-medium`}>安全，稳定，快速，合规的代理服务器</h1>
+            <p className={`mt-10 text-gray-400`}>遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
+
+            <div className={`mt-24 flex gap-8`}>
+              <p className={`flex gap-4 items-center`}>
+                <Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
+                <span className={`text-xl font-light`}>全国200+城市节点</span>
+              </p>
+              <p className={`flex gap-4 items-center`}>
+                <Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
+                <span className={`text-xl font-light`}>300+城市级精准定位</span>
+              </p>
+              <p className={`flex gap-4 items-center`}>
+                <Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
+                <span className={`text-xl font-light`}>低延迟&高并发提取</span>
+              </p>
+            </div>
+
+            <button className={`mt-32 w-96 h-24 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-lg shadow-lg text-white text-4xl font-medium`}>
+              免费试用
+            </button>
+          </Wrap>
+        </section>
+
+        {/* 数据展示 */}
+        <section className={`my-36`}>
+          <Wrap className={`flex flex-col items-center`}>
+            <h2 className={`text-3xl font-medium`}>覆盖全国的IP资源及超大的带宽线路</h2>
+            <ul className={`w-full h-48 shadow-[0_0_20px_4px] shadow-blue-50 mt-24 flex`}>
+              <li className={`flex-1 flex flex-col items-center justify-center`}>
+                <p className={`text-xl`}>全国城市线路数量</p>
+                <p className={`mt-9 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>350+</p>
+              </li>
+              <li className={`flex-1 flex flex-col items-center justify-center`}>
+                <p className={`text-xl`}>每日更新IP数量</p>
+                <p className={`mt-9 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>1,350,129</p>
+              </li>
+              <li className={`flex-1 flex flex-col items-center justify-center`}>
+                <p className={`text-xl`}>用户量</p>
+                <p className={`mt-9 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>26,578</p>
+              </li>
+              <li className={`flex-1 flex flex-col items-center justify-center`}>
+                <p className={`text-xl`}>IP可用率</p>
+                <p className={`mt-9 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>99%</p>
+              </li>
+            </ul>
+            <img src={`/map.webp`} alt={`map`} className="w-[1200px]"/>
+          </Wrap>
+        </section>
+
+        {/* 优势 1 */}
+        <section>
+          <Wrap>
+            <h2 className={`text-3xl font-medium text-center`}>HTTP安全合规的代理IP资源池</h2>
+            <ul className={`mt-28 pt-16 pb-16 flex justify-between bg-[url('/earth.webp')] bg-cover`}>
+              <li className={`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`}>
+                <img src={`/s1-1.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+                <h3 className={`text-xl font-medium`}>短期动态IP池</h3>
+                <div className={`flex flex-col gap-3`}>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>IP时效3-30分钟(可定制)</span>
+                  </p>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>支持高并发提取</span>
+                  </p>
+                </div>
+              </li>
+              <li className={`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`}>
+                <img src={`/s1-2.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+                <h3 className={`text-xl font-medium`}>长期静态IP池</h3>
+                <div className={`flex flex-col gap-3`}>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>IP覆盖全国各地</span>
+                  </p>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>平均响应时长：0.03s</span>
+                  </p>
+                </div>
+              </li>
+              <li className={`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`}>
+                <img src={`/s1-3.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+                <h3 className={`text-xl font-medium`}>固定IP池</h3>
+                <div className={`flex flex-col gap-3`}>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>稳定长输不掉线</span>
+                  </p>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>全国热门静态IP线路</span>
+                  </p>
+                </div>
+              </li>
+              <li className={`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`}>
+                <img src={`/s1-4.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+                <h3 className={`text-xl font-medium`}>企业级定制池</h3>
+                <div className={`flex flex-col gap-3`}>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>可视化监控设计</span>
+                  </p>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>技术团队现场支持</span>
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </Wrap>
+        </section>
+
+        {/* 优势 2 */}
+        <section className={`mt-28 flex flex-col gap-24`}>
+          <Wrap>
+            <h2 className={`text-3xl text-center font-medium`}>HTTP 产品优势</h2>
+
+            <div className={`mt-24 flex gap-36`}>
+              <ul className={`flex-auto flex flex-col gap-6`}>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-1-1.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-contain"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>安全合规</h3>
+                    <p>国内三大运营商支持</p>
+                  </div>
+                </li>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-1-2.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-contain"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>稳定链接</h3>
+                    <p>IP纯净度高达99.9%</p>
+                  </div>
+                </li>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-1-3.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-contain"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>超匿名性</h3>
+                    <p>稳定传输，保护隐私安全</p>
+                  </div>
+                </li>
+              </ul>
+              <img src={`/s2-2-main.webp`} alt={`s2-1-main`} className={`w-[600px] h-[600px] object-contain flex-none`}/>
+            </div>
+
+            <div className={`flex gap-36 mt-24`}>
+              <img src={`/s2-2-main.webp`} alt={`s2-1-main`} className={`w-[600px] h-[600px] object-contain`}/>
+              <ul className={`flex-auto flex flex-col gap-6`}>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-2-1.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-cover"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>API接口文档</h3>
+                    <p>与第三方软件轻松集成</p>
+                  </div>
+                </li>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-2-2.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-cover"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>多种编程语言代码</h3>
+                    <p>C语言、GO语言、Python...</p>
+                  </div>
+                </li>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-2-3.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-cover"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>双重认证方式</h3>
+                    <p>API提取+账密认证</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </Wrap>
+        </section>
+
+        {/* 行业资讯 */}
+        <section className={`mt-44 mb-32 flex flex-col`}>
+          <Wrap>
+
+            <h2 className={`text-center text-3xl font-medium`}>行业资讯</h2>
+
+            <div className={`mt-24 flex gap-20`}>
+              <button className={`px-4`}>
+                <img src={`/next.svg`} alt={`prev`} className={`rotate-180`}/>
+              </button>
+
+              <div className={`flex p-14 gap-14 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg]`}>
+                <img src="/s3-main.webp" alt="tumb" className={`flex-none w-[350px] h-[270px] object-cover`}/>
+                <div className={`flex flex-col justify-between`}>
+                  <h3 className={`flex justify-between`}>
+                    <span className={`text-xl font-medium`}>我是标题</span>
+                    <sub className={`text-sm text-gray-400`}>2025-03-04</sub>
+                  </h3>
+                  <p className={`text-gray-400 leading-12`}>
+                    我是内容我是内容我是内容我是内容我是内容我是容我是内容我是内容内容我是内容我是内容我是内我是内容我是内容我是内容我是内容我是内容...
+                  </p>
+                  <div className={`flex justify-end`}>
+                    <a href="#" className={`text-sm text-gray-400 flex items-center gap-5`}>
+                      更多详情
+                      <img src={`/next.svg`} alt={`more`} className={`h-4 fill-gray-400`}/>
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              <button className={`px-4`}>
+                <img src={`/next.svg`} alt={`prev`} />
+              </button>
+            </div>
+
+
+          </Wrap>
+        </section>
+      </main>
+
+      {/* 页脚 */}
+      <Footer/>
+    </div>
+  )
+}

src/app/globals.css

@@ -1,26 +1,5 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  color: hsl(0, 0%, 20%);
 }

src/app/layout.tsx

@@ -1,34 +1,25 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import {ReactNode} from 'react'
+import {Metadata} from 'next'
+import './globals.css'
+import localFont from 'next/font/local'
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const font = localFont({src: './SourceHanSansSC-VF.otf.woff2'})
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    <html lang="zh-Cn">
+      <body className={font.className}>
         {children}
       </body>
     </html>
-  );
+  )
 }

src/app/page.tsx

@@ -1,101 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}

src/components/wrap.tsx

@@ -0,0 +1,14 @@
+import {ReactNode} from 'react'
+
+export type WrapProps = {
+  children: ReactNode
+  className?: string
+}
+
+export default function Wrap(props: WrapProps) {
+  return (
+    <div className={`w-[1200px] h-full mx-auto ${props.className}`}>
+      {props.children}
+    </div>
+  )
+}