xiaoshu/src/components/DialogFeedback.vue

<template>
    <a-modal v-model:visible="showFeedback" @beforeOk="handleOk" @beforeCancel="handleCancel" okText="提交">
        <template #title> 进一步反馈 </template>
        <p class="feedback-title">理解问题有误</p>
        <a-checkbox-group v-model="feedbackValue1" class="feedback-content">
            <a-grid :cols="2" :colGap="10" :rowGap="8">
                <a-grid-item>
                    <a-checkbox value="1">没能理解指令</a-checkbox>
                </a-grid-item>
                <a-grid-item>
                    <a-checkbox value="2">未发现问题中的错误</a-checkbox>
                </a-grid-item>
                <a-grid-item>
                    <a-checkbox value="3">无法理解上下文</a-checkbox>
                </a-grid-item>
                <a-grid-item>
                    <a-checkbox value="4">答非所问</a-checkbox>
                </a-grid-item>
            </a-grid>
        </a-checkbox-group>
        <p class="feedback-title">回答不佳</p>
        <a-checkbox-group v-model="feedbackValue2" class="feedback-content">
            <a-grid :cols="2" :colGap="10" :rowGap="8">
                <a-grid-item>
                    <a-checkbox value="1">有事实性错误</a-checkbox>
                </a-grid-item>
                <a-grid-item>
                    <a-checkbox value="2">回答重复</a-checkbox>
                </a-grid-item>
                <a-grid-item>
                    <a-checkbox value="3">格式错误</a-checkbox>
                </a-grid-item>
                <a-grid-item>
                    <a-checkbox value="4">对我没帮助</a-checkbox>
                </a-grid-item>
            </a-grid>
        </a-checkbox-group>
        <p class="feedback-title">有害信息</p>
        <a-checkbox-group v-model="feedbackValue3" class="feedback-content">
            <a-grid :cols="2" :colGap="10" :rowGap="8">
                <a-grid-item>
                    <a-checkbox value="1">敏感/有害回复</a-checkbox>
                </a-grid-item>
                <a-grid-item>
                    <a-checkbox value="2">存在价值观问题</a-checkbox>
                </a-grid-item>
            </a-grid>
        </a-checkbox-group>
        <p class="feedback-title">你认为更理想的答复是什么？</p>
        <a-textarea
            v-model="feedbackValue4"
            :style="{
                width: '100%',
                height: '100px',
                border: '1px solid rgba(187, 187, 187, 1)',
                background: 'rgba(0,0,0,0)'
            }"
            auto-size
            placeholder="请输入"
            allow-clear
        />
    </a-modal>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
    components: {},
    props: ["showFeedback"],
    setup(props, { emit }) {
        const feedbackValue1 = ref([]);
        const feedbackValue2 = ref([]);
        const feedbackValue3 = ref([]);
        const feedbackValue4 = ref("");
        const handleOk = () => {
            emit("handle-ok");
            return false;
        };
        const handleCancel = () => {
            emit("handle-cancel");
            return false;
        };
        return {
            feedbackValue1,
            feedbackValue2,
            feedbackValue3,
            feedbackValue4,
            handleOk,
            handleCancel
        };
    }
});
</script>
<style scoped>
.feedback-title {
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    margin: 0 0 8px 4px;
}
.feedback-content {
    margin-bottom: 16px;
}
</style>