✨ feat(financial-dashboard): 添加弹窗专用SVG柱子组件

- 创建ModalBarSVG组件，支持六种财务指标变体展示
- 实现不同财务类型的SVG渐变和样式设计，包括总资产、净资产、总利润、净利润、收入和负债率
- 支持自定义宽度、高度和类名，提高组件灵活性和复用性
- 添加组件文档注释，说明其基于BarSVG组件为弹窗场景优化的特性

src/client/home/pages/FinancialDashboard/components/ModalBarSVG.tsx

@@ -0,0 +1,272 @@
+import React from 'react';
+
+interface ModalBarSVGProps {
+  variant: "asset-total" | "asset-net" | "profit-total" | "profit-net" | "income" | "debt-ratio";
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+/**
+ * 弹窗专用的SVG柱子组件
+ * 基于BarSVG组件，专门为弹窗场景优化
+ */
+export default function ModalBarSVG({ variant, width = 36, height = 225, className }: ModalBarSVGProps) {
+  if (variant === "asset-total") {
+    return (
+      <svg width={width} height={height} viewBox="0 0 36 225" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <path d="M35.25 222H0.25L0.25 3L35.25 3L35.25 222Z" fill="url(#paint0_linear_asset_total_modal)"/>
+        <path d="M35.25 222H0.25L0.25 3L35.25 3L35.25 222Z" fill="url(#paint1_linear_asset_total_modal)" fillOpacity="0.6"/>
+        <ellipse cx="17.75" cy="221.5" rx="17.5" ry="2.5" fill="url(#paint2_linear_asset_total_modal)"/>
+        <ellipse cx="17.75" cy="221.5" rx="17.5" ry="2.5" fill="url(#paint3_linear_asset_total_modal)" fillOpacity="0.6"/>
+        <path d="M35.25 221.5C35.25 222.881 27.415 224 17.75 224C8.08502 224 0.25 222.881 0.25 221.5" stroke="url(#paint4_linear_asset_total_modal)" strokeWidth="0.5"/>
+        <ellipse cx="17.75" cy="2.5" rx="17.5" ry="2.5" fill="url(#paint5_linear_asset_total_modal)"/>
+        <path d="M35.25 2.5C35.25 3.88071 27.415 5 17.75 5C8.08502 5 0.25 3.88071 0.25 2.5" stroke="url(#paint6_linear_asset_total_modal)" strokeWidth="0.5"/>
+        <defs>
+          <linearGradient id="paint0_linear_asset_total_modal" x1="17.7421" y1="220.876" x2="17.7421" y2="3.00582" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#4DBBBA" stopOpacity="0"/>
+            <stop offset="1" stopColor="#4DBBBA" stopOpacity="0.5"/>
+          </linearGradient>
+          <linearGradient id="paint1_linear_asset_total_modal" x1="0.25" y1="112.5" x2="35.25" y2="112.5" gradientUnits="userSpaceOnUse">
+            <stop offset="0.125" stopColor="#4DBBBA"/>
+            <stop offset="0.497375" stopColor="#9FFFFE"/>
+            <stop offset="0.911458" stopColor="#4DBBBA"/>
+          </linearGradient>
+          <linearGradient id="paint2_linear_asset_total_modal" x1="17.7528" y1="223.997" x2="17.7528" y2="219" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#4DBBBA"/>
+            <stop offset="1" stopColor="#0F918F"/>
+          </linearGradient>
+          <linearGradient id="paint3_linear_asset_total_modal" x1="0.25" y1="221.5" x2="35.25" y2="221.5" gradientUnits="userSpaceOnUse">
+            <stop offset="0.125" stopColor="#4DBBBA"/>
+            <stop offset="0.497375" stopColor="#9FFFFE"/>
+            <stop offset="0.911458" stopColor="#4DBBBA"/>
+          </linearGradient>
+          <linearGradient id="paint4_linear_asset_total_modal" x1="17.75" y1="221.5" x2="17.75" y2="224" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white" stopOpacity="0"/>
+            <stop offset="1" stopColor="white"/>
+          </linearGradient>
+          <linearGradient id="paint5_linear_asset_total_modal" x1="17.7528" y1="4.99708" x2="17.7528" y2="0" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#4DBBBA"/>
+            <stop offset="1" stopColor="#0F918F"/>
+          </linearGradient>
+          <linearGradient id="paint6_linear_asset_total_modal" x1="17.75" y1="2.5" x2="17.75" y2="5" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white" stopOpacity="0"/>
+            <stop offset="1" stopColor="white"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+
+  if (variant === "asset-net") {
+    return (
+      <svg width={width} height={height} viewBox="0 0 36 135" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <rect width="35" height="132" transform="translate(0.25 3)" fill="url(#paint0_linear_asset_net_modal)"/>
+        <path d="M35.25 7L0.25 7L0.25 3L35.25 3V7Z" fill="url(#paint1_linear_asset_net_modal)"/>
+        <path d="M35.25 7L0.25 7L0.25 3L35.25 3V7Z" fill="url(#paint2_linear_asset_net_modal)" fillOpacity="0.8"/>
+        <ellipse cx="17.75" cy="6.5" rx="17.5" ry="2.5" fill="url(#paint3_linear_asset_net_modal)"/>
+        <ellipse cx="17.75" cy="6.5" rx="17.5" ry="2.5" fill="url(#paint4_linear_asset_net_modal)" fillOpacity="0.6"/>
+        <path d="M35.25 6.5C35.25 7.88071 27.415 9 17.75 9C8.08502 9 0.25 7.88071 0.25 6.5" stroke="url(#paint5_linear_asset_net_modal)" strokeWidth="0.5"/>
+        <ellipse cx="17.75" cy="2.5" rx="17.5" ry="2.5" fill="url(#paint6_linear_asset_net_modal)"/>
+        <path d="M35.25 2.5C35.25 3.88071 27.415 5 17.75 5C8.08502 5 0.25 3.88071 0.25 2.5" stroke="url(#paint7_linear_asset_net_modal)" strokeWidth="0.5"/>
+        <defs>
+          <linearGradient id="paint0_linear_asset_net_modal" x1="17.5" y1="0" x2="17.5" y2="132" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#EDCE59" stopOpacity="0.807843"/>
+            <stop offset="1" stopColor="#EDCE59" stopOpacity="0"/>
+          </linearGradient>
+          <linearGradient id="paint1_linear_asset_net_modal" x1="17.7421" y1="6.97946" x2="17.7421" y2="3.00011" gradientUnits="userSpaceOnUse">
+            <stop offset="0.177083" stopColor="#EDCE59" stopOpacity="0"/>
+            <stop offset="1" stopColor="#EDCE59" stopOpacity="0.6"/>
+          </linearGradient>
+          <linearGradient id="paint2_linear_asset_net_modal" x1="0.25" y1="5" x2="35.25" y2="5.00003" gradientUnits="userSpaceOnUse">
+            <stop offset="0.1875" stopColor="#EDCE59"/>
+            <stop offset="0.497375" stopColor="white"/>
+            <stop offset="0.875" stopColor="#EDCE59"/>
+          </linearGradient>
+          <linearGradient id="paint3_linear_asset_net_modal" x1="17.7528" y1="8.99708" x2="17.7528" y2="4" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#EDCE59"/>
+            <stop offset="1" stopColor="#B4910E"/>
+          </linearGradient>
+          <linearGradient id="paint4_linear_asset_net_modal" x1="0.25" y1="6.5" x2="35.25" y2="6.50002" gradientUnits="userSpaceOnUse">
+            <stop offset="0.1875" stopColor="#EDCE59"/>
+            <stop offset="0.497375" stopColor="#FFF3C5"/>
+            <stop offset="0.875" stopColor="#EDCE59"/>
+          </linearGradient>
+          <linearGradient id="paint5_linear_asset_net_modal" x1="17.75" y1="6.5" x2="17.75" y2="9" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#EDCE59" stopOpacity="0"/>
+            <stop offset="1" stopColor="white"/>
+          </linearGradient>
+          <linearGradient id="paint6_linear_asset_net_modal" x1="17.7528" y1="4.99708" x2="17.7528" y2="0" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#EDCE59"/>
+            <stop offset="1" stopColor="#B4910E" stopOpacity="0.807843"/>
+          </linearGradient>
+          <linearGradient id="paint7_linear_asset_net_modal" x1="17.75" y1="2.5" x2="17.75" y2="5" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#EDCE59" stopOpacity="0"/>
+            <stop offset="1" stopColor="white"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+
+  if (variant === "profit-total") {
+    return (
+      <svg width={width} height={height} viewBox="0 0 50 165" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <path d="M24.5 163H0L0 3L24.5 3L24.5 163Z" fill="url(#paint0_linear_profit_total_modal)"/>
+        <rect x="24.5" y="3" width="1" height="160" fill="url(#paint1_linear_profit_total_modal)"/>
+        <path d="M50 163H25.5L25.5 3L50 3L50 163Z" fill="url(#paint2_linear_profit_total_modal)"/>
+        <path d="M0 162.998L25 165L50 162.998L25 160.667L0 162.998Z" fill="url(#paint3_linear_profit_total_modal)" fillOpacity="0.6"/>
+        <path d="M24.5 159.5H25.5V164.5H24.5V159.5Z" fill="url(#paint4_linear_profit_total_modal)"/>
+        <path d="M25 0L0 2.99636L25 6L50 2.99636L25 0Z" fill="url(#paint5_linear_profit_total_modal)"/>
+        <path d="M0 3C4.26855 3.36748 8.47493 3.78174 12.6813 4.20267C14.7949 4.40312 16.867 4.63697 18.9598 4.85746L25.2383 5.52561H24.7617L31.0402 4.85746C33.133 4.63697 35.2051 4.40312 37.3187 4.20267C41.5251 3.78174 45.7315 3.36748 50 3C45.9387 3.54788 41.8152 4.049 37.6917 4.54343C35.6403 4.79733 33.5475 5.0245 31.4753 5.25835L25.2383 5.96659L24.9896 6L24.7617 5.97327L18.5247 5.26503C16.4525 5.0245 14.3597 4.80401 12.3083 4.54343C8.18483 4.049 4.06133 3.54788 0 3Z" fill="url(#paint6_linear_profit_total_modal)"/>
+        <defs>
+          <linearGradient id="paint0_linear_profit_total_modal" x1="12.2445" y1="162.179" x2="12.2445" y2="3.00425" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#0058FF" stopOpacity="0.2"/>
+            <stop offset="1" stopColor="#0093DD"/>
+          </linearGradient>
+          <linearGradient id="paint1_linear_profit_total_modal" x1="25" y1="3" x2="25" y2="163" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#C2E6FF"/>
+            <stop offset="1" stopColor="#0044AA" stopOpacity="0.3"/>
+          </linearGradient>
+          <linearGradient id="paint2_linear_profit_total_modal" x1="37.7445" y1="165.002" x2="37.7445" y2="1.63682" gradientUnits="userSpaceOnUse">
+            <stop offset="0.00462963" stopColor="#0138DE" stopOpacity="0.2"/>
+            <stop offset="1" stopColor="#006BBC"/>
+          </linearGradient>
+          <linearGradient id="paint3_linear_profit_total_modal" x1="25" y1="160.667" x2="25" y2="165" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#0A316C"/>
+            <stop offset="1" stopColor="#1B659B"/>
+          </linearGradient>
+          <linearGradient id="paint4_linear_profit_total_modal" x1="25.5" y1="159.885" x2="25.5" y2="164.885" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#1F3453"/>
+            <stop offset="1" stopColor="#40558D" stopOpacity="0"/>
+          </linearGradient>
+          <linearGradient id="paint5_linear_profit_total_modal" x1="25.0039" y1="5.9965" x2="25.0039" y2="0" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#81E4FF"/>
+            <stop offset="1" stopColor="#0072DD"/>
+          </linearGradient>
+          <linearGradient id="paint6_linear_profit_total_modal" x1="24.9936" y1="5.99719" x2="24.9936" y2="2.5" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white"/>
+            <stop offset="1" stopColor="white" stopOpacity="0.3"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+
+  if (variant === "profit-net") {
+    return (
+      <svg width={width} height={height} viewBox="0 0 50 134" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <path d="M24.5 132H0L0 3L24.5 3L24.5 132Z" fill="url(#paint0_linear_profit_net_modal)"/>
+        <rect x="24.5" y="3" width="1" height="129" fill="url(#paint1_linear_profit_net_modal)"/>
+        <path d="M50 132H25.5L25.5 3L50 3V132Z" fill="url(#paint2_linear_profit_net_modal)"/>
+        <path d="M0 131.998L25 134L50 131.998L25 129.667L0 131.998Z" fill="url(#paint3_linear_profit_net_modal)" fillOpacity="0.6"/>
+        <path d="M24.5 128.5H25.5V133.5H24.5V128.5Z" fill="url(#paint4_linear_profit_net_modal)"/>
+        <path d="M25 0L0 2.99636L25 6L50 2.99636L25 0Z" fill="url(#paint5_linear_profit_net_modal)"/>
+        <path d="M0 3C4.26855 3.36748 8.47493 3.78174 12.6813 4.20267C14.7949 4.40312 16.867 4.63697 18.9598 4.85746L25.2383 5.52561H24.7617L31.0402 4.85746C33.133 4.63697 35.2051 4.40312 37.3187 4.20267C41.5251 3.78174 45.7315 3.36748 50 3C45.9387 3.54788 41.8152 4.049 37.6917 4.54343C35.6403 4.79733 33.5475 5.0245 31.4753 5.25835L25.2383 5.96659L24.9896 6L24.7617 5.97327L18.5247 5.26503C16.4525 5.0245 14.3597 4.80401 12.3083 4.54343C8.18483 4.049 4.06133 3.54788 0 3Z" fill="url(#paint6_linear_profit_net_modal)"/>
+        <defs>
+          <linearGradient id="paint0_linear_profit_net_modal" x1="12.2445" y1="131.719" x2="12.2445" y2="3.00436" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#907EFF" stopOpacity="0.2"/>
+            <stop offset="1" stopColor="#7B65FF"/>
+          </linearGradient>
+          <linearGradient id="paint1_linear_profit_net_modal" x1="25" y1="3" x2="25" y2="132" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#DCCFFF"/>
+            <stop offset="1" stopColor="#7E52FA" stopOpacity="0.3"/>
+          </linearGradient>
+          <linearGradient id="paint2_linear_profit_net_modal" x1="37.7445" y1="131.719" x2="37.7445" y2="3.00436" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#826DFF" stopOpacity="0.2"/>
+            <stop offset="1" stopColor="#6E3AFF"/>
+          </linearGradient>
+          <linearGradient id="paint3_linear_profit_net_modal" x1="25" y1="129.667" x2="25" y2="134" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#493FB5"/>
+            <stop offset="1" stopColor="#7454CF"/>
+          </linearGradient>
+          <linearGradient id="paint4_linear_profit_net_modal" x1="25.5" y1="128.885" x2="25.5" y2="133.885" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#4A3C72"/>
+            <stop offset="1" stopColor="#5351B8"/>
+          </linearGradient>
+          <linearGradient id="paint5_linear_profit_net_modal" x1="25.0039" y1="5.9965" x2="25.0039" y2="0" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#CDC7FF"/>
+            <stop offset="1" stopColor="#5A25F0"/>
+          </linearGradient>
+          <linearGradient id="paint6_linear_profit_net_modal" x1="24.9936" y1="5.99719" x2="24.9936" y2="2.5" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white"/>
+            <stop offset="1" stopColor="white" stopOpacity="0.3"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+
+  if (variant === "income") {
+    return (
+      <svg width={width} height={height} viewBox="0 0 80 254" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <path d="M40.5 252H80L80 3L40.5 3L40.5 252Z" fill="url(#paint0_linear_income_modal)"/>
+        <rect width="1" height="249" transform="matrix(-1 0 0 1 40.5 3)" fill="url(#paint1_linear_income_modal)"/>
+        <path d="M0 252H39.5L39.5 3L0 3L0 252Z" fill="url(#paint2_linear_income_modal)"/>
+        <path d="M80 251.998L40 254L0 251.998L40 249.667L80 251.998Z" fill="url(#paint3_linear_income_modal)" fillOpacity="0.6"/>
+        <path d="M40.5 248.5H39.5V253.5H40.5V248.5Z" fill="url(#paint4_linear_income_modal)"/>
+        <path d="M40 0L80 2.99636L40 6L0 2.99636L40 0Z" fill="url(#paint5_linear_income_modal)"/>
+        <path d="M80 3C73.1703 3.36748 66.4401 3.78174 59.7099 4.20267C56.3282 4.40312 53.0128 4.63697 49.6643 4.85746L39.6187 5.52561H40.3813L30.3357 4.85746C26.9872 4.63697 23.6718 4.40312 20.2901 4.20267C13.5599 3.78174 6.82967 3.36748 0 3C6.49814 3.54788 13.0957 4.049 19.6933 4.54343C22.9755 4.79733 26.3241 5.0245 29.6395 5.25835L39.6187 5.96659L40.0166 6L40.3813 5.97327L50.3605 5.26503C53.6759 5.0245 57.0245 4.80401 60.3067 4.54343C66.9043 4.049 73.5019 3.54788 80 3Z" fill="url(#paint6_linear_income_modal)"/>
+        <defs>
+          <linearGradient id="paint0_linear_income_modal" x1="60.2589" y1="251.458" x2="60.2589" y2="3.00841" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#FF8A00" stopOpacity="0.2"/>
+            <stop offset="1" stopColor="#FFD600"/>
+          </linearGradient>
+          <linearGradient id="paint1_linear_income_modal" x1="0.5" y1="0" x2="0.5" y2="249" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#FEFFC2"/>
+            <stop offset="1" stopColor="#FF9900" stopOpacity="0.3"/>
+          </linearGradient>
+          <linearGradient id="paint2_linear_income_modal" x1="19.7589" y1="251.069" x2="19.7589" y2="3.00843" gradientUnits="userSpaceOnUse">
+            <stop offset="0.00462963" stopColor="#FF8A00" stopOpacity="0.2"/>
+            <stop offset="1" stopColor="#FFB800"/>
+          </linearGradient>
+          <linearGradient id="paint3_linear_income_modal" x1="40" y1="249.667" x2="40" y2="254" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#58370F"/>
+            <stop offset="1" stopColor="#A9600F"/>
+          </linearGradient>
+          <linearGradient id="paint4_linear_income_modal" x1="39.5" y1="248.885" x2="39.5" y2="253.885" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#715120"/>
+            <stop offset="1" stopColor="#8D7340" stopOpacity="0"/>
+          </linearGradient>
+          <linearGradient id="paint5_linear_income_modal" x1="39.9937" y1="5.9965" x2="39.9937" y2="0" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#FCFF6C"/>
+            <stop offset="1" stopColor="#FF8A00"/>
+          </linearGradient>
+          <linearGradient id="paint6_linear_income_modal" x1="40.0103" y1="5.99719" x2="40.0103" y2="2.5" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white"/>
+            <stop offset="1" stopColor="white" stopOpacity="0.3"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+
+  if (variant === "debt-ratio") {
+    return (
+      <svg width={width} height={height} viewBox="0 0 96 240" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <rect width="90" height="240" transform="translate(3)" fill="#297AD8"/>
+        <rect width="90" height="175" transform="translate(3 65)" fill="#46BDBD"/>
+        <rect x="3.25" y="65.25" width="89.5" height="1.5" stroke="white" strokeWidth="0.5"/>
+        <g filter="url(#filter0_d_debt_ratio_modal)">
+          <rect x="3" y="65" width="90" height="2" fill="white"/>
+          <rect x="2.5" y="64.5" width="91" height="3" stroke="white"/>
+        </g>
+        <defs>
+          <filter id="filter0_d_debt_ratio_modal" x="0" y="62" width="96" height="8" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+            <feFlood floodOpacity="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"/>
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_debt_ratio_modal"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="0.5"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.116736 0 0 0 0 0.144867 0 0 0 0 0.170833 0 0 0 0.2 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_debt_ratio_modal"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_debt_ratio_modal" result="shape"/>
+          </filter>
+        </defs>
+      </svg>
+    );
+  }
+
+  return null;
+}