wangjia
40760aa884
- server：Go 网关（WS 流式识别中继/计费配额/微信登录支付 mock/反馈/埋点），gummy provider 已真实联调 - desktop：Tauri 2（全局快捷键 push-to-talk/浮层/托盘/设置/登录购买/反馈/首启引导） - android：Compose 主 App + IME（键盘内录音直传） - ios：App + 键盘扩展（1A spike 实证键盘内不可录音，走 deep link 听写） - design/design-pipeline：设计系统 + token 导出 iOS/Android 主题 - doc：前后端设计文档（HTML）；web：官网宣传页；todo：任务看板 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
59 lines
2.1 KiB
React
59 lines
2.1 KiB
React
import { Waveform } from './Waveform';
|
|
|
|
const ddOverlayCss = `
|
|
.dd-overlay {
|
|
box-sizing: border-box; width: 340px;
|
|
background: var(--overlay-bg); color: var(--overlay-text);
|
|
border-radius: var(--radius-lg); padding: 14px 18px;
|
|
box-shadow: var(--shadow-overlay);
|
|
font-family: var(--font-sans);
|
|
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.dd-overlay__status {
|
|
display: flex; align-items: center; gap: 8px;
|
|
color: var(--overlay-text-2); font-size: var(--text-base); margin-top: 8px;
|
|
}
|
|
.dd-overlay__text { font-size: var(--text-md); line-height: 1.6; margin-top: 8px; min-height: 24px; }
|
|
.dd-overlay__text .dd-partial { color: var(--overlay-text-2); }
|
|
.dd-overlay__hint { font-size: 11px; color: var(--overlay-text-3); margin-top: 8px; text-align: right; }
|
|
`;
|
|
|
|
if (typeof document !== 'undefined' && !document.getElementById('dd-overlay-css')) {
|
|
const s = document.createElement('style');
|
|
s.id = 'dd-overlay-css';
|
|
s.textContent = ddOverlayCss;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
export function RecognitionOverlay({
|
|
state = 'listening',
|
|
finalText = '',
|
|
partialText = '',
|
|
hint = '松开 ⌘⇧Space 完成输入',
|
|
width = 340,
|
|
style,
|
|
}) {
|
|
return (
|
|
<div className="dd-overlay" style={{ width, ...style }} role="status">
|
|
<Waveform active bars={12} height={24} color="#7C9BFF" />
|
|
{state === 'listening' ? (
|
|
<div className="dd-overlay__status">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path>
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
|
|
<line x1="12" x2="12" y1="19" y2="22"></line>
|
|
</svg>
|
|
<span>聆听中…</span>
|
|
</div>
|
|
) : (
|
|
<div className="dd-overlay__text">
|
|
{finalText}
|
|
{partialText ? <span className="dd-partial">{partialText}</span> : null}
|
|
</div>
|
|
)}
|
|
<div className="dd-overlay__hint">{hint}</div>
|
|
</div>
|
|
);
|
|
}
|