对齐新版首页对话区布局与卡片展示样式

components/home/lovart-home.tsx

@@ -4,18 +4,25 @@ import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
 import {
+  ArrowRight,
+  ArrowUp,
   Bell,
   ChevronDown,
+  Clapperboard,
   Folder,
   Globe,
   Heart,
   Hexagon,
   Home,
+  ImageIcon,
   Info,
-  MapPin,
+  Lightbulb,
+  Monitor,
+  Palette,
   Plus,
   Send,
   Sparkles,
+  Star,
   Upload,
   User,
   Zap,
@@ -107,16 +114,15 @@ const DISCOVERY_DEFAULT_TABS = [
 ];
 
 const PROMPT_TAGS = [
-  "Nano Banana Pro",
-  "Design",
-  "Branding",
-  "Illustration",
-  "E-Commerce",
-  "Video",
+  { label: "Nano Banana Pro", icon: Sparkles, highlighted: true },
+  { label: "Design", icon: ImageIcon, highlighted: false },
+  { label: "Branding", icon: Star, highlighted: false },
+  { label: "Illustration", icon: Palette, highlighted: false },
+  { label: "E-Commerce", icon: Monitor, highlighted: false },
+  { label: "Video", icon: Clapperboard, highlighted: false },
 ];
 
 const MASONRY_HEIGHTS = [420, 290, 340, 470, 300, 360, 430, 320];
-const UI_SCALE = 0.7;
 
 function formatRelativeTime(value?: string) {
   if (!value) return "更新于今天";
@@ -329,7 +335,7 @@ export function LovartHome({
   };
 
   return (
-    <div className="min-h-svh bg-[#f4f4f4] text-[#171717]" style={{ zoom: UI_SCALE }}>
+    <div className="min-h-svh bg-[#f4f4f4] text-[#171717]">
       <header className="fixed left-0 top-0 z-40 h-[68px] w-full border-b border-black/5 bg-[#f4f4f4]/90 backdrop-blur">
         <div className="mx-auto flex h-full max-w-[1360px] items-center justify-between px-6">
           <button
@@ -344,7 +350,7 @@ export function LovartHome({
                 <Sparkles className="h-4 w-4" />
               </div>
             )}
-            <span className="text-[20px] font-semibold leading-none tracking-tight">
+            <span className="text-[28px] font-semibold leading-none tracking-tight">
               {siteName || "Lovart"}
             </span>
           </button>
@@ -481,26 +487,26 @@ export function LovartHome({
             <span className="text-[#ff7a00]">立即升级</span>
           </button>
 
-          <div className="mt-9 flex items-center justify-center gap-2">
+          <div className="mt-9 flex items-center justify-center gap-3">
             {siteLogo ? (
-              <img src={siteLogo} alt={siteName} className="h-10 w-10 rounded-full object-cover" />
+              <img src={siteLogo} alt={siteName} className="h-12 w-12 rounded-full object-cover" />
             ) : (
-              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-black text-white">
-                <Sparkles className="h-4 w-4" />
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-black text-white">
+                <Sparkles className="h-5 w-5" />
               </div>
             )}
-            <h1 className="text-[42px] font-semibold tracking-tight">
+            <h1 className="text-[50px] font-semibold tracking-tight">
               {siteName || "Lovart"} 让设计更简单
             </h1>
           </div>
-          <p className="mt-2 text-base text-black/35">懂你的设计代理，帮你搞定一切</p>
+          <p className="mt-2 text-[36px] text-black/35">懂你的设计代理，帮你搞定一切</p>
 
-          <div className="mx-auto mt-7 w-full max-w-[900px] rounded-[26px] border border-black/10 bg-white px-4 pb-3 pt-4 shadow-[0_10px_24px_rgba(0,0,0,0.05)]">
+          <div className="mx-auto mt-7 w-full max-w-[900px] rounded-[30px] border border-black/10 bg-white px-5 pb-4 pt-5 shadow-[0_10px_24px_rgba(0,0,0,0.05)]">
             <Textarea
               value={prompt}
               onChange={(event) => setPrompt(event.target.value)}
               placeholder="让 Lovart 打造引人注目的社交媒体视觉"
-              className="min-h-[92px] resize-none border-0 bg-transparent px-1 text-base shadow-none focus-visible:ring-0"
+              className="min-h-[104px] resize-none border-0 bg-transparent px-1 text-[34px] shadow-none focus-visible:ring-0"
             />
 
             {files.length > 0 && (
@@ -521,8 +527,8 @@ export function LovartHome({
             )}
 
             <div className="flex items-center justify-between border-t border-black/8 pt-3">
-              <label className="inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-black/10 text-black/60 hover:bg-black/5">
-                <Upload className="h-4 w-4" />
+              <label className="inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-black/10 text-black/60 hover:bg-black/5">
+                <Upload className="h-5 w-5" />
                 <input
                   type="file"
                   accept="image/*"
@@ -535,42 +541,43 @@ export function LovartHome({
                 />
               </label>
 
-              <div className="flex items-center gap-1.5">
-                <button className="flex h-8 w-8 items-center justify-center rounded-full border border-black/10 text-black/50 hover:bg-black/5">
-                  <MapPin className="h-3.5 w-3.5" />
+              <div className="flex items-center gap-2">
+                <button className="flex h-10 w-10 items-center justify-center rounded-full border border-black/10 text-black/50 hover:bg-black/5">
+                  <Lightbulb className="h-4 w-4" />
                 </button>
-                <button className="flex h-8 w-8 items-center justify-center rounded-full border border-black/10 text-black/50 hover:bg-black/5">
-                  <Zap className="h-3.5 w-3.5" />
+                <button className="flex h-10 w-10 items-center justify-center rounded-full border border-black/10 text-black/50 hover:bg-black/5">
+                  <Zap className="h-4 w-4" />
                 </button>
-                <button className="flex h-8 w-8 items-center justify-center rounded-full border border-black/10 text-black/50 hover:bg-black/5">
-                  <Globe className="h-3.5 w-3.5" />
+                <button className="flex h-10 w-10 items-center justify-center rounded-full border border-black/10 text-black/50 hover:bg-black/5">
+                  <Globe className="h-4 w-4" />
                 </button>
-                <button className="flex h-8 w-8 items-center justify-center rounded-full border border-[#72a3ff] text-[#3a78f2]">
-                  <Hexagon className="h-3.5 w-3.5" />
+                <button className="flex h-10 w-10 items-center justify-center rounded-full border border-[#72a3ff] text-[#3a78f2]">
+                  <Hexagon className="h-4 w-4" />
                 </button>
                 <Button
                   onClick={createCanvasFromComposer}
                   disabled={isSubmitting || (!prompt.trim() && files.length === 0)}
-                  className="h-8 w-8 rounded-full bg-[#9ca3af] p-0 text-white hover:bg-black"
+                  className="h-10 w-10 rounded-full bg-[#9ca3af] p-0 text-white hover:bg-black"
                 >
-                  <Send className="h-3.5 w-3.5" />
+                  <ArrowUp className="h-4 w-4" />
                 </Button>
               </div>
             </div>
           </div>
 
           <div className="mt-5 flex flex-wrap items-center justify-center gap-2">
-            {PROMPT_TAGS.map((tag, index) => (
+            {PROMPT_TAGS.map((tag) => (
               <button
-                key={tag}
+                key={tag.label}
                 type="button"
-                className={`rounded-full border px-3 py-1.5 text-sm ${
-                  index === 0
+                className={`inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-[26px] ${
+                  tag.highlighted
                     ? "border-[#ffb15f] bg-[#fff4e7] text-[#ff8c1f]"
                     : "border-black/15 bg-white text-black/70"
                 }`}
               >
-                {tag}
+                <tag.icon className="h-4 w-4" />
+                {tag.label}
               </button>
             ))}
           </div>
@@ -581,10 +588,11 @@ export function LovartHome({
             <h2 className="text-3xl font-semibold tracking-tight">最近项目</h2>
             <button
               type="button"
-              className="text-base text-black/45 hover:text-black"
+              className="inline-flex items-center gap-1 text-base text-black/45 hover:text-black"
               onClick={() => router.push("/canvas")}
             >
               查看全部
+              <ArrowRight className="h-4 w-4" />
             </button>
           </div>
 
@@ -703,10 +711,7 @@ export function LovartHome({
       </button>
 
       <Dialog open={upgradeDialogOpen} onOpenChange={setUpgradeDialogOpen}>
-        <DialogContent
-          className="max-h-[92vh] w-[95vw] max-w-[1240px] overflow-hidden rounded-3xl border-black/10 bg-[#f7f7f7] p-0"
-          style={{ zoom: UI_SCALE }}
-        >
+        <DialogContent className="max-h-[92vh] w-[95vw] max-w-[1240px] overflow-hidden rounded-3xl border-black/10 bg-[#f7f7f7] p-0">
           <div className="flex h-full max-h-[92vh] flex-col">
             <DialogHeader className="border-b border-black/6 px-6 py-5">
               <DialogTitle className="text-center text-5xl font-bold text-black">升级您的套餐</DialogTitle>