优化了开放平台的Header样式

src/pages/layout/components/Header.tsx

@@ -63,7 +63,8 @@ const Header: React.FC<Props> = (props: Props) => {
                 <div className='header-logo-text'>
                     建科•小智开放平台
                 </div>
-                <Select style={{ width: 200, marginLeft: 20 }}
+                <Select 
+                    className='header-platform-selector'
                     open={open}
                     value={currentMenuType}
                     onChange={onSelectChange}
@@ -78,7 +79,7 @@ const Header: React.FC<Props> = (props: Props) => {
                     ))}
                 </Select>
             </div>
-            <Dropdown menu={{ items }}>
+            <Dropdown menu={{ items }} >
                 <div className='header-operation'>
                     <div className='header-operation-picture'>
                         {userName.slice(0, 1)}

src/pages/layout/style.less

@@ -1,8 +1,3 @@
-//.ant-layout {
-//    background: #f5f7fa; // 统一的浅灰色背景
-//}
-
-
 .header {
     width: 100%;
     height: 64px;
@@ -17,40 +12,82 @@
     top: 0;
     left: 0;
     z-index: 1000;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+    // 下拉菜单定位优化
+    .ant-dropdown {
+        .ant-dropdown-menu {
+            margin-top: 8px; // 增加与触发器的距离
+            // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            border-radius: 8px;
+        }
+    }
 
-
-    &-nav {
+    // 用户操作区域样式优化
+    &-operation {
         display: flex;
         align-items: center;
-        gap: 40px;
-        margin-left: 40px;
+        cursor: pointer;
+        padding: 4px 8px; // 增加点击区域
+        border-radius: 6px;
+        transition: background-color 0.3s ease;
 
-        &-item {
-            color: #666;
-            font-weight: 500;
-            position: relative;
-            transition: color 0.3s;
+        &-picture {
+            width: 28px;
+            height: 28px;
+            background: @primary-color;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 12px;
+            color: #FFFFFF;
+        }
 
-            &:hover {
-                color: @primary-color;
-            }
+        &-name {
+            font-weight: 500;
+            color: @primary-color;
+            margin-right: 8px;
+        }
 
-            &.active {
-                color: @primary-color;
-
-                &::after {
-                    content: '';
-                    position: absolute;
-                    bottom: -22px;
-                    left: 0;
-                    right: 0;
-                    height: 2px;
-                    background: @primary-color;
-                }
-            }
+        &-down {
+            color: @primary-color !important;
+            transition: transform 0.3s ease;
         }
     }
 
+    // &-nav {
+    //     display: flex;
+    //     align-items: center;
+    //     gap: 40px;
+    //     margin-left: 40px;
+
+    //     &-item {
+    //         color: #666;
+    //         font-weight: 500;
+    //         position: relative;
+    //         transition: color 0.3s;
+
+    //         &:hover {
+    //             color: @primary-color;
+    //         }
+
+    //         &.active {
+    //             color: @primary-color;
+
+    //             &::after {
+    //                 content: '';
+    //                 position: absolute;
+    //                 bottom: -22px;
+    //                 left: 0;
+    //                 right: 0;
+    //                 height: 2px;
+    //                 background: @primary-color;
+    //             }
+    //         }
+    //     }
+    // }
+
     &-logo {
         display: flex;
         align-items: center;
@@ -64,36 +101,125 @@
         }
 
         &-text {
-            font-size: 16px;
+            font-size: 18px;
             font-weight: 500;
+            color: #000000;
+            margin-right: 24px;
         }
     }
 
-    &-operation {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
+    &-platform-selector {
+        width: 200px;
+        margin-left: 20px;
+        
+        // 基础样式
+        .ant-select-selector {
+            border: 1px solid #e8e8e8;
+            border-radius: 6px;
+            background: #fafafa;
+            
+            &:hover {
+                border-color: #1890ff;
+                background: #fff;
+            }
+        }
+    }
+}
 
-        &-picture {
-            width: 30px;
-            height: 30px;
-            background: @primary-color;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-right: 10px;
-            color: #FFFFFF;
+// 响应式处理 - 优化下拉菜单位置
+@media (max-width: 1200px) {
+    .header {
+        .ant-dropdown {
+            .ant-dropdown-menu {
+                // 在较小屏幕上，确保下拉菜单不会超出屏幕边界
+                max-width: calc(100vw - 48px);
+                right: 0;
+            }
         }
+        
+        // 优化logo区域在中等屏幕下的显示
+        &-logo {
+            margin-right: 20px;
+            
+            &-text {
+                font-size: 16px; // 稍微减小字体
+                margin-right: 16px; // 减少右边距
+            }
+        }
+        
+        // 优化Select组件在中等屏幕下的显示
+        .ant-select {
+            width: 160px !important; // 减小Select宽度
+        }
+    }
+}
 
-        &-name {
-            font-weight: 500;
-            color: @primary-color;
-            margin-right: 10px;
+@media (max-width: 768px) {
+    .header {
+        padding: 0 16px;
+        
+        &-logo {
+            margin-right: 12px;
+            
+            &-text {
+                font-size: 14px; // 进一步减小字体
+                margin-right: 12px; // 进一步减少右边距
+                white-space: nowrap; // 防止换行
+                overflow: hidden; // 隐藏溢出内容
+                text-overflow: ellipsis; // 显示省略号
+                max-width: 120px; // 限制最大宽度
+            }
+        }
+        
+        // 优化Select组件在移动端的显示
+        .ant-select {
+            width: 120px !important; // 进一步减小Select宽度
+            margin-left: 8px !important; // 减少左边距
+        }
+        
+        &-operation {
+            padding: 2px 4px;
+            
+            &-name {
+                display: none; // 在移动端隐藏用户名
+            }
         }
+        
+        .ant-dropdown {
+            .ant-dropdown-menu {
+                // 移动端下拉菜单全宽显示
+                width: calc(100vw - 32px);
+                right: 16px;
+            }
+        }
+    }
+}
 
-        &-down {
-            color: @primary-color !important;
+// 超小屏幕优化
+@media (max-width: 480px) {
+    .header {
+        padding: 0 12px;
+        
+        &-logo {
+            margin-right: 8px;
+            
+            &-text {
+                font-size: 12px; // 最小字体
+                margin-right: 8px;
+                max-width: 80px; // 进一步限制宽度
+            }
+            
+            &-picture {
+                width: 24px; // 减小logo尺寸
+                height: 24px;
+                margin-right: 6px;
+            }
+        }
+        
+        // 超小屏幕下的Select组件优化
+        .ant-select {
+            width: 80px !important; // 最小宽度
+            margin-left: 4px !important; // 最小边距
         }
     }
 }
@@ -142,7 +268,6 @@
 
 
 .main-content {
-    //max-height: calc(100vh - 64px);
     padding-bottom: 40px;
     display: flex;
     flex-direction: column;
@@ -266,35 +391,4 @@
     }
 }
 
-//.deepseek {
-//    .ant-card-cover {
-//        background: #f0f5ff;
-//    }
-//
-//    .option-icon {
-//        color: #1890ff;
-//    }
-//
-//    .select-button {
-//        background: #1890ff;
-//        border-color: #1890ff;
-//    }
-//
-//}
-//
-//.zhipu {
-//    .ant-card-cover {
-//        background: #f9f0ff;
-//    }
-//
-//    .option-icon {
-//        color: #722ed1;
-//    }
-//
-//    .select-button {
-//        background: #722ed1;
-//        border-color: #722ed1;
-//    }
-//
-//}