add

src/renderer/assets/css/home.scss

@@ -142,10 +142,9 @@ div,p{
 
 .show-img {
   text-align: center;
-  width: 300px;
-  height: 200px;
-  background: url(../assets/image/bg.png) no-repeat top center;
-  background-size: 100% auto;
+  width: 340px;
+  height: 300px;
+  background: url(../assets/image/bgmini.png);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
@@ -253,7 +252,7 @@ div,p{
   justify-content: space-between;
   width: 100%;
   padding: 10px;
-  height: calc(100% - 122px);
+  height: calc(100% - 61px);
 }
 
 .img-footer-area{
@@ -288,12 +287,12 @@ div,p{
 }
 
 .content-left {
-  width: 100%;
+  width: calc(100% - 350px);
   background: #fff;
 }
 
 .content-right {
-  width: 300px;
+  width: 340px;
 }
 
 /* 底部 */

src/renderer/components/home.vue

@@ -74,14 +74,14 @@
 									:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
 									:edit-config="{trigger: 'click', mode: 'cell'}" :data="imgList" :scroll-y="{enabled: true}">
 									<vxe-column field="name" :title="'文件名称'+'(' + imgList.length + ')'"></vxe-column>
-									<vxe-column field="size" title="大小" width="140"></vxe-column>
+									<vxe-column field="size" title="大小" width="100"></vxe-column>
 									<vxe-column field="width" title="尺寸" width="140">
 										<template #default="{ row }">
 											<span v-if="row.width == 0 && row.height == 0">加载中</span>
 											<span v-else>{{row.width + '*' + row.height}}</span>
 										</template>
 									</vxe-column>
-									<vxe-column field="progress" title="转换进度" width="200">
+									<vxe-column field="progress" title="转换进度" width="160">
 										<template #default="{ row }">
 											<el-progress :text-inside="true" :stroke-width="20" :percentage="row.percent"></el-progress>
 										</template>
@@ -98,8 +98,8 @@
 									:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
 									:edit-config="{trigger: 'click', mode: 'cell'}" :data="fileList" :scroll-y="{enabled: true}">
 									<vxe-column field="name" :title="'文件名称'+'(' + fileList.length + ')'"></vxe-column>
-									<vxe-column field="size" title="大小" width="140"></vxe-column>
-									<vxe-column field="progress" title="转换进度" width="200">
+									<vxe-column field="size" title="大小" width="100"></vxe-column>
+									<vxe-column field="progress" title="转换进度" width="160">
 										<template #default="{ row }">
 											<el-progress :text-inside="true" :stroke-width="20" :percentage="row.percent"></el-progress>
 										</template>
@@ -116,13 +116,13 @@
 									:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
 									:edit-config="{trigger: 'click', mode: 'cell'}" :data="videoList" :scroll-y="{enabled: true}">
 									<vxe-column field="name" :title="'文件名称'+'(' + videoList.length + ')'"></vxe-column>
-									<vxe-column field="size" title="大小" width="140">
+									<vxe-column field="size" title="大小" width="100">
 										<template #default="{ row }">
 											<span>{{$utils.handleSize(row.size)}}</span>
 										</template>
 									</vxe-column>
 									<vxe-column field="duration" title="时间(秒)" width="140"></vxe-column>
-									<vxe-column field="progress" title="转换进度" width="200">
+									<vxe-column field="progress" title="转换进度" width="160">
 										<template #default="{ row }">
 											<el-progress :text-inside="true" :stroke-width="20" :percentage="row.percent"></el-progress>
 										</template>
@@ -136,11 +136,22 @@
 								
 							</div>
 						</div>
+						
+						<div class="content-right">
+							<p class="title"><i class="iconfont icon-shezhi"></i>效果预览 <span style="color:red" v-if="menuIndex==2">仅作参考，请以实际为准！</span></p>
+							<div class="show-img" style="position:relative;overflow: hidden;">
+								<Spin v-if="imgLoading" fix>
+									<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
+									<div>渲染中</div>
+								</Spin>
+								<img @click="menuIndex == 3 ? playVideo() : imgShow=true" class="result-img" :src="imgSrc" />
+							</div>
+						</div>
 					</div>
 					<!-- 底部设置区域 -->
-					<div class="img-footer-area" v-if="(menuIndex != '8' && videoList.length > 0) || (menuIndex == 8 && videoList.length > 0)">
+					<!-- <div class="img-footer-area" v-if="(menuIndex != '8' && videoList.length > 0) || (menuIndex == 8 && videoList.length > 0)">
 						<div class="footer-line-between">
-							<!-- 1格式转化 -->
+						
 							<div class="handle-item" v-if="menuIndex == '1' || menuIndex == '2'">
 								<label class="handle-label">输出格式：</label>
 								<el-select v-model="handleData.format" style="width:100px;" size="small">
@@ -152,100 +163,19 @@
 									<el-option :value="2" label="单声道"></el-option>
 									<el-option :value="3" label="双声道"></el-option>
 								</el-select>
-								<label class="handle-label">码率：</label>
-								<el-select v-model="handleData.quality" style="width:100px;" size="small">
-									<el-option value="1" label="同源音频"></el-option>
-									<el-option value="8k" label="8 kbps"></el-option>
-									<el-option value="16k" label="16 kbps"></el-option>
-									<el-option value="24k" label="24 kbps"></el-option>
-									<el-option value="32k" label="32 kbps"></el-option>
-									<el-option value="40k" label="40 kbps"></el-option>
-									<el-option value="48k" label="48 kbps"></el-option>
-									<el-option value="56k" label="56 kbps"></el-option>
-									<el-option value="64k" label="64 kbps"></el-option>
-									<el-option value="80k" label="80 kbps"></el-option>
-									<el-option value="96k" label="96 kbps"></el-option>
-									<el-option value="112k" label="112 kbps"></el-option>
-									<el-option value="128k" label="128 kbps"></el-option>
-									<el-option value="144k" label="144 kbps"></el-option>
-									<el-option value="160k" label="160 kbps"></el-option>
-									<el-option value="192k" label="192 kbps"></el-option>
-									<el-option value="224k" label="224 kbps"></el-option>
-									<el-option value="256k" label="256 kbps"></el-option>
-									<el-option value="320k" label="320 kbps"></el-option>
-									<el-option value="512k" label="512 kbps"></el-option>
-									<el-option value="1400k" label="1400 kbps"></el-option>
-								</el-select>
 							</div>
 							
-							<!-- 3音频压缩 -->
+							
 							<div class="handle-item" v-if="menuIndex == '3'">
 								<label class="handle-label">压缩级别：</label>
 								<el-select v-model="handleData.compressLevel" style="width:100px;" size="small">
 									<el-option :value="1" label="1"></el-option>
 									<el-option :value="2" label="2"></el-option>
 									<el-option :value="3" label="3"></el-option>
-									<el-option :value="4" label="4"></el-option>
-									<el-option :value="5" label="5"></el-option>
-									<el-option :value="6" label="6"></el-option>
-									<el-option :value="7" label="7"></el-option>
-									<el-option :value="8" label="8"></el-option>
-									<el-option :value="9" label="9"></el-option>
 								</el-select>
 								<span style="margin-left: 10px; font-size: 12px; color: #F56C6C;">等级越高压缩效果越好</span>
 							</div>
 							
-							<!-- 音频分割 -->
-							<div class="handle-item" v-if="menuIndex == '4'">
-								<label class="handle-label">分割格式：</label>
-								<el-select v-model="handleData.format" style="width:100px;" size="small">
-									<el-option v-for="(item,key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
-								</el-select>
-							
-								<label class="handle-label">分割模式：</label>
-								<el-select v-model="handleData.split_type" style="width:100px;" size="small">
-									<el-option :value="1" label="按份分割"></el-option>
-									<!-- <el-option :value="2" label="截取分割"></el-option> -->
-									<el-option :value="3" label="平均分割"></el-option>
-								</el-select>
-							
-								<template v-if="handleData.split_type == 1">
-									<label class="handle-label">分割分数：</label>
-									<el-select v-model="handleData.split_num" style="width:100px;" size="small">
-										<el-option :value="2" label="2"></el-option>
-										<el-option :value="3" label="3"></el-option>
-										<el-option :value="4" label="4"></el-option>
-										<el-option :value="5" label="5"></el-option>
-										<el-option :value="6" label="6"></el-option>
-										<el-option :value="7" label="7"></el-option>
-										<el-option :value="8" label="8"></el-option>
-										<el-option :value="9" label="9"></el-option>
-										<el-option :value="10" label="10"></el-option>
-									</el-select>
-								</template>
-							</div>
-							
-							<!-- 音频变速 -->
-							<div class="handle-item" v-if="menuIndex == '5'">
-								<label class="handle-label">播放速度：</label>
-								<el-slider class="info-input" v-model="handleData.speed" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.speed}}倍
-							</div>
-							
-							<!-- 音量调整 -->
-							<div class="handle-item" v-if="menuIndex == '6'">
-								<label class="handle-label">音量大小：</label>
-								<el-slider class="info-input" v-model="handleData.volume" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.volume}}
-							</div>
-							
-							<!-- 音频反转 -->
-							<div class="handle-item" v-if="menuIndex == '7'">
-								<label class="handle-label">输出格式：</label>
-								<el-checkbox size="small"  v-model="handleData.isOriginal">同原音频</el-checkbox>
-								<el-select v-if="!handleData.isOriginal" v-model="handleData.format" style="width:100px;margin-left: 5px;" size="small">
-									<el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
-								</el-select>
-							</div>
-							
 							<div v-else></div>
 							
 							<div>
@@ -257,7 +187,7 @@
 								<el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
 							</div>
 						</div>
-					</div>
+					</div> -->
 				</template>
 				
 				<!-- 合并进度 -->
@@ -320,7 +250,7 @@ export default {
 			imgList: [],
 			fileList: [],
 			videoList: [],
-			imgInfo: '',
+			imgInfo: {},
 			menuIndex: '', // 选中菜单
 
 			imgFormat: ['PNG','BMP','JPEG','JPG','ICO','WBMP','WEBP','HEIC','GIF','JFIF','TTF','TIFF','SVG','3FR','3G2','3GP','AAI','AI','ART','ARW','BGR','BGRA','BGRO','BIE','BMP2','BMP3','BRF','CAL','CALS','CANVAS','CAPTION','CIN','CIP','CLIP','CMYK','CMYKA','CR2','CRW','CUR','CUT','DATA','DCM','DCR','DCX','DDS','DFONT','DJVU','DNG','DOT','DPX','DXT1','DXT5','EPDF','EPI','EPS','EPS2','EPS3','EPSF','EPSI','EPT','EPT2','EPT3','ERF','EXR','FAX','FILE','FITS','FRACTAL','FTP','FTS','G3','G4','GIF87','GRADIENT','GRAY','GRAYA','GROUP4','GV','H','HALD','HDR','HISTOGRAM','HRZ','ICB','ICON','IIQ','INFO','INLINE','IPL','ISOBRL','ISOBRL6','J2C','J2K','JBG','JBIG','JNG','JNX','JP2','JPC','JPE','JPM','JPS','JPT','JSON','K25','KDC','LABEL','M2V','M4V','MAC','MAGICK','MAP','MASK','MAT','MATTE','MEF','MIFF','MNG','MONO','MRW','MSL','MSVG','MVG','NEF','NRW','ORF','OTB','OTF','PAL','PALM','PAM','PANGO','PATTERN','PBM','PCD','PCDS','PCL','PCT','PEF','PES','PFA','PFB','PFM','PGM','PGX','PICON','PICT','PIX','PJPEG','PLASMA','PNG00','PNG24','PNG32','PNG48','PNG64','PNG8','PNM','PPM','PREVIEW','PS','PS2','PS3','PSB','PSD','PTIF','PWP','RADIAL-GRADIENT','RAF','RAS','RAW','RGB','RGBA','RGBO','RGF','RLA','RLE','RMF','RW2','SCR','SCT','SFW','SGI','SHTML','SIX','SIXEL','SPARSE-COLOR','SR2','SRF','STEGANO','SUN','SVGZ','TGA','THUMBNAIL','TIFF64','TILE','UBRL','UBRL6','UIL','UYVY','VDA','VICAR','VID','VIFF','VIPS','VST','WMF','WMV','WMZ','WPG','X','X3F','XBM','XC','XCF','XPM','XPS','XV','XWD','YCbCr','YCbCrA','YUV'], // 图片格式
@@ -530,10 +460,10 @@ export default {
 		},
 		inputImage(imgInfo){
 			if(!imgInfo.type){
-				this.$Message.warning('不是有效的图片文件！ - '+ imgInfo.path);
+				this.$message({message: '不是有效的图片文件！ - '+ imgInfo.path, type: 'warning'});
 			} else {
 				if(this.imgFormat.indexOf(imgInfo.type.toUpperCase()) == -1){
-					this.$Message.warning('bb不是有效的图片文件！ - '+ imgInfo.path);
+					this.$message({message: '不是有效的图片文件！ - '+ imgInfo.path, type: 'warning'});
 				}else{
 					let flag = true;
 					for(let m = 0; m < this.imgList.length; m++){
@@ -575,7 +505,7 @@ export default {
 						console.log(result,'imgPathimgPath')
 					})
 				}).catch(err =>{
-					//this.$Message.error('预览出现错误！')
+					this.$message({message: '预览出现错误！', type: 'warning'});
 				})
 		
 				this.imgInfo.videoPath = tmpVideoPreviewPath;
@@ -613,10 +543,10 @@ export default {
 		},
 		inputPdf(fileInfo){
 			if(!fileInfo.type){
-				this.$Message.warning('不是有效的pdf文件！ - '+ fileInfo.path);
+				this.$message({message: '不是有效的pdf文件！ - '+ fileInfo.path, type: 'warning'});
 			} else {
 				if(fileInfo.type.toUpperCase() != 'PDF'){
-					this.$Message.warning('不是有效的pdf文件！ - '+ fileInfo.path);
+					this.$message({message: '不是有效的pdf文件！ - '+ fileInfo.path, type: 'warning'});
 				}else{
 					let flag = true;
 					this.fileList.map((item, index) => {
@@ -636,8 +566,8 @@ export default {
 			let suffix = filename.lastIndexOf('.') == -1 ? '' : filename.substr(filename.lastIndexOf('.')+1);
 			let size = fs.statSync(path).size;
 		
-			if (this.inputVedio.indexOf('video/'+suffix.toLowerCase()) == -1) {
-				this.$Message.warning('不是有效的视频文件或该文件暂不支持！' + suffix);
+			if (this.inputVideos.indexOf('video/'+suffix.toLowerCase()) == -1) {
+				this.$message({message: '不是有效的视频文件或该文件暂不支持！' + suffix, type: 'warning'});
 			} else {
 				electronApi.spawnExec(['ffprobe.exe','-i', path, '-hide_banner']).then((result) => {
 					// 替换括号里面的数据，防止提取数据时出现错误
@@ -694,7 +624,7 @@ export default {
 					if (flag) {
 						this.videoList.push(imgInfo);
 					}else{
-						this.$Message.warning('该文件已经在队列中 - ' + path);
+						this.$message({message: '该文件已经在队列中 - ' + path, type: 'warning'});
 					}
 				});
 			}
@@ -742,7 +672,7 @@ export default {
 			// 更改尺寸的时候，宽度和高度不允许为0
 			if(this.menuIndex == '3' && this.handleData.sizeType != 1){
 				if(this.handleData.width <= 0 || this.handleData.height <=0){
-					this.$Message.warning('请设置缩放的宽度和高度！')
+					this.$message({message: '请设置缩放的宽度和高度！', type: 'warning'});
 					return false
 				}
 			}
@@ -803,7 +733,7 @@ export default {
 		
 			// 打开文件夹
 			if(this.imgList.length > 0){
-				this.$Message.success("恭喜你，任务已完成！")
+				this.$message({message: '恭喜你，任务已完成！', type: 'success'});
 				electronApi.call('showItemInfolder',[newPath])
 			}
 		},
@@ -860,7 +790,7 @@ export default {
 		
 			// 打开文件夹
 			if(this.fileList.length > 0){
-				this.$Message.success("恭喜你，任务已完成！")
+				this.$message({message: '恭喜你，任务已完成！', type: 'success'});
 				electronApi.call('showItemInfolder',[newPath])
 			}
 		},
@@ -869,7 +799,7 @@ export default {
 		    if (e) {
 		        let typeList = ['image/jpeg', 'image/png'];
 		        if (typeList.indexOf(e.type) == -1) {
-		            this.$Message.warning('不是有效的图片文件！');
+					this.$message({message: '不是有效的图片文件！', type: 'warning'});
 		            return false;
 		        }else if(typeList.indexOf(e.type) == 0){
 					this.handleData.watermarkImgType = 'jpg';
@@ -877,7 +807,7 @@ export default {
 					this.handleData.watermarkImgType = 'png';
 				}else if(typeList.indexOf(e.type) == 2){
 					if(this.menuIndex == '1'){
-						this.$Message.warning('不是有效的图片文件！');
+						this.$message({message: '不是有效的图片文件！', type: 'warning'});
 		            	return false;
 					}
 		
@@ -892,7 +822,7 @@ export default {
 			if (e) {
 			    let typeList = ['image/jpeg', 'image/png'];
 			    if (typeList.indexOf(e.type) == -1) {
-			        this.$Message.warning('不是有效的图片文件！');
+					this.$message({message: '不是有效的图片文件！', type: 'warning'});
 			        return false;
 			    }else if(typeList.indexOf(e.type) == 0){
 					this.watermarkImgList[this.waterMoreIndex].watermarkImgType = 'jpg';
@@ -935,13 +865,13 @@ export default {
 				let task = '';
 				if (this.handleData.watermarkType == '1') { // 文字水印
 					if(this.handleData.fonts == ''){
-						this.$Message.warning('请选择字体');
+						this.$message({message: '请选择字体！', type: 'warning'});
 						this.imgLoading = false;
 						return false;
 					}
 				} else if (this.handleData.watermarkType == '2') { // 图片水印
 					if(!this.handleData.watermarkImgPath){
-						this.$Message.warning('请上传图片水印');
+						this.$message({message: '请上传图片水印！', type: 'warning'});
 						this.imgLoading = false;
 						return false;
 					}
@@ -954,9 +884,17 @@ export default {
 				//TODO handle the exception
 				let err = e.toString();
 				if(err.indexOf('encrypted') > -1){
-					this.$Notice.warning({title: '提示', desc: '加密文档【'+pdf.path+'】被忽略'})
+					this.$notify({
+						title: '提示',
+						message: '加密文档【'+pdf.path+'】被忽略',
+						type: 'warning'
+					});
 				}else{
-					this.$Notice.warning({title: '提示', desc: '文档【'+pdf.path+'】出现未知错误被忽略'})
+					this.$notify({
+						title: '提示',
+						message: '文档【'+pdf.path+'】出现未知错误被忽略',
+						type: 'warning'
+					});
 				}
 			}
 		},
@@ -1273,7 +1211,7 @@ export default {
 			let task = '';
 			if (this.handleData.watermarkType == '1') { // 文字水印
 				if(this.handleData.fonts == ''){
-					this.$Message.warning('请选择字体');
+					this.$message({message: '请选择字体！', type: 'warning'});
 					this.imgLoading = false;
 					return false;
 				}else{
@@ -1281,7 +1219,7 @@ export default {
 				}
 			} else if (this.handleData.watermarkType == '2') { // 图片水印
 				if(!this.handleData.watermarkImgPath){
-					this.$Message.warning('请上传图片水印');
+					this.$message({message: '请上传图片水印！', type: 'warning'});
 					this.imgLoading = false;
 					return false;
 				}else{
@@ -1591,7 +1529,7 @@ export default {
 		
 			// 打开文件夹
 			if(this.videoList.length > 0){
-				this.$Message.success("恭喜你，任务已完成！")
+				this.$message({message: '恭喜你，任务已完成！', type: 'success'});
 				electronApi.call('showItemInfolder',[newPath])
 			}
 		},
@@ -1697,7 +1635,7 @@ export default {
 					this.videoList.splice(index, 1, video);
 					resolve(true);
 				}).catch(err => {
-					this.$Message.error("出现错误，请查看参数是否正确！");
+					this.$message.error("出现错误，请查看参数是否正确！");
 					reject(err.stderr.toString());
 				})
 			});
@@ -1709,7 +1647,7 @@ export default {
 			if(Number(version) >= 10){
 				electronApi.spawnExec(['ffplay.exe','-x','1080','-autoexit',this.imgInfo.videoPath]).then((result) => {
 				}).catch(err => {
-					this.$Message.error('视频出现未知错误，无法预览！');
+					this.$message.error('视频出现未知错误，无法预览！');
 				})
 			}else{
 				this.videoShow = true;