ai-question-pro 0.0.1

package/components/demo/src/main.vue

@@ -0,0 +1,536 @@
+<template>
+    <div class="ai_contain">
+        <slot>
+            <span class="ai_button" @click="showAddQuestion">AI出题</span>
+        </slot>
+        <el-drawer :visible.sync="addShow" :direction="direction" :wrapperClosable="false" destroy-on-close>
+            <template slot="title">
+                <div class="add_question_title">
+                    <span>AI出题</span>
+                    <img src="../static/robot.png">
+                </div>
+            </template>
+            <div class="add_question_body">
+                <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">
+                    <el-form-item label="题型" prop="questionType">
+<!--                        <el-checkbox-group v-model="form.questionTypes">-->
+<!--                            <el-checkbox v-for="item in quesTypeList" :key="item.id" :label="item.id">-->
+<!--                                {{ item.name }}-->
+<!--                            </el-checkbox>-->
+<!--                        </el-checkbox-group>-->
+                      <el-radio-group v-model="form.questionType" size="medium">
+                        <el-radio-button v-for="item in quesTypeList" :key="item.id" :label="item.id">{{ item.name }}</el-radio-button>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="题目数量" prop="count">
+                        <el-input class="number_input" v-model="form.count" min="1" max="10" type="number"
+                            @input="handleInput" style="width: 20%;"></el-input>
+                        <div class="remind">(为避免您等待时间过长,一次性最多生成10道题)</div>
+                    </el-form-item>
+                    <el-form-item label="关联知识点" prop="knowledgeIds">
+<!--                        <el-cascader v-model="form.knowledgeId" :options="knowledgeList" @change="closeDrowdown"-->
+<!--                            :show-all-levels="false" ref="cascader" :props="{ checkStrictly: true, ...propFormat }"-->
+<!--                            clearable></el-cascader>-->
+                      <cy-tree-select v-model="form.knowledgeIds" filterable :data="knowledgeList"></cy-tree-select>
+                    </el-form-item>
+                    <el-form-item label="难度" prop="difficulty">
+<!--                        <el-checkbox-group v-model="form.difficultys">-->
+<!--                            <el-checkbox :label="item.id" v-for="item in difficultyList" :key="item.id">{{ item.name-->
+<!--                                }}</el-checkbox>-->
+<!--                        </el-checkbox-group>-->
+                      <el-radio-group v-model="form.difficulty" size="medium">
+                        <el-radio-button v-for="item in difficultyList" :key="item.id" :label="item.id">{{ item.name }}</el-radio-button>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="自定义提示语">
+                        <el-input v-model="form.prompt" autosize placeholder="请输入" type="textarea"></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div class="add_question_footer">
+                <el-button type="primary" style="background-color: #3E7BFA;border: none;"
+                    @click="generate">生成题目</el-button>
+                <el-button @click="addShow = false">取 消</el-button>
+            </div>
+        </el-drawer>
+        <el-dialog :visible.sync="showQues" :close-on-click-modal="false">
+            <template slot="title">
+                <div class="question_title">
+                    <img src="../static/robot.png">
+                    <span>{{ title }}</span>
+                </div>
+            </template>
+            <div class="question_body" ref="generateDiv">
+                <questionItem v-if="aiResponse.questions && aiResponse.questions.length > 0" @agree="agree" @join="join"
+                    v-for="item, idx in aiResponse.questions" :key="idx" :detail="item" :index="idx">
+                </questionItem>
+            </div>
+            <div class="question_footer" slot="footer">
+                <span class="question_remind">题目内容由人工智能大模型生成,请您审慎核查,确认内容准确,无不妥后再使用</span>
+                <el-button type="primary" @click="rebuild"
+                    style="background-color: #3E7BFA;border: none;">重新生成</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import questionItem from './questionItem.vue'
+import CyTreeSelect from './CyTreeSelect.vue'
+// import {
+//     Button, Drawer, Form, FormItem, Checkbox, CheckboxGroup, Input, Cascader, Dialog, Loading, this.$message
+// } from "element-ui"
+import { getAiQuestion, agreeQuestion } from '../api/index'
+import Cookies from 'js-cookie';
+export default {
+    name: 'aiQuestion',
+    components: {
+        // 'el-button': Button,
+        // 'el-drawer': Drawer,
+        // 'el-form': Form,
+        // 'el-form-item': FormItem,
+        // 'el-checkbox': Checkbox,
+        // 'el-checkbox-group': CheckboxGroup,
+        // 'el-input': Input,
+        // 'el-cascader': Cascader,
+        // 'el-dialog': Dialog,
+        questionItem,
+      CyTreeSelect
+    },
+    props: {
+        top: {
+            type: [String, Number],
+            default: 0
+        },
+        knowledgeList: {
+            type: Array,
+            default: () => [
+                {
+                    id: '1',
+                    label: '大学英语',
+                    children: [
+                        {
+                            id: '1-1',
+                            label: '用英语打招呼',
+                        }
+                    ]
+                },
+                {
+                  id: '2',
+                    label: '大学物理',
+                    children: [
+                        {
+                          id: '2-1',
+                            label: '结构力学',
+                            children: [
+                                {
+                                  id: '2-1-1',
+                                    label: '力的构成',
+                                }
+                            ]
+                        },
+                        {
+                          id: '2-2',
+                            label: '流体力学',
+                        }
+                    ]
+                },
+                {
+                  id: '3',
+                    label: '高数'
+                }
+            ]
+        },
+        propFormat: {
+            type: Object,
+            default: () => ({
+                id: 'id',
+                label: 'label',
+                children: 'children'
+            })
+        },
+    },
+    data() {
+        return {
+            showQues: false,
+            addShow: false,
+            generateCount: 0,
+            direction: 'rtl',
+            form: {
+                questionTypes: [],
+                questionType: null,
+                count: 1,
+                knowledgeId: [],
+                knowledgeIds: '',
+                difficultys: [],
+                difficulty: null,
+                knowledge: []
+            },
+            quesTypeList: [
+                { name: '单选题', id: 'single' },
+                { name: '多选题', id: 'multiple' },
+                { name: '判断题', id: 'judge' },
+                { name: '填空题', id: 'gapfilling' },
+                { name: '简答题', id: 'shortanswer' },
+            ],
+            difficultyList: [
+                { name: '非常简单', id: 0 },
+                { name: '简单', id: 1 },
+                { name: '一般', id: 2 },
+                { name: '困难', id: 3 },
+                { name: '非常困难', id: 4 },
+            ],
+            rules: {
+                questionTypes: [{ required: true, message: '此项必填', trigger: 'change' }],
+                questionType: [{ required: true, message: '此项必填', trigger: 'change' }],
+                count: [{ required: true, message: '此项必填', trigger: 'blur' }],
+                knowledgeIds: [{ required: true, message: '此项必填', trigger: 'change' }],
+                difficultys: [{ required: true, message: '此项必填', trigger: 'change' }],
+                difficulty: [{ required: true, message: '此项必填', trigger: 'change' }],
+            },
+            loading: null,
+            aiResponse: {},
+            title: '单选题'
+        }
+    },
+    watch: {
+        showQues(e) {
+            if (!e) {
+                this.aiResponse = {}
+            }
+        }
+    },
+    mounted() {
+        let doc = document.getElementsByClassName('rtl')[0]
+        if (this.top) {
+            doc.style.top = this.top + 'px'
+            doc.style.height = `calc( 100% - ${this.top}px)`
+        }
+    },
+    methods: {
+        handleInput(value) {
+            value = parseFloat(value);
+            if (value < 1) {
+                this.form.count = 1;
+            } else if (value > 10) {
+                this.form.count = 10;
+            } else {
+                this.form.count = value;
+            }
+        },
+        //选中节点后关闭下拉框
+        closeDrowdown(e) {
+            this.$nextTick(() => {
+                this.$refs.cascader.dropDownVisible = false
+            });
+        },
+        //展示右边弹框
+        showAddQuestion() {
+            if (!Cookies.get("AiToken")) {
+                return this.$message.warning('未获取到登录信息,请重新登录')
+            }
+            this.form = {
+                questionTypes: [],
+                questionType: null,
+                count: 1,
+                knowledgeId: [],
+                knowledgeIds: '',
+                difficultys: [],
+                difficulty: null,
+                knowledge: []
+            }
+            this.addShow = !this.addShow
+        },
+        //生成题目
+        generate() {
+            this.$refs.form.validate(valid => {
+              if (valid) {
+                    this.form.knowledgeId = this.form.knowledgeIds.split(',');
+                    this.form.knowledgeId.forEach(item => {
+                        this.getKnowledgeName(item, this.knowledgeList)
+                    })
+                    this.form.questionTypes.push(this.form.questionType);
+                    this.form.difficultys.push(this.form.difficulty);
+                    if (this.form.questionTypes.length > 1) {
+                        this.title = '多类题'
+                    } else {
+                        this.title = this.quesTypeList.find(item => item.id == this.form.questionTypes[0]).name
+                    }
+                    this.showQues = true
+                    this.addShow = !this.addShow
+                    this.sendPost()
+                }
+            })
+        },
+        //重新生成
+        rebuild() {
+            this.sendPost()
+        },
+        showGenerateResult(){
+          this.generateCount++;
+          if(this.generateCount == this.form.count){
+            this.$message.success( '题目(' + this.form.count + '道)全部生成完毕！');
+          } else {
+            this.$message.success('生成' + this.generateCount + '道题目成功');
+          }
+          this.$nextTick(() => {
+            const generateDiv = this.$refs.generateDiv;
+            generateDiv.scrollTop = generateDiv.scrollHeight;
+          });
+        },
+        reSend() {
+          this.loading && this.loading.close()
+          this.loading = this.$loading({
+            target: '.el-dialog',
+            text: 'ai生成中...'
+          });
+          let obj = {
+            modelType: 'aliyun',
+            questionAddCmd: {
+              questionTypes: this.form.questionTypes,
+              // count: this.form.count,
+              count: 1,
+              knowledge: this.form.knowledge.join(' '),
+              knowledgeId: this.form.knowledgeId[this.form.knowledgeId.length - 1],
+              difficultys: this.form.difficultys,
+              prompt: this.form.prompt
+            },
+            sessionId: this.aiResponse.sessionId ? this.aiResponse.sessionId : ''
+          }
+          getAiQuestion(obj).then(res => {
+            if (res.success) {
+              this.loading && this.loading.close()
+              if (res.data && res.data.questions && res.data.questions.length > 0) {
+                if (this.aiResponse.questions && this.aiResponse.questions.length > 0) {
+                  this.aiResponse.questions.push(res.data.questions[0]);
+                } else {
+                  this.aiResponse = res.data;
+                }
+                this.$set(res.data.questions[0], 'evaluate', 0)
+                this.showGenerateResult();
+              } else {
+                this.$message.warning('生成' + this.generateCount + '道题目获取失败,重新生成中...')
+                return this.reSend()
+              }
+            } else {
+              this.loading && this.loading.close()
+              this.$message.warning('生成' + this.generateCount + '道题目获取失败')
+            }
+          }).catch(error => {
+            console.log("error:" + error);
+            this.loading && this.loading.close()
+            this.$message.warning('生成' + this.generateCount + '道题目获取失败')
+          })
+        },
+        //发送请求
+        sendPost() {
+            this.generateCount = 0;
+            this.aiResponse = {}
+            this.loading && this.loading.close()
+            this.loading = this.$loading({
+                target: '.el-dialog',
+                text: 'ai生成中...'
+            });
+            for(let i = 0; i<this.form.count; i++){
+              let obj = {
+                modelType: 'aliyun',
+                questionAddCmd: {
+                  questionTypes: this.form.questionTypes,
+                  // count: this.form.count,
+                  count: 1,
+                  knowledge: this.form.knowledge.join(' '),
+                  knowledgeId: this.form.knowledgeId[this.form.knowledgeId.length - 1],
+                  difficultys: this.form.difficultys,
+                  prompt: this.form.prompt
+                },
+                sessionId: this.aiResponse.sessionId ? this.aiResponse.sessionId : ''
+              }
+              getAiQuestion(obj).then(res => {
+                // console.log("questions obj is :" + JSON.stringify(res.data.questions));
+                // console.log("res is :" + JSON.stringify(res));
+                if (res.success) {
+                  this.loading && this.loading.close()
+                  // this.aiResponse = {}
+                  // this.aiResponse = res.data || {}
+                  if (res.data && res.data.questions && res.data.questions.length > 0) {
+                    // this.aiResponse.questions.forEach(item => {
+                    //   this.$set(item, 'evaluate', 0)
+                    // })
+                    if (this.aiResponse.questions && this.aiResponse.questions.length > 0) {
+                      this.aiResponse.questions.push(res.data.questions[0]);
+                    } else {
+                      this.aiResponse = res.data;
+                    }
+                    this.$set(res.data.questions[0], 'evaluate', 0)
+                    this.showGenerateResult();
+                  } else {
+                    this.$message.warning('生成' + this.generateCount + '道题目获取失败')
+                    return this.reSend()
+                  }
+                } else {
+                  this.loading && this.loading.close()
+                  this.$message.warning('生成' + this.generateCount + '道题目获取失败')
+                }
+              }).catch(error => {
+                console.log("error:" + error);
+                this.loading && this.loading.close()
+                this.$message.warning('生成' + this.generateCount + '道题目获取失败')
+              })
+            }
+
+        },
+        //获取知识点名称
+        getKnowledgeName(e, array) {
+            array.forEach(item => {
+                if (e == item.id) {
+                    return this.form.knowledge.push(item.label)
+                } else if (item.children && item.children.length > 0) {
+                    this.getKnowledgeName(e, item.children)
+                }
+            });
+        },
+        //点赞
+        agree(e, j) {
+            this.aiResponse.questions[e].evaluate = j
+            let obj = {
+                modelType: 'aliyun',
+                ...this.aiResponse
+            }
+            agreeQuestion(obj).then(res => {
+
+            }).catch(error => {
+                console.log(error);
+            })
+        },
+        //加入题库
+        join(e) {
+            this.$emit('joinQuestionBank', { ...e, knowledgePointsId: this.form.knowledgeId[this.form.knowledgeId.length - 1] })
+        }
+    }
+}   
+</script>
+<style lang="scss" scoped>
+::v-deep.ai_contain {
+    display: inline-block;
+
+    .el-drawer__header {
+        padding-top: 0;
+        height: 80px;
+        background-image: url('../static/addQuesTitBg.png');
+        background-size: 100% 100%;
+    }
+
+    .el-drawer__body {
+        padding: 0 20px;
+    }
+
+    .el-drawer__body {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .el-form-item__label {
+        font-weight: 700;
+    }
+
+    .el-input__inner {
+        padding-right: 0;
+    }
+
+    .el-cascader {
+        width: 100%;
+    }
+
+    .ai_button {
+        cursor: pointer;
+        user-select: none;
+        padding: 9px 6px;
+        position: relative;
+        color: #fff;
+        background-color: #456BEA;
+        border-radius: 4px;
+        border: 1px solid #456BEA;
+    }
+
+    .add_question_title {
+        display: flex;
+        align-items: center;
+        font-size: 23px;
+        color: #333333;
+    }
+
+    .add_question_body {
+        .remind {
+            font-size: 14px;
+            color: #9BA1AE;
+        }
+    }
+
+    .add_question_footer {
+        padding: 20px 0;
+        border-top: 1px solid #E6E6E6;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .el-loading-mask {
+        border-radius: 8px;
+    }
+
+    .el-dialog {
+        background: linear-gradient(327deg, #DBECFE 0%, #F9FCFF 100%);
+        border-radius: 8px;
+
+        .question_title {
+            display: flex;
+            align-items: center;
+            font-weight: 700;
+            font-size: 23px;
+            color: #333333;
+
+            img {
+                margin-right: 10px;
+                width: 35px;
+                height: 40px;
+            }
+        }
+
+        .question_body {
+            padding: 10px;
+            min-height: 500px;
+            max-height: 500px;
+            overflow: auto;
+
+            &::-webkit-scrollbar {
+                width: 4px;
+            }
+
+            &::-webkit-scrollbar-button {
+                display: none;
+            }
+
+            &::-webkit-scrollbar-track-piece {
+                background-color: transparent;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: 3px;
+                background: rgba(0, 0, 0, .5);
+            }
+        }
+
+        .question_footer {
+            display: flex;
+            justify-content: space-between;
+
+            .question_remind {
+                align-self: flex-end;
+                font-size: 14px;
+                color: #9BA1AE;
+            }
+        }
+
+    }
+}
+</style>

package/components/demo/src/questionItem.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="ai_question_contain">
+        <div class="question_contain_title">
+            <span class="question_contain_title_left">
+                <span>{{ index + 1 }}.</span>
+                <span class="difficult">{{ difficultyList.find(item => item.id == detail.difficulty).name }}</span>
+                <span>{{ detail.title }}</span>
+            </span>
+            <span class="question_contain_title_reght">
+                <img src="../static/zan_plain.png" v-if="detail.evaluate == 0 || detail.evaluate == 2"
+                    @click="agree(1)">
+                <img src="../static/zan_bg.png" v-if="detail.evaluate == 1">
+                <img src="../static/unzan_plain.png" v-if="detail.evaluate == 0 || detail.evaluate == 1"
+                    @click="agree(2)">
+                <img src="../static/unzan_bg.png" v-if="detail.evaluate == 2">
+            </span>
+        </div>
+        <div class="question_contain_question" v-if="detail.type == 'single' || detail.type == 'multiple' ">
+            <div v-for="item, idx in detail.options" :key="idx">
+<!--                <span>{{ options.find(obj => obj.id == idx).name }}、</span>-->
+                <span>{{ item }}</span>
+            </div>
+        </div>
+        <div class="question_contain_answer">参考答案:
+            <span v-html="detail.answer"></span>
+        </div>
+        <div class="question_contain_parse">
+            <span class="question_contain_parse_analysis">题目解析: {{ detail.analysis }}</span>
+            <span class="join" @click="join">加入题库</span>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'questionItem',
+    props: {
+        detail: {
+            type: Object,
+            default: () => { }
+        },
+        index: {
+            type: Number
+        }
+    },
+    data() {
+        return {
+            difficultyList: [
+                { name: '非常简单', id: 0 },
+                { name: '简单', id: 1 },
+                { name: '一般', id: 2 },
+                { name: '困难', id: 3 },
+                { name: '非常困难', id: 4 },
+            ],
+            options: [
+                { name: 'A', id: 0 },
+                { name: 'B', id: 1 },
+                { name: 'C', id: 2 },
+                { name: 'D', id: 3 },
+                { name: 'E', id: 4 },
+                { name: 'F', id: 5 },
+                { name: 'G', id: 6 },
+                { name: 'H', id: 7 },
+                { name: 'I', id: 8 },
+            ]
+        }
+    },
+    methods: {
+        agree(e) {
+            this.$emit('agree', this.index, e)
+        },
+        join(e) {
+            this.$emit('join', this.detail)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.ai_question_contain {
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, .6);
+
+    .question_contain_title {
+        margin-bottom: 16px;
+        display: flex;
+        justify-content: space-between;
+
+        .question_contain_title_left {
+            color: #333333;
+            font-weight: 600;
+            font-size: 14px;
+            width: 80%;
+
+            .difficult {
+                margin: 0 6px;
+                font-weight: 400;
+                padding: 2px 4px;
+                color: #fff;
+                background: #3E7BFA;
+                font-size: 10px;
+                border-radius: 2px;
+            }
+        }
+
+        .question_contain_title_reght {
+            display: flex;
+            align-items: center;
+
+            img {
+                margin: 0 5px;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .question_contain_question {
+        margin-bottom: 16px;
+
+        div {
+            margin: 5px 0;
+        }
+    }
+
+    .question_contain_answer {
+        margin-bottom: 16px;
+    }
+
+    .question_contain_parse {
+        margin-bottom: 16px;
+        display: flex;
+        justify-content: space-between;
+
+        .question_contain_parse_analysis {
+            width: 80%;
+        }
+
+        .join {
+            align-self: self-end;
+            user-select: none;
+            cursor: pointer;
+            color: #3E7BFA;
+        }
+    }
+}
+</style>