修改 步骤框显示

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

@@ -169,9 +169,9 @@
 						</div>
 			</div>
 
-			<!-- <div class="indicator" id="indicator">
+			<div class="indicator" id="indicator">
 
-			</div> -->
+			</div>
 			<div class="footer">
 				<div class="helpLink" id="helpLink" style="float: left;" ></div>
 				<div class="btn-group" style="float: right;">

src/vs/code/electron-sandbox/deploy/deployWindowMain.ts

@@ -581,9 +581,8 @@ class deployWindow {
 				if (this.onlineInstallTabArrayIndex == 0) {
 					this.custom_print("在线安装");
 					ipcRenderer.send("kylinide.installWizard.init", { type: "httpVerify" });
-					// removeStepIndicator();
+					this.removeStepIndicator();
-					// createStepIndicator(this.onlineInstallTabArray.length - 1);
+					this.createStepIndicator(this.onlineInstallTabArray.length - 1, 0);
-					// fixStepIndicator(onlineInstallTabArray.length - 1);
 				} else {
 					this.custom_print("this.onlineInstallTabArrayIndex != 0")
 					let preTab = document.getElementById(this.onlineInstallTabArray[this.onlineInstallTabArrayIndex]) as HTMLDivElement;
@@ -608,6 +607,35 @@ class deployWindow {
 		}
 	}
 
+	createStepIndicator(length: number, currentIndex: number) {
+		var indicatorDiv = document.getElementById('indicator');
+		while (indicatorDiv!.firstChild) {
+			indicatorDiv!.removeChild(indicatorDiv!.firstChild);
+		}
+		for (let i = 0; i < length; i++) {
+			let indicatorItem = document.createElement('div');
+			indicatorItem.classList.add('indicator-item');
+			indicatorDiv!.appendChild(indicatorItem);
+		}
+		indicatorDiv!.children[currentIndex].classList.add('active');
+	}
+	removeStepIndicator() {
+		var indicatorDiv = document.getElementById('indicator');
+		while (indicatorDiv!.firstChild) {
+			indicatorDiv!.removeChild(indicatorDiv!.firstChild);
+		}
+	}
+	fixStepIndicator(index: number) {
+		var indicatorDiv = document.getElementById('indicator');
+		if (index < 0 || index > indicatorDiv!.children.length - 1)
+			return;
+		let activeItem = indicatorDiv!.querySelector('.active');
+		if (activeItem) {
+			activeItem.classList.remove('active');
+		}
+		indicatorDiv!.children[index].classList.add('active');
+	}
+
 	showTabFromIndex(tabArray: string[], Index: number) {
 		let tab = document.getElementById(tabArray[Index]) as HTMLDivElement;
 		tab.style.display = 'flex';
@@ -623,13 +651,12 @@ class deployWindow {
 		} else {
 			if (this.nextBtn) { this.nextBtn.innerHTML = "下一步" }
 		}
-		// if (Index === 0) {
+		if (Index === 0) {
-		// 	removeStepIndicator();
+			this.removeStepIndicator();
-		// }
+		}
-		// if (Index > 0) {
+		if (Index > 0) {
-		// 	fixStepIndicator(Index - 1);
+			this.fixStepIndicator(Index - 1);
-		// }
+		}
-
 	}
 	registerEventListener() {
 		/**

src/vs/code/electron-sandbox/deploy/media/deploy.css

@@ -344,12 +344,40 @@ button#prevStep:disabled {
 }
 
 /* 用圆圈表示表格的步骤： */
-.indicator {
+/* .indicator {
 	position: absolute;
 	bottom: 65px;
 	text-align: center;
 	left: 50%;
 	transform: translate(-50%);
+} */
+.indicator {
+	position: relative;
+	bottom: 0px;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 100%;
+	/* height: 40px; */
+	display: flex;
+	justify-content: center;
+	align-items: start;
+	margin-top: -11px;
+}
+
+.indicator-item {
+	border-radius: 50%;
+	margin: 0px 5px 0px 0px;
+	transition: all 0.3s ease;
+	width: 5px;
+	height: 5px;
+	background: rgba(255,255,255,0.3);
+}
+
+.indicator-item.active {
+	width: 15px;
+	height: 5px;
+	background: #2777FF;
+	border-radius: 3px;
 }
 
 .step {