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>
36 lines
1.3 KiB
React
36 lines
1.3 KiB
React
const ddWaveCss = `
|
|
.dd-wave { display: inline-flex; align-items: center; gap: 3px; }
|
|
.dd-wave i { display: block; width: 3px; border-radius: 2px; background: currentColor; }
|
|
.dd-wave--active i { animation: dd-wave-bounce 0.9s var(--ease-in-out) infinite alternate; }
|
|
@keyframes dd-wave-bounce {
|
|
from { transform: scaleY(0.35); }
|
|
to { transform: scaleY(1); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dd-wave--active i { animation: none; }
|
|
}
|
|
`;
|
|
|
|
if (typeof document !== 'undefined' && !document.getElementById('dd-wave-css')) {
|
|
const s = document.createElement('style');
|
|
s.id = 'dd-wave-css';
|
|
s.textContent = ddWaveCss;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
const DD_WAVE_PATTERN = [0.3, 0.55, 0.85, 0.45, 0.7, 1, 0.4, 0.6, 0.25, 0.8, 0.5, 0.35];
|
|
|
|
export function Waveform({ bars = 12, active = false, height = 26, color = 'var(--accent)', style }) {
|
|
const items = [];
|
|
for (let i = 0; i < bars; i++) {
|
|
const h = Math.round(DD_WAVE_PATTERN[i % DD_WAVE_PATTERN.length] * height);
|
|
items.push(<i key={i} style={{ height: Math.max(4, h), animationDelay: `${(i % 6) * 0.07}s` }}></i>);
|
|
}
|
|
return (
|
|
<span className={`dd-wave${active ? ' dd-wave--active' : ''}`}
|
|
style={{ height, color, ...style }} aria-hidden="true">
|
|
{items}
|
|
</span>
|
|
);
|
|
}
|