✨ feat(dashboard): add return button to variation modal

- add return button in the bottom right corner of the modal to close it
- create new SVG assets for return icon background and path
- update Icon component to support return icon variant with outer circle and left arrow
- update documentation to reflect the new return button feature in task list and dev notes

docs/stories/006.003.实现财务数据可视化大屏静态页面.md

@@ -93,6 +93,7 @@ In Progress
   - [x] **静态数据** - 使用硬编码的示例变化幅度数据填充图表
   - [x] **交互集成** - 实现主页面右下角浮动按钮点击触发，点击遮罩层或ESC键关闭弹窗
   - [x] **状态管理** - 使用React useState管理弹窗显示状态
+  - [x] **返回按钮** - 在弹窗右下角添加返回按钮，点击可关闭弹窗
 
 ## Dev Notes
 
@@ -358,6 +359,8 @@ for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.
 - ✅ 实现了交互集成和状态管理
 - ✅ 创建了BarSVG组件，将主页面四个图中的柱子SVG抽成组件重用
 - ✅ 弹窗柱状图重用BarSVG组件，确保与主页面视觉完全一致
+- ✅ 在弹窗右下角添加了返回按钮，点击可关闭弹窗
+- ✅ 返回按钮重用Icon组件的'back'变体，确保视觉一致性
 
 ### 实际实现状态总结
 基于对代码库的实际检查，财务数据可视化大屏静态页面已完全实现：

public/financial-dashboard/return-icon-bg.svg

@@ -0,0 +1,20 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Ellipse 4119">
+<g filter="url(#filter0_i_0_4685)">
+<circle cx="43.8571" cy="43.8571" r="42.8571" fill="var(--fill-0, #C9DDFF)" fill-opacity="0.09"/>
+</g>
+<circle cx="43.8571" cy="43.8571" r="43.3571" stroke="var(--stroke-0, #C9DDFF)"/>
+</g>
+<defs>
+<filter id="filter0_i_0_4685" x="0" y="0" width="87.7143" height="87.7143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<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"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="6.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.866667 0 0 0 0 1 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_4685"/>
+</filter>
+</defs>
+</svg>

public/financial-dashboard/return-icon-path.svg

@@ -0,0 +1,16 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 52 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#183;&#175;&#229;&#190;&#132;" filter="url(#filter0_d_0_4684)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00075 12.0084C8.98949 11.6891 9.1053 11.3784 9.32264 11.1448L10.9606 9.38233C11.1781 9.14882 11.4792 9.01153 11.7977 9.00069C12.1162 8.98986 12.4259 9.10636 12.6586 9.32454L25.9498 21.7482L39.2433 9.32454C39.7277 8.87178 40.4863 8.89764 40.9389 9.38233L42.5769 11.1448C42.7945 11.3781 42.9108 11.6886 42.9 12.0079C42.8892 12.3271 42.7522 12.629 42.5193 12.847L27.6454 26.7514L26.8888 27.5652C26.6467 27.8255 26.3019 27.9649 25.9474 27.9456C25.5945 27.9634 25.2517 27.8242 25.0107 27.5652L24.2541 26.7466L9.38267 12.847C9.1494 12.6293 9.012 12.3276 9.00075 12.0084Z" fill="var(--fill-0, #C9DDFF)"/>
+</g>
+<defs>
+<filter id="filter0_d_0_4684" x="-1.35293e-10" y="0" width="51.9007" height="36.9474" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="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"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.866667 0 0 0 0 1 0 0 0 0.501961 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_4684"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_4684" result="shape"/>
+</filter>
+</defs>
+</svg>

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

@@ -23,16 +23,33 @@ export default function Icon({ className, variant = 'back' }: IconProps) {
           </div>
         </div>
       ) : (
-        // 返回按钮样式
-        <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
-          <div className="flex-none h-[17.684px] rotate-[270deg] w-[31.641px]">
-            <div className="relative size-full" data-name="路径">
-              <div className="absolute inset-[-50.89%_-28.44%]">
-                <img
-                  alt=""
-                  className="block max-w-none size-full"
-                  src="/financial-dashboard/icon-path.svg"
-                />
+        // 返回按钮样式 - 包含外圈和向左箭头
+        <div className="relative size-full">
+          {/* 外圈背景 */}
+          <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
+            <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
+              <div className="relative size-full">
+                <div className="absolute inset-[-1.17%]">
+                  <img
+                    alt=""
+                    className="block max-w-none size-full"
+                    src="/financial-dashboard/return-icon-bg.svg"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* 向左箭头 */}
+          <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
+            <div className="flex-none h-[17.684px] rotate-[270deg] w-[31.641px]">
+              <div className="relative size-full" data-name="路径">
+                <div className="absolute inset-[-47.5%_-26.55%]">
+                  <img
+                    alt=""
+                    className="block max-w-none size-full"
+                    src="/financial-dashboard/return-icon-path.svg"
+                  />
+                </div>
               </div>
             </div>
           </div>

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

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import BarElement from './BarElement';
 import BarSVG from './BarSVG';
 import ModalBorder from './ModalBorder';
+import Icon from './Icon';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 
 interface VariationModalProps {
@@ -246,6 +247,14 @@ export default function VariationModal({ isOpen, onClose }: VariationModalProps)
           </div>
         </div>
       </div>
+
+      {/* 右下角返回按钮 */}
+      <div
+        className="absolute flex items-center justify-center left-[1777px] size-[90px] top-[955px] cursor-pointer hover:opacity-80 transition-opacity"
+        onClick={onClose}
+      >
+        <Icon variant="back" className="size-[90px]" />
+      </div>
     </div>
   );
 }