diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css index f40f891..a3a6873 100644 --- a/src/pages/Home/Home.css +++ b/src/pages/Home/Home.css @@ -798,8 +798,91 @@ cursor: pointer; padding: 4px 10px; border-radius: var(--radius-full); - transition: background 0.2s; - background: rgba(var(--color-primary-rgb), 0.1); +} + +/* Floating Action Button (FAB) */ +.fab-voice-btn { + position: fixed; + bottom: 2rem; + right: 2rem; + width: 56px; + height: 56px; + background: linear-gradient(135deg, #f59e0b, #d97706); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1); + cursor: pointer; + z-index: 100; + border: none; + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards; +} + +.fab-voice-btn:hover { + transform: scale(1.1) translateY(-2px); + box-shadow: 0 8px 20px rgba(245, 158, 11, 0.5); +} + +.fab-voice-btn:active { + transform: scale(0.95); +} + +/* Pulse animation for microphone */ +.fab-voice-btn::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.5); + opacity: 0; + transform: scale(1); +} + +.fab-voice-btn:hover::after { + animation: pulse-ring 1.5s infinite; +} + +@keyframes pulse-ring { + 0% { + transform: scale(1); + opacity: 0.8; + } + + 100% { + transform: scale(1.5); + opacity: 0; + } +} + +@keyframes scaleIn { + from { + transform: scale(0); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } +} + +/* 适配移动端 */ +@media (max-width: 600px) { + .fab-voice-btn { + bottom: 5.5rem; + /* Avoid bottom nav if present, or just give space */ + right: 1.5rem; + } +} + +transition: background 0.2s; +background: rgba(var(--color-primary-rgb), 0.1); } .view-all-link:hover { diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 9b28370..f41e922 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -231,6 +231,10 @@ function Home() { navigate('/chat'); }; + const handleVoiceBookkeeping = () => { + setVoiceModalOpen(true); + }; + const handleAIConfirm = () => { // 确认后刷新数据 loadData(); @@ -600,11 +604,11 @@ function Home() { - + - AI 记账 - 语音或文字智能记账 + AI 助手 + 智能对话与分析 @@ -734,6 +738,11 @@ function Home() { todaySpend={todaySpend} yesterdaySpend={yesterdaySpend} /> + + {/* Floating Action Button for Voice Input - Feature: voice-bookkeeping-module */} + + + ); }