优化交互

web/public/js/components.src.js

@@ -1436,10 +1436,13 @@ Vue.component("ns-route-ranges-box", {
 		return {
 			ranges: ranges,
 			isAdding: false,
+			isAddingBatch: false,
 
 			// IP范围
 			ipRangeFrom: "",
-			ipRangeTo: ""
+			ipRangeTo: "",
+
+			batchIPRange: ""
 		}
 	},
 	methods: {
@@ -1486,6 +1489,65 @@ Vue.component("ns-route-ranges-box", {
 			})
 			this.cancelIPRange()
 		},
+		addBatch: function () {
+			this.isAddingBatch = true
+			let that = this
+			setTimeout(function () {
+				that.$refs.batchIPRange.focus()
+			}, 100)
+		},
+		cancelBatchIPRange: function () {
+			this.isAddingBatch = false
+			this.batchIPRange = ""
+		},
+		confirmBatchIPRange: function () {
+			let that = this
+			let rangesText = this.batchIPRange
+			if (rangesText.length == 0) {
+				teaweb.warn("请填写要加入的IP范围", function () {
+					that.$refs.batchIPRange.focus()
+				})
+				return
+			}
+
+			let validRanges = []
+			let invalidLine = ""
+			rangesText.split("\n").forEach(function (line) {
+				line = line.trim()
+				if (line.length == 0) {
+					return
+				}
+				line = line.replace("，", ",")
+				let pieces = line.split(",")
+				if (pieces.length != 2) {
+					invalidLine = line
+					return
+				}
+				let ipFrom = pieces[0].trim()
+				let ipTo = pieces[1].trim()
+				if (!that.validateIP(ipFrom) || !that.validateIP(ipTo)) {
+					invalidLine = line
+					return
+				}
+				validRanges.push({
+					type: "ipRange",
+					params: {
+						ipFrom: ipFrom,
+						ipTo: ipTo
+					}
+				})
+			})
+			if (invalidLine.length > 0) {
+				teaweb.warn("'" + invalidLine + "'格式错误", function () {
+					that.$refs.batchIPRange.focus()
+				})
+				return
+			}
+			validRanges.forEach(function (v) {
+				that.ranges.push(v)
+			})
+			this.cancelBatchIPRange()
+		},
 		validateIP: function (ip) {
 			if (!ip.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/)) {
 				return false
@@ -1504,14 +1566,14 @@ Vue.component("ns-route-ranges-box", {
 	template: `<div>
 	<input type="hidden" name="rangesJSON" :value="JSON.stringify(ranges)"/>
 	<div v-if="ranges.length > 0">
-		<div class="ui label tiny basic" v-for="(range, index) in ranges">
+		<div class="ui label tiny basic" v-for="(range, index) in ranges" style="margin-bottom: 0.3em">
 			<span v-if="range.type == 'ipRange'">IP范围：</span>
 			{{range.params.ipFrom}} - {{range.params.ipTo}} &nbsp; <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
 		</div>
 		<div class="ui divider"></div>
 	</div>
 	
-	<!-- IP 范围 -->
+	<!-- 添加单个 -->
 	<div style="margin-bottom: 1em" v-show="isAdding">
 		<div class="ui fields inline">
 			<div class="ui field">
@@ -1527,8 +1589,23 @@ Vue.component("ns-route-ranges-box", {
 			</div>
 		</div>
 	</div>
+
+	<!-- 添加多个 -->
+	<div style="margin-bottom: 1em" v-show="isAddingBatch">
+		<div class="ui field">
+			<textarea rows="5" ref="batchIPRange" v-model="batchIPRange"></textarea>	
+			<p class="comment">每行一条，格式为<code-label>开始IP,结束IP</code-label>，比如<code-label>192.168.1.100,192.168.1.200</code-label>。</p>	
+		</div>
+		<div class="ui field">
+			<button class="ui button tiny" type="button" @click.prevent="confirmBatchIPRange">确定</button> &nbsp;
+			<a href="" @click.prevent="cancelBatchIPRange" title="取消"><i class="icon remove small"></i></a>
+		</div>
+	</div>
 	
-	<button class="ui button tiny" type="button" @click.prevent="add">+</button>
+	<div v-if="!isAdding && !isAddingBatch">
+		<button class="ui button tiny" type="button" @click.prevent="add">单个添加</button> &nbsp;
+		<button class="ui button tiny" type="button" @click.prevent="addBatch">批量添加</button>
+	</div>
 </div>`
 })
 
@@ -10786,7 +10863,7 @@ Vue.component("traffic-limit-config-box", {
 				<td>网页提示内容</td>
 				<td>
 					<textarea v-model="config.noticePageBody"></textarea>
-					<p class="comment"><a href="" @click.prevent="showBodyTemplate">[使用模板]</a>。当达到流量限制时网页显示的HTML内容，不填写则显示默认的提示内容。</p>
+					<p class="comment"><a href="" @click.prevent="showBodyTemplate">[使用模板]</a>。当达到流量限制时网页显示的HTML内容，不填写则显示默认的提示内容，适用于网站类服务。</p>
 				</td>
 			</tr>
 		</tbody>