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>
55 lines
2.1 KiB
React
55 lines
2.1 KiB
React
import { Waveform } from './Waveform';
|
|
|
|
const ddMicBarCss = `
|
|
.dd-micbar {
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
width: 100%; height: var(--control-xl); border: none; cursor: pointer;
|
|
border-radius: var(--radius-full);
|
|
font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold);
|
|
user-select: none; -webkit-user-select: none; touch-action: none;
|
|
transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
|
|
}
|
|
.dd-micbar--idle { background: var(--accent); color: var(--text-on-accent); }
|
|
.dd-micbar--idle:active { background: var(--accent-press); }
|
|
.dd-micbar--recording { background: var(--positive); color: #fff; }
|
|
.dd-micbar--disabled { background: var(--surface-3); color: var(--text-3); cursor: default; }
|
|
.dd-micbar--quota { background: var(--warning); color: #fff; }
|
|
`;
|
|
|
|
if (typeof document !== 'undefined' && !document.getElementById('dd-micbar-css')) {
|
|
const s = document.createElement('style');
|
|
s.id = 'dd-micbar-css';
|
|
s.textContent = ddMicBarCss;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
function DdMicIcon({ size = 20 }) {
|
|
return (
|
|
<svg width={size} height={size} 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>
|
|
);
|
|
}
|
|
|
|
const DD_MICBAR_LABELS = {
|
|
idle: '按住说话',
|
|
recording: '松开完成 · 上滑取消',
|
|
disabled: '打开 dudu App 登录',
|
|
quota: '今日试用已用完，去购买时长',
|
|
};
|
|
|
|
export function MicBar({ state = 'idle', label, ...rest }) {
|
|
const text = label || DD_MICBAR_LABELS[state] || DD_MICBAR_LABELS.idle;
|
|
return (
|
|
<button type="button" className={`dd-micbar dd-micbar--${state}`} {...rest}>
|
|
{state === 'recording'
|
|
? <Waveform active bars={9} height={18} color="rgba(255,255,255,0.95)" />
|
|
: <DdMicIcon />}
|
|
<span>{text}</span>
|
|
</button>
|
|
);
|
|
}
|