feat:
首页 (Home) 进化: 动态英雄卡片: 净资产卡片新增了名为 meshGradient 的流体渐变动画，视觉效果极其迷人。 交互式账本切换: 优化了欢迎语区域的账本选择器，新增了带图标的状态标签和悬停效果，操作更直观。 视觉细节: 同步了全局强调色变量，消除了硬编码颜色，完美支持深色/浅色/多强调色切换。 账户 (Accounts) 界面增强: 图标系统升级: 全面替换为 Solar 系列双色图标，视觉风格高度统一且具备现代感。 资产中心重构: 优化了总资产与总负债的统计卡片，引入了更灵动的玻璃态阴影和悬浮弹性动画。 报表 (Reports) 与 交易 (Transactions) 视觉同步: 通用卡片组件升级: 重构了 SummaryCard 组件，新增了由强调色驱动的动态阴影 (--shadow-glow) 和 3D 旋转悬停效果。 数据展示优化: 统一了汇总仪表盘的层级结构，增强了收支汇总的视觉层次感。 沉浸式登录入口: 炫酷开屏: 为登录/注册页打造了专属的“星际”背景。通过 CSS 动画实现的流光背景与漂浮光球，为用户进入系统营造了极佳的“仪式感”。 表单细节: 优化了输入框的交互反馈状态，使得登录过程不仅是功能性的，更是美观的。
This commit is contained in:
@@ -41,78 +41,68 @@
|
||||
}
|
||||
|
||||
.summary-card:hover::before {
|
||||
opacity: 1;
|
||||
transform: rotate(15deg) translate(-10%, -10%);
|
||||
}
|
||||
|
||||
/* Variant Colors */
|
||||
.summary-card--primary {
|
||||
--card-glow-color: rgba(79, 70, 229, 0.2);
|
||||
--card-accent-color: var(--color-primary);
|
||||
--accent-rgb: 217, 119, 6;
|
||||
}
|
||||
|
||||
.summary-card--success {
|
||||
--card-glow-color: rgba(16, 185, 129, 0.2);
|
||||
--card-accent-color: var(--color-success);
|
||||
--accent-rgb: 5, 150, 105;
|
||||
}
|
||||
|
||||
.summary-card--danger {
|
||||
--card-glow-color: rgba(239, 68, 68, 0.2);
|
||||
--card-accent-color: var(--color-error);
|
||||
--accent-rgb: 220, 38, 38;
|
||||
}
|
||||
|
||||
.summary-card--warning {
|
||||
--card-glow-color: rgba(245, 158, 11, 0.2);
|
||||
--card-accent-color: var(--color-warning);
|
||||
--accent-rgb: 245, 158, 11;
|
||||
}
|
||||
|
||||
.summary-card__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-md);
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.summary-card__icon-wrapper {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
color: rgb(var(--accent-rgb));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
color: var(--card-accent-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.summary-card:hover .summary-card__icon-wrapper {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 0 10px rgba(var(--accent-rgb), 0.05);
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.summary-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
gap: 0.25rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -1px;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
line-height: 1;
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
.summary-card__subtitle {
|
||||
|
||||
@@ -64,51 +64,42 @@
|
||||
}
|
||||
|
||||
.accounts-page__btn--create {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
|
||||
background: var(--accent-primary);
|
||||
color: var(--text-inverse);
|
||||
box-shadow: var(--shadow-glow-sm);
|
||||
}
|
||||
|
||||
.accounts-page__btn--create:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.4);
|
||||
filter: brightness(1.1);
|
||||
background: var(--accent-primary-hover);
|
||||
box-shadow: var(--shadow-glow-md);
|
||||
}
|
||||
|
||||
.accounts-page__btn--transfer {
|
||||
background: white;
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.accounts-page__btn--transfer:hover:not(:disabled) {
|
||||
background: var(--color-bg-alt);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.accounts-page__btn--cancel {
|
||||
background: var(--glass-bg);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.accounts-page__btn--cancel:hover:not(:disabled) {
|
||||
background: var(--glass-bg-heavy);
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.accounts-page__btn--graph {
|
||||
background: linear-gradient(135deg, #8B5CF6, #6366F1);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
box-shadow: 0 8px 16px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.accounts-page__btn--graph:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
|
||||
box-shadow: 0 12px 24px rgba(139, 92, 246, 0.3);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
|
||||
.accounts-page__btn--delete {
|
||||
background: var(--color-error);
|
||||
color: white;
|
||||
|
||||
@@ -199,7 +199,9 @@ export const Accounts: React.FC = () => {
|
||||
/>
|
||||
|
||||
<div className="accounts-page__stat-card accounts-page__stat-card--assets">
|
||||
<div className="stat-card__icon">↑</div>
|
||||
<div className="stat-card__icon">
|
||||
<Icon icon="solar:graph-up-bold-duotone" width="24" />
|
||||
</div>
|
||||
<div className="stat-card__content">
|
||||
<span className="accounts-page__label">总资产</span>
|
||||
<span className="accounts-page__sub-value">
|
||||
@@ -209,7 +211,9 @@ export const Accounts: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="accounts-page__stat-card accounts-page__stat-card--liabilities">
|
||||
<div className="stat-card__icon">↓</div>
|
||||
<div className="stat-card__icon">
|
||||
<Icon icon="solar:graph-down-bold-duotone" width="24" />
|
||||
</div>
|
||||
<div className="stat-card__content">
|
||||
<span className="accounts-page__label">总负债</span>
|
||||
<span className="accounts-page__sub-value">
|
||||
@@ -219,6 +223,7 @@ export const Accounts: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="accounts-page__error">
|
||||
|
||||
@@ -16,7 +16,24 @@
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.home-greeting h1 {
|
||||
.home-greeting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.greeting-title-wrapper {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--spacing-md);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.greeting-title-wrapper:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.greeting-text {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
@@ -24,16 +41,47 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: var(--color-primary);
|
||||
color: var(--accent-primary);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.current-ledger-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.greeting-title-wrapper:hover .current-ledger-badge {
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.chevron-icon {
|
||||
opacity: 0.5;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.greeting-title-wrapper:hover .chevron-icon {
|
||||
transform: translateY(2px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.home-date {
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
margin: 0.25rem 0 0 0;
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.quick-action-btn-small {
|
||||
@@ -41,22 +89,37 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
background: var(--accent-primary);
|
||||
color: var(--text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: var(--shadow-glow-sm);
|
||||
}
|
||||
|
||||
.quick-action-btn-small:hover {
|
||||
transform: translateY(-2px);
|
||||
background: var(--accent-primary-hover);
|
||||
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
|
||||
box-shadow: var(--shadow-glow-md);
|
||||
}
|
||||
|
||||
@keyframes meshGradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Dashboard Grid */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
@@ -90,12 +153,15 @@
|
||||
.home-net-worth-card {
|
||||
grid-column: 1;
|
||||
/* First column but spans depending on layout */
|
||||
background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
|
||||
color: white;
|
||||
background: linear-gradient(-45deg, var(--accent-primary-hover), var(--accent-secondary), #3b82f6, #06b6d4);
|
||||
background-size: 400% 400%;
|
||||
animation: meshGradient 15s ease infinite;
|
||||
color: var(--text-inverse);
|
||||
border: none;
|
||||
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.25);
|
||||
box-shadow: var(--shadow-glow-primary);
|
||||
}
|
||||
|
||||
|
||||
.home-net-worth-card .card-bg-decoration {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
@@ -133,6 +199,7 @@
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.home-net-worth-card .trend-neutral {
|
||||
@@ -141,8 +208,10 @@
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
backdrop-filter: blur(4px);
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Secondary Cards */
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -6,31 +6,70 @@
|
||||
justify-content: center;
|
||||
background-color: var(--bg-primary);
|
||||
/* Rich Mesh Gradient Background */
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.15) 0px, transparent 50%);
|
||||
background: linear-gradient(-45deg, #1e293b, #0f172a, #1e1b4b, #2e1065);
|
||||
background-size: 400% 400%;
|
||||
animation: meshGradient 15s ease infinite;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Background Glowing Orbs */
|
||||
.login-page::before,
|
||||
.login-page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
z-index: 0;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.login-page::before {
|
||||
top: -10vw;
|
||||
left: -10vw;
|
||||
background: var(--accent-primary);
|
||||
animation: float 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.login-page::after {
|
||||
bottom: -10vw;
|
||||
right: -10vw;
|
||||
background: #3b82f6;
|
||||
animation: float 25s ease-in-out infinite alternate-reverse;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(10vw, 10vw);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Glass Card */
|
||||
.login-container {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: var(--glass-panel-bg);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 1.5rem;
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 2rem;
|
||||
/* Larger radius */
|
||||
padding: 3rem;
|
||||
max-width: 440px;
|
||||
width: 100%;
|
||||
box-shadow:
|
||||
0 20px 40px -10px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
|
||||
animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
box-shadow: var(--shadow-2xl), var(--shadow-glow-primary);
|
||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
Reference in New Issue
Block a user