Add precision gear product cards

app/globals.css

@@ -408,6 +408,36 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
 .precision-gear-subcats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; padding-top: 13px; border-top: 1px solid rgba(176, 201, 239, .58); }
 .precision-gear-subcats span { padding: 6px 9px; border: 1px solid #d6e2f5; border-radius: 999px; color: #60718b; background: rgba(255,255,255,.72); font-size: 10px; }
 .precision-gear-subcats b { margin-left: 3px; color: var(--blue); font-weight: 800; }
+.precision-gear-catalog { margin-top: 34px; }
+.precision-gear-catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
+.precision-gear-catalog-heading h4 { margin: 5px 0 0; color: var(--ink); font-size: 22px; letter-spacing: -.03em; }
+.precision-gear-catalog-heading > p { max-width: 430px; margin: 0; color: #7b8799; font-size: 11px; line-height: 1.65; text-align: right; }
+.precision-gear-controls { margin-top: 16px; padding: 12px; border: 1px solid #dbe4f1; border-radius: 13px; background: #fbfcfe; }
+.precision-gear-controls > input { width: 100%; height: 40px; padding: 0 12px; font-size: 11px; background: white; }
+.precision-gear-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.precision-gear-pills button { padding: 7px 10px; border: 1px solid #dce4ef; border-radius: 999px; color: #68778e; background: white; cursor: pointer; font-size: 9px; }
+.precision-gear-pills button:hover { border-color: #aec6ed; color: var(--blue); }
+.precision-gear-pills button.active { border-color: var(--blue); color: white; background: var(--blue); }
+.precision-gear-result { margin: 10px 2px 0; color: #8a96a7; font-size: 9px; }
+.precision-gear-result strong { color: var(--blue); font-size: 12px; }
+.precision-gear-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
+.precision-gear-card { min-width: 0; overflow: hidden; border: 1px solid #dfe6f0; border-radius: 12px; background: white; transition: transform .2s, border-color .2s, box-shadow .2s; }
+.precision-gear-card:hover { transform: translateY(-2px); border-color: #b9cbea; box-shadow: 0 10px 22px rgba(30,53,91,.08); }
+.precision-gear-image { position: relative; width: 100%; aspect-ratio: 1.18; padding: 0; display: grid; place-items: center; overflow: hidden; border: 0; background: #f4f7fb; cursor: pointer; }
+.precision-gear-image img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
+.precision-gear-image:hover img { transform: scale(1.05); }
+.precision-gear-image:focus-visible { outline: 3px solid rgba(24,94,232,.28); outline-offset: -3px; }
+.precision-gear-image > span { position: absolute; right: 8px; bottom: 8px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.75); border-radius: 5px; color: #61708a; background: rgba(255,255,255,.9); font-size: 8px; font-weight: 700; }
+.precision-gear-card-body { min-width: 0; padding: 11px 11px 12px; }
+.precision-gear-card-body > p { margin: 0 0 4px; color: var(--blue); font-size: 8px; font-weight: 800; }
+.precision-gear-card-body h5 { height: 32px; margin: 0 0 5px; overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.45; }
+.precision-gear-card-body code { display: block; overflow: hidden; color: #8a95a7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
+.precision-gear-card-body dl { min-height: 42px; margin: 9px 0 0; padding-top: 7px; border-top: 1px solid #edf0f4; }
+.precision-gear-card-body dl div { display: flex; justify-content: space-between; gap: 5px; padding: 2px 0; font-size: 8px; }
+.precision-gear-card-body dt { color: #8a95a7; }
+.precision-gear-card-body dd { max-width: 62%; margin: 0; overflow: hidden; color: #52617a; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 700; }
+.precision-gear-empty { margin-top: 15px; }
+.precision-gear-load-more { margin-top: 22px; }
 .catalog-empty { padding: 60px 20px; text-align: center; border: 1px dashed #cbd5e3; border-radius: 15px; background: white; }
 .catalog-empty p { color: #8792a4; font-size: 12px; }
 .catalog-empty button { border: 0; color: var(--blue); background: transparent; cursor: pointer; font-weight: 700; }
@@ -507,6 +537,7 @@ footer > span { color: #9aa4b2; font-size: 10px; }
   .catalog-summary { grid-template-columns: repeat(4, 1fr); }
   .catalog-grid { grid-template-columns: repeat(2, 1fr); }
   .precision-gear-panel { grid-template-columns: 1fr; }
+  .precision-gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
 @media (max-width: 720px) {
@@ -533,6 +564,10 @@ footer > span { color: #9aa4b2; font-size: 10px; }
   .catalog-scale-filter { grid-template-columns: 1fr; align-items: stretch; }
   .catalog-grid { grid-template-columns: 1fr; gap: 15px; }
   .precision-gear-panel { gap: 20px; margin-top: 30px; padding: 22px 18px; }
+  .precision-gear-catalog-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
+  .precision-gear-catalog-heading > p { text-align: left; }
+  .precision-gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
+  .precision-gear-card-body { padding: 9px; }
   .catalog-card-body { padding: 15px; }
   .catalog-card-body h3 { height: auto; min-height: 42px; font-size: 14px; }
   .catalog-card-body dl { min-height: 90px; }

app/page.tsx

@@ -7,6 +7,7 @@ import {
   type CatalogProduct,
 } from "./catalog-data";
 import { STEERING_WHEEL_ACCESSORIES } from "./catalog-accessories";
+import { PRECISION_GEAR_PRODUCTS, PRECISION_GEAR_SUBCATEGORIES } from "./precision-gear-data";
 import { getCatalogProductDimensionImage, getCatalogProductImage } from "./catalog-image-map";
 
 const CATALOG_PRODUCTS = [...RAW_CATALOG_PRODUCTS, ...STEERING_WHEEL_ACCESSORIES].map((product) => ({
@@ -52,20 +53,6 @@ const PRIMARY_CATALOG_CATEGORIES = [
 
 const CATALOG_FILTER_CATEGORIES = ["全部产品", ...PRIMARY_CATALOG_CATEGORIES, "静音舵机"];
 
-const PRECISION_GEAR_SUBCATEGORIES = [
-  ["轴", 15],
-  ["单伞齿", 23],
-  ["单直齿", 160],
-  ["单皇冠齿", 9],
-  ["双联直齿", 186],
-  ["其他双联齿", 18],
-  ["双联皇冠齿", 16],
-  ["蜗杆", 32],
-  ["异形零件", 18],
-  ["离合齿", 29],
-  ["差速器组件", 5],
-] as const;
-
 const FEATURED_SPEC_ORDER = [
   "堵转扭矩",
   "额定电压",
@@ -99,6 +86,25 @@ function getProductDimensionSummary(product: CatalogProduct) {
   return dimensions.length > 0 ? dimensions.join(" × ") : "尺寸图待补充";
 }
 
+const PRECISION_GEAR_CARD_SPEC_ORDER = [
+  "模数",
+  "齿数",
+  "材质",
+  "外径（mm）",
+  "长（mm）",
+  "宽（mm）",
+  "高（mm）",
+  "孔径",
+  "类别",
+];
+
+function getPrecisionGearCardSpecs(product: CatalogProduct) {
+  return PRECISION_GEAR_CARD_SPEC_ORDER
+    .filter((label) => product.specs[label])
+    .slice(0, 2)
+    .map((label) => [label, product.specs[label]] as const);
+}
+
 const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
 const SILENT_SERVO_CATEGORY = "静音舵机";
 const CUSTOM_SERVO_CATEGORY = "非标准舵机定制";
@@ -362,6 +368,9 @@ export default function Home() {
   const [catalogCategory, setCatalogCategory] = useState("全部产品");
   const [catalogScale, setCatalogScale] = useState("all");
   const [catalogLimit, setCatalogLimit] = useState(24);
+  const [precisionGearQuery, setPrecisionGearQuery] = useState("");
+  const [precisionGearCategory, setPrecisionGearCategory] = useState("全部子类");
+  const [precisionGearLimit, setPrecisionGearLimit] = useState(24);
   const [selectedCatalogProduct, setSelectedCatalogProduct] = useState<CatalogProduct | null>(null);
 
   const matches = useMemo(() => getMatches(requirements), [requirements]);
@@ -392,6 +401,22 @@ export default function Home() {
     });
   }, [catalogCategory, catalogQuery, catalogScale]);
   const visibleCatalog = filteredCatalog.slice(0, catalogLimit);
+  const filteredPrecisionGears = useMemo(() => {
+    const query = precisionGearQuery.trim().toLowerCase();
+    return PRECISION_GEAR_PRODUCTS.filter((product) => {
+      if (precisionGearCategory !== "全部子类" && product.subCategory !== precisionGearCategory) return false;
+      if (!query) return true;
+      const haystack = [
+        product.name,
+        product.code,
+        product.subCategory,
+        ...Object.keys(product.specs),
+        ...Object.values(product.specs),
+      ].join(" ").toLowerCase();
+      return haystack.includes(query);
+    });
+  }, [precisionGearCategory, precisionGearQuery]);
+  const visiblePrecisionGears = filteredPrecisionGears.slice(0, precisionGearLimit);
   const needsEngineer =
     !top?.coreCompatible ||
     requirements.annualVolume === "50000件以上" ||
@@ -1087,6 +1112,93 @@ export default function Home() {
             </div>
           </div>
         </aside>
+
+        <div className="precision-gear-catalog" aria-label="精密齿轮配件产品卡片">
+          <div className="precision-gear-catalog-heading">
+            <div>
+              <p className="step-kicker">产品卡片目录</p>
+              <h4>精密齿轮配件 · 511 款</h4>
+            </div>
+            <p>小型卡片展示型号、子类和关键规格，点击图片可查看产品大图与完整参数。</p>
+          </div>
+          <div className="precision-gear-controls">
+            <input
+              value={precisionGearQuery}
+              onChange={(event) => {
+                setPrecisionGearQuery(event.target.value);
+                setPrecisionGearLimit(24);
+              }}
+              placeholder="搜索齿轮名称、编码、材质或规格"
+              aria-label="搜索精密齿轮配件"
+            />
+            <div className="precision-gear-pills" aria-label="精密齿轮子类筛选">
+              <button
+                type="button"
+                className={precisionGearCategory === "全部子类" ? "active" : ""}
+                onClick={() => {
+                  setPrecisionGearCategory("全部子类");
+                  setPrecisionGearLimit(24);
+                }}
+              >全部子类 · 511</button>
+              {PRECISION_GEAR_SUBCATEGORIES.map(([name, count]) => (
+                <button
+                  type="button"
+                  key={name}
+                  className={precisionGearCategory === name ? "active" : ""}
+                  onClick={() => {
+                    setPrecisionGearCategory(name);
+                    setPrecisionGearLimit(24);
+                  }}
+                >{name} · {count}</button>
+              ))}
+            </div>
+            <p className="precision-gear-result">找到 <strong>{filteredPrecisionGears.length}</strong> 款配件</p>
+          </div>
+
+          {visiblePrecisionGears.length > 0 ? (
+            <div className="precision-gear-grid">
+              {visiblePrecisionGears.map((product) => (
+                <article className="precision-gear-card" key={product.id}>
+                  <button
+                    type="button"
+                    className="precision-gear-image"
+                    onClick={() => setSelectedCatalogProduct(product)}
+                    aria-label={`查看${product.name}大图`}
+                  >
+                    <img src={product.image} alt={product.name} loading="lazy" />
+                    <span>点击查看大图</span>
+                  </button>
+                  <div className="precision-gear-card-body">
+                    <p>{product.subCategory}</p>
+                    <h5>{product.name}</h5>
+                    <code>{product.code}</code>
+                    <dl>
+                      {getPrecisionGearCardSpecs(product).map(([label, value]) => (
+                        <div key={label}><dt>{label}</dt><dd>{value}</dd></div>
+                      ))}
+                    </dl>
+                  </div>
+                </article>
+              ))}
+            </div>
+          ) : (
+            <div className="catalog-empty precision-gear-empty">
+              <strong>没有找到匹配的精密齿轮</strong>
+              <p>可以尝试减少关键词，或切换到“全部子类”。</p>
+              <button type="button" onClick={() => { setPrecisionGearQuery(""); setPrecisionGearCategory("全部子类"); setPrecisionGearLimit(24); }}>
+                清除筛选
+              </button>
+            </div>
+          )}
+
+          {precisionGearLimit < filteredPrecisionGears.length && (
+            <div className="load-more-wrap precision-gear-load-more">
+              <button type="button" onClick={() => setPrecisionGearLimit((current) => current + 24)}>
+                加载更多齿轮配件 <span>已显示 {visiblePrecisionGears.length} / {filteredPrecisionGears.length}</span>
+              </button>
+            </div>
+          )}
+        </div>
       </section>
 
       {selectedCatalogProduct && (
@@ -1139,7 +1251,11 @@ export default function Home() {
                 <h2 id="catalog-modal-title">{selectedCatalogProduct.name}</h2>
                 <code>{selectedCatalogProduct.code}</code>
                 <p className="catalog-source-note">
-                  {selectedCatalogProduct.page > 0 ? `官方产品目录第 ${selectedCatalogProduct.page} 页` : "商城产品资料 · 舵盘配件"}
+                  {selectedCatalogProduct.page > 0
+                    ? `官方产品目录第 ${selectedCatalogProduct.page} 页`
+                    : selectedCatalogProduct.category === "舵盘配件"
+                      ? "商城产品资料 · 舵盘配件"
+                      : "商城产品资料 · 精密齿轮配件"}
                 </p>
                 <div className="catalog-modal-highlight">
                   <span>产品尺寸</span>