feat: add ChatButton floating action button

This commit is contained in:
z2_cc 2026-05-13 11:40:29 +08:00
parent c7a89f9997
commit ed3cf2e8e2
2 changed files with 73 additions and 0 deletions

View File

@ -0,0 +1,23 @@
import React from 'react';
import styles from './styles.module.css';
export default function ChatButton({ isOpen, onClick }) {
return (
<button
className={`${styles.btn} ${isOpen ? styles.btnOpen : ''}`}
onClick={onClick}
aria-label={isOpen ? '关闭 AI 助手' : '打开 AI 助手'}
>
{isOpen ? (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
) : (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</svg>
)}
</button>
);
}

View File

@ -0,0 +1,50 @@
.btn {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: #466aff;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(70, 106, 255, 0.4);
z-index: 1000;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover {
transform: scale(1.08);
box-shadow: 0 6px 24px rgba(70, 106, 255, 0.5);
}
.btnOpen {
background: #666;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btnOpen:hover {
background: #555;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme='dark'] .btn {
background: #466aff;
}
[data-theme='dark'] .btnOpen {
background: #555;
}
@media (max-width: 768px) {
.btn {
bottom: 1.2rem;
right: 1.2rem;
width: 48px;
height: 48px;
}
}