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

This commit is contained in:
weike 2024-05-31 09:12:09 +08:00 committed by wangpenglong
parent 3056055f44
commit 9e714c643f
4 changed files with 395 additions and 40 deletions

View File

@ -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">
<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">

View File

@ -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;

View File

@ -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;
}
@ -231,27 +236,38 @@ button#prevStep:disabled
margin-top:20px;
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-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;
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;
}

View File

@ -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>

After

Width:  |  Height:  |  Size: 725 B