109 lines
4.7 KiB
Vue
109 lines
4.7 KiB
Vue
<template>
|
|
<div id="container">
|
|
<div id="wrap">
|
|
<div id="top">
|
|
<div id="logo">
|
|
<!--<img class="logo"-->
|
|
<!-- src="img/logo.png"-->
|
|
<!--/>-->
|
|
<!--如果需要自定义logo图片,使用上面这段代码,并删除下面这段代码,图片位置应放在img下的logo.png-->
|
|
<router-link to="/overview">
|
|
<img
|
|
class="logo"
|
|
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjgxODk0Mjk2MzM3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2NjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc4NS4wNjY2NjcgODUzLjMzMzMzM0gyMzguOTMzMzMzYy0xMzMuMTIgMC0yMzguOTMzMzMzLTEwNS44MTMzMzMtMjM4LjkzMzMzMy0yMzguOTMzMzMzIDAtMTA1LjgxMzMzMyA3MS42OC0xOTcuOTczMzMzIDE3MC42NjY2NjctMjI4LjY5MzMzMyA2LjgyNjY2Ny03MS42OCA3MS42OC0xMjkuNzA2NjY3IDE0My4zNi0xMjkuNzA2NjY3aDYuODI2NjY2YzIwLjQ4IDAgNDAuOTYgMy40MTMzMzMgNjEuNDQgMTMuNjUzMzMzQzQyNi42NjY2NjcgMjA4LjIxMzMzMyA0OTguMzQ2NjY3IDE3MC42NjY2NjcgNTczLjQ0IDE3MC42NjY2NjdoNi44MjY2NjdjMTE5LjQ2NjY2NyAwIDIyMS44NjY2NjcgODguNzQ2NjY3IDIzNS41MiAyMDguMjEzMzMzIDExNi4wNTMzMzMgMTcuMDY2NjY3IDIwOC4yMTMzMzMgMTE2LjA1MzMzMyAyMDguMjEzMzMzIDIzNS41MiAwIDEzMy4xMi0xMDUuODEzMzMzIDIzOC45MzMzMzMtMjM4LjkzMzMzMyAyMzguOTMzMzMzek0zMTcuNDQgMjkwLjEzMzMzM0MyNTYgMjkwLjEzMzMzMyAyMDQuOCAzMzcuOTIgMjA0LjggMzk5LjM2YzAgNi44MjY2NjctNi44MjY2NjcgMTMuNjUzMzMzLTEzLjY1MzMzMyAxNy4wNjY2NjctOTIuMTYgMjAuNDgtMTU3LjAxMzMzMyAxMDIuNC0xNTcuMDEzMzM0IDE5Ny45NzMzMzMgMCAxMTIuNjQgOTIuMTYgMjA0LjggMjA0LjggMjA0LjhoNTQ2LjEzMzMzNGMxMTIuNjQgMCAyMDQuOC05Mi4xNiAyMDQuOC0yMDQuOCAwLTEwNS44MTMzMzMtODEuOTItMTk3Ljk3MzMzMy0xOTEuMTQ2NjY3LTIwNC44LTYuODI2NjY3IDAtMTMuNjUzMzMzLTYuODI2NjY3LTE3LjA2NjY2Ny0xNy4wNjY2NjdDNzc4LjI0IDI4Ni43MiA2ODYuMDggMjA0LjggNTgwLjI2NjY2NyAyMDQuOGgtMy40MTMzMzRsLTMuNDEzMzMzLTE3LjA2NjY2N1YyMDQuOGMtNjguMjY2NjY3IDAtMTI5LjcwNjY2NyAzNC4xMzMzMzMtMTY3LjI1MzMzMyA5NS41NzMzMzMtNi44MjY2NjcgNi44MjY2NjctMTcuMDY2NjY3IDEwLjI0LTIzLjg5MzMzNCA2LjgyNjY2Ny0xNy4wNjY2NjctMTAuMjQtMzcuNTQ2NjY3LTE3LjA2NjY2Ny01OC4wMjY2NjYtMTcuMDY2NjY3aC0zLjQxMzMzNC0zLjQxMzMzM3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjI2NjIiPjwvcGF0aD48L3N2Zz4="
|
|
/>
|
|
</router-link>
|
|
<p></p>
|
|
<div class="headline">
|
|
<h1>Welcome</h1>
|
|
</div>
|
|
<div class="" id="kg-btn">
|
|
<input class="tgl tgl-flip" id="qieh" type="checkbox" />
|
|
<label
|
|
class="tgl-btn"
|
|
data-tg-off="PROXY"
|
|
data-tg-on="DIRECT"
|
|
for="qieh"
|
|
@click="toggleProxy"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<div class="app animated fadeInLeft" id="app">
|
|
<ul>
|
|
<li v-for="p in proxies">
|
|
<a :href="isProxy ? p.proxyUrl : p.directUrl" target="_blank">
|
|
<img class="shake" width="128" height="128" :src="p.image" />
|
|
<strong>{{ p.name }}</strong></a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="footer">
|
|
<div class="footer-contents">
|
|
<div class="links">
|
|
<div class="line">
|
|
<a href="/">FRP Home</a>
|
|
<span class="footer-link-separator"></span>
|
|
<span class="copyright">@</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
class Item {
|
|
name: string
|
|
image: string
|
|
directUrl: string
|
|
proxyUrl: string
|
|
|
|
/**
|
|
*
|
|
*/
|
|
constructor(proxy: any, host: string) {
|
|
this.name = proxy.name
|
|
this.image = proxy.conf.group
|
|
this.directUrl = proxy.conf.group_key
|
|
this.proxyUrl = `${host}:${proxy.conf.remote_port}`
|
|
}
|
|
}
|
|
|
|
let proxies = ref<Item[]>([])
|
|
let isProxy = ref<Boolean>(true)
|
|
const protocal = window.location.protocol
|
|
const host = window.location.hostname
|
|
|
|
const fetchData = () => {
|
|
fetch('../api/proxy/tcp', { credentials: 'include' })
|
|
.then((res) => {
|
|
return res.json()
|
|
})
|
|
.then((json) => {
|
|
const result = json.proxies.sort(
|
|
(a: any, b: any) =>
|
|
parseInt(a.conf.remote_port) - parseInt(b.conf.remote_port)
|
|
)
|
|
for (let proxy of result) {
|
|
if (proxy != null && proxy.conf.group != '')
|
|
proxies.value.push(new Item(proxy, `${protocal}//${host}`))
|
|
}
|
|
})
|
|
}
|
|
fetchData()
|
|
|
|
const toggleProxy = () => {
|
|
isProxy.value = !isProxy.value
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import url('assets/style.css');
|
|
</style>
|