feat: implement automatic call refresh on CallsPage

- Added a refreshCalls function to appStore to fetch updated call data.
- Integrated useEffect in CallsPage to periodically refresh calls every 2 seconds and on visibility change.

apps/desktop/src/pages/CallsPage.tsx

@@ -1,10 +1,34 @@
+import { useEffect } from "react";
 import { CallTable } from "../components/CallTable";
 import { PageContent } from "../components/layout/PageContent";
 import { appStore, useAppStore } from "../store/appStore";
 import styles from "./CallsPage.module.scss";
 
+const CALL_REFRESH_INTERVAL_MS = 2_000;
+
 export function CallsPage() {
   const { calls } = useAppStore();
+
+  useEffect(() => {
+    let disposed = false;
+    const refreshCalls = () => {
+      if (!disposed && document.visibilityState === "visible") {
+        void appStore.refreshCalls();
+      }
+    };
+
+    refreshCalls();
+    const interval = window.setInterval(refreshCalls, CALL_REFRESH_INTERVAL_MS);
+    window.addEventListener("focus", refreshCalls);
+    document.addEventListener("visibilitychange", refreshCalls);
+    return () => {
+      disposed = true;
+      window.clearInterval(interval);
+      window.removeEventListener("focus", refreshCalls);
+      document.removeEventListener("visibilitychange", refreshCalls);
+    };
+  }, []);
+
   const content = <div className={styles.page}><CallTable calls={calls} onDetails={(call) => void appStore.openCallDetails(call.call_id)} /></div>;
   return <PageContent fixed title={t("调用")} contentClassName={styles.pageContent} sections={[{ key: "calls", estimatedHeight: 720, content }]} />;
 }

apps/desktop/src/store/appStore.ts

@@ -177,6 +177,14 @@ export const appStore = {
     }
   },
 
+  async refreshCalls() {
+    try {
+      update({ calls: await api.calls() });
+    } catch (cause) {
+      update({ error: cause instanceof Error ? cause.message : String(cause) });
+    }
+  },
+
   async openCallDetails(callId: string) {
     await perform(() => api.openCallDetails(callId));
   },