✨ feat(supply-chain): 优化供应链模态框图片展示布局

- 修改图片容器布局，从单张图片改为双图片并排展示
- 调整图片容器定位方式，使用top-1/2和translate-y-[-50%]实现垂直居中
- 调整第一张图片宽度从960px改为853px，添加第二张图片(940px宽)
- 添加下拉框(滚动条)组件，优化长内容展示
- 改进图片样式，使用w-full和h-full确保图片填充容器
- 调整flex布局和间距，增强视觉层次感

docs/figma-jsx/供应链-弹出层-双图.md

@@ -0,0 +1,176 @@
+```jsx
+const img2 = "https://www.figma.com/api/mcp/asset/38a77663-6bea-43bc-921e-dcee03aeb3c0";
+const img3 = "https://www.figma.com/api/mcp/asset/df2d5a3c-f4e9-40a6-b80d-c5c1dda46236";
+const imgEllipse4119 = "https://www.figma.com/api/mcp/asset/692934c9-c686-4cf3-bfeb-e2e4cdc1bdd3";
+const img = "https://www.figma.com/api/mcp/asset/69a728c1-dffd-4aa6-91dd-d891f564fef3";
+const imgProperty1 = "https://www.figma.com/api/mcp/asset/0d09fc39-0332-4f5c-bb52-b6ce4d420579";
+const imgProperty2 = "https://www.figma.com/api/mcp/asset/652a7653-61f5-4880-b198-7aac3b2731e3";
+const imgEllipse4120 = "https://www.figma.com/api/mcp/asset/496e5a27-805d-44de-802f-1225e026600e";
+const imgUnion = "https://www.figma.com/api/mcp/asset/e6ca33f0-b03e-43ae-88da-f54cd906c64b";
+const img1 = "https://www.figma.com/api/mcp/asset/910131c7-ab23-40cc-add9-7e7e8df031f5";
+const imgUnion1 = "https://www.figma.com/api/mcp/asset/c8ea857b-d866-4e13-8971-91c000f3cd1e";
+
+function icon({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="返回icon" data-node-id="853:111934">
+      <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
+        <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
+          <div className="relative size-full" data-node-id="1412:67849">
+            <div className="absolute inset-[-1.25%]">
+              <img alt="" className="block max-w-none size-full" src={imgEllipse4119} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
+        <div className="flex-none h-[17.684px] rotate-[270deg] w-[31.641px]">
+          <div className="relative size-full" data-name="路径" data-node-id="853:111931">
+            <div className="absolute inset-[-50.89%_-28.44%]">
+              <img alt="" className="block max-w-none size-full" src={img} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+type ComponentProps = {
+  className?: string;
+  property1?: "光线右侧" | "光线左侧";
+};
+
+function Component({ className, property1 = "光线左侧" }: ComponentProps) {
+  if (property1 === "光线右侧") {
+    return (
+      <div className={className} data-name="Property 1=光线右侧" data-node-id="733:102120">
+        <div className="absolute inset-[-225%_-14.06%]">
+          <img alt="" className="block max-w-none size-full" src={imgProperty1} />
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className={className} data-name="Property 1=光线左侧" data-node-id="733:102121">
+      <div className="absolute inset-[-225%_-14.06%]">
+        <img alt="" className="block max-w-none size-full" src={imgProperty2} />
+      </div>
+    </div>
+  );
+}
+type TextProps = {
+  className?: string;
+  propValue?: "30px";
+  propValue1?: "特粗";
+  propValue2?: "居中对齐";
+};
+
+function Text({ className, propValue = "30px", propValue1 = "特粗", propValue2 = "居中对齐" }: TextProps) {
+  return (
+    <div className={className} data-name="字号=30px, 字重=特粗, 位置=居中对齐" data-node-id="635:42953">
+      <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[30px] text-center text-white whitespace-nowrap" data-node-id="635:42954">
+        <p className="leading-[32px]">Text line-30px</p>
+      </div>
+    </div>
+  );
+}
+
+function icon1({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="删除icon" data-node-id="853:113279">
+      <div className="absolute flex inset-[2.38%] items-center justify-center">
+        <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
+          <div className="relative size-full" data-node-id="1799:168252">
+            <div className="absolute inset-[-1.25%]">
+              <img alt="" className="block max-w-none size-full" src={imgEllipse4120} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex inset-[31.17%_32.27%] items-center justify-center">
+        <div className="flex-none h-[31.641px] rotate-[180deg] scale-y-[-100%] w-[29.787px]">
+          <div className="relative size-full" data-name="Union" data-node-id="853:113278">
+            <div className="absolute inset-[-28.44%_-30.21%]">
+              <img alt="" className="block max-w-none size-full" src={imgUnion} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component1({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="弹出框样式1" data-node-id="700:127510">
+      <img alt="" className="block max-w-none size-full" src={img1} />
+      <div className="absolute inset-[3.32%_1.37%]" data-name="Union" data-node-id="700:127508">
+        <img alt="" className="block max-w-none size-full" src={imgUnion1} />
+      </div>
+    </div>
+  );
+}
+
+export default function Component2() {
+  return (
+    <div className="bg-[rgba(33,33,33,0.6)] relative size-full" data-name="操控屏-2-种业•果蔬-果蔬首页-基地弹出数据" data-node-id="1443:70581">
+      <div className="absolute backdrop-blur-[5px] backdrop-filter bg-[rgba(35,31,32,0.5)] h-[1080px] left-[-0.5px] top-[0.13px] w-[1920px]" data-name="遮罩层" data-node-id="I1443:70581;1412:182610" />
+      <Component1 className="absolute h-[900px] left-1/2 top-[calc(50%+-6.28px)] translate-x-[-50%] translate-y-[-50%] w-[1600px]" />
+      <div className="absolute flex items-center justify-center right-[149px] size-[40px] top-[80px]">
+        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+          <icon1 className="relative size-[40px]" />
+        </div>
+      </div>
+      <div className="absolute contents left-[calc(50%+-0.06px)] top-[calc(50%+48.26px)] translate-x-[-50%] translate-y-[-50%]" data-name="图片" data-node-id="I1443:70581;1412:182635">
+        <div className="absolute h-[640px] left-[calc(50%+-0.06px)] overflow-clip rounded-[20px] top-[calc(50%+48.26px)] translate-x-[-50%] translate-y-[-50%] w-[1357px]" data-name="图片样式1" data-node-id="I1443:70581;1699:124081">
+          <div className="absolute content-stretch flex gap-[20px] items-center left-0 top-1/2 translate-y-[-50%]" data-node-id="I1443:70581;1699:124082">
+            <div className="h-[640px] overflow-clip relative rounded-[10px] shrink-0 w-[853px]" data-name="图片1" data-node-id="I1443:70581;1699:124083">
+              <div className="absolute h-[640px] left-0 top-1/2 translate-y-[-50%] w-[853.333px]" data-name="湖北农发种业老河口张集镇小麦种业示范基地 1" data-node-id="I1443:70581;1699:124532">
+                <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={img2} />
+              </div>
+            </div>
+            <div className="h-[640px] overflow-clip relative rounded-[10px] shrink-0 w-[940px]" data-name="图片2" data-node-id="I1443:70581;1699:124085">
+              <div className="absolute h-[640px] left-0 top-1/2 translate-y-[-50%] w-[1137.778px]" data-name="老河口张集镇小麦种业示范基地 1" data-node-id="I1443:70581;1699:124526">
+                <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={img3} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute contents inset-[926.48px_281.56px_147.52px_281.44px]" data-name="下拉框" data-node-id="I1443:70581;1699:124617">
+        <div className="absolute flex inset-[926.48px_281.56px_147.52px_281.44px] items-center justify-center">
+          <div className="flex-none h-[1357px] rotate-[270deg] w-[6px]">
+            <div className="bg-[rgba(255,255,255,0.12)] rounded-[12px] shadow-[0px_40px_70px_0px_rgba(0,0,0,0.24)] size-full" data-name="bg" data-node-id="I1443:70581;1699:124618" />
+          </div>
+        </div>
+        <div className="absolute flex inset-[926.48px_745.3px_147.52px_281.44px] items-center justify-center">
+          <div className="flex-none h-[893.259px] rotate-[270deg] w-[6px]">
+            <div className="bg-[rgba(255,255,255,0.12)] rounded-[10px] shadow-[0px_40px_70px_0px_rgba(0,0,0,0.24)] size-full" data-name="bg" data-node-id="I1443:70581;1699:124619" />
+          </div>
+        </div>
+      </div>
+      <div className="absolute content-stretch flex gap-[30px] h-[125px] items-center justify-center left-1/2 top-[123.22px] translate-x-[-50%] w-[1200px]" data-name="标题" data-node-id="I1443:70581;1412:182646">
+        <Component className="h-[4px] relative shrink-0 w-[64px]" />
+        <Text className="box-border content-stretch flex gap-[10px] items-center justify-center px-0 py-[4px] relative shrink-0" />
+        <Component className="h-[4px] relative shrink-0 w-[64px]" property1="光线右侧" />
+      </div>
+      <div className="absolute flex items-center justify-center left-[1770px] size-[90px] top-[900px]">
+        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+          <icon className="relative size-[90px]" />
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
+1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
+2. Convert React syntax to the target framework/library
+3. Transform all Tailwind classes to the target styling system while preserving exact visual design
+4. Follow the project's existing patterns and conventions
+DO NOT install any Tailwind as a dependency unless the user instructs you to do so.
+
+Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.
+These styles are contained in the design: 主色/产业-种业: #5DEF8B, 渐变/2-蓝色: .
+Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: <img src={image} />. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.
+IMPORTANT: After you call this tool, you MUST call get_screenshot to get a screenshot of the node for context.

src/client/home/pages/SupplyChainDashboards/components/SupplyChainModal.tsx

@@ -101,15 +101,39 @@ const SupplyChainModal: React.FC<SupplyChainModalProps> = ({
 
         {/* 图片样式1 */}
         <div data-layer="图片样式1" className="absolute w-[1357px] h-[640px] left-[281.50px] top-[268.72px] rounded-[20px] overflow-hidden">
-          <div data-layer="Frame 1321316691" className="absolute left-[199px] top-0 inline-flex justify-start items-center gap-5">
-            <div data-layer="图片1" className="w-[960px] h-[640px] relative rounded-[10px] overflow-hidden">
+          <div data-layer="Frame 1321316691" className="absolute left-0 top-1/2 translate-y-[-50%] content-stretch flex gap-[20px] items-center">
+            {/* 第一张图片 */}
+            <div data-layer="图片1" className="h-[640px] overflow-clip relative rounded-[10px] shrink-0 w-[853px]">
               <img
-                data-layer="省储备粮咸宁库 1"
-                className="w-[959.88px] h-[640px] left-[0.06px] top-0 absolute object-cover"
+                data-layer="湖北农发种业老河口张集镇小麦种业示范基地 1"
+                className="w-full h-full object-cover"
                 src={imageUrl}
                 alt={title}
               />
             </div>
+            {/* 第二张图片 */}
+            <div data-layer="图片2" className="h-[640px] overflow-clip relative rounded-[10px] shrink-0 w-[940px]">
+              <img
+                data-layer="老河口张集镇小麦种业示范基地 1"
+                className="w-full h-full object-cover"
+                src={imageUrl}
+                alt={title}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* 下拉框（滚动条） */}
+        <div data-layer="下拉框" className="absolute contents inset-[926.48px_281.56px_147.52px_281.44px]">
+          <div className="absolute flex inset-[926.48px_281.56px_147.52px_281.44px] items-center justify-center">
+            <div className="flex-none h-[1357px] rotate-[270deg] w-[6px]">
+              <div className="bg-[rgba(255,255,255,0.12)] rounded-[12px] shadow-[0px_40px_70px_0px_rgba(0,0,0,0.24)] size-full" data-name="bg" />
+            </div>
+          </div>
+          <div className="absolute flex inset-[926.48px_745.3px_147.52px_281.44px] items-center justify-center">
+            <div className="flex-none h-[893.259px] rotate-[270deg] w-[6px]">
+              <div className="bg-[rgba(255,255,255,0.12)] rounded-[10px] shadow-[0px_40px_70px_0px_rgba(0,0,0,0.24)] size-full" data-name="bg" />
+            </div>
           </div>
         </div>