This repository has been archived by the owner on May 12, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 54
/
index.html
283 lines (283 loc) · 12.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<div id="btp_frps" class="bt-form">
<div class="bt-w-main" v-show="!init" style="position:relative">
<div style="position:absolute;top:50%;width:100%;margin-top:-32px">
<div style="background:url('/static/layer/skin/default/loading-2.gif') no-repeat center;height:32px"></div>
<div style="text-align:center;line-height:32px">正在加载组件，请稍后 ...</div>
</div>
</div>
<div class="bt-w-main" v-show="init" style="display:none">
<div class="bt-w-menu">
<p v-bind:class="{bgw: item.value === current}" v-for="item in menu" v-text="item.name" v-on:click="change(item.value)"></p>
</div>
<div class="bt-w-con pd15 divtable">
<div class="bt-box" v-show="current === 'common'">
<div class="line">
<input type="file" style="display:none" accept=".tar.gz,.zip" v-on:change="uploadFile" ref="import"/>
<span class="tname">frps 版本</span>
<div class="info-r">
<template v-if="!installed">
<input class="inputtxt bt-input-text disable" type="text" value="未安装" disabled="">
<span class="btn btn-xs btn-success" v-on:click="install">在线安装</span>
</template>
<template v-else>
<input class="inputtxt bt-input-text disable" type="text" v-model="version" disabled="">
<span class="btn btn-xs btn-success" v-on:click="upgrade">检查更新</span>
</template>
<span class="btn btn-xs btn-success" v-on:click="$refs.import.click()" v-text="installed ? '离线更新' : '离线安装'"></span>
<a href="https://github.com/fatedier/frp/releases" target="_blank" rel="noreferrer">前往 GitHub 下载</a>
</div>
</div>
<div class="line">
<span class="tname">监听地址</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="0.0.0.0" type="text" style="width:230px" v-model="config.bindAddr">
<span style="color:#999">* 支持监听 IPv6 地址</span>
</div>
</div>
<div class="line">
<span class="tname">TCP 端口</span>
<div class="info-r"><input class="bt-input-text mr5" placeholder="7000" type="number" style="width:100px" v-model="config.bindPort"></div>
</div>
<div class="line">
<span class="tname">UDP 端口</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="7001" type="number" style="width:100px" v-model="config.bindUdpPort">
<span style="color:#999">* 用于辅助客户端进行打洞穿透 NAT</span>
</div>
</div>
<div class="line">
<span class="tname">KCP 端口</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="7000" type="number" style="width:100px" v-model="config.kcpBindPort">
<span style="color:#999">* KCP 协议的 UDP 端口，可与 TCP 端口相同</span>
</div>
</div>
<div class="line">
<span class="tname">验证密钥</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="12345678" type="password" style="width:230px" v-model="config.token">
</div>
</div>
<div class="line">
<span class="tname"></span>
<div class="info-r"><button class="btn btn-success btn-sm" v-on:click="save">保存配置</button></div>
</div>
</div>
<div class="bt-box" v-show="current === 'advanced'">
<div class="line">
<span class="tname">代理监听地址</span>
<div class="info-r">
<input class="bt-input-text mr5" v-bind:placeholder="config.bindAddr" type="text" style="width:230px" v-model="config.proxyBindAddr">
<span style="color:#999">* 默认与通用设置的监听地址相同</span>
</div>
</div>
<div class="line">
<span class="tname">日志等级</span>
<div class="info-r">
<select class="bt-input-text mr5" v-model="config.logLevel">
<option value="trace">trace</option>
<option value="debug">debug</option>
<option value="info">info</option>
<option value="warn">warn</option>
<option value="error">error</option>
</select>
</div>
</div>
<div class="line">
<span class="tname">日志切割</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="3" type="number" style="width:100px" v-model="config.logMaxDays">
<span style="color:#999">* 按设定时间进行日志切割，单位：天</span>
</div>
</div>
<div class="line">
<span class="tname">心跳超时</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="90" type="number" style="width:100px" v-model="config.heartbeatTimeout">
<span style="color:#999">* 不建议修改默认心跳超时，单位：秒，默认值：90</span>
</div>
</div>
<div class="line">
<span class="tname">最大连接池</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="5" type="number" style="width:100px" v-model="config.maxPoolCount">
</div>
</div>
<div class="line">
<span class="tname">最大端口数</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="0" type="number" style="width:100px" v-model="config.maxPortsPerClient">
<span style="color:#999">* 限制每个客户端最多创建的端口数量，设置为 0 表示不限制</span>
</div>
</div>
<div class="line">
<span class="tname">TCP 多路复用</span>
<div class="info-r">
<select class="bt-input-text mr5" v-model="config.tcpMux">
<option v-bind:value="false">禁用</option>
<option v-bind:value="true">启用</option>
</select>
<span style="color:#999">* 该配置项在服务端和客户端必须一致</span>
</div>
</div>
<div class="line">
<span class="tname">日志颜色</span>
<div class="info-r">
<select class="bt-input-text mr5" v-model="config.disableLogColor">
<option v-bind:value="false">禁用</option>
<option v-bind:value="true">启用</option>
</select>
<span style="color:#999">* 仅使用控制台运行 frps 有效</span>
</div>
</div>
<div class="line">
<span class="tname"></span>
<div class="info-r"><button class="btn btn-success btn-sm" v-on:click="save">保存配置</button></div>
</div>
<ul class="help-info-text c7" style="display:none">
<li>高级设置项目多数情况下保持默认设置即可</li>
</ul>
</div>
<div class="bt-box" v-show="current === 'dashboard'">
<div class="line">
<span class="tname">监听地址</span>
<div class="info-r">
<input class="bt-input-text mr5" v-bind:placeholder="config.bindAddr" type="text" style="width:230px" v-model="config.dashboardAddr">
<span style="color:#999">* 默认与通用设置的监听地址相同</span>
</div>
</div>
<div class="line">
<span class="tname">监听端口</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="7500" type="text" style="width:100px" v-model="config.dashboardPort">
</div>
</div>
<div class="line">
<span class="tname">验证账户</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="admin" type="text" style="width:230px" v-model="config.dashboardUser">
</div>
</div>
<div class="line">
<span class="tname">验证密码</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="admin" type="password" style="width:230px" v-model="config.dashboardPwd">
</div>
</div>
<div class="line">
<span class="tname"></span>
<div class="info-r"><button class="btn btn-success btn-sm" v-on:click="save">保存配置</button></div>
</div>
</div>
<div class="bt-box" v-show="current === 'vhost'">
<div class="line">
<span class="tname">二级域名</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="frps.com" type="text" style="width:230px" v-model="config.subdomainHost">
</div>
</div>
<div class="line">
<span class="tname">HTTP 端口</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="80" type="text" style="width:100px" v-model="config.vhostHttpPort">
<span style="color:#999">* 可与通用设置的 TCP 端口相同</span>
</div>
</div>
<div class="line">
<span class="tname">HTTPS 端口</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="443" type="text" style="width:100px" v-model="config.vhostHttpsPort">
<span style="color:#999">* 可与通用设置的 TCP 端口相同</span>
</div>
</div>
<div class="line">
<span class="tname">HTTP 超时</span>
<div class="info-r">
<input class="bt-input-text mr5" placeholder="60" type="text" style="width:100px" v-model="config.vhostHttpTimeout">
<span style="color:#999">* 请求超时时间，单位：秒，默认：60</span>
</div>
</div>
<div class="line">
<span class="tname">404 页面</span>
<div class="info-r">
<select class="bt-input-text mr5" v-model="config.enabledCustom404Page">
<option v-bind:value="false">禁用</option>
<option v-bind:value="true">启用</option>
</select>
<button class="btn btn-xs btn-success" v-on:click="custom404Page" v-bind:disabled="!config.enabledCustom404Page">自定义</button>
</div>
</div>
<div class="line">
<span class="tname"></span>
<div class="info-r"><button class="btn btn-success btn-sm" v-on:click="save">保存配置</button></div>
</div>
</div>
<div class="bt-box" v-show="current === 'ports'">
<div class="mb15">
<button class="btn btn-success btn-sm mr5" v-on:click="addPort">添加端口</button>
<button class="btn btn-success btn-sm" v-on:click="save">保存配置</button>
</div>
<div class="divtable">
<table class="table table-hover waftable" style="color:#fff">
<thead><tr><th width="460">端口</th><th>操作</th></tr></thead>
</table>
<div style="height:430px;overflow:auto">
<table class="table table-hover waftable" style="margin-top:-35px">
<thead><tr><th width="460">端口</th><th>操作</th></tr></thead>
<tbody>
<tr v-for="(port, index) in config.allowPorts">
<td v-text="port"></td>
<td><a class="btlink" v-on:click="removePort(index)">删除</a></td>
</tr>
<tr v-if="!config.allowPorts.length">
<td colspan="2">未设置任何端口白名单</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="bt-box" v-show="current === 'status'">
<div class="soft-man-con bt-form">
<p class="status">
<span v-if="!installed">当前状态：未安装</span>
<span v-else-if="started">当前状态：开启</span>
<span v-else>当前状态：关闭</span>
<span style="color:#20a53a;margin-left:3px" class="glyphicon glyphicon-play" v-if="installed && started"></span>
<span style="color:red;margin-left:3px" class="glyphicon glyphicon-pause" v-else></span>
</p>
<div class="sfm-opt mb15">
<button class="btn btn-default btn-sm" v-bind:disabled="!installed || started" v-on:click="start">开启</button>
<button class="btn btn-default btn-sm" v-bind:disabled="!installed || !started" v-on:click="restart">重启</button>
<button class="btn btn-default btn-sm" v-bind:disabled="!installed || !started" v-on:click="stop">关闭</button>
<button class="btn btn-default btn-sm" v-bind:disabled="!installed" v-on:click="clearLogs">清理日志</button>
</div>
<pre style="margin:0px;width:100%;height:420px;background-color:#333;color:#fff;padding:0 5px;border-radius:0" v-text="logs"></pre>
</div>
</div>
<div class="bt-box" v-show="current === 'about'">
<p class="status mb15">如果您在使用上有任何问题或建议，请您反馈到以下链接：</p>
<p class="status mb15"><a href="https://www.bt.cn/bbs/thread-35967-1-1.html" target="_blank" rel="noreferrer">https://www.bt.cn/bbs/thread-35967-1-1.html</a></p>
<p class="status mb15">未来功能构想：</p>
<p class="status mb15">1.自动放行端口（可能仅支持 firewalld）；2.查看已链接客户端（或接管仪表盘）等。</p>
<p class="status mb15">本项目依赖以下项目或组件</p>
<table class="table table-hover">
<thead><tr><th>名称</th><th>网站</th></tr></thead>
<tbody>
<tr v-for="item in about"><td v-text="item.name"></td><td><a v-bind:href="item.url" target="_blank" rel="noreferrer" v-text="item.url"></a></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div ref="addPort" style="display:none">
<div class="bt-form pd20">
<div class="line">
<span class="tname">端口</span>
<div class="info-r c4"><input class="bt-input-text" type="text" placeholder="请输入白名单端口" autocomplete="off" name="__VALUE__" style="width:270px"></div>
<div class="info-r c4" style="color:#999">* 可使用「-」表示范围</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/btp_frps/static/init.js"></script>