✨ feat(FinancialDashboard): replace image assets with svg for BarElement components

- replace external image references with inline SVG for asset-net variant
- replace external image references with inline SVG for asset-total variant
- implement gradient fills and strokes directly in SVG for better rendering control
- remove dependency on external image files (/financial-dashboard/vector3.svg, etc.)
- maintain original visual design while improving scalability and loading performance

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

@@ -45,21 +45,53 @@ export default function BarElement({ className, variant = "profit-total", style
   if (variant === "asset-net") {
     return (
       <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-2">
-        <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/vector3.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/frame10907.svg" />
-            </div>
-          </div>
+        <div className="flex-none rotate-[180deg] size-full">
+          <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="14" height="7.76923" transform="translate(0.25 3)" fill="url(#paint0_linear_1977_58357)"/>
+            <path d="M14.25 7L0.25 7L0.25 3L14.25 3V7Z" fill="url(#paint1_linear_1977_58357)"/>
+            <path d="M14.25 7L0.25 7L0.25 3L14.25 3V7Z" fill="url(#paint2_linear_1977_58357)" fillOpacity="0.8"/>
+            <ellipse cx="7.25" cy="6.5" rx="7" ry="2.5" fill="url(#paint3_linear_1977_58357)"/>
+            <ellipse cx="7.25" cy="6.5" rx="7" ry="2.5" fill="url(#paint4_linear_1977_58357)" fillOpacity="0.6"/>
+            <path d="M14.25 6.5C14.25 7.88071 11.116 9 7.25 9C3.38401 9 0.25 7.88071 0.25 6.5" stroke="url(#paint5_linear_1977_58357)" strokeWidth="0.5"/>
+            <ellipse cx="7.25" cy="2.5" rx="7" ry="2.5" fill="url(#paint6_linear_1977_58357)"/>
+            <path d="M14.25 2.5C14.25 3.88071 11.116 5 7.25 5C3.38401 5 0.25 3.88071 0.25 2.5" stroke="url(#paint7_linear_1977_58357)" strokeWidth="0.5"/>
+            <defs>
+              <linearGradient id="paint0_linear_1977_58357" x1="7" y1="0" x2="7" y2="7.76923" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#EDCE59" stopOpacity="0.807843"/>
+                <stop offset="1" stopColor="#EDCE59" stopOpacity="0"/>
+              </linearGradient>
+              <linearGradient id="paint1_linear_1977_58357" x1="7.24685" y1="6.97946" x2="7.24685" 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_1977_58357" x1="0.25" y1="5" x2="14.25" y2="5" 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_1977_58357" x1="7.2511" y1="8.99708" x2="7.2511" y2="4" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#EDCE59"/>
+                <stop offset="1" stopColor="#B4910E"/>
+              </linearGradient>
+              <linearGradient id="paint4_linear_1977_58357" x1="0.25" y1="6.5" x2="14.25" y2="6.5" 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_1977_58357" x1="7.25" y1="6.5" x2="7.25" y2="9" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#EDCE59" stopOpacity="0"/>
+                <stop offset="1" stopColor="white"/>
+              </linearGradient>
+              <linearGradient id="paint6_linear_1977_58357" x1="7.2511" y1="4.99708" x2="7.2511" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#EDCE59"/>
+                <stop offset="1" stopColor="#B4910E" stopOpacity="0.807843"/>
+              </linearGradient>
+              <linearGradient id="paint7_linear_1977_58357" x1="7.25" y1="2.5" x2="7.25" y2="5" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#EDCE59" stopOpacity="0"/>
+                <stop offset="1" stopColor="white"/>
+              </linearGradient>
+            </defs>
+          </svg>
         </div>
       </div>
     );
@@ -68,21 +100,48 @@ export default function BarElement({ className, variant = "profit-total", style
   if (variant === "asset-total") {
     return (
       <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-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(162,190,255,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(162,190,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/vector4.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/frame10908.svg" />
-            </div>
-          </div>
+        <div className="flex-none rotate-[180deg] size-full">
+          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14.25 12H0.25L0.25 3L14.25 3V12Z" fill="url(#paint0_linear_1977_58346)"/>
+            <path d="M14.25 12H0.25L0.25 3L14.25 3V12Z" fill="url(#paint1_linear_1977_58346)" fillOpacity="0.6"/>
+            <ellipse cx="7.25" cy="11.5" rx="7" ry="2.5" fill="url(#paint2_linear_1977_58346)"/>
+            <ellipse cx="7.25" cy="11.5" rx="7" ry="2.5" fill="url(#paint3_linear_1977_58346)" fillOpacity="0.6"/>
+            <path d="M14.25 11.5C14.25 12.8807 11.116 14 7.25 14C3.38401 14 0.25 12.8807 0.25 11.5" stroke="url(#paint4_linear_1977_58346)" strokeWidth="0.5"/>
+            <ellipse cx="7.25" cy="2.5" rx="7" ry="2.5" fill="url(#paint5_linear_1977_58346)"/>
+            <path d="M14.25 2.5C14.25 3.88071 11.116 5 7.25 5C3.38401 5 0.25 3.88071 0.25 2.5" stroke="url(#paint6_linear_1977_58346)" strokeWidth="0.5"/>
+            <defs>
+              <linearGradient id="paint0_linear_1977_58346" x1="7.24685" y1="11.9538" x2="7.24685" y2="3.00024" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#4DBBBA" stopOpacity="0"/>
+                <stop offset="1" stopColor="#4DBBBA" stopOpacity="0.5"/>
+              </linearGradient>
+              <linearGradient id="paint1_linear_1977_58346" x1="0.25" y1="7.5" x2="14.25" y2="7.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_1977_58346" x1="7.2511" y1="13.9971" x2="7.2511" y2="9" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#4DBBBA"/>
+                <stop offset="1" stopColor="#0F918F"/>
+              </linearGradient>
+              <linearGradient id="paint3_linear_1977_58346" x1="0.25" y1="11.5" x2="14.25" y2="11.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_1977_58346" x1="7.25" y1="11.5" x2="7.25" y2="14" gradientUnits="userSpaceOnUse">
+                <stop stopColor="white" stopOpacity="0"/>
+                <stop offset="1" stopColor="white"/>
+              </linearGradient>
+              <linearGradient id="paint5_linear_1977_58346" x1="7.2511" y1="4.99708" x2="7.2511" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#4DBBBA"/>
+                <stop offset="1" stopColor="#0F918F"/>
+              </linearGradient>
+              <linearGradient id="paint6_linear_1977_58346" x1="7.25" y1="2.5" x2="7.25" y2="5" gradientUnits="userSpaceOnUse">
+                <stop stopColor="white" stopOpacity="0"/>
+                <stop offset="1" stopColor="white"/>
+              </linearGradient>
+            </defs>
+          </svg>
         </div>
       </div>
     );