From 3709443b82329355f1755e514169664c4cf8a31d Mon Sep 17 00:00:00 2001 From: dinglili Date: Fri, 26 Jan 2024 14:22:27 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BE=9D=E8=B5=96=E4=BF=A1?= =?UTF-8?q?=E6=81=AF,=E8=A7=A3=E5=86=B3=E7=89=88=E6=9C=AC=E5=8F=91?= =?UTF-8?q?=E5=B8=83=E7=BC=96=E8=AF=91=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/vs/code/electron-main/app.ts | 111 ++- .../installWizard/page/view/index-bak.css | 492 ++++++++++ .../installWizard/page/view/index.css | 863 +++++++++--------- .../installWizard/page/view/index.html | 34 +- .../installWizard/page/view/index.js | 7 +- 5 files changed, 1019 insertions(+), 488 deletions(-) create mode 100644 src/vs/code/electron-main/installWizard/page/view/index-bak.css diff --git a/src/vs/code/electron-main/app.ts b/src/vs/code/electron-main/app.ts index 92464ede..70f89716 100644 --- a/src/vs/code/electron-main/app.ts +++ b/src/vs/code/electron-main/app.ts @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { app, BrowserWindow, contentTracing, dialog, ipcMain, protocol, session, Session, systemPreferences, WebFrameMain } from 'electron'; +import { app, BrowserWindow, contentTracing, dialog, ipcMain, protocol, session, Session, systemPreferences, WebFrameMain, screen } from 'electron'; import { validatedIpcMain } from 'vs/base/parts/ipc/electron-main/ipcMain'; import { statSync } from 'fs'; import { hostname, release } from 'os'; @@ -104,11 +104,12 @@ import { PolicyChannel } from 'vs/platform/policy/common/policyIpc'; import * as installUtils from 'vs/code/electron-main/installUtils'; import axios from "axios"; -import { Semaphore } from "async-mutex"; +// import { Semaphore } from "async-mutex"; import * as fs from 'fs'; import * as path from 'path'; import { spawn, ChildProcess } from 'child_process'; +import { AbortController } from "@azure/abort-controller"; /** * The main VS Code application. There will only ever be one instance, @@ -1284,10 +1285,20 @@ export class CodeApplication extends Disposable { const theme = this.configurationService.getValue('workbench.colorTheme') ? this.configurationService.getValue('workbench.colorTheme') : 'Visual Studio Dark'; console.log('get config color theme=' + this.configurationService.getValue('workbench.colorTheme')); // 创建浏览器窗口 + + const { width, height } = screen.getPrimaryDisplay().workAreaSize; + console.log("windowsize:", width, height, "size*", width * 0.8, height * 0.7); + const winwidth = width * 0.9 > 900 ? 900 : width * 0.9; + const winheight = height * 0.7 > 600 ? 600 : height * 0.7; + this.win = new BrowserWindow({ - resizable: false, - height: 650, - width: 900, + resizable: true, + maxHeight: 600, + maxWidth: 900, + minHeight: 400, + minWidth: 600, + height: winwidth, + width: winheight, frame: false, transparent: false, fullscreen: false, @@ -1324,8 +1335,8 @@ export class CodeApplication extends Disposable { //封装发送给渲染进程的数据 let initData = { restoreData: restoreData, - height: 650, - width: 900, + height: winheight, + width: winwidth, theme: theme, userDataPath: that.environmentMainService.userDataPath, isBeta: false, @@ -1345,7 +1356,9 @@ export class CodeApplication extends Disposable { let pkglogFsWatcher: fs.FSWatcher | null; //执行安装脚本的进程号； let installProcessId: ChildProcess; + let cancelFlag = false; + let controller = new AbortController(); // let scriptList: {}[] = []; //electron生命周期 监听did-finish-load事件 this.win.webContents.on('did-finish-load', async function () { @@ -1886,17 +1899,14 @@ export class CodeApplication extends Disposable { }); ipcMain.on('kylinide.installWizard.downloadExt', async (event, message) => { - + installQueue.splice(0); let depObject = JSON.parse(fs.readFileSync(message.extAddressPath, 'utf-8')); let extLatestDownloadUrlList = []; let extDownloadUrlList = []; extDownloadPath = installConfig + '/Download/' - const concurrencyLimit = 1; // 并发限制数量 - const semaphore = new Semaphore(concurrencyLimit); - extList.forEach(async (val) => { - await semaphore.acquire(); // 获取信号量，控制并发数量 + // await semaphore.acquire(); // 获取信号量，控制并发数量 let gitInfo = depObject[val]['ext_links']['gitee']; let tempUrl = gitInfo.prefix + '/' + gitInfo.org + '/' + gitInfo.repo + '/' + 'releases/latest'; @@ -1909,7 +1919,8 @@ export class CodeApplication extends Disposable { 'User-Agent': 'axios', 'Accept': '*/*', }, - timeout: 10000 + timeout: 10000, + signal: controller.signal }); const downloadUrl = response.data.release.release.attach_files[0].download_url; const downloadUrlAddr = gitInfo.prefix + downloadUrl; @@ -1926,41 +1937,44 @@ export class CodeApplication extends Disposable { extTotal: extList.length, }; if (that.win) that.win.webContents.send('kylinide.installWizard.msg', startDownloadMsg); - this.download_File(downloadUrlAddr, extDownloadPath + filename).then((result) => { - const msg = { - type: 'downloadExtDone', - fileName: filename, - extName: val, - extMap: extMap, - extTotal: Object.keys(extMap).length, - }; - if (result === 0) { - if (that.win) that.win.webContents.send('kylinide.installWizard.msg', msg); - } else { - console.log(`Download ${val} failed0: `); - + if (!cancelFlag) { + this.download_File(downloadUrlAddr, extDownloadPath + filename, controller).then((result) => { const msg = { - type: 'downloadExtFail', + type: 'downloadExtDone', fileName: filename, extName: val, extMap: extMap, extTotal: Object.keys(extMap).length, }; - if (that.win) that.win.webContents.send('kylinide.installWizard.msg', msg); - } - }).catch((error) => { - console.log(`Download ${val} failed1: ${error}`); - const msg = { - type: 'downloadExtFail', - fileName: filename ? filename : val, - extName: val, - extMap: extMap, - // extTotal: Object.keys(extMap).length, - extTotal: extList.length, - }; - if (that.win) that.win.webContents.send('kylinide.installWizard.msg', msg); + if (result === 0) { + if (that.win) that.win.webContents.send('kylinide.installWizard.msg', msg); + } else { + console.log(`Download ${val} failed0: `); - }); + const msg = { + type: 'downloadExtFail', + fileName: filename, + extName: val, + extMap: extMap, + extTotal: Object.keys(extMap).length, + }; + if (that.win) that.win.webContents.send('kylinide.installWizard.msg', msg); + } + }).catch((error) => { + + console.log(`Download ${val} failed1: ${error}`); + const msg = { + type: 'downloadExtFail', + fileName: filename ? filename : val, + extName: val, + extMap: extMap, + // extTotal: Object.keys(extMap).length, + extTotal: extList.length, + }; + if (that.win) that.win.webContents.send('kylinide.installWizard.msg', msg); + + }); + } } catch (error) { console.log(`Download ${val} failed2: ${error}`); const msg = { @@ -1974,7 +1988,7 @@ export class CodeApplication extends Disposable { if (that.win) that.win.webContents.send('kylinide.installWizard.msg', msg); } finally { - semaphore.release(); // 释放信号量 + // semaphore.release(); // 释放信号量 } }); @@ -2078,7 +2092,7 @@ export class CodeApplication extends Disposable { if (depList.length === 0) return; depList.forEach((packageName) => { - const command = `apt-get install -y ${packageName} >> ${logFile0};\necho $? >> ${resultFile};\nsleep 2;\n`; + const command = `apt-get install -y ${packageName} >> ${logFile0};\necho $? >> ${resultFile};\n`; fs.appendFileSync(installFile, command); }); @@ -2149,6 +2163,7 @@ export class CodeApplication extends Disposable { this.win.webContents.send("kylinide.installWizard.removeFileLister", { type: 'extFile' }); this.win.webContents.send("kylinide.installWizard.removeFileLister", { type: 'pkgFile' }); } + controller.abort(); installQueue.splice(0); //结束插件下载及安装 if (that.win) { @@ -2164,6 +2179,8 @@ export class CodeApplication extends Disposable { this.win.webContents.send("kylinide.installWizard.removeFileLister", { type: 'extFile' }); this.win.webContents.send("kylinide.installWizard.removeFileLister", { type: 'pkgFile' }); } + controller.abort(); + cancelFlag = true; installQueue.splice(0); //结束插件下载及安装 if (that.win) { @@ -2177,6 +2194,10 @@ export class CodeApplication extends Disposable { if (installQueue.length === 0) { return; // 队列为空，结束执行 } + if (cancelFlag) { + installQueue.splice(0); + return; + } const { installCommand, msg } = installQueue[0]; try { const extlogFile = installConfig + '/log/extInstall.1.log'; @@ -2340,9 +2361,9 @@ export class CodeApplication extends Disposable { return isVerified } //下载文件 - private async download_File(url_git: string, dst: string) { + private async download_File(url_git: string, dst: string, controller?: AbortController) { try { - const response = await axios.get(url_git, { responseType: 'stream', timeout: 10000 }); + const response = await axios.get(url_git, { responseType: 'stream', timeout: 10000, signal: controller?.signal }); const directoryPath = path.dirname(dst); // 判断目录是否存在 if (!fs.existsSync(directoryPath)) { diff --git a/src/vs/code/electron-main/installWizard/page/view/index-bak.css b/src/vs/code/electron-main/installWizard/page/view/index-bak.css new file mode 100644 index 00000000..0bd83e1d --- /dev/null +++ b/src/vs/code/electron-main/installWizard/page/view/index-bak.css @@ -0,0 +1,492 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) kylinIDETeam. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +html, +body { + margin: 0; + padding: 0; + height: 100%; + font-family: "Segoe UI", "Helvetica Neue", "Helvetica", Arial, sans-serif; + overflow: hidden; + box-sizing: border-box; +} + +:focus-visible { + outline: none; + border: solid 1px #ff9c00; + border-radius: 2px; +} + +.container { + width: 100%; + height: 100%; + /* 很重要,不然flex不生效 */ + display: flex; + flex-direction: column; + color: #333333; + flex: 1; +} + +.overlay { + position: fixed; + /* top: 0; + left: 0; */ + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; /* 确保蒙版在最前面 */ + } + .preparing-container { + display: flex; + margin-top:-200px ; + text-align: center; + color: #fff; + align-items: center; + justify-content: center; + height: 100vh; + flex-direction: column; + } +.wait-container{ + display: block; + text-align: center; + width: 100%; + margin-top: 100px; +} + +.header { + cursor: move; + height: 45px; + border-bottom: 1px solid #fff; + box-sizing: border-box; + padding: 5px 2px 9px; + -webkit-app-region: drag; + background-color: #f2f2f2; +} +#first ,#osInfoShow{ + flex-direction: column; +} +.bodycontent { + display: flex; + width: 100%; + height: 100%; + flex:1; +} +.content{ + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + + +.dark .header { + color: #c6c6c6; + background-color: #3C3C3C; +} + +.title { + float: left; + text-align: center; + margin: 5px; +} + + +.close { + width: 25px; + height: 25px; + float: right; + -webkit-app-region: no-drag; + cursor: pointer; + margin: 5px; + text-align: center; + opacity:0.5; + background: url(../images/close_gray.png) no-repeat; +} +.close:hover{ + opacity:1; + transform: scale(1.2); +} + +.dark .close { + background: url(../images/close.png); +} + +/*页面中间区域 start {*/ + +.center { + flex: 1; + padding: 10px; + overflow: auto; + color: #333333; + background-color: #F2F2F2; + position: relative; + padding-left: 25px; +} + +.dark .center { + color: #c6c6c6; + background-color: #3C3C3C; +} + +/* 默认隐藏所有步骤： */ +.tab { + display: none; + flex-direction: column; + align-items: flex-start; +} + +/* 默认隐藏所有步骤： */ +.downloadtab { + display: none; + flex-direction: column; + align-items: flex-start; +} +.localinstalltab{ + display: none; + flex-direction: column; + align-items: flex-start; +} + +.devContent { + display: flex; + flex-direction: row; +} +.devContentCol{ + display: flex; + flex-direction: column; +} + + +/* 用圆圈表示表格的步骤： */ +.indicator { + position: absolute; + bottom: 5px; + text-align: center; + left: 50%; + transform: translate(-50%); +} + +.step { + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbbbbb; + border: none; + border-radius: 50%; + display: inline-block; + opacity: 0.5; + +} + +.step.active { + opacity: 1; + background-color: #1177BB; +} + +/*页面中间区域 end}*/ + +/*以下为footer区域*/ +.footer { + height: 60px; + line-height: 60px; + border-top: solid 1px #fff; + background-color: #f2f2f2; +} + +.dark .footer { + border-top: solid 1px #cccccc; + background-color: #3C3C3C; +} + +.btn-group { + margin-left: 10px; + margin-right: 10px; +} + +.btn-group button { + background-color: #1177BB; + /* 蓝色背景 */ + border: 1px solid #0e5483; + /* 蓝色边框 */ + color: white; + /* 白色文本 */ + /* padding: 8px 18px; */ + /* 一些填充 */ + cursor: pointer; + /* 指针/手形图标 */ + /* width: 55px; */ +} + .dark .btn-group button { + background-color: #0E639C; + /* 蓝色背景 */ +} + +/* 清除浮动（clearfix hack）*/ + .btn-group:after { + content: ""; + clear: both; + display: table; +} + +.btn-group button:not(:last-child) { + border-right: none; + /* 防止双边框 */ +} + +/* 悬停时添加背景色 */ + .btn-group button:hover { + background-color: #0E639C; +} + + .dark .btn-group button:hover { + background-color: #1177BB; +} + + +.scenarioSelection { + font-size: h4; /* 调整字体大小为h3 */ + /* font-weight: bold; 可选：设置字体加粗 */ +} + +h3{ + font-size: 16px; + font-weight: bold; + margin-top:0px ; + margin-bottom: 0px; +} + +.depOutputTextbox input[type="text"], +.depOutputTextbox #outputPre { + height: 360px ; + overflow:auto; + width: 600px; + margin-left: 40px; + background-color: transparent; + border-width: 1px solid black; +} + +#depOutDesc { + margin-top: -30px; + width: 600px; +} + +.depOutputTextbox { + margin-left: 20px; +} + +.installSelection, +.updateInstallConfig, +.installInfoConfig { + font-size: 18px; + line-height: 2.0; +} + +.installInfo1 { + height: auto; +} +#checkboxForm { + width: 180px; +} +.formSeparator { + border-left: 1px solid; + /* 设置竖线样式 */ + height: 400px; + /* 设置竖线高度，可以根据需要调整 */ + margin-left: 10px; + /* 设置与form之间的间距，可以根据需要调整 */ +} + +input[readonly] { + background-color: rgba(255, 255, 255, 0.5); + width: 400px; +} + +.progress-container { + display: flex; + align-items: center; + margin: -8px; +} + +.progress-download, +.progress-install, +.pkg-progress-install, +.progressinfo +{ + position: absolute; /* 添加绝对定位 */ + margin-left: 18%; + color: #000000; +} + +.download-view, +.install-view, +.pkg-install-view, +.progress-view +{ + flex: 1; + height: 50px; + position: relative; + width: 800px; + margin-left: 8%; +} + +.grey-progress-view { + flex: 1; + height: 26px; + position: relative; + width: 800px; + margin-left: 8%; + margin-top:10px; + margin-bottom: 8px; + border-radius: 30px; + background-color: grey; + border: 1px solid grey; +} + +.detailInstallOutputTextbox{ + margin-left: 8%; + font-weight: bold; + margin-top: 5px; +} + +#detailInstallPre, +#installLogPre, +#extInstallLogPre { + height: 300px; + width: 700px; + flex: 1; + position: relative; + overflow-y: auto; +} + +.dark{ + color: #c6c6c6; + background-color: #3C3C3C; +} + + pre .downloadHighlight::before { + content: "\2713"; /* Unicode对号字符 */ + color: yellow; + margin-right: 5px; + } + + pre .startHighlight::before { + content: "\25CF"; /* Unicode实心圆圈字符 */ + color: gray; + margin-right: 5px; + } + + pre .installedHighlight::before { + content: "\2713"; /* Unicode对号字符 */ + color: green; + margin-right: 5px; + } + + pre .depInstalledHighlight::before { + content: "\2713"; /* Unicode对号字符 */ + color: green; + margin-right: 5px; + } + + pre .depfailHighlight::before { + content: "\2717"; + color: red; + margin-right: 5px; + } + + .switchInstallOutput { + position: absolute; + bottom: 25px; /* 距离底部的距离，可以根据需要进行调整 */ + } + .center div p { + margin-bottom: 0; + margin-top: 0; + font-size: 14px; + } + + /* .graybt { + background-color:gray; + cursor:not-allowed; + } + + button:disabled{ + background-color:yellow; + } + .button.is-disabled, .button.is-disabled:focus, .button.is-disabled:hover{ + background-color: gray; + border-color: transparent; +} */ + +button#prevStep:disabled , +button#nextStep:disabled, +button#cancel:disabled +{ + background-color: gray; + border-color: gray; + opacity: 0.5; +} + +.checkbox { + -webkit-appearance:none; + -moz-appearance:none; + + outline:none; + width:14px; + height:14px; + background:#fff; + vertical-align:middle; +} +.checkbox:checked{ + background:#1177BB; +} + +.checkbox:checked::after{ + content:""; + height:5px; + width:8px; + border:#fff solid 2px; + position:absolute; + margin-top:2px; + margin-left:2px; + border-top:none; + border-right:none; + transform:rotate(-45deg); +} + +.checkbox:disabled{ + background: rgba(255, 255, 255, 0.5); +} + +.checkboxselect { + -webkit-appearance:none; + -moz-appearance:none; + + outline:none; + width:14px; + height:14px; + background:#1177BB; + vertical-align:middle; +} +.checkboxselect:checked{ + background:#1177BB; +} + +.checkboxselect:checked::after{ + content:""; + height:5px; + width:8px; + border:#fff solid 2px; + position:absolute; + margin-top:2px; + margin-left:2px; + border-top:none; + border-right:none; + transform:rotate(-45deg); +} +.checkboxselect:disabled{ + background: rgba(255, 255, 255, 0.5); +} diff --git a/src/vs/code/electron-main/installWizard/page/view/index.css b/src/vs/code/electron-main/installWizard/page/view/index.css index 0bd83e1d..99f3808d 100644 --- a/src/vs/code/electron-main/installWizard/page/view/index.css +++ b/src/vs/code/electron-main/installWizard/page/view/index.css @@ -3,490 +3,503 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -html, -body { - margin: 0; - padding: 0; - height: 100%; - font-family: "Segoe UI", "Helvetica Neue", "Helvetica", Arial, sans-serif; - overflow: hidden; - box-sizing: border-box; -} + html, + body { + margin: 0; + padding: 0; + height: 100%; + font-family: "Segoe UI", "Helvetica Neue", "Helvetica", Arial, sans-serif; + overflow: hidden; + box-sizing: border-box; + } -:focus-visible { - outline: none; - border: solid 1px #ff9c00; - border-radius: 2px; -} + :focus-visible { + outline: none; + border: solid 1px #ff9c00; + border-radius: 2px; + } -.container { - width: 100%; - height: 100%; - /* 很重要,不然flex不生效 */ - display: flex; - flex-direction: column; - color: #333333; - flex: 1; -} + .container { + width: 100%; + height: 100%; + /* 很重要,不然flex不生效 */ + display: flex; + flex-direction: column; + color: #333333; + flex: 1; + } -.overlay { - position: fixed; - /* top: 0; - left: 0; */ - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ - display: flex; - justify-content: center; - align-items: center; - z-index: 9999; /* 确保蒙版在最前面 */ - } - .preparing-container { - display: flex; - margin-top:-200px ; - text-align: center; - color: #fff; - align-items: center; - justify-content: center; - height: 100vh; - flex-direction: column; - } -.wait-container{ - display: block; - text-align: center; - width: 100%; - margin-top: 100px; -} + .overlay { + position: fixed; + /* top: 0; + left: 0; */ + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; /* 确保蒙版在最前面 */ + } + .preparing-container { + display: flex; + margin-top:-200px ; + text-align: center; + color: #fff; + align-items: center; + justify-content: center; + height: 100vh; + flex-direction: column; + } + .wait-container{ + display: block; + text-align: center; + width: 100%; + margin-top: 100px; + } -.header { - cursor: move; - height: 45px; - border-bottom: 1px solid #fff; - box-sizing: border-box; - padding: 5px 2px 9px; - -webkit-app-region: drag; - background-color: #f2f2f2; -} -#first ,#osInfoShow{ - flex-direction: column; -} -.bodycontent { - display: flex; - width: 100%; - height: 100%; - flex:1; -} -.content{ - width: 100%; - height: 100%; - display: flex; - flex-direction: column; -} + .header { + cursor: move; + height: 45px; + border-bottom: 1px solid #fff; + box-sizing: border-box; + padding: 5px 2px 9px; + -webkit-app-region: drag; + background-color: #f2f2f2; + position:absolute; + width:100%; + top:0px; + } + #first ,#osInfoShow{ + flex-direction: column; + } + .bodycontent { + display: flex; + width: 100%; + height: 100%; + flex:1; + top:45px; + bottom: 65px; + position: absolute; + } + .content{ + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + top:0px; + bottom: 0px; + position: absolute; + } -.dark .header { - color: #c6c6c6; - background-color: #3C3C3C; -} + .dark .header { + color: #c6c6c6; + background-color: #3C3C3C; + } -.title { - float: left; - text-align: center; - margin: 5px; -} + .title { + float: left; + text-align: center; + margin: 5px; + } -.close { - width: 25px; - height: 25px; - float: right; - -webkit-app-region: no-drag; - cursor: pointer; - margin: 5px; - text-align: center; - opacity:0.5; - background: url(../images/close_gray.png) no-repeat; -} -.close:hover{ - opacity:1; - transform: scale(1.2); -} + .close { + width: 25px; + height: 25px; + float: right; + -webkit-app-region: no-drag; + cursor: pointer; + margin: 5px; + text-align: center; + opacity:0.5; + background: url(../images/close_gray.png) no-repeat; + } + .close:hover{ + opacity:1; + transform: scale(1.2); + } -.dark .close { - background: url(../images/close.png); -} + .dark .close { + background: url(../images/close.png); + } -/*页面中间区域 start {*/ + /*页面中间区域 start {*/ -.center { - flex: 1; - padding: 10px; - overflow: auto; - color: #333333; - background-color: #F2F2F2; - position: relative; - padding-left: 25px; -} + .center { + flex: 1; + padding: 10px; + overflow: auto; + color: #333333; + background-color: #F2F2F2; + position: relative; + padding-left: 25px; + } -.dark .center { - color: #c6c6c6; - background-color: #3C3C3C; -} + .dark .center { + color: #c6c6c6; + background-color: #3C3C3C; + } -/* 默认隐藏所有步骤： */ -.tab { - display: none; - flex-direction: column; - align-items: flex-start; -} + /* 默认隐藏所有步骤： */ + .tab { + display: none; + flex-direction: column; + align-items: flex-start; + } -/* 默认隐藏所有步骤： */ -.downloadtab { - display: none; - flex-direction: column; - align-items: flex-start; -} -.localinstalltab{ - display: none; - flex-direction: column; - align-items: flex-start; -} + /* 默认隐藏所有步骤： */ + .downloadtab { + display: none; + flex-direction: column; + align-items: flex-start; + } + .localinstalltab{ + display: none; + flex-direction: column; + align-items: flex-start; + } -.devContent { - display: flex; - flex-direction: row; -} -.devContentCol{ - display: flex; - flex-direction: column; -} + .devContent { + display: flex; + flex-direction: row; + } + .devContentCol{ + display: flex; + flex-direction: column; + } -/* 用圆圈表示表格的步骤： */ -.indicator { - position: absolute; - bottom: 5px; - text-align: center; - left: 50%; - transform: translate(-50%); -} + /* 用圆圈表示表格的步骤： */ + .indicator { + position: absolute; + bottom: 65px; + text-align: center; + left: 50%; + transform: translate(-50%); + } -.step { - height: 15px; - width: 15px; - margin: 0 2px; - background-color: #bbbbbb; - border: none; - border-radius: 50%; - display: inline-block; - opacity: 0.5; + .step { + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbbbbb; + border: none; + border-radius: 50%; + display: inline-block; + opacity: 0.5; -} + } -.step.active { - opacity: 1; - background-color: #1177BB; -} + .step.active { + opacity: 1; + background-color: #1177BB; + } -/*页面中间区域 end}*/ + /*页面中间区域 end}*/ -/*以下为footer区域*/ -.footer { - height: 60px; - line-height: 60px; - border-top: solid 1px #fff; - background-color: #f2f2f2; -} + /*以下为footer区域*/ + .footer { + height: 60px; + line-height: 60px; + border-top: solid 1px #fff; + background-color: #f2f2f2; + position:absolute; + bottom:0px; + width:100%; + } -.dark .footer { - border-top: solid 1px #cccccc; - background-color: #3C3C3C; -} + .dark .footer { + border-top: solid 1px #cccccc; + background-color: #3C3C3C; + } -.btn-group { - margin-left: 10px; - margin-right: 10px; -} + .btn-group { + margin-left: 10px; + margin-right: 10px; + } -.btn-group button { - background-color: #1177BB; - /* 蓝色背景 */ - border: 1px solid #0e5483; - /* 蓝色边框 */ - color: white; - /* 白色文本 */ - /* padding: 8px 18px; */ - /* 一些填充 */ - cursor: pointer; - /* 指针/手形图标 */ - /* width: 55px; */ -} - .dark .btn-group button { - background-color: #0E639C; - /* 蓝色背景 */ -} + .btn-group button { + background-color: #1177BB; + /* 蓝色背景 */ + border: 1px solid #0e5483; + /* 蓝色边框 */ + color: white; + /* 白色文本 */ + /* padding: 8px 18px; */ + /* 一些填充 */ + cursor: pointer; + /* 指针/手形图标 */ + /* width: 55px; */ + } + .dark .btn-group button { + background-color: #0E639C; + /* 蓝色背景 */ + } -/* 清除浮动（clearfix hack）*/ - .btn-group:after { - content: ""; - clear: both; - display: table; -} + /* 清除浮动（clearfix hack）*/ + .btn-group:after { + content: ""; + clear: both; + display: table; + } -.btn-group button:not(:last-child) { - border-right: none; - /* 防止双边框 */ -} + .btn-group button:not(:last-child) { + border-right: none; + /* 防止双边框 */ + } -/* 悬停时添加背景色 */ - .btn-group button:hover { - background-color: #0E639C; -} + /* 悬停时添加背景色 */ + .btn-group button:hover { + background-color: #0E639C; + } - .dark .btn-group button:hover { - background-color: #1177BB; -} + .dark .btn-group button:hover { + background-color: #1177BB; + } -.scenarioSelection { - font-size: h4; /* 调整字体大小为h3 */ - /* font-weight: bold; 可选：设置字体加粗 */ -} + .scenarioSelection { + font-size: h4; /* 调整字体大小为h3 */ + /* font-weight: bold; 可选：设置字体加粗 */ + } -h3{ - font-size: 16px; - font-weight: bold; - margin-top:0px ; - margin-bottom: 0px; -} + h3{ + font-size: 16px; + font-weight: bold; + margin-top:0px ; + margin-bottom: 0px; + } -.depOutputTextbox input[type="text"], -.depOutputTextbox #outputPre { - height: 360px ; - overflow:auto; - width: 600px; - margin-left: 40px; - background-color: transparent; - border-width: 1px solid black; -} + .depOutputTextbox input[type="text"], + .depOutputTextbox #outputPre { + height: 330px ; + overflow:auto; + width: 600px; + margin-left: 40px; + background-color: transparent; + border-width: 1px solid black; + } -#depOutDesc { - margin-top: -30px; - width: 600px; -} + #depOutDesc { + margin-top: -30px; + width: 600px; + } -.depOutputTextbox { - margin-left: 20px; -} + .depOutputTextbox { + margin-left: 20px; + } -.installSelection, -.updateInstallConfig, -.installInfoConfig { - font-size: 18px; - line-height: 2.0; -} + .installSelection, + .updateInstallConfig, + .installInfoConfig { + font-size: 18px; + line-height: 2.0; + } -.installInfo1 { - height: auto; -} -#checkboxForm { - width: 180px; -} -.formSeparator { - border-left: 1px solid; - /* 设置竖线样式 */ - height: 400px; - /* 设置竖线高度，可以根据需要调整 */ - margin-left: 10px; - /* 设置与form之间的间距，可以根据需要调整 */ -} + .installInfo1 { + height: auto; + } + #checkboxForm { + width: 180px; + } + .formSeparator { + border-left: 1px solid; + /* 设置竖线样式 */ + height: 360px; + /* 设置竖线高度，可以根据需要调整 */ + margin-left: 10px; + /* 设置与form之间的间距，可以根据需要调整 */ + } -input[readonly] { - background-color: rgba(255, 255, 255, 0.5); - width: 400px; -} + input[readonly] { + background-color: rgba(255, 255, 255, 0.5); + width: 400px; + } -.progress-container { - display: flex; - align-items: center; - margin: -8px; -} + .progress-container { + display: flex; + align-items: center; + margin: -8px; + } -.progress-download, -.progress-install, -.pkg-progress-install, -.progressinfo -{ - position: absolute; /* 添加绝对定位 */ - margin-left: 18%; - color: #000000; -} + .progress-download, + .progress-install, + .pkg-progress-install, + .progressinfo + { + position: absolute; /* 添加绝对定位 */ + margin-left: 18%; + color: #000000; + } -.download-view, -.install-view, -.pkg-install-view, -.progress-view -{ - flex: 1; - height: 50px; - position: relative; - width: 800px; - margin-left: 8%; -} + .download-view, + .install-view, + .pkg-install-view, + .progress-view + { + flex: 1; + height: 50px; + position: relative; + width: 800px; + margin-left: 8%; + } -.grey-progress-view { - flex: 1; - height: 26px; - position: relative; - width: 800px; - margin-left: 8%; - margin-top:10px; - margin-bottom: 8px; - border-radius: 30px; - background-color: grey; - border: 1px solid grey; -} + .grey-progress-view { + flex: 1; + height: 26px; + position: relative; + width: 800px; + margin-left: 8%; + margin-top:10px; + margin-bottom: 8px; + border-radius: 30px; + background-color: grey; + border: 1px solid grey; + } -.detailInstallOutputTextbox{ - margin-left: 8%; - font-weight: bold; - margin-top: 5px; -} + .detailInstallOutputTextbox{ + margin-left: 8%; + font-weight: bold; + margin-top: 5px; + } -#detailInstallPre, -#installLogPre, -#extInstallLogPre { - height: 300px; - width: 700px; - flex: 1; - position: relative; - overflow-y: auto; -} + #detailInstallPre, + #installLogPre, + #extInstallLogPre, + #finishPage + { + height: 300px; + width: 700px; + flex: 1; + position: relative; + overflow-y: auto; + } -.dark{ - color: #c6c6c6; - background-color: #3C3C3C; -} + .dark{ + color: #c6c6c6; + background-color: #3C3C3C; + } - pre .downloadHighlight::before { - content: "\2713"; /* Unicode对号字符 */ - color: yellow; - margin-right: 5px; - } + pre .downloadHighlight::before { + content: "\2713"; /* Unicode对号字符 */ + color: yellow; + margin-right: 5px; + } - pre .startHighlight::before { - content: "\25CF"; /* Unicode实心圆圈字符 */ - color: gray; - margin-right: 5px; - } + pre .startHighlight::before { + content: "\25CF"; /* Unicode实心圆圈字符 */ + color: gray; + margin-right: 5px; + } - pre .installedHighlight::before { - content: "\2713"; /* Unicode对号字符 */ - color: green; - margin-right: 5px; - } + pre .installedHighlight::before { + content: "\2713"; /* Unicode对号字符 */ + color: green; + margin-right: 5px; + } - pre .depInstalledHighlight::before { - content: "\2713"; /* Unicode对号字符 */ - color: green; - margin-right: 5px; - } + pre .depInstalledHighlight::before { + content: "\2713"; /* Unicode对号字符 */ + color: green; + margin-right: 5px; + } - pre .depfailHighlight::before { - content: "\2717"; - color: red; - margin-right: 5px; - } + pre .depfailHighlight::before { + content: "\2717"; + color: red; + margin-right: 5px; + } - .switchInstallOutput { - position: absolute; - bottom: 25px; /* 距离底部的距离，可以根据需要进行调整 */ - } - .center div p { - margin-bottom: 0; - margin-top: 0; - font-size: 14px; - } + .switchInstallOutput { + position: absolute; + } + .center div p { + margin-bottom: 0; + margin-top: 0; + font-size: 14px; + } - /* .graybt { - background-color:gray; - cursor:not-allowed; - } + /* .graybt { + background-color:gray; + cursor:not-allowed; + } - button:disabled{ - background-color:yellow; - } - .button.is-disabled, .button.is-disabled:focus, .button.is-disabled:hover{ - background-color: gray; - border-color: transparent; -} */ + button:disabled{ + background-color:yellow; + } + .button.is-disabled, .button.is-disabled:focus, .button.is-disabled:hover{ + background-color: gray; + border-color: transparent; + } */ -button#prevStep:disabled , -button#nextStep:disabled, -button#cancel:disabled -{ - background-color: gray; - border-color: gray; - opacity: 0.5; -} + button#prevStep:disabled , + button#nextStep:disabled, + button#cancel:disabled + { + background-color: gray; + border-color: gray; + opacity: 0.5; + } -.checkbox { - -webkit-appearance:none; - -moz-appearance:none; + .checkbox { + -webkit-appearance:none; + -moz-appearance:none; - outline:none; - width:14px; - height:14px; - background:#fff; - vertical-align:middle; -} -.checkbox:checked{ - background:#1177BB; -} + outline:none; + width:14px; + height:14px; + background:#fff; + vertical-align:middle; + } + .checkbox:checked{ + background:#1177BB; + } -.checkbox:checked::after{ - content:""; - height:5px; - width:8px; - border:#fff solid 2px; - position:absolute; - margin-top:2px; - margin-left:2px; - border-top:none; - border-right:none; - transform:rotate(-45deg); -} + .checkbox:checked::after{ + content:""; + height:5px; + width:8px; + border:#fff solid 2px; + position:absolute; + margin-top:2px; + margin-left:2px; + border-top:none; + border-right:none; + transform:rotate(-45deg); + } -.checkbox:disabled{ - background: rgba(255, 255, 255, 0.5); -} + .checkbox:disabled{ + background: rgba(255, 255, 255, 0.5); + } -.checkboxselect { - -webkit-appearance:none; - -moz-appearance:none; + .checkboxselect { + -webkit-appearance:none; + -moz-appearance:none; - outline:none; - width:14px; - height:14px; - background:#1177BB; - vertical-align:middle; -} -.checkboxselect:checked{ - background:#1177BB; -} + outline:none; + width:14px; + height:14px; + background:#1177BB; + vertical-align:middle; + } + .checkboxselect:checked{ + background:#1177BB; + } -.checkboxselect:checked::after{ - content:""; - height:5px; - width:8px; - border:#fff solid 2px; - position:absolute; - margin-top:2px; - margin-left:2px; - border-top:none; - border-right:none; - transform:rotate(-45deg); -} -.checkboxselect:disabled{ - background: rgba(255, 255, 255, 0.5); -} + .checkboxselect:checked::after{ + content:""; + height:5px; + width:8px; + border:#fff solid 2px; + position:absolute; + margin-top:2px; + margin-left:2px; + border-top:none; + border-right:none; + transform:rotate(-45deg); + } + .checkboxselect:disabled{ + background: rgba(255, 255, 255, 0.5); + } diff --git a/src/vs/code/electron-main/installWizard/page/view/index.html b/src/vs/code/electron-main/installWizard/page/view/index.html index 59db740e..a06d94ee 100644 --- a/src/vs/code/electron-main/installWizard/page/view/index.html +++ b/src/vs/code/electron-main/installWizard/page/view/index.html @@ -81,7 +81,7 @@
- 
开发场景

+ 
开发场景
@@ -201,14 +201,9 @@
-
- -
+
-
+
-