安装过程中可以选择自动在本机安装MySQL

web/views/@default/setup/@install.css

@@ -1,69 +0,0 @@
-.install-box {
-  width: 50em;
-  position: fixed;
-  left: 50%;
-  margin-left: -25em;
-  top: 1em;
-  bottom: 1em;
-  overflow-y: auto;
-}
-.install-box .button.margin {
-  margin-top: 1em;
-}
-.install-box .button.primary {
-  float: right;
-}
-.install-box .button.disabled {
-  float: right;
-}
-.install-box table td.title {
-  width: 10em;
-}
-.install-box .radio {
-  margin-right: 1em;
-}
-.install-box .radio label {
-  cursor: pointer !important;
-  font-size: 0.9em !important;
-}
-.install-box h3 {
-  font-weight: normal;
-}
-.install-box .content-box {
-  overflow-y: auto;
-  position: fixed;
-  top: 5em;
-  bottom: 5em;
-  left: 50%;
-  width: 50em;
-  padding-right: 1em;
-  margin-left: -25em;
-  z-index: 1;
-}
-.install-box .content-box::-webkit-scrollbar {
-  width: 4px;
-}
-.install-box .button-group {
-  position: fixed;
-  left: 50%;
-  margin-left: -25em;
-  z-index: 1;
-  width: 50em;
-  bottom: 1em;
-}
-.install-box .button-group button {
-  z-index: 10;
-}
-.install-box .button-group .status-box {
-  position: absolute;
-  top: 3em;
-  left: 5em;
-  right: 5em;
-  bottom: 0;
-  text-align: center;
-  z-index: 0;
-}
-.install-box::-webkit-scrollbar {
-  width: 4px;
-}
-/*# sourceMappingURL=@install.css.map */

web/views/@default/setup/@install.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@install.less"],"names":[],"mappings":"AAAA;EAIC,WAAA;EACA,eAAA;EACA,SAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;;AAVD,YAYC,QAAO;EACN,eAAA;;AAbF,YAgBC,QAAO;EACN,YAAA;;AAjBF,YAoBC,QAAO;EACN,YAAA;;AArBF,YAwBC,MACC,GAAE;EACD,WAAA;;AA1BH,YA8BC;EACC,iBAAA;;AA/BF,YA8BC,OAGC;EACC,0BAAA;EACA,gBAAA;;AAnCH,YAuCC;EACC,mBAAA;;AAxCF,YA2CC;EACC,gBAAA;EACA,eAAA;EACA,QAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;;AApDF,YAuDC,aAAY;EACX,UAAA;;AAxDF,YA2DC;EACC,eAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,WAAA;;AAjEF,YA2DC,cAQC;EACC,WAAA;;AApEH,YA2DC,cAYC;EACC,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;;AAKH,YAAY;EACX,UAAA","file":"@install.css"}

web/views/@default/setup/@install.less

@@ -1,86 +0,0 @@
-.install-box {
-	@width: 50em;
-	@half-width: 25em;
-
-	width: @width;
-	position: fixed;
-	left: 50%;
-	margin-left: -@half-width;
-	top: 1em;
-	bottom: 1em;
-	overflow-y: auto;
-
-	.button.margin {
-		margin-top: 1em;
-	}
-
-	.button.primary {
-		float: right;
-	}
-
-	.button.disabled {
-		float: right;
-	}
-
-	table {
-		td.title {
-			width: 10em;
-		}
-	}
-
-	.radio {
-		margin-right: 1em;
-
-		label {
-			cursor: pointer !important;
-			font-size: 0.9em !important;
-		}
-	}
-
-	h3 {
-		font-weight: normal;
-	}
-
-	.content-box {
-		overflow-y: auto;
-		position: fixed;
-		top: 5em;
-		bottom: 5em;
-		left: 50%;
-		width: @width;
-		padding-right: 1em;
-		margin-left: -@half-width;
-		z-index: 1;
-	}
-
-	.content-box::-webkit-scrollbar {
-		width: 4px;
-	}
-
-	.button-group {
-		position: fixed;
-		left: 50%;
-		margin-left: -@half-width;
-		z-index: 1;
-		width: @width;
-		bottom: 1em;
-
-		button {
-			z-index: 10;
-		}
-
-		.status-box {
-			position: absolute;
-			top: 3em;
-			left: 5em;
-			right: 5em;
-			bottom: 0;
-			text-align: center;
-			z-index: 0;
-		}
-	}
-}
-
-.install-box::-webkit-scrollbar {
-	width: 4px;
-}

web/views/@default/setup/index.css

@@ -16,6 +16,9 @@
 .install-box .button.disabled {
   float: right;
 }
+.install-box table td {
+  vertical-align: top;
+}
 .install-box table td.title {
   width: 10em;
 }

web/views/@default/setup/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["@install.less"],"names":[],"mappings":"AAAA;EAIC,WAAA;EACA,eAAA;EACA,SAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;;AAVD,YAYC,QAAO;EACN,eAAA;;AAbF,YAgBC,QAAO;EACN,YAAA;;AAjBF,YAoBC,QAAO;EACN,YAAA;;AArBF,YAwBC,MACC,GAAE;EACD,WAAA;;AA1BH,YA8BC;EACC,iBAAA;;AA/BF,YA8BC,OAGC;EACC,0BAAA;EACA,gBAAA;;AAnCH,YAuCC;EACC,mBAAA;;AAxCF,YA2CC;EACC,gBAAA;EACA,eAAA;EACA,QAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;;AApDF,YAuDC,aAAY;EACX,UAAA;;AAxDF,YA2DC;EACC,eAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,WAAA;;AAjEF,YA2DC,cAQC;EACC,WAAA;;AApEH,YA2DC,cAYC;EACC,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;;AAKH,YAAY;EACX,UAAA","file":"index.css"}
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EAIC,WAAA;EACA,eAAA;EACA,SAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;;AAVD,YAYC,QAAO;EACN,eAAA;;AAbF,YAgBC,QAAO;EACN,YAAA;;AAjBF,YAoBC,QAAO;EACN,YAAA;;AArBF,YAwBC,MACC;EACC,mBAAA;;AA1BH,YAwBC,MAKC,GAAE;EACD,WAAA;;AA9BH,YAkCC;EACC,iBAAA;;AAnCF,YAkCC,OAGC;EACC,0BAAA;EACA,gBAAA;;AAvCH,YA2CC;EACC,mBAAA;;AA5CF,YA+CC;EACC,gBAAA;EACA,eAAA;EACA,QAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;;AAxDF,YA2DC,aAAY;EACX,UAAA;;AA5DF,YA+DC;EACC,eAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,WAAA;;AArEF,YA+DC,cAQC;EACC,WAAA;;AAxEH,YA+DC,cAYC;EACC,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;;AAKH,YAAY;EACX,UAAA","file":"index.css"}

web/views/@default/setup/index.html

@@ -152,6 +152,7 @@
 							<input type="text" name="host" maxlength="100" placeholder="比如 192.168.1.100" style="width:16em" ref="dbHost" v-model="localDB.host" @change="checkDBIP" @input="localDB.isLocal = true"/>
                             <p class="comment" v-if="localDBHost.length > 0 && localDBHost == localDB.host"><span class="blue">已经自动填入从当前服务器发现的MySQL数据库信息。</span></p>
                             <p class="comment" v-if="!localDB.isLocal"><span class="red">当前地址不是局域网IP，可能会严重影响系统运行性能，请优先选择局域网IP。</span></p>
+                            <p class="comment" v-if="localDB.host.length == 0 && localDB.canInstall">如果你还没有安装MySQL，可以 <a href="" @click.prevent="installMySQL">尝试自动安装</a> 。</p>
 						</td>
 					</tr>
 					<tr>

web/views/@default/setup/index.js

@@ -57,7 +57,7 @@ Tea.context(function () {
 
 	// 数据库
 	this.dbInfo = {}
-	this.localDB = {"host": "", "port": "", "username": "", "port": "", "isLocal": true}
+	this.localDB = {"host": "", "port": "", "username": "", "port": "", "isLocal": true, "canInstall": false}
 	this.localDBHost = ""
 	this.dbRequesting = false
 
@@ -172,4 +172,17 @@ Tea.context(function () {
 				}, 1000)
 			})
 	}
+
+	/**
+	 * MySQL
+	 */
+	this.installMySQL = function () {
+		let that = this
+		teaweb.popup("/setup/mysql/installPopup", {
+			height: "28em",
+			onClose: function () {
+				that.detectDB()
+			}
+		})
+	}
 })

web/views/@default/setup/index.less

@@ -1 +1,90 @@
-@import "@install";
+.install-box {
+	@width: 50em;
+	@half-width: 25em;
+
+	width: @width;
+	position: fixed;
+	left: 50%;
+	margin-left: -@half-width;
+	top: 1em;
+	bottom: 1em;
+	overflow-y: auto;
+
+	.button.margin {
+		margin-top: 1em;
+	}
+
+	.button.primary {
+		float: right;
+	}
+
+	.button.disabled {
+		float: right;
+	}
+
+	table {
+		td {
+			vertical-align: top;
+		}
+
+		td.title {
+			width: 10em;
+		}
+	}
+
+	.radio {
+		margin-right: 1em;
+
+		label {
+			cursor: pointer !important;
+			font-size: 0.9em !important;
+		}
+	}
+
+	h3 {
+		font-weight: normal;
+	}
+
+	.content-box {
+		overflow-y: auto;
+		position: fixed;
+		top: 5em;
+		bottom: 5em;
+		left: 50%;
+		width: @width;
+		padding-right: 1em;
+		margin-left: -@half-width;
+		z-index: 1;
+	}
+
+	.content-box::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	.button-group {
+		position: fixed;
+		left: 50%;
+		margin-left: -@half-width;
+		z-index: 1;
+		width: @width;
+		bottom: 1em;
+
+		button {
+			z-index: 10;
+		}
+
+		.status-box {
+			position: absolute;
+			top: 3em;
+			left: 5em;
+			right: 5em;
+			bottom: 0;
+			text-align: center;
+			z-index: 0;
+		}
+	}
+}
+
+.install-box::-webkit-scrollbar {
+	width: 4px;
+}

web/views/@default/setup/mysql/installPopup.css

@@ -0,0 +1,32 @@
+td {
+  vertical-align: top;
+}
+td.title {
+  width: 10em;
+}
+.result-box .row {
+  line-height: 1.8;
+}
+.result-box .button-box {
+  margin-top: 1em;
+}
+.logs-box {
+  max-height: 12em;
+  overflow-y: auto;
+}
+.logs-box .row {
+  line-height: 1.8;
+}
+.logs-box::-webkit-scrollbar {
+  width: 6px;
+}
+h4 {
+  font-weight: normal !important;
+}
+.green {
+  color: #21ba45;
+}
+.red {
+  color: #db2828;
+}
+/*# sourceMappingURL=installPopup.css.map */

web/views/@default/setup/mysql/installPopup.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["installPopup.less"],"names":[],"mappings":"AAAA;EACC,mBAAA;;AAGD,EAAE;EACD,WAAA;;AAGD,WACC;EACC,gBAAA;;AAFF,WAKC;EACC,eAAA;;AAIF;EACC,gBAAA;EACA,gBAAA;;AAFD,SAIC;EACC,gBAAA;;AAIF,SAAS;EACR,UAAA;;AAGD;EACC,8BAAA;;AAGD;EACC,cAAA;;AAGD;EACC,cAAA","file":"installPopup.css"}

web/views/@default/setup/mysql/installPopup.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="zh">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <link rel="shortcut icon" href="/images/favicon.png"/>
+    <title>安装GoEdge管理系统</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
+    <link rel="stylesheet" href="/_/@default/@layout_popup.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/semantic.iframe.min.css?v=bRafhK" media="all"/>
+    {$TEA.VUE}
+    <link rel="stylesheet" type="text/css" href="/_/@default/@layout_override.css" media="all"/>
+    <script type="text/javascript" src="/js/md5.min.js"></script>
+    <script type="text/javascript" src="/js/utils.js"></script>
+    <script type="text/javascript" src="/js/sweetalert2/dist/sweetalert2.all.min.js"></script>
+    <script type="text/javascript" src="/js/components.js"></script>
+</head>
+<body>
+
+<div>
+    <div class="margin"></div>
+    <h4>方法1：使用命令安装MySQL</h4>
+    <table class="ui table selectable">
+        <tr>
+            <td>可以在你要安装MySQL的服务器上运行以下命令<span class="grey">（目前仅支持Linux系统和X86架构服务器，安装后的MySQL版本是8.x.x）</span>：</td>
+        </tr>
+        <tr>
+            <td>sudo sh -c &quot;$(wget https://goedge.cn/install-mysql.sh -O -)&quot;</td>
+        </tr>
+    </table>
+
+    <h4>方法2：在本机自动安装MySQL</h4>
+    <table class="ui table selectable">
+        <tr>
+            <td colspan="2">如果你想在当前管理系统所在服务器上安装MySQL，可以点击下面的按钮自动开始尝试安装，如果安装不成功，请自行安装<span class="grey">（建议仅在小流量应用场景或测试期间使用此功能）</span>：</td>
+        </tr>
+        <tr v-show="!result.isInstalling">
+            <td colspan="2">
+                <button class="ui button small" type="button" @click.prevent="install" v-if="!result.isInstalled">尝试在本机安装</button>
+                <button class="ui button small" type="button" @click.prevent="install" v-if="result.isInstalled && !result.isOk">重新尝试安装</button>
+            </td>
+        </tr>
+        <tr v-show="result.isInstalled">
+            <td class="title">安装结果</td>
+            <td>
+                <div v-if="result.isOk" class="green result-box">
+                    <div class="row">安装成功，请使用记事本或其他工具记录下面MySQL信息，防止以后忘记：</div>
+                    <div class="row">安装目录：{{result.dir}}</div>
+                    <div class="row">用户：{{result.user}}</div>
+                    <div class="row">密码：{{result.password}}</div>
+                    <div class="button-box">
+                        <button class="ui button small" type="button" @click.prevent="finish">我已完成记录</button>
+                    </div>
+                </div>
+                <div v-if="!result.isOk" class="red">
+                    <div>
+                        安装失败：{{result.err}}
+                    </div>
+                    <div class="ui divider"></div>
+                    <div>请将以上错误信息报告给开发者，并改用其他方式安装MySQL。</div>
+                </div>
+            </td>
+        </tr>
+        <tr v-show="result.isInstalling || (result.isInstalled && !result.isOk)">
+            <td class="title">安装过程</td>
+            <td>
+                <div class="logs-box">
+                    <div v-for="log in result.logs" class="row">{{log}}</div>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+</body>
+</html>

web/views/@default/setup/mysql/installPopup.js

@@ -0,0 +1,65 @@
+Tea.context(function () {
+	this.result = {
+		isInstalling: false,
+		isInstalled: false,
+		isOk: false,
+		err: "",
+
+		user: "",
+		password: "",
+		dir: "",
+
+		logs: []
+	}
+
+	this.$delay(function () {
+		this.checkStatus()
+	})
+
+	this.install = function () {
+		this.result.isInstalling = true
+		this.result.isInstalled = false
+		this.result.logs = []
+
+		this.$post(".installPopup")
+			.timeout(3600)
+			.success(function (resp) {
+				this.result.isOk = resp.data.isOk
+				if (!resp.data.isOk) {
+					this.result.err = resp.data.err
+				} else {
+					this.result.user = resp.data.user
+					this.result.password = resp.data.password
+					this.result.dir = resp.data.dir
+				}
+				this.result.isInstalled = true
+				this.result.isInstalling = false
+			})
+	}
+
+	this.checkStatus = function () {
+		if (!this.result.isInstalling) {
+			this.$delay(function () {
+				this.checkStatus()
+			}, 1000)
+			return
+		}
+
+		this.$post(".installLogs")
+			.success(function (resp) {
+				let that = this
+				resp.data.logs.forEach(function (log) {
+					that.result.logs.unshift(log)
+				})
+			})
+			.done(function () {
+				this.$delay(function () {
+					this.checkStatus()
+				}, 2000)
+			})
+	}
+
+	this.finish = function () {
+		teaweb.closePopup()
+	}
+})

web/views/@default/setup/mysql/installPopup.less

@@ -0,0 +1,42 @@
+td {
+	vertical-align: top;
+}
+
+td.title {
+	width: 10em;
+}
+
+.result-box {
+	.row {
+		line-height: 1.8;
+	}
+
+	.button-box {
+		margin-top: 1em;
+	}
+}
+
+.logs-box {
+	max-height: 12em;
+	overflow-y: auto;
+
+	.row {
+		line-height: 1.8;
+	}
+}
+
+.logs-box::-webkit-scrollbar {
+	width: 6px;
+}
+
+h4 {
+	font-weight: normal !important;
+}
+
+.green {
+	color: #21ba45;
+}
+
+.red {
+	color: #db2828;
+}