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>

components/VideoTutorialButton.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Play, Video } from "lucide-react"
+import { usePathname } from "next/navigation"
+import { getPageTutorials } from "@/lib/tutorials"
+
+export function VideoTutorialButton() {
+  const [isOpen, setIsOpen] = useState(false)
+  const pathname = usePathname()
+  const tutorials = getPageTutorials(pathname)
+
+  const handleOpenDialog = () => {
+    setIsOpen(true)
+  }
+
+  return (
+    <>
+      <Button
+        size="icon"
+        className="fixed bottom-20 right-4 h-12 w-12 rounded-full shadow-lg bg-white hover:bg-gray-50 border z-50"
+        onClick={handleOpenDialog}
+      >
+        <Video className="h-5 w-5 text-gray-600" />
+      </Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-[640px] p-0">
+          <DialogHeader>
+            <DialogTitle className="p-4 border-b">视频教程</DialogTitle>
+          </DialogHeader>
+          <div className="p-4">
+            {tutorials.length > 0 ? (
+              <div className="space-y-4">
+                {tutorials.map((tutorial) => (
+                  <div key={tutorial.id} className="flex items-center space-x-4">
+                    <div className="w-24 h-16 bg-gray-200 rounded-lg relative overflow-hidden">
+                      <img
+                        src={tutorial.thumbnailUrl || "/placeholder.svg"}
+                        alt={tutorial.title}
+                        className="absolute inset-0 w-full h-full object-cover"
+                      />
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <Play className="w-8 h-8 text-white" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-medium">{tutorial.title}</h3>
+                      <p className="text-sm text-gray-500">{tutorial.description}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500">暂无该页面的教程视频</div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}