实现路径规则部分功能

This commit is contained in:
GoEdgeLab
2020-09-21 19:51:50 +08:00
parent f796a1d4d7
commit c126d06f70
50 changed files with 630 additions and 114 deletions

View File

@@ -36,6 +36,12 @@
.left-box::-webkit-scrollbar {
width: 4px;
}
.left-box.disabled {
opacity: 0.3;
}
.left-box.tiny {
top: 10em;
}
.right-box {
position: fixed;
top: 7.5em;

File diff suppressed because one or more lines are too long

View File

@@ -1,6 +1,6 @@
<div class="margin"></div>
<div class="left-box">
<div class="left-box" :class="{disabled:leftMenuItemIsDisabled}">
<div class="ui menu text blue vertical small">
<a class="item" v-for="item in leftMenuItems" :href="item.url" :class="{active:item.isActive, separator:item.name == '-'}">
<span v-if="item.name != '-'"><i class="icon play tiny" :style="{'visibility':item.isActive ? 'visible' : 'hidden'}"></i>{{item.name}}</span>

View File

@@ -43,10 +43,19 @@
}
}
.left-box::-webkit-scrollbar {
width: 4px;
}
.left-box.disabled {
opacity: 0.3;
}
.left-box.tiny {
top: 10em;
}
.right-box {
position: fixed;
top: 7.5em;
@@ -60,4 +69,4 @@
.right-box::-webkit-scrollbar {
width: 4px;
}
}

View File

@@ -0,0 +1,9 @@
<div class="margin"></div>
<div class="left-box tiny">
<div class="ui menu text blue vertical tiny">
<a class="item" v-for="item in tinyLeftMenuItems" :href="item.url" :class="{active:item.isActive, separator:item.name == '-'}">
<span v-if="item.name != '-'"><i class="icon play tiny" :style="{'visibility':item.isActive ? 'visible' : 'hidden'}"></i>{{item.name}}</span>
</a>
</div>
</div>

View File

@@ -0,0 +1,4 @@
<first-menu>
<menu-item :href="'/servers/server/settings/locations?serverId=' + serverId" code="index">列表</menu-item>
<menu-item :href="'/servers/server/settings/locations/create?serverId=' + serverId" code="create">创建</menu-item>
</first-menu>

View File

@@ -0,0 +1,77 @@
{$layout}
{$template "/left_menu"}
<div class="right-box">
{$template "menu"}
<div class="margin"></div>
<form class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="webId" :value="webId"/>
<table class="ui table selectable definition">
<tr>
<td>路径匹配规则 *</td>
<td>
<input type="text" name="pattern" maxlength="500"/>
<p class="comment">路径通常以斜杠(/)开头,比如/hello。如果匹配类型是正则表达式匹配则可以是一个正则表达式</p>
</td>
</tr>
<tr>
<td>匹配类型</td>
<td>
<select class="ui dropdown auto-width" name="patternType" v-model="type" @change="changePatternType(type)">
<option v-for="patternType in patternTypes" :value="patternType.type">{{patternType.name}}</option>
</select>
<p class="comment" v-if="selectedType != null" v-html="selectedType.description"></p>
</td>
</tr>
<tr>
<td>是否终止往下匹配</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isBreak" value="1"/>
<label></label>
</div>
<p class="comment">如果选中了此选项,一旦匹配成功,不会继续匹配其他的路径规则。</p>
</td>
</tr>
<tr>
<td class="title">名称</td>
<td>
<input type="text" name="name" ref="focus" maxlength="100"/>
<p class="comment">可以用来说明此规则用途。。</p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td>不区分大小写</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isCaseInsensitive" value="1"/>
<label></label>
</div>
<p class="comment">选中表示匹配规则中的路径中的英文字母不区分大小写。</p>
</td>
</tr>
<tr>
<td>反向匹配</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isReverse" value="1"/>
<label></label>
</div>
<p class="comment">选中表示匹配所有<strong>不符合规则</strong>的路径。</p>
</td>
</tr>
<tr>
<td>描述</td>
<td>
<textarea rows="3" name="description" maxlength="200"></textarea>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>
</div>

View File

@@ -0,0 +1,13 @@
Tea.context(function () {
this.success = NotifySuccess("添加成功", "/servers/server/settings/locations?serverId=" + this.serverId)
this.type = 1
this.selectedType = null
this.changePatternType = function (type) {
this.selectedType = this.patternTypes.$find(function (k, v) {
return v.type == type;
})
}
})

View File

@@ -3,5 +3,23 @@
{$template "/left_menu"}
<div class="right-box">
<p class="ui message">此功能暂未开放,敬请期待。</p>
{$template "menu"}
<p class="comment" v-if="locations.length == 0">暂时还没有路径规则。</p>
<table class="ui table selectable" v-if="locations.length > 0">
<thead>
<tr>
<th>匹配规则</th>
<th class="two op">操作</th>
</tr>
</thead>
<tr v-for="location in locations">
<td>{{location.pattern}}</td>
<td>
<a :href="'/servers/server/settings/locations/location?serverId=' + serverId + '&locationId=' + location.id">详情</a> &nbsp;
<a href="" @click.prevent="deleteLocation(location.id)">删除</a>
</td>
</tr>
</table>
</div>

View File

@@ -0,0 +1,12 @@
Tea.context(function () {
this.deleteLocation = function (locationId) {
teaweb.confirm("确定要删除此路径规则吗?", function () {
this.$post(".delete")
.params({
webId: this.webId,
locationId: locationId
})
.refresh()
})
}
})

View File

@@ -0,0 +1,10 @@
{$layout}
{$template "/left_menu"}
<div class="right-box">
<first-menu>
<menu-item :href="'/servers/server/settings/locations?serverId=' + serverId">所有路径规则 &raquo;</menu-item>
<menu-item :href="'/servers/server/settings/locations/location?serverId=' + serverId + '&locationId=' + locationId" :active="true">{{locationConfig.pattern}}</menu-item>
</first-menu>
{$template "/servers/server/settings/locations/left_menu"}
</div>

View File

@@ -10,7 +10,7 @@
<input type="hidden" name="reverseProxyRefJSON" :value="JSON.stringify(reverseProxyRef)"/>
<table class="ui table selectable definition">
<tr>
<td class="title">是否启用</td>
<td class="title">是否启用反向代理</td>
<td>
<div class="ui checkbox">
<input type="checkbox" v-model="reverseProxyRef.isOn"/>