afc77439bb
Optimize user detail page for asset assessment and tag info. #VERCEL_SKIP Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
"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 MobileSidebar from "./components/MobileSidebar"
|
|
import BottomTabs from "@/components/nav/bottom-tabs"
|
|
import { usePathname } from "next/navigation"
|
|
import { Toaster } from "@/components/ui/toaster"
|
|
|
|
const inter = Inter({ subsets: ["latin"] })
|
|
|
|
export default function ClientLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
const [isMobile, setIsMobile] = useState(false)
|
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
|
const pathname = usePathname()
|
|
|
|
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">
|
|
{/* 桌面端侧边栏 - PC端不显示底部导航 */}
|
|
{!isMobile && <Sidebar />}
|
|
|
|
{/* 移动端侧边栏 */}
|
|
{isMobile && <MobileSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />}
|
|
|
|
{/* 主内容区域 */}
|
|
<main className={`flex-1 ${isMobile ? "pb-20" : "p-6"}`}>
|
|
{/* 移动端头部 - 添加卡若数据资产中台标题 */}
|
|
{isMobile && (
|
|
<div className="sticky top-0 z-30 bg-white/90 backdrop-blur border-b px-4 py-3 mb-4">
|
|
<h1 className="text-lg font-semibold text-center">卡若数据资产中台</h1>
|
|
</div>
|
|
)}
|
|
|
|
{/* 内容区域 */}
|
|
<div className={`glass-card min-h-full ${isMobile ? "mx-2 mb-4" : ""}`}>{children}</div>
|
|
</main>
|
|
</div>
|
|
|
|
{/* 移动端底部导航 - 使用新的BottomTabs组件 */}
|
|
{isMobile && <BottomTabs />}
|
|
<Toaster />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|