优化video

package-lock.json

@@ -43,7 +43,7 @@
         "prettier": "^3.2.5",
         "sass": "^1.75.0",
         "sass-loader": "^14.2.1",
-        "stylelint": "^15.11.0",
+        "stylelint": "^16.0.2",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-recommended-scss": "^14.0.0",
         "stylelint-config-recommended-vue": "^1.5.0",
@@ -2693,9 +2693,8 @@
     },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.2",
-      "resolved": "https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
-      "integrity": "sha512-hw437iINopmQuxWPSUEvqE56NCPsiU8N4AYtfHmJFckclktzK9YQJieD3XkDCDH4OjL+C7zgPUh73R/nrcHrqw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
@@ -3057,16 +3056,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/plist": {
-      "version": "3.0.5",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@types/node": "*",
-        "xmlbuilder": ">=11.0.1"
-      }
-    },
     "node_modules/@types/qs": {
       "version": "6.9.15",
       "dev": true,
@@ -3125,12 +3114,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/verror": {
-      "version": "1.10.10",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/@types/ws": {
       "version": "8.5.10",
       "dev": true,
@@ -4529,15 +4512,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/assert-plus": {
-      "version": "1.0.0",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/assign-symbols": {
       "version": "1.0.0",
       "dev": true,
@@ -5377,18 +5351,8 @@
       }
     },
     "node_modules/chokidar/node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
+      "optional": true
     },
     "node_modules/chokidar/node_modules/glob-parent": {
       "version": "5.1.2",
@@ -5606,22 +5570,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/cli-truncate": {
-      "version": "2.1.0",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "slice-ansi": "^3.0.0",
-        "string-width": "^4.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/clipboardy": {
       "version": "2.3.0",
       "dev": true,
@@ -6041,10 +5989,13 @@
     },
     "node_modules/core-js": {
       "version": "3.37.0",
-      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.37.0.tgz",
-      "integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==",
       "hasInstallScript": true,
+      "license": "MIT",
       "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.37.0",
       "dev": true,
@@ -6077,15 +6028,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/crc": {
-      "version": "3.8.0",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "buffer": "^5.1.0"
-      }
-    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "dev": true,
@@ -6861,30 +6803,8 @@
       }
     },
     "node_modules/dmg-builder/node_modules/dmg-license": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmmirror.com/dmg-license/-/dmg-license-1.0.11.tgz",
-      "integrity": "sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "dependencies": {
-        "@types/plist": "^3.0.1",
-        "@types/verror": "^1.10.3",
-        "ajv": "^6.10.0",
-        "crc": "^3.8.0",
-        "iconv-corefoundation": "^1.1.7",
-        "plist": "^3.0.4",
-        "smart-buffer": "^4.0.2",
-        "verror": "^1.10.0"
-      },
-      "bin": {
-        "dmg-license": "bin/dmg-license.js"
-      },
-      "engines": {
-        "node": ">=8"
-      }
+      "optional": true
     },
     "node_modules/dmg-builder/node_modules/fs-extra": {
       "version": "10.1.0",
@@ -6899,23 +6819,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/dmg-builder/node_modules/iconv-corefoundation": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmmirror.com/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz",
-      "integrity": "sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==",
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "dependencies": {
-        "cli-truncate": "^2.1.0",
-        "node-addon-api": "^1.6.3"
-      },
-      "engines": {
-        "node": "^8.11.2 || >=10"
-      }
-    },
     "node_modules/dns-packet": {
       "version": "5.6.1",
       "dev": true,
@@ -7062,8 +6965,6 @@
     },
     "node_modules/electron": {
       "version": "29.3.1",
-      "resolved": "https://registry.npmmirror.com/electron/-/electron-29.3.1.tgz",
-      "integrity": "sha512-auge1/6RVqgUd6TgIq88wKdUCJi2cjESi3jy7d+6X4JzvBGprKBqMJ8JSSFpu/Px1YJrFUKAxfy6SC+TQf1uLw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -7683,8 +7584,6 @@
     },
     "node_modules/eslint-plugin-vue": {
       "version": "9.25.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-9.25.0.tgz",
-      "integrity": "sha512-tDWlx14bVe6Bs+Nnh3IGrD+hb11kf2nukfm6jLsmJIhmiRQ1SUaksvwY9U5MvPB0pcrg0QK0xapQkfITs3RKOA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8402,15 +8301,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/extsprintf": {
-      "version": "1.4.1",
-      "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "dev": true,
@@ -11628,12 +11518,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "1.7.2",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "dev": true,
@@ -14346,8 +14230,6 @@
     },
     "node_modules/sass": {
       "version": "1.75.0",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.75.0.tgz",
-      "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -14364,11 +14246,9 @@
     },
     "node_modules/sass-loader": {
       "version": "14.2.1",
-<<<<<<< HEAD
-      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-14.2.1.tgz",
-      "integrity": "sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==",
->>>>>>> 10d8fce36805905e73342239e50b7d7f8653bd55
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
         "neo-async": "^2.6.2"
       },
       "engines": {
@@ -14817,63 +14697,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/slice-ansi": {
-      "version": "3.0.0",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "astral-regex": "^2.0.0",
-        "is-fullwidth-code-point": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/slice-ansi/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/slice-ansi/node_modules/color-convert": {
-      "version": "2.0.1",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/slice-ansi/node_modules/color-name": {
-      "version": "1.1.4",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/smart-buffer": {
-      "version": "4.2.0",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
     "node_modules/snapdragon": {
       "version": "0.8.2",
       "dev": true,
@@ -17172,20 +16995,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/verror": {
-      "version": "1.10.1",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
     "node_modules/vue": {
       "version": "2.7.16",
       "license": "MIT",

package.json

@@ -49,7 +49,7 @@
     "prettier": "^3.2.5",
     "sass": "^1.75.0",
     "sass-loader": "^14.2.1",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.0.2",
     "stylelint-config-recess-order": "^4.6.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",

src/views/book/courseware/create/components/base/video/VideoSetting.vue

@@ -16,17 +16,7 @@
         </el-radio>
       </el-form-item>
       <el-form-item label="序号位置">
-        <div class="grid-container">
-          <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>
+        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
       </el-form-item>
       <el-divider />
       <el-form-item label="查看方式">
@@ -40,22 +30,14 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import {
-  snGenerationMethodList,
-  viewMethodList,
-  switchSerialNumber,
-  checkString,
-  serialNumberPositionList,
-} from '@/views/book/courseware/data/common';
+import { snGenerationMethodList, viewMethodList, checkString } from '@/views/book/courseware/data/common';
 
 export default {
   name: 'VideoSetting',
   mixins: [SettingMixin],
   data() {
     return {
-      switchSerialNumber,
       checkString,
-      serialNumberPositionList,
       snGenerationMethodList,
       viewMethodList,
       labelPosition: 'left',
@@ -68,99 +50,14 @@ export default {
       },
     };
   },
-  watch: {
-    property: {
-      handler(val) {
-        if (this.isSet) {
-          val.sn_type = checkString(val.serial_number);
-          this.$emit('updateSetting', val);
-        }
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    /**
-     * @description 设置属性
-     * @param {object} property 属性
-     */
-    setSetting(property) {
-      this.isSet = true;
-      this.property = property;
-    },
-
-    /**
-     * @description 改变序号位置
-     * @param {String} sn_position
-     */
-    changeNumberPosition(sn_position) {
-      this.property.sn_position = sn_position;
-    },
-  },
+  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
-.el-form {
-  .serial-number {
-    :deep .el-form-item__content {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .svg-icon {
-      cursor: pointer;
-    }
-  }
+@use '@/styles/mixin.scss' as *;
 
-  .el-input {
-    margin-right: 16px;
-  }
-
-  .main {
-    grid-area: main;
-  }
-
-  .grid-container {
-    display: grid;
-    grid:
-      '. 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;
-    line-height: 10px;
-    border: 1px solid #ebebeb;
-
-    .el-button {
-      width: 16px;
-      height: 8px;
-      padding: 0;
-      margin: 0;
-      border: 1px solid #e4e4e4;
-      border-radius: 2px;
-
-      &.active {
-        background-color: $setting-active-color;
-      }
-    }
-
-    .main {
-      width: 64px;
-      height: 32px;
-      background-color: #f8f8f8;
-      border: 1px solid #e4e4e4;
-      border-radius: 2px;
-    }
-  }
-
-  .el-divider {
-    margin: 16px 0;
-  }
+.el-form {
+  @include setting-base;
 }
 </style>

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

@@ -16,7 +16,7 @@ export function getVideoData() {
       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: viewMethodList[0].value, // 查看方式：independent独立 list列表 icon图标
+      view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表
     },
     file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']