增加版本号传入iframe

desktop-client/web/src/App.jsx

@@ -17,27 +17,14 @@ import HistoryPage from "./pages/History";
 import MainPage from "./pages/Download";
 import ConfigCenter from "./pages/ConfigCenter";
 import { useEffect, useState } from "react";
-import electronService from "./services/electronService";
-
-import { version } from "../package.json";
+import { fetchAppVersion } from "./utils/const";
 
 function App() {
   const [selectedTab, setSelectedTab] = useState("download");
-  const [appVersion, setAppVersion] = useState(version);
+  const [appVersion, setAppVersion] = useState("");
 
   useEffect(() => {
-    const fetchAppVersion = async () => {
-      try {
-        const realVersion = await electronService.getAppVersion();
-        if (realVersion) {
-          setAppVersion(realVersion);
-        }
-      } catch (error) {
-        console.error("获取应用版本号失败:", error);
-      }
-    };
-
-    fetchAppVersion();
+    fetchAppVersion().then((version) => setAppVersion(version));
   }, []);
 
   const tabMap = {
@@ -48,18 +35,18 @@ function App() {
   return (
     <div className="app">
       {/* <Router> */}
-        <TopHeader onTabChange={setSelectedTab} selectedTab={selectedTab} />
-        <div className="main-content flex-1">
-          {tabMap[selectedTab] || <MainPage />}
-          {/* <Routes>
+      <TopHeader onTabChange={setSelectedTab} selectedTab={selectedTab} />
+      <div className="main-content flex-1">
+        {tabMap[selectedTab] || <MainPage />}
+        {/* <Routes>
             <Route path="*" element={<Navigate replace to="/" />} />
             <Route path="/" element={<MainPage />} />
             <Route path="/history" element={<HistoryPage />} />
             <Route path="/config" element={<ConfigCenter />} />
           </Routes> */}
-          <div className="main-content-footer">当前版本号：v{appVersion}</div>
-        </div>
-        <ToastContainer style={{ top: "55px" }} />
+        <div className="main-content-footer">当前版本号：v{appVersion}</div>
+      </div>
+      <ToastContainer style={{ top: "55px" }} />
       {/* </Router> */}
     </div>
   );

desktop-client/web/src/components/ExternalWebpage.jsx

@@ -1,12 +1,14 @@
 import { useEffect, useRef, useState } from "react";
-// import electronService from "../services/electronService";
+import { fetchAppVersion } from "../utils/const";
+import electronService from "../services/electronService";
 
 const externalUrl = "https://jcaigc.cn/external-features";
 
 function ExternalWebpage() {
   const [iframeHeight, setIframeHeight] = useState(0);
-  // const [isAccessible, setIsAccessible] = useState(null);
+  const [isAccessible, setIsAccessible] = useState(null);
   const [themeConfig, setThemeConfig] = useState(null);
+  const [appVersion, setAppVersion] = useState("");
   const iframeRef = useRef(null);
 
   // 将主题配置同步到全局 CSS 变量
@@ -18,24 +20,25 @@ function ExternalWebpage() {
     }
   }, [themeConfig]);
 
-  // const checkAccessibility = async () => {
-  //   try {
-  //     // 使用Electron提供的API来检测URL是否可访问（绕过CORS限制）
-  //     const result = await electronService.checkUrlAccess(externalUrl);
-  //     setIsAccessible(result.accessible);
-  //   } catch (error) {
-  //     // 请求失败，表示不可访问
-  //     setIsAccessible(false);
-  //     console.error("无法访问外部网页:", error);
-  //   }
-  // };
+  const checkAccessibility = async () => {
+    try {
+      // 使用Electron提供的API来检测URL是否可访问（绕过CORS限制）
+      const result = await electronService.checkUrlAccess(externalUrl);
+      setIsAccessible(result.accessible);
+    } catch (error) {
+      // 请求失败，表示不可访问
+      setIsAccessible(false);
+      console.error("无法访问外部网页:", error);
+    }
+  };
 
-  // useEffect(() => {
-  //   checkAccessibility();
-  // }, []);
+  useEffect(() => {
+    checkAccessibility();
+  }, []);
 
   // 监听子页面发来的配置消息
   useEffect(() => {
+    fetchAppVersion().then((version) => setAppVersion(version));
     const handleMessage = (event) => {
       // 安全校验：只接受来自指定域名的消息
       if (event.origin !== new URL(externalUrl).origin) return;
@@ -57,11 +60,11 @@ function ExternalWebpage() {
     return () => window.removeEventListener("message", handleMessage);
   }, []);
 
-  // iframe 加载完成后，通知子页面父页面已就绪
+  // iframe 加载完成后，通知子页面父页面已就绪，并携带版本号
   const handleIframeLoad = () => {
     if (iframeRef.current?.contentWindow) {
       iframeRef.current.contentWindow.postMessage(
-        { type: "parentReady" },
+        { type: "parentReady", appVersion },
         new URL(externalUrl).origin,
       );
     }
@@ -70,17 +73,19 @@ function ExternalWebpage() {
   return (
     <section className="module">
       <div className="external-webpage-container">
-        <iframe
-          ref={iframeRef}
-          src={externalUrl}
-          title="External Webpage"
-          className="external-webpage"
-          width="100%"
-          height={iframeHeight + "px"}
-          allowFullScreen
-          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-          onLoad={handleIframeLoad}
-        />
+        {isAccessible && (
+          <iframe
+            ref={iframeRef}
+            src={externalUrl}
+            title="External Webpage"
+            className="external-webpage"
+            width="100%"
+            height={iframeHeight + "px"}
+            allowFullScreen
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+            onLoad={handleIframeLoad}
+          />
+        )}
       </div>
     </section>
   );

desktop-client/web/src/utils/const.tsx

@@ -1,3 +1,20 @@
-export const THEME_COLOR = '#5c89ff'; // --primary-l
+import electronService from "../services/electronService";
 
-export const G_EmptyStr = '-';
+import { version } from "../../package.json";
+
+export const THEME_COLOR = "#5c89ff"; // --primary-l
+
+export const G_EmptyStr = "-";
+
+export const fetchAppVersion = async () => {
+    let appVersion = version;
+  try {
+    const realVersion = await electronService.getAppVersion();
+    if (realVersion) {
+      return realVersion;
+    }
+  } catch (error) {
+    console.error("获取应用版本号失败:", error);
+  }
+  return appVersion;
+};