Novault/Novault-Frontend-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现首页仪表盘，展示账户概览、交易记录、预算和消费趋势。

Browse Source
This commit is contained in:
admin
2026-01-30 11:12:31 +08:00
parent 313549a999
commit 6cfb9699d2
2 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -21,7 +21,6 @@
"@dnd-kit/utilities": "^3.2.2",
"@iconify/react": "^6.0.2",
"axios": "^1.13.2",
"axios": "^1.13.2",
"echarts": "^6.0.0",
"echarts-for-react": "^3.0.5",
"framer-motion": "^12.29.0",
@@ -61,4 +60,4 @@
"vite": "^7.2.4",
"vitest": "^4.0.18"
}
}
}

45
src/pages/Home/Home.tsx
View File

@@ -426,6 +426,28 @@ function Home() {
};
const healthScore = calculateHealthScore();
// 3D Tilt for Net Worth Card - MUST be before conditional returns to comply with React Hooks rules
const x = useMotionValue(0);
const y = useMotionValue(0);
const mouseX = useSpring(x, { stiffness: 150, damping: 15 });
const mouseY = useSpring(y, { stiffness: 150, damping: 15 });
const rotateX = useTransform(mouseY, [-0.5, 0.5], ["5deg", "-5deg"]);
const rotateY = useTransform(mouseX, [-0.5, 0.5], ["-5deg", "5deg"]);
const handleCardMouseMove = (e: React.MouseEvent) => {
const rect = e.currentTarget.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
const mouseXFromCenter = e.clientX - rect.left - width / 2;
const mouseYFromCenter = e.clientY - rect.top - height / 2;
x.set(mouseXFromCenter / width);
y.set(mouseYFromCenter / height);
};
const handleCardMouseLeave = () => {
x.set(0);
y.set(0);
};
if (loading) {
return (
@@ -467,29 +489,6 @@ function Home() {
);
}
// 3D Tilt for Net Worth Card
const x = useMotionValue(0);
const y = useMotionValue(0);
const mouseX = useSpring(x, { stiffness: 150, damping: 15 });
const mouseY = useSpring(y, { stiffness: 150, damping: 15 });
const rotateX = useTransform(mouseY, [-0.5, 0.5], ["5deg", "-5deg"]);
const rotateY = useTransform(mouseX, [-0.5, 0.5], ["-5deg", "5deg"]);
const handleCardMouseMove = (e: React.MouseEvent) => {
const rect = e.currentTarget.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
const mouseXFromCenter = e.clientX - rect.left - width / 2;
const mouseYFromCenter = e.clientY - rect.top - height / 2;
x.set(mouseXFromCenter / width);
y.set(mouseYFromCenter / height);
};
const handleCardMouseLeave = () => {
x.set(0);
y.set(0);
};
return (
<div className="home-page">
<header className="home-header">