Init
This commit is contained in:
cloudy2331
commit
d4ce6e6261
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
5
README.md
Normal file
5
README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue</title>
|
||||||
|
</head>
|
||||||
|
<body style="padding: 0; margin: 0;">
|
||||||
|
<div id="app" style="padding: 0; margin: 0;"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1212
package-lock.json
generated
Normal file
1212
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "proxysubscribehub",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --host 0.0.0.0",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"base-64": "^1.0.0",
|
||||||
|
"tdesign-icons-vue-next": "^0.3.4",
|
||||||
|
"tdesign-vue-next": "^1.10.7",
|
||||||
|
"vue": "^3.5.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"vite": "^6.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
32
src/App.vue
Normal file
32
src/App.vue
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<script setup>
|
||||||
|
import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
import Main from './components/Main.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- <div>
|
||||||
|
<a href="https://vite.dev" target="_blank">
|
||||||
|
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||||
|
</a>
|
||||||
|
<a href="https://vuejs.org/" target="_blank">
|
||||||
|
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<HelloWorld msg="Vite + Vue" /> -->
|
||||||
|
<Main></Main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.vue:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #42b883aa);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
135
src/components/Agreements/Vmess.vue
Normal file
135
src/components/Agreements/Vmess.vue
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<t-form label-align="left" required-mark>
|
||||||
|
<t-form-item label="名称">
|
||||||
|
<t-input v-model="props.vmess.name" />
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="服务器地址">
|
||||||
|
<t-input v-model="props.vmess.server" />
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="端口">
|
||||||
|
<t-input-number v-model="props.vmess.port" theme="normal" />
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="用户ID">
|
||||||
|
<t-input v-model="props.vmess.userId" />
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="替代ID">
|
||||||
|
<t-input-number v-model="props.vmess.alterId" theme="normal" />
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="加密方式">
|
||||||
|
<t-select v-model="props.vmess.security">
|
||||||
|
<t-option value="auto">auto</t-option>
|
||||||
|
<t-option value="none">none</t-option>
|
||||||
|
<t-option value="aes-128-gcm">aes-128-gcm</t-option>
|
||||||
|
<t-option value="chacha20-poly1305">chacha20-poly1305</t-option>
|
||||||
|
<t-option value="zero">zero</t-option>
|
||||||
|
</t-select>
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="包编码">
|
||||||
|
<t-select v-model="props.vmess.type">
|
||||||
|
<t-option value="none">none</t-option>
|
||||||
|
<t-option value="packet">packet</t-option>
|
||||||
|
<t-option value="xudp">xudp</t-option>
|
||||||
|
</t-select>
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="传输协议">
|
||||||
|
<t-select v-model="props.vmess.network">
|
||||||
|
<t-option value="tcp">tcp</t-option>
|
||||||
|
<t-option value="kcp">kcp</t-option>
|
||||||
|
<t-option value="ws">ws</t-option>
|
||||||
|
<t-option value="http">http</t-option>
|
||||||
|
<t-option value="quic">quic</t-option>
|
||||||
|
<t-option value="grpc">grpc</t-option>
|
||||||
|
<t-option value="httpupgrade">httpupgrade</t-option>
|
||||||
|
</t-select>
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="传输层加密">
|
||||||
|
<t-select v-model="props.vmess.tls">
|
||||||
|
<t-option value="none">none</t-option>
|
||||||
|
<t-option value="tls">tls</t-option>
|
||||||
|
</t-select>
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="伪装类型">
|
||||||
|
<t-select v-model="props.vmess.mask">
|
||||||
|
<t-option value="none">none</t-option>
|
||||||
|
<t-option value="dtls">dtls</t-option>
|
||||||
|
<t-option value="srtp">srtp</t-option>
|
||||||
|
<t-option value="utp">utp</t-option>
|
||||||
|
<t-option value="wechat-video">wechat-video</t-option>
|
||||||
|
<t-option value="wireguard">wireguard</t-option>
|
||||||
|
</t-select>
|
||||||
|
</t-form-item>
|
||||||
|
</t-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
vmess: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
type: String,
|
||||||
|
default: "127.0.0.1",
|
||||||
|
},
|
||||||
|
port: {
|
||||||
|
type: Number,
|
||||||
|
default: 1080,
|
||||||
|
},
|
||||||
|
userId: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
alterId: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
security: {
|
||||||
|
type: String,
|
||||||
|
default: "auto",
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "none",
|
||||||
|
},
|
||||||
|
network: {
|
||||||
|
type: String,
|
||||||
|
default: "tcp",
|
||||||
|
},
|
||||||
|
tls: {
|
||||||
|
type: String,
|
||||||
|
default: "none",
|
||||||
|
},
|
||||||
|
mask: {
|
||||||
|
type: String,
|
||||||
|
default: "none"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 用于判断编辑节点或新建节点
|
||||||
|
key: {
|
||||||
|
type: Number,
|
||||||
|
default: -1
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// const name = ref('');
|
||||||
|
// const server = ref('127.0.0.1');
|
||||||
|
// const port = ref(1080);
|
||||||
|
// const userId = ref('');
|
||||||
|
// const alterId = ref(0);
|
||||||
|
// const security = ref('auto');
|
||||||
|
// const type = ref('none');
|
||||||
|
// const network = ref('tcp');
|
||||||
|
// const tls = ref('none');
|
||||||
|
</script>
|
||||||
62
src/components/Cards/GeneralCard.vue
Normal file
62
src/components/Cards/GeneralCard.vue
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<t-card :title=props.name hover-shadow>
|
||||||
|
<t-skeleton :loading="urlVisible">
|
||||||
|
<span style="display: inline-block; text-align: left;">{{ server + req + props.name }}</span>
|
||||||
|
</t-skeleton>
|
||||||
|
<template #actions>
|
||||||
|
<div class="actions">
|
||||||
|
<t-button size="small" theme="default" @click="$emit('toSubscribeItem', props.url, props.name)">编辑</t-button>
|
||||||
|
<t-button size="small" @click="urlVisible = !urlVisible">{{
|
||||||
|
urlVisible ? "显示" : "隐藏"
|
||||||
|
}}</t-button>
|
||||||
|
<t-button size="small" theme="danger" @click="dialogVisible = true">
|
||||||
|
<template #icon>
|
||||||
|
<delete-icon />
|
||||||
|
</template>
|
||||||
|
删除
|
||||||
|
</t-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</t-card>
|
||||||
|
|
||||||
|
<!-- dialog -->
|
||||||
|
<t-dialog
|
||||||
|
v-model:visible="dialogVisible"
|
||||||
|
width="40%"
|
||||||
|
header="警告"
|
||||||
|
destroy-on-close
|
||||||
|
:confirm-btn="{
|
||||||
|
content: '删除',
|
||||||
|
theme: 'danger',
|
||||||
|
loading
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="dialog-content">
|
||||||
|
<span>确认要删除该订阅吗？</span>
|
||||||
|
</div>
|
||||||
|
</t-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.actions > * {
|
||||||
|
margin-left: 10px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import { DeleteIcon } from "tdesign-icons-vue-next";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
url: String,
|
||||||
|
name: String
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示控制
|
||||||
|
const urlVisible = ref(true);
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
|
||||||
|
// 地址生成
|
||||||
|
const server = "https://www.cloudy233.top";
|
||||||
|
const req = "/api/?name=";//TODO
|
||||||
|
</script>
|
||||||
150
src/components/General.vue
Normal file
150
src/components/General.vue
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
<template>
|
||||||
|
<div class="general-content">
|
||||||
|
<div class="control-bar">
|
||||||
|
<t-button size="large" @click="dialogVisible = true">
|
||||||
|
<!-- icon莫名其妙的小，或许是个bug，也有可能和flex有关 -->
|
||||||
|
<!-- <template #icon>
|
||||||
|
<add-icon />
|
||||||
|
</template> -->
|
||||||
|
+ 添加订阅
|
||||||
|
</t-button>
|
||||||
|
<t-input v-model="searchText" size="large" disabled style="margin: 0 48px 0 16px">
|
||||||
|
<template #prefix-icon>
|
||||||
|
<filter-icon />
|
||||||
|
</template>
|
||||||
|
</t-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="card" v-for="i in Url" :key="i">
|
||||||
|
<GeneralCard
|
||||||
|
:url="i.url"
|
||||||
|
:name="i.name"
|
||||||
|
@toSubscribeItem="(url, name) => $emit('toSubscribeItem', url, name)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- total应当由后端提供,显示条件为卡片数量大于9 -->
|
||||||
|
<!-- 暂时禁用 -->
|
||||||
|
<t-pagination
|
||||||
|
v-if="Url.length < 0"
|
||||||
|
:total="Url.length"
|
||||||
|
showPageNumber
|
||||||
|
:default-page-size="9"
|
||||||
|
:showPageSize="false"
|
||||||
|
showPreviousAndNextBtn
|
||||||
|
:totalContent="false"
|
||||||
|
size="small"
|
||||||
|
@current-change="onCurrentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- dialog -->
|
||||||
|
<t-dialog
|
||||||
|
v-model:visible="dialogVisible"
|
||||||
|
header="添加订阅"
|
||||||
|
width="40%"
|
||||||
|
:confirm-btn="{
|
||||||
|
content: '保存',
|
||||||
|
theme: 'primary',
|
||||||
|
loading,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<t-space direction="vertical" style="width: 100%">
|
||||||
|
<div class="dialog-content">
|
||||||
|
<t-form :data="fromData" label-align="left">
|
||||||
|
|
||||||
|
<t-form-item label="订阅名称" name="name">
|
||||||
|
<t-input></t-input>
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="别名" name="url">
|
||||||
|
<t-input></t-input>
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
</t-form>
|
||||||
|
</div>
|
||||||
|
</t-space>
|
||||||
|
</t-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.general-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-content: start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 28%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .t-form__item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
} */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// icon
|
||||||
|
import { FilterIcon, AddIcon } from "tdesign-icons-vue-next";
|
||||||
|
|
||||||
|
import { computed, onBeforeMount, onMounted, ref } from "vue";
|
||||||
|
import GeneralCard from "./Cards/GeneralCard.vue";
|
||||||
|
|
||||||
|
const searchText = ref("");
|
||||||
|
|
||||||
|
//TODO向后端发请求获取代理数据
|
||||||
|
const Url = ref([]);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
//测试数据（Url长度上限应该为9，按当前分页向服务器请求数据）
|
||||||
|
// for (let i = 0; i < 10; i++) {
|
||||||
|
// Url.value.push({
|
||||||
|
// name: "订阅" + i,
|
||||||
|
// url: "vmess://" + i,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
Url.value.push({
|
||||||
|
name: "all",
|
||||||
|
url: "vmess://ew0KICAidiI6ICIyIiwNCiAgInBzIjogInRrIiwNCiAgImFkZCI6ICI0My4xNTMuMTg0LjkxIiwNCiAgInBvcnQiOiAiNDczNTkiLA0KICAiaWQiOiAiMzAxYzgyMWEtODljOS00ZWI0LTlmYmYtYWIwMjgyNjMxZTJhIiwNCiAgImFpZCI6ICIwIiwNCiAgInNjeSI6ICJhdXRvIiwNCiAgIm5ldCI6ICJrY3AiLA0KICAidHlwZSI6ICJkdGxzIiwNCiAgImhvc3QiOiAiIiwNCiAgInBhdGgiOiAiIiwNCiAgInRscyI6ICIiLA0KICAic25pIjogIiIsDQogICJhbHBuIjogIiIsDQogICJmcCI6ICIiDQp9"
|
||||||
|
})
|
||||||
|
console.log(Url);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 过滤器
|
||||||
|
const filterUrl = computed(() => {
|
||||||
|
if (searchText.value.length > 0) {
|
||||||
|
return Url.value.filter((item) => {
|
||||||
|
return item.name.includes(searchText.value);
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
return Url.value;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const fromData = ref({
|
||||||
|
labelAlign: "left",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 换页
|
||||||
|
function onCurrentChange(index, pageInfo) {
|
||||||
|
console.log(index, pageInfo);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
43
src/components/HelloWorld.vue
Normal file
43
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
msg: String,
|
||||||
|
})
|
||||||
|
|
||||||
|
const count = ref(0)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>{{ msg }}</h1>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<button type="button" @click="count++">count is {{ count }}</button>
|
||||||
|
<p>
|
||||||
|
Edit
|
||||||
|
<code>components/HelloWorld.vue</code> to test HMR
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Check out
|
||||||
|
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||||
|
>create-vue</a
|
||||||
|
>, the official Vue + Vite starter
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Learn more about IDE Support for Vue in the
|
||||||
|
<a
|
||||||
|
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||||
|
target="_blank"
|
||||||
|
>Vue Docs Scaling up Guide</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
76
src/components/Main.vue
Normal file
76
src/components/Main.vue
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<t-layout class="main-layout">
|
||||||
|
<t-aside>
|
||||||
|
<t-menu theme="light" default-value="General" :collapsed="collapsed" @change="changeHandler">
|
||||||
|
<template #logo>
|
||||||
|
<span style="font-size: larger">{{ collapsed? "PSH" : "Proxy Subscribe Hub" }}</span>
|
||||||
|
</template>
|
||||||
|
<t-menu-item value="General">
|
||||||
|
<template #icon>
|
||||||
|
<app-icon />
|
||||||
|
</template>
|
||||||
|
总览
|
||||||
|
</t-menu-item>
|
||||||
|
<!-- <t-menu-item value="item2">节点管理</t-menu-item> -->
|
||||||
|
<template #operations>
|
||||||
|
<t-button
|
||||||
|
variant="text"
|
||||||
|
shape="square"
|
||||||
|
theme="default"
|
||||||
|
@click="collapsed = !collapsed;"
|
||||||
|
style="background-color: #fff"
|
||||||
|
>
|
||||||
|
<view-list-icon />
|
||||||
|
</t-button>
|
||||||
|
</template>
|
||||||
|
</t-menu>
|
||||||
|
</t-aside>
|
||||||
|
<t-layout>
|
||||||
|
<t-content style="overflow: auto">
|
||||||
|
<div>
|
||||||
|
<General
|
||||||
|
@toSubscribeItem="(url, name) => toSubscribeItem(url, name)"
|
||||||
|
v-if="menuValue === 'General'"
|
||||||
|
/>
|
||||||
|
<SubscribeItem
|
||||||
|
@backToGeneral="menuValue = 'General'"
|
||||||
|
:propsData="Url"
|
||||||
|
:name="Name"
|
||||||
|
v-if="menuValue === 'SubscribeItem'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</t-content>
|
||||||
|
</t-layout>
|
||||||
|
</t-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.main-layout {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import General from "./General.vue";
|
||||||
|
import SubscribeItem from "./SubscribeItem.vue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { ViewListIcon, AppIcon } from "tdesign-icons-vue-next";
|
||||||
|
|
||||||
|
const menuValue = ref("General");
|
||||||
|
const collapsed = ref(false);
|
||||||
|
let Url = "";
|
||||||
|
let Name = "";
|
||||||
|
|
||||||
|
function changeHandler(active) {
|
||||||
|
console.log(active);
|
||||||
|
menuValue.value = active;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toSubscribeItem(url, name) {
|
||||||
|
// console.log(url);
|
||||||
|
Url = url;
|
||||||
|
Name = name;
|
||||||
|
menuValue.value = "SubscribeItem";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
219
src/components/SubscribeItem.vue
Normal file
219
src/components/SubscribeItem.vue
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
<template>
|
||||||
|
<div class="subscribe-item-container">
|
||||||
|
<t-breadcrumb style="margin-bottom: 16px">
|
||||||
|
<t-breadcrumb-item @click="$emit('backToGeneral')"
|
||||||
|
>总览</t-breadcrumb-item
|
||||||
|
>
|
||||||
|
<t-breadcrumb-item>{{ props.name }}</t-breadcrumb-item>
|
||||||
|
</t-breadcrumb>
|
||||||
|
|
||||||
|
<div class="control-bar">
|
||||||
|
<t-button @click="addNode()">
|
||||||
|
<template #icon>
|
||||||
|
<add-icon />
|
||||||
|
</template>
|
||||||
|
添加节点
|
||||||
|
</t-button>
|
||||||
|
<t-button @click="readByClipboard()" style="margin-left: 16px">
|
||||||
|
<template #icon>
|
||||||
|
<paste-icon />
|
||||||
|
</template>
|
||||||
|
从剪贴板导入(暂不支持)
|
||||||
|
</t-button>
|
||||||
|
</div>
|
||||||
|
<t-table
|
||||||
|
row-key="key"
|
||||||
|
:data="data"
|
||||||
|
:columns="columns"
|
||||||
|
active-row-type="single"
|
||||||
|
:hover="false"
|
||||||
|
>
|
||||||
|
</t-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- dialog -->
|
||||||
|
<t-dialog
|
||||||
|
v-model:visible="dialogVisible"
|
||||||
|
header="添加节点"
|
||||||
|
width="40%"
|
||||||
|
:confirm-btn="{
|
||||||
|
content: '保存',
|
||||||
|
theme: 'primary',
|
||||||
|
loading,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="dialog-content">
|
||||||
|
<t-select v-model="agreementSelect" :borderless="true" auto-width>
|
||||||
|
<t-option value="vmess">vmess</t-option>
|
||||||
|
</t-select>
|
||||||
|
|
||||||
|
<Vmess :vmess="vemssProps" v-if="agreementSelect === 'vmess'" />
|
||||||
|
</div>
|
||||||
|
</t-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.subscribe-item-container {
|
||||||
|
padding: 16px;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-content: start;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-content > * {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, h, onMounted, onBeforeMount } from "vue";
|
||||||
|
import Vmess from "./Agreements/Vmess.vue";
|
||||||
|
import { AddIcon, PasteIcon } from "tdesign-icons-vue-next";
|
||||||
|
import { MessagePlugin } from "tdesign-vue-next";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
propsData: String,
|
||||||
|
name: String,
|
||||||
|
});
|
||||||
|
|
||||||
|
let data = ref([]);
|
||||||
|
|
||||||
|
// 代理参数
|
||||||
|
let vemssProps = {
|
||||||
|
name: "",
|
||||||
|
server: "127.0.0.1",
|
||||||
|
port: 1080,
|
||||||
|
userId: "",
|
||||||
|
alterId: 0,
|
||||||
|
security: "auto",
|
||||||
|
type: "none",
|
||||||
|
network: "tcp",
|
||||||
|
tls: "tls",
|
||||||
|
mask: "none"
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.propsData) {
|
||||||
|
if (props.propsData.length > 0) {
|
||||||
|
let propsDataSplit = props.propsData.split(",");
|
||||||
|
for (let i in propsDataSplit) {
|
||||||
|
let decodeData = JSON.parse(atob(propsDataSplit[i].split("://")[1])); //解码
|
||||||
|
switch (propsDataSplit[i].split("://")[0]) {
|
||||||
|
case "vmess":
|
||||||
|
data.value.push({
|
||||||
|
key: i,
|
||||||
|
name: decodeData.ps,
|
||||||
|
url: propsDataSplit[i],
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
data.value.push({
|
||||||
|
key: i,
|
||||||
|
name: "暂不支持",
|
||||||
|
url: propsDataSplit[i],
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示控制
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const agreementSelect = ref("");
|
||||||
|
|
||||||
|
const columns = ref([
|
||||||
|
{ colKey: "name", title: "名称", ellipsis: true },
|
||||||
|
{ colKey: "url", title: "分享链接", ellipsis: true },
|
||||||
|
{
|
||||||
|
colKey: "actions",
|
||||||
|
title: "操作",
|
||||||
|
cell: (h, { row }) => [
|
||||||
|
h("a", {
|
||||||
|
innerHTML: "复制",
|
||||||
|
onClick: () => {
|
||||||
|
copyToClipboard(row.url);
|
||||||
|
},
|
||||||
|
style: { cursor: "pointer" },
|
||||||
|
}),
|
||||||
|
h("span", "\u00A0\u00A0"),
|
||||||
|
h("a", {
|
||||||
|
innerHTML: "编辑",
|
||||||
|
onClick: () => {editNode(row.url.split("://")[0], row.url)},
|
||||||
|
style: { cursor: "pointer" },
|
||||||
|
}),
|
||||||
|
h("span", "\u00A0\u00A0"),
|
||||||
|
h("a", { innerHTML: "删除", style: { cursor: "pointer" } }),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
// let data = ref([{ key: "1", name: "tk", url: "vmess://" }]);
|
||||||
|
|
||||||
|
function copyToClipboard(text) {
|
||||||
|
try {
|
||||||
|
navigator.clipboard.writeText(text);
|
||||||
|
MessagePlugin.info("复制成功");
|
||||||
|
} catch (e) {
|
||||||
|
MessagePlugin.error("复制失败");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function readByClipboard() {
|
||||||
|
try {
|
||||||
|
navigator.clipboard.readText().then((text) => {
|
||||||
|
MessagePlugin.success("读取成功");
|
||||||
|
//解析链接
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
MessagePlugin.error("读取失败");
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addNode() {
|
||||||
|
vemssProps = {
|
||||||
|
name: "",
|
||||||
|
server: "127.0.0.1",
|
||||||
|
port: 1080,
|
||||||
|
userId: "",
|
||||||
|
alterId: 0,
|
||||||
|
security: "auto",
|
||||||
|
type: "none",
|
||||||
|
network: "tcp",
|
||||||
|
tls: "tls",
|
||||||
|
mask: "none"
|
||||||
|
};
|
||||||
|
agreementSelect.value = "";
|
||||||
|
dialogVisible.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function editNode(arg, url) {
|
||||||
|
// 测试
|
||||||
|
switch (arg) {
|
||||||
|
case "vmess":
|
||||||
|
let decodeUrl = JSON.parse(atob(url.split("://")[1])); //解码
|
||||||
|
console.log(decodeUrl);
|
||||||
|
vemssProps = {
|
||||||
|
name: decodeUrl.ps,
|
||||||
|
server: decodeUrl.add,
|
||||||
|
port: decodeUrl.port,
|
||||||
|
userId: decodeUrl.id,
|
||||||
|
alterId: decodeUrl.aid,
|
||||||
|
security: decodeUrl.scy,
|
||||||
|
type: "none",
|
||||||
|
network: decodeUrl.net,
|
||||||
|
tls: decodeUrl.tls,
|
||||||
|
mask: decodeUrl.type,
|
||||||
|
};
|
||||||
|
agreementSelect.value = "vmess";
|
||||||
|
dialogVisible.value = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
7
src/main.js
Normal file
7
src/main.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import TDesign from 'tdesign-vue-next'
|
||||||
|
import 'tdesign-vue-next/es/style/index.css';
|
||||||
|
|
||||||
|
createApp(App).use(TDesign).mount('#app')
|
||||||
79
src/style.css
Normal file
79
src/style.css
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
vite.config.js
Normal file
10
vite.config.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0'
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user