Skip to content

Commit ecbc872

Browse files
iwindiwind
committed
优化交互
1 parent 9f8731d commit ecbc872

File tree

4 files changed

+106
-14
lines changed

4 files changed

+106
-14
lines changed

‎web/public/js/components.js‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -417,17 +417,17 @@ Vue.component("traffic-map-box",{props:["v-stats","v-is-attack"],mounted:functio
417417
</tbody>
418418
</table>
419419
<div class="margin"></div>
420-
</div>`}),Vue.component("ns-route-ranges-box",{props:["v-ranges"],data:function(){let e=this.vRanges;return{ranges:e=null==e?[]:e,isAdding:!1,ipRangeFrom:"",ipRangeTo:""}},methods:{add:function(){this.isAdding=!0;let e=this;setTimeout(function(){e.$refs.ipRangeFrom.focus()},100)},remove:function(e){this.ranges.$remove(e)},cancelIPRange:function(){this.isAdding=!1,this.ipRangeFrom="",this.ipRangeTo=""},confirmIPRange:function(){let e=this;this.ipRangeFrom=this.ipRangeFrom.trim(),this.validateIP(this.ipRangeFrom)?(this.ipRangeTo=this.ipRangeTo.trim(),this.validateIP(this.ipRangeTo)?(this.ranges.push({type:"ipRange",params:{ipFrom:this.ipRangeFrom,ipTo:this.ipRangeTo}}),this.cancelIPRange()):teaweb.warn("结束IP填写错误",function(){e.$refs.ipRangeTo.focus()})):teaweb.warn("开始IP填写错误",function(){e.$refs.ipRangeFrom.focus()})},validateIP:function(e){if(!e.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/))return!1;let t=e.split("."),i=!0;return t.forEach(function(e){255<parseInt(e)&&(i=!1)}),i}},template:`<div>
420+
</div>`}),Vue.component("ns-route-ranges-box",{props:["v-ranges"],data:function(){let e=this.vRanges;return{ranges:e=null==e?[]:e,isAdding:!1,isAddingBatch:!1,ipRangeFrom:"",ipRangeTo:"",batchIPRange:""}},methods:{add:function(){this.isAdding=!0;let e=this;setTimeout(function(){e.$refs.ipRangeFrom.focus()},100)},remove:function(e){this.ranges.$remove(e)},cancelIPRange:function(){this.isAdding=!1,this.ipRangeFrom="",this.ipRangeTo=""},confirmIPRange:function(){let e=this;this.ipRangeFrom=this.ipRangeFrom.trim(),this.validateIP(this.ipRangeFrom)?(this.ipRangeTo=this.ipRangeTo.trim(),this.validateIP(this.ipRangeTo)?(this.ranges.push({type:"ipRange",params:{ipFrom:this.ipRangeFrom,ipTo:this.ipRangeTo}}),this.cancelIPRange()):teaweb.warn("结束IP填写错误",function(){e.$refs.ipRangeTo.focus()})):teaweb.warn("开始IP填写错误",function(){e.$refs.ipRangeFrom.focus()})},addBatch:function(){this.isAddingBatch=!0;let e=this;setTimeout(function(){e.$refs.batchIPRange.focus()},100)},cancelBatchIPRange:function(){this.isAddingBatch=!1,this.batchIPRange=""},confirmBatchIPRange:function(){let a=this,e=this.batchIPRange;if(0==e.length)teaweb.warn("请填写要加入的IP范围",function(){a.$refs.batchIPRange.focus()});else{let n=[],o="";e.split("\n").forEach(function(t){if(0!=(t=t.trim()).length){let e=(t=t.replace("，",",")).split(",");var i,s;2!=e.length?o=t:(i=e[0].trim(),s=e[1].trim(),a.validateIP(i)&&a.validateIP(s)?n.push({type:"ipRange",params:{ipFrom:i,ipTo:s}}):o=t)}}),0<o.length?teaweb.warn("'"+o+"'格式错误",function(){a.$refs.batchIPRange.focus()}):(n.forEach(function(e){a.ranges.push(e)}),this.cancelBatchIPRange())}},validateIP:function(e){if(!e.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/))return!1;let t=e.split("."),i=!0;return t.forEach(function(e){255<parseInt(e)&&(i=!1)}),i}},template:`<div>
421421
<input type="hidden" name="rangesJSON" :value="JSON.stringify(ranges)"/>
422422
<div v-if="ranges.length > 0">
423-
<div class="ui label tiny basic" v-for="(range, index) in ranges">
423+
<div class="ui label tiny basic" v-for="(range, index) in ranges" style="margin-bottom: 0.3em">
424424
<span v-if="range.type == 'ipRange'">IP范围：</span>
425425
{{range.params.ipFrom}} - {{range.params.ipTo}} &nbsp; <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
426426
</div>
427427
<div class="ui divider"></div>
428428
</div>
429429
430-
<!-- IP 范围 -->
430+
<!-- 添加单个 -->
431431
<div style="margin-bottom: 1em" v-show="isAdding">
432432
<div class="ui fields inline">
433433
<div class="ui field">
@@ -443,8 +443,23 @@ Vue.component("traffic-map-box",{props:["v-stats","v-is-attack"],mounted:functio
443443
</div>
444444
</div>
445445
</div>
446+
447+
<!-- 添加多个 -->
448+
<div style="margin-bottom: 1em" v-show="isAddingBatch">
449+
<div class="ui field">
450+
<textarea rows="5" ref="batchIPRange" v-model="batchIPRange"></textarea>
451+
<p class="comment">每行一条，格式为<code-label>开始IP,结束IP</code-label>，比如<code-label>192.168.1.100,192.168.1.200</code-label>。</p>
452+
</div>
453+
<div class="ui field">
454+
<button class="ui button tiny" type="button" @click.prevent="confirmBatchIPRange">确定</button> &nbsp;
455+
<a href="" @click.prevent="cancelBatchIPRange" title="取消"><i class="icon remove small"></i></a>
456+
</div>
457+
</div>
446458
447-
<button class="ui button tiny" type="button" @click.prevent="add">+</button>
459+
<div v-if="!isAdding && !isAddingBatch">
460+
<button class="ui button tiny" type="button" @click.prevent="add">单个添加</button> &nbsp;
461+
<button class="ui button tiny" type="button" @click.prevent="addBatch">批量添加</button>
462+
</div>
448463
</div>`}),Vue.component("ns-route-selector",{props:["v-route-code"],mounted:function(){let t=this;Tea.action("/ns/routes/options").post().success(function(e){t.routes=e.data.routes})},data:function(){let e=this.vRouteCode;return{routeCode:e=null==e?"":e,routes:[]}},template:`<div>
449464
<div v-if="routes.length > 0">
450465
<select class="ui dropdown" name="routeCode" v-model="routeCode">
@@ -551,7 +566,7 @@ Vue.component("traffic-map-box",{props:["v-stats","v-is-attack"],mounted:functio
551566
<div v-if="!isAdding">
552567
<button class="ui button small" type="button" @click.prevent="add">+</button>
553568
</div>
554-
</div>`}),Vue.component("plan-price-config-box",{props:["v-price-type","v-monthly-price","v-seasonally-price","v-yearly-price","v-traffic-price","v-bandwidth-price","v-disable-period"],data:function(){let e=this.vPriceType,t=(null==e&&(e="bandwidth"),0),i=this.vMonthlyPrice,s=(null==i||i<=0?i="":(i=i.toString(),t=parseFloat(i),isNaN(t)&&(t=0)),0),n=this.vSeasonallyPrice,o=(null==n||n<=0?n="":(n=n.toString(),s=parseFloat(n),isNaN(s)&&(s=0)),0),a=this.vYearlyPrice,l=(null==a||a<=0?a="":(a=a.toString(),o=parseFloat(a),isNaN(o)&&(o=0)),this.vTrafficPrice),r=0,c=(null!=l?r=l.base:l={base:0},""),d=(0<r&&(c=r.toString()),this.vBandwidthPrice);return null==d?d={percentile:95,ranges:[]}:null==d.ranges&&(d.ranges=[]),{priceType:e,monthlyPrice:i,seasonallyPrice:n,yearlyPrice:a,monthlyPriceNumber:t,seasonallyPriceNumber:s,yearlyPriceNumber:o,trafficPriceBase:c,trafficPrice:l,bandwidthPrice:d,bandwidthPercentile:d.percentile}},methods:{changeBandwidthPriceRanges:function(e){this.bandwidthPrice.ranges=e}},watch:{monthlyPrice:function(e){let t=parseFloat(e);isNaN(t)&&(t=0),this.monthlyPriceNumber=t},seasonallyPrice:function(e){let t=parseFloat(e);isNaN(t)&&(t=0),this.seasonallyPriceNumber=t},yearlyPrice:function(e){let t=parseFloat(e);isNaN(t)&&(t=0),this.yearlyPriceNumber=t},trafficPriceBase:function(e){let t=parseFloat(e);isNaN(t)&&(t=0),this.trafficPrice.base=t},bandwidthPercentile:function(e){let t=parseInt(e);isNaN(t)||t<=0?t=95:100<t&&(t=100),this.bandwidthPrice.percentile=t}},template:`<div>
569+
</div>`}),Vue.component("plan-price-config-box",{props:["v-price-type","v-monthly-price","v-seasonally-price","v-yearly-price","v-traffic-price","v-bandwidth-price","v-disable-period"],data:function(){let e=this.vPriceType,t=(null==e&&(e="bandwidth"),0),i=this.vMonthlyPrice,s=(null==i||i<=0?i="":(i=i.toString(),t=parseFloat(i),isNaN(t)&&(t=0)),0),n=this.vSeasonallyPrice,o=(null==n||n<=0?n="":(n=n.toString(),s=parseFloat(n),isNaN(s)&&(s=0)),0),a=this.vYearlyPrice,l=(null==a||a<=0?a="":(a=a.toString(),o=parseFloat(a),isNaN(o)&&(o=0)),this.vTrafficPrice),c=0,r=(null!=l?c=l.base:l={base:0},""),d=(0<c&&(r=c.toString()),this.vBandwidthPrice);return null==d?d={percentile:95,ranges:[]}:null==d.ranges&&(d.ranges=[]),{priceType:e,monthlyPrice:i,seasonallyPrice:n,yearlyPrice:a,monthlyPriceNumber:t,seasonallyPriceNumber:s,yearlyPriceNumber:o,trafficPriceBase:r,trafficPrice:l,bandwidthPrice:d,bandwidthPercentile:d.percentile}},methods:{changeBandwidthPriceRanges:function(e){this.bandwidthPrice.ranges=e}},watch:{monthlyPrice:function(e){let t=parseFloat(e);isNaN(t)&&(t=0),this.monthlyPriceNumber=t},seasonallyPrice:function(e){let t=parseFloat(e);isNaN(t)&&(t=0),this.seasonallyPriceNumber=t},yearlyPrice:function(e){let t=parseFloat(e);isNaN(t)&&(t=0),this.yearlyPriceNumber=t},trafficPriceBase:function(e){let t=parseFloat(e);isNaN(t)&&(t=0),this.trafficPrice.base=t},bandwidthPercentile:function(e){let t=parseInt(e);isNaN(t)||t<=0?t=95:100<t&&(t=100),this.bandwidthPrice.percentile=t}},template:`<div>
555570
<input type="hidden" name="priceType" :value="priceType"/>
556571
<input type="hidden" name="monthlyPrice" :value="monthlyPriceNumber"/>
557572
<input type="hidden" name="seasonallyPrice" :value="seasonallyPriceNumber"/>
@@ -3742,7 +3757,7 @@ Vue.component("traffic-map-box",{props:["v-stats","v-is-attack"],mounted:functio
37423757
<td>网页提示内容</td>
37433758
<td>
37443759
<textarea v-model="config.noticePageBody"></textarea>
3745-
<p class="comment"><a href="" @click.prevent="showBodyTemplate">[使用模板]</a>。当达到流量限制时网页显示的HTML内容，不填写则显示默认的提示内容。</p>
3760+
<p class="comment"><a href="" @click.prevent="showBodyTemplate">[使用模板]</a>。当达到流量限制时网页显示的HTML内容，不填写则显示默认的提示内容，适用于网站类服务。</p>
37463761
</td>
37473762
</tr>
37483763
</tbody>

‎web/public/js/components.src.js‎

Lines changed: 82 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1436,10 +1436,13 @@ Vue.component("ns-route-ranges-box", {
14361436
return {
14371437
ranges: ranges,
14381438
isAdding: false,
1439+
isAddingBatch: false,
14391440

14401441
// IP范围
14411442
ipRangeFrom: "",
1442-
ipRangeTo: ""
1443+
ipRangeTo: "",
1444+
1445+
batchIPRange: ""
14431446
}
14441447
},
14451448
methods: {
@@ -1486,6 +1489,65 @@ Vue.component("ns-route-ranges-box", {
14861489
})
14871490
this.cancelIPRange()
14881491
},
1492+
addBatch: function () {
1493+
this.isAddingBatch = true
1494+
let that = this
1495+
setTimeout(function () {
1496+
that.$refs.batchIPRange.focus()
1497+
}, 100)
1498+
},
1499+
cancelBatchIPRange: function () {
1500+
this.isAddingBatch = false
1501+
this.batchIPRange = ""
1502+
},
1503+
confirmBatchIPRange: function () {
1504+
let that = this
1505+
let rangesText = this.batchIPRange
1506+
if (rangesText.length == 0) {
1507+
teaweb.warn("请填写要加入的IP范围", function () {
1508+
that.$refs.batchIPRange.focus()
1509+
})
1510+
return
1511+
}
1512+
1513+
let validRanges = []
1514+
let invalidLine = ""
1515+
rangesText.split("\n").forEach(function (line) {
1516+
line = line.trim()
1517+
if (line.length == 0) {
1518+
return
1519+
}
1520+
line = line.replace("，", ",")
1521+
let pieces = line.split(",")
1522+
if (pieces.length != 2) {
1523+
invalidLine = line
1524+
return
1525+
}
1526+
let ipFrom = pieces[0].trim()
1527+
let ipTo = pieces[1].trim()
1528+
if (!that.validateIP(ipFrom) || !that.validateIP(ipTo)) {
1529+
invalidLine = line
1530+
return
1531+
}
1532+
validRanges.push({
1533+
type: "ipRange",
1534+
params: {
1535+
ipFrom: ipFrom,
1536+
ipTo: ipTo
1537+
}
1538+
})
1539+
})
1540+
if (invalidLine.length > 0) {
1541+
teaweb.warn("'" + invalidLine + "'格式错误", function () {
1542+
that.$refs.batchIPRange.focus()
1543+
})
1544+
return
1545+
}
1546+
validRanges.forEach(function (v) {
1547+
that.ranges.push(v)
1548+
})
1549+
this.cancelBatchIPRange()
1550+
},
14891551
validateIP: function (ip) {
14901552
if (!ip.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/)) {
14911553
return false
@@ -1504,14 +1566,14 @@ Vue.component("ns-route-ranges-box", {
15041566
template: `<div>
15051567
<input type="hidden" name="rangesJSON" :value="JSON.stringify(ranges)"/>
15061568
<div v-if="ranges.length > 0">
1507-
<div class="ui label tiny basic" v-for="(range, index) in ranges">
1569+
<div class="ui label tiny basic" v-for="(range, index) in ranges" style="margin-bottom: 0.3em">
15081570
<span v-if="range.type == 'ipRange'">IP范围：</span>
15091571
{{range.params.ipFrom}} - {{range.params.ipTo}} &nbsp; <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
15101572
</div>
15111573
<div class="ui divider"></div>
15121574
</div>
15131575
1514-
<!-- IP 范围 -->
1576+
<!-- 添加单个 -->
15151577
<div style="margin-bottom: 1em" v-show="isAdding">
15161578
<div class="ui fields inline">
15171579
<div class="ui field">
@@ -1527,8 +1589,23 @@ Vue.component("ns-route-ranges-box", {
15271589
</div>
15281590
</div>
15291591
</div>
1592+
1593+
<!-- 添加多个 -->
1594+
<div style="margin-bottom: 1em" v-show="isAddingBatch">
1595+
<div class="ui field">
1596+
<textarea rows="5" ref="batchIPRange" v-model="batchIPRange"></textarea>
1597+
<p class="comment">每行一条，格式为<code-label>开始IP,结束IP</code-label>，比如<code-label>192.168.1.100,192.168.1.200</code-label>。</p>
1598+
</div>
1599+
<div class="ui field">
1600+
<button class="ui button tiny" type="button" @click.prevent="confirmBatchIPRange">确定</button> &nbsp;
1601+
<a href="" @click.prevent="cancelBatchIPRange" title="取消"><i class="icon remove small"></i></a>
1602+
</div>
1603+
</div>
15301604
1531-
<button class="ui button tiny" type="button" @click.prevent="add">+</button>
1605+
<div v-if="!isAdding && !isAddingBatch">
1606+
<button class="ui button tiny" type="button" @click.prevent="add">单个添加</button> &nbsp;
1607+
<button class="ui button tiny" type="button" @click.prevent="addBatch">批量添加</button>
1608+
</div>
15321609
</div>`
15331610
})
15341611

@@ -10786,7 +10863,7 @@ Vue.component("traffic-limit-config-box", {
1078610863
<td>网页提示内容</td>
1078710864
<td>
1078810865
<textarea v-model="config.noticePageBody"></textarea>
10789-
<p class="comment"><a href="" @click.prevent="showBodyTemplate">[使用模板]</a>。当达到流量限制时网页显示的HTML内容，不填写则显示默认的提示内容。</p>
10866+
<p class="comment"><a href="" @click.prevent="showBodyTemplate">[使用模板]</a>。当达到流量限制时网页显示的HTML内容，不填写则显示默认的提示内容，适用于网站类服务。</p>
1079010867
</td>
1079110868
</tr>
1079210869
</tbody>

‎web/public/js/components/server/traffic-limit-config-box.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ Vue.component("traffic-limit-config-box", {
9494
<td>网页提示内容</td>
9595
<td>
9696
<textarea v-model="config.noticePageBody"></textarea>
97-
<p class="comment"><a href="" @click.prevent="showBodyTemplate">[使用模板]</a>。当达到流量限制时网页显示的HTML内容，不填写则显示默认的提示内容。</p>
97+
<p class="comment"><a href="" @click.prevent="showBodyTemplate">[使用模板]</a>。当达到流量限制时网页显示的HTML内容，不填写则显示默认的提示内容，适用于网站类服务。</p>
9898
</td>
9999
</tr>
100100
</tbody>

‎web/public/js/utils.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ window.teaweb = {
9494
field: element,
9595
firstDay: 1,
9696
minDate: new Date(year - 1, 0, 1),
97-
maxDate: new Date(year + 10, 11, 31),
98-
yearRange: [year - 1, year + 10],
97+
maxDate: new Date(year + 20, 11, 31),
98+
yearRange: [year - 1, year + 20],
9999
format: "YYYY-MM-DD",
100100
i18n: {
101101
previousMonth: '上月',

0 commit comments

Comments
 (0)