shadowsocks-manager
Version:
A shadowsocks manager tool for multi user and traffic control.
142 lines • 8.23 kB
HTML
<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>