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/ErrorBoundary.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { Component, type ErrorInfo, type ReactNode } from "react"
+import { Button } from "@/components/ui/button"
+import { AlertTriangle } from "lucide-react"
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // 记录错误到日志服务
+    this.logError(error, errorInfo)
+  }
+
+  logError = async (error: Error, errorInfo: ErrorInfo) => {
+    try {
+      await fetch("/api/log-error", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          message: error.message,
+          stack: error.stack,
+          componentStack: errorInfo.componentStack,
+          url: window.location.href,
+          timestamp: new Date().toISOString(),
+        }),
+      })
+    } catch (e) {
+      console.error("Failed to log error:", e)
+    }
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center min-h-[400px] p-6 text-center">
+          <AlertTriangle className="h-12 w-12 text-amber-500 mb-4" />
+          <h2 className="text-xl font-semibold mb-2">出现了一些问题</h2>
+          <p className="text-gray-600 mb-6 max-w-md">应用遇到了错误。我们已记录此问题并将尽快修复。</p>
+          <div className="space-x-4">
+            <Button onClick={this.handleRetry}>重试</Button>
+            <Button variant="outline" onClick={() => window.location.reload()}>
+              刷新页面
+            </Button>
+          </div>
+          {process.env.NODE_ENV === "development" && (
+            <div className="mt-6 p-4 bg-gray-100 rounded-md text-left overflow-auto max-w-full">
+              <p className="font-mono text-sm text-red-600 whitespace-pre-wrap">{this.state.error?.stack}</p>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}