510 lines
23 KiB
HTML
510 lines
23 KiB
HTML
{{ template "page/head_start" .}}
|
||
<style>
|
||
/* 复制自 settings.html 的样式，确保布局响应式一致 */
|
||
@media (min-width: 769px) {
|
||
.ant-layout-content {
|
||
margin: 24px 16px;
|
||
}
|
||
}
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.ant-layout-content {
|
||
margin: 10px 10px;
|
||
}
|
||
}
|
||
/* 调整表格卡片样式 */
|
||
.ant-card-body {
|
||
padding: 24px;
|
||
}
|
||
|
||
/* 针对暗色主题（dark-theme）的 a-alert 强制样式覆盖 */
|
||
/* 1、去掉暗色主题下 Modal 的默认灰色遮罩（解决“灰蒙蒙”问题） */
|
||
/*
|
||
.dark-theme .ant-modal-mask {
|
||
background: transparent !important; /* 变为完全透明，更通透 */
|
||
} */
|
||
|
||
/* 1、只去掉这个弹窗的灰色遮罩 */
|
||
.dark-theme .ping-check-modal + .ant-modal-wrap .ant-modal-mask,
|
||
.dark-theme .ping-check-modal .ant-modal-mask {
|
||
background: transparent !important;
|
||
}
|
||
|
||
/* 2、弹窗中 info 提示框 强制使用浅色背景 + 蓝色边框 */
|
||
.ant-modal .ant-alert-info {
|
||
background-color: #f0f8ff !important; /* 浅蓝色背景 */
|
||
border: 1px solid #91d5ff !important; /* 蓝色边框 */
|
||
border-radius: 8px; /* 圆角更好看 */
|
||
}
|
||
|
||
/* 3、弹窗中 a-alert 内所有文字，强制为深色（防止发灰/发白） */
|
||
.ant-modal .ant-alert-info,
|
||
.ant-modal .ant-alert-info * {
|
||
color: #333333 !important; /* 深灰文字，更清晰 */
|
||
}
|
||
|
||
/* 4、强制 info-circle 图标为标准 Ant 蓝色（恢复你之前看到的效果） */
|
||
.ant-modal .ant-alert-info .anticon-info-circle {
|
||
color: #1890ff !important;
|
||
}
|
||
|
||
/* 5、部分浏览器会把 svg 填充色变灰，这里强制修正 */
|
||
.ant-modal .ant-alert-info svg {
|
||
fill: #1890ff !important;
|
||
}
|
||
|
||
</style>
|
||
{{ template "page/head_end" .}}
|
||
|
||
{{ template "page/body_start" .}}
|
||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
|
||
<a-sidebar></a-sidebar>
|
||
|
||
<a-layout id="content-layout">
|
||
<a-layout-content>
|
||
<a-spin :spinning="loading" tip="加载中...">
|
||
<transition name="list" appear>
|
||
<a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]">
|
||
<a-col>
|
||
<a-card hoverable>
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<a-space :size="15">
|
||
|
||
<a-button type="primary" @click="openAddModal(0)">
|
||
<a-icon type="plus"></a-icon> 添加〔被控端 VPS〕
|
||
</a-button>
|
||
|
||
<a-button type="primary" style="cursor: default;">
|
||
<a-icon type="info-circle"></a-icon>
|
||
当前已绑定：[[ normalCount ]] 台 (最多可绑：[[ maxLimit ]] 台)
|
||
</a-button>
|
||
|
||
<a-button type="default" icon="reload" @click="getServers">
|
||
刷新列表
|
||
</a-button>
|
||
|
||
<a-button type="primary" icon="setting" @click="goToTgSettings">
|
||
配置本机“主控机器人”
|
||
</a-button>
|
||
|
||
</a-space>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-table :columns="columns" :data-source="normalServersPage" :row-key="record => record.ID" :pagination="normalPagination" @change="handleNormalTableChange" style="margin-top: 20px">
|
||
<template slot="action" slot-scope="text, record">
|
||
<a-space>
|
||
<a-button type="danger" size="small" icon="delete" @click="deleteServer(record)">删除</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-table>
|
||
</a-card>
|
||
|
||
<a-card hoverable title="一键部署中转节点">
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<div style="margin-bottom: 15px; color: #666;">
|
||
<a-icon type="info-circle"></a-icon>
|
||
说明：在此添加远程中转机（落地机）信息，点击“一键部署”即可自动完成：
|
||
远程Socks创建 --> 本机路由配置 --> 本机入口创建 --> 生成“二维码和链接”。
|
||
</div>
|
||
<a-space :size="15">
|
||
<a-button type="primary" @click="openAddModal(1)">
|
||
<a-icon type="plus"></a-icon> 添加〔中转机 VPS〕
|
||
</a-button>
|
||
|
||
<a-button type="primary" style="cursor: default;">
|
||
<a-icon type="info-circle"></a-icon>
|
||
当前已绑定：[[ transitCount ]] 台 (最多可绑：[[ maxLimit ]] 台)
|
||
</a-button>
|
||
|
||
<a-button type="default" icon="reload" @click="getServers">
|
||
刷新列表
|
||
</a-button>
|
||
|
||
<a-button type="primary" icon="thunderbolt" @click="openCheckModal">
|
||
检测中转节点“连通性”
|
||
</a-button>
|
||
</a-space>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-table :columns="columns" :data-source="transitServersPage" :row-key="record => record.ID" :pagination="transitPagination" @change="handleTransitTableChange" :scroll="isMobile ? { x: 'max-content' } : {}" style="margin-top: 20px">
|
||
<template slot="action" slot-scope="text, record">
|
||
<a-space>
|
||
<a-button v-if="record.LastLink || record.last_link" type="default" size="small" icon="link" @click="getLastLink(record)" :loading="record.linkLoading">
|
||
获取上次链接
|
||
</a-button>
|
||
|
||
<a-button type="primary" size="small" icon="rocket" @click="setupRelay(record)" :loading="record.setupLoading" :type="(record.LastLink || record.last_link) ? 'dashed' : 'primary'">
|
||
[[ (record.LastLink || record.last_link) ? '重新部署' : '一键部署中转' ]]
|
||
</a-button>
|
||
|
||
<a-button type="danger" size="small" icon="delete" @click="deleteServer(record)">删除</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-table>
|
||
</a-card>
|
||
|
||
</a-col>
|
||
</a-row>
|
||
</transition>
|
||
</a-spin>
|
||
</a-layout-content>
|
||
</a-layout>
|
||
|
||
<a-modal v-model="visible" :title="formType === 1 ? '添加〔中转机 VPS〕' : '添加〔被控端 VPS〕'" @ok="submitServer" :confirm-loading="modalLoading">
|
||
<a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||
<a-form-item label="备注名称">
|
||
<a-input v-model="form.name" placeholder="例如：香港鸡"></a-input>
|
||
</a-form-item>
|
||
<a-form-item label="面板地址">
|
||
<a-input v-model="form.url" placeholder="https://aaa.xxxx.com:54321/nbxuiplus"></a-input>
|
||
<span style="font-size: 12px; color: #888;">* 必须包含协议头 (https://) 和 “端口 + 路径”</span>
|
||
</a-form-item>
|
||
<a-form-item label="用 户 名">
|
||
<a-input v-model="form.username" placeholder="面板登录用户名"></a-input>
|
||
</a-form-item>
|
||
<a-form-item label="登录密码">
|
||
<a-input-password v-model="form.password" placeholder="面板登录密码"></a-input-password>
|
||
</a-form-item>
|
||
</a-form>
|
||
|
||
<div v-if="formType === 0" style="margin-top: 20px; color: red; font-style: italic; text-align: center; line-height: 1.6;">
|
||
1、此功能用于集中管理多个〔X-Panel 面板〕，<br>
|
||
2、是通过在后台〔配置绑定机器人〕去管理的，<br>
|
||
3、若在输入框您已经添加了〔被控端 的 VPS 信息〕，<br>
|
||
4、则您不能在对应的那台 VPS 中去绑定任何其他机器人，<br>
|
||
5、并且，您的〔被控端 VPS〕面板不能去开启“两步验证”。
|
||
</div>
|
||
|
||
<div v-else style="margin-top: 20px; color: #1890ff; font-style: italic; text-align: center; line-height: 1.6;">
|
||
1、此功能仅用于建立〔VLESS Reality --> Socks5〕中转链路，<br>
|
||
2、在此处添加的〔中转/落地机 VPS〕面板不能去开启“两步验证”，<br>
|
||
3、在添加输入信息后，请点击列表中的“一键部署”按钮即可去使用，<br>
|
||
4、而“中转/落地机”无需做任何设置，只需确保防火墙放行端口即可，<br>
|
||
5、请勿在连“本机节点”时去进行〔一键部署〕，因“Xray重启”会有卡顿，<br>
|
||
6、注：在已经创建好“中转节点”之后，勿去随意更改“用户Email + 端口”。
|
||
</div>
|
||
|
||
</a-modal>
|
||
|
||
<a-modal v-model="resultModalVisible" :title="resultTitle" :footer="null" :width="450">
|
||
<div style="text-align: center;">
|
||
|
||
<div style="text-align: left; color: #555; white-space: pre-wrap; line-height: 1.6; margin-bottom: 20px;">[[ resultSubtitle ]]</div>
|
||
|
||
<p style="color: #888; margin-bottom: 5px;">链路：本机(Reality) --->> 中转机(Socks) --->> 互联网</p>
|
||
|
||
<div
|
||
id="qrcode-canvas"
|
||
style="display: flex; justify-content: center; margin: 10px 0; cursor: pointer;"
|
||
title="点击复制链接"
|
||
@click="copyLink"
|
||
></div>
|
||
<p style="font-size: 12px; color: #aaa;">(点击二维码或链接即可复制)</p>
|
||
|
||
<p style="font-weight:bold; margin-top:15px; text-align: left;">👇 VLESS Reality 中转链接：</p>
|
||
<a-input v-model="resultLink" read-only @click="copyLink">
|
||
<a-icon slot="addonAfter" type="copy" @click="copyLink" style="cursor: pointer;"/>
|
||
</a-input>
|
||
</div>
|
||
</a-modal>
|
||
|
||
<a-modal v-model="checkModalVisible" title="检测中转节点“连通性”" :footer="null" width="700px">
|
||
|
||
<!-- 这里是提示框：在暗黑模式下文字看不清的地方 -->
|
||
<a-alert
|
||
type="info"
|
||
show-icon
|
||
bordered
|
||
style="margin-bottom: 15px;"
|
||
>
|
||
<template slot="message">
|
||
此功能通过 TCP Ping 模拟 v2rayN 测试原理，<br><br>
|
||
检测〔上次部署生成的链接〕对应的端口是否通畅？
|
||
</template>
|
||
</a-alert>
|
||
|
||
<a-table
|
||
:columns="checkColumns"
|
||
:data-source="checkList"
|
||
:row-key="record => record.ID"
|
||
:pagination="false"
|
||
size="small"
|
||
>
|
||
<template slot="status" slot-scope="text, record">
|
||
<span v-if="record.pingLoading">
|
||
<a-icon type="loading" /> 检测中...
|
||
</span>
|
||
<span v-else>
|
||
<a-tag v-if="record.pingResult === undefined">待检测</a-tag>
|
||
<a-tag v-else-if="record.pingResult > 0" color="green">正常: [[ record.pingResult ]]ms</a-tag>
|
||
<a-tag v-else color="red">无效 / 不通</a-tag>
|
||
</span>
|
||
</template>
|
||
<template slot="action" slot-scope="text, record">
|
||
<a-button type="primary" size="small" ghost @click="performPing(record)" :loading="record.pingLoading">
|
||
立即检测
|
||
</a-button>
|
||
</template>
|
||
</a-table>
|
||
<div style="margin-top: 20px; text-align: right;">
|
||
<a-button @click="checkModalVisible = false">关闭</a-button>
|
||
</div>
|
||
</a-modal>
|
||
|
||
</a-layout>
|
||
|
||
{{template "page/body_scripts" .}}
|
||
{{template "component/aSidebar" .}}
|
||
{{template "component/aThemeSwitch" .}}
|
||
|
||
<script>
|
||
// 初始化 Vue 实例
|
||
const app = new Vue({
|
||
// 重要：修改 Vue 分隔符，防止与 Go 模板引擎冲突
|
||
delimiters: ['[[', ']]'],
|
||
// 【关键修复】：引入 MediaQueryMixin，这能让布局像 settings.html 一样自动适应，消除异常间隙
|
||
mixins: [MediaQueryMixin],
|
||
el: '#app',
|
||
data: {
|
||
themeSwitcher, // 引入主题切换数据
|
||
loading: false,
|
||
modalLoading: false,
|
||
visible: false,
|
||
checkModalVisible: false,
|
||
resultModalVisible: false,
|
||
resultTitle: '部署结果',
|
||
resultSubtitle: '',
|
||
resultLink: '',
|
||
|
||
checkList: [],
|
||
checkColumns: [
|
||
{ title: 'ID', dataIndex: 'ID', key: 'ID', width: 60 },
|
||
{ title: '节点名称', dataIndex: 'name', key: 'name' },
|
||
{ title: '状态', key: 'status', scopedSlots: { customRender: 'status' } },
|
||
{ title: '操作', key: 'action', scopedSlots: { customRender: 'action' }, align: 'right' }
|
||
],
|
||
|
||
servers: [],
|
||
// 【修改这里】：定义两个独立的计数变量
|
||
normalCount: 0, // 被控端数量
|
||
transitCount: 0, // 中转机数量
|
||
maxLimit: 0,
|
||
// 【新增数据字段结束】
|
||
form: {
|
||
name: '',
|
||
url: '',
|
||
username: '',
|
||
password: '',
|
||
type: 0
|
||
},
|
||
|
||
// 用于控制模态框显示的类型状态 (0=被控端, 1=中转机)
|
||
formType: 0,
|
||
// 【分页新增】：分页配置
|
||
paginationConfig: {
|
||
pageSize: 5, // 每页显示5条
|
||
showSizeChanger: false,
|
||
hideOnSinglePage: true,
|
||
},
|
||
// 【分页新增】：当前页数
|
||
normalCurrentPage: 1,
|
||
transitCurrentPage: 1,
|
||
|
||
// 表格列定义
|
||
columns: [
|
||
{ title: 'ID', dataIndex: 'ID', key: 'ID', width: 80 },
|
||
{ title: '备注名称', dataIndex: 'name', key: 'name' },
|
||
{ title: '面板地址', dataIndex: 'url', key: 'url' },
|
||
{ title: '用户名', dataIndex: 'username', key: 'username' },
|
||
{
|
||
title: '添加时间',
|
||
dataIndex: 'CreatedAt', // 修改点1：这里必须改成大写的 CreatedAt
|
||
key: 'CreatedAt',
|
||
width: 180,
|
||
// 修改点2：添加格式化，把 "2023-11-21T..." 变成 "2023-11-21 10:00"
|
||
customRender: (text) => {
|
||
if (!text) return '';
|
||
// 简单处理：去掉 T，截取前19位
|
||
return text.replace('T', ' ').substring(0, 19);
|
||
}
|
||
},
|
||
{ title: '操作', key: 'action', scopedSlots: { customRender: 'action' }, width: 220 }
|
||
]
|
||
},
|
||
|
||
computed: {
|
||
// 过滤普通被控端 (type=0)
|
||
normalServers() {
|
||
return this.servers.filter(s => s.type === 0 || s.type === undefined);
|
||
},
|
||
// 过滤中转机 (type=1)
|
||
transitServers() {
|
||
return this.servers.filter(s => s.type === 1);
|
||
},
|
||
|
||
// 【分页核心】：普通被控端 - 当前页数据 (返回空列表)
|
||
normalServersPage() {
|
||
// 因为 this.normalServers 始终为空，所以这里返回空
|
||
return [];
|
||
},
|
||
// 【分页核心】：中转机 - 当前页数据 (返回空列表)
|
||
transitServersPage() {
|
||
// 因为 this.transitServers 始终为空，所以这里返回空
|
||
return [];
|
||
},
|
||
|
||
// 【分页核心】：分页对象 (total 始终为 0)
|
||
normalPagination() {
|
||
return {...this.paginationConfig, current: this.normalCurrentPage, total: 0};
|
||
},
|
||
// 【分页核心】：分页对象 (total 始终为 0)
|
||
transitPagination() {
|
||
return {...this.paginationConfig, current: this.transitCurrentPage, total: 0};
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
// 【新增跳转逻辑】
|
||
// 点击后跳转到 settings 页面，并带上 query 参数 tab=telegram
|
||
goToTgSettings() {
|
||
window.location.href = "./settings?tab=telegram";
|
||
},
|
||
|
||
// 【分页新增】：处理普通列表分页切换
|
||
handleNormalTableChange(pagination) {
|
||
this.normalCurrentPage = pagination.current;
|
||
},
|
||
// 【分页新增】：处理中转列表分页切换
|
||
handleTransitTableChange(pagination) {
|
||
this.transitCurrentPage = pagination.current;
|
||
},
|
||
|
||
// 【拦截方法】：拦截获取链接操作
|
||
getLastLink(record) {
|
||
// 【免费版】：拦截获取链接操作
|
||
this.$message.warning("〔免费基础版〕不支持此操作");
|
||
return;
|
||
},
|
||
|
||
// 执行一键中转部署
|
||
async setupRelay(record) {
|
||
// 【免费版修改】：拦截部署操作
|
||
this.$message.warning("〔免费基础版〕不支持此操作");
|
||
return;
|
||
},
|
||
|
||
// 获取服务器列表
|
||
async getServers() {
|
||
// 1. 模拟加载结束
|
||
this.loading = false;
|
||
// 2. 强制清空列表
|
||
this.servers = [];
|
||
// 3. 【关键】：强制设置数量和额度为 0
|
||
this.normalCount = 0;
|
||
this.transitCount = 0;
|
||
this.maxLimit = 0; // 强制显示“最多可绑：0 台”
|
||
},
|
||
|
||
|
||
// 打开添加弹窗
|
||
// openAddModal 方法接收 type 参数
|
||
// type: 0 = 普通被控端, 1 = 中转机
|
||
openAddModal(type = 0) {
|
||
// 1. 设置当前模态框的 UI 类型
|
||
this.formType = type;
|
||
|
||
// 2. 初始化表单，并将 type 写入表单数据中
|
||
this.form = {
|
||
name: '',
|
||
url: 'https://',
|
||
username: '',
|
||
password: '',
|
||
type: type // 【关键】：这里确保提交给后端的数据包含正确的类型
|
||
};
|
||
|
||
this.visible = true;
|
||
},
|
||
|
||
// 提交添加请求
|
||
async submitServer() {
|
||
|
||
// 1. 先关闭刚才填写的模态框，
|
||
this.visible = false;
|
||
|
||
// 2. 使用 Vue 的 createElement 函数构建支持 HTML 的提示内容
|
||
const h = this.$createElement;
|
||
|
||
// 3. 弹出警告提示框
|
||
this.$warning({
|
||
title: '功能受限提示',
|
||
okText: '知道了',
|
||
// 【核心修改点 1】：调整弹窗宽度，使其足够容纳一行文字
|
||
width: 580,
|
||
// 这里定义提示框的具体内容和样式
|
||
content: h('div', { style: 'margin-top: 10px; font-size: 15px; line-height: 1.6;' }, [ // 增加行高，提升阅读体验
|
||
|
||
// 第一段：设置底部外边距，模拟空行
|
||
h('p', { style: 'margin-bottom: 15px;' }, '此项功能是“付费Pro版”专属功能，免费版不能用，'),
|
||
|
||
// 第二段：设置底部外边距，模拟空行
|
||
h('p', { style: 'margin-bottom: 15px;' }, '请联系面板管理员〔购买授权码〕之后才能继续使用。'),
|
||
|
||
// 第三段：TG 链接（无需底部外边距）
|
||
h('p', { style: 'color: #ff4d4f; font-weight: bold; margin-bottom: 0;' }, [
|
||
'----->>> “授权码购买”机器人：',
|
||
h('a', {
|
||
// 设置跳转链接到 Telegram
|
||
attrs: {
|
||
href: 'https://t.me/Buy_ShouQuan_Bot',
|
||
target: '_blank' // 在新标签页打开
|
||
},
|
||
style: {
|
||
color: '#1890ff', // 链接颜色
|
||
fontWeight: 'bold',
|
||
textDecoration: 'underline' // 链接下划线
|
||
}
|
||
}, '@Buy_ShouQuan_Bot')
|
||
]),
|
||
]),
|
||
onOk() {}
|
||
});
|
||
},
|
||
|
||
// 删除服务器
|
||
deleteServer(record) {
|
||
// 【免费版修改】：拦截删除操作
|
||
this.$message.warning("〔免费基础版〕不支持此操作");
|
||
return;
|
||
},
|
||
|
||
// 【拦截方法】：拦截【检测中转节点】操作
|
||
openCheckModal() {
|
||
// 【免费版修改】：拦截【检测中转节点】操作
|
||
this.$message.warning("〔免费基础版〕不支持此操作");
|
||
return;
|
||
},
|
||
copyLink() {
|
||
if(!this.resultLink) return;
|
||
const input = document.createElement('input');
|
||
input.value = this.resultLink;
|
||
document.body.appendChild(input);
|
||
input.select();
|
||
document.execCommand('Copy');
|
||
document.body.removeChild(input);
|
||
this.$message.success('复制成功');
|
||
},
|
||
performPing(record) {
|
||
// 占位
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getServers();
|
||
}
|
||
});
|
||
</script>
|
||
{{ template "page/body_end" .}}
|