feat(public): 首页改为极简谷歌风格

public-frontend/src/components/Home.tsx

@@ -1,10 +1,8 @@
 import { useState } from "react";
-import { Search, PlusCircle, ScanBarcode, ShieldCheck, ArrowRight } from "lucide-react";
+import { Search, PlusCircle, ArrowRight } from "lucide-react";
 import { api } from "../api";
 import type { ProductSummary } from "../types";
 
-const EXAMPLES = ["可乐", "Nutella", "牛奶", "5449000000996"];
-
 export default function Home({
   onOpen,
   onContribute,
@@ -40,55 +38,46 @@ export default function Home({
   return (
     <div className="animate-fade-up">
       <section
-        className={`relative overflow-hidden rounded-3xl border border-gray-100 bg-gradient-to-b from-white to-brand-50/40 px-4 text-center shadow-card sm:px-6 ${
+        className={`flex flex-col items-center px-4 text-center ${
           searched
-            ? "py-8 sm:py-10"
-            : "flex min-h-[calc(100vh-12rem)] flex-col items-center justify-center py-12 sm:min-h-[calc(100vh-13rem)] sm:py-16"
+            ? "pt-2 pb-6"
+            : "min-h-[calc(100vh-12rem)] justify-center"
         }`}
       >
-        <div
-          aria-hidden
-          className="pointer-events-none absolute -top-24 left-1/2 h-72 w-[42rem] max-w-full -translate-x-1/2 rounded-full bg-brand-200/30 blur-3xl"
-        />
-        <div className="relative w-full">
-          <span className="inline-flex items-center gap-1.5 rounded-full border border-brand-200 bg-white/70 px-3 py-1 text-xs font-medium text-brand-700">
-            <ShieldCheck className="w-3.5 h-3.5" /> 公益 · 开放 · 可溯源
-          </span>
-          <h1 className="mt-5 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
-            天<span className="bg-gradient-to-r from-brand-600 to-emerald-500 bg-clip-text text-transparent">工</span>
-          </h1>
-          <p className="mx-auto mt-3 max-w-xl text-sm text-gray-500 sm:text-base">
-            输入商品名称或条码，检索客观、可溯源的商品资料。人人可查，人人可贡献。
-          </p>
+        <h1
+          className={`font-medium tracking-tight text-gray-800 ${
+            searched ? "text-3xl" : "text-6xl sm:text-7xl"
+          }`}
+        >
+          天<span className="text-brand-600">工</span>
+        </h1>
 
-          <form
-            onSubmit={(e) => run(undefined, e)}
-            className="mx-auto mt-7 flex w-full max-w-2xl flex-col gap-2 sm:flex-row"
-          >
-            <div className="flex flex-1 items-center gap-2 rounded-xl border border-gray-200 bg-white px-3.5 shadow-sm transition focus-within:border-brand-400 focus-within:ring-4 focus-within:ring-brand-500/10">
-              <Search className="h-5 w-5 shrink-0 text-gray-400" />
-              <input
-                autoFocus
-                value={q}
-                onChange={(e) => setQ(e.target.value)}
-                placeholder="例如：可乐、Nutella、5449000000996"
-                className="flex-1 bg-transparent py-3.5 outline-none"
-              />
-            </div>
-            <button type="submit" disabled={loading} className="btn-primary px-7 py-3.5 sm:py-0">
-              {loading ? "检索中…" : "检索"}
-            </button>
-          </form>
-
-          <div className="mt-4 flex flex-wrap items-center justify-center gap-2">
-            <span className="text-xs text-gray-400">试试：</span>
-            {EXAMPLES.map((ex) => (
-              <button key={ex} type="button" className="chip" onClick={() => run(ex)}>
-                <ScanBarcode className="w-3 h-3" /> {ex}
-              </button>
-            ))}
+        <form
+          onSubmit={(e) => run(undefined, e)}
+          className="mx-auto mt-8 w-full max-w-xl"
+        >
+          <div className="flex items-center gap-3 rounded-full border border-gray-200 bg-white px-5 py-3 shadow-sm transition hover:shadow-md focus-within:shadow-md">
+            <Search className="h-5 w-5 shrink-0 text-gray-400" />
+            <input
+              autoFocus
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="搜索商品名称或条码"
+              className="flex-1 bg-transparent outline-none"
+            />
           </div>
-        </div>
+          {!searched && (
+            <div className="mt-8">
+              <button
+                type="submit"
+                disabled={loading}
+                className="rounded-md border border-gray-200 bg-gray-50 px-6 py-2.5 text-sm text-gray-700 transition hover:border-gray-300 hover:shadow-sm"
+              >
+                {loading ? "检索中…" : "检索"}
+              </button>
+            </div>
+          )}
+        </form>
       </section>
 
       {error && (