refactor: overhaul UI for streamlined user experience

Redesign navigation, home overview, user portrait, and valuation pages with improved functionality and responsive design. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
2025-07-18 13:47:12 +00:00
parent 440b310c6f
commit 2408d50cb0
316 changed files with 55785 additions and 0 deletions
--- a/app/ClientLayout.tsx
+++ b/app/ClientLayout.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import type React from "react"
+import "./globals.css"
+import { Inter } from "next/font/google"
+import { useState, useEffect } from "react"
+import Sidebar from "./components/Sidebar"
+import MobileHeader from "./components/MobileHeader"
+import MobileSidebar from "./components/MobileSidebar"
+import BottomNav from "./components/BottomNav"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export default function ClientLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [isMobile, setIsMobile] = useState(false)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+
+    checkMobile()
+    window.addEventListener("resize", checkMobile)
+
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [])
+
+  return (
+    <html lang="zh-CN">
+      <head>
+        <title>用户数据资产中台</title>
+        <meta name="description" content="基于苹果毛玻璃设计的用户数据资产中台" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+      </head>
+      <body className={inter.className}>
+        {/* 背景装饰 */}
+        <div className="fixed inset-0 -z-10">
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-50" />
+          <div className="absolute top-0 left-0 w-72 h-72 md:w-96 md:h-96 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse" />
+          <div className="absolute top-0 right-0 w-72 h-72 md:w-96 md:h-96 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse animation-delay-2000" />
+          <div className="absolute bottom-0 left-1/2 w-72 h-72 md:w-96 md:h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse animation-delay-4000" />
+        </div>
+
+        <div className="flex min-h-screen">
+          {/* 桌面端侧边栏 */}
+          {!isMobile && <Sidebar />}
+
+          {/* 移动端侧边栏 */}
+          {isMobile && <MobileSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />}
+
+          {/* 主内容区域 */}
+          <main className={`flex-1 ${isMobile ? "pb-20" : "p-6"}`}>
+            {/* 移动端头部 */}
+            {isMobile && <MobileHeader onMenuToggle={() => setSidebarOpen(true)} />}
+
+            {/* 内容区域 */}
+            <div className={`glass-card min-h-full ${isMobile ? "mx-2 mb-4" : ""}`}>{children}</div>
+          </main>
+        </div>
+
+        {/* 移动端底部导航 */}
+        {isMobile && <BottomNav />}
+      </body>
+    </html>
+  )
+}