From 8d51e12076d663166ee6d81c6fc0b5500bfe2ea2 Mon Sep 17 00:00:00 2001 From: 12975 <1297598740@qq.com> Date: Mon, 26 Jan 2026 02:08:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=20(Home)=20=E8=BF=9B?= =?UTF-8?q?=E5=8C=96:=20=E5=8A=A8=E6=80=81=E8=8B=B1=E9=9B=84=E5=8D=A1?= =?UTF-8?q?=E7=89=87:=20=E5=87=80=E8=B5=84=E4=BA=A7=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BA=86=E5=90=8D=E4=B8=BA=20meshGradient=20?= =?UTF-8?q?=E7=9A=84=E6=B5=81=E4=BD=93=E6=B8=90=E5=8F=98=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=EF=BC=8C=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=E6=9E=81=E5=85=B6?= =?UTF-8?q?=E8=BF=B7=E4=BA=BA=E3=80=82=20=E4=BA=A4=E4=BA=92=E5=BC=8F?= =?UTF-8?q?=E8=B4=A6=E6=9C=AC=E5=88=87=E6=8D=A2:=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=BA=86=E6=AC=A2=E8=BF=8E=E8=AF=AD=E5=8C=BA=E5=9F=9F=E7=9A=84?= =?UTF-8?q?=E8=B4=A6=E6=9C=AC=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E4=BA=86=E5=B8=A6=E5=9B=BE=E6=A0=87=E7=9A=84=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E6=A0=87=E7=AD=BE=E5=92=8C=E6=82=AC=E5=81=9C=E6=95=88?= =?UTF-8?q?=E6=9E=9C=EF=BC=8C=E6=93=8D=E4=BD=9C=E6=9B=B4=E7=9B=B4=E8=A7=82?= =?UTF-8?q?=E3=80=82=20=E8=A7=86=E8=A7=89=E7=BB=86=E8=8A=82:=20=E5=90=8C?= =?UTF-8?q?=E6=AD=A5=E4=BA=86=E5=85=A8=E5=B1=80=E5=BC=BA=E8=B0=83=E8=89=B2?= =?UTF-8?q?=E5=8F=98=E9=87=8F=EF=BC=8C=E6=B6=88=E9=99=A4=E4=BA=86=E7=A1=AC?= =?UTF-8?q?=E7=BC=96=E7=A0=81=E9=A2=9C=E8=89=B2=EF=BC=8C=E5=AE=8C=E7=BE=8E?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=B7=B1=E8=89=B2/=E6=B5=85=E8=89=B2/?= =?UTF-8?q?=E5=A4=9A=E5=BC=BA=E8=B0=83=E8=89=B2=E5=88=87=E6=8D=A2=E3=80=82?= =?UTF-8?q?=20=E8=B4=A6=E6=88=B7=20(Accounts)=20=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=A2=9E=E5=BC=BA:=20=E5=9B=BE=E6=A0=87=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E5=8D=87=E7=BA=A7:=20=E5=85=A8=E9=9D=A2=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?=E4=B8=BA=20Solar=20=E7=B3=BB=E5=88=97=E5=8F=8C=E8=89=B2?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=EF=BC=8C=E8=A7=86=E8=A7=89=E9=A3=8E=E6=A0=BC?= =?UTF-8?q?=E9=AB=98=E5=BA=A6=E7=BB=9F=E4=B8=80=E4=B8=94=E5=85=B7=E5=A4=87?= =?UTF-8?q?=E7=8E=B0=E4=BB=A3=E6=84=9F=E3=80=82=20=E8=B5=84=E4=BA=A7?= =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=87=8D=E6=9E=84:=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=BA=86=E6=80=BB=E8=B5=84=E4=BA=A7=E4=B8=8E=E6=80=BB=E8=B4=9F?= =?UTF-8?q?=E5=80=BA=E7=9A=84=E7=BB=9F=E8=AE=A1=E5=8D=A1=E7=89=87=EF=BC=8C?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E4=BA=86=E6=9B=B4=E7=81=B5=E5=8A=A8=E7=9A=84?= =?UTF-8?q?=E7=8E=BB=E7=92=83=E6=80=81=E9=98=B4=E5=BD=B1=E5=92=8C=E6=82=AC?= =?UTF-8?q?=E6=B5=AE=E5=BC=B9=E6=80=A7=E5=8A=A8=E7=94=BB=E3=80=82=20?= =?UTF-8?q?=E6=8A=A5=E8=A1=A8=20(Reports)=20=E4=B8=8E=20=E4=BA=A4=E6=98=93?= =?UTF-8?q?=20(Transactions)=20=E8=A7=86=E8=A7=89=E5=90=8C=E6=AD=A5:=20?= =?UTF-8?q?=E9=80=9A=E7=94=A8=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6=E5=8D=87?= =?UTF-8?q?=E7=BA=A7:=20=E9=87=8D=E6=9E=84=E4=BA=86=20SummaryCard=20=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=96=B0=E5=A2=9E=E4=BA=86=E7=94=B1?= =?UTF-8?q?=E5=BC=BA=E8=B0=83=E8=89=B2=E9=A9=B1=E5=8A=A8=E7=9A=84=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E9=98=B4=E5=BD=B1=20(--shadow-glow)=20=E5=92=8C=203D?= =?UTF-8?q?=20=E6=97=8B=E8=BD=AC=E6=82=AC=E5=81=9C=E6=95=88=E6=9E=9C?= =?UTF-8?q?=E3=80=82=20=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA=E4=BC=98?= =?UTF-8?q?=E5=8C=96:=20=E7=BB=9F=E4=B8=80=E4=BA=86=E6=B1=87=E6=80=BB?= =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98=E7=9A=84=E5=B1=82=E7=BA=A7=E7=BB=93?= =?UTF-8?q?=E6=9E=84=EF=BC=8C=E5=A2=9E=E5=BC=BA=E4=BA=86=E6=94=B6=E6=94=AF?= =?UTF-8?q?=E6=B1=87=E6=80=BB=E7=9A=84=E8=A7=86=E8=A7=89=E5=B1=82=E6=AC=A1?= =?UTF-8?q?=E6=84=9F=E3=80=82=20=E6=B2=89=E6=B5=B8=E5=BC=8F=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E5=85=A5=E5=8F=A3:=20=E7=82=AB=E9=85=B7=E5=BC=80?= =?UTF-8?q?=E5=B1=8F:=20=E4=B8=BA=E7=99=BB=E5=BD=95/=E6=B3=A8=E5=86=8C?= =?UTF-8?q?=E9=A1=B5=E6=89=93=E9=80=A0=E4=BA=86=E4=B8=93=E5=B1=9E=E7=9A=84?= =?UTF-8?q?=E2=80=9C=E6=98=9F=E9=99=85=E2=80=9D=E8=83=8C=E6=99=AF=E3=80=82?= =?UTF-8?q?=E9=80=9A=E8=BF=87=20CSS=20=E5=8A=A8=E7=94=BB=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E7=9A=84=E6=B5=81=E5=85=89=E8=83=8C=E6=99=AF=E4=B8=8E=E6=BC=82?= =?UTF-8?q?=E6=B5=AE=E5=85=89=E7=90=83=EF=BC=8C=E4=B8=BA=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E8=BF=9B=E5=85=A5=E7=B3=BB=E7=BB=9F=E8=90=A5=E9=80=A0=E4=BA=86?= =?UTF-8?q?=E6=9E=81=E4=BD=B3=E7=9A=84=E2=80=9C=E4=BB=AA=E5=BC=8F=E6=84=9F?= =?UTF-8?q?=E2=80=9D=E3=80=82=20=E8=A1=A8=E5=8D=95=E7=BB=86=E8=8A=82:=20?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E8=BE=93=E5=85=A5=E6=A1=86=E7=9A=84?= =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=8F=8D=E9=A6=88=E7=8A=B6=E6=80=81=EF=BC=8C?= =?UTF-8?q?=E4=BD=BF=E5=BE=97=E7=99=BB=E5=BD=95=E8=BF=87=E7=A8=8B=E4=B8=8D?= =?UTF-8?q?=E4=BB=85=E6=98=AF=E5=8A=9F=E8=83=BD=E6=80=A7=E7=9A=84=EF=BC=8C?= =?UTF-8?q?=E6=9B=B4=E6=98=AF=E7=BE=8E=E8=A7=82=E7=9A=84=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../report/SummaryCard/SummaryCard.css | 56 +++++------ src/pages/Accounts/Accounts.css | 37 +++---- src/pages/Accounts/Accounts.tsx | 9 +- src/pages/Home/Home.css | 97 ++++++++++++++++--- src/pages/Home/Home.tsx | 19 ++-- src/pages/Login/Login.css | 59 +++++++++-- 6 files changed, 185 insertions(+), 92 deletions(-) diff --git a/src/components/report/SummaryCard/SummaryCard.css b/src/components/report/SummaryCard/SummaryCard.css index 84a4667..5bf6cb4 100644 --- a/src/components/report/SummaryCard/SummaryCard.css +++ b/src/components/report/SummaryCard/SummaryCard.css @@ -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 { diff --git a/src/pages/Accounts/Accounts.css b/src/pages/Accounts/Accounts.css index 489ccf9..e505e94 100644 --- a/src/pages/Accounts/Accounts.css +++ b/src/pages/Accounts/Accounts.css @@ -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; diff --git a/src/pages/Accounts/Accounts.tsx b/src/pages/Accounts/Accounts.tsx index 6063a32..a1947a1 100644 --- a/src/pages/Accounts/Accounts.tsx +++ b/src/pages/Accounts/Accounts.tsx @@ -199,7 +199,9 @@ export const Accounts: React.FC = () => { />
-
↑
+
+ +
总资产 @@ -209,7 +211,9 @@ export const Accounts: React.FC = () => {
-
↓
+
+ +
总负债 @@ -219,6 +223,7 @@ export const Accounts: React.FC = () => {
+ {/* Error Message */} {error && (
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css index cca4795..a070c97 100644 --- a/src/pages/Home/Home.css +++ b/src/pages/Home/Home.css @@ -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 */ diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 26e1fe2..ed329e7 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -222,18 +222,16 @@ function Home() {
-

setLedgerSelectorOpen(true)} - style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem' }} - title="点击切换账本" - > - {getGreeting()} +
setLedgerSelectorOpen(true)}> +

{getGreeting()}

{currentLedger && ( - - · {currentLedger.name} - +
+ + {currentLedger.name} + +
)} -

+

{new Date().toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

+
{/* Asset Dashboard - Requirement 8.1 */}
diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css index a4deec0..74a4ebf 100644 --- a/src/pages/Login/Login.css +++ b/src/pages/Login/Login.css @@ -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;