Ryuiso hace 1 mes
padre
commit
5ad38c9c5d

BIN
jk-rag-platform/1e.png


+ 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 统一控制,此处不重复定义
 }
 
 // ==================== 卡片网格布局 ====================