feat: 增强弱网与断线场景下的移动端交互反馈

web/src/components/MicButton.tsx

@@ -8,9 +8,13 @@ interface MicButtonProps {
 
 export function MicButton({ onStart, onStop }: MicButtonProps) {
 	const connected = useAppStore((s) => s.connectionStatus === "connected");
+	const micReady = useAppStore((s) => s.micReady);
 	const recording = useAppStore((s) => s.recording);
 	const pendingStart = useAppStore((s) => s.pendingStart);
-	const isActive = recording || pendingStart;
+	const stopping = useAppStore((s) => s.stopping);
+	const weakNetwork = useAppStore((s) => s.weakNetwork);
+	const isActive = recording || pendingStart || stopping;
+	const disabled = !connected || !micReady || stopping;
 
 	const handlePointerDown = useCallback(
 		(e: React.PointerEvent<HTMLButtonElement>) => {
@@ -46,6 +50,8 @@ export function MicButton({ onStart, onStop }: MicButtonProps) {
 		"cursor-not-allowed border-edge bg-linear-to-br from-surface-hover to-surface text-fg-secondary opacity-30 shadow-[0_2px_12px_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.04)]";
 	const activeClasses =
 		"animate-mic-breathe scale-[1.06] border-accent-hover bg-accent text-white shadow-[0_0_32px_rgba(99,102,241,0.35),0_0_80px_rgba(99,102,241,0.2)]";
+	const weakClasses =
+		"border-amber-400 bg-linear-to-br from-amber-400/15 to-surface text-amber-200 shadow-[0_0_22px_rgba(251,191,36,0.28)]";
 	const idleClasses =
 		"border-edge bg-linear-to-br from-surface-hover to-surface text-fg-secondary shadow-[0_2px_12px_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.04)]";
 
@@ -54,13 +60,15 @@ export function MicButton({ onStart, onStop }: MicButtonProps) {
 			<div className="relative flex touch-none items-center justify-center">
 				<button
 					type="button"
-					disabled={!connected}
+					disabled={disabled}
 					className={`relative z-1 flex size-24 cursor-pointer touch-none select-none items-center justify-center rounded-full border-2 transition-all duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] ${
-						!connected
+						disabled
 							? disabledClasses
-							: isActive
-								? activeClasses
-								: idleClasses
+							: weakNetwork
+								? weakClasses
+								: isActive
+									? activeClasses
+									: idleClasses
 					}`}
 					onPointerDown={handlePointerDown}
 					onPointerUp={handlePointerUp}
@@ -98,7 +106,17 @@ export function MicButton({ onStart, onStop }: MicButtonProps) {
 					))}
 				</div>
 			</div>
-			<p className="font-medium text-fg-dim text-sm">{"按住说话"}</p>
+			<p className="font-medium text-fg-dim text-sm">
+				{!micReady
+					? "请先准备麦克风"
+					: !connected
+						? "连接中断，等待重连"
+						: stopping
+							? "收尾中…"
+							: weakNetwork
+								? "网络波动，已启用缓冲"
+								: "按住说话"}
+			</p>
 		</section>
 	);
 }