界面优化

web/views/@default/servers/components/index.html

@@ -3,6 +3,7 @@
 <div class="ui tabular menu tiny">
     <a href="" class="item" :class="{active: tab == 'domainMatch'}" @click.prevent="selectTab('domainMatch')">域名匹配配置</a>
     <a href="" class="item" :class="{active: tab == 'domainAuditing'}" @click.prevent="selectTab('domainAuditing')">域名审核配置</a>
+    <a href="" class="item" :class="{active: tab == 'tcpPorts'}" @click.prevent="selectTab('tcpPorts')">TCP/TLS端口</a>
 </div>
 
 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
@@ -78,6 +79,36 @@
         </table>
     </div>
 
+    <!-- TCP 相关 -->
+    <div v-show="tab == 'tcpPorts'">
+        <table class="ui table definition selectable">
+            <tr>
+                <td class="title">允许的端口范围</td>
+                <td>
+                    <div class="ui fields inline">
+                        <div class="ui field">
+                            <input type="text" name="tcpAllPortRangeMin" maxlength="5" size="6" v-model="tcpAllPortRangeMin"/>
+                        </div>
+                        <div class="ui field">
+                            -
+                        </div>
+                        <div class="ui field">
+                            <input type="text" name="tcpAllPortRangeMax" maxlength="5" size="6" v-model="tcpAllPortRangeMax"/>
+                        </div>
+                    </div>
+                    <p class="comment">用户创建TCP/TLS负载均衡服务时可以随机选择的端口范围，最小不能小于1024，最大不能大于65534。</p>
+                </td>
+            </tr>
+            <tr>
+                <td>排除的端口</td>
+                <td>
+                    <values-box placeholder="端口" size="6" name="tcpAllDenyPorts" :values="tcpAllDenyPorts"></values-box>
+                    <p class="comment">当为用户随机分配端口时要排除的端口。</p>
+                </td>
+            </tr>
+        </table>
+    </div>
+
     <div class="margin"></div>
     <submit-btn>保存</submit-btn>
 </form>