修护大屏展示的bug

src/pages/Container/Driver/index.js

@@ -6,7 +6,7 @@ import DriverBack from "~/pages/Container/Driver/components/DriverBack";
 import Institution from "~/pages/Container/Institution/Dashboard";
 import Cockpit from "~/pages/Container/Supervision/Cockpit";
 import { getDriverToken, resolveDriverAuthParams } from "~/utils/resolveDriverAuthParams";
-import { safeApiCall } from "~/utils/handleApiResponse";
+import { getApiErrorMessage } from "~/utils/handleApiResponse";
 
 import "./index.less";
 
@@ -27,10 +27,26 @@ function DriverErrorPanel({ message }) {
   );
 }
 
+function resolveTerminalType(driverConfig, actionResult) {
+  const fromStore = Number(driverConfig);
+  if (fromStore === 1 || fromStore === 2) {
+    return fromStore;
+  }
+  if (actionResult) {
+    const fromAction = Number(actionResult.driverConfig ?? actionResult.data);
+    if (fromAction === 1 || fromAction === 2) {
+      return fromAction;
+    }
+  }
+  return null;
+}
+
 const Driver = (props) => {
   const authParams = useMemo(() => resolveDriverAuthParams(), []);
   const requestStartedRef = useRef(false);
+  const actionResultRef = useRef(null);
   const [pageError, setPageError] = useState("");
+  const [requestDone, setRequestDone] = useState(false);
   const { queryDriverConfig, driver } = props;
   const { queryDriverConfigLoading, driverConfig } = driver;
 
@@ -48,47 +64,46 @@ const Driver = (props) => {
           return;
         }
 
-        const res = await safeApiCall(
-          () => queryDriverConfig(),
-          {
-            defaultError: "终端类型获取失败，请稍后重试",
-            silent: true,
-            onFailure: setPageError,
-          },
-        );
-
-        if (!res) {
-          setPageError((prev) => prev || "终端类型获取失败，请稍后重试");
-          return;
-        }
-
-        const terminalType = Number(res.data);
-        if (terminalType !== 1 && terminalType !== 2) {
-          setPageError("终端类型无效，当前账号无权限访问此页面");
-        }
+        actionResultRef.current = await queryDriverConfig();
       }
       catch (error) {
         setPageError(error?.message || "页面加载失败，请稍后重试");
       }
+      finally {
+        setRequestDone(true);
+      }
     })();
   }, [queryDriverConfig]);
 
-  const terminalType = Number(driverConfig);
+  useEffect(() => {
+    if (!requestDone || queryDriverConfigLoading) {
+      return;
+    }
+
+    if (!authParams.token) {
+      setPageError("登录凭证获取失败，请重新从基座登录进入");
+      return;
+    }
+
+    const terminalType = resolveTerminalType(driverConfig, actionResultRef.current);
+    if (terminalType === 1 || terminalType === 2) {
+      setPageError("");
+      return;
+    }
+
+    setPageError(
+      getApiErrorMessage(actionResultRef.current, "终端类型获取失败，请重新从基座登录进入"),
+    );
+  }, [requestDone, queryDriverConfigLoading, driverConfig, authParams.token]);
+
+  const terminalType = resolveTerminalType(driverConfig, actionResultRef.current);
   const isInstitution = terminalType === 1;
   const isSupervision = terminalType === 2;
   const isValidTerminal = isInstitution || isSupervision;
   const hasToken = Boolean(authParams.token);
-  const showError = Boolean(pageError);
-  const showContent = hasToken && isValidTerminal && !showError;
-
-  useEffect(() => {
-    if (showError || queryDriverConfigLoading || !hasToken) {
-      return;
-    }
-    if (!isValidTerminal) {
-      setPageError("终端类型获取失败，请重新从基座登录进入");
-    }
-  }, [showError, queryDriverConfigLoading, hasToken, isValidTerminal]);
+  const isLoading = !requestDone || queryDriverConfigLoading;
+  const showError = requestDone && !queryDriverConfigLoading && Boolean(pageError);
+  const showContent = requestDone && !queryDriverConfigLoading && hasToken && isValidTerminal && !pageError;
 
   if (showError) {
     return (
@@ -100,7 +115,7 @@ const Driver = (props) => {
 
   return (
     <div className={`driver-container${isSupervision ? " driver-container--cockpit" : ""}`}>
-      <Skeleton active loading={queryDriverConfigLoading}>
+      <Skeleton active loading={isLoading}>
         <div className="driver-container-content">
           {showContent && isInstitution && <Institution {...props} />}
           {showContent && isSupervision && <Cockpit {...props} />}