From ca9bf2746793c3f5e68b0cd9db9b4bdf92e0baab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BD=95=E7=AB=A5=E5=B4=87?= <792998983@qq.com> Date: Fri, 5 Jul 2024 18:13:23 +0800 Subject: [PATCH] =?UTF-8?q?fix(web):=20=E5=85=BC=E5=AE=B9=E4=BD=8E?= =?UTF-8?q?=E7=89=88=E6=9C=AC=20chrome=20=E6=B5=8F=E8=A7=88=E5=99=A8?= =?UTF-8?q?=EF=BC=8C=E5=85=BC=E5=AE=B9=20360=20=E6=9E=81=E9=80=9F=E6=B5=8F?= =?UTF-8?q?=E8=A7=88=E5=99=A8=20(#1333)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 兼容低版本 chrome 浏览器，兼容 360 极速浏览器 国内360用户较多，但antd自5.0版本以后，默认不兼容低版本Chrome，360极速模式、搜狗浏览器，主要原因是 :where 选择器。本PR增加了样式兼容，主要包括： #### :where 选择器 #### CSS 逻辑属性 参考： https://ant.design/docs/react/compatible-style-cn#styleprovider https://github.com/ant-design/pro-components/issues/6065 https://github.com/ant-design/pro-components/issues/6195 当前在360浏览器展示如下： 1719889823356 修改后在360展示情况如下： 1719826959249 --- .changeset/tiny-ears-arrive.md | 7 +++ apps/ai/src/app/clientLayout.tsx | 59 +++++++++++---------- libs/web/package.json | 1 + libs/web/src/layouts/AntdConfigProvider.tsx | 23 ++++---- pnpm-lock.yaml | 14 +++-- 5 files changed, 58 insertions(+), 46 deletions(-) create mode 100644 .changeset/tiny-ears-arrive.md diff --git a/.changeset/tiny-ears-arrive.md b/.changeset/tiny-ears-arrive.md new file mode 100644 index 0000000000..4141cf0938 --- /dev/null +++ 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 index be46d79506..d75d6251d5 100644 --- 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 ( - - - - { - useConfig.isLoading ? - - : ( - - - - - - - {props.children} - - - - - ) - } + + + + + { + useConfig.isLoading ? + + : ( + + + + + + + {props.children} + + + + + ) + } - - - + + + + ); } diff --git a/libs/web/package.json b/libs/web/package.json index c367b8113a..1728650e11 100644 --- 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 index a76eb4a471..e2849a7f71 100644 --- 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 = ({ children, color, locale }) const { dark } = useDarkMode(); return ( - - - - {children} - - - + + + + + {children} + + + + ); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4e2e4821cd..38f2575286 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1548,6 +1548,9 @@ importers: libs/web: dependencies: + '@ant-design/cssinjs': + specifier: 1.21.0 + version: 1.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@ddadaal/tsgrpc-client': specifier: 0.17.7 version: 0.17.7(@grpc/grpc-js@1.10.9) @@ -10985,9 +10988,6 @@ packages: peerDependencies: postcss: ^8.4.31 - stylis@4.3.1: - resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==} - stylis@4.3.2: resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} @@ -12097,15 +12097,15 @@ snapshots: '@ant-design/cssinjs@1.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.4 + '@babel/runtime': 7.24.7 '@emotion/hash': 0.8.0 '@emotion/unitless': 0.7.5 classnames: 2.5.1 csstype: 3.1.3 - rc-util: 5.39.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + rc-util: 5.43.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - stylis: 4.3.1 + stylis: 4.3.2 '@ant-design/icons-svg@4.4.2': {} @@ -24463,8 +24463,6 @@ snapshots: postcss: 8.4.38 postcss-selector-parser: 6.0.16 - stylis@4.3.1: {} - stylis@4.3.2: {} superjson@2.2.1: