Răsfoiți Sursa

✨ feat(FinancialDashboard): 优化图标组件功能

- 为Icon组件添加variant属性,支持'back'和'float'两种类型
- 实现浮动按钮样式的图标显示
- 使用Icon组件替代FinancialDashboard页面中的直接图标引用,提高代码复用性
yourname 2 luni în urmă
părinte
comite
c1a409bb0d

+ 3 - 6
src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx

@@ -4,6 +4,7 @@ import { IncomeMetrics } from './components/IncomeMetrics';
 import { DebtRatioMetrics } from './components/DebtRatioMetrics';
 import GridBackground from './components/GridBackground';
 import BackgroundOverlay from './components/BackgroundOverlay';
+import Icon from './components/Icon';
 
 export default function FinancialDashboard() {
   return (
@@ -160,12 +161,8 @@ export default function FinancialDashboard() {
       <div className="absolute contents left-[1765px] top-[923px]" data-name="浮动icon">
         <div className="absolute contents left-[1765px] top-[923px]">
           <div className="absolute flex items-center justify-center left-[1765px] size-[108px] top-[923px]">
-            <div className="flex-none rotate-[180deg] scale-y-[-100%]">
-              <div className="relative size-[108px]">
-                {/* 使用现有的Icon组件 */}
-                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/icon-path.svg" />
-              </div>
-            </div>
+            {/* 使用浮动按钮状态的Icon组件 */}
+            <Icon variant="float" />
           </div>
           <div className="absolute font-['PingFang_SC:Medium',sans-serif] h-[51px] leading-[normal] left-[1818.5px] not-italic text-[20px] text-center text-white top-[952px] tracking-[0.6349px] translate-x-[-50%] w-[55px] whitespace-pre-wrap">
             <p className="mb-0">变动</p>

+ 29 - 22
src/client/home/pages/FinancialDashboard/components/Icon.tsx

@@ -1,36 +1,43 @@
 interface IconProps {
   className?: string;
+  /** 图标类型:'back' - 返回按钮,'float' - 浮动按钮 */
+  variant?: 'back' | 'float';
 }
 
-export default function Icon({ className }: IconProps) {
+export default function Icon({ className, variant = 'back' }: IconProps) {
   return (
-    <div className={className} data-name="返回icon">
-      <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.25%]">
-              <img
-                alt=""
-                className="block max-w-none size-full"
-                src="/financial-dashboard/ellipse4119.svg"
-              />
+    <div className={className} data-name={variant === 'float' ? '浮动icon' : '返回icon'}>
+      {variant === 'float' ? (
+        // 浮动按钮样式
+        <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-[108px]">
+            <div className="relative size-full">
+              <div className="absolute inset-[-1.25%]">
+                <img
+                  alt=""
+                  className="block max-w-none size-full"
+                  src="/financial-dashboard/ellipse4119.svg"
+                />
+              </div>
             </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-[-50.89%_-28.44%]">
-              <img
-                alt=""
-                className="block max-w-none size-full"
-                src="/financial-dashboard/icon-path.svg"
-              />
+      ) : (
+        // 返回按钮样式
+        <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>
             </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }