mirror of
https://github.com/fatedier/frp.git
synced 2025-07-10 07:49:34 +07:00
web/frpc: support more info (#3334)
This commit is contained in:
@ -1,30 +1,30 @@
|
||||
/* eslint-env node */
|
||||
require("@rushstack/eslint-patch/modern-module-resolution");
|
||||
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",
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript',
|
||||
'@vue/eslint-config-prettier',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
ecmaVersion: 'latest',
|
||||
},
|
||||
rules: {
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"warn",
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'warn',
|
||||
{
|
||||
argsIgnorePattern: "^_",
|
||||
varsIgnorePattern: "^_",
|
||||
argsIgnorePattern: '^_',
|
||||
varsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
"vue/multi-word-component-names": [
|
||||
"error",
|
||||
'vue/multi-word-component-names': [
|
||||
'error',
|
||||
{
|
||||
ignores: ["Overview"],
|
||||
ignores: ['Overview'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -1 +1,5 @@
|
||||
{}
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
||||
|
@ -48,18 +48,18 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useDark, useToggle } from "@vueuse/core";
|
||||
import { ref } from 'vue'
|
||||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
const isDark = useDark();
|
||||
const darkmodeSwitch = ref(isDark);
|
||||
const toggleDark = useToggle(isDark);
|
||||
const isDark = useDark()
|
||||
const darkmodeSwitch = ref(isDark)
|
||||
const toggleDark = useToggle(isDark)
|
||||
|
||||
const handleSelect = (key: string) => {
|
||||
if (key == "") {
|
||||
window.open("https://github.com/fatedier/frp");
|
||||
if (key == '') {
|
||||
window.open('https://github.com/fatedier/frp')
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
@ -14,85 +14,85 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
let textarea = ref("");
|
||||
let textarea = ref('')
|
||||
|
||||
const fetchData = () => {
|
||||
fetch("/api/config", { credentials: "include" })
|
||||
fetch('/api/config', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.text();
|
||||
return res.text()
|
||||
})
|
||||
.then((text) => {
|
||||
textarea.value = text;
|
||||
textarea.value = text
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "Get configure content from frpc failed!",
|
||||
type: "warning",
|
||||
});
|
||||
});
|
||||
};
|
||||
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",
|
||||
'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",
|
||||
confirmButtonText: 'Yes',
|
||||
cancelButtonText: 'No',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
if (textarea.value == "") {
|
||||
if (textarea.value == '') {
|
||||
ElMessage({
|
||||
message: "Configure content can not be empty!",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
message: 'Configure content can not be empty!',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
fetch("/api/config", {
|
||||
credentials: "include",
|
||||
method: "PUT",
|
||||
fetch('/api/config', {
|
||||
credentials: 'include',
|
||||
method: 'PUT',
|
||||
body: textarea.value,
|
||||
})
|
||||
.then(() => {
|
||||
fetch("/api/reload", { credentials: "include" })
|
||||
fetch('/api/reload', { credentials: 'include' })
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "Success",
|
||||
});
|
||||
type: 'success',
|
||||
message: 'Success',
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "Reload frpc configure file error, " + err,
|
||||
type: "warning",
|
||||
});
|
||||
});
|
||||
message: 'Reload frpc configure file error, ' + err,
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "Put config to frpc and hot reload failed!",
|
||||
type: "warning",
|
||||
});
|
||||
});
|
||||
message: 'Put config to frpc and hot reload failed!',
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: "Canceled",
|
||||
type: "info",
|
||||
});
|
||||
});
|
||||
};
|
||||
message: 'Canceled',
|
||||
type: 'info',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
fetchData();
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
@ -9,30 +9,39 @@
|
||||
style="width: 100%"
|
||||
:default-sort="{ prop: 'type', order: 'ascending' }"
|
||||
>
|
||||
<el-table-column prop="name" label="name"></el-table-column>
|
||||
<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>
|
||||
@ -43,49 +52,34 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
let status = ref<any[]>([]);
|
||||
let status = ref<any[]>([])
|
||||
|
||||
const fetchData = () => {
|
||||
fetch("/api/status", { credentials: "include" })
|
||||
fetch('/api/status', { credentials: 'include' })
|
||||
.then((res) => {
|
||||
return res.json();
|
||||
return res.json()
|
||||
})
|
||||
.then((json) => {
|
||||
status.value = new Array();
|
||||
for (let s of json.tcp) {
|
||||
status.value.push(s);
|
||||
}
|
||||
for (let s of json.udp) {
|
||||
status.value.push(s);
|
||||
}
|
||||
for (let s of json.http) {
|
||||
status.value.push(s);
|
||||
}
|
||||
for (let s of json.https) {
|
||||
status.value.push(s);
|
||||
}
|
||||
for (let s of json.stcp) {
|
||||
status.value.push(s);
|
||||
}
|
||||
for (let s of json.sudp) {
|
||||
status.value.push(s);
|
||||
}
|
||||
for (let s of json.xtcp) {
|
||||
status.value.push(s);
|
||||
status.value = new Array()
|
||||
for (let key in json) {
|
||||
for (let ps of json[key]) {
|
||||
console.log(ps)
|
||||
status.value.push(ps)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
.catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "Get status info from frpc failed!",
|
||||
type: "warning",
|
||||
});
|
||||
});
|
||||
};
|
||||
fetchData();
|
||||
message: 'Get status info from frpc failed!' + err,
|
||||
type: 'warning',
|
||||
})
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
@ -1,13 +1,13 @@
|
||||
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 { 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";
|
||||
import './assets/dark.css'
|
||||
|
||||
const app = createApp(App);
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router);
|
||||
app.use(router)
|
||||
|
||||
app.mount("#app");
|
||||
app.mount('#app')
|
||||
|
@ -1,21 +1,21 @@
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import Overview from "../components/Overview.vue";
|
||||
import ClientConfigure from "../components/ClientConfigure.vue";
|
||||
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",
|
||||
path: '/',
|
||||
name: 'Overview',
|
||||
component: Overview,
|
||||
},
|
||||
{
|
||||
path: "/configure",
|
||||
name: "ClientConfigure",
|
||||
path: '/configure',
|
||||
name: 'ClientConfigure',
|
||||
component: ClientConfigure,
|
||||
},
|
||||
],
|
||||
});
|
||||
})
|
||||
|
||||
export default router;
|
||||
export default router
|
||||
|
@ -1,14 +1,14 @@
|
||||
import { fileURLToPath, URL } from "node:url";
|
||||
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";
|
||||
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: "",
|
||||
base: '',
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
@ -20,10 +20,10 @@ export default defineConfig({
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
assetsDir: "",
|
||||
assetsDir: '',
|
||||
},
|
||||
});
|
||||
})
|
||||
|
Reference in New Issue
Block a user