Merge branch 'master' of http://60.205.254.193:3000/GCLS/GCLS_Page_Textbook

# Conflicts:
#	src/views/book/courseware/preview/components/audio/AudioPreview.vue

src/styles/mixin.scss

@@ -1,3 +1,18 @@
+@use './variables.scss' as *;
+
+@mixin rich-text($font-size: 16pt) {
+  font-family: 'Arial', 'Helvetica', sans-serif;
+  font-size: $font-size;
+
+  :deep ul {
+    padding-inline-start: 40px;
+
+    li {
+      list-style: disc;
+    }
+  }
+}
+
 @mixin setting-base {
   .serial-number {
     :deep .el-form-item__content {

src/views/book/courseware/create/components/base/audio/AudioSetting.vue

@@ -36,7 +36,7 @@
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 import { snGenerationMethodList, checkString } from '@/views/book/courseware/data/common';
-import { audioViewMethodList } from '@/views/book/courseware/data/audio';
+import { audioViewMethodList, getAudioProperty } from '@/views/book/courseware/data/audio';
 
 export default {
   name: 'AudioSetting',
@@ -47,13 +47,7 @@ export default {
       audioViewMethodList,
       snGenerationMethodList,
       labelPosition: 'left',
-      property: {
-        serial_number: 1, // 序号
-        sn_type: 'number',
-        sn_position: 'top-start', // 序号位置：top-start top top-end 等
-        sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate 重新计算follow 跟随
-        view_method: audioViewMethodList[0].value, // 查看方式：independent 独立 list 列表icon 图标
-      },
+      property: getAudioProperty(),
     };
   },
   methods: {},

src/views/book/courseware/create/index.vue

@@ -126,6 +126,10 @@ export default {
      * @param {string} type 是否退出
      */
     saveCoursewareContent(type = '') {
+      if (type === 'edit') {
+        this.curSettingType = '';
+        this.curSettingId = '';
+      }
       if (type === 'edit' && !this.isChange) {
         this.changeEditStatus();
         return;

src/views/book/courseware/data/audio.js

@@ -11,19 +11,23 @@ export const audioViewMethodList = [
   { value: 'icon', label: '图标' },
 ];
 
+export function getAudioProperty() {
+  return {
+    serial_number: 1, // 序号
+    sn_type: serialNumberTypeList[0].value,
+    sn_position: serialNumberPositionList[0].value,
+    sn_generation_method: snGenerationMethodList[0].value,
+    view_method: audioViewMethodList[0].value,
+  };
+}
+
 export function getAudioData() {
   return {
     type: 'audio',
     title: '音频',
     single_size: 100, // 单位MB
     total_size: 1024, // 单位MB
-    property: {
-      serial_number: 1, // 序号
-      sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
-      sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
-      sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
-      view_method: audioViewMethodList[0].value, // 查看方式：independent独立 list列表 icon图标
-    },
+    property: getAudioProperty(),
     file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']
     // 内容中包含的文件列表,

src/views/book/courseware/preview/components/audio/Audio.vue → src/views/book/courseware/preview/components/audio/AudioPreview.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="audio_area" :style="getAreaStyle()">
-    <div class="sn-position" :style="getJustifyContentStyle()">
-      {{ data.property.serial_number }}
-    </div>
+    <SerialNumberPosition :property="data.property" />
+
     <div class="main">
       <ul v-if="'list' === data.property.view_method" class="view_list">
         <li v-for="(file, i) in data.file_list" :key="i">
@@ -88,46 +87,6 @@ export default {
         this.curAudioIndex = this.data.file_id_list.length - 1;
       }
     },
-    /**
-     * 得到序号外部样式
-     */
-    getAreaStyle() {
-      const position = this.data.property.sn_position;
-      let grid = '';
-
-      if (position.includes('right')) {
-        grid = `"main position" / 1fr auto`;
-      } else if (position.includes('left')) {
-        grid = `"position main" / auto 1fr`;
-      } else if (position.includes('top')) {
-        grid = `"position" auto "main" 1fr`;
-      } else if (position.includes('bottom')) {
-        grid = `"main" 1fr "position" auto`;
-      }
-
-      return {
-        grid,
-      };
-    },
-    /**
-     * 得到序号位置样式
-     */
-    getJustifyContentStyle() {
-      const position = this.data.property.sn_position;
-      let placeSelf = '';
-
-      if (position.includes('start')) {
-        placeSelf = 'flex-start';
-      } else if (position.includes('end')) {
-        placeSelf = 'flex-end';
-      } else {
-        placeSelf = 'center';
-      }
-
-      return {
-        placeSelf,
-      };
-    },
   },
 };
 </script>
@@ -138,10 +97,6 @@ export default {
   gap: 6px;
   padding: 8px;
 
-  .sn-position {
-    grid-area: position;
-  }
-
   > .main {
     display: flex;
     margin: 4px auto;
@@ -162,7 +117,8 @@ export default {
       width: 100%;
 
       > li {
-        width: 23%;
+        flex: 0 0 25%;
+        min-width: 120px;
         height: 46px;
       }
     }
@@ -173,14 +129,12 @@ export default {
       column-gap: 12px;
 
       :deep .el-carousel {
-        display: flex;
         flex: 1;
-        align-items: center;
+        max-height: 500px;
+        padding: 20%;
         background-color: #d9d9d9;
 
         &__container {
-          width: 50%;
-          max-width: 500px;
           height: 100px;
           max-height: 500px;
           margin: 0 auto;
@@ -195,10 +149,9 @@ export default {
         display: flex;
         flex-direction: column;
         row-gap: 2px;
-        width: 20%;
-        min-width: 110px;
+        min-width: 200px;
         max-height: 500px;
-        overflow-y: auto;
+        overflow: auto;
       }
     }
   }

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -1,3 +1,5 @@
+import SerialNumberPosition from './SerialNumberPosition.vue';
+
 import { GetCoursewareComponentContent_View } from '@/api/book';
 
 const mixin = {
@@ -14,6 +16,9 @@ const mixin = {
       required: true,
     },
   },
+  components: {
+    SerialNumberPosition,
+  },
   created() {
     this.getCoursewareComponentContent_View();
   },
@@ -25,6 +30,27 @@ const mixin = {
         },
       );
     },
+    /**
+     * 得到序号外部样式
+     */
+    getAreaStyle() {
+      const position = this.data.property.sn_position;
+      let grid = '';
+
+      if (position.includes('right')) {
+        grid = `"main position" / 1fr auto`;
+      } else if (position.includes('left')) {
+        grid = `"position main" / auto 1fr`;
+      } else if (position.includes('top')) {
+        grid = `"position" auto "main" 1fr`;
+      } else if (position.includes('bottom')) {
+        grid = `"main" 1fr "position" auto`;
+      }
+
+      return {
+        grid,
+      };
+    },
   },
 };
 

src/views/book/courseware/preview/components/common/SerialNumberPosition.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="sn-position" :style="getJustifyContentStyle()">
+    {{ property.serial_number }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SerialNumberPosition',
+  props: {
+    property: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    /**
+     * 得到序号位置样式
+     */
+    getJustifyContentStyle() {
+      const position = this.property.sn_position;
+      let placeSelf = '';
+
+      if (position.includes('start')) {
+        placeSelf = 'flex-start';
+      } else if (position.includes('end')) {
+        placeSelf = 'flex-end';
+      } else {
+        placeSelf = 'center';
+      }
+
+      return {
+        placeSelf,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sn-position {
+  grid-area: position;
+}
+</style>

src/views/book/courseware/preview/components/common/data.js

@@ -1,7 +1,7 @@
-import AudioPreview from '../audio/Audio.vue';
+import AudioPreview from '../audio/AudioPreview.vue';
 import DividerPreview from '../divider/Divider.vue';
 import SpacingPreview from '../spacing/Spacing.vue';
-import PicturePreview from '../picture/Picture.vue';
+import PicturePreview from '../picture/PicturePreview.vue';
 import VideoPreview from '../video/Video.vue';
 
 export const previewComponentMap = {

src/views/book/courseware/preview/components/picture/Picture.vue → src/views/book/courseware/preview/components/picture/PicturePreview.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="picture_area" :style="getAreaStyle()">
-    <div class="sn-position" :style="getJustifyContentStyle()">
-      {{ data.property.serial_number }}
-    </div>
+    <SerialNumberPosition :property="data.property" />
+
     <div class="main">
       <div class="view_area">
         <el-carousel
@@ -16,12 +15,7 @@
             <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
           </el-carousel-item>
         </el-carousel>
-        <ul
-          class="view_list"
-          :style="{
-            columnGap: 'list' === data.property.view_method ? '1%' : '4%',
-          }"
-        >
+        <ul class="view_list">
           <li v-for="(file, i) in data.file_list" :key="i" @click="handleIndicatorClick(i)">
             <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
           </li>
@@ -44,7 +38,6 @@ export default {
       curImgIndex: 0,
     };
   },
-  computed: {},
   methods: {
     handleIndicatorClick(index) {
       // 获取 Carousel 实例
@@ -52,47 +45,6 @@ export default {
       // 切换到对应索引的图片
       carousel.setActiveItem(index);
     },
-
-    /**
-     * 得到序号外部样式
-     */
-    getAreaStyle() {
-      const position = this.data.property.sn_position;
-      let grid = '';
-
-      if (position.includes('right')) {
-        grid = `"main position" / 1fr auto`;
-      } else if (position.includes('left')) {
-        grid = `"position main" / auto 1fr`;
-      } else if (position.includes('top')) {
-        grid = `"position" auto "main" 1fr`;
-      } else if (position.includes('bottom')) {
-        grid = `"main" 1fr "position" auto`;
-      }
-
-      return {
-        grid,
-      };
-    },
-    /**
-     * 得到序号位置样式
-     */
-    getJustifyContentStyle() {
-      const position = this.data.property.sn_position;
-      let placeSelf = '';
-
-      if (position.includes('start')) {
-        placeSelf = 'flex-start';
-      } else if (position.includes('end')) {
-        placeSelf = 'flex-end';
-      } else {
-        placeSelf = 'center';
-      }
-
-      return {
-        placeSelf,
-      };
-    },
   },
 };
 </script>
@@ -103,10 +55,6 @@ export default {
   gap: 6px;
   padding: 8px;
 
-  .sn-position {
-    grid-area: position;
-  }
-
   > .main {
     display: flex;
     margin: 4px auto;
@@ -145,21 +93,15 @@ export default {
       }
 
       .view_list {
-        display: flex;
-        flex-wrap: wrap;
-        row-gap: 14px;
-
-        li::before {
-          display: inline-block;
-          padding-bottom: 100%;
-          content: '';
-        }
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-auto-rows: auto;
+        gap: 21px 32px;
 
         li {
           display: flex;
           align-items: center;
           justify-content: center;
-          width: 13%;
           background-color: #d9d9d9;
         }