升级 Vue 到 2.7

.eslintrc.js

@@ -25,8 +25,6 @@ module.exports = {
 
   extends: [
     'eslint:recommended',
-    'plugin:vue/essential',
-    'plugin:vue/strongly-recommended',
     'plugin:vue/recommended',
     'plugin:prettier/recommended',
     '@vue/eslint-config-prettier'

package.json

@@ -28,7 +28,7 @@
     "md5": "^2.3.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
-    "vue": "^2.6.14",
+    "vue": "^2.7.0",
     "vue-i18n": "^8.27.2",
     "vue-pdf": "^4.3.0",
     "vue-router": "^3.5.4",
@@ -52,7 +52,7 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "compression-webpack-plugin": "^6.1.1",
     "eslint": "^7.32.0",
-    "eslint-plugin-prettier": "^4.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.1.1",
     "html-webpack-plugin": "^5.5.0",
     "postcss": "^8.4.14",
@@ -70,8 +70,9 @@
     "stylelint-webpack-plugin": "^3.3.0",
     "svg-sprite-loader": "^6.0.11",
     "svgo": "^2.8.0",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.14"
+    "vue-loader": "^15.10.0",
+    "vue-template-compiler": "^2.7.0",
+    "vue-demi":"^0.13.1"
   },
   "browserslist": [
     "> 1%",

src/components/preview/PreviewCourse.vue

@@ -44,7 +44,7 @@
           :src="`${$store.state.app.config.doc_preview_service_address}/onlinePreview?url=${fileUrl}`"
           width="100%"
           height="540px"
-        />
+        ></iframe>
       </div>
     </template>
 
@@ -181,11 +181,11 @@ export default {
 .preview-course {
   @include dialog;
 
-  ::v-deep .el-dialog__header {
+  :deep .el-dialog__header {
     font-weight: bold;
   }
 
-  ::v-deep .el-dialog__body {
+  :deep .el-dialog__body {
     min-height: 300px;
   }
 }

src/views/canvas/index.vue

@@ -1,48 +1,46 @@
 <template>
   <div class="canvas-wrap">
-    <canvas id="canvas" ref="canvas" width="520" height="920"></canvas>
+    <canvas ref="whiteboard" width="920" height="520"></canvas>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
 import { paintData } from './data';
-export default {
-  data() {
-    return {
-      paintData,
-      context: null
-    };
-  },
-  mounted() {
-    this.context = this.$refs.canvas.getContext('2d');
-    this.paint();
-  },
-  methods: {
-    paint() {
-      this.paintData.forEach(({ action, value }) => {
-        if (action !== 'draw') return;
-        const { fileName, data } = value;
-        if (fileName !== 'WhiteBorad') return;
-        const { alpha, color: color16, thickness, type, draw, width, height } = data;
-        // 将十进制的颜色，转为十六进制
-        let color = Number(color16).toString(16);
-        color = `#${color.length < 6 ? '0'.repeat(6 - color.length) : ''}${color}`;
+const whiteboard = ref(null);
+const context = ref(null);
 
-        this.context.beginPath();
-        draw.forEach(({ x, y }, i) => {
-          if (i === 0) this.context.moveTo(width * x, height * y);
-          else {
-            this.context.lineWidth = Number(thickness);
-            this.context.strokeStyle = type === 10 ? '#fff' : color;
-            console.log(width * x, height * y);
-            this.context.lineTo(width * x, height * y);
-          }
-        });
-        this.context.stroke();
-      });
+function paint() {
+  paintData.forEach(({ action, value }) => {
+    if (action !== 'draw') return;
+    const { fileName, data } = value;
+    if (fileName !== 'WhiteBorad') return;
+    const { color: color16, thickness, type, draw, width, height } = data;
+    // 将十进制的颜色，转为十六进制
+    let color = Number(color16).toString(16);
+    color = `#${color.length < 6 ? '0'.repeat(6 - color.length) : ''}${color}`;
+    if (draw.length <= 0) return;
+
+    context.value.beginPath();
+    context.value.moveTo(width * draw[0].x, height * draw[0].y);
+    if (type === 10) {
+      context.value.lineWidth = (3 * 2 * (thickness * width)) / (draw[0].ppt_width || 1295);
+    } else {
+      context.value.lineWidth = (thickness * width) / (draw[0].ppt_width || 1295);
     }
-  }
-};
+    context.value.lineJoin = 'round';
+    context.value.strokeStyle = type === 10 ? '#fff' : color;
+    draw.forEach(({ x, y }) => {
+      context.value.lineTo(width * x, height * y);
+    });
+    context.value.stroke();
+  });
+}
+
+onMounted(() => {
+  context.value = whiteboard.value.getContext('2d');
+  paint();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -54,8 +52,9 @@ export default {
   border: 1px solid #ccc;
 
   canvas {
-    width: 920px;
-    height: 520px;
+    position: relative;
+    z-index: 9999;
+    display: block;
   }
 }
 </style>

src/views/live/teacher/group.vue

@@ -73,7 +73,7 @@
 
         <div v-show="isGroup" class="group-discussion" :style="{ height: isAudit ? '404px' : '468px' }">
           <div v-for="(item, i) in streamList" :key="item.id()" class="group-wrapper">
-            <div :id="`group-${i}`" class="group-box" />
+            <div :id="`group-${i}`" class="group-box"></div>
             <div class="live-wrapper-stream">
               {{ searchStudentName(item.id()) }}
               <svg-icon :icon-class="item.hasAudio() ? 'mike-on-grey' : ''" />
@@ -106,7 +106,7 @@
           <div class="button-group-left">
             <span class="stop-group" @click="stopGroup">{{ $t('Key404') }}</span>
           </div>
-          <div class="button-group-right" />
+          <div class="button-group-right"></div>
         </div>
         <div class="live-container-left-chat">
           <div class="chat-top">
@@ -143,12 +143,12 @@
       <!-- 右侧 -->
       <div class="live-container-right">
         <div class="live-teacher-lens" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false">
-          <div id="live" />
+          <div id="live"></div>
           <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
             <div>
               {{ roomInfo.teacher_name }}
             </div>
-            <div />
+            <div></div>
           </div>
         </div>
         <div class="student-list">
@@ -171,7 +171,7 @@
                     <el-avatar icon="el-icon-user" size="small" :src="el.student_image_url" />
                     <span class="name">{{ el.student_name }}</span>
                   </div>
-                  <div class="student-list-right" />
+                  <div class="student-list-right"></div>
                 </li>
               </template>
             </template>
@@ -286,7 +286,7 @@ export default {
       }
     },
     streamList(newVal) {
-      const list = this.student_list.filter(item => {
+      const list = this.student_list.filter((item) => {
         let isNoStream = true;
         for (let i = 0; i < newVal.length; i++) {
           if (newVal[i].id().split('-')[0] === item.room_user_id) isNoStream = false;
@@ -328,7 +328,7 @@ export default {
   },
   beforeDestroy() {
     common.closeVideo('main');
-    this.streamList.forEach(item => {
+    this.streamList.forEach((item) => {
       common.unSubscribeStream(item);
     });
   },
@@ -431,7 +431,7 @@ export default {
     searchStudentName(id) {
       const uid = id.split('-')[0];
       if (uid) {
-        const student = this.student_list.find(item => item.room_user_id === uid);
+        const student = this.student_list.find((item) => item.room_user_id === uid);
         return student ? student.student_name : '';
       }
       return '';
@@ -440,7 +440,7 @@ export default {
     isMobile(id) {
       const uid = id.split('-')[0];
       if (uid) {
-        const student = this.student_list.find(item => item.room_user_id === uid);
+        const student = this.student_list.find((item) => item.room_user_id === uid);
         return student ? student.is_mobile === 'true' : false;
       }
       return false;
@@ -463,7 +463,7 @@ export default {
         this.room_id = '';
         this.session_id = '';
         common.closeVideo('main');
-        this.streamList.forEach(item => {
+        this.streamList.forEach((item) => {
           common.unSubscribeStream(item);
         });
         this.streamList = [];
@@ -495,7 +495,7 @@ export default {
 
         const list = [];
         this.group_list.forEach(({ group_id, student_list }) => {
-          student_list.forEach(item => {
+          student_list.forEach((item) => {
             list.push({
               group_id,
               ...item
@@ -553,7 +553,7 @@ $live-bc: #3d3938;
         border-radius: 4px;
       }
 
-      ::v-deep .el-popover__reference-wrapper {
+      :deep .el-popover__reference-wrapper {
         margin-right: 8px;
       }
     }

src/views/task_details/TaskTop.vue

@@ -144,7 +144,7 @@ export default {
       margin-bottom: 16px;
       white-space: pre-wrap;
 
-      ::v-deep a {
+      :deep a {
         color: #18a0fb;
       }
 

src/views/task_details/student/index.vue

@@ -550,7 +550,7 @@ $bor-color: #d9d9d9;
     .task-require {
       white-space: pre-wrap;
 
-      ::v-deep a {
+      :deep a {
         color: #18a0fb;
       }
     }

src/views/teacher/student_list/index.vue

@@ -254,7 +254,7 @@ export default {
       min-height: calc(100vh - 343px);
       margin-top: 0;
 
-      ::v-deep .el-table__header {
+      :deep .el-table__header {
         display: none;
       }