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

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

web/app.ts

@@ -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>`;