feat: AI 助手支持文字/语音双模式
- 头部新增模式切换（文字/语音），文字=对话框，语音=语音交互按钮 - 语音模式：大麦克风按钮 + 聆听波纹动画 + 识别中状态，点击开始/再次点击结束 - 优先使用 Web Speech API 识别（zh-CN），无权限/不支持时自动兜底模拟识别 - 语音提问以文字形式进入同一对话流，气泡带「语音」标记 - 切换模式保留对话历史；聆听中切换/离开自动中止识别 - 新增 microphone/microphone-filled/microphone-off/message-circle 图标
This commit is contained in:
Pine
@@ -1986,6 +1986,152 @@
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* ---------- 模式切换（文字 / 语音） ---------- */
|
||||
.bd-chat-modes {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 3px;
|
||||
border-radius: 9px;
|
||||
background: rgba(120,160,220,0.12);
|
||||
border: 1px solid rgba(120,160,220,0.18);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bd-chat-modes button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 11px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #64748d;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bd-chat-modes button:hover {
|
||||
color: var(--bd-blue);
|
||||
}
|
||||
.bd-chat-modes button.active {
|
||||
color: var(--bd-blue);
|
||||
background: rgba(255,255,255,0.9);
|
||||
box-shadow: 0 2px 8px rgba(47,107,255,0.18);
|
||||
}
|
||||
/* ---------- 语音对话区 ---------- */
|
||||
.bd-chat-voice {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px 18px;
|
||||
}
|
||||
.bd-chat-voice-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748d;
|
||||
min-height: 18px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.bd-chat-voice-hint.listening {
|
||||
color: var(--bd-blue);
|
||||
}
|
||||
.bd-chat-voice-hint.processing {
|
||||
color: var(--bd-orange);
|
||||
}
|
||||
/* 聆听波形 */
|
||||
.bd-voice-wave {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
height: 14px;
|
||||
}
|
||||
.bd-voice-wave i {
|
||||
width: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--bd-blue);
|
||||
animation: bdWave 1s ease-in-out infinite;
|
||||
}
|
||||
.bd-voice-wave i:nth-child(1) { height: 6px; animation-delay: 0s; }
|
||||
.bd-voice-wave i:nth-child(2) { height: 12px; animation-delay: 0.12s; }
|
||||
.bd-voice-wave i:nth-child(3) { height: 8px; animation-delay: 0.24s; }
|
||||
.bd-voice-wave i:nth-child(4) { height: 13px; animation-delay: 0.36s; }
|
||||
.bd-voice-wave i:nth-child(5) { height: 7px; animation-delay: 0.48s; }
|
||||
@keyframes bdWave {
|
||||
0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
|
||||
50% { transform: scaleY(1); opacity: 1; }
|
||||
}
|
||||
/* 语音交互按钮 */
|
||||
.bd-chat-mic {
|
||||
position: relative;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(140deg, var(--bd-blue), var(--bd-cyan));
|
||||
box-shadow: 0 10px 28px rgba(47,107,255,0.32);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
.bd-chat-mic:hover {
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
box-shadow: 0 14px 34px rgba(47,107,255,0.4);
|
||||
}
|
||||
.bd-chat-mic.listening {
|
||||
background: linear-gradient(140deg, var(--bd-blue-deep), var(--bd-blue));
|
||||
box-shadow: 0 0 0 0 rgba(47,107,255,0.35);
|
||||
}
|
||||
.bd-chat-mic.processing {
|
||||
background: linear-gradient(140deg, var(--bd-orange), #ffb648);
|
||||
box-shadow: 0 10px 28px rgba(247,144,9,0.3);
|
||||
cursor: default;
|
||||
}
|
||||
/* 聆听扩散波纹 */
|
||||
.bd-mic-ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(47,107,255,0.4);
|
||||
animation: bdMicRing 1.5s ease-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.bd-mic-ring.r2 {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
@keyframes bdMicRing {
|
||||
0% { transform: scale(1); opacity: 0.8; }
|
||||
100% { transform: scale(1.7); opacity: 0; }
|
||||
}
|
||||
.bd-chat-voice-tip {
|
||||
font-size: 10.5px;
|
||||
color: #9fb0c6;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
/* 语音提问消息标记 */
|
||||
.bd-msg-voice-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-right: 8px;
|
||||
padding: 1px 7px;
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
border-radius: 10px;
|
||||
color: rgba(255,255,255,0.92);
|
||||
background: rgba(255,255,255,0.22);
|
||||
vertical-align: 1px;
|
||||
}
|
||||
/* 移动端/窄屏：消息宽度放开 */
|
||||
@media (max-width: 1100px) {
|
||||
.bd-msg { max-width: 94%; }
|
||||
|
||||
Reference in New Issue
Block a user