Delete web directory
This commit is contained in:
65658dsf
GitHub
parent
2855ac71e3
commit
109bcdf763
@ -1,30 +0,0 @@
|
||||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript',
|
||||
'@vue/eslint-config-prettier',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'warn',
|
||||
{
|
||||
argsIgnorePattern: '^_',
|
||||
varsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'vue/multi-word-component-names': [
|
||||
'error',
|
||||
{
|
||||
ignores: ['Overview'],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
28
web/frpc/.gitignore
vendored
28
web/frpc/.gitignore
vendored
@ -1,28 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
.PHONY: dist build preview lint
|
||||
|
||||
build:
|
||||
@npm run build
|
||||
|
||||
dev:
|
||||
@npm run dev
|
||||
|
||||
preview:
|
||||
@npm run preview
|
||||
|
||||
lint:
|
||||
@npm run lint
|
||||
@ -1,25 +0,0 @@
|
||||
# frpc-dashboard
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
make dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
make build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
make lint
|
||||
```
|
||||
9
web/frpc/auto-imports.d.ts
vendored
9
web/frpc/auto-imports.d.ts
vendored
@ -1,9 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
|
||||
}
|
||||
24
web/frpc/components.d.ts
vendored
24
web/frpc/components.d.ts
vendored
@ -1,24 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
ClientConfigure: typeof import('./src/components/ClientConfigure.vue')['default']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
Overview: typeof import('./src/components/Overview.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
}
|
||||
1
web/frpc/env.d.ts
vendored
1
web/frpc/env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>frp client admin UI</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "frpc-dashboard",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check build-only",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --noEmit",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-plus": "^2.5.3",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.7.2",
|
||||
"@types/node": "^18.11.12",
|
||||
"@vitejs/plugin-vue": "^5.0.3",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-vue": "^9.21.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^3.2.4",
|
||||
"typescript": "~5.3.3",
|
||||
"unplugin-auto-import": "^0.17.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.0.12",
|
||||
"vue-tsc": "^1.8.27"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<header class="grid-content header-color">
|
||||
<div class="header-content">
|
||||
<div class="brand">
|
||||
<a href="#">frp client</a>
|
||||
</div>
|
||||
<div class="dark-switch">
|
||||
<el-switch
|
||||
v-model="darkmodeSwitch"
|
||||
inline-prompt
|
||||
active-text="Dark"
|
||||
inactive-text="Light"
|
||||
@change="toggleDark"
|
||||
style="
|
||||
--el-switch-on-color: #444452;
|
||||
--el-switch-off-color: #589ef8;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<el-row>
|
||||
<el-col id="side-nav" :xs="24" :md="4">
|
||||
<el-menu
|
||||
default-active="1"
|
||||
mode="vertical"
|
||||
theme="light"
|
||||
router="false"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="/">Overview</el-menu-item>
|
||||
<el-menu-item index="/configure">Configure</el-menu-item>
|
||||
<el-menu-item index="">Help</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :md="20">
|
||||
<div id="content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section>
|
||||
<footer></footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
const isDark = useDark()
|
||||
const darkmodeSwitch = ref(isDark)
|
||||
const toggleDark = useToggle(isDark)
|
||||
|
||||
const handleSelect = (key: string) => {
|
||||
if (key == '') {
|
||||
window.open('https://github.com/fatedier/frp')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.header-color {
|
||||
background: #58b7ff;
|
||||
}
|
||||
|
||||
html.dark .header-color {
|
||||
background: #395c74;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-top: 20px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.brand a {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
margin-left: 20px;
|
||||
line-height: 25px;
|
||||
font-size: 25px;
|
||||
padding: 15px 15px;
|
||||
height: 30px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dark-switch {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 1;
|
||||
padding-right: 40px;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
html.dark {
|
||||
--el-bg-color: #343432;
|
||||
--el-fill-color-blank: #343432;
|
||||
background-color: #343432;
|
||||
}
|
||||
@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row id="head">
|
||||
<el-button type="primary" @click="fetchData">Refresh</el-button>
|
||||
<el-button type="primary" @click="uploadConfig">Upload</el-button>
|
||||
</el-row>
|
||||
<el-input
|
||||
type="textarea"
|
||||
autosize
|
||||
v-model="textarea"
|
||||
placeholder="frpc configrue file, can not be empty..."
|
||||
></el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
let textarea = ref('')
|
||||
|
||||
const fetchData = () => {
|
||||
fetch('/api/config', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.text()
|
||||
})
|
||||
.then((text) => {
|
||||
textarea.value = text
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: 'Get configure content from frpc failed!',
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const uploadConfig = () => {
|
||||
ElMessageBox.confirm(
|
||||
'This operation will upload your frpc configure file content and hot reload it, do you want to continue?',
|
||||
'Notice',
|
||||
{
|
||||
confirmButtonText: 'Yes',
|
||||
cancelButtonText: 'No',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
if (textarea.value == '') {
|
||||
ElMessage({
|
||||
message: 'Configure content can not be empty!',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
fetch('/api/config', {
|
||||
credentials: 'include',
|
||||
method: 'PUT',
|
||||
body: textarea.value,
|
||||
})
|
||||
.then(() => {
|
||||
fetch('/api/reload', { credentials: 'include' })
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: 'Success',
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: 'Reload frpc configure file error, ' + err,
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: 'Put config to frpc and hot reload failed!',
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: 'Canceled',
|
||||
type: 'info',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#head {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :md="24">
|
||||
<div>
|
||||
<el-table
|
||||
:data="status"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
:default-sort="{ prop: 'type', order: 'ascending' }"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="name"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="type"
|
||||
width="150"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="local_addr"
|
||||
label="local address"
|
||||
width="200"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="plugin"
|
||||
label="plugin"
|
||||
width="200"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="remote_addr"
|
||||
label="remote address"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="status"
|
||||
width="150"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column prop="err" label="info"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
let status = ref<any[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
fetch('/api/status', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
status.value = new Array()
|
||||
for (let key in json) {
|
||||
for (let ps of json[key]) {
|
||||
console.log(ps)
|
||||
status.value.push(ps)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: 'Get status info from frpc failed!' + err,
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,13 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import './assets/dark.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
@ -1,21 +0,0 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import Overview from '../components/Overview.vue'
|
||||
import ClientConfigure from '../components/ClientConfigure.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Overview',
|
||||
component: Overview,
|
||||
},
|
||||
{
|
||||
path: '/configure',
|
||||
name: 'ClientConfigure',
|
||||
component: ClientConfigure,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: '',
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
assetsDir: '',
|
||||
},
|
||||
})
|
||||
2603
web/frpc/yarn.lock
2603
web/frpc/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -1,30 +0,0 @@
|
||||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript',
|
||||
'@vue/eslint-config-prettier',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'warn',
|
||||
{
|
||||
argsIgnorePattern: '^_',
|
||||
varsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'vue/multi-word-component-names': [
|
||||
'error',
|
||||
{
|
||||
ignores: ['Traffic'],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
28
web/frps/.gitignore
vendored
28
web/frps/.gitignore
vendored
@ -1,28 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
.PHONY: dist build preview lint
|
||||
|
||||
build:
|
||||
@npm run build
|
||||
|
||||
dev:
|
||||
@npm run dev
|
||||
|
||||
preview:
|
||||
@npm run preview
|
||||
|
||||
lint:
|
||||
@npm run lint
|
||||
@ -1,25 +0,0 @@
|
||||
# frps-dashboard
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
make dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
make build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
make lint
|
||||
```
|
||||
9
web/frps/auto-imports.d.ts
vendored
9
web/frps/auto-imports.d.ts
vendored
@ -1,9 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
|
||||
}
|
||||
43
web/frps/components.d.ts
vendored
43
web/frps/components.d.ts
vendored
@ -1,43 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElText: typeof import('element-plus/es')['ElText']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
LongSpan: typeof import('./src/components/LongSpan.vue')['default']
|
||||
ProxiesHTTP: typeof import('./src/components/ProxiesHTTP.vue')['default']
|
||||
ProxiesHTTPS: typeof import('./src/components/ProxiesHTTPS.vue')['default']
|
||||
ProxiesSTCP: typeof import('./src/components/ProxiesSTCP.vue')['default']
|
||||
ProxiesSUDP: typeof import('./src/components/ProxiesSUDP.vue')['default']
|
||||
ProxiesTCP: typeof import('./src/components/ProxiesTCP.vue')['default']
|
||||
ProxiesTCPMux: typeof import('./src/components/ProxiesTCPMux.vue')['default']
|
||||
ProxiesUDP: typeof import('./src/components/ProxiesUDP.vue')['default']
|
||||
ProxyView: typeof import('./src/components/ProxyView.vue')['default']
|
||||
ProxyViewExpand: typeof import('./src/components/ProxyViewExpand.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
ServerOverview: typeof import('./src/components/ServerOverview.vue')['default']
|
||||
Traffic: typeof import('./src/components/Traffic.vue')['default']
|
||||
}
|
||||
}
|
||||
1
web/frps/env.d.ts
vendored
1
web/frps/env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>frps dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
{
|
||||
"name": "frps-dashboard",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check build-only",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --noEmit",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/humanize-plus": "^1.8.0",
|
||||
"echarts": "^5.4.3",
|
||||
"element-plus": "^2.5.3",
|
||||
"humanize-plus": "^1.8.2",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.7.2",
|
||||
"@types/node": "^18.11.12",
|
||||
"@vitejs/plugin-vue": "^5.0.3",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-vue": "^9.21.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^3.2.4",
|
||||
"typescript": "~5.3.3",
|
||||
"unplugin-auto-import": "^0.17.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.0.12",
|
||||
"vue-tsc": "^1.8.27"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<header class="grid-content header-color">
|
||||
<div class="header-content">
|
||||
<div class="brand">
|
||||
<a href="#">frp</a>
|
||||
</div>
|
||||
<div class="dark-switch">
|
||||
<el-switch
|
||||
v-model="darkmodeSwitch"
|
||||
inline-prompt
|
||||
active-text="Dark"
|
||||
inactive-text="Light"
|
||||
@change="toggleDark"
|
||||
style="
|
||||
--el-switch-on-color: #444452;
|
||||
--el-switch-off-color: #589ef8;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<el-row>
|
||||
<el-col id="side-nav" :xs="24" :md="4">
|
||||
<el-menu
|
||||
default-active="/"
|
||||
mode="vertical"
|
||||
theme="light"
|
||||
router="false"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="/">Overview</el-menu-item>
|
||||
<el-sub-menu index="/proxies">
|
||||
<template #title>
|
||||
<span>Proxies</span>
|
||||
</template>
|
||||
<el-menu-item index="/proxies/tcp">TCP</el-menu-item>
|
||||
<el-menu-item index="/proxies/udp">UDP</el-menu-item>
|
||||
<el-menu-item index="/proxies/http">HTTP</el-menu-item>
|
||||
<el-menu-item index="/proxies/https">HTTPS</el-menu-item>
|
||||
<el-menu-item index="/proxies/tcpmux">TCPMUX</el-menu-item>
|
||||
<el-menu-item index="/proxies/stcp">STCP</el-menu-item>
|
||||
<el-menu-item index="/proxies/sudp">SUDP</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-menu-item index="">Help</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :md="20">
|
||||
<div id="content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section>
|
||||
<footer></footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
const isDark = useDark()
|
||||
const darkmodeSwitch = ref(isDark)
|
||||
const toggleDark = useToggle(isDark)
|
||||
|
||||
const handleSelect = (key: string) => {
|
||||
if (key == '') {
|
||||
window.open('https://github.com/fatedier/frp')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.header-color {
|
||||
background: #58b7ff;
|
||||
}
|
||||
|
||||
html.dark .header-color {
|
||||
background: #395c74;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-top: 20px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.brand a {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
margin-left: 20px;
|
||||
line-height: 25px;
|
||||
font-size: 25px;
|
||||
padding: 15px 15px;
|
||||
height: 30px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dark-switch {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 1;
|
||||
padding-right: 40px;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +0,0 @@
|
||||
.el-form-item span {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.proxy-table-expand {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.proxy-table-expand .el-form-item__label{
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
.proxy-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.el-table .el-table__expanded-cell {
|
||||
padding: 20px 50px;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
html.dark {
|
||||
--el-bg-color: #343432;
|
||||
--el-fill-color-blank: #343432;
|
||||
background-color: #343432;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<el-tooltip :content="content" placement="top">
|
||||
<span v-show="content.length > length"
|
||||
>{{ content.slice(0, length) }}...</span
|
||||
>
|
||||
</el-tooltip>
|
||||
<span v-show="content.length < 30">{{ content }}</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
content: string
|
||||
length: number
|
||||
}>()
|
||||
</script>
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<ProxyView :proxies="proxies" proxyType="http" @refresh="fetchData"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { HTTPProxy } from '../utils/proxy.js'
|
||||
import ProxyView from './ProxyView.vue'
|
||||
|
||||
let proxies = ref<HTTPProxy[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
let vhostHTTPPort: number
|
||||
let subdomainHost: string
|
||||
fetch('../api/serverinfo', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
vhostHTTPPort = json.vhostHTTPPort
|
||||
subdomainHost = json.subdomainHost
|
||||
if (vhostHTTPPort == null || vhostHTTPPort == 0) {
|
||||
return
|
||||
}
|
||||
fetch('../api/proxy/http', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
proxies.value = []
|
||||
for (let proxyStats of json.proxies) {
|
||||
proxies.value.push(
|
||||
new HTTPProxy(proxyStats, vhostHTTPPort, subdomainHost)
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<ProxyView :proxies="proxies" proxyType="https" @refresh="fetchData"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { HTTPSProxy } from '../utils/proxy.js'
|
||||
import ProxyView from './ProxyView.vue'
|
||||
|
||||
let proxies = ref<HTTPSProxy[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
let vhostHTTPSPort: number
|
||||
let subdomainHost: string
|
||||
fetch('../api/serverinfo', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
vhostHTTPSPort = json.vhostHTTPSPort
|
||||
subdomainHost = json.subdomainHost
|
||||
if (vhostHTTPSPort == null || vhostHTTPSPort == 0) {
|
||||
return
|
||||
}
|
||||
fetch('../api/proxy/https', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
proxies.value = []
|
||||
for (let proxyStats of json.proxies) {
|
||||
proxies.value.push(
|
||||
new HTTPSProxy(proxyStats, vhostHTTPSPort, subdomainHost)
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<ProxyView :proxies="proxies" proxyType="stcp" @refresh="fetchData"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { STCPProxy } from '../utils/proxy.js'
|
||||
import ProxyView from './ProxyView.vue'
|
||||
|
||||
let proxies = ref<STCPProxy[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
fetch('../api/proxy/stcp', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
proxies.value = []
|
||||
for (let proxyStats of json.proxies) {
|
||||
proxies.value.push(new STCPProxy(proxyStats))
|
||||
}
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<ProxyView :proxies="proxies" proxyType="sudp" @refresh="fetchData"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { SUDPProxy } from '../utils/proxy.js'
|
||||
import ProxyView from './ProxyView.vue'
|
||||
|
||||
let proxies = ref<SUDPProxy[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
fetch('../api/proxy/sudp', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
proxies.value = []
|
||||
for (let proxyStats of json.proxies) {
|
||||
proxies.value.push(new SUDPProxy(proxyStats))
|
||||
}
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<ProxyView :proxies="proxies" proxyType="tcp" @refresh="fetchData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { TCPProxy } from '../utils/proxy.js'
|
||||
import ProxyView from './ProxyView.vue'
|
||||
|
||||
let proxies = ref<TCPProxy[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
fetch('../api/proxy/tcp', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
proxies.value = []
|
||||
for (let proxyStats of json.proxies) {
|
||||
proxies.value.push(new TCPProxy(proxyStats))
|
||||
}
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<ProxyView :proxies="proxies" proxyType="tcpmux" @refresh="fetchData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { TCPMuxProxy } from '../utils/proxy.js'
|
||||
import ProxyView from './ProxyView.vue'
|
||||
|
||||
let proxies = ref<TCPMuxProxy[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
let tcpmuxHTTPConnectPort: number
|
||||
let subdomainHost: string
|
||||
fetch('../api/serverinfo', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
tcpmuxHTTPConnectPort = json.tcpmuxHTTPConnectPort
|
||||
subdomainHost = json.subdomainHost
|
||||
|
||||
fetch('../api/proxy/tcpmux', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
proxies.value = []
|
||||
for (let proxyStats of json.proxies) {
|
||||
proxies.value.push(new TCPMuxProxy(proxyStats, tcpmuxHTTPConnectPort, subdomainHost))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<ProxyView :proxies="proxies" proxyType="udp" @refresh="fetchData"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { UDPProxy } from '../utils/proxy.js'
|
||||
import ProxyView from './ProxyView.vue'
|
||||
|
||||
let proxies = ref<UDPProxy[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
fetch('../api/proxy/udp', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
proxies.value = []
|
||||
for (let proxyStats of json.proxies) {
|
||||
proxies.value.push(new UDPProxy(proxyStats))
|
||||
}
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-page-header
|
||||
:icon="null"
|
||||
style="width: 100%; margin-left: 30px; margin-bottom: 20px"
|
||||
>
|
||||
<template #title>
|
||||
<span>{{ proxyType }}</span>
|
||||
</template>
|
||||
<template #content> </template>
|
||||
<template #extra>
|
||||
<div class="flex items-center" style="margin-right: 30px">
|
||||
<el-popconfirm
|
||||
title="Are you sure to clear all data of offline proxies?"
|
||||
@confirm="clearOfflineProxies"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button>ClearOfflineProxies</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-button @click="$emit('refresh')">Refresh</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-table
|
||||
:data="proxies"
|
||||
:default-sort="{ prop: 'name', order: 'ascending' }"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<ProxyViewExpand :row="props.row" :proxyType="proxyType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Name" prop="name" sortable> </el-table-column>
|
||||
<el-table-column 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="trafficIn"
|
||||
:formatter="formatTrafficIn"
|
||||
sortable
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="Traffic Out"
|
||||
prop="trafficOut"
|
||||
:formatter="formatTrafficOut"
|
||||
sortable
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="ClientVersion" prop="clientVersion" sortable>
|
||||
</el-table-column>
|
||||
<el-table-column label="Status" prop="status" sortable>
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.status === 'online'" type="success">{{
|
||||
scope.row.status
|
||||
}}</el-tag>
|
||||
<el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Operations">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
:name="scope.row.name"
|
||||
style="margin-bottom: 10px"
|
||||
@click="dialogVisibleName = scope.row.name; dialogVisible = true"
|
||||
>Traffic
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
destroy-on-close="true"
|
||||
:title="dialogVisibleName"
|
||||
width="700px">
|
||||
<Traffic :proxyName="dialogVisibleName" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as Humanize from 'humanize-plus'
|
||||
import type { TableColumnCtx } from 'element-plus'
|
||||
import type { BaseProxy } from '../utils/proxy.js'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import ProxyViewExpand from './ProxyViewExpand.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
proxies: BaseProxy[]
|
||||
proxyType: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogVisibleName = ref("")
|
||||
|
||||
const formatTrafficIn = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
|
||||
return Humanize.fileSize(row.trafficIn)
|
||||
}
|
||||
|
||||
const formatTrafficOut = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
|
||||
return Humanize.fileSize(row.trafficOut)
|
||||
}
|
||||
|
||||
const clearOfflineProxies = () => {
|
||||
fetch('../api/proxies?status=offline', {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.ok) {
|
||||
ElMessage({
|
||||
message: 'Successfully cleared offline proxies',
|
||||
type: 'success',
|
||||
})
|
||||
emit('refresh')
|
||||
} else {
|
||||
ElMessage({
|
||||
message: 'Failed to clear offline proxies: ' + res.status + ' ' + res.statusText,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage({
|
||||
message: 'Failed to clear offline proxies: ' + err.message,
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-page-header__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="auto"
|
||||
inline
|
||||
class="proxy-table-expand"
|
||||
>
|
||||
<el-form-item label="Name">
|
||||
<span>{{ row.name }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Type">
|
||||
<span>{{ row.type }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Encryption">
|
||||
<span>{{ row.encryption }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Compression">
|
||||
<span>{{ row.compression }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Last Start">
|
||||
<span>{{ row.lastStartTime }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Last Close">
|
||||
<span>{{ row.lastCloseTime }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="proxyType === 'http' || proxyType === 'https'">
|
||||
<el-form-item label="Domains">
|
||||
<span>{{ row.customDomains }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SubDomain">
|
||||
<span>{{ row.subdomain }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="locations">
|
||||
<span>{{ row.locations }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="HostRewrite">
|
||||
<span>{{ row.hostHeaderRewrite }}</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-else-if="proxyType === 'tcpmux'">
|
||||
<el-form-item label="Multiplexer">
|
||||
<span>{{ row.multiplexer }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="RouteByHTTPUser">
|
||||
<span>{{ row.routeByHTTPUser }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Domains">
|
||||
<span>{{ row.customDomains }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SubDomain">
|
||||
<span>{{ row.subdomain }}</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-form-item label="Addr">
|
||||
<span>{{ row.addr }}</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<div v-if="row.annotations && row.annotations.size > 0">
|
||||
<el-divider />
|
||||
<el-text class="title-text" size="large">Annotations</el-text>
|
||||
<ul>
|
||||
<li v-for="item in annotationsArray()">
|
||||
<span class="annotation-key">{{ item.key }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
const props = defineProps<{
|
||||
row: any
|
||||
proxyType: string
|
||||
}>()
|
||||
|
||||
// annotationsArray returns an array of key-value pairs from the annotations map.
|
||||
const annotationsArray = (): Array<{ key: string; value: string }> => {
|
||||
const array: Array<{ key: string; value: any }> = [];
|
||||
if (props.row.annotations) {
|
||||
props.row.annotations.forEach((value: any, key: string) => {
|
||||
array.push({ key, value });
|
||||
});
|
||||
}
|
||||
return array;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
ul .annotation-key {
|
||||
width: 300px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
color: #99a9bf;
|
||||
}
|
||||
</style>
|
||||
@ -1,195 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :md="12">
|
||||
<div class="source">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="220px"
|
||||
class="server_info"
|
||||
>
|
||||
<el-form-item label="Version">
|
||||
<span>{{ data.version }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="BindPort">
|
||||
<span>{{ data.bindPort }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="KCP Bind Port" v-if="data.kcpBindPort != 0">
|
||||
<span>{{ data.kcpBindPort }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="QUIC Bind Port" v-if="data.quicBindPort != 0">
|
||||
<span>{{ data.quicBindPort }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="HTTP Port" v-if="data.vhostHTTPPort != 0">
|
||||
<span>{{ data.vhostHTTPPort }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="HTTPS Port" v-if="data.vhostHTTPSPort != 0">
|
||||
<span>{{ data.vhostHTTPSPort }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="TCPMux HTTPConnect Port"
|
||||
v-if="data.tcpmuxHTTPConnectPort != 0"
|
||||
>
|
||||
<span>{{ data.tcpmuxHTTPConnectPort }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="Subdomain Host"
|
||||
v-if="data.subdomainHost != ''"
|
||||
>
|
||||
<LongSpan :content="data.subdomainHost" :length="30"></LongSpan>
|
||||
</el-form-item>
|
||||
<el-form-item label="Max PoolCount">
|
||||
<span>{{ data.maxPoolCount }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Max Ports Per Client">
|
||||
<span>{{ data.maxPortsPerClient }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Allow Ports" v-if="data.allowPortsStr != ''">
|
||||
<LongSpan :content="data.allowPortsStr" :length="30"></LongSpan>
|
||||
</el-form-item>
|
||||
<el-form-item label="TLS Force" v-if="data.tlsForce === true">
|
||||
<span>{{ data.tlsForce }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="HeartBeat Timeout">
|
||||
<span>{{ data.heartbeatTimeout }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Client Counts">
|
||||
<span>{{ data.clientCounts }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Current Connections">
|
||||
<span>{{ data.curConns }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Proxy Counts">
|
||||
<span>{{ data.proxyCounts }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :md="12">
|
||||
<div
|
||||
id="traffic"
|
||||
style="width: 400px; height: 250px; margin-bottom: 30px"
|
||||
></div>
|
||||
<div id="proxies" style="width: 400px; height: 250px"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { DrawTrafficChart, DrawProxyChart } from '../utils/chart'
|
||||
import LongSpan from './LongSpan.vue'
|
||||
|
||||
let data = ref({
|
||||
version: '',
|
||||
bindPort: 0,
|
||||
kcpBindPort: 0,
|
||||
quicBindPort: 0,
|
||||
vhostHTTPPort: 0,
|
||||
vhostHTTPSPort: 0,
|
||||
tcpmuxHTTPConnectPort: 0,
|
||||
subdomainHost: '',
|
||||
maxPoolCount: 0,
|
||||
maxPortsPerClient: '',
|
||||
allowPortsStr: '',
|
||||
tlsForce: false,
|
||||
heartbeatTimeout: 0,
|
||||
clientCounts: 0,
|
||||
curConns: 0,
|
||||
proxyCounts: 0,
|
||||
})
|
||||
|
||||
const fetchData = () => {
|
||||
fetch('../api/serverinfo', { credentials: 'include' })
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
data.value.version = json.version
|
||||
data.value.bindPort = json.bindPort
|
||||
data.value.kcpBindPort = json.kcpBindPort
|
||||
data.value.quicBindPort = json.quicBindPort
|
||||
data.value.vhostHTTPPort = json.vhostHTTPPort
|
||||
data.value.vhostHTTPSPort = json.vhostHTTPSPort
|
||||
data.value.tcpmuxHTTPConnectPort = json.tcpmuxHTTPConnectPort
|
||||
data.value.subdomainHost = json.subdomainHost
|
||||
data.value.maxPoolCount = json.maxPoolCount
|
||||
data.value.maxPortsPerClient = json.maxPortsPerClient
|
||||
if (data.value.maxPortsPerClient == '0') {
|
||||
data.value.maxPortsPerClient = 'no limit'
|
||||
}
|
||||
data.value.allowPortsStr = json.allowPortsStr
|
||||
data.value.tlsForce = json.tlsForce
|
||||
data.value.heartbeatTimeout = json.heartbeatTimeout
|
||||
data.value.clientCounts = json.clientCounts
|
||||
data.value.curConns = json.curConns
|
||||
data.value.proxyCounts = 0
|
||||
if (json.proxyTypeCount != null) {
|
||||
if (json.proxyTypeCount.tcp != null) {
|
||||
data.value.proxyCounts += json.proxyTypeCount.tcp
|
||||
}
|
||||
if (json.proxyTypeCount.udp != null) {
|
||||
data.value.proxyCounts += json.proxyTypeCount.udp
|
||||
}
|
||||
if (json.proxyTypeCount.http != null) {
|
||||
data.value.proxyCounts += json.proxyTypeCount.http
|
||||
}
|
||||
if (json.proxyTypeCount.https != null) {
|
||||
data.value.proxyCounts += json.proxyTypeCount.https
|
||||
}
|
||||
if (json.proxyTypeCount.stcp != null) {
|
||||
data.value.proxyCounts += json.proxyTypeCount.stcp
|
||||
}
|
||||
if (json.proxyTypeCount.sudp != null) {
|
||||
data.value.proxyCounts += json.proxyTypeCount.sudp
|
||||
}
|
||||
if (json.proxyTypeCount.xtcp != null) {
|
||||
data.value.proxyCounts += json.proxyTypeCount.xtcp
|
||||
}
|
||||
}
|
||||
|
||||
// draw chart
|
||||
DrawTrafficChart('traffic', json.totalTrafficIn, json.totalTrafficOut)
|
||||
DrawProxyChart('proxies', json)
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: 'Get server info from frps failed!',
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.source {
|
||||
border-radius: 4px;
|
||||
transition: 0.2s;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.server_info {
|
||||
margin-left: 40px;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
.server_info .el-form-item__label {
|
||||
color: #99a9bf;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.server_info .el-form-item__content {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.server_info .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div :id="proxyName" style="width: 600px; height: 400px"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { DrawProxyTrafficChart } from '../utils/chart.js'
|
||||
|
||||
const props = defineProps<{
|
||||
proxyName: string
|
||||
}>()
|
||||
|
||||
const fetchData = () => {
|
||||
let url = '../api/traffic/' + props.proxyName
|
||||
fetch(url, { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
DrawProxyTrafficChart(props.proxyName, json.trafficIn, json.trafficOut)
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: 'Get traffic info failed!' + err,
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
<style></style>
|
||||
@ -1,14 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import './assets/custom.css'
|
||||
import './assets/dark.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
@ -1,57 +0,0 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import ServerOverview from '../components/ServerOverview.vue'
|
||||
import ProxiesTCP from '../components/ProxiesTCP.vue'
|
||||
import ProxiesUDP from '../components/ProxiesUDP.vue'
|
||||
import ProxiesHTTP from '../components/ProxiesHTTP.vue'
|
||||
import ProxiesHTTPS from '../components/ProxiesHTTPS.vue'
|
||||
import ProxiesTCPMux from '../components/ProxiesTCPMux.vue'
|
||||
import ProxiesSTCP from '../components/ProxiesSTCP.vue'
|
||||
import ProxiesSUDP from '../components/ProxiesSUDP.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'ServerOverview',
|
||||
component: ServerOverview,
|
||||
},
|
||||
{
|
||||
path: '/proxies/tcp',
|
||||
name: 'ProxiesTCP',
|
||||
component: ProxiesTCP,
|
||||
},
|
||||
{
|
||||
path: '/proxies/udp',
|
||||
name: 'ProxiesUDP',
|
||||
component: ProxiesUDP,
|
||||
},
|
||||
{
|
||||
path: '/proxies/http',
|
||||
name: 'ProxiesHTTP',
|
||||
component: ProxiesHTTP,
|
||||
},
|
||||
{
|
||||
path: '/proxies/https',
|
||||
name: 'ProxiesHTTPS',
|
||||
component: ProxiesHTTPS,
|
||||
},
|
||||
{
|
||||
path: '/proxies/tcpmux',
|
||||
name: 'ProxiesTCPMux',
|
||||
component: ProxiesTCPMux,
|
||||
},
|
||||
{
|
||||
path: '/proxies/stcp',
|
||||
name: 'ProxiesSTCP',
|
||||
component: ProxiesSTCP,
|
||||
},
|
||||
{
|
||||
path: '/proxies/sudp',
|
||||
name: 'ProxiesSUDP',
|
||||
component: ProxiesSUDP,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -1,293 +0,0 @@
|
||||
import * as Humanize from 'humanize-plus'
|
||||
import * as echarts from 'echarts/core'
|
||||
import { PieChart, BarChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LabelLayout } from 'echarts/features'
|
||||
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent,
|
||||
} from 'echarts/components'
|
||||
|
||||
echarts.use([
|
||||
PieChart,
|
||||
BarChart,
|
||||
CanvasRenderer,
|
||||
LabelLayout,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent,
|
||||
])
|
||||
|
||||
function DrawTrafficChart(
|
||||
elementId: string,
|
||||
trafficIn: number,
|
||||
trafficOut: number
|
||||
) {
|
||||
const myChart = echarts.init(
|
||||
document.getElementById(elementId) as HTMLElement,
|
||||
'macarons'
|
||||
)
|
||||
myChart.showLoading()
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: 'Network Traffic',
|
||||
subtext: 'today',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (v: any) {
|
||||
return Humanize.fileSize(v.data.value) + ' (' + v.percent + '%)'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Traffic In', 'Traffic Out'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{
|
||||
value: trafficIn,
|
||||
name: 'Traffic In',
|
||||
},
|
||||
{
|
||||
value: trafficOut,
|
||||
name: 'Traffic Out',
|
||||
},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(option)
|
||||
myChart.hideLoading()
|
||||
}
|
||||
|
||||
function DrawProxyChart(elementId: string, serverInfo: any) {
|
||||
const myChart = echarts.init(
|
||||
document.getElementById(elementId) as HTMLElement,
|
||||
'macarons'
|
||||
)
|
||||
myChart.showLoading()
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: 'Proxies',
|
||||
subtext: 'now',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (v: any) {
|
||||
return String(v.data.value)
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: <string[]>[],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: <any[]>[],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
if (
|
||||
serverInfo.proxyTypeCount.tcp != null &&
|
||||
serverInfo.proxyTypeCount.tcp != 0
|
||||
) {
|
||||
option.series[0].data.push({
|
||||
value: serverInfo.proxyTypeCount.tcp,
|
||||
name: 'TCP',
|
||||
})
|
||||
option.legend.data.push('TCP')
|
||||
}
|
||||
if (
|
||||
serverInfo.proxyTypeCount.udp != null &&
|
||||
serverInfo.proxyTypeCount.udp != 0
|
||||
) {
|
||||
option.series[0].data.push({
|
||||
value: serverInfo.proxyTypeCount.udp,
|
||||
name: 'UDP',
|
||||
})
|
||||
option.legend.data.push('UDP')
|
||||
}
|
||||
if (
|
||||
serverInfo.proxyTypeCount.http != null &&
|
||||
serverInfo.proxyTypeCount.http != 0
|
||||
) {
|
||||
option.series[0].data.push({
|
||||
value: serverInfo.proxyTypeCount.http,
|
||||
name: 'HTTP',
|
||||
})
|
||||
option.legend.data.push('HTTP')
|
||||
}
|
||||
if (
|
||||
serverInfo.proxyTypeCount.https != null &&
|
||||
serverInfo.proxyTypeCount.https != 0
|
||||
) {
|
||||
option.series[0].data.push({
|
||||
value: serverInfo.proxyTypeCount.https,
|
||||
name: 'HTTPS',
|
||||
})
|
||||
option.legend.data.push('HTTPS')
|
||||
}
|
||||
if (
|
||||
serverInfo.proxyTypeCount.stcp != null &&
|
||||
serverInfo.proxyTypeCount.stcp != 0
|
||||
) {
|
||||
option.series[0].data.push({
|
||||
value: serverInfo.proxyTypeCount.stcp,
|
||||
name: 'STCP',
|
||||
})
|
||||
option.legend.data.push('STCP')
|
||||
}
|
||||
if (
|
||||
serverInfo.proxyTypeCount.sudp != null &&
|
||||
serverInfo.proxyTypeCount.sudp != 0
|
||||
) {
|
||||
option.series[0].data.push({
|
||||
value: serverInfo.proxyTypeCount.sudp,
|
||||
name: 'SUDP',
|
||||
})
|
||||
option.legend.data.push('SUDP')
|
||||
}
|
||||
if (
|
||||
serverInfo.proxyTypeCount.xtcp != null &&
|
||||
serverInfo.proxyTypeCount.xtcp != 0
|
||||
) {
|
||||
option.series[0].data.push({
|
||||
value: serverInfo.proxyTypeCount.xtcp,
|
||||
name: 'XTCP',
|
||||
})
|
||||
option.legend.data.push('XTCP')
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
myChart.hideLoading()
|
||||
}
|
||||
|
||||
// 7 days
|
||||
function DrawProxyTrafficChart(
|
||||
elementId: string,
|
||||
trafficInArr: number[],
|
||||
trafficOutArr: number[]
|
||||
) {
|
||||
const params = {
|
||||
width: '600px',
|
||||
height: '400px',
|
||||
}
|
||||
|
||||
const myChart = echarts.init(
|
||||
document.getElementById(elementId) as HTMLElement,
|
||||
'macarons',
|
||||
params
|
||||
)
|
||||
myChart.showLoading()
|
||||
|
||||
trafficInArr = trafficInArr.reverse()
|
||||
trafficOutArr = trafficOutArr.reverse()
|
||||
let now = new Date()
|
||||
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6)
|
||||
const dates: Array<string> = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
dates.push(
|
||||
now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
|
||||
)
|
||||
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
|
||||
}
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: function (data: any) {
|
||||
let html = ''
|
||||
if (data.length > 0) {
|
||||
html += data[0].name + '<br/>'
|
||||
}
|
||||
for (const v of data) {
|
||||
const colorEl =
|
||||
'<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/>'
|
||||
}
|
||||
return html
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['Traffic In', 'Traffic Out'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: dates,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: function (value: number) {
|
||||
return Humanize.fileSize(value)
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Traffic In',
|
||||
type: 'bar',
|
||||
data: trafficInArr,
|
||||
},
|
||||
{
|
||||
name: 'Traffic Out',
|
||||
type: 'bar',
|
||||
data: trafficOutArr,
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(option)
|
||||
myChart.hideLoading()
|
||||
}
|
||||
|
||||
export { DrawTrafficChart, DrawProxyChart, DrawProxyTrafficChart }
|
||||
@ -1,158 +0,0 @@
|
||||
class BaseProxy {
|
||||
name: string
|
||||
type: string
|
||||
annotations: Map<string, string>
|
||||
encryption: boolean
|
||||
compression: boolean
|
||||
conns: number
|
||||
trafficIn: number
|
||||
trafficOut: number
|
||||
lastStartTime: string
|
||||
lastCloseTime: string
|
||||
status: string
|
||||
clientVersion: string
|
||||
addr: string
|
||||
port: number
|
||||
|
||||
customDomains: string
|
||||
hostHeaderRewrite: string
|
||||
locations: string
|
||||
subdomain: string
|
||||
|
||||
constructor(proxyStats: any) {
|
||||
this.name = proxyStats.name
|
||||
this.type = ''
|
||||
this.annotations = new Map<string, string>()
|
||||
if (proxyStats.conf?.annotations) {
|
||||
for (const key in proxyStats.conf.annotations) {
|
||||
this.annotations.set(key, proxyStats.conf.annotations[key])
|
||||
}
|
||||
}
|
||||
|
||||
this.encryption = false
|
||||
this.compression = false
|
||||
this.encryption =
|
||||
proxyStats.conf?.transport?.useEncryption || this.encryption
|
||||
this.compression =
|
||||
proxyStats.conf?.transport?.useCompression || this.compression
|
||||
this.conns = proxyStats.curConns
|
||||
this.trafficIn = proxyStats.todayTrafficIn
|
||||
this.trafficOut = proxyStats.todayTrafficOut
|
||||
this.lastStartTime = proxyStats.lastStartTime
|
||||
this.lastCloseTime = proxyStats.lastCloseTime
|
||||
this.status = proxyStats.status
|
||||
this.clientVersion = proxyStats.clientVersion
|
||||
|
||||
this.addr = ''
|
||||
this.port = 0
|
||||
this.customDomains = ''
|
||||
this.hostHeaderRewrite = ''
|
||||
this.locations = ''
|
||||
this.subdomain = ''
|
||||
}
|
||||
}
|
||||
|
||||
class TCPProxy extends BaseProxy {
|
||||
constructor(proxyStats: any) {
|
||||
super(proxyStats)
|
||||
this.type = 'tcp'
|
||||
if (proxyStats.conf != null) {
|
||||
this.addr = ':' + proxyStats.conf.remotePort
|
||||
this.port = proxyStats.conf.remotePort
|
||||
} else {
|
||||
this.addr = ''
|
||||
this.port = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class UDPProxy extends BaseProxy {
|
||||
constructor(proxyStats: any) {
|
||||
super(proxyStats)
|
||||
this.type = 'udp'
|
||||
if (proxyStats.conf != null) {
|
||||
this.addr = ':' + proxyStats.conf.remotePort
|
||||
this.port = proxyStats.conf.remotePort
|
||||
} else {
|
||||
this.addr = ''
|
||||
this.port = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class HTTPProxy extends BaseProxy {
|
||||
constructor(proxyStats: any, port: number, subdomainHost: string) {
|
||||
super(proxyStats)
|
||||
this.type = 'http'
|
||||
this.port = port
|
||||
if (proxyStats.conf) {
|
||||
this.customDomains = proxyStats.conf.customDomains || this.customDomains
|
||||
this.hostHeaderRewrite = proxyStats.conf.hostHeaderRewrite
|
||||
this.locations = proxyStats.conf.locations
|
||||
if (proxyStats.conf.subdomain) {
|
||||
this.subdomain = `${proxyStats.conf.subdomain}.${subdomainHost}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class HTTPSProxy extends BaseProxy {
|
||||
constructor(proxyStats: any, port: number, subdomainHost: string) {
|
||||
super(proxyStats)
|
||||
this.type = 'https'
|
||||
this.port = port
|
||||
if (proxyStats.conf != null) {
|
||||
this.customDomains = proxyStats.conf.customDomains || this.customDomains
|
||||
if (proxyStats.conf.subdomain) {
|
||||
this.subdomain = `${proxyStats.conf.subdomain}.${subdomainHost}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class TCPMuxProxy extends BaseProxy {
|
||||
multiplexer: string
|
||||
routeByHTTPUser: string
|
||||
|
||||
constructor(proxyStats: any, port: number, subdomainHost: string) {
|
||||
super(proxyStats)
|
||||
this.type = 'tcpmux'
|
||||
this.port = port
|
||||
this.multiplexer = ''
|
||||
this.routeByHTTPUser = ''
|
||||
|
||||
if (proxyStats.conf) {
|
||||
this.customDomains = proxyStats.conf.customDomains || this.customDomains
|
||||
this.multiplexer = proxyStats.conf.multiplexer
|
||||
this.routeByHTTPUser = proxyStats.conf.routeByHTTPUser
|
||||
if (proxyStats.conf.subdomain) {
|
||||
this.subdomain = `${proxyStats.conf.subdomain}.${subdomainHost}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class STCPProxy extends BaseProxy {
|
||||
constructor(proxyStats: any) {
|
||||
super(proxyStats)
|
||||
this.type = 'stcp'
|
||||
}
|
||||
}
|
||||
|
||||
class SUDPProxy extends BaseProxy {
|
||||
constructor(proxyStats: any) {
|
||||
super(proxyStats)
|
||||
this.type = 'sudp'
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
BaseProxy,
|
||||
TCPProxy,
|
||||
UDPProxy,
|
||||
TCPMuxProxy,
|
||||
HTTPProxy,
|
||||
HTTPSProxy,
|
||||
STCPProxy,
|
||||
SUDPProxy,
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: '',
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
assetsDir: '',
|
||||
},
|
||||
})
|
||||
2633
web/frps/yarn.lock
2633
web/frps/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user