feat(public-frontend): 公开前端 UI 视觉升级

引入统一品牌主题(色阶/字体/阴影/动效),重做首页 hero、卡片、导航与页脚,统一各页面的卡片/输入框/按钮样式。 - tailwind: 新增 brand 色阶、Inter 字体、card/glow 阴影与 fade-up 动效 - index.html: 引入 Inter 字体与 theme-color/description meta - index.css: 双径向渐变背景 + @layer 组件类(.card/.input/.btn-primary 等) - App/Home/ProductView/Contribute/ApiDocs/Account: 套用新设计系统 Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-06-24 03:16:41 +00:00
parent 8f9a03a929
commit d58f46bc80
9 changed files with 297 additions and 151 deletions
@@ -3,7 +3,18 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>天工商品档案公共仓</title>
+    <meta name="theme-color" content="#059669" />
+    <meta
+      name="description"
+      content="天工商品档案公共仓——公益、开放、可溯源的商品事实查询与开放 API。"
+    />
+    <title>天工 · 商品档案公共仓</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
  </head>
  <body>
    <div id="root"></div>
@@ -14,6 +14,13 @@ type View =
  | { name: "api" }
  | { name: "account" };

+const NAV: { key: View["name"]; label: string; icon: typeof Search }[] = [
+  { key: "home", label: "检索", icon: Search },
+  { key: "contribute", label: "贡献档案", icon: PlusCircle },
+  { key: "api", label: "API", icon: Code2 },
+  { key: "account", label: "API 密钥", icon: KeyRound },
+];
+
 export default function App() {
  const [view, setView] = useState<View>({ name: "home" });
  const [qualified, setQualified] = useState<number | null>(null);
@@ -27,53 +34,46 @@ export default function App() {

  return (
    <div className="min-h-full flex flex-col">
-      <header className="bg-white border-b">
-        <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
+      <header className="sticky top-0 z-30 border-b border-gray-200/70 bg-white/80 backdrop-blur-md">
+        <div className="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between gap-4">
          <button
-            className="flex items-center gap-2 font-semibold text-gray-800"
+            className="flex items-center gap-2.5 font-semibold text-gray-800 group"
            onClick={() => setView({ name: "home" })}
          >
-            <Boxes className="w-6 h-6 text-emerald-600" />
-            天工<span className="text-gray-400 font-normal text-sm">商品档案公共仓</span>
+            <span className="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 text-white shadow-glow transition group-hover:scale-105">
+              <Boxes className="w-5 h-5" />
+            </span>
+            <span className="flex items-baseline gap-1.5">
+              <span className="text-lg tracking-tight">天工</span>
+              <span className="hidden sm:inline text-gray-400 font-normal text-xs">
+                商品档案公共仓
+              </span>
+            </span>
          </button>
-          <nav className="flex items-center gap-1 text-sm">
-            <button
-              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
-                view.name === "home" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
-              }`}
-              onClick={() => setView({ name: "home" })}
-            >
-              <Search className="w-4 h-4" /> 检索
-            </button>
-            <button
-              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
-                view.name === "contribute" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
-              }`}
-              onClick={() => setView({ name: "contribute" })}
-            >
-              <PlusCircle className="w-4 h-4" /> 贡献档案
-            </button>
-            <button
-              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
-                view.name === "api" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
-              }`}
-              onClick={() => setView({ name: "api" })}
-            >
-              <Code2 className="w-4 h-4" /> API
-            </button>
-            <button
-              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
-                view.name === "account" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
-              }`}
-              onClick={() => setView({ name: "account" })}
-            >
-              <KeyRound className="w-4 h-4" /> API 密钥
-            </button>
+          <nav className="flex items-center gap-0.5 text-sm">
+            {NAV.map(({ key, label, icon: Icon }) => {
+              const active =
+                view.name === key || (key === "home" && view.name === "product");
+              return (
+                <button
+                  key={key}
+                  className={`px-3 py-1.5 rounded-lg flex items-center gap-1.5 font-medium transition ${
+                    active
+                      ? "bg-brand-50 text-brand-700"
+                      : "text-gray-600 hover:bg-gray-100"
+                  }`}
+                  onClick={() => setView({ name: key } as View)}
+                >
+                  <Icon className="w-4 h-4" />
+                  <span className="hidden sm:inline">{label}</span>
+                </button>
+              );
+            })}
          </nav>
        </div>
      </header>

-      <main className="flex-1 max-w-5xl w-full mx-auto px-4 py-6">
+      <main className="flex-1 max-w-5xl w-full mx-auto px-4 py-8">
        {view.name === "home" && (
          <Home
            onOpen={(id) => setView({ name: "product", id })}
@@ -91,22 +91,27 @@ export default function App() {
        {view.name === "account" && <Account />}
      </main>

-      <footer className="border-t bg-white">
-        <div className="max-w-5xl mx-auto px-4 py-4 text-xs text-gray-400 leading-relaxed text-center">
+      <footer className="border-t border-gray-200/70 bg-white/60">
+        <div className="max-w-5xl mx-auto px-4 py-6 text-xs text-gray-400 leading-relaxed text-center">
          {qualified != null && (
-            <div className="mb-2 text-gray-500">
-              目前已收录
-              <span className="mx-1 font-semibold text-emerald-600">
+            <div className="mb-3 inline-flex items-center gap-1.5 rounded-full border border-brand-100 bg-brand-50 px-3 py-1 text-gray-500">
+              已收录
+              <span className="font-semibold text-brand-600">
                {qualified.toLocaleString()}
              </span>
              条合格商品档案
            </div>
          )}
-          天工是一个公益性商品档案库。主要收录商品名称，条码，品类，配料等官方快照。不涉及任何交易行为。
-          <button onClick={() => setView({ name: "api" })} className="ml-1 text-emerald-600 hover:underline">
-            API 调用说明
-          </button>
-          <div className="mt-2">
+          <p className="max-w-2xl mx-auto">
+            天工是一个公益性商品档案库，主要收录商品名称、条码、品类、配料等官方快照，不涉及任何交易行为。
+            <button
+              onClick={() => setView({ name: "api" })}
+              className="ml-1 text-brand-600 font-medium hover:underline"
+            >
+              API 调用说明
+            </button>
+          </p>
+          <div className="mt-3">
            <a
              href="https://beian.miit.gov.cn/"
              target="_blank"
@@ -5,7 +5,7 @@ import { api, type AccountInfo, type KeyResponse } from "../api";
 function KeyReveal({ data }: { data: KeyResponse }) {
  const [copied, setCopied] = useState(false);
  return (
-    <div className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-4">
+    <div className="mt-4 rounded-lg border border-brand-100 bg-brand-50 p-4">
      <div className="flex items-start gap-2 text-amber-700 text-sm">
        <AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" />
        <span>请立即复制保存此密钥，它只显示这一次，无法再次查看。</span>
@@ -27,7 +27,7 @@ function KeyReveal({ data }: { data: KeyResponse }) {
          className="text-gray-400 hover:text-gray-600 shrink-0"
          title="复制"
        >
-          {copied ? <Check className="w-5 h-5 text-emerald-600" /> : <Copy className="w-5 h-5" />}
+          {copied ? <Check className="w-5 h-5 text-brand-600" /> : <Copy className="w-5 h-5" />}
        </button>
      </div>
      <div className="mt-3 text-sm text-gray-600">
@@ -92,9 +92,9 @@ export default function Account() {

  return (
    <div className="max-w-xl mx-auto space-y-5">
-      <div className="bg-white border rounded-lg p-5">
+      <div className="card p-5">
        <h1 className="flex items-center gap-2 text-2xl font-bold text-gray-800">
-          <KeyRound className="w-6 h-6 text-emerald-600" /> API 密钥
+          <KeyRound className="w-6 h-6 text-brand-600" /> API 密钥
        </h1>
        <p className="mt-2 text-sm text-gray-600 leading-relaxed">
          匿名调用免费，但每个来源 IP 累计共 <strong>1000</strong> 次。注册一个账号即可自助领取专属 API
@@ -104,7 +104,7 @@ export default function Account() {
        <div className="mt-4 inline-flex rounded-md border bg-gray-50 p-0.5 text-sm">
          <button
            className={`px-4 py-1.5 rounded ${
-              mode === "register" ? "bg-white shadow-sm text-emerald-700" : "text-gray-500"
+              mode === "register" ? "bg-white shadow-sm text-brand-700" : "text-gray-500"
            }`}
            onClick={() => {
              setMode("register");
@@ -115,7 +115,7 @@ export default function Account() {
          </button>
          <button
            className={`px-4 py-1.5 rounded ${
-              mode === "manage" ? "bg-white shadow-sm text-emerald-700" : "text-gray-500"
+              mode === "manage" ? "bg-white shadow-sm text-brand-700" : "text-gray-500"
            }`}
            onClick={() => {
              setMode("manage");
@@ -135,7 +135,7 @@ export default function Account() {
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@example.com"
-              className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
+              className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
            />
          </div>
          <div>
@@ -146,14 +146,14 @@ export default function Account() {
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
-              className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
+              className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
            />
          </div>
          {error && <div className="text-sm text-red-600">{error}</div>}
          <button
            type="submit"
            disabled={loading}
-            className="w-full bg-emerald-600 text-white rounded-md py-2 text-sm font-medium hover:bg-emerald-700 disabled:opacity-50"
+            className="w-full bg-brand-600 text-white rounded-md py-2 text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
          >
            {loading ? "处理中…" : mode === "register" ? "注册并领取密钥" : "查询账号"}
          </button>
@@ -175,12 +175,12 @@ export default function Account() {
            <div>
              累计配额：已用 <strong>{info.quota_used.toLocaleString()}</strong> /{" "}
              {info.quota_total.toLocaleString()} 次（剩余{" "}
-              <strong className="text-emerald-600">{info.quota_remaining.toLocaleString()}</strong>）
+              <strong className="text-brand-600">{info.quota_remaining.toLocaleString()}</strong>）
            </div>
            <button
              onClick={regenerate}
              disabled={loading}
-              className="mt-2 text-emerald-600 hover:underline disabled:opacity-50"
+              className="mt-2 text-brand-600 hover:underline disabled:opacity-50"
            >
              忘记密钥？重置并生成新密钥
            </button>
@@ -20,7 +20,7 @@ function CopyBtn({ text }: { text: string }) {
      className="text-gray-400 hover:text-gray-600"
      title="复制"
    >
-      {done ? <Check className="w-4 h-4 text-emerald-600" /> : <Copy className="w-4 h-4" />}
+      {done ? <Check className="w-4 h-4 text-brand-600" /> : <Copy className="w-4 h-4" />}
    </button>
  );
 }
@@ -39,7 +39,7 @@ function Code({ children }: { children: string }) {
 }

 function Method({ m }: { m: string }) {
-  const color = m === "GET" ? "bg-sky-100 text-sky-700" : "bg-emerald-100 text-emerald-700";
+  const color = m === "GET" ? "bg-sky-100 text-sky-700" : "bg-brand-100 text-brand-700";
  return <span className={`text-xs font-mono font-semibold rounded px-1.5 py-0.5 ${color}`}>{m}</span>;
 }

@@ -63,7 +63,7 @@ function Endpoint({
  response: string;
 }) {
  return (
-    <div className="bg-white border rounded-lg p-5">
+    <div className="card p-5">
      <div className="flex items-center gap-2 flex-wrap">
        <Method m={method} />
        <code className="text-sm text-gray-800 font-mono break-all">{path}</code>
@@ -105,7 +105,7 @@ function Endpoint({
 export default function ApiDocs({ onRegister }: { onRegister?: () => void }) {
  return (
    <div className="space-y-5">
-      <div className="bg-white border rounded-lg p-5">
+      <div className="card p-5">
        <h1 className="text-2xl font-bold text-gray-800">API 调用说明</h1>
        <p className="mt-2 text-gray-600 text-sm leading-relaxed">
          天工商品档案公共仓提供<strong>公开、只读、免鉴权</strong>的商品事实 REST API，任何人都可直接调用，
@@ -119,7 +119,7 @@ export default function ApiDocs({ onRegister }: { onRegister?: () => void }) {
          <ul className="mt-2 list-disc pl-5 text-gray-600 space-y-1">
            <li>
              无需 API Key / Token 即可直接 GET；匿名调用按来源 IP 累计共 <strong>1000</strong> 次，
-              用满后需<button onClick={onRegister} className="text-emerald-600 hover:underline">注册账号</button>
+              用满后需<button onClick={onRegister} className="text-brand-600 hover:underline">注册账号</button>
              领取更高配额密钥（见下文「鉴权与配额」）。
            </li>
            <li>
@@ -135,13 +135,13 @@ export default function ApiDocs({ onRegister }: { onRegister?: () => void }) {
        </div>
      </div>

-      <div className="bg-white border rounded-lg p-5">
+      <div className="card p-5">
        <h2 className="text-lg font-semibold text-gray-800">鉴权与配额</h2>
        <p className="mt-2 text-gray-600 text-sm leading-relaxed">
          API 默认<strong>匿名可用</strong>：无需任何凭证即可调用，但按来源 IP 计一个
          <strong>累计总配额（共 1000 次）</strong>，用满后返回
          <code className="font-mono">403</code>（错误码 <code className="font-mono">quota_exhausted</code>），
-          需<button onClick={onRegister} className="text-emerald-600 hover:underline">注册账号</button>
+          需<button onClick={onRegister} className="text-brand-600 hover:underline">注册账号</button>
          自助领取更高配额的 API Key。注册得到的密钥拥有更高的每分钟频率与累计调用配额，请求时通过请求头携带：
        </p>
        <div className="mt-3">
@@ -89,38 +89,36 @@ export default function Contribute({ onDone }: { onDone: () => void }) {

  if (done) {
    return (
-      <div className="max-w-xl mx-auto text-center py-16">
-        <CheckCircle2 className="w-14 h-14 text-emerald-500 mx-auto" />
+      <div className="max-w-xl mx-auto text-center py-16 animate-fade-up">
+        <span className="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-brand-50">
+          <CheckCircle2 className="w-9 h-9 text-brand-600" />
+        </span>
        <h1 className="mt-4 text-xl font-semibold text-gray-800">已提交，等待审核</h1>
        <p className="mt-2 text-gray-500">
          感谢你的贡献！资料将由管理员人工审核，通过后会收录进公共商品库。
        </p>
-        <button
-          onClick={onDone}
-          className="mt-6 px-5 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700"
-        >
+        <button onClick={onDone} className="btn-primary mt-6">
          返回首页
        </button>
      </div>
    );
  }

-  const input =
-    "w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400";
-  const label = "block text-xs text-gray-500 mb-1";
+  const input = "input";
+  const label = "block text-xs font-medium text-gray-500 mb-1";

  return (
-    <form onSubmit={submit} className="max-w-3xl mx-auto">
-      <h1 className="text-xl font-semibold text-gray-800">贡献商品档案</h1>
+    <form onSubmit={submit} className="max-w-3xl mx-auto animate-fade-up">
+      <h1 className="text-2xl font-semibold tracking-tight text-gray-900">贡献商品档案</h1>
      <p className="mt-1 text-sm text-gray-500">
        任何人都可以提交新商品资料。提交后会进入审核队列，<b>通过人工审核后才会收纳</b>。带 * 为必填。
      </p>

      {error && (
-        <div className="mt-4 bg-red-50 text-red-700 text-sm rounded-md px-4 py-2">{error}</div>
+        <div className="mt-4 rounded-xl bg-red-50 px-4 py-2.5 text-sm text-red-700">{error}</div>
      )}

-      <div className="bg-white border rounded-lg p-5 mt-4">
+      <div className="card p-5 mt-4">
        <h2 className="font-medium text-gray-700 mb-3">基础信息</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div className="sm:col-span-2">
@@ -167,7 +165,7 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
        </div>
      </div>

-      <div className="bg-white border rounded-lg p-5 mt-4">
+      <div className="card p-5 mt-4">
        <h2 className="font-medium text-gray-700 mb-3">配料与营养</h2>
        <label className={label}>配料表</label>
        <textarea
@@ -201,7 +199,7 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
        </div>
      </div>

-      <div className="bg-white border rounded-lg p-5 mt-4">
+      <div className="card p-5 mt-4">
        <h2 className="font-medium text-gray-700 mb-3">图片（仅填 URL）</h2>
        {images.length > 0 && (
          <ul className="mb-3 space-y-1">
@@ -234,14 +232,14 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
                setImageURL("");
              }
            }}
-            className="shrink-0 px-3 rounded-md border text-sm flex items-center gap-1 hover:bg-gray-50"
+            className="shrink-0 px-3 rounded-xl border border-gray-200 text-sm flex items-center gap-1 hover:bg-gray-50"
          >
            <PlusCircle className="w-4 h-4" /> 添加
          </button>
        </div>
      </div>

-      <div className="bg-white border rounded-lg p-5 mt-4">
+      <div className="card p-5 mt-4">
        <h2 className="font-medium text-gray-700 mb-3">联系方式（选填）</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
@@ -260,11 +258,7 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
      </div>

      <div className="mt-5 flex items-center gap-3">
-        <button
-          type="submit"
-          disabled={submitting}
-          className="px-6 py-2.5 rounded-lg bg-emerald-600 text-white font-medium hover:bg-emerald-700 disabled:opacity-60"
-        >
+        <button type="submit" disabled={submitting} className="btn-primary px-6">
          {submitting ? "提交中…" : "提交审核"}
        </button>
        <button type="button" onClick={onDone} className="text-sm text-gray-500 hover:underline">
@@ -1,8 +1,28 @@
 import { useState } from "react";
-import { Search, PlusCircle, Code2 } from "lucide-react";
+import { Search, PlusCircle, Code2, ScanBarcode, ShieldCheck, ArrowRight } from "lucide-react";
 import { api } from "../api";
 import type { ProductSummary } from "../types";

+const EXAMPLES = ["可乐", "Nutella", "牛奶", "5449000000996"];
+
+const FEATURES = [
+  {
+    icon: Search,
+    title: "客观可查",
+    desc: "按名称或条码检索商品的成分、营养、规格等官方事实。",
+  },
+  {
+    icon: ShieldCheck,
+    title: "可溯源",
+    desc: "每条资料标注数据来源与质量分，公开透明、人人可核。",
+  },
+  {
+    icon: Code2,
+    title: "开放 API",
+    desc: "免鉴权只读 REST 接口，开发者可直接接入商品档案。",
+  },
+];
+
 export default function Home({
  onOpen,
  onContribute,
@@ -19,12 +39,14 @@ export default function Home({
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

-  async function run(e?: React.FormEvent) {
+  async function run(term?: string, e?: React.FormEvent) {
    e?.preventDefault();
+    const keyword = (term ?? q).trim();
+    if (term !== undefined) setQ(term);
    setLoading(true);
    setError("");
    try {
-      const res = await api.search(q.trim(), 1, 30);
+      const res = await api.search(keyword, 1, 30);
      setItems(res.items);
      setTotal(res.total);
      setSearched(true);
@@ -36,87 +58,123 @@ export default function Home({
  }

  return (
-    <div>
-      <div className="text-center py-10">
-        <h1 className="text-3xl font-bold text-gray-800">天工</h1>
-        <p className="mt-2 text-gray-500">
-          输入商品名称或条码，检索客观、可溯源的商品资料。人人可查，人人可贡献。
-        </p>
-        <form onSubmit={run} className="mt-6 max-w-2xl mx-auto flex gap-2">
-          <div className="flex-1 flex items-center gap-2 bg-white border rounded-lg px-3 shadow-sm focus-within:ring-2 focus-within:ring-emerald-400">
-            <Search className="w-5 h-5 text-gray-400" />
-            <input
-              autoFocus
-              value={q}
-              onChange={(e) => setQ(e.target.value)}
-              placeholder="例如：可乐、Nutella、5449000000996"
-              className="flex-1 py-3 outline-none bg-transparent"
-            />
+    <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-6 py-14 text-center shadow-card">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -top-24 left-1/2 h-72 w-[42rem] -translate-x-1/2 rounded-full bg-brand-200/30 blur-3xl"
+        />
+        <div className="relative">
+          <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 sm:text-5xl font-extrabold tracking-tight text-gray-900">
+            天<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-gray-500">
+            输入商品名称或条码，检索客观、可溯源的商品资料。人人可查，人人可贡献。
+          </p>
+
+          <form onSubmit={(e) => run(undefined, e)} className="mx-auto mt-7 flex max-w-2xl gap-2">
+            <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">
+              {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>
+            ))}
          </div>
+
          <button
-            type="submit"
-            disabled={loading}
-            className="px-6 rounded-lg bg-emerald-600 text-white font-medium hover:bg-emerald-700 disabled:opacity-60"
+            onClick={onApi}
+            className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-brand-700 hover:underline"
          >
-            {loading ? "检索中…" : "检索"}
+            <Code2 className="w-4 h-4" /> 开发者？查看 API 调用说明，免鉴权接入商品档案
          </button>
-        </form>
-        <button
-          onClick={onApi}
-          className="mt-4 inline-flex items-center gap-1.5 text-sm text-emerald-700 hover:underline"
-        >
-          <Code2 className="w-4 h-4" /> 开发者？查看 API 调用说明，免鉴权接入商品档案
-        </button>
-      </div>
+        </div>
+      </section>

      {error && (
-        <div className="max-w-2xl mx-auto bg-red-50 text-red-700 text-sm rounded-md px-4 py-2">
+        <div className="mx-auto mt-6 max-w-2xl rounded-xl bg-red-50 px-4 py-2.5 text-sm text-red-700">
          {error}
        </div>
      )}

-      {searched && (
-        <div className="mt-2">
-          <div className="text-sm text-gray-500 mb-2">
-            共 {total} 条结果{q ? `（关键词：${q}）` : ""}
+      {searched ? (
+        <div className="mt-8">
+          <div className="mb-3 text-sm text-gray-500">
+            共 <span className="font-semibold text-gray-700">{total}</span> 条结果
+            {q ? `（关键词：${q}）` : ""}
          </div>
          {items.length === 0 ? (
-            <div className="bg-white border rounded-lg p-8 text-center text-gray-500">
+            <div className="card p-10 text-center text-gray-500">
              <p>没有找到相关商品。</p>
              <button
                onClick={onContribute}
-                className="mt-3 inline-flex items-center gap-1.5 text-emerald-700 hover:underline"
+                className="mt-3 inline-flex items-center gap-1.5 font-medium text-brand-700 hover:underline"
              >
                <PlusCircle className="w-4 h-4" /> 你知道这个商品？去贡献档案
              </button>
            </div>
          ) : (
-            <ul className="bg-white border rounded-lg divide-y">
+            <ul className="card divide-y divide-gray-100 overflow-hidden">
              {items.map((p) => (
                <li key={p.id}>
                  <button
                    onClick={() => onOpen(p.id)}
-                    className="w-full text-left px-4 py-3 hover:bg-gray-50 flex items-center justify-between gap-4"
+                    className="group flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left transition hover:bg-brand-50/50"
                  >
-                    <div>
-                      <div className="font-medium text-gray-800">{p.name}</div>
-                      <div className="text-xs text-gray-500 mt-0.5">
+                    <div className="min-w-0">
+                      <div className="truncate font-medium text-gray-800 group-hover:text-brand-700">
+                        {p.name}
+                      </div>
+                      <div className="mt-0.5 text-xs text-gray-500">
                        {p.brand || "未知品牌"}
                        {p.gtin ? ` · ${p.gtin}` : ""}
                      </div>
                    </div>
-                    <span className="text-xs text-gray-400 text-right">
-                      <span className="block">{p.category_path || ""}</span>
-                      {p.country_of_origin ? (
-                        <span className="block text-gray-400">产地：{p.country_of_origin}</span>
-                      ) : null}
-                    </span>
+                    <div className="flex shrink-0 items-center gap-3">
+                      <span className="text-right text-xs text-gray-400">
+                        <span className="block">{p.category_path || ""}</span>
+                        {p.country_of_origin ? (
+                          <span className="block">产地：{p.country_of_origin}</span>
+                        ) : null}
+                      </span>
+                      <ArrowRight className="h-4 w-4 text-gray-300 transition group-hover:translate-x-0.5 group-hover:text-brand-500" />
+                    </div>
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
+      ) : (
+        <div className="mt-8 grid gap-4 sm:grid-cols-3">
+          {FEATURES.map(({ icon: Icon, title, desc }) => (
+            <div key={title} className="card p-5 transition hover:shadow-card-hover">
+              <span className="grid h-10 w-10 place-items-center rounded-xl bg-brand-50 text-brand-600">
+                <Icon className="h-5 w-5" />
+              </span>
+              <h3 className="mt-3 font-semibold text-gray-800">{title}</h3>
+              <p className="mt-1 text-sm leading-relaxed text-gray-500">{desc}</p>
+            </div>
+          ))}
+        </div>
      )}
    </div>
  );
@@ -28,11 +28,11 @@ export default function ProductView({ id, onBack }: { id: string; onBack: () =>
        <button onClick={onBack} className="text-sm text-gray-500 flex items-center gap-1 mb-4">
          <ArrowLeft className="w-4 h-4" /> 返回
        </button>
-        <div className="bg-red-50 text-red-700 text-sm rounded-md px-4 py-3">{error}</div>
+        <div className="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>
      </div>
    );
  }
-  if (!p) return <div className="text-gray-400">加载中…</div>;
+  if (!p) return <div className="text-gray-400 animate-pulse">加载中…</div>;

  const basisLabel: Record<string, string> = {
    per_100g: "每 100g",
@@ -45,14 +45,14 @@ export default function ProductView({ id, onBack }: { id: string; onBack: () =>

  return (
    <div>
-      <button onClick={onBack} className="text-sm text-gray-500 flex items-center gap-1 mb-4">
+      <button onClick={onBack} className="mb-4 inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
        <ArrowLeft className="w-4 h-4" /> 返回检索
      </button>

-      <div className="bg-white border rounded-lg p-5">
+      <div className="card p-6 animate-fade-up">
        <div className="flex items-start justify-between gap-4">
-          <h1 className="text-xl font-semibold text-gray-800">{p.name}</h1>
-          <span className="shrink-0 text-xs bg-emerald-50 text-emerald-700 rounded px-2 py-1">
+          <h1 className="text-2xl font-semibold tracking-tight text-gray-900">{p.name}</h1>
+          <span className="shrink-0 rounded-full border border-brand-100 bg-brand-50 px-2.5 py-1 text-xs font-medium text-brand-700">
            质量分 {Math.round(p.quality_score * 100)}
          </span>
        </div>
@@ -107,7 +107,7 @@ export default function ProductView({ id, onBack }: { id: string; onBack: () =>
      </div>

      {p.specs && p.specs.length > 0 && (
-        <div className="bg-white border rounded-lg p-5 mt-4">
+        <div className="card p-6 mt-4">
          <h2 className="font-medium text-gray-700 mb-2">规格参数</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
            {p.specs.map((s) => (
@@ -124,7 +124,7 @@ export default function ProductView({ id, onBack }: { id: string; onBack: () =>
      )}

      {nutriEntries.length > 0 && (
-        <div className="bg-white border rounded-lg p-5 mt-4">
+        <div className="card p-6 mt-4">
          <h2 className="font-medium text-gray-700 mb-2">
            营养成分
            {p.nutrition_basis ? `（${basisLabel[p.nutrition_basis] || p.nutrition_basis}）` : ""}
@@ -10,7 +10,36 @@ body,

 body {
  margin: 0;
-  background: #f3f4f6;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
+  color: #1f2937;
+  font-family: theme("fontFamily.sans");
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  background-color: #f6f8f7;
+  background-image:
+    radial-gradient(60rem 60rem at 100% -10%, rgba(16, 185, 129, 0.10), transparent 60%),
+    radial-gradient(50rem 50rem at -10% 0%, rgba(45, 212, 191, 0.10), transparent 55%);
+  background-attachment: fixed;
+}
+
+@layer components {
+  .card {
+    @apply bg-white rounded-2xl border border-gray-100;
+    box-shadow: theme("boxShadow.card");
+  }
+
+  .input {
+    @apply w-full rounded-xl border border-gray-200 bg-white px-3.5 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 transition focus:outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-500/10;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-1.5 rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700 active:bg-brand-800 disabled:opacity-60;
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100;
+  }
+
+  .chip {
+    @apply inline-flex items-center gap-1 rounded-full border border-gray-200 bg-white/70 px-3 py-1 text-xs font-medium text-gray-600 transition hover:border-brand-300 hover:text-brand-700 hover:bg-brand-50;
+  }
 }
@@ -1,6 +1,55 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
-  theme: { extend: {} },
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: "#ecfdf5",
+          100: "#d1fae5",
+          200: "#a7f3d0",
+          300: "#6ee7b7",
+          400: "#34d399",
+          500: "#10b981",
+          600: "#059669",
+          700: "#047857",
+          800: "#065f46",
+          900: "#064e3b",
+        },
+      },
+      fontFamily: {
+        sans: [
+          "Inter",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica Neue",
+          "Arial",
+          "PingFang SC",
+          "Microsoft YaHei",
+          "sans-serif",
+        ],
+      },
+      boxShadow: {
+        card: "0 1px 2px rgba(16,24,40,0.04), 0 4px 16px -8px rgba(16,24,40,0.10)",
+        "card-hover": "0 10px 30px -10px rgba(16,24,40,0.18)",
+        glow: "0 12px 40px -12px rgba(5,150,105,0.45)",
+      },
+      borderRadius: {
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+      },
+      keyframes: {
+        "fade-up": {
+          "0%": { opacity: "0", transform: "translateY(8px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+      },
+      animation: {
+        "fade-up": "fade-up 0.4s ease-out both",
+      },
+    },
+  },
  plugins: [],
 };