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;
        border-right: none !important;
        width: 100% !important; // 确保菜单占满容器宽度

        &-item {
            transition: all 0.2s ease;
            margin: 4px 6px !important; // 减少左右边距
            border-radius: 6px !important;
            height: 40px !important;
            line-height: 40px !important;
            position: relative;
            // 默认状态：透明边框，保持布局稳定
            border-left: 3px solid transparent !important;
            padding-left: 13px !important;
            padding-right: 8px !important; // 添加右内边距
            // 确保菜单项不会超出容器宽度
            box-sizing: border-box !important;
            width: calc(100% - 12px) !important; // 减去左右边距的宽度
            max-width: calc(100% - 12px) !important;

            // 悬停状态 - 浅色背景，保持透明边框
            &:hover:not(&-selected) {
                background-color: rgba(24, 144, 255, 0.04) !important;
                color: @primary-color !important;
                // 移除位移效果，保持菜单宽度稳定
                border-left: 3px solid transparent !important; // 保持透明边框，避免闪烁
                padding-left: 13px !important; // 保持一致的内边距
                padding-right: 8px !important; // 保持右内边距
            }

            // 选中状态 - 深色背景，左侧蓝色边框，字体加粗
            &-selected {
                font-weight: 600 !important;
                color: @primary-color !important;
                background: linear-gradient(90deg, rgba(24, 144, 255, 0.12) 0%, rgba(24, 144, 255, 0.06) 100%) !important;
                border-left: 3px solid #1890ff !important; // 使用您指定的颜色
                padding-left: 13px !important; // 减少左内边距以补偿边框
                padding-right: 8px !important; // 保持右内边距
                box-shadow: 0 1px 3px rgba(24, 144, 255, 0.1);
                
                &::after {
                    display: none !important;
                }

                // 选中状态下的悬停效果 - 保持蓝条
                &:hover {
                    background: linear-gradient(90deg, rgba(24, 144, 255, 0.15) 0%, rgba(24, 144, 255, 0.08) 100%) !important;
                    transform: none; // 选中状态不需要位移效果
                    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15);
                    border-left: 3px solid #1890ff !important; // 悬停时保持蓝条
                    padding-left: 13px !important; // 保持左内边距
                    padding-right: 8px !important; // 保持右内边距
                }
            }

            &-active {
                font-weight: 500 !important;
                color: @primary-color !important;
                background-color: rgba(24, 144, 255, 0.06) !important;
            }
        }

        // 图标颜色控制
        &-item {
            .anticon {
                transition: all 0.2s ease;
                font-size: 16px;
            }

            // 悬停时图标颜色
            &:hover:not(&-selected) .anticon {
                color: @primary-color !important;
                transform: scale(1.05);
            }

            // 选中状态图标颜色和效果
            &-selected .anticon {
                color: @primary-color !important;
                font-weight: bold;
            }

            &-active .anticon {
                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;
        
        .help-button {
            color: #606266;
            background-color: #f5f7fa;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            
            &:hover {
                background-color: #e9ecef;
                color: #409eff;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }
            
            &:active {
                background-color: #d6d9dc;
            }
            
            .anticon {
                margin-right: 4px;
            }
        }
        
        .ant-btn-primary {
            border-radius: 6px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
            transition: all 0.3s ease;
            
            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
            }
        }
    }

    /* 内容区域滚动 */
    .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);
    }
}

// 帮助文档菜单样式 - 与主菜单保持一致
.help-layout {
    .ant-layout-sider .ant-menu {
        background-color: transparent !important;
        border-right: none !important;
        

        // 子菜单样式
        .ant-menu-submenu {
            .ant-menu-submenu-title {
                transition: all 0.2s ease !important;
                margin: 4px 6px !important;
                border-radius: 6px !important;
                height: 40px !important;
                line-height: 40px !important;
                position: relative;
                border-left: 3px solid transparent !important;
                padding-left: 13px !important;
                padding-right: 8px !important;
                box-sizing: border-box !important;
                width: calc(100% - 12px) !important;

                &:hover {
                    background-color: rgba(24, 144, 255, 0.04) !important;
                    color: @primary-color !important;
                    border-left: 3px solid transparent !important; // 悬停时无蓝条
                }
            }

            // 子菜单内容区域
            .ant-menu-sub {
                background-color: transparent !important;
            }
        }

        // 统一处理所有菜单项（包括子菜单项）
        .ant-menu-item {
            transition: all 0.2s ease !important;
            margin: 4px 6px !important;
            border-radius: 6px !important;
            height: 40px !important;
            line-height: 40px !important;
            position: relative;
            border-left: 3px solid transparent !important;
            padding-left: 13px !important;
            padding-right: 8px !important;
            box-sizing: border-box !important;
            width: calc(100% - 12px) !important;
            max-width: calc(100% - 12px) !important;

            // 子菜单项特殊样式
            .ant-menu-sub & {
                margin: 2px 6px 2px 20px !important; // 增加左边距以显示层级
                height: 36px !important; // 稍微小一点
                line-height: 36px !important;
                font-size: 13px !important; // 稍微小一点的字体
                width: calc(100% - 26px) !important; // 减去增加的左边距
            }

            // 悬停状态 - 无蓝条
            &:hover:not(.ant-menu-item-selected) {
                background-color: rgba(24, 144, 255, 0.04) !important;
                color: @primary-color !important;
                border-left: 3px solid transparent !important;
                padding-left: 13px !important;
                padding-right: 8px !important;
            }

            // 选中状态 - 有蓝条和选中效果
            &.ant-menu-item-selected {
                font-weight: 600 !important;
                color: #1890ff !important;
                background: linear-gradient(90deg, rgba(24, 144, 255, 0.12) 0%, rgba(24, 144, 255, 0.06) 100%) !important;
                border-left: 3px solid #1890ff !important;
                padding-left: 13px !important;
                padding-right: 8px !important;
                box-shadow: 0 1px 3px rgba(24, 144, 255, 0.1) !important;
                
                &::after {
                    display: none !important;
                }

                &:hover {
                    background: linear-gradient(90deg, rgba(24, 144, 255, 0.15) 0%, rgba(24, 144, 255, 0.08) 100%) !important;
                    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
                    border-left: 3px solid #1890ff !important;
                    padding-left: 13px !important;
                    padding-right: 8px !important;
                }
            }
        }

        // 图标颜色控制
        .ant-menu-item, .ant-menu-submenu-title {
            .anticon {
                transition: all 0.2s ease;
                font-size: 16px;
            }

            &:hover:not(.ant-menu-item-selected) .anticon {
                color: @primary-color !important;
            }

            &.ant-menu-item-selected .anticon {
                color: @primary-color !important;
                font-weight: bold;
            }
        }
    }
}