chore(web): add WeChat domain verification file

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

.github/workflows/ci.yml

@@ -5,6 +5,10 @@ on:
     branches: [main]
   pull_request:
 
+env:
+  GO_VERSION: "1.23.12"
+  GOPROXY: "https://goproxy.cn,direct"
+
 jobs:
   go:
     name: Go (api)
@@ -25,11 +29,22 @@ jobs:
     env:
       OPENGOODS_DATABASE_URL: postgres://opengoods:opengoods@postgres:5432/opengoods?sslmode=disable
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
-      - uses: actions/setup-go@v5
+        working-directory: ${{ github.workspace }}
-        with:
+        run: |
-          go-version: "1.23"
+          git config --global --add safe.directory '*'
-          cache-dependency-path: api/go.sum
+          git init -q .
+          git remote add origin "${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}.git"
+          git -c protocol.version=2 fetch -q --no-tags --depth 1 origin "${GITHUB_REF}"
+          git checkout -q --force FETCH_HEAD
+      - name: Setup Go
+        working-directory: ${{ github.workspace }}
+        run: |
+          curl -fsSL -o /tmp/go.tgz "https://mirrors.aliyun.com/golang/go${GO_VERSION}.linux-amd64.tar.gz"
+          rm -rf /usr/local/go
+          tar -C /usr/local -xzf /tmp/go.tgz
+          echo "/usr/local/go/bin" >> "$GITHUB_PATH"
+          echo "$HOME/go/bin" >> "$GITHUB_PATH"
       - name: Apply migrations
         working-directory: .
         run: |
@@ -44,14 +59,20 @@ jobs:
   python:
     name: Python (ingestion)
     runs-on: ubuntu-latest
+    container:
+      image: nikolaik/python-nodejs:python3.12-nodejs20
     defaults:
       run:
         working-directory: ingestion
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
-      - uses: actions/setup-python@v5
+        working-directory: ${{ github.workspace }}
-        with:
+        run: |
-          python-version: "3.12"
+          git config --global --add safe.directory '*'
+          git init -q .
+          git remote add origin "${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}.git"
+          git -c protocol.version=2 fetch -q --no-tags --depth 1 origin "${GITHUB_REF}"
+          git checkout -q --force FETCH_HEAD
       - name: Install
         run: pip install -e ".[dev]"
       - name: Ruff lint
@@ -77,10 +98,21 @@ jobs:
     env:
       DBURL: postgres://opengoods:opengoods@postgres:5432/opengoods?sslmode=disable
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
-      - uses: actions/setup-go@v5
+        working-directory: ${{ github.workspace }}
-        with:
+        run: |
-          go-version: "1.23"
+          git config --global --add safe.directory '*'
+          git init -q .
+          git remote add origin "${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}.git"
+          git -c protocol.version=2 fetch -q --no-tags --depth 1 origin "${GITHUB_REF}"
+          git checkout -q --force FETCH_HEAD
+      - name: Setup Go
+        run: |
+          curl -fsSL -o /tmp/go.tgz "https://mirrors.aliyun.com/golang/go${GO_VERSION}.linux-amd64.tar.gz"
+          rm -rf /usr/local/go
+          tar -C /usr/local -xzf /tmp/go.tgz
+          echo "/usr/local/go/bin" >> "$GITHUB_PATH"
+          echo "$HOME/go/bin" >> "$GITHUB_PATH"
       - name: Install golang-migrate
         run: go install -tags 'postgres' github.com/golang-migrate/migrate/v4/cmd/migrate@v4.18.1
       - name: Migrate up

api/cmd/server/main.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/jackc/pgx/v5/pgxpool"
 
+	"github.com/baicai2026-baicai/goods/api/internal/cache"
 	"github.com/baicai2026-baicai/goods/api/internal/config"
 	"github.com/baicai2026-baicai/goods/api/internal/handler"
 	"github.com/baicai2026-baicai/goods/api/internal/publicweb"
@@ -36,7 +37,12 @@ func main() {
 	if !limiter.Enabled() {
 		log.Print("warning: Redis not configured; public API rate limiting disabled")
 	}
-	h := handler.New(store.New(pool), publicweb.Dist()).
+
+	readCache := cache.New(cfg.RedisURL)
+	if !readCache.Enabled() {
+		log.Print("warning: Redis not configured; public API read cache disabled")
+	}
+	h := handler.New(store.New(pool).WithCache(readCache), publicweb.Dist()).
 		WithRateLimit(limiter, cfg.AnonRateLimitPerMin).
 		WithQuotas(cfg.AnonTotalQuota, cfg.RegisteredRateLimitPerMin, cfg.RegisteredQuotaTotal)
 

api/internal/cache/cache.go

@@ -0,0 +1,126 @@
+// Package cache is a Redis-backed, fail-open read cache for the public API.
+//
+// It caches hot product details and search results so repeated reads avoid
+// PostgreSQL. Like the ratelimit package, every operation fails open: if Redis
+// is unavailable or misconfigured the caller simply falls back to the database,
+// so the cache can never take the API down or serve stale data after Redis loss.
+//
+// Invalidation is global and O(1): keys are namespaced by an epoch counter
+// stored in Redis (og:cache:epoch). The Python ingestion bumps that counter
+// after a write run, which logically invalidates every cached entry at once
+// while old keys age out via their TTL. The epoch is read at most once per
+// refresh interval per process, so it adds no per-request round trip.
+package cache
+
+import (
+	"context"
+	"encoding/json"
+	"errors"
+	"log"
+	"strconv"
+	"sync"
+	"time"
+
+	"github.com/redis/go-redis/v9"
+)
+
+// epochKey is the Redis key holding the global cache generation counter.
+const epochKey = "og:cache:epoch"
+
+// epochRefresh bounds how often a process re-reads the epoch from Redis.
+const epochRefresh = 10 * time.Second
+
+// opTimeout caps any single Redis operation so a slow backend never blocks a
+// request beyond this; on timeout the cache fails open.
+const opTimeout = 150 * time.Millisecond
+
+// Cache wraps a Redis client. A nil-backed Cache (Redis unconfigured) disables
+// caching: every Get misses and every Set is a no-op.
+type Cache struct {
+	rdb *redis.Client
+
+	mu         sync.RWMutex
+	epoch      int64
+	epochSetAt time.Time
+	epochOK    bool
+}
+
+// New builds a Cache from a redis:// URL. On a parse error it logs and returns a
+// disabled (fail-open) cache so the server still boots.
+func New(redisURL string) *Cache {
+	opt, err := redis.ParseURL(redisURL)
+	if err != nil {
+		log.Printf("cache: invalid redis url %q: %v (caching disabled)", redisURL, err)
+		return &Cache{}
+	}
+	return &Cache{rdb: redis.NewClient(opt)}
+}
+
+// Enabled reports whether a Redis backend is configured.
+func (c *Cache) Enabled() bool { return c != nil && c.rdb != nil }
+
+// epochNow returns the current cache generation, reading it from Redis at most
+// once per epochRefresh. On any Redis error it keeps the last known value and
+// throttles re-reads so a down backend cannot slow the hot path.
+func (c *Cache) epochNow(ctx context.Context) int64 {
+	c.mu.RLock()
+	if c.epochOK && time.Since(c.epochSetAt) < epochRefresh {
+		e := c.epoch
+		c.mu.RUnlock()
+		return e
+	}
+	c.mu.RUnlock()
+
+	cctx, cancel := context.WithTimeout(ctx, opTimeout)
+	defer cancel()
+	n, err := c.rdb.Get(cctx, epochKey).Int64()
+
+	c.mu.Lock()
+	defer c.mu.Unlock()
+	switch {
+	case err == nil:
+		c.epoch = n
+	case errors.Is(err, redis.Nil):
+		c.epoch = 0
+	}
+	c.epochSetAt = time.Now()
+	c.epochOK = true
+	return c.epoch
+}
+
+// key namespaces a logical suffix under the current epoch.
+func (c *Cache) key(ctx context.Context, suffix string) string {
+	return "og:v" + strconv.FormatInt(c.epochNow(ctx), 10) + ":" + suffix
+}
+
+// GetJSON unmarshals the cached value for suffix into dest and reports a hit.
+// Any miss, decode error, or Redis error returns false (fail-open).
+func (c *Cache) GetJSON(ctx context.Context, suffix string, dest any) bool {
+	if !c.Enabled() {
+		return false
+	}
+	k := c.key(ctx, suffix)
+	cctx, cancel := context.WithTimeout(ctx, opTimeout)
+	defer cancel()
+	b, err := c.rdb.Get(cctx, k).Bytes()
+	if err != nil {
+		return false
+	}
+	return json.Unmarshal(b, dest) == nil
+}
+
+// SetJSON stores val (JSON-encoded) for suffix with the given TTL. Best effort:
+// marshal or Redis errors are ignored.
+func (c *Cache) SetJSON(ctx context.Context, suffix string, val any, ttl time.Duration) {
+	if !c.Enabled() {
+		return
+	}
+	b, err := json.Marshal(val)
+	if err != nil {
+		return
+	}
+	k := c.key(ctx, suffix)
+	cctx, cancel := context.WithTimeout(ctx, opTimeout)
+	defer cancel()
+	_ = c.rdb.Set(cctx, k, b, ttl).Err()
+}

api/internal/cache/cache_test.go

@@ -0,0 +1,84 @@
+package cache
+
+import (
+	"context"
+	"fmt"
+	"os"
+	"testing"
+	"time"
+)
+
+// TestDisabledFailsOpen verifies a Cache without a Redis backend never panics,
+// always misses, and silently drops writes.
+func TestDisabledFailsOpen(t *testing.T) {
+	c := New("not-a-valid-url") // parse error => disabled
+	if c.Enabled() {
+		t.Fatal("expected cache to be disabled for invalid url")
+	}
+	c.SetJSON(context.Background(), "k", map[string]int{"a": 1}, time.Minute)
+	var dst map[string]int
+	if c.GetJSON(context.Background(), "k", &dst) {
+		t.Fatalf("disabled cache must always miss, got %+v", dst)
+	}
+}
+
+func testCache(t *testing.T) *Cache {
+	t.Helper()
+	url := os.Getenv("OPENGOODS_REDIS_URL")
+	if url == "" {
+		url = "redis://localhost:6379/0"
+	}
+	c := New(url)
+	if !c.Enabled() {
+		t.Skip("redis not configured")
+	}
+	ctx, cancel := context.WithTimeout(context.Background(), time.Second)
+	defer cancel()
+	if err := c.rdb.Ping(ctx).Err(); err != nil {
+		t.Skipf("redis not reachable: %v", err)
+	}
+	return c
+}
+
+// TestRoundTrip stores then reads a value back.
+func TestRoundTrip(t *testing.T) {
+	c := testCache(t)
+	ctx := context.Background()
+	suffix := fmt.Sprintf("test:rt:%d", time.Now().UnixNano())
+
+	c.SetJSON(ctx, suffix, map[string]any{"name": "foo", "n": float64(3)}, time.Minute)
+	got := map[string]any{}
+	if !c.GetJSON(ctx, suffix, &got) {
+		t.Fatal("expected cache hit after set")
+	}
+	if got["name"] != "foo" || got["n"] != float64(3) {
+		t.Fatalf("unexpected payload: %+v", got)
+	}
+}
+
+// TestEpochInvalidation verifies that bumping the epoch counter logically drops
+// every previously cached entry.
+func TestEpochInvalidation(t *testing.T) {
+	c := testCache(t)
+	ctx := context.Background()
+	suffix := fmt.Sprintf("test:epoch:%d", time.Now().UnixNano())
+
+	c.SetJSON(ctx, suffix, map[string]int{"v": 1}, time.Minute)
+	var dst map[string]int
+	if !c.GetJSON(ctx, suffix, &dst) {
+		t.Fatal("expected hit before epoch bump")
+	}
+
+	// Simulate an ingestion write bumping the global epoch.
+	if err := c.rdb.Incr(ctx, epochKey).Err(); err != nil {
+		t.Fatalf("incr epoch: %v", err)
+	}
+	// Force the process to re-read the epoch rather than use its cached value.
+	c.mu.Lock()
+	c.epochOK = false
+	c.mu.Unlock()
+
+	if c.GetJSON(ctx, suffix, &dst) {
+		t.Fatal("entry should be invisible after epoch bump")
+	}
+}

api/internal/store/store.go

@@ -4,21 +4,35 @@ package store
 
 import (
 	"context"
+	"crypto/sha1"
+	"encoding/hex"
 	"encoding/json"
 	"errors"
 	"strconv"
 	"strings"
+	"time"
 
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
+
+	"github.com/baicai2026-baicai/goods/api/internal/cache"
+)
+
+// Cache TTLs for the public read cache. Product details are far less volatile
+// than search result sets, so they live longer; both are also invalidated
+// wholesale whenever ingestion bumps the cache epoch.
+const (
+	productCacheTTL = 24 * time.Hour
+	searchCacheTTL  = time.Hour
 )
 
 // ErrNotFound is returned when a requested row does not exist.
 var ErrNotFound = errors.New("not found")
 
-// Store wraps a PostgreSQL connection pool.
+// Store wraps a PostgreSQL connection pool and an optional read cache.
 type Store struct {
-	pool *pgxpool.Pool
+	pool  *pgxpool.Pool
+	cache *cache.Cache
 }
 
 // New constructs a Store from an existing pgx pool.
@@ -26,6 +40,30 @@ func New(pool *pgxpool.Pool) *Store {
 	return &Store{pool: pool}
 }
 
+// WithCache attaches a Redis-backed read cache. A nil or disabled cache leaves
+// the Store reading straight from PostgreSQL.
+func (s *Store) WithCache(c *cache.Cache) *Store {
+	s.cache = c
+	return s
+}
+
+// cacheGet reads a cached JSON value into dest, reporting a hit. It is a no-op
+// miss when no cache is attached.
+func (s *Store) cacheGet(ctx context.Context, suffix string, dest any) bool {
+	if s.cache == nil {
+		return false
+	}
+	return s.cache.GetJSON(ctx, suffix, dest)
+}
+
+// cacheSet stores a JSON value when a cache is attached.
+func (s *Store) cacheSet(ctx context.Context, suffix string, val any, ttl time.Duration) {
+	if s.cache == nil {
+		return
+	}
+	s.cache.SetJSON(ctx, suffix, val, ttl)
+}
+
 // Ping verifies database connectivity.
 func (s *Store) Ping(ctx context.Context) error {
 	return s.pool.Ping(ctx)
@@ -222,6 +260,10 @@ func stringifyAttr(v any) string {
 
 // ProductByGTIN looks up an active product by any of its barcodes.
 func (s *Store) ProductByGTIN(ctx context.Context, gtin string) (*Product, error) {
+	const suffix = "prod:gtin:"
+	if cached := new(Product); s.cacheGet(ctx, suffix+gtin, cached) {
+		return cached, nil
+	}
 	row := s.pool.QueryRow(ctx, productSelect+`
  WHERE p.status = 'active'
    AND (p.gtin = $1 OR EXISTS (
@@ -238,11 +280,16 @@ func (s *Store) ProductByGTIN(ctx context.Context, gtin string) (*Product, error
 	if p.Specs, err = s.buildSpecs(ctx, p.ArchiveKind, attrs); err != nil {
 		return nil, err
 	}
+	s.cacheSet(ctx, suffix+gtin, p, productCacheTTL)
 	return p, nil
 }
 
 // ProductByID looks up a product by its UUID.
 func (s *Store) ProductByID(ctx context.Context, id string) (*Product, error) {
+	const suffix = "prod:id:"
+	if cached := new(Product); s.cacheGet(ctx, suffix+id, cached) {
+		return cached, nil
+	}
 	row := s.pool.QueryRow(ctx, productSelect+" WHERE p.id = $1", id)
 	p, attrs, err := scanProduct(row)
 	if err != nil {
@@ -254,6 +301,7 @@ func (s *Store) ProductByID(ctx context.Context, id string) (*Product, error) {
 	if p.Specs, err = s.buildSpecs(ctx, p.ArchiveKind, attrs); err != nil {
 		return nil, err
 	}
+	s.cacheSet(ctx, suffix+id, p, productCacheTTL)
 	return p, nil
 }
 
@@ -268,6 +316,11 @@ const fuzzyThreshold = "0.42"
 // similarity blended with quality_score so the best, most-complete records
 // surface first. Without a query, results are ordered by quality_score.
 func (s *Store) SearchProducts(ctx context.Context, f SearchFilters, limit, offset int) ([]ProductSummary, int, error) {
+	suffix := searchCacheSuffix(f, limit, offset)
+	if entry := new(searchCacheEntry); s.cacheGet(ctx, suffix, entry) {
+		return entry.Items, entry.Total, nil
+	}
+
 	args := []any{}
 	where := "WHERE p.status = 'active'"
 
@@ -334,7 +387,28 @@ LEFT JOIN category c ON c.id = p.category_id `
 		}
 		out = append(out, ps)
 	}
-	return out, total, rows.Err()
+	if err := rows.Err(); err != nil {
+		return nil, 0, err
+	}
+	s.cacheSet(ctx, suffix, searchCacheEntry{Items: out, Total: total}, searchCacheTTL)
+	return out, total, nil
+}
+
+// searchCacheEntry is the cached payload for a SearchProducts call.
+type searchCacheEntry struct {
+	Items []ProductSummary `json:"items"`
+	Total int              `json:"total"`
+}
+
+// searchCacheSuffix derives a stable cache key from the full filter set and
+// paging window so distinct queries never collide.
+func searchCacheSuffix(f SearchFilters, limit, offset int) string {
+	raw := strings.Join([]string{
+		f.Query, f.Category, f.Brand, f.Country,
+		strconv.Itoa(limit), strconv.Itoa(offset),
+	}, "\x1f")
+	sum := sha1.Sum([]byte(raw))
+	return "search:" + hex.EncodeToString(sum[:])
 }
 
 // Nutriments returns just the nutrition payload for a product.

docs/scalability.md

@@ -0,0 +1,112 @@
+# 可扩展性设计与路线图 (Scalability Roadmap)
+
+本文档回答一个长期问题:随着商品越来越多、品类越来越杂(食品 / 电子 3C / 药品 /
+……),**检索与新增会不会压垮数据库?要不要按品类「分表」?**
+
+> 结论先行:**现阶段不要按品类手动分表。** 现有「单表 + JSONB + archive_kind 框架」
+> 的设计方向是对的。扩展应当靠 **分区(非分表) + 读副本 + 缓存 + 专用搜索引擎**,
+> 按数据量分阶段推进,避免提前过度设计。
+
+---
+
+## 1. 现状盘点
+
+### 1.1 数据模型
+- 所有商品落在**一张 `product` 表**;非食品的领域字段存 `product.attributes`(JSONB)。
+- 食品有独立明细表 `food_detail`(配料 / 营养 / 过敏原等结构化字段)。
+- `0010_archive_kinds` 引入 **archive_kind 框架**:每个品类带一个 `archive_kind`
+  (`food` / `electronics` / `generic`),`kind_field` 表按 kind 定义字段模板,
+  驱动后台动态表单与合格度评分。
+- **加新品类(如药品)不需要新建表**:只要新增一组 `kind_field` 行 + 一棵品类子树;
+  仅当某品类有大量需被独立筛选/排序的结构化字段时,才考虑像 `food_detail` 那样补一张
+  明细表。
+
+### 1.2 已有索引(检索性能的基础)
+| 对象 | 索引 | 用途 |
+|------|------|------|
+| `product.gtin` | 唯一索引 | 条码精确查 |
+| `product.name` | trigram GIN (`pg_trgm`) | 名称模糊/相似匹配 |
+| `product.search_tsv` | 全文 GIN (`tsvector`) | 全文检索 |
+| `product.attributes` | JSONB GIN | 属性过滤 |
+| `brand.name` | trigram GIN | 品牌模糊匹配 |
+| `product.country_of_origin` | btree | 产地精确/前缀过滤 |
+| category / brand / updated_at | btree | 关联与增量 |
+
+### 1.3 检索方式
+- 有关键词时:`name ILIKE` ∪ `word_similarity ≥ 阈值(~0.42)` ∪ 条码匹配,
+  排序按 `相似度 × (0.5 + quality_score)`。
+- 无关键词时:按 `quality_score` 排序。
+- 翻页:`LIMIT / OFFSET`。
+
+### 1.4 写入特征
+- 写库**只有** Python ingestion 一条路径(批量 ETL),不是高并发 OLTP。
+- 插入瓶颈极低;`search_tsv` 由触发器逐行重算,正常增量下开销可忽略。
+
+---
+
+## 2. 为什么不建议按品类「分表」
+
+1. **核心场景是全局检索**:用户通常不知道商品属于哪个品类,搜索要跨所有品类。
+   按品类拆成多表后,一次搜索得 `UNION ALL` 所有表,**更慢、代码更复杂、排序更难统一**。
+2. **单表足够能打**:Postgres 单表配好索引,**几千万行**量级的检索完全可承载。
+   "表大"很少是真正瓶颈,"搜索方式"和"读并发"才是。
+3. **分表会侵蚀框架优势**:archive_kind 框架的价值就是"加品类零建表";手动分表等于
+   把这套通用能力又拆碎。
+
+> 区分两个概念:**分表(sharding,应用层拆多张表)** ≠ **分区(Postgres 原生
+> declarative partitioning,对上层透明的一张逻辑表)**。后者在超大规模时才有意义,
+> 见第 3 阶段。
+
+---
+
+## 3. 分阶段路线图(按数据量触发,不提前做)
+
+### 阶段 0 — 现在 ~ 数百万条:维持现状 + 低成本优化
+触发:当前规模。改动小、收益稳,建议尽早做:
+- **深翻页改 keyset 分页**:`OFFSET` 越翻越慢(需扫描并丢弃前 N 行);改用
+  `WHERE (score, id) < (:last_score, :last_id)` 形式的游标分页。
+- **部分索引**:绝大多数查询限定 `status='active'`,可建
+  `CREATE INDEX ... WHERE status='active'` 缩小索引、提速。
+- **常用筛选复合索引**:如 `(category_id, quality_score DESC)`、
+  `(archive_kind, quality_score DESC)` 配合域内列表。
+- **Redis 缓存**(已在技术栈内):缓存热门搜索结果与商品详情,挡住重复读。
+
+### 阶段 1 — 千万级以上:读扩展 + 调优
+触发:单库读 QPS 升高、P99 变慢。
+- **只读副本(read replica)**:本服务是**只读公益 API**,天然适合一主多从,
+  把检索/详情读流量分到副本,主库只承接 ingestion 写入。
+- **索引与查询调优**:按慢查询日志补/删索引,`EXPLAIN ANALYZE` 校核计划。
+- **(可选)Postgres 原生分区**:若多数检索"限定单一域"(只搜药品 / 只搜食品),
+  可按 `archive_kind` 做 **LIST 分区**(对上层透明,仍是一张逻辑表)。主要利好
+  **维护**(分区级 vacuum / 归档)与**域内查询裁剪**;对真正的全局搜索帮助有限。
+
+### 阶段 2 — 搜索相关性/规模成为痛点:引入专用搜索引擎
+触发:`pg_trgm`/`tsvector` 在相关性排序、跨字段检索、规模上吃力。
+- 把**检索**迁到专用倒排引擎:**OpenSearch / Meilisearch / Typesense**,
+  或 Postgres 内的 **ParadeDB(`pg_search`,BM25)**。
+- **Postgres 仍是唯一事实来源**;搜索引擎只做索引,由 ingestion 在写库后同步。
+- 这才是"搜索量大"的正解,**比分表有效得多**。
+
+---
+
+## 4. 大批量导入的建议
+- 海量初始化/回填用 `COPY` 而非逐行 `INSERT`。
+- 超大批量时可"先停建二级索引 → COPY → 重建索引",比边插边维护索引快得多。
+- ETL 控制并发与批大小,避免与在线读争抢。
+
+---
+
+## 5. 药品档案怎么落地(回到最初的问题)
+在上述设计下,加"药品"属于**阶段 0 的常规扩展**,不触动架构:
+1. 新增 `drug` 的 `kind_field` 模板(批准文号 / 通用名 / 商品名 / 剂型 / 规格 /
+   生产企业 / OTC 分类 / 适应症 / 用法用量 / 不良反应 / 禁忌 / 注意事项 / 贮藏 /
+   有效期 等),`qualified` 标记关键字段参与合格度评分。
+2. 加一棵药品品类子树,并把这些品类的 `archive_kind` 置为 `drug`。
+3. 仅当药品需要**被独立筛选/排序的强结构化字段**(如按批准文号精确查、按 OTC 分类
+   过滤)时,才考虑补一张 `drug_detail` 明细表;否则继续走 `attributes` JSONB。
+
+---
+
+## 6. 版本
+- 本路线图随规模演进更新;任何落地改动需同步:迁移(SQL) + 本文档 +(涉及对外字段时)
+  `docs/data-contract.md` / `docs/openapi.yaml`。

ingestion/opengoods/cache.py

@@ -0,0 +1,52 @@
+"""Read-cache invalidation signal for the public API.
+
+The Go API caches hot product details and search results in Redis, namespacing
+every key by a global generation counter (``og:cache:epoch``). Bumping that
+counter logically invalidates the entire cache in one O(1) operation while the
+old keys age out via their TTL.
+
+Ingestion is the only writer to the database, so after a run that changed data
+it calls :func:`bump_cache_epoch` to make those changes visible immediately
+instead of waiting for per-key TTLs to expire.
+
+Like the API's cache, this is strictly best effort and fails open: if Redis is
+unconfigured or unreachable the ingestion run still succeeds, and stale entries
+simply expire on their own.
+"""
+
+from __future__ import annotations
+
+import logging
+import os
+
+logger = logging.getLogger(__name__)
+
+EPOCH_KEY = "og:cache:epoch"
+
+
+def default_redis_url() -> str | None:
+    """Return the configured Redis URL, or ``None`` when caching is disabled."""
+    return os.environ.get("OPENGOODS_REDIS_URL") or None
+
+
+def bump_cache_epoch(url: str | None = None) -> bool:
+    """Increment the API cache generation counter.
+
+    Returns ``True`` if the counter was bumped, ``False`` if caching is disabled
+    or Redis was unreachable. Never raises: invalidation failures must not fail
+    an ingestion run.
+    """
+    url = url or default_redis_url()
+    if not url:
+        return False
+    try:
+        import redis  # imported lazily so the dependency is optional at runtime
+
+        client = redis.Redis.from_url(url, socket_timeout=2, socket_connect_timeout=2)
+        new_epoch = client.incr(EPOCH_KEY)
+        client.close()
+        logger.info("bumped API cache epoch to %s", new_epoch)
+        return True
+    except Exception as exc:  # noqa: BLE001 - invalidation is best effort
+        logger.warning("cache epoch bump skipped: %s", exc)
+        return False

ingestion/opengoods/jobs/dedup.py

@@ -12,6 +12,7 @@ import sys
 
 import psycopg
 
+from opengoods.cache import bump_cache_epoch
 from opengoods.etl.dedup import dedup_all
 from opengoods.etl.load import default_dsn
 
@@ -23,6 +24,8 @@ def run(args: argparse.Namespace) -> int:
             conn.rollback()
         else:
             conn.commit()
+    if not args.dry_run and summary["merged"]:
+        bump_cache_epoch()
     mode = "dry-run" if args.dry_run else "applied"
     print(f"{mode} groups={summary['groups']} merged={summary['merged']}")
     return 0

ingestion/opengoods/jobs/import_bypos.py

@@ -25,6 +25,7 @@ from collections.abc import Iterator
 import psycopg
 
 from opengoods.adapters.bypos import transform_bypos
+from opengoods.cache import bump_cache_epoch
 from opengoods.etl.load import default_dsn, ensure_bypos_source, load_bypos_record_safe
 
 
@@ -59,6 +60,8 @@ def run(args: argparse.Namespace) -> int:
             else:
                 errored += 1
         conn.commit()
+    if loaded:
+        bump_cache_epoch()
     print(f"loaded={loaded} skipped={skipped} errored={errored}")
     return 0
 

ingestion/opengoods/jobs/seed_off.py

@@ -28,6 +28,7 @@ from opengoods.adapters.openfoodfacts import (
     is_cn_gs1,
     read_dump,
 )
+from opengoods.cache import bump_cache_epoch
 from opengoods.etl.load import default_dsn, ensure_source, load_record_safe
 from opengoods.etl.transform import transform
 
@@ -67,6 +68,8 @@ def run(args: argparse.Namespace) -> int:
             else:
                 errored += 1
         conn.commit()
+    if loaded:
+        bump_cache_epoch()
     print(f"loaded={loaded} skipped={skipped} errored={errored}")
     return 0
 

ingestion/opengoods/jobs/update_off.py

@@ -17,6 +17,7 @@ import sys
 import psycopg
 
 from opengoods.adapters.openfoodfacts import SOURCE_NAME, OpenFoodFactsAdapter
+from opengoods.cache import bump_cache_epoch
 from opengoods.etl.load import default_dsn, ensure_source, load_record_safe
 from opengoods.etl.state import get_watermark, set_watermark
 from opengoods.etl.transform import transform
@@ -49,6 +50,8 @@ def run(args: argparse.Namespace) -> int:
             stats={"loaded": loaded, "skipped": skipped, "errored": errored, "since": since},
         )
         conn.commit()
+    if loaded:
+        bump_cache_epoch()
     print(
         f"since={since} loaded={loaded} skipped={skipped} "
         f"errored={errored} watermark={high_watermark}"

ingestion/pyproject.toml

@@ -6,6 +6,7 @@ requires-python = ">=3.11"
 dependencies = [
     "httpx>=0.27",
     "psycopg[binary]>=3.2",
+    "redis>=5.0,<6",
 ]
 
 [project.optional-dependencies]

ingestion/tests/test_cache.py

@@ -0,0 +1,44 @@
+"""Tests for the best-effort API cache invalidation signal."""
+
+from __future__ import annotations
+
+import sys
+
+import opengoods.cache as cache
+
+
+def test_disabled_when_no_url(monkeypatch):
+    monkeypatch.delenv("OPENGOODS_REDIS_URL", raising=False)
+    assert cache.default_redis_url() is None
+    assert cache.bump_cache_epoch() is False
+
+
+def test_bump_fails_open_when_unreachable(monkeypatch):
+    # An unroutable URL must not raise; the run still succeeds.
+    monkeypatch.setenv("OPENGOODS_REDIS_URL", "redis://127.0.0.1:1/0")
+    assert cache.bump_cache_epoch() is False
+
+
+def test_bump_increments_epoch(monkeypatch):
+    calls = {}
+
+    class FakeClient:
+        def incr(self, key):
+            calls["key"] = key
+            return 7
+
+        def close(self):
+            calls["closed"] = True
+
+    class FakeRedis:
+        @staticmethod
+        def from_url(url, **kwargs):
+            calls["url"] = url
+            return FakeClient()
+
+    monkeypatch.setitem(sys.modules, "redis", type("M", (), {"Redis": FakeRedis}))
+
+    assert cache.bump_cache_epoch("redis://example:6379/0") is True
+    assert calls["key"] == "og:cache:epoch"
+    assert calls["url"] == "redis://example:6379/0"
+    assert calls["closed"] is True

migrations/0012_search_indexes.down.sql

@@ -0,0 +1,2 @@
+DROP INDEX IF EXISTS idx_product_active_category;
+DROP INDEX IF EXISTS idx_product_active_quality;

migrations/0012_search_indexes.up.sql

@@ -0,0 +1,15 @@
+-- 检索优化(可扩展性路线图 阶段0):为最常见的"浏览"路径补部分/复合索引。
+-- 搜索查询恒带 WHERE status = 'active';无关键词时按 quality_score DESC, name 排序。
+-- 现有索引无法同时满足"过滤 active + 按 quality_score/name 排序",深翻页时需要对全部
+-- active 行排序。下面的部分复合索引让规划器直接走索引顺序扫描,省掉排序、加速深翻页与
+-- count(*)。索引只覆盖 active 行,体积更小。
+
+-- 默认浏览(无关键词、无品类):ORDER BY quality_score DESC, name
+CREATE INDEX IF NOT EXISTS idx_product_active_quality
+    ON product (quality_score DESC, name)
+    WHERE status = 'active';
+
+-- 品类内浏览:先按 category_id 收敛,再按 quality_score 排序
+CREATE INDEX IF NOT EXISTS idx_product_active_category
+    ON product (category_id, quality_score DESC)
+    WHERE status = 'active';

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/public/e8b7a2a873a89b19a584a4f12a5bdd6b.txt

@@ -0,0 +1 @@
+9ef4c7d0ea804c11bc637f4e82198e98af908894

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">
+      <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-14 flex items-center justify-between">
+        <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="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">
-            天工<span className="text-gray-400 font-normal text-sm">商品档案公共仓</span>
+              <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">
+          <nav className="flex items-center gap-0.5 text-sm">
-            <button
+            {NAV.map(({ key, label, icon: Icon }) => {
-              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
+              const active =
-                view.name === "home" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
+                view.name === key || (key === "home" && view.name === "product");
-              }`}
+              return (
-              onClick={() => setView({ name: "home" })}
+                <button
-            >
+                  key={key}
-              <Search className="w-4 h-4" /> 检索
+                  className={`px-3 py-1.5 rounded-lg flex items-center gap-1.5 font-medium transition ${
-            </button>
+                    active
-            <button
+                      ? "bg-brand-50 text-brand-700"
-              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
+                      : "text-gray-600 hover:bg-gray-100"
-                view.name === "contribute" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
+                  }`}
-              }`}
+                  onClick={() => setView({ name: key } as View)}
-              onClick={() => setView({ name: "contribute" })}
+                >
-            >
+                  <Icon className="w-4 h-4" />
-              <PlusCircle className="w-4 h-4" /> 贡献档案
+                  <span className="hidden sm:inline">{label}</span>
-            </button>
+                </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>
         </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">
+      <footer className="border-t border-gray-200/70 bg-white/60">
-        <div className="max-w-5xl mx-auto px-4 py-4 text-xs text-gray-400 leading-relaxed text-center">
+        <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">
+            <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="mx-1 font-semibold text-emerald-600">
+              <span className="font-semibold text-brand-600">
                 {qualified.toLocaleString()}
               </span>
               条合格商品档案
             </div>
           )}
-          天工是一个公益性商品档案库。主要收录商品名称，条码，品类，配料等官方快照。不涉及任何交易行为。
+          <p className="max-w-2xl mx-auto">
-          <button onClick={() => setView({ name: "api" })} className="ml-1 text-emerald-600 hover:underline">
+            天工是一个公益性商品档案库，主要收录商品名称、条码、品类、配料等官方快照，不涉及任何交易行为。
-            API 调用说明
+            <button
-          </button>
+              onClick={() => setView({ name: "api" })}
-          <div className="mt-2">
+              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">
+      <div className="max-w-xl mx-auto text-center py-16 animate-fade-up">
-        <CheckCircle2 className="w-14 h-14 text-emerald-500 mx-auto" />
+        <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
+        <button onClick={onDone} className="btn-primary mt-6">
-          onClick={onDone}
-          className="mt-6 px-5 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700"
-        >
           返回首页
         </button>
       </div>
     );
   }
 
-  const input =
+  const input = "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 font-medium text-gray-500 mb-1";
-  const label = "block text-xs text-gray-500 mb-1";
 
   return (
-    <form onSubmit={submit} className="max-w-3xl mx-auto">
+    <form onSubmit={submit} className="max-w-3xl mx-auto animate-fade-up">
-      <h1 className="text-xl font-semibold text-gray-800">贡献商品档案</h1>
+      <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
+        <button type="submit" disabled={submitting} className="btn-primary px-6">
-          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"
-        >
           {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="animate-fade-up">
-      <div className="text-center py-10">
+      <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">
-        <h1 className="text-3xl font-bold text-gray-800">天工</h1>
+        <div
-        <p className="mt-2 text-gray-500">
+          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"
-        </p>
+        />
-        <form onSubmit={run} className="mt-6 max-w-2xl mx-auto flex gap-2">
+        <div className="relative">
-          <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">
+          <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">
-            <Search className="w-5 h-5 text-gray-400" />
+            <ShieldCheck className="w-3.5 h-3.5" /> 公益 · 开放 · 可溯源
-            <input
+          </span>
-              autoFocus
+          <h1 className="mt-5 text-4xl sm:text-5xl font-extrabold tracking-tight text-gray-900">
-              value={q}
+            天<span className="bg-gradient-to-r from-brand-600 to-emerald-500 bg-clip-text text-transparent">工</span>
-              onChange={(e) => setQ(e.target.value)}
+          </h1>
-              placeholder="例如：可乐、Nutella、5449000000996"
+          <p className="mx-auto mt-3 max-w-xl text-gray-500">
-              className="flex-1 py-3 outline-none bg-transparent"
+            输入商品名称或条码，检索客观、可溯源的商品资料。人人可查，人人可贡献。
-            />
+          </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
+        </div>
-            type="submit"
+      </section>
-            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>
 
       {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 && (
+      {searched ? (
-        <div className="mt-2">
+        <div className="mt-8">
-          <div className="text-sm text-gray-500 mb-2">
+          <div className="mb-3 text-sm text-gray-500">
-            共 {total} 条结果{q ? `（关键词：${q}）` : ""}
+            共 <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="min-w-0">
-                      <div className="font-medium text-gray-800">{p.name}</div>
+                      <div className="truncate font-medium text-gray-800 group-hover:text-brand-700">
-                      <div className="text-xs text-gray-500 mt-0.5">
+                        {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">
+                    <div className="flex shrink-0 items-center gap-3">
-                      <span className="block">{p.category_path || ""}</span>
+                      <span className="text-right text-xs text-gray-400">
-                      {p.country_of_origin ? (
+                        <span className="block">{p.category_path || ""}</span>
-                        <span className="block text-gray-400">产地：{p.country_of_origin}</span>
+                        {p.country_of_origin ? (
-                      ) : null}
+                          <span className="block">产地：{p.country_of_origin}</span>
-                    </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>
+          <h1 className="text-2xl font-semibold tracking-tight text-gray-900">{p.name}</h1>
-          <span className="shrink-0 text-xs bg-emerald-50 text-emerald-700 rounded px-2 py-1">
+          <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;
+  color: #1f2937;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+  font-family: theme("fontFamily.sans");
-    Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
+  -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: [],
 };