✨ feat(docs): 添加泛盐和鲜食页面的figma-jsx文档

- 新增泛盐页面文档，包含完整的React组件和样式定义
- 新增鲜食页面文档，包含完整的React组件和样式定义
- 两个页面都包含文本组件、图标组件、导航组件和地图组件
- 组件支持多种属性配置，包括字号、字重、对齐方式等
- 包含完整的样式系统和设计token定义

docs/figma-jsx/泛盐.md

@@ -0,0 +1,477 @@
+const imgProperty1 = "https://www.figma.com/api/mcp/asset/d7e8a26f-8f20-4ceb-9d96-5a5a957ee950";
+const imgUnion = "https://www.figma.com/api/mcp/asset/312a0cc5-3273-4682-92b4-5877608aed5c";
+const img = "https://www.figma.com/api/mcp/asset/2d3acf26-0e79-4836-b954-05d2a91a33a3";
+const img1 = "https://www.figma.com/api/mcp/asset/9337f60d-883c-46a6-8198-8555aff43851";
+const imgGroup1597881806 = "https://www.figma.com/api/mcp/asset/9c9ca8a3-e505-4745-8bba-7ba092246583";
+const img2 = "https://www.figma.com/api/mcp/asset/8cf1a951-129e-4c4a-80bf-ea81bb242391";
+const img3 = "https://www.figma.com/api/mcp/asset/112341aa-05bd-4e94-add1-44f1dfec3e91";
+const img4 = "https://www.figma.com/api/mcp/asset/99633dce-4161-4261-9e85-f3bb4c3b4c7b";
+const img5 = "https://www.figma.com/api/mcp/asset/5f6c3462-db90-44a0-9d19-004eafadf0f4";
+const imgGroup1597881805 = "https://www.figma.com/api/mcp/asset/9b550072-1c83-450f-8df3-416678fb9924";
+const img6 = "https://www.figma.com/api/mcp/asset/13fe10f2-23f0-45dc-8741-9096c96e15f7";
+const img7 = "https://www.figma.com/api/mcp/asset/0b96397c-6794-48df-ba81-bc494e6dbaa3";
+const imgUnion1 = "https://www.figma.com/api/mcp/asset/78e76d06-0a77-42fa-80a5-19b7a9615bc3";
+const imgUnion2 = "https://www.figma.com/api/mcp/asset/b3acd964-7992-496f-9902-ba907628a29b";
+const imgUnion3 = "https://www.figma.com/api/mcp/asset/c55d096e-75a2-4909-b62c-c84e6a31a96f";
+const imgUnion4 = "https://www.figma.com/api/mcp/asset/ddceb7e5-b5c2-40f2-a821-6a6909da1025";
+const imgUnion5 = "https://www.figma.com/api/mcp/asset/1b59cf32-811a-49d6-be63-b644ad88047a";
+const imgUnion6 = "https://www.figma.com/api/mcp/asset/bad982d6-6b66-421f-9c6f-f524e706d941";
+const imgUnion7 = "https://www.figma.com/api/mcp/asset/728cb986-5f47-43d2-be90-b2535304d3f8";
+const imgUnion8 = "https://www.figma.com/api/mcp/asset/b15af3c0-a5a4-4e1e-a86f-facb1ffbd38e";
+const imgUnion9 = "https://www.figma.com/api/mcp/asset/7606782a-27fc-4681-8c23-985e787c1698";
+const imgUnion10 = "https://www.figma.com/api/mcp/asset/7111cd2f-44f3-4b0f-a1d7-1165d338f71b";
+const imgUnion11 = "https://www.figma.com/api/mcp/asset/c15327da-51b3-4e45-a39e-a1e3a97405ab";
+const imgUnion12 = "https://www.figma.com/api/mcp/asset/15510633-94a7-4e8e-9177-abba13250b9a";
+const imgUnion13 = "https://www.figma.com/api/mcp/asset/30ece914-7c6f-4d2b-ac64-f61b6cef0978";
+const imgUnion14 = "https://www.figma.com/api/mcp/asset/b72aafd1-638a-4c6a-8829-44f39f645ad6";
+const imgUnion15 = "https://www.figma.com/api/mcp/asset/fc070e41-f0dc-42e9-bca5-27138bdc9a1e";
+const imgUnion16 = "https://www.figma.com/api/mcp/asset/c133d60a-5bb0-4e73-9a15-e6a0f5cc6d8b";
+const imgUnion17 = "https://www.figma.com/api/mcp/asset/58930ab8-4a9a-477b-9bec-41f2cd22cdb5";
+const img8 = "https://www.figma.com/api/mcp/asset/3d7c9841-ac0f-451a-bb41-1c598ba9eb1f";
+const imgGroup1158 = "https://www.figma.com/api/mcp/asset/2b455234-fbca-47b7-b55d-66d26aa4df8a";
+const img9 = "https://www.figma.com/api/mcp/asset/cf94951d-f067-46ef-9458-3984d322915a";
+const img10 = "https://www.figma.com/api/mcp/asset/cc6d0085-447a-4403-8194-d3aa0cf709ec";
+type TextProps = {
+  className?: string;
+  propValue?: "24px" | "26px" | "34px";
+  propValue1?: "特粗";
+  propValue2?: "左对齐" | "右对齐" | "居中对齐";
+};
+
+function Text({ className, propValue = "34px", propValue1 = "特粗", propValue2 = "左对齐" }: TextProps) {
+  if (propValue === "24px" && propValue1 === "特粗" && propValue2 === "左对齐") {
+    return (
+      <div className={className} data-name="字号=24px, 字重=特粗, 位置=左对齐" data-node-id="632:88182">
+        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap" data-node-id="632:88183">
+          <p className="leading-[32px]">Text line-24px</p>
+        </div>
+      </div>
+    );
+  }
+  if (propValue === "26px" && propValue1 === "特粗" && propValue2 === "左对齐") {
+    return (
+      <div className={className} data-name="字号=26px, 字重=特粗, 位置=左对齐" data-node-id="635:42943">
+        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[26px] text-white whitespace-nowrap" data-node-id="635:42944">
+          <p className="leading-[32px]">Text line-26px</p>
+        </div>
+      </div>
+    );
+  }
+  if (propValue === "34px" && propValue1 === "特粗" && propValue2 === "居中对齐") {
+    return (
+      <div className={className} data-name="字号=34px, 字重=特粗, 位置=居中对齐" data-node-id="635:42955">
+        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-center text-white whitespace-nowrap" data-node-id="635:42956">
+          <p className="leading-[32px]">Text line-34px</p>
+        </div>
+      </div>
+    );
+  }
+  if (propValue === "34px" && propValue1 === "特粗" && propValue2 === "右对齐") {
+    return (
+      <div className={className} data-name="字号=34px, 字重=特粗, 位置=右对齐" data-node-id="635:42959">
+        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-right text-white whitespace-nowrap" data-node-id="635:42960">
+          <p className="leading-[32px]">Text line-34px</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className={className} data-name="字号=34px, 字重=特粗, 位置=左对齐" data-node-id="635:42949">
+      <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-white whitespace-nowrap" data-node-id="635:42950">
+        <p className="leading-[32px]">Text line-34px</p>
+      </div>
+    </div>
+  );
+}
+
+function Component({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="数据样式" data-node-id="1201:47976">
+      <div className="absolute bg-gradient-to-b border-2 border-[#5e697e] border-solid from-[#474e60] inset-0 rounded-[6px] to-[#2b2f39]" data-name="11" data-node-id="1201:47971" />
+      <div className="absolute flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] inset-[16.16%_13.74%] justify-center leading-[0] not-italic text-[60px] text-center text-white tracking-[6px]" data-node-id="1201:47972">
+        <p className="leading-[normal] whitespace-pre-wrap">6</p>
+      </div>
+    </div>
+  );
+}
+type iconProps = {
+  className?: string;
+  property1?: "油脂" | "泛盐" | "粮食" | "鲜食";
+};
+
+function icon({ className, property1 = "粮食" }: iconProps) {
+  return (
+    <div className={className} data-name="Property 1=粮食" data-node-id="1201:31235">
+      <div className="absolute inset-[13%_21.7%]" data-name="Union" data-node-id="1198:61730">
+        <img alt="" className="block max-w-none size-full" src={imgUnion} />
+      </div>
+    </div>
+  );
+}
+type Component1Props = {
+  className?: string;
+  property1?: "上";
+};
+
+function Component1({ className, property1 = "上" }: Component1Props) {
+  return (
+    <div className={className} data-name="Property 1=上" data-node-id="1201:48133">
+      <div className="absolute content-stretch flex flex-col gap-[40px] h-[944px] items-center justify-center left-0 right-[37.7%] top-1/2 translate-y-[-50%]" data-name="导航内容" data-node-id="1201:47870">
+        <div className="bg-[rgba(255,255,255,0.05)] box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px]" data-name="111" data-node-id="1201:47862">
+          <icon className="overflow-clip relative shrink-0 size-[50px]" />
+          <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" data-name="text" data-node-id="1201:47859">
+            <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[32px] not-italic relative shrink-0 text-[26px] text-white whitespace-nowrap" data-node-id="I1201:47859;635:42944">
+              <p className="mb-0">粮</p>
+              <p className="mb-0">&nbsp;</p>
+              <p>食</p>
+            </div>
+          </div>
+        </div>
+        <div className="box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px]" data-name="222" data-node-id="1201:47864">
+          <div className="overflow-clip relative shrink-0 size-[50px]" data-name="产业icon" data-node-id="1201:47865">
+            <div className="absolute inset-[13%_26.2%]" data-name="Vector" data-node-id="I1201:47865;1200:31218">
+              <div className="absolute inset-0" style={{ "--fill-0": "rgba(255, 255, 255, 1)" } as React.CSSProperties}>
+                <img alt="" className="block max-w-none size-full" src={img} />
+              </div>
+            </div>
+          </div>
+          <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" data-name="text" data-node-id="1201:47866">
+            <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[32px] not-italic relative shrink-0 text-[26px] text-[rgba(255,255,255,0.5)] whitespace-nowrap" data-node-id="I1201:47866;635:42944">
+              <p className="mb-0">油</p>
+              <p className="mb-0">&nbsp;</p>
+              <p>脂</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute bottom-0 flex items-center justify-center left-[25.05%] right-0 top-0">
+        <div className="flex-none h-[1078.893px] rotate-[180deg] scale-y-[-100%] w-[113.088px]">
+          <div className="relative size-full" data-name="光标左侧" data-node-id="1201:48121">
+            <div className="absolute bottom-[-0.04%] left-0 right-0 top-[-0.04%]">
+              <img alt="" className="block max-w-none size-full" src={img1} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component2({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="弹出框样式2" data-node-id="741:54163">
+      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center leading-[0] relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]">
+        <div className="flex-none rotate-[90deg] scale-y-[-100%]">
+          <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid justify-items-start relative" data-node-id="1207:33739">
+            <div className="col-[1] h-[80px] ml-[7.5px] mt-[17px] relative row-[1] w-[2px]" data-node-id="1207:33513">
+              <div className="absolute bottom-[-1.25%] left-0 right-[-50%] top-[-1.25%]">
+                <img alt="" className="block max-w-none size-full" src={imgGroup1597881806} />
+              </div>
+            </div>
+            <div className="col-[1] ml-0 mt-0 relative row-[1] size-[17px]" data-name="圆圈圈" data-node-id="741:53539">
+              <img alt="" className="block max-w-none size-full" src={img2} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="h-[320px] relative shrink-0 w-[476px]" data-name="框" data-node-id="741:53541">
+        <div className="absolute inset-[-0.06%_-0.09%_-0.06%_-0.04%]">
+          <img alt="" className="block max-w-none size-full" src={img3} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component3({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="定位点/产业链" data-node-id="1205:31870">
+      <div className="absolute inset-[10%_13.79%]" data-name="底部" data-node-id="1201:48987">
+        <img alt="" className="block max-w-none size-full" src={img4} />
+      </div>
+      <div className="absolute bottom-[40.42%] left-1/4 overflow-clip right-1/4 shadow-[0px_0px_6px_0px_#4593ff] top-[17.92%]" data-name="产业链" data-node-id="1205:31863">
+        <div className="absolute inset-[5.36%_10.72%]" data-name="Union" data-node-id="I1205:31863;1205:31861">
+          <img alt="" className="block max-w-none size-full" src={img5} />
+        </div>
+        <div className="absolute inset-0 pointer-events-none shadow-[inset_0px_0px_3px_0px_#ffffff]" />
+      </div>
+    </div>
+  );
+}
+
+function Component4({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="定位点/基地" data-node-id="1205:31871">
+      <div className="absolute inset-[12.5%_8.66%]" data-node-id="1205:32108">
+        <img alt="" className="block max-w-none size-full" src={imgGroup1597881805} />
+      </div>
+      <div className="absolute inset-[27.5%_23%] overflow-clip" data-name="产业icon" data-node-id="1204:31851">
+        <div className="absolute inset-[13%_21.7%]" data-name="Union" data-node-id="I1204:31851;1198:61730">
+          <div className="absolute inset-[-20.02%_-26.17%]">
+            <img alt="" className="block max-w-none size-full" src={img6} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component5({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="边" data-node-id="84:21868">
+      <img alt="" className="block max-w-none size-full" src={img7} />
+    </div>
+  );
+}
+
+function Component6({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="线" data-node-id="84:21850">
+      <div className="absolute inset-[45.14%_13.47%_22.05%_68.8%]" data-name="Union" data-node-id="84:21851">
+        <div className="absolute inset-[-0.28%_-0.28%_-0.27%_-0.35%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion1} />
+        </div>
+      </div>
+      <div className="absolute inset-[69.45%_7.91%_11.34%_79.45%]" data-name="Union" data-node-id="84:21852">
+        <div className="absolute inset-[-0.36%_-0.44%_-0.33%_-0.45%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion2} />
+        </div>
+      </div>
+      <div className="absolute bottom-[58.34%] left-[13.82%] right-[58.52%] top-0" data-name="Union" data-node-id="84:21853">
+        <div className="absolute inset-[-0.16%_-0.17%_-0.16%_-0.25%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion3} />
+        </div>
+      </div>
+      <div className="absolute inset-[40.22%_52.11%_21.49%_24.35%]" data-name="Union" data-node-id="84:21854">
+        <div className="absolute inset-[-0.17%_-0.21%_-0.2%_-0.28%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion4} />
+        </div>
+      </div>
+      <div className="absolute inset-[15.1%_38.74%_51.84%_30.9%]" data-name="Union" data-node-id="84:21855">
+        <div className="absolute inset-[-0.2%_-0.17%_-0.22%_-0.17%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion5} />
+        </div>
+      </div>
+      <div className="absolute inset-[62.63%_13.38%_23.24%_79.12%]" data-name="Union" data-node-id="84:21856">
+        <div className="absolute inset-[-0.45%_-0.62%_-0.6%_-0.65%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion6} />
+        </div>
+      </div>
+      <div className="absolute inset-[39.2%_33.9%_32.16%_45.04%]" data-name="Union" data-node-id="84:21857">
+        <div className="absolute inset-[-0.26%_-0.43%_-0.35%_-0.33%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion7} />
+        </div>
+      </div>
+      <div className="absolute inset-[33.43%_19.83%_31.88%_63.81%]" data-name="Union" data-node-id="84:21858">
+        <div className="absolute inset-[-0.19%_-0.36%_-0.2%_-0.31%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion8} />
+        </div>
+      </div>
+      <div className="absolute inset-[61.63%_26.15%_9.48%_37%]" data-name="Union" data-node-id="84:21859">
+        <div className="absolute inset-[-0.27%_-0.13%_-0.27%_-0.21%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion9} />
+        </div>
+      </div>
+      <div className="absolute bottom-[16.35%] left-[77.75%] right-0 top-[39.25%]" data-name="Union" data-node-id="84:21860">
+        <div className="absolute inset-[-0.15%_-0.22%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion10} />
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-[66.67%] right-[14.92%] top-[70.14%]" data-name="Union" data-node-id="84:21861">
+        <div className="absolute inset-[-0.22%_-0.27%_-0.22%_-0.26%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion11} />
+        </div>
+      </div>
+      <div className="absolute inset-[19.86%_25.75%_54.08%_56.23%]" data-name="Union" data-node-id="84:21862">
+        <div className="absolute inset-[-0.28%_-0.27%_-0.49%_-0.27%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion12} />
+        </div>
+      </div>
+      <div className="absolute bottom-[2%] left-0 right-[70.7%] top-[44.26%]" data-name="Union" data-node-id="84:21863">
+        <div className="absolute inset-[-0.12%_-0.16%_-0.14%_-0.18%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion13} />
+        </div>
+      </div>
+      <div className="absolute inset-[64.64%_29.68%_24.46%_58.95%]" data-name="Union" data-node-id="84:21864">
+        <div className="absolute inset-[-0.59%_-0.41%_-0.67%_-0.42%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion14} />
+        </div>
+      </div>
+      <div className="absolute inset-[61.94%_39.82%_24.69%_53.29%]" data-name="Union" data-node-id="84:21865">
+        <div className="absolute inset-[-0.64%_-0.74%_-0.48%_-0.82%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion15} />
+        </div>
+      </div>
+      <div className="absolute inset-[55.88%_34.28%_31.77%_54.46%]" data-name="Union" data-node-id="84:21866">
+        <div className="absolute inset-[-0.54%_-0.41%_-0.57%_-0.41%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion16} />
+        </div>
+      </div>
+      <div className="absolute inset-[33.35%_66.33%_53.33%_20.28%]" data-name="Union" data-node-id="84:21867">
+        <div className="absolute inset-[-0.55%_-0.49%_-0.53%_-0.4%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion17} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component7({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="导航底框" data-node-id="631:36462">
+      <div className="absolute bottom-[18.95%] left-0 right-0 top-0" data-name="1" data-node-id="631:36440">
+        <div className="absolute inset-[-181.3%_-19.68%_-413.77%_-19.68%]">
+          <img alt="" className="block max-w-none size-full" src={img8} />
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-[27.44%] right-[27.44%] top-[62.9%]" data-node-id="631:36441">
+        <div className="absolute inset-[-257.75%_-17.4%]">
+          <img alt="" className="block max-w-none size-full" src={imgGroup1158} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component8({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="底部网格" data-node-id="631:69869">
+      <div className="absolute bottom-[-71.42%] content-stretch flex flex-col items-start left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px_175.624px] mask-size-[1920px_1080px] right-0 top-[-16.26%]" data-name="底部内容" data-node-id="631:69865" style={{ maskImage: `url('${img9}')` }}>
+        <div className="h-[1013.464px] relative shrink-0 w-[1920px]" data-name="网格" data-node-id="631:69866">
+          <img alt="" className="block max-w-none size-full" src={img10} />
+        </div>
+        <div className="h-[1013.464px] relative shrink-0 w-[1920px]" data-name="网格" data-node-id="631:69867">
+          <img alt="" className="block max-w-none size-full" src={img10} />
+        </div>
+      </div>
+    </div>
+  );
+}
+type Component9Props = {
+  className?: string;
+  property1?: "供应链专用界面";
+};
+
+function Component9({ className, property1 = "供应链专用界面" }: Component9Props) {
+  return (
+    <div className={className} data-name="Property 1=供应链专用界面" data-node-id="1486:134453">
+      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
+        <img alt="" className="absolute max-w-none object-50%-50% object-cover size-full" src={imgProperty1} />
+        <div className="absolute bg-[rgba(0,79,154,0.1)] inset-0" />
+      </div>
+      <div className="absolute contents left-0 top-0" data-node-id="1486:133993" />
+    </div>
+  );
+}
+
+export default function Component10() {
+  return (
+    <div className="bg-[rgba(33,33,33,0.6)] relative size-full" data-name="操控屏-4-鲜食 • 泛盐-泛盐首页-基地弹出数据" data-node-id="1443:80521">
+      <div className="absolute contents left-0 top-0" data-name="我是底部" data-node-id="I1443:80521;1412:199413">
+        <Component9 className="absolute h-[1080px] left-0 overflow-clip top-0 w-[1920px]" />
+        <Component8 className="absolute h-[1080px] left-0 top-0 w-[1920px]" />
+        <Component7 className="absolute h-[71.119px] left-[526.95px] top-[40px] w-[866.265px]" />
+        <Text className="absolute box-border content-stretch flex gap-[10px] items-center justify-center left-1/2 px-0 py-[4px] top-[40px] translate-x-[-50%]" propValue2="居中对齐" />
+      </div>
+      <div className="absolute content-stretch flex flex-col gap-[10px] items-end right-[80px] top-[150px]" data-name="1+！" data-node-id="I1443:80521;1412:199419">
+        <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+        <Text className="box-border content-stretch flex gap-[10px] h-[77px] items-center justify-end px-0 py-[4px] relative shrink-0 w-full" propValue2="右对齐" />
+        <Text className="box-border content-stretch flex gap-[10px] items-center justify-end px-0 py-[4px] relative shrink-0" propValue2="右对齐" />
+      </div>
+      <div className="absolute contents left-[529.88px] top-[calc(50%+33.79px)] translate-y-[-50%]" data-name="地图" data-node-id="I1443:80521;1412:206775">
+        <div className="absolute contents left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]" data-name="地图" data-node-id="I1443:80521;1412:206776">
+          <Component6 className="absolute inset-[19.27%_4.17%_13.01%_27.6%]" />
+          <Component5 className="absolute h-[731.454px] left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]" />
+        </div>
+        <Component4 className="absolute h-[48px] left-[985px] top-[610.22px] w-[40px]" />
+        <Component4 className="absolute h-[48px] left-[1125.81px] top-[409.52px] w-[40px]" />
+        <Component4 className="absolute h-[48px] left-[1229.57px] top-[570px] w-[40px]" />
+        <Component4 className="absolute h-[48px] left-[1445px] top-[560.35px] w-[40px]" />
+        <Component3 className="absolute h-[48px] left-[949.08px] top-[680.31px] w-[40px]" />
+        <Component3 className="absolute h-[48px] left-[1178.36px] top-[418.4px] w-[40px]" />
+        <Component3 className="absolute h-[72px] left-[1319.74px] top-[441.51px] w-[60px]" />
+        <Component3 className="absolute h-[48px] left-[1403.37px] top-[603.77px] w-[40px]" />
+      </div>
+      <div className="absolute bottom-[80px] content-stretch flex items-center left-1/2 translate-x-[-50%]" data-name="说明" data-node-id="I1443:80521;1412:206787">
+        <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]" data-name="111" data-node-id="I1443:80521;1412:206788">
+          <Component4 className="h-[50px] relative shrink-0 w-[41.667px]" />
+          <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="26px" />
+        </div>
+        <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]" data-name="112" data-node-id="I1443:80521;1412:206791">
+          <Component3 className="h-[50px] relative shrink-0 w-[41.667px]" />
+          <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="26px" />
+        </div>
+      </div>
+      <div className="absolute h-[351px] left-[739.74px] overflow-clip top-[462.7px] w-[580px]" data-name="基地弹出框" data-node-id="I1443:80521;1412:199442">
+        <div className="absolute flex items-center justify-center left-0 top-0">
+          <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+            <Component2 className="content-stretch flex items-start overflow-clip relative" />
+          </div>
+        </div>
+        <div className="absolute content-stretch flex flex-col gap-[10px] items-center left-[30px] top-[calc(50%+-2.5px)] translate-y-[-50%] w-[420px]" data-name="粮食源头" data-node-id="I1443:80521;1701:138931">
+          <div className="content-stretch flex flex-col gap-[10px] items-start relative shrink-0 w-full" data-node-id="I1443:80521;1701:138932">
+            <Text className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+            <Text className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0 w-full" propValue="24px" />
+          </div>
+          <div className="content-stretch flex flex-col gap-[10px] items-start relative shrink-0 w-full" data-node-id="I1443:80521;1701:138935">
+            <div className="content-stretch flex gap-[20px] items-start relative shrink-0" data-node-id="I1443:80521;1701:138936">
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" />
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+            </div>
+            <div className="content-stretch flex gap-[20px] items-start relative shrink-0" data-node-id="I1443:80521;1701:138940">
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" />
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <Component1 className="absolute h-[1078.893px] left-[40px] top-[0.43px] w-[150.879px]" />
+      <div className="absolute content-stretch flex flex-col gap-[11px] items-start left-[199.88px] top-[calc(50%+4.02px)] translate-y-[-50%] w-[330px]" data-name="组合1" data-node-id="I1443:80521;1495:45348">
+        <Text className="box-border content-stretch flex gap-[10px] h-[80px] items-center px-[26px] py-[4px] relative shrink-0 w-full" />
+        <div className="box-border content-stretch flex flex-col h-[700px] items-center justify-between px-0 py-[20px] relative shrink-0 w-full" data-node-id="I1443:80521;1495:45350">
+          <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80521;1495:45351">
+            <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
+            <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80521;1495:45353">
+              <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80521;1495:45354">
+                <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+              </div>
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+            </div>
+          </div>
+          <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80521;1495:45360">
+            <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
+            <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80521;1495:45362">
+              <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80521;1495:45363">
+                <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+              </div>
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+            </div>
+          </div>
+          <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80521;1495:45368">
+            <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
+            <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80521;1495:45370">
+              <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80521;1495:45371">
+                <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+              </div>
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+            </div>
+          </div>
+        </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: 文字颜色/2-100%白色: #FFFFFF, 文字颜色/3-50%白色: #FFFFFF, 渐变/2-蓝色: , 主色/主色-2亮绿: #00FFFF, 边框-蓝色: #133BA0, 主色/icon色: , 主色/产业-泛盐: #92A5FE, 主色/产业-畜牧: #F593A5, 文字颜色/4-30%白色: #FFFFFF.
+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.

docs/figma-jsx/鲜食.md

@@ -0,0 +1,479 @@
+const imgProperty1 = "https://www.figma.com/api/mcp/asset/59623c84-8087-4a0e-8064-e9c8914fdcdf";
+const imgUnion = "https://www.figma.com/api/mcp/asset/2ba16e21-b9cb-4750-a3b0-db027f43dd66";
+const img = "https://www.figma.com/api/mcp/asset/8f859b09-086a-45b2-ae08-ec2416d18726";
+const img1 = "https://www.figma.com/api/mcp/asset/e4704177-1822-4a99-94b3-1aee5c1adecf";
+const imgGroup1597881806 = "https://www.figma.com/api/mcp/asset/5dbd2369-873c-4f10-af5e-6103367c9e00";
+const img2 = "https://www.figma.com/api/mcp/asset/12e4fb06-b8ce-436d-83aa-ec03933d55a5";
+const img3 = "https://www.figma.com/api/mcp/asset/85e1b30c-2f97-4df0-8b77-c7782862b0a3";
+const img4 = "https://www.figma.com/api/mcp/asset/178d77cf-c10e-42ec-8938-05f3aa69df0f";
+const img5 = "https://www.figma.com/api/mcp/asset/94614940-1a64-4781-8dba-46a571e31399";
+const imgGroup1597881805 = "https://www.figma.com/api/mcp/asset/7f734faf-cd2a-4b5a-bdc2-795ffdfff4f6";
+const img6 = "https://www.figma.com/api/mcp/asset/29da9264-7ebd-4cf7-b1e4-ccea9408f0e2";
+const img7 = "https://www.figma.com/api/mcp/asset/d19d1002-af61-49dd-bf44-5ced8518456a";
+const imgUnion1 = "https://www.figma.com/api/mcp/asset/da53b459-6c4c-4d96-8e9c-af2d588597b9";
+const imgUnion2 = "https://www.figma.com/api/mcp/asset/1a7672a4-5e1c-4c3b-bc02-a03202e0390b";
+const imgUnion3 = "https://www.figma.com/api/mcp/asset/74793d73-a42f-4349-842b-bef0cefe787a";
+const imgUnion4 = "https://www.figma.com/api/mcp/asset/e7304fd8-1e5c-46c6-b1ba-6c0d846e4608";
+const imgUnion5 = "https://www.figma.com/api/mcp/asset/ada5ba19-7e58-4f84-a779-ce4269b081b2";
+const imgUnion6 = "https://www.figma.com/api/mcp/asset/4bd7cdbb-d6da-41b9-b372-2719be2b2dbc";
+const imgUnion7 = "https://www.figma.com/api/mcp/asset/806b4257-4339-4ea1-a0c6-1f6302485788";
+const imgUnion8 = "https://www.figma.com/api/mcp/asset/d5d8384d-cfd6-4c8a-bfb2-40f9faed1591";
+const imgUnion9 = "https://www.figma.com/api/mcp/asset/7f7f8cf6-527f-4eab-b17c-36e3f788195f";
+const imgUnion10 = "https://www.figma.com/api/mcp/asset/bcb64757-488a-4159-b99b-f7c5922668f1";
+const imgUnion11 = "https://www.figma.com/api/mcp/asset/4b48f5e0-fa40-4c88-a5b0-90093e2e780b";
+const imgUnion12 = "https://www.figma.com/api/mcp/asset/0ead5a2f-5298-457c-9b53-035da1a152ee";
+const imgUnion13 = "https://www.figma.com/api/mcp/asset/fd7d7858-3ad4-46e3-9646-9f8b345f555c";
+const imgUnion14 = "https://www.figma.com/api/mcp/asset/c0147c8b-e986-4e10-a13c-db6a5441e0ab";
+const imgUnion15 = "https://www.figma.com/api/mcp/asset/fb369182-a5ae-4e5d-ab71-40dfd1291e55";
+const imgUnion16 = "https://www.figma.com/api/mcp/asset/a789f9de-aacd-4ee4-b9d6-19e9ff6c51dd";
+const imgUnion17 = "https://www.figma.com/api/mcp/asset/46c407ef-81d4-4f0c-a1a9-dc1a0fb3f5c5";
+const img8 = "https://www.figma.com/api/mcp/asset/76e46245-988c-4cc6-873a-f9b9af746c31";
+const imgGroup1158 = "https://www.figma.com/api/mcp/asset/d9ca7b84-d06e-4c45-acf5-c595737aa29f";
+const img9 = "https://www.figma.com/api/mcp/asset/a30d6593-064d-4408-a3f0-6b323aed91a7";
+const img10 = "https://www.figma.com/api/mcp/asset/71262079-4bb8-4fdf-b6cd-2aa901dd22d4";
+type TextProps = {
+  className?: string;
+  propValue?: "24px" | "26px" | "34px";
+  propValue1?: "特粗";
+  propValue2?: "左对齐" | "右对齐" | "居中对齐";
+};
+
+function Text({ className, propValue = "34px", propValue1 = "特粗", propValue2 = "左对齐" }: TextProps) {
+  if (propValue === "24px" && propValue1 === "特粗" && propValue2 === "左对齐") {
+    return (
+      <div className={className} data-name="字号=24px, 字重=特粗, 位置=左对齐" data-node-id="632:88182">
+        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap" data-node-id="632:88183">
+          <p className="leading-[32px]">Text line-24px</p>
+        </div>
+      </div>
+    );
+  }
+  if (propValue === "26px" && propValue1 === "特粗" && propValue2 === "左对齐") {
+    return (
+      <div className={className} data-name="字号=26px, 字重=特粗, 位置=左对齐" data-node-id="635:42943">
+        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[26px] text-white whitespace-nowrap" data-node-id="635:42944">
+          <p className="leading-[32px]">Text line-26px</p>
+        </div>
+      </div>
+    );
+  }
+  if (propValue === "34px" && propValue1 === "特粗" && propValue2 === "居中对齐") {
+    return (
+      <div className={className} data-name="字号=34px, 字重=特粗, 位置=居中对齐" data-node-id="635:42955">
+        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-center text-white whitespace-nowrap" data-node-id="635:42956">
+          <p className="leading-[32px]">Text line-34px</p>
+        </div>
+      </div>
+    );
+  }
+  if (propValue === "34px" && propValue1 === "特粗" && propValue2 === "右对齐") {
+    return (
+      <div className={className} data-name="字号=34px, 字重=特粗, 位置=右对齐" data-node-id="635:42959">
+        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-right text-white whitespace-nowrap" data-node-id="635:42960">
+          <p className="leading-[32px]">Text line-34px</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className={className} data-name="字号=34px, 字重=特粗, 位置=左对齐" data-node-id="635:42949">
+      <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-white whitespace-nowrap" data-node-id="635:42950">
+        <p className="leading-[32px]">Text line-34px</p>
+      </div>
+    </div>
+  );
+}
+
+function Component({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="数据样式" data-node-id="1201:47976">
+      <div className="absolute bg-gradient-to-b border-2 border-[#5e697e] border-solid from-[#474e60] inset-0 rounded-[6px] to-[#2b2f39]" data-name="11" data-node-id="1201:47971" />
+      <div className="absolute flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] inset-[16.16%_13.74%] justify-center leading-[0] not-italic text-[60px] text-center text-white tracking-[6px]" data-node-id="1201:47972">
+        <p className="leading-[normal] whitespace-pre-wrap">6</p>
+      </div>
+    </div>
+  );
+}
+type iconProps = {
+  className?: string;
+  property1?: "油脂" | "泛盐" | "粮食" | "鲜食";
+};
+
+function icon({ className, property1 = "粮食" }: iconProps) {
+  return (
+    <div className={className} data-name="Property 1=粮食" data-node-id="1201:31235">
+      <div className="absolute inset-[13%_21.7%]" data-name="Union" data-node-id="1198:61730">
+        <img alt="" className="block max-w-none size-full" src={imgUnion} />
+      </div>
+    </div>
+  );
+}
+type Component1Props = {
+  className?: string;
+  property1?: "上";
+};
+
+function Component1({ className, property1 = "上" }: Component1Props) {
+  return (
+    <div className={className} data-name="Property 1=上" data-node-id="1201:48133">
+      <div className="absolute content-stretch flex flex-col gap-[40px] h-[944px] items-center justify-center left-0 right-[37.7%] top-1/2 translate-y-[-50%]" data-name="导航内容" data-node-id="1201:47870">
+        <div className="bg-[rgba(255,255,255,0.05)] box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px]" data-name="111" data-node-id="1201:47862">
+          <icon className="overflow-clip relative shrink-0 size-[50px]" />
+          <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" data-name="text" data-node-id="1201:47859">
+            <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[32px] not-italic relative shrink-0 text-[26px] text-white whitespace-nowrap" data-node-id="I1201:47859;635:42944">
+              <p className="mb-0">粮</p>
+              <p className="mb-0">&nbsp;</p>
+              <p>食</p>
+            </div>
+          </div>
+        </div>
+        <div className="box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px]" data-name="222" data-node-id="1201:47864">
+          <div className="overflow-clip relative shrink-0 size-[50px]" data-name="产业icon" data-node-id="1201:47865">
+            <div className="absolute inset-[13%_26.2%]" data-name="Vector" data-node-id="I1201:47865;1200:31218">
+              <div className="absolute inset-0" style={{ "--fill-0": "rgba(255, 255, 255, 1)" } as React.CSSProperties}>
+                <img alt="" className="block max-w-none size-full" src={img} />
+              </div>
+            </div>
+          </div>
+          <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" data-name="text" data-node-id="1201:47866">
+            <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[32px] not-italic relative shrink-0 text-[26px] text-[rgba(255,255,255,0.5)] whitespace-nowrap" data-node-id="I1201:47866;635:42944">
+              <p className="mb-0">油</p>
+              <p className="mb-0">&nbsp;</p>
+              <p>脂</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute bottom-0 flex items-center justify-center left-[25.05%] right-0 top-0">
+        <div className="flex-none h-[1078.893px] rotate-[180deg] scale-y-[-100%] w-[113.088px]">
+          <div className="relative size-full" data-name="光标左侧" data-node-id="1201:48121">
+            <div className="absolute bottom-[-0.04%] left-0 right-0 top-[-0.04%]">
+              <img alt="" className="block max-w-none size-full" src={img1} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component2({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="弹出框样式2" data-node-id="741:54163">
+      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center leading-[0] relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]">
+        <div className="flex-none rotate-[90deg] scale-y-[-100%]">
+          <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid justify-items-start relative" data-node-id="1207:33739">
+            <div className="col-[1] h-[80px] ml-[7.5px] mt-[17px] relative row-[1] w-[2px]" data-node-id="1207:33513">
+              <div className="absolute bottom-[-1.25%] left-0 right-[-50%] top-[-1.25%]">
+                <img alt="" className="block max-w-none size-full" src={imgGroup1597881806} />
+              </div>
+            </div>
+            <div className="col-[1] ml-0 mt-0 relative row-[1] size-[17px]" data-name="圆圈圈" data-node-id="741:53539">
+              <img alt="" className="block max-w-none size-full" src={img2} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="h-[320px] relative shrink-0 w-[476px]" data-name="框" data-node-id="741:53541">
+        <div className="absolute inset-[-0.06%_-0.09%_-0.06%_-0.04%]">
+          <img alt="" className="block max-w-none size-full" src={img3} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component3({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="定位点/产业链" data-node-id="1205:31870">
+      <div className="absolute inset-[10%_13.79%]" data-name="底部" data-node-id="1201:48987">
+        <img alt="" className="block max-w-none size-full" src={img4} />
+      </div>
+      <div className="absolute bottom-[40.42%] left-1/4 overflow-clip right-1/4 shadow-[0px_0px_6px_0px_#4593ff] top-[17.92%]" data-name="产业链" data-node-id="1205:31863">
+        <div className="absolute inset-[5.36%_10.72%]" data-name="Union" data-node-id="I1205:31863;1205:31861">
+          <img alt="" className="block max-w-none size-full" src={img5} />
+        </div>
+        <div className="absolute inset-0 pointer-events-none shadow-[inset_0px_0px_3px_0px_#ffffff]" />
+      </div>
+    </div>
+  );
+}
+
+function Component4({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="定位点/基地" data-node-id="1205:31871">
+      <div className="absolute inset-[12.5%_8.66%]" data-node-id="1205:32108">
+        <img alt="" className="block max-w-none size-full" src={imgGroup1597881805} />
+      </div>
+      <div className="absolute inset-[27.5%_23%] overflow-clip" data-name="产业icon" data-node-id="1204:31851">
+        <div className="absolute inset-[13%_21.7%]" data-name="Union" data-node-id="I1204:31851;1198:61730">
+          <div className="absolute inset-[-20.02%_-26.17%]">
+            <img alt="" className="block max-w-none size-full" src={img6} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component5({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="边" data-node-id="84:21868">
+      <img alt="" className="block max-w-none size-full" src={img7} />
+    </div>
+  );
+}
+
+function Component6({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="线" data-node-id="84:21850">
+      <div className="absolute inset-[45.14%_13.47%_22.05%_68.8%]" data-name="Union" data-node-id="84:21851">
+        <div className="absolute inset-[-0.28%_-0.28%_-0.27%_-0.35%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion1} />
+        </div>
+      </div>
+      <div className="absolute inset-[69.45%_7.91%_11.34%_79.45%]" data-name="Union" data-node-id="84:21852">
+        <div className="absolute inset-[-0.36%_-0.44%_-0.33%_-0.45%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion2} />
+        </div>
+      </div>
+      <div className="absolute bottom-[58.34%] left-[13.82%] right-[58.52%] top-0" data-name="Union" data-node-id="84:21853">
+        <div className="absolute inset-[-0.16%_-0.17%_-0.16%_-0.25%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion3} />
+        </div>
+      </div>
+      <div className="absolute inset-[40.22%_52.11%_21.49%_24.35%]" data-name="Union" data-node-id="84:21854">
+        <div className="absolute inset-[-0.17%_-0.21%_-0.2%_-0.28%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion4} />
+        </div>
+      </div>
+      <div className="absolute inset-[15.1%_38.74%_51.84%_30.9%]" data-name="Union" data-node-id="84:21855">
+        <div className="absolute inset-[-0.2%_-0.17%_-0.22%_-0.17%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion5} />
+        </div>
+      </div>
+      <div className="absolute inset-[62.63%_13.38%_23.24%_79.12%]" data-name="Union" data-node-id="84:21856">
+        <div className="absolute inset-[-0.45%_-0.62%_-0.6%_-0.65%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion6} />
+        </div>
+      </div>
+      <div className="absolute inset-[39.2%_33.9%_32.16%_45.04%]" data-name="Union" data-node-id="84:21857">
+        <div className="absolute inset-[-0.26%_-0.43%_-0.35%_-0.33%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion7} />
+        </div>
+      </div>
+      <div className="absolute inset-[33.43%_19.83%_31.88%_63.81%]" data-name="Union" data-node-id="84:21858">
+        <div className="absolute inset-[-0.19%_-0.36%_-0.2%_-0.31%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion8} />
+        </div>
+      </div>
+      <div className="absolute inset-[61.63%_26.15%_9.48%_37%]" data-name="Union" data-node-id="84:21859">
+        <div className="absolute inset-[-0.27%_-0.13%_-0.27%_-0.21%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion9} />
+        </div>
+      </div>
+      <div className="absolute bottom-[16.35%] left-[77.75%] right-0 top-[39.25%]" data-name="Union" data-node-id="84:21860">
+        <div className="absolute inset-[-0.15%_-0.22%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion10} />
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-[66.67%] right-[14.92%] top-[70.14%]" data-name="Union" data-node-id="84:21861">
+        <div className="absolute inset-[-0.22%_-0.27%_-0.22%_-0.26%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion11} />
+        </div>
+      </div>
+      <div className="absolute inset-[19.86%_25.75%_54.08%_56.23%]" data-name="Union" data-node-id="84:21862">
+        <div className="absolute inset-[-0.28%_-0.27%_-0.49%_-0.27%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion12} />
+        </div>
+      </div>
+      <div className="absolute bottom-[2%] left-0 right-[70.7%] top-[44.26%]" data-name="Union" data-node-id="84:21863">
+        <div className="absolute inset-[-0.12%_-0.16%_-0.14%_-0.18%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion13} />
+        </div>
+      </div>
+      <div className="absolute inset-[64.64%_29.68%_24.46%_58.95%]" data-name="Union" data-node-id="84:21864">
+        <div className="absolute inset-[-0.59%_-0.41%_-0.67%_-0.42%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion14} />
+        </div>
+      </div>
+      <div className="absolute inset-[61.94%_39.82%_24.69%_53.29%]" data-name="Union" data-node-id="84:21865">
+        <div className="absolute inset-[-0.64%_-0.74%_-0.48%_-0.82%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion15} />
+        </div>
+      </div>
+      <div className="absolute inset-[55.88%_34.28%_31.77%_54.46%]" data-name="Union" data-node-id="84:21866">
+        <div className="absolute inset-[-0.54%_-0.41%_-0.57%_-0.41%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion16} />
+        </div>
+      </div>
+      <div className="absolute inset-[33.35%_66.33%_53.33%_20.28%]" data-name="Union" data-node-id="84:21867">
+        <div className="absolute inset-[-0.55%_-0.49%_-0.53%_-0.4%]">
+          <img alt="" className="block max-w-none size-full" src={imgUnion17} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component7({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="导航底框" data-node-id="631:36462">
+      <div className="absolute bottom-[18.95%] left-0 right-0 top-0" data-name="1" data-node-id="631:36440">
+        <div className="absolute inset-[-181.3%_-19.68%_-413.77%_-19.68%]">
+          <img alt="" className="block max-w-none size-full" src={img8} />
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-[27.44%] right-[27.44%] top-[62.9%]" data-node-id="631:36441">
+        <div className="absolute inset-[-257.75%_-17.4%]">
+          <img alt="" className="block max-w-none size-full" src={imgGroup1158} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Component8({ className }: { className?: string }) {
+  return (
+    <div className={className} data-name="底部网格" data-node-id="631:69869">
+      <div className="absolute bottom-[-71.42%] content-stretch flex flex-col items-start left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px_175.624px] mask-size-[1920px_1080px] right-0 top-[-16.26%]" data-name="底部内容" data-node-id="631:69865" style={{ maskImage: `url('${img9}')` }}>
+        <div className="h-[1013.464px] relative shrink-0 w-[1920px]" data-name="网格" data-node-id="631:69866">
+          <img alt="" className="block max-w-none size-full" src={img10} />
+        </div>
+        <div className="h-[1013.464px] relative shrink-0 w-[1920px]" data-name="网格" data-node-id="631:69867">
+          <img alt="" className="block max-w-none size-full" src={img10} />
+        </div>
+      </div>
+    </div>
+  );
+}
+type Component9Props = {
+  className?: string;
+  property1?: "供应链专用界面";
+};
+
+function Component9({ className, property1 = "供应链专用界面" }: Component9Props) {
+  return (
+    <div className={className} data-name="Property 1=供应链专用界面" data-node-id="1486:134453">
+      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
+        <img alt="" className="absolute max-w-none object-50%-50% object-cover size-full" src={imgProperty1} />
+        <div className="absolute bg-[rgba(0,79,154,0.1)] inset-0" />
+      </div>
+      <div className="absolute contents left-0 top-0" data-node-id="1486:133993" />
+    </div>
+  );
+}
+
+export default function Component10() {
+  return (
+    <div className="bg-[rgba(33,33,33,0.6)] relative size-full" data-name="操控屏-4-鲜食 • 泛盐-鲜食首页-基地弹出数据" data-node-id="1443:80518">
+      <div className="absolute contents left-0 top-0" data-name="我是底部" data-node-id="I1443:80518;1412:199112">
+        <Component9 className="absolute h-[1080px] left-0 overflow-clip top-0 w-[1920px]" />
+        <Component8 className="absolute h-[1080px] left-0 top-0 w-[1920px]" />
+        <Component7 className="absolute h-[71.119px] left-[526.95px] top-[40px] w-[866.265px]" />
+        <Text className="absolute box-border content-stretch flex gap-[10px] items-center justify-center left-1/2 px-0 py-[4px] top-[40px] translate-x-[-50%]" propValue2="居中对齐" />
+      </div>
+      <div className="absolute contents left-[529.88px] top-[calc(50%+33.79px)] translate-y-[-50%]" data-name="地图" data-node-id="I1443:80518;1412:205072">
+        <div className="absolute contents left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]" data-name="地图" data-node-id="I1443:80518;1412:205073">
+          <Component6 className="absolute inset-[19.27%_4.17%_13.01%_27.6%]" />
+          <Component5 className="absolute h-[731.454px] left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]" />
+        </div>
+        <Component4 className="absolute h-[48px] left-[1142.89px] top-[717.84px] w-[40px]" />
+        <Component4 className="absolute h-[48px] left-[1664.25px] top-[530.82px] w-[40px]" />
+        <Component4 className="absolute h-[48px] left-[1435px] top-[527.14px] w-[40px]" />
+        <Component4 className="absolute h-[48px] left-[1203.07px] top-[514.31px] w-[40px]" />
+        <Component3 className="absolute h-[48px] left-[1273.12px] top-[551.14px] w-[40px]" />
+        <Component3 className="absolute h-[48px] left-[1403px] top-[597.5px] w-[40px]" />
+        <Component3 className="absolute h-[48px] left-[1694.25px] top-[645.5px] w-[40px]" />
+        <Component3 className="absolute h-[48px] left-[1237.87px] top-[761.84px] w-[40px]" />
+      </div>
+      <div className="absolute bottom-[80px] content-stretch flex items-center left-1/2 translate-x-[-50%]" data-name="说明" data-node-id="I1443:80518;1412:205084">
+        <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]" data-name="111" data-node-id="I1443:80518;1412:205085">
+          <Component4 className="h-[50px] relative shrink-0 w-[41.667px]" />
+          <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="26px" />
+        </div>
+        <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]" data-name="112" data-node-id="I1443:80518;1412:205088">
+          <Component3 className="h-[50px] relative shrink-0 w-[41.667px]" />
+          <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="26px" />
+        </div>
+      </div>
+      <div className="absolute content-stretch flex flex-col gap-[10px] items-end right-[80px] top-[150px]" data-name="1+！" data-node-id="I1443:80518;1412:199137">
+        <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+        <Text className="box-border content-stretch flex gap-[10px] h-[77px] items-center justify-end px-0 py-[4px] relative shrink-0 w-full" propValue2="右对齐" />
+        <Text className="box-border content-stretch flex gap-[10px] items-center justify-end px-0 py-[4px] relative shrink-0" propValue2="右对齐" />
+      </div>
+      <div className="absolute h-[351px] left-[943.93px] overflow-clip top-[420.75px] w-[580px]" data-name="基地弹出框" data-node-id="I1443:80518;1412:199141">
+        <div className="absolute flex items-center justify-center left-0 top-0">
+          <div className="flex-none rotate-[180deg]">
+            <Component2 className="content-stretch flex items-start overflow-clip relative" />
+          </div>
+        </div>
+        <div className="absolute content-stretch flex flex-col gap-[10px] items-center left-[30px] top-[calc(50%+-29.33px)] translate-y-[-50%] w-[420px]" data-name="粮食源头" data-node-id="I1443:80518;1701:136837">
+          <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-node-id="I1443:80518;1701:136838">
+            <Text className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+            <Text className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0 w-full" propValue="24px" />
+          </div>
+          <div className="content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-full" data-node-id="I1443:80518;1701:136841">
+            <div className="content-stretch flex gap-[20px] items-start relative shrink-0" data-node-id="I1443:80518;1701:136850">
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" />
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <Component1 className="absolute h-[1078.893px] left-[40px] top-0 w-[150.879px]" />
+      <div className="absolute content-stretch flex flex-col gap-[11px] items-start left-[199.88px] top-[calc(50%+4.02px)] translate-y-[-50%] w-[330px]" data-name="组合1" data-node-id="I1443:80518;1495:46709">
+        <Text className="box-border content-stretch flex gap-[10px] h-[80px] items-center px-[26px] py-[4px] relative shrink-0 w-full" />
+        <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid justify-items-start leading-[0] relative shrink-0" data-name="框框数据1" data-node-id="I1443:80518;1495:46711">
+          <div className="box-border col-[1] content-stretch flex flex-col h-[700px] items-center justify-between ml-0 mt-0 px-0 py-[20px] relative row-[1] w-[330px]" data-node-id="I1443:80518;1495:46713">
+            <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80518;1495:46714">
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
+              <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80518;1495:46716">
+                <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80518;1495:46717">
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                </div>
+                <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+              </div>
+            </div>
+            <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80518;1495:46723">
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
+              <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80518;1495:46725">
+                <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80518;1495:46726">
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                </div>
+                <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+              </div>
+            </div>
+            <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80518;1495:46733">
+              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
+              <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80518;1495:46735">
+                <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80518;1495:46736">
+                  <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
+                </div>
+                <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
+              </div>
+            </div>
+          </div>
+        </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: 文字颜色/2-100%白色: #FFFFFF, 渐变/2-蓝色: , 边框-蓝色: #133BA0, 主色/icon色: , 文字颜色/3-50%白色: #FFFFFF, 主色/主色-2亮绿: #00FFFF, 主色/产业-鲜食: #DE7E66, 文字颜色/4-30%白色: #FFFFFF.
+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.