Replace firame to wujie

web/global.d.ts

@@ -0,0 +1,25 @@
+interface Window {
+  // 是否存在无界
+  __POWERED_BY_WUJIE__?: boolean;
+  // 子应用公共加载路径
+  __WUJIE_PUBLIC_PATH__: string;
+  // 原生的querySelector
+  __WUJIE_RAW_DOCUMENT_QUERY_SELECTOR__: typeof Document.prototype.querySelector;
+  // 原生的querySelectorAll
+  __WUJIE_RAW_DOCUMENT_QUERY_SELECTOR_ALL__: typeof Document.prototype.querySelectorAll;
+  // 原生的window对象
+  __WUJIE_RAW_WINDOW__: Window;
+  // 子应用沙盒实例
+  __WUJIE: WuJie;
+  // 子应用mount函数
+  __WUJIE_MOUNT: () => void;
+  // 子应用unmount函数
+  __WUJIE_UNMOUNT: () => void;
+  // 注入对象
+  $wujie: {
+    bus: EventBus;
+    shadowRoot?: ShadowRoot;
+    props?: { [key: string]: string };
+    location?: object;
+  };
+}

web/package.json

@@ -34,7 +34,8 @@
     "swiper": "^11.0.7",
     "swiper-react": "^1.0.0",
     "vite-plugin-cdn-import": "^0.3.5",
-    "vite-plugin-compression": "^0.5.1"
+    "vite-plugin-compression": "^0.5.1",
+    "wujie-react": "^1.0.22"
   },
   "devDependencies": {
     "@sj-distributor/eslint-plugin-react": "^0.7.1",

web/public/appsetting.json

@@ -2,5 +2,5 @@
   "serverUrl": "https://testsmarties.yamimeal.ca",
   "tokenKey": "token",
   "userNameKey": "userName",
-  "cameraAIBackstageDomain": ""
+  "cameraAIBackstageDomain": "http://localhost:5173/"
 }

web/src/icon/main/index.tsx

@@ -207,3 +207,69 @@ export const LogoutIcon = () => {
     </svg>
   );
 };
+
+export const LoadingSvg = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24px"
+      height="30px"
+      viewBox="0 0 24 30"
+    >
+      <rect x="0" y="13" width="4" height="5" fill="#909090">
+        <animate
+          attributeName="height"
+          attributeType="XML"
+          values="5;21;5"
+          begin="0s"
+          dur="0.6s"
+          repeatCount="indefinite"
+        ></animate>
+        <animate
+          attributeName="y"
+          attributeType="XML"
+          values="13; 5; 13"
+          begin="0s"
+          dur="0.6s"
+          repeatCount="indefinite"
+        ></animate>
+      </rect>
+      <rect x="10" y="13" width="4" height="5" fill="#909090">
+        <animate
+          attributeName="height"
+          attributeType="XML"
+          values="5;21;5"
+          begin="0.15s"
+          dur="0.6s"
+          repeatCount="indefinite"
+        ></animate>
+        <animate
+          attributeName="y"
+          attributeType="XML"
+          values="13; 5; 13"
+          begin="0.15s"
+          dur="0.6s"
+          repeatCount="indefinite"
+        ></animate>
+      </rect>
+      <rect x="20" y="13" width="4" height="5" fill="#909090">
+        <animate
+          attributeName="height"
+          attributeType="XML"
+          values="5;21;5"
+          begin="0.3s"
+          dur="0.6s"
+          repeatCount="indefinite"
+        ></animate>
+        <animate
+          attributeName="y"
+          attributeType="XML"
+          values="13; 5; 13"
+          begin="0.3s"
+          dur="0.6s"
+          repeatCount="indefinite"
+        ></animate>
+      </rect>
+    </svg>
+  );
+};

web/src/pages/camera-backstage/index.tsx

@@ -0,0 +1,76 @@
+import { useAuth } from "@/hooks/use-auth";
+import { LoadingSvg } from "@/icon/main";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import WujieReact from "wujie-react";
+import { None } from "../none";
+
+export const CameraBackstage = () => {
+  const { bus } = WujieReact;
+
+  const navigate = useNavigate();
+
+  const { signOut, pagePermission, isGetPermission } = useAuth();
+
+  const tokenKey = (window as any).appsettings.tokenKey;
+
+  const userNameKey = (window as any).appsettings.userNameKey;
+
+  const [preloading, setPreLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const handleStorageChange = () => {
+      try {
+        const newToken = localStorage.getItem(tokenKey);
+
+        const newUserName = localStorage.getItem(userNameKey);
+
+        bus.$emit("token_refresh", newToken, newUserName);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+
+    return () => window.removeEventListener("storage", handleStorageChange);
+  }, []);
+
+  return (
+    <div>
+      {isGetPermission ? (
+        pagePermission.canSwitchCameraAiBackend ? (
+          <>
+            {preloading && (
+              <div className="absolute inset-0 flex justify-center items-center z-10 bg-white">
+                <LoadingSvg />
+              </div>
+            )}
+
+            <WujieReact
+              width="100%"
+              height="100%"
+              name="CameraBackstage"
+              url={(window as any).appsettings.cameraAIBackstageDomain}
+              sync={true}
+              alive={true}
+              fiber={true}
+              activated={() => setPreLoading(false)}
+              props={{
+                userName: localStorage.getItem(userNameKey),
+                token: localStorage.getItem(tokenKey),
+                signOut: () => signOut(() => navigate("/login")),
+              }}
+            />
+          </>
+        ) : (
+          <None />
+        )
+      ) : (
+        <div className="absolute inset-0 flex justify-center items-center z-10 bg-white">
+          <LoadingSvg />
+        </div>
+      )}
+    </div>
+  );
+};

web/src/pages/login/hook.ts

@@ -1,5 +1,5 @@
 import { useDebounceFn } from "ahooks";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { IUserInfo } from "@/dtos";
 import { useAuth } from "@/hooks/use-auth";
@@ -74,24 +74,35 @@ export const useAction = () => {
               })
               .catch(() => {
                 hanldeNoPermission();
+              })
+              .finally(() => {
+                setLoginLoading(false);
               });
+          } else {
+            setLoginLoading(false);
           }
         })
         .catch(() => {
+          setLoginLoading(false);
+
           message.error("登录失败，请重试");
         });
     } else {
       message.warning("请输入正确的用户名和密码");
     }
-
-    setTimeout(() => {
-      setLoginLoading(false);
-    }, 1000);
   };
 
   const { run: handleOnLogin } = useDebounceFn(onLogin, {
     wait: 300,
   });
 
+  useEffect(() => {
+    const token = localStorage.getItem((window as any).appsettings?.tokenKey);
+
+    if (token) {
+      signIn(token, userInfo.userName);
+    }
+  }, []);
+
   return { userInfo, loginLoading, updateUserInfo, handleOnLogin };
 };

web/src/pages/main/hook.ts

@@ -148,23 +148,7 @@ export const useAction = () => {
 
   const jumpToBackstage = () => {
     if (pagePermission.canSwitchCameraAiBackend) {
-      var myIframe = document.getElementById("myIframe") as HTMLIFrameElement;
-
-      if (myIframe && myIframe.contentWindow) {
-        const token = localStorage.getItem(
-          (window as any).appsettings?.tokenKey
-        );
-
-        (myIframe as any).contentWindow.postMessage(
-          token,
-          (window as any).appsettings?.cameraAIBackstageDomain
-        );
-
-        window.open(
-          (window as any).appsettings?.cameraAIBackstageDomain,
-          "_blank"
-        );
-      }
+      window.open(`/backstage`, "_blank", "noopener,noreferrer");
     } else {
       message.warning("暫無權限切換後台");
     }

web/src/pages/main/index.tsx

@@ -392,11 +392,6 @@ export const Main = () => {
                         <span className="text-sm">{item.name}</span>
                       </div>
                     ))}
-                    <iframe
-                      id="myIframe"
-                      src={(window as any).appsettings?.cameraAIBackstageDomain}
-                      style={{ display: "none" }}
-                    />
                   </div>
                 </div>
               )}

web/src/routes/index.tsx

@@ -23,6 +23,7 @@ import { ReplayList } from "@/pages/replay/component/replay-list";
 import { Warning } from "@/pages/warning";
 import { Equipment } from "@/pages/warning/component/equipment";
 import { WarningList } from "@/pages/warning/component/warning-list";
+import { CameraBackstage } from "@/pages/camera-backstage";
 
 export interface IRouteItem {
   path: string;
@@ -138,6 +139,14 @@ export const Router = () => {
       <Routes>
         <Route path="/login" element={<Login />} />
         <Route path="*" element={<Navigate to={"/home"} />} />
+        <Route
+          path="/backstage"
+          element={
+            <AuthStatus>
+              <CameraBackstage />
+            </AuthStatus>
+          }
+        />
         <Route
           element={
             <AuthStatus>