收敛新版首页比例并对齐对话区控件尺寸

components/home/lovart-home.tsx

@@ -350,7 +350,7 @@ export function LovartHome({
                 <Sparkles className="h-4 w-4" />
               </div>
             )}
-            <span className="text-[28px] font-semibold leading-none tracking-tight">
+            <span className="text-[22px] font-semibold leading-none tracking-tight">
               {siteName || "Lovart"}
             </span>
           </button>
@@ -430,47 +430,47 @@ export function LovartHome({
         </div>
       </header>
 
-      <aside className="fixed left-6 top-[310px] z-30 hidden flex-col items-center gap-3 lg:flex">
+      <aside className="fixed left-6 top-[300px] z-30 hidden flex-col items-center gap-2.5 lg:flex">
         <button
           type="button"
           onClick={openNewCanvas}
-          className="flex h-[62px] w-[62px] items-center justify-center rounded-full border border-black/10 bg-white shadow"
+          className="flex h-[56px] w-[56px] items-center justify-center rounded-full border border-black/10 bg-white shadow"
         >
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-black text-white">
-            <Plus className="h-5 w-5" />
+          <div className="flex h-9 w-9 items-center justify-center rounded-full bg-black text-white">
+            <Plus className="h-[18px] w-[18px]" />
           </div>
         </button>
 
-        <div className="flex w-[62px] flex-col items-center gap-1 rounded-[30px] border border-black/10 bg-white px-2 py-2 shadow">
+        <div className="flex w-[56px] flex-col items-center gap-1 rounded-[28px] border border-black/10 bg-white px-2 py-2 shadow">
           <button
             type="button"
-            className="flex h-10 w-10 items-center justify-center rounded-full bg-black/5"
+            className="flex h-9 w-9 items-center justify-center rounded-full bg-black/5"
             onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
           >
-            <Home className="h-4 w-4" />
+            <Home className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
-            className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
+            className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5"
             onClick={() =>
               projectSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })
             }
           >
-            <Folder className="h-4 w-4" />
+            <Folder className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
-            className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
+            className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5"
             onClick={() => toast.info("个人主页模块后续开放")}
           >
-            <User className="h-4 w-4" />
+            <User className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
-            className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
+            className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5"
             onClick={() => toast.info("帮助中心后续开放")}
           >
-            <Info className="h-4 w-4" />
+            <Info className="h-3.5 w-3.5" />
           </button>
         </div>
       </aside>
@@ -487,26 +487,26 @@ export function LovartHome({
             <span className="text-[#ff7a00]">立即升级</span>
           </button>
 
-          <div className="mt-9 flex items-center justify-center gap-3">
+          <div className="mt-9 flex items-center justify-center gap-2">
             {siteLogo ? (
-              <img src={siteLogo} alt={siteName} className="h-12 w-12 rounded-full object-cover" />
+              <img src={siteLogo} alt={siteName} className="h-10 w-10 rounded-full object-cover" />
             ) : (
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-black text-white">
-                <Sparkles className="h-5 w-5" />
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-black text-white">
+                <Sparkles className="h-4 w-4" />
               </div>
             )}
-            <h1 className="text-[50px] font-semibold tracking-tight">
+            <h1 className="text-[42px] font-semibold tracking-tight">
               {siteName || "Lovart"} 让设计更简单
             </h1>
           </div>
-          <p className="mt-2 text-[36px] text-black/35">懂你的设计代理，帮你搞定一切</p>
+          <p className="mt-2 text-[16px] text-black/35">懂你的设计代理，帮你搞定一切</p>
 
-          <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)]">
+          <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)]">
             <Textarea
               value={prompt}
               onChange={(event) => setPrompt(event.target.value)}
               placeholder="让 Lovart 打造引人注目的社交媒体视觉"
-              className="min-h-[104px] resize-none border-0 bg-transparent px-1 text-[34px] shadow-none focus-visible:ring-0"
+              className="min-h-[90px] resize-none border-0 bg-transparent px-1 text-[14px] shadow-none focus-visible:ring-0"
             />
 
             {files.length > 0 && (
@@ -527,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-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" />
+              <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" />
                 <input
                   type="file"
                   accept="image/*"
@@ -541,25 +541,25 @@ export function LovartHome({
                 />
               </label>
 
-              <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" />
+              <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">
+                  <Lightbulb className="h-3.5 w-3.5" />
                 </button>
-                <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 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>
-                <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 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>
-                <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 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>
                 <Button
                   onClick={createCanvasFromComposer}
                   disabled={isSubmitting || (!prompt.trim() && files.length === 0)}
-                  className="h-10 w-10 rounded-full bg-[#9ca3af] p-0 text-white hover:bg-black"
+                  className="h-8 w-8 rounded-full bg-[#9ca3af] p-0 text-white hover:bg-black"
                 >
-                  <ArrowUp className="h-4 w-4" />
+                  <ArrowUp className="h-3.5 w-3.5" />
                 </Button>
               </div>
             </div>
@@ -570,13 +570,13 @@ export function LovartHome({
               <button
                 key={tag.label}
                 type="button"
-                className={`inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-[26px] ${
+                className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[14px] ${
                   tag.highlighted
                     ? "border-[#ffb15f] bg-[#fff4e7] text-[#ff8c1f]"
                     : "border-black/15 bg-white text-black/70"
                 }`}
               >
-                <tag.icon className="h-4 w-4" />
+                <tag.icon className="h-3.5 w-3.5" />
                 {tag.label}
               </button>
             ))}