UNPKG

shadowsocks-manager

Version:

A shadowsocks manager tool for multi user and traffic control.

142 lines 8.23 kB
<div layout="column" ng-show="serverInfoloaded"> <div flex="15"></div> <div flex layout="row"> <div flex="10" flex-gt-sm="30"></div> <div flex layout="column" layout-align="space-around stretch"> <div style="height: 30px;"></div> <form name="serverForm"> <div layout="row" layout-align="center stretch" style="width: 100%;"> <md-select ng-model="server.type" style="width: 100%;" aria-label="type"> <md-option ng-value="'Shadowsocks'">Shadowsocks</md-option> <md-option ng-value="'WireGuard'">WireGuard</md-option> <md-option ng-value="'Trojan'">Trojan</md-option> </md-select> </div> <md-input-container class="md-block"> <label translate>名称</label> <input type="text" required name="name" ng-model="server.name"> <div ng-messages="serverForm.name.$error"> <div ng-message="required">名称不能为空</div> </div> </md-input-container> <md-input-container class="md-block"> <label translate>备注</label> <input type="text" required name="comment" ng-model="server.comment"> </md-input-container> <md-input-container class="md-block"> <label translate>地址</label> <input type="text" required name="address" ng-model="server.address"> <div ng-messages="serverForm.address.$error"> <div ng-message="required">地址不能为空</div> </div> </md-input-container> <md-input-container class="md-block"> <label translate>端口</label> <input type="text" required name="port" ng-model="server.port"> <div ng-messages="serverForm.port.$error"> <div ng-message="required">端口不能为空</div> </div> </md-input-container> <md-input-container class="md-block"> <label translate>密码</label> <input type="text" required name="password" ng-model="server.password"> <div ng-messages="serverForm.password.$error"> <div ng-message="required">密码不能为空</div> </div> </md-input-container> <md-input-container class="md-block" ng-if="server.type === 'WireGuard'"> <label>Public key</label> <input type="text" required name="publicKey" ng-model="server.key"> </md-input-container> <md-input-container class="md-block" ng-if="server.type === 'WireGuard'"> <label translate>网段</label> <input type="text" required name="net" ng-model="server.net"> </md-input-container> <md-input-container class="md-block" ng-if="server.type === 'WireGuard'"> <label translate>WireGuard端口</label> <input type="number" required name="wgPort" ng-model="server.wgPort"> </md-input-container> <md-input-container class="md-block" ng-if="server.type === 'Trojan'"> <label>Trojan端口</label> <input type="number" required name="tjPort" ng-model="server.tjPort"> </md-input-container> <div ng-if="server.type === 'Shadowsocks'" class="md-block" layout="column" layout-align="center stretch" style="margin-bottom: 25px;"> <label flex style="color: rgba(0,0,0, 0.54); font-size: 13px;" translate>加密方式</label> <md-autocomplete flex md-selected-item="server.method" md-items="method in methods" md-item-text="method" md-min-length="0" md-search-text="methodSearch" md-search-text-change="setMethod()" md-require-match="false" placeholder="请填写加密方式"> <md-item-template> <span md-highlight-text="methodSearch" md-highlight-flags="^i">{{method}}</span> </md-item-template> </md-autocomplete> </div> <md-input-container class="md-block"> <label translate>流量倍率</label> <input type="text" required name="scale" ng-model="server.scale"> <div ng-messages="serverForm.scale.$error"> <div ng-message="required" translate>流量倍率不能为空</div> </div> </md-input-container> <md-input-container class="md-block" ng-if="server.type === 'Shadowsocks'"> <label translate>端口偏移</label> <input type="number" required name="shift" ng-model="server.shift"> <div ng-messages="serverForm.shift.$error"> <div ng-message="required" translate>端口偏移量不能为空</div> </div> </md-input-container> <md-input-container class="md-block"> <label translate>插件参数</label> <input type="text" name="pluginOptions" ng-model="server.pluginOptions"> </md-input-container> <div style="width: 100%;"> <md-chips ng-model="tags" placeholder="请输入标签"> <md-autocomplete md-selected-item="tagsAutoComplete.selectedItem" md-search-text="tagsAutoComplete.searchText" md-items="item in tagsAutoComplete.querySearch(tagsAutoComplete.searchText)" md-item-text="item" placeholder="请输入标签" > <span md-highlight-text="tagsAutoComplete.searchText">{{item}}</span> </md-autocomplete> <md-chip-template> <strong>{{$chip}}</strong> </md-chip-template> </md-chips> </div> <div style="width: 100%;" layout="row" layout-align="space-between center"> <div flex="75" translate>立即同步所有端口</div> <div flex layout="row" layout-align="end center"> <md-switch ng-model="server.check" aria-label="check" ng-true-value="1" ng-false-value="0"></md-switch> </div> </div> </form> </div> <div flex="10" flex-gt-sm="30"></div> </div> <div style="height: 50px;"></div> <div class="bottom-nav"> <div flex layout="row" layout-align="center start"> <div flex="10" flex-gt-sm="30"></div> <div layout="row" flex layout-align="space-around center"> <md-button class="md-primary" ng-click="cancel()"><span translate>取消</span></md-button> <md-button class="md-warn" ng-click="deleteServer()" translate><span translate>删除</span></md-button> <md-button class="md-raised md-primary" ng-click="confirm()" translate><span translate>确认</span></md-button> </div> <div flex="10" flex-gt-sm="30"></div> </div> </div> </div> <div layout-fill layout="row" layout-align="center center" ng-show="!serverInfoloaded"> <div flex style="height: 180px;"></div> <div flex layout="row" layout-align="center center"> <md-progress-circular md-mode="indeterminate" class="md-accent"></md-progress-circular> </div> <div flex style="height: 180px;"></div> </div>