实现重写规则管理

2025-11-04 05:00:25 +08:00 · 2020-09-28 16:25:26 +08:00
parent 1353ad9e6d
commit f459632dd6
37 changed files with 935 additions and 66 deletions
--- a/web/public/js/components/common/sortable.js
+++ b/web/public/js/components/common/sortable.js
@@ -0,0 +1,25 @@
+// 给Table增加排序功能
+function sortTable(callback) {
+	// 引入js
+	let jsFile = document.createElement("script")
+	jsFile.setAttribute("src", "/js/sortable.min.js")
+	jsFile.addEventListener("load", function () {
+		// 初始化
+		let box = document.querySelector("#sortable-table")
+		Sortable.create(box, {
+			draggable: "tbody",
+			handle: ".icon.handle",
+			onStart: function () {
+			},
+			onUpdate: function (event) {
+				let rows = box.querySelectorAll("tbody")
+				let rowIds = []
+				rows.forEach(function (row) {
+					rowIds.push(parseInt(row.getAttribute("v-id")))
+				})
+				callback(rowIds)
+			}
+		})
+	})
+	document.head.appendChild(jsFile)
+}
--- a/web/public/js/components/server/http-location-labels.js
+++ b/web/public/js/components/server/http-location-labels.js
@@ -21,6 +21,11 @@ Vue.component("http-location-labels", {
 	},
 	template: `	<div class="labels-box">
 	<!-- TODO 思考是否给各个标签加上链接 -->
+	
+	<!-- 基本信息 -->
+	<http-location-labels-label v-if="location.name != null && location.name.length > 0" :class="'olive'">{{location.name}}</http-location-labels-label>
+	<http-location-labels-label v-if="location.isBreak">BREAK</http-location-labels-label>
+	
 	<!-- redirectToHTTPS -->
 	<http-location-labels-label v-if="location.web != null && configIsOn(location.web.redirectToHTTPS)">自动跳转HTTPS</http-location-labels-label>
 	
@@ -57,15 +62,18 @@ Vue.component("http-location-labels", {
 	
 	<!-- 特殊页面 -->
 	<div v-if="location.web != null && location.web.pages != null && location.web.pages.length > 0">
-		<http-location-labels-label v-for="page in location.web.pages">[状态码{{page.status[0]}}] -&gt; {{page.url}}</http-location-labels-label>
+		<div v-for="page in location.web.pages" :key="page.id"><http-location-labels-label>PAGE [状态码{{page.status[0]}}] -&gt; {{page.url}}</http-location-labels-label></div>
 	</div>
 	<div v-if="location.web != null && configIsOn(location.web.shutdown)">
 		<http-location-labels-label :v-class="'red'">临时关闭</http-location-labels-label>
 	</div>
+	
+	<!-- 重写规则 -->
+	<!-- TODO -->
 </div>`
 })

 Vue.component("http-location-labels-label", {
 	props: ["v-class"],
-	template: `<span class="ui label tiny" :class="vClass" style="font-size:0.8em;padding:4px;margin-top:0.3em;margin-bottom:0.3em"><slot></slot></span>`
+	template: `<span class="ui label tiny" :class="vClass" style="font-size:0.7em;padding:4px;margin-top:0.3em;margin-bottom:0.3em"><slot></slot></span>`
 })
--- a/web/public/js/components/server/http-rewrite-rule-list.js
+++ b/web/public/js/components/server/http-rewrite-rule-list.js
@@ -0,0 +1,101 @@
+Vue.component("http-rewrite-rule-list", {
+	props: ["v-web-id", "v-rewrite-rules"],
+	mounted: function () {
+		setTimeout(this.sort, 1000)
+	},
+	data: function () {
+		let rewriteRules = this.vRewriteRules
+		if (rewriteRules == null) {
+			rewriteRules = []
+		}
+		return {
+			rewriteRules: rewriteRules
+		}
+	},
+	methods: {
+		updateRewriteRule: function (rewriteRuleId) {
+			teaweb.popup("/servers/server/settings/rewrite/updatePopup?webId=" + this.vWebId + "&rewriteRuleId=" + rewriteRuleId, {
+				height: "26em",
+				callback: function () {
+					window.location.reload()
+				}
+			})
+		},
+		deleteRewriteRule: function (rewriteRuleId) {
+			let that = this
+			teaweb.confirm("确定要删除此重写规则吗？", function () {
+				Tea.action("/servers/server/settings/rewrite/delete")
+					.params({
+						webId: that.vWebId,
+						rewriteRuleId: rewriteRuleId
+					})
+					.post()
+					.refresh()
+			})
+		},
+		// 排序
+		sort: function () {
+			if (this.rewriteRules.length == 0) {
+				return
+			}
+			let that = this
+			sortTable(function (rowIds) {
+				Tea.action("/servers/server/settings/rewrite/sort")
+					.post()
+					.params({
+						webId: that.vWebId,
+						rewriteRuleIds: rowIds
+					})
+					.success(function () {
+						teaweb.success("保存成功")
+					})
+			})
+		}
+	},
+	template: `<div>
+	<div class="margin"></div>
+	<p class="comment" v-if="rewriteRules.length == 0">暂时还没有重写规则。</p>
+	<table class="ui table selectable" v-if="rewriteRules.length > 0" id="sortable-table">
+		<thead>
+			<tr>
+				<th style="width:1em"></th>
+				<th>匹配规则</th>
+				<th>转发目标</th>
+				<th>转发方式</th>
+				<th class="two wide">状态</th>
+				<th class="two op">操作</th>
+			</tr>
+		</thead>
+		<tbody v-for="rule in rewriteRules" :v-id="rule.id">
+			<tr>
+				<td><i class="icon bars grey handle"></i></td>
+				<td>{{rule.pattern}}
+				<br/>
+					<http-rewrite-labels-label class="ui label tiny" v-if="rule.isBreak">BREAK</http-rewrite-labels-label>
+					<http-rewrite-labels-label class="ui label tiny" v-if="rule.mode == 'redirect' && rule.redirectStatus != 307">{{rule.redirectStatus}}</http-rewrite-labels-label>
+					<http-rewrite-labels-label class="ui label tiny" v-if="rule.proxyHost.length > 0">Host: {{rule.proxyHost}}</http-rewrite-labels-label>
+				</td>
+				<td>{{rule.replace}}</td>
+				<td>
+					<span v-if="rule.mode == 'proxy'">隐式</span>
+					<span v-if="rule.mode == 'redirect'">显示</span>
+				</td>
+				<td>
+					<label-on :v-is-on="rule.isOn"></label-on>
+				</td>
+				<td>
+					<a href="" @click.prevent="updateRewriteRule(rule.id)">修改</a> &nbsp;
+					<a href="" @click.prevent="deleteRewriteRule(rule.id)">删除</a>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+	<p class="comment" v-if="rewriteRules.length > 0">拖动左侧的<i class="icon bars grey"></i>图标可以对重写规则进行排序。</p>
+
+</div>`
+})
+
+Vue.component("http-rewrite-labels-label", {
+	props: ["v-class"],
+	template: `<span class="ui label tiny" :class="vClass" style="font-size:0.7em;padding:4px;margin-top:0.3em;margin-bottom:0.3em"><slot></slot></span>`
+})
--- a/web/public/js/components/server/http-web-root-box.js
+++ b/web/public/js/components/server/http-web-root-box.js
@@ -42,13 +42,12 @@ Vue.component("http-web-root-box", {
 		}
 	},
 	template: `<div>
-	<p class="ui message">在这里可以设置如何分发静态文件资源。</p>
 	<input type="hidden" name="rootJSON" :value="JSON.stringify(rootConfig)"/>
 	<table class="ui table selectable definition">
 		<prior-checkbox :v-config="rootConfig" v-if="vIsLocation"></prior-checkbox>
 		<tbody v-show="!vIsLocation || rootConfig.isPrior">
 			<tr>
-				<td class="title">是否开启</td>
+				<td class="title">是否开启静态资源分发</td>
 				<td>
 					<div class="ui checkbox">
 						<input type="checkbox" v-model="rootConfig.isOn"/>
@@ -59,7 +58,7 @@ Vue.component("http-web-root-box", {
 		</tbody>
 		<tbody v-show="isOn()">
 			<tr>
-				<td class="title">文档根目录</td>
+				<td class="title">静态资源根目录</td>
 				<td>
 					<input type="text" name="root" v-model="rootConfig.dir" ref="focus" placeholder="类似于 /home/www"/>
 					<p class="comment">可以访问此根目录下的静态资源。</p>