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