📝 docs(prd): 更新供应链可视化PRD文档和组件架构

- 完善组件库架构设计，建立标准化的components目录结构
- 添加组件拆分实施指南和验收标准
- 新增大量SVG图标资源到public/supply-chain目录
- 重构GrainOilDashboard组件，提取可复用组件库
- 创建统一的IndustryIcon组件支持多种产业类型
- 建立布局组件库（Navigation、SupplyChainBackground、BackgroundGrid、HeaderBar）
- 实现组件模块化导出机制，提高代码复用性

docs/prd/epic-005-supply-chain-visualization.md

@@ -157,10 +157,37 @@
   - `AquacultureDashboard.tsx` - 水产大屏
   - `FreshFoodDashboard.tsx` - 鲜食大屏
   - `SaltDashboard.tsx` - 泛盐大屏
-  - `DashboardNavigation.tsx` - 导航组件
-  - `SupplyChainMap.tsx` - 地图可视化组件
-  - `DataCard.tsx` - 数据卡片组件
-  - `IndustryIcon.tsx` - 产业图标组件
+
+### 组件库架构
+- **位置**：`src/client/home/pages/SupplyChainDashboards/components/`
+- **目录结构**：
+  ```
+  components/
+  ├── icons/
+  │   ├── IndustryIcon.tsx           # 统一产业图标组件
+  │   └── index.ts
+  ├── layout/
+  │   ├── SupplyChainBackground.tsx  # 背景组件
+  │   ├── BackgroundGrid.tsx         # 网格背景
+  │   ├── HeaderBar.tsx              # 标题栏
+  │   ├── Navigation.tsx             # 导航组件
+  │   └── index.ts
+  ├── text/
+  │   ├── SupplyChainText.tsx        # 统一文本组件
+  │   └── index.ts
+  ├── map/
+  │   ├── SupplyChainNetwork.tsx     # 供应链网络
+  │   ├── IndustryChainPoint.tsx     # 产业链定位点
+  │   ├── BasePoint.tsx              # 基地定位点
+  │   ├── MapBorder.tsx              # 地图边框
+  │   └── index.ts
+  ├── data/
+  │   ├── DataCard.tsx               # 数据卡片
+  │   ├── PopupInfoBox.tsx           # 弹出信息框
+  │   ├── KeyMetricsPanel.tsx        # 关键指标面板
+  │   └── index.ts
+  └── index.ts
+  ```
 
 ### 可复用基础组件架构（基于Figma-JSX分析）
 
@@ -248,6 +275,16 @@
 - [ ] Props接口规范统一
 - [ ] 状态管理机制完善
 
+### 组件拆分验收
+- [ ] GrainOilDashboard.tsx成功拆分为可复用组件
+- [ ] 组件目录结构完整建立
+- [ ] 所有组件独立可测试
+- [ ] 组件接口规范统一
+- [ ] 拆分后功能无回归
+- [ ] 组件库可应用于其他7个产业大屏
+- [ ] 代码重复率显著降低
+- [ ] 维护性明显提升
+
 ### 性能验收
 - [ ] 页面加载时间 < 3秒
 - [ ] 大屏切换响应时间 < 1秒
@@ -306,6 +343,27 @@
 - **网格组件**：`BackgroundGrid` - 底部网格背景装饰
 - **标题栏**：`HeaderBar` - 顶部标题栏背景
 
+### 组件拆分实施指南
+
+#### 1. 从GrainOilDashboard.tsx拆分现有组件
+- **第一步**：提取图标组件（GrainIcon、OilIcon、IndustryChainIcon → IndustryIcon）
+- **第二步**：提取导航组件（Navigation → 独立文件）
+- **第三步**：提取背景组件（SupplyChainBackground、BackgroundGrid、HeaderBar）
+- **第四步**：提取文本组件（SupplyChainText）
+
+#### 2. 从Figma-JSX文件提取新组件
+- **地图组件**：从figma-jsx中提取SupplyChainNetwork、IndustryChainPoint、BasePoint
+- **数据组件**：从figma-jsx中提取DataCard、PopupInfoBox、KeyMetricsPanel
+- **布局组件**：从figma-jsx中提取MapBorder等容器组件
+
+#### 3. 组件重构步骤
+1. **分析现有代码**：识别GrainOilDashboard.tsx中可拆分的代码块
+2. **创建组件目录**：建立components目录结构
+3. **提取通用组件**：将内联代码提取为独立组件
+4. **统一接口规范**：标准化所有组件的props接口
+5. **测试验证**：确保拆分后功能正常
+6. **应用到其他产业**：将组件库应用到其他7个产业大屏
+
 ### 组件开发最佳实践
 
 #### 1. 组件复用策略

public/supply-chain/group1158.svg

@@ -0,0 +1,20 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 527 163" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1158">
+<g id="Ellipse 457" opacity="0.1" filter="url(#filter0_f_0_2144)">
+<ellipse cx="263.396" cy="81.1913" rx="195.396" ry="13.1913" fill="var(--fill-0, #A7C4FF)"/>
+</g>
+<path id="Vector 1388" d="M87.4707 81.1908H439.773" stroke="url(#paint0_linear_0_2144)" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_f_0_2144" x="0" y="0" width="526.793" height="162.383" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="34" result="effect1_foregroundBlur_0_2144"/>
+</filter>
+<linearGradient id="paint0_linear_0_2144" x1="87.4707" y1="81.1908" x2="439.773" y2="81.1908" gradientUnits="userSpaceOnUse">
+<stop offset="0.161606" stop-color="white" stop-opacity="0"/>
+<stop offset="0.501636" stop-color="white"/>
+<stop offset="0.808696" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

public/supply-chain/group1597881805.svg

@@ -0,0 +1,53 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 83 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1597881805">
+<g id="Vector">
+<g filter="url(#filter0_i_0_2112)">
+<path d="M77.1303 39.4193C77.9123 56.1265 67.0947 70.4377 51.976 75.1002C48.2615 76.2658 45.0683 78.597 42.983 81.8349L41.3538 84.4899L39.6595 81.8349C37.6393 78.6618 34.5113 76.2658 30.9272 75.1649C16.1995 70.7615 5.51217 57.1626 5.51217 41.1029C5.51217 20.8989 22.4555 4.58018 43.0482 5.55153C61.4252 6.32861 76.2832 21.1579 77.1303 39.4193Z" fill="var(--fill-0, #074B06)"/>
+<path d="M77.1303 39.4193C77.9123 56.1265 67.0947 70.4377 51.976 75.1002C48.2615 76.2658 45.0683 78.597 42.983 81.8349L41.3538 84.4899L39.6595 81.8349C37.6393 78.6618 34.5113 76.2658 30.9272 75.1649C16.1995 70.7615 5.51217 57.1626 5.51217 41.1029C5.51217 20.8989 22.4555 4.58018 43.0482 5.55153C61.4252 6.32861 76.2832 21.1579 77.1303 39.4193Z" fill="url(#paint0_linear_0_2112)" style="mix-blend-mode:overlay"/>
+<path d="M77.1303 39.4193C77.9123 56.1265 67.0947 70.4377 51.976 75.1002C48.2615 76.2658 45.0683 78.597 42.983 81.8349L41.3538 84.4899L39.6595 81.8349C37.6393 78.6618 34.5113 76.2658 30.9272 75.1649C16.1995 70.7615 5.51217 57.1626 5.51217 41.1029C5.51217 20.8989 22.4555 4.58018 43.0482 5.55153C61.4252 6.32861 76.2832 21.1579 77.1303 39.4193Z" fill="url(#paint1_linear_0_2112)" style="mix-blend-mode:overlay"/>
+</g>
+<path d="M5.76217 41.1031C5.76217 21.0422 22.586 4.83667 43.0366 5.80132H43.0376C61.2854 6.57294 76.0392 21.2994 76.8803 39.4312C77.6567 56.0195 66.9167 70.2305 51.9028 74.8609L51.9008 74.8619C48.1347 76.0438 44.8921 78.4094 42.7729 81.6998L42.77 81.7037L41.3491 84.0181L39.8706 81.7007C37.8188 78.478 34.642 76.0448 31.0005 74.9263L30.9985 74.9253C16.3736 70.5525 5.76223 57.0487 5.76217 41.1031Z" stroke="url(#paint2_linear_0_2112)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+<path d="M5.76217 41.1031C5.76217 21.0422 22.586 4.83667 43.0366 5.80132H43.0376C61.2854 6.57294 76.0392 21.2994 76.8803 39.4312C77.6567 56.0195 66.9167 70.2305 51.9028 74.8609L51.9008 74.8619C48.1347 76.0438 44.8921 78.4094 42.7729 81.6998L42.77 81.7037L41.3491 84.0181L39.8706 81.7007C37.8188 78.478 34.642 76.0448 31.0005 74.9263L30.9985 74.9253C16.3736 70.5525 5.76223 57.0487 5.76217 41.1031Z" stroke="url(#paint3_linear_0_2112)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+</g>
+<g id="Vector_2">
+<path d="M0.5 40.5586C0.500257 17.8281 19.8044 -0.54686 43.2871 0.546875H43.29C63.9138 1.40822 80.642 17.601 82.0801 37.7041L82.1367 38.6641C83.0276 57.4607 70.7053 73.5719 53.4668 78.8223H53.4639C49.0756 80.1823 45.2912 82.9063 42.8164 86.7012L42.8105 86.7109L41.3467 89.0654L39.8213 86.7031C37.4262 82.988 33.7188 80.1844 29.4697 78.8955L29.4668 78.8945L28.6826 78.6543C12.298 73.457 0.5 58.3448 0.5 40.5586Z" stroke="url(#paint4_linear_0_2112)"/>
+<path d="M0.5 40.5586C0.500257 17.8281 19.8044 -0.54686 43.2871 0.546875H43.29C63.9138 1.40822 80.642 17.601 82.0801 37.7041L82.1367 38.6641C83.0276 57.4607 70.7053 73.5719 53.4668 78.8223H53.4639C49.0756 80.1823 45.2912 82.9063 42.8164 86.7012L42.8105 86.7109L41.3467 89.0654L39.8213 86.7031C37.4262 82.988 33.7188 80.1844 29.4697 78.8955L29.4668 78.8945L28.6826 78.6543C12.298 73.457 0.5 58.3448 0.5 40.5586Z" stroke="url(#paint5_linear_0_2112)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_0_2112" x="5.51217" y="5.5103" width="71.658" height="78.9796" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="overlay" in2="shape" result="effect1_innerShadow_0_2112"/>
+</filter>
+<linearGradient id="paint0_linear_0_2112" x1="41.3412" y1="5.5103" x2="41.3412" y2="84.4899" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_2112" x1="41.3412" y1="5.5103" x2="41.3412" y2="84.4899" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint2_linear_0_2112" x1="41.3412" y1="5.5103" x2="41.3412" y2="84.4899" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint3_linear_0_2112" x1="41.3412" y1="66.5817" x2="41.3412" y2="84.4899" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint4_linear_0_2112" x1="41.3411" y1="0" x2="41.3411" y2="90" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C5FF92" stop-opacity="0"/>
+<stop offset="1" stop-color="#C5FF92"/>
+</linearGradient>
+<linearGradient id="paint5_linear_0_2112" x1="41.3411" y1="72.1875" x2="41.3411" y2="90" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

public/supply-chain/group1597881806.svg

@@ -0,0 +1,11 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 3 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1597881806">
+<path id="&#231;&#155;&#180;&#231;&#186;&#191; 27" d="M2 1L2 81" stroke="url(#paint0_linear_0_2115)" stroke-width="2" stroke-linecap="square"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_2115" x1="2" y1="1" x2="2" y2="81" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#40DEFF"/>
+</linearGradient>
+</defs>
+</svg>

public/supply-chain/img.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" opacity="0.78" d="M15.0792 0.602539C15.0792 0.602539 13.9085 -0.0477648 11.8997 0.00280338C9.89072 -0.0477648 8.72184 0.602539 8.72184 0.602539V3.04132H15.0791V0.602538L15.0792 0.602539ZM23.7941 33.7447C23.7941 33.7447 23.7941 12.9698 23.7941 11.8318C23.7941 10.6937 23.0751 10.3143 23.0751 10.3143L15.1099 3.9699H8.69119L0.725931 10.3143C0.725931 10.3143 0.00511213 10.6937 0.00511213 11.8318C0.00511213 12.9698 0.00511213 33.7447 0.00511213 33.7447C0.00511213 33.7447 -0.273085 37 3.27501 37H8.72184C11.9538 37 15.0791 37 15.0791 37H20.526C24.0723 37 23.7941 33.7447 23.7941 33.7447ZM20.5242 25.872C20.5242 26.2296 20.2244 26.5223 19.8558 26.5223H14.9871C14.6186 26.5223 14.3205 26.2296 14.3205 25.872V15.1268C14.3205 14.7656 14.6186 14.4747 14.9871 14.4747H19.8558C20.2244 14.4747 20.5242 14.7656 20.5242 15.1268V25.872L20.5242 25.872Z" fill="var(--fill-0, white)" fill-opacity="0.5"/>
+</svg>

public/supply-chain/img1.svg

@@ -0,0 +1,70 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 114 1081" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#133;&#137;&#230;&#160;&#135;&#229;&#183;&#166;&#228;&#190;&#167;">
+<path id="Vector" d="M9.61521 540.446L22.2812 667.143L19.2157 663.998C18.3958 663.15 17.8255 661.911 17.6354 660.526L0.0712764 541.473C-0.0237777 540.789 -0.0237777 540.088 0.0712764 539.403L17.6354 420.367C17.8255 418.981 18.3839 417.743 19.2157 416.895L22.2812 413.75L9.61521 540.446Z" fill="url(#paint0_linear_0_2157)"/>
+<path id="Vector_2" opacity="0.61" d="M58.1346 869.036L113.088 1064.41L110.117 1079.89L46.4073 874.463C43.7458 865.858 41.9279 856.813 41.0011 847.556L10.3106 540.446L41.0011 233.337C41.9279 224.08 43.7458 215.035 46.4073 206.43L110.117 1L113.088 16.4826L58.1346 211.857C55.9603 219.565 54.4632 227.6 53.6671 235.798L23.9746 540.446L53.6671 845.095C54.4632 853.293 55.9603 861.327 58.1346 869.036Z" fill="url(#paint1_linear_0_2157)"/>
+<path id="Vector_3" opacity="0.61" d="M112.061 16.4385L57.1719 211.585C54.9809 219.353 53.4735 227.446 52.6719 235.701L22.9795 540.35L22.9697 540.446L22.9795 540.543L52.6719 845.192C53.4234 852.931 54.7956 860.528 56.7696 867.848L57.1719 869.308L112.061 1064.45L109.888 1075.78L47.3623 874.167C44.7213 865.628 42.9164 856.648 41.9961 847.456L11.3155 540.446L41.9961 233.437C42.8589 224.818 44.499 216.387 46.877 208.331L47.3623 206.726L109.888 5.11426L112.061 16.4385Z" stroke="url(#paint2_linear_0_2157)" stroke-width="2"/>
+<path id="Vector_4" d="M110.117 1079.89L46.4073 874.463C43.7458 865.858 41.9279 856.813 41.0011 847.556L10.3106 540.446L41.0011 233.337C41.9279 224.08 43.7458 215.035 46.4073 206.43L110.117 1" stroke="url(#paint3_linear_0_2157)" stroke-width="3"/>
+<g id="Mask group">
+<mask id="mask0_0_2157" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="1" width="104" height="1079">
+<path id="Vector_5" d="M58.1346 869.036L113.088 1064.41L110.117 1079.89L46.4073 874.463C43.7458 865.858 41.9279 856.813 41.0011 847.556L10.3106 540.446L41.0011 233.337C41.9279 224.08 43.7458 215.035 46.4073 206.43L110.117 1L113.088 16.4826L58.1346 211.857C55.9603 219.565 54.4632 227.6 53.6671 235.798L23.9746 540.446L53.6671 845.095C54.4632 853.293 55.9603 861.327 58.1346 869.036Z" fill="url(#paint4_linear_0_2157)"/>
+</mask>
+<g mask="url(#mask0_0_2157)">
+<g id="Vector_6" filter="url(#filter0_f_0_2157)">
+<path d="M111.547 16.417L56.6905 211.45C54.6287 218.76 53.1701 226.356 52.333 234.102L52.1738 235.652L22.4815 540.301L22.4678 540.446L22.4815 540.592L52.1738 845.24C52.9782 853.523 54.4914 861.645 56.6905 869.441V869.442L111.547 1064.47L109.773 1073.72L47.8399 874.02H47.8408C45.3744 866.045 43.6387 857.684 42.6758 849.122L42.4942 847.406L11.8174 540.446L42.4942 233.486C43.4113 224.326 45.2089 215.378 47.8399 206.872L109.773 7.16992L111.547 16.417Z" stroke="url(#paint5_linear_0_2157)" stroke-width="3"/>
+</g>
+<g id="Ellipse 244" filter="url(#filter1_f_0_2157)">
+<ellipse cx="-9.52244" cy="546.313" rx="42.6928" ry="49.0382" fill="var(--fill-0, #17BAFF)" fill-opacity="0.38"/>
+</g>
+<g id="Ellipse 245" filter="url(#filter2_f_0_2157)">
+<ellipse cx="-23.8365" cy="543.287" rx="7.66325" ry="31.6954" fill="var(--fill-0, #49A8FF)"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_0_2157" x="6.31057" y="-3" width="110.777" height="1086.89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_0_2157"/>
+</filter>
+<filter id="filter1_f_0_2157" x="-148.715" y="400.775" width="278.386" height="291.076" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="48.25" result="effect1_foregroundBlur_0_2157"/>
+</filter>
+<filter id="filter2_f_0_2157" x="-55.8998" y="487.191" width="64.1265" height="112.191" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="12.2" result="effect1_foregroundBlur_0_2157"/>
+</filter>
+<linearGradient id="paint0_linear_0_2157" x1="0.251437" y1="543.25" x2="45.0735" y2="543.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1DBAEC"/>
+<stop offset="0.483551" stop-color="#1D6981" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_2157" x1="61.6992" y1="1" x2="61.6992" y2="1079.89" gradientUnits="userSpaceOnUse">
+<stop offset="0.1" stop-color="#25629B" stop-opacity="0"/>
+<stop offset="0.505" stop-color="#226B94"/>
+<stop offset="0.927556" stop-color="#1D568A" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_0_2157" x1="61.6992" y1="1" x2="61.6992" y2="1079.89" gradientUnits="userSpaceOnUse">
+<stop offset="0.1" stop-color="#327ABD" stop-opacity="0"/>
+<stop offset="0.505" stop-color="#45C7FF"/>
+<stop offset="0.927556" stop-color="#327ABD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_0_2157" x1="60.2139" y1="1" x2="60.2139" y2="1079.89" gradientUnits="userSpaceOnUse">
+<stop offset="0.257128" stop-color="#4596E1" stop-opacity="0"/>
+<stop offset="0.495" stop-color="#D5EBFF"/>
+<stop offset="0.709069" stop-color="#2984D9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_0_2157" x1="61.6992" y1="1" x2="61.6992" y2="1079.89" gradientUnits="userSpaceOnUse">
+<stop offset="0.1" stop-color="#327ABD" stop-opacity="0"/>
+<stop offset="0.505" stop-color="#327ABD"/>
+<stop offset="0.927556" stop-color="#327ABD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_0_2157" x1="61.6992" y1="1" x2="61.6992" y2="1079.89" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3259BD" stop-opacity="0"/>
+<stop offset="0.505" stop-color="#3D7FE1"/>
+<stop offset="1" stop-color="#3269BD" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

public/supply-chain/img10.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1920 1014" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="&#231;&#189;&#145;&#230;&#160;&#188;" d="M0 25.7325H1920M0 76.5377H1920M0 127.343H1920M0 178.148H1920M0 228.953H1920M0 279.758H1920M0 330.564H1920M0 381.369H1920M0 432.174H1920M0 482.979H1920M0 533.784H1920M0 584.589H1920M0 635.395H1920M0 686.2H1920M0 737.005H1920M0 787.81H1920M0 838.615H1920M0 889.421H1920M0 940.226H1920M0 991.031H1920M26.6667 0V1013.46M63.0089 0V1013.46M99.351 0V1013.46M135.693 0V1013.46M172.035 0V1013.46M208.378 0V1013.46M244.72 0V1013.46M281.062 0V1013.46M317.404 0V1013.46M353.746 0V1013.46M390.089 0V1013.46M426.431 0V1013.46M462.773 0V1013.46M499.115 0V1013.46M535.457 0V1013.46M571.799 0V1013.46M608.142 0V1013.46M644.484 0V1013.46M680.826 0V1013.46M717.168 0V1013.46M753.51 0V1013.46M789.853 0V1013.46M826.195 0V1013.46M862.537 0V1013.46M898.879 0V1013.46M935.221 0V1013.46M971.563 0V1013.46M1007.91 0V1013.46M1044.25 0V1013.46M1080.59 0V1013.46M1116.93 0V1013.46M1153.27 0V1013.46M1189.62 0V1013.46M1225.96 0V1013.46M1262.3 0V1013.46M1298.64 0V1013.46M1334.99 0V1013.46M1371.33 0V1013.46M1407.67 0V1013.46M1444.01 0V1013.46M1480.35 0V1013.46M1516.7 0V1013.46M1553.04 0V1013.46M1589.38 0V1013.46M1625.72 0V1013.46M1662.06 0V1013.46M1698.41 0V1013.46M1734.75 0V1013.46M1771.09 0V1013.46M1807.43 0V1013.46M1843.78 0V1013.46M1880.12 0V1013.46M1916.46 0V1013.46" stroke="var(--stroke-0, #7C8DB5)" stroke-opacity="0.05" stroke-width="2"/>
+</svg>

public/supply-chain/img2.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#156;&#134;&#229;&#156;&#136;&#229;&#156;&#136;">
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" fill-rule="evenodd" clip-rule="evenodd" d="M8.50006 2.19336C11.983 2.19336 14.8065 5.01686 14.8065 8.49981C14.8065 11.9828 11.983 14.8063 8.50006 14.8063C5.0171 14.8063 2.1936 11.9828 2.1936 8.49981C2.1936 5.01686 5.0171 2.19336 8.50006 2.19336V2.19336Z" fill="var(--fill-0, #4AE9DB)"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 67" d="M8.5 0.5C12.9183 0.5 16.5 4.08173 16.5 8.5C16.5 12.9183 12.9183 16.5 8.5 16.5C4.08173 16.5 0.5 12.9183 0.5 8.5C0.5 4.08173 4.08173 0.5 8.5 0.5Z" stroke="var(--stroke-0, #4AE9DB)"/>
+</g>
+</svg>

public/supply-chain/img3.svg

@@ -0,0 +1,17 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 478 322" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#161;&#134;">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132; 19">
+<path id="&#231;&#159;&#169;&#229;&#189;&#162;" d="M294.937 1.59985L318.377 21.4583L318.544 21.5999H476.4V320.4H343.394L322.125 308.811L321.991 308.738H139.165L139.032 308.81L117.59 320.4H1.69568V31.0637L27.5551 1.59985H294.937Z" fill="var(--fill-0, #231F20)" fill-opacity="0.1" stroke="var(--stroke-0, #00FFFF)" stroke-width="1.2"/>
+<path id="&#231;&#159;&#169;&#229;&#189;&#162;_2" fill-rule="evenodd" clip-rule="evenodd" d="M21.276 1L1.08786 23.8571L1 1H21.276V1Z" fill="var(--fill-0, #00FFFF)"/>
+<path id="&#231;&#155;&#180;&#231;&#186;&#191; 20&#229;&#164;&#135;&#228;&#187;&#189;" d="M1.72388 313.171V320.286H7.8038" stroke="var(--stroke-0, #00FFFF)" stroke-width="1.8" stroke-linecap="square"/>
+<path id="&#231;&#155;&#180;&#231;&#186;&#191; 20&#229;&#164;&#135;&#228;&#187;&#189; 2" d="M476.515 313.171V320.286H470.436" stroke="var(--stroke-0, #00FFFF)" stroke-width="1.8" stroke-linecap="square"/>
+</g>
+<path id="&#231;&#155;&#180;&#231;&#186;&#191; 9" d="M268.021 1.71443L294.92 2.07157L318.165 21.7144H338.429" stroke="url(#paint0_linear_0_2121)" stroke-width="1.8" stroke-linecap="square"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_2121" x1="268.021" y1="1.71443" x2="268.021" y2="21.7144" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#40DEFF"/>
+</linearGradient>
+</defs>
+</svg>

public/supply-chain/img4.svg

@@ -0,0 +1,122 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 73 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#186;&#149;&#233;&#131;&#168;">
+<g id="Vector">
+<g filter="url(#filter0_i_0_2167)">
+<path d="M69.382 55.6816L38.7179 73.2461C36.7968 74.3393 34.3585 74.3393 32.4374 73.1732L2.95557 55.6816C1.10834 54.5884 0 52.6206 0 50.507V4.3729C0 1.96781 1.99501 0 4.43335 0H67.9781C70.4164 0 72.4114 1.96781 72.4114 4.3729V50.4341C72.4114 52.6206 71.2292 54.5884 69.382 55.6816Z" fill="url(#paint0_linear_0_2167)"/>
+</g>
+<path d="M4.43359 0.25H67.9785C70.2818 0.250242 72.1611 2.10939 72.1611 4.37305V50.4346C72.161 52.5274 71.0305 54.4143 69.2578 55.4648L38.5938 73.0293C36.7498 74.0783 34.4088 74.0775 32.5674 72.96L32.5645 72.958L3.08301 55.4668C1.31211 54.4187 0.25 52.5324 0.25 50.5068V4.37305C0.25 2.10925 2.13007 0.25 4.43359 0.25Z" stroke="url(#paint1_linear_0_2167)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+<path d="M4.43359 0.25H67.9785C70.2818 0.250242 72.1611 2.10939 72.1611 4.37305V50.4346C72.161 52.5274 71.0305 54.4143 69.2578 55.4648L38.5938 73.0293C36.7498 74.0783 34.4088 74.0775 32.5674 72.96L32.5645 72.958L3.08301 55.4668C1.31211 54.4187 0.25 52.5324 0.25 50.5068V4.37305C0.25 2.10925 2.13007 0.25 4.43359 0.25Z" stroke="url(#paint2_linear_0_2167)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+<path d="M4.43359 0.25H67.9785C70.2818 0.250242 72.1611 2.10939 72.1611 4.37305V50.4346C72.161 52.5274 71.0305 54.4143 69.2578 55.4648L38.5938 73.0293C36.7498 74.0783 34.4088 74.0775 32.5674 72.96L32.5645 72.958L3.08301 55.4668C1.31211 54.4187 0.25 52.5324 0.25 50.5068V4.37305C0.25 2.10925 2.13007 0.25 4.43359 0.25Z" stroke="url(#paint3_linear_0_2167)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+</g>
+<g id="Vector_2">
+<g filter="url(#filter1_i_0_2167)">
+<path d="M64.3552 52.646L38.3373 67.8686C36.7072 68.816 34.6383 68.816 33.0083 67.8054L7.99341 52.646C6.42607 51.6985 5.48566 49.9931 5.48566 48.1613V8.17844C5.48566 6.09403 7.17839 4.38859 9.24729 4.38859H63.164C65.2329 4.38859 66.9257 6.09403 66.9257 8.17844V48.0982C66.9257 49.9931 65.9226 51.6985 64.3552 52.646Z" fill="#133BA0"/>
+<path d="M64.3552 52.646L38.3373 67.8686C36.7072 68.816 34.6383 68.816 33.0083 67.8054L7.99341 52.646C6.42607 51.6985 5.48566 49.9931 5.48566 48.1613V8.17844C5.48566 6.09403 7.17839 4.38859 9.24729 4.38859H63.164C65.2329 4.38859 66.9257 6.09403 66.9257 8.17844V48.0982C66.9257 49.9931 65.9226 51.6985 64.3552 52.646Z" fill="url(#paint4_linear_0_2167)" style="mix-blend-mode:overlay"/>
+<path d="M64.3552 52.646L38.3373 67.8686C36.7072 68.816 34.6383 68.816 33.0083 67.8054L7.99341 52.646C6.42607 51.6985 5.48566 49.9931 5.48566 48.1613V8.17844C5.48566 6.09403 7.17839 4.38859 9.24729 4.38859H63.164C65.2329 4.38859 66.9257 6.09403 66.9257 8.17844V48.0982C66.9257 49.9931 65.9226 51.6985 64.3552 52.646Z" fill="url(#paint5_linear_0_2167)" style="mix-blend-mode:overlay"/>
+</g>
+<path d="M9.24738 4.63859H63.1644C65.0933 4.63878 66.6761 6.23064 66.6761 8.17863V48.0986C66.676 49.9025 65.7214 51.527 64.2288 52.4306L38.2112 67.6523C36.6592 68.5543 34.6895 68.5534 33.14 67.5927L33.138 67.5917L8.12335 52.4325H8.12238C6.63169 51.5314 5.73566 49.9073 5.73566 48.1611V8.17863L5.74054 7.99699C5.83515 6.13247 7.37856 4.63859 9.24738 4.63859Z" stroke="url(#paint6_linear_0_2167)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+</g>
+<g id="Group 4">
+<mask id="mask0_0_2167" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="4" width="62" height="65">
+<path id="Vector_3" d="M64.3564 52.7442L38.2489 67.993C36.6133 68.9421 34.5372 68.9421 32.9016 67.9298L7.80068 52.7442C6.22794 51.7951 5.28429 50.0868 5.28429 48.2518V8.19997C5.28429 6.11196 6.98285 4.40358 9.05887 4.40358H63.1611C65.2371 4.40358 66.9357 6.11196 66.9357 8.19997V48.1886C66.9357 50.0868 65.9291 51.7951 64.3564 52.7442Z" fill="var(--fill-0, #133BA0)"/>
+</mask>
+<g mask="url(#mask0_0_2167)">
+<path id="Union" opacity="0.1" d="M5.73492 69.7382H5.28472V2.48235H5.73492V69.7382ZM7.53472 69.7382H7.08452V2.48235H7.53472V69.7382ZM9.33452 69.7382H8.88433V2.48235H9.33452V69.7382ZM11.1343 69.7382H10.6841V2.48235H11.1343V69.7382ZM12.9341 69.7382H12.4849V2.48235H12.9341V69.7382ZM14.7349 69.7382H14.2847V2.48235H14.7349V69.7382ZM16.5347 69.7382H16.0845V2.48235H16.5347V69.7382ZM18.3345 69.7382H17.8843V2.48235H18.3345V69.7382ZM20.1343 69.7382H19.6851V2.48235H20.1343V69.7382ZM21.9351 69.7382H21.4849V2.48235H21.9351V69.7382ZM23.7349 69.7382H23.2847V2.48235H23.7349V69.7382ZM25.5347 69.7382H25.0845V2.48235H25.5347V69.7382ZM27.3345 69.7382H26.8853V2.48235H27.3345V69.7382ZM29.1353 69.7382H28.6851V2.48235H29.1353V69.7382ZM30.9351 69.7382H30.4849V2.48235H30.9351V69.7382ZM32.7349 69.7382H32.2847V2.48235H32.7349V69.7382ZM34.5347 69.7382H34.0845V2.48235H34.5347V69.7382ZM36.3345 69.7382H35.8853V2.48235H36.3345V69.7382ZM38.1353 69.7382H37.6851V2.48235H38.1353V69.7382ZM39.9351 69.7382H39.4849V2.48235H39.9351V69.7382ZM41.7349 69.7382H41.2857V2.48235H41.7349V69.7382ZM43.5347 69.7382H43.0855V2.48235H43.5347V69.7382ZM45.3355 69.7382H44.8853V2.48235H45.3355V69.7382ZM47.1353 69.7382H46.6851V2.48235H47.1353V69.7382ZM48.9351 69.7382H48.4859V2.48235H48.9351V69.7382ZM50.7359 69.7382H50.2857V2.48235H50.7359V69.7382ZM52.5357 69.7382H52.0855V2.48235H52.5357V69.7382ZM54.3355 69.7382H53.8853V2.48235H54.3355V69.7382ZM56.1353 69.7382H55.6851V2.48235H56.1353V69.7382ZM57.9351 69.7382H57.4859V2.48235H57.9351V69.7382ZM59.7359 69.7382H59.2857V2.48235H59.7359V69.7382ZM61.5357 69.7382H61.0855V2.48235H61.5357V69.7382ZM63.3355 69.7382H62.8853V2.48235H63.3355V69.7382ZM65.1353 69.7382H64.6861V2.48235H65.1353V69.7382ZM66.9361 69.7382H66.4859V2.48235H66.9361V69.7382Z" fill="var(--fill-0, white)"/>
+</g>
+</g>
+<g id="Ellipse 276" opacity="0.2">
+<path d="M35.9313 80.3414C43.8681 80.3414 51.0447 81.2299 56.2292 82.6617C58.8232 83.3782 60.9049 84.2271 62.3317 85.1588C63.7689 86.0973 64.4811 87.0782 64.4811 88.0455C64.4811 89.0128 63.7688 89.9938 62.3317 90.9323C60.9049 91.8639 58.8232 92.7129 56.2292 93.4293C51.0447 94.8612 43.8682 95.7496 35.9313 95.7496C27.9944 95.7496 20.818 94.8612 15.6335 93.4293C13.0396 92.7129 10.9587 91.8639 9.53193 90.9323C8.09465 89.9937 7.38153 89.0129 7.38153 88.0455C7.38162 87.0782 8.09474 86.0973 9.53193 85.1588C10.9587 84.2272 13.0397 83.3781 15.6335 82.6617C20.818 81.2299 27.9945 80.3414 35.9313 80.3414Z" fill="var(--fill-0, #133BA0)"/>
+<path d="M35.9313 80.3414C43.8681 80.3414 51.0447 81.2299 56.2292 82.6617C58.8232 83.3782 60.9049 84.2271 62.3317 85.1588C63.7689 86.0973 64.4811 87.0782 64.4811 88.0455C64.4811 89.0128 63.7688 89.9938 62.3317 90.9323C60.9049 91.8639 58.8232 92.7129 56.2292 93.4293C51.0447 94.8612 43.8682 95.7496 35.9313 95.7496C27.9944 95.7496 20.818 94.8612 15.6335 93.4293C13.0396 92.7129 10.9587 91.8639 9.53193 90.9323C8.09465 89.9937 7.38153 89.0129 7.38153 88.0455C7.38162 87.0782 8.09474 86.0973 9.53193 85.1588C10.9587 84.2272 13.0397 83.3781 15.6335 82.6617C20.818 81.2299 27.9945 80.3414 35.9313 80.3414Z" stroke="url(#paint7_linear_0_2167)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+</g>
+<g id="Ellipse 274">
+<path d="M35.9315 82.5357C41.1418 82.5357 45.8502 83.1177 49.2479 84.0532C50.9483 84.5215 52.3061 85.0747 53.2332 85.6782C54.171 86.2888 54.6072 86.9093 54.6072 87.4976C54.607 88.0857 54.1708 88.7056 53.2332 89.3159C52.3061 89.9195 50.9483 90.4727 49.2479 90.9409C45.8502 91.8765 41.1418 92.4585 35.9315 92.4585C30.7211 92.4585 26.0128 91.8765 22.6151 90.9409C20.9146 90.4727 19.5568 89.9195 18.6297 89.3159C17.6922 88.7056 17.2559 88.0857 17.2557 87.4976C17.2557 86.9093 17.6919 86.2888 18.6297 85.6782C19.5568 85.0747 20.9146 84.5215 22.6151 84.0532C26.0128 83.1176 30.7211 82.5357 35.9315 82.5357Z" fill="var(--fill-0, #0B2866)"/>
+<path d="M35.9315 82.5357C41.1418 82.5357 45.8502 83.1177 49.2479 84.0532C50.9483 84.5215 52.3061 85.0747 53.2332 85.6782C54.171 86.2888 54.6072 86.9093 54.6072 87.4976C54.607 88.0857 54.1708 88.7056 53.2332 89.3159C52.3061 89.9195 50.9483 90.4727 49.2479 90.9409C45.8502 91.8765 41.1418 92.4585 35.9315 92.4585C30.7211 92.4585 26.0128 91.8765 22.6151 90.9409C20.9146 90.4727 19.5568 89.9195 18.6297 89.3159C17.6922 88.7056 17.2559 88.0857 17.2557 87.4976C17.2557 86.9093 17.6919 86.2888 18.6297 85.6782C19.5568 85.0747 20.9146 84.5215 22.6151 84.0532C26.0128 83.1176 30.7211 82.5357 35.9315 82.5357Z" fill="url(#paint8_linear_0_2167)" style="mix-blend-mode:overlay"/>
+<path d="M35.9315 82.5357C41.1418 82.5357 45.8502 83.1177 49.2479 84.0532C50.9483 84.5215 52.3061 85.0747 53.2332 85.6782C54.171 86.2888 54.6072 86.9093 54.6072 87.4976C54.607 88.0857 54.1708 88.7056 53.2332 89.3159C52.3061 89.9195 50.9483 90.4727 49.2479 90.9409C45.8502 91.8765 41.1418 92.4585 35.9315 92.4585C30.7211 92.4585 26.0128 91.8765 22.6151 90.9409C20.9146 90.4727 19.5568 89.9195 18.6297 89.3159C17.6922 88.7056 17.2559 88.0857 17.2557 87.4976C17.2557 86.9093 17.6919 86.2888 18.6297 85.6782C19.5568 85.0747 20.9146 84.5215 22.6151 84.0532C26.0128 83.1176 30.7211 82.5357 35.9315 82.5357Z" fill="url(#paint9_linear_0_2167)" style="mix-blend-mode:overlay"/>
+<path d="M35.9315 82.5357C41.1418 82.5357 45.8502 83.1177 49.2479 84.0532C50.9483 84.5215 52.3061 85.0747 53.2332 85.6782C54.171 86.2888 54.6072 86.9093 54.6072 87.4976C54.607 88.0857 54.1708 88.7056 53.2332 89.3159C52.3061 89.9195 50.9483 90.4727 49.2479 90.9409C45.8502 91.8765 41.1418 92.4585 35.9315 92.4585C30.7211 92.4585 26.0128 91.8765 22.6151 90.9409C20.9146 90.4727 19.5568 89.9195 18.6297 89.3159C17.6922 88.7056 17.2559 88.0857 17.2557 87.4976C17.2557 86.9093 17.6919 86.2888 18.6297 85.6782C19.5568 85.0747 20.9146 84.5215 22.6151 84.0532C26.0128 83.1176 30.7211 82.5357 35.9315 82.5357Z" stroke="url(#paint10_linear_0_2167)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+</g>
+<g id="Ellipse 275">
+<path d="M35.9314 84.7299C38.72 84.7299 41.2365 85.005 43.0486 85.4457C43.9566 85.6666 44.6738 85.9261 45.158 86.2045C45.6608 86.4937 45.8299 86.7542 45.8299 86.9487C45.8297 87.1431 45.6607 87.4037 45.158 87.6928C44.6738 87.9712 43.9566 88.2307 43.0486 88.4516C41.2365 88.8924 38.7199 89.1674 35.9314 89.1674C33.1429 89.1674 30.6263 88.8924 28.8142 88.4516C27.9063 88.2307 27.189 87.9712 26.7049 87.6928C26.2022 87.4037 26.0331 87.1431 26.033 86.9487C26.033 86.7542 26.2022 86.4937 26.7049 86.2045C27.189 85.9261 27.9063 85.6666 28.8142 85.4457C30.6263 85.005 33.1429 84.7299 35.9314 84.7299Z" fill="var(--fill-0, #3C66BE)"/>
+<path d="M35.9314 84.7299C38.72 84.7299 41.2365 85.005 43.0486 85.4457C43.9566 85.6666 44.6738 85.9261 45.158 86.2045C45.6608 86.4937 45.8299 86.7542 45.8299 86.9487C45.8297 87.1431 45.6607 87.4037 45.158 87.6928C44.6738 87.9712 43.9566 88.2307 43.0486 88.4516C41.2365 88.8924 38.7199 89.1674 35.9314 89.1674C33.1429 89.1674 30.6263 88.8924 28.8142 88.4516C27.9063 88.2307 27.189 87.9712 26.7049 87.6928C26.2022 87.4037 26.0331 87.1431 26.033 86.9487C26.033 86.7542 26.2022 86.4937 26.7049 86.2045C27.189 85.9261 27.9063 85.6666 28.8142 85.4457C30.6263 85.005 33.1429 84.7299 35.9314 84.7299Z" fill="url(#paint11_linear_0_2167)" style="mix-blend-mode:overlay"/>
+<path d="M35.9314 84.7299C38.72 84.7299 41.2365 85.005 43.0486 85.4457C43.9566 85.6666 44.6738 85.9261 45.158 86.2045C45.6608 86.4937 45.8299 86.7542 45.8299 86.9487C45.8297 87.1431 45.6607 87.4037 45.158 87.6928C44.6738 87.9712 43.9566 88.2307 43.0486 88.4516C41.2365 88.8924 38.7199 89.1674 35.9314 89.1674C33.1429 89.1674 30.6263 88.8924 28.8142 88.4516C27.9063 88.2307 27.189 87.9712 26.7049 87.6928C26.2022 87.4037 26.0331 87.1431 26.033 86.9487C26.033 86.7542 26.2022 86.4937 26.7049 86.2045C27.189 85.9261 27.9063 85.6666 28.8142 85.4457C30.6263 85.005 33.1429 84.7299 35.9314 84.7299Z" fill="url(#paint12_linear_0_2167)" style="mix-blend-mode:overlay"/>
+<path d="M35.9314 84.7299C38.72 84.7299 41.2365 85.005 43.0486 85.4457C43.9566 85.6666 44.6738 85.9261 45.158 86.2045C45.6608 86.4937 45.8299 86.7542 45.8299 86.9487C45.8297 87.1431 45.6607 87.4037 45.158 87.6928C44.6738 87.9712 43.9566 88.2307 43.0486 88.4516C41.2365 88.8924 38.7199 89.1674 35.9314 89.1674C33.1429 89.1674 30.6263 88.8924 28.8142 88.4516C27.9063 88.2307 27.189 87.9712 26.7049 87.6928C26.2022 87.4037 26.0331 87.1431 26.033 86.9487C26.033 86.7542 26.2022 86.4937 26.7049 86.2045C27.189 85.9261 27.9063 85.6666 28.8142 85.4457C30.6263 85.005 33.1429 84.7299 35.9314 84.7299Z" stroke="url(#paint13_linear_0_2167)" stroke-width="0.5" style="mix-blend-mode:overlay"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_0_2167" x="0" y="0" width="72.4114" height="74.0571" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+<feBlend mode="overlay" in2="shape" result="effect1_innerShadow_0_2167"/>
+</filter>
+<filter id="filter1_i_0_2167" x="5.48566" y="4.38859" width="61.44" height="64.1829" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+<feBlend mode="overlay" in2="shape" result="effect1_innerShadow_0_2167"/>
+</filter>
+<linearGradient id="paint0_linear_0_2167" x1="36.2057" y1="0" x2="36.2057" y2="74.0571" gradientUnits="userSpaceOnUse">
+<stop stop-color="#133BA0" stop-opacity="0"/>
+<stop offset="1" stop-color="#133BA0" stop-opacity="0.37"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_2167" x1="36.2057" y1="0" x2="36.2057" y2="74.0571" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint2_linear_0_2167" x1="36.2057" y1="45.9665" x2="36.2057" y2="74.0571" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint3_linear_0_2167" x1="36.2057" y1="65.4384" x2="36.2057" y2="74.0571" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint4_linear_0_2167" x1="36.2057" y1="4.38859" x2="36.2057" y2="68.5714" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint5_linear_0_2167" x1="36.2057" y1="4.38859" x2="36.2057" y2="68.5714" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint6_linear_0_2167" x1="36.2057" y1="4.38859" x2="36.2057" y2="68.5714" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint7_linear_0_2167" x1="35.9315" y1="80.0914" x2="35.9315" y2="96" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint8_linear_0_2167" x1="35.9314" y1="82.2857" x2="35.9314" y2="92.7085" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint9_linear_0_2167" x1="35.9314" y1="82.2857" x2="35.9314" y2="92.7085" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint10_linear_0_2167" x1="35.9314" y1="82.2857" x2="35.9314" y2="92.7085" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint11_linear_0_2167" x1="35.9315" y1="84.4799" x2="35.9315" y2="89.4171" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint12_linear_0_2167" x1="35.9315" y1="84.4799" x2="35.9315" y2="89.4171" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint13_linear_0_2167" x1="35.9315" y1="84.4799" x2="35.9315" y2="89.4171" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

public/supply-chain/img8.svg

@@ -0,0 +1,31 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1208 402" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="1" filter="url(#filter0_d_0_2071)">
+<path d="M254.094 132.243L171 105H604.132H1037.26L954.17 132.243H822.397L780.51 162.64H604.132H427.755L385.868 132.243H254.094Z" fill="url(#paint0_linear_0_2071)" fill-opacity="0.28" shape-rendering="crispEdges"/>
+<path d="M254.094 132.243L171 105H604.132H1037.26L954.17 132.243H822.397L780.51 162.64H604.132H427.755L385.868 132.243H254.094Z" stroke="url(#paint1_linear_0_2071)" stroke-opacity="0.3" stroke-width="3" shape-rendering="crispEdges"/>
+<path d="M254.094 132.243L171 105H604.132H1037.26L954.17 132.243H822.397L780.51 162.64H604.132H427.755L385.868 132.243H254.094Z" stroke="url(#paint2_linear_0_2071)" stroke-opacity="0.3" stroke-width="3" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_0_2071" x="0.532693" y="0.5" width="1207.2" height="400.64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="67"/>
+<feGaussianBlur stdDeviation="85"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_2071"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_2071" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_0_2071" x1="604.132" y1="105" x2="604.132" y2="162.64" gradientUnits="userSpaceOnUse">
+<stop stop-color="#516CB1" stop-opacity="0.01"/>
+<stop offset="1" stop-color="#516CB1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_2071" x1="604.132" y1="105" x2="604.132" y2="162.64" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2BEFF" stop-opacity="0"/>
+<stop offset="1" stop-color="#A2BEFF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_0_2071" x1="604.132" y1="105" x2="604.132" y2="162.64" gradientUnits="userSpaceOnUse">
+<stop offset="0.751329" stop-color="#A2BEFF" stop-opacity="0"/>
+<stop offset="1" stop-color="#A2BEFF"/>
+</linearGradient>
+</defs>
+</svg>

public/supply-chain/img9.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect id="Rectangle 19465" width="1920" height="1080" fill="var(--fill-0, #D9D9D9)"/>
+</svg>

public/supply-chain/union14.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 124 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" d="M114.7 44.2L115 45.6L116.7 46.6L118.5 45.8L118.9 46.5L117.6 50.2L117.1 52.8L115.1 53.5L113.9 56L115.8 59.1L120.1 61.3L121.5 61.1L122.3 62.2L122.7 65.8L123.2 67.4L123 69.6L118.4 74.7L116.5 75.1L115 76.9L111.3 74.1L110.4 74.8L110.6 77L108.4 77.3L106.9 81.5L103.8 81.9L102.9 83.4L101.5 84.2L98.7 82.4L94.6 83.6L91.8 83.8L86.3 86.1L84.1 85.6L83 86.4L81.2 85.6L80.3 84.2L80.7 82.6L75.6 77.4V76.5L73.1 71.6L70.7 70.3L69.4 68.5L67.1 68.4L61.1 63.4L56.6 63.5L54.9 67.4L53.9 68.7L51.7 70.1L47.6 71L43.6 70.7L41.7 71.3L38.4 70.1L29.8 72.9L28 72.8L25.7 71.1L22.3 72.1L21.6 71.9L18.2 68.5L17.2 65.7L15.4 64L13.5 64.1L13.4 63.6L12.9 62.8H11.8L10.8 58.2L9.70001 59.4L9.20001 56L9.79999 50.9L10.5 50.7L10 48.5L10.4 45.4L9 42.8L6.70001 41.9L5.59998 38.1L6.79999 35.6L5.20001 33.4L3.39996 30.3L3 28.8L6.20001 22.9L6.89996 21.9L6.79999 20.3L7.89996 20.1L7.59998 18.5L6.20001 16.5L7.39996 14.3L8.59998 13.9L8.29999 11.4L6 11.9H5.79999L4.5 10.4L3.59998 11.5L2.09998 10.8L2.5 9.29999L1.20001 6.70001L1 4.19998L2.5 1.79999L3.5 2.59998L7.79999 1L12.1 1.19998L15.7 4.09998L17.1 4.69998L19.3 4.59998L19.7 5.89996L18.5 9.39996L19 11.7L20.5 11.9L24.3 9.39996L26.2 9.70001L26.6 10.6L26.1 12.7L27.7 16.5L30.9 19.6L32 18.4L33.1 16.5L34 16.3L35.8 17.5L36.5 20.3L37.7 21.1L40.6 20.3L47.3 19.8L49.5 20L53.9 21.5L56.7 20.5L59.5 21.4L61.6 23.3L63.4 23.6L65.7 25.8L69.5 26.2L70.7 28.3L71.8 29.1L73 28.7L73.3 26.6L74.4 26.2L76.3 28.5L78.2 28.1V25.5L80.1 22.4L83.1 21.4L83.8 20L84.3 16.2L85.6 14.3L86.7 11.5L87.7 10.6L89.7 10.2L91.2 8.59998L91.9 10.6L93.4 11.5L94.9 9.5L95.6 10.1L97 14.3L96.1 16.4L95.5 20.4L94.9 21.5L99.2 22L100.7 22.7L103.4 26.8L107.2 27.4L107.1 29.5L110.8 30.4L112.9 29.9L111.4 34.8L112.1 37L114.5 39.3L114 40.2L114.6 43L114.3 44.2H114.2V44.5L114.7 44.2ZM114.7 44.2V43.9L114.6 44.2H114.7Z" stroke="var(--stroke-0, white)"/>
+</svg>

public/supply-chain/union15.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 76 107" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" d="M20.4 6.60001L21.3 7.10001L24.4 4.60001L24.5 4.20001L24.3 3.70001M20.4 6.60001L19.3 5.70001L17.9 5.89999L18 7.10001L19.8 8.5L20 9.60001L18.2 12.3V15.4L16.1 16.3L15.1 18.6L16.9 21.5L17.6 23.6L16.3 26.2L14.3 27.2L13.6 24.3L12.5 22.9L10.6 26.5L10.5 30.5L12.1 31L12.3 33.1L11.7 36.9L10.3 38.4L7.09998 38.7L5.69995 39.5L4.5 42L5.29999 44.8L4.59998 47.4L2.5 50.1L1 51.2L2.29999 54.4L3.59998 55.5V59.4L3 61.8L3.59998 67.1L4.5 69.5L7 72.2L10.4 77.6L11.8 81.5L11.1 82.3V85.9L11.8 87.8L13.5 88.5L14.3 90.7L14.2 93.1L12.2 96.7L13.2 98.5L15 98.9L17.6 98.7L19.1 99.1L21.4 100.8L24.2 101.3L26.2 103.1H28.4L29.6 103.9L34 103.8L34.1 105.8H45L44 103.7L41.8 102.4L41.1 101.3L41.6 100.2H44.1L45.2 97.7V96.1L44 92.2L45 90.1L47.6 90.6L48.7 89.8L50 87.1L52.3 85.3L53.8 86.9L53.9 89L55.5 88.7L57.1 90.2L59.7 89.9L62.8 91L63 93.8L65.3 95.5L67.2 94.8L68.8 95.9L70.6 95.2L73.1 93L72.5 90.1L74.3 88.5L73.8 86.5L75 85.4L74.9 84.9H74.8L74.5 84.4L74.4 84.1H73.3L72.3 79.5L71.2 80.7L70.7 77.3L71.3 72.2L72 72L71.5 69.8L71.9 66.7L70.5 64.1L68.2 63.2L67.1 59.4L68.3 56.9L66.7 54.7L64.9 51.6L64.5 50.1L67.7 44.2L67.6 43.4L67.7 43.2H68.3L68.2 41.6L69.3 41.4L69 39.8L67.6 37.8L68.8 35.6L70 35.2L69.7 32.7L67.4 33.2V33.3H67.3L67.2 33.2L65.9 31.7L65 32.8L63.5 32.1L63.9 30.6L62.6 28L62.4 25.5L63.9 23.1L63.3 22.2L61.6 17L57.5 14.1L55.9 14.7L53.9 16.9L53 18.8L52.9 20.9L54.1 24.6V27L52.3 29.5L47.1 27.9L45 25.8L43.2 22L42.5 17.9L41.3 14.4L40.5 13.9L37.7 15.2L34 14.3L31.8 15.2L30.2 17.9L29 18L26.4 14.5L25.4 12.4L25.2 9.60001L26.1 6.39999L27.1 5.29999L30.1 4L30.9 3H29.9L26.8 1L25.9 2.20001L24.4 2L24.3 3.70001M20.4 6.60001L19.2 5.60001L20 4.60001L21.5 5L21.8 3.10001L23.4 2.10001L23.1 4L24.3 3.70001M68 43L67.3 44L67.2 43.2L67.3 43H68ZM74.1 83.9L74.6 84.7H74.5L74.2 84.2L74.1 83.9ZM67.2 32.9V33H67.1L67 32.9H67.2Z" stroke="var(--stroke-0, white)"/>
+</svg>

public/supply-chain/union17.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 146 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" d="M6.8 65L8.5 63.4L11 63L12.7 63.7L14.9 61.9L15.9 60.4L18.3 59.1L18.9 58.2L18.2 55.6L20.8 54.1L22.8 51.5L27.1 48.2H32.5L34.1 49.1L35.7 52.4L37.2 52.9L39 54.7L39.5 54.4L40 51.5L41.5 50.6V49.2L40 46.7L37.6 45.6L38.4 43.1L41.7 40.7L41.9 38.1L41.2 36.7L39 35.2L39.8 33.2L41.3 27.6V24.6L43.5 22.2L46.6 20.8L48.2 19L50.3 18.9L52.4 19.4L54.6 19L57.1 19.2L60.1 17.4L59.9 12L62.5 11.7L64.1 10.9L64.9 8.89999L68.1 8.39999L68.7 9.89999L71.3 11.1L73.1 9.70001L74.3 9.5L74.2 6.89999L76.6 5.5L75.7 3.39999L79.3 1.70001L80.5 2.10001L80.6 5L82.2 4.60001L83.1 2.89999L89.9 3.89999L91.7 3.30002L93.4 4L94.4 3L95.6 3.70001L96.9 3.20001L99.1 4.20001L100.2 3.89999L100.8 1.5L101.7 1L103.7 2.20001L105.9 2.5L107 3.70001L109.1 4.30002L113.1 4.80002L114.2 6.89999L115 6.20001L116.2 7L116.6 9.10001L120 14.1L121.2 15.4H124.6L126.4 17.4L126.9 18.9L129.1 22L130.1 24.5L129.7 27.6L130.6 28.4L130.8 31.4L132.3 35L134.4 36.8L135.5 38.3L139.9 36.8L140.7 37.7L144 39.6L144.8 40.9L143.2 41.8L141.4 46L139.2 50L140.1 55L135.4 57.8L134.7 61.3L132.4 61.9L131.3 63.8L127.4 67.3H126.3L125.3 64.7L123.8 62.9V60.1L123.2 59.4L121.4 60.4L119.2 57.4H118.2L115.4 59.5L111.9 60.1L110.4 61.5V64.2L107.1 70.4L106.9 71.4L105.2 71.3L103.9 69.9L102.8 70.5L99.9 70.3L97.2 70.9L94.4 69.8L93.8 70.3L94 73.3L93 74.9V76.4L91.9 78.6L90.6 84.1L89.3 85.8L89.6 89.2L87.6 92L87.8 93.8L89 96L88.6 98.6L87.7 99.3L83.6 101.1L82 99.7L81.6 97.5L79.6 95.5L80.2 93.9L78.9 91.7L77.2 91.4V93.9L76.2 97L74 99H71.3L71.2 97.7L70 96.4L70.1 93.6L68.3 92.9L65.3 90.5L63 90.3L61.8 88.3L59.2 87.6L57.9 88.2L57.1 87H54L47.2 96.4L44.9 97.3L42.6 99.1L40.9 101.8L39 103.5L34.5 105.4L32.1 104L31.5 101.8L30.4 101.3L31.3 98.4L29.8 96L30 94.3L28.7 92L29.4 89.6L28.7 87.9L26.9 87.4L25.7 86.1L25.1 84L24 84.7L16.8 84.2L16.2 82.8L14.1 80.5L14 78.9L12.2 78.5L9.8 76.4L8.8 73.5L7.60001 72.5L4.8 72.6L3 73.7L1.8 73.5L1 71.8L2.20001 70L3.3 69.6L3.90001 68L6.8 65Z" stroke="var(--stroke-0, white)"/>
+</svg>

public/supply-chain/union6.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 83 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" d="M80.4 66.8L77.9 66.4L77.1 67.6L72.8 67.8L71.9 70.7L70.1 72L70.8 73.5L68.8 75.4L67.7 74.3L65.7 74.8L64 77L63 76.9L60.4 74.4L52 71L50.8 69.8L50.1 66.3L51.5 64.4L50 62.5L48.3 62.6L46.5 60.7L46.7 58.4L45.6 57H42.5L39.8 57.5L39.3 58.5L39.6 60.7L37.9 60.9L32.8 59L31.4 56.3L31.3 54.5L29.9 54.6L27.6 57.6L26.3 61.2L27.3 62.8L26.8 63.8L24.3 65.4L23.9 67.3L22.4 68.7L23 71.5L23.1 74.5L24.6 75.7L25.1 77.3L28.5 80.6L31.1 81.8L29.5 83.9L30 84.9L28.2 85.9L27.8 87.9L30 89.6L30.3 91.4L31.9 92.6L32.2 95.4L33.7 97.9L31.9 98.3L30.6 99.9L31.4 102.9L32.4 103.7L32 104.9L30.2 106.8L28.4 107.1L27.6 105.3L25.9 106.8L26.8 107.8L26.3 110.5L24.5 110.4L23.2 111.6L22.2 111L20.4 111.8L19.6 109.8L19.8 107.8L17.4 104.8L13.9 106L13.1 105.6L11.7 107.9L10.4 108.2L9.39996 107.1L10.3 106.2L8.39996 104L6.59998 103L6.09998 100.2L5.19995 99.4L4.89996 97.1L2.79999 95.8L3 94.8L1 91.8L1.39996 89.1L1.19995 87L2.5 84.6L2.09998 82.8L3 82.1L3.19995 79.1L5 78.8L5.79999 77.3L6.29999 74.3V71.3L9.5 67.7L9.79999 64.1L12.6 62L13.2 59.8L12.9 56.6L13.7 51.9L13.6 50.6L12.1 47.7L13 39L12.7 36.9L11.6 33.9L12.7 32.5L12.6 30.3L15 30.4L16.6 31.4L17.5 28L18.7 27.9L19.5 26.5L18.4 22.4L19 21L18.5 17.4L17.2 16.7L18.1 15.2L17.4 14.7L16.7 11.9L18 12L23 9.20001L26.7 8.30002L30.4 7L33.2 5.39999L36.1 2.39999L39.5 1H40.4L42.7 1.30002L45.5 4.80002L46.5 7.70001L47 11.2L47.1 17.5L46.6 23.6V27.1L47.1 29.9L48.1 32.3L50.5 35.8L54.5 38.4L58 39.5L66.5 40.8L71.9 40.1L74.6 40.8L77.1 43.1L79.2 47.1L80.8 53.9L81.6 60.1L81.3 62.9L80.4 66.8Z" stroke="var(--stroke-0, white)"/>
+</svg>

src/client/home/pages/SupplyChainDashboards/GrainOilDashboard.tsx

@@ -3,187 +3,39 @@ import SupplyChainMap from './components/SupplyChainMap';
 import SupplyChainModel from './components/SupplyChainModel';
 import KeyMetrics from './components/KeyMetrics';
 
+// 导入新的组件库
+import Navigation from './components/layout/Navigation';
+import SupplyChainBackground from './components/layout/SupplyChainBackground';
+import BackgroundGrid from './components/layout/BackgroundGrid';
+import HeaderBar from './components/layout/HeaderBar';
+import { IndustryType } from './components/icons/IndustryIcon';
+
 // 定义组件接口
 interface GrainOilDashboardProps {
   // 可以添加props如果需要
 }
 
-// 图标组件 - 粮食图标
-const GrainIcon: React.FC<{ className?: string }> = ({ className }) => {
-  return (
-    <div className={className}>
-      <div className="absolute inset-[13%_21.7%]">
-        <img
-          alt="粮食图标"
-          className="block max-w-none size-full"
-          src="https://www.figma.com/api/mcp/asset/74aa7038-2d6c-44fa-8671-4472845f5469"
-        />
-      </div>
-    </div>
-  );
-};
-
-// 图标组件 - 油脂图标
-const OilIcon: React.FC<{ className?: string }> = ({ className }) => {
-  return (
-    <div className={className}>
-      <div className="absolute inset-[13%_26.2%]">
-        <img
-          alt="油脂图标"
-          className="block max-w-none size-full"
-          src="https://www.figma.com/api/mcp/asset/0df5dc87-b48b-4b8d-a3ee-7721d3185ddc"
-        />
-      </div>
-    </div>
-  );
-};
-
-// 产业链图标组件
-const IndustryChainIcon: React.FC<{ className?: string }> = ({ className }) => {
-  return (
-    <div className={className}>
-      <div className="absolute inset-[5.36%_10.72%]">
-        <img
-          alt="产业链图标"
-          className="block max-w-none size-full"
-          src="https://www.figma.com/api/mcp/asset/2388ddbc-149e-4662-89ae-e9df0ed9c546"
-        />
-      </div>
-    </div>
-  );
-};
-
-// 导航组件
-const Navigation: React.FC<{
-  activeTab: 'grain' | 'oil';
-  onTabChange: (tab: 'grain' | 'oil') => void
-}> = ({ activeTab, onTabChange }) => {
-  return (
-    <div className="absolute h-[1078.893px] left-[40px] top-0 w-[150.879px]">
-      <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%]">
-        {/* 粮食导航项 */}
-        <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] cursor-pointer transition-all ${
-            activeTab === 'grain'
-              ? 'bg-[rgba(255,255,255,0.05)]'
-              : 'hover:bg-[rgba(255,255,255,0.02)]'
-          }`}
-          onClick={() => onTabChange('grain')}
-        >
-          <GrainIcon 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">
-            <div className="flex flex-col font-bold justify-center leading-[32px] not-italic relative shrink-0 text-[26px] whitespace-nowrap">
-              <p className="mb-0 text-white">粮</p>
-              <p className="mb-0">&nbsp;</p>
-              <p className="text-white">食</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] cursor-pointer transition-all ${
-            activeTab === 'oil'
-              ? 'bg-[rgba(255,255,255,0.05)]'
-              : 'hover:bg-[rgba(255,255,255,0.02)]'
-          }`}
-          onClick={() => onTabChange('oil')}
-        >
-          <OilIcon 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">
-            <div className="flex flex-col font-bold justify-center leading-[32px] not-italic relative shrink-0 text-[26px] whitespace-nowrap">
-              <p className="mb-0 text-[rgba(255,255,255,0.5)]">油</p>
-              <p className="mb-0">&nbsp;</p>
-              <p className="text-[rgba(255,255,255,0.5)]">脂</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">
-            <div className="absolute bottom-[-0.04%] left-0 right-0 top-[-0.04%]">
-              <img
-                alt="导航光标"
-                className="block max-w-none size-full"
-                src="https://www.figma.com/api/mcp/asset/800cef2d-f019-4e81-aea2-643efa15258e"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 
 // 主组件
 const GrainOilDashboard: React.FC<GrainOilDashboardProps> = () => {
-  const [activeTab, setActiveTab] = useState<'grain' | 'oil'>('grain');
+  const [activeTab, setActiveTab] = useState<IndustryType>('粮食');
 
 
   return (
     <div className="h-[1080px] w-[1920px] bg-[#0a1a3a] relative overflow-hidden">
       {/* 背景 */}
       <div className="absolute contents left-0 top-0">
-        <div className="absolute h-[1080px] left-0 overflow-clip top-0 w-[1920px]">
-          <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="https://www.figma.com/api/mcp/asset/d046358a-9a3b-42e0-89cb-4a2b2a843ced"
-            />
-            <div className="absolute bg-[rgba(0,79,154,0.1)] inset-0" />
-          </div>
-        </div>
-
-        {/* 底部网格 */}
-        <div className="absolute h-[1080px] left-0 top-0 w-[1920px]">
-          <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%]">
-            <div className="h-[1013.464px] relative shrink-0 w-[1920px]">
-              <img
-                alt="网格"
-                className="block max-w-none size-full"
-                src="https://www.figma.com/api/mcp/asset/597ea7a4-6131-4e5c-b0c3-955a775a85b0"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* 顶部标题栏 */}
-        <div className="absolute h-[71.119px] left-[526.95px] top-[40px] w-[866.265px]">
-          <div className="absolute bottom-[18.95%] left-0 right-0 top-0">
-            <div className="absolute inset-[-181.3%_-19.68%_-413.77%_-19.68%]">
-              <img
-                alt="标题栏背景"
-                className="block max-w-none size-full"
-                src="https://www.figma.com/api/mcp/asset/e595857a-5eff-4590-b426-0a8ae38539f6"
-              />
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[27.44%] right-[27.44%] top-[62.9%]">
-            <div className="absolute inset-[-257.75%_-17.4%]">
-              <img
-                alt="标题栏装饰"
-                className="block max-w-none size-full"
-                src="https://www.figma.com/api/mcp/asset/5ad5a4ea-c56a-4b77-9b93-7aa1afb09e71"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* 主标题 */}
-        <div 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%]">
-          <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-center text-white tracking-[10.2px] whitespace-nowrap">
-            <p className="leading-[32px]">粮食•油脂</p>
-          </div>
-        </div>
+        <SupplyChainBackground />
+        <BackgroundGrid />
+        <HeaderBar title="粮食•油脂" />
       </div>
 
       {/* 左侧导航 */}
-      <Navigation activeTab={activeTab} onTabChange={setActiveTab} />
+      <Navigation
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        availableIndustries={["粮食", "油脂"]}
+      />
 
       {/* 中间地图区域 */}
       <SupplyChainMap

src/client/home/pages/SupplyChainDashboards/components/icons/IndustryIcon.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+// 定义产业类型
+export type IndustryType = "粮食" | "油脂" | "种业" | "果蔬" | "畜牧" | "水产" | "鲜食" | "泛盐";
+
+// 图标组件接口
+interface IndustryIconProps {
+  className?: string;
+  industry: IndustryType;
+  isActive?: boolean;
+}
+
+// 产业图标URL映射
+const industryIconUrls: Record<IndustryType, string> = {
+  "粮食": "https://www.figma.com/api/mcp/asset/74aa7038-2d6c-44fa-8671-4472845f5469",
+  "油脂": "https://www.figma.com/api/mcp/asset/0df5dc87-b48b-4b8d-a3ee-7721d3185ddc",
+  "种业": "", // 待补充
+  "果蔬": "", // 待补充
+  "畜牧": "", // 待补充
+  "水产": "", // 待补充
+  "鲜食": "", // 待补充
+  "泛盐": "", // 待补充
+};
+
+// 统一的产业图标组件
+const IndustryIcon: React.FC<IndustryIconProps> = ({
+  className = "",
+  industry,
+  isActive = true
+}) => {
+  const iconUrl = industryIconUrls[industry];
+
+  if (!iconUrl) {
+    console.warn(`未找到产业 ${industry} 的图标URL`);
+    return null;
+  }
+
+  return (
+    <div className={`overflow-clip relative shrink-0 size-[50px] ${className}`}>
+      <div className="absolute inset-[13%_21.7%]">
+        <img
+          alt={`${industry}图标`}
+          className="block max-w-none size-full"
+          src={iconUrl}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default IndustryIcon;

src/client/home/pages/SupplyChainDashboards/components/icons/index.ts

@@ -0,0 +1,2 @@
+// 图标组件导出
+export { default as IndustryIcon, type IndustryType } from './IndustryIcon';

src/client/home/pages/SupplyChainDashboards/components/index.ts

@@ -0,0 +1,16 @@
+// 组件库主导出文件
+
+// 图标组件
+export * from './icons';
+
+// 布局组件
+export * from './layout';
+
+// 文本组件 (待实现)
+// export * from './text';
+
+// 地图组件 (待实现)
+// export * from './map';
+
+// 数据组件 (待实现)
+// export * from './data';

src/client/home/pages/SupplyChainDashboards/components/layout/BackgroundGrid.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+// 网格背景组件接口
+interface BackgroundGridProps {
+  className?: string;
+}
+
+// 底部网格背景组件
+const BackgroundGrid: React.FC<BackgroundGridProps> = ({
+  className = ""
+}) => {
+  return (
+    <div className={`absolute h-[1080px] left-0 top-0 w-[1920px] ${className}`}>
+      <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%]">
+        <div className="h-[1013.464px] relative shrink-0 w-[1920px]">
+          <img
+            alt="网格背景"
+            className="block max-w-none size-full"
+            src="https://www.figma.com/api/mcp/asset/597ea7a4-6131-4e5c-b0c3-955a775a85b0"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BackgroundGrid;

src/client/home/pages/SupplyChainDashboards/components/layout/HeaderBar.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+// 标题栏组件接口
+interface HeaderBarProps {
+  className?: string;
+  title?: string;
+}
+
+// 顶部标题栏组件
+const HeaderBar: React.FC<HeaderBarProps> = ({
+  className = "",
+  title = ""
+}) => {
+  return (
+    <div className={`absolute h-[71.119px] left-[526.95px] top-[40px] w-[866.265px] ${className}`}>
+      <div className="absolute bottom-[18.95%] left-0 right-0 top-0">
+        <div className="absolute inset-[-181.3%_-19.68%_-413.77%_-19.68%]">
+          <img
+            alt="标题栏背景"
+            className="block max-w-none size-full"
+            src="/supply-chain/img8.svg"
+          />
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-[27.44%] right-[27.44%] top-[62.9%]">
+        <div className="absolute inset-[-257.75%_-17.4%]">
+          <img
+            alt="标题栏装饰"
+            className="block max-w-none size-full"
+            src="https://www.figma.com/api/mcp/asset/5ad5a4ea-c56a-4b77-9b93-7aa1afb09e71"
+          />
+        </div>
+      </div>
+
+      {/* 标题文本 */}
+      {title && (
+        <div className="absolute box-border content-stretch flex gap-[10px] items-center justify-center left-1/2 px-0 py-[4px] top-1/2 translate-x-[-50%] translate-y-[-50%]">
+          <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-center text-white tracking-[10.2px] whitespace-nowrap">
+            <p className="leading-[32px]">{title}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HeaderBar;

src/client/home/pages/SupplyChainDashboards/components/layout/Navigation.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import IndustryIcon, { IndustryType } from '../icons/IndustryIcon';
+
+// 导航组件接口
+interface NavigationProps {
+  activeTab: IndustryType;
+  onTabChange: (tab: IndustryType) => void;
+  availableIndustries?: IndustryType[];
+}
+
+// 导航组件
+const Navigation: React.FC<NavigationProps> = ({
+  activeTab,
+  onTabChange,
+  availableIndustries = ["粮食", "油脂"] // 默认提供粮食和油脂
+}) => {
+  return (
+    <div className="absolute h-[1078.893px] left-[40px] top-0 w-[150.879px]">
+      <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%]">
+        {availableIndustries.map((industry) => (
+          <div
+            key={industry}
+            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] cursor-pointer transition-all ${
+              activeTab === industry
+                ? 'bg-[rgba(255,255,255,0.05)]'
+                : 'hover:bg-[rgba(255,255,255,0.02)]'
+            }`}
+            onClick={() => onTabChange(industry)}
+          >
+            <IndustryIcon
+              industry={industry}
+              isActive={activeTab === industry}
+            />
+            <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+              <div className="flex flex-col font-bold justify-center leading-[32px] not-italic relative shrink-0 text-[26px] whitespace-nowrap">
+                <p className={`mb-0 ${activeTab === industry ? 'text-white' : 'text-[rgba(255,255,255,0.5)]'}`}>
+                  {industry.charAt(0)}
+                </p>
+                <p className="mb-0">&nbsp;</p>
+                <p className={`${activeTab === industry ? 'text-white' : 'text-[rgba(255,255,255,0.5)]'}`}>
+                  {industry.charAt(1)}
+                </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">
+            <div className="absolute bottom-[-0.04%] left-0 right-0 top-[-0.04%]">
+              <img
+                alt="导航光标"
+                className="block max-w-none size-full"
+                src="https://www.figma.com/api/mcp/asset/800cef2d-f019-4e81-aea2-643efa15258e"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Navigation;

src/client/home/pages/SupplyChainDashboards/components/layout/SupplyChainBackground.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+// 背景组件接口
+interface SupplyChainBackgroundProps {
+  className?: string;
+}
+
+// 供应链专用背景组件
+const SupplyChainBackground: React.FC<SupplyChainBackgroundProps> = ({
+  className = ""
+}) => {
+  return (
+    <div className={`absolute h-[1080px] left-0 overflow-clip top-0 w-[1920px] ${className}`}>
+      <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="https://www.figma.com/api/mcp/asset/d046358a-9a3b-42e0-89cb-4a2b2a843ced"
+        />
+        <div className="absolute bg-[rgba(0,79,154,0.1)] inset-0" />
+      </div>
+    </div>
+  );
+};
+
+export default SupplyChainBackground;

src/client/home/pages/SupplyChainDashboards/components/layout/index.ts

@@ -0,0 +1,5 @@
+// 布局组件导出
+export { default as Navigation } from './Navigation';
+export { default as SupplyChainBackground } from './SupplyChainBackground';
+export { default as BackgroundGrid } from './BackgroundGrid';
+export { default as HeaderBar } from './HeaderBar';