feat: 历史列表添加交错滑入动画

- renderHistory 改为索引循环，设置 CSS 变量 --i 实现交错延迟
- 最大交错层级限制为 10（400ms），避免过长等待

web/app.ts

@@ -128,7 +128,7 @@ function connectWS(): void {
 		micBtn.disabled = false;
 	};
 	ws.onmessage = (e: MessageEvent) => handleServerMsg(e.data);
-ws.onclose = () => {
+	ws.onclose = () => {
 		state.connected = false;
 		state.ws = null;
 		micBtn.disabled = true;
@@ -140,7 +140,7 @@ ws.onclose = () => {
 		}
 		setStatus("disconnected", "已断开");
 		scheduleReconnect();
-};
+	};
 	ws.onerror = () => ws.close();
 	state.ws = ws;
 }
@@ -201,9 +201,12 @@ function showToast(msg: string): void {
 	const toast = q("#toast");
 	toast.textContent = msg;
 	toast.classList.add("show");
-	const timer = (toast as HTMLElement & { _timer?: ReturnType<typeof setTimeout> })._timer;
+	const timer = (
+		toast as HTMLElement & { _timer?: ReturnType<typeof setTimeout> }
+	)._timer;
 	if (timer) clearTimeout(timer);
-	(toast as HTMLElement & { _timer?: ReturnType<typeof setTimeout> })._timer = setTimeout(() => {
+	(toast as HTMLElement & { _timer?: ReturnType<typeof setTimeout> })._timer =
+		setTimeout(() => {
 			toast.classList.remove("show");
 		}, 2000);
 }
@@ -331,8 +334,10 @@ function renderHistory(): void {
 		return;
 	}
 	(historyEmpty as HTMLElement).style.display = "none";
-	for (const item of items) {
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
 		const li = document.createElement("li");
+		li.style.setProperty("--i", String(Math.min(i, 10)));
 		li.innerHTML =
 			`<span class="hist-text">${escapeHtml(item.text)}</span>` +
 			`<span class="hist-time">${formatTime(item.ts)}</span>`;