diff --git a/src/vs/code/electron-sandbox/deploy/deployWindow-dev.html b/src/vs/code/electron-sandbox/deploy/deployWindow-dev.html index 0c1e56c5..2e4c486d 100644 --- a/src/vs/code/electron-sandbox/deploy/deployWindow-dev.html +++ b/src/vs/code/electron-sandbox/deploy/deployWindow-dev.html @@ -138,20 +138,32 @@ -
+
- - +
+
+ 安装进度： + 00.00% +
+
+ + +
+
+
- 

-								
-								
-								
-								

-								
+								

+									

+									
+									
+									
+									
 								

 							

 						

diff --git a/src/vs/code/electron-sandbox/deploy/deployWindowMain.ts b/src/vs/code/electron-sandbox/deploy/deployWindowMain.ts
index ba4fc2cb..76061f4b 100644
--- a/src/vs/code/electron-sandbox/deploy/deployWindowMain.ts
+++ b/src/vs/code/electron-sandbox/deploy/deployWindowMain.ts
@@ -269,17 +269,17 @@ class deployWindow {
 		if (this.extInstallState.size > 0) {
 			let progressViews = document.getElementsByClassName("progress-view") as HTMLCollectionOf;
 			progressViews[0].value = (this.progressNum / this.extInstallState.size) * 100;
-			document.getElementsByClassName("progressinfo")[0].innerHTML = "安装进度:" + ((this.progressNum / this.extInstallState.size) * 100).toFixed(2) + "%";
+			document.getElementsByClassName("progressinfoValue")[0].innerHTML = ((this.progressNum / this.extInstallState.size) * 100).toFixed(2) + "%";
 		}
 
 		for (const [key, value] of this.extInstallState) {
 			if (key === undefined) continue;
 			switch (value) {
 				case 0:
-					dTformattedDoc += "" + key + "准备中...
";
+					dTformattedDoc += "" + key + "准备中...
";
 					break;
 				case 1:
-					dTformattedDoc += "" + key + "开始下载
";
+					dTformattedDoc += "" + key + "开始下载
";
 					break;
 				case 2:
 					dTformattedDoc += "" + key + "下载完成
";
@@ -361,6 +361,14 @@ class deployWindow {
 				document.getElementById("detailInstallPre")!.style.display = 'none';
 				document.getElementById("extInstallLogPre")!.style.display = 'none';
 
+				document.getElementById("progressInfoCancel")!.style.display = 'none';
+				document.getElementById("progressInfoFinish")!.style.display = 'inline-block';
+
+				// 选择包含进度条的元素，并设置伪元素样式
+				var style = document.createElement('style');
+				style.textContent = ".progress-view::-webkit-progress-value { background-color: #1AC465; }";
+				document.head.appendChild(style);
+
 				this.nextBtn!.innerText = "结束";
 				this.nextBtn!.disabled = false;
 				this.cancelBtn!.disabled = true;
@@ -545,7 +553,9 @@ class deployWindow {
 				console.log("extInstallState.size" + this.extInstallState.size);
 				let progress_view = document.getElementsByClassName("progress-view") as HTMLCollectionOf;
 				progress_view[0].value = 0;
-				document.getElementsByClassName("progressinfo")[0].innerHTML = "安装进度:0%";
+				document.getElementsByClassName("progressinfoValue")[0].innerHTML = "0%";
+				document.getElementById("progressInfoCancel")!.style.display = 'inline-block';
+				document.getElementById("progressInfoFinish")!.style.display = 'none';
 
 				let extPreElement = document.getElementById("extInstallLogPre");
 				extPreElement!.innerHTML = "";
@@ -671,6 +681,11 @@ class deployWindow {
 				document.getElementById('lablenotNow')!.style.display = 'none';
 			}
 		})
+		document.getElementById('progressInfoCancel')?.addEventListener('click', () => {
+			console.log('cancel');
+			// ipcRenderer.removeAllListeners('kylinide.installWizard.msg');
+			ipcRenderer.send('kylinide.installWizard.msg.process', { type: "cancel" });
+		});
 		document.getElementById('cancel')?.addEventListener('click', () => {
 			console.log('cancel');
 			// ipcRenderer.removeAllListeners('kylinide.installWizard.msg');
diff --git a/src/vs/code/electron-sandbox/deploy/media/deploy.css b/src/vs/code/electron-sandbox/deploy/media/deploy.css
index 3ae76936..71d00d88 100644
--- a/src/vs/code/electron-sandbox/deploy/media/deploy.css
+++ b/src/vs/code/electron-sandbox/deploy/media/deploy.css
@@ -613,6 +613,7 @@ button#prevStep:disabled {
 ::-webkit-scrollbar {
 	width: 8px;
 	/* 设置滚动条宽度 */
+	height: 8px;
 }
 
 ::-webkit-scrollbar-track {
@@ -772,30 +773,97 @@ input[readonly] {
 }
 
 .progress-container {
+	width: calc(100% - 64px);
+	margin-top: 20px;
+	margin-left: 32px;
+	margin-right: 32px;
+}
+.progressinfoContainer {
 	display: flex;
 	align-items: center;
-	margin: -8px;
+	justify-content: space-between;
+	margin: 0px;
+	padding: 0px;
 }
 
+.progressinfoTitle {
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 500;
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.7);
+	line-height: 18px;
+	text-align: left;
+	font-style: normal;
+}
+
+.progressinfoValue {
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 500;
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.9);
+	line-height: 18px;
+	text-align: left;
+	font-style: normal;
+}
+
+.progressInfoCancel {
+	width: 32px;
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 500;
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.5);
+	line-height: 18px;
+	text-align: center;
+	font-style: normal;
+}
+
+.progressInfoFinish:before {
+	/*对号*/
+	content: "\2713";
+	color: #1AC465;
+	margin: 0px;
+	padding: 0px;
+}
+
+.progress-view {
+	height: 4px;
+	overflow: hidden;
+	width: 100%;
+	border: none;
+	margin: 0px;
+	padding: 0px;
+	border-radius: 4px;
+	margin-bottom: 6px;
+}
+ /* 设置背景色 */
+.progress-view::-webkit-progress-bar {
+	background-color: rgba(255,255,255,0.12);
+}
+ /* 设置前景色 */
+.progress-view::-webkit-progress-value {
+	/* background-color: #1AC465; */
+	background-color: #5A97FF;
+}
+
+
 .progress-download,
 .progress-install,
-.pkg-progress-install,
-.progressinfo {
+.pkg-progress-install {
 	position: absolute;
 	/* 添加绝对定位 */
 	margin-left: 18%;
 	color: #000000;
 }
 
+
 .download-view,
 .install-view,
 .pkg-install-view,
-.progress-view,
 .progressDown {
 	flex: 1;
 	height: 50px;
 	position: relative;
-	width: 800px;
+	/* width: 800px; */
 	margin-left: 8%;
 }
 
@@ -803,7 +871,7 @@ input[readonly] {
 	flex: 1;
 	height: 26px;
 	position: relative;
-	width: 800px;
+	/* width: 800px; */
 	margin-left: 8%;
 	margin-top: 10px;
 	margin-bottom: 8px;
@@ -828,20 +896,73 @@ input[readonly] {
 }
 
 .detailInstallOutputTextbox {
-	margin-left: 8%;
-	font-weight: bold;
-	margin-top: 5px;
+	/* background-color: red; */
+	height: calc(251 - 12px);
+	width: calc(100% - 64px);
+	margin-left: 32px;
+	margin-right: 32px;
+	margin-top: 12px;
 }
 
+.detailInstallOutputTextbox>label {
+	height: 20px;
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: bold;
+	font-size: 13px;
+	color: rgba(255,255,255,0.5);
+	line-height: 18px;
+	text-align: left;
+	font-style: normal;
+}
+
+.detailInstallOutputTextbox>div {
+	background-color: #1E1E1E;
+	height: 251px;
+	width: 100%;
+	margin: 0px;
+	position: relative;
+}
+
+.switchInstallOutput {
+	position: absolute;  /* 2 */
+	height: 28px;
+	width: 86px;
+	top: 8px;
+	right: 18px;
+	border: none;
+	border-radius: 1px;
+	background-color: #333333;
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 400;
+	font-size: 13px;
+	color: rgba(255,255,255,0.7);
+}
+
+
 #detailInstallPre,
 #installLogPre,
 #extInstallLogPre,
 #finishPage {
-	height: 300px;
-	width: 700px;
+	/* width: 700px; */
+	/* height: 300px; */
+	height: calc(100% - 16px);
 	flex: 1;
 	position: relative;
-	overflow-y: auto;
+	overflow: auto;
+	margin: 0px;
+	margin-top: 2px;
+	padding-top: 8px;
+	padding-right: 11px;
+	padding-bottom: 8px;
+	padding-left: 11px;
+
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 400;
+	font-size: 13px;
+	color: rgba(255,255,255,0.9);
+	line-height: 22px;
+	text-align: left;
+	font-style: normal;
 }
 
 .dark {
@@ -856,13 +977,28 @@ pre .downloadHighlight::before {
 	margin-right: 5px;
 }
 
-pre .startHighlight::before {
-	content: "\25CF";
-	/* Unicode实心圆圈字符 */
-	color: gray;
+/* Unicode实心圆圈字符 */
+/* pre .startHighlight::before {
+ 	content: "\25CF";
+	color: red;
+	margin-right: 5px;
+} */
+
+.startHighlightImg {
+	content: url(./loading.png);
+	animation: rotateAnimation 1s linear infinite;
 	margin-right: 5px;
 }
 
+@keyframes rotateAnimation {
+	from {
+	  transform: rotate(0deg); /* 动画开始时图片的角度 */
+	}
+	to {
+	  transform: rotate(360deg); /* 动画结束时图片旋转360度 */
+	}
+  }
+
 pre .installedHighlight::before {
 	content: "\2713";
 	/* Unicode对号字符 */
@@ -883,10 +1019,6 @@ pre .depfailHighlight::before {
 	margin-right: 5px;
 }
 
-.switchInstallOutput {
-	position: absolute;
-}
-
 .center div p {
 	margin-bottom: 0;
 	margin-top: 0;
diff --git a/src/vs/code/electron-sandbox/deploy/media/loading.png b/src/vs/code/electron-sandbox/deploy/media/loading.png
new file mode 100644
index 00000000..b506e355
Binary files /dev/null and b/src/vs/code/electron-sandbox/deploy/media/loading.png differ
diff --git a/src/vs/code/electron-sandbox/deploy/media/switch.png b/src/vs/code/electron-sandbox/deploy/media/switch.png
new file mode 100644
index 00000000..704b406b
Binary files /dev/null and b/src/vs/code/electron-sandbox/deploy/media/switch.png differ