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

✨ feat(financial-dashboard): 优化柱形图展示效果

- 将profit-net和默认变体的柱形图从图片替换为SVG实现
- 添加渐变色效果增强视觉层次感
- 优化柱形图结构,移除冗余的嵌套div
- 调整柱形图尺寸和比例,提升整体美观度
yourname 2 месяцев назад
Родитель
Сommit
69814374a4
1 измененных файлов с 80 добавлено и 30 удалено
  1. 80 30
      src/client/home/pages/FinancialDashboard/components/BarElement.tsx

+ 80 - 30
src/client/home/pages/FinancialDashboard/components/BarElement.tsx

@@ -150,21 +150,46 @@ export default function BarElement({ className, variant = "profit-total", style
   if (variant === "profit-net") {
     return (
       <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=2-3">
-        <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="bg-gradient-to-b box-border content-stretch flex flex-col from-[rgba(255,173,255,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(255,173,255,0)]">
-              <div className="h-[4px] mb-[-3px] relative shrink-0 w-full" data-name="Vector">
-                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector5.svg" />
-              </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/rectangle3710.svg" />
-            </div>
-          </div>
+        <div className="flex-none rotate-[180deg] size-full">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.5 12H0L0 3L6.5 3L6.5 12Z" fill="url(#paint0_linear_1977_58755)"/>
+            <rect x="6.5" y="3" width="1" height="9" fill="url(#paint1_linear_1977_58755)"/>
+            <path d="M14 12H7.5L7.5 3L14 3V12Z" fill="url(#paint2_linear_1977_58755)"/>
+            <path d="M0 11.9979L7 14.0003L14 11.9979L7 9.66699L0 11.9979Z" fill="url(#paint3_linear_1977_58755)" fillOpacity="0.6"/>
+            <path d="M6.5 8.5H7.5V13.5H6.5V8.5Z" fill="url(#paint4_linear_1977_58755)"/>
+            <path d="M7 0L0 2.99636L7 6L14 2.99636L7 0Z" fill="url(#paint5_linear_1977_58755)"/>
+            <path d="M0 3C1.19519 3.36748 2.37298 3.78174 3.55077 4.20267C4.14256 4.40312 4.72275 4.63697 5.30874 4.85746L7.06672 5.52561H6.93328L8.69126 4.85746C9.27725 4.63697 9.85744 4.40312 10.4492 4.20267C11.627 3.78174 12.8048 3.36748 14 3C12.8628 3.54788 11.7082 4.049 10.5537 4.54343C9.97928 4.79733 9.39329 5.0245 8.8131 5.25835L7.06672 5.96659L6.9971 6L6.93328 5.97327L5.1869 5.26503C4.60671 5.0245 4.02072 4.80401 3.44633 4.54343C2.29175 4.049 1.13717 3.54788 0 3Z" fill="url(#paint6_linear_1977_58755)"/>
+            <defs>
+              <linearGradient id="paint0_linear_1977_58755" x1="3.24854" y1="11.9804" x2="3.24854" y2="3.0003" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#907EFF" stopOpacity="0.2"/>
+                <stop offset="1" stopColor="#7B65FF"/>
+              </linearGradient>
+              <linearGradient id="paint1_linear_1977_58755" x1="7" y1="3" x2="7" y2="12" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#DCCFFF"/>
+                <stop offset="1" stopColor="#7E52FA" stopOpacity="0.3"/>
+              </linearGradient>
+              <linearGradient id="paint2_linear_1977_58755" x1="10.7485" y1="11.9804" x2="10.7485" y2="3.0003" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#826DFF" stopOpacity="0.2"/>
+                <stop offset="1" stopColor="#6E3AFF"/>
+              </linearGradient>
+              <linearGradient id="paint3_linear_1977_58755" x1="7" y1="9.66699" x2="7" y2="14.0003" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#493FB5"/>
+                <stop offset="1" stopColor="#7454CF"/>
+              </linearGradient>
+              <linearGradient id="paint4_linear_1977_58755" x1="7.5" y1="8.88462" x2="7.5" y2="13.8846" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#4A3C72"/>
+                <stop offset="1" stopColor="#5351B8"/>
+              </linearGradient>
+              <linearGradient id="paint5_linear_1977_58755" x1="7.0011" y1="5.9965" x2="7.0011" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#CDC7FF"/>
+                <stop offset="1" stopColor="#5A25F0"/>
+              </linearGradient>
+              <linearGradient id="paint6_linear_1977_58755" x1="6.9982" y1="5.99719" x2="6.9982" y2="2.5" gradientUnits="userSpaceOnUse">
+                <stop stopColor="white"/>
+                <stop offset="1" stopColor="white" stopOpacity="0.3"/>
+              </linearGradient>
+            </defs>
+          </svg>
         </div>
       </div>
     );
@@ -196,21 +221,46 @@ export default function BarElement({ className, variant = "profit-total", style
   // 默认变体 (profit-total)
   return (
     <div className={className} data-name="Property 1=柱形元素, Property 2=2-1">
-      <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="bg-gradient-to-b box-border content-stretch flex flex-col from-[rgba(237,206,89,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(237,206,89,0)]">
-            <div className="h-[4px] mb-[-3px] relative shrink-0 w-full" data-name="Vector">
-              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector6.svg" />
-            </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/group1321314608.svg" />
-          </div>
-        </div>
+      <div className="flex-none rotate-[180deg] size-full">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6.5 12H0L0 3H6.5V12Z" fill="url(#paint0_linear_1977_58741)"/>
+          <rect x="6.5" y="3" width="1" height="9" fill="url(#paint1_linear_1977_58741)"/>
+          <path d="M14 12H7.5L7.5 3H14V12Z" fill="url(#paint2_linear_1977_58741)"/>
+          <path d="M0 11.9979L7 14.0003L14 11.9979L7 9.66699L0 11.9979Z" fill="url(#paint3_linear_1977_58741)" fillOpacity="0.6"/>
+          <path d="M6.5 8.5H7.5V13.5H6.5V8.5Z" fill="url(#paint4_linear_1977_58741)"/>
+          <path d="M7 0L0 2.99636L7 6L14 2.99636L7 0Z" fill="url(#paint5_linear_1977_58741)"/>
+          <path d="M0 3C1.19519 3.36748 2.37298 3.78174 3.55077 4.20267C4.14256 4.40312 4.72275 4.63697 5.30874 4.85746L7.06672 5.52561H6.93328L8.69126 4.85746C9.27725 4.63697 9.85744 4.40312 10.4492 4.20267C11.627 3.78174 12.8048 3.36748 14 3C12.8628 3.54788 11.7082 4.049 10.5537 4.54343C9.97928 4.79733 9.39329 5.0245 8.8131 5.25835L7.06672 5.96659L6.9971 6L6.93328 5.97327L5.1869 5.26503C4.60671 5.0245 4.02072 4.80401 3.44633 4.54343C2.29175 4.049 1.13717 3.54788 0 3Z" fill="url(#paint6_linear_1977_58741)"/>
+          <defs>
+            <linearGradient id="paint0_linear_1977_58741" x1="3.24854" y1="11.9538" x2="3.24854" y2="3.00024" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#0058FF" stopOpacity="0.2"/>
+              <stop offset="1" stopColor="#0093DD"/>
+            </linearGradient>
+            <linearGradient id="paint1_linear_1977_58741" x1="7" y1="3" x2="7" y2="12" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#C2E6FF"/>
+              <stop offset="1" stopColor="#0044AA" stopOpacity="0.3"/>
+            </linearGradient>
+            <linearGradient id="paint2_linear_1977_58741" x1="10.7485" y1="12.1126" x2="10.7485" y2="2.92332" gradientUnits="userSpaceOnUse">
+              <stop offset="0.00462963" stopColor="#0138DE" stopOpacity="0.2"/>
+              <stop offset="1" stopColor="#006BBC"/>
+            </linearGradient>
+            <linearGradient id="paint3_linear_1977_58741" x1="7" y1="9.66699" x2="7" y2="14.0003" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#0A316C"/>
+              <stop offset="1" stopColor="#1B659B"/>
+            </linearGradient>
+            <linearGradient id="paint4_linear_1977_58741" x1="7.5" y1="8.88462" x2="7.5" y2="13.8846" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#1F3453"/>
+              <stop offset="1" stopColor="#40558D" stopOpacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint5_linear_1977_58741" x1="7.0011" y1="5.9965" x2="7.0011" y2="0" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#81E4FF"/>
+              <stop offset="1" stopColor="#0072DD"/>
+            </linearGradient>
+            <linearGradient id="paint6_linear_1977_58741" x1="6.9982" y1="5.99719" x2="6.9982" y2="2.5" gradientUnits="userSpaceOnUse">
+              <stop stopColor="white"/>
+              <stop offset="1" stopColor="white" stopOpacity="0.3"/>
+            </linearGradient>
+          </defs>
+        </svg>
       </div>
     </div>
   );