@zykjcommon/questions 0.0.1

package/src/assets/scss/questions/index.scss

@@ -0,0 +1,345 @@
+.zykjcommon-question{
+  .editor-content{
+    margin-top: 10px;
+    width: 100%;
+    overflow: auto;
+    &.editor-content-bor{
+      height: 300px;
+      /*border: 1px solid #666;*/
+      padding:5px;
+    }
+    img{
+      display: block;
+      cursor: pointer;
+    }
+  }
+  .question-type{
+    font-size: 18px;
+    font-family: PingFang-SC-Medium, PingFang-SC;
+    font-weight: bold;
+    color: #000000;
+    margin-bottom: 20px;
+    .score{
+      font-size: 14px;
+      color: #666666;
+      font-weight: normal;
+    }
+  }
+  .question-box{
+    padding-left: 30px;
+  }
+  .bcdt-btn{
+    margin-top: 30px;
+    padding:8px 11px;
+    border-radius: 4px;
+    color:#fff;
+    background: #FFBC00;
+    font-size: 12px;
+  }
+  .question-option-list{
+    margin-top: 30px;
+    .question-option{
+      display: flex;
+      margin-bottom:20px;
+      font-size: 14px;
+      color:#000;
+    }
+  }
+  .question-stem{
+    color: #333333;
+  }
+  .radio-box{
+    margin-right:2px;
+    position: relative;display: inline-block;
+    span{
+      vertical-align: 3px;
+      margin-left:5px;
+    }
+    .radio{
+      position: absolute;left:0;top:0;
+      opacity: 0;
+      width: 100%;
+      height: 18px;
+      cursor: pointer;
+    }
+    .radio-bg{
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      background: url("~@src/assets/img/radio.png") no-repeat center;
+      background-size: 100% 100%;
+    }
+    &.checked{
+      .radio-bg{
+        background: url("~@src/assets/img/radio-cur.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .checkbox-box{
+    margin-right:2px;
+    position: relative;display: inline-block;
+    /*span{
+      vertical-align: 3px;
+      margin-left:5px;
+    }*/
+    .checkbox{
+      height: 18px;
+      position: absolute;left:0;top:0;opacity: 0;
+      cursor: pointer;
+    }
+    .checkbox-bg{
+      width: 16px;height: 16px;display: inline-block;
+      background: url("~@src/assets/img/checkbox.png") no-repeat center;
+      background-size: 100% 100%;
+    }
+    &.checked{
+      .checkbox-bg{
+        background: url("~@src/assets/img/checkbox-cur.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .label-box{
+    word-break: break-all;
+    margin-top: -2px;
+    margin-left:5px;
+    flex:1;
+    label{
+      cursor: pointer;
+      display: flex;
+      .img-box{
+        flex: 1;
+        margin-top: 2px;
+        img{
+          max-width: 100%;
+        }
+      }
+      span{margin-right: 5px;}
+    }
+  }
+  .editor-tit{
+    font-size: 16px;
+    font-family: PingFang-SC-Medium, PingFang-SC;
+    font-weight: bold;
+    color: #000000;
+  }
+  .editor-output{
+    margin-top: 15px;
+    background: #F7F7F7;
+    border-radius: 6px;
+    padding:15px;
+    color:#333;
+    font-size: 14px;
+    .output-main{
+      margin-top: 10px;
+    }
+  }
+  .editor-textarea{
+    margin-top: 15px;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    textarea{
+      font-size: 14px;
+      min-width: 100%;max-width: 100%;min-height: 107px;
+      padding: 15px;
+      outline-color: #FFBC00;
+      border-radius: 6px;
+      border: 1px solid #DFDFDF;
+      color:#000;
+    }
+    .len{
+      right: 10px;
+      bottom: 10px;
+      position: absolute;
+      color:#999999;
+      font-size: 12px;
+    }
+  }
+  .question-analysis{
+    position: relative;
+    margin-top: 16px;
+    border-radius: 8px;
+    padding:21px 15px 16px;
+    background: #F7F7F7;
+    width: 100%;
+    .question-analysis-item{
+      display: flex;
+      margin-top: 16px;
+    }
+    .question-analysis-item:nth-child(2){
+      margin-top: 0;
+    }
+    .txt{
+      vertical-align: top;
+      font-size: 16px;
+      font-family: PingFang-SC-Medium, PingFang-SC;
+      font-weight: bold;
+      color: #333333;
+      width: 112px;
+    }
+    .img-box{
+      cursor: pointer;
+      display: inline-block;
+      position: relative;
+      width: 134px;
+      height: 134px;
+      img{
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left:0;
+        top:0;
+      }
+      .mask-text-box{
+        width: 100%;
+        height: 30px;
+        position: absolute;
+        bottom: 0;
+        left:0;
+        z-index:2;
+        .mask{
+          background: #000;
+          opacity: 0.4;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          left:0;
+          top:0;
+          z-index:1;
+        }
+        .mask-text{
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          left:0;
+          top:0;
+          z-index:2;
+          line-height: 30px;
+          color:#fff;
+          text-align: center;
+          font-size: 14px;
+        }
+      }
+    }
+    .txt-box{
+      flex:1;
+      display: inline-block;
+      span{
+        color:#333;
+      }
+      .right{
+        color:#44BE57;
+      }
+      .wrong{
+        color:#E02020;
+      }
+      .analysis-txt{
+        color:#666;
+      }
+    }
+  }
+  .reading-question-item{
+    margin-top: 30px;
+    padding:30px;
+    background: #f6f6f6;
+    border-radius: 8px;
+    .question-box{
+      padding-left: 0;
+    }
+    .question-option-list{
+      margin-left: 25px;
+      .question-option{
+        &:last-child{
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+  .fill-blank{
+    display: inline;
+    border-bottom: 1px solid #FFA833;
+    outline: none;
+    word-break: break-all;
+    min-width: 80px;
+    margin-right:5px;
+  }
+}
+
+.imgLookerDialog{
+  .mask{
+    z-index:1001;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.6;
+  }
+  .prev,.next{
+    position: fixed;z-index: 1003;top:50%;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+  }
+  .prev{
+    left:10px;
+    background: url("~@src/assets/img/big-pre.png") no-repeat center;
+    background-size: cover;
+  }
+  .next{
+    right:10px;
+    background: url("~@src/assets/img/big-next.png") no-repeat center;
+    background-size: cover;
+  }
+  .close{
+    position: fixed;
+    z-index:1003;
+    top:10px;
+    right:30px;
+    color:#fff;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+    &:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+  .imgLooker{
+    width: 100%;
+    height: 100%;
+    z-index:1002;
+    position: fixed;
+    left: 0;
+    top: 0;
+    text-align: center;
+    overflow: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.out {
+      display: inherit;
+      text-align: center;
+      overflow: auto;
+      cursor: zoom-out;
+    }
+    &.in {
+      cursor: zoom-in;
+    }
+  }
+}
+/*定义滑块颜色、内阴影及圆角*/
+.imgLooker::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background-color: #fff;
+  &:hover {
+    background-color: #fff;
+  }
+}

package/src/common/const.ts

@@ -0,0 +1,15 @@
+
+
+/**
+ * Created by Allen Liu on 2022/4/22.
+ */
+//全局用常量
+export let questionMapper:any = {
+  '1':'Question_SingleChoice',//单选
+  '2':'Question_MultipleChoice',//多选
+  '3':'Question_SingleChoice',//判断
+  '7':'Question_BriefAnswer',//简答
+  '16':'Question_Programming',//编程
+  '11':'Question_Reading',//阅读
+  '4':'Question_FillBlank'//填空
+}

package/src/components/common/ContentDialog.vue

@@ -0,0 +1,172 @@
+<template>
+  <teleport to="body">
+    <div class="dialog" v-if="visible">
+      <div class="mask"></div>
+      <div class="contentDialog"
+           :style="{'width':width+unit,'height':height+unit,'margin-left':'-'+(width/2)+unit,'margin-top':'-'+(height/2)+unit}">
+        <div class="content">
+          <slot name="content"></slot>
+        </div>
+        <div class="footer" v-if="!hideFooter">
+          <button class="btn btn-cancel"
+                  v-if="!hideCancel"
+                  @click="cancel">{{ cancelText }}</button>
+          <button class="btn btn-confirm"
+                  :class="{'ml20':!hideCancel}"
+                  v-if="!hideConfirm"
+                  @click="confirm">{{ confirmText }}</button>
+        </div>
+      </div>
+    </div>
+
+  </teleport>
+</template>
+
+<script lang="ts">
+import {defineComponent, getCurrentInstance, onMounted, ref, toRef, toRefs,onUnmounted} from 'vue'
+
+
+export default defineComponent({
+  name: 'ContentDialog',
+  emits:['confirm','cancel','update:visible'],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    hideFooter:{
+      type: Boolean,
+      default: false
+    },
+    hideCancel:{
+      type: Boolean,
+      default: false
+    },
+    hideConfirm:{
+      type: Boolean,
+      default: false
+    },
+    title:{
+      type: String,
+      default: '标题'
+    },
+    height:{
+      type: Number,
+      default: 210
+    },
+    width:{
+      type: Number,
+      default: 362
+    },
+    unit:{
+      type: String,
+      default: 'px'
+    },
+    cancelText:{
+      type: String,
+      default: '取消'
+    },
+    confirmText:{
+      type: String,
+      default: '确定'
+    }
+  },
+  setup(props, context) {
+    const currentInstance:any = getCurrentInstance()
+    let _this = currentInstance.proxy
+
+    onMounted(()=>{
+      //挂载时把弹窗实例保存在数组里
+      let dialogIndex = window.contentDialogs.findIndex((item)=>{
+        return item.uid === _this._.uid
+      })
+      if(dialogIndex < 0){
+        window.contentDialogs.push({uid:_this._.uid,scope:_this})
+      }
+    })
+
+
+    onUnmounted(()=>{
+      //销毁时候清楚数组里对应实例
+      let dialogIndex = window.contentDialogs.findIndex((item)=>{
+        return item.uid === _this._.uid
+      })
+      if(dialogIndex > -1){
+        window.contentDialogs.splice(dialogIndex,1)
+      }
+    })
+
+    function confirm(){
+      context.emit('confirm')
+      closeContentDialog()
+    }
+    function cancel(){
+      context.emit('cancel')
+      closeContentDialog()
+    }
+
+    function closeContentDialog(){
+      context.emit("update:visible", false);
+    }
+
+    return {
+      confirm,
+      cancel,
+      closeContentDialog
+    }
+  }
+})
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style  lang="scss">
+/*.dialog{
+  & .mask{
+    z-index:1001;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.6;
+  }
+  & .contentDialog{
+    &.pt50{padding-top: 50px;}
+    &.pb50{padding-bottom: 50px;}
+    z-index:1001;
+    background: #fff;
+    position: fixed;
+    left:50%;
+    top:50%;
+    .header{
+      height: 50px;
+      line-height: 50px;
+      position: absolute;
+      top:0;
+      left:0;
+      width: 100%;
+      .close{
+        position: absolute;
+        right:0;
+        top:0;
+        font-weight: bold;
+        font-size: 30px;
+        cursor: pointer;
+      }
+    }
+    .content{
+      height: 100%;
+      overflow: auto;
+    }
+    .footer{
+      height: 50px;
+      line-height: 50px;
+      width: 100%;
+      position: absolute;
+      left:0;
+      bottom: 0;
+    }
+  }
+}*/
+</style>

package/src/components/common/IframeComponent.vue

@@ -0,0 +1,101 @@
+<template>
+  <teleport to="#app">
+    <div class="iframeBox">
+      <iframe :src ="iframeUrl"
+              id="codeIframe"
+              loop
+              allow="microphone;camera;midi;encrypted-media;unsized-media;vr;xr-spatial-tracking;autoplay"
+              frameborder="0"
+      >
+        <p>Your browser does not support iframes.</p>
+      </iframe>
+    </div>
+  </teleport>
+  <Loading :loading="loading"></Loading>
+</template>
+
+<script lang="ts">
+import {defineComponent, toRefs, reactive, onMounted, onUnmounted} from 'vue'
+interface dataInterface{
+  loading:boolean
+}
+export default defineComponent({
+  props: {
+    iframeUrl:{
+      type:String,
+      default:''
+    }
+  },
+  emits:['uploadCodingFileSuccess','close','closeAndSave','iframeLoaded','getQuestionInfo','saveCodeOnly'],
+  setup(props, context) {
+    let iframe:any = null
+    let data:dataInterface = reactive({
+      loading:true
+    })
+
+
+
+    function iframeLoadEvent(){
+      data.loading = false
+      context.emit('iframeLoaded',iframe)
+    }
+
+    function messageEvent(data:any){
+      // let iframeOrigin = ''+window.location.protocol+'//'+props.iframeUrl.replace(/^(http|https):\/\//g,'').split('/')[0];
+      // if(data.origin===iframeOrigin){
+        //判断是否json字符串
+        if(typeof(data.data)==='string'){
+          try {
+            let obj = JSON.parse(data.data)
+            context.emit(obj.type,obj.data)
+          } catch(e) {
+            let res = data.data
+            context.emit(res,data)
+          }
+        }
+      // }
+    }
+
+
+
+    function removeIframeEvents(){
+      iframe && iframe.removeEventListener('load',iframeLoadEvent)
+      window.removeEventListener('message',messageEvent)
+    }
+
+
+    onMounted(()=>{
+      iframe = document.getElementById('codeIframe')
+      iframe.addEventListener('load',iframeLoadEvent)
+      window.addEventListener('message',messageEvent)
+    })
+
+    onUnmounted(()=>{
+      removeIframeEvents()
+    })
+
+
+
+
+
+    return {
+      ...toRefs(data)
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.iframeBox{
+  z-index:100;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  iframe{
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

package/src/components/common/Loading.vue

@@ -0,0 +1,45 @@
+<template>
+  <teleport to="body">
+    <img class="loading" src="~@src/assets/img/loading.gif" alt="" v-if="loading">
+  </teleport>
+</template>
+
+<script lang="ts">
+import {defineComponent, toRefs, reactive, onMounted, onUnmounted} from 'vue'
+interface dataInterface{
+
+}
+export default defineComponent({
+  props: {
+    loading:{
+      type:Boolean,
+      default:false
+    }
+  },
+  setup(props, context) {
+    let data:dataInterface = reactive({
+
+    })
+
+
+
+    return {
+      ...toRefs(data)
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.loading{
+  width: 50px;
+  height: 50px;
+  display: block;
+  position: fixed;
+  left:50%;
+  top:50%;
+  margin-left:-25px;
+  margin-top: -25px;
+  z-index:99999;
+}
+</style>