Просмотр исходного кода

✨ feat(financial-dashboard): 优化财务仪表盘视觉效果

- 调整ModalBarSVG组件尺寸,将viewBox从0 0 50 165修改为0 0 26 91,优化空间利用
- 更新SVG路径坐标和渐变参数,适应新的尺寸比例
- 移除图表中的Tooltip组件,简化界面显示

💄 style(chart): 改进图表显示样式

- 调整SVG渐变定义,优化颜色过渡效果
- 修改柱状图宽度和位置参数,提升视觉层次感
- 统一图表配色方案,增强整体视觉一致性
yourname 2 месяцев назад
Родитель
Сommit
1678061b89

+ 15 - 15
src/client/home/pages/FinancialDashboard/components/ModalBarSVG.tsx

@@ -111,40 +111,40 @@ export default function ModalBarSVG({ variant, width = 36, height = 225, classNa
 
   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)"/>
+      <svg width={width} height={height} viewBox="0 0 26 91" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <path d="M12.5 89H0L0 3L12.5 3L12.5 89Z" fill="url(#paint0_linear_profit_total_modal)"/>
+        <rect x="12.5" y="3" width="1" height="86" fill="url(#paint1_linear_profit_total_modal)"/>
+        <path d="M26 89H13.5L13.5 3L26 3L26 89Z" fill="url(#paint2_linear_profit_total_modal)"/>
+        <path d="M0 88.9979L13 91.0003L26 88.9979L13 86.667L0 88.9979Z" fill="url(#paint3_linear_profit_total_modal)" fillOpacity="0.6"/>
+        <path d="M12.5 85.5H13.5V90.5H12.5V85.5Z" fill="url(#paint4_linear_profit_total_modal)"/>
+        <path d="M13 0L0 2.99636L13 6L26 2.99636L13 0Z" fill="url(#paint5_linear_profit_total_modal)"/>
+        <path d="M0 3C2.21964 3.36748 4.40696 3.78174 6.59428 4.20267C7.69333 4.40312 8.77082 4.63697 9.8591 4.85746L13.1239 5.52561H12.8761L16.1409 4.85746C17.2292 4.63697 18.3067 4.40312 19.4057 4.20267C21.593 3.78174 23.7804 3.36748 26 3C23.8881 3.54788 21.7439 4.049 19.5997 4.54343C18.5329 4.79733 17.4447 5.0245 16.3672 5.25835L13.1239 5.96659L12.9946 6L12.8761 5.97327L9.63282 5.26503C8.55532 5.0245 7.46705 4.80401 6.40033 4.54343C4.25611 4.049 2.11189 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">
+          <linearGradient id="paint0_linear_profit_total_modal" x1="6.24719" y1="88.5585" x2="6.24719" y2="3.00228" 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">
+          <linearGradient id="paint1_linear_profit_total_modal" x1="13" y1="3" x2="13" y2="89" 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">
+          <linearGradient id="paint2_linear_profit_total_modal" x1="19.7472" y1="90.076" x2="19.7472" y2="2.26729" 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">
+          <linearGradient id="paint3_linear_profit_total_modal" x1="13" y1="86.667" x2="13" y2="91.0003" 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">
+          <linearGradient id="paint4_linear_profit_total_modal" x1="13.5" y1="85.8846" x2="13.5" y2="90.8846" 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">
+          <linearGradient id="paint5_linear_profit_total_modal" x1="13.002" y1="5.9965" x2="13.002" 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">
+          <linearGradient id="paint6_linear_profit_total_modal" x1="12.9967" y1="5.99719" x2="12.9967" y2="2.5" gradientUnits="userSpaceOnUse">
             <stop stopColor="white"/>
             <stop offset="1" stopColor="white" stopOpacity="0.3"/>
           </linearGradient>

+ 0 - 8
src/client/home/pages/FinancialDashboard/components/VariationModal.tsx

@@ -225,14 +225,6 @@ export default function VariationModal({ isOpen, onClose }: VariationModalProps)
                         domain={[-50, 400]}
                         ticks={[-50, 0, 50, 100, 150, 200, 250, 300, 350, 400]}
                       />
-                      <Tooltip
-                        contentStyle={{
-                          backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                          border: '1px solid rgba(255, 255, 255, 0.2)',
-                          color: 'white'
-                        }}
-                        formatter={(value) => [`${value}%`, '']}
-                      />
                       <Bar dataKey="资产总额" shape={<CustomBar />} barSize={45} />
                       <Bar dataKey="资产净额" shape={<CustomBar />} barSize={45} />
                       <Bar dataKey="资产负债率" shape={<CustomBar />} barSize={45} />