✨ feat(dashboard): 优化资产负债率图表展示效果

- 添加自定义3D柱状图组件DebtRatioBar
- 使用双层矩形和阴影效果实现立体视觉效果
- 移除原有的渐变填充，采用固定颜色方案增强视觉层次感
- 优化图表坐标系转换逻辑，确保组件自适应展示

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

@@ -21,6 +21,42 @@ const chartData = debtRatioData.map(item => ({
   '资产负债率': item.ratio
 }));
 
+// 自定义 3D 柱状图组件 - 资产负债率
+const DebtRatioBar = (props: any) => {
+  const { x, y, width, height } = props;
+
+  // 将Recharts的坐标系转换为SVG的坐标系
+  const svgWidth = 96;
+  const svgHeight = 240;
+  const scaleX = width / svgWidth;
+  const scaleY = height / svgHeight;
+
+  return (
+    <g transform={`translate(${x},${y}) scale(${scaleX},${scaleY})`}>
+      <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_1977_59052)">
+        <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_1977_59052" 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_1977_59052"/>
+          <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_1977_59052"/>
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1977_59052" result="shape"/>
+        </filter>
+      </defs>
+    </g>
+  );
+};
+
 export function DebtRatioMetrics({ className }: DebtRatioMetricsProps) {
   return (
     <div className={`h-[480px] overflow-clip relative shrink-0 w-full ${className || ''}`}>
@@ -85,17 +121,9 @@ export function DebtRatioMetrics({ className }: DebtRatioMetricsProps) {
                 />
                 <Bar
                   dataKey="资产负债率"
-                  fill="url(#debtRatioGradient)"
-                  radius={[2, 2, 0, 0]}
+                  shape={<DebtRatioBar />}
                   barSize={35}
                 />
-                <defs>
-                  {/* 资产负债率渐变 - 匹配BarElement的蓝色渐变 */}
-                  <linearGradient id="debtRatioGradient" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stopColor="#a2beff" stopOpacity={0.8}/>
-                    <stop offset="100%" stopColor="#a2beff" stopOpacity={0}/>
-                  </linearGradient>
-                </defs>
               </BarChart>
             </ResponsiveContainer>
           </div>