3
0

2 Commits cde81de771 ... 5ad38c9c5d

Autor SHA1 Mensagem Data
  Ryuiso 5ad38c9c5d no message 1 mês atrás
  Ryuiso 27d70ce052 refactor: 移除 ConfigProvider 全局 borderRadius 配置 1 mês atrás

BIN
jk-rag-platform/1e.png


+ 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;

+ 42 - 79
jk-rag-platform/src/components/common/AppCard/index.scss

@@ -341,15 +341,16 @@
     left: 0;
     right: 0;
     display: flex;
-    justify-content: space-between;  // 两端对齐
+    justify-content: space-between;
     align-items: center;
-    padding: $spacing-4;
+    padding: $spacing-3 $spacing-4;
     background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
     border-top: 1px solid $border-light;
     opacity: 0;
     transform: translateY($spacing-2);
     transition: $transition-base;
     pointer-events: none;
+    gap: $spacing-2;
 
     .app-card:hover & {
         opacity: 1;
@@ -357,109 +358,53 @@
         pointer-events: auto;
     }
 
-    // Dropdown 容器样式(左侧按钮)
+    // 按钮样式 - 使用全局 .ant-btn-default 和 .ant-btn-primary
+    // 只定义布局,不覆盖颜色样式
+
+    // Dropdown 容器
     .card-operation-dropdown {
         display: inline-flex;
+        flex-shrink: 0;
 
         .ant-btn {
-            min-width: 90px;
-            max-width: 160px;
-            height: 40px;
-            background: $bg-tertiary;
-            border: 1px solid $border-base;
-            border-radius: $radius-lg;
-            font-size: $font-md;
-            font-weight: $font-weight-medium;
-            color: $text-primary;
-            transition: $transition-base;
-
-            &:hover {
-                background: $border-base;
-                border-color: $border-dark;
-                color: $text-primary;
-            }
+            white-space: nowrap;
         }
     }
 
-    // 左侧按钮(更多操作 / API 接入)- 直接样式
+    // 左侧按钮(更多操作 / API 接入)
     .card-operation-btn {
         flex: 0 0 auto;
-        min-width: 90px;
-        max-width: 160px;
-        height: 40px;
-        background: $bg-tertiary;
-        border: 1px solid $border-base;
-        border-radius: $radius-lg;
-        font-size: $font-md;
-        font-weight: $font-weight-medium;
-        color: $text-primary;
-        transition: $transition-base;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        &:hover {
-            background: $border-base;
-            border-color: $border-dark;
-            color: $text-primary;
-        }
+        white-space: nowrap;
 
         svg {
-            width: 18px;
-            height: 18px;
+            width: 16px;
+            height: 16px;
         }
     }
 
     // 右侧按钮(立即使用)
     .card-use-btn {
         flex: 0 0 auto;
-        min-width: 90px;
-        max-width: 160px;
-        height: 40px;
-        background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
-        border: none;
-        border-radius: $radius-lg;
-        font-size: $font-md;
-        font-weight: $font-weight-semibold;
-        color: $bg-secondary;
-        box-shadow: 0 4px 12px rgba(0, 93, 128, 0.3);
-        transition: $transition-base;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        &:hover {
-            background: linear-gradient(135deg, $primary-dark 0%, $primary-color 100%);
-            box-shadow: 0 6px 16px rgba(0, 93, 128, 0.4);
-            transform: translateY(-$spacing-1);
-        }
-
-        &:active {
-            transform: translateY(0);
-            box-shadow: 0 2px 8px rgba(0, 93, 128, 0.2);
-        }
+        white-space: nowrap;
 
         svg {
-            width: 18px;
-            height: 18px;
+            width: 16px;
+            height: 16px;
         }
     }
 
-    // 响应式:窄屏时调整按钮尺寸
+    // 响应式:窄屏时调整
     @media (max-width: $screen-md) {
-        padding: $spacing-3;
+        padding: $spacing-2 $spacing-3;
+        gap: $spacing-1;
 
-        .card-operation-dropdown .ant-btn,
         .card-operation-btn,
         .card-use-btn {
-            min-width: 80px;
-            max-width: 140px;
-            height: 36px;
             font-size: $font-sm;
 
             svg {
-                width: 16px;
-                height: 16px;
+                width: 14px;
+                height: 14px;
             }
         }
     }
@@ -467,12 +412,30 @@
     @media (max-width: $screen-sm) {
         padding: $spacing-2;
 
-        .card-operation-dropdown .ant-btn,
         .card-operation-btn,
         .card-use-btn {
-            min-width: 70px;
-            max-width: 120px;
+            font-size: $font-xs;
             height: 32px;
+
+            svg {
+                width: 12px;
+                height: 12px;
+            }
+        }
+    }
+
+    // 超窄卡片适配(卡片宽度小于 280px 时)
+    @media (max-width: 320px) {
+        padding: $spacing-2;
+        gap: $spacing-1;
+
+        .card-operation-btn {
+            padding: 0 $spacing-2;
+            font-size: $font-xs;
+        }
+
+        .card-use-btn {
+            padding: 0 $spacing-2;
             font-size: $font-xs;
         }
     }

+ 4 - 0
jk-rag-platform/src/components/common/AppCard/index.tsx

@@ -356,6 +356,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                                     className='card-operation-btn'
                                     icon={<Menu size={18} />}
                                     size='large'
+                                    type='default'
                                 >
                                     更多操作
                                 </Button>
@@ -364,6 +365,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                                 className='card-use-btn'
                                 icon={<ArrowRight size={18} />}
                                 size='large'
+                                type='primary'
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     handleViewClick();
@@ -378,6 +380,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                                 className='card-operation-btn'
                                 icon={<Code size={18} />}
                                 size='large'
+                                type='default'
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     setApiDocOpen(true);
@@ -389,6 +392,7 @@ const AppCard: React.FC<AppCardProps> = (props) => {
                                 className='card-use-btn'
                                 icon={<ArrowRight size={18} />}
                                 size='large'
+                                type='primary'
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     handleViewClick();

+ 1 - 1
jk-rag-platform/src/pages/layout/style.scss

@@ -3,7 +3,7 @@
 
 // ===== 应用布局 =====
 .app-layout {
-    minHeight: 100vh;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
     background: $bg-primary;

+ 1 - 48
jk-rag-platform/src/pages/questionAnswer/form/DrawerForm.scss

@@ -2,6 +2,7 @@
 // 导入全局样式变量
 
 // ===== Drawer 表单样式 =====
+// 说明:Ant Design 组件样式由全局 global.scss 统一控制,此处只定义布局相关样式
 
 .rag-drawer {
     .ant-drawer-header {
@@ -29,11 +30,6 @@
     padding: $spacing-lg;
     overflow-y: auto;
 
-    // 表单区域
-    .form-section {
-        // 表单项样式由全局 .ant-form-item 控制
-    }
-
     // 图标选择区域
     .icon-select-section {
         display: flex;
@@ -194,49 +190,6 @@
     }
 }
 
-// 表单样式优化
-.drawer-form-container {
-    .ant-form {
-        .ant-form-item {
-            margin-bottom: $spacing-md;
-
-            .ant-form-item-label {
-                > label {
-                    font-size: $font-base;
-                    font-weight: $font-weight-medium;
-                    color: $text-primary;
-                }
-            }
-
-            .ant-form-item-extra {
-                font-size: $font-base;
-                color: $text-hint;
-                margin-top: $spacing-1;
-            }
-
-            .ant-input,
-            .ant-select,
-            .ant-cascader,
-            .ant-input-number {
-                width: 100%;
-            }
-
-            .ant-input-affix-wrapper,
-            .ant-select-selector,
-            .ant-input-number-input-wrap {
-                border-radius: $radius-md;
-                transition: all 0.2s ease;
-            }
-
-            .ant-input:focus,
-            .ant-input-affix-wrapper:focus-within {
-                border-color: $primary-color;
-                box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
-            }
-        }
-    }
-}
-
 // 滚动条样式
 .drawer-form-container {
     &::-webkit-scrollbar {

+ 7 - 49
jk-rag-platform/src/styles/global.scss

@@ -315,11 +315,13 @@ ul li {
         color: $text-primary;
 
         &:hover {
+            background: $bg-hover;
             border-color: $primary-light;
             color: $primary-light;
         }
 
         &:active {
+            background: $bg-tertiary;
             border-color: $primary-dark;
             color: $primary-dark;
         }
@@ -1600,31 +1602,9 @@ ul li {
         display: flex;
         gap: $spacing-3;
         align-items: center;
-        
-        .create-btn {
-            display: flex;
-            align-items: center;
-            gap: $spacing-2;
-            padding: $spacing-2 $spacing-4;
-            background: $primary-color;
-            color: #ffffff;
-            border: none;
-            border-radius: $radius-lg;
-            font-size: $font-md;
-            font-weight: $font-weight-medium;
-            cursor: pointer;
-            transition: $transition-base;
-
-            &:hover {
-                background: $primary-light;
-                transform: translateY(-$spacing-1);
-                box-shadow: $shadow-md;
-            }
 
-            .iconify {
-                font-size: $icon-xl;
-            }
-        }
+        // 注意:此处不定义按钮样式,由全局 .ant-btn 统一控制
+        // 页面使用 <Button type="primary"> 时自动应用全局按钮样式
     }
 }
 
@@ -1677,35 +1657,13 @@ ul li {
 }
 
 // ==================== 立即创建模块 ====================
+// 仅定义布局样式,按钮样式由全局 .ant-btn-primary 统一控制
 
 .create-action-wrapper {
     text-align: right;
-    margin-bottom: $spacing-4; // 紧凑一级:24px → 16px
-    
-    .create-action-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: $spacing-2;
-        padding: $spacing-2 $spacing-4;
-        background: $primary-color;
-        color: #ffffff;
-        border: none;
-        border-radius: $radius-lg;
-        font-size: $font-md;
-        font-weight: $font-weight-medium;
-        cursor: pointer;
-        transition: $transition-base;
-
-        &:hover {
-            background: $primary-light;
-            transform: translateY(-$spacing-1);
-            box-shadow: $shadow-md;
-        }
+    margin-bottom: $spacing-4;
 
-        .iconify {
-            font-size: $icon-xl;
-        }
-    }
+    // 按钮样式由全局 .ant-btn 统一控制,此处不重复定义
 }
 
 // ==================== 卡片网格布局 ====================