chat-admin-web/src/pages/layout/style.less

.header {
    width: 100%;
    height: 64px;
    padding: 0 24px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    // 用户区域样式
    &-user-section {
        display: flex;
        align-items: center;
        gap: 8px;
    }



    // 登出按钮样式
    &-logout-btn {
        color: #666;
        border: none;
        padding: 4px 8px;
        border-radius: 6px;
        transition: all 0.3s ease;
        
        &:hover {
            color: #ff4d4f;
            background: rgba(255, 77, 79, 0.1);
        }
        
        &:active {
            color: #cf1322;
            background: rgba(255, 77, 79, 0.2);
        }
    }

    // 用户操作区域样式优化
    &-operation {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 4px 8px; // 增加点击区域
        border-radius: 6px;
        transition: background-color 0.3s ease;

        &-picture {
            width: 30px;
            height: 30px;
            background: @primary-color;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 8px;
            color: #FFFFFF;
        }

        &-name {
            font-weight: 500;
            color: @primary-color;
        }
    }

    // &-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;
        cursor: pointer;
        margin-right: 40px;

        &-picture {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        &-text {
            font-size: 18px;
            font-weight: 500;
            color: #000000;
            margin-right: 24px;
        }
    }

    &-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;
            }
        }
    }
}

// 响应式处理
@media (max-width: 1200px) {
    .header {
        
        // 优化logo区域在中等屏幕下的显示
        &-logo {
            margin-right: 20px;
            
            &-text {
                font-size: 16px; // 稍微减小字体
                margin-right: 16px; // 减少右边距
            }
        }
        
        // 优化Select组件在中等屏幕下的显示
        .ant-select {
            width: 160px !important; // 减小Select宽度
        }
    }
}

@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; // 在移动端隐藏用户名
            }
        }
        
        &-logout-btn {
            padding: 2px 4px;
        }
    }
}

// 超小屏幕优化
@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; // 最小边距
        }
    }
}

.nav {
    width: 200px !important;
    height: calc(100vh - 64px) !important;
    background: #F9FAFB !important;
    border-right: 1px solid #f0f0f0;
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 999;


    .ant-menu {
        background-color: transparent !important;
        overflow-x: hidden;
        overflow-y: auto;

        &-item {
            transition: font-weight 0.2s ease;

            &-selected, &-active {
                font-weight: 600 !important;
                color: @primary-color !important;
            }
        }
    }

    &-menu {
        width: 100%;
        height: calc(100vh - 100px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    &-bottom {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


.main-content {
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 114px); /* 减去Header(64px)和面包屑(50px) */
    background: #fff;

    .breadcrumb-container {
        width: 100%;
        height: 50px;
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .breadcrumb {
        flex: 1;
        font-weight: 600;
        .ant-breadcrumb-link {
            a {
                &:hover {
                    color: @primary-color !important;
                    font-weight: 600;
                }
            }
        }
    }

    .breadcrumb-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* 内容区域滚动 */
    .content-scroll-area {
        flex: 1;
        overflow-y: auto;
        background: #fff;
        position: relative;
    }
}

.model-selector-modal {
    .ant-modal-body {
        padding: 20px;
    }
}

.route-option {
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    height: 480px;
    display: flex;
    flex-direction: column;

    .ant-card-cover {
        display: flex;
        justify-content: center;
        padding: 60px 0;
        background: #f0f5ff;
        flex: 0 0 auto;
    }

    .ant-card-body {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 0;
    }

    .logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .option-icon {
        font-size: 64px;
        color: #1890ff;
    }

    .ant-card-meta {
        text-align: center;
        margin-bottom: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 8px;
        }

        &-description {
            color: #666;
            padding: 0 16px;
        }
    }

    .select-button {
        margin: 24px 0;
        height: 48px;
        font-weight: 500;
        font-size: 16px;
        flex: 0 0 auto;
    }

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08);
    }
}