feat(public): 首页新增 API 调用说明页（只读端点/参数/示例/免责声明）

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

public-frontend/src/App.tsx

@@ -1,13 +1,15 @@
 import { useState } from "react";
-import { Boxes, Search, PlusCircle } from "lucide-react";
+import { Boxes, Search, PlusCircle, Code2 } from "lucide-react";
 import Home from "./components/Home";
 import ProductView from "./components/ProductView";
 import Contribute from "./components/Contribute";
+import ApiDocs from "./components/ApiDocs";
 
 type View =
   | { name: "home" }
   | { name: "product"; id: string }
-  | { name: "contribute" };
+  | { name: "contribute" }
+  | { name: "api" };
 
 export default function App() {
   const [view, setView] = useState<View>({ name: "home" });
@@ -41,6 +43,14 @@ export default function App() {
             >
               <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>
           </nav>
         </div>
       </header>
@@ -50,6 +60,7 @@ export default function App() {
           <Home
             onOpen={(id) => setView({ name: "product", id })}
             onContribute={() => setView({ name: "contribute" })}
+            onApi={() => setView({ name: "api" })}
           />
         )}
         {view.name === "product" && (
@@ -58,12 +69,16 @@ export default function App() {
         {view.name === "contribute" && (
           <Contribute onDone={() => setView({ name: "home" })} />
         )}
+        {view.name === "api" && <ApiDocs />}
       </main>
 
       <footer className="border-t bg-white">
         <div className="max-w-5xl mx-auto px-4 py-4 text-xs text-gray-400 leading-relaxed">
           OpenGoods 是公益性「商品事实库」，仅收录客观商品信息（条码、品牌、品类、营养、官方建议零售价快照等），不含任何购买/交易功能。
           公众投稿须经人工审核后方可收纳。
+          <button onClick={() => setView({ name: "api" })} className="ml-1 text-emerald-600 hover:underline">
+            API 调用说明
+          </button>
         </div>
       </footer>
     </div>