fix(web): 兼容低版本 chrome 浏览器，兼容 360 极速浏览器 (#1333)

### 兼容低版本 chrome 浏览器，兼容 360 极速浏览器国内360用户较多，但antd自5.0版本以后，默认不兼容低版本Chrome，360极速模式、搜狗浏览器，主要原因是 :where 选择器。本PR增加了样式兼容，主要包括： #### :where 选择器 #### CSS 逻辑属性参考： https://ant.design/docs/react/compatible-style-cn#styleprovider ant-design/pro-components#6065 ant-design/pro-components#6195 当前在360浏览器展示如下： <img width="1092" alt="1719889823356" src="https://github.com/PKUHPC/SCOW/assets/25954437/c3261d86-795c-4c14-a18c-d54a645e80d9"> 修改后在360展示情况如下： <img width="750" alt="1719826959249" src="https://github.com/PKUHPC/XSCOW/assets/25954437/53a0bf66-2d49-4289-82ad-155ad3fc3568">
PKUHPC · Jul 5, 2024 · ca9bf27 · ca9bf27
1 parent 67cc41c
commit ca9bf27
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 46 deletions.
diff --git a/.changeset/tiny-ears-arrive.md b/.changeset/tiny-ears-arrive.md
@@ -0,0 +1,7 @@
+---
+"@scow/portal-web": patch
+"@scow/mis-web": patch
+"@scow/ai": patch
+---
+
+兼容低版本 chrome 浏览器，兼容 360 极速浏览器
diff --git a/apps/ai/src/app/clientLayout.tsx b/apps/ai/src/app/clientLayout.tsx
@@ -12,6 +12,7 @@
 
 "use client";
 
+import { legacyLogicalPropertiesTransformer, StyleProvider } from "@ant-design/cssinjs";
 import { GlobalStyle } from "@scow/lib-web/build/layouts/globalStyle";
 import { usePathname } from "next/navigation";
 import { ErrorBoundary } from "src/components/ErrorBoundary";
@@ -48,34 +49,36 @@ export function ClientLayout(props: {
     ?? primaryColor?.defaultColor ?? uiConfig.defaultPrimaryColor;
 
   return (
-    <StyledComponentsRegistry>
-      <AntdStyleRegistry>
-        <body>
-          {
-            useConfig.isLoading ?
-              <Loading />
-              : (
-                <DarkModeProvider initial={props.initialDark}>
-                  <AntdConfigProvider color={color}>
-                    <GlobalStyle />
-                    <TopProgressBar />
-                    <ErrorBoundary Component={RootErrorContent} pathname={pathname ?? ""}>
-                      <UiConfigContext.Provider
-                        value={{
-                          hostname,
-                          uiConfig,
-                        }}
-                      >
-                        {props.children}
-                      </UiConfigContext.Provider>
-                    </ErrorBoundary>
-                  </AntdConfigProvider>
-                </DarkModeProvider>
-              )
-          }
+    <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
+      <StyledComponentsRegistry>
+        <AntdStyleRegistry>
+          <body>
+            {
+              useConfig.isLoading ?
+                <Loading />
+                : (
+                  <DarkModeProvider initial={props.initialDark}>
+                    <AntdConfigProvider color={color}>
+                      <GlobalStyle />
+                      <TopProgressBar />
+                      <ErrorBoundary Component={RootErrorContent} pathname={pathname ?? ""}>
+                        <UiConfigContext.Provider
+                          value={{
+                            hostname,
+                            uiConfig,
+                          }}
+                        >
+                          {props.children}
+                        </UiConfigContext.Provider>
+                      </ErrorBoundary>
+                    </AntdConfigProvider>
+                  </DarkModeProvider>
+                )
+            }
 
-        </body>
-      </AntdStyleRegistry>
-    </StyledComponentsRegistry>
+          </body>
+        </AntdStyleRegistry>
+      </StyledComponentsRegistry>
+    </StyleProvider>
   );
 }
diff --git a/libs/web/package.json b/libs/web/package.json
@@ -34,6 +34,7 @@
     "react-dom": ">=18.2.0",
     "react-is": "18.3.1",
     "nookies": "2.5.2",
+    "@ant-design/cssinjs": "1.21.0",
     "react-async": "10.0.1"
   },
   "devDependencies": {

diff --git a/libs/web/src/layouts/AntdConfigProvider.tsx b/libs/web/src/layouts/AntdConfigProvider.tsx
@@ -12,6 +12,7 @@
 
 import "dayjs/locale/zh-cn";
 
+import { legacyLogicalPropertiesTransformer, StyleProvider } from "@ant-design/cssinjs";
 import { App, ConfigProvider, theme } from "antd";
 import enUSlocale from "antd/locale/en_US";
 import zhCNlocale from "antd/locale/zh_CN";
@@ -40,15 +41,17 @@ export const AntdConfigProvider: React.FC<Props> = ({ children, color, locale })
   const { dark } = useDarkMode();
 
   return (
-    <ConfigProvider
-      locale={locale === "zh_cn" ? zhCNlocale : enUSlocale}
-      theme={{ token: { colorPrimary: color, colorInfo: color }, algorithm: dark ? theme.darkAlgorithm : undefined }}
-    >
-      <StyledComponentsThemeProvider color={color} locale={locale}>
-        <App>
-          {children}
-        </App>
-      </StyledComponentsThemeProvider>
-    </ConfigProvider>
+    <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
+      <ConfigProvider
+        locale={locale === "zh_cn" ? zhCNlocale : enUSlocale}
+        theme={{ token: { colorPrimary: color, colorInfo: color }, algorithm: dark ? theme.darkAlgorithm : undefined }}
+      >
+        <StyledComponentsThemeProvider color={color} locale={locale}>
+          <App>
+            {children}
+          </App>
+        </StyledComponentsThemeProvider>
+      </ConfigProvider>
+    </StyleProvider>
   );
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml