💄 style(financial-dashboard): convert header decorations to SVG and optimize layout

- Convert header decoration images from PNG to SVG format for better scalability
- Reorganize dashboard layout structure with proper data-node-id annotations
- Add decorative header elements with proper positioning and styling
- Update component positioning to match design specifications

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

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

@@ -84,57 +84,105 @@ const FinancialDashboard: React.FC = () => {
   }
 
   return (
-    <div className="relative w-[1920px] h-[1080px] overflow-hidden bg-gray-900">
+    <div className="relative size-full" data-name="战略部署-首页-优化" data-node-id="1715:121572">
       {/* 背景层 */}
       <BackgroundOverlay />
-      {/* 这个没用的，是设计用来参考的 */}
-      {/* <GridBackground /> */}
+      <GridBackground />
 
-      {/* 主内容区域 */}
-      <div className="relative z-10 w-full h-full p-8">
-        {/* 报表头部 */}
-        <ReportHeader title="财务数据可视化大屏" />
+      {/* 底部装饰层 */}
+      <div className="absolute contents left-0 top-0" data-name="我是底部" data-node-id="I1715:121572;1703:114628">
+        {/* Component5和Component4已通过BackgroundOverlay和GridBackground实现 */}
+      </div>
+
+      {/* 头部装饰层 */}
+      <div className="absolute contents left-0 top-px" data-name="头部" data-node-id="I1715:121572;1703:114631">
+        <div className="absolute h-[74px] left-0 top-px w-[1920px]" data-name="头部" data-node-id="I1715:121572;1703:114632">
+          <div className="absolute contents left-[1269px] top-[-3.98px]" data-node-id="I1715:121572;1703:114633">
+            <div className="absolute flex h-[65px] items-center justify-center left-[calc(50%+638px)] top-[calc(50%+-5.48px)] translate-x-[-50%] translate-y-[-50%] w-[658px]">
+              <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+                <div className="h-[65px] relative w-[658px]" data-name="装饰_左" data-node-id="I1715:121572;1703:114634">
+                  <div className="absolute h-[64.5px] left-0 top-0 w-[663px]" data-node-id="I1715:121572;1703:114635">
+                    <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-6.svg" />
+                  </div>
+                  <div className="absolute h-[8px] left-[124.5px] top-[27px] w-[301px]" data-node-id="I1715:121572;1703:114637">
+                    <div className="absolute bottom-[-12.5%] left-0 right-0 top-[-12.5%]">
+                      <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-7.svg" />
+                    </div>
+                  </div>
+                  <div className="absolute h-0 left-0 top-[22px] w-[162px]" data-node-id="I1715:121572;1703:114639">
+                    <div className="absolute bottom-[-1px] left-0 right-0 top-[-1px]">
+                      <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-8.svg" />
+                    </div>
+                  </div>
+                  <div className="absolute content-stretch flex gap-[4px] items-start left-[438px] top-[27px]" data-node-id="I1715:121572;1703:114646">
+                    <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] shrink-0 w-[10px]" data-node-id="I1715:121572;1703:114647" />
+                    <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-80 shrink-0 w-[6px]" data-node-id="I1715:121572;1703:114648" />
+                    <div className="bg-[#a2beff] blur-[0.25px] filter opacity-60 shrink-0 size-[5px]" data-node-id="I1715:121572;1703:114649" />
+                    <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-40 shrink-0 w-[4px]" data-node-id="I1715:121572;1703:114650" />
+                    <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-20 shrink-0 w-[3px]" data-node-id="I1715:121572;1703:114651" />
+                  </div>
+                  <div className="absolute h-[22.5px] left-0 top-[42px] w-[661px]" data-node-id="I1715:121572;1703:114652">
+                    <div className="absolute bottom-[-2.22%] left-0 right-0 top-[-2.22%]">
+                      <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-9.svg" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="absolute flex inset-[-5.37%_30.52%_22.94%_66.51%] items-center justify-center">
+              <div className="flex-none h-[61px] rotate-[180deg] scale-y-[-100%] w-[57px]">
+                <div className="relative size-full" data-name="Union" data-node-id="I1715:121572;1703:114654">
+                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-10.svg" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-        {/* 数据模块网格布局 */}
-        <div className="grid grid-cols-2 grid-rows-2 gap-6 mt-8 h-[calc(100%-120px)]">
+      {/* 中间报表数据区域 */}
+      <div className="absolute content-stretch flex gap-[20px] items-center left-1/2 top-[79.5px] translate-x-[-50%]" data-name="中间报表数据" data-node-id="I1715:121572;1709:120424">
+        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[934.496px]" data-node-id="I1715:121572;1705:119731">
           {/* 左上：资产负债率模块 */}
-          <div className="relative">
+          <div className="h-[480px] overflow-clip relative shrink-0 w-full" data-name="左侧-资产负债率" data-node-id="I1715:121572;1705:119144">
             <BaseContainer>
               <AssetMetrics data={financialData?.rows[0]?.assetTotalNet} />
             </BaseContainer>
           </div>
 
-          {/* 右上：收入模块 */}
-          <div className="relative">
+          {/* 左下：利润总额与净利润模块 */}
+          <div className="h-[480px] overflow-clip relative shrink-0 w-full" data-name="左侧-资产负债率" data-node-id="I1715:121572;1709:120059">
             <BaseContainer>
-              <IncomeMetrics data={financialData?.rows[0]?.incomeStatement} />
+              <ProfitMetrics data={financialData?.rows[0]?.profitTotalNet} />
             </BaseContainer>
           </div>
+        </div>
 
-          {/* 左下：利润总额与净利润模块 */}
-          <div className="relative">
+        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[934.496px]" data-node-id="I1715:121572;1705:119731">
+          {/* 右上：收入模块 */}
+          <div className="h-[480px] overflow-clip relative shrink-0 w-full" data-name="左侧-收入" data-node-id="I1715:121572;1705:119355">
             <BaseContainer>
-              <ProfitMetrics data={financialData?.rows[0]?.profitTotalNet} />
+              <IncomeMetrics data={financialData?.rows[0]?.incomeStatement} />
             </BaseContainer>
           </div>
 
           {/* 右下：资产负债率（百分比）模块 */}
-          <div className="relative">
+          <div className="h-[480px] overflow-clip relative shrink-0 w-full" data-name="左侧-收入" data-node-id="I1715:121572;1709:120155">
             <BaseContainer>
               <DebtRatioMetrics data={financialData?.rows[0]?.assetLiabilityRatio} />
             </BaseContainer>
           </div>
         </div>
-
-        {/* 浮动按钮 */}
-        <button
-          onClick={handleOpenModal}
-          className="absolute bottom-8 right-8 w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition-colors z-20"
-        >
-          <Icon />
-        </button>
       </div>
 
+      {/* 浮动按钮 */}
+      <button
+        onClick={handleOpenModal}
+        className="absolute bottom-8 right-8 w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition-colors z-20"
+      >
+        <Icon />
+      </button>
+
       {/* 变动幅度弹窗 */}
       <VariationModal
         isOpen={isModalOpen}