优化代码

forge.config.js

@@ -1,47 +0,0 @@
-const { FusesPlugin } = require('@electron-forge/plugin-fuses');
-const { FuseV1Options, FuseVersion } = require('@electron/fuses');
-
-module.exports = {
-  packagerConfig: {
-    asar: true,
-  },
-  rebuildConfig: {},
-  makers: [
-    {
-      name: '@electron-forge/maker-squirrel',
-      platforms: ['win32'],
-      config: {
-        name: 'electron-vue',
-      },
-    },
-    {
-      name: '@electron-forge/maker-zip',
-      platforms: ['darwin'],
-    },
-    // {
-    //   name: '@electron-forge/maker-deb',
-    //   config: {},
-    // },
-    // {
-    //   name: '@electron-forge/maker-rpm',
-    //   config: {},
-    // },
-  ],
-  plugins: [
-    {
-      name: '@electron-forge/plugin-auto-unpack-natives',
-      config: {},
-    },
-    // Fuses 用于启用/禁用各种Electron功能
-    // 在打包时，在对应用程序进行代码签名之前
-    new FusesPlugin({
-      version: FuseVersion.V1,
-      [FuseV1Options.RunAsNode]: false,
-      [FuseV1Options.EnableCookieEncryption]: true,
-      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
-      [FuseV1Options.EnableNodeCliInspectArguments]: false,
-      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
-      [FuseV1Options.OnlyLoadAppFromAsar]: true,
-    }),
-  ],
-};

package.json

@@ -10,15 +10,12 @@
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "start": "electron-forge start",
-    "package": "electron-forge package",
-    "make": "electron-forge make"
+    "builder": "electron-builder",
+    "builder:mac": "electron-builder --mac"
   },
   "dependencies": {
-    "@electron-forge/plugin-fuses": "^7.3.1",
     "axios": "^1.6.8",
     "core-js": "^3.36.1",
-    "electron-squirrel-startup": "^1.0.0",
     "element-ui": "^2.15.14",
     "js-cookie": "^3.0.5",
     "md5": "^2.3.0",
@@ -28,14 +25,8 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.3",
+    "@babel/core": "^7.24.4",
     "@babel/eslint-parser": "^7.24.1",
-    "@electron-forge/cli": "^7.3.1",
-    "@electron-forge/maker-deb": "^7.3.1",
-    "@electron-forge/maker-rpm": "^7.3.1",
-    "@electron-forge/maker-squirrel": "^7.3.1",
-    "@electron-forge/maker-zip": "^7.3.1",
-    "@electron-forge/plugin-auto-unpack-natives": "^7.3.1",
     "@electron/fuses": "^1.8.0",
     "@rushstack/eslint-patch": "^1.10.1",
     "@types/md5": "^2.3.5",
@@ -45,7 +36,8 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/preload-webpack-plugin": "^2.0.0",
     "compression-webpack-plugin": "^6.1.2",
-    "electron": "^29.1.6",
+    "electron": "^29.2.0",
+    "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.24.0",
@@ -53,7 +45,7 @@
     "patch-package": "^8.0.0",
     "postcss-html": "^1.6.0",
     "prettier": "^3.2.5",
-    "sass": "^1.72.0",
+    "sass": "^1.74.1",
     "sass-loader": "^14.1.1",
     "stylelint": "^15.11.0",
     "stylelint-config-recess-order": "^4.6.0",
@@ -66,6 +58,46 @@
     "svgo": "^3.2.0",
     "vue-template-compiler": "^2.6.14"
   },
+  "build": {
+    "appId": "com.gcls.page.textbook",
+    "productName": "gcls_page_textbook",
+    "directories": {
+      "output": "out"
+    },
+    "win": {
+      "target": "nsis",
+      "icon": "./public/icon.png"
+    },
+    "linux": {
+      "target": "AppImage",
+      "icon": "./public/icon.png"
+    },
+    "mac": {
+      "target": "dmg",
+      "icon": "./public/icon.png"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true,
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true,
+      "perMachine": false
+    },
+    "dmg": {
+      "contents": [
+        {
+          "x": 110,
+          "y": 150
+        },
+        {
+          "x": 240,
+          "y": 150,
+          "type": "link",
+          "path": "/Applications"
+        }
+      ]
+    }
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions",

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

@@ -4,12 +4,17 @@
       <UploadFile
         :courseware-id="courseware_id"
         :component-id="id"
-        :module-data="data"
+        :type="data.type"
+        :single-size="data.single_size"
+        :total-size="data.total_size"
+        :file-list="data.file_list"
+        :file-id-list="data.file_id_list"
+        :file-info-list="data.file_info_list"
         :label-text="labelText"
         :accept-file-type="acceptFileType"
         :upload-tip="uploadTip"
         :icon-class="iconClass"
-        @saveDate="saveDate"
+        @updateFileList="updateFileList"
       />
     </template>
   </ModuleBase>
@@ -34,8 +39,10 @@ export default {
     };
   },
   methods: {
-    saveDate(content) {
-      if (content) this.data = content;
+    updateFileList({ file_list, file_id_list, file_info_list }) {
+      this.data.file_list = file_list;
+      this.data.file_id_list = file_id_list;
+      this.data.file_info_list = file_info_list;
     },
   },
 };

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

@@ -17,63 +17,15 @@
       </el-form-item>
       <el-form-item label="序号位置">
         <div class="grid-container">
-          <div class="top">
-            <el-button
-              :class="['top-start', { active: 'top-start' === property.sn_position }]"
-              @click="changeNumberPosition('top-start')"
-            />
-            <el-button
-              :class="['top', { active: 'top' === property.sn_position }]"
-              @click="changeNumberPosition('top')"
-            />
-            <el-button
-              :class="['top-end', { active: 'top-end' === property.sn_position }]"
-              @click="changeNumberPosition('top-end')"
-            />
-          </div>
-          <div class="left">
-            <el-button
-              :class="['left-start', { active: 'left-start' === property.sn_position }]"
-              @click="changeNumberPosition('left-start')"
-            />
-            <el-button
-              :class="['left', { active: 'left' === property.sn_position }]"
-              @click="changeNumberPosition('left')"
-            />
-            <el-button
-              :class="['left-end', { active: 'left-end' === property.sn_position }]"
-              @click="changeNumberPosition('left-end')"
-            />
-          </div>
+          <el-button
+            v-for="{ value } in serialNumberPositionList"
+            :key="value"
+            :class="[value, { active: value === property.sn_position }]"
+            :style="{ gridArea: value }"
+            @click="changeNumberPosition(value)"
+          />
+
           <div class="main"></div>
-          <div class="right">
-            <el-button
-              :class="['right-start', { active: 'right-start' === property.sn_position }]"
-              @click="changeNumberPosition('right-start')"
-            />
-            <el-button
-              :class="['right', { active: 'right' === property.sn_position }]"
-              @click="changeNumberPosition('right')"
-            />
-            <el-button
-              :class="['right-end', { active: 'right-end' === property.sn_position }]"
-              @click="changeNumberPosition('right-end')"
-            />
-          </div>
-          <div class="bottom">
-            <el-button
-              :class="['bottom-start', { active: 'bottom-start' === property.sn_position }]"
-              @click="changeNumberPosition('bottom-start')"
-            />
-            <el-button
-              :class="['bottom', { active: 'bottom' === property.sn_position }]"
-              @click="changeNumberPosition('bottom')"
-            />
-            <el-button
-              :class="['bottom-end', { active: 'bottom-end' === property.sn_position }]"
-              @click="changeNumberPosition('bottom-end')"
-            />
-          </div>
         </div>
       </el-form-item>
       <el-divider />
@@ -98,6 +50,7 @@ import {
   audioViewMethodList,
   switchSerialNumber,
   checkString,
+  serialNumberPositionList,
 } from '@/views/book/courseware/data/common';
 
 export default {
@@ -107,6 +60,7 @@ export default {
     return {
       switchSerialNumber,
       checkString,
+      serialNumberPositionList,
       snGenerationMethodList,
       audioViewMethodList,
       labelPosition: 'left',
@@ -133,7 +87,7 @@ export default {
   methods: {
     /**
      * @description 设置属性
-     * @param {Object} property 属性
+     * @param {object} property 属性
      */
     setSetting(property) {
       this.isSet = true;
@@ -169,63 +123,35 @@ export default {
     margin-right: 16px;
   }
 
-  .top {
-    grid-area: top;
-    column-gap: 8px;
-    justify-content: center;
-  }
-
-  .left {
-    flex-direction: column;
-    grid-area: left;
-    row-gap: 4px;
-  }
-
   .main {
     grid-area: main;
   }
 
-  .right {
-    flex-direction: column;
-    grid-area: right;
-    row-gap: 4px;
-  }
-
-  .bottom {
-    grid-area: bottom;
-    column-gap: 8px;
-    justify-content: center;
-  }
-
   .grid-container {
     display: grid;
     grid:
-      'top top top top top top'
-      'left main main main main right'
-      'bottom bottom bottom bottom bottom bottom';
+      '. top-start top top-end .'
+      'left-start main main main right-start'
+      'left main main main right'
+      'left-end main main main right-end'
+      '. bottom-start bottom bottom-end .';
+    place-items: center center;
     width: 134px;
     height: 80px;
-    padding: 8px 8px 0;
+    padding: 8px;
     line-height: 10px;
     border: 1px solid #ebebeb;
 
-    div {
-      display: flex;
-      margin: 0 auto;
-      text-align: center;
-      background-color: rgba(255, 255, 255, 8%);
-
-      .el-button {
-        width: 16px;
-        height: 8px;
-        padding: 0;
-        margin: 0;
-        border: 1px solid #e4e4e4;
-        border-radius: 2px;
+    .el-button {
+      width: 16px;
+      height: 8px;
+      padding: 0;
+      margin: 0;
+      border: 1px solid #e4e4e4;
+      border-radius: 2px;
 
-        &.active {
-          background-color: $setting-active-color;
-        }
+      &.active {
+        background-color: $setting-active-color;
       }
     }
 

src/views/book/courseware/create/components/base/common/UploadFile.vue

@@ -86,9 +86,29 @@ export default {
       type: String,
       default: '',
     },
-    moduleData: {
-      type: Object,
-      default: () => ({}),
+    fileList: {
+      type: Array,
+      default: () => [],
+    },
+    fileIdList: {
+      type: Array,
+      default: () => [],
+    },
+    fileInfoList: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+    singleSize: {
+      type: Number,
+      default: 100,
+    },
+    totalSize: {
+      type: Number,
+      default: 1024,
     },
   },
   data() {
@@ -96,17 +116,18 @@ export default {
       curFile: null,
       conversionSize,
       visible: false,
-      content: {},
+      content: {
+        file_list: this.fileList,
+        file_id_list: this.fileIdList,
+        file_info_list: this.fileInfoList,
+      },
     };
   },
-  computed: {},
   watch: {
-    moduleData: {
+    content: {
       handler(val) {
-        this.content = val;
-        this.$emit('saveDate', this.content);
+        this.$emit('updateFileList', val);
       },
-      immediate: true,
       deep: true,
     },
   },
@@ -138,8 +159,8 @@ export default {
     // 文件校验
     afterSelectFile(file) {
       const fileName = file.name;
-      let singleSizeTip = `文件[${fileName}]大小超过 ${this.content.single_size}MB,被移除！`;
-      if (file.size > this.content.single_size * 1024 * 1024) {
+      let singleSizeTip = `文件[${fileName}]大小超过 ${this.singleSize}MB,被移除！`;
+      if (file.size > this.singleSize * 1024 * 1024) {
         this.$message.error(singleSizeTip);
         this.$refs.upload.handleRemove(file);
         return false;
@@ -149,10 +170,10 @@ export default {
       let fileType = [];
       let typeTip = '';
 
-      if (this.content.type === 'audio') {
+      if (this.type === 'audio') {
         fileType = ['mp3', 'acc', 'wma'];
         typeTip = '音频文件只能是 mp3、acc、wma 格式!';
-      } else if (this.content.type === 'picture') {
+      } else if (this.type === 'picture') {
         fileType = ['jpg', 'png', 'jpeg'];
         typeTip = '图片文件只能是 jpg、png、jpeg 格式!';
       }
@@ -173,8 +194,8 @@ export default {
         return false;
       }
       const totalSize = files.reduce((sum, cur) => sum + Number(cur.size || 0), 0);
-      if (totalSize > this.content.total_size * 1024 * 1024) {
-        this.$message.error(`文件总大小不能超过${conversionSize(this.content.total_size * 1024 * 1024)}!`);
+      if (totalSize > this.totalSize * 1024 * 1024) {
+        this.$message.error(`文件总大小不能超过${conversionSize(this.totalSize * 1024 * 1024)}!`);
         return false;
       }
 
@@ -193,7 +214,7 @@ export default {
         }).then(({ file_info_list }) => {
           let file_index = this.content.file_list.findIndex((p) => p.uid === file.uid);
           if (file_index > -1) {
-            if (this.content.type === 'picture') {
+            if (this.type === 'picture') {
               this.content.file_info_list[file_index] = {
                 file_id: file_info_list[0].file_id,
                 file_name: file_info_list[0].file_name,

src/views/book/courseware/create/components/createCanvas.vue

@@ -41,7 +41,7 @@
                 data-type="row"
               ></span>
               <span
-                :key="`left-${k}`"
+                :key="`left-${i}-${j}-${k}`"
                 :style="{ gridArea: `left-${grid.grid_area}` }"
                 :data-row="i"
                 :data-col="j"
@@ -53,7 +53,7 @@
                 :is="componentList[grid.type]"
                 :id="grid.id"
                 ref="component"
-                :key="k"
+                :key="`grid-${i}-${j}-${k}-${grid.id}`"
                 :class="[grid.id]"
                 :style="{ gridArea: grid.grid_area, height: grid.height, marginTop: grid.row !== 1 ? '16px' : '0' }"
                 :delete-component="deleteComponent(i, j, k)"
@@ -61,7 +61,7 @@
                 @showSetting="showSetting"
               />
               <span
-                :key="`right-${k}`"
+                :key="`right-${i}-${j}-${k}`"
                 :style="{ gridArea: `right-${grid.grid_area}` }"
                 :data-row="i"
                 :data-col="j"
@@ -482,7 +482,7 @@ export default {
 
       if (this.enterCanvas) {
         if (this.curRow >= -1 && this.curCol <= -1) {
-          this.data.row_list.splice(this.curRow + 1, 0, this.calculateRowInsertedObject());
+          this.calculateRowInsertedObject();
         }
 
         if (this.curRow >= -1 && this.curCol > -1 && this.curGrid <= -1) {
@@ -611,7 +611,7 @@ export default {
       const id = `ID-${getRandomNumber(12)}`;
       const letter = `L${getRandomNumber(6)}`;
 
-      return {
+      this.data.row_list.splice(this.curRow + 1, 0, {
         width_list: ['100%'],
         col_list: [
           {
@@ -629,7 +629,7 @@ export default {
             ],
           },
         ],
-      };
+      });
     },
     /**
      * 获取拖拽元素和画布的边距差值

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

@@ -1,4 +1,9 @@
-import { snGenerationMethodList, audioViewMethodList } from '@/views/book/courseware/data/common';
+import {
+  snGenerationMethodList,
+  audioViewMethodList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+} from '@/views/book/courseware/data/common';
 
 export function getAudioData() {
   return {
@@ -9,8 +14,8 @@ export function getAudioData() {
     total_size: 1024, // 单位MB
     property: {
       serial_number: 1, // 序号
-      sn_type: 'number', // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
-      sn_position: 'top-start', // 序号位置：top-start top top-end，left-start left left-end等
+      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图标
     },

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

@@ -25,6 +25,22 @@ export const serialNumberTypeList = [
   { value: 'capital', label: '大写字母' },
 ];
 
+// 序号位置
+export const serialNumberPositionList = [
+  { value: 'top-start', justifyContent: 'flex-start' },
+  { value: 'top', justifyContent: 'center' },
+  { value: 'top-end', justifyContent: 'flex-end' },
+  { value: 'left-start', justifyContent: 'flex-start' },
+  { value: 'left', justifyContent: 'center' },
+  { value: 'left-end', justifyContent: 'flex-end' },
+  { value: 'right-start', justifyContent: 'flex-start' },
+  { value: 'right', justifyContent: 'center' },
+  { value: 'right-end', justifyContent: 'flex-end' },
+  { value: 'bottom-start', justifyContent: 'flex-start' },
+  { value: 'bottom', justifyContent: 'center' },
+  { value: 'bottom-end', justifyContent: 'flex-end' },
+];
+
 /**
  * 判断序号类型
  * @param {string} str

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

@@ -1,26 +1,18 @@
 <template>
   <div class="audio_area">
-    <div class="top">
-      <span v-show="'top-start' === data.property.sn_position" style="justify-content: start">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'top' === data.property.sn_position" style="justify-content: center">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'top-end' === data.property.sn_position" style="justify-content: end">
-        {{ data.property.serial_number }}
-      </span>
+    <div
+      v-show="data.property.sn_position.includes('top')"
+      class="top"
+      :style="getJustifyContentStyle(data.property.sn_position)"
+    >
+      {{ data.property.serial_number }}
     </div>
-    <div class="left">
-      <span v-show="'left-start' === data.property.sn_position" style="justify-content: start">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'left' === data.property.sn_position" style="justify-content: center">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'left-end' === data.property.sn_position" style="justify-content: end">
-        {{ data.property.serial_number }}
-      </span>
+    <div
+      v-show="data.property.sn_position.includes('left')"
+      class="left"
+      :style="getJustifyContentStyle(data.property.sn_position)"
+    >
+      {{ data.property.serial_number }}
     </div>
     <div class="main">
       <ul v-if="'list' === data.property.view_method" class="view_list">
@@ -62,27 +54,19 @@
         </ul>
       </div>
     </div>
-    <div class="right">
-      <span v-show="'right-start' === data.property.sn_position" style="justify-content: start">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'right' === data.property.sn_position" style="justify-content: center">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'right-end' === data.property.sn_position" style="justify-content: end">
-        {{ data.property.serial_number }}
-      </span>
+    <div
+      v-show="data.property.sn_position.includes('right')"
+      class="right"
+      :style="getJustifyContentStyle(data.property.sn_position)"
+    >
+      {{ data.property.serial_number }}
     </div>
-    <div class="bottom">
-      <span v-show="'bottom-start' === data.property.sn_position" style="justify-content: start">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'bottom' === data.property.sn_position" style="justify-content: center">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'bottom-end' === data.property.sn_position" style="justify-content: end">
-        {{ data.property.serial_number }}
-      </span>
+    <div
+      v-show="data.property.sn_position.includes('bottom')"
+      class="bottom"
+      :style="getJustifyContentStyle(data.property.sn_position)"
+    >
+      {{ data.property.serial_number }}
     </div>
   </div>
 </template>
@@ -128,6 +112,18 @@ export default {
         this.curAudioIndex = this.data.file_id_list.length - 1;
       }
     },
+    /**
+     * 得到位置样式
+     * @param {string} position 位置
+     */
+    getJustifyContentStyle(position) {
+      if (position.includes('start')) {
+        return 'justify-content: start';
+      } else if (position.includes('end')) {
+        return 'justify-content: end';
+      }
+      return 'justify-content: center';
+    },
   },
 };
 </script>
@@ -143,6 +139,7 @@ export default {
   width: 100%;
 
   > div {
+    display: flex;
     margin: 4px auto;
 
     > span {