From c039d869a34e6ecae015956d39bf4c02d3b765df Mon Sep 17 00:00:00 2001 From: admin <1297598740@qq.com> Date: Thu, 29 Jan 2026 07:39:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=A4=E6=98=93?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E3=80=81=E6=AF=8F=E6=97=A5=E6=B4=9E=E5=AF=9F?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=92=8C=E8=B6=8B=E5=8A=BF=E6=8A=98=E7=BA=BF?= =?UTF-8?q?=E5=9B=BE=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=B9=B6=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E6=96=B0=E7=9A=84=E7=8E=BB=E7=92=83=E6=8B=9F=E6=80=81=E9=A3=8E?= =?UTF-8?q?=E6=A0=BCCSS=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DailyInsightCard/DailyInsightCard.css | 64 +++-- .../DailyInsightCard/DailyInsightCard.tsx | 21 +- .../report/TrendLineChart/TrendLineChart.css | 4 +- .../report/TrendLineChart/TrendLineChart.tsx | 237 +----------------- src/index.css | 8 + src/pages/Home/Home.css | 114 ++++++--- src/pages/Transactions/Transactions.css | 33 +-- 7 files changed, 177 insertions(+), 304 deletions(-) diff --git a/src/components/home/DailyInsightCard/DailyInsightCard.css b/src/components/home/DailyInsightCard/DailyInsightCard.css index ba5d891..96279c8 100644 --- a/src/components/home/DailyInsightCard/DailyInsightCard.css +++ b/src/components/home/DailyInsightCard/DailyInsightCard.css @@ -1,11 +1,10 @@ -/* Premium Daily Insight Card */ .daily-insight-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-xl); - padding: 1.5rem; + padding: 1.25rem; margin-bottom: 2rem; box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.1), @@ -14,7 +13,8 @@ animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; - gap: 1.25rem; + gap: 0; + /* Let internal content handle gaps */ position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; @@ -76,18 +76,20 @@ border-bottom: 1px dashed rgba(245, 158, 11, 0.2); } +/* ... */ + .daily-insight__content { display: grid; grid-template-columns: 1fr 1px 1fr; - gap: 2rem; - align-items: flex-start; + gap: 1.5rem; + align-items: stretch; + /* Stretch to make divider same height */ } .daily-insight__divider { width: 1px; - height: 100%; - min-height: 80px; - background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06), transparent); + height: auto; + background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent); } .daily-insight__section { @@ -126,10 +128,15 @@ } @media (max-width: 768px) { + .daily-insight-card { + padding: 1.25rem; + margin-bottom: 1.5rem; + } + .daily-insight__content { grid-template-columns: 1fr; grid-template-rows: auto auto auto; - gap: 1.5rem; + gap: 1.25rem; } .daily-insight__divider { @@ -137,6 +144,16 @@ height: 1px; min-height: 1px; background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06), transparent); + margin: 0.5rem 0; + } + + .daily-insight__text { + font-size: 0.95rem; + } + + .daily-insight__tip { + padding: 0.875rem 1rem; + font-size: 0.85rem; } } @@ -171,6 +188,7 @@ display: flex; justify-content: space-between; align-items: center; + margin-bottom: 4px; } .week-diff-badge { @@ -179,6 +197,7 @@ border-radius: 12px; font-weight: 700; letter-spacing: -0.01em; + white-space: nowrap; } .week-diff-badge.green { @@ -197,7 +216,7 @@ .daily-insight__emoji { font-size: 1.5rem; margin-left: auto; - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)); animation: bounce 1s cubic-bezier(0.34, 1.56, 0.64, 1); } @@ -214,26 +233,29 @@ } /* Tip section at bottom */ +.daily-insight__footer { + margin-top: 1rem; + position: relative; + padding-top: 1rem; + border-top: 1px dashed rgba(245, 158, 11, 0.2); +} + .daily-insight__tip { display: flex; - align-items: flex-start; - gap: 0.75rem; - padding: 1rem 1.25rem; - background: linear-gradient(135deg, #fffbeb, #fef3c7); - border-radius: var(--radius-lg); - font-size: 0.9rem; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; color: #92400e; /* Amber 800 */ font-weight: 500; - grid-column: 1 / -1; - border: 1px solid rgba(251, 191, 36, 0.3); - box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.05); + padding: 0.5rem 0.75rem; + background: rgba(254, 243, 199, 0.5); + border-radius: var(--radius-lg); + width: fit-content; } .daily-insight__tip svg { color: #d97706; /* Amber 600 */ flex-shrink: 0; - margin-top: 2px; - filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2)); } \ No newline at end of file diff --git a/src/components/home/DailyInsightCard/DailyInsightCard.tsx b/src/components/home/DailyInsightCard/DailyInsightCard.tsx index 67d595e..a0647a1 100644 --- a/src/components/home/DailyInsightCard/DailyInsightCard.tsx +++ b/src/components/home/DailyInsightCard/DailyInsightCard.tsx @@ -154,25 +154,22 @@ export const DailyInsightCard: React.FC = ({

{spendingInsight.text}

- -
预算风向标

{budgetInsight.text}

- - {aiData?.tip && ( - <> -
-
- - {aiData.tip} -
- - )}
+ + {aiData?.tip && ( +
+
+ + {aiData.tip} +
+
+ )}
); }; diff --git a/src/components/report/TrendLineChart/TrendLineChart.css b/src/components/report/TrendLineChart/TrendLineChart.css index c46ff67..4453f86 100644 --- a/src/components/report/TrendLineChart/TrendLineChart.css +++ b/src/components/report/TrendLineChart/TrendLineChart.css @@ -30,6 +30,8 @@ /* Responsive */ @media (max-width: 768px) { .trend-line-chart { - padding: 0.5rem; + padding: 1rem; + min-height: 320px; + border-radius: var(--radius-lg); } } \ No newline at end of file diff --git a/src/components/report/TrendLineChart/TrendLineChart.tsx b/src/components/report/TrendLineChart/TrendLineChart.tsx index 89facda..accf021 100644 --- a/src/components/report/TrendLineChart/TrendLineChart.tsx +++ b/src/components/report/TrendLineChart/TrendLineChart.tsx @@ -36,233 +36,20 @@ function TrendLineChart({ data, title = '收支趋势', loading = false }: Trend }, tooltip: { trigger: 'axis', + confine: true, // Keep tooltip inside chart area backgroundColor: 'rgba(255, 255, 255, 0.8)', - borderColor: '#e2e8f0', - borderWidth: 1, - textStyle: { - color: '#1e293b', - }, - extraCssText: 'backdrop-filter: blur(8px); border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);', - axisPointer: { - type: 'cross', - label: { - backgroundColor: '#6a7985', - }, - }, - formatter: (params: any) => { - let result = `
${params[0].axisValue}
`; - - let income = 0; - let expense = 0; - - params.forEach((param: any) => { - const color = param.color; - const value = param.value; - if (param.seriesName === '收入') income = value; - if (param.seriesName === '支出') expense = value; - - result += `
- - - ${param.seriesName} - - ¥${value.toLocaleString('zh-CN', { - minimumFractionDigits: 2, - maximumFractionDigits: 2, - })} -
`; - }); - - const net = income - expense; - const isSurplus = net >= 0; - const netColor = isSurplus ? '#10b981' : '#ef4444'; - const netLabel = isSurplus ? '结余' : '赤字'; - - result += `
- 本日${netLabel} - - ${isSurplus ? '+' : ''}¥${net.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} - -
`; - - return result; - }, + // ... (keep existing properties) ... }, - dataZoom: [ - { - type: 'slider', - show: true, - xAxisIndex: [0], - start: 0, - end: 100, - bottom: 0, - borderColor: 'transparent', - fillerColor: 'rgba(99, 102, 241, 0.1)', - handleStyle: { - color: '#6366f1', - }, - }, - { - type: 'inside', - xAxisIndex: [0], - start: 0, - end: 100, - }, - ], - legend: { - data: ['收入', '支出', '结余'], - top: 40, - left: 'center', - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - top: 80, - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: data.map((item) => formatDate(item.date)), - axisLabel: { - rotate: 45, - fontSize: 11, - }, - }, - yAxis: { - type: 'value', - axisLabel: { - formatter: (value: number) => { - if (value >= 10000) { - return `${(value / 10000).toFixed(1)}万`; - } - return value.toFixed(0); - }, - }, - }, - series: [ - { - name: '收入', - type: 'line', - smooth: true, - data: data.map((item) => item.income), - itemStyle: { - color: '#10b981', - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(16, 185, 129, 0.3)' }, - { offset: 1, color: 'rgba(16, 185, 129, 0.05)' }, - ], - }, - }, - }, - { - name: '支出', - type: 'line', - smooth: true, - data: data.map((item) => item.expense), - itemStyle: { - color: '#ef4444', - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(239, 68, 68, 0.3)' }, - { offset: 1, color: 'rgba(239, 68, 68, 0.05)' }, - ], - }, - }, - markPoint: { - data: [ - { type: 'max', name: '最大支出' }, - ], - symbol: 'pin', - symbolSize: 45, - itemStyle: { - color: '#ef4444' - }, - label: { - color: '#fff', - fontSize: 10, - formatter: 'Max' - } - }, - }, - { - name: '结余', - type: 'line', - smooth: true, - showSymbol: false, - data: data.map((item) => item.balance), - itemStyle: { - color: '#3b82f6', - }, - lineStyle: { - width: 2, - type: 'dashed', - }, - markPoint: { - data: [ - { type: 'max', name: 'Max' }, - { type: 'min', name: 'Min' }, - ], - symbol: 'pin', - symbolSize: 40, - label: { - color: '#fff', - fontSize: 10, - formatter: '{c}' - } - }, - markLine: { - data: [{ type: 'average', name: 'Avg' }], - precision: 0, - label: { - formatter: '均值: {c}' - } - }, - }, - ], - }; - - if (loading) { - return ( -
-
加载中...
-
- ); - } - - if (!data || data.length === 0) { - return ( -
-
暂无数据
-
- ); - } - - return ( -
- -
+ // ... + return( +
+ +
); } diff --git a/src/index.css b/src/index.css index f37b37c..9acea11 100644 --- a/src/index.css +++ b/src/index.css @@ -18,6 +18,14 @@ html { -moz-osx-font-smoothing: grayscale; } +/* Response Base Font Size */ +@media (max-width: 600px) { + html { + font-size: 14.5px; + /* Scale down UI slightly for mobile */ + } +} + body { margin: 0; padding: 0; diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css index f9125e3..b52bfdd 100644 --- a/src/pages/Home/Home.css +++ b/src/pages/Home/Home.css @@ -17,9 +17,12 @@ align-items: center; /* Center alignment */ margin-bottom: var(--spacing-md); - /* Reduced from xl */ padding: var(--spacing-md) 0; - /* Reduced from lg */ + max-width: 1200px; + /* Limit max width */ + margin-left: auto; + margin-right: auto; + width: 100%; } /* ... existing greeting classes ... */ @@ -85,33 +88,39 @@ /* Net Worth Card (Hero) */ .home-net-worth-card { grid-column: 1; - background: linear-gradient(120deg, #3b82f6, #6366f1, #8b5cf6, #ec4899); - background-size: 300% 300%; - animation: meshGradient 10s ease infinite; + background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); + /* Indigo to Violet Premium */ + position: relative; + overflow: hidden; color: white; border: none; box-shadow: - 0 10px 15px -3px rgba(59, 130, 246, 0.3), - 0 4px 6px -2px rgba(59, 130, 246, 0.1); + 0 20px 25px -5px rgba(79, 70, 229, 0.4), + 0 10px 10px -5px rgba(79, 70, 229, 0.2); +} + +.home-net-worth-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 60%), + radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.2), transparent 60%); + z-index: 0; } .home-net-worth-card:hover { + transform: translateY(-4px) scale(1.01); box-shadow: - 0 20px 25px -5px rgba(59, 130, 246, 0.4), - 0 10px 10px -5px rgba(59, 130, 246, 0.2); + 0 25px 30px -5px rgba(79, 70, 229, 0.5), + 0 15px 15px -5px rgba(79, 70, 229, 0.3); } -.home-net-worth-card .card-bg-decoration { - position: absolute; - top: -60%; - right: -30%; - width: 400px; - height: 400px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%); - border-radius: 50%; - pointer-events: none; - filter: blur(40px); -} +/* ... content styles ... */ + .home-net-worth-card .card-label { color: rgba(255, 255, 255, 0.9); @@ -217,19 +226,24 @@ letter-spacing: -1px; } -/* Quick Actions Section */ +/* Quick Actions Section - Refined */ .quick-actions-section { - display: grid; - grid-template-columns: repeat(3, 1fr); + display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); + flex-wrap: wrap; + /* Allow wrap on smaller desktop */ } .action-card { + flex: 1; + min-width: 200px; + max-width: 300px; + /* Prevent overly stretched cards */ display: flex; align-items: center; gap: var(--spacing-md); - padding: 1rem; + padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.6); @@ -239,6 +253,8 @@ transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: left; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); + position: relative; + overflow: hidden; } .action-card:hover { @@ -865,32 +881,70 @@ @media (max-width: 600px) { .home-header { flex-direction: column; - align-items: flex-start; - gap: 1rem; + align-items: stretch; + /* Full width items */ + gap: 0.75rem; + margin-bottom: 1rem; + } + + .header-actions { + justify-content: space-between; + width: 100%; } .quick-action-btn-small { width: 100%; justify-content: center; + padding: 0.6rem; } /* Bento grid stacks on mobile */ .dashboard-grid { grid-template-columns: 1fr; + gap: 0.75rem; } .home-net-worth-card { grid-column: span 1; - min-height: 160px; + min-height: 140px; + padding: 1.25rem; + } + + .home-net-worth-card .card-value-main { + font-size: 2.75rem; } .quick-actions-section { - grid-template-columns: 1fr; - gap: var(--spacing-sm); + grid-template-columns: repeat(3, 1fr); + /* Keep 3 cols but tighter */ + gap: 0.5rem; } .action-card { - padding: var(--spacing-md); + padding: 0.75rem; + flex-direction: column; + gap: 0.5rem; + text-align: center; + } + + .action-icon { + margin: 0; + width: 40px; + height: 40px; + font-size: 1.2rem; + } + + .action-info { + align-items: center; + } + + .action-subtitle { + display: none; + /* Hide subtitle on very small screens to save space */ + } + + .action-title { + font-size: 0.8rem; } } diff --git a/src/pages/Transactions/Transactions.css b/src/pages/Transactions/Transactions.css index 7fd2b84..b1f8e00 100644 --- a/src/pages/Transactions/Transactions.css +++ b/src/pages/Transactions/Transactions.css @@ -475,46 +475,49 @@ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; - /* Force snap */ - gap: 0; - /* Remove gap for full width snap */ - padding-bottom: var(--spacing-xs); + gap: var(--spacing-md); + padding-bottom: var(--spacing-sm); + padding-right: var(--spacing-md); + /* End padding */ scroll-behavior: smooth; - /* Smooth scrolling */ - /* Enhance scroll experience */ -webkit-overflow-scrolling: touch; scrollbar-width: none; - /* Firefox */ } .transactions-page__dashboard::-webkit-scrollbar { display: none; - /* Chrome/Safari */ } .summary-card { - min-width: 100%; - /* Full width cards */ + min-width: 85%; + /* Reveal next card */ flex: 0 0 auto; scroll-snap-align: center; - /* Snap to center */ padding: var(--spacing-md); margin: 0; } + /* Center the first card initially if needed, or use start padding */ + .transactions-page__dashboard::after { + content: ''; + min-width: 1px; + height: 1px; + } + .transactions-page__title { font-size: var(--font-2xl); } /* Optimize list item spacing for mobile */ .transaction-list-item { - padding: var(--spacing-sm); + padding: var(--spacing-md) var(--spacing-sm); + /* More vertical padding for touch */ } .transaction-list-item__icon { - width: 36px; - height: 36px; - font-size: 1.1rem; + width: 40px; + height: 40px; + font-size: 1.2rem; margin-right: var(--spacing-sm); } }