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>

app/components/ui/tooltip.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface TooltipProps {
+  children: React.ReactNode
+  content: React.ReactNode
+  className?: string
+  delayDuration?: number
+  side?: "top" | "right" | "bottom" | "left"
+}
+
+const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  ({ children, content, className, delayDuration = 200, side = "top" }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false)
+    const [position, setPosition] = React.useState({ top: 0, left: 0 })
+    const tooltipRef = React.useRef<HTMLDivElement>(null)
+    const timeoutRef = React.useRef<NodeJS.Timeout>()
+
+    const handleMouseEnter = (e: React.MouseEvent) => {
+      timeoutRef.current = setTimeout(() => {
+        const rect = (e.target as HTMLElement).getBoundingClientRect()
+        const tooltipRect = tooltipRef.current?.getBoundingClientRect()
+
+        if (tooltipRect) {
+          let top = 0
+          let left = 0
+
+          switch (side) {
+            case "top":
+              top = rect.top - tooltipRect.height - 8
+              left = rect.left + (rect.width - tooltipRect.width) / 2
+              break
+            case "bottom":
+              top = rect.bottom + 8
+              left = rect.left + (rect.width - tooltipRect.width) / 2
+              break
+            case "left":
+              top = rect.top + (rect.height - tooltipRect.height) / 2
+              left = rect.left - tooltipRect.width - 8
+              break
+            case "right":
+              top = rect.top + (rect.height - tooltipRect.height) / 2
+              left = rect.right + 8
+              break
+          }
+
+          setPosition({ top, left })
+          setIsVisible(true)
+        }
+      }, delayDuration)
+    }
+
+    const handleMouseLeave = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+      setIsVisible(false)
+    }
+
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current)
+        }
+      }
+    }, [])
+
+    return (
+      <div className="relative inline-block" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} ref={ref}>
+        {children}
+        {isVisible && (
+          <div
+            ref={tooltipRef}
+            className={cn(
+              "fixed z-50 px-2 py-1 text-xs text-primary-foreground bg-primary rounded-md shadow-sm scale-90 animate-in fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+              className,
+            )}
+            style={{
+              top: position.top,
+              left: position.left,
+              transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out",
+            }}
+          >
+            {content}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+Tooltip.displayName = "Tooltip"
+
+// 为了保持 API 兼容性，我们导出相同的组件名称
+export const TooltipProvider = ({ children }: { children: React.ReactNode }) => children
+export const TooltipTrigger = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
+  <div ref={ref} {...props} />
+))
+TooltipTrigger.displayName = "TooltipTrigger"
+
+export const TooltipContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
+  <div ref={ref} {...props} />
+))
+TooltipContent.displayName = "TooltipContent"
+
+export { Tooltip }