瀏覽代碼

refactor: 移除 ConfigProvider 全局 borderRadius 配置

- 删除 theme.token.borderRadius 全局设置,解决 Tooltip/Dropdown 箭头渲染成方块的问题
- 主题圆角改为通过 global.scss 统一管理,避免影响箭头等组件
- 简化 ConfigProvider 配置,仅保留 locale/getPopupContainer/button 必要配置

修复 Ant Design 5.x CSS-in-JS 全局 borderRadius 影响箭头渲染的问题
Ryuiso 1 月之前
父節點
當前提交
27d70ce052
共有 1 個文件被更改,包括 7 次插入97 次删除
  1. 7 97
      jk-rag-platform/src/App.tsx

+ 7 - 97
jk-rag-platform/src/App.tsx

@@ -1,111 +1,21 @@
 import * as React from 'react';
 import { RouterProvider } from 'react-router-dom';
-import {
-    ConfigProvider as AntdConfigProvider,
-    App as AntdApp,
-    message,
-    notification,
-} from 'antd';
+import { App as AntdApp, ConfigProvider } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
-// import router from '@/router';
-import AppRouter from '@/router'
-interface ConfigProviderProps {
-    children: React.ReactNode,
-}
-
-// Ant-Design全局化配置
-const ConfigProvider: React.FC<ConfigProviderProps> = (props: ConfigProviderProps) => {
-    function getDesignToken() {
-        // 获取元素
-        const root = document.getElementById('root');
-        // 获取元素计算样式
-        const styles = getComputedStyle(root!);
-        // 获取Ant-Design主题-属性
-        const colorPrimary = styles.getPropertyValue('--primary-color');
-        const colorTextBase = styles.getPropertyValue('--text-color');
-        const borderRadiusArray = styles.getPropertyValue('--border-radius').match(/\d+/);
-
-        return {
-            colorPrimary: colorPrimary || undefined,
-            colorTextBase: colorTextBase || undefined,
-            borderRadius: borderRadiusArray ? Number(borderRadiusArray[0]) : undefined,
-        }
-    }
-
-    const designToken = getDesignToken();
+import AppRouter from '@/router';
 
+const App: React.FC = () => {
     return (
-        <AntdConfigProvider
-            // 组件-中文
+        <ConfigProvider
             locale={zhCN}
-            // 警告等级
-            warning={{
-                strict: true,// 严格模式
-            }}
-            // 渲染父节点到body上
             getPopupContainer={() => document.body}
-            // 设置主题
-            theme={{
-                token: {
-                    colorPrimary: designToken.colorPrimary,// 主题颜色
-                    colorTextBase: designToken.colorTextBase,// 文本颜色
-                    borderRadius: designToken.borderRadius,// 圆角大小
-                },
-                components: {
-                    Table: {
-                        headerBg: '#F7F8FA',
-                        headerSplitColor: 'transparent',
-                    },
-                    // 按钮组件主题配置
-                    Button: {
-                        colorPrimary: '#005D80',        // primary-color
-                        colorPrimaryHover: '#007A99',   // primary-light
-                        colorPrimaryActive: '#004060',  // primary-dark
-                        colorTextLightSolid: '#FFFFFF', // 按钮文字颜色
-                    },
-                },
-            }}
-            /* 组件配置 */
-            button={{
-                autoInsertSpace: false,// 移除按钮两个汉字之间的空格
-            }}
+            button={{ autoInsertSpace: false }}
         >
-            {props.children}
-        </AntdConfigProvider>
-    );
-}
-
-const App: React.FC = () => {
-    // 全局提示
-    message.config({
-        duration: 2,// 2秒自动关闭
-        maxCount: 1,// 最多显示1条
-    });
-
-    // 通知提醒
-    notification.config({
-        duration: 2,// 2秒自动关闭
-        maxCount: 1,// 最多显示1条
-    });
-
-    // 全局配置
-    AntdConfigProvider.config({
-        // 静态方法
-        holderRender: (children) => (
-            <ConfigProvider>
-                {children}
-            </ConfigProvider>
-        )
-    });
-
-    return (
-        <ConfigProvider>
             <AntdApp style={{ height: '100%', lineHeight: 'normal' }}>
-                {/* <RouterProvider router={router} /> */}
-                <AppRouter></AppRouter>
+                <AppRouter />
             </AntdApp>
         </ConfigProvider>
     );
 };
 
-export default App;
+export default App;