使用CodeMirror高亮各处的配置信息

web/public/js/components/common/download-link.js

@@ -1,5 +1,5 @@
 Vue.component("download-link", {
-	props: ["v-element", "v-file"],
+	props: ["v-element", "v-file", "v-value"],
 	created: function () {
 		let that = this
 		setTimeout(function () {
@@ -18,15 +18,20 @@ Vue.component("download-link", {
 	},
 	methods: {
 		composeURL: function () {
+			let text = ""
+			if (this.vValue != null) {
+				text = this.vValue
+			} else {
 				let e = document.getElementById(this.vElement)
 				if (e == null) {
 					teaweb.warn("找不到要下载的内容")
 					return
 				}
-			let text = e.innerText
+				text = e.innerText
 				if (text == null) {
 					text = e.textContent
 				}
+			}
 			return Tea.url("/ui/download", {
 				file: this.file,
 				text: text

web/public/js/components/common/source-code-box.js

@@ -0,0 +1,54 @@
+let sourceCodeBoxIndex = 0
+
+Vue.component("source-code-box", {
+	props: ["type", "id"],
+	mounted: function () {
+		let box = document.getElementById("source-code-box-" + this.index)
+		let valueBox = document.getElementById(this.valueBoxId)
+		let value = ""
+		if (valueBox.textContent != null) {
+			value = valueBox.textContent
+		} else if (valueBox.innerText != null) {
+			value = valueBox.innerText
+		}
+		let boxEditor = CodeMirror.fromTextArea(box, {
+			theme: "idea",
+			lineNumbers: true,
+			value: "",
+			readOnly: true,
+			showCursorWhenSelecting: true,
+			height: "auto",
+			//scrollbarStyle: null,
+			viewportMargin: Infinity,
+			lineWrapping: true,
+			highlightFormatting: false,
+			indentUnit: 4,
+			indentWithTabs: true
+		})
+		boxEditor.setValue(value)
+
+		let info = CodeMirror.findModeByMIME(this.type)
+		if (info != null) {
+			boxEditor.setOption("mode", info.mode)
+			CodeMirror.modeURL = "/codemirror/mode/%N/%N.js"
+			CodeMirror.autoLoadMode(boxEditor, info.mode)
+		}
+	},
+	data: function () {
+		let index = sourceCodeBoxIndex++
+
+		let valueBoxId = 'source-code-box-value-' + sourceCodeBoxIndex
+		if (this.id != null) {
+			valueBoxId = this.id
+		}
+
+		return {
+			index: index,
+			valueBoxId: valueBoxId
+		}
+	},
+	template: `<div class="source-code-box">
+	<div style="display: none" :id="valueBoxId"><slot></slot></div>
+	<textarea :id="'source-code-box-' + index"></textarea>
+</div>`
+})

web/views/@default/@layout.css

@@ -643,4 +643,15 @@ td .label.small {
 td {
   word-break: break-all;
 }
+.source-code-box .CodeMirror {
+  border: 1px solid #eee;
+  height: auto !important;
+}
+.source-code-box .CodeMirror-vscrollbar {
+  width: 6px;
+  border-radius: 3px !important;
+}
+.source-code-box .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+}
 /*# sourceMappingURL=@layout.css.map */

web/views/@default/@layout.less

@@ -706,3 +706,20 @@ td .label.small {
 td {
 	word-break: break-all;
 }
+
+// codemirror
+.source-code-box {
+	.CodeMirror {
+		border: 1px solid #eee;
+		height: auto !important;
+	}
+
+	.CodeMirror-vscrollbar {
+		width: 6px;
+		border-radius: 3px !important;
+	}
+
+	.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+		border-radius: 2px;
+	}
+}

web/views/@default/api/node/install.html

@@ -1,5 +1,6 @@
 {$layout}
 {$template "menu"}
+{$template "/code_editor"}
 
 <h3>安装步骤</h3>
 <ol class="ui list">
@@ -15,8 +16,8 @@
 	<tr>
 		<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
 		<td>
-			<pre id="api-code">nodeId: "{{node.uniqueId}}"
+			<source-code-box id="api-code" type="text/yaml">nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+secret: "{{node.secret}}"</source-code-box>
 		</td>
 	</tr>
 	<tr>
@@ -27,7 +28,7 @@ secret: "{{node.secret}}"</pre>
 				<span v-else class="red">无法生成配置内容，错误原因：</span>
 				{{dbConfig.error}}
 			</span>
-			<pre v-show="dbConfig.config.length > 0" id="db-code">{{dbConfig.config}}</pre>
+            <source-code-box id="db-code" type="text/yaml">{{dbConfig.config}}</source-code-box>
 		</td>
 	</tr>
 </table>

web/views/@default/clusters/cluster/installNodes.html

@@ -1,6 +1,7 @@
 {$layout}
 {$template "menu"}
 {$template "/left_menu"}
+{$template "/code_editor"}
 
 <div class="right-box">
 	<p>在官网下载节点安装包，然后通过修改节点安装包中的<code-label>configs/cluster.yaml</code-label>，启动后会自动注册节点。</p>
@@ -10,10 +11,10 @@
 				<em><download-link :v-element="'cluster-config-box'" :v-file="'cluster.yaml'">[下载]</download-link></em>
 			</td>
 			<td>
-				<pre id="cluster-config-box">rpc:
+				<source-code-box id="cluster-config-box" type="text/yaml">rpc:
 	endpoints: [ {{cluster.endpoints}} ]
-	clusterId: "{{cluster.uniqueId}}"
+clusterId: "{{cluster.uniqueId}}"
-	secret: "{{cluster.secret}}"</pre>
+secret: "{{cluster.secret}}"</source-code-box>
 			</td>
 		</tr>
 	</table>

web/views/@default/clusters/cluster/node/install.html

@@ -1,15 +1,15 @@
 {$layout}
+{$template "node_menu"}
+{$template "/code_editor"}
 
-	{$template "node_menu"}
+<!-- 已安装 -->
-
+<div v-if="node.isInstalled">
-	<!-- 已安装 -->
-	<div v-if="node.isInstalled">
     <div class="ui message green">当前节点为已安装状态。</div>
     <a href="" @click.prevent="updateNodeIsInstalled(false)">[修改为未安装状态]</a>
-	</div>
+</div>
 
-	<!-- 未安装 -->
+<!-- 未安装 -->
-	<div v-if="!node.isInstalled">
+<div v-if="!node.isInstalled">
     <h3>方法1：通过SSH自动安装</h3>
 
     <div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
@@ -33,10 +33,10 @@
             <td>配置文件<em>（configs/api.yaml）</em><br/>
             <em><download-link :v-element="'rpc-code'" :v-file="'api.yaml'">[下载]</download-link ></em></td>
             <td>
-					<pre id="rpc-code">rpc:
+					<source-code-box id="rpc-code" type="text/yaml">rpc:
   endpoints: [ {{apiEndpoints}} ]
 nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+secret: "{{node.secret}}"</source-code-box>
             </td>
         </tr>
         <tr>
@@ -51,4 +51,4 @@ secret: "{{node.secret}}"</pre>
     </table>
 
     <a href="" @click.prevent="updateNodeIsInstalled(true)">[修改为已安装状态]</a>
-	</div>
+</div>

web/views/@default/settings/authority/nodes/node/install.html

@@ -1,5 +1,6 @@
 {$layout}
 {$template "menu"}
+{$template "/code_editor"}
 
 <h3>安装步骤</h3>
 <ol class="ui list">
@@ -14,10 +15,10 @@
 	<tr>
 		<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
 		<td>
-			<pre id="api-code">rpc:
+			<source-code-box id="api-code" type="text/yaml">rpc:
   endpoints: [ {{apiEndpoints}} ]
 nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+secret: "{{node.secret}}"</source-code-box>
 		</td>
 	</tr>
 </table>

web/views/@default/settings/monitor-nodes/node/install.html

@@ -1,5 +1,6 @@
 {$layout}
 {$template "menu"}
+{$template "/code_editor"}
 
 <h3>安装步骤</h3>
 <ol class="ui list">
@@ -14,10 +15,10 @@
 	<tr>
 		<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
 		<td>
-			<pre id="api-code">rpc:
+			<source-code-box id="api-code" type="text/yaml">rpc:
   endpoints: [ {{apiEndpoints}} ]
 nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+secret: "{{node.secret}}"</source-code-box>
 		</td>
 	</tr>
 </table>

web/views/@default/settings/user-nodes/node/install.html

@@ -1,5 +1,6 @@
 {$layout}
 {$template "menu"}
+{$template "/code_editor"}
 
 <h3>安装步骤</h3>
 <ol class="ui list">
@@ -14,10 +15,10 @@
 	<tr>
 		<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
 		<td>
-			<pre id="api-code">rpc:
+			<source-code-box id="api-code" type="text/yaml">rpc:
   endpoints: [ {{apiEndpoints}} ]
 nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+secret: "{{node.secret}}"</source-code-box>
 		</td>
 	</tr>
 </table>