feat: add ChatButton floating action button
This commit is contained in:
parent
c7a89f9997
commit
ed3cf2e8e2
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue