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/poster-selector.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Check } from "lucide-react"
+
+interface PosterTemplate {
+  id: string
+  title: string
+  type: "领取" | "了解"
+  imageUrl: string
+}
+
+interface PosterSelectorProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSelect: (template: PosterTemplate) => void
+}
+
+const templates: PosterTemplate[] = [
+  {
+    id: "1",
+    title: "点击领取",
+    type: "领取",
+    imageUrl: "/placeholder.svg?height=400&width=300",
+  },
+  {
+    id: "2",
+    title: "点击了解",
+    type: "了解",
+    imageUrl: "/placeholder.svg?height=400&width=300",
+  },
+  // ... 其他模板
+]
+
+export function PosterSelector({ open, onOpenChange, onSelect }: PosterSelectorProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>选择海报</DialogTitle>
+        </DialogHeader>
+
+        <div>
+          <h3 className="text-sm text-gray-500 mb-4">点击下方海报使用该模板</h3>
+          <div className="grid grid-cols-3 gap-6">
+            {templates.map((template) => (
+              <div
+                key={template.id}
+                className="group relative cursor-pointer"
+                onClick={() => {
+                  onSelect(template)
+                  onOpenChange(false)
+                }}
+              >
+                <div className="aspect-[3/4] rounded-lg overflow-hidden bg-gray-100">
+                  <img
+                    src={template.imageUrl || "/placeholder.svg"}
+                    alt={template.title}
+                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
+                  />
+                </div>
+                <div className="absolute inset-0 flex items-center justify-center opacity-0 bg-black/50 group-hover:opacity-100 transition-opacity">
+                  <Check className="w-8 h-8 text-white" />
+                </div>
+                <div className="mt-2 text-center">
+                  <div className="font-medium">{template.title}</div>
+                  <div className="text-sm text-gray-500">{template.type}类型</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            关闭
+          </Button>
+          <Button>新建海报</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}