✨ feat(dashboard): 重构供应链合作模式展示组件

- 提取右侧供应链合作模式代码为独立组件SupplyChainModel
- 新增合作模式详情展示，包括三方角色说明和合作流程
- 添加色彩区分的圆形标识和渐变色样式增强视觉效果
- 使用grid和flex布局优化合作主体展示结构
- 添加卡片容器和边框样式提升内容层次感

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import SupplyChainMap from './components/SupplyChainMap';
+import SupplyChainModel from './components/SupplyChainModel';
 
 // 定义组件接口
 interface GrainOilDashboardProps {
@@ -232,26 +233,7 @@ const GrainOilDashboard: React.FC<GrainOilDashboardProps> = () => {
       />
 
       {/* 右侧供应链合作模式 */}
-      <div className="absolute content-stretch flex flex-col gap-[10px] items-end right-[80px] top-[150px]">
-        <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
-          <div className="flex flex-col font-normal justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-[rgba(255,255,255,0.5)] whitespace-nowrap">
-            <p className="leading-[32px]">省粮油集团+区域公司+新型农业经营主体</p>
-          </div>
-        </div>
-        <div className="box-border content-stretch flex gap-[10px] h-[77px] items-center justify-end px-0 py-[4px] relative shrink-0 w-full">
-          <div className="bg-clip-text bg-gradient-to-b flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[80px] text-right whitespace-nowrap" style={{
-            backgroundImage: 'linear-gradient(to bottom, #ffffff, #40deff)',
-            WebkitTextFillColor: 'transparent'
-          }}>
-            <p className="leading-[50px]">1+1+N</p>
-          </div>
-        </div>
-        <div className="box-border content-stretch flex gap-[10px] items-center justify-end px-0 py-[4px] relative shrink-0">
-          <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[50px] text-[cyan] text-right whitespace-nowrap">
-            <p className="leading-[50px]">供应链合作模式</p>
-          </div>
-        </div>
-      </div>
+      <SupplyChainModel />
 
       {/* 左侧数据展示 */}
       <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]">

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

@@ -0,0 +1,111 @@
+import React from 'react';
+
+interface SupplyChainModelProps {
+  // 可以添加props如果需要
+}
+
+const SupplyChainModel: React.FC<SupplyChainModelProps> = () => {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[10px] items-end right-[80px] top-[150px]">
+      {/* 合作主体描述 */}
+      <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+        <div className="flex flex-col font-normal justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-[rgba(255,255,255,0.5)] whitespace-nowrap">
+          <p className="leading-[32px]">省粮油集团+区域公司+新型农业经营主体</p>
+        </div>
+      </div>
+
+      {/* 1+1+N 标题 */}
+      <div className="box-border content-stretch flex gap-[10px] h-[77px] items-center justify-end px-0 py-[4px] relative shrink-0 w-full">
+        <div
+          className="bg-clip-text bg-gradient-to-b flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[80px] text-right whitespace-nowrap"
+          style={{
+            backgroundImage: 'linear-gradient(to bottom, #ffffff, #40deff)',
+            WebkitTextFillColor: 'transparent'
+          }}
+        >
+          <p className="leading-[50px]">1+1+N</p>
+        </div>
+      </div>
+
+      {/* 合作模式标题 */}
+      <div className="box-border content-stretch flex gap-[10px] items-center justify-end px-0 py-[4px] relative shrink-0">
+        <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[50px] text-[cyan] text-right whitespace-nowrap">
+          <p className="leading-[50px]">供应链合作模式</p>
+        </div>
+      </div>
+
+      {/* 合作模式详情 */}
+      <div className="mt-8 bg-[rgba(255,255,255,0.05)] rounded-lg p-6 border border-[rgba(255,255,255,0.1)]">
+        <div className="grid grid-cols-3 gap-6">
+          {/* 省粮油集团 */}
+          <div className="text-center">
+            <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-3">
+              <span className="text-white text-xl font-bold">1</span>
+            </div>
+            <h4 className="text-white font-bold text-lg mb-2">省粮油集团</h4>
+            <p className="text-[rgba(255,255,255,0.7)] text-sm">
+              核心龙头企业
+              资源整合平台
+              标准制定者
+            </p>
+          </div>
+
+          {/* 区域公司 */}
+          <div className="text-center">
+            <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-3">
+              <span className="text-white text-xl font-bold">1</span>
+            </div>
+            <h4 className="text-white font-bold text-lg mb-2">区域公司</h4>
+            <p className="text-[rgba(255,255,255,0.7)] text-sm">
+              区域运营中心
+              服务支撑平台
+              市场对接桥梁
+            </p>
+          </div>
+
+          {/* 新型农业经营主体 */}
+          <div className="text-center">
+            <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-3">
+              <span className="text-white text-xl font-bold">N</span>
+            </div>
+            <h4 className="text-white font-bold text-lg mb-2">新型农业经营主体</h4>
+            <p className="text-[rgba(255,255,255,0.7)] text-sm">
+              家庭农场
+              合作社
+              农业企业
+            </p>
+          </div>
+        </div>
+
+        {/* 合作流程 */}
+        <div className="mt-6 pt-6 border-t border-[rgba(255,255,255,0.1)]">
+          <h5 className="text-white font-bold text-lg mb-4 text-center">合作流程</h5>
+          <div className="flex justify-between items-center">
+            <div className="text-center">
+              <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2">
+                <span className="text-white text-sm">①</span>
+              </div>
+              <p className="text-[rgba(255,255,255,0.8)] text-xs">资源整合</p>
+            </div>
+            <div className="flex-1 h-0.5 bg-gradient-to-r from-blue-500 to-green-500 mx-2"></div>
+            <div className="text-center">
+              <div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2">
+                <span className="text-white text-sm">②</span>
+              </div>
+              <p className="text-[rgba(255,255,255,0.8)] text-xs">区域运营</p>
+            </div>
+            <div className="flex-1 h-0.5 bg-gradient-to-r from-green-500 to-purple-500 mx-2"></div>
+            <div className="text-center">
+              <div className="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-2">
+                <span className="text-white text-sm">③</span>
+              </div>
+              <p className="text-[rgba(255,255,255,0.8)] text-xs">产业协同</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SupplyChainModel;