Refine catalog modal gallery layout

app/page.tsx

@@ -31,6 +31,8 @@ type Requirements = {
   painPoint: string;
 };
 
+type CatalogVisualMode = "main" | "size";
+
 const APPLICATIONS = [
   { name: "AI毛绒", note: "头部、耳朵、手臂等轻量动作" },
   { name: "智能玩具", note: "互动机构、表情和行走结构" },
@@ -76,16 +78,6 @@ function getFeaturedSpecs(product: CatalogProduct) {
     .map((label) => [label, product.specs[label]] as const);
 }
 
-function getProductDimensionSummary(product: CatalogProduct) {
-  const directSize = product.specs["产品尺寸"] ?? product.specs["外形尺寸"];
-  if (directSize) return directSize;
-
-  const dimensions = ["长（mm）", "宽（mm）", "高（mm）"]
-    .map((label) => product.specs[label])
-    .filter(Boolean);
-  return dimensions.length > 0 ? dimensions.join(" × ") : "尺寸图待补充";
-}
-
 const PRECISION_GEAR_CARD_SPEC_ORDER = [
   "模数",
   "齿数",
@@ -372,6 +364,7 @@ export default function Home() {
   const [precisionGearCategory, setPrecisionGearCategory] = useState("全部子类");
   const [precisionGearLimit, setPrecisionGearLimit] = useState(24);
   const [selectedCatalogProduct, setSelectedCatalogProduct] = useState<CatalogProduct | null>(null);
+  const [catalogVisualMode, setCatalogVisualMode] = useState<CatalogVisualMode>("main");
 
   const matches = useMemo(() => getMatches(requirements), [requirements]);
   const topMatches = matches.slice(0, 3);
@@ -425,9 +418,11 @@ export default function Home() {
   const selectedCatalogDimensionImage = selectedCatalogProduct
     ? getCatalogProductDimensionImage(selectedCatalogProduct)
     : null;
-  const selectedCatalogDimensionSummary = selectedCatalogProduct
-    ? getProductDimensionSummary(selectedCatalogProduct)
-    : "";
+
+  function openCatalogProduct(product: CatalogProduct) {
+    setSelectedCatalogProduct(product);
+    setCatalogVisualMode("main");
+  }
 
   function startSelection() {
     setStage(1);
@@ -866,7 +861,7 @@ export default function Home() {
                     <button
                       type="button"
                       className="recommendation-image-wrap"
-                      onClick={() => setSelectedCatalogProduct(match.product)}
+                      onClick={() => openCatalogProduct(match.product)}
                       aria-label={`查看${match.product.name}大图`}
                     >
                       <img src={match.product.image} alt={match.product.name} />
@@ -1052,7 +1047,7 @@ export default function Home() {
                 <button
                   type="button"
                   className="catalog-image-button"
-                  onClick={() => setSelectedCatalogProduct(product)}
+                  onClick={() => openCatalogProduct(product)}
                   aria-label={`查看${product.name}详情`}
                 >
                   {product.image ? (
@@ -1071,7 +1066,7 @@ export default function Home() {
                       <div key={label}><dt>{label}</dt><dd>{value}</dd></div>
                     ))}
                   </dl>
-                  <button type="button" onClick={() => setSelectedCatalogProduct(product)}>
+                  <button type="button" onClick={() => openCatalogProduct(product)}>
                     查看完整参数 <span>→</span>
                   </button>
                 </div>
@@ -1162,7 +1157,7 @@ export default function Home() {
                   <button
                     type="button"
                     className="precision-gear-image"
-                    onClick={() => setSelectedCatalogProduct(product)}
+                    onClick={() => openCatalogProduct(product)}
                     aria-label={`查看${product.name}大图`}
                   >
                     <img src={product.image} alt={product.name} loading="lazy" />
@@ -1221,29 +1216,35 @@ export default function Home() {
               aria-label="关闭产品详情"
             >×</button>
             <div className="catalog-modal-product">
-              <div className="catalog-modal-visuals">
-                <div className="catalog-modal-visual-card">
-                  <span className="catalog-modal-visual-label">产品主图</span>
-                  <div className="catalog-modal-image">
-                    {selectedCatalogProduct.image ? (
-                      <img src={selectedCatalogProduct.image} alt={selectedCatalogProduct.name} />
-                    ) : (
-                      <span className="catalog-placeholder">GAUDELOT</span>
-                    )}
+              <div className="catalog-modal-visual-card">
+                <div className="catalog-modal-visual-toolbar">
+                  <span className="catalog-modal-visual-label">产品图片</span>
+                  <div className="catalog-modal-gallery-switch" role="tablist" aria-label="切换产品图片">
+                    <button
+                      type="button"
+                      className={catalogVisualMode === "main" ? "active" : ""}
+                      onClick={() => setCatalogVisualMode("main")}
+                      role="tab"
+                      aria-selected={catalogVisualMode === "main"}
+                    >产品主图</button>
+                    <button
+                      type="button"
+                      className={catalogVisualMode === "size" ? "active" : ""}
+                      onClick={() => setCatalogVisualMode("size")}
+                      disabled={!selectedCatalogDimensionImage}
+                      role="tab"
+                      aria-selected={catalogVisualMode === "size"}
+                    >产品尺寸</button>
                   </div>
                 </div>
-                <div className="catalog-modal-visual-card">
-                  <span className="catalog-modal-visual-label">产品尺寸</span>
-                  <div className="catalog-modal-size-image">
-                    {selectedCatalogDimensionImage ? (
-                      <img src={selectedCatalogDimensionImage} alt={`${selectedCatalogProduct.name} 产品尺寸`} />
-                    ) : (
-                      <div className="catalog-modal-size-empty">
-                        <strong>{selectedCatalogDimensionSummary}</strong>
-                        <small>当前目录未提供对应尺寸图</small>
-                      </div>
-                    )}
-                  </div>
+                <div className="catalog-modal-image">
+                  {catalogVisualMode === "size" && selectedCatalogDimensionImage ? (
+                    <img src={selectedCatalogDimensionImage} alt={`${selectedCatalogProduct.name} 产品尺寸`} />
+                  ) : selectedCatalogProduct.image ? (
+                    <img src={selectedCatalogProduct.image} alt={selectedCatalogProduct.name} />
+                  ) : (
+                    <span className="catalog-placeholder">GAUDELOT</span>
+                  )}
                 </div>
               </div>
               <div className="catalog-modal-product-info">
@@ -1257,10 +1258,6 @@ export default function Home() {
                       ? "商城产品资料 · 舵盘配件"
                       : "商城产品资料 · 精密齿轮配件"}
                 </p>
-                <div className="catalog-modal-highlight">
-                  <span>产品尺寸</span>
-                  <strong>{selectedCatalogDimensionSummary}</strong>
-                </div>
               </div>
             </div>
             <div className="catalog-spec-table">