Improve catalog detail modal with size images

app/page.tsx

@@ -7,7 +7,7 @@ import {
   type CatalogProduct,
 } from "./catalog-data";
 import { STEERING_WHEEL_ACCESSORIES } from "./catalog-accessories";
-import { getCatalogProductImage } from "./catalog-image-map";
+import { getCatalogProductDimensionImage, getCatalogProductImage } from "./catalog-image-map";
 
 const CATALOG_PRODUCTS = [...RAW_CATALOG_PRODUCTS, ...STEERING_WHEEL_ACCESSORIES].map((product) => ({
   ...product,
@@ -89,6 +89,16 @@ 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 SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
 const SILENT_SERVO_CATEGORY = "静音舵机";
 const CUSTOM_SERVO_CATEGORY = "非标准舵机定制";
@@ -387,6 +397,12 @@ export default function Home() {
     requirements.annualVolume === "50000件以上" ||
     Number(requirements.firstOrderQuantity) >= 1000 ||
     requirements.application === "工业设备";
+  const selectedCatalogDimensionImage = selectedCatalogProduct
+    ? getCatalogProductDimensionImage(selectedCatalogProduct)
+    : null;
+  const selectedCatalogDimensionSummary = selectedCatalogProduct
+    ? getProductDimensionSummary(selectedCatalogProduct)
+    : "";
 
   function startSelection() {
     setStage(1);
@@ -1088,20 +1104,42 @@ export default function Home() {
               aria-label="关闭产品详情"
             >×</button>
             <div className="catalog-modal-product">
-              <div className="catalog-modal-image">
-                {selectedCatalogProduct.image ? (
-                  <img src={selectedCatalogProduct.image} alt={selectedCatalogProduct.name} />
-                ) : (
-                  <span className="catalog-placeholder">GAUDELOT</span>
-                )}
+              <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>
+                </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>
               </div>
-              <div>
+              <div className="catalog-modal-product-info">
                 <p className="step-kicker">{selectedCatalogProduct.category}</p>
                 <h2 id="catalog-modal-title">{selectedCatalogProduct.name}</h2>
                 <code>{selectedCatalogProduct.code}</code>
                 <p className="catalog-source-note">
                   {selectedCatalogProduct.page > 0 ? `官方产品目录第 ${selectedCatalogProduct.page} 页` : "商城产品资料 · 舵盘配件"}
                 </p>
+                <div className="catalog-modal-highlight">
+                  <span>产品尺寸</span>
+                  <strong>{selectedCatalogDimensionSummary}</strong>
+                </div>
               </div>
             </div>
             <div className="catalog-spec-table">