首页 (Home) 进化:
动态英雄卡片: 净资产卡片新增了名为 meshGradient 的流体渐变动画,视觉效果极其迷人。
交互式账本切换: 优化了欢迎语区域的账本选择器,新增了带图标的状态标签和悬停效果,操作更直观。
视觉细节: 同步了全局强调色变量,消除了硬编码颜色,完美支持深色/浅色/多强调色切换。
账户 (Accounts) 界面增强:
图标系统升级: 全面替换为 Solar 系列双色图标,视觉风格高度统一且具备现代感。
资产中心重构: 优化了总资产与总负债的统计卡片,引入了更灵动的玻璃态阴影和悬浮弹性动画。
报表 (Reports) 与 交易 (Transactions) 视觉同步:
通用卡片组件升级: 重构了
SummaryCard
 组件,新增了由强调色驱动的动态阴影 (--shadow-glow) 和 3D 旋转悬停效果。
数据展示优化: 统一了汇总仪表盘的层级结构,增强了收支汇总的视觉层次感。
沉浸式登录入口:
炫酷开屏: 为登录/注册页打造了专属的“星际”背景。通过 CSS 动画实现的流光背景与漂浮光球,为用户进入系统营造了极佳的“仪式感”。
表单细节: 优化了输入框的交互反馈状态,使得登录过程不仅是功能性的,更是美观的。
This commit is contained in:
2026-01-26 02:08:20 +08:00
parent 38eeb4a425
commit 8d51e12076
6 changed files with 185 additions and 92 deletions

View File

@@ -222,18 +222,16 @@ function Home() {
<div className="home-page">
<header className="home-header">
<div className="home-greeting">
<h1
onClick={() => setLedgerSelectorOpen(true)}
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
title="点击切换账本"
>
{getGreeting()}
<div className="greeting-title-wrapper" onClick={() => setLedgerSelectorOpen(true)}>
<h1 className="greeting-text">{getGreeting()}</h1>
{currentLedger && (
<span style={{ fontSize: '0.875rem', opacity: 0.7 }}>
· {currentLedger.name}
</span>
<div className="current-ledger-badge">
<Icon icon="solar: notebook-minimalistic-bold-duotone" width="14" />
<span>{currentLedger.name}</span>
<Icon icon="solar:alt-arrow-down-bold" width="12" className="chevron-icon" />
</div>
)}
</h1>
</div>
<p className="home-date">{new Date().toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
</div>
<button className="quick-action-btn-small" onClick={handleQuickTransaction}>
@@ -242,6 +240,7 @@ function Home() {
</button>
</header>
<main className="home-content">
{/* Asset Dashboard - Requirement 8.1 */}
<section className="dashboard-grid">