xiaozhi/jk-rag-platform/src/pages/system/audit/components/style.scss

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

// ===== 审计日志详情页面样式 =====
// 使用全局变量，避免硬编码

.questionAnswerInfo {
    width: 100%;
    height: 100%;
    background: $bg-secondary;
    border-radius: $border-radius-base;

    &-content {
        width: 100%;
        height: 100%;
        background: $bg-secondary;
        padding: $spacing-3 $spacing-lg;

        &-title {
            width: 100%;
            max-width: 646px;
            height: 48px;
        }
    }

    .ant-input-underlined[disabled],
    .ant-select-selector,
    .ant-input-number-input,
    .ant-input-affix-wrapper > textarea.ant-input {
        color: rgba(48, 49, 51, 0.88) !important;
    }

    .pl-20 {
        padding-left: $spacing-lg;
    }

    .tags-info {
        border: 1px solid $border-base;
        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-sm;

        .tags-list {
            width: 80%;
        }
    }
}

.modal_top {
    display: flex;
    gap: $spacing-2;
    margin-bottom: $spacing-2;

    .ant-input {
        width: 200px !important;
    }

    .ant-input-affix-wrapper {
        width: auto !important;
    }
}

.ant-btn-outlined {
    background: transparent !important;
    border: 1px solid $primary-color !important;
    color: $primary-color !important;
}

.cup {
    cursor: pointer;
    margin-right: $spacing-2;
}

// ===== 布局样式 =====

.flex {
    &-center {
        &-container {
            width: 100%;
            min-height: 100%;
            background: $bg-secondary;
        }

        display: flex;
        justify-content: center;
        align-items: center;

        &-top {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: $spacing-xl;
            font-size: $font-md;
        }
    }

    &-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &-start {
        display: flex;
        justify-content: flex-start;
    }

    &-end {
        display: flex;
        justify-content: flex-end;
    }
}

// ===== 按钮样式 =====

.btn {
    &-cancel {
        background: $bg-tertiary;
        border: none;
        color: $text-primary;
        transition: $transition-base;
        box-shadow: $shadow-sm;

        &:hover {
            background: #e8e8e8;
            color: $text-primary;
            box-shadow: $shadow-md;
            transform: translateY(-1px);
        }

        &:active {
            background: #dcdcdc;
            color: $text-primary;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            transform: translateY(0);
        }

        &:focus {
            box-shadow: $shadow-sm;
        }
    }

    &-back {
        background: $bg-secondary;
        border: 1px solid #f0f0f0;
        color: $text-secondary;
        transition: $transition-base;
        box-shadow: $shadow-sm;

        &:hover {
            background: #fafafa;
            border-color: $primary-light;
            color: $primary-light;
            box-shadow: $shadow-md;
            transform: translateY(-1px);
        }

        &:active {
            background: #f0f0f0;
            border-color: $primary-color;
            color: $primary-color;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            transform: translateY(0);
        }

        &:focus {
            border-color: $primary-light;
            box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
        }
    }
}

// ===== 表单样式 =====

.form {
    &-control {
        &-width {
            width: 100%;
            max-width: 646px;
        }

        &-height {
            height: 48px;
        }
    }

    &-input {
        &-large {
            width: 100%;
            max-width: 646px;
            padding: $spacing-2;
        }

        &-number-small {
            margin: 0 $spacing-md;
            width: 100px;
        }
    }

    &-textarea {
        &-large {
            height: 120px;
            resize: none;
            width: 100%;
            max-width: 646px;
        }
    }
}

// ===== 文本区域样式 =====

.textarea {
    &-full-width {
        width: 100%;
    }

    &-fixed-height {
        height: 300px;
    }
}

// ===== 预设问题区域样式 =====

.preset-questions {
    margin: $spacing-lg 0;

    h4 {
        margin-bottom: $spacing-md;
        color: $text-primary;
    }

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

        label {
            min-width: 60px;
            color: $text-secondary;
            flex-shrink: 0;
        }

        .question-input {
            flex: 1;
            min-width: 200px;
            max-width: 400px;
            margin: 0;
        }

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

            .question-icon {
                font-size: $icon-lg;
                color: $primary-color;
                cursor: pointer;
                transition: all 0.3s ease;

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

// ===== 问题输入框样式（保留向后兼容）=====

.question-input {
    width: 100%;
    max-width: 300px;
    padding-top: $spacing-2;
    margin-left: $spacing-lg;
}

.link-more-settings {
    color: $primary-color;
    cursor: pointer;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

// ===== 标题样式 =====

.section-title {
    font-size: $font-md;
    font-weight: $font-weight-medium;
    color: $text-primary;
    margin-bottom: $spacing-sm;
}

// ===== Prompt 编辑器布局样式 =====

.prompt {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    &-info {
        padding: $spacing-md $spacing-lg $spacing-sm $spacing-lg;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        &-text {
            .variable-highlight {
                color: $primary-color;
                font-weight: $font-weight-medium;
                padding: 2px $spacing-2;
                border-radius: $radius-sm;
                font-family: $font-family-mono;
                margin: 0 $spacing-1;
            }
        }
    }

    &-editor-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 $spacing-lg;

        .ant-form-item {
            margin-bottom: 0;
            height: 100%;

            .ant-form-item-control {
                height: 100%;

                .ant-form-item-control-input {
                    height: 100%;

                    .ant-form-item-control-input-content {
                        height: 100%;

                        .ant-input {
                            height: 100%;
                            border: 1px solid $border-base;
                            border-radius: $radius-lg;
                            padding: $spacing-lg;
                            font-size: $font-md;
                            line-height: 1.6;
                            resize: none;

                            &:focus {
                                border-color: $primary-light;
                                box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
                            }

                            &::placeholder {
                                color: #bfbfbf;
                                font-style: italic;
                            }
                        }
                    }
                }
            }
        }
    }
}

.half-width {
    margin: 0 auto;
    width: 50%;
    height: 100%;
}

// ===== 间距样式 =====

.padding {
    &-top {
        &-10 {
            padding-top: $spacing-2;
        }

        &-20 {
            padding-top: $spacing-lg;
        }
    }

    &-bottom {
        &-10 {
            padding-bottom: $spacing-2;
        }

        &-12 {
            padding-bottom: $spacing-md;
        }

        &-16 {
            padding-bottom: $spacing-lg;
        }
    }
}

// ===== 更多设置区域样式 =====

.more-settings-section {
    padding-top: $spacing-lg;

    .flex-center {
        margin-bottom: $spacing-lg;
    }

    .section-title {
        font-size: $font-md;
        font-weight: $font-weight-semibold;
        color: $text-primary;
        text-align: center;
        margin: $spacing-lg 0;
    }
}

// ===== Splitter 面板背景样式 =====

.ant-splitter-panel {
    &:first-child {
        background: $bg-secondary;
    }

    &:nth-child(2) {
        background: $bg-tertiary;
    }

    &:last-child {
        background: $bg-secondary;
    }
}

// ===== 隐藏滚动条样式 =====

.questionAnswerInfo {
    .ant-splitter-panel,
    .prompt,
    .prompt-editor-area,
    .ant-input {
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
    }
}

// ===== 响应式设计 =====

@media (max-width: $screen-md) {
    .questionAnswerInfo {
        &-content {
            &-title {
                max-width: 100%;
            }
        }
    }

    .form {
        &-control-width,
        &-input-large,
        &-textarea-large {
            max-width: 100%;
        }
    }

    .question-input {
        max-width: 100%;
        margin-left: 0;
    }

    .half-width {
        width: 100%;
    }

    .preset-questions {
        .question-item {
            flex-direction: column;
            align-items: flex-start;
            gap: $spacing-sm;

            label {
                min-width: auto;
            }

            .question-input {
                width: 100%;
                max-width: 100%;
                min-width: auto;
            }

            .question-actions {
                align-self: flex-end;
            }
        }
    }
}

@media (max-width: $screen-sm) {
    .questionAnswerInfo {
        &-content {
            padding: $spacing-md;
        }
    }

    .form {
        &-input-large,
        &-textarea-large {
            padding: $spacing-1;
        }
    }

    .preset-questions {
        .question-item {
            .question-actions {
                align-self: center;
                width: 100%;
                justify-content: center;
            }
        }
    }
}