xiaozhi/jk-rag-platform/src/pages/questionAnswer/form/style.scss

// 导入全局样式变量
@import '@/styles/variables.scss';';

// ===== 创建/编辑表单组件样式 =====
// 注意：
// 1. 本样式文件只服务于 form 目录下的组件
// 2. 不覆盖全局样式（.page-layout, .list-header 等）
// 3. 使用局部类名避免冲突

// ==================== 步骤 1：基本信息 ====================

.create-step1 {

    .form-input {
        width: 100%;
        max-width: 646px;
        height: 36px;
    }

    .form-textarea {
        width: 100%;
        max-width: 646px;
        min-height: 96px;
    }

    .tags-info {
        border: 1px solid @border-color;
        width: 100%;
        max-width: 646px;
        min-height: 46px;
        border-radius: $radius-md;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: $spacing-1 $spacing-2;

        .tags-list {
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-1;
        }

        .cup {
            cursor: pointer;
            margin-right: $spacing-3;
            color: $text-secondary;

            &:hover {
                color: $error-color;
            }
        }
    }

    .preset-questions {
        margin: $spacing-6 0;
        padding: $spacing-5;
        background: $bg-tertiary;
        border-radius: $radius-lg;

        h4 {
            margin-bottom: $spacing-4;
            color: $text-primary;
            font-size: $font-lg;
            font-weight: $font-weight-medium;
        }

        .question-item {
            display: flex;
            align-items: center;
            margin-bottom: $spacing-3;
            gap: $spacing-3;

            label {
                min-width: 80px;
                color: $text-secondary;
                font-size: $font-md;
            }

            .question-input {
                flex: 1;
                min-width: 200px;
            }

            .question-actions {
                display: flex;
                gap: $spacing-2;

                .question-icon {
                    font-size: 18px;
                    color: $primary-color;
                    cursor: pointer;
                    transition: all 0.2s ease;

                    &:hover {
                        color: $primary-color-hover;
                        transform: scale(1.1);
                    }
                }
            }
        }
    }

    .step-actions {
        display: flex;
        gap: $spacing-3;
        margin-top: $spacing-6;
        padding-top: $spacing-6;
        border-top: 1px solid $border-light;
    }
}

// ==================== 步骤 2：RAG 配置 ====================

.create-step2 {
    height: 100%;
    display: flex;
    flex-direction: column;

    .step2-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: $spacing-4;
        padding-bottom: $spacing-4;
        border-bottom: 1px solid $border-light;

        .btn-back {
            background: $bg-tertiary;
            border: 1px solid $border-base;
            color: $text-secondary;

            &:hover {
                background: $border-base;
                border-color: $primary-color;
                color: $primary-color;
            }
        }
    }

    .app-splitter {
        flex: 1;
        border: 1px solid $border-light;
        border-radius: $radius-lg;
        min-height: calc(100vh - 300px);

        .splitter-panel {
            padding: $spacing-5;
            overflow-y: auto;

            &.param-config {
                background: $bg-tertiary;
            }

            .config-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: $spacing-4;
                font-size: $font-lg;
                font-weight: $font-weight-medium;
                color: $text-primary;
            }

            .section-title {
                font-size: $font-lg;
                font-weight: $font-weight-medium;
                color: $text-primary;
                margin-bottom: $spacing-4;
                display: flex;
                align-items: center;
                gap: $spacing-2;
            }
        }
    }

    .prompt-editor {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .prompt-info {
            margin-bottom: $spacing-3;

            .variable-highlight {
                color: $primary-color;
                font-weight: $font-weight-medium;
                padding: 2px 6px;
                border-radius: @radius-sm;
                background: fade($primary-color, 10%);
                font-family: @font-family-mono;
            }
        }

        .prompt-textarea {
            flex: 1;
            min-height: 300px;
            resize: vertical;
        }
    }

    .form-input {
        width: 100%;
        max-width: 100%;
    }

    .form-radio-group {
        width: 100%;
        display: flex;

        .ant-radio-button-wrapper {
            flex: 1;
            text-align: center;
        }
    }
}

// ==================== 工具类 ====================

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}