cyonjan/frp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard upgrade vue4

Browse Source
This commit is contained in:
hbrwang 2020-11-23 15:26:56 +08:00
parent 7adeeedd55
commit c8fc59b999
30 changed files with 10204 additions and 10514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/frps/.babelrc
View File

@ -1,14 +0,0 @@
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

5
web/frps/.editorconfig Normal file
View File

@ -0,0 +1,5 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

2
web/frps/.env.development Normal file
View File

@ -0,0 +1,2 @@
# just a flag
ENV = 'development'

2
web/frps/.env.production Normal file
View File

@ -0,0 +1,2 @@
# just a flag
ENV = 'production'

27
web/frps/.gitignore vendored
View File

@ -1,6 +1,25 @@
.DS_Store .DS_Store
node_modules/ node_modules
dist/ /dist
npm-debug.log
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea .idea
.vscode/settings.json .vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.package-lock.json

8
web/frps/.prettierrc Normal file
View File

@ -0,0 +1,8 @@
{
"bracketSpacing": true,
"printWidth": 160,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"arrowParens": "avoid"
}

2
web/frps/Makefile
View File

@ -4,4 +4,4 @@ build:
@npm run build @npm run build
dev: install dev: install
@npm run dev @npm run serve

24
web/frps/README.md Normal file
View File

@ -0,0 +1,24 @@
# frps
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

3
web/frps/babel.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
presets: ['@vue/cli-plugin-babel/preset']
}

9334
web/frps/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

59
web/frps/package.json
View File

@ -4,45 +4,32 @@
"author": "fatedier", "author": "fatedier",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "webpack-dev-server -d --inline --hot --env.dev", "serve": "vue-cli-service serve",
"build": "rimraf dist && webpack -p --progress --hide-modules" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"bootstrap": "^3.3.7", "echarts": "^4.9.0",
"echarts": "^3.5.0", "element-ui": "^2.14.1",
"element-ui": "^2.3.8",
"humanize-plus": "^1.8.2", "humanize-plus": "^1.8.2",
"vue": "^2.5.16", "core-js": "^3.7.0",
"vue-resource": "^1.2.1", "vue": "^2.6.12",
"vue-router": "^2.3.0", "vue-router": "^3.4.9",
"whatwg-fetch": "^2.0.3" "whatwg-fetch": "^3.5.0"
},
"engines": {
"node": ">=6"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.6.0", "@vue/cli-plugin-babel": "~4.5.9",
"babel-core": "^6.21.0", "@vue/cli-plugin-router": "~4.5.9",
"babel-eslint": "^7.1.1", "@vue/cli-plugin-vuex": "~4.5.9",
"babel-loader": "^6.4.0", "@vue/cli-service": "~4.5.9",
"babel-plugin-component": "^1.1.1", "node-sass": "^5.0.0",
"babel-preset-es2015": "^6.13.2", "sass-loader": "^10.1.0",
"css-loader": "^0.27.0", "less": "^3.12.2",
"eslint": "^3.12.2", "less-loader": "^7.1.0",
"eslint-config-enough": "^0.2.2", "vue-template-compiler": "^2.6.12"
"eslint-loader": "^1.6.3", },
"file-loader": "^0.10.1", "browserslist": [
"html-loader": "^0.4.5", "> 1%",
"html-webpack-plugin": "^2.24.1", "last 2 versions",
"less": "^3.0.4", "not dead"
"less-loader": "^4.1.0", ]
"postcss-loader": "^1.3.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.2",
"url-loader": "^1.0.1",
"vue-loader": "^15.0.10",
"vue-template-compiler": "^2.1.8",
"webpack": "^2.2.0-rc.4",
"webpack-dev-server": "^3.1.4"
}
} }

5
web/frps/postcss.config.js
View File

@ -1,5 +0,0 @@
module.exports = {
plugins: [
require('autoprefixer')()
]
}

0
web/frps/src/assets/favicon.ico → web/frps/public/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

17
web/frps/public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

11
web/frps/src/App.vue
View File

@ -8,7 +8,7 @@
<section> <section>
<el-row> <el-row>
<el-col id="side-nav" :xs="24" :md="4"> <el-col id="side-nav" :xs="24" :md="4">
<el-menu default-active="1" mode="vertical" theme="light" router="false" @select="handleSelect"> <el-menu default-active="1" mode="vertical" theme="light" router @select="handleSelect">
<el-menu-item index="/">Overview</el-menu-item> <el-menu-item index="/">Overview</el-menu-item>
<el-submenu index="/proxies"> <el-submenu index="/proxies">
<template slot="title">Proxies</template> <template slot="title">Proxies</template>
@ -24,12 +24,11 @@
<el-col :xs="24" :md="20"> <el-col :xs="24" :md="20">
<div id="content"> <div id="content">
<router-view></router-view> <router-view />
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</section> </section>
<footer></footer>
</div> </div>
</template> </template>
@ -37,8 +36,8 @@
export default { export default {
methods: { methods: {
handleSelect(key, path) { handleSelect(key, path) {
if (key == '') { if (key === '') {
window.open("https://github.com/fatedier/frp") window.open('https://github.com/fatedier/frp')
} }
} }
} }
@ -58,7 +57,7 @@
} }
.header-color { .header-color {
background: #58B7FF; background: #58b7ff;
} }
#content { #content {

35
web/frps/src/components/Overview.vue
View File

@ -44,8 +44,8 @@
</div> </div>
</el-col> </el-col>
<el-col :md="12"> <el-col :md="12">
<div id="traffic" style="width: 400px;height:250px;margin-bottom: 30px;"></div> <div id="traffic" style="width: 400px; height: 250px; margin-bottom: 30px" />
<div id="proxies" style="width: 400px;height:250px;"></div> <div id="proxies" style="width: 400px; height: 250px" />
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -70,37 +70,38 @@
proxy_counts: '' proxy_counts: ''
} }
}, },
watch: {
$route: 'fetchData'
},
created() { created() {
this.fetchData() this.fetchData()
}, },
watch: {
'$route': 'fetchData'
},
methods: { methods: {
fetchData() { fetchData() {
fetch('/api/serverinfo', { credentials: 'include' }) fetch('/api/serverinfo', { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
.then(json => {
this.version = json.version this.version = json.version
this.bind_port = json.bind_port this.bind_port = json.bind_port
this.bind_udp_port = json.bind_udp_port this.bind_udp_port = json.bind_udp_port
if (this.bind_udp_port == 0) { if (this.bind_udp_port === 0) {
this.bind_udp_port = "disable" this.bind_udp_port = 'disable'
} }
this.vhost_http_port = json.vhost_http_port this.vhost_http_port = json.vhost_http_port
if (this.vhost_http_port == 0) { if (this.vhost_http_port === 0) {
this.vhost_http_port = "disable" this.vhost_http_port = 'disable'
} }
this.vhost_https_port = json.vhost_https_port this.vhost_https_port = json.vhost_https_port
if (this.vhost_https_port == 0) { if (this.vhost_https_port === 0) {
this.vhost_https_port = "disable" this.vhost_https_port = 'disable'
} }
this.subdomain_host = json.subdomain_host this.subdomain_host = json.subdomain_host
this.max_pool_count = json.max_pool_count this.max_pool_count = json.max_pool_count
this.max_ports_per_client = json.max_ports_per_client this.max_ports_per_client = json.max_ports_per_client
if (this.max_ports_per_client == 0) { if (this.max_ports_per_client === 0) {
this.max_ports_per_client = "no limit" this.max_ports_per_client = 'no limit'
} }
this.heart_beat_timeout = json.heart_beat_timeout this.heart_beat_timeout = json.heart_beat_timeout
this.client_counts = json.client_counts this.client_counts = json.client_counts
@ -128,12 +129,14 @@
} }
DrawTrafficChart('traffic', json.total_traffic_in, json.total_traffic_out) DrawTrafficChart('traffic', json.total_traffic_in, json.total_traffic_out)
DrawProxyChart('proxies', json) DrawProxyChart('proxies', json)
}).catch( err => { })
.catch(err => {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Get server info from frps failed!', message: 'Get server info from frps failed!',
type: 'warning' type: 'warning'
}) })
return err
}) })
} }
} }
@ -144,7 +147,7 @@
.source { .source {
border: 1px solid #eaeefb; border: 1px solid #eaeefb;
border-radius: 4px; border-radius: 4px;
transition: .2s; transition: 0.2s;
padding: 24px; padding: 24px;
} }

86
web/frps/src/components/ProxiesHttp.vue
View File

@ -3,13 +3,8 @@
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%"> <el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-popover <el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
ref="popover4" <my-traffic-chart :proxy-name="props.row.name" />
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover> </el-popover>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button> <el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button>
@ -48,40 +43,15 @@
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="Name" prop="name" sortable />
label="Name" <el-table-column label="Port" prop="port" sortable />
prop="name" <el-table-column label="Connections" prop="conns" sortable />
sortable> <el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
</el-table-column> <el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column <el-table-column label="status" prop="status" sortable>
label="Port"
prop="port"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag> <el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag> <el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -89,25 +59,26 @@
</template> </template>
<script> <script>
import Humanize from 'humanize-plus'; import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue' import Traffic from './Traffic.vue'
import { import { HttpProxy } from '../utils/proxy.js'
HttpProxy
} from '../utils/proxy.js'
export default { export default {
components: {
'my-traffic-chart': Traffic
},
data() { data() {
return { return {
proxies: null, proxies: [],
vhost_http_port: "", vhost_http_port: '',
subdomain_host: "" subdomain_host: ''
} }
}, },
watch: {
$route: 'fetchData'
},
created() { created() {
this.fetchData() this.fetchData()
}, },
watch: {
'$route': 'fetchData'
},
methods: { methods: {
formatTrafficIn(row, column) { formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in) return Humanize.fileSize(row.traffic_in)
@ -119,27 +90,26 @@
fetch('/api/serverinfo', { credentials: 'include' }) fetch('/api/serverinfo', { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
.then(json => {
this.vhost_http_port = json.vhost_http_port this.vhost_http_port = json.vhost_http_port
this.subdomain_host = json.subdomain_host this.subdomain_host = json.subdomain_host
if (this.vhost_http_port == null || this.vhost_http_port == 0) { if (this.vhost_http_port == null || this.vhost_http_port === 0) {
return return
} else { } else {
fetch('/api/proxy/http', { credentials: 'include' }) fetch('/api/proxy/http', { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
this.proxies = new Array() .then(json => {
for (let proxyStats of json.proxies) { this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new HttpProxy(proxyStats, this.vhost_http_port, this.subdomain_host)) this.proxies.push(new HttpProxy(proxyStats, this.vhost_http_port, this.subdomain_host))
} }
}) })
} }
}) })
} }
},
components: {
'my-traffic-chart': Traffic
} }
} }
</script> </script>

83
web/frps/src/components/ProxiesHttps.vue
View File

@ -3,13 +3,8 @@
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%"> <el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-popover <el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
ref="popover4" <my-traffic-chart :proxy-name="props.row.name" />
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover> </el-popover>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button> <el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button>
@ -42,67 +37,42 @@
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="Name" prop="name" sortable />
label="Name" <el-table-column label="Port" prop="port" sortable />
prop="name" <el-table-column label="Connections" prop="conns" sortable />
sortable> <el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
</el-table-column> <el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column <el-table-column label="status" prop="status" sortable>
label="Port"
prop="port"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag> <el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag> <el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</template> </template>
<script> <script>
import Humanize from 'humanize-plus'; import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue' import Traffic from './Traffic.vue'
import { import { HttpsProxy } from '../utils/proxy.js'
HttpsProxy
} from '../utils/proxy.js'
export default { export default {
components: {
'my-traffic-chart': Traffic
},
data() { data() {
return { return {
proxies: null, proxies: [],
vhost_https_port: '', vhost_https_port: '',
subdomain_host: '' subdomain_host: ''
} }
}, },
watch: {
$route: 'fetchData'
},
created() { created() {
this.fetchData() this.fetchData()
}, },
watch: {
'$route': 'fetchData'
},
methods: { methods: {
formatTrafficIn(row, column) { formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in) return Humanize.fileSize(row.traffic_in)
@ -114,27 +84,26 @@
fetch('/api/serverinfo', { credentials: 'include' }) fetch('/api/serverinfo', { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
.then(json => {
this.vhost_https_port = json.vhost_https_port this.vhost_https_port = json.vhost_https_port
this.subdomain_host = json.subdomain_host this.subdomain_host = json.subdomain_host
if (this.vhost_https_port == null || this.vhost_https_port == 0) { if (this.vhost_https_port == null || this.vhost_https_port === 0) {
return return
} else { } else {
fetch('/api/proxy/https', { credentials: 'include' }) fetch('/api/proxy/https', { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
this.proxies = new Array() .then(json => {
for (let proxyStats of json.proxies) { this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new HttpsProxy(proxyStats, this.vhost_https_port, this.subdomain_host)) this.proxies.push(new HttpsProxy(proxyStats, this.vhost_https_port, this.subdomain_host))
} }
}) })
} }
}) })
} }
},
components: {
'my-traffic-chart': Traffic
} }
} }
</script> </script>

69
web/frps/src/components/ProxiesStcp.vue
View File

@ -3,16 +3,13 @@
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%"> <el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-popover <el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
ref="popover4" <my-traffic-chart :proxy-name="props.row.name" />
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover> </el-popover>
<el-button v-popover:popover4 type="primary" size="small" icon="view" :name="props.row.name" style="margin-bottom:10px" @click="fetchData2">Traffic Statistics</el-button> <el-button v-popover:popover4 type="primary" size="small" icon="view" :name="props.row.name" style="margin-bottom: 10px" @click="fetchData2">
Traffic Statistics
</el-button>
<el-form label-position="left" inline class="demo-table-expand"> <el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="Name"> <el-form-item label="Name">
@ -36,35 +33,14 @@
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="Name" prop="name" sortable />
label="Name" <el-table-column label="Connections" prop="conns" sortable />
prop="name" <el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
sortable> <el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
</el-table-column> <el-table-column label="status" prop="status" sortable>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag> <el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag> <el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -76,17 +52,20 @@
import Traffic from './Traffic.vue' import Traffic from './Traffic.vue'
import { StcpProxy } from '../utils/proxy.js' import { StcpProxy } from '../utils/proxy.js'
export default { export default {
components: {
'my-traffic-chart': Traffic
},
data() { data() {
return { return {
proxies: null proxies: []
} }
}, },
watch: {
$route: 'fetchData'
},
created() { created() {
this.fetchData() this.fetchData()
}, },
watch: {
'$route': 'fetchData'
},
methods: { methods: {
formatTrafficIn(row, column) { formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in) return Humanize.fileSize(row.traffic_in)
@ -98,16 +77,14 @@
fetch('/api/proxy/stcp', { credentials: 'include' }) fetch('/api/proxy/stcp', { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
this.proxies = new Array() .then(json => {
for (let proxyStats of json.proxies) { this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new StcpProxy(proxyStats)) this.proxies.push(new StcpProxy(proxyStats))
} }
}) })
} }
},
components: {
'my-traffic-chart': Traffic
} }
} }
</script> </script>

75
web/frps/src/components/ProxiesTcp.vue
View File

@ -3,16 +3,13 @@
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%"> <el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-popover <el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
ref="popover4" <my-traffic-chart :proxy-name="props.row.name" />
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover> </el-popover>
<el-button v-popover:popover4 type="primary" size="small" icon="view" :name="props.row.name" style="margin-bottom:10px" @click="fetchData2">Traffic Statistics</el-button> <el-button v-popover:popover4 type="primary" size="small" icon="view" :name="props.row.name" style="margin-bottom: 10px" @click="fetchData2">
Traffic Statistics
</el-button>
<el-form label-position="left" inline class="demo-table-expand"> <el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="Name"> <el-form-item label="Name">
@ -39,40 +36,15 @@
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="Name" prop="name" sortable />
label="Name" <el-table-column label="Port" prop="port" sortable />
prop="name" <el-table-column label="Connections" prop="conns" sortable />
sortable> <el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
</el-table-column> <el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column <el-table-column label="status" prop="status" sortable>
label="Port"
prop="port"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag> <el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag> <el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -84,17 +56,20 @@
import Traffic from './Traffic.vue' import Traffic from './Traffic.vue'
import { TcpProxy } from '../utils/proxy.js' import { TcpProxy } from '../utils/proxy.js'
export default { export default {
components: {
'my-traffic-chart': Traffic
},
data() { data() {
return { return {
proxies: null proxies: []
} }
}, },
watch: {
$route: 'fetchData'
},
created() { created() {
this.fetchData() this.fetchData()
}, },
watch: {
'$route': 'fetchData'
},
methods: { methods: {
formatTrafficIn(row, column) { formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in) return Humanize.fileSize(row.traffic_in)
@ -106,16 +81,14 @@
fetch('/api/proxy/tcp', { credentials: 'include' }) fetch('/api/proxy/tcp', { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
this.proxies = new Array() .then(json => {
for (let proxyStats of json.proxies) { this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new TcpProxy(proxyStats)) this.proxies.push(new TcpProxy(proxyStats))
} }
}) })
} }
},
components: {
'my-traffic-chart': Traffic
} }
} }
</script> </script>

77
web/frps/src/components/ProxiesUdp.vue
View File

@ -3,13 +3,8 @@
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%"> <el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-popover <el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
ref="popover4" <my-traffic-chart :proxy-name="props.row.name" />
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover> </el-popover>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button> <el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button>
@ -39,40 +34,15 @@
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="Name" prop="name" sortable />
label="Name" <el-table-column label="Port" prop="port" sortable />
prop="name" <el-table-column label="Connections" prop="conns" sortable />
sortable> <el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
</el-table-column> <el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column <el-table-column label="status" prop="status" sortable>
label="Port"
prop="port"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag> <el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag> <el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -80,23 +50,24 @@
</template> </template>
<script> <script>
import Humanize from 'humanize-plus'; import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue' import Traffic from './Traffic.vue'
import { import { UdpProxy } from '../utils/proxy.js'
UdpProxy
} from '../utils/proxy.js'
export default { export default {
components: {
'my-traffic-chart': Traffic
},
data() { data() {
return { return {
proxies: null proxies: []
} }
}, },
watch: {
$route: 'fetchData'
},
created() { created() {
this.fetchData() this.fetchData()
}, },
watch: {
'$route': 'fetchData'
},
methods: { methods: {
formatTrafficIn(row, column) { formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in) return Humanize.fileSize(row.traffic_in)
@ -108,16 +79,14 @@
fetch('/api/proxy/udp', { credentials: 'include' }) fetch('/api/proxy/udp', { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
this.proxies = new Array() .then(json => {
for (let proxyStats of json.proxies) { this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new UdpProxy(proxyStats)) this.proxies.push(new UdpProxy(proxyStats))
} }
}) })
} }
},
components: {
'my-traffic-chart': Traffic
} }
} }
</script> </script>

19
web/frps/src/components/Traffic.vue
View File

@ -1,11 +1,16 @@
<template> <template>
<div :id="proxy_name" style="width: 600px;height:400px;"></div> <div :id="proxyName" style="width: 600px; height: 400px" />
</template> </template>
<script> <script>
import { DrawProxyTrafficChart } from '../utils/chart.js' import { DrawProxyTrafficChart } from '../utils/chart.js'
export default { export default {
props: ['proxy_name'], props: {
proxyName: {
type: String,
required: true
}
},
created() { created() {
this.fetchData() this.fetchData()
}, },
@ -14,13 +19,15 @@ export default {
// }, // },
methods: { methods: {
fetchData() { fetchData() {
let url = '/api/traffic/' + this.proxy_name const url = '/api/traffic/' + this.proxyName
fetch(url, { credentials: 'include' }) fetch(url, { credentials: 'include' })
.then(res => { .then(res => {
return res.json() return res.json()
}).then(json => { })
DrawProxyTrafficChart(this.proxy_name, json.traffic_in, json.traffic_out) .then(json => {
}).catch( err => { DrawProxyTrafficChart(this.proxyName, json.traffic_in, json.traffic_out)
})
.catch(err => {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Get server info from frps failed!' + err, message: 'Get server info from frps failed!' + err,

15
web/frps/src/index.html
View File

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>frps dashboard</title>
</head>
<body>
<div id="app"></div>
<!--<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>-->
<!--<script src="//cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>-->
</body>
</html>

21
web/frps/src/main.js
View File

@ -1,19 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
// import ElementUI from 'element-ui' // import ElementUI from 'element-ui'
import { import { Button, Form, FormItem, Row, Col, Table, TableColumn, Popover, Menu, Submenu, MenuItem, Tag } from 'element-ui'
Button,
Form,
FormItem,
Row,
Col,
Table,
TableColumn,
Popover,
Menu,
Submenu,
MenuItem,
Tag
} from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en' import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale' import locale from 'element-ui/lib/locale'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
@ -41,8 +28,6 @@ Vue.use(Tag)
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
el: '#app',
router, router,
template: '<App/>', render: h => h(App)
components: { App } }).$mount('#app')
})

21
web/frps/src/router/index.js
View File

@ -10,29 +10,36 @@ import ProxiesStcp from '../components/ProxiesStcp.vue'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [{ routes: [
{
path: '/', path: '/',
name: 'Overview', name: 'Overview',
component: Overview component: Overview
}, { },
{
path: '/proxies/tcp', path: '/proxies/tcp',
name: 'ProxiesTcp', name: 'ProxiesTcp',
component: ProxiesTcp component: ProxiesTcp
}, { },
{
path: '/proxies/udp', path: '/proxies/udp',
name: 'ProxiesUdp', name: 'ProxiesUdp',
component: ProxiesUdp component: ProxiesUdp
}, { },
{
path: '/proxies/http', path: '/proxies/http',
name: 'ProxiesHttp', name: 'ProxiesHttp',
component: ProxiesHttp component: ProxiesHttp
}, { },
{
path: '/proxies/https', path: '/proxies/https',
name: 'ProxiesHttps', name: 'ProxiesHttps',
component: ProxiesHttps component: ProxiesHttps
}, { },
{
path: '/proxies/stcp', path: '/proxies/stcp',
name: 'ProxiesStcp', name: 'ProxiesStcp',
component: ProxiesStcp component: ProxiesStcp
}] }
]
}) })

120
web/frps/src/utils/chart.js
View File

@ -1,17 +1,17 @@
import Humanize from "humanize-plus" import Humanize from 'humanize-plus'
import echarts from "echarts/lib/echarts" import echarts from 'echarts/lib/echarts'
import "echarts/theme/macarons" import 'echarts/theme/macarons'
import "echarts/lib/chart/bar" import 'echarts/lib/chart/bar'
import "echarts/lib/chart/pie" import 'echarts/lib/chart/pie'
import "echarts/lib/component/tooltip" import 'echarts/lib/component/tooltip'
import "echarts/lib/component/title" import 'echarts/lib/component/title'
function DrawTrafficChart(elementId, trafficIn, trafficOut) { function DrawTrafficChart(elementId, trafficIn, trafficOut) {
let myChart = echarts.init(document.getElementById(elementId), 'macarons'); const myChart = echarts.init(document.getElementById(elementId), 'macarons')
myChart.showLoading() myChart.showLoading()
let option = { const option = {
title: { title: {
text: 'Network Traffic', text: 'Network Traffic',
subtext: 'today', subtext: 'today',
@ -20,20 +20,24 @@ function DrawTrafficChart(elementId, trafficIn, trafficOut) {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: function(v) { formatter: function(v) {
return Humanize.fileSize(v.data.value) + " (" + v.percent + "%)" return Humanize.fileSize(v.data.value) + ' (' + v.percent + '%)'
} }
}, },
series: [{ series: [
{
type: 'pie', type: 'pie',
radius: '55%', radius: '55%',
center: ['50%', '60%'], center: ['50%', '60%'],
data: [{ data: [
{
value: trafficIn, value: trafficIn,
name: 'Traffic In' name: 'Traffic In'
}, { },
{
value: trafficOut, value: trafficOut,
name: 'Traffic Out' name: 'Traffic Out'
}, ], }
],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
@ -41,9 +45,10 @@ function DrawTrafficChart(elementId, trafficIn, trafficOut) {
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
} }
} }
}] }
}; ]
myChart.setOption(option); }
myChart.setOption(option)
myChart.hideLoading() myChart.hideLoading()
} }
@ -66,10 +71,10 @@ function DrawProxyChart(elementId, serverInfo) {
if (serverInfo.proxy_type_count.xtcp == null) { if (serverInfo.proxy_type_count.xtcp == null) {
serverInfo.proxy_type_count.xtcp = 0 serverInfo.proxy_type_count.xtcp = 0
} }
let myChart = echarts.init(document.getElementById(elementId), 'macarons') const myChart = echarts.init(document.getElementById(elementId), 'macarons')
myChart.showLoading() myChart.showLoading()
let option = { const option = {
title: { title: {
text: 'Proxies', text: 'Proxies',
subtext: 'now', subtext: 'now',
@ -81,29 +86,37 @@ function DrawProxyChart(elementId, serverInfo) {
return v.data.value return v.data.value
} }
}, },
series: [{ series: [
{
type: 'pie', type: 'pie',
radius: '55%', radius: '55%',
center: ['50%', '60%'], center: ['50%', '60%'],
data: [{ data: [
{
value: serverInfo.proxy_type_count.tcp, value: serverInfo.proxy_type_count.tcp,
name: 'TCP' name: 'TCP'
}, { },
{
value: serverInfo.proxy_type_count.udp, value: serverInfo.proxy_type_count.udp,
name: 'UDP' name: 'UDP'
}, { },
{
value: serverInfo.proxy_type_count.http, value: serverInfo.proxy_type_count.http,
name: 'HTTP' name: 'HTTP'
}, { },
{
value: serverInfo.proxy_type_count.https, value: serverInfo.proxy_type_count.https,
name: 'HTTPS' name: 'HTTPS'
}, { },
{
value: serverInfo.proxy_type_count.stcp, value: serverInfo.proxy_type_count.stcp,
name: 'STCP' name: 'STCP'
}, { },
{
value: serverInfo.proxy_type_count.xtcp, value: serverInfo.proxy_type_count.xtcp,
name: 'XTCP' name: 'XTCP'
}], }
],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
@ -111,33 +124,34 @@ function DrawProxyChart(elementId, serverInfo) {
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
} }
} }
}] }
}; ]
myChart.setOption(option); }
myChart.setOption(option)
myChart.hideLoading() myChart.hideLoading()
} }
// 7 days // 7 days
function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) { function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) {
let params = { const params = {
width: '600px', width: '600px',
height: '400px' height: '400px'
} }
let myChart = echarts.init(document.getElementById(elementId), 'macarons', params); const myChart = echarts.init(document.getElementById(elementId), 'macarons', params)
myChart.showLoading() myChart.showLoading()
trafficInArr = trafficInArr.reverse() trafficInArr = trafficInArr.reverse()
trafficOutArr = trafficOutArr.reverse() trafficOutArr = trafficOutArr.reverse()
let now = new Date() let now = new Date()
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6) now = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6)
let dates = new Array() const dates = []
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
dates.push(now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()) dates.push(now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate())
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1) now = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
} }
let option = { const option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -148,9 +162,9 @@ function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) {
if (data.length > 0) { if (data.length > 0) {
html += data[0].name + '<br/>' html += data[0].name + '<br/>'
} }
for (let v of data) { for (const v of data) {
let colorEl = '<span style="display:inline-block;margin-right:5px;' + const colorEl =
'border-radius:10px;width:9px;height:9px;background-color:' + v.color + '"></span>'; '<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:' + v.color + '"></span>'
html += colorEl + v.seriesName + ': ' + Humanize.fileSize(v.value) + '<br/>' html += colorEl + v.seriesName + ': ' + Humanize.fileSize(v.value) + '<br/>'
} }
return html return html
@ -165,35 +179,37 @@ function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) {
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: [{ xAxis: [
{
type: 'category', type: 'category',
data: dates data: dates
}], }
yAxis: [{ ],
yAxis: [
{
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: function(value) { formatter: function(value) {
return Humanize.fileSize(value) return Humanize.fileSize(value)
} }
} }
}], }
series: [{ ],
series: [
{
name: 'Traffic In', name: 'Traffic In',
type: 'bar', type: 'bar',
data: trafficInArr data: trafficInArr
}, { },
{
name: 'Traffic Out', name: 'Traffic Out',
type: 'bar', type: 'bar',
data: trafficOutArr data: trafficOutArr
}] }
}; ]
myChart.setOption(option); }
myChart.setOption(option)
myChart.hideLoading() myChart.hideLoading()
} }
export { export { DrawTrafficChart, DrawProxyChart, DrawProxyTrafficChart }
DrawTrafficChart,
DrawProxyChart,
DrawProxyTrafficChart
}

50
web/frps/src/utils/proxy.js
View File

@ -5,8 +5,8 @@ class BaseProxy {
this.encryption = proxyStats.conf.use_encryption this.encryption = proxyStats.conf.use_encryption
this.compression = proxyStats.conf.use_compression this.compression = proxyStats.conf.use_compression
} else { } else {
this.encryption = "" this.encryption = ''
this.compression = "" this.compression = ''
} }
this.conns = proxyStats.cur_conns this.conns = proxyStats.cur_conns
this.traffic_in = proxyStats.today_traffic_in this.traffic_in = proxyStats.today_traffic_in
@ -20,13 +20,13 @@ class BaseProxy {
class TcpProxy extends BaseProxy { class TcpProxy extends BaseProxy {
constructor(proxyStats) { constructor(proxyStats) {
super(proxyStats) super(proxyStats)
this.type = "tcp" this.type = 'tcp'
if (proxyStats.conf != null) { if (proxyStats.conf != null) {
this.addr = ":" + proxyStats.conf.remote_port this.addr = ':' + proxyStats.conf.remote_port
this.port = proxyStats.conf.remote_port this.port = proxyStats.conf.remote_port
} else { } else {
this.addr = "" this.addr = ''
this.port = "" this.port = ''
} }
} }
} }
@ -34,13 +34,13 @@ class TcpProxy extends BaseProxy {
class UdpProxy extends BaseProxy { class UdpProxy extends BaseProxy {
constructor(proxyStats) { constructor(proxyStats) {
super(proxyStats) super(proxyStats)
this.type = "udp" this.type = 'udp'
if (proxyStats.conf != null) { if (proxyStats.conf != null) {
this.addr = ":" + proxyStats.conf.remote_port this.addr = ':' + proxyStats.conf.remote_port
this.port = proxyStats.conf.remote_port this.port = proxyStats.conf.remote_port
} else { } else {
this.addr = "" this.addr = ''
this.port = "" this.port = ''
} }
} }
} }
@ -48,22 +48,22 @@ class UdpProxy extends BaseProxy {
class HttpProxy extends BaseProxy { class HttpProxy extends BaseProxy {
constructor(proxyStats, port, subdomain_host) { constructor(proxyStats, port, subdomain_host) {
super(proxyStats) super(proxyStats)
this.type = "http" this.type = 'http'
this.port = port this.port = port
if (proxyStats.conf != null) { if (proxyStats.conf != null) {
this.custom_domains = proxyStats.conf.custom_domains this.custom_domains = proxyStats.conf.custom_domains
this.host_header_rewrite = proxyStats.conf.host_header_rewrite this.host_header_rewrite = proxyStats.conf.host_header_rewrite
this.locations = proxyStats.conf.locations this.locations = proxyStats.conf.locations
if (proxyStats.conf.sub_domain != "") { if (proxyStats.conf.sub_domain !== '') {
this.subdomain = proxyStats.conf.sub_domain + "." + subdomain_host this.subdomain = proxyStats.conf.sub_domain + '.' + subdomain_host
} else { } else {
this.subdomain = "" this.subdomain = ''
} }
} else { } else {
this.custom_domains = "" this.custom_domains = ''
this.host_header_rewrite = "" this.host_header_rewrite = ''
this.subdomain = "" this.subdomain = ''
this.locations = "" this.locations = ''
} }
} }
} }
@ -71,18 +71,18 @@ class HttpProxy extends BaseProxy {
class HttpsProxy extends BaseProxy { class HttpsProxy extends BaseProxy {
constructor(proxyStats, port, subdomain_host) { constructor(proxyStats, port, subdomain_host) {
super(proxyStats) super(proxyStats)
this.type = "https" this.type = 'https'
this.port = port this.port = port
if (proxyStats.conf != null) { if (proxyStats.conf != null) {
this.custom_domains = proxyStats.conf.custom_domains this.custom_domains = proxyStats.conf.custom_domains
if (proxyStats.conf.sub_domain != "") { if (proxyStats.conf.sub_domain !== '') {
this.subdomain = proxyStats.conf.sub_domain + "." + subdomain_host this.subdomain = proxyStats.conf.sub_domain + '.' + subdomain_host
} else { } else {
this.subdomain = "" this.subdomain = ''
} }
} else { } else {
this.custom_domains = "" this.custom_domains = ''
this.subdomain = "" this.subdomain = ''
} }
} }
} }
@ -90,7 +90,7 @@ class HttpsProxy extends BaseProxy {
class StcpProxy extends BaseProxy { class StcpProxy extends BaseProxy {
constructor(proxyStats) { constructor(proxyStats) {
super(proxyStats) super(proxyStats)
this.type = "stcp" this.type = 'stcp'
} }
} }

16
web/frps/vue.config.js Normal file
View File

@ -0,0 +1,16 @@
module.exports = {
publicPath: './',
devServer: {
host: '127.0.0.1',
port: 8010,
proxy: {
'/api/': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}

107
web/frps/webpack.config.js
View File

@ -1,107 +0,0 @@
const path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var VueLoaderPlugin = require('vue-loader/lib/plugin')
var url = require('url')
var publicPath = ''
module.exports = (options = {}) => ({
entry: {
vendor: './src/main'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: '[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'src'),
}
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
}, {
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
root: path.resolve(__dirname, 'src'),
attrs: ['img:src', 'link:href']
}
}]
}, {
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader'
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}, {
test: /favicon\.png$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
}, {
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
exclude: /favicon\.png$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
}]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new HtmlWebpackPlugin({
favicon: 'src/assets/favicon.ico',
template: 'src/index.html'
}),
new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
comments: false,
compress: {
warnings: false
}
}),
new VueLoaderPlugin()
],
devServer: {
host: '127.0.0.1',
port: 8010,
proxy: {
'/api/': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
historyApiFallback: {
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
}
}//,
//devtool: options.dev ? '#eval-source-map' : '#source-map'
})

9207
web/frps/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff