修改 安装向导界面1-3样式

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

@@ -38,7 +38,7 @@
 			<div class="header-drag-region" id="header-drag-region">
 				<div class="header-left" style="float: left;">
 					<div class="header-icon" id="header-icon"></div>
-					<div class="title" id="title">快速开发安装部署</div>
+					<div class="title" id="title">安装向导</div>
 				</div>
 				<div class="header-right" id="header-right" style="float: right;">
 					<div class="minw" id="minwBtn"></div>
@@ -49,7 +49,7 @@
 			<div class="bodycontent" id="bodycontent">
 						<div class="tab" id="homepage">
 							<div class="installInfo1" id="installInfo1">
-								<h3>安装引导说明</h3>
+								<h3>安装引导说明：</h3>
 								<p>1.本安装引导用于引导用户根据开发场景安装基础功能插件、安装依赖软件、配置基本开发环境。</p>
 								<p>2.本安装引导仅安装基础插件，可以在插件市场中获取更多插件。</p>
 								<p>3.在线安装功能需要连接互联网下载插件和依赖软件。</p>
@@ -58,7 +58,7 @@
 							</div>
 							<div class="devContent">
 								<form class="installSelectionType">
-									<label class="installSelection">
+									<label class="installSelection radiogroup">
 										<input type="radio" id="onlineInstall" name="choice" value="onlineInstall" checked>
 										<label for="onlineInstall" id="onlineInstalllabel">在线安装</label><br>
 									</label>
@@ -70,15 +70,25 @@
 										<input type="radio" id="justDownload" name="choice" value="justDownload">
 										<label for="justDownload">仅下载不安装</label><br>
 									</label> -->
-									<label class="installSelection">
+									<label class="installSelection radiogroup">
 										<input type="radio" id="notNow" name="choice" value="notNow">
-										<label for="notNow" id="lablenotNow">跳过(我自己配置)</label><br>
+										<label for="notNow" id="lablenotNow">跳过所有</label><br>
 									</label>
 								</form>
 							</div>
 						</div>
 						<div class="tab" id="waitTab">
 							<div class="wait-container">
+								<div class="line-spin-fade-loader">
+									<div></div>
+									<div></div>
+									<div></div>
+									<div></div>
+									<div></div>
+									<div></div>
+									<div></div>
+									<div></div>
+								</div>
 								<h3>请稍等片刻...</h3>
 								<p>正在联网进行配置文件下载、检查、校验及本地配置文件的校验等工作</p>
 							</div>
@@ -91,19 +101,25 @@
 							</div>
 							<div class="devContentCol">
 								<form class="SelectionUpdate">
-									<input type="radio" id="onlineUpdateConfig" name="updateConfig" value="onlineUpdateConfig" checked>
-									<label for="onlineUpdateConfig" id="labelonlineUpdateConfig">是</label><br>
-									<input type="radio" id="onlineLocalConfig" name="updateConfig" value="onlineLocalConfig">
-									<label for="onlineLocalConfig">否</label><br>
+									<div class="radiogroup">
+										<input type="radio" id="onlineUpdateConfig" name="updateConfig" value="onlineUpdateConfig" checked>
+										<label for="onlineUpdateConfig" id="labelonlineUpdateConfig">是</label><br>
+									</div>
+									<div class="radiogroup">
+										<input type="radio" id="onlineLocalConfig" name="updateConfig" value="onlineLocalConfig">
+										<label for="onlineLocalConfig">否</label><br>
+									</div>
 								</form>
 							</div>
-							<div id="onlinewarning">
+							<div class="onlinewarningrow">
+								<div class="onlinewarningicon"></div>
+								<div class="onlinewarning" id="onlinewarning"></div>
 							</div>
 						</div>
 						<div class="tab" id="onlineInstallTab2">
-							<div class="installInfo1" id="osInfo">
+							<div class="installInfo1 osInfo" id="osInfo">
 							</div>
-							<div class="devContent" id="osInfoShow">
+							<div class="osInfoShow" id="osInfoShow">
 							</div>
 						</div>
 						<div class="tab" id="onlineInstallTab3">

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

@@ -133,17 +133,17 @@ class deployWindow {
 				if (!msg.osinfo) {
 					osinfo = `<h3>操作系统信息</h3><p>操作系统检测脚本运行失败，未成功检测到操作系统类型</p>`
 				} else {
-					osinfo = `<h3>操作系统信息</h3><p>已检测到当前操作系统信息为：<span style="color:#1177BB;">${msg.osinfo}</span></p>`;
+					osinfo = `<h3>操作系统信息</h3><p>已检测到当前操作系统信息为：<span>${msg.osinfo}</span></p>`;
 				}
 				parentdiv.innerHTML = osinfo;
 				let data = "";
 				let osdiv;
-				osdiv = `<p>判断依据:</p><p>cat  ${msg.osFile}</p>`;
+				osdiv = `<p>判断依据:</p><div><p>cat  ${msg.osFile}</p>`;
 				data = `${msg.osData}`
 				if (osdiv == "" && data == "") {
 					parentdivshow.innerHTML = "读取操作系统信息失败";
 				} else {
-					parentdivshow.innerHTML = `${osdiv}<p>${data}</p>`;
+					parentdivshow.innerHTML = `${osdiv}<p>${data}</p></div>`;
 				}
 			} else if (msg.type === "configGetValue") {
 				console.log("kylinide.installWizard.init configGetValue ")
@@ -511,6 +511,11 @@ class deployWindow {
 			document.getElementById('nextStep')!.innerHTML = "下一步";
 		}
 	}
+
+	custom_print(msg: string) {
+		console.log("custom_print ==> " + msg);
+	}
+
 	nextPrev(n: number) {
 		// This function will figure out which tab to display
 		// let x = document.getElementsByClassName('tab');
@@ -527,7 +532,9 @@ class deployWindow {
 		} else if (this.onlineInstallRadio && this.onlineInstallRadio instanceof HTMLInputElement && this.onlineInstallRadio.checked) {
 			this.justDownLoadTabArrayIndex = 0;
 			this.localInstallTabArrayIndex = 0;
-			console.log("onlineInstallArrayIndex:" + this.onlineInstallTabArrayIndex);
+
+			this.custom_print(this.onlineInstallTabArray[this.onlineInstallTabArrayIndex]);
+
 			if (this.onlineInstallTabArray[this.onlineInstallTabArrayIndex] === "onlineInstallTab1") {
 				//获取radio的值
 				console.log("onlineInstallTab1");
@@ -619,14 +626,15 @@ class deployWindow {
 				return;
 			}
 			if (this.onlineInstallTabArrayIndex < this.onlineInstallTabArray.length - 1) {
-				console.log("this.onlineInstallTabArrayIndex < this.onlineInstallTabArray.length - 1");
+				this.custom_print("this.onlineInstallTabArrayIndex < this.onlineInstallTabArray.length - 1");
 				if (this.onlineInstallTabArrayIndex == 0) {
-					console.log("在线安装");
+					this.custom_print("在线安装");
 					ipcRenderer.send("kylinide.installWizard.init", { type: "httpVerify" });
 					// removeStepIndicator();
 					// createStepIndicator(this.onlineInstallTabArray.length - 1);
 					// fixStepIndicator(onlineInstallTabArray.length - 1);
 				} else {
+					this.custom_print("this.onlineInstallTabArrayIndex != 0")
 					let preTab = document.getElementById(this.onlineInstallTabArray[this.onlineInstallTabArrayIndex]) as HTMLDivElement;
 					preTab.style.display = 'none';
 					this.onlineInstallTabArrayIndex = this.onlineInstallTabArrayIndex + n;

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

@@ -6,20 +6,25 @@ body {
 	background-color:transparent; /* 设置背景颜色和透明度 */
 }
 .deploycontainer {
-	width: 582px;
-	height: 486px;
+	width: 624px;
+	height: 500px;
 	/* 很重要,不然flex不生效 */
 	display: flex;
 	flex-direction: column;
 	flex: 1;
 	border-radius: 6px;
+	line-height: 20px;
 	background-color: #333333;
-	color:white;
+	color: rgba(255,255,255,0.9);
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 500;
+	font-size: 13px;
+	font-style: normal;
 }
 .header-drag-region {
 	cursor: move;
 	height: 41px;
-	width: 582px;
+	width: 624px;
 	border-bottom: 1px solid #1E1E1E;
 	box-sizing: border-box;
 	/* padding: 5px 2px 9px; */
@@ -45,7 +50,7 @@ body {
 	margin-left: 16px;
 	align-items: center;
 	font-size: 13px;
-	color: #fff;
+	color: rgb(255, 255, 255, .9);
 	font-weight: bold;
 	height: 41px;
 }
@@ -229,29 +234,40 @@ button#prevStep:disabled
 
 .installInfo1{
 	margin-top:20px;
-	 height: auto;
-	 margin-left:32px;
+	height: auto;
+	margin-left:32px;
+	margin-right: 32px;
 }
 
 .installInfo1 h3 {
-	 font-size: 12px;
-	 font-weight: bold;
-	 margin-top:0px ;
-	 margin-bottom: 0px;
-	 color:white;
+	margin-top:0px ;
+	margin-bottom: 6px;
+	width: 440px;
+	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;
 }
 
-.installInfo1  p {
-	   margin-bottom: 0;
-	   margin-top: 0;
-	   font-size: 12px;
-	   color:white;
+.installInfo1 p {
+	margin-bottom: 0;
+	margin-top: 0;
+	color: rgba(255,255,255,0.7);
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 400;
+	font-size: 13px;
+	line-height: 22px;
    }
 .devContent{
 	 margin-top:20px;
 	 height: auto;
 	 margin-left:32px;
 	 font-size: 12px;
+	 margin-right: 32px;
 }
 
 
@@ -269,7 +285,51 @@ button#prevStep:disabled
 .devContentCol{
 	display: flex;
 	flex-direction: column;
+	/* background-color: red; */
+	margin-top: 22px;
+	margin-left: 32px;
+	margin-right: 32px;
 }
+.devContentCol .radiogroup:last-child {
+	margin-top: 10px;
+}
+
+.onlinewarningrow {
+	display: flex;
+	width: calc(100% - 64px);
+	height: 28px;
+	margin-top: 22px;
+	background-color: rgba(255, 255, 255, 0.06);
+	margin-left: 32px;
+	margin-right: 32px;
+	align-items: center;
+}
+
+.onlinewarning {
+	margin-left: 12px;
+	display: inline-block;
+	position: relative;
+	height: 20px;
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 400;
+	font-size: 13px;
+	color: rgba(255,255,255,0.7);
+	line-height: 20px;
+	text-align: left;
+	font-style: normal;
+}
+
+.onlinewarningicon:before{
+	display: inline-block;
+	position: relative;
+	/* background-color: red; */
+	margin-left: 12px;
+	margin-top: 6px;
+	width: 12px;
+	height: 12px;
+	content: url(./prompt.svg);
+  }
+
  /* 用圆圈表示表格的步骤： */
  .indicator {
 	position: absolute;
@@ -315,16 +375,286 @@ button#prevStep:disabled
 	 margin-left: 20px;
  }
 
- .installSelection,
  .updateInstallConfig,
  .installInfoConfig {
-	 font-size: 18px;
-	 line-height: 2.0;
+	 /* font-size: 18px; */
+	 /* line-height: 2.0; */
  }
 
- .installInfo1 {
-	 height: auto;
+ .installSelection {
+ 	opacity: 1;
+ 	display: flex;
+	margin-top: 20px;
  }
+
+ .radiogroup:first-child {
+    margin-top: 0;
+}
+
+ /* 隐藏原生的 radio 按钮 */
+ .radiogroup input[type="radio"] {
+ 	display: none;
+ }
+ /* 定义自定义样式的 label  */
+ .radiogroup label {
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 400;
+	font-size: 13px;
+	color: rgba(255,255,255,0.7);
+	line-height: 20px;
+	text-align: left;
+	font-style: normal;
+	display: inline-block;
+	padding-left: 24px;
+	position: relative;
+	user-select: none;
+ }
+ /* 创建自定义的圆形按钮 */
+ .radiogroup label::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 16px;
+	height: 16px;
+	border: 1px solid #686868;
+	border-radius: 50%;
+	/* transition: border-color 0.3s; */
+ }
+ /* 选中时改变字体颜色 */
+ .radiogroup input[type="radio"]:checked+label {
+	color: rgba(255,255,255,0.9);
+ }
+ /* 当 radio 按钮被选中时改变样式 */
+ .radiogroup input[type="radio"]:checked+label::before {
+	border-color: #2777FF;
+ }
+ /* 创建自定义的选中圆点 */
+ .radiogroup input[type="radio"]:checked+label::after {
+	content: '';
+	position: absolute;
+	left: 5px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 8px;
+	height: 8px;
+	background-color: #2777FF;
+	border-radius: 50%;
+	/* transition: background-color 0.3s; */
+ }
+
+ @keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+
+/* loading */
+@-webkit-keyframes line-spin-fade-loader {
+	50% {
+			opacity: 0.3;
+	}
+
+	100% {
+			opacity: 1;
+	}
+}
+
+@keyframes line-spin-fade-loader {
+	50% {
+			opacity: 0.3;
+	}
+
+	100% {
+			opacity: 1;
+	}
+}
+
+.line-spin-fade-loader {
+	position: relative;
+	transform: scale(.5);
+	margin-top: 66px;
+}
+
+.line-spin-fade-loader>div:nth-child(1) {
+	top: 20px;
+	left: 0;
+	-webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
+	animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
+}
+
+.line-spin-fade-loader>div:nth-child(2) {
+	top: 13.63636px;
+	left: 13.63636px;
+	-webkit-transform: rotate(-45deg);
+	-ms-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+	-webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
+	animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
+}
+
+.line-spin-fade-loader>div:nth-child(3) {
+	top: 0;
+	left: 20px;
+	-webkit-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	transform: rotate(90deg);
+	-webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
+	animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
+}
+
+.line-spin-fade-loader>div:nth-child(4) {
+	top: -13.63636px;
+	left: 13.63636px;
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+	-webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
+	animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
+}
+
+.line-spin-fade-loader>div:nth-child(5) {
+	top: -20px;
+	left: 0;
+	-webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
+	animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
+}
+
+.line-spin-fade-loader>div:nth-child(6) {
+	top: -13.63636px;
+	left: -13.63636px;
+	-webkit-transform: rotate(-45deg);
+	-ms-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+	-webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
+	animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
+}
+
+.line-spin-fade-loader>div:nth-child(7) {
+	top: 0;
+	left: -20px;
+	-webkit-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	transform: rotate(90deg);
+	-webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
+	animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
+}
+
+.line-spin-fade-loader>div:nth-child(8) {
+	top: 13.63636px;
+	left: -13.63636px;
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+	-webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
+	animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
+}
+
+.line-spin-fade-loader>div {
+	background-color: #2777FF;
+	border-radius: 2px;
+	margin: 2px;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	position: absolute;
+	width: 5px;
+	height: 15px;
+}
+
+.wait-container {
+	display: flex;
+	flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+	/* position: relative; */
+	width: 100%;
+	/* background-color: #1177BB; */
+	top: 0;
+	left: 0;
+}
+
+.wait-container>h3 {
+	/* background-color: red; */
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: bold;
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.9);
+	text-align: center;
+	font-style: normal;
+	margin-top: 40px;
+	margin-bottom: 0px;
+}
+.wait-container>p {
+	/* background-color: orange; */
+ 	font-family: SourceHanSansCN, SourceHanSansCN;
+ 	font-weight: 400;
+ 	font-size: 13px;
+	color: rgba(255, 255, 255, 0.5);
+ 	text-align: center;
+	font-style: normal;
+	margin-top: 10px;
+ 	/* line-height: 20px; */
+ 	/*
+ 	font-style: normal; */
+ }
+
+ .osInfo span {
+	height: 20px;
+	font-family: SourceHanSansCN, SourceHanSansCN;
+	font-weight: 500;
+	font-size: 13px;
+	color: rgba(255,255,255,0.9);
+	line-height: 20px;
+	text-align: left;
+	font-style: normal;
+ }
+
+ /* 自定义滚动条的样式 */
+::-webkit-scrollbar {
+	width: 8px; /* 设置滚动条宽度 */
+}
+
+::-webkit-scrollbar-track {
+	background: transparent; /* 设置滚动条轨道的背景颜色 */
+}
+
+::-webkit-scrollbar-thumb {
+	background: #585858; /* 设置滚动条手柄的背景颜色 */
+	border-radius: 4px;
+}
+
+ .osInfoShow {
+	display: flex;
+	flex-direction: column;
+	width: calc(100% - 64px);
+	margin-top: 20px;
+	margin-left: 32px;
+	margin-right: 32px;
+ }
+
+ .osInfoShow p{
+	margin: 0px;
+ }
+
+ .osInfoShow>div {
+	height: 220px;
+	background-color: #1E1E1E;
+	overflow-y: auto;
+	padding-top: 8px;
+	padding-right: 27px;
+	padding-bottom: 3px;
+	padding-left: 10px;
+ }
+ .osInfoShow>div p {
+	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;
+ }
+
  #checkboxForm {
 	 width: 180px;
  }

src/vs/code/electron-sandbox/deploy/media/prompt.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M515.132391 0.009707a511.992663 511.992663 0 1 0 508.832215 505.897513A513.347141 513.347141 0 0 0 515.132391 0.009707z m0 914.724106A404.311667 404.311667 0 0 1 109.917739 512.00237a406.343384 406.343384 0 1 1 406.343384 402.731443z" fill="#909399" /><path d="M585.339498 442.246756H365.914071v72.690317h73.141809v290.761265h146.283618l73.141809-72.690316h-73.141809V442.246756zM439.05588 224.175807h146.283618v145.380633h-146.283618z" fill="#909399" /></svg>