@fengzhongwen/kukan-ui 1.0.14 → 1.0.16

package/dist/kukan-ui.common.js

@@ -99,6 +99,17 @@ module.exports =
 
 // extracted by mini-css-extract-plugin
 
+/***/ }),
+
+/***/ "5d9e":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_419a04c7_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("9136");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_419a04c7_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_419a04c7_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "69a0":
@@ -865,6 +876,13 @@ module.exports =
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "9136":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ }),
 
 /***/ "fb15":
@@ -1050,7 +1068,7 @@ function addNewFileOfSubTitle(data, url) {
   });
 }
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bc97a1e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileUpload/index.vue?vue&type=template&id=7674a44a&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0c625dac-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileUpload/index.vue?vue&type=template&id=7674a44a&scoped=true
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"upload-multiple"},[_c('input',{ref:"multiplePloadInput",staticStyle:{"display":"none"},attrs:{"type":"file","multiple":_vm.multiple,"accept":_vm.limitFileType},on:{"change":_vm.handleSelectedMultipleFiles}}),_c('div',{staticClass:"upload-multiple-box"},[_c('div',{ref:"upLoded_box",staticClass:"multiple_upload_area",class:_vm.multipleUploadAreaClass(),on:{"click":_vm.reviewUploadMultipleFiles,"dragover":function($event){$event.preventDefault();return _vm.onDragOver($event)},"dragleave":function($event){$event.preventDefault();return _vm.onDragLeave($event)},"drop":function($event){$event.preventDefault();return _vm.onDrop($event)}}},[(_vm.isUploading)?_c('div',{staticClass:"upload-loading-mask",style:(_vm.setUploadingLoadingMaskStyle())}):_vm._e(),(_vm.showIconTip)?_c('div',[_c('i',{staticClass:"el-icon-upload"})]):_vm._e(),_c('div',[_vm._v(_vm._s(_vm.startButtonText))]),_vm._t("tips")],2),(_vm.pictureConfig.show && _vm.showSuccessPicture)?_c('div',{staticClass:"upload-multiple-box-right"},[_c('div',{staticClass:"upload-multiple-box-close",on:{"click":function($event){$event.stopPropagation();return _vm.clearPicture($event)}}},[_c('i',{staticClass:"el-icon-close"})]),_c('img',{attrs:{"src":_vm.pictureConfig.url,"alt":_vm.pictureConfig.altText}})]):_vm._e()]),(_vm.isShowAllUploadButton)?_c('el-button',{staticClass:"upload_button",attrs:{"type":"primary","disabled":_vm.isUploading || _vm.needUploadFilesArr.length === 0},on:{"click":_vm.startUploadMultipleFiles}},[_vm._v(" 全部文件开始上传 ")]):_vm._e(),(_vm.model === 'info')?_c('div',{staticClass:"multiple_upload_list"},[_c('span',{staticClass:"tip_title"},[_c('span',{staticClass:"title"},[_c('div',[_vm._v("文件列表")]),_c('transition',{attrs:{"name":"totalProgress","mode":"out-in"}},[(_vm.needUploadFilesArr.length > 0)?_c('div',{staticClass:"total_progress"},[_c('div',{staticClass:"logo"}),_c('span',[_vm._v("总进度：")]),(_vm.fileConfig.uploadController)?_c('div',[_c('el-tag',{attrs:{"size":"mini","type":_vm.isDanger}},[_vm._v("上传错误："+_vm._s(_vm.fileConfig.skipError_num))]),_c('el-tag',{attrs:{"size":"mini","type":""}},[_vm._v("上传成功："+_vm._s(_vm.fileConfig.completed_num))]),_c('el-tag',{attrs:{"size":"mini","type":""}},[_vm._v("文件总数："+_vm._s(_vm.fileConfig.filetotal_num))])],1):_vm._e()]):_vm._e()])],1),_c('span',[_c('el-button',{attrs:{"size":"mini","type":"","disabled":_vm.isUploading || _vm.needUploadFilesArr.length === 0},on:{"click":_vm.handleSelectAllFile}},[_vm._v("全选所有文件")]),_c('el-button',{attrs:{"size":"mini","type":"danger","disabled":_vm.isUploading || _vm.needUploadFilesArr.length === 0},on:{"click":_vm.delteSelectedFile}},[_vm._v("移除所选文件")])],1)]),_c('div',{staticClass:"selected_list_area"},[(_vm.needUploadFilesArr.length > 0)?_c('div',{staticClass:"selected_list"},_vm._l((_vm.needUploadFilesArr),function(item,index){return _c('Card_2',{key:index,attrs:{"index":index,"file-config":item},on:{"cancelFileUpload":_vm.cancelFileUpload,"resetFileUpload":_vm.resetFileUpload,"handleClickOnlyFile":_vm.handleClickOnlyFile}})}),1):_c('div',{staticClass:"no_file"},[_c('i',{staticClass:"el-icon-document"}),_c('div',[_vm._v("暂无文件，请点击或拖拽文件到上传区域")])])])]):_vm._e()],1)}
 var staticRenderFns = []
 
@@ -1130,7 +1148,7 @@ const fileTypeValidators = {
         // return /^(presentation))|text\/(plain|html|csv|xml|css|javascript|markdown))$/i.test(mime);
     },
 };
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bc97a1e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileUpload/components/UploadCard_Ver_Second/index.vue?vue&type=template&id=cdec1cec&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0c625dac-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileUpload/components/UploadCard_Ver_Second/index.vue?vue&type=template&id=cdec1cec&scoped=true
 var UploadCard_Ver_Secondvue_type_template_id_cdec1cec_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{key:_vm.fileConfig.name + '_' + _vm.index,staticClass:"only_file_area",class:{
     only_file_area_isActive: _vm.fileConfig.isSelected,
     'fade-in-element': true,
@@ -3414,27 +3432,331 @@ FileUpload.install = function(Vue) {
 };
 
 /* harmony default export */ var components_FileUpload = (FileUpload);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0c625dac-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/VideoPreviewDialog/index.vue?vue&type=template&id=419a04c7&scoped=true
+var VideoPreviewDialogvue_type_template_id_419a04c7_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-dialog',{attrs:{"visible":_vm.dialogVisible,"show-close":false,"modal":true,"width":_vm.width,"top":_vm.topMargin,"custom-class":"modern-video-review-dialog","append-to-body":"","before-close":_vm.closePreview},on:{"update:visible":function($event){_vm.dialogVisible=$event},"opened":_vm.onOpened}},[_c('div',{staticClass:"video-review-container",style:({ height: _vm.height }),on:{"mousemove":_vm.onDrag,"mouseup":_vm.stopDrag,"mouseleave":_vm.stopDrag}},[_c('div',{staticClass:"video-review-header"},[_c('div',{staticClass:"file-info"},[_c('span',{staticClass:"file-name",attrs:{"title":_vm.fileName}},[_vm._v(_vm._s(_vm.fileName || "视频预览"))]),(!_vm.loading && !_vm.loadError && _vm.videoWidth)?_c('span',{staticClass:"file-size"},[_vm._v(" "+_vm._s(_vm.videoWidth)+" × "+_vm._s(_vm.videoHeight)+" px | "+_vm._s(_vm.duration)+" ")]):_vm._e()]),_c('div',{staticClass:"video-review-controls"},[_c('button',{staticClass:"control-icon-btn",attrs:{"disabled":_vm.scale <= _vm.minScale},on:{"click":_vm.zoomOut}},[_c('i',{staticClass:"el-icon-zoom-out"})]),_c('span',{staticClass:"zoom-display"},[_vm._v(_vm._s(Math.round(_vm.scale * 100))+"%")]),_c('button',{staticClass:"control-icon-btn",attrs:{"disabled":_vm.scale >= _vm.maxScale},on:{"click":_vm.zoomIn}},[_c('i',{staticClass:"el-icon-zoom-in"})]),_c('div',{staticClass:"control-divider"}),_c('button',{staticClass:"control-icon-btn",attrs:{"title":"原始尺寸/重置位置"},on:{"click":_vm.resetZoom}},[_c('i',{staticClass:"el-icon-refresh-right"})]),_c('button',{staticClass:"control-icon-btn close-btn",on:{"click":_vm.closePreview}},[_c('i',{staticClass:"el-icon-close"})])])]),_c('div',{staticClass:"video-review-content",on:{"wheel":function($event){$event.preventDefault();return _vm.handleWheel($event)},"mousedown":function($event){if($event.target !== $event.currentTarget){ return null; }return _vm.startDrag($event)},"!click":function($event){return _vm.handleCaptureClick($event)}}},[_c('transition',{attrs:{"name":"fade"}},[(_vm.loading && !_vm.loadError)?_c('div',{staticClass:"status-overlay"},[_c('i',{staticClass:"el-icon-loading"}),_c('p',[_vm._v("视频加载中...")])]):_vm._e()]),(_vm.loadError)?_c('div',{staticClass:"status-overlay error"},[_c('i',{staticClass:"el-icon-video-camera"}),_c('p',[_vm._v("视频加载失败")])]):_vm._e(),_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.loading && !_vm.loadError),expression:"!loading && !loadError"}],staticClass:"video-transform-wrapper",style:(_vm.videoStyle),on:{"mousedown":_vm.startDrag}},[(_vm.videoUrl)?_c('video',{key:_vm.videoUrl,ref:"videoPlayer",staticClass:"main-preview-video",attrs:{"src":_vm.videoUrl,"autoplay":"","muted":"","loop":"","playsinline":"","controls":""},domProps:{"muted":true},on:{"loadedmetadata":_vm.onMetadataLoad,"error":_vm.onVideoError,"canplay":_vm.onCanPlay}}):_vm._e()])],1),_c('div',{staticClass:"video-review-hint"},[_c('span',[_vm._v("鼠标拖拽背景移动，滚轮缩放查看细节")])])])])}
+var VideoPreviewDialogvue_type_template_id_419a04c7_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/VideoPreviewDialog/index.vue?vue&type=template&id=419a04c7&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/VideoPreviewDialog/index.vue?vue&type=script&lang=js
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ var VideoPreviewDialogvue_type_script_lang_js = ({
+  name: "KukanDialogVideoReview",
+  props: {
+    visible: { type: Boolean, default: false },
+    videoUrl: { type: String, required: true },
+    fileName: { type: String, default: "" },
+    width: { type: String, default: "40%" },
+    height: { type: String, default: "80vh" },
+    topMargin: { type: String, default: "7vh" },
+    initialScale: { type: Number, default: 1 },
+  },
+  data() {
+    return {
+      scale: 1,
+      minScale: 0.5,
+      maxScale: 3,
+      loading: true,
+      loadError: false, // 错误标记
+      videoWidth: 0,
+      videoHeight: 0,
+      duration: "00:00",
+      translateX: 0,
+      translateY: 0,
+      isDragging: false,
+      hasMoved: false,
+      startMousePos: { x: 0, y: 0 },
+      mouseStartPos: { x: 0, y: 0 },
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() { return this.visible; },
+      set(val) { this.$emit("update:visible", val); },
+    },
+    videoStyle() {
+      return {
+        transform: `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`,
+        transition: this.isDragging ? "none" : "transform 0.25s cubic-bezier(0.2, 0, 0, 1)",
+      };
+    },
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.initStates(); // 每次打开弹窗，初始化状态
+        window.addEventListener("keydown", this.handleKeyDown);
+      } else {
+        this.pauseVideo();
+        window.removeEventListener("keydown", this.handleKeyDown);
+      }
+    },
+    // 监听 URL 变化：如果弹窗没关闭但切换了视频源，也要重置状态
+    videoUrl() {
+      if (this.visible) {
+        this.initStates();
+      }
+    }
+  },
+  methods: {
+    // 初始化/重置状态的方法
+    initStates() {
+      this.loading = true;
+      this.loadError = false; // 【核心修复】重置错误状态
+      this.videoWidth = 0;
+      this.videoHeight = 0;
+      this.duration = "00:00";
+      this.resetZoom();
+    },
+    onOpened() {
+      this.resetZoom();
+    },
+    onMetadataLoad(e) {
+      const video = e.target;
+      this.videoWidth = video.videoWidth;
+      this.videoHeight = video.videoHeight;
+      this.duration = this.formatDuration(video.duration);
+    },
+    onCanPlay() {
+      this.loading = false;
+      this.loadError = false; // 成功能播放时确保错误关闭
+    },
+    onVideoError() {
+      console.error("Video preview failed to load.");
+      this.loading = false;
+      this.loadError = true; // 触发错误展示
+    },
+    formatDuration(seconds) {
+      if (!seconds) return "00:00";
+      const min = Math.floor(seconds / 60);
+      const sec = Math.floor(seconds % 60);
+      return `${min.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
+    },
+    // ... 其他方法 (zoomIn, zoomOut, handleWheel, startDrag 等保持不变) ...
+    zoomIn() {
+      if (this.scale < this.maxScale)
+        this.scale = parseFloat((this.scale + 0.2).toFixed(1));
+    },
+    zoomOut() {
+      if (this.scale > this.minScale)
+        this.scale = parseFloat((this.scale - 0.2).toFixed(1));
+    },
+    resetZoom() {
+      this.scale = this.initialScale;
+      this.translateX = 0;
+      this.translateY = 0;
+    },
+    handleWheel(e) {
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      const newScale = parseFloat((this.scale + delta).toFixed(1));
+      if (newScale >= this.minScale && newScale <= this.maxScale) {
+        this.scale = newScale;
+      }
+    },
+    startDrag(e) {
+      if (e.target.tagName === "VIDEO" && e.offsetY > e.target.offsetHeight - 50) return;
+      if (e.button !== 0 || this.loading) return;
+      this.isDragging = true;
+      this.hasMoved = false;
+      this.startMousePos = { x: e.clientX, y: e.clientY };
+      this.mouseStartPos = {
+        x: e.clientX - this.translateX,
+        y: e.clientY - this.translateY,
+      };
+    },
+    onDrag(e) {
+      if (!this.isDragging) return;
+      const dx = Math.abs(e.clientX - this.startMousePos.x);
+      const dy = Math.abs(e.clientY - this.startMousePos.y);
+      if (dx > 5 || dy > 5) this.hasMoved = true;
+      this.translateX = e.clientX - this.mouseStartPos.x;
+      this.translateY = e.clientY - this.mouseStartPos.y;
+    },
+    stopDrag() {
+      this.isDragging = false;
+    },
+    handleCaptureClick(e) {
+      if (this.hasMoved) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.hasMoved = false;
+      }
+    },
+    pauseVideo() {
+      if (this.$refs.videoPlayer) {
+        this.$refs.videoPlayer.pause();
+      }
+    },
+    handleKeyDown(e) {
+      if (e.key === "Escape") this.closePreview();
+      if (e.key === " ") {
+        e.preventDefault();
+        const v = this.$refs.videoPlayer;
+        if (v) v.paused ? v.play() : v.pause();
+      }
+    },
+    closePreview() {
+      this.pauseVideo();
+      this.dialogVisible = false;
+      this.$emit("close");
+    },
+  },
+});
+
+// CONCATENATED MODULE: ./src/components/VideoPreviewDialog/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_VideoPreviewDialogvue_type_script_lang_js = (VideoPreviewDialogvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/VideoPreviewDialog/index.vue?vue&type=style&index=0&id=419a04c7&prod&lang=scss&scoped=true
+var VideoPreviewDialogvue_type_style_index_0_id_419a04c7_prod_lang_scss_scoped_true = __webpack_require__("5d9e");
+
+// CONCATENATED MODULE: ./src/components/VideoPreviewDialog/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var VideoPreviewDialog_component = normalizeComponent(
+  components_VideoPreviewDialogvue_type_script_lang_js,
+  VideoPreviewDialogvue_type_template_id_419a04c7_scoped_true_render,
+  VideoPreviewDialogvue_type_template_id_419a04c7_scoped_true_staticRenderFns,
+  false,
+  null,
+  "419a04c7",
+  null
+  
+)
+
+/* harmony default export */ var VideoPreviewDialog = (VideoPreviewDialog_component.exports);
 // CONCATENATED MODULE: ./src/index.js
 
 
 
 
+
 // import MyButton from './components/Button';
 
 const components = [
   components_FileUpload,
-//   MyButton
+  VideoPreviewDialog
 ];
 
 // 整个库的 install
-const install = function(Vue, options= {}) {
+const install = function (Vue, options = {}) {
   components.forEach(component => {
     // 自动读取组件里的 name 属性作为组件名
     Vue.component(component.name, component);
   });
 
   // 将 axios 实例传入 api 模块
-    setAxiosInstance(options.axios);
+  setAxiosInstance(options.axios);
 };
 
 // 支持用 <script> 引入