Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ceyhandagdas51272
|
cbb0968256 | ||
|
ceyhandagdas51272
|
5a641705dd | ||
|
ceyhandagdas51272
|
21c895a008 |
@@ -1,2 +0,0 @@
|
||||
DROP INDEX IF EXISTS idx_product_active_category;
|
||||
DROP INDEX IF EXISTS idx_product_active_quality;
|
||||
@@ -1,15 +0,0 @@
|
||||
-- 检索优化(可扩展性路线图 阶段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';
|
||||
@@ -3,18 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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"
|
||||
/>
|
||||
<title>天工商品档案公共仓</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
+52
-66
@@ -1,11 +1,10 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Boxes, Search, PlusCircle, Code2, KeyRound, Headset } from "lucide-react";
|
||||
import { Boxes, Search, PlusCircle, Code2, KeyRound } 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 =
|
||||
@@ -13,16 +12,7 @@ type View =
|
||||
| { name: "product"; id: string }
|
||||
| { name: "contribute" }
|
||||
| { name: "api" }
|
||||
| { 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 },
|
||||
];
|
||||
| { name: "account" };
|
||||
|
||||
export default function App() {
|
||||
const [view, setView] = useState<View>({ name: "home" });
|
||||
@@ -37,50 +27,58 @@ export default function App() {
|
||||
|
||||
return (
|
||||
<div className="min-h-full flex flex-col">
|
||||
<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">
|
||||
<header className="bg-white border-b">
|
||||
<div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
|
||||
<button
|
||||
className="flex items-center gap-2.5 font-semibold text-gray-800 group"
|
||||
className="flex items-center gap-2 font-semibold text-gray-800"
|
||||
onClick={() => setView({ name: "home" })}
|
||||
>
|
||||
<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>
|
||||
<Boxes className="w-6 h-6 text-emerald-600" />
|
||||
天工<span className="text-gray-400 font-normal text-sm">商品档案公共仓</span>
|
||||
</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 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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 max-w-5xl w-full mx-auto px-4 py-8">
|
||||
<main className="flex-1 max-w-5xl w-full mx-auto px-4 py-6">
|
||||
{view.name === "home" && (
|
||||
<Home
|
||||
onOpen={(id) => setView({ name: "product", id })}
|
||||
onContribute={() => setView({ name: "contribute" })}
|
||||
onApi={() => setView({ name: "api" })}
|
||||
/>
|
||||
)}
|
||||
{view.name === "product" && (
|
||||
@@ -91,36 +89,24 @@ 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 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">
|
||||
<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">
|
||||
{qualified != null && (
|
||||
<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">
|
||||
<div className="mb-2 text-gray-500">
|
||||
目前已收录
|
||||
<span className="mx-1 font-semibold text-emerald-600">
|
||||
{qualified.toLocaleString()}
|
||||
</span>
|
||||
条合格商品档案
|
||||
</div>
|
||||
)}
|
||||
<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">
|
||||
天工是一个公益性商品档案库。主要收录商品名称，条码，品类，配料等官方快照。不涉及任何交易行为。
|
||||
<button onClick={() => setView({ name: "api" })} className="ml-1 text-emerald-600 hover:underline">
|
||||
API 调用说明
|
||||
</button>
|
||||
<div className="mt-2">
|
||||
<a
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
|
||||
@@ -5,7 +5,7 @@ import { api, type AccountInfo, type KeyResponse } from "../api";
|
||||
function KeyReveal({ data }: { data: KeyResponse }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
return (
|
||||
<div className="mt-4 rounded-lg border border-brand-100 bg-brand-50 p-4">
|
||||
<div className="mt-4 rounded-lg border border-emerald-200 bg-emerald-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-brand-600" /> : <Copy className="w-5 h-5" />}
|
||||
{copied ? <Check className="w-5 h-5 text-emerald-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="card p-5">
|
||||
<div className="bg-white border rounded-lg p-5">
|
||||
<h1 className="flex items-center gap-2 text-2xl font-bold text-gray-800">
|
||||
<KeyRound className="w-6 h-6 text-brand-600" /> API 密钥
|
||||
<KeyRound className="w-6 h-6 text-emerald-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-brand-700" : "text-gray-500"
|
||||
mode === "register" ? "bg-white shadow-sm text-emerald-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-brand-700" : "text-gray-500"
|
||||
mode === "manage" ? "bg-white shadow-sm text-emerald-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-brand-500"
|
||||
className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-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-brand-500"
|
||||
className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="text-sm text-red-600">{error}</div>}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-brand-600 text-white rounded-md py-2 text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
|
||||
className="w-full bg-emerald-600 text-white rounded-md py-2 text-sm font-medium hover:bg-emerald-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-brand-600">{info.quota_remaining.toLocaleString()}</strong>）
|
||||
<strong className="text-emerald-600">{info.quota_remaining.toLocaleString()}</strong>）
|
||||
</div>
|
||||
<button
|
||||
onClick={regenerate}
|
||||
disabled={loading}
|
||||
className="mt-2 text-brand-600 hover:underline disabled:opacity-50"
|
||||
className="mt-2 text-emerald-600 hover:underline disabled:opacity-50"
|
||||
>
|
||||
忘记密钥？重置并生成新密钥
|
||||
</button>
|
||||
|
||||
@@ -20,7 +20,7 @@ function CopyBtn({ text }: { text: string }) {
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
title="复制"
|
||||
>
|
||||
{done ? <Check className="w-4 h-4 text-brand-600" /> : <Copy className="w-4 h-4" />}
|
||||
{done ? <Check className="w-4 h-4 text-emerald-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-brand-100 text-brand-700";
|
||||
const color = m === "GET" ? "bg-sky-100 text-sky-700" : "bg-emerald-100 text-emerald-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="card p-5">
|
||||
<div className="bg-white border rounded-lg 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="card p-5">
|
||||
<div className="bg-white border rounded-lg 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-brand-600 hover:underline">注册账号</button>
|
||||
用满后需<button onClick={onRegister} className="text-emerald-600 hover:underline">注册账号</button>
|
||||
领取更高配额密钥（见下文「鉴权与配额」）。
|
||||
</li>
|
||||
<li>
|
||||
@@ -135,13 +135,13 @@ export default function ApiDocs({ onRegister }: { onRegister?: () => void }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-5">
|
||||
<div className="bg-white border rounded-lg 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-brand-600 hover:underline">注册账号</button>
|
||||
需<button onClick={onRegister} className="text-emerald-600 hover:underline">注册账号</button>
|
||||
自助领取更高配额的 API Key。注册得到的密钥拥有更高的每分钟频率与累计调用配额，请求时通过请求头携带：
|
||||
</p>
|
||||
<div className="mt-3">
|
||||
|
||||
@@ -1,113 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -89,36 +89,38 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
|
||||
|
||||
if (done) {
|
||||
return (
|
||||
<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>
|
||||
<div className="max-w-xl mx-auto text-center py-16">
|
||||
<CheckCircle2 className="w-14 h-14 text-emerald-500 mx-auto" />
|
||||
<h1 className="mt-4 text-xl font-semibold text-gray-800">已提交，等待审核</h1>
|
||||
<p className="mt-2 text-gray-500">
|
||||
感谢你的贡献！资料将由管理员人工审核，通过后会收录进公共商品库。
|
||||
</p>
|
||||
<button onClick={onDone} className="btn-primary mt-6">
|
||||
<button
|
||||
onClick={onDone}
|
||||
className="mt-6 px-5 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700"
|
||||
>
|
||||
返回首页
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const input = "input";
|
||||
const label = "block text-xs font-medium text-gray-500 mb-1";
|
||||
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";
|
||||
|
||||
return (
|
||||
<form onSubmit={submit} className="max-w-3xl mx-auto animate-fade-up">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-gray-900">贡献商品档案</h1>
|
||||
<form onSubmit={submit} className="max-w-3xl mx-auto">
|
||||
<h1 className="text-xl font-semibold text-gray-800">贡献商品档案</h1>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
任何人都可以提交新商品资料。提交后会进入审核队列，<b>通过人工审核后才会收纳</b>。带 * 为必填。
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 rounded-xl bg-red-50 px-4 py-2.5 text-sm text-red-700">{error}</div>
|
||||
<div className="mt-4 bg-red-50 text-red-700 text-sm rounded-md px-4 py-2">{error}</div>
|
||||
)}
|
||||
|
||||
<div className="card p-5 mt-4">
|
||||
<div className="bg-white border rounded-lg 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">
|
||||
@@ -165,7 +167,7 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-5 mt-4">
|
||||
<div className="bg-white border rounded-lg p-5 mt-4">
|
||||
<h2 className="font-medium text-gray-700 mb-3">配料与营养</h2>
|
||||
<label className={label}>配料表</label>
|
||||
<textarea
|
||||
@@ -199,7 +201,7 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-5 mt-4">
|
||||
<div className="bg-white border rounded-lg 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">
|
||||
@@ -232,14 +234,14 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
|
||||
setImageURL("");
|
||||
}
|
||||
}}
|
||||
className="shrink-0 px-3 rounded-xl border border-gray-200 text-sm flex items-center gap-1 hover:bg-gray-50"
|
||||
className="shrink-0 px-3 rounded-md border text-sm flex items-center gap-1 hover:bg-gray-50"
|
||||
>
|
||||
<PlusCircle className="w-4 h-4" /> 添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-5 mt-4">
|
||||
<div className="bg-white border rounded-lg 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>
|
||||
@@ -258,7 +260,11 @@ export default function Contribute({ onDone }: { onDone: () => void }) {
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex items-center gap-3">
|
||||
<button type="submit" disabled={submitting} className="btn-primary px-6">
|
||||
<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"
|
||||
>
|
||||
{submitting ? "提交中…" : "提交审核"}
|
||||
</button>
|
||||
<button type="button" onClick={onDone} className="text-sm text-gray-500 hover:underline">
|
||||
|
||||
@@ -1,34 +1,16 @@
|
||||
import { useState } from "react";
|
||||
import { Search, PlusCircle, Code2, ScanBarcode, ShieldCheck, ArrowRight } from "lucide-react";
|
||||
import { Search, PlusCircle, Code2 } 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[]>([]);
|
||||
@@ -37,14 +19,12 @@ export default function Home({
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
async function run(term?: string, e?: React.FormEvent) {
|
||||
async function run(e?: React.FormEvent) {
|
||||
e?.preventDefault();
|
||||
const keyword = (term ?? q).trim();
|
||||
if (term !== undefined) setQ(term);
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await api.search(keyword, 1, 30);
|
||||
const res = await api.search(q.trim(), 1, 30);
|
||||
setItems(res.items);
|
||||
setTotal(res.total);
|
||||
setSearched(true);
|
||||
@@ -56,116 +36,87 @@ export default function Home({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="animate-fade-up">
|
||||
<section className="relative overflow-hidden rounded-3xl border border-gray-100 bg-gradient-to-b from-white to-brand-50/40 px-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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
{error && (
|
||||
<div className="mx-auto mt-6 max-w-2xl rounded-xl bg-red-50 px-4 py-2.5 text-sm text-red-700">
|
||||
<div className="max-w-2xl mx-auto bg-red-50 text-red-700 text-sm rounded-md px-4 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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}）` : ""}
|
||||
{searched && (
|
||||
<div className="mt-2">
|
||||
<div className="text-sm text-gray-500 mb-2">
|
||||
共 {total} 条结果{q ? `（关键词：${q}）` : ""}
|
||||
</div>
|
||||
{items.length === 0 ? (
|
||||
<div className="card p-10 text-center text-gray-500">
|
||||
<div className="bg-white border rounded-lg p-8 text-center text-gray-500">
|
||||
<p>没有找到相关商品。</p>
|
||||
<button
|
||||
onClick={onContribute}
|
||||
className="mt-3 inline-flex items-center gap-1.5 font-medium text-brand-700 hover:underline"
|
||||
className="mt-3 inline-flex items-center gap-1.5 text-emerald-700 hover:underline"
|
||||
>
|
||||
<PlusCircle className="w-4 h-4" /> 你知道这个商品？去贡献档案
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="card divide-y divide-gray-100 overflow-hidden">
|
||||
<ul className="bg-white border rounded-lg divide-y">
|
||||
{items.map((p) => (
|
||||
<li key={p.id}>
|
||||
<button
|
||||
onClick={() => onOpen(p.id)}
|
||||
className="group flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left transition hover:bg-brand-50/50"
|
||||
className="w-full text-left px-4 py-3 hover:bg-gray-50 flex items-center justify-between gap-4"
|
||||
>
|
||||
<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">
|
||||
<div>
|
||||
<div className="font-medium text-gray-800">{p.name}</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5">
|
||||
{p.brand || "未知品牌"}
|
||||
{p.gtin ? ` · ${p.gtin}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-8 grid gap-4 sm:grid-cols-3">
|
||||
{FEATURES.map(({ icon: Icon, title, desc }) => (
|
||||
<div key={title} className="card p-5 transition hover:shadow-card-hover">
|
||||
<span className="grid h-10 w-10 place-items-center rounded-xl bg-brand-50 text-brand-600">
|
||||
<Icon className="h-5 w-5" />
|
||||
</span>
|
||||
<h3 className="mt-3 font-semibold text-gray-800">{title}</h3>
|
||||
<p className="mt-1 text-sm leading-relaxed text-gray-500">{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -28,11 +28,11 @@ export default function ProductView({ id, onBack }: { id: string; onBack: () =>
|
||||
<button onClick={onBack} className="text-sm text-gray-500 flex items-center gap-1 mb-4">
|
||||
<ArrowLeft className="w-4 h-4" /> 返回
|
||||
</button>
|
||||
<div className="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>
|
||||
<div className="bg-red-50 text-red-700 text-sm rounded-md px-4 py-3">{error}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!p) return <div className="text-gray-400 animate-pulse">加载中…</div>;
|
||||
if (!p) return <div className="text-gray-400">加载中…</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="mb-4 inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
|
||||
<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="card p-6 animate-fade-up">
|
||||
<div className="bg-white border rounded-lg p-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<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">
|
||||
<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">
|
||||
质量分 {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="card p-6 mt-4">
|
||||
<div className="bg-white border rounded-lg p-5 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="card p-6 mt-4">
|
||||
<div className="bg-white border rounded-lg p-5 mt-4">
|
||||
<h2 className="font-medium text-gray-700 mb-2">
|
||||
营养成分
|
||||
{p.nutrition_basis ? `（${basisLabel[p.nutrition_basis] || p.nutrition_basis}）` : ""}
|
||||
|
||||
@@ -10,36 +10,7 @@ body,
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
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;
|
||||
}
|
||||
background: #f3f4f6;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
|
||||
Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,55 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
||||
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",
|
||||
},
|
||||
},
|
||||
},
|
||||
theme: { extend: {} },
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@@ -58,9 +58,10 @@ GET http://zc.bypos.net/byGoodsService/byMessage.asmx/GetGoodsinfo
|
||||
|
||||
## 配置
|
||||
|
||||
- `sdogid`:中心库账号 id(本项目所属云店账号的授权 id)。默认值见
|
||||
`collect.go` 的 `defaultSdogID`,也可用 `-sdogid` 参数或控制台覆盖。
|
||||
**这是账号级凭证**——若本仓库对外公开,建议改为从环境变量/外部配置读取。
|
||||
- `sdogid`：中心库账号 id（本项目所属云店账号的授权 id）。
|
||||
优先从环境变量 `BYPOS_SDOGID` 读取，其次是命令行 `-sdogid` 参数，
|
||||
也可以在 Web 控制台的输入框中填写。**三者都未设时启动会警告、开始采集时会报错。**
|
||||
- 网络错误自动重试（最多 3 次，指数退避 500ms/1s/2s）。
|
||||
|
||||
## 导入 goods/天工库
|
||||
|
||||
|
||||
@@ -20,12 +20,21 @@ import (
|
||||
)
|
||||
|
||||
// ---- upstream config ----
|
||||
// sdogid is the 云店 account license id observed in the live request. It is
|
||||
// configurable so the tool is not tied to a single account.
|
||||
const defaultSdogID = "137966"
|
||||
|
||||
const endpoint = "http://zc.bypos.net/byGoodsService/byMessage.asmx/GetGoodsinfo"
|
||||
|
||||
// maxRetries is the number of retry attempts for transient network errors.
|
||||
const maxRetries = 3
|
||||
|
||||
// resolveSdogID reads the account id from $BYPOS_SDOGID, falling back to the
|
||||
// explicit argument (CLI flag or Web UI input). Returns empty if neither set.
|
||||
func resolveSdogID(explicit string) string {
|
||||
if v := os.Getenv("BYPOS_SDOGID"); v != "" {
|
||||
return v
|
||||
}
|
||||
return explicit
|
||||
}
|
||||
|
||||
var stringTagRe = regexp.MustCompile(`(?s)<string[^>]*>(.*)</string>`)
|
||||
|
||||
// Product is the normalized record we persist (one JSON object per line).
|
||||
@@ -87,8 +96,8 @@ func ean13Check(body string) (string, bool) {
|
||||
return body + strconv.Itoa(chk), true
|
||||
}
|
||||
|
||||
// lookup queries the upstream central library for one barcode.
|
||||
func (c *Collector) lookup(ctx context.Context, barcode string) (*Product, error) {
|
||||
// lookupOnce performs a single HTTP request to the upstream central library.
|
||||
func (c *Collector) lookupOnce(ctx context.Context, barcode string) (*Product, error) {
|
||||
tsMs := strconv.FormatInt(time.Now().Unix()*1000, 10) // always ends in 000
|
||||
sparm1 := md5hex(c.sdogID)
|
||||
sparm2 := md5hex(barcode + tsMs)
|
||||
@@ -147,6 +156,30 @@ func (c *Collector) lookup(ctx context.Context, barcode string) (*Product, error
|
||||
return p, nil
|
||||
}
|
||||
|
||||
// lookup queries the upstream with up to maxRetries retries on transient errors.
|
||||
func (c *Collector) lookup(ctx context.Context, barcode string) (*Product, error) {
|
||||
var lastErr error
|
||||
for attempt := 0; attempt <= maxRetries; attempt++ {
|
||||
if ctx.Err() != nil {
|
||||
return nil, ctx.Err()
|
||||
}
|
||||
p, err := c.lookupOnce(ctx, barcode)
|
||||
if err == nil {
|
||||
return p, nil
|
||||
}
|
||||
lastErr = err
|
||||
if attempt < maxRetries {
|
||||
backoff := time.Duration(1<<uint(attempt)) * 500 * time.Millisecond
|
||||
select {
|
||||
case <-time.After(backoff):
|
||||
case <-ctx.Done():
|
||||
return nil, ctx.Err()
|
||||
}
|
||||
}
|
||||
}
|
||||
return nil, lastErr
|
||||
}
|
||||
|
||||
// ---- job / collector state ----
|
||||
|
||||
type Stats struct {
|
||||
@@ -187,9 +220,7 @@ type Collector struct {
|
||||
}
|
||||
|
||||
func NewCollector(sdogID string) *Collector {
|
||||
if sdogID == "" {
|
||||
sdogID = defaultSdogID
|
||||
}
|
||||
sdogID = resolveSdogID(sdogID)
|
||||
c := &Collector{
|
||||
client: &http.Client{Timeout: 25 * time.Second},
|
||||
sdogID: sdogID,
|
||||
@@ -308,6 +339,9 @@ func (c *Collector) Start(req JobReq) error {
|
||||
if req.SdogID != "" {
|
||||
c.sdogID = req.SdogID
|
||||
}
|
||||
if c.sdogID == "" {
|
||||
return fmt.Errorf("未指定 sdogid，请通过控制台输入框、环境变量 $BYPOS_SDOGID 或 -sdogid 参数配置")
|
||||
}
|
||||
|
||||
// Build the list of barcodes to query.
|
||||
var barcodes []string
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"os"
|
||||
"testing"
|
||||
)
|
||||
|
||||
func TestEan13Check_valid(t *testing.T) {
|
||||
tests := []struct {
|
||||
body string
|
||||
want string
|
||||
}{
|
||||
{"692045990501", "6920459905012"},
|
||||
{"690100000000", "6901000000004"},
|
||||
{"690100000099", "6901000000998"},
|
||||
}
|
||||
for _, tt := range tests {
|
||||
got, ok := ean13Check(tt.body)
|
||||
if !ok {
|
||||
t.Errorf("ean13Check(%q) returned not ok", tt.body)
|
||||
continue
|
||||
}
|
||||
if got != tt.want {
|
||||
t.Errorf("ean13Check(%q) = %q, want %q", tt.body, got, tt.want)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func TestEan13Check_invalid(t *testing.T) {
|
||||
cases := []string{"", "12345", "12345678901", "1234567890123", "69010000a000"}
|
||||
for _, body := range cases {
|
||||
_, ok := ean13Check(body)
|
||||
if ok {
|
||||
t.Errorf("ean13Check(%q) should return not ok", body)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func TestMd5hex(t *testing.T) {
|
||||
got := md5hex("137966")
|
||||
if len(got) != 32 {
|
||||
t.Errorf("md5hex should return 32-char hex, got len=%d", len(got))
|
||||
}
|
||||
if got != md5hex("137966") {
|
||||
t.Error("md5hex should be deterministic")
|
||||
}
|
||||
if got == md5hex("other") {
|
||||
t.Error("md5hex should differ for different inputs")
|
||||
}
|
||||
}
|
||||
|
||||
func TestSanitizeBarcodes(t *testing.T) {
|
||||
got := sanitizeBarcodes("6920459905012\n6901028941068 123")
|
||||
want := []string{"6920459905012", "6901028941068", "123"}
|
||||
if len(got) != len(want) {
|
||||
t.Fatalf("len = %d, want %d", len(got), len(want))
|
||||
}
|
||||
for i := range want {
|
||||
if got[i] != want[i] {
|
||||
t.Errorf("got[%d] = %q, want %q", i, got[i], want[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func TestSanitizeBarcodes_empty(t *testing.T) {
|
||||
got := sanitizeBarcodes(" \n\t ")
|
||||
if len(got) != 0 {
|
||||
t.Errorf("expected empty, got %v", got)
|
||||
}
|
||||
}
|
||||
|
||||
func TestResolveSdogID_envOverride(t *testing.T) {
|
||||
os.Setenv("BYPOS_SDOGID", "999999")
|
||||
defer os.Unsetenv("BYPOS_SDOGID")
|
||||
got := resolveSdogID("111111")
|
||||
if got != "999999" {
|
||||
t.Errorf("expected env var override, got %q", got)
|
||||
}
|
||||
}
|
||||
|
||||
func TestResolveSdogID_fallback(t *testing.T) {
|
||||
os.Unsetenv("BYPOS_SDOGID")
|
||||
got := resolveSdogID("111111")
|
||||
if got != "111111" {
|
||||
t.Errorf("expected fallback to explicit, got %q", got)
|
||||
}
|
||||
}
|
||||
|
||||
func TestResolveSdogID_empty(t *testing.T) {
|
||||
os.Unsetenv("BYPOS_SDOGID")
|
||||
got := resolveSdogID("")
|
||||
if got != "" {
|
||||
t.Errorf("expected empty, got %q", got)
|
||||
}
|
||||
}
|
||||
|
||||
func TestNewCollector_sdogFromEnv(t *testing.T) {
|
||||
os.Setenv("BYPOS_SDOGID", "888888")
|
||||
defer os.Unsetenv("BYPOS_SDOGID")
|
||||
c := NewCollector("")
|
||||
if c.sdogID != "888888" {
|
||||
t.Errorf("expected sdogID from env, got %q", c.sdogID)
|
||||
}
|
||||
}
|
||||
|
||||
func TestStartRejectsEmptySdogID(t *testing.T) {
|
||||
os.Unsetenv("BYPOS_SDOGID")
|
||||
c := NewCollector("")
|
||||
err := c.Start(JobReq{Mode: "list", List: "6920459905012"})
|
||||
if err == nil {
|
||||
t.Fatal("expected error for empty sdogid")
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"bufio"
|
||||
"embed"
|
||||
"encoding/csv"
|
||||
"encoding/json"
|
||||
@@ -20,18 +21,48 @@ import (
|
||||
//go:embed web/*
|
||||
var webFS embed.FS
|
||||
|
||||
var collector = NewCollector("")
|
||||
var collector *Collector
|
||||
|
||||
// waitExit keeps the console window open on Windows so the user can read errors.
|
||||
func waitExit() {
|
||||
if runtime.GOOS == "windows" {
|
||||
fmt.Println("\n按回车键退出...")
|
||||
bufio.NewReader(os.Stdin).ReadBytes('\n')
|
||||
}
|
||||
}
|
||||
|
||||
func main() {
|
||||
addr := flag.String("addr", "127.0.0.1:8765", "本地监听地址")
|
||||
noOpen := flag.Bool("no-open", false, "不自动打开浏览器")
|
||||
sdog := flag.String("sdogid", "", "中心库账号 id(默认使用内置值)")
|
||||
flag.Parse()
|
||||
if *sdog != "" {
|
||||
collector.sdogID = *sdog
|
||||
// Log to file so crashes are diagnosable even if console closes.
|
||||
lf, lfErr := os.OpenFile("bypos-collector.log", os.O_CREATE|os.O_WRONLY|os.O_APPEND, 0644)
|
||||
if lfErr == nil {
|
||||
log.SetOutput(io.MultiWriter(os.Stderr, lf))
|
||||
defer lf.Close()
|
||||
}
|
||||
|
||||
sub, _ := fs.Sub(webFS, "web")
|
||||
defer func() {
|
||||
if r := recover(); r != nil {
|
||||
log.Printf("程序崩溃: %v", r)
|
||||
waitExit()
|
||||
}
|
||||
}()
|
||||
|
||||
log.Println("bypos-collector 启动中...")
|
||||
|
||||
addr := flag.String("addr", "127.0.0.1:8765", "本地监听地址")
|
||||
noOpen := flag.Bool("no-open", false, "不自动打开浏览器")
|
||||
sdog := flag.String("sdogid", "", "中心库账号 id（优先读 $BYPOS_SDOGID 环境变量）")
|
||||
flag.Parse()
|
||||
collector = NewCollector(*sdog)
|
||||
if collector.sdogID == "" {
|
||||
log.Println("警告: 未配置 sdogid，请通过 $BYPOS_SDOGID 环境变量、-sdogid 参数或控制台输入框指定")
|
||||
}
|
||||
|
||||
sub, err := fs.Sub(webFS, "web")
|
||||
if err != nil {
|
||||
log.Printf("错误: 无法加载内嵌 web 资源: %v", err)
|
||||
waitExit()
|
||||
return
|
||||
}
|
||||
mux := http.NewServeMux()
|
||||
mux.Handle("/", http.FileServer(http.FS(sub)))
|
||||
mux.HandleFunc("/api/start", handleStart)
|
||||
@@ -42,7 +73,13 @@ func main() {
|
||||
|
||||
ln, err := net.Listen("tcp", *addr)
|
||||
if err != nil {
|
||||
log.Fatalf("无法监听 %s: %v", *addr, err)
|
||||
log.Printf("端口 %s 被占用，自动选择可用端口...", *addr)
|
||||
ln, err = net.Listen("tcp", "127.0.0.1:0")
|
||||
if err != nil {
|
||||
log.Printf("错误: 无法监听: %v", err)
|
||||
waitExit()
|
||||
return
|
||||
}
|
||||
}
|
||||
realAddr := ln.Addr().String()
|
||||
urlStr := "http://" + realAddr + "/"
|
||||
@@ -51,10 +88,14 @@ func main() {
|
||||
fmt.Println(" 控制台: " + urlStr)
|
||||
fmt.Println(" 关闭本窗口即停止程序")
|
||||
fmt.Println("==============================================")
|
||||
log.Printf("监听地址: %s", realAddr)
|
||||
if !*noOpen {
|
||||
go openBrowser(urlStr)
|
||||
}
|
||||
log.Fatal(http.Serve(ln, mux))
|
||||
if err := http.Serve(ln, mux); err != nil {
|
||||
log.Printf("HTTP 服务异常退出: %v", err)
|
||||
waitExit()
|
||||
}
|
||||
}
|
||||
|
||||
func openBrowser(url string) {
|
||||
@@ -143,14 +184,14 @@ func handleExportCSV(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Disposition", "attachment; filename=products.csv")
|
||||
w.Write([]byte{0xEF, 0xBB, 0xBF}) // UTF-8 BOM so Excel reads Chinese correctly
|
||||
cw := csv.NewWriter(w)
|
||||
cw.Write([]string{"barcode", "name", "spec", "unit", "area", "manufacturer", "license", "in_price", "sell_price", "status", "fetched_at"})
|
||||
cw.Write([]string{"barcode", "name", "spec", "unit", "area", "manufacturer", "license", "in_price", "sell_price", "status", "retmsg", "fetched_at", "source"})
|
||||
dec := json.NewDecoder(f)
|
||||
for {
|
||||
var p Product
|
||||
if err := dec.Decode(&p); err != nil {
|
||||
break
|
||||
}
|
||||
cw.Write([]string{p.Barcode, p.Name, p.Spec, p.Unit, p.Area, p.Manufacturer, p.License, p.InPrice, p.SellPrice, p.Status, p.FetchedAt})
|
||||
cw.Write([]string{p.Barcode, p.Name, p.Spec, p.Unit, p.Area, p.Manufacturer, p.License, p.InPrice, p.SellPrice, p.Status, p.RetMsg, p.FetchedAt, p.Source})
|
||||
}
|
||||
cw.Flush()
|
||||
}
|
||||
|
||||
@@ -79,6 +79,10 @@
|
||||
<div class="card">
|
||||
<h3>② 采集参数</h3>
|
||||
<div class="row">
|
||||
<div>
|
||||
<label>中心库账号 sdogid</label>
|
||||
<input type="text" id="sdogid" placeholder="留空则使用环境变量或启动参数"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>并发数</label>
|
||||
<input type="number" id="concurrency" value="3" min="1" max="20"/>
|
||||
@@ -165,6 +169,7 @@ async function start(){
|
||||
start_body: document.getElementById('start').value.trim(),
|
||||
end_body: document.getElementById('end').value.trim(),
|
||||
list: document.getElementById('list').value,
|
||||
sdog_id: document.getElementById('sdogid').value.trim(),
|
||||
concurrency: parseInt(document.getElementById('concurrency').value)||3,
|
||||
delay_ms: parseInt(document.getElementById('delay').value)||0,
|
||||
log_miss: document.getElementById('logmiss').checked,
|
||||
|
||||
Reference in New Issue
Block a user