no message

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

@@ -17,6 +17,7 @@
     min-height: 280px;
     display: flex;
     flex-direction: column;
+    container-type: inline-size; // 启用容器查询，让按钮根据卡片宽度自适应
 
     &:hover {
         transform: translateY(-$spacing-1);
@@ -260,7 +261,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 0;
+    margin-top: $spacing-2;
 
     .card-meta-left {
         display: flex;
@@ -291,8 +292,7 @@
     align-items: center;
     gap: $spacing-2;
     flex-wrap: wrap;
-    padding-top: $spacing-2;
-    margin-top: auto;
+    margin-top: $spacing-2;
 }
 
 .card-certification {
@@ -350,7 +350,7 @@
     transform: translateY($spacing-2);
     transition: $transition-base;
     pointer-events: none;
-    gap: $spacing-2;
+    gap: $spacing-3;
 
     .app-card:hover & {
         opacity: 1;
@@ -358,49 +358,52 @@
         pointer-events: auto;
     }
 
-    // 按钮样式 - 使用全局 .ant-btn-default 和 .ant-btn-primary
-    // 只定义布局，不覆盖颜色样式
-
     // Dropdown 容器
     .card-operation-dropdown {
         display: inline-flex;
-        flex-shrink: 0;
 
         .ant-btn {
             white-space: nowrap;
         }
     }
 
-    // 左侧按钮（更多操作 / API 接入）
+    // 左侧按钮（更多操作 / API 接入）- 使用 Ant Design 原生样式
     .card-operation-btn {
         flex: 0 0 auto;
         white-space: nowrap;
+        // 不覆盖背景色和边框色，由全局 .ant-btn-default 控制
 
         svg {
             width: 16px;
             height: 16px;
+            flex-shrink: 0;
         }
     }
 
-    // 右侧按钮（立即使用）
+    // 右侧按钮（立即使用）- 使用 Ant Design 原生样式
     .card-use-btn {
         flex: 0 0 auto;
         white-space: nowrap;
+        // 不覆盖背景色，由全局 .ant-btn-primary 控制
 
         svg {
             width: 16px;
             height: 16px;
+            flex-shrink: 0;
         }
     }
 
-    // 响应式：窄屏时调整
-    @media (max-width: $screen-md) {
+    // 容器查询：根据卡片宽度自动调整按钮大小
+    // 当卡片宽度小于 260px 时 - 缩小按钮
+    @container (max-width: 259px) {
         padding: $spacing-2 $spacing-3;
-        gap: $spacing-1;
+        gap: $spacing-2;
 
         .card-operation-btn,
         .card-use-btn {
             font-size: $font-sm;
+            height: 36px;
+            padding: 0 $spacing-3;
 
             svg {
                 width: 14px;
@@ -409,34 +412,70 @@
         }
     }
 
-    @media (max-width: $screen-sm) {
+    // 当卡片宽度小于 220px 时 - 只显示图标
+    @container (max-width: 219px) {
         padding: $spacing-2;
+        gap: $spacing-2;
+
+        .card-operation-btn {
+            font-size: 0;
+            min-width: 36px;
+            width: 36px;
+            height: 36px;
+            padding: 0;
+
+            svg {
+                width: 16px;
+                height: 16px;
+                margin: 0;
+            }
+        }
+
+        .card-use-btn {
+            font-size: 0;
+            min-width: 36px;
+            width: 36px;
+            height: 36px;
+            padding: 0;
+
+            svg {
+                width: 16px;
+                height: 16px;
+                margin: 0;
+            }
+        }
+    }
+
+    // 响应式：窄屏时调整（基于视口宽度）
+    @media (max-width: $screen-md) {
+        padding: $spacing-2 $spacing-3;
+        gap: $spacing-2;
 
         .card-operation-btn,
         .card-use-btn {
-            font-size: $font-xs;
-            height: 32px;
+            font-size: $font-sm;
+            height: 36px;
 
             svg {
-                width: 12px;
-                height: 12px;
+                width: 14px;
+                height: 14px;
             }
         }
     }
 
-    // 超窄卡片适配（卡片宽度小于 280px 时）
-    @media (max-width: 320px) {
+    @media (max-width: $screen-sm) {
         padding: $spacing-2;
         gap: $spacing-1;
 
-        .card-operation-btn {
-            padding: 0 $spacing-2;
-            font-size: $font-xs;
-        }
-
+        .card-operation-btn,
         .card-use-btn {
-            padding: 0 $spacing-2;
             font-size: $font-xs;
+            height: 32px;
+
+            svg {
+                width: 12px;
+                height: 12px;
+            }
         }
     }
 }

jk-rag-platform/src/styles/global.scss

@@ -315,13 +315,13 @@ ul li {
         color: $text-primary;
 
         &:hover {
-            background: $bg-hover;
-            border-color: $primary-light;
-            color: $primary-light;
+            background: rgba($primary-color, 0.08);
+            border-color: $primary-color;
+            color: $primary-color;
         }
 
         &:active {
-            background: $bg-tertiary;
+            background: rgba($primary-color, 0.15);
             border-color: $primary-dark;
             color: $primary-dark;
         }