feat(public-frontend): 新增联系我们页面

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

ingestion/opengoods/adapters/bypos.py

@@ -0,0 +1,116 @@
+"""Adapter for the bypos-collector output (central product library zc.bypos.net).
+
+The ``bypos-collector`` tool (see ``tools/bypos-collector``) queries the same
+central product library that the 云店 POS uses when adding a product by barcode,
+and writes one JSON object per line (JSONL) with these fields::
+
+    barcode name spec unit area manufacturer license
+    in_price sell_price status retmsg fetched_at source
+
+This module turns one such record into the internal product shape consumed by
+:func:`opengoods.etl.load.load_bypos_record`. It is a pure function (no DB, no
+network) so it is easy to unit-test.
+
+The central library is a Chinese retail catalogue: it provides 品名/规格/单位/
+产地/厂商/建议价 but **not** ingredients or nutrition, so no ``food`` block is
+produced.
+"""
+
+from __future__ import annotations
+
+from decimal import Decimal, InvalidOperation
+
+from opengoods.etl.transform import _clamp, is_valid_gtin, parse_quantity
+from opengoods.units import UnitError, normalize
+
+SOURCE_NAME = "bypos中心库"
+SOURCE_HOMEPAGE = "https://zc.bypos.net"
+# Vendor catalogue data; not an open-licensed dataset. Display facts only.
+SOURCE_LICENSE = "proprietary"
+SOURCE_TRUST = 0.6
+
+
+def _to_price(text: str | None) -> Decimal | None:
+    """Parse a price string to a positive Decimal, or None for empty/zero."""
+    if not text:
+        return None
+    try:
+        amount = Decimal(str(text).strip())
+    except (InvalidOperation, ValueError):
+        return None
+    if amount <= 0:
+        return None
+    return amount
+
+
+def _net_content(spec: str | None) -> tuple[Decimal | None, str | None, Decimal | None]:
+    """Best-effort parse a spec like '500mL'/'5kg' to (value, unit, canonical).
+
+    Packaging-style specs ('20支', '1X24', '盒') have no mass/volume unit and
+    yield ``(None, None, None)`` — the raw spec is kept in attributes instead.
+    """
+    parsed = parse_quantity(spec or "")
+    if not parsed:
+        return None, None, None
+    value, unit = parsed
+    try:
+        norm = normalize(value, unit)
+    except UnitError:
+        return None, None, None
+    return norm.value, norm.unit, norm.canonical_value
+
+
+def transform_bypos(rec: dict) -> dict | None:
+    """Transform one bypos-collector JSONL record into an internal product dict.
+
+    Returns ``None`` for non-hit rows or rows without a usable name.
+    """
+    if rec.get("status") != "hit":
+        return None
+    name = (rec.get("name") or "").strip()
+    if not name:
+        return None
+
+    barcode = str(rec.get("barcode") or "").strip()
+    gtin = barcode if barcode and is_valid_gtin(barcode) else None
+
+    net_value, net_unit, net_canonical = _net_content(rec.get("spec"))
+
+    spec = (rec.get("spec") or "").strip()
+    pack_unit = (rec.get("unit") or "").strip()
+    area = (rec.get("area") or "").strip()
+    manufacturer = (rec.get("manufacturer") or "").strip() or None
+    license_no = (rec.get("license") or "").strip()
+    in_price = _to_price(rec.get("in_price"))
+    sell_price = _to_price(rec.get("sell_price"))
+
+    attributes: dict[str, object] = {}
+    if spec:
+        attributes["spec"] = spec
+    if pack_unit:
+        attributes["pack_unit"] = pack_unit
+    if area:
+        attributes["origin_area"] = area
+    if license_no:
+        attributes["production_license"] = license_no
+    if in_price is not None:
+        attributes["suggested_in_price"] = float(in_price)
+    if sell_price is not None:
+        attributes["suggested_retail_price"] = float(sell_price)
+
+    # Domestic GS1-China barcodes (69x) are China-made; area is a province/city,
+    # kept separately in attributes.origin_area.
+    country = "中国" if gtin and gtin.startswith("69") else None
+
+    return {
+        "gtin": gtin,
+        "name": name,
+        "manufacturer": manufacturer,
+        "net_content_value": net_value,
+        "net_content_unit": _clamp(net_unit, 16),
+        "net_content_canonical": net_canonical,
+        "country_of_origin": country,
+        "attributes": attributes,
+        "msrp": sell_price,
+        "fetched_at": (rec.get("fetched_at") or "").strip() or None,
+    }

ingestion/opengoods/etl/load.py

@@ -14,6 +14,10 @@ from typing import Any
 import psycopg
 from psycopg.types.json import Jsonb
 
+from opengoods.adapters.bypos import SOURCE_HOMEPAGE as SOURCE_HOMEPAGE_BYPOS
+from opengoods.adapters.bypos import SOURCE_LICENSE as SOURCE_LICENSE_BYPOS
+from opengoods.adapters.bypos import SOURCE_NAME as SOURCE_NAME_BYPOS
+from opengoods.adapters.bypos import SOURCE_TRUST as SOURCE_TRUST_BYPOS
 from opengoods.adapters.openfoodfacts import OFF_LICENSE, SOURCE_NAME
 from opengoods.etl.quality import update_quality
 
@@ -73,6 +77,23 @@ def _ensure_brand(conn: psycopg.Connection, name: str | None) -> str | None:
     return row[0]
 
 
+def _ensure_manufacturer(
+    conn: psycopg.Connection, name: str | None, country: str | None = None
+) -> str | None:
+    if not name:
+        return None
+    row = conn.execute(
+        """
+        INSERT INTO manufacturer (name, normalized_name, country)
+        VALUES (%s, %s, %s)
+        ON CONFLICT (normalized_name) DO UPDATE SET name = manufacturer.name
+        RETURNING id
+        """,
+        (name, _normalize_brand(name), country),
+    ).fetchone()
+    return row[0]
+
+
 def _category_id(conn: psycopg.Connection, path: str | None) -> tuple[str | None, str | None]:
     if not path:
         return None, None
@@ -218,6 +239,140 @@ def load_record_safe(
         return False
 
 
+def ensure_bypos_source(conn: psycopg.Connection) -> str:
+    """Upsert the bypos central-library source row and return its id."""
+    return ensure_source_named(
+        conn,
+        SOURCE_NAME_BYPOS,
+        SOURCE_HOMEPAGE_BYPOS,
+        SOURCE_LICENSE_BYPOS,
+        SOURCE_TRUST_BYPOS,
+    )
+
+
+def load_bypos_record(
+    conn: psycopg.Connection, rec: dict[str, Any], source_id: str, raw: dict
+) -> str:
+    """Upsert one transformed bypos record; return the product id.
+
+    Unlike OFF records these have no ingredients/nutrition, so no ``food_detail``
+    row is written. The suggested retail price (if any) is stored as a CNY MSRP
+    snapshot, and provenance/MSRP rows are keyed by source so a re-import
+    refreshes rather than duplicates them.
+    """
+    manufacturer_id = _ensure_manufacturer(
+        conn, rec.get("manufacturer"), rec.get("country_of_origin")
+    )
+    attrs = rec.get("attributes") or {}
+    fields = ["name", "net_content", "country_of_origin"]
+    if manufacturer_id:
+        fields.append("manufacturer")
+    if attrs:
+        fields.append("attributes")
+
+    if rec.get("gtin"):
+        fields.append("gtin")
+        prod = conn.execute(
+            """
+            INSERT INTO product (gtin, name, manufacturer_id,
+                net_content_value, net_content_unit, net_content_canonical,
+                country_of_origin, attributes)
+            VALUES (%s,%s,%s,%s,%s,%s,%s,%s)
+            ON CONFLICT (gtin) WHERE gtin IS NOT NULL DO UPDATE SET
+                name = EXCLUDED.name,
+                manufacturer_id = COALESCE(EXCLUDED.manufacturer_id, product.manufacturer_id),
+                net_content_value = COALESCE(EXCLUDED.net_content_value, product.net_content_value),
+                net_content_unit = COALESCE(EXCLUDED.net_content_unit, product.net_content_unit),
+                net_content_canonical = COALESCE(
+                    EXCLUDED.net_content_canonical, product.net_content_canonical),
+                country_of_origin = COALESCE(EXCLUDED.country_of_origin, product.country_of_origin),
+                attributes = product.attributes || EXCLUDED.attributes
+            RETURNING id
+            """,
+            (
+                rec["gtin"],
+                rec["name"],
+                manufacturer_id,
+                rec.get("net_content_value"),
+                rec.get("net_content_unit"),
+                rec.get("net_content_canonical"),
+                rec.get("country_of_origin"),
+                Jsonb(attrs),
+            ),
+        ).fetchone()
+    else:
+        prod = conn.execute(
+            """
+            INSERT INTO product (name, manufacturer_id,
+                net_content_value, net_content_unit, net_content_canonical,
+                country_of_origin, attributes)
+            VALUES (%s,%s,%s,%s,%s,%s,%s)
+            RETURNING id
+            """,
+            (
+                rec["name"],
+                manufacturer_id,
+                rec.get("net_content_value"),
+                rec.get("net_content_unit"),
+                rec.get("net_content_canonical"),
+                rec.get("country_of_origin"),
+                Jsonb(attrs),
+            ),
+        ).fetchone()
+    product_id = prod[0]
+
+    # Refresh this source's MSRP snapshot (suggested retail price, CNY).
+    conn.execute(
+        "DELETE FROM product_msrp WHERE product_id = %s AND source_id = %s",
+        (product_id, source_id),
+    )
+    if rec.get("msrp") is not None:
+        conn.execute(
+            """
+            INSERT INTO product_msrp (product_id, amount, currency, region, source_id, source_url)
+            VALUES (%s,%s,'CNY','CN',%s,%s)
+            """,
+            (product_id, rec["msrp"], source_id, SOURCE_HOMEPAGE_BYPOS),
+        )
+        fields.append("msrp")
+
+    # Refresh this source's provenance row (one per source for idempotency).
+    conn.execute(
+        "DELETE FROM product_source WHERE product_id = %s AND source_id = %s",
+        (product_id, source_id),
+    )
+    conn.execute(
+        """
+        INSERT INTO product_source (product_id, source_id, url, fields, fetched_at, raw)
+        VALUES (%s,%s,%s,%s, COALESCE(%s::timestamptz, now()), %s)
+        """,
+        (
+            product_id,
+            source_id,
+            SOURCE_HOMEPAGE_BYPOS,
+            fields,
+            rec.get("fetched_at"),
+            Jsonb(_jsonable(raw)),
+        ),
+    )
+
+    update_quality(conn, product_id)
+    return product_id
+
+
+def load_bypos_record_safe(
+    conn: psycopg.Connection, rec: dict[str, Any], source_id: str, raw: dict
+) -> bool:
+    """Load one bypos record inside a savepoint (see :func:`load_record_safe`)."""
+    try:
+        with conn.transaction():
+            load_bypos_record(conn, rec, source_id, raw)
+        return True
+    except Exception as exc:  # noqa: BLE001 - per-record isolation is intentional
+        logger.warning("skipping bypos record gtin=%s: %s", rec.get("gtin"), exc)
+        return False
+
+
 def _jsonable(raw: dict) -> dict:
     """Drop values that are not JSON-serializable from a raw record."""
     try:

ingestion/opengoods/jobs/import_bypos.py

@@ -0,0 +1,77 @@
+"""Import products collected by the bypos-collector tool into OpenGoods.
+
+The ``tools/bypos-collector`` program writes one product per line (JSONL). This
+job reads such a file, transforms each ``hit`` record into the internal product
+shape, and upserts it into the database under the ``bypos中心库`` source with
+field-level provenance.
+
+Usage::
+
+    python -m opengoods.jobs.import_bypos --input products.jsonl
+    python -m opengoods.jobs.import_bypos --input products.jsonl --limit 500
+
+Re-running is safe: products are upserted by GTIN and the source's MSRP/
+provenance rows are refreshed rather than duplicated.
+"""
+
+from __future__ import annotations
+
+import argparse
+import gzip
+import json
+import sys
+from collections.abc import Iterator
+
+import psycopg
+
+from opengoods.adapters.bypos import transform_bypos
+from opengoods.etl.load import default_dsn, ensure_bypos_source, load_bypos_record_safe
+
+
+def _read_jsonl(path: str) -> Iterator[dict]:
+    opener = gzip.open if path.endswith(".gz") else open
+    with opener(path, "rt", encoding="utf-8") as fh:
+        for line in fh:
+            line = line.strip()
+            if not line:
+                continue
+            try:
+                yield json.loads(line)
+            except json.JSONDecodeError:
+                continue
+
+
+def run(args: argparse.Namespace) -> int:
+    loaded = skipped = errored = 0
+    with psycopg.connect(args.dsn, autocommit=False) as conn:
+        source_id = ensure_bypos_source(conn)
+        yielded = 0
+        for raw in _read_jsonl(args.input):
+            if args.limit and yielded >= args.limit:
+                break
+            rec = transform_bypos(raw)
+            if rec is None:
+                skipped += 1
+                continue
+            yielded += 1
+            if load_bypos_record_safe(conn, rec, source_id, raw):
+                loaded += 1
+            else:
+                errored += 1
+        conn.commit()
+    print(f"loaded={loaded} skipped={skipped} errored={errored}")
+    return 0
+
+
+def main(argv: list[str] | None = None) -> int:
+    parser = argparse.ArgumentParser(description="Import bypos-collector JSONL into OpenGoods")
+    parser.add_argument(
+        "--input", required=True, help="path to a bypos-collector JSONL (.jsonl or .jsonl.gz)"
+    )
+    parser.add_argument("--limit", type=int, default=0, help="max hit records to load (0 = all)")
+    parser.add_argument("--dsn", default=default_dsn(), help="PostgreSQL DSN")
+    return run(parser.parse_args(argv))
+
+
+if __name__ == "__main__":
+    sys.exit(main())

ingestion/tests/test_bypos.py

@@ -0,0 +1,155 @@
+"""Tests for the bypos-collector adapter/transform and DB loader.
+
+The pure-function tests run anywhere; the DB roundtrip is skipped automatically
+when no database is reachable or migrations are not applied.
+"""
+
+from __future__ import annotations
+
+from decimal import Decimal
+
+import pytest
+
+from opengoods.adapters.bypos import transform_bypos
+
+psycopg = pytest.importorskip("psycopg")
+
+# A real central-library "hit" row as emitted by the collector.
+HIT = {
+    "barcode": "6901028941068",
+    "name": "泰山合悦",
+    "spec": "20支",
+    "unit": "盒",
+    "area": "广东",
+    "manufacturer": "",
+    "license": "",
+    "in_price": "22.50",
+    "sell_price": "28.00",
+    "status": "hit",
+    "retmsg": "获取商品信息成功",
+    "fetched_at": "2026-06-24T02:08:34Z",
+    "source": "zc.bypos.net",
+}
+
+# A hit with a real mass/volume spec that should normalize to net content.
+HIT_VOLUME = {
+    "barcode": "6920459905012",
+    "name": "康师傅冰红茶490ml",
+    "spec": "490毫升",
+    "unit": "瓶",
+    "area": "浙江杭州",
+    "manufacturer": "",
+    "license": "",
+    "in_price": "2.20",
+    "sell_price": "3.00",
+    "status": "hit",
+    "fetched_at": "2026-06-24T02:08:34Z",
+    "source": "zc.bypos.net",
+}
+
+
+def test_transform_skips_non_hit():
+    assert transform_bypos({**HIT, "status": "miss", "name": ""}) is None
+    assert transform_bypos({**HIT, "status": "invalid"}) is None
+
+
+def test_transform_skips_missing_name():
+    assert transform_bypos({**HIT, "name": "  "}) is None
+
+
+def test_transform_packaging_spec_kept_raw():
+    rec = transform_bypos(HIT)
+    assert rec is not None
+    assert rec["gtin"] == "6901028941068"
+    assert rec["name"] == "泰山合悦"
+    # '20支' is a count, not mass/volume -> no net_content, raw spec retained.
+    assert rec["net_content_value"] is None
+    assert rec["net_content_unit"] is None
+    assert rec["attributes"]["spec"] == "20支"
+    assert rec["attributes"]["pack_unit"] == "盒"
+    assert rec["attributes"]["origin_area"] == "广东"
+    assert rec["attributes"]["suggested_in_price"] == 22.5
+    assert rec["attributes"]["suggested_retail_price"] == 28.0
+    assert rec["msrp"] == Decimal("28.00")
+    assert rec["country_of_origin"] == "中国"
+
+
+def test_transform_volume_spec_normalized():
+    rec = transform_bypos(HIT_VOLUME)
+    assert rec is not None
+    assert rec["net_content_value"] == Decimal("490")
+    assert rec["net_content_unit"] == "ml"
+    assert rec["net_content_canonical"] == Decimal("490")
+    assert rec["attributes"]["origin_area"] == "浙江杭州"
+
+
+def test_transform_zero_price_dropped():
+    rec = transform_bypos({**HIT, "in_price": "0.00", "sell_price": "0.00"})
+    assert rec is not None
+    assert rec["msrp"] is None
+    assert "suggested_in_price" not in rec["attributes"]
+    assert "suggested_retail_price" not in rec["attributes"]
+
+
+def test_transform_invalid_barcode_no_gtin():
+    rec = transform_bypos({**HIT, "barcode": "123"})
+    assert rec is not None
+    assert rec["gtin"] is None
+    assert rec["country_of_origin"] is None
+
+
+# --- DB roundtrip (skipped without a database) ---------------------------------
+
+
+@pytest.fixture()
+def conn():
+    from opengoods.etl.load import default_dsn
+
+    try:
+        c = psycopg.connect(default_dsn(), connect_timeout=3)
+    except psycopg.OperationalError as exc:  # pragma: no cover - env dependent
+        pytest.skip(f"no database available: {exc}")
+    has_product = c.execute("SELECT to_regclass('public.product') IS NOT NULL").fetchone()[0]
+    if not has_product:
+        c.close()
+        pytest.skip("migrations not applied")
+    yield c
+    c.rollback()
+    c.close()
+
+
+def test_load_bypos_roundtrip(conn):
+    from opengoods.etl.load import ensure_bypos_source, load_bypos_record
+
+    source_id = ensure_bypos_source(conn)
+    rec = transform_bypos(HIT_VOLUME)
+    product_id = load_bypos_record(conn, rec, source_id, HIT_VOLUME)
+
+    row = conn.execute(
+        "SELECT name, gtin, net_content_unit, country_of_origin, attributes ->> 'pack_unit' "
+        "FROM product WHERE id = %s",
+        (product_id,),
+    ).fetchone()
+    assert row[0] == "康师傅冰红茶490ml"
+    assert row[1] == "6920459905012"
+    assert row[2] == "ml"
+    assert row[3] == "中国"
+    assert row[4] == "瓶"
+
+    msrp = conn.execute(
+        "SELECT amount, currency FROM product_msrp WHERE product_id = %s AND source_id = %s",
+        (product_id, source_id),
+    ).fetchone()
+    assert msrp[0] == Decimal("3.00")
+    assert msrp[1] == "CNY"
+
+    # Re-import is idempotent: still one MSRP and one provenance row per source.
+    load_bypos_record(conn, rec, source_id, HIT_VOLUME)
+    counts = conn.execute(
+        "SELECT (SELECT count(*) FROM product_msrp WHERE product_id=%s AND source_id=%s), "
+        "(SELECT count(*) FROM product_source WHERE product_id=%s AND source_id=%s)",
+        (product_id, source_id, product_id, source_id),
+    ).fetchone()
+    assert counts == (1, 1)
+
+    conn.rollback()

public-frontend/index.html

@@ -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>

public-frontend/src/App.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Boxes, Search, PlusCircle, Code2, KeyRound } from "lucide-react";
+import { Boxes, Search, PlusCircle, Code2, KeyRound, Headset } from "lucide-react";
 import Home from "./components/Home";
 import ProductView from "./components/ProductView";
 import Contribute from "./components/Contribute";
 import ApiDocs from "./components/ApiDocs";
 import Account from "./components/Account";
+import Contact from "./components/Contact";
 import { api } from "./api";
 
 type View =
@@ -12,7 +13,16 @@ type View =
   | { name: "product"; id: string }
   | { name: "contribute" }
   | { name: "api" }
-  | { name: "account" };
+  | { name: "account" }
+  | { name: "contact" };
+
+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 },
+  { key: "contact", label: "联系我们", icon: Headset },
+];
 
 export default function App() {
   const [view, setView] = useState<View>({ name: "home" });
@@ -27,58 +37,50 @@ 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 })}
             onContribute={() => setView({ name: "contribute" })}
-            onApi={() => setView({ name: "api" })}
           />
         )}
         {view.name === "product" && (
@@ -89,24 +91,36 @@ export default function App() {
         )}
         {view.name === "api" && <ApiDocs onRegister={() => setView({ name: "account" })} />}
         {view.name === "account" && <Account />}
+        {view.name === "contact" && <Contact />}
       </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>
+            <button
+              onClick={() => setView({ name: "contact" })}
+              className="ml-1 text-brand-600 font-medium hover:underline"
+            >
+              联系我们
+            </button>
+          </p>
+          <div className="mt-3">
             <a
               href="https://beian.miit.gov.cn/"
               target="_blank"

public-frontend/src/components/Account.tsx

@@ -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>

public-frontend/src/components/ApiDocs.tsx

@@ -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">

public-frontend/src/components/Contact.tsx

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { Phone, Mail, Globe, MessageSquare, Copy, Check, Headset } from "lucide-react";
+
+type Channel = {
+  key: string;
+  icon: typeof Phone;
+  label: string;
+  value: string;
+  href?: string;
+  copy: string;
+};
+
+const CHANNELS: Channel[] = [
+  {
+    key: "phone",
+    icon: Phone,
+    label: "电话",
+    value: "188 6595 7520",
+    href: "tel:18865957520",
+    copy: "18865957520",
+  },
+  {
+    key: "email",
+    icon: Mail,
+    label: "邮箱",
+    value: "1115084741@qq.com",
+    href: "mailto:1115084741@qq.com",
+    copy: "1115084741@qq.com",
+  },
+  {
+    key: "site",
+    icon: Globe,
+    label: "官网",
+    value: "www.wenyaoyu.com",
+    href: "https://www.wenyaoyu.com",
+    copy: "https://www.wenyaoyu.com",
+  },
+  {
+    key: "wechat",
+    icon: MessageSquare,
+    label: "微信",
+    value: "s-b-m-y",
+    copy: "s-b-m-y",
+  },
+];
+
+export default function Contact() {
+  const [copied, setCopied] = useState<string | null>(null);
+
+  async function copy(channel: Channel) {
+    try {
+      await navigator.clipboard.writeText(channel.copy);
+      setCopied(channel.key);
+      setTimeout(() => setCopied((k) => (k === channel.key ? null : k)), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto animate-fade-up">
+      <div className="text-center">
+        <span className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-white shadow-glow">
+          <Headset className="w-7 h-7" />
+        </span>
+        <h1 className="mt-4 text-2xl font-semibold tracking-tight text-gray-900">联系我们</h1>
+        <p className="mx-auto mt-2 max-w-xl text-sm text-gray-500">
+          欢迎交流与对接合作。无论是数据接入、商务合作还是问题反馈，都可以通过以下任一方式联系我们。
+        </p>
+      </div>
+
+      <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {CHANNELS.map((c) => {
+          const Icon = c.icon;
+          return (
+            <div key={c.key} className="card p-5 flex items-center gap-4">
+              <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-brand-50 text-brand-600">
+                <Icon className="w-5 h-5" />
+              </span>
+              <div className="min-w-0 flex-1">
+                <div className="text-xs font-medium text-gray-400">{c.label}</div>
+                {c.href ? (
+                  <a
+                    href={c.href}
+                    target={c.key === "site" ? "_blank" : undefined}
+                    rel={c.key === "site" ? "noreferrer" : undefined}
+                    className="block truncate font-medium text-gray-800 hover:text-brand-600 hover:underline"
+                  >
+                    {c.value}
+                  </a>
+                ) : (
+                  <div className="truncate font-medium text-gray-800">{c.value}</div>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={() => copy(c)}
+                title="复制"
+                className="shrink-0 grid h-9 w-9 place-items-center rounded-lg border border-gray-200 text-gray-400 transition hover:bg-gray-50 hover:text-brand-600"
+              >
+                {copied === c.key ? (
+                  <Check className="w-4 h-4 text-brand-600" />
+                ) : (
+                  <Copy className="w-4 h-4" />
+                )}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

public-frontend/src/components/Contribute.tsx

@@ -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">

public-frontend/src/components/Home.tsx

@@ -1,16 +1,34 @@
 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,
-  onApi,
 }: {
   onOpen: (id: string) => void;
   onContribute: () => void;
-  onApi: () => void;
 }) {
   const [q, setQ] = useState("");
   const [items, setItems] = useState<ProductSummary[]>([]);
@@ -19,12 +37,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 +56,116 @@ 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"
-          >
-            {loading ? "检索中…" : "检索"}
-          </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>
   );

public-frontend/src/components/ProductView.tsx

@@ -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}）` : ""}

public-frontend/src/index.css

@@ -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;
+  }
 }

public-frontend/tailwind.config.js

@@ -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: [],
 };

tools/bypos-collector/README.md

@@ -62,6 +62,21 @@ GET http://zc.bypos.net/byGoodsService/byMessage.asmx/GetGoodsinfo
   `collect.go` 的 `defaultSdogID`,也可用 `-sdogid` 参数或控制台覆盖。
   **这是账号级凭证**——若本仓库对外公开,建议改为从环境变量/外部配置读取。
 
+## 导入 goods/天工库
+
+采集得到的 JSONL 用 ingestion 里的导入任务入库(只导入 `status=hit` 的记录,
+按 GTIN 去重 upsert,重复导入幂等):
+
+```bash
+cd ingestion
+python -m opengoods.jobs.import_bypos --input products.jsonl
+# 可选:--limit N 限制条数;--dsn 指定数据库
+```
+
+字段映射:`barcode→gtin`、`name→name`、`spec`(可解析的质量/体积如 500mL/5kg)
+`→net_content`、其余规格/单位/产地/许可/进价留存到 `attributes`、`sell_price→`
+CNY MSRP 快照。来源记为 `bypos中心库`,带字段级 provenance。
+
 ## 注意
 
 批量自动查询比页面逐条更"重",上游可能对账号限频。请低速、分前缀/品类分批采集。