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

💄 style(FinancialDashboard): replace image with svg in BarElement component

- 用内嵌SVG替换外部图片资源,优化图表渲染性能
- 移除多个嵌套div结构,简化组件层级
- 调整柱形图视觉样式,统一色彩渐变效果
- 添加适当的SVG滤镜效果,增强视觉层次感
yourname 2 месяцев назад
Родитель
Сommit
4709d57d31
1 измененных файлов с 23 добавлено и 29 удалено
  1. 23 29
      src/client/home/pages/FinancialDashboard/components/BarElement.tsx

+ 23 - 29
src/client/home/pages/FinancialDashboard/components/BarElement.tsx

@@ -8,35 +8,29 @@ export default function BarElement({ className, variant = "profit-total", style
   if (variant === "debt-ratio") {
     return (
       <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=2-4">
-        <div className="flex flex-[1_0_0] items-center justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
-          <div className="flex-none rotate-[180deg] size-full">
-            <div className="box-border content-stretch flex flex-col items-start pb-[3px] pt-0 px-0 relative size-full">
-              <div className="box-border content-stretch flex flex-[1_0_0] items-end justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
-                <div className="flex-[1_0_0] h-full min-h-px min-w-px relative shrink-0" data-name="Vector">
-                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector.svg" />
-                </div>
-                <div className="bg-gradient-to-b from-[#c2e6ff] h-full shrink-0 to-[rgba(0,68,170,0.3)] w-px" />
-                <div className="flex-[1_0_0] h-full min-h-px min-w-px relative shrink-0" data-name="Vector">
-                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector1.svg" />
-                </div>
-              </div>
-              <div className="h-[5px] mb-[-3px] relative shrink-0 w-full">
-                <div className="absolute bottom-0 left-0 right-0 top-[13.33%]" data-name="Vector">
-                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector2.svg" />
-                </div>
-                <div className="absolute h-[5px] left-1/2 top-[calc(50%+-0.5px)] translate-x-[-50%] translate-y-[-50%] w-px">
-                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/rectangle3709.svg" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="flex items-center justify-center mb-[-3px] relative shrink-0 w-full">
-          <div className="flex-none rotate-[180deg] w-full">
-            <div className="h-[6px] relative w-full">
-              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/group1321314607.svg" />
-            </div>
-          </div>
+        <div className="flex-none rotate-[180deg] size-full">
+          <svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="14" height="14" transform="translate(2.09961)" fill="#297AD8"/>
+            <rect width="14" height="7" transform="translate(2.09961 7)" fill="#46BDBD"/>
+            <rect x="2.14961" y="7.05" width="13.9" height="1.9" stroke="white" strokeWidth="0.1"/>
+            <g filter="url(#filter0_d_1977_59002)">
+              <rect x="2.09961" y="7" width="14" height="2" fill="white"/>
+              <rect x="2.04961" y="6.95" width="14.1" height="2.1" stroke="white" strokeWidth="0.1"/>
+            </g>
+            <defs>
+              <filter id="filter0_d_1977_59002" x="0" y="4.90039" width="18.1992" height="6.19922" 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_59002"/>
+                <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_59002"/>
+                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1977_59002" result="shape"/>
+              </filter>
+            </defs>
+          </svg>
         </div>
       </div>
     );