修改 界面5样式

src/vs/code/electron-sandbox/deploy/deployWindow-dev.html

@@ -138,20 +138,32 @@
 								</div>
 							</div>
 						</div>
-						<div class="tab" id="onlineInstallTab4">
+						<div class="tab progressTab" id="onlineInstallTab4">
 							<div class="progress-container">
-								<progress class="progress-view" value="50" max="100" style="overflow:hidden;"></progress>
+								<div class="progressinfoContainer">
-								<span class="progressinfo"></span>
+									<div>
+										<span class="progressinfoTitle">安装进度：</span>
+										<span class="progressinfoValue">00.00%</span>
+									</div>
+									<div>
+									<span id="progressInfoFinish" class="progressInfoFinish"></span>
+									<label id="progressInfoCancel" class="progressInfoCancel">取消</label>
+									</div>
+								</div>
+								<progress class="progress-view" value="50" max="100"></progress>
 							</div>
 
 							<div class="detailInstallOutputTextbox">
 								<label for="detailInstallOutputTextbox">安装详情</label>
-								<pre id="detailInstallPre" style="display: block"></pre>
+								<div>
-								<pre id="installLogPre" style="display: none"></pre>
+									<pre id="detailInstallPre" style="display: block"></pre>
-								<pre id="extInstallLogPre" style="display: none"></pre>
+									<pre id="installLogPre" style="display: none"></pre>
-								<pre id="finishPage" style="display: none"></pre>
+									<pre id="extInstallLogPre" style="display: none"></pre>
-								<div class="btn-group">
+									<pre id="finishPage" style="display: none"></pre>
-								<button class="switchInstallOutput" id="switchInstallOutput">切换输出</button>
+									<button class="switchInstallOutput" id="switchInstallOutput">
+										<img src="./media/switch.png" style="display: inline-block;" alt="切换" width="10px" height="8px"/>
+										<div style="display: inline-block; margin-left: 4px;">切换输出</div>
+									</button>
 								</div>
 							</div>
 						</div>

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<HTMLProgressElement>;
 			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 += "<span class='startHighlight'>" + key + "准备中...</span><br>";
+					dTformattedDoc += "<img class='startHighlightImg'><span class='startHighlight'>" + key + "准备中...</span><br>";
 					break;
 				case 1:
-					dTformattedDoc += "<span class='startHighlight'>" + key + "开始下载</span><br>";
+					dTformattedDoc += "<img class='startHighlightImg'><span class='startHighlight'>" + key + "开始下载</span><br>";
 					break;
 				case 2:
 					dTformattedDoc += "<span class='downloadHighlight'>" + key + "下载完成</span><br>";
@@ -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<HTMLProgressElement>;
 				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');

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,
+.pkg-progress-install {
-.progressinfo {
 	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%;
+	/* background-color: red; */
-	font-weight: bold;
+	height: calc(251 - 12px);
-	margin-top: 5px;
+	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 {
+/* Unicode实心圆圈字符 */
-	content: "\25CF";
+/* pre .startHighlight::before {
-	/* Unicode实心圆圈字符 */
+ 	content: "\25CF";
-	color: gray;
+	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;