Import x-panel source
This commit is contained in:
58
web/html/common/page.html
Normal file
58
web/html/common/page.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{{ define "page/head_start" }}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<link rel="stylesheet" href="{{ .base_path }}assets/ant-design-vue/antd.min.css">
|
||||
<link rel="stylesheet" href="{{ .base_path }}assets/css/custom.min.css?{{ .cur_ver }}">
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
/* vazirmatn-regular - arabic_latin_latin-ext */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Vazirmatn';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('{{ .base_path }}assets/Vazirmatn-UI-NL-Regular.woff2') format('woff2');
|
||||
unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039;
|
||||
}
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Vazirmatn', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
</style>
|
||||
<title>{{ .host }} – {{ i18n .title}}</title>
|
||||
{{ end }}
|
||||
|
||||
{{ define "page/head_end" }}
|
||||
</head>
|
||||
{{ end }}
|
||||
|
||||
{{ define "page/body_start" }}
|
||||
<body>
|
||||
<div id="message"></div>
|
||||
{{ end }}
|
||||
|
||||
{{ define "page/body_scripts" }}
|
||||
<script src="{{ .base_path }}assets/vue/vue.min.js?{{ .cur_ver }}"></script>
|
||||
<script src="{{ .base_path }}assets/moment/moment.min.js"></script>
|
||||
<script src="{{ .base_path }}assets/ant-design-vue/antd.min.js"></script>
|
||||
<script src="{{ .base_path }}assets/axios/axios.min.js?{{ .cur_ver }}"></script>
|
||||
<script src="{{ .base_path }}assets/qs/qs.min.js"></script>
|
||||
<script src="{{ .base_path }}assets/js/axios-init.js?{{ .cur_ver }}"></script>
|
||||
<script src="{{ .base_path }}assets/js/util/date-util.js?{{ .cur_ver }}"></script>
|
||||
<script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
|
||||
<script>
|
||||
const basePath = '{{ .base_path }}';
|
||||
axios.defaults.baseURL = basePath;
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
{{ define "page/body_end" }}
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
316
web/html/component/aClientTable.html
Normal file
316
web/html/component/aClientTable.html
Normal file
@@ -0,0 +1,316 @@
|
||||
{{define "component/aClientTable"}}
|
||||
<template slot="actions" slot-scope="text, client, index">
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ i18n "qrCode" }}</template>
|
||||
<a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ i18n "pages.client.edit" }}</template>
|
||||
<a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ i18n "info" }}</template>
|
||||
<a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
|
||||
<a-popconfirm @confirm="resetClientTraffic(client,record.id,false)" title='{{ i18n "pages.inbounds.resetTrafficContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "reset"}}' cancel-text='{{ i18n "cancel"}}'>
|
||||
<a-icon slot="icon" type="question-circle-o" :style="{ color: 'var(--color-primary-100)'}"></a-icon>
|
||||
<a-icon :style="{ fontSize: '24px', cursor: 'pointer' }" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span :style="{ color: '#FF4D4F' }"> {{ i18n "delete"}}</span>
|
||||
</template>
|
||||
<a-popconfirm @confirm="delClient(record.id,client,false)" title='{{ i18n "pages.inbounds.deleteClientContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "delete"}}' ok-type="danger" cancel-text='{{ i18n "cancel"}}'>
|
||||
<a-icon slot="icon" type="question-circle-o" :style="{ color: '#e04141' }"></a-icon>
|
||||
<a-icon :style="{ fontSize: '24px', cursor: 'pointer' }" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template slot="enable" slot-scope="text, client, index">
|
||||
<a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch>
|
||||
</template>
|
||||
<template slot="online" slot-scope="text, client, index">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content" >
|
||||
{{ i18n "lastOnline" }}: [[ formatLastOnline(client.email) ]]
|
||||
</template>
|
||||
<template v-if="client.enable && isClientOnline(client.email)">
|
||||
<a-tag color="green">{{ i18n "online" }}</a-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag>{{ i18n "offline" }}</a-tag>
|
||||
</template>
|
||||
</a-popover>
|
||||
</template>
|
||||
<template slot="client" slot-scope="text, client">
|
||||
<a-space direction="horizontal" :size="2">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
|
||||
<template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
|
||||
<template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
|
||||
</template>
|
||||
<a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
|
||||
</a-tooltip>
|
||||
<a-space direction="vertical" :size="2">
|
||||
<span class="client-email">[[ client.email ]]</span>
|
||||
<template v-if="client.comment && client.comment.trim()">
|
||||
<a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="title">
|
||||
[[ client.comment ]]
|
||||
</template>
|
||||
<span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
|
||||
</a-tooltip>
|
||||
<span v-else class="client-comment">[[ client.comment ]]</span>
|
||||
</template>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</template>
|
||||
<template slot="traffic" slot-scope="text, client">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content" v-if="client.email">
|
||||
<table cellpadding="2" width="100%">
|
||||
<tr>
|
||||
<td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
|
||||
<td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
|
||||
</tr>
|
||||
<tr v-if="client.totalGB > 0">
|
||||
<td>{{ i18n "remained" }}</td>
|
||||
<td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
<table>
|
||||
<tr class="tr-table-box">
|
||||
<td class="tr-table-rt"> [[ SizeFormatter.sizeFormat(getSumStats(record, client.email)) ]] </td>
|
||||
<td class="tr-table-bar" v-if="!client.enable">
|
||||
<a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
|
||||
</td>
|
||||
<td class="tr-table-bar" v-else-if="client.totalGB > 0">
|
||||
<a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
|
||||
</td>
|
||||
<td v-else class="infinite-bar tr-table-bar">
|
||||
<a-progress :show-info="false" :percent="100"></a-progress>
|
||||
</td>
|
||||
<td class="tr-table-lt">
|
||||
<template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
|
||||
<span v-else class="tr-infinity-ch">∞</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<template slot="allTime" slot-scope="text, client">
|
||||
<a-tag>[[ SizeFormatter.sizeFormat(getAllTimeClient(record, client.email)) ]]</a-tag>
|
||||
</template>
|
||||
<template slot="expiryTime" slot-scope="text, client, index">
|
||||
<template v-if="client.expiryTime !=0 && client.reset >0">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content">
|
||||
<span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
|
||||
</span>
|
||||
<span v-else>
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
[[ DateUtil.formatMillis(client._expiryTime) ]]
|
||||
</template>
|
||||
<template v-else>
|
||||
[[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<table>
|
||||
<tr class="tr-table-box">
|
||||
<td class="tr-table-rt"> [[ remainedDays(client.expiryTime) ]] </td>
|
||||
<td class="infinite-bar tr-table-bar">
|
||||
<a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
|
||||
</td>
|
||||
<td class="tr-table-lt">[[ client.reset + "d" ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</a-popover>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content">
|
||||
<span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
|
||||
</span>
|
||||
<span v-else>
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
[[ DateUtil.formatMillis(client._expiryTime) ]]
|
||||
</template>
|
||||
<template v-else>
|
||||
[[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
|
||||
</a-popover>
|
||||
<a-tag v-else :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" :style="{ border: 'none' }" class="infinite-tag">
|
||||
<svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
|
||||
<path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
<template slot="actionMenu" slot-scope="text, client, index">
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-icon @click="e => e.preventDefault()" type="ellipsis" :style="{ fontSize: '20px' }"></a-icon>
|
||||
<a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
|
||||
<a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);">
|
||||
<a-icon :style="{ fontSize: '14px' }" type="qrcode"></a-icon>
|
||||
{{ i18n "qrCode" }}
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="openEditClient(record.id,client);">
|
||||
<a-icon :style="{ fontSize: '14px' }" type="edit"></a-icon>
|
||||
{{ i18n "pages.client.edit" }}
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="showInfo(record.id,client);">
|
||||
<a-icon :style="{ fontSize: '14px' }" type="info-circle"></a-icon>
|
||||
{{ i18n "info" }}
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0">
|
||||
<a-icon :style="{ fontSize: '14px' }" type="retweet"></a-icon>
|
||||
{{ i18n "pages.inbounds.resetTraffic" }}
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)">
|
||||
<a-icon :style="{ fontSize: '14px' }" type="delete"></a-icon>
|
||||
<span :style="{ color: '#FF4D4F' }"> {{ i18n "delete"}}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-switch v-model="client.enable" size="small" @change="switchEnableClient(record.id,client)"></a-switch>
|
||||
{{ i18n "enable"}}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template slot="info" slot-scope="text, client, index">
|
||||
<a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
|
||||
<template slot="content">
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="3" :style="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[ SizeFormatter.sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] </td>
|
||||
<td width="120px" v-if="!client.enable">
|
||||
<a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
|
||||
</td>
|
||||
<td width="120px" v-else-if="client.totalGB > 0">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content" v-if="client.email">
|
||||
<table cellpadding="2" width="100%">
|
||||
<tr>
|
||||
<td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
|
||||
<td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "remained" }}</td>
|
||||
<td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
<a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
|
||||
</a-popover>
|
||||
</td>
|
||||
<td width="120px" v-else class="infinite-bar">
|
||||
<a-progress :stroke-color="themeSwitcher.isDarkTheme ? '#2c1e32':'#F2EAF1'" :show-info="false" :percent="100"></a-progress>
|
||||
</td>
|
||||
<td width="80px">
|
||||
<template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
|
||||
<span v-else class="tr-infinity-ch">∞</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" :style="{ textAlign: 'center' }">
|
||||
<a-divider :style="{ margin: '0', borderCollapse: 'separate' }"></a-divider>
|
||||
{{ i18n "pages.inbounds.expireDate" }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<template v-if="client.expiryTime !=0 && client.reset >0">
|
||||
<td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[ remainedDays(client.expiryTime) ]] </td>
|
||||
<td width="120px" class="infinite-bar">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content">
|
||||
<span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
|
||||
</span>
|
||||
<span v-else>
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
[[ DateUtil.formatMillis(client._expiryTime) ]]
|
||||
</template>
|
||||
<template v-else>
|
||||
[[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
|
||||
</a-popover>
|
||||
</td>
|
||||
<td width="60px">[[ client.reset + "d" ]]</td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td colspan="3" :style="{ textAlign: 'center' }">
|
||||
<a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content">
|
||||
<span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
|
||||
</span>
|
||||
<span v-else>
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
[[ DateUtil.formatMillis(client._expiryTime) ]]
|
||||
</template>
|
||||
<template v-else>
|
||||
[[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
|
||||
</a-popover>
|
||||
<a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">
|
||||
<svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
|
||||
<path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a-tag>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
<a-badge>
|
||||
<a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
|
||||
<a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
|
||||
<a-icon type="solution"></a-icon>
|
||||
</a-button>
|
||||
</a-badge>
|
||||
</a-popover>
|
||||
</template>
|
||||
<template slot="createdAt" slot-scope="text, client, index">
|
||||
<template v-if="client.created_at">
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
[[ DateUtil.formatMillis(client.created_at) ]]
|
||||
</template>
|
||||
<template v-else>
|
||||
[[ DateUtil.convertToJalalian(moment(client.created_at)) ]]
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
-
|
||||
</template>
|
||||
</template>
|
||||
<template slot="updatedAt" slot-scope="text, client, index">
|
||||
<template v-if="client.updated_at">
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
[[ DateUtil.formatMillis(client.updated_at) ]]
|
||||
</template>
|
||||
<template v-else>
|
||||
[[ DateUtil.convertToJalalian(moment(client.updated_at)) ]]
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
-
|
||||
</template>
|
||||
</template>
|
||||
{{end}}
|
||||
42
web/html/component/aCustomStatistic.html
Normal file
42
web/html/component/aCustomStatistic.html
Normal file
@@ -0,0 +1,42 @@
|
||||
{{define "component/customStatistic"}}
|
||||
<template>
|
||||
<a-statistic :title="title" :value="value">
|
||||
<template #prefix>
|
||||
<slot name="prefix"></slot>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<slot name="suffix"></slot>
|
||||
</template>
|
||||
</a-statistic>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "component/aCustomStatistic"}}
|
||||
<style>
|
||||
.dark .ant-statistic-content {
|
||||
color: var(--dark-color-text-primary)
|
||||
}
|
||||
.dark .ant-statistic-title {
|
||||
color: rgba(255, 255, 255, 0.55)
|
||||
}
|
||||
.ant-statistic-content {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
Vue.component('a-custom-statistic', {
|
||||
props: {
|
||||
'title': {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
'value': {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
template: `{{template "component/customStatistic"}}`,
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
72
web/html/component/aPersianDatepicker.html
Normal file
72
web/html/component/aPersianDatepicker.html
Normal file
@@ -0,0 +1,72 @@
|
||||
{{define "component/persianDatepickerTemplate"}}
|
||||
<template>
|
||||
<div>
|
||||
<a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
|
||||
@input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
|
||||
:placeholder="placeholder">
|
||||
<template #addonAfter>
|
||||
<a-icon type="calendar" :style="{ fontSize: '14px', opacity: '0.5' }" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "component/aPersianDatepicker"}}
|
||||
<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
|
||||
<script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
|
||||
<script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
|
||||
<script>
|
||||
const persianDatepicker = {};
|
||||
|
||||
Vue.component('a-persian-datepicker', {
|
||||
props: {
|
||||
'format': {
|
||||
type: undefined,
|
||||
required: false,
|
||||
},
|
||||
'value': {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
'placeholder': {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
template: `{{template "component/persianDatepickerTemplate"}}`,
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
persianDatepicker,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: function (date) {
|
||||
this.date = this.convertToJalalian(date)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.date = this.convertToJalalian(this.value)
|
||||
this.listenToDatepicker()
|
||||
},
|
||||
methods: {
|
||||
convertToGregorian(date) {
|
||||
return date ? moment(moment(date, 'jYYYY/jMM/jDD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')) : null
|
||||
},
|
||||
convertToJalalian(date) {
|
||||
return date && moment.isMoment(date) ? date.format('jYYYY/jMM/jDD HH:mm:ss') : null
|
||||
},
|
||||
listenToDatepicker() {
|
||||
jalaliDatepicker.startWatch({
|
||||
time: true,
|
||||
zIndex: '9999',
|
||||
hideAfterChange: true,
|
||||
useDropDownYears: false,
|
||||
changeMonthRotateYear: true,
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
49
web/html/component/aSettingListItem.html
Normal file
49
web/html/component/aSettingListItem.html
Normal file
@@ -0,0 +1,49 @@
|
||||
{{define "component/settingListItem"}}
|
||||
<a-list-item :style="{ padding: padding }">
|
||||
<a-row :gutter="[8,16]">
|
||||
<a-col :lg="24" :xl="12">
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
<template #description>
|
||||
<slot name="description"></slot>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-col>
|
||||
<a-col :lg="24" :xl="12">
|
||||
<slot name="control"></slot>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-list-item>
|
||||
{{end}}
|
||||
|
||||
{{define "component/aSettingListItem"}}
|
||||
<script>
|
||||
Vue.component('a-setting-list-item', {
|
||||
props: {
|
||||
'paddings': {
|
||||
type: String,
|
||||
required: false,
|
||||
defaultValue: "default",
|
||||
validator: function (value) {
|
||||
return ['small', 'default'].includes(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
template: `{{ template "component/settingListItem" }}`,
|
||||
computed: {
|
||||
padding() {
|
||||
switch (this.paddings) {
|
||||
case "small":
|
||||
return "10px 20px !important"
|
||||
break;
|
||||
case "default":
|
||||
return "20px !important"
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
{{end}}
|
||||
218
web/html/component/aSidebar.html
Normal file
218
web/html/component/aSidebar.html
Normal file
@@ -0,0 +1,218 @@
|
||||
{{define "component/sidebar/content"}}
|
||||
<template>
|
||||
<div class="ant-sidebar">
|
||||
<a-layout-sider :theme="themeSwitcher.currentTheme" collapsible :collapsed="collapsed"
|
||||
@collapse="(isCollapsed, type) => collapseHandle(isCollapsed, type)" breakpoint="md" width="200">
|
||||
|
||||
<div class="sider-flex-wrapper">
|
||||
|
||||
<div class="sider-top">
|
||||
<a-theme-switch></a-theme-switch>
|
||||
</div>
|
||||
|
||||
<div class="sider-menu-container">
|
||||
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
|
||||
@click="({key}) => openLink(key)">
|
||||
<a-menu-item v-for="tab in tabs" :key="tab.key">
|
||||
<a-icon :type="tab.icon"></a-icon>
|
||||
<span v-text="tab.title"></span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-copyright-wrapper" v-show="!collapsed">
|
||||
<div class="copyright-content">
|
||||
<div class="brand-row">
|
||||
<a-icon type="safety-certificate" theme="filled" class="brand-icon"></a-icon>
|
||||
<span class="brand-name">X-Panel</span>
|
||||
</div>
|
||||
<div class="year-row">
|
||||
<span>Copyright <a-icon type="copyright"></a-icon> 2022-2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-drawer placement="left" :closable="false" @close="closeDrawer" :visible="visible"
|
||||
:wrap-class-name="themeSwitcher.currentTheme" :wrap-style="{ padding: 0 }" :style="{ height: '100%' }">
|
||||
<div class="drawer-handle" @click="toggleDrawer" slot="handle">
|
||||
<a-icon :type="visible ? 'close' : 'menu-fold'"></a-icon>
|
||||
</div>
|
||||
<a-theme-switch></a-theme-switch>
|
||||
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
|
||||
@click="({key}) => openLink(key)">
|
||||
<a-menu-item v-for="tab in tabs" :key="tab.key">
|
||||
<a-icon :type="tab.icon"></a-icon>
|
||||
<span v-text="tab.title"></span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "component/aSidebar"}}
|
||||
<style>
|
||||
/* 1. 基础高度设置 */
|
||||
.ant-sidebar, .ant-sidebar > .ant-layout-sider {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* [布局容器] */
|
||||
.sider-flex-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column; /* 从上到下排列 */
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* [菜单容器] */
|
||||
.sider-menu-container {
|
||||
/* [修改说明]：删除了 flex: 1。菜单高度现在由内容决定，不会自动撑满 */
|
||||
/* 添加 flex-shrink: 1 只是为了防止屏幕特别矮时菜单被切断，让它能出滚动条 */
|
||||
flex-shrink: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sider-menu-container .ant-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* 2. 版权区域 */
|
||||
.sidebar-copyright-wrapper {
|
||||
/* [核心修改]：margin-top: auto 是关键 */
|
||||
/* 它的作用是：自动占据上方所有的空白空间，从而把自己推到容器的最底部 */
|
||||
margin-top: auto;
|
||||
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
padding: 15px 0 20px 0;
|
||||
text-align: center;
|
||||
background: inherit;
|
||||
/* [已删除] border-top: ... (那条横线已经彻底删除了) */
|
||||
}
|
||||
|
||||
/* 3. 品牌行样式 */
|
||||
.brand-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
opacity: 0.85;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 4. 年份版权行样式 */
|
||||
.year-row {
|
||||
font-size: 11px;
|
||||
opacity: 0.45;
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.year-row .anticon-copyright {
|
||||
font-size: 10px;
|
||||
margin: 0 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 滚动条样式美化 */
|
||||
.sider-menu-container::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.sider-menu-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.sider-menu-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const SIDEBAR_COLLAPSED_KEY = "isSidebarCollapsed"
|
||||
|
||||
Vue.component('a-sidebar', {
|
||||
data() {
|
||||
return {
|
||||
tabs: [
|
||||
{
|
||||
key: '{{ .base_path }}panel/',
|
||||
icon: 'dashboard',
|
||||
title: '{{ i18n "menu.dashboard"}}'
|
||||
},
|
||||
{
|
||||
key: '{{ .base_path }}panel/inbounds',
|
||||
icon: 'user',
|
||||
title: '{{ i18n "menu.inbounds"}}'
|
||||
},
|
||||
{
|
||||
key: '{{ .base_path }}panel/settings',
|
||||
icon: 'setting',
|
||||
title: '{{ i18n "menu.settings"}}'
|
||||
},
|
||||
{
|
||||
key: '{{ .base_path }}panel/xray',
|
||||
icon: 'tool',
|
||||
title: '{{ i18n "menu.xray"}}'
|
||||
},
|
||||
{
|
||||
key: '{{ .base_path }}panel/servers',
|
||||
icon: 'cloud-server',
|
||||
title: '{{ i18n "pages.controlledmanagement.title"}}'
|
||||
},
|
||||
{
|
||||
key: '{{ .base_path }}panel/navigation',
|
||||
icon: 'link',
|
||||
title: '{{ i18n "menu.navigation"}}'
|
||||
},
|
||||
{
|
||||
key: '{{ .base_path }}logout/',
|
||||
icon: 'logout',
|
||||
title: '{{ i18n "menu.logout"}}'
|
||||
},
|
||||
],
|
||||
activeTab: [
|
||||
'{{ .request_uri }}'
|
||||
],
|
||||
visible: false,
|
||||
collapsed: JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY)),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openLink(key) {
|
||||
return key.startsWith('http') ?
|
||||
window.open(key) :
|
||||
location.href = key
|
||||
},
|
||||
closeDrawer() {
|
||||
this.visible = false;
|
||||
},
|
||||
toggleDrawer() {
|
||||
this.visible = !this.visible;
|
||||
},
|
||||
collapseHandle(collapsed, type) {
|
||||
if (type === "clickTrigger") {
|
||||
localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed);
|
||||
|
||||
this.collapsed = JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY));
|
||||
}
|
||||
}
|
||||
},
|
||||
template: `{{template "component/sidebar/content"}}`,
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
237
web/html/component/aTableSortable.html
Normal file
237
web/html/component/aTableSortable.html
Normal file
@@ -0,0 +1,237 @@
|
||||
{{define "component/sortableTableTrigger"}}
|
||||
<a-icon type="drag" class="sortable-icon" :style="{ cursor: 'move' }" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
|
||||
@click="clickHandler" />
|
||||
{{end}}
|
||||
|
||||
{{define "component/aTableSortable"}}
|
||||
<script>
|
||||
const DRAGGABLE_ROW_CLASS = 'draggable-row';
|
||||
const findParentRowElement = (el) => {
|
||||
if (!el || !el.tagName) {
|
||||
return null;
|
||||
} else if (el.classList.contains(DRAGGABLE_ROW_CLASS)) {
|
||||
return el;
|
||||
} else if (el.parentNode) {
|
||||
return findParentRowElement(el.parentNode);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Vue.component('a-table-sortable', {
|
||||
data() {
|
||||
return {
|
||||
sortingElementIndex: null,
|
||||
newElementIndex: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
'data-source': {
|
||||
type: undefined,
|
||||
required: false,
|
||||
},
|
||||
'customRow': {
|
||||
type: undefined,
|
||||
required: false,
|
||||
}
|
||||
},
|
||||
inheritAttrs: false,
|
||||
provide() {
|
||||
const sortable = {}
|
||||
Object.defineProperty(sortable, "setSortableIndex", {
|
||||
enumerable: true,
|
||||
get: () => this.setCurrentSortableIndex,
|
||||
});
|
||||
Object.defineProperty(sortable, "resetSortableIndex", {
|
||||
enumerable: true,
|
||||
get: () => this.resetSortableIndex,
|
||||
});
|
||||
return {
|
||||
sortable,
|
||||
}
|
||||
},
|
||||
render: function (createElement) {
|
||||
return createElement('a-table', {
|
||||
class: {
|
||||
'ant-table-is-sorting': this.isDragging(),
|
||||
},
|
||||
props: {
|
||||
...this.$attrs,
|
||||
'data-source': this.records,
|
||||
customRow: (record, index) => this.customRowRender(record, index),
|
||||
},
|
||||
on: this.$listeners,
|
||||
nativeOn: {
|
||||
drop: (e) => this.dropHandler(e),
|
||||
},
|
||||
scopedSlots: this.$scopedSlots,
|
||||
locale: {
|
||||
filterConfirm: `{{ i18n "confirm" }}`,
|
||||
filterReset: `{{ i18n "reset" }}`,
|
||||
emptyText: `{{ i18n "noData" }}`
|
||||
}
|
||||
}, this.$slots.default,)
|
||||
},
|
||||
created() {
|
||||
this.$memoSort = {};
|
||||
},
|
||||
methods: {
|
||||
isDragging() {
|
||||
const currentIndex = this.sortingElementIndex;
|
||||
return currentIndex !== null && currentIndex !== undefined;
|
||||
},
|
||||
resetSortableIndex(e, index) {
|
||||
this.sortingElementIndex = null;
|
||||
this.newElementIndex = null;
|
||||
this.$memoSort = {};
|
||||
},
|
||||
setCurrentSortableIndex(e, index) {
|
||||
this.sortingElementIndex = index;
|
||||
},
|
||||
dragStartHandler(e, index) {
|
||||
if (!this.isDragging()) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
const hideDragImage = this.$el.cloneNode(true);
|
||||
hideDragImage.id = "hideDragImage-hide";
|
||||
hideDragImage.style.opacity = 0;
|
||||
e.dataTransfer.setDragImage(hideDragImage, 0, 0);
|
||||
},
|
||||
dragStopHandler(e, index) {
|
||||
const hideDragImage = document.getElementById('hideDragImage-hide');
|
||||
if (hideDragImage) hideDragImage.remove();
|
||||
this.resetSortableIndex(e, index);
|
||||
},
|
||||
dragOverHandler(e, index) {
|
||||
if (!this.isDragging()) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const currentIndex = this.sortingElementIndex;
|
||||
if (index === currentIndex) {
|
||||
this.newElementIndex = null;
|
||||
return;
|
||||
}
|
||||
const row = findParentRowElement(e.target);
|
||||
if (!row) {
|
||||
return;
|
||||
}
|
||||
const rect = row.getBoundingClientRect();
|
||||
const offsetTop = e.pageY - rect.top;
|
||||
if (offsetTop < rect.height / 2) {
|
||||
this.newElementIndex = Math.max(index - 1, 0);
|
||||
} else {
|
||||
this.newElementIndex = index;
|
||||
}
|
||||
},
|
||||
dropHandler(e) {
|
||||
if (this.isDragging()) {
|
||||
this.$emit('onsort', this.sortingElementIndex, this.newElementIndex);
|
||||
}
|
||||
},
|
||||
customRowRender(record, index) {
|
||||
const parentMethodResult = this.customRow?.(record, index) || {};
|
||||
const newIndex = this.newElementIndex;
|
||||
const currentIndex = this.sortingElementIndex;
|
||||
return {
|
||||
...parentMethodResult,
|
||||
attrs: {
|
||||
...(parentMethodResult?.attrs || {}),
|
||||
draggable: true,
|
||||
},
|
||||
on: {
|
||||
...(parentMethodResult?.on || {}),
|
||||
dragstart: (e) => this.dragStartHandler(e, index),
|
||||
dragend: (e) => this.dragStopHandler(e, index),
|
||||
dragover: (e) => this.dragOverHandler(e, index),
|
||||
},
|
||||
class: {
|
||||
...(parentMethodResult?.class || {}),
|
||||
[DRAGGABLE_ROW_CLASS]: true,
|
||||
['dragging']: this.isDragging() ? (newIndex === null ? index === currentIndex : index === newIndex) : false,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
records() {
|
||||
const newIndex = this.newElementIndex;
|
||||
const currentIndex = this.sortingElementIndex;
|
||||
if (!this.isDragging() || newIndex === null || currentIndex === newIndex) {
|
||||
return this.dataSource;
|
||||
}
|
||||
if (this.$memoSort.newIndex === newIndex) {
|
||||
return this.$memoSort.list;
|
||||
}
|
||||
let list = [...this.dataSource];
|
||||
list.splice(newIndex, 0, list.splice(currentIndex, 1)[0]);
|
||||
this.$memoSort = {
|
||||
newIndex,
|
||||
list,
|
||||
};
|
||||
return list;
|
||||
}
|
||||
}
|
||||
});
|
||||
Vue.component('a-table-sort-trigger', {
|
||||
template: `{{template "component/sortableTableTrigger"}}`,
|
||||
props: {
|
||||
'item-index': {
|
||||
type: undefined,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
inject: ['sortable'],
|
||||
methods: {
|
||||
mouseDownHandler(e) {
|
||||
if (this.sortable) {
|
||||
this.sortable.setSortableIndex(e, this.itemIndex);
|
||||
}
|
||||
},
|
||||
mouseUpHandler(e) {
|
||||
if (this.sortable) {
|
||||
this.sortable.resetSortableIndex(e, this.itemIndex);
|
||||
}
|
||||
},
|
||||
clickHandler(e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
@media only screen and (max-width: 767px) {
|
||||
.sortable-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-is-sorting .draggable-row td {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.dark .ant-table-is-sorting .draggable-row td {
|
||||
background-color: var(--dark-color-surface-100) !important;
|
||||
}
|
||||
|
||||
.ant-table-is-sorting .dragging td {
|
||||
background-color: rgb(232 244 242) !important;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dark .ant-table-is-sorting .dragging td {
|
||||
background-color: var(--dark-color-table-hover) !important;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.ant-table-is-sorting .dragging {
|
||||
opacity: 1;
|
||||
box-shadow: 1px -2px 2px #008771;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.ant-table-is-sorting .dragging .ant-table-row-index {
|
||||
opacity: 0.3;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
119
web/html/component/aThemeSwitch.html
Normal file
119
web/html/component/aThemeSwitch.html
Normal file
@@ -0,0 +1,119 @@
|
||||
{{define "component/themeSwitchTemplate"}}
|
||||
<template>
|
||||
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
|
||||
<a-sub-menu>
|
||||
<span slot="title">
|
||||
<a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
|
||||
<span>{{ i18n "menu.theme" }}</span>
|
||||
</span>
|
||||
<a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()">
|
||||
<span>{{ i18n "menu.dark" }}</span>
|
||||
<a-switch :style="{ marginLeft: '2px' }" size="small" :default-checked="themeSwitcher.isDarkTheme"
|
||||
@change="themeSwitcher.toggleTheme()"></a-switch>
|
||||
</a-menu-item>
|
||||
<a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
|
||||
@mousedown="themeSwitcher.animationsOffUltra()">
|
||||
<span>{{ i18n "menu.ultraDark" }}</span>
|
||||
<a-checkbox :style="{ marginLeft: '2px' }" :checked="themeSwitcher.isUltra"
|
||||
@click="themeSwitcher.toggleUltra()"></a-checkbox>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "component/themeSwitchTemplateLogin"}}
|
||||
<template>
|
||||
<a-space @mousedown="themeSwitcher.animationsOff()" id="change-theme" direction="vertical" :size="10" :style="{ width: '100%' }">
|
||||
<a-space direction="horizontal" size="small">
|
||||
<a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
|
||||
<span>{{ i18n "menu.dark" }}</span>
|
||||
</a-space>
|
||||
<a-space v-if="themeSwitcher.isDarkTheme" direction="horizontal" size="small">
|
||||
<a-checkbox :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
|
||||
<span>{{ i18n "menu.ultraDark" }}</span>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "component/aThemeSwitch"}}
|
||||
<script>
|
||||
function createThemeSwitcher() {
|
||||
const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
|
||||
const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
|
||||
if (isUltra) {
|
||||
document.documentElement.setAttribute('data-theme', 'ultra-dark');
|
||||
}
|
||||
const theme = isDarkTheme ? 'dark' : 'light';
|
||||
document.querySelector('body').setAttribute('class', theme);
|
||||
return {
|
||||
animationsOff() {
|
||||
document.documentElement.setAttribute('data-theme-animations', 'off');
|
||||
const themeAnimations = document.querySelector('#change-theme');
|
||||
themeAnimations.addEventListener('mouseleave', () => {
|
||||
document.documentElement.removeAttribute('data-theme-animations');
|
||||
});
|
||||
themeAnimations.addEventListener('touchend', () => {
|
||||
document.documentElement.removeAttribute('data-theme-animations');
|
||||
});
|
||||
},
|
||||
animationsOffUltra() {
|
||||
document.documentElement.setAttribute('data-theme-animations', 'off');
|
||||
const themeAnimationsUltra = document.querySelector('#change-theme-ultra');
|
||||
themeAnimationsUltra.addEventListener('mouseleave', () => {
|
||||
document.documentElement.removeAttribute('data-theme-animations');
|
||||
});
|
||||
themeAnimationsUltra.addEventListener('touchend', () => {
|
||||
document.documentElement.removeAttribute('data-theme-animations');
|
||||
});
|
||||
},
|
||||
isDarkTheme,
|
||||
isUltra,
|
||||
get currentTheme() {
|
||||
return this.isDarkTheme ? 'dark' : 'light';
|
||||
},
|
||||
toggleTheme() {
|
||||
this.isDarkTheme = !this.isDarkTheme;
|
||||
localStorage.setItem('dark-mode', this.isDarkTheme);
|
||||
document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
|
||||
document.getElementById('message').className = themeSwitcher.currentTheme;
|
||||
},
|
||||
toggleUltra() {
|
||||
this.isUltra = !this.isUltra;
|
||||
if (this.isUltra) {
|
||||
document.documentElement.setAttribute('data-theme', 'ultra-dark');
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
}
|
||||
localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
|
||||
}
|
||||
};
|
||||
}
|
||||
const themeSwitcher = createThemeSwitcher();
|
||||
Vue.component('a-theme-switch', {
|
||||
template: `{{template "component/themeSwitchTemplate"}}`,
|
||||
data: () => ({
|
||||
themeSwitcher
|
||||
}),
|
||||
mounted() {
|
||||
this.$message.config({
|
||||
getContainer: () => document.getElementById('message')
|
||||
});
|
||||
document.getElementById('message').className = themeSwitcher.currentTheme;
|
||||
}
|
||||
});
|
||||
Vue.component('a-theme-switch-login', {
|
||||
template: `{{template "component/themeSwitchTemplateLogin"}}`,
|
||||
data: () => ({
|
||||
themeSwitcher
|
||||
}),
|
||||
mounted() {
|
||||
this.$message.config({
|
||||
getContainer: () => document.getElementById('message')
|
||||
});
|
||||
document.getElementById('message').className = themeSwitcher.currentTheme;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
196
web/html/form/client.html
Normal file
196
web/html/form/client.html
Normal file
@@ -0,0 +1,196 @@
|
||||
{{define "form/client"}}
|
||||
<a-form layout="horizontal" v-if="client" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
|
||||
<a-switch v-model="client.enable"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.emailDesc" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.inbounds.email" }}
|
||||
<a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="client.email"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "reset" }}</span>
|
||||
</template>
|
||||
{{ i18n "password" }}
|
||||
<a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword(inbound.settings.method)" type="sync"></a-icon>
|
||||
<a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="client.password"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "reset" }}</span>
|
||||
</template>
|
||||
ID <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="client.id"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="inbound.protocol === Protocols.VMESS" label='{{ i18n "security" }}'>
|
||||
<a-select v-model="client.security" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in USERS_SECURITY" :value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="client.email && app.subSettings?.enable">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
|
||||
</template>
|
||||
Subscription
|
||||
<a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="client.subId"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="client.email && app.tgBotEnable">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
|
||||
</template>
|
||||
Telegram ChatID
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number :style="{ width: '50%' }" v-model.number="client.tgId" min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 中文注释: 增加【独立限速】 speedLimit 输入框 -->
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.speedLimitDesc" }}</span>
|
||||
</template>
|
||||
<span>
|
||||
{{ i18n "pages.inbounds.speedLimit" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number
|
||||
v-model.number="client.speedLimit"
|
||||
:min="0"
|
||||
style="width: 100%">
|
||||
<template slot="addonAfter">
|
||||
KB/s
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="client.email" label='{{ i18n "comment" }}'>
|
||||
<a-input v-model.trim="client.comment"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="app.ipLimitEnable">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.IPLimitDesc"}}</span>
|
||||
</template>
|
||||
<span>{{ i18n "pages.inbounds.IPLimit"}} </span>
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number v-model.number="client.limitIp" min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="app.ipLimitEnable && client.limitIp > 0 && client.email && isEdit">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.IPLimitlogDesc" }}</span>
|
||||
</template>
|
||||
<span>{{ i18n "pages.inbounds.IPLimitlog" }} </span>
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
|
||||
</template>
|
||||
<span :style="{ color: '#FF4D4F' }">
|
||||
<a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<a-form layout="block">
|
||||
<a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email)" placeholder="Click To Get IPs"
|
||||
:auto-size="{ minRows: 5, maxRows: 10 }">
|
||||
</a-textarea>
|
||||
</a-form>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="inbound.canEnableTlsFlow()" label='Flow'>
|
||||
<a-select v-model="client.flow" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
|
||||
<a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.inbounds.totalFlow" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number v-model.number="client._totalGB" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="isEdit && clientStats" label='{{ i18n "usage" }}'>
|
||||
<a-tag :color="ColorUtils.clientUsageColor(clientStats, app.trafficDiff)">
|
||||
[[ SizeFormatter.sizeFormat(clientStats.up) ]] /
|
||||
[[ SizeFormatter.sizeFormat(clientStats.down) ]]
|
||||
([[ SizeFormatter.sizeFormat(clientStats.up + clientStats.down) ]])
|
||||
</a-tag>
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
|
||||
<a-icon type="retweet"
|
||||
@click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
|
||||
v-if="client.email.length > 0"></a-icon>
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
|
||||
<a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
|
||||
<a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item v-else>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</template>
|
||||
{{ i18n "pages.inbounds.expireDate" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme" v-model="client._expiryTime"></a-date-picker>
|
||||
<a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
|
||||
value="client._expiryTime" v-model="client._expiryTime"></a-persian-datepicker>
|
||||
<a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="client.expiryTime != 0">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ i18n "pages.client.renewDesc" }}</template>
|
||||
{{ i18n "pages.client.renew" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number v-model.number="client.reset" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
166
web/html/form/inbound.html
Normal file
166
web/html/form/inbound.html
Normal file
@@ -0,0 +1,166 @@
|
||||
{{define "form/inbound"}}
|
||||
<!-- base -->
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<!-- 开关：启用/禁用 -->
|
||||
<a-form-item label='{{ i18n "enable" }}'>
|
||||
<a-switch v-model="dbInbound.enable"></a-switch>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 备注 -->
|
||||
<a-form-item label='{{ i18n "remark" }}'>
|
||||
<a-input v-model.trim="dbInbound.remark"></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 协议选择 -->
|
||||
<a-form-item label='{{ i18n "protocol" }}'>
|
||||
<a-select v-model="inbound.protocol" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 监听地址 -->
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.monitorDesc" }}</span>
|
||||
</template>
|
||||
{{ i18n "monitor" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="inbound.listen"></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 端口 + 总流量 在同一行 -->
|
||||
<a-row :gutter="16">
|
||||
<!-- 左侧：端口 -->
|
||||
<a-col :span="12">
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
端口范围：1 - 65531（请尽量使用高位端口）
|
||||
</template>
|
||||
{{ i18n "pages.inbounds.port" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number v-model.number="inbound.port" :min="1" :max="65531" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<!-- 右侧：总流量 -->
|
||||
<a-col :span="12">
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.inbounds.totalFlow" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number v-model.number="dbInbound.totalGB" :min="0" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 设备限制 单独占一行 -->
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
{{ i18n "pages.inbounds.deviceLimitDesc" }}
|
||||
</template>
|
||||
{{ i18n "pages.inbounds.deviceLimit" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number
|
||||
v-model.number="dbInbound.deviceLimit"
|
||||
:min="0"
|
||||
style="width: 100%"
|
||||
placeholder="0 = 不限制" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- 到期时间 -->
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.inbounds.expireDate" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-date-picker :style="{ width: '100%' }" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
|
||||
format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
|
||||
v-model="dbInbound._expiryTime"></a-date-picker>
|
||||
<a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
|
||||
value="dbInbound._expiryTime" v-model="dbInbound._expiryTime">
|
||||
</a-persian-datepicker>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- vmess settings -->
|
||||
<template v-if="inbound.protocol === Protocols.VMESS">
|
||||
{{template "form/vmess"}}
|
||||
</template>
|
||||
|
||||
<!-- vless settings -->
|
||||
<template v-if="inbound.protocol === Protocols.VLESS">
|
||||
{{template "form/vless"}}
|
||||
</template>
|
||||
|
||||
<!-- trojan settings -->
|
||||
<template v-if="inbound.protocol === Protocols.TROJAN">
|
||||
{{template "form/trojan"}}
|
||||
</template>
|
||||
|
||||
<!-- shadowsocks -->
|
||||
<template v-if="inbound.protocol === Protocols.SHADOWSOCKS">
|
||||
{{template "form/shadowsocks"}}
|
||||
</template>
|
||||
|
||||
<!-- tunnel -->
|
||||
<template v-if="inbound.protocol === Protocols.TUNNEL">
|
||||
{{template "form/tunnel"}}
|
||||
</template>
|
||||
|
||||
<!-- socks -->
|
||||
<template v-if="inbound.protocol === Protocols.SOCKS">
|
||||
{{template "form/socks"}}
|
||||
</template>
|
||||
|
||||
<!-- http -->
|
||||
<template v-if="inbound.protocol === Protocols.HTTP">
|
||||
{{template "form/http"}}
|
||||
</template>
|
||||
|
||||
<!-- wireguard -->
|
||||
<template v-if="inbound.protocol === Protocols.WIREGUARD">
|
||||
{{template "form/wireguard"}}
|
||||
</template>
|
||||
|
||||
<!-- stream settings -->
|
||||
<template v-if="inbound.canEnableStream()">
|
||||
{{template "form/streamSettings"}}
|
||||
{{template "form/externalProxy" }}
|
||||
</template>
|
||||
|
||||
<!-- tls settings -->
|
||||
<template v-if="inbound.canEnableTls()">
|
||||
{{template "form/tlsSettings"}}
|
||||
</template>
|
||||
|
||||
<!-- sniffing -->
|
||||
<a-collapse>
|
||||
<a-collapse-panel header='Sniffing'>
|
||||
{{template "form/sniffing"}}
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
|
||||
{{end}}
|
||||
830
web/html/form/outbound.html
Normal file
830
web/html/form/outbound.html
Normal file
@@ -0,0 +1,830 @@
|
||||
{{define "form/outbound"}}
|
||||
<!-- base -->
|
||||
<a-tabs :active-key="outModal.activeKey"
|
||||
:style="{ padding: '0', backgroundColor: 'transparent' }"
|
||||
@change="(activeKey) => {outModal.toggleJson(activeKey == '2'); }">
|
||||
<a-tab-pane key="1" tab="Form">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }"
|
||||
:wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "protocol" }}'>
|
||||
<a-select v-model="outbound.protocol"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="x,y in Protocols" :value="x">[[ y
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.tag" }}' has-feedback
|
||||
:validate-status="outModal.duplicateTag? 'warning' : 'success'">
|
||||
<a-input v-model.trim="outbound.tag" @change="outModal.check()"
|
||||
placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.sendThrough" }}'>
|
||||
<a-input v-model="outbound.sendThrough"></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<!-- freedom settings-->
|
||||
<template v-if="outbound.protocol === Protocols.Freedom">
|
||||
<a-form-item label='Strategy'>
|
||||
<a-select v-model="outbound.settings.domainStrategy"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="s in OutboundDomainStrategies" :value="s">[[
|
||||
s ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='Redirect'>
|
||||
<a-input v-model="outbound.settings.redirect"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Fragment'>
|
||||
<a-switch :checked="Object.keys(outbound.settings.fragment).length >0"
|
||||
@change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<template v-if="Object.keys(outbound.settings.fragment).length >0">
|
||||
<a-form-item label='Packets'>
|
||||
<a-select v-model="outbound.settings.fragment.packets"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='Length'>
|
||||
<a-input v-model.trim="outbound.settings.fragment.length"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Interval'>
|
||||
<a-input
|
||||
v-model.trim="outbound.settings.fragment.interval"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Max Split'>
|
||||
<a-input
|
||||
v-model.trim="outbound.settings.fragment.maxSplit"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- Switch for Noises -->
|
||||
<a-form-item label='Noises'>
|
||||
<a-switch :checked="outbound.settings.noises.length > 0"
|
||||
@change="checked => outbound.settings.noises = checked ? [new Outbound.FreedomSettings.Noise()] : []">
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
|
||||
<!-- Add Noise Button -->
|
||||
<template v-if="outbound.settings.noises.length > 0">
|
||||
<a-form-item label="Noises">
|
||||
<a-button icon="plus" type="primary" size="small"
|
||||
@click="outbound.settings.addNoise()"></a-button>
|
||||
</a-form-item>
|
||||
|
||||
<!-- Noise Configurations -->
|
||||
<a-form v-for="(noise, index) in outbound.settings.noises"
|
||||
:key="index" :colon="false"
|
||||
:label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '0' }"> Noise [[ index + 1 ]]
|
||||
<a-icon v-if="outbound.settings.noises.length > 1" type="delete"
|
||||
@click="() => outbound.settings.delNoise(index)"
|
||||
:style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
|
||||
</a-divider>
|
||||
<a-form-item label='Type'>
|
||||
<a-select v-model="noise.type"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="s in ['rand','base64','str', 'hex']"
|
||||
:value="s">[[ s ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='Packet'>
|
||||
<a-input v-model.trim="noise.packet"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Delay'>
|
||||
<a-input v-model.trim="noise.delay"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Apply To'>
|
||||
<a-select v-model="noise.applyTo"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="s in ['ip','ipv4','ipv6']" :value="s">[[
|
||||
s ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- blackhole settings -->
|
||||
<template v-if="outbound.protocol === Protocols.Blackhole">
|
||||
<a-form-item label='Response Type'>
|
||||
<a-select v-model="outbound.settings.type"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="s in ['', 'none','http']" :value="s">[[ s
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- dns settings -->
|
||||
<template v-if="outbound.protocol === Protocols.DNS">
|
||||
<a-form-item label='{{ i18n "pages.inbounds.network" }}'>
|
||||
<a-select v-model="outbound.settings.network"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="s in ['udp','tcp']" :value="s">[[ s
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='non-IP queries'>
|
||||
<a-select v-model="outbound.settings.nonIPQuery"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="s in ['reject','drop','skip']" :value="s">[[
|
||||
s ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="outbound.settings.nonIPQuery === 'skip'"
|
||||
label='Block Types'>
|
||||
<a-input v-model.number="outbound.settings.blockTypes"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- wireguard settings -->
|
||||
<template v-if="outbound.protocol === Protocols.Wireguard">
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.rules.useComma" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.xray.outbound.address" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="outbound.settings.address"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "reset" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.xray.wireguard.secretKey" }}
|
||||
<a-icon type="sync"
|
||||
@click="[outbound.settings.pubKey, outbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())">
|
||||
</a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="outbound.settings.secretKey"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
|
||||
<a-input disabled v-model="outbound.settings.pubKey"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.wireguard.domainStrategy" }}'>
|
||||
<a-select v-model="outbound.settings.domainStrategy"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="wds in ['', ...WireguardDomainStrategy]"
|
||||
:value="wds">[[ wds ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='MTU'>
|
||||
<a-input-number v-model.number="outbound.settings.mtu"
|
||||
min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Workers'>
|
||||
<a-input-number v-model.number="outbound.settings.workers"
|
||||
min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='No Kernel Tun'>
|
||||
<a-switch v-model="outbound.settings.noKernelTun"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.rules.useComma" }}</span>
|
||||
</template> Reserved <a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model="outbound.settings.reserved"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Peers">
|
||||
<a-button icon="plus" type="primary" size="small"
|
||||
@click="outbound.settings.addPeer()"></a-button>
|
||||
</a-form-item>
|
||||
<a-form v-for="(peer, index) in outbound.settings.peers" :colon="false"
|
||||
:label-col="{ md: {span:8} }"
|
||||
:wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '0' }"> Peer [[ index + 1 ]] <a-icon
|
||||
v-if="outbound.settings.peers.length>1"
|
||||
type="delete" @click="() => outbound.settings.delPeer(index)"
|
||||
:style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
|
||||
</a-divider>
|
||||
<a-form-item label='{{ i18n "pages.xray.wireguard.endpoint" }}'>
|
||||
<a-input v-model.trim="peer.endpoint"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
|
||||
<a-input v-model.trim="peer.publicKey"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.wireguard.psk" }}'>
|
||||
<a-input v-model.trim="peer.psk"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
{{ i18n "pages.xray.wireguard.allowedIPs" }}
|
||||
<a-button icon="plus" type="primary" size="small"
|
||||
@click="peer.allowedIPs.push('')"></a-button>
|
||||
</template>
|
||||
<template v-for="(aip, index) in peer.allowedIPs"
|
||||
:style="{ marginBottom: '10px' }">
|
||||
<a-input v-model.trim="peer.allowedIPs[index]">
|
||||
<a-button icon="minus" v-if="peer.allowedIPs.length>1"
|
||||
slot="addonAfter" size="small"
|
||||
@click="peer.allowedIPs.splice(index, 1)"></a-button>
|
||||
</a-input>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item label='Keep Alive'>
|
||||
<a-input-number v-model.number="peer.keepAlive"
|
||||
:min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<!-- Address + Port -->
|
||||
<template v-if="outbound.hasAddressPort()">
|
||||
<a-form-item label='{{ i18n "pages.inbounds.address" }}'>
|
||||
<a-input v-model.trim="outbound.settings.address"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.port" }}'>
|
||||
<a-input-number v-model.number="outbound.settings.port" :min="1"
|
||||
:max="65532"></a-input-number>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- VLESS/VMess user settings -->
|
||||
<template
|
||||
v-if="[Protocols.VMess, Protocols.VLESS].includes(outbound.protocol)">
|
||||
<a-form-item label='ID'>
|
||||
<a-input v-model.trim="outbound.settings.id"></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<!-- vmess settings -->
|
||||
<template v-if="outbound.protocol === Protocols.VMess">
|
||||
<a-form-item label='Security'>
|
||||
<a-select v-model="outbound.settings.security"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in USERS_SECURITY" :value="key">[[ key
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- vless settings -->
|
||||
<template v-if="outbound.protocol === Protocols.VLESS">
|
||||
<a-form-item label='encryption'>
|
||||
<a-input v-model.trim="outbound.settings.encryption"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="outbound.canEnableTlsFlow()">
|
||||
<a-form-item label='Flow'>
|
||||
<a-select v-model="outbound.settings.flow"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value selected>{{ i18n "none"
|
||||
}}</a-select-option>
|
||||
<a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[
|
||||
key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- XTLS Vision Advanced Settings -->
|
||||
<template v-if="outbound.canEnableVisionSeed()">
|
||||
<a-form-item label="Vision Pre-Connect">
|
||||
<a-input-number v-model.number="outbound.settings.testpre" :min="0"
|
||||
:max="10" :style="{ width: '100%' }"
|
||||
placeholder="5"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="Vision Seed">
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="6">
|
||||
<a-input-number v-model.number="outbound.settings.testseed[0]"
|
||||
:min="0" :max="9999"
|
||||
:style="{ width: '100%' }" placeholder="900"
|
||||
addon-before="[0]"></a-input-number>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-input-number v-model.number="outbound.settings.testseed[1]"
|
||||
:min="0" :max="9999"
|
||||
:style="{ width: '100%' }" placeholder="500"
|
||||
addon-before="[1]"></a-input-number>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-input-number v-model.number="outbound.settings.testseed[2]"
|
||||
:min="0" :max="9999"
|
||||
:style="{ width: '100%' }" placeholder="900"
|
||||
addon-before="[2]"></a-input-number>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-input-number v-model.number="outbound.settings.testseed[3]"
|
||||
:min="0" :max="9999"
|
||||
:style="{ width: '100%' }" placeholder="256"
|
||||
addon-before="[3]"></a-input-number>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Servers (trojan/shadowsocks/socks/http) settings -->
|
||||
<template v-if="outbound.hasServers()">
|
||||
<!-- http / socks -->
|
||||
<template v-if="outbound.hasUsername()">
|
||||
<a-form-item label='{{ i18n "username" }}'>
|
||||
<a-input v-model.trim="outbound.settings.user"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "password" }}'>
|
||||
<a-input v-model.trim="outbound.settings.pass"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- trojan/shadowsocks -->
|
||||
<template
|
||||
v-if="[Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
|
||||
<a-form-item label='{{ i18n "password" }}'>
|
||||
<a-input v-model.trim="outbound.settings.password"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- shadowsocks -->
|
||||
<template v-if="outbound.protocol === Protocols.Shadowsocks">
|
||||
<a-form-item label='{{ i18n "encryption" }}'>
|
||||
<a-select v-model="outbound.settings.method"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="(method, method_name) in SSMethods"
|
||||
:value="method">[[ method_name
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='UDP over TCP'>
|
||||
<a-switch v-model="outbound.settings.uot"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='UoTVersion'>
|
||||
<a-input-number v-model.number="outbound.settings.UoTVersion"
|
||||
:min="1" :max="2"></a-input-number>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- hysteria settings -->
|
||||
<template v-if="outbound.protocol === Protocols.Hysteria">
|
||||
<a-form-item label='Version'>
|
||||
<a-input-number v-model.number="outbound.settings.version" :min="2"
|
||||
:max="2" disabled></a-input-number>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- stream settings -->
|
||||
<template v-if="outbound.canEnableStream()">
|
||||
<a-form-item label='{{ i18n "transmission" }}'>
|
||||
<a-select v-model="outbound.stream.network"
|
||||
@change="streamNetworkChange"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="tcp">TCP (RAW)</a-select-option>
|
||||
<a-select-option value="kcp">mKCP</a-select-option>
|
||||
<a-select-option value="ws">WebSocket</a-select-option>
|
||||
<a-select-option value="grpc">gRPC</a-select-option>
|
||||
<a-select-option value="httpupgrade">HTTPUpgrade</a-select-option>
|
||||
<a-select-option value="xhttp">XHTTP</a-select-option>
|
||||
<a-select-option v-if="outbound.protocol === Protocols.Hysteria"
|
||||
value="hysteria">Hysteria2</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<template v-if="outbound.stream.network === 'tcp'">
|
||||
<a-form-item label='HTTP {{ i18n "camouflage" }}'>
|
||||
<a-switch :checked="outbound.stream.tcp.type === 'http'"
|
||||
@change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'"></a-switch>
|
||||
</a-form-item>
|
||||
<template v-if="outbound.stream.tcp.type == 'http'">
|
||||
<a-form-item label='{{ i18n "host" }}'>
|
||||
<a-input v-model.trim="outbound.stream.tcp.host"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "path" }}'>
|
||||
<a-input v-model.trim="outbound.stream.tcp.path"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- kcp -->
|
||||
<template v-if="outbound.stream.network === 'kcp'">
|
||||
<a-form-item label='MTU'>
|
||||
<a-input-number v-model.number="outbound.stream.kcp.mtu"
|
||||
min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='TTI (ms)'>
|
||||
<a-input-number v-model.number="outbound.stream.kcp.tti"
|
||||
min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Uplink (MB/s)'>
|
||||
<a-input-number v-model.number="outbound.stream.kcp.upCap"
|
||||
min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Downlink (MB/s)'>
|
||||
<a-input-number v-model.number="outbound.stream.kcp.downCap"
|
||||
min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Congestion'>
|
||||
<a-switch v-model="outbound.stream.kcp.congestion"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='Read Buffer (MB)'>
|
||||
<a-input-number v-model.number="outbound.stream.kcp.readBuffer"
|
||||
min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Write Buffer (MB)'>
|
||||
<a-input-number v-model.number="outbound.stream.kcp.writeBuffer"
|
||||
min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- ws -->
|
||||
<template v-if="outbound.stream.network === 'ws'">
|
||||
<a-form-item label='{{ i18n "host" }}'>
|
||||
<a-input v-model="outbound.stream.ws.host"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "path" }}'>
|
||||
<a-input v-model.trim="outbound.stream.ws.path"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Heartbeat Period'>
|
||||
<a-input-number v-model.number="outbound.stream.ws.heartbeatPeriod"
|
||||
:min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- grpc -->
|
||||
<template v-if="outbound.stream.network === 'grpc'">
|
||||
<a-form-item label='Service Name'>
|
||||
<a-input v-model.trim="outbound.stream.grpc.serviceName"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Authority">
|
||||
<a-input v-model.trim="outbound.stream.grpc.authority"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Multi Mode'>
|
||||
<a-switch v-model="outbound.stream.grpc.multiMode"></a-switch>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- httpupgrade -->
|
||||
<template v-if="outbound.stream.network === 'httpupgrade'">
|
||||
<a-form-item label='{{ i18n "host" }}'>
|
||||
<a-input v-model="outbound.stream.httpupgrade.host"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "path" }}'>
|
||||
<a-input v-model.trim="outbound.stream.httpupgrade.path"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- xhttp -->
|
||||
<template v-if="outbound.stream.network === 'xhttp'">
|
||||
<a-form-item label='{{ i18n "host" }}'>
|
||||
<a-input v-model="outbound.stream.xhttp.host"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "path" }}'>
|
||||
<a-input v-model.trim="outbound.stream.xhttp.path"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Mode'>
|
||||
<a-select v-model="outbound.stream.xhttp.mode"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in MODE_OPTION" :value="key">[[ key
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="No gRPC Header"
|
||||
v-if="outbound.stream.xhttp.mode === 'stream-up' || outbound.stream.xhttp.mode === 'stream-one'">
|
||||
<a-switch v-model="outbound.stream.xhttp.noGRPCHeader"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Min Upload Interval (Ms)"
|
||||
v-if="outbound.stream.xhttp.mode === 'packet-up'">
|
||||
<a-input
|
||||
v-model.trim="outbound.stream.xhttp.scMinPostsIntervalMs"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Max Concurrency"
|
||||
v-if="!outbound.stream.xhttp.xmux.maxConnections">
|
||||
<a-input
|
||||
v-model="outbound.stream.xhttp.xmux.maxConcurrency"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Max Connections"
|
||||
v-if="!outbound.stream.xhttp.xmux.maxConcurrency">
|
||||
<a-input
|
||||
v-model="outbound.stream.xhttp.xmux.maxConnections"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Max Reuse Times">
|
||||
<a-input
|
||||
v-model="outbound.stream.xhttp.xmux.cMaxReuseTimes"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Max Request Times">
|
||||
<a-input
|
||||
v-model="outbound.stream.xhttp.xmux.hMaxRequestTimes"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Max Reusable Secs">
|
||||
<a-input
|
||||
v-model="outbound.stream.xhttp.xmux.hMaxReusableSecs"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Keep Alive Period'>
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.xhttp.xmux.hKeepAlivePeriod"></a-input-number>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- hysteria -->
|
||||
<template v-if="outbound.stream.network === 'hysteria'">
|
||||
<a-form-item label='Auth Password'>
|
||||
<a-input v-model.trim="outbound.stream.hysteria.auth"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Congestion'>
|
||||
<a-select v-model="outbound.stream.hysteria.congestion"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>BBR (Auto)</a-select-option>
|
||||
<a-select-option value="brutal">Brutal</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='Upload Speed'>
|
||||
<a-input v-model.trim="outbound.stream.hysteria.up"
|
||||
placeholder="0 (BBR mode), e.g., 100 mbps"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Download Speed'>
|
||||
<a-input v-model.trim="outbound.stream.hysteria.down"
|
||||
placeholder="0 (BBR mode), e.g., 100 mbps"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='UDP Hop Port'>
|
||||
<a-input v-model.trim="outbound.stream.hysteria.udphopPort"
|
||||
placeholder="e.g., 1145-1919 or 11,13,15-17"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='UDP Hop Interval Min (s)'
|
||||
v-if="outbound.stream.hysteria.udphopPort">
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.hysteria.udphopIntervalMin"
|
||||
:min="5"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='UDP Hop Interval Max (s)'
|
||||
v-if="outbound.stream.hysteria.udphopPort">
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.hysteria.udphopIntervalMax"
|
||||
:min="5"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Init Stream Receive'>
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.hysteria.initStreamReceiveWindow"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Max Stream Receive'>
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.hysteria.maxStreamReceiveWindow"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Init Connection Receive'>
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.hysteria.initConnectionReceiveWindow"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Max Connection Receive'>
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.hysteria.maxConnectionReceiveWindow"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Max Idle Timeout (s)'>
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.hysteria.maxIdleTimeout" :min="4"
|
||||
:max="120"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Keep Alive Period (s)'>
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.hysteria.keepAlivePeriod" :min="0"
|
||||
:max="60"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Disable Path MTU'>
|
||||
<a-switch
|
||||
v-model="outbound.stream.hysteria.disablePathMTUDiscovery"></a-switch>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- finalmask settings -->
|
||||
<template v-if="outbound.canEnableStream()">
|
||||
<a-form-item label="UDP Masks">
|
||||
<a-button icon="plus" type="primary" size="small"
|
||||
@click="outbound.stream.addUdpMask(outbound.protocol === Protocols.Hysteria ? 'salamander' : (outbound.stream.network === 'kcp' ? 'mkcp-aes128gcm' : 'xdns'))"></a-button>
|
||||
</a-form-item>
|
||||
<template
|
||||
v-if="outbound.stream.finalmask.udp && outbound.stream.finalmask.udp.length > 0">
|
||||
<a-form v-for="(mask, index) in outbound.stream.finalmask.udp"
|
||||
:key="index" :colon="false"
|
||||
:label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '0' }"> UDP Mask [[ index + 1 ]]
|
||||
<a-icon type="delete"
|
||||
@click="() => outbound.stream.delUdpMask(index)"
|
||||
:style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
|
||||
</a-divider>
|
||||
<a-form-item label='Type'>
|
||||
<a-select v-model="mask.type"
|
||||
@change="(type) => { mask.settings = mask._getDefaultSettings(type, {}); if(outbound.stream.network === 'kcp') { outbound.stream.kcp.mtu = type === 'xdns' ? 900 : 1350; } }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<!-- Salamander for Hysteria2 only -->
|
||||
<a-select-option v-if="outbound.protocol === Protocols.Hysteria"
|
||||
value="salamander">
|
||||
Salamander (Hysteria2)</a-select-option>
|
||||
<!-- mKCP-specific masks -->
|
||||
<a-select-option v-if="outbound.stream.network === 'kcp'"
|
||||
value="mkcp-aes128gcm">
|
||||
mKCP AES-128-GCM</a-select-option>
|
||||
<a-select-option v-if="outbound.stream.network === 'kcp'"
|
||||
value="header-dns">
|
||||
Header DNS</a-select-option>
|
||||
<a-select-option v-if="outbound.stream.network === 'kcp'"
|
||||
value="header-dtls">
|
||||
Header DTLS 1.2</a-select-option>
|
||||
<a-select-option v-if="outbound.stream.network === 'kcp'"
|
||||
value="header-srtp">
|
||||
Header SRTP</a-select-option>
|
||||
<a-select-option v-if="outbound.stream.network === 'kcp'"
|
||||
value="header-utp">
|
||||
Header uTP</a-select-option>
|
||||
<a-select-option v-if="outbound.stream.network === 'kcp'"
|
||||
value="header-wechat">
|
||||
Header WeChat Video</a-select-option>
|
||||
<a-select-option v-if="outbound.stream.network === 'kcp'"
|
||||
value="header-wireguard">
|
||||
Header WireGuard</a-select-option>
|
||||
<a-select-option v-if="outbound.stream.network === 'kcp'"
|
||||
value="mkcp-original">
|
||||
mKCP Original</a-select-option>
|
||||
<!-- xDNS for TCP/WS/HTTPUpgrade/XHTTP/KCP -->
|
||||
<a-select-option
|
||||
v-if="['tcp', 'ws', 'httpupgrade', 'xhttp', 'kcp'].includes(outbound.stream.network)"
|
||||
value="xdns">
|
||||
xDNS (Experimental)</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<!-- Settings for password-based masks -->
|
||||
<a-form-item label='Password'
|
||||
v-if="['salamander', 'mkcp-aes128gcm'].includes(mask.type)">
|
||||
<a-input v-model.trim="mask.settings.password"
|
||||
placeholder="Obfuscation password"></a-input>
|
||||
</a-form-item>
|
||||
<!-- Settings for domain-based masks -->
|
||||
<a-form-item label='Domain'
|
||||
v-if="['header-dns', 'xdns'].includes(mask.type)">
|
||||
<a-input v-model.trim="mask.settings.domain"
|
||||
placeholder="e.g., www.example.com"></a-input>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- tls settings -->
|
||||
<template v-if="outbound.canEnableTls()">
|
||||
<a-form-item label='{{ i18n "security" }}'>
|
||||
<a-radio-group v-model="outbound.stream.security"
|
||||
button-style="solid">
|
||||
<a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
|
||||
<a-radio-button value="tls">TLS</a-radio-button>
|
||||
<a-radio-button v-if="outbound.canEnableReality()"
|
||||
value="reality">Reality</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<template v-if="outbound.stream.isTls">
|
||||
<a-form-item label="SNI" placeholder="Server Name Indication">
|
||||
<a-input v-model.trim="outbound.stream.tls.serverName"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="uTLS">
|
||||
<a-select v-model="outbound.stream.tls.fingerprint"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>None</a-select-option>
|
||||
<a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[
|
||||
key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="ALPN">
|
||||
<a-select mode="multiple"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme"
|
||||
v-model="outbound.stream.tls.alpn">
|
||||
<a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="ECH Config List">
|
||||
<a-input v-model.trim="outbound.stream.tls.echConfigList"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="verify Peer Cert By Name">
|
||||
<a-input
|
||||
v-model.trim="outbound.stream.tls.verifyPeerCertByName"
|
||||
placeholder="cloudflare-dns.com"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="pinned Peer Cert Sha256">
|
||||
<a-input v-model.trim="outbound.stream.tls.pinnedPeerCertSha256"
|
||||
placeholder="Enter SHA256 fingerprints (base64)">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- reality settings -->
|
||||
<template v-if="outbound.stream.isReality">
|
||||
<a-form-item label="SNI">
|
||||
<a-input
|
||||
v-model.trim="outbound.stream.reality.serverName"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="uTLS">
|
||||
<a-select v-model="outbound.stream.reality.fingerprint"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[
|
||||
key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Short ID">
|
||||
<a-input v-model.trim="outbound.stream.reality.shortId"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="SpiderX">
|
||||
<a-input v-model.trim="outbound.stream.reality.spiderX"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Public Key">
|
||||
<a-textarea
|
||||
v-model.trim="outbound.stream.reality.publicKey"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label="mldsa65 Verify">
|
||||
<a-textarea
|
||||
v-model.trim="outbound.stream.reality.mldsa65Verify"></a-textarea>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- sockopt settings -->
|
||||
<a-form-item label="Sockopts">
|
||||
<a-switch v-model="outbound.stream.sockoptSwitch"></a-switch>
|
||||
</a-form-item>
|
||||
<template v-if="outbound.stream.sockoptSwitch">
|
||||
<a-form-item label="Dialer Proxy">
|
||||
<a-select v-model="outbound.stream.sockopt.dialerProxy"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="tag in ['', ...outModal.tags]"
|
||||
:value="tag">[[ tag ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='Address Port Strategy'>
|
||||
<a-select v-model="outbound.stream.sockopt.addressPortStrategy"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in Address_Port_Strategy"
|
||||
:value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Keep Alive Interval">
|
||||
<a-input-number
|
||||
v-model.number="outbound.stream.sockopt.tcpKeepAliveInterval"
|
||||
:min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="TCP Fast Open">
|
||||
<a-switch v-model="outbound.stream.sockopt.tcpFastOpen"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Multipath TCP">
|
||||
<a-switch v-model.trim="outbound.stream.sockopt.tcpMptcp"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Penetrate">
|
||||
<a-switch v-model="outbound.stream.sockopt.penetrate"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Trusted X-Forwarded-For">
|
||||
<a-select mode="tags"
|
||||
v-model="outbound.stream.sockopt.trustedXForwardedFor"
|
||||
:style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option
|
||||
value="CF-Connecting-IP">CF-Connecting-IP</a-select-option>
|
||||
<a-select-option value="X-Real-IP">X-Real-IP</a-select-option>
|
||||
<a-select-option
|
||||
value="True-Client-IP">True-Client-IP</a-select-option>
|
||||
<a-select-option value="X-Client-IP">X-Client-IP</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- mux settings -->
|
||||
<template v-if="outbound.canEnableMux()">
|
||||
<a-form-item label="Mux">
|
||||
<a-switch v-model="outbound.mux.enabled"></a-switch>
|
||||
</a-form-item>
|
||||
<template v-if="outbound.mux.enabled">
|
||||
<a-form-item label="Concurrency">
|
||||
<a-input-number v-model.number="outbound.mux.concurrency" :min="-1"
|
||||
:max="1024"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="xudp Concurrency">
|
||||
<a-input-number v-model.number="outbound.mux.xudpConcurrency"
|
||||
:min="-1" :max="1024"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="xudp UDP 443">
|
||||
<a-select v-model="outbound.mux.xudpProxyUDP443"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="c in ['reject', 'allow', 'skip']"
|
||||
:value="c">[[ c ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="JSON" force-render="true">
|
||||
<a-space direction="vertical" :size="10" :style="{ marginTop: '10px' }">
|
||||
<a-input addon-before='{{ i18n "pages.xray.outbound.link" }}'
|
||||
v-model.trim="outModal.link"
|
||||
placeholder="vmess:// vless:// trojan:// ss:// hysteria2://">
|
||||
<a-icon slot="addonAfter" type="form" @click="convertLink"></a-icon>
|
||||
</a-input>
|
||||
<textarea :style="{ position: 'absolute', left: '-800px' }"
|
||||
id="outboundJson"></textarea>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
{{end}}
|
||||
37
web/html/form/protocol/dokodemo.html
Normal file
37
web/html/form/protocol/dokodemo.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{{define "form/tunnel"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "pages.inbounds.targetAddress"}}'>
|
||||
<a-input v-model.trim="inbound.settings.address"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
|
||||
<a-input-number v-model.number="inbound.settings.port"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.portMap"}}'>
|
||||
<a-button size="small" @click="inbound.settings.portMap.push({name: '', value: ''})">+</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{span:24}">
|
||||
<a-input-group compact v-for="(pm, index) in inbound.settings.portMap">
|
||||
<a-input style="width: 50%" v-model.trim="pm.name" placeholder='{{ i18n "pages.inbounds.port"}}'>
|
||||
<template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
|
||||
</a-input>
|
||||
<a-input style="width: 50%" v-model.trim="pm.value" placeholder='{{ i18n "pages.inbounds.targetAddress" }}'>
|
||||
<a-button slot="addonAfter" size="small" @click="inbound.settings.portMap.splice(index,1)">-</a-button>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.network"}}'>
|
||||
<a-select v-model="inbound.settings.network" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="tcp,udp">TCP,UDP</a-select-option>
|
||||
<a-select-option value="tcp">TCP</a-select-option>
|
||||
<a-select-option value="udp">UDP</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='Follow Redirect'>
|
||||
<a-switch v-model="inbound.settings.followRedirect"></a-switch>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- sockopt -->
|
||||
<template>
|
||||
{{template "form/streamSockopt"}}
|
||||
</template>
|
||||
{{end}}
|
||||
26
web/html/form/protocol/http.html
Normal file
26
web/html/form/protocol/http.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{{define "form/http"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<table :style="{ width: '100%', textAlign: 'center', margin: '1rem 0' }">
|
||||
<tr>
|
||||
<td width="45%">{{ i18n "username" }}</td>
|
||||
<td width="45%">{{ i18n "password" }}</td>
|
||||
<td>
|
||||
<a-button icon="plus" size="small" @click="inbound.settings.addAccount(new Inbound.HttpSettings.HttpAccount())"></a-button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<a-input-group compact v-for="(account, index) in inbound.settings.accounts" :style="{ marginBottom: '10px' }">
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
|
||||
<template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
|
||||
</a-input>
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
|
||||
<template slot="addonAfter">
|
||||
<a-button icon="minus" size="small" @click="inbound.settings.delAccount(index)"></a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
<a-form-item label="Allow Transparent">
|
||||
<a-switch v-model="inbound.settings.allowTransparent" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
50
web/html/form/protocol/shadowsocks.html
Normal file
50
web/html/form/protocol/shadowsocks.html
Normal file
@@ -0,0 +1,50 @@
|
||||
{{define "form/shadowsocks"}}
|
||||
<template v-if="inbound.isSSMultiUser">
|
||||
<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.shadowsockses.slice(0,1)" v-if="!isEdit">
|
||||
<a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
|
||||
{{template "form/client"}}
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse v-else>
|
||||
<a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.shadowsockses.length">
|
||||
<table width="100%">
|
||||
<tr class="client-table-header">
|
||||
<th>{{ i18n "pages.inbounds.email" }}</th>
|
||||
<th>Password</th>
|
||||
</tr>
|
||||
<tr v-for="(client, index) in inbound.settings.shadowsockses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
|
||||
<td>[[ client.email ]]</td>
|
||||
<td>[[ client.password ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "encryption" }}'>
|
||||
<a-select v-model="inbound.settings.method" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="(method,method_name) in SSMethods" :value="method">[[ method_name ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="inbound.isSS2022">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "reset" }}</span>
|
||||
</template> Password <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword(inbound.settings.method)" type="sync"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="inbound.settings.password"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.network" }}'>
|
||||
<a-select v-model="inbound.settings.network" :style="{ width: '100px' }" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="tcp,udp">TCP,UDP</a-select-option>
|
||||
<a-select-option value="tcp">TCP</a-select-option>
|
||||
<a-select-option value="udp">UDP</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='ivCheck'>
|
||||
<a-switch v-model="inbound.settings.ivCheck"></a-switch>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
34
web/html/form/protocol/socks.html
Normal file
34
web/html/form/protocol/socks.html
Normal file
@@ -0,0 +1,34 @@
|
||||
{{define "form/socks"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "pages.inbounds.enable" }} UDP'>
|
||||
<a-switch v-model="inbound.settings.udp"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="IP" v-if="inbound.settings.udp">
|
||||
<a-input v-model.trim="inbound.settings.ip"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "password" }}'>
|
||||
<a-switch :checked="inbound.settings.auth === 'password'" @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
|
||||
</a-form-item>
|
||||
<template v-if="inbound.settings.auth === 'password'">
|
||||
<table :style="{ width: '100%', textAlign: 'center', margin: '1rem 0' }">
|
||||
<tr>
|
||||
<td width="45%">{{ i18n "username" }}</td>
|
||||
<td width="45%">{{ i18n "password" }}</td>
|
||||
<td>
|
||||
<a-button icon="plus" size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())"></a-button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<a-input-group compact v-for="(account, index) in inbound.settings.accounts" :style="{ marginBottom: '10px' }">
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
|
||||
<template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
|
||||
</a-input>
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
|
||||
<template slot="addonAfter">
|
||||
<a-button icon="minus" size="small" @click="inbound.settings.delAccount(index)"></a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</template>
|
||||
</a-form>
|
||||
{{end}}
|
||||
50
web/html/form/protocol/trojan.html
Normal file
50
web/html/form/protocol/trojan.html
Normal file
@@ -0,0 +1,50 @@
|
||||
{{define "form/trojan"}}
|
||||
<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.trojans.slice(0,1)" v-if="!isEdit">
|
||||
<a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
|
||||
{{template "form/client"}}
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse v-else>
|
||||
<a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
|
||||
<table width="100%">
|
||||
<tr class="client-table-header">
|
||||
<th>{{ i18n "pages.inbounds.email" }}</th>
|
||||
<th>Password</th>
|
||||
</tr>
|
||||
<tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
|
||||
<td>[[ client.email ]]</td>
|
||||
<td>[[ client.password ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<template v-if="inbound.isTcp">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Fallbacks">
|
||||
<a-button icon="plus" type="primary" size="small" @click="inbound.settings.addFallback()"></a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- trojan fallbacks -->
|
||||
<a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '0' }"> Fallback [[ index + 1 ]] <a-icon type="delete" @click="() => inbound.settings.delFallback(index)" :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
|
||||
</a-divider>
|
||||
<a-form-item label='SNI'>
|
||||
<a-input v-model="fallback.name"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='ALPN'>
|
||||
<a-input v-model="fallback.alpn"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Path'>
|
||||
<a-input v-model="fallback.path"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Dest'>
|
||||
<a-input v-model="fallback.dest"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='xVer'>
|
||||
<a-input-number v-model.number="fallback.xver" :min="0" :max="2"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-divider style="margin:5px 0;"></a-divider>
|
||||
</template>
|
||||
{{end}}
|
||||
102
web/html/form/protocol/vless.html
Normal file
102
web/html/form/protocol/vless.html
Normal file
@@ -0,0 +1,102 @@
|
||||
{{define "form/vless"}}
|
||||
<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
|
||||
<a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
|
||||
{{template "form/client"}}
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse v-else>
|
||||
<a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
|
||||
<table width="100%">
|
||||
<tr class="client-table-header">
|
||||
<th>{{ i18n "pages.inbounds.email" }}</th>
|
||||
<th>ID</th>
|
||||
</tr>
|
||||
<tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
|
||||
<td>[[ client.email ]]</td>
|
||||
<td>[[ client.id ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<template v-if="!inbound.stream.isReality">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Authentication">
|
||||
<a-select v-model="inbound.settings.selectedAuth" @change="getNewVlessEnc" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="X25519, not Post-Quantum">X25519 (not Post-Quantum)</a-select-option>
|
||||
<a-select-option value="ML-KEM-768, Post-Quantum">ML-KEM-768 (Post-Quantum)</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="decryption">
|
||||
<a-input v-model.trim="inbound.settings.decryption"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="encryption">
|
||||
<a-input v-model="inbound.settings.encryption" disabled></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label=" ">
|
||||
<a-space>
|
||||
<a-button type="primary" icon="import" @click="getNewVlessEnc">Get New keys（获取新密钥）</a-button>
|
||||
<a-button danger @click="clearKeys">Clear</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-divider v-if="inbound.settings.selectedAuth" :style="{ margin: '5px 0' }"></a-divider>
|
||||
</template>
|
||||
<template v-if="inbound.isTcp">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Fallbacks">
|
||||
<a-button icon="plus" type="primary" size="small" @click="inbound.settings.addFallback()"></a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- vless fallbacks -->
|
||||
<a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '0' }"> Fallback [[ index + 1 ]] <a-icon type="delete" @click="() => inbound.settings.delFallback(index)" :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
|
||||
</a-divider>
|
||||
<a-form-item label='SNI'>
|
||||
<a-input v-model="fallback.name"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='ALPN'>
|
||||
<a-input v-model="fallback.alpn"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Path'>
|
||||
<a-input v-model="fallback.path"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Dest'>
|
||||
<a-input v-model="fallback.dest"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='xVer'>
|
||||
<a-input-number v-model.number="fallback.xver" :min="0" :max="2"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-divider :style="{ margin: '5px 0' }"></a-divider>
|
||||
</template>
|
||||
<template v-if="inbound.settings.vlesses.some(c => c.flow === 'xtls-rprx-vision' || c.flow === 'xtls-rprx-vision-udp443')">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Vision Seed">
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="6">
|
||||
<a-input-number :value="(inbound.settings.testseed && inbound.settings.testseed[0] !== undefined) ? inbound.settings.testseed[0] : 900" @change="(val) => updateTestseed(0, val)" :min="0" :max="9999" :style="{ width: '100%' }" placeholder="900" addon-before="[0]"></a-input-number>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-input-number :value="(inbound.settings.testseed && inbound.settings.testseed[1] !== undefined) ? inbound.settings.testseed[1] : 500" @change="(val) => updateTestseed(1, val)" :min="0" :max="9999" :style="{ width: '100%' }" placeholder="500" addon-before="[1]"></a-input-number>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-input-number :value="(inbound.settings.testseed && inbound.settings.testseed[2] !== undefined) ? inbound.settings.testseed[2] : 900" @change="(val) => updateTestseed(2, val)" :min="0" :max="9999" :style="{ width: '100%' }" placeholder="900" addon-before="[2]"></a-input-number>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-input-number :value="(inbound.settings.testseed && inbound.settings.testseed[3] !== undefined) ? inbound.settings.testseed[3] : 256" @change="(val) => updateTestseed(3, val)" :min="0" :max="9999" :style="{ width: '100%' }" placeholder="256" addon-before="[3]"></a-input-number>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-space :size="8" :style="{ marginTop: '8px' }">
|
||||
<a-button type="primary" @click="setRandomTestseed">
|
||||
Random（随机数值）
|
||||
</a-button>
|
||||
<a-button @click="resetTestseed">
|
||||
Reset（重置默认）
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-divider :style="{ margin: '5px 0' }"></a-divider>
|
||||
</template>
|
||||
{{end}}
|
||||
23
web/html/form/protocol/vmess.html
Normal file
23
web/html/form/protocol/vmess.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{{define "form/vmess"}}
|
||||
<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vmesses.slice(0,1)" v-if="!isEdit">
|
||||
<a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
|
||||
{{template "form/client"}}
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse v-else>
|
||||
<a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vmesses.length">
|
||||
<table width="100%">
|
||||
<tr class="client-table-header">
|
||||
<th>{{ i18n "pages.inbounds.email" }}</th>
|
||||
<th>ID</th>
|
||||
<th>{{ i18n "security" }}</th>
|
||||
</tr>
|
||||
<tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
|
||||
<td>[[ client.email ]]</td>
|
||||
<td>[[ client.id ]]</td>
|
||||
<td>[[ client.security ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
{{end}}
|
||||
76
web/html/form/protocol/wireguard.html
Normal file
76
web/html/form/protocol/wireguard.html
Normal file
@@ -0,0 +1,76 @@
|
||||
{{define "form/wireguard"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "reset" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.xray.wireguard.secretKey" }}
|
||||
<a-icon type="sync" @click="[inbound.settings.pubKey, inbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="inbound.settings.secretKey"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
|
||||
<a-input disabled v-model="inbound.settings.pubKey"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='MTU'>
|
||||
<a-input-number v-model.number="inbound.settings.mtu"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='No Kernel Tun'>
|
||||
<a-switch v-model="inbound.settings.noKernelTun"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Peers">
|
||||
<a-button icon="plus" type="primary" size="small" @click="inbound.settings.addPeer()"></a-button>
|
||||
</a-form-item>
|
||||
<a-form v-for="(peer, index) in inbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '0' }"> Peer [[ index + 1 ]] <a-icon v-if="inbound.settings.peers.length>1" type="delete" @click="() => inbound.settings.delPeer(index)" :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
|
||||
</a-divider>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "reset" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.xray.wireguard.secretKey" }}
|
||||
<a-icon @click="[peer.publicKey, peer.privateKey] = Object.values(Wireguard.generateKeypair())" type="sync"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="peer.privateKey"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
{{ i18n "pages.xray.wireguard.publicKey" }}
|
||||
</template>
|
||||
<a-input v-model.trim="peer.publicKey"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "reset" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.xray.wireguard.psk" }}
|
||||
<a-icon @click="peer.psk = Wireguard.keyToBase64(Wireguard.generatePresharedKey())" type="sync"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="peer.psk"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
{{ i18n "pages.xray.wireguard.allowedIPs" }}
|
||||
<a-button icon="plus" type="primary" size="small" @click="peer.allowedIPs.push('')"></a-button>
|
||||
</template>
|
||||
<template v-for="(aip, index) in peer.allowedIPs" :style="{ marginBottom: '10px' }">
|
||||
<a-input v-model.trim="peer.allowedIPs[index]">
|
||||
<a-button icon="minus" v-if="peer.allowedIPs.length>1" slot="addonAfter" size="small" @click="peer.allowedIPs.splice(index, 1)"></a-button>
|
||||
</a-input>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item label='Keep Alive'>
|
||||
<a-input-number v-model.number="peer.keepAlive" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-form>
|
||||
{{end}}
|
||||
63
web/html/form/reality_settings.html
Normal file
63
web/html/form/reality_settings.html
Normal file
@@ -0,0 +1,63 @@
|
||||
{{define "form/realitySettings"}}
|
||||
<template>
|
||||
<a-form-item label='Show'>
|
||||
<a-switch v-model="inbound.stream.reality.show"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='Xver'>
|
||||
<a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='uTLS'>
|
||||
<a-select v-model="inbound.stream.reality.settings.fingerprint" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='Target'>
|
||||
<a-input v-model.trim="inbound.stream.reality.target"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='SNI'>
|
||||
<a-input v-model.trim="inbound.stream.reality.serverNames"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Max Time Diff (ms)'>
|
||||
<a-input-number v-model.number="inbound.stream.reality.maxTimediff" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Min Client Ver'>
|
||||
<a-input v-model.trim="inbound.stream.reality.minClientVer"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Max Client Ver'>
|
||||
<a-input v-model.trim="inbound.stream.reality.maxClientVer"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "reset" }}</span>
|
||||
</template> Short IDs <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortIds()"
|
||||
type="sync"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-textarea v-model.trim="inbound.stream.reality.shortIds"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label='SpiderX'>
|
||||
<a-input v-model.trim="inbound.stream.reality.settings.spiderX"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
|
||||
<a-textarea v-model="inbound.stream.reality.settings.publicKey"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
|
||||
<a-textarea v-model="inbound.stream.reality.privateKey"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label=" ">
|
||||
<a-button type="primary" icon="import" @click="getNewX25519Cert">Get New Cert（随机获取新证书）</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item label="mldsa65 Seed">
|
||||
<a-textarea v-model="inbound.stream.reality.mldsa65Seed"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label="mldsa65 Verify">
|
||||
<a-textarea v-model="inbound.stream.reality.settings.mldsa65Verify"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label=" ">
|
||||
<a-button type="primary" icon="import" @click="getNewmldsa65">Get New Seed（获取Mldsa65数值）</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
{{end}}
|
||||
29
web/html/form/sniffing.html
Normal file
29
web/html/form/sniffing.html
Normal file
@@ -0,0 +1,29 @@
|
||||
{{define "form/sniffing"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ i18n "enabled" }}
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
|
||||
</template>
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-model="inbound.sniffing.enabled"></a-switch>
|
||||
</a-form-item>
|
||||
<template v-if="inbound.sniffing.enabled">
|
||||
<a-form-item :wrapper-col="{span:24}">
|
||||
<a-checkbox-group v-model="inbound.sniffing.destOverride">
|
||||
<a-checkbox v-for="key,value in SNIFFING_OPTION" :value="key">[[ value ]]</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item label='Metadata Only'>
|
||||
<a-switch v-model="inbound.sniffing.metadataOnly"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='Route Only'>
|
||||
<a-switch v-model="inbound.sniffing.routeOnly"></a-switch>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
{{end}}
|
||||
29
web/html/form/stream/external_proxy.html
Normal file
29
web/html/form/stream/external_proxy.html
Normal file
@@ -0,0 +1,29 @@
|
||||
{{define "form/externalProxy"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '5px 0 0' }"></a-divider>
|
||||
<a-form-item label="External Proxy">
|
||||
<a-switch v-model="externalProxy"></a-switch>
|
||||
<a-button icon="plus" v-if="externalProxy" type="primary" :style="{ marginLeft: '10px' }" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})"></a-button>
|
||||
</a-form-item>
|
||||
<a-input-group :style="{ margin: '8px 0' }" compact v-for="(row, index) in inbound.stream.externalProxy">
|
||||
<template>
|
||||
<a-tooltip title="Force TLS">
|
||||
<a-select v-model="row.forceTls" :style="{ width: '20%', margin: '0px' }" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
|
||||
<a-select-option value="none">{{ i18n "none" }}</a-select-option>
|
||||
<a-select-option value="tls">TLS</a-select-option>
|
||||
</a-select>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input :style="{ width: '30%' }" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
|
||||
<a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
|
||||
<a-input-number :style="{ width: '15%' }" v-model.number="row.port" min="1" max="65531"></a-input-number>
|
||||
</a-tooltip>
|
||||
<a-input :style="{ width: '30%', top: '0' }" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'>
|
||||
<template slot="addonAfter">
|
||||
<a-button icon="minus" size="small" @click="inbound.stream.externalProxy.splice(index, 1)"></a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</a-form>
|
||||
{{end}}
|
||||
84
web/html/form/stream/stream_finalmask.html
Normal file
84
web/html/form/stream/stream_finalmask.html
Normal file
@@ -0,0 +1,84 @@
|
||||
{{define "form/streamFinalMask"}}
|
||||
<a-divider :style="{ margin: '5px 0 0' }"></a-divider>
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }"
|
||||
:wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="UDP Masks">
|
||||
<a-button icon="plus" type="primary" size="small"
|
||||
@click="inbound.stream.addUdpMask(inbound.stream.network === 'kcp' ? 'mkcp-aes128gcm' : 'xdns')"></a-button>
|
||||
</a-form-item>
|
||||
<template
|
||||
v-if="inbound.stream.finalmask.udp && inbound.stream.finalmask.udp.length > 0">
|
||||
<a-form v-for="(mask, index) in inbound.stream.finalmask.udp"
|
||||
:key="index" :colon="false"
|
||||
:label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '0' }"> UDP Mask [[ index + 1 ]]
|
||||
<a-icon type="delete"
|
||||
@click="() => inbound.stream.delUdpMask(index)"
|
||||
:style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
|
||||
</a-divider>
|
||||
<a-form-item label='Type'>
|
||||
<a-select v-model="mask.type"
|
||||
@change="(type) => { mask.settings = mask._getDefaultSettings(type, {}); if(inbound.stream.network === 'kcp') { inbound.stream.kcp.mtu = type === 'xdns' ? 900 : 1350; } }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<!-- mKCP-specific masks -->
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="mkcp-aes128gcm">
|
||||
mKCP AES-128-GCM</a-select-option>
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="header-dns">
|
||||
Header DNS</a-select-option>
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="header-dtls">
|
||||
Header DTLS 1.2</a-select-option>
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="header-srtp">
|
||||
Header SRTP</a-select-option>
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="header-utp">
|
||||
Header uTP</a-select-option>
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="header-wechat">
|
||||
Header WeChat Video</a-select-option>
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="header-wireguard">
|
||||
Header WireGuard</a-select-option>
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="mkcp-original">
|
||||
mKCP Original</a-select-option>
|
||||
<a-select-option v-if="inbound.stream.network === 'kcp'"
|
||||
value="xicmp">
|
||||
xICMP (Experimental)</a-select-option>
|
||||
<!-- xDNS for TCP/WS/HTTPUpgrade/XHTTP/KCP -->
|
||||
<a-select-option
|
||||
v-if="['tcp', 'ws', 'httpupgrade', 'xhttp', 'kcp'].includes(inbound.stream.network)"
|
||||
value="xdns">
|
||||
xDNS (Experimental)</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<!-- Settings for password-based masks -->
|
||||
<a-form-item label='Password'
|
||||
v-if="['mkcp-aes128gcm'].includes(mask.type)">
|
||||
<a-input v-model.trim="mask.settings.password"
|
||||
placeholder="Obfuscation password"></a-input>
|
||||
</a-form-item>
|
||||
<!-- Settings for domain-based masks -->
|
||||
<a-form-item label='Domain'
|
||||
v-if="['header-dns', 'xdns'].includes(mask.type)">
|
||||
<a-input v-model.trim="mask.settings.domain"
|
||||
placeholder="e.g., www.example.com"></a-input>
|
||||
</a-form-item>
|
||||
<!-- Settings for xICMP -->
|
||||
<a-form-item label='IP'
|
||||
v-if="mask.type === 'xicmp'">
|
||||
<a-input v-model.trim="mask.settings.ip"
|
||||
placeholder="e.g., 1.1.1.1"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='ID'
|
||||
v-if="mask.type === 'xicmp'">
|
||||
<a-input-number v-model.number="mask.settings.id"
|
||||
:min="0" :max="65535"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
</a-form>
|
||||
{{end}}
|
||||
13
web/html/form/stream/stream_grpc.html
Normal file
13
web/html/form/stream/stream_grpc.html
Normal file
@@ -0,0 +1,13 @@
|
||||
{{define "form/streamGRPC"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Service Name">
|
||||
<a-input v-model.trim="inbound.stream.grpc.serviceName"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Authority">
|
||||
<a-input v-model.trim="inbound.stream.grpc.authority"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Multi Mode">
|
||||
<a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
26
web/html/form/stream/stream_httpupgrade.html
Normal file
26
web/html/form/stream/stream_httpupgrade.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{{define "form/streamHTTPUpgrade"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Proxy Protocol">
|
||||
<a-switch v-model="inbound.stream.httpupgrade.acceptProxyProtocol"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "host" }}'>
|
||||
<a-input v-model.trim="inbound.stream.httpupgrade.host"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "path" }}'>
|
||||
<a-input v-model.trim="inbound.stream.httpupgrade.path"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
|
||||
<a-button icon="plus" size="small" @click="inbound.stream.httpupgrade.addHeader('', '')"></a-button>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{span:24}">
|
||||
<a-input-group compact v-for="(header, index) in inbound.stream.httpupgrade.headers">
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
|
||||
<template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
|
||||
</a-input>
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
|
||||
<a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.httpupgrade.removeHeader(index)"></a-button>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
32
web/html/form/stream/stream_kcp.html
Normal file
32
web/html/form/stream/stream_kcp.html
Normal file
@@ -0,0 +1,32 @@
|
||||
{{define "form/streamKCP"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }"
|
||||
:wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='MTU'>
|
||||
<a-input-number v-model.number="inbound.stream.kcp.mtu" :min="576"
|
||||
:max="1460"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='TTI (ms)'>
|
||||
<a-input-number v-model.number="inbound.stream.kcp.tti" :min="10"
|
||||
:max="100"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Uplink (MB/s)'>
|
||||
<a-input-number v-model.number="inbound.stream.kcp.upCap"
|
||||
:min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Downlink (MB/s)'>
|
||||
<a-input-number v-model.number="inbound.stream.kcp.downCap"
|
||||
:min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Congestion'>
|
||||
<a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='Read Buffer (MB)'>
|
||||
<a-input-number v-model.number="inbound.stream.kcp.readBuffer"
|
||||
:min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='Write Buffer (MB)'>
|
||||
<a-input-number v-model.number="inbound.stream.kcp.writeBuffer"
|
||||
:min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
59
web/html/form/stream/stream_settings.html
Normal file
59
web/html/form/stream/stream_settings.html
Normal file
@@ -0,0 +1,59 @@
|
||||
{{define "form/streamSettings"}}
|
||||
<!-- select stream network -->
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }"
|
||||
:wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "transmission" }}'>
|
||||
<a-select v-model="inbound.stream.network" :style="{ width: '75%' }"
|
||||
@change="streamNetworkChange"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="tcp">TCP (RAW)</a-select-option>
|
||||
<a-select-option value="kcp">mKCP</a-select-option>
|
||||
<a-select-option value="ws">WebSocket</a-select-option>
|
||||
<a-select-option value="grpc">gRPC</a-select-option>
|
||||
<a-select-option value="httpupgrade">HTTPUpgrade</a-select-option>
|
||||
<a-select-option value="xhttp">XHTTP</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- tcp -->
|
||||
<template v-if="inbound.stream.network === 'tcp'">
|
||||
{{template "form/streamTCP"}}
|
||||
</template>
|
||||
|
||||
<!-- kcp -->
|
||||
<template v-if="inbound.stream.network === 'kcp'">
|
||||
{{template "form/streamKCP"}}
|
||||
</template>
|
||||
|
||||
<!-- ws -->
|
||||
<template v-if="inbound.stream.network === 'ws'">
|
||||
{{template "form/streamWS"}}
|
||||
</template>
|
||||
|
||||
<!-- grpc -->
|
||||
<template v-if="inbound.stream.network === 'grpc'">
|
||||
{{template "form/streamGRPC"}}
|
||||
</template>
|
||||
|
||||
<!-- httpupgrade -->
|
||||
<template v-if="inbound.stream.network === 'httpupgrade'">
|
||||
{{template "form/streamHTTPUpgrade"}}
|
||||
</template>
|
||||
|
||||
<!-- xhttp -->
|
||||
<template v-if="inbound.stream.network === 'xhttp'">
|
||||
{{template "form/streamXHTTP"}}
|
||||
</template>
|
||||
|
||||
<!-- sockopt -->
|
||||
<template>
|
||||
{{template "form/streamSockopt"}}
|
||||
</template>
|
||||
|
||||
<!-- finalmask - only for TCP, WS, HTTPUpgrade, XHTTP, mKCP -->
|
||||
<template
|
||||
v-if="['tcp', 'ws', 'httpupgrade', 'xhttp', 'kcp'].includes(inbound.stream.network)">
|
||||
{{template "form/streamFinalMask"}}
|
||||
</template>
|
||||
{{end}}
|
||||
75
web/html/form/stream/stream_sockopt.html
Normal file
75
web/html/form/stream/stream_sockopt.html
Normal file
@@ -0,0 +1,75 @@
|
||||
{{define "form/streamSockopt"}}
|
||||
<a-divider :style="{ margin: '5px 0 0' }"></a-divider>
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Sockopt">
|
||||
<a-switch v-model="inbound.stream.sockoptSwitch"></a-switch>
|
||||
</a-form-item>
|
||||
<template v-if="inbound.stream.sockoptSwitch">
|
||||
<a-form-item label="Route Mark">
|
||||
<a-input-number v-model.number="inbound.stream.sockopt.mark" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="TCP Keep Alive Interval">
|
||||
<a-input-number v-model.number="inbound.stream.sockopt.tcpKeepAliveInterval" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="TCP Keep Alive Idle">
|
||||
<a-input-number v-model.number="inbound.stream.sockopt.tcpKeepAliveIdle" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="TCP Max Seg">
|
||||
<a-input-number v-model.number="inbound.stream.sockopt.tcpMaxSeg" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="TCP User Timeout">
|
||||
<a-input-number v-model.number="inbound.stream.sockopt.tcpUserTimeout" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="TCP Window Clamp">
|
||||
<a-input-number v-model.number="inbound.stream.sockopt.tcpWindowClamp" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="Proxy Protocol">
|
||||
<a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="TCP Fast Open">
|
||||
<a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Multipath TCP">
|
||||
<a-switch v-model.trim="inbound.stream.sockopt.tcpMptcp"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Penetrate">
|
||||
<a-switch v-model.trim="inbound.stream.sockopt.penetrate"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="V6 Only">
|
||||
<a-switch v-model.trim="inbound.stream.sockopt.V6Only"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='Domain Strategy'>
|
||||
<a-select v-model="inbound.stream.sockopt.domainStrategy" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in DOMAIN_STRATEGY_OPTION" :value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='TCP Congestion'>
|
||||
<a-select v-model="inbound.stream.sockopt.tcpcongestion" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in TCP_CONGESTION_OPTION" :value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="TProxy">
|
||||
<a-select v-model="inbound.stream.sockopt.tproxy" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="off">Off</a-select-option>
|
||||
<a-select-option value="redirect">Redirect</a-select-option>
|
||||
<a-select-option value="tproxy">TProxy</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Dialer Proxy">
|
||||
<a-input v-model="inbound.stream.sockopt.dialerProxy"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Interface Name">
|
||||
<a-input v-model="inbound.stream.sockopt.interfaceName"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Trusted X-Forwarded-For">
|
||||
<a-select mode="tags" v-model="inbound.stream.sockopt.trustedXForwardedFor" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="CF-Connecting-IP">CF-Connecting-IP</a-select-option>
|
||||
<a-select-option value="X-Real-IP">X-Real-IP</a-select-option>
|
||||
<a-select-option value="True-Client-IP">True-Client-IP</a-select-option>
|
||||
<a-select-option value="X-Client-IP">X-Client-IP</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
{{end}}
|
||||
72
web/html/form/stream/stream_tcp.html
Normal file
72
web/html/form/stream/stream_tcp.html
Normal file
@@ -0,0 +1,72 @@
|
||||
{{define "form/streamTCP"}}
|
||||
<!-- tcp type -->
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Proxy Protocol" v-if="inbound.canEnableTls()">
|
||||
<a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='HTTP {{ i18n "camouflage" }}'>
|
||||
<a-switch :checked="inbound.stream.tcp.type === 'http'" @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'"></a-switch>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<!-- tcp request -->
|
||||
<a-divider :style="{ margin: '0' }">{{ i18n "pages.inbounds.stream.general.request" }}</a-divider>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
|
||||
<a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.method" }}'>
|
||||
<a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">{{ i18n "pages.inbounds.stream.tcp.path" }}
|
||||
<a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addPath('/')"></a-button>
|
||||
</template>
|
||||
<template v-for="(path, index) in inbound.stream.tcp.request.path">
|
||||
<a-input v-model.trim="inbound.stream.tcp.request.path[index]">
|
||||
<a-button icon="minus" size="small" slot="addonAfter" @click="inbound.stream.tcp.request.removePath(index)" v-if="inbound.stream.tcp.request.path.length>1"></a-button>
|
||||
</a-input>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
|
||||
<a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')"></a-button>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{span:24}">
|
||||
<a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
|
||||
<template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
|
||||
</a-input>
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
|
||||
<a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.tcp.request.removeHeader(index)"></a-button>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
|
||||
<!-- tcp response -->
|
||||
<a-divider :style="{ margin: '0' }">{{ i18n "pages.inbounds.stream.general.response" }}</a-divider>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
|
||||
<a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.status" }}'>
|
||||
<a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.statusDescription" }}'>
|
||||
<a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
|
||||
<a-button icon="plus" size="small" @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')"></a-button>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{span:24}">
|
||||
<a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
|
||||
<template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
|
||||
</a-input>
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
|
||||
<template slot="addonAfter">
|
||||
<a-button icon="minus" size="small" @click="inbound.stream.tcp.response.removeHeader(index)"></a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
29
web/html/form/stream/stream_ws.html
Normal file
29
web/html/form/stream/stream_ws.html
Normal file
@@ -0,0 +1,29 @@
|
||||
{{define "form/streamWS"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Proxy Protocol">
|
||||
<a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "host" }}'>
|
||||
<a-input v-model.trim="inbound.stream.ws.host"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "path" }}'>
|
||||
<a-input v-model.trim="inbound.stream.ws.path"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='Heartbeat Period'>
|
||||
<a-input-number v-model.number="inbound.stream.ws.heartbeatPeriod" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
|
||||
<a-button icon="plus" size="small" @click="inbound.stream.ws.addHeader('', '')"></a-button>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{span:24}">
|
||||
<a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
|
||||
<template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
|
||||
</a-input>
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
|
||||
<a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.ws.removeHeader(index)"></a-button>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
147
web/html/form/stream/stream_xhttp.html
Normal file
147
web/html/form/stream/stream_xhttp.html
Normal file
@@ -0,0 +1,147 @@
|
||||
{{define "form/streamXHTTP"}}
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }"
|
||||
:wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "host" }}'>
|
||||
<a-input v-model.trim="inbound.stream.xhttp.host"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "path" }}'>
|
||||
<a-input v-model.trim="inbound.stream.xhttp.path"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
|
||||
<a-button icon="plus" size="small"
|
||||
@click="inbound.stream.xhttp.addHeader('', '')"></a-button>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{span:24}">
|
||||
<a-input-group compact
|
||||
v-for="(header, index) in inbound.stream.xhttp.headers">
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.name"
|
||||
placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
|
||||
<template slot="addonBefore" :style="{ margin: '0' }">[[ index+1
|
||||
]]</template>
|
||||
</a-input>
|
||||
<a-input :style="{ width: '50%' }" v-model.trim="header.value"
|
||||
placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
|
||||
<a-button icon="minus" slot="addonAfter" size="small"
|
||||
@click="inbound.stream.xhttp.removeHeader(index)"></a-button>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item label='Mode'>
|
||||
<a-select v-model="inbound.stream.xhttp.mode" :style="{ width: '50%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in MODE_OPTION" :value="key">[[ key
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Max Buffered Upload"
|
||||
v-if="inbound.stream.xhttp.mode === 'packet-up'">
|
||||
<a-input-number
|
||||
v-model.number="inbound.stream.xhttp.scMaxBufferedPosts"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="Max Upload Size (Byte)"
|
||||
v-if="inbound.stream.xhttp.mode === 'packet-up'">
|
||||
<a-input
|
||||
v-model.trim="inbound.stream.xhttp.scMaxEachPostBytes"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Stream-Up Server"
|
||||
v-if="inbound.stream.xhttp.mode === 'stream-up'">
|
||||
<a-input
|
||||
v-model.trim="inbound.stream.xhttp.scStreamUpServerSecs"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Padding Bytes">
|
||||
<a-input v-model.trim="inbound.stream.xhttp.xPaddingBytes"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Padding Obfs Mode">
|
||||
<a-switch v-model="inbound.stream.xhttp.xPaddingObfsMode"></a-switch>
|
||||
</a-form-item>
|
||||
<template v-if="inbound.stream.xhttp.xPaddingObfsMode">
|
||||
<a-form-item label="Padding Key">
|
||||
<a-input v-model.trim="inbound.stream.xhttp.xPaddingKey"
|
||||
placeholder="x_padding"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Padding Header">
|
||||
<a-input v-model.trim="inbound.stream.xhttp.xPaddingHeader"
|
||||
placeholder="X-Padding"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Padding Placement">
|
||||
<a-select v-model="inbound.stream.xhttp.xPaddingPlacement"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>Default (queryInHeader)</a-select-option>
|
||||
<a-select-option
|
||||
value="queryInHeader">queryInHeader</a-select-option>
|
||||
<a-select-option value="header">header</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Padding Method">
|
||||
<a-select v-model="inbound.stream.xhttp.xPaddingMethod"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>Default (repeat-x)</a-select-option>
|
||||
<a-select-option value="repeat-x">repeat-x</a-select-option>
|
||||
<a-select-option value="tokenish">tokenish</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="Uplink HTTP Method">
|
||||
<a-select v-model="inbound.stream.xhttp.uplinkHTTPMethod"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>Default (POST)</a-select-option>
|
||||
<a-select-option value="POST">POST</a-select-option>
|
||||
<a-select-option value="PUT">PUT</a-select-option>
|
||||
<a-select-option value="GET">GET (packet-up only)</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Session Placement">
|
||||
<a-select v-model="inbound.stream.xhttp.sessionPlacement"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>Default (path)</a-select-option>
|
||||
<a-select-option value="path">path</a-select-option>
|
||||
<a-select-option value="header">header</a-select-option>
|
||||
<a-select-option value="cookie">cookie</a-select-option>
|
||||
<a-select-option value="query">query</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Session Key"
|
||||
v-if="inbound.stream.xhttp.sessionPlacement && inbound.stream.xhttp.sessionPlacement !== 'path'">
|
||||
<a-input v-model.trim="inbound.stream.xhttp.sessionKey"
|
||||
placeholder="x_session"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Sequence Placement">
|
||||
<a-select v-model="inbound.stream.xhttp.seqPlacement"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>Default (path)</a-select-option>
|
||||
<a-select-option value="path">path</a-select-option>
|
||||
<a-select-option value="header">header</a-select-option>
|
||||
<a-select-option value="cookie">cookie</a-select-option>
|
||||
<a-select-option value="query">query</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Sequence Key"
|
||||
v-if="inbound.stream.xhttp.seqPlacement && inbound.stream.xhttp.seqPlacement !== 'path'">
|
||||
<a-input v-model.trim="inbound.stream.xhttp.seqKey"
|
||||
placeholder="x_seq"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Uplink Data Placement"
|
||||
v-if="inbound.stream.xhttp.mode === 'packet-up'">
|
||||
<a-select v-model="inbound.stream.xhttp.uplinkDataPlacement"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>Default (body)</a-select-option>
|
||||
<a-select-option value="body">body</a-select-option>
|
||||
<a-select-option value="header">header</a-select-option>
|
||||
<a-select-option value="query">query</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Uplink Data Key"
|
||||
v-if="inbound.stream.xhttp.mode === 'packet-up' && inbound.stream.xhttp.uplinkDataPlacement && inbound.stream.xhttp.uplinkDataPlacement !== 'body'">
|
||||
<a-input v-model.trim="inbound.stream.xhttp.uplinkDataKey"
|
||||
placeholder="x_data"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Uplink Chunk Size"
|
||||
v-if="inbound.stream.xhttp.mode === 'packet-up' && inbound.stream.xhttp.uplinkDataPlacement && inbound.stream.xhttp.uplinkDataPlacement !== 'body'">
|
||||
<a-input-number v-model.number="inbound.stream.xhttp.uplinkChunkSize"
|
||||
:min="0" placeholder="0 (unlimited)"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="No SSE Header">
|
||||
<a-switch v-model="inbound.stream.xhttp.noSSEHeader"></a-switch>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{end}}
|
||||
150
web/html/form/tls_settings.html
Normal file
150
web/html/form/tls_settings.html
Normal file
@@ -0,0 +1,150 @@
|
||||
{{define "form/tlsSettings"}}
|
||||
<!-- tls enable -->
|
||||
<a-form v-if="inbound.canEnableTls()" :colon="false"
|
||||
:label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-divider :style="{ margin: '3px 0' }"></a-divider>
|
||||
<a-form-item label='{{ i18n "security" }}'>
|
||||
<a-radio-group v-model="inbound.stream.security" button-style="solid">
|
||||
<a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
|
||||
<a-radio-button v-if="inbound.canEnableReality()"
|
||||
value="reality">Reality</a-radio-button>
|
||||
<a-radio-button value="tls">TLS</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<!-- tls settings -->
|
||||
<template v-if="inbound.stream.isTls">
|
||||
<a-form-item label="SNI" placeholder="Server Name Indication">
|
||||
<a-input v-model.trim="inbound.stream.tls.sni"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Cipher Suites">
|
||||
<a-select v-model="inbound.stream.tls.cipherSuites"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>Auto</a-select-option>
|
||||
<a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[
|
||||
value ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Min/Max Version">
|
||||
<a-input-group compact>
|
||||
<a-select v-model="inbound.stream.tls.minVersion"
|
||||
:style="{ width: '50%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
<a-select v-model="inbound.stream.tls.maxVersion"
|
||||
:style="{ width: '50%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="uTLS">
|
||||
<a-select v-model="inbound.stream.tls.settings.fingerprint"
|
||||
:style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value>None</a-select-option>
|
||||
<a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="ALPN">
|
||||
<a-select mode="multiple"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme"
|
||||
v-model="inbound.stream.tls.alpn">
|
||||
<a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Reject Unknown SNI">
|
||||
<a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Disable System Root">
|
||||
<a-switch v-model="inbound.stream.tls.disableSystemRoot"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="Session Resumption">
|
||||
<a-switch v-model="inbound.stream.tls.enableSessionResumption"></a-switch>
|
||||
</a-form-item>
|
||||
<a-divider :style="{ margin: '3px 0' }"></a-divider>
|
||||
<template v-for="cert,index in inbound.stream.tls.certs">
|
||||
<a-form-item label='{{ i18n "certificate" }}'>
|
||||
<a-radio-group v-model="cert.useFile" button-style="solid"
|
||||
:style="{ display: 'inline-flex', whiteSpace: 'nowrap', maxWidth: '100%' }">
|
||||
<a-radio-button :value="true"
|
||||
:style="{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">{{
|
||||
i18n "pages.inbounds.certificatePath" }}</a-radio-button>
|
||||
<a-radio-button :value="false"
|
||||
:style="{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">{{
|
||||
i18n "pages.inbounds.certificateContent" }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label=" ">
|
||||
<a-space>
|
||||
<a-button icon="plus" v-if="index === 0" type="primary" size="small"
|
||||
@click="inbound.stream.tls.addCert()"></a-button>
|
||||
<a-button icon="minus" v-if="inbound.stream.tls.certs.length>1"
|
||||
type="primary" size="small"
|
||||
@click="inbound.stream.tls.removeCert(index)"></a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<template v-if="cert.useFile">
|
||||
<a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
|
||||
<a-input v-model.trim="cert.certFile"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
|
||||
<a-input v-model.trim="cert.keyFile"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label=" ">
|
||||
<a-button type="primary" icon="import"
|
||||
@click="setDefaultCertData(index)">
|
||||
{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
|
||||
<a-textarea v-model="cert.cert"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
|
||||
<a-textarea v-model="cert.key"></a-textarea>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="One Time Loading">
|
||||
<a-switch v-model="cert.oneTimeLoading"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='Usage Option'>
|
||||
<a-select v-model="cert.usage" :style="{ width: '50%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in USAGE_OPTION" :value="key">[[ key
|
||||
]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Build Chain" v-if="cert.usage === 'issue'">
|
||||
<a-switch v-model="cert.buildChain"></a-switch>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label='ECH key'>
|
||||
<a-input v-model="inbound.stream.tls.echServerKeys"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='ECH config'>
|
||||
<a-input v-model="inbound.stream.tls.settings.echConfigList"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='ECH force query'>
|
||||
<a-select v-model="inbound.stream.tls.echForceQuery"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in ['none', 'half', 'full']" :value="key">[[
|
||||
key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label=" ">
|
||||
<a-button type="primary" icon="import" @click="getNewEchCert">Get New ECH Cert</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- reality settings -->
|
||||
<template v-if="inbound.stream.isReality && !inbound.settings.encryption">
|
||||
{{template "form/realitySettings"}}
|
||||
</template>
|
||||
</a-form>
|
||||
{{end}}
|
||||
1977
web/html/inbounds.html
Normal file
1977
web/html/inbounds.html
Normal file
File diff suppressed because it is too large
Load Diff
1362
web/html/index.html
Normal file
1362
web/html/index.html
Normal file
File diff suppressed because it is too large
Load Diff
644
web/html/login.html
Normal file
644
web/html/login.html
Normal file
@@ -0,0 +1,644 @@
|
||||
{{ template "page/head_start" .}}
|
||||
<style>
|
||||
html * {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
/*margin: 20px 0 50px 0;*/
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.ant-form-item-children .ant-btn,
|
||||
.ant-input {
|
||||
height: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.ant-input-group-addon {
|
||||
border-radius: 0 30px 30px 0;
|
||||
width: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input-prefix {
|
||||
left: 23px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input:not(:first-child) {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.centered {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
margin-block-end: 2rem;
|
||||
}
|
||||
|
||||
.title b {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
#app {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#login {
|
||||
animation: charge 0.5s both;
|
||||
background-color: #fff;
|
||||
border-radius: 2rem;
|
||||
padding: 4rem 3rem;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#login:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
|
||||
@keyframes charge {
|
||||
from {
|
||||
transform: translateY(5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.under {
|
||||
background-color: #c7ebe2;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.dark .under {
|
||||
background-color: var(--dark-color-login-wave);
|
||||
}
|
||||
|
||||
.dark #login {
|
||||
background-color: var(--dark-color-surface-100);
|
||||
}
|
||||
|
||||
.dark h1 {
|
||||
color: rgba(255, 255, 255);
|
||||
}
|
||||
|
||||
.ant-btn-primary-login {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-btn-primary-login:focus,
|
||||
.ant-btn-primary-login:hover {
|
||||
color: #fff;
|
||||
background-color: #006655;
|
||||
border-color: #006655;
|
||||
background-image: linear-gradient(270deg,
|
||||
rgba(123, 199, 77, 0) 30%,
|
||||
#009980,
|
||||
rgba(123, 199, 77, 0) 100%);
|
||||
background-repeat: no-repeat;
|
||||
animation: ma-bg-move ease-in-out 5s infinite;
|
||||
background-position-x: -500px;
|
||||
width: 95%;
|
||||
animation-delay: -0.5s;
|
||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
||||
}
|
||||
|
||||
.ant-btn-primary-login.active,
|
||||
.ant-btn-primary-login:active {
|
||||
color: #fff;
|
||||
background-color: #006655;
|
||||
border-color: #006655;
|
||||
}
|
||||
|
||||
@keyframes ma-bg-move {
|
||||
0% {
|
||||
background-position: -500px 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-btn-bg {
|
||||
position: relative;
|
||||
border-radius: 25px;
|
||||
width: 100%;
|
||||
transition: all 0.3s cubic-bezier(.645, .045, .355, 1);
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
background-color: #0a7557;
|
||||
border: 2px double transparent;
|
||||
background-origin: border-box;
|
||||
background-clip: padding-box, border-box;
|
||||
background-size: 300%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg:hover {
|
||||
animation: wave-btn-tara 4s ease infinite;
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg-cl {
|
||||
background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
|
||||
radial-gradient(circle at left top, #006655, #009980, #006655) !important;
|
||||
border-radius: 3em;
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg-cl:hover {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg-cl:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
z-index: -1;
|
||||
background: inherit;
|
||||
background-size: inherit;
|
||||
border-radius: 4em;
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg-cl:hover::before {
|
||||
opacity: 1;
|
||||
filter: blur(20px);
|
||||
animation: wave-btn-tara 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes wave-btn-tara {
|
||||
to {
|
||||
background-position: 300%;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .ant-btn-primary-login {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(rgba(13, 14, 33, 0.45),
|
||||
rgba(13, 14, 33, 0.35));
|
||||
border-radius: 2rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
height: 46px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
animation: none;
|
||||
background-position-x: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.waves-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #dbf5ed;
|
||||
color: white;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.dark .waves-header {
|
||||
background-color: var(--dark-color-login-background);
|
||||
}
|
||||
|
||||
.waves-inner-header {
|
||||
height: 50vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.waves {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
margin-bottom: -8px;
|
||||
/*Fix for safari gap*/
|
||||
min-height: 100px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.parallax>use {
|
||||
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
|
||||
}
|
||||
|
||||
.dark .parallax>use {
|
||||
fill: var(--dark-color-login-wave);
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(1) {
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(2) {
|
||||
animation-delay: -3s;
|
||||
animation-duration: 7s;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(3) {
|
||||
animation-delay: -4s;
|
||||
animation-duration: 10s;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(4) {
|
||||
animation-delay: -5s;
|
||||
animation-duration: 13s;
|
||||
}
|
||||
|
||||
@keyframes move-forever {
|
||||
0% {
|
||||
transform: translate3d(-90px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(85px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.waves {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.words-wrapper {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.words-wrapper b {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.words-wrapper b.is-visible {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.headline.zoom .words-wrapper {
|
||||
-webkit-perspective: 300px;
|
||||
-moz-perspective: 300px;
|
||||
perspective: 300px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headline.zoom b {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.headline.zoom b.is-visible {
|
||||
opacity: 1;
|
||||
-webkit-animation: zoom-in 0.8s;
|
||||
-moz-animation: zoom-in 0.8s;
|
||||
animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
|
||||
}
|
||||
|
||||
.headline.zoom b.is-hidden {
|
||||
-webkit-animation: zoom-out 0.8s;
|
||||
-moz-animation: zoom-out 0.8s;
|
||||
animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateZ(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(100px);
|
||||
-moz-transform: translateZ(100px);
|
||||
-ms-transform: translateZ(100px);
|
||||
-o-transform: translateZ(100px);
|
||||
transform: translateZ(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(-100px);
|
||||
-moz-transform: translateZ(-100px);
|
||||
-ms-transform: translateZ(-100px);
|
||||
-o-transform: translateZ(-100px);
|
||||
transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.ant-space-item .ant-switch {
|
||||
margin: 2px 0 4px;
|
||||
}
|
||||
</style>
|
||||
{{ template "page/head_end" .}}
|
||||
|
||||
{{ template "page/body_start" .}}
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
|
||||
<transition name="list" appear>
|
||||
<a-layout-content class="under" :style="{ minHeight: '0' }">
|
||||
<div class="waves-header">
|
||||
<div class="waves-inner-header"></div>
|
||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<a-row type="flex" justify="center" align="middle"
|
||||
:style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
|
||||
<a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
|
||||
<template v-if="!loadingStates.fetched">
|
||||
<div :style="{ textAlign: 'center' }">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="setting-section">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}'
|
||||
placement="bottomRight" trigger="click">
|
||||
<template slot="content">
|
||||
<a-space direction="vertical" :size="10">
|
||||
<a-theme-switch-login></a-theme-switch-login>
|
||||
<span>{{ i18n "pages.settings.language" }}</span>
|
||||
<a-select ref="selectLang" :style="{ width: '100%' }" v-model="lang"
|
||||
@change="LanguageManager.setLanguage(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
|
||||
<span role="img" aria-label="l.name" v-text="l.icon"></span>
|
||||
<span v-text="l.name"></span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</template>
|
||||
<a-button shape="circle" icon="setting"></a-button>
|
||||
</a-popover>
|
||||
</div>
|
||||
<a-row type="flex" justify="center">
|
||||
<a-col :style="{ width: '100%' }">
|
||||
<h2 class="title headline zoom">
|
||||
<span class="words-wrapper">
|
||||
<!-- 第一帧：上下两行组成整体 -->
|
||||
<b class="is-visible">
|
||||
<div>〔X-Panel〕</div>
|
||||
<div>{{ i18n "pages.login.XPanelSystem" }}</div>
|
||||
</b>
|
||||
<!-- 第二帧：单独一行 -->
|
||||
<b>
|
||||
<div>{{ i18n "pages.login.title" }}</div>
|
||||
</b>
|
||||
</span>
|
||||
</h2>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row type="flex" justify="center">
|
||||
<a-col span="24">
|
||||
<a-form @submit.prevent="login">
|
||||
<a-space direction="vertical" size="middle">
|
||||
<a-form-item>
|
||||
<a-input autocomplete="username" name="username" v-model.trim="user.username"
|
||||
placeholder='{{ i18n "username" }}' autofocus required>
|
||||
<a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-input-password autocomplete="password" name="password" v-model.trim="user.password"
|
||||
placeholder='{{ i18n "password" }}' required>
|
||||
<a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="twoFactorEnable">
|
||||
<a-input autocomplete="one-time-code" name="twoFactorCode" v-model.trim="user.twoFactorCode"
|
||||
placeholder='{{ i18n "twoFactorCode" }}' required>
|
||||
<a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-row justify="center" class="centered">
|
||||
<div
|
||||
:style="{ height: '50px', marginTop: '1rem', ...loadingStates.spinning ? { width: '52px' } : { display: 'inline-block' } }"
|
||||
class="wave-btn-bg wave-btn-bg-cl">
|
||||
<a-button class="ant-btn-primary-login" type="primary" :loading="loadingStates.spinning"
|
||||
:icon="loadingStates.spinning ? 'poweroff' : undefined" html-type="submit">
|
||||
[[ loadingStates.spinning ? '' : '{{ i18n "login" }}' ]]
|
||||
</a-button>
|
||||
</div>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-layout-content>
|
||||
</transition>
|
||||
</a-layout>
|
||||
{{template "page/body_scripts" .}}
|
||||
{{template "component/aThemeSwitch" .}}
|
||||
<script>
|
||||
const app = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#app',
|
||||
data: {
|
||||
themeSwitcher,
|
||||
loadingStates: {
|
||||
fetched: false,
|
||||
spinning: false
|
||||
},
|
||||
user: {
|
||||
username: "",
|
||||
password: "",
|
||||
twoFactorCode: ""
|
||||
},
|
||||
twoFactorEnable: false,
|
||||
lang: ""
|
||||
},
|
||||
async mounted() {
|
||||
this.lang = LanguageManager.getLanguage();
|
||||
this.twoFactorEnable = await this.getTwoFactorEnable();
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
this.loadingStates.spinning = true;
|
||||
|
||||
const msg = await HttpUtil.post('/login', this.user);
|
||||
|
||||
if (msg.success) {
|
||||
location.href = basePath + 'panel/';
|
||||
}
|
||||
|
||||
this.loadingStates.spinning = false;
|
||||
},
|
||||
async getTwoFactorEnable() {
|
||||
const msg = await HttpUtil.post('/getTwoFactorEnable');
|
||||
|
||||
if (msg.success) {
|
||||
this.twoFactorEnable = msg.obj;
|
||||
this.loadingStates.fetched = true;
|
||||
|
||||
return msg.obj;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var animationDelay = 2000;
|
||||
initHeadline();
|
||||
|
||||
function initHeadline() {
|
||||
animateHeadline(document.querySelectorAll('.headline'));
|
||||
}
|
||||
|
||||
function animateHeadline(headlines) {
|
||||
var duration = animationDelay;
|
||||
headlines.forEach(function (headline) {
|
||||
setTimeout(function () {
|
||||
hideWord(headline.querySelector('.is-visible'));
|
||||
}, duration);
|
||||
});
|
||||
}
|
||||
|
||||
function hideWord(word) {
|
||||
var nextWord = takeNext(word);
|
||||
switchWord(word, nextWord);
|
||||
setTimeout(function () {
|
||||
hideWord(nextWord);
|
||||
}, animationDelay);
|
||||
}
|
||||
|
||||
function takeNext(word) {
|
||||
return word.nextElementSibling ? word.nextElementSibling : word.parentElement.firstElementChild;
|
||||
}
|
||||
|
||||
function switchWord(oldWord, newWord) {
|
||||
oldWord.classList.remove('is-visible');
|
||||
oldWord.classList.add('is-hidden');
|
||||
newWord.classList.remove('is-hidden');
|
||||
newWord.classList.add('is-visible');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{ template "page/body_end" .}}
|
||||
286
web/html/modals/client_bulk_modal.html
Normal file
286
web/html/modals/client_bulk_modal.html
Normal file
@@ -0,0 +1,286 @@
|
||||
{{define "modals/clientsBulkModal"}}
|
||||
<a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title"
|
||||
@ok="clientsBulkModal.ok" :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false"
|
||||
:ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "pages.client.method" }}'>
|
||||
<a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="0">Random</a-select-option>
|
||||
<a-select-option :value="1">Random+Prefix</a-select-option>
|
||||
<a-select-option :value="2">Random+Prefix+Num</a-select-option>
|
||||
<a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
|
||||
<a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.client.first" }}' v-if="clientsBulkModal.emailMethod>1">
|
||||
<a-input-number v-model.number="clientsBulkModal.firstNum" :min="1"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.client.last" }}' v-if="clientsBulkModal.emailMethod>1">
|
||||
<a-input-number v-model.number="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.client.prefix" }}' v-if="clientsBulkModal.emailMethod>0">
|
||||
<a-input v-model.trim="clientsBulkModal.emailPrefix"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.client.postfix" }}' v-if="clientsBulkModal.emailMethod>2">
|
||||
<a-input v-model.trim="clientsBulkModal.emailPostfix"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.client.clientCount" }}' v-if="clientsBulkModal.emailMethod < 2">
|
||||
<a-input-number v-model.number="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "security" }}' v-if="inbound.protocol === Protocols.VMESS">
|
||||
<a-select v-model="clientsBulkModal.security" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in USERS_SECURITY" :value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='Flow' v-if="clientsBulkModal.inbound.canEnableTlsFlow()">
|
||||
<a-select v-model="clientsBulkModal.flow" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
|
||||
<a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="app.subSettings?.enable">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
|
||||
</template>
|
||||
Subscription
|
||||
<a-icon @click="clientsBulkModal.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="clientsBulkModal.subId"></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 中文注释: 增加【独立限速】 speedLimit 输入框 -->
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.speedLimitDesc" }}</span>
|
||||
</template>
|
||||
<span>
|
||||
{{ i18n "pages.inbounds.speedLimit" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number
|
||||
v-model.number="clientsBulkModal.speedLimit"
|
||||
:min="0"
|
||||
style="width: 100%">
|
||||
<template slot="addonAfter">
|
||||
KB/s
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="app.tgBotEnable">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
|
||||
</template>
|
||||
Telegram ChatID
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number :style="{ width: '50%' }" v-model.number="clientsBulkModal.tgId" min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="app.ipLimitEnable">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
|
||||
</template>
|
||||
<span>{{ i18n "pages.inbounds.IPLimit" }} </span>
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number v-model.number="clientsBulkModal.limitIp" min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.inbounds.totalFlow" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number v-model.number="clientsBulkModal.totalGB" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
|
||||
<a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientsBulkModal.delayedStart">
|
||||
<a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item v-else>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.inbounds.expireDate" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
|
||||
format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
|
||||
v-model="clientsBulkModal.expiryTime"></a-date-picker>
|
||||
<a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
|
||||
value="clientsBulkModal.expiryTime" v-model="clientsBulkModal.expiryTime">
|
||||
</a-persian-datepicker>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="clientsBulkModal.expiryTime != 0">
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.client.renewDesc" }}</span>
|
||||
</template>
|
||||
{{ i18n "pages.client.renew" }}
|
||||
<a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input-number v-model.number="clientsBulkModal.reset" :min="0"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<script>
|
||||
|
||||
const clientsBulkModal = {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
title: '',
|
||||
okText: '',
|
||||
confirm: null,
|
||||
dbInbound: new DBInbound(),
|
||||
inbound: new Inbound(),
|
||||
quantity: 1,
|
||||
totalGB: 0,
|
||||
limitIp: 0,
|
||||
|
||||
<!-- 中文注释: 在这里为批量添加对象增加 speedLimit 属性 -->
|
||||
speedLimit: 0,
|
||||
|
||||
expiryTime: '',
|
||||
emailMethod: 0,
|
||||
firstNum: 1,
|
||||
lastNum: 1,
|
||||
emailPrefix: "",
|
||||
emailPostfix: "",
|
||||
subId: "",
|
||||
tgId: '',
|
||||
security: "auto",
|
||||
flow: "",
|
||||
delayedStart: false,
|
||||
reset: 0,
|
||||
ok() {
|
||||
clients = [];
|
||||
method = clientsBulkModal.emailMethod;
|
||||
if (method > 1) {
|
||||
start = clientsBulkModal.firstNum;
|
||||
end = clientsBulkModal.lastNum + 1;
|
||||
} else {
|
||||
start = 0;
|
||||
end = clientsBulkModal.quantity;
|
||||
}
|
||||
prefix = (method > 0 && clientsBulkModal.emailPrefix.length > 0) ? clientsBulkModal.emailPrefix : "";
|
||||
useNum = (method > 1);
|
||||
postfix = (method > 2 && clientsBulkModal.emailPostfix.length > 0) ? clientsBulkModal.emailPostfix : "";
|
||||
for (let i = start; i < end; i++) {
|
||||
newClient = clientsBulkModal.newClient(clientsBulkModal.dbInbound.protocol);
|
||||
if (method == 4) newClient.email = "";
|
||||
newClient.email += useNum ? prefix + i.toString() + postfix : prefix + postfix;
|
||||
if (clientsBulkModal.subId.length > 0) newClient.subId = clientsBulkModal.subId;
|
||||
newClient.tgId = clientsBulkModal.tgId;
|
||||
|
||||
<!-- 中文注释: 在这里为每个新生成的 client 对象赋值 speedLimit -->
|
||||
newClient.speedLimit = clientsBulkModal.speedLimit;
|
||||
|
||||
newClient.security = clientsBulkModal.security;
|
||||
newClient.limitIp = clientsBulkModal.limitIp;
|
||||
newClient._totalGB = clientsBulkModal.totalGB;
|
||||
newClient._expiryTime = clientsBulkModal.expiryTime;
|
||||
if (clientsBulkModal.inbound.canEnableTlsFlow()) {
|
||||
newClient.flow = clientsBulkModal.flow;
|
||||
}
|
||||
newClient.reset = clientsBulkModal.reset;
|
||||
clients.push(newClient);
|
||||
}
|
||||
ObjectUtil.execute(clientsBulkModal.confirm, clients, clientsBulkModal.dbInbound.id);
|
||||
},
|
||||
show({
|
||||
title = '',
|
||||
okText = '{{ i18n "sure" }}',
|
||||
dbInbound = null,
|
||||
confirm = (inbound, dbInbound) => { }
|
||||
}) {
|
||||
this.visible = true;
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
this.confirm = confirm;
|
||||
this.quantity = 1;
|
||||
|
||||
<!-- 中文注释: 在这里重置 speedLimit 的值 -->
|
||||
this.speedLimit = 0;
|
||||
|
||||
this.totalGB = 0;
|
||||
this.expiryTime = 0;
|
||||
this.emailMethod = 0;
|
||||
this.limitIp = 0;
|
||||
this.firstNum = 1;
|
||||
this.lastNum = 1;
|
||||
this.emailPrefix = "";
|
||||
this.emailPostfix = "";
|
||||
this.subId = "";
|
||||
this.tgId = '';
|
||||
this.security = "auto";
|
||||
this.flow = "";
|
||||
this.dbInbound = new DBInbound(dbInbound);
|
||||
this.inbound = dbInbound.toInbound();
|
||||
this.delayedStart = false;
|
||||
this.reset = 0;
|
||||
},
|
||||
newClient(protocol) {
|
||||
switch (protocol) {
|
||||
case Protocols.VMESS: return new Inbound.VmessSettings.VMESS();
|
||||
case Protocols.VLESS: return new Inbound.VLESSSettings.VLESS();
|
||||
case Protocols.TROJAN: return new Inbound.TrojanSettings.Trojan();
|
||||
case Protocols.SHADOWSOCKS: return new Inbound.ShadowsocksSettings.Shadowsocks(clientsBulkModal.inbound.settings.shadowsockses[0].method);
|
||||
default: return null;
|
||||
}
|
||||
},
|
||||
close() {
|
||||
clientsBulkModal.visible = false;
|
||||
clientsBulkModal.loading(false);
|
||||
},
|
||||
loading(loading = true) {
|
||||
clientsBulkModal.confirmLoading = loading;
|
||||
},
|
||||
};
|
||||
|
||||
const clientsBulkModalApp = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#client-bulk-modal',
|
||||
data: {
|
||||
clientsBulkModal,
|
||||
get inbound() {
|
||||
return this.clientsBulkModal.inbound;
|
||||
},
|
||||
get delayedExpireDays() {
|
||||
return this.clientsBulkModal.expiryTime < 0 ? this.clientsBulkModal.expiryTime / -86400000 : 0;
|
||||
},
|
||||
get datepicker() {
|
||||
return app.datepicker;
|
||||
},
|
||||
set delayedExpireDays(days) {
|
||||
this.clientsBulkModal.expiryTime = -86400000 * days;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
172
web/html/modals/client_modal.html
Normal file
172
web/html/modals/client_modal.html
Normal file
@@ -0,0 +1,172 @@
|
||||
{{define "modals/clientsModal"}}
|
||||
<a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok"
|
||||
:confirm-loading="clientModal.confirmLoading" :closable="true" :mask-closable="false"
|
||||
:class="themeSwitcher.currentTheme"
|
||||
:ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
|
||||
<template v-if="isEdit">
|
||||
<a-tag v-if="isExpiry || isTrafficExhausted" color="red" :style="{ marginBottom: '10px', display: 'block', textAlign: 'center' }">Account is (Expired|Traffic Ended) And Disabled</a-tag>
|
||||
</template>
|
||||
{{template "form/client"}}
|
||||
</a-modal>
|
||||
<script>
|
||||
|
||||
const clientModal = {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
title: '',
|
||||
okText: '',
|
||||
isEdit: false,
|
||||
dbInbound: new DBInbound(),
|
||||
inbound: new Inbound(),
|
||||
clients: [],
|
||||
clientStats: [],
|
||||
oldClientId: "",
|
||||
index: null,
|
||||
clientIps: null,
|
||||
delayedStart: false,
|
||||
ok() {
|
||||
if (clientModal.isEdit) {
|
||||
ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id, clientModal.oldClientId);
|
||||
} else {
|
||||
ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id);
|
||||
}
|
||||
},
|
||||
show({ title = '', okText = '{{ i18n "sure" }}', index = null, dbInbound = null, confirm = () => { }, isEdit = false }) {
|
||||
this.visible = true;
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
this.isEdit = isEdit;
|
||||
this.dbInbound = new DBInbound(dbInbound);
|
||||
this.inbound = dbInbound.toInbound();
|
||||
this.clients = this.inbound.clients;
|
||||
this.index = index === null ? this.clients.length : index;
|
||||
this.delayedStart = false;
|
||||
if (isEdit) {
|
||||
if (this.clients[index].expiryTime < 0) {
|
||||
this.delayedStart = true;
|
||||
}
|
||||
this.oldClientId = this.getClientId(dbInbound.protocol, clients[index]);
|
||||
} else {
|
||||
this.addClient(this.inbound, this.clients);
|
||||
}
|
||||
this.clientStats = this.dbInbound.clientStats.find(row => row.email === this.clients[this.index].email);
|
||||
this.confirm = confirm;
|
||||
},
|
||||
getClientId(protocol, client) {
|
||||
switch (protocol) {
|
||||
case Protocols.TROJAN: return client.password;
|
||||
case Protocols.SHADOWSOCKS: return client.email;
|
||||
default: return client.id;
|
||||
}
|
||||
},
|
||||
addClient(inbound, clients) {
|
||||
switch (inbound.protocol) {
|
||||
case Protocols.VMESS: return clients.push(new Inbound.VmessSettings.VMESS());
|
||||
case Protocols.VLESS: return clients.push(new Inbound.VLESSSettings.VLESS());
|
||||
case Protocols.TROJAN: return clients.push(new Inbound.TrojanSettings.Trojan());
|
||||
case Protocols.SHADOWSOCKS: return clients.push(new Inbound.ShadowsocksSettings.Shadowsocks(clients[0].method, RandomUtil.randomShadowsocksPassword(inbound.settings.method)));
|
||||
default: return null;
|
||||
}
|
||||
},
|
||||
close() {
|
||||
clientModal.visible = false;
|
||||
clientModal.loading(false);
|
||||
},
|
||||
loading(loading=true) {
|
||||
clientModal.confirmLoading = loading;
|
||||
},
|
||||
};
|
||||
|
||||
const clientModalApp = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#client-modal',
|
||||
data: {
|
||||
clientModal,
|
||||
get inbound() {
|
||||
return this.clientModal.inbound;
|
||||
},
|
||||
get client() {
|
||||
return this.clientModal.clients[this.clientModal.index];
|
||||
},
|
||||
get clientStats() {
|
||||
return this.clientModal.clientStats;
|
||||
},
|
||||
get isEdit() {
|
||||
return this.clientModal.isEdit;
|
||||
},
|
||||
get datepicker() {
|
||||
return app.datepicker;
|
||||
},
|
||||
get isTrafficExhausted() {
|
||||
if (!clientStats) return false
|
||||
if (clientStats.total <= 0) return false
|
||||
if (clientStats.up + clientStats.down < clientStats.total) return false
|
||||
return true
|
||||
},
|
||||
get isExpiry() {
|
||||
return this.clientModal.isEdit && this.client.expiryTime >0 ? (this.client.expiryTime < new Date().getTime()) : false;
|
||||
},
|
||||
get delayedStart() {
|
||||
return this.clientModal.delayedStart;
|
||||
},
|
||||
set delayedStart(value) {
|
||||
this.clientModal.delayedStart = value;
|
||||
},
|
||||
get delayedExpireDays() {
|
||||
return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
|
||||
},
|
||||
set delayedExpireDays(days) {
|
||||
this.client.expiryTime = -86400000 * days;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getDBClientIps(email) {
|
||||
const msg = await HttpUtil.post(`/panel/api/inbounds/clientIps/${email}`);
|
||||
if (!msg.success) {
|
||||
document.getElementById("clientIPs").value = msg.obj;
|
||||
return;
|
||||
}
|
||||
let ips = msg.obj;
|
||||
if (typeof ips === 'string' && ips.startsWith('[') && ips.endsWith(']')) {
|
||||
try {
|
||||
ips = JSON.parse(ips);
|
||||
ips = Array.isArray(ips) ? ips.join("\n") : ips;
|
||||
} catch (e) {
|
||||
console.error('Error parsing JSON:', e);
|
||||
}
|
||||
}
|
||||
document.getElementById("clientIPs").value = ips;
|
||||
},
|
||||
async clearDBClientIps(email) {
|
||||
try {
|
||||
const msg = await HttpUtil.post(`/panel/api/inbounds/clearClientIps/${email}`);
|
||||
if (!msg.success) {
|
||||
return;
|
||||
}
|
||||
document.getElementById("clientIPs").value = "";
|
||||
} catch (error) {
|
||||
}
|
||||
},
|
||||
resetClientTraffic(email, dbInboundId, iconElement) {
|
||||
this.$confirm({
|
||||
title: '{{ i18n "pages.inbounds.resetTraffic"}}',
|
||||
content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
|
||||
class: themeSwitcher.currentTheme,
|
||||
okText: '{{ i18n "reset"}}',
|
||||
cancelText: '{{ i18n "cancel"}}',
|
||||
onOk: async () => {
|
||||
iconElement.disabled = true;
|
||||
const msg = await HttpUtil.postWithModal('/panel/api/inbounds/' + dbInboundId + '/resetClientTraffic/' + email);
|
||||
if (msg.success) {
|
||||
this.clientModal.clientStats.up = 0;
|
||||
this.clientModal.clientStats.down = 0;
|
||||
}
|
||||
iconElement.disabled = false;
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
110
web/html/modals/dns_presets_modal.html
Normal file
110
web/html/modals/dns_presets_modal.html
Normal file
@@ -0,0 +1,110 @@
|
||||
{{define "modals/dnsPresetsModal"}}
|
||||
<a-modal id="dnsPresets-modal" v-model="dnsPresetsModal.visible" :title="dnsPresetsModal.title" :closable="true"
|
||||
:mask-closable="false" :footer="null" :class="themeSwitcher.currentTheme">
|
||||
<a-list class="ant-dns-presets-list" bordered :style="{ width: '100%' }">
|
||||
<a-list-item v-for="dns in dnsPresetsDatabase" :style="{ padding: '12px 16px' }">
|
||||
<a-row justify="space-between" align="middle">
|
||||
<a-col :span="12">
|
||||
<a-space direction="vertical" size="small">
|
||||
<span class="ant-dns-presets-list-name">[[ dns.name ]]</span>
|
||||
<a-tag :color="dns.family ? 'purple' : 'green'">[[ dns.family ? '{{ i18n "pages.xray.dns.dnsPresetFamily" }}' : 'DNS' ]]</a-tag>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="12" :style="{ textAlign: 'right' }">
|
||||
<a-button type="primary" @click="dnsPresetsModal.install(dns.data)">{{ i18n "install" }}</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-modal>
|
||||
|
||||
<style>
|
||||
.dark .ant-dns-presets-list {
|
||||
border-color: var(--dark-color-stroke)
|
||||
}
|
||||
|
||||
.dark .ant-dns-presets-list-name {
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const dnsPresetsDatabase = [
|
||||
{
|
||||
name: 'Google DNS',
|
||||
family: false,
|
||||
data: [
|
||||
"8.8.8.8",
|
||||
"8.8.4.4",
|
||||
"2001:4860:4860::8888",
|
||||
"2001:4860:4860::8844"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Cloudflare DNS',
|
||||
family: false,
|
||||
data: [
|
||||
"1.1.1.1",
|
||||
"1.0.0.1",
|
||||
"2606:4700:4700::1111",
|
||||
"2606:4700:4700::1001"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Adguard DNS',
|
||||
family: false,
|
||||
data: [
|
||||
"94.140.14.14",
|
||||
"94.140.15.15",
|
||||
"2a10:50c0::ad1:ff",
|
||||
"2a10:50c0::ad2:ff"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Adguard Family DNS',
|
||||
family: true,
|
||||
data: [
|
||||
"94.140.14.14",
|
||||
"94.140.15.15",
|
||||
"2a10:50c0::ad1:ff",
|
||||
"2a10:50c0::ad2:ff"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Cloudflare Family DNS',
|
||||
family: true,
|
||||
data: [
|
||||
"1.1.1.3",
|
||||
"1.0.0.3",
|
||||
"2606:4700:4700::1113",
|
||||
"2606:4700:4700::1003"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const dnsPresetsModal = {
|
||||
title: '',
|
||||
visible: false,
|
||||
selected: null,
|
||||
install(selectedPreset) {
|
||||
return ObjectUtil.execute(dnsPresetsModal.selected, selectedPreset);
|
||||
},
|
||||
show({ title = '', selected = (selectedPreset) => { }, isEdit = false }) {
|
||||
this.title = title;
|
||||
this.selected = selected;
|
||||
this.visible = true;
|
||||
},
|
||||
close() {
|
||||
dnsPresetsModal.visible = false;
|
||||
},
|
||||
};
|
||||
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#dnsPresets-modal',
|
||||
data: {
|
||||
dnsPresetsModal: dnsPresetsModal,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
628
web/html/modals/inbound_info_modal.html
Normal file
628
web/html/modals/inbound_info_modal.html
Normal file
@@ -0,0 +1,628 @@
|
||||
{{define "modals/inboundInfoModal"}}
|
||||
<a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' :closable="true" :mask-closable="true" :footer="null" width="600px" :class="themeSwitcher.currentTheme">
|
||||
<a-row>
|
||||
<a-col :xs="24" :md="12">
|
||||
<table>
|
||||
<tr>
|
||||
<td>{{ i18n "protocol" }}</td>
|
||||
<td>
|
||||
<a-tag color="purple">[[ dbInbound.protocol ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.inbounds.address" }}</td>
|
||||
<td>
|
||||
<a-tooltip :title="[[ dbInbound.address ]]">
|
||||
<a-tag class="info-large-tag">[[ dbInbound.address ]]</a-tag>
|
||||
</a-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.inbounds.port" }}</td>
|
||||
<td>
|
||||
<a-tag>[[ dbInbound.port ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
|
||||
<table>
|
||||
<tr>
|
||||
<td>{{ i18n "transmission" }}</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.network ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-if="inbound.isTcp || inbound.isWs || inbound.isHttpupgrade || inbound.isXHTTP">
|
||||
<tr>
|
||||
<td>{{ i18n "host" }}</td>
|
||||
<td v-if="inbound.host">
|
||||
<a-tooltip :title="[[ inbound.host ]]">
|
||||
<a-tag class="info-large-tag">[[ inbound.host ]]</a-tag>
|
||||
</a-tooltip>
|
||||
</td>
|
||||
<td v-else>
|
||||
<a-tag color="orange">{{ i18n "none" }}</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "path" }}</td>
|
||||
<td v-if="inbound.path">
|
||||
<a-tooltip :title="[[ inbound.path ]]">
|
||||
<a-tag class="info-large-tag">[[ inbound.path ]]</a-tag>
|
||||
</a-tooltip>
|
||||
<td v-else>
|
||||
<a-tag color="orange">{{ i18n "none" }}</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="inbound.isXHTTP">
|
||||
<tr>
|
||||
<td>Mode</td>
|
||||
<td>
|
||||
<a-tag>[[ inbound.stream.xhttp.mode ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="inbound.isKcp">
|
||||
<tr>
|
||||
<td>kcp {{ i18n "encryption" }}</td>
|
||||
<td>
|
||||
<a-tag>[[ inbound.kcpType ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>kcp {{ i18n "password" }}</td>
|
||||
<td>
|
||||
<a-tag>[[ inbound.kcpSeed ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="inbound.isGrpc">
|
||||
<tr>
|
||||
<td>grpc serviceName</td>
|
||||
<td>
|
||||
<a-tooltip :title="[[ inbound.serviceName ]]">
|
||||
<a-tag class="info-large-tag">[[ inbound.serviceName ]]</a-tag>
|
||||
</a-tooltip>
|
||||
<tr>
|
||||
<td>grpc multiMode</td>
|
||||
<td>
|
||||
<a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</template>
|
||||
</a-col>
|
||||
<template v-if="dbInbound.hasLink()">
|
||||
{{ i18n "security" }}
|
||||
<a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
|
||||
<br />
|
||||
<td>Authentication</td>
|
||||
<a-tag :color="inbound.settings.selectedAuth ? 'green' : 'red'">[[ inbound.settings.selectedAuth ? inbound.settings.selectedAuth : '' ]]</a-tag>
|
||||
<br />
|
||||
{{ i18n "encryption" }}
|
||||
<a-tag :color="inbound.settings.encryption ? 'green' : 'red'">[[ inbound.settings.encryption ? inbound.settings.encryption : '' ]]</a-tag>
|
||||
<br />
|
||||
<template v-if="inbound.stream.security != 'none'">
|
||||
{{ i18n "domainName" }}
|
||||
<a-tag v-if="inbound.serverName" :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
|
||||
<a-tag v-else color="orange">{{ i18n "none" }}</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
<table v-if="dbInbound.isSS" :style="{ marginBottom: '10px', width: '100%' }">
|
||||
<tr>
|
||||
<td>{{ i18n "encryption" }}</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.method ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="inbound.isSS2022">
|
||||
<td>{{ i18n "password" }}</td>
|
||||
<td>
|
||||
<a-tooltip :title="[[ inbound.settings.password ]]">
|
||||
<a-tag class="info-large-tag">[[ inbound.settings.password ]]</a-tag>
|
||||
</a-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.inbounds.network" }}</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.network ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<template v-if="infoModal.clientSettings">
|
||||
<a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
|
||||
<table :style="{ marginBottom: '10px' }">
|
||||
<tr>
|
||||
<td>{{ i18n "pages.inbounds.email" }}</td>
|
||||
<td v-if="infoModal.clientSettings.email">
|
||||
<a-tag color="green">[[ infoModal.clientSettings.email ]]</a-tag>
|
||||
</td>
|
||||
<td v-else>
|
||||
<a-tag color="red">{{ i18n "none" }}</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="infoModal.clientSettings.id">
|
||||
<td>ID</td>
|
||||
<td>
|
||||
<a-tag>[[ infoModal.clientSettings.id ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="dbInbound.isVMess">
|
||||
<td>{{ i18n "security" }}</td>
|
||||
<td>
|
||||
<a-tag>[[ infoModal.clientSettings.security ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="infoModal.inbound.canEnableTlsFlow()">
|
||||
<td>Flow</td>
|
||||
<td v-if="infoModal.clientSettings.flow">
|
||||
<a-tag>[[ infoModal.clientSettings.flow ]]</a-tag>
|
||||
</td>
|
||||
<td v-else>
|
||||
<a-tag color="orange">{{ i18n "none" }}</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="infoModal.clientSettings.password">
|
||||
<td>{{ i18n "password" }}</td>
|
||||
<td>
|
||||
<a-tooltip :title="[[ infoModal.clientSettings.password ]]">
|
||||
<a-tag class="info-large-tag">[[ infoModal.clientSettings.password ]]</a-tag>
|
||||
</a-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "status" }}</td>
|
||||
<td>
|
||||
<a-tag v-if="isEnable" color="green">{{ i18n "enabled" }}</a-tag>
|
||||
<a-tag v-else>{{ i18n "disabled" }}</a-tag>
|
||||
<a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="infoModal.clientStats">
|
||||
<td>{{ i18n "usage" }}</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ SizeFormatter.sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
|
||||
<a-tag>↑ [[ SizeFormatter.sizeFormat(infoModal.clientStats.up) ]] / [[ SizeFormatter.sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.inbounds.createdAt" }}</td>
|
||||
<td>
|
||||
<template v-if="infoModal.clientSettings && infoModal.clientSettings.created_at">
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
<a-tag>[[ DateUtil.formatMillis(infoModal.clientSettings.created_at) ]]</a-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag>[[ DateUtil.convertToJalalian(moment(infoModal.clientSettings.created_at)) ]]</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag>-</a-tag>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.inbounds.updatedAt" }}</td>
|
||||
<td>
|
||||
<template v-if="infoModal.clientSettings && infoModal.clientSettings.updated_at">
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
<a-tag>[[ DateUtil.formatMillis(infoModal.clientSettings.updated_at) ]]</a-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag>[[ DateUtil.convertToJalalian(moment(infoModal.clientSettings.updated_at)) ]]</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag>-</a-tag>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "lastOnline" }}</td>
|
||||
<td>
|
||||
<a-tag>[[ app.formatLastOnline(infoModal.clientSettings && infoModal.clientSettings.email ? infoModal.clientSettings.email : '') ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="infoModal.clientSettings.comment">
|
||||
<td>{{ i18n "comment" }}</td>
|
||||
<td>
|
||||
<a-tooltip :title="[[ infoModal.clientSettings.comment ]]">
|
||||
<a-tag class="info-large-tag">[[ infoModal.clientSettings.comment ]]</a-tag>
|
||||
</a-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="app.ipLimitEnable">
|
||||
<td>{{ i18n "pages.inbounds.IPLimit" }}</td>
|
||||
<td>
|
||||
<a-tag>[[ infoModal.clientSettings.limitIp ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="app.ipLimitEnable && infoModal.clientSettings.limitIp > 0">
|
||||
<td>{{ i18n "pages.inbounds.IPLimitlog" }}</td>
|
||||
<td>
|
||||
<a-tag>[[ infoModal.clientIps ]]</a-tag>
|
||||
<a-icon type="sync" :spin="refreshing" @click="refreshIPs" :style="{ margin: '0 5px' }"></a-icon>
|
||||
<a-tooltip :title="[[ dbInbound.address ]]">
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
|
||||
</template>
|
||||
<a-icon type="delete" @click="clearClientIps"></a-icon>
|
||||
</a-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :style="{ display: 'inline-table', marginBlock: '10px', width: '100%', textAlign: 'center' }">
|
||||
<tr>
|
||||
<th>{{ i18n "remained" }}</th>
|
||||
<th>{{ i18n "pages.inbounds.totalFlow" }}</th>
|
||||
<th>{{ i18n "pages.inbounds.expireDate" }}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ getRemStats() ]] </a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ SizeFormatter.sizeFormat(infoModal.clientSettings.totalGB) ]] </a-tag>
|
||||
<a-tag v-else color="purple" class="infinite-tag">
|
||||
<svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
|
||||
<path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="infoModal.clientSettings.expiryTime > 0">
|
||||
<a-tag :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
|
||||
<template v-if="app.datepicker === 'gregorian'">
|
||||
[[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
|
||||
</template>
|
||||
<template v-else>
|
||||
[[ DateUtil.convertToJalalian(moment(infoModal.clientSettings.expiryTime)) ]]
|
||||
</template>
|
||||
</a-tag>
|
||||
</template>
|
||||
<a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}
|
||||
</a-tag>
|
||||
<a-tag v-else color="purple" class="infinite-tag">
|
||||
<svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
|
||||
<path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
|
||||
<a-divider>Subscription URL</a-divider>
|
||||
<tr-info-row class="tr-info-row">
|
||||
<tr-info-title class="tr-info-title">
|
||||
<a-tag color="purple">Subscription Link</a-tag>
|
||||
<a-tooltip title='{{ i18n "copy" }}'>
|
||||
<a-button size="small" icon="snippets" @click="copy(infoModal.subLink)"></a-button>
|
||||
</a-tooltip>
|
||||
</tr-info-title>
|
||||
<a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a>
|
||||
</tr-info-row>
|
||||
<tr-info-row class="tr-info-row">
|
||||
<tr-info-title class="tr-info-title">
|
||||
<a-tag color="purple">Json Link</a-tag>
|
||||
<a-tooltip title='{{ i18n "copy" }}'>
|
||||
<a-button size="small" icon="snippets" @click="copy(infoModal.subJsonLink)"></a-button>
|
||||
</a-tooltip>
|
||||
</tr-info-title>
|
||||
<a :href="[[ infoModal.subJsonLink ]]" target="_blank">[[ infoModal.subJsonLink ]]</a>
|
||||
</tr-info-row>
|
||||
</template>
|
||||
<template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
|
||||
<a-divider>Telegram ChatID</a-divider>
|
||||
<tr-info-row class="tr-info-row">
|
||||
<tr-info-title class="tr-info-title">
|
||||
<a-tag color="blue">[[ infoModal.clientSettings.tgId ]]</a-tag>
|
||||
<a-tooltip title='{{ i18n "copy" }}'>
|
||||
<a-button size="small" icon="snippets" @click="copy(infoModal.clientSettings.tgId)"></a-button>
|
||||
</a-tooltip>
|
||||
</tr-info-title>
|
||||
</tr-info-row>
|
||||
</template>
|
||||
<template v-if="dbInbound.hasLink()">
|
||||
<a-divider>URL</a-divider>
|
||||
<tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row">
|
||||
<tr-info-title class="tr-info-title">
|
||||
<a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag>
|
||||
<a-tooltip title='{{ i18n "copy" }}'>
|
||||
<a-button :style="{ minWidth: '24px' }" size="small" icon="snippets" @click="copy(link.link)"></a-button>
|
||||
</a-tooltip>
|
||||
</tr-info-title>
|
||||
<code>[[ link.link ]]</code>
|
||||
</tr-info-row>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
|
||||
<a-divider>URL</a-divider>
|
||||
<tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row">
|
||||
<tr-info-title class="tr-info-title">
|
||||
<a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag>
|
||||
<a-tooltip title='{{ i18n "copy" }}'>
|
||||
<a-button :style="{ minWidth: '24px' }" size="small" icon="snippets" @click="copy(link.link)"></a-button>
|
||||
</a-tooltip>
|
||||
</tr-info-title>
|
||||
<code>[[ link.link ]]</code>
|
||||
</tr-info-row>
|
||||
</template>
|
||||
<table v-if="inbound.protocol == Protocols.TUNNEL" class="tr-info-table">
|
||||
<tr>
|
||||
<th>{{ i18n "pages.inbounds.targetAddress" }}</th>
|
||||
<th>{{ i18n "pages.inbounds.destinationPort" }}</th>
|
||||
<th>{{ i18n "pages.inbounds.network" }}</th>
|
||||
<th>FollowRedirect</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.address ]]</a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.port ]]</a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.network ]]</a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.followRedirect ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table v-if="dbInbound.isSocks" class="tr-info-table">
|
||||
<tr>
|
||||
<th>{{ i18n "password" }} Auth</th>
|
||||
<th>{{ i18n "pages.inbounds.enable" }} udp</th>
|
||||
<th>IP</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.auth ]]</a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.udp]]</a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ inbound.settings.ip ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-if="inbound.settings.auth == 'password'">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{{ i18n "username" }}</td>
|
||||
<td>{{ i18n "password" }}</td>
|
||||
</tr>
|
||||
<tr v-for="account,index in inbound.settings.accounts">
|
||||
<td>[[ index ]]</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ account.user ]]</a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ account.pass ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
<table v-if="dbInbound.isHTTP" class="tr-info-table">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>{{ i18n "username" }}</th>
|
||||
<th>{{ i18n "password" }}</th>
|
||||
</tr>
|
||||
<tr v-for="account,index in inbound.settings.accounts">
|
||||
<td>[[ index ]]</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ account.user ]]</a-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a-tag color="green">[[ account.pass ]]</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table v-if="dbInbound.isWireguard" class="tr-info-table">
|
||||
<tr class="client-table-odd-row">
|
||||
<td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
|
||||
<td>[[ inbound.settings.secretKey ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
|
||||
<td>[[ inbound.settings.pubKey ]]</td>
|
||||
</tr>
|
||||
<tr class="client-table-odd-row">
|
||||
<td>MTU</td>
|
||||
<td>[[ inbound.settings.mtu ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>No Kernel Tun</td>
|
||||
<td>[[ inbound.settings.noKernelTun ]]</td>
|
||||
</tr>
|
||||
<template v-for="(peer, index) in inbound.settings.peers">
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<a-divider>Peer [[ index + 1 ]]</a-divider>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="client-table-odd-row">
|
||||
<td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
|
||||
<td>[[ peer.privateKey ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
|
||||
<td>[[ peer.publicKey ]]</td>
|
||||
</tr>
|
||||
<tr class="client-table-odd-row">
|
||||
<td>{{ i18n "pages.xray.wireguard.psk" }}</td>
|
||||
<td>[[ peer.psk ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.xray.wireguard.allowedIPs" }}</td>
|
||||
<td>[[ peer.allowedIPs.join(",") ]]</td>
|
||||
</tr>
|
||||
<tr class="client-table-odd-row">
|
||||
<td>Keep Alive</td>
|
||||
<td>[[ peer.keepAlive ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<tr-info-row class="tr-info-row">
|
||||
<tr-info-title class="tr-info-title">
|
||||
<a-tag color="blue">Config</a-tag>
|
||||
<a-tooltip title='{{ i18n "copy" }}'>
|
||||
<a-button :style="{ minWidth: '24px' }" size="small" icon="snippets" @click="copy(infoModal.links[index])"></a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title='{{ i18n "download" }}'>
|
||||
<a-button :style="{ minWidth: '24px' }" size="small" icon="download" @click="FileManager.downloadTextFile(infoModal.links[index], `peer-${index + 1}.conf`)"></a-button>
|
||||
</a-tooltip>
|
||||
</tr-info-title>
|
||||
<div v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)" :style="{ borderRadius: '1rem', padding: '0.5rem' }" class="client-table-odd-row">
|
||||
</div>
|
||||
</tr-info-row>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
</template>
|
||||
</a-modal>
|
||||
<script>
|
||||
function refreshIPs(email) {
|
||||
return HttpUtil.post(`/panel/api/inbounds/clientIps/${email}`).then((msg) => {
|
||||
if (msg.success) {
|
||||
try {
|
||||
return JSON.parse(msg.obj).join(', ');
|
||||
} catch (e) {
|
||||
return msg.obj;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const infoModal = {
|
||||
visible: false,
|
||||
inbound: new Inbound(),
|
||||
dbInbound: new DBInbound(),
|
||||
clientSettings: null,
|
||||
clientStats: [],
|
||||
upStats: 0,
|
||||
downStats: 0,
|
||||
links: [],
|
||||
index: null,
|
||||
isExpired: false,
|
||||
subLink: '',
|
||||
subJsonLink: '',
|
||||
clientIps: '',
|
||||
show(dbInbound, index) {
|
||||
this.index = index;
|
||||
this.inbound = dbInbound.toInbound();
|
||||
this.dbInbound = new DBInbound(dbInbound);
|
||||
this.clientSettings = this.inbound.clients ? this.inbound.clients[index] : null;
|
||||
this.isExpired = this.inbound.clients ? this.inbound.isExpiry(index) : this.dbInbound.isExpiry;
|
||||
this.clientStats = this.inbound.clients ? this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) : [];
|
||||
|
||||
if (
|
||||
[
|
||||
Protocols.VMESS,
|
||||
Protocols.VLESS,
|
||||
Protocols.TROJAN,
|
||||
Protocols.SHADOWSOCKS
|
||||
].includes(this.inbound.protocol)
|
||||
) {
|
||||
if (app.ipLimitEnable && this.clientSettings.limitIp) {
|
||||
refreshIPs(this.clientStats.email).then((ips) => {
|
||||
this.clientIps = ips;
|
||||
})
|
||||
}
|
||||
}
|
||||
if (this.inbound.protocol == Protocols.WIREGUARD) {
|
||||
this.links = this.inbound.genInboundLinks(dbInbound.remark).split('\r\n')
|
||||
} else {
|
||||
this.links = this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, this.clientSettings);
|
||||
}
|
||||
if (this.clientSettings) {
|
||||
if (this.clientSettings.subId) {
|
||||
this.subLink = this.genSubLink(this.clientSettings.subId);
|
||||
this.subJsonLink = this.genSubJsonLink(this.clientSettings.subId);
|
||||
}
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
close() {
|
||||
infoModal.visible = false;
|
||||
},
|
||||
genSubLink(subID) {
|
||||
return app.subSettings.subURI + subID;
|
||||
},
|
||||
genSubJsonLink(subID) {
|
||||
return app.subSettings.subJsonURI + subID;
|
||||
}
|
||||
};
|
||||
const infoModalApp = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#inbound-info-modal',
|
||||
data: {
|
||||
infoModal,
|
||||
refreshing: false,
|
||||
get dbInbound() {
|
||||
return this.infoModal.dbInbound;
|
||||
},
|
||||
get inbound() {
|
||||
return this.infoModal.inbound;
|
||||
},
|
||||
get isActive() {
|
||||
if (infoModal.clientStats) {
|
||||
return infoModal.clientStats.enable;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
get isEnable() {
|
||||
if (infoModal.clientSettings) {
|
||||
return infoModal.clientSettings.enable;
|
||||
}
|
||||
return infoModal.dbInbound.isEnable;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
copy(content) {
|
||||
ClipboardManager
|
||||
.copyText(content)
|
||||
.then(() => {
|
||||
app.$message.success('{{ i18n "copied" }}')
|
||||
})
|
||||
},
|
||||
statsColor(stats) {
|
||||
return ColorUtils.usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
|
||||
},
|
||||
getRemStats() {
|
||||
remained = this.infoModal.clientStats.total - this.infoModal.clientStats.up - this.infoModal.clientStats.down;
|
||||
return remained > 0 ? SizeFormatter.sizeFormat(remained) : '-';
|
||||
},
|
||||
refreshIPs() {
|
||||
this.refreshing = true;
|
||||
refreshIPs(this.infoModal.clientStats.email)
|
||||
.then((ips) => {
|
||||
this.infoModal.clientIps = ips;
|
||||
})
|
||||
.finally(() => {
|
||||
this.refreshing = false;
|
||||
});
|
||||
},
|
||||
clearClientIps() {
|
||||
HttpUtil.post(`/panel/api/inbounds/clearClientIps/${this.infoModal.clientStats.email}`)
|
||||
.then((msg) => {
|
||||
if (!msg.success) {
|
||||
return;
|
||||
}
|
||||
this.infoModal.clientIps = 'No IP Record';
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
314
web/html/modals/inbound_modal.html
Normal file
314
web/html/modals/inbound_modal.html
Normal file
@@ -0,0 +1,314 @@
|
||||
{{define "modals/inboundModal"}}
|
||||
<a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title" :dialog-style="{ top: '20px' }"
|
||||
@ok="inModal.ok" :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
|
||||
:class="themeSwitcher.currentTheme" :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
|
||||
{{template "form/inbound"}}
|
||||
</a-modal>
|
||||
<script>
|
||||
|
||||
// 将 inModal 设为全局可用，确保其在任何基础路径下都能工作
|
||||
const inModal = window.inModal = {
|
||||
title: '',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
okText: '{{ i18n "sure" }}',
|
||||
isEdit: false,
|
||||
confirm: null,
|
||||
inbound: new Inbound(),
|
||||
dbInbound: new DBInbound(),
|
||||
ok() {
|
||||
ObjectUtil.execute(inModal.confirm, inModal.inbound, inModal.dbInbound);
|
||||
},
|
||||
show({ title = '', okText = '{{ i18n "sure" }}', inbound = null, dbInbound = null, confirm = (inbound, dbInbound) => { }, isEdit = false }) {
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
if (inbound) {
|
||||
this.inbound = Inbound.fromJson(inbound.toJson());
|
||||
} else {
|
||||
this.inbound = new Inbound();
|
||||
}
|
||||
// 始终确保为 VLESS 协议初始化 testseed（即使尚未设置 vision 流）
|
||||
// 这确保了 Vue 的响应式系统能正常工作
|
||||
if (this.inbound.protocol === Protocols.VLESS && this.inbound.settings) {
|
||||
if (!this.inbound.settings.testseed || !Array.isArray(this.inbound.settings.testseed) || this.inbound.settings.testseed.length < 4) {
|
||||
// 创建新数组以确保 Vue 响应式
|
||||
this.inbound.settings.testseed = [900, 500, 900, 256].slice();
|
||||
}
|
||||
}
|
||||
if (dbInbound) {
|
||||
this.dbInbound = new DBInbound(dbInbound);
|
||||
} else {
|
||||
this.dbInbound = new DBInbound();
|
||||
}
|
||||
this.confirm = confirm;
|
||||
this.visible = true;
|
||||
this.isEdit = isEdit;
|
||||
},
|
||||
close() {
|
||||
inModal.visible = false;
|
||||
inModal.loading(false);
|
||||
},
|
||||
loading(loading = true) {
|
||||
inModal.confirmLoading = loading;
|
||||
},
|
||||
|
||||
// Vision Seed 方法 - 无论 Vue 上下文如何均可用
|
||||
updateTestseed(index, value) {
|
||||
if (!inModal.inbound || !inModal.inbound.settings) return;
|
||||
if (!inModal.inbound.settings.testseed || !Array.isArray(inModal.inbound.settings.testseed)) {
|
||||
inModal.inbound.settings.testseed = [900, 500, 900, 256];
|
||||
}
|
||||
while (inModal.inbound.settings.testseed.length <= index) {
|
||||
inModal.inbound.settings.testseed.push(0);
|
||||
}
|
||||
inModal.inbound.settings.testseed[index] = value;
|
||||
},
|
||||
|
||||
/**
|
||||
* 优化后的随机 Vision Seed 生成函数 (inModal 全局对象版)
|
||||
*/
|
||||
setRandomTestseed() {
|
||||
// 确保对象存在
|
||||
if (!inModal.inbound || !inModal.inbound.settings) return;
|
||||
|
||||
// 确保 testseed 已初始化为数组
|
||||
if (!inModal.inbound.settings.testseed || !Array.isArray(inModal.inbound.settings.testseed) || inModal.inbound.settings.testseed.length < 4) {
|
||||
inModal.inbound.settings.testseed = [900, 500, 900, 256].slice();
|
||||
}
|
||||
|
||||
// 1. 生成 [0] 大包阈值 (500-1000)
|
||||
let threshold = 500 + Math.floor(Math.random() * 501);
|
||||
// 2. 生成 [1] 大包浮动 (0-500)
|
||||
let largeVar = Math.floor(Math.random() * 501);
|
||||
// 3. 生成 [2] 大包目标最低长度 (必须 >= threshold)
|
||||
let targetLength = threshold + Math.floor(Math.random() * 201);
|
||||
// 4. 生成 [3] 小包浮动 (0-300)
|
||||
let smallVar = Math.floor(Math.random() * 301);
|
||||
|
||||
inModal.inbound.settings.testseed = [threshold, largeVar, targetLength, smallVar];
|
||||
},
|
||||
|
||||
resetTestseed() {
|
||||
if (!inModal.inbound || !inModal.inbound.settings) return;
|
||||
inModal.inbound.settings.testseed = [900, 500, 900, 256].slice();
|
||||
}
|
||||
};
|
||||
|
||||
// 全局存储 Vue 实例以确保方法始终可访问
|
||||
let inboundModalVueInstance = null;
|
||||
|
||||
inboundModalVueInstance = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#inbound-modal',
|
||||
data: {
|
||||
inModal: inModal,
|
||||
delayedStart: false,
|
||||
get inbound() {
|
||||
return inModal.inbound;
|
||||
},
|
||||
get dbInbound() {
|
||||
return inModal.dbInbound;
|
||||
},
|
||||
get isEdit() {
|
||||
return inModal.isEdit;
|
||||
},
|
||||
get client() {
|
||||
return inModal.inbound && inModal.inbound.clients && inModal.inbound.clients.length > 0 ? inModal.inbound.clients[0] : null;
|
||||
},
|
||||
get datepicker() {
|
||||
return app.datepicker;
|
||||
},
|
||||
get delayedExpireDays() {
|
||||
return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
|
||||
},
|
||||
set delayedExpireDays(days) {
|
||||
this.client.expiryTime = -86400000 * days;
|
||||
},
|
||||
get externalProxy() {
|
||||
return this.inbound.stream.externalProxy.length > 0;
|
||||
},
|
||||
set externalProxy(value) {
|
||||
if (value) {
|
||||
inModal.inbound.stream.externalProxy = [{
|
||||
forceTls: "same",
|
||||
dest: window.location.hostname,
|
||||
port: inModal.inbound.port,
|
||||
remark: ""
|
||||
}];
|
||||
} else {
|
||||
inModal.inbound.stream.externalProxy = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'inModal.inbound.stream.security'(newVal, oldVal) {
|
||||
// 当安全设置从 reality/tls 更改为 none 时清除 flow
|
||||
if (inModal.inbound.protocol == Protocols.VLESS && !inModal.inbound.canEnableTlsFlow()) {
|
||||
inModal.inbound.settings.vlesses.forEach(client => {
|
||||
client.flow = "";
|
||||
});
|
||||
}
|
||||
},
|
||||
// 确保启用 vision 流时始终初始化 testseed
|
||||
'inModal.inbound.settings.vlesses': {
|
||||
handler() {
|
||||
if (inModal.inbound.protocol === Protocols.VLESS && inModal.inbound.settings && inModal.inbound.settings.vlesses) {
|
||||
const hasVisionFlow = inModal.inbound.settings.vlesses.some(c => c.flow === 'xtls-rprx-vision' || c.flow === 'xtls-rprx-vision-udp443');
|
||||
if (hasVisionFlow && (!inModal.inbound.settings.testseed || !Array.isArray(inModal.inbound.settings.testseed) || inModal.inbound.settings.testseed.length < 4)) {
|
||||
inModal.inbound.settings.testseed = [900, 500, 900, 256];
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
streamNetworkChange() {
|
||||
if (!inModal.inbound.canEnableTls()) {
|
||||
this.inModal.inbound.stream.security = 'none';
|
||||
}
|
||||
if (!inModal.inbound.canEnableReality()) {
|
||||
this.inModal.inbound.reality = false;
|
||||
}
|
||||
if (this.inModal.inbound.protocol == Protocols.VLESS && !inModal.inbound.canEnableTlsFlow()) {
|
||||
this.inModal.inbound.settings.vlesses.forEach(client => {
|
||||
client.flow = "";
|
||||
});
|
||||
}
|
||||
},
|
||||
SSMethodChange() {
|
||||
this.inModal.inbound.settings.password = RandomUtil.randomShadowsocksPassword(this.inModal.inbound.settings.method)
|
||||
|
||||
if (this.inModal.inbound.isSSMultiUser) {
|
||||
if (this.inModal.inbound.settings.shadowsockses.length == 0) {
|
||||
this.inModal.inbound.settings.shadowsockses = [new Inbound.ShadowsocksSettings.Shadowsocks()];
|
||||
}
|
||||
if (!this.inModal.inbound.isSS2022) {
|
||||
this.inModal.inbound.settings.shadowsockses.forEach(client => {
|
||||
client.method = this.inModal.inbound.settings.method;
|
||||
})
|
||||
} else {
|
||||
this.inModal.inbound.settings.shadowsockses.forEach(client => {
|
||||
client.method = "";
|
||||
})
|
||||
}
|
||||
this.inModal.inbound.settings.shadowsockses.forEach(client => {
|
||||
client.password = RandomUtil.randomShadowsocksPassword(this.inModal.inbound.settings.method)
|
||||
})
|
||||
} else {
|
||||
if (this.inModal.inbound.settings.shadowsockses.length > 0) {
|
||||
this.inModal.inbound.settings.shadowsockses = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
setDefaultCertData(index) {
|
||||
inModal.inbound.stream.tls.certs[index].certFile = app.defaultCert;
|
||||
inModal.inbound.stream.tls.certs[index].keyFile = app.defaultKey;
|
||||
},
|
||||
async getNewX25519Cert() {
|
||||
inModal.loading(true);
|
||||
const msg = await HttpUtil.get('/panel/api/server/getNewX25519Cert');
|
||||
inModal.loading(false);
|
||||
if (!msg.success) {
|
||||
return;
|
||||
}
|
||||
inModal.inbound.stream.reality.privateKey = msg.obj.privateKey;
|
||||
inModal.inbound.stream.reality.settings.publicKey = msg.obj.publicKey;
|
||||
},
|
||||
async getNewmldsa65() {
|
||||
inModal.loading(true);
|
||||
const msg = await HttpUtil.get('/panel/api/server/getNewmldsa65');
|
||||
inModal.loading(false);
|
||||
if (!msg.success) {
|
||||
return;
|
||||
}
|
||||
inModal.inbound.stream.reality.mldsa65Seed = msg.obj.seed;
|
||||
inModal.inbound.stream.reality.settings.mldsa65Verify = msg.obj.verify;
|
||||
},
|
||||
async getNewEchCert() {
|
||||
inModal.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/api/server/getNewEchCert', { sni: inModal.inbound.stream.tls.sni });
|
||||
inModal.loading(false);
|
||||
if (!msg.success) {
|
||||
return;
|
||||
}
|
||||
inModal.inbound.stream.tls.echServerKeys = msg.obj.echServerKeys;
|
||||
inModal.inbound.stream.tls.settings.echConfigList = msg.obj.echConfigList;
|
||||
},
|
||||
async getNewVlessEnc() {
|
||||
inModal.loading(true);
|
||||
const msg = await HttpUtil.get('/panel/api/server/getNewVlessEnc');
|
||||
inModal.loading(false);
|
||||
|
||||
if (!msg.success) {
|
||||
return;
|
||||
}
|
||||
|
||||
const auths = msg.obj.auths || [];
|
||||
const selected = inModal.inbound.settings.selectedAuth;
|
||||
const block = auths.find(a => a.label === selected);
|
||||
|
||||
if (!block) {
|
||||
console.error("No auth block for", selected);
|
||||
return;
|
||||
}
|
||||
|
||||
inModal.inbound.settings.decryption = block.decryption;
|
||||
inModal.inbound.settings.encryption = block.encryption;
|
||||
},
|
||||
clearKeys() {
|
||||
this.inbound.settings.decryption = 'none';
|
||||
this.inbound.settings.encryption = '';
|
||||
},
|
||||
|
||||
// Vision Seed 方法 - 必须在 Vue methods 中以进行正确的绑定
|
||||
updateTestseed(index, value) {
|
||||
if (!this.inbound.settings.testseed || !Array.isArray(this.inbound.settings.testseed)) {
|
||||
this.$set(this.inbound.settings, 'testseed', [900, 500, 900, 256]);
|
||||
}
|
||||
while (this.inbound.settings.testseed.length <= index) {
|
||||
this.inbound.settings.testseed.push(0);
|
||||
}
|
||||
this.$set(this.inbound.settings.testseed, index, value);
|
||||
},
|
||||
|
||||
/**
|
||||
* 优化后的随机 Vision Seed 生成函数 (Vue 实例版)
|
||||
*/
|
||||
setRandomTestseed() {
|
||||
// 确保对象存在
|
||||
if (!this.inbound || !this.inbound.settings) return;
|
||||
|
||||
// 1. 生成 [0] 大包阈值
|
||||
// 建议范围：500 - 1000 (避免太小导致所有包都被当做大包)
|
||||
let threshold = 500 + Math.floor(Math.random() * 501);
|
||||
|
||||
// 2. 生成 [1] 大包浮动
|
||||
// 建议范围：0 - 500
|
||||
let largeVar = Math.floor(Math.random() * 501);
|
||||
|
||||
// 3. 生成 [2] 大包目标最低长度
|
||||
// 逻辑：必须 >= threshold。在 threshold 基础上增加 0-200 的随机量
|
||||
// 这样永远保证 seed[2] >= seed[0]，避免内核逻辑崩溃
|
||||
let targetLength = threshold + Math.floor(Math.random() * 201);
|
||||
|
||||
// 4. 生成 [3] 小包浮动
|
||||
// 建议范围：0 - 300
|
||||
let smallVar = Math.floor(Math.random() * 301);
|
||||
|
||||
// 使用 Vue.set 确保 UI 响应式更新
|
||||
this.$set(this.inbound.settings, 'testseed', [threshold, largeVar, targetLength, smallVar]);
|
||||
},
|
||||
|
||||
resetTestseed() {
|
||||
// 使用 Vue.set 重置为默认值
|
||||
this.$set(this.inbound.settings, 'testseed', [900, 500, 900, 256]);
|
||||
}
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
71
web/html/modals/prompt_modal.html
Normal file
71
web/html/modals/prompt_modal.html
Normal file
@@ -0,0 +1,71 @@
|
||||
{{define "modals/promptModal"}}
|
||||
<a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
|
||||
:closable="true" @ok="promptModal.ok" :mask-closable="false"
|
||||
:confirm-loading="promptModal.confirmLoading"
|
||||
:ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}' :class="themeSwitcher.currentTheme">
|
||||
<a-input id="prompt-modal-input" :type="promptModal.type"
|
||||
v-model="promptModal.value"
|
||||
:autosize="{minRows: 10, maxRows: 20}"
|
||||
@keydown.enter.native="promptModal.keyEnter"
|
||||
@keydown.ctrl.83="promptModal.ctrlS"></a-input>
|
||||
</a-modal>
|
||||
|
||||
<script>
|
||||
|
||||
const promptModal = {
|
||||
title: '',
|
||||
type: '',
|
||||
value: '',
|
||||
okText: '{{ i18n "sure"}}',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
keyEnter(e) {
|
||||
if (this.type !== 'textarea') {
|
||||
e.preventDefault();
|
||||
this.ok();
|
||||
}
|
||||
},
|
||||
ctrlS(e) {
|
||||
if (this.type === 'textarea') {
|
||||
e.preventDefault();
|
||||
promptModal.confirm(promptModal.value);
|
||||
}
|
||||
},
|
||||
ok() {
|
||||
promptModal.confirm(promptModal.value);
|
||||
},
|
||||
confirm() {},
|
||||
open({
|
||||
title = '',
|
||||
type = 'text',
|
||||
value = '',
|
||||
okText = '{{ i18n "sure"}}',
|
||||
confirm = () => {},
|
||||
}) {
|
||||
this.title = title;
|
||||
this.type = type;
|
||||
this.value = value;
|
||||
this.okText = okText;
|
||||
this.confirm = confirm;
|
||||
this.visible = true;
|
||||
promptModalApp.$nextTick(() => {
|
||||
document.querySelector('#prompt-modal-input').focus();
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
loading(loading=true) {
|
||||
this.confirmLoading = loading;
|
||||
},
|
||||
};
|
||||
|
||||
const promptModalApp = new Vue({
|
||||
el: '#prompt-modal',
|
||||
data: {
|
||||
promptModal: promptModal,
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
304
web/html/modals/qrcode_modal.html
Normal file
304
web/html/modals/qrcode_modal.html
Normal file
@@ -0,0 +1,304 @@
|
||||
{{define "modals/qrcodeModal"}}
|
||||
<a-modal id="qrcode-modal" v-model="qrModal.visible" :closable="true" :class="themeSwitcher.currentTheme"
|
||||
width="fit-content" :dialog-style="isMobile ? { top: '18px' } : {}" :footer="null">
|
||||
<template #title>
|
||||
<a-space direction="horizontal">
|
||||
<span>[[ qrModal.title ]]</span>
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme" trigger="click" placement="bottom">
|
||||
<template slot="content">
|
||||
<a-space direction="vertical">
|
||||
<template v-for="(row, index) in qrModal.qrcodes">
|
||||
<b>[[ row.remark ]]</b>
|
||||
<a-space direction="horizontal">
|
||||
<a-switch size="small" :checked="row.useIPv4" @click="toggleIPv4(index)"></a-switch>
|
||||
<span>{{ i18n "useIPv4ForHost" }}</span>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
<a-icon type="setting"></a-icon>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
<tr-qr-modal class="qr-modal">
|
||||
<template v-if="app.subSettings?.enable && qrModal.subId">
|
||||
<tr-qr-box class="qr-box">
|
||||
<a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
|
||||
<tr-qr-bg class="qr-bg-sub">
|
||||
<tr-qr-bg-inner class="qr-bg-sub-inner">
|
||||
<canvas @click="copy(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
|
||||
</tr-qr-bg-inner>
|
||||
</tr-qr-bg>
|
||||
</tr-qr-box>
|
||||
<tr-qr-box class="qr-box">
|
||||
<a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
|
||||
<tr-qr-bg class="qr-bg-sub">
|
||||
<tr-qr-bg-inner class="qr-bg-sub-inner">
|
||||
<canvas @click="copy(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
|
||||
</tr-qr-bg-inner>
|
||||
</tr-qr-bg>
|
||||
</tr-qr-box>
|
||||
</template>
|
||||
<template v-for="(row, index) in qrModal.qrcodes">
|
||||
<tr-qr-box class="qr-box">
|
||||
<a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
|
||||
<tr-qr-bg class="qr-bg">
|
||||
<canvas @click="copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
|
||||
</tr-qr-bg>
|
||||
</tr-qr-box>
|
||||
</template>
|
||||
</tr-qr-modal>
|
||||
</a-modal>
|
||||
|
||||
<style>
|
||||
.ant-table:not(.ant-table-expanded-row .ant-table) {
|
||||
outline: 1px solid #f0f0f0;
|
||||
outline-offset: -1px;
|
||||
border-radius: 1rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* QR code transition effects */
|
||||
.qr-cv {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.qr-transition-enter-active, .qr-transition-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.qr-transition-enter, .qr-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.qr-transition-enter-to, .qr-transition-leave {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.qr-flash {
|
||||
animation: qr-flash-animation 0.6s;
|
||||
}
|
||||
|
||||
@keyframes qr-flash-animation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const qrModal = {
|
||||
title: '',
|
||||
dbInbound: new DBInbound(),
|
||||
client: null,
|
||||
qrcodes: [],
|
||||
visible: false,
|
||||
subId: '',
|
||||
show: function (title = '', dbInbound, client) {
|
||||
this.title = title;
|
||||
this.dbInbound = dbInbound;
|
||||
this.inbound = dbInbound.toInbound();
|
||||
this.client = client;
|
||||
this.subId = '';
|
||||
this.qrcodes = [];
|
||||
// Reset the status fetched flag when showing the modal
|
||||
if (qrModalApp) qrModalApp.statusFetched = false;
|
||||
if (this.inbound.protocol == Protocols.WIREGUARD) {
|
||||
this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l, index) => {
|
||||
this.qrcodes.push({
|
||||
remark: "Peer " + (index + 1),
|
||||
link: l,
|
||||
useIPv4: false,
|
||||
originalLink: l
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
|
||||
this.qrcodes.push({
|
||||
remark: l.remark,
|
||||
link: l.link,
|
||||
useIPv4: false,
|
||||
originalLink: l.link
|
||||
});
|
||||
});
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
close: function () {
|
||||
this.visible = false;
|
||||
},
|
||||
};
|
||||
const qrModalApp = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#qrcode-modal',
|
||||
mixins: [MediaQueryMixin],
|
||||
data: {
|
||||
qrModal: qrModal,
|
||||
serverStatus: null,
|
||||
statusFetched: false,
|
||||
},
|
||||
methods: {
|
||||
async getStatus() {
|
||||
try {
|
||||
const msg = await HttpUtil.get('/panel/api/server/status');
|
||||
if (msg.success) {
|
||||
this.serverStatus = msg.obj;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to get status:", e);
|
||||
}
|
||||
},
|
||||
|
||||
toggleIPv4(index) {
|
||||
const row = qrModal.qrcodes[index];
|
||||
row.useIPv4 = !row.useIPv4;
|
||||
this.updateLink(index);
|
||||
},
|
||||
updateLink(index) {
|
||||
const row = qrModal.qrcodes[index];
|
||||
if (!this.serverStatus || !this.serverStatus.publicIP) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.useIPv4 && this.serverStatus.publicIP.ipv4) {
|
||||
// Replace the hostname or IP in the link with the IPv4 address
|
||||
const originalLink = row.originalLink;
|
||||
const url = new URL(originalLink);
|
||||
const ipv4 = this.serverStatus.publicIP.ipv4;
|
||||
|
||||
if (qrModal.inbound.protocol == Protocols.WIREGUARD) {
|
||||
// Special handling for WireGuard config
|
||||
const endpointRegex = /Endpoint = ([^:]+):(\d+)/;
|
||||
const match = originalLink.match(endpointRegex);
|
||||
if (match) {
|
||||
row.link = originalLink.replace(
|
||||
`Endpoint = ${match[1]}:${match[2]}`,
|
||||
`Endpoint = ${ipv4}:${match[2]}`
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// For other protocols using URL format
|
||||
url.hostname = ipv4;
|
||||
row.link = url.toString();
|
||||
}
|
||||
} else {
|
||||
// Restore original link
|
||||
row.link = row.originalLink;
|
||||
}
|
||||
|
||||
// Update QR code with transition effect
|
||||
const canvasElement = document.querySelector('#qrCode-' + index);
|
||||
if (canvasElement) {
|
||||
// Add flash animation class
|
||||
canvasElement.classList.add('qr-flash');
|
||||
|
||||
// Remove the class after animation completes
|
||||
setTimeout(() => {
|
||||
canvasElement.classList.remove('qr-flash');
|
||||
}, 600);
|
||||
}
|
||||
|
||||
this.setQrCode("qrCode-" + index, row.link);
|
||||
},
|
||||
copy(content) {
|
||||
ClipboardManager
|
||||
.copyText(content)
|
||||
.then(() => {
|
||||
app.$message.success('{{ i18n "copied" }}')
|
||||
})
|
||||
},
|
||||
setQrCode(elementId, content) {
|
||||
new QRious({
|
||||
element: document.querySelector('#' + elementId),
|
||||
size: 400,
|
||||
value: content,
|
||||
background: 'white',
|
||||
backgroundAlpha: 0,
|
||||
foreground: 'black',
|
||||
padding: 2,
|
||||
level: 'L'
|
||||
});
|
||||
},
|
||||
genSubLink(subID) {
|
||||
return app.subSettings.subURI + subID;
|
||||
},
|
||||
genSubJsonLink(subID) {
|
||||
return app.subSettings.subJsonURI + subID;
|
||||
},
|
||||
revertOverflow() {
|
||||
const elements = document.querySelectorAll(".qr-tag");
|
||||
elements.forEach((element) => {
|
||||
element.classList.remove("tr-marquee");
|
||||
element.children[0].style.animation = '';
|
||||
while (element.children.length > 1) {
|
||||
element.removeChild(element.lastChild);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
if (this.qrModal.visible) {
|
||||
fixOverflow();
|
||||
if (!this.statusFetched) {
|
||||
this.getStatus();
|
||||
this.statusFetched = true;
|
||||
}
|
||||
} else {
|
||||
this.revertOverflow();
|
||||
// Reset the flag when modal is closed so it will fetch again next time
|
||||
this.statusFetched = false;
|
||||
}
|
||||
if (qrModal.client && qrModal.client.subId) {
|
||||
qrModal.subId = qrModal.client.subId;
|
||||
this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
|
||||
this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
|
||||
}
|
||||
qrModal.qrcodes.forEach((element, index) => {
|
||||
this.setQrCode("qrCode-" + index, element.link);
|
||||
// Update links based on current toggle state
|
||||
if (element.useIPv4 && this.serverStatus && this.serverStatus.publicIP) {
|
||||
this.updateLink(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function fixOverflow() {
|
||||
const elements = document.querySelectorAll(".qr-tag");
|
||||
elements.forEach((element) => {
|
||||
function isElementOverflowing(element) {
|
||||
const overflowX = element.offsetWidth < element.scrollWidth,
|
||||
overflowY = element.offsetHeight < element.scrollHeight;
|
||||
return overflowX || overflowY;
|
||||
}
|
||||
|
||||
function wrapContentsInMarquee(element) {
|
||||
element.classList.add("tr-marquee");
|
||||
element.children[0].style.animation = `move-ltr ${(element.children[0].clientWidth / element.clientWidth) * 5
|
||||
}s ease-in-out infinite`;
|
||||
const marqueeText = element.children[0];
|
||||
if (element.children.length < 2) {
|
||||
for (let i = 0; i < 1; i++) {
|
||||
const marqueeText = element.children[0].cloneNode(true);
|
||||
element.children[0].after(marqueeText);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isElementOverflowing(element)) {
|
||||
wrapContentsInMarquee(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
51
web/html/modals/text_modal.html
Normal file
51
web/html/modals/text_modal.html
Normal file
@@ -0,0 +1,51 @@
|
||||
{{define "modals/textModal"}}
|
||||
<a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title" :closable="true"
|
||||
:class="themeSwitcher.currentTheme">
|
||||
<a-input :style="{ overflowY: 'auto' }" type="textarea" v-model="txtModal.content"
|
||||
:autosize="{ minRows: 10, maxRows: 20}"></a-input>
|
||||
<template slot="footer">
|
||||
<a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
|
||||
@click="FileManager.downloadTextFile(txtModal.content, txtModal.fileName)">
|
||||
<span>[[ txtModal.fileName ]]</span>
|
||||
</a-button>
|
||||
<a-button type="primary" icon="copy" @click="txtModal.copy(txtModal.content)">
|
||||
<span>{{ i18n "copy" }}</span>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
||||
<script>
|
||||
const txtModal = {
|
||||
title: '',
|
||||
content: '',
|
||||
fileName: '',
|
||||
qrcode: null,
|
||||
visible: false,
|
||||
show: function (title = '', content = '', fileName = '') {
|
||||
this.title = title;
|
||||
this.content = content;
|
||||
this.fileName = fileName;
|
||||
this.visible = true;
|
||||
},
|
||||
copy: function (content = '') {
|
||||
ClipboardManager
|
||||
.copyText(content)
|
||||
.then(() => {
|
||||
app.$message.success('{{ i18n "copied" }}')
|
||||
this.close();
|
||||
})
|
||||
},
|
||||
close: function () {
|
||||
this.visible = false;
|
||||
},
|
||||
};
|
||||
|
||||
const textModalApp = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#text-modal',
|
||||
data: {
|
||||
txtModal: txtModal,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
125
web/html/modals/two_factor_modal.html
Normal file
125
web/html/modals/two_factor_modal.html
Normal file
@@ -0,0 +1,125 @@
|
||||
{{define "modals/twoFactorModal"}}
|
||||
<a-modal id="two-factor-modal" v-model="twoFactorModal.visible" :title="twoFactorModal.title" :closable="true"
|
||||
:class="themeSwitcher.currentTheme">
|
||||
<template v-if="twoFactorModal.type === 'set'">
|
||||
<p>{{ i18n "pages.settings.security.twoFactorModalSteps" }}</p>
|
||||
<a-divider></a-divider>
|
||||
<p>{{ i18n "pages.settings.security.twoFactorModalFirstStep" }}</p>
|
||||
<div :style="{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '12px' }">
|
||||
<div class="qr-bg" :style="{ width: '180px', height: '180px' }">
|
||||
<canvas @click="copy(twoFactorModal.token)" id="twofactor-qrcode" class="qr-cv"></canvas>
|
||||
</div>
|
||||
<span :style="{ fontSize: '12px', fontFamily: 'monospace' }">[[ twoFactorModal.token ]]</span>
|
||||
</div>
|
||||
<a-divider></a-divider>
|
||||
<p>{{ i18n "pages.settings.security.twoFactorModalSecondStep" }}</p>
|
||||
<a-input v-model.trim="twoFactorModal.enteredCode" :style="{ width: '100%' }"></a-input>
|
||||
</template>
|
||||
<template v-if="twoFactorModal.type === 'confirm'">
|
||||
<p>[[ twoFactorModal.description ]]</p>
|
||||
<a-input v-model.trim="twoFactorModal.enteredCode" :style="{ width: '100%' }"></a-input>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="twoFactorModal.cancel">
|
||||
<span>{{ i18n "cancel" }}</span>
|
||||
</a-button>
|
||||
<a-button type="primary" :disabled="twoFactorModal.enteredCode.length < 6" @click="twoFactorModal.ok">
|
||||
<span>{{ i18n "confirm" }}</span>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
||||
<script>
|
||||
const twoFactorModal = {
|
||||
title: '',
|
||||
description: '',
|
||||
fileName: '',
|
||||
token: '',
|
||||
enteredCode: '',
|
||||
visible: false,
|
||||
type: 'set',
|
||||
confirm: null,
|
||||
totpObject: null,
|
||||
qrImage: "",
|
||||
ok() {
|
||||
if (twoFactorModal.totpObject.generate() === twoFactorModal.enteredCode) {
|
||||
ObjectUtil.execute(twoFactorModal.confirm, true)
|
||||
|
||||
twoFactorModal.close()
|
||||
} else {
|
||||
Vue.prototype.$message['error']('{{ i18n "pages.settings.security.twoFactorModalError" }}')
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
ObjectUtil.execute(twoFactorModal.confirm, false)
|
||||
|
||||
twoFactorModal.close()
|
||||
},
|
||||
show: function ({
|
||||
title = '',
|
||||
description = '',
|
||||
token = '',
|
||||
type = 'set',
|
||||
confirm = (success) => { }
|
||||
}) {
|
||||
this.title = title;
|
||||
this.description = description;
|
||||
this.token = token;
|
||||
this.visible = true;
|
||||
this.confirm = confirm;
|
||||
this.type = type;
|
||||
|
||||
this.totpObject = new OTPAuth.TOTP({
|
||||
issuer: "X-Panel",
|
||||
label: "TwoStepCode",
|
||||
algorithm: "SHA1",
|
||||
digits: 6,
|
||||
period: 30,
|
||||
secret: twoFactorModal.token,
|
||||
});
|
||||
},
|
||||
close: function () {
|
||||
twoFactorModal.enteredCode = "";
|
||||
twoFactorModal.visible = false;
|
||||
},
|
||||
};
|
||||
|
||||
const twoFactorModalApp = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#two-factor-modal',
|
||||
data: {
|
||||
twoFactorModal: twoFactorModal,
|
||||
},
|
||||
updated() {
|
||||
if (
|
||||
this.twoFactorModal.visible &&
|
||||
this.twoFactorModal.type === 'set' &&
|
||||
document.getElementById('twofactor-qrcode')
|
||||
) {
|
||||
this.setQrCode('twofactor-qrcode', this.twoFactorModal.totpObject.toString());
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setQrCode(elementId, content) {
|
||||
new QRious({
|
||||
element: document.getElementById(elementId),
|
||||
size: 200,
|
||||
value: content,
|
||||
background: 'white',
|
||||
backgroundAlpha: 0,
|
||||
foreground: 'black',
|
||||
padding: 2,
|
||||
level: 'L'
|
||||
});
|
||||
},
|
||||
copy(content) {
|
||||
ClipboardManager
|
||||
.copyText(content)
|
||||
.then(() => {
|
||||
app.$message.success('{{ i18n "copied" }}')
|
||||
})
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
246
web/html/modals/warp_modal.html
Normal file
246
web/html/modals/warp_modal.html
Normal file
@@ -0,0 +1,246 @@
|
||||
{{define "modals/warpModal"}}
|
||||
<a-modal id="warp-modal" v-model="warpModal.visible" title="Cloudflare WARP"
|
||||
:confirm-loading="warpModal.confirmLoading" :closable="true" :mask-closable="true"
|
||||
:footer="null" :class="themeSwitcher.currentTheme">
|
||||
<template v-if="ObjectUtil.isEmpty(warpModal.warpData)">
|
||||
<a-button icon="api" @click="register" :loading="warpModal.confirmLoading">{{ i18n "create" }}</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<table :style="{ margin: '5px 0', width: '100%' }">
|
||||
<tr class="client-table-odd-row">
|
||||
<td>Access Token</td>
|
||||
<td>[[ warpModal.warpData.access_token ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Device ID</td>
|
||||
<td>[[ warpModal.warpData.device_id ]]</td>
|
||||
</tr>
|
||||
<tr class="client-table-odd-row">
|
||||
<td>License Key</td>
|
||||
<td>[[ warpModal.warpData.license_key ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Private Key</td>
|
||||
<td>[[ warpModal.warpData.private_key ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
<a-button @click="delConfig" :loading="warpModal.confirmLoading" type="danger">{{ i18n "delete" }}</a-button>
|
||||
<a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.settings" }}</a-divider>
|
||||
<a-collapse :style="{ margin: '10px 0' }">
|
||||
<a-collapse-panel header='WARP/WARP+ License Key'>
|
||||
<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label="Key">
|
||||
<a-input v-model="warpPlus"></a-input>
|
||||
<a-button @click="updateLicense(warpPlus)" :disabled="warpPlus.length<26"
|
||||
:loading="warpModal.confirmLoading">{{ i18n "update" }}</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.accountInfo" }}</a-divider>
|
||||
<a-button icon="sync" @click="getConfig" :style="{ marginTop: '5px', marginBottom: '10px' }"
|
||||
:loading="warpModal.confirmLoading" type="primary">{{ i18n "info" }}</a-button>
|
||||
<template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig)">
|
||||
<table :style="{ width: '100%' }">
|
||||
<tr class="client-table-odd-row">
|
||||
<td>Device Name</td>
|
||||
<td>[[ warpModal.warpConfig.name ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Device Model</td>
|
||||
<td>[[ warpModal.warpConfig.model ]]</td>
|
||||
</tr>
|
||||
<tr class="client-table-odd-row">
|
||||
<td>Device Enabled</td>
|
||||
<td>[[ warpModal.warpConfig.enabled ]]</td>
|
||||
</tr>
|
||||
<template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account)">
|
||||
<tr>
|
||||
<td>Account Type</td>
|
||||
<td>[[ warpModal.warpConfig.account.account_type ]]</td>
|
||||
</tr>
|
||||
<tr class="client-table-odd-row">
|
||||
<td>Role</td>
|
||||
<td>[[ warpModal.warpConfig.account.role ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WARP+ Data</td>
|
||||
<td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
|
||||
</tr>
|
||||
<tr class="client-table-odd-row">
|
||||
<td>Quota</td>
|
||||
<td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
|
||||
</tr>
|
||||
<tr v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account.usage)">
|
||||
<td>Usage</td>
|
||||
<td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.usage) ]]</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
<a-divider :style="{ margin: '10px 0' }">{{ i18n "pages.xray.outbound.outboundStatus" }}</a-divider>
|
||||
<a-form :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<template v-if="warpOutboundIndex>=0">
|
||||
<a-tag color="green" :style="{ lineHeight: '31px' }">{{ i18n "enabled" }}</a-tag>
|
||||
<a-button @click="resetOutbound" :loading="warpModal.confirmLoading" type="danger">{{ i18n "reset" }}</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag color="orange" :style="{ lineHeight: '31px' }">{{ i18n "disabled" }}</a-tag>
|
||||
<a-button @click="addOutbound" :loading="warpModal.confirmLoading" type="primary">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
</template>
|
||||
</a-modal>
|
||||
<script>
|
||||
|
||||
const warpModal = {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
warpData: null,
|
||||
warpConfig: null,
|
||||
warpOutbound: null,
|
||||
show() {
|
||||
this.visible = true;
|
||||
this.warpConfig = null;
|
||||
this.getData();
|
||||
},
|
||||
close() {
|
||||
this.visible = false;
|
||||
this.loading(false);
|
||||
},
|
||||
loading(loading = true) {
|
||||
this.confirmLoading = loading;
|
||||
},
|
||||
async getData() {
|
||||
this.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/xray/warp/data');
|
||||
this.loading(false);
|
||||
if (msg.success) {
|
||||
this.warpData = msg.obj.length > 0 ? JSON.parse(msg.obj) : null;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#warp-modal',
|
||||
data: {
|
||||
warpModal: warpModal,
|
||||
warpPlus: '',
|
||||
},
|
||||
methods: {
|
||||
collectConfig() {
|
||||
config = warpModal.warpConfig.config;
|
||||
peer = config.peers[0];
|
||||
if (config) {
|
||||
warpModal.warpOutbound = Outbound.fromJson({
|
||||
tag: 'warp',
|
||||
protocol: Protocols.Wireguard,
|
||||
settings: {
|
||||
mtu: 1420,
|
||||
secretKey: warpModal.warpData.private_key,
|
||||
address: this.getAddresses(config.interface.addresses),
|
||||
reserved: this.getResolved(config.client_id),
|
||||
domainStrategy: 'ForceIP',
|
||||
peers: [{
|
||||
publicKey: peer.public_key,
|
||||
endpoint: peer.endpoint.host,
|
||||
}],
|
||||
noKernelTun: false,
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
getAddresses(addrs) {
|
||||
let addresses = [];
|
||||
if (addrs.v4) addresses.push(addrs.v4 + "/32");
|
||||
if (addrs.v6) addresses.push(addrs.v6 + "/128");
|
||||
return addresses;
|
||||
},
|
||||
getResolved(client_id) {
|
||||
let reserved = [];
|
||||
let decoded = atob(client_id);
|
||||
let hexString = '';
|
||||
for (let i = 0; i < decoded.length; i++) {
|
||||
let hex = decoded.charCodeAt(i).toString(16);
|
||||
hexString += (hex.length === 1 ? '0' : '') + hex;
|
||||
}
|
||||
|
||||
for (let i = 0; i < hexString.length; i += 2) {
|
||||
let hexByte = hexString.slice(i, i + 2);
|
||||
let decValue = parseInt(hexByte, 16);
|
||||
reserved.push(decValue);
|
||||
}
|
||||
return reserved;
|
||||
},
|
||||
async register() {
|
||||
warpModal.loading(true);
|
||||
const keys = Wireguard.generateKeypair();
|
||||
const msg = await HttpUtil.post('/panel/xray/warp/reg', keys);
|
||||
if (msg.success) {
|
||||
const resp = JSON.parse(msg.obj);
|
||||
warpModal.warpData = resp.data;
|
||||
warpModal.warpConfig = resp.config;
|
||||
this.collectConfig();
|
||||
}
|
||||
warpModal.loading(false);
|
||||
},
|
||||
async updateLicense(l) {
|
||||
warpModal.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/xray/warp/license', { license: l });
|
||||
if (msg.success) {
|
||||
warpModal.warpData = JSON.parse(msg.obj);
|
||||
warpModal.warpConfig = null;
|
||||
this.warpPlus = '';
|
||||
}
|
||||
warpModal.loading(false);
|
||||
},
|
||||
async getConfig() {
|
||||
warpModal.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/xray/warp/config');
|
||||
warpModal.loading(false);
|
||||
if (msg.success) {
|
||||
warpModal.warpConfig = JSON.parse(msg.obj);
|
||||
this.collectConfig();
|
||||
}
|
||||
},
|
||||
async delConfig() {
|
||||
warpModal.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/xray/warp/del');
|
||||
warpModal.loading(false);
|
||||
if (msg.success) {
|
||||
warpModal.warpData = null;
|
||||
warpModal.warpConfig = null;
|
||||
this.delOutbound();
|
||||
}
|
||||
},
|
||||
addOutbound() {
|
||||
app.templateSettings.outbounds.push(warpModal.warpOutbound.toJson());
|
||||
app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
|
||||
warpModal.close();
|
||||
},
|
||||
resetOutbound() {
|
||||
app.templateSettings.outbounds[this.warpOutboundIndex] = warpModal.warpOutbound.toJson();
|
||||
app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
|
||||
warpModal.close();
|
||||
},
|
||||
delOutbound() {
|
||||
if (this.warpOutboundIndex != -1) {
|
||||
app.templateSettings.outbounds.splice(this.warpOutboundIndex, 1);
|
||||
app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
|
||||
}
|
||||
warpModal.close();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpOutboundIndex: {
|
||||
get: function () {
|
||||
return app.templateSettings ? app.templateSettings.outbounds.findIndex((o) => o.tag == 'warp') : -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
123
web/html/modals/xray_balancer_modal.html
Normal file
123
web/html/modals/xray_balancer_modal.html
Normal file
@@ -0,0 +1,123 @@
|
||||
{{define "modals/balancerModal"}}
|
||||
<a-modal
|
||||
id="balancer-modal"
|
||||
v-model="balancerModal.visible"
|
||||
:title="balancerModal.title"
|
||||
@ok="balancerModal.ok"
|
||||
:confirm-loading="balancerModal.confirmLoading"
|
||||
:ok-button-props="{ props: { disabled: !balancerModal.isValid } }"
|
||||
:closable="true"
|
||||
:mask-closable="false"
|
||||
:ok-text="balancerModal.okText"
|
||||
cancel-text='{{ i18n "close" }}'
|
||||
:class="themeSwitcher.currentTheme">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "pages.xray.balancer.tag" }}' has-feedback
|
||||
:validate-status="balancerModal.duplicateTag? 'warning' : 'success'">
|
||||
<a-input v-model.trim="balancerModal.balancer.tag" @change="balancerModal.check()"
|
||||
placeholder='{{ i18n "pages.xray.balancer.tagDesc" }}'></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.balancer.balancerStrategy" }}'>
|
||||
<a-select v-model="balancerModal.balancer.strategy" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="random">Random</a-select-option>
|
||||
<a-select-option value="roundRobin">Round Robin</a-select-option>
|
||||
<a-select-option value="leastLoad">Least Load</a-select-option>
|
||||
<a-select-option value="leastPing">Least Ping</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.balancer.balancerSelectors" }}' has-feedback
|
||||
:validate-status="balancerModal.emptySelector? 'warning' : 'success'">
|
||||
<a-select v-model="balancerModal.balancer.selector" mode="tags" @change="balancerModal.checkSelector()"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="tag in balancerModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Fallback">
|
||||
<a-select v-model="balancerModal.balancer.fallbackTag" clearable
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="tag in [ '', ...balancerModal.outboundTags]" :value="tag">[[ tag ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</table>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<script>
|
||||
const balancerModal = {
|
||||
title: '',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
okText: '{{ i18n "sure" }}',
|
||||
isEdit: false,
|
||||
confirm: null,
|
||||
duplicateTag: false,
|
||||
emptySelector: false,
|
||||
balancer: {
|
||||
tag: '',
|
||||
strategy: 'random',
|
||||
selector: [],
|
||||
fallbackTag: ''
|
||||
},
|
||||
outboundTags: [],
|
||||
balancerTags:[],
|
||||
ok() {
|
||||
if (balancerModal.balancer.selector.length == 0) {
|
||||
balancerModal.emptySelector = true;
|
||||
return;
|
||||
}
|
||||
balancerModal.emptySelector = false;
|
||||
ObjectUtil.execute(balancerModal.confirm, balancerModal.balancer);
|
||||
},
|
||||
show({ title = '', okText = '{{ i18n "sure" }}', balancerTags = [], balancer, confirm = (balancer) => { }, isEdit = false }) {
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
this.confirm = confirm;
|
||||
this.visible = true;
|
||||
if (isEdit) {
|
||||
balancerModal.balancer = balancer;
|
||||
} else {
|
||||
balancerModal.balancer = {
|
||||
tag: '',
|
||||
strategy: 'random',
|
||||
selector: [],
|
||||
fallbackTag: ''
|
||||
};
|
||||
}
|
||||
this.balancerTags = balancerTags.filter((tag) => tag != balancer.tag);
|
||||
this.outboundTags = app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag);
|
||||
this.isEdit = isEdit;
|
||||
this.check();
|
||||
this.checkSelector();
|
||||
},
|
||||
close() {
|
||||
this.visible = false;
|
||||
this.loading(false);
|
||||
},
|
||||
loading(loading=true) {
|
||||
this.confirmLoading = loading;
|
||||
},
|
||||
check() {
|
||||
if (this.balancer.tag == '' || this.balancerTags.includes(this.balancer.tag)) {
|
||||
this.duplicateTag = true;
|
||||
this.isValid = false;
|
||||
} else {
|
||||
this.duplicateTag = false;
|
||||
this.isValid = true;
|
||||
}
|
||||
},
|
||||
checkSelector() {
|
||||
this.emptySelector = this.balancer.selector.length == 0;
|
||||
}
|
||||
};
|
||||
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#balancer-modal',
|
||||
data: {
|
||||
balancerModal: balancerModal
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
127
web/html/modals/xray_dns_modal.html
Normal file
127
web/html/modals/xray_dns_modal.html
Normal file
@@ -0,0 +1,127 @@
|
||||
{{define "modals/dnsModal"}}
|
||||
<a-modal id="dns-modal" v-model="dnsModal.visible" :title="dnsModal.title" @ok="dnsModal.ok" :closable="true"
|
||||
:mask-closable="false" :ok-text="dnsModal.okText" cancel-text='{{ i18n "close" }}'
|
||||
:class="themeSwitcher.currentTheme">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.address" }}'>
|
||||
<a-input v-model.trim="dnsModal.dnsServer.address"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.inbounds.port" }}'>
|
||||
<a-input-number v-model.number="dnsModal.dnsServer.port" :min="1" :max="65531"></a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.dns.strategy" }}'>
|
||||
<a-select v-model="dnsModal.dnsServer.queryStrategy" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="l" :label="l" v-for="l in ['UseSystem', 'UseIP', 'UseIPv4', 'UseIPv6']"> [[ l ]] </a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-divider :style="{ margin: '5px 0' }"></a-divider>
|
||||
<a-form-item label='{{ i18n "pages.xray.dns.domains" }}'>
|
||||
<a-button icon="plus" size="small" type="primary" @click="dnsModal.dnsServer.domains.push('')"></a-button>
|
||||
<template v-for="(domain, index) in dnsModal.dnsServer.domains">
|
||||
<a-input v-model.trim="dnsModal.dnsServer.domains[index]">
|
||||
<a-button icon="minus" size="small" slot="addonAfter"
|
||||
@click="dnsModal.dnsServer.domains.splice(index,1)"></a-button>
|
||||
</a-input>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.dns.expectIPs"}}'>
|
||||
<a-button icon="plus" size="small" type="primary" @click="dnsModal.dnsServer.expectIPs.push('')"></a-button>
|
||||
<template v-for="(domain, index) in dnsModal.dnsServer.expectIPs">
|
||||
<a-input v-model.trim="dnsModal.dnsServer.expectIPs[index]">
|
||||
<a-button icon="minus" size="small" slot="addonAfter"
|
||||
@click="dnsModal.dnsServer.expectIPs.splice(index,1)"></a-button>
|
||||
</a-input>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.dns.unexpectIPs"}}'>
|
||||
<a-button icon="plus" size="small" type="primary" @click="dnsModal.dnsServer.unexpectedIPs.push('')"></a-button>
|
||||
<template v-for="(domain, index) in dnsModal.dnsServer.unexpectedIPs">
|
||||
<a-input v-model.trim="dnsModal.dnsServer.unexpectedIPs[index]">
|
||||
<a-button icon="minus" size="small" slot="addonAfter"
|
||||
@click="dnsModal.dnsServer.unexpectedIPs.splice(index,1)"></a-button>
|
||||
</a-input>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-divider :style="{ margin: '5px 0' }"></a-divider>
|
||||
<a-form-item label='Skip Fallback'>
|
||||
<a-switch v-model="dnsModal.dnsServer.skipFallback"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='Disable Cache'>
|
||||
<a-switch v-model="dnsModal.dnsServer.disableCache"></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label='Final Query'>
|
||||
<a-switch v-model="dnsModal.dnsServer.finalQuery"></a-switch>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<script>
|
||||
const defaultDnsObject = {
|
||||
address: "localhost",
|
||||
port: 53,
|
||||
domains: [],
|
||||
expectIPs: [],
|
||||
unexpectedIPs: [],
|
||||
queryStrategy: 'UseIP',
|
||||
skipFallback: true,
|
||||
disableCache: false,
|
||||
finalQuery: false
|
||||
}
|
||||
|
||||
const dnsModal = {
|
||||
title: '',
|
||||
visible: false,
|
||||
okText: '{{ i18n "confirm" }}',
|
||||
isEdit: false,
|
||||
confirm: null,
|
||||
dnsServer: { ...defaultDnsObject },
|
||||
ok() {
|
||||
ObjectUtil.execute(dnsModal.confirm, { ...dnsModal.dnsServer });
|
||||
},
|
||||
show({
|
||||
title = '',
|
||||
okText = '{{ i18n "confirm" }}',
|
||||
dnsServer,
|
||||
confirm = (dnsServer) => { },
|
||||
isEdit = false
|
||||
}) {
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
this.confirm = confirm;
|
||||
this.visible = true;
|
||||
this.isEdit = isEdit;
|
||||
|
||||
if (isEdit) {
|
||||
switch (typeof dnsServer) {
|
||||
case 'string':
|
||||
const dnsObj = { ...defaultDnsObject };
|
||||
|
||||
dnsObj.address = dnsServer;
|
||||
|
||||
this.dnsServer = dnsObj;
|
||||
break;
|
||||
case 'object':
|
||||
this.dnsServer = dnsServer;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
this.dnsServer = { ...defaultDnsObject };
|
||||
|
||||
this.dnsServer.domains = [];
|
||||
this.dnsServer.expectIPs = [];
|
||||
this.dnsServer.unexpectedIPs = [];
|
||||
}
|
||||
},
|
||||
close() {
|
||||
dnsModal.visible = false;
|
||||
},
|
||||
};
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#dns-modal',
|
||||
data: {
|
||||
dnsModal: dnsModal,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
56
web/html/modals/xray_fakedns_modal.html
Normal file
56
web/html/modals/xray_fakedns_modal.html
Normal file
@@ -0,0 +1,56 @@
|
||||
{{define "modals/fakednsModal"}}
|
||||
<a-modal id="fakedns-modal" v-model="fakednsModal.visible" :title="fakednsModal.title" @ok="fakednsModal.ok"
|
||||
:closable="true" :mask-closable="false" :ok-text="fakednsModal.okText" cancel-text='{{ i18n "close" }}'
|
||||
:class="themeSwitcher.currentTheme">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "pages.xray.fakedns.ipPool" }}'>
|
||||
<a-input v-model.trim="fakednsModal.fakeDns.ipPool"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.fakedns.poolSize" }}'>
|
||||
<a-input-number v-model.number="fakednsModal.fakeDns.poolSize" :min="1"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<script>
|
||||
const fakednsDefaultData = {
|
||||
ipPool: "198.18.0.0/16",
|
||||
poolSize: 65535,
|
||||
}
|
||||
|
||||
const fakednsModal = {
|
||||
title: '',
|
||||
visible: false,
|
||||
okText: '{{ i18n "confirm" }}',
|
||||
isEdit: false,
|
||||
confirm: null,
|
||||
fakeDns: { ...fakednsDefaultData },
|
||||
ok() {
|
||||
ObjectUtil.execute(fakednsModal.confirm, fakednsModal.fakeDns);
|
||||
},
|
||||
show({ title = '', okText = '{{ i18n "confirm" }}', fakeDns, confirm = (fakeDns) => { }, isEdit = false }) {
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
this.confirm = confirm;
|
||||
this.visible = true;
|
||||
if (isEdit) {
|
||||
this.fakeDns = fakeDns;
|
||||
} else {
|
||||
this.fakeDns = { ...fakednsDefaultData }
|
||||
}
|
||||
this.isEdit = isEdit;
|
||||
},
|
||||
close() {
|
||||
fakednsModal.visible = false;
|
||||
},
|
||||
};
|
||||
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#fakedns-modal',
|
||||
data: {
|
||||
fakednsModal: fakednsModal,
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
127
web/html/modals/xray_outbound_modal.html
Normal file
127
web/html/modals/xray_outbound_modal.html
Normal file
@@ -0,0 +1,127 @@
|
||||
{{define "modals/outModal"}}
|
||||
<a-modal id="out-modal" v-model="outModal.visible" :title="outModal.title" @ok="outModal.ok"
|
||||
:confirm-loading="outModal.confirmLoading" :closable="true" :mask-closable="false"
|
||||
:ok-button-props="{ props: { disabled: !outModal.isValid } }" :style="{ overflow: 'hidden' }"
|
||||
:ok-text="outModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
|
||||
{{template "form/outbound"}}
|
||||
</a-modal>
|
||||
<script>
|
||||
|
||||
const outModal = {
|
||||
title: '',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
okText: '{{ i18n "sure" }}',
|
||||
isEdit: false,
|
||||
confirm: null,
|
||||
outbound: new Outbound(),
|
||||
jsonMode: false,
|
||||
link: '',
|
||||
cm: null,
|
||||
duplicateTag: false,
|
||||
isValid: true,
|
||||
activeKey: '1',
|
||||
tags: [],
|
||||
ok() {
|
||||
ObjectUtil.execute(outModal.confirm, outModal.outbound.toJson());
|
||||
},
|
||||
show({ title='', okText='{{ i18n "sure" }}', outbound, confirm=(outbound)=>{}, isEdit=false, tags=[] }) {
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
this.confirm = confirm;
|
||||
this.jsonMode = false;
|
||||
this.link = '';
|
||||
this.activeKey = '1';
|
||||
this.visible = true;
|
||||
this.outbound = isEdit ? Outbound.fromJson(outbound) : new Outbound();
|
||||
this.isEdit = isEdit;
|
||||
this.tags = tags;
|
||||
this.check()
|
||||
},
|
||||
close() {
|
||||
outModal.visible = false;
|
||||
outModal.loading(false);
|
||||
},
|
||||
loading(loading=true) {
|
||||
outModal.confirmLoading = loading;
|
||||
},
|
||||
check(){
|
||||
if(outModal.outbound.tag == '' || outModal.tags.includes(outModal.outbound.tag)){
|
||||
this.duplicateTag = true;
|
||||
this.isValid = false;
|
||||
} else {
|
||||
this.duplicateTag = false;
|
||||
this.isValid = true;
|
||||
}
|
||||
},
|
||||
toggleJson(jsonTab) {
|
||||
textAreaObj = document.getElementById('outboundJson');
|
||||
if(jsonTab){
|
||||
if(this.cm != null) {
|
||||
this.cm.toTextArea();
|
||||
this.cm=null;
|
||||
}
|
||||
textAreaObj.value = JSON.stringify(this.outbound.toJson(), null, 2);
|
||||
this.cm = CodeMirror.fromTextArea(textAreaObj, app.cmOptions);
|
||||
this.cm.on('change',editor => {
|
||||
value = editor.getValue();
|
||||
if(this.isJsonString(value)){
|
||||
this.outbound = Outbound.fromJson(JSON.parse(value));
|
||||
this.check();
|
||||
}
|
||||
});
|
||||
this.activeKey = '2';
|
||||
} else {
|
||||
if(this.cm != null) {
|
||||
this.cm.toTextArea();
|
||||
this.cm=null;
|
||||
}
|
||||
this.activeKey = '1';
|
||||
}
|
||||
},
|
||||
isJsonString(str) {
|
||||
try {
|
||||
JSON.parse(str);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
};
|
||||
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#out-modal',
|
||||
data: {
|
||||
outModal: outModal,
|
||||
get outbound() {
|
||||
return outModal.outbound;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
streamNetworkChange() {
|
||||
if (this.outModal.outbound.protocol == Protocols.VLESS && !outModal.outbound.canEnableTlsFlow()) {
|
||||
delete this.outModal.outbound.settings.flow;
|
||||
}
|
||||
},
|
||||
canEnableTls() {
|
||||
return this.outModal.outbound.canEnableTls();
|
||||
},
|
||||
convertLink(){
|
||||
newOutbound = Outbound.fromLink(outModal.link);
|
||||
if(newOutbound){
|
||||
this.outModal.outbound = newOutbound;
|
||||
this.outModal.toggleJson(true);
|
||||
this.outModal.check();
|
||||
this.$message.success('Link imported successfully...');
|
||||
outModal.link = '';
|
||||
} else {
|
||||
this.$message.error('Wrong Link!');
|
||||
outModal.link = '';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
138
web/html/modals/xray_reverse_modal.html
Normal file
138
web/html/modals/xray_reverse_modal.html
Normal file
@@ -0,0 +1,138 @@
|
||||
{{define "modals/reverseModal"}}
|
||||
<a-modal id="reverse-modal" v-model="reverseModal.visible" :title="reverseModal.title" @ok="reverseModal.ok"
|
||||
:confirm-loading="reverseModal.confirmLoading" :closable="true" :mask-closable="false"
|
||||
:ok-text="reverseModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
|
||||
<a-select v-model="reverseModal.reverse.type" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="x,y in reverseTypes" :value="y">[[ x ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.tag" }}'>
|
||||
<a-input v-model.trim="reverseModal.reverse.tag"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.domain" }}'>
|
||||
<a-input v-model.trim="reverseModal.reverse.domain"></a-input>
|
||||
</a-form-item>
|
||||
<template v-if="reverseModal.reverse.type=='bridge'">
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
|
||||
<a-select v-model="reverseModal.rules[0].outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.rules.outbound" }}'>
|
||||
<a-select v-model="reverseModal.rules[1].outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
|
||||
<a-checkbox-group
|
||||
v-model="reverseModal.rules[0].inboundTag"
|
||||
:options="reverseModal.inboundTags"></a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.rules.inbound" }}'>
|
||||
<a-checkbox-group
|
||||
v-model="reverseModal.rules[1].inboundTag"
|
||||
:options="reverseModal.inboundTags"></a-checkbox-group>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<script>
|
||||
const reverseModal = {
|
||||
title: '',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
okText: '{{ i18n "sure" }}',
|
||||
isEdit: false,
|
||||
confirm: null,
|
||||
reverse: {
|
||||
tag: "",
|
||||
type: "",
|
||||
domain: ""
|
||||
},
|
||||
rules: [
|
||||
{ outboundTag: '', inboundTag: []},
|
||||
{ outboundTag: '', inboundTag: []}
|
||||
],
|
||||
inboundTags: [],
|
||||
outboundTags: [],
|
||||
ok() {
|
||||
reverseModal.rules[0].domain = ["full:" + reverseModal.reverse.domain];
|
||||
reverseModal.rules[0].type = 'field';
|
||||
reverseModal.rules[1].type = 'field';
|
||||
|
||||
if(reverseModal.reverse.type == 'bridge'){
|
||||
reverseModal.rules[0].inboundTag = [reverseModal.reverse.tag];
|
||||
reverseModal.rules[1].inboundTag = [reverseModal.reverse.tag];
|
||||
} else {
|
||||
reverseModal.rules[0].outboundTag = reverseModal.reverse.tag;
|
||||
reverseModal.rules[1].outboundTag = reverseModal.reverse.tag;
|
||||
}
|
||||
ObjectUtil.execute(reverseModal.confirm, reverseModal.reverse, reverseModal.rules);
|
||||
},
|
||||
show({ title='', okText='{{ i18n "sure" }}', reverse, rules, confirm=(reverse, rules)=>{}, isEdit=false }) {
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
this.confirm = confirm;
|
||||
this.visible = true;
|
||||
if(isEdit) {
|
||||
this.reverse = {
|
||||
tag: reverse.tag,
|
||||
type: reverse.type,
|
||||
domain: reverse.domain,
|
||||
};
|
||||
reverse;
|
||||
rules0 = rules.filter(r => r.domain != null);
|
||||
if(rules0.length == 0) rules0 = [{ outboundTag: '', domain: ["full:" + this.reverse.domain], inboundTag: []}];
|
||||
rules1 = rules.filter(r => r.domain == null);
|
||||
if(rules1.length == 0) rules1 = [{ outboundTag: '', inboundTag: []}];
|
||||
this.rules = [];
|
||||
this.rules.push({
|
||||
domain: rules0[0].domain,
|
||||
outboundTag: rules0[0].outboundTag,
|
||||
inboundTag: rules0.map(r => r.inboundTag).flat()
|
||||
});
|
||||
this.rules.push({
|
||||
outboundTag: rules1[0].outboundTag,
|
||||
inboundTag: rules1.map(r => r.inboundTag).flat()
|
||||
});
|
||||
} else {
|
||||
this.reverse = {
|
||||
tag: "reverse-" + app.reverseData.length,
|
||||
type: "bridge",
|
||||
domain: "reverse.xui"
|
||||
}
|
||||
this.rules = [
|
||||
{ outboundTag: '', inboundTag: []},
|
||||
{ outboundTag: '', inboundTag: []}
|
||||
]
|
||||
}
|
||||
this.isEdit = isEdit;
|
||||
this.inboundTags = app.templateSettings.inbounds.filter((i) => !ObjectUtil.isEmpty(i.tag)).map(obj => obj.tag);
|
||||
this.inboundTags.push(...app.inboundTags);
|
||||
if (app.enableDNS && !ObjectUtil.isEmpty(app.dnsTag)) this.inboundTags.push(app.dnsTag)
|
||||
this.outboundTags = app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag);
|
||||
},
|
||||
close() {
|
||||
reverseModal.visible = false;
|
||||
reverseModal.loading(false);
|
||||
},
|
||||
loading(loading=true) {
|
||||
reverseModal.confirmLoading = loading;
|
||||
},
|
||||
};
|
||||
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#reverse-modal',
|
||||
data: {
|
||||
reverseModal: reverseModal,
|
||||
reverseTypes: { bridge: '{{ i18n "pages.xray.outbound.bridge" }}', portal:'{{ i18n "pages.xray.outbound.portal" }}'},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
237
web/html/modals/xray_rule_modal.html
Normal file
237
web/html/modals/xray_rule_modal.html
Normal file
@@ -0,0 +1,237 @@
|
||||
{{define "modals/ruleModal"}}
|
||||
<a-modal id="rule-modal" v-model="ruleModal.visible" :title="ruleModal.title" @ok="ruleModal.ok" :confirm-loading="ruleModal.confirmLoading" :closable="true" :mask-closable="false" :ok-text="ruleModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
|
||||
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.rules.useComma" }}</span>
|
||||
</template> {{ i18n "pages.xray.rules.SourceIPs" }} <a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="ruleModal.rule.sourceIP"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.rules.useComma" }}</span>
|
||||
</template> {{ i18n "pages.xray.rules.SourcePort" }} <a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="ruleModal.rule.sourcePort"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.rules.Network" }}'>
|
||||
<a-select v-model="ruleModal.rule.network" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="x in ['','TCP','UDP','TCP,UDP']" :value="x">[[ x ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.rules.Protocol" }}'>
|
||||
<a-select v-model="ruleModal.rule.protocol" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="x in ['http','tls','bittorrent','quic']" :value="x">[[ x ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.rules.Attributes" }}'>
|
||||
<a-button icon="plus" size="small" :style="{ marginLeft: '10px' }" @click="ruleModal.rule.attrs.push(['', ''])"></a-button>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{span: 24}">
|
||||
<a-input-group compact v-for="(attr,index) in ruleModal.rule.attrs">
|
||||
<a-input :style="{ width: '50%' }" v-model="attr[0]" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
|
||||
<template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
|
||||
</a-input>
|
||||
<a-input :style="{ width: '50%' }" v-model="attr[1]" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
|
||||
<a-button icon="minus" slot="addonAfter" size="small" @click="ruleModal.rule.attrs.splice(index,1)"></a-button>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.rules.useComma" }}</span>
|
||||
</template> IP <a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="ruleModal.rule.ip"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.rules.useComma" }}</span>
|
||||
</template> {{ i18n "pages.xray.rules.Domain" }} <a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="ruleModal.rule.domain"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.rules.useComma" }}</span>
|
||||
</template> {{ i18n "pages.xray.rules.User" }} <a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="ruleModal.rule.user"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.rules.useComma" }}</span>
|
||||
</template> {{ i18n "pages.xray.rules.Port" }} <a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model.trim="ruleModal.rule.port"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.rules.InboundTag" }}'>
|
||||
<a-select v-model="ruleModal.rule.inboundTag" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.rules.OutboundTag" }}'>
|
||||
<a-select v-model="ruleModal.rule.outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template slot="label">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<span>{{ i18n "pages.xray.balancer.balancerDesc" }}</span>
|
||||
</template> {{ i18n "pages.xray.rules.BalancerTag" }} <a-icon type="question-circle"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-select v-model="ruleModal.rule.balancerTag" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="tag in ruleModal.balancerTags" :value="tag">[[ tag ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<script>
|
||||
const ruleModal = {
|
||||
title: '',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
okText: '{{ i18n "sure" }}',
|
||||
isEdit: false,
|
||||
confirm: null,
|
||||
rule: {
|
||||
type: "field",
|
||||
domain: "",
|
||||
ip: "",
|
||||
port: "",
|
||||
sourcePort: "",
|
||||
network: "",
|
||||
sourceIP: "",
|
||||
user: "",
|
||||
inboundTag: [],
|
||||
protocol: [],
|
||||
attrs: [],
|
||||
outboundTag: "",
|
||||
balancerTag: "",
|
||||
},
|
||||
inboundTags: [],
|
||||
outboundTags: [],
|
||||
users: [],
|
||||
balancerTags: [],
|
||||
ok() {
|
||||
newRule = ruleModal.getResult();
|
||||
ObjectUtil.execute(ruleModal.confirm, newRule);
|
||||
},
|
||||
show({
|
||||
title = '',
|
||||
okText = '{{ i18n "sure" }}',
|
||||
rule,
|
||||
confirm = (rule) => {},
|
||||
isEdit = false
|
||||
}) {
|
||||
this.title = title;
|
||||
this.okText = okText;
|
||||
this.confirm = confirm;
|
||||
this.visible = true;
|
||||
if (isEdit) {
|
||||
this.rule.domain = rule.domain ? rule.domain.join(',') : [];
|
||||
this.rule.ip = rule.ip ? rule.ip.join(',') : [];
|
||||
this.rule.port = rule.port;
|
||||
this.rule.sourcePort = rule.sourcePort;
|
||||
this.rule.network = rule.network;
|
||||
this.rule.sourceIP = rule.sourceIP ? rule.sourceIP.join(',') : [];
|
||||
this.rule.user = rule.user ? rule.user.join(',') : [];
|
||||
this.rule.inboundTag = rule.inboundTag;
|
||||
this.rule.protocol = rule.protocol;
|
||||
this.rule.attrs = rule.attrs ? Object.entries(rule.attrs) : [];
|
||||
this.rule.outboundTag = rule.outboundTag;
|
||||
this.rule.balancerTag = rule.balancerTag ? rule.balancerTag : "";
|
||||
} else {
|
||||
this.rule = {
|
||||
domain: "",
|
||||
ip: "",
|
||||
port: "",
|
||||
sourcePort: "",
|
||||
network: "",
|
||||
sourceIP: "",
|
||||
user: "",
|
||||
inboundTag: [],
|
||||
protocol: [],
|
||||
attrs: [],
|
||||
outboundTag: "",
|
||||
balancerTag: "",
|
||||
}
|
||||
}
|
||||
this.isEdit = isEdit;
|
||||
this.inboundTags = app.templateSettings.inbounds.filter((i) => !ObjectUtil.isEmpty(i.tag)).map(obj => obj.tag);
|
||||
this.inboundTags.push(...app.inboundTags);
|
||||
if (app.enableDNS && !ObjectUtil.isEmpty(app.dnsTag)) this.inboundTags.push(app.dnsTag)
|
||||
this.outboundTags = ["", ...app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag)];
|
||||
if (app.templateSettings.reverse) {
|
||||
if (app.templateSettings.reverse.bridges) {
|
||||
this.inboundTags.push(...app.templateSettings.reverse.bridges.map(b => b.tag));
|
||||
}
|
||||
if (app.templateSettings.reverse.portals) this.outboundTags.push(...app.templateSettings.reverse.portals.map(b => b.tag));
|
||||
}
|
||||
if (app.templateSettings.routing && app.templateSettings.routing.balancers) {
|
||||
this.balancerTags = ["", ...app.templateSettings.routing.balancers.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag)];
|
||||
}
|
||||
},
|
||||
close() {
|
||||
ruleModal.visible = false;
|
||||
ruleModal.loading(false);
|
||||
},
|
||||
loading(loading = true) {
|
||||
ruleModal.confirmLoading = loading;
|
||||
},
|
||||
getResult() {
|
||||
value = ruleModal.rule;
|
||||
rule = {};
|
||||
newRule = {};
|
||||
rule.type = "field";
|
||||
rule.domain = value.domain.length > 0 ? value.domain.split(',').map(s => s.trim()) : [];
|
||||
rule.ip = value.ip.length > 0 ? value.ip.split(',').map(s => s.trim()) : [];
|
||||
rule.port = value.port;
|
||||
rule.sourcePort = value.sourcePort;
|
||||
rule.network = value.network;
|
||||
rule.sourceIP = value.sourceIP.length > 0 ? value.sourceIP.split(',').map(s => s.trim()) : [];
|
||||
rule.user = value.user.length > 0 ? value.user.split(',').map(s => s.trim()) : [];
|
||||
rule.inboundTag = value.inboundTag;
|
||||
rule.protocol = value.protocol;
|
||||
rule.attrs = Object.fromEntries(value.attrs);
|
||||
rule.outboundTag = value.outboundTag == "" ? undefined : value.outboundTag;
|
||||
rule.balancerTag = value.balancerTag == "" ? undefined : value.balancerTag;
|
||||
for (const [key, value] of Object.entries(rule)) {
|
||||
if (value !== null && value !== undefined && !(Array.isArray(value) && value.length === 0) && !(typeof value === 'object' && Object.keys(value).length === 0) && value !== '') {
|
||||
newRule[key] = value;
|
||||
}
|
||||
}
|
||||
return newRule;
|
||||
}
|
||||
};
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#rule-modal',
|
||||
data: {
|
||||
ruleModal: ruleModal,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
428
web/html/navigation.html
Normal file
428
web/html/navigation.html
Normal file
@@ -0,0 +1,428 @@
|
||||
{{ template "page/head_start" .}}
|
||||
<style>
|
||||
/*
|
||||
样式优化：强制选项卡铺满主区域并等宽显示
|
||||
- display: flex; 使其成为弹性容器
|
||||
- flex-grow: 1; 让每个选项卡平均分配可用空间
|
||||
*/
|
||||
.ant-tabs-bar {
|
||||
margin: 0;
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 新增规则：强制 .ant-tabs-nav-wrap 参与弹性布局，这是解决问题的关键 */
|
||||
.ant-tabs-nav-wrap {
|
||||
display: flex !important;
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
/* 优化选项卡导航的flexbox布局，确保等宽显示 */
|
||||
.ant-tabs-nav {
|
||||
width: 100%;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* 为选项卡内部添加内边距和文字大小调整 */
|
||||
.ant-tabs-tab {
|
||||
flex: 1 !important; /* 新增规则：强制选项卡等宽显示 */
|
||||
text-align: center;
|
||||
padding: 0 16px;
|
||||
font-size: 18px; /* 增大选项卡文字大小 */
|
||||
}
|
||||
|
||||
/* 为选项卡图标和文字之间添加间距 */
|
||||
.ant-tabs-tab .anticon + span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
根据 settings.html 文件的布局，为内容区设置 16px 的左右间距，
|
||||
使其与侧边栏保持一致。
|
||||
*/
|
||||
#content-layout .ant-layout-content {
|
||||
max-width: 1200px;
|
||||
padding-top: 0 !important; /* 强制移除顶部的间距 */
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
为选项卡和内容卡片之间添加一个合适的间隙。
|
||||
使用 margin-top 和 padding 调整卡片的位置和内部空间。
|
||||
*/
|
||||
.tab-content-pane {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.tab-content-pane .ant-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
确保文本颜色继承父元素，以兼容不同主题
|
||||
（如：暗色主题下文本变为白色）
|
||||
*/
|
||||
.tab-content-pane h2,
|
||||
.tab-content-pane p,
|
||||
.tab-content-pane strong,
|
||||
.tab-content-pane ol,
|
||||
.tab-content-pane ul,
|
||||
.tab-content-pane li,
|
||||
.tab-content-pane code {
|
||||
color: inherit !important; /* 强制继承父元素的颜色 */
|
||||
}
|
||||
|
||||
/* 确保链接文字在任何主题下都显示为蓝色，以保持一致的视觉识别 */
|
||||
.tab-content-pane a {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
.tab-content-pane a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 调整 p 标签字体大小，使其更易于阅读。*/
|
||||
#content-layout .tab-content-pane p {
|
||||
line-height: 1.8;
|
||||
font-size: 18px !important;
|
||||
margin-bottom: 1.5em; /* 为段落添加底部外边距 */
|
||||
}
|
||||
|
||||
/* 修复列表文字大小和行高问题 */
|
||||
.tab-content-pane ol, .tab-content-pane ul {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.tab-content-pane ol li, .tab-content-pane ul li {
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.8;
|
||||
font-size: 15px; /* 调整列表项字体大小 */
|
||||
}
|
||||
</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="false">
|
||||
<a-tabs v-model="activeKey">
|
||||
<a-tab-pane key="1">
|
||||
<template #tab>
|
||||
<a-icon type="tool"></a-icon>
|
||||
<span>有用技巧</span>
|
||||
</template>
|
||||
<div class="tab-content-pane">
|
||||
<a-card>
|
||||
<h2>一、〔X-Panel面板〕交流群与安装教程</h2>
|
||||
<br>
|
||||
<p><a href="https://t.me/XUI_CN" target="_blank">点击加入〔X-Panel面板〕交流群：https://t.me/XUI_CN</a></p>
|
||||
<p><a href="https://xeefei.blogspot.com/2025/09/x-panel.html" target="_blank">详细安装流程步骤：https://xeefei.blogspot.com/2025/09/x-panel.html</a></p>
|
||||
<br>
|
||||
|
||||
<h2>二、判断VPS服务器的IP是否“送中”及解决方法</h2>
|
||||
<ol>
|
||||
<li><strong>判断方法：</strong></li>
|
||||
<li>点击打开 <a href="https://music.youtube.com/" target="_blank">https://music.youtube.com/</a>，能正常访问，代表没“送中”，反之就是“送中”了。</li>
|
||||
<li><strong>如果送中了如何解决去【拉回来】？解决方法：</strong></li>
|
||||
<li>关闭/取消登录了谷歌账户的APP定位权限/授权；</li>
|
||||
<li>将常用的一个谷歌账号的位置记录功能打开；</li>
|
||||
<li>打开谷歌浏览器，登录开了位置记录功能的谷歌账号，并安装 <a href="https://chrome.google.com/webstore/detail/location-guard/cfohepagpmnodfdmjliccbbigdkfcgia" target="_blank">Location Guard</a> 扩展插件；</li>
|
||||
<li>打开Location Guard插件，选择Fixed Location，并在给出的地图上单击，即可标记上你想要IP所处的国家/地区 Google IP定位错误，使用Location Guard修改；</li>
|
||||
<li>转换到Options选项，Default level默认设置为Use fixed location；</li>
|
||||
<li>访问 <a href="打开谷歌地图google.com/maps，点击右下角定位授权图标，使google" target="_blank">谷歌地图服务</a> 获取当前GPS位置，确认是否已修改成功；</li>
|
||||
<li>谷歌搜索my ip，即可看到谷歌IP定位到了刚才地图上标记的位置；</li>
|
||||
<li>最后，通过 <a href="https://support.google.com/websearch/workflow/9308722" target="_blank">此网页向谷歌报告IP问题</a>。</li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<h2>三、在VPS服务器部署“订阅转换”功能</h2>
|
||||
<ol>
|
||||
<li><strong>操作步骤：：</strong> </li>
|
||||
<li>进入脚本输入x-ui命令调取面板，选择第【25】选项安装订阅转换模块；</li>
|
||||
<li>等待安装【订阅转换】成功之后，访问地址：<code>https://你的域名:15268</code> ；</li>
|
||||
<li>因为在转换过程中需要调取后端API，所以请确保端口 8000 和 15268 是打开放行的；</li>
|
||||
<li>直接复制脚本中提供的【登录地址】，进入后台，点击【节点列表】----->>>【添加节点】；</li>
|
||||
<li>接下来点击左边侧边栏的【订阅列表】去【添加订阅】；</li>
|
||||
<li>最后一步，点击【客户端】，即可导入Clash等软件中使用；</li>
|
||||
<li>此功能集成到〔X-Panel面板〕中，是为了保证安全，不会造成链接泄露。</li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<h2>四、如何保护自己的IP不被封锁被墙掉？</h2>
|
||||
<ol>
|
||||
<li><strong>使用安全代理协议：：</strong> 加密是必备，推荐使用vless+reality+vision协议组合；</li>
|
||||
<li><strong>避免共享节点：：</strong> 尽量不要在不同的地区，多个省份之间不要共同连接同一个IP；</li>
|
||||
<li><strong>隔离IP和端口：：</strong> 避免多个用户或设备在不同地理位置漫游时使用同一个IP和端口，要分开；</li>
|
||||
<li><strong>控制流量：：</strong> 不要在单台VPS上长时间进行大流量下载，在一天内不要流量过高，适时切换节点；</li>
|
||||
<li><strong>使用高位端口：：</strong> 创建入站时，尽量使用 40000 至 65000 之间的高位端口号。</li>
|
||||
<li><strong>核心总结：：</strong> 不要多终端、多省份、多朋友共同使用同一个IP和端口。多创建几个入站，各用各的，避免被 GFW 识别为机场特征。
|
||||
使用〔X-Panel面板〕多创建几个【入站】， 多做几条备用，各用各的！各行其道才比较安全！
|
||||
GFW的思维模式是干掉机场，机场的特征个人用户不要去沾染，自然IP就保护好了。</li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<h2>五、检测IP纯净度</h2>
|
||||
<p>访问 <a href="https://scamalytics.com/" target="_blank">https://scamalytics.com/</a>，输入IP检测欺诈分数，分数越高代表IP越“脏”。</p>
|
||||
<br>
|
||||
|
||||
<h2>六、查看指定端口的网络连接数</h2>
|
||||
<p><strong>Linux 命令：</strong><br>
|
||||
<code>netstat -ntu | grep :节点端口 | grep ESTABLISHED | awk '{print $5}'</code></p>
|
||||
<br>
|
||||
|
||||
<h2>七、如何用 X-Panel 实现“自己偷自己”？</h2>
|
||||
<ol>
|
||||
<li><strong>其实很简单，只要你为面板设置了证书， 开启了HTTPS登录，就可以将〔X-Panel面板〕自身作为web server， 无需Nginx等；</strong></li>
|
||||
<li><strong>这里给一个示例： 其中目标网站（Dest）请填写面板监听端口；</strong></li>
|
||||
<li><strong>可选域名（SNI）填写面板登录域名， 如果您使用其他web server（如nginx）等， 将目标网站改为对应监听端口也可；</strong></li>
|
||||
<li><strong>注意：需要说明的是，如果您处于白名单地区，自己“偷”自己并不适合你；</strong></li>
|
||||
<li><strong>可选域名一项实际上可以填写任意SNI，只要客户端保持一致即可，不过并不推荐这样做。</strong></li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<h2>八、项目声明与注意</h2>
|
||||
<br>
|
||||
<ol>
|
||||
<li><strong>声明：</strong> 此项目仅供个人学习、交流使用，请遵守当地法律法规，勿用于非法用途；请勿用于生产环境。</li>
|
||||
<li><strong>注意：</strong> 在使用此项目和〔教程〕过程中，若因违反以上声明使用规则而产生的一切后果由使用者自负。</li>
|
||||
</ol>
|
||||
<br>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="2">
|
||||
<template #tab>
|
||||
<a-icon type="wallet"></a-icon>
|
||||
<span>推广赞助</span>
|
||||
</template>
|
||||
<div class="tab-content-pane">
|
||||
<a-card>
|
||||
<h2>一、若此项目对你有帮助，可以考虑通过以下链接购买VPS：</h2>
|
||||
<br>
|
||||
<ol>
|
||||
<li><strong>搬瓦工GIA线路：</strong> <a href="https://bandwagonhost.com/aff.php?aff=75015" target="_blank">https://bandwagonhost.com/aff.php?aff=75015</a></li>
|
||||
<li><strong>Dmit高端GIA机：</strong> <a href="https://www.dmit.io/aff.php?aff=9326" target="_blank">https://www.dmit.io/aff.php?aff=9326</a></li>
|
||||
<li><strong>Gomami亚太顶尖优化线路：</strong> <a href="https://gomami.io/aff.php?aff=174" target="_blank">https://gomami.io/aff.php?aff=174</a></li>
|
||||
<li><strong>ISIF优质亚太优化线路：</strong> <a href="https://cloud.isif.net/login?affiliation_code=333" target="_blank">https://cloud.isif.net/login?affiliation_code=333</a></li>
|
||||
<li><strong>ZoroCloud全球优质原生家宽&住宅双lSP，跨境首选：</strong> <a href="https://my.zorocloud.com/aff.php?aff=1072" target="_blank">https://my.zorocloud.com/aff.php?aff=1072</a></li>
|
||||
<li><strong>三网直连 IEPL / IPLC 直播流量转发：</strong> <a href="https://idc333.top/#register/BCUZXNELNO" target="_blank">https://idc333.top/#register/BCUZXNELNO</a></li>
|
||||
<li><strong>Bagevm优质落地鸡（原生IP全解锁）：</strong> <a href="https://www.bagevm.com/aff.php?aff=754" target="_blank">https://www.bagevm.com/aff.php?aff=754</a></li>
|
||||
<li><strong>白丝云【4837】量大管饱：</strong> <a href="https://cloudsilk.io/aff.php?aff=706" target="_blank">https://cloudsilk.io/aff.php?aff=706</a></li>
|
||||
<li><strong>RackNerd极致性价比机器：</strong> <a href="https://my.racknerd.com/aff.php?aff=15268&pid=912" target="_blank">https://my.racknerd.com/aff.php?aff=15268&pid=912</a></li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<h2>二、项目相关</h2>
|
||||
<br>
|
||||
<p><a href="https://t.me/is_Chat_Bot" target="_blank">--->合作咨询请联系作者<---</a></p>
|
||||
<p><a href="https://github.com/xeefei/x-panel" target="_blank">〔X-Panel面板〕项目地址</a></p>
|
||||
<br>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="3">
|
||||
<template #tab>
|
||||
<a-icon type="crown"></a-icon>
|
||||
<span>〔X-Panel-Pro 面板〕介绍</span>
|
||||
</template>
|
||||
<div class="tab-content-pane">
|
||||
<a-card>
|
||||
<h2>一、关于【Pro版】的“收费说明”</h2>
|
||||
<ol>
|
||||
<li><strong>【授权码】目前定价：</strong> 100RMB 或 15U 一个，一机一码，不能重复用于不同机器 VPS，后期视情况不定时会上涨价格；对于〔X-Panel 面板〕后期的“新功能”，都将在【付费Pro版】中进行更新。</li>
|
||||
<li><strong>目前的【安装界面】：</strong> 有两种可选，“免费基础版”一样可用，只是后期不再提供技术支持和重大更新，另外，在【免费基础版】中，【一键配置】功能将不再可用，全部放到了【付费Pro版】中。</li>
|
||||
<li><strong>后期的开发精力：</strong> 全部会放到【付费Pro版】中，免费基础版不删库，持续保留，会大幅降低更新频率，后期只会同步更新 Xray 那边的【内核版本】等基础，想继续用的不影响，只是没有【新功能】可用，翻墙也足够。</li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<h2>二、〔付费Pro版〕已实现的功能</h2>
|
||||
<ol>
|
||||
<li><strong>新增 -【付费Pro版】的面板后台UI：</strong> 添加醒目的“X-Panel-Pro”标识；</li>
|
||||
<li><strong>优化 -【付费Pro版】TG端 【版本更新】提示功能：</strong> 增加详细的“更新说明”；</li>
|
||||
<li><strong>增加 -〔Pro版面板后台〕：</strong> 使用 Reality 协议时，可点击“随机更换”所偷的域名；</li>
|
||||
<li><strong>新增 - 【付费Pro版】TG端 的【发送授权报告】：</strong> 增加“唯一授权防伪码”；</li>
|
||||
<li><strong>优化 -【付费Pro版】安装脚本界面：</strong> 增加【Pro版】该有的“明确标识”；</li>
|
||||
<li><strong>优化 -【付费Pro版】TG端的显示方式：</strong> 增加该有的“会员标识”；</li>
|
||||
<li><strong>新增 -【付费Pro版】安装脚本：</strong> 有“网页版SSH工具”可选部署，脚本中〔第26选项〕；</li>
|
||||
<li><strong>新增 - 【付费Pro版】安装脚本：</strong> 有“线路和IP质量检测”可去使用，脚本中〔第27选项〕；</li>
|
||||
<li><strong>新增 - 【付费Pro版】安装脚本：</strong> 有“地区服务器DNS检测”可去使用，脚本中〔第28选项〕；</li>
|
||||
<li><strong>新增 -【付费Pro版】---->>>TG端：</strong> 同步有“网页版SSH工具”可选安装；</li>
|
||||
<li><strong>优化 - 【付费Pro版】---->>>TG端：</strong> 点击“服务器状态”时的“版本号显示”；</li>
|
||||
<li><strong>说明 - 【付费Pro版】TG端中：</strong> 使用命令：/webssh，安装“网页版SSH”；</li>
|
||||
<li><strong>优化 -〔Pro版〕中的〔一键配置〕功能：</strong> 有更友好的提示方式；</li>
|
||||
<li><strong>新增 -【付费Pro版】---->>>面板后台的【首页 UI】：</strong> 目前是有“5种”可选：标准布局 (默认)，炫彩动画，深海科技，暮光薰衣，和幽林秘境；你喜欢什么类型的主题，就去点击“选定”之后，就不会自动变了，若后期需要更换，就重选；</li>
|
||||
<li><strong>新增 -【付费Pro版】---->>>在“创建入站”时：</strong> 可以在页面上更加方便地选择【重置流量】的方式：有每日重置，每周重置，按月重置，或从不重置；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】TG端“每日报告”：</strong> 可定制【发送内容】，自己可点击“打开或关闭”，并且可以选择【发送时间】，可按天，或者每周，每月发；</li>
|
||||
<li><strong>优化 -【付费Pro版】的“授权码验证机制”：</strong> 增加【后台联网验证】，以及“机器指纹”等属性；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】TG端“多面板管理”：</strong> 一个机器人可同时管理其他面板，可以很丝滑地远程操作【被控端 VPS】；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】TG端“获取节点链接”功能：</strong> 支持【本机】和【远程被控端 VPS】都能获取，开发此功能的目的在于：不用进〔面板后台〕，就能在 TG端 获取到之前已经创建过的“链接”；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“一键部署中转节点”：</strong> 解决了不懂配置的麻烦，已实现：远程Socks5创建 --> 本机路由配置 --> 本机入口创建 --> 生成“二维码和链接”，“小手一点”，直接可用；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【申请安装证书】“第18选项”：</strong> 有“备用方式申请证书”，当用常规方式【1】申请不下来时，可以试试“备用方式5”；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【申请安装证书】“第18选项”：</strong> 有“可自定义证书路径”，自己进入 VPS 中“手动上传证书”，复制路径，在脚本中填入即可；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“深度调优脚本”：</strong> 包含 BBR+FQ, TCP Fast Open, 内存缓冲区及队列优化，在〔Pro版〕脚本中“第29选项”可直接用；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“首页会员等级”显示：</strong> 能够明确展示：自己的会员等级，授权码信息，以及“版本更新”提示；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“节点上/下线TG通知”功能：</strong> 对于【拼车】的宝子，能明确知道：哪个节点，什么时候上线？或者下线时间，做到“心中有数”；</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“TG端 签到得积分”功能：</strong> 后期针对有【积分】的宝子，会不断推出：相应的【特权】和【福利待遇】，</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“TG端 积分多重功能”；推出：</strong> 积分查询，积分换购，授权码查询，修改用户名，积分转移/打赏，以及“积分排行榜”，</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“TG端签到得积分”功能，推出【“积分换购”的可用功能】：</strong> A、消耗1000积分“自助重置换绑时间”，B、消耗5000积分“自助换购一个普通授权码”，</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“远程备份 + 急救还原”功能：</strong> 面板报错“崩了”，不用像之前那样：卸载面板 -->> 重装面板，更不用很麻烦去“重装系统”解决，直接：远程急救还原，前提就是：你自己要知道，在面板“正常运行”的时候，去「备份数据快照」，</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“每月重置流量”功能：</strong> 可输入1—31之间的任意数字，比如：输入12，即代表“每月12号”「重置入站流量」，以便提供更友好的“重置流量方式”，</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】“批量部署节点”功能：</strong> 可直接在面板后台的“一键配置”中去使用，点击一次可批量部署生成10条「VLESS + TCP + Reality + Vision」协议组合的入站，</li>
|
||||
<li><strong>新增 -〔X-Panel 面板〕----->>【付费Pro版】推出“购买机器人”功能：</strong> 可自助全自动在“机器人”中：购买授权码，增加配额，充值积分，自助重置换绑等，联系：<a href="https://t.me/Buy_ShouQuan_Bot" target="_blank">https://t.me/Buy_ShouQuan_Bot</a></li>
|
||||
</ol>
|
||||
<br>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4">
|
||||
<template #tab>
|
||||
<a-icon type="key"></a-icon>
|
||||
<span>〔授权码〕相关事宜</span>
|
||||
</template>
|
||||
<div class="tab-content-pane">
|
||||
<a-card>
|
||||
<h2>一、“授权码说明”与批量折扣</h2>
|
||||
<p><strong>【授权码】100RMB 或 15U一个，一机一码。</strong><br>
|
||||
包括：重装，后期的升级/更新，都能使用，但是不能重复用于不同的机器。<br>
|
||||
所以推荐稳定使用的机器用【授权码】。<br>
|
||||
注：“授权码”属虚拟商品，购买之后，一经激活生效，概不退款，<br>
|
||||
对于一年期限（年付/年抛）的机器，后期可以【换绑】，<br>
|
||||
为什么要有时间限制？就是为了防止，有些人拿【授权码】滥用。<br>
|
||||
购买方式/渠道联系机器人：<a href="https://t.me/Buy_ShouQuan_Bot" target="_blank">https://t.me/Buy_ShouQuan_Bot</a>
|
||||
</p>
|
||||
<p>经常换的机器，去使用“免费基础版”就行，目前的【安装界面】是有“两种方式”可选择的。</p>
|
||||
<br>
|
||||
|
||||
<h3 style="color: #1890ff;"><strong>【批量授权】折扣（适用于业务需求、Tk、跨境电商等）：</strong></h3>
|
||||
|
||||
<p>若都要用【收费Pro版】的话，可以用【批量授权】，<br>以下列举出来的，就是【批量折扣】的统一“优惠”。<br>注：〔批量授权码〕要求最低5台以上，是“一码通用”，<br>一个“授权码”可以绑定验证多台 VPS 机器，并且有专属的“豹子号”授权码。</p>
|
||||
<ul>
|
||||
<li><strong>5 ——> 20台：</strong> 8折，尾号：5555</li>
|
||||
<li><strong>20 ——> 50台：</strong> 7折，尾号：66666</li>
|
||||
<li><strong>50 ——> 100台：</strong> 6折，尾号：777777</li>
|
||||
<li><strong>100 ——> 200台：</strong> 5折，尾号：8888888</li>
|
||||
<li><strong>200台 ——> 以上：</strong> 4折，尾号：99999999</li>
|
||||
</ul>
|
||||
<br>
|
||||
|
||||
<h2>二、购买赞助方式</h2>
|
||||
<p>1、若您需要购买【授权码】，请跟下面这个“机器人”去对话，</p>
|
||||
<p>———————————————-<br><br>
|
||||
<a href="https://t.me/Buy_ShouQuan_Bot" target="_blank">https://t.me/Buy_ShouQuan_Bot</a><br>
|
||||
（授权码购买机器人）<br><br>
|
||||
———————————————-<br>
|
||||
输入：/start 或 购买，即可“在线下单”，<br><br>
|
||||
2、弹出【购买页面】，选择或输入“数量”，<br>
|
||||
付款了支付系统会收到回调，金额到账之后，<br>
|
||||
就会通过那个机器人【发放授权码】给您，<br>
|
||||
整个流程，是【全自助】的“自动处理”方式，<br>
|
||||
若您是〔增加配额〕，基本也是一样的流程，<br><br>
|
||||
3、请注意：机器人发给您的所有信息，<br>
|
||||
尽量都去自己【耐心阅读】一遍，“使用说明”，<br>
|
||||
以及〔VIP 群〕的信息，也全部都包含在里面的，<br><br>
|
||||
4、按照之前您安装更新〔X-Panel 面板〕的方式，<br>
|
||||
直接重新输入【安装命令】，选择【2】，就能去，<br>
|
||||
把之前的【免费版】，“无缝升级”到最新的【Pro版】。</p>
|
||||
<br>
|
||||
|
||||
<h2>三、关于【授权码】的一些“问题解答”</h2>
|
||||
<br>
|
||||
<p><strong>1、“授权码”的有效期是多久？一直有效吗？能一直用吗？</strong></p>
|
||||
<p>Answer：一直有效，只要不换机器，能一直用，但是，【换绑机器】有“一年时间的冷却期”，<br>“验证系统”会自动从你绑定这个授权码的时候开始计算，自动判断“换绑剩余时间”，<br>如果您等不及一年时间，需要提前【换绑机器】，那就绑定TG机器人，<br>每天“签到拿积分”，可以自己用“积分”去自助重置换绑，只要您有积分，想什么时候换绑随您愿意，<br>意思就是说：现在不限制了，用“1000积分”或者去〔购买机器人〕花20元/次可以“自由换绑”。</p>
|
||||
<br>
|
||||
<p><strong>2、“授权码”都有什么样的？我怎么能得到一个顺一点的“授权码”？</strong></p>
|
||||
<p>Answer：目前的【授权码】，分为：普通授权码，除了开头是“XPANEL”以外，其他完全随机；<br>【批量豹子号授权码】，根据一次性“购买数量”的不同，有相应的“规则”去生成对应不同的“豹子号尾号”，规则是在程序中“写死了的”；<br>并且，不管“普通授权码”，还是“豹子号授权码”，都是“大写字母+数字”的组合，至少24位以上。</p>
|
||||
<br>
|
||||
<p><strong>3、那我的【授权码】怎么才能升级到【豹子号授权码】？</strong></p>
|
||||
<p>Answer：两种方式：另外补足差价购买【豹子号】，或推广卖【授权码】拿“返佣”，<br>因为【批量授权】有折扣力度，所以这个就相当于自己可以拿【配额】出去卖“授权码”。</p>
|
||||
<br>
|
||||
<p><strong>4、为什么有时候重装系统【授权码】会显示“换绑冻结”？</strong></p>
|
||||
<p>Answer：因为【授权码】跟 VPS 机器是绑定在一起的，而这个绑定，<br>识别的是由这台 VPS 机器的“硬件信息”构成的【机器指纹】，这个是唯一的，<br>一般来讲，重装系统，不会导致这个【机器指纹】改变，<br>但是，有的宝子，会存在极少数情况，重装系统之后，这台 VPS 的【机器指纹】变了，导致“授权码”冻结。<br>
|
||||
所以，建议就是：尽量一次性把系统和软件什么的都弄好，既然你这台 VPS 重装系统会变，那只能稳定使用之后，一次性搞好别轻易重装，<br>至于：测试，练手，可以先拿【免费基础版】去搞，熟悉了之后，再从【免费版】“无缝升级”到【Pro版】，所有的“节点数据”都是在的，<br>PS：【授权码验证系统】识别绑定的是“机器指纹”，跟 IP 没有关系，即使 IP 被墙，<br>只要您没有更换机器，换 IP 都不影响；另外，重装系统尽量用 DD脚本 去搞，指纹不会变。</p>
|
||||
<br>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5">
|
||||
<template #tab>
|
||||
<a-icon type="appstore"></a-icon>
|
||||
<span>其他资源</span>
|
||||
</template>
|
||||
<div class="tab-content-pane">
|
||||
<a-card>
|
||||
<h2>一、常见的代理软件/工具</h2>
|
||||
<br>
|
||||
<ol>
|
||||
<li><strong>Windows系统v2rayN:</strong> <a href="https://github.com/2dust/v2rayN" target="_blank">https://github.com/2dust/v2rayN</a></li>
|
||||
<li><strong>安卓手机版【v2rayNG】:</strong> <a href="https://github.com/2dust/v2rayNG" target="_blank">https://github.com/2dust/v2rayNG</a></li>
|
||||
<li><strong>苹果手机IOS【小火箭】:</strong> <a href="https://apple02.com/" target="_blank">https://apple02.com/</a></li>
|
||||
<li><strong>苹果MacOS电脑【Clash Verge】:</strong> <a href="https://github.com/clash-verge-rev/clash-verge-rev/releases" target="_blank">https://github.com/clash-verge-rev/clash-verge-rev/releases</a></li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<h2>二、“接码”网站</h2>
|
||||
<p><a href="https://sms-activate.org/cn" target="_blank">https://sms-activate.org/cn</a>直接注册账号购买，可用于注册各种在线服务。</p>
|
||||
<br>
|
||||
|
||||
<h2>三、常用网站和群组</h2>
|
||||
<br>
|
||||
<ol>
|
||||
<li><strong>NodeSeek 论坛：</strong> <a href="https://www.nodeseek.com/" target="_blank">https://www.nodeseek.com/</a></li>
|
||||
<li><strong>V2EX 论坛：：</strong> <a href="https://www.v2ex.com/" target="_blank">https://www.v2ex.com/</a></li>
|
||||
<li><strong>搬瓦工 TG 群：：</strong> <a href="https://t.me/BWHOfficial" target="_blank">https://t.me/BWHOfficial</a></li>
|
||||
<li><strong>Xray 官方群：：</strong> <a href="https://t.me/projectXray" target="_blank">https://t.me/projectXray</a></li>
|
||||
<li><strong>Dmit 交流群：：</strong> <a href="https://t.me/DmitChat" target="_blank">https://t.me/DmitChat</a></li>
|
||||
<li><strong>白丝云用户群：：</strong> <a href="https://t.me/+VHZLKELTQyzPNgOV" target="_blank">https://t.me/+VHZLKELTQyzPNgOV</a></li>
|
||||
<li><strong>NameSilo 域名注册：：</strong> <a href="https://www.namesilo.com/" target="_blank">https://www.namesilo.com/</a></li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<br>
|
||||
<h2>四、其他内容</h2>
|
||||
<br>
|
||||
<p><a href="https://www.youtube.com/results?search_query=4k%E6%B5%8B%E9%80%9F" target="_blank">油管4K测速：https://www.youtube.com/results?search_query=4k%E6%B5%8B%E9%90%A6</a></p>
|
||||
<p><a href="https://xtls.github.io/" target="_blank">Project X：https://xtls.github.io/</a></p>
|
||||
<p><a href="https://whatismyipaddress.com/" target="_blank">我的IP查询：https://whatismyipaddress.com/</a></p>
|
||||
<p><a href="https://translate.google.com/?hl=zh-CN" target="_blank">Google翻译：https://translate.google.com/?hl=zh-CN</a></p>
|
||||
<br>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-spin>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
|
||||
{{template "page/body_scripts" .}}
|
||||
{{template "component/aSidebar" .}}
|
||||
{{template "component/aThemeSwitch" .}}
|
||||
<script>
|
||||
// 初始化 Vue 应用实例
|
||||
const app = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#app',
|
||||
data: {
|
||||
themeSwitcher, // 确保主题切换器对象在 Vue 实例中可用
|
||||
|
||||
// 【新增】：用于控制当前选中的标签页，默认为 '1'
|
||||
activeKey: '1',
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
// 【新增】：检查 URL 是否带有 ?tab=x 参数
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const tab = urlParams.get('tab');
|
||||
if (tab) {
|
||||
// 如果有参数，就自动切换到对应的标签页 (例如 '3')
|
||||
this.activeKey = tab;
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
{{ template "page/body_end" .}}
|
||||
509
web/html/servers.html
Normal file
509
web/html/servers.html
Normal file
@@ -0,0 +1,509 @@
|
||||
{{ 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" .}}
|
||||
612
web/html/settings.html
Normal file
612
web/html/settings.html
Normal file
@@ -0,0 +1,612 @@
|
||||
{{ template "page/head_start" .}}
|
||||
<style>
|
||||
@media (min-width: 769px) {
|
||||
.ant-layout-content {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.ant-tabs-nav .ant-tabs-tab {
|
||||
margin: 0;
|
||||
padding: 12px .5rem;
|
||||
}
|
||||
}
|
||||
.ant-tabs-bar {
|
||||
margin: 0;
|
||||
}
|
||||
.ant-list-item {
|
||||
display: block;
|
||||
}
|
||||
.alert-msg {
|
||||
color: rgb(194, 117, 18);
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
padding: .5rem 1rem;
|
||||
text-align: center;
|
||||
background: rgb(255 145 0 / 15%);
|
||||
margin: 1.5rem 2.5rem 0rem;
|
||||
border-radius: .5rem;
|
||||
transition: all 0.5s;
|
||||
animation: signal 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
|
||||
}
|
||||
.alert-msg:hover {
|
||||
cursor: default;
|
||||
transition-duration: .3s;
|
||||
animation: signal 0.9s ease infinite;
|
||||
}
|
||||
@keyframes signal {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(194, 118, 18, 0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
.alert-msg>i {
|
||||
color: inherit;
|
||||
font-size: 24px;
|
||||
}
|
||||
.dark .ant-input-password-icon {
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
.ant-collapse-content-box .ant-alert {
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
</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="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
|
||||
<transition name="list" appear>
|
||||
<a-alert type="error" v-if="confAlerts.length>0 && loadingStates.fetched" :style="{ marginBottom: '10px' }"
|
||||
message='{{ i18n "secAlertTitle" }}'
|
||||
color="red"
|
||||
show-icon closable>
|
||||
<template slot="description">
|
||||
<b>{{ i18n "secAlertConf" }}</b>
|
||||
<ul><li v-for="a in confAlerts">[[ a ]]</li></ul>
|
||||
</template>
|
||||
</a-alert>
|
||||
</transition>
|
||||
<transition name="list" appear>
|
||||
<template>
|
||||
<a-row v-if="!loadingStates.fetched">
|
||||
<a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
|
||||
<a-spin tip='{{ i18n "loading" }}'></a-spin>
|
||||
</a-card>
|
||||
</a-row>
|
||||
<a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
|
||||
<a-col>
|
||||
<a-card hoverable>
|
||||
<a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
|
||||
<a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
|
||||
<a-space direction="horizontal">
|
||||
<a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
|
||||
<a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="14">
|
||||
<template>
|
||||
<div>
|
||||
<a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
|
||||
<a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
|
||||
message='{{ i18n "pages.settings.infoDesc" }}'
|
||||
show-icon>
|
||||
</a-alert>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-tabs v-model="activeTab">
|
||||
<a-tab-pane key="1" :style="{ paddingTop: '20px' }">
|
||||
<template #tab>
|
||||
<a-icon type="setting"></a-icon>
|
||||
<span>{{ i18n "pages.settings.panelSettings" }}</span>
|
||||
</template>
|
||||
{{ template "settings/panel/general" . }}
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" :style="{ paddingTop: '20px' }">
|
||||
<template #tab>
|
||||
<a-icon type="safety"></a-icon>
|
||||
<span>{{ i18n "pages.settings.securitySettings" }}</span>
|
||||
</template>
|
||||
{{ template "settings/panel/security" . }}
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" :style="{ paddingTop: '20px' }">
|
||||
<template #tab>
|
||||
<a-icon type="message"></a-icon>
|
||||
<span>{{ i18n "pages.settings.TGBotSettings" }}</span>
|
||||
</template>
|
||||
{{ template "settings/panel/telegram" . }}
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" :style="{ paddingTop: '20px' }">
|
||||
<template #tab>
|
||||
<a-icon type="cloud-server"></a-icon>
|
||||
<span>{{ i18n "pages.settings.subSettings" }}</span>
|
||||
</template>
|
||||
{{ template "settings/panel/subscription/general" . }}
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5" v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
|
||||
<template #tab>
|
||||
<a-icon type="code"></a-icon>
|
||||
<span>{{ i18n "pages.settings.subSettings" }} (JSON)</span>
|
||||
</template>
|
||||
{{ template "settings/panel/subscription/json" . }}
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</transition>
|
||||
</a-spin>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
{{template "page/body_scripts" .}}
|
||||
<script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
|
||||
<script src="{{ .base_path }}assets/otpauth/otpauth.umd.min.js?{{ .cur_ver }}"></script>
|
||||
<script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
|
||||
{{template "component/aSidebar" .}}
|
||||
{{template "component/aThemeSwitch" .}}
|
||||
{{template "component/aSettingListItem" .}}
|
||||
{{template "modals/twoFactorModal"}}
|
||||
<script>
|
||||
const app = new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
mixins: [MediaQueryMixin],
|
||||
el: '#app',
|
||||
data: {
|
||||
themeSwitcher,
|
||||
// 【修改点 2：新增 activeTab 变量】
|
||||
// 默认为 '1'，即面板设置
|
||||
activeTab: '1',
|
||||
loadingStates: {
|
||||
fetched: false,
|
||||
spinning: false
|
||||
},
|
||||
oldAllSetting: new AllSetting(),
|
||||
allSetting: new AllSetting(),
|
||||
saveBtnDisable: true,
|
||||
user: {},
|
||||
lang: LanguageManager.getLanguage(),
|
||||
remarkModels: { i: 'Inbound', e: 'Email', o: 'Other' },
|
||||
remarkSeparators: [' ', '-', '_', '@', ':', '~', '|', ',', '.', '/'],
|
||||
datepickerList: [{ name: 'Gregorian (Standard)', value: 'gregorian' }, { name: 'Jalalian (شمسی)', value: 'jalalian' }],
|
||||
remarkSample: '',
|
||||
defaultFragment: {
|
||||
tag: "fragment",
|
||||
protocol: "freedom",
|
||||
settings: {
|
||||
domainStrategy: "AsIs",
|
||||
fragment: {
|
||||
packets: "tlshello",
|
||||
length: "100-200",
|
||||
interval: "10-20"
|
||||
}
|
||||
},
|
||||
streamSettings: {
|
||||
sockopt: {
|
||||
tcpKeepAliveIdle: 100,
|
||||
tcpMptcp: true,
|
||||
penetrate: true
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultNoises: {
|
||||
tag: "noises",
|
||||
protocol: "freedom",
|
||||
settings: {
|
||||
domainStrategy: "AsIs",
|
||||
noises: [
|
||||
{ type: "rand", packet: "10-20", delay: "10-16", applyTo: "ip" },
|
||||
],
|
||||
},
|
||||
},
|
||||
defaultMux: {
|
||||
enabled: true,
|
||||
concurrency: 8,
|
||||
xudpConcurrency: 16,
|
||||
xudpProxyUDP443: "reject"
|
||||
},
|
||||
defaultRules: [
|
||||
{
|
||||
type: "field",
|
||||
outboundTag: "direct",
|
||||
domain: [
|
||||
"geosite:category-ir"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "field",
|
||||
outboundTag: "direct",
|
||||
ip: [
|
||||
"geoip:private",
|
||||
"geoip:ir"
|
||||
]
|
||||
},
|
||||
],
|
||||
directIPsOptions: [
|
||||
{ label: 'Private IP', value: 'geoip:private' },
|
||||
{ label: '🇮🇷 Iran', value: 'geoip:ir' },
|
||||
{ label: '🇨🇳 China', value: 'geoip:cn' },
|
||||
{ label: '🇷🇺 Russia', value: 'geoip:ru' },
|
||||
{ label: '🇻🇳 Vietnam', value: 'geoip:vn' },
|
||||
{ label: '🇪🇸 Spain', value: 'geoip:es' },
|
||||
{ label: '🇮🇩 Indonesia', value: 'geoip:id' },
|
||||
{ label: '🇺🇦 Ukraine', value: 'geoip:ua' },
|
||||
{ label: '🇹🇷 Türkiye', value: 'geoip:tr' },
|
||||
{ label: '🇧🇷 Brazil', value: 'geoip:br' },
|
||||
],
|
||||
diretDomainsOptions: [
|
||||
{ label: 'Private DNS', value: 'geosite:private' },
|
||||
{ label: '🇮🇷 Iran', value: 'geosite:category-ir' },
|
||||
{ label: '🇨🇳 China', value: 'geosite:cn' },
|
||||
{ label: '🇷🇺 Russia', value: 'geosite:category-ru' },
|
||||
{ label: 'Apple', value: 'geosite:apple' },
|
||||
{ label: 'Meta', value: 'geosite:meta' },
|
||||
{ label: 'Google', value: 'geosite:google' },
|
||||
],
|
||||
get remarkModel() {
|
||||
rm = this.allSetting.remarkModel;
|
||||
return rm.length > 1 ? rm.substring(1).split('') : [];
|
||||
},
|
||||
set remarkModel(value) {
|
||||
rs = this.allSetting.remarkModel[0];
|
||||
this.allSetting.remarkModel = rs + value.join('');
|
||||
this.changeRemarkSample();
|
||||
},
|
||||
get remarkSeparator() {
|
||||
return this.allSetting.remarkModel.length > 1 ? this.allSetting.remarkModel.charAt(0) : '-';
|
||||
},
|
||||
set remarkSeparator(value) {
|
||||
this.allSetting.remarkModel = value + this.allSetting.remarkModel.substring(1);
|
||||
this.changeRemarkSample();
|
||||
},
|
||||
get datepicker() {
|
||||
return this.allSetting.datepicker ? this.allSetting.datepicker : 'gregorian';
|
||||
},
|
||||
set datepicker(value) {
|
||||
this.allSetting.datepicker = value;
|
||||
},
|
||||
changeRemarkSample() {
|
||||
sample = []
|
||||
this.remarkModel.forEach(r => sample.push(this.remarkModels[r]));
|
||||
this.remarkSample = sample.length == 0 ? '' : sample.join(this.remarkSeparator);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loading(spinning = true) {
|
||||
this.loadingStates.spinning = spinning;
|
||||
},
|
||||
async getAllSetting() {
|
||||
const msg = await HttpUtil.post("/panel/setting/all");
|
||||
|
||||
if (msg.success) {
|
||||
if (!this.loadingStates.fetched) {
|
||||
this.loadingStates.fetched = true
|
||||
}
|
||||
|
||||
this.oldAllSetting = new AllSetting(msg.obj);
|
||||
this.allSetting = new AllSetting(msg.obj);
|
||||
app.changeRemarkSample();
|
||||
this.saveBtnDisable = true;
|
||||
}
|
||||
},
|
||||
async updateAllSetting() {
|
||||
this.loading(true);
|
||||
const msg = await HttpUtil.post("/panel/setting/update", this.allSetting);
|
||||
this.loading(false);
|
||||
if (msg.success) {
|
||||
await this.getAllSetting();
|
||||
}
|
||||
},
|
||||
async updateUser() {
|
||||
const sendUpdateUserRequest = async () => {
|
||||
this.loading(true);
|
||||
const msg = await HttpUtil.post("/panel/setting/updateUser", this.user);
|
||||
this.loading(false);
|
||||
if (msg.success) {
|
||||
this.user = {};
|
||||
window.location.replace(basePath + "logout");
|
||||
}
|
||||
}
|
||||
|
||||
if (this.allSetting.twoFactorEnable) {
|
||||
twoFactorModal.show({
|
||||
title: '{{ i18n "pages.settings.security.twoFactorModalChangeCredentialsTitle" }}',
|
||||
description: '{{ i18n "pages.settings.security.twoFactorModalChangeCredentialsStep" }}',
|
||||
token: this.allSetting.twoFactorToken,
|
||||
type: 'confirm',
|
||||
confirm: (success) => {
|
||||
if (success) {
|
||||
sendUpdateUserRequest();
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
sendUpdateUserRequest();
|
||||
}
|
||||
},
|
||||
async restartPanel() {
|
||||
await new Promise(resolve => {
|
||||
this.$confirm({
|
||||
title: '{{ i18n "pages.settings.restartPanel" }}',
|
||||
content: '{{ i18n "pages.settings.restartPanelDesc" }}',
|
||||
class: themeSwitcher.currentTheme,
|
||||
okText: '{{ i18n "sure" }}',
|
||||
cancelText: '{{ i18n "cancel" }}',
|
||||
onOk: () => resolve(),
|
||||
});
|
||||
});
|
||||
this.loading(true);
|
||||
const msg = await HttpUtil.post("/panel/setting/restartPanel");
|
||||
this.loading(false);
|
||||
if (msg.success) {
|
||||
this.loading(true);
|
||||
await PromiseUtil.sleep(5000);
|
||||
var { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting;
|
||||
if (host == this.oldAllSetting.webDomain) host = null;
|
||||
if (port == this.oldAllSetting.webPort) port = null;
|
||||
const isTLS = webCertFile !== "" || webKeyFile !== "";
|
||||
const url = URLBuilder.buildURL({ host, port, isTLS, base, path: "panel/settings" });
|
||||
window.location.replace(url);
|
||||
}
|
||||
},
|
||||
toggleTwoFactor(newValue) {
|
||||
if (newValue) {
|
||||
const newTwoFactorToken = RandomUtil.randomBase32String()
|
||||
|
||||
twoFactorModal.show({
|
||||
title: '{{ i18n "pages.settings.security.twoFactorModalSetTitle" }}',
|
||||
token: newTwoFactorToken,
|
||||
type: 'set',
|
||||
confirm: (success) => {
|
||||
if (success) {
|
||||
Vue.prototype.$message['success']('{{ i18n "pages.settings.security.twoFactorModalSetSuccess" }}')
|
||||
|
||||
this.allSetting.twoFactorToken = newTwoFactorToken
|
||||
}
|
||||
|
||||
this.allSetting.twoFactorEnable = success
|
||||
}
|
||||
})
|
||||
} else {
|
||||
twoFactorModal.show({
|
||||
title: '{{ i18n "pages.settings.security.twoFactorModalDeleteTitle" }}',
|
||||
description: '{{ i18n "pages.settings.security.twoFactorModalRemoveStep" }}',
|
||||
token: this.allSetting.twoFactorToken,
|
||||
type: 'confirm',
|
||||
confirm: (success) => {
|
||||
if (success) {
|
||||
Vue.prototype.$message['success']('{{ i18n "pages.settings.security.twoFactorModalDeleteSuccess" }}')
|
||||
|
||||
this.allSetting.twoFactorEnable = false
|
||||
this.allSetting.twoFactorToken = ""
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
addNoise() {
|
||||
const newNoise = { type: "rand", packet: "10-20", delay: "10-16", applyTo: "ip" };
|
||||
this.noisesArray = [...this.noisesArray, newNoise];
|
||||
},
|
||||
removeNoise(index) {
|
||||
const newNoises = [...this.noisesArray];
|
||||
newNoises.splice(index, 1);
|
||||
this.noisesArray = newNoises;
|
||||
},
|
||||
updateNoiseType(index, value) {
|
||||
const updatedNoises = [...this.noisesArray];
|
||||
updatedNoises[index] = { ...updatedNoises[index], type: value };
|
||||
this.noisesArray = updatedNoises;
|
||||
},
|
||||
updateNoisePacket(index, value) {
|
||||
const updatedNoises = [...this.noisesArray];
|
||||
updatedNoises[index] = { ...updatedNoises[index], packet: value };
|
||||
this.noisesArray = updatedNoises;
|
||||
},
|
||||
updateNoiseDelay(index, value) {
|
||||
const updatedNoises = [...this.noisesArray];
|
||||
updatedNoises[index] = { ...updatedNoises[index], delay: value };
|
||||
this.noisesArray = updatedNoises;
|
||||
},
|
||||
updateNoiseApplyTo(index, value) {
|
||||
const updatedNoises = [...this.noisesArray];
|
||||
updatedNoises[index] = { ...updatedNoises[index], applyTo: value };
|
||||
this.noisesArray = updatedNoises;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
fragment: {
|
||||
get: function () { return this.allSetting?.subJsonFragment != ""; },
|
||||
set: function (v) {
|
||||
this.allSetting.subJsonFragment = v ? JSON.stringify(this.defaultFragment) : "";
|
||||
}
|
||||
},
|
||||
fragmentPackets: {
|
||||
get: function () { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.packets : ""; },
|
||||
set: function (v) {
|
||||
if (v != "") {
|
||||
newFragment = JSON.parse(this.allSetting.subJsonFragment);
|
||||
newFragment.settings.fragment.packets = v;
|
||||
this.allSetting.subJsonFragment = JSON.stringify(newFragment);
|
||||
}
|
||||
}
|
||||
},
|
||||
fragmentLength: {
|
||||
get: function () { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.length : ""; },
|
||||
set: function (v) {
|
||||
if (v != "") {
|
||||
newFragment = JSON.parse(this.allSetting.subJsonFragment);
|
||||
newFragment.settings.fragment.length = v;
|
||||
this.allSetting.subJsonFragment = JSON.stringify(newFragment);
|
||||
}
|
||||
}
|
||||
},
|
||||
fragmentInterval: {
|
||||
get: function () { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.interval : ""; },
|
||||
set: function (v) {
|
||||
if (v != "") {
|
||||
newFragment = JSON.parse(this.allSetting.subJsonFragment);
|
||||
newFragment.settings.fragment.interval = v;
|
||||
this.allSetting.subJsonFragment = JSON.stringify(newFragment);
|
||||
}
|
||||
}
|
||||
},
|
||||
noises: {
|
||||
get() {
|
||||
return this.allSetting?.subJsonNoises != "";
|
||||
},
|
||||
set(v) {
|
||||
if (v) {
|
||||
this.allSetting.subJsonNoises = JSON.stringify(this.defaultNoises);
|
||||
} else {
|
||||
this.allSetting.subJsonNoises = "";
|
||||
}
|
||||
}
|
||||
},
|
||||
noisesArray: {
|
||||
get() {
|
||||
return this.noises ? JSON.parse(this.allSetting.subJsonNoises).settings.noises : [];
|
||||
},
|
||||
set(value) {
|
||||
if (this.noises) {
|
||||
const newNoises = JSON.parse(this.allSetting.subJsonNoises);
|
||||
newNoises.settings.noises = value;
|
||||
this.allSetting.subJsonNoises = JSON.stringify(newNoises);
|
||||
}
|
||||
}
|
||||
},
|
||||
enableMux: {
|
||||
get: function () { return this.allSetting?.subJsonMux != ""; },
|
||||
set: function (v) {
|
||||
this.allSetting.subJsonMux = v ? JSON.stringify(this.defaultMux) : "";
|
||||
}
|
||||
},
|
||||
muxConcurrency: {
|
||||
get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).concurrency : -1; },
|
||||
set: function (v) {
|
||||
newMux = JSON.parse(this.allSetting.subJsonMux);
|
||||
newMux.concurrency = v;
|
||||
this.allSetting.subJsonMux = JSON.stringify(newMux);
|
||||
}
|
||||
},
|
||||
muxXudpConcurrency: {
|
||||
get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpConcurrency : -1; },
|
||||
set: function (v) {
|
||||
newMux = JSON.parse(this.allSetting.subJsonMux);
|
||||
newMux.xudpConcurrency = v;
|
||||
this.allSetting.subJsonMux = JSON.stringify(newMux);
|
||||
}
|
||||
},
|
||||
muxXudpProxyUDP443: {
|
||||
get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpProxyUDP443 : "reject"; },
|
||||
set: function (v) {
|
||||
newMux = JSON.parse(this.allSetting.subJsonMux);
|
||||
newMux.xudpProxyUDP443 = v;
|
||||
this.allSetting.subJsonMux = JSON.stringify(newMux);
|
||||
}
|
||||
},
|
||||
enableDirect: {
|
||||
get: function () { return this.allSetting?.subJsonRules != ""; },
|
||||
set: function (v) {
|
||||
this.allSetting.subJsonRules = v ? JSON.stringify(this.defaultRules) : "";
|
||||
}
|
||||
},
|
||||
directIPs: {
|
||||
get: function () {
|
||||
if (!this.enableDirect) return [];
|
||||
const rules = JSON.parse(this.allSetting.subJsonRules);
|
||||
if (!Array.isArray(rules)) return [];
|
||||
const ipRule = rules.find(r => r.ip);
|
||||
return ipRule?.ip ?? [];
|
||||
},
|
||||
set: function (v) {
|
||||
let rules = JSON.parse(this.allSetting.subJsonRules);
|
||||
if (!Array.isArray(rules)) return;
|
||||
|
||||
if (v.length == 0) {
|
||||
rules = rules.filter(r => !r.ip);
|
||||
} else {
|
||||
let ruleIndex = rules.findIndex(r => r.ip);
|
||||
if (ruleIndex == -1) ruleIndex = rules.push(this.defaultRules[1]) - 1;
|
||||
|
||||
rules[ruleIndex].ip = [];
|
||||
v.forEach(d => {
|
||||
rules[ruleIndex].ip.push(d);
|
||||
});
|
||||
}
|
||||
this.allSetting.subJsonRules = JSON.stringify(rules);
|
||||
}
|
||||
},
|
||||
directDomains: {
|
||||
get: function () {
|
||||
if (!this.enableDirect) return [];
|
||||
const rules = JSON.parse(this.allSetting.subJsonRules);
|
||||
if (!Array.isArray(rules)) return [];
|
||||
const domainRule = rules.find(r => r.domain);
|
||||
return domainRule?.domain ?? [];
|
||||
},
|
||||
set: function (v) {
|
||||
let rules = JSON.parse(this.allSetting.subJsonRules);
|
||||
if (!Array.isArray(rules)) return;
|
||||
if (v.length == 0) {
|
||||
rules = rules.filter(r => !r.domain);
|
||||
} else {
|
||||
let ruleIndex = rules.findIndex(r => r.domain);
|
||||
if (ruleIndex == -1) ruleIndex = rules.push(this.defaultRules[0]) - 1;
|
||||
|
||||
rules[ruleIndex].domain = v;
|
||||
}
|
||||
this.allSetting.subJsonRules = JSON.stringify(rules);
|
||||
}
|
||||
},
|
||||
confAlerts: {
|
||||
get: function () {
|
||||
if (!this.allSetting) return [];
|
||||
var alerts = []
|
||||
if (window.location.protocol !== "https:") alerts.push('{{ i18n "secAlertSSL" }}');
|
||||
if (this.allSetting.webPort === 2053) alerts.push('{{ i18n "secAlertPanelPort" }}');
|
||||
panelPath = window.location.pathname.split('/').length < 4
|
||||
if (panelPath && this.allSetting.webBasePath == '/') alerts.push('{{ i18n "secAlertPanelURI" }}');
|
||||
if (this.allSetting.subEnable) {
|
||||
subPath = this.allSetting.subURI.length > 0 ? new URL(this.allSetting.subURI).pathname : this.allSetting.subPath;
|
||||
if (subPath == '/sub/') alerts.push('{{ i18n "secAlertSubURI" }}');
|
||||
subJsonPath = this.allSetting.subJsonURI.length > 0 ? new URL(this.allSetting.subJsonURI).pathname : this.allSetting.subJsonPath;
|
||||
if (subJsonPath == '/json/') alerts.push('{{ i18n "secAlertSubJsonURI" }}');
|
||||
}
|
||||
return alerts
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// 【修改点 3：页面加载时检查 URL 参数】
|
||||
// 如果 URL 包含 ?tab=telegram，则自动跳转到 Telegram 配置 (Key='3')
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.get('tab') === 'telegram') {
|
||||
this.activeTab = '3';
|
||||
}
|
||||
|
||||
await this.getAllSetting();
|
||||
|
||||
while (true) {
|
||||
await PromiseUtil.sleep(1000);
|
||||
this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{ template "page/body_end" .}}
|
||||
155
web/html/settings/panel/general.html
Normal file
155
web/html/settings/panel/general.html
Normal file
@@ -0,0 +1,155 @@
|
||||
{{define "settings/panel/general"}}
|
||||
<style>
|
||||
.red-placeholder input::-webkit-input-placeholder { color: red !important; }
|
||||
.red-placeholder input::-moz-placeholder { color: red !important; }
|
||||
.red-placeholder input:-ms-input-placeholder { color: red !important; }
|
||||
.red-placeholder input::placeholder { color: red !important; }
|
||||
</style>
|
||||
<a-collapse default-active-key="1">
|
||||
<a-collapse-panel key="1" header='{{ i18n "pages.xray.generalConfigs"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>
|
||||
{{ i18n "pages.settings.remarkModel"}}
|
||||
</template>
|
||||
<template #description>
|
||||
{{ i18n "pages.settings.sampleRemark"}}: <i>#[[ remarkSample ]]</i>
|
||||
</template>
|
||||
<template #control>
|
||||
<a-input-group :style="{ width: '100%' }">
|
||||
<a-select :style="{ paddingRight: '.5rem', minWidth: '80%', width: 'auto' }" mode="multiple"
|
||||
v-model="remarkModel" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="(value, key) in remarkModels" :value="key">[[ value ]]</a-select-option>
|
||||
</a-select>
|
||||
<a-select :style="{ width: '20%' }" v-model="remarkSeparator"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option v-for="key in remarkSeparators" :value="key">[[ key ]]</a-select-option>
|
||||
</a-select>
|
||||
</a-input-group>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.panelListeningIP"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.panelListeningIPDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.webListen"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.panelListeningDomain"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.panelListeningDomainDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.webDomain"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.panelPort"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.panelPortDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input-number :min="1" :min="65531" v-model="allSetting.webPort" :style="{ width: '100%' }"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.panelUrlPath"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.panelUrlPathDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.webBasePath"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.sessionMaxAge" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.sessionMaxAgeDesc" }}</template>
|
||||
<template #control>
|
||||
<a-input-number :min="60" v-model="allSetting.sessionMaxAge" :style="{ width: '100%' }"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.pageSize" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.pageSizeDesc" }}</template>
|
||||
<template #control>
|
||||
<a-input-number :min="0" step="5" v-model="allSetting.pageSize" :style="{ width: '100%' }"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.language"}}</template>
|
||||
<template #control>
|
||||
<a-select ref="selectLang" v-model="lang" @change="LanguageManager.setLanguage(lang)"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme" :style="{ width: '100%' }">
|
||||
<a-select-option :value="l.value" :label="l.value" v-for="l in LanguageManager.supportedLanguages">
|
||||
<span role="img" :aria-label="l.name" v-text="l.icon"></span> <span
|
||||
v-text="l.name"></span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header='{{ i18n "pages.settings.notifications" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.expireTimeDiff" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.expireTimeDiffDesc" }}</template>
|
||||
<template #control>
|
||||
<a-input-number :min="0" v-model="allSetting.expireDiff" :style="{ width: '100%' }"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.trafficDiff" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.trafficDiffDesc" }}</template>
|
||||
<template #control>
|
||||
<a-input-number :min="0" v-model="allSetting.trafficDiff" :style="{ width: '100%' }"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header='{{ i18n "pages.settings.certs" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.publicKeyPath"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.publicKeyPathDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.webCertFile" placeholder="/root/cert/域名/fullchain.pem" class="red-placeholder"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.privateKeyPath"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.privateKeyPathDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.webKeyFile" placeholder="/root/cert/域名/privkey.pem" class="red-placeholder"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="4" header='{{ i18n "pages.settings.externalTraffic" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.externalTrafficInformEnable"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.externalTrafficInformEnableDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="allSetting.externalTrafficInformEnable"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.externalTrafficInformURI"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.externalTrafficInformURIDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" placeholder="(http|https)://domain[:port]/path/"
|
||||
v-model="allSetting.externalTrafficInformURI"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="5" header='{{ i18n "pages.settings.dateAndTime" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.timeZone"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.timeZoneDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.timeLocation"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.datepicker"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.datepickerDescription"}}</template>
|
||||
<template #control>
|
||||
<a-select :style="{ width: '100%' }" :dropdown-class-name="themeSwitcher.currentTheme" v-model="datepicker">
|
||||
<a-select-option v-for="item in datepickerList" :value="item.value">
|
||||
<span v-text="item.name"></span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
{{end}}
|
||||
44
web/html/settings/panel/security.html
Normal file
44
web/html/settings/panel/security.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{{define "settings/panel/security"}}
|
||||
<a-collapse default-active-key="1">
|
||||
<a-collapse-panel key="1" header='{{ i18n "pages.settings.security.admin"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.oldUsername"}}</template>
|
||||
<template #control>
|
||||
<a-input autocomplete="username" v-model="user.oldUsername"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.currentPassword"}}</template>
|
||||
<template #control>
|
||||
<a-input-password autocomplete="current-password" v-model="user.oldPassword"></a-input-password>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.newUsername"}}</template>
|
||||
<template #control>
|
||||
<a-input v-model="user.newUsername"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.newPassword"}}</template>
|
||||
<template #control>
|
||||
<a-input-password autocomplete="new-password" v-model="user.newPassword"></a-input-password>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-list-item>
|
||||
<a-space direction="horizontal" :style="{ padding: '0 20px' }">
|
||||
<a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
|
||||
</a-space>
|
||||
</a-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header='{{ i18n "pages.settings.security.twoFactor" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.security.twoFactorEnable" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.security.twoFactorEnableDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch @click="toggleTwoFactor" :checked="allSetting.twoFactorEnable"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
{{end}}
|
||||
98
web/html/settings/panel/subscription/general.html
Normal file
98
web/html/settings/panel/subscription/general.html
Normal file
@@ -0,0 +1,98 @@
|
||||
{{define "settings/panel/subscription/general"}}
|
||||
<a-collapse default-active-key="1">
|
||||
<a-collapse-panel key="1" header='{{ i18n "pages.xray.generalConfigs"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subEnable"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subEnableDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="allSetting.subEnable"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subTitle"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subTitleDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.subTitle"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subListen"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subListenDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.subListen"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subDomain"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subDomainDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.subDomain"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subPort"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subPortDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input-number v-model="allSetting.subPort" :min="1" :min="65531"
|
||||
:style="{ width: '100%' }"></a-input-number>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subPath"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.subPath"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subURI"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" placeholder="(http|https)://domain[:port]/path/"
|
||||
v-model="allSetting.subURI"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header='{{ i18n "pages.settings.information" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subEncrypt"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subEncryptDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="allSetting.subEncrypt"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subShowInfo"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subShowInfoDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="allSetting.subShowInfo"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header='{{ i18n "pages.settings.certs" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subCertPath"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subCertPathDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.subCertFile"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subKeyPath"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subKeyPathDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.subKeyFile"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="4" header='{{ i18n "pages.settings.intervals"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subUpdates"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subUpdatesDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input-number :min="1" v-model="allSetting.subUpdates" :style="{ width: '100%' }"></a-input-number>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
{{end}}
|
||||
192
web/html/settings/panel/subscription/json.html
Normal file
192
web/html/settings/panel/subscription/json.html
Normal file
@@ -0,0 +1,192 @@
|
||||
{{define "settings/panel/subscription/json"}}
|
||||
<a-collapse default-active-key="1">
|
||||
<a-collapse-panel key="1" header='{{ i18n "pages.xray.generalConfigs"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subPath"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.subJsonPath"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.subURI"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" placeholder="(http|https)://domain[:port]/path/"
|
||||
v-model="allSetting.subJsonURI"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header='{{ i18n "pages.settings.fragment"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.fragment"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.fragmentDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="fragment"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-list-item v-if="fragment" :style="{ padding: '10px 20px' }">
|
||||
<a-collapse>
|
||||
<a-collapse-panel header='{{ i18n "pages.settings.fragmentSett"}}' v-if="fragment">
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>Packets</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="fragmentPackets"
|
||||
placeholder="1-1 | 1-3 | tlshello | ..."></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>Length</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="fragmentLength" placeholder="100-200"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>Interval</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="fragmentInterval" placeholder="10-20"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header="Noises">
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>Noises</template>
|
||||
<template #description>{{ i18n "pages.settings.noisesDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="noises"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-list-item v-if="noises" :style="{ padding: '10px 20px' }">
|
||||
<a-collapse>
|
||||
<a-collapse-panel v-for="(noise, index) in noisesArray" :key="index" :header="`Noise №${index + 1}`">
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>Type</template>
|
||||
<template #control>
|
||||
<a-select :value="noise.type" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme"
|
||||
@change="(value) => updateNoiseType(index, value)">
|
||||
<a-select-option :value="p" :label="p" v-for="p in ['rand', 'base64', 'str', 'hex']" :key="p">
|
||||
<span>[[ p ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>Packet</template>
|
||||
<template #control>
|
||||
<a-input type="text" :value="noise.packet"
|
||||
@input="(value) => updateNoisePacket(index, event.target.value)"
|
||||
placeholder="5-10"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>Delay (ms)</template>
|
||||
<template #control>
|
||||
<a-input type="text" :value="noise.delay"
|
||||
@input="(value) => updateNoiseDelay(index, event.target.value)"
|
||||
placeholder="10-20"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>ApplyTo</template>
|
||||
<template #control>
|
||||
<a-select :value="noise.applyTo" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme"
|
||||
@change="(value) => updateNoiseApplyTo(index, value)">
|
||||
<a-select-option :value="p" :label="p" v-for="p in ['ip', 'ipv4', 'ipv6']" :key="p">
|
||||
<span>[[ p ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-space direction="horizontal" :style="{ padding: '10px 20px' }">
|
||||
<a-button v-if="noisesArray.length > 1" type="danger"
|
||||
@click="removeNoise(index)">Remove</a-button>
|
||||
</a-space>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-button v-if="noises" type="primary" @click="addNoise" :style="{ marginTop: '10px' }">Add Noise</a-button>
|
||||
</a-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="4" header='{{ i18n "pages.settings.mux"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.mux"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.muxDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="enableMux"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-list-item v-if="enableMux" :style="{ padding: '10px 20px' }">
|
||||
<a-collapse>
|
||||
<a-collapse-panel header='{{ i18n "pages.settings.muxSett"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>Concurrency</template>
|
||||
<template #control>
|
||||
<a-input-number v-model="muxConcurrency" :min="-1" :max="1024"
|
||||
:style="{ width: '100%' }"></a-input-number>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>xudp Concurrency</template>
|
||||
<template #control>
|
||||
<a-input-number v-model="muxXudpConcurrency" :min="-1" :max="1024"
|
||||
:style="{ width: '100%' }"></a-input-number>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>xudp UDP 443</template>
|
||||
<template #control>
|
||||
<a-select v-model="muxXudpProxyUDP443" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']">
|
||||
<span>[[ p ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="5" header='{{ i18n "pages.settings.direct" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.direct"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.directDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="enableDirect"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-list-item v-if="enableDirect" :style="{ padding: '10px 20px' }">
|
||||
<a-collapse>
|
||||
<a-collapse-panel header='{{ i18n "pages.settings.direct"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.directips" }}</template>
|
||||
<template #control>
|
||||
<a-select mode="tags" :style="{ width: '100%' }" v-model="directIPs"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label" v-for="p in directIPsOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.directdomains" }}</template>
|
||||
<template #control>
|
||||
<a-select mode="tags" :style="{ width: '100%' }" v-model="directDomains"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label" v-for="p in diretDomainsOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-list-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
{{end}}
|
||||
87
web/html/settings/panel/telegram.html
Normal file
87
web/html/settings/panel/telegram.html
Normal file
@@ -0,0 +1,87 @@
|
||||
{{define "settings/panel/telegram"}}
|
||||
<a-collapse default-active-key="1">
|
||||
<a-collapse-panel key="1" header='{{ i18n "pages.xray.generalConfigs"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.telegramBotEnable" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.telegramBotEnableDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="allSetting.tgBotEnable"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.telegramToken"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.telegramTokenDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.tgBotToken"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.telegramChatId"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.telegramChatIdDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.tgBotChatId"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.telegramBotLanguage"}}</template>
|
||||
<template #control>
|
||||
<a-select ref="selectBotLang" v-model="allSetting.tgLang"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme" :style="{ width: '100%' }">
|
||||
<a-select-option :value="l.value" :label="l.value" v-for="l in LanguageManager.supportedLanguages">
|
||||
<span role="img" :aria-label="l.name" v-text="l.icon"></span> <span
|
||||
v-text="l.name"></span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header='{{ i18n "pages.settings.notifications" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.telegramNotifyTime"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.telegramNotifyTimeDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="allSetting.tgRunTime"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.tgNotifyBackup" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.tgNotifyBackupDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="allSetting.tgBotBackup"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.tgNotifyLogin" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.tgNotifyLoginDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="allSetting.tgBotLoginNotify"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.tgNotifyCpu" }}</template>
|
||||
<template #description>{{ i18n "pages.settings.tgNotifyCpuDesc" }}</template>
|
||||
<template #control>
|
||||
<a-input-number :min="0" :min="100" v-model="allSetting.tgCpu" :style="{ width: '100%' }"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header='{{ i18n "pages.settings.proxyAndServer" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.telegramProxy"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.telegramProxyDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" placeholder="socks5://user:pass@host:port"
|
||||
v-model="allSetting.tgBotProxy"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.settings.telegramAPIServer"}}</template>
|
||||
<template #description>{{ i18n "pages.settings.telegramAPIServerDesc"}}</template>
|
||||
<template #control>
|
||||
<a-input type="text" placeholder="https://api.example.com"
|
||||
v-model="allSetting.tgBotAPIServer"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
{{end}}
|
||||
14
web/html/settings/xray/advanced.html
Normal file
14
web/html/settings/xray/advanced.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{{define "settings/xray/advanced"}}
|
||||
<a-space direction="vertical" size="small" :style="{ marginTop: '20px' }">
|
||||
<a-list-item-meta title='{{ i18n "pages.xray.Template"}}'
|
||||
description='{{ i18n "pages.xray.TemplateDesc"}}'></a-list-item-meta>
|
||||
<a-radio-group v-model="advSettings" @change="changeCode" button-style="solid" :style="{ margin: '10px 0' }"
|
||||
:size="isMobile ? 'small' : ''">
|
||||
<a-radio-button value="xraySetting">{{ i18n "pages.xray.completeTemplate"}}</a-radio-button>
|
||||
<a-radio-button value="inboundSettings">{{ i18n "pages.xray.Inbounds" }}</a-radio-button>
|
||||
<a-radio-button value="outboundSettings">{{ i18n "pages.xray.Outbounds" }}</a-radio-button>
|
||||
<a-radio-button value="routingRuleSettings">{{ i18n "pages.xray.Routings" }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
<textarea :style="{ position: 'absolute', left: '-800px' }" id="xraySetting"></textarea>
|
||||
</a-space>
|
||||
{{end}}
|
||||
53
web/html/settings/xray/balancers.html
Normal file
53
web/html/settings/xray/balancers.html
Normal file
@@ -0,0 +1,53 @@
|
||||
{{define "settings/xray/balancers"}}
|
||||
<template v-if="balancersData.length > 0">
|
||||
<a-space direction="vertical" size="middle">
|
||||
<a-button type="primary" icon="plus" @click="addBalancer()">
|
||||
<span>{{ i18n "pages.xray.balancer.addBalancer"}}</span>
|
||||
</a-button>
|
||||
<a-table :columns="balancerColumns" bordered :row-key="r => r.key" :data-source="balancersData"
|
||||
:scroll="isMobile ? {} : { x: 200 }" :pagination="false" :indent-size="0" :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}` }'>
|
||||
<template slot="action" slot-scope="text, balancer, index">
|
||||
<span>[[ index+1 ]]</span>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-icon @click="e => e.preventDefault()" type="more"
|
||||
:style="{ fontSize: '16px', textDecoration: 'bold' }"></a-icon>
|
||||
<a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
|
||||
<a-menu-item @click="editBalancer(index)">
|
||||
<a-icon type="edit"></a-icon>
|
||||
<span>{{ i18n "edit" }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="deleteBalancer(index)">
|
||||
<span :style="{ color: '#FF4D4F' }">
|
||||
<a-icon type="delete"></a-icon>
|
||||
<span>{{ i18n "delete"}}</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template slot="strategy" slot-scope="text, balancer, index">
|
||||
<a-tag :style="{ margin: '0' }" v-if="balancer.strategy=='random'" color="purple">Random</a-tag>
|
||||
<a-tag :style="{ margin: '0' }" v-if="balancer.strategy=='roundRobin'" color="green">Round Robin</a-tag>
|
||||
<a-tag :style="{ margin: '0' }" v-if="balancer.strategy=='leastLoad'" color="green">Least Load</a-tag>
|
||||
<a-tag :style="{ margin: '0' }" v-if="balancer.strategy=='leastPing'" color="green">Least Ping</a-tag>
|
||||
</template>
|
||||
<template slot="selector" slot-scope="text, balancer, index">
|
||||
<a-tag class="info-large-tag" :style="{ margin: '1' }" v-for="sel in balancer.selector">[[ sel ]]</a-tag>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-radio-group v-if="observatoryEnable || burstObservatoryEnable" v-model="obsSettings" @change="changeObsCode"
|
||||
button-style="solid" :size="isMobile ? 'small' : ''">
|
||||
<a-radio-button value="observatory" v-if="observatoryEnable">Observatory</a-radio-button>
|
||||
<a-radio-button value="burstObservatory" v-if="burstObservatoryEnable">Burst Observatory</a-radio-button>
|
||||
</a-radio-group>
|
||||
<textarea :style="{ position: 'absolute', left: '-800px' }" id="obsSetting"></textarea>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty description='{{ i18n "emptyBalancersDesc" }}' :style="{ margin: '10px' }">
|
||||
<a-button type="primary" icon="plus" @click="addBalancer()" :style="{ marginTop: '10px' }">
|
||||
<span>{{ i18n "pages.xray.balancer.addBalancer"}}</span>
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</template>
|
||||
{{end}}
|
||||
265
web/html/settings/xray/basics.html
Normal file
265
web/html/settings/xray/basics.html
Normal file
@@ -0,0 +1,265 @@
|
||||
{{define "settings/xray/basics"}}
|
||||
<a-collapse default-active-key="1">
|
||||
<a-collapse-panel key="1" header='{{ i18n "pages.xray.generalConfigs"}}'>
|
||||
<a-row :xs="24" :sm="24" :lg="12">
|
||||
<a-alert type="warning" :style="{ textAlign: 'center' }">
|
||||
<template slot="message">
|
||||
<a-icon type="exclamation-circle" theme="filled" :style="{ color: '#FFA031' }"></a-icon>
|
||||
<span>{{ i18n "pages.xray.generalConfigsDesc" }}</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-row>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.FreedomStrategy" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.FreedomStrategyDesc" }}</template>
|
||||
<template #control>
|
||||
<a-select v-model="freedomStrategy" :dropdown-class-name="themeSwitcher.currentTheme"
|
||||
:style="{ width: '100%' }">
|
||||
<a-select-option v-for="s in OutboundDomainStrategies" :value="s">
|
||||
<span>[[ s ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.RoutingStrategy" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.RoutingStrategyDesc" }}</template>
|
||||
<template #control>
|
||||
<a-select v-model="routingStrategy" :dropdown-class-name="themeSwitcher.currentTheme"
|
||||
:style="{ width: '100%' }">
|
||||
<a-select-option v-for="s in routingDomainStrategies" :value="s">
|
||||
<span>[[ s ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header='{{ i18n "pages.xray.statistics" }}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.statsInboundUplink" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.statsInboundUplinkDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="statsInboundUplink"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.statsInboundDownlink" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.statsInboundDownlinkDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="statsInboundDownlink"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.statsOutboundUplink" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.statsOutboundUplinkDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="statsOutboundUplink"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.statsOutboundDownlink" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.statsOutboundDownlinkDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="statsOutboundDownlink"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header='{{ i18n "pages.xray.logConfigs" }}'>
|
||||
<a-row :xs="24" :sm="24" :lg="12">
|
||||
<a-alert type="warning" :style="{ textAlign: 'center' }">
|
||||
<template slot="message">
|
||||
<a-icon type="exclamation-circle" theme="filled" :style="{ color: '#FFA031' }"></a-icon>
|
||||
<span>{{ i18n "pages.xray.logConfigsDesc" }}</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-row>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.logLevel" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.logLevelDesc" }}</template>
|
||||
<template #control>
|
||||
<a-select v-model="logLevel" :dropdown-class-name="themeSwitcher.currentTheme" :style="{ width: '100%' }">
|
||||
<a-select-option v-for="s in log.loglevel" :value="s">
|
||||
<span>[[ s ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.accessLog" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.accessLogDesc" }}</template>
|
||||
<template #control>
|
||||
<a-select v-model="accessLog" :dropdown-class-name="themeSwitcher.currentTheme" :style="{ width: '100%' }">
|
||||
<a-select-option value=''>
|
||||
<span>Empty</span>
|
||||
</a-select-option>
|
||||
<a-select-option v-for="s in log.access" :value="s">
|
||||
<span>[[ s ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.errorLog" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.errorLogDesc" }}</template>
|
||||
<template #control>
|
||||
<a-select v-model="errorLog" :dropdown-class-name="themeSwitcher.currentTheme" :style="{ width: '100%' }">
|
||||
<a-select-option value=''>
|
||||
<span>Empty</span>
|
||||
</a-select-option>
|
||||
<a-select-option v-for="s in log.error" :value="s">
|
||||
<span>[[ s ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.maskAddress" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.maskAddressDesc" }}</template>
|
||||
<template #control>
|
||||
<a-select v-model="maskAddressLog" :dropdown-class-name="themeSwitcher.currentTheme"
|
||||
:style="{ width: '100%' }">
|
||||
<a-select-option value=''>
|
||||
<span>Empty</span>
|
||||
</a-select-option>
|
||||
<a-select-option v-for="s in log.maskAddress" :value="s">
|
||||
<span>[[ s ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dnsLog"}}</template>
|
||||
<template #description>{{ i18n "pages.xray.dnsLogDesc"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="dnslog"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="4" header='{{ i18n "pages.xray.basicRouting"}}'>
|
||||
<a-row :xs="24" :sm="24" :lg="12">
|
||||
<a-alert type="warning" :style="{ textAlign: 'center' }">
|
||||
<template slot="message">
|
||||
<a-icon type="exclamation-circle" theme="filled" :style="{ color: '#FFA031' }"></a-icon>
|
||||
<span>{{ i18n "pages.xray.blockConfigsDesc" }}</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-row>
|
||||
<a-setting-list-item paddings="small" :style="{ marginBottom: '20px' }">
|
||||
<template #title>{{ i18n "pages.xray.Torrent"}}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="torrentSettings"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-row :xs="24" :sm="24" :lg="12">
|
||||
<a-alert type="warning" :style="{ textAlign: 'center' }">
|
||||
<template slot="message">
|
||||
<a-icon type="exclamation-circle" theme="filled" :style="{ color: '#FFA031' }"></a-icon>
|
||||
<span>{{ i18n "pages.xray.blockConnectionsConfigsDesc" }}</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-row>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.blockips" }}</template>
|
||||
<template #control>
|
||||
<a-select mode="tags" v-model="blockedIPs" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.IPsOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.blockdomains" }}</template>
|
||||
<template #control>
|
||||
<a-select mode="tags" v-model="blockedDomains" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.BlockDomainsOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-row :xs="24" :sm="24" :lg="12">
|
||||
<a-alert type="warning" :style="{ textAlign: 'center', marginTop: '20px' }">
|
||||
<template slot="message">
|
||||
<a-icon type="exclamation-circle" theme="filled" :style="{ color: '#FFA031' }"></a-icon>
|
||||
<span>{{ i18n "pages.xray.directConnectionsConfigsDesc" }}</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-row>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.directips" }}</template>
|
||||
<template #control>
|
||||
<a-select mode="tags" :style="{ width: '100%' }" v-model="directIPs"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.IPsOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.directdomains" }}</template>
|
||||
<template #control>
|
||||
<a-select mode="tags" :style="{ width: '100%' }" v-model="directDomains"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.DomainsOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-row :xs="24" :sm="24" :lg="12">
|
||||
<a-alert type="warning" :style="{ textAlign: 'center', marginTop: '20px' }">
|
||||
<template slot="message">
|
||||
<a-icon type="exclamation-circle" theme="filled" :style="{ color: '#FFA031' }"></a-icon>
|
||||
<span>{{ i18n "pages.xray.ipv4RoutingDesc" }}</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-row>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.ipv4Routing" }}</template>
|
||||
<template #control>
|
||||
<a-select mode="tags" :style="{ width: '100%' }" v-model="ipv4Domains"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.ServicesOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-row :xs="24" :sm="24" :lg="12">
|
||||
<a-alert type="warning" :style="{ textAlign: 'center', marginTop: '20px' }">
|
||||
<template slot="message">
|
||||
<a-icon type="exclamation-circle" theme="filled" :style="{ color: '#FFA031' }"></a-icon>
|
||||
{{ i18n "pages.xray.warpRoutingDesc" }}
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-row>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.warpRouting" }}</template>
|
||||
<template #control>
|
||||
<template v-if="WarpExist">
|
||||
<a-select mode="tags" :style="{ width: '100%' }" v-model="warpDomains"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.ServicesOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-button type="primary" icon="cloud" @click="showWarp()">WARP</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="6" header='{{ i18n "pages.settings.resetDefaultConfig"}}'>
|
||||
<a-space direction="horizontal" :style="{ padding: '0 20px' }">
|
||||
<a-button type="danger" @click="resetXrayConfigToDefault">
|
||||
<span>{{ i18n "pages.settings.resetDefaultConfig" }}</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
{{end}}
|
||||
169
web/html/settings/xray/dns.html
Normal file
169
web/html/settings/xray/dns.html
Normal file
@@ -0,0 +1,169 @@
|
||||
{{define "settings/xray/dns"}}
|
||||
<a-collapse default-active-key="1">
|
||||
<a-collapse-panel key="1" header='{{ i18n "pages.xray.generalConfigs"}}'>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.enable" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.enableDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="enableDNS"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<template v-if="enableDNS">
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.tag" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.tagDesc" }}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="dnsTag"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.clientIp" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.clientIpDesc" }}</template>
|
||||
<template #control>
|
||||
<a-input type="text" v-model="dnsClientIp"></a-input>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.strategy" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.strategyDesc" }}</template>
|
||||
<template #control>
|
||||
<a-select v-model="dnsStrategy" :style="{ width: '100%' }"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="l" :label="l" v-for="l in ['UseSystem', 'UseIP', 'UseIPv4', 'UseIPv6']">
|
||||
<span>[[ l ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.disableCache" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.disableCacheDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="dnsDisableCache"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.disableFallback" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.disableFallbackDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="dnsDisableFallback"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.disableFallbackIfMatch" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.disableFallbackIfMatchDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="dnsDisableFallbackIfMatch"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.enableParallelQuery" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.enableParallelQueryDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="dnsEnableParallelQuery"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.dns.useSystemHosts" }}</template>
|
||||
<template #description>{{ i18n "pages.xray.dns.useSystemHostsDesc" }}</template>
|
||||
<template #control>
|
||||
<a-switch v-model="dnsUseSystemHosts"></a-switch>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
<template v-if="enableDNS">
|
||||
<a-collapse-panel key="2" header='DNS'>
|
||||
<template v-if="dnsServers.length > 0">
|
||||
<a-space direction="vertical" size="middle">
|
||||
<a-button type="primary" icon="plus" @click="addDNSServer()">
|
||||
<span>{{ i18n "pages.xray.dns.add" }}</span>
|
||||
</a-button>
|
||||
<a-table :columns="dnsColumns" bordered :row-key="r => r.key" :data-source="dnsServers"
|
||||
:scroll="isMobile ? {} : { x: 200 }" :pagination="false" :indent-size="0"
|
||||
:locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}` }'>
|
||||
<template slot="action" slot-scope="text,dns,index">
|
||||
<span>[[ index+1 ]]</span>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-icon @click="e => e.preventDefault()" type="more"
|
||||
:style="{ fontSize: '16px', textDecoration: 'bold' }"></a-icon>
|
||||
<a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
|
||||
<a-menu-item @click="editDNSServer(index)">
|
||||
<a-icon type="edit"></a-icon>
|
||||
<span>{{ i18n "edit" }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="deleteDNSServer(index)">
|
||||
<span :style="{ color: '#FF4D4F' }">
|
||||
<a-icon type="delete"></a-icon>
|
||||
<span>{{ i18n "delete"}}</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template slot="address" slot-scope="dns,index">
|
||||
<span v-if="typeof dns == 'object'">[[ dns.address ]]</span>
|
||||
<span v-else>[[ dns ]]</span>
|
||||
</template>
|
||||
<template slot="domain" slot-scope="dns,index">
|
||||
<span v-if="typeof dns == 'object'">[[ dns.domains.join(",") ]]</span>
|
||||
</template>
|
||||
<template slot="expectIPs" slot-scope="dns,index">
|
||||
<span v-if="typeof dns == 'object'">[[ dns.expectIPs.join(",") ]]</span>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty description='{{ i18n "emptyDnsDesc" }}' :style="{ margin: '10px' }">
|
||||
<a-button-group>
|
||||
<a-button type="primary" icon="plus" @click="addDNSServer()">
|
||||
<span>{{ i18n "pages.xray.dns.add" }}</span>
|
||||
</a-button>
|
||||
<a-button type="primary" icon="menu" @click="openDNSPresets()"></a-button>
|
||||
</a-button-group>
|
||||
</a-empty>
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header='Fake DNS'>
|
||||
<template v-if="fakeDns && fakeDns.length > 0">
|
||||
<a-space direction="vertical" size="middle">
|
||||
<a-button type="primary" icon="plus" @click="addFakedns()">{{ i18n "pages.xray.fakedns.add"
|
||||
}}</a-button>
|
||||
<a-table :columns="fakednsColumns" bordered :row-key="r => r.key" :data-source="fakeDns"
|
||||
:scroll="isMobile ? {} : { x: 200 }" :pagination="false" :indent-size="0"
|
||||
:locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}` }'>
|
||||
<template slot="action" slot-scope="text,fakedns,index">
|
||||
<span>[[ index+1 ]]</span>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-icon @click="e => e.preventDefault()" type="more"
|
||||
:style="{ fontSize: '16px', textDecoration: 'bold' }"></a-icon>
|
||||
<a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
|
||||
<a-menu-item @click="editFakedns(index)">
|
||||
<a-icon type="edit"></a-icon>
|
||||
<span>{{ i18n "edit" }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="deleteFakedns(index)">
|
||||
<span :style="{ color: '#FF4D4F' }">
|
||||
<a-icon type="delete"></a-icon>
|
||||
<span>{{ i18n "delete"}}</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty description='{{ i18n "emptyFakeDnsDesc" }}' :style="{ margin: '20px' }">
|
||||
<a-button type="primary" icon="plus" @click="addFakedns()" :style="{ marginTop: '10px' }">
|
||||
<span>{{ i18n "pages.xray.fakedns.add" }}</span>
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
</template>
|
||||
</a-collapse>
|
||||
{{end}}
|
||||
76
web/html/settings/xray/outbounds.html
Normal file
76
web/html/settings/xray/outbounds.html
Normal file
@@ -0,0 +1,76 @@
|
||||
{{define "settings/xray/outbounds"}}
|
||||
<a-space direction="vertical" size="middle">
|
||||
<a-row>
|
||||
<a-col :xs="12" :sm="12" :lg="12">
|
||||
<a-space direction="horizontal" size="small">
|
||||
<a-button type="primary" icon="plus" @click="addOutbound()">
|
||||
{{ i18n "pages.xray.outbound.addOutbound" }}
|
||||
</a-button>
|
||||
<a-button type="primary" icon="cloud" @click="showWarp()">WARP</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12" :lg="12" :style="{ textAlign: 'right' }">
|
||||
<a-button-group>
|
||||
<a-button icon="sync" @click="refreshOutboundTraffic()" :loading="refreshing"></a-button>
|
||||
<a-popconfirm placement="topRight" @confirm="resetOutboundTraffic(-1)"
|
||||
title='{{ i18n "pages.inbounds.resetTrafficContent"}}'
|
||||
:overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "reset"}}'
|
||||
cancel-text='{{ i18n "cancel"}}'>
|
||||
<a-icon slot="icon" type="question-circle-o"
|
||||
:style="{ color: themeSwitcher.isDarkTheme ? '#008771' : '#008771' }"></a-icon>
|
||||
<a-button icon="retweet"></a-button>
|
||||
</a-popconfirm>
|
||||
</a-button-group>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-table :columns="outboundColumns" bordered :row-key="r => r.key" :data-source="outboundData"
|
||||
:scroll="isMobile ? {} : { x: 800 }" :pagination="false" :indent-size="0"
|
||||
:locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}` }'>
|
||||
<template slot="action" slot-scope="text, outbound, index">
|
||||
<span>[[ index+1 ]]</span>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-icon @click="e => e.preventDefault()" type="more"
|
||||
:style="{ fontSize: '16px', textDecoration: 'bold' }"></a-icon>
|
||||
<a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
|
||||
<a-menu-item v-if="index>0" @click="setFirstOutbound(index)">
|
||||
<a-icon type="vertical-align-top"></a-icon>
|
||||
<span>{{ i18n "pages.xray.rules.first"}}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="editOutbound(index)">
|
||||
<a-icon type="edit"></a-icon>
|
||||
<span>{{ i18n "edit" }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="resetOutboundTraffic(index)">
|
||||
<span>
|
||||
<a-icon type="retweet"></a-icon>
|
||||
<span>{{ i18n "pages.inbounds.resetTraffic"}}</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="deleteOutbound(index)">
|
||||
<span :style="{ color: '#FF4D4F' }">
|
||||
<a-icon type="delete"></a-icon>
|
||||
<span>{{ i18n "delete"}}</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template slot="address" slot-scope="text, outbound, index">
|
||||
<p :style="{ margin: '0 5px' }" v-for="addr in findOutboundAddress(outbound)">[[ addr ]]</p>
|
||||
</template>
|
||||
<template slot="protocol" slot-scope="text, outbound, index">
|
||||
<a-tag :style="{ margin: '0' }" color="purple">[[ outbound.protocol ]]</a-tag>
|
||||
<template
|
||||
v-if="[Protocols.VMess, Protocols.VLESS, Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
|
||||
<a-tag :style="{ margin: '0' }" color="blue">[[ outbound.streamSettings.network ]]</a-tag>
|
||||
<a-tag :style="{ margin: '0' }" v-if="outbound.streamSettings.security=='tls'" color="green">tls</a-tag>
|
||||
<a-tag :style="{ margin: '0' }" v-if="outbound.streamSettings.security=='reality'"
|
||||
color="green">reality</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
<template slot="traffic" slot-scope="text, outbound, index">
|
||||
<a-tag color="green">[[ findOutboundTraffic(outbound) ]]</a-tag>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
{{end}}
|
||||
39
web/html/settings/xray/reverse.html
Normal file
39
web/html/settings/xray/reverse.html
Normal file
@@ -0,0 +1,39 @@
|
||||
{{define "settings/xray/reverse"}}
|
||||
<template v-if="reverseData.length > 0">
|
||||
<a-space direction="vertical" size="middle">
|
||||
<a-button type="primary" icon="plus" @click="addReverse()">
|
||||
<span>{{ i18n "pages.xray.outbound.addReverse" }}</span>
|
||||
</a-button>
|
||||
<a-table :columns="reverseColumns" bordered :row-key="r => r.key" :data-source="reverseData"
|
||||
:scroll="isMobile ? {} : { x: 200 }" :pagination="false" :indent-size="0"
|
||||
:locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}` }'>
|
||||
<template slot="action" slot-scope="text, reverse, index">
|
||||
<span>[[ index+1 ]]</span>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-icon @click="e => e.preventDefault()" type="more"
|
||||
:style="{ fontSize: '16px', textDecoration: 'bold' }"></a-icon>
|
||||
<a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
|
||||
<a-menu-item @click="editReverse(index)">
|
||||
<a-icon type="edit"></a-icon>
|
||||
<span>{{ i18n "edit" }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="deleteReverse(index)">
|
||||
<span :style="{ color: '#FF4D4F' }">
|
||||
<a-icon type="delete"></a-icon>
|
||||
<span>{{ i18n "delete"}}</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty description='{{ i18n "emptyReverseDesc" }}' :style="{ margin: '10px' }">
|
||||
<a-button type="primary" icon="plus" @click="addReverse()" :style="{ marginTop: '10px' }">
|
||||
{{ i18n "pages.xray.outbound.addReverse" }}
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</template>
|
||||
{{end}}
|
||||
119
web/html/settings/xray/routing.html
Normal file
119
web/html/settings/xray/routing.html
Normal file
@@ -0,0 +1,119 @@
|
||||
{{define "settings/xray/routing"}}
|
||||
<a-space direction="vertical" size="middle">
|
||||
<a-button type="primary" icon="plus" @click="addRule">{{ i18n "pages.xray.rules.add" }}</a-button>
|
||||
<a-table-sortable :columns="isMobile ? rulesMobileColumns : rulesColumns" bordered :row-key="r => r.key"
|
||||
:data-source="routingRuleData" :scroll="isMobile ? {} : { x: 1000 }" :pagination="false" :indent-size="0"
|
||||
v-on:onSort="replaceRule">
|
||||
<template slot="action" slot-scope="text, rule, index">
|
||||
<a-table-sort-trigger :item-index="index"></a-table-sort-trigger>
|
||||
<span class="ant-table-row-index"> [[ index+1 ]] </span>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-icon @click="e => e.preventDefault()" type="more"
|
||||
:style="{ fontSize: '16px', textDecoration: 'bold' }"></a-icon>
|
||||
<a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
|
||||
<a-menu-item v-if="index>0" @click="replaceRule(index,0)">
|
||||
<a-icon type="vertical-align-top"></a-icon>
|
||||
{{ i18n "pages.xray.rules.first"}}
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="index>0" @click="replaceRule(index,index-1)">
|
||||
<a-icon type="arrow-up"></a-icon>
|
||||
{{ i18n "pages.xray.rules.up"}}
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="index<routingRuleData.length-1" @click="replaceRule(index,index+1)">
|
||||
<a-icon type="arrow-down"></a-icon>
|
||||
{{ i18n "pages.xray.rules.down"}}
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="index<routingRuleData.length-1"
|
||||
@click="replaceRule(index,routingRuleData.length-1)">
|
||||
<a-icon type="vertical-align-bottom"></a-icon>
|
||||
{{ i18n "pages.xray.rules.last"}}
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="editRule(index)">
|
||||
<a-icon type="edit"></a-icon>
|
||||
{{ i18n "edit" }}
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="deleteRule(index)">
|
||||
<span :style="{ color: '#FF4D4F' }">
|
||||
<a-icon type="delete"></a-icon> {{ i18n "delete"}}
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template slot="inbound" slot-scope="text, rule, index">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content">
|
||||
<p v-if="rule.inboundTag">Inbound Tag: [[ rule.inboundTag ]]</p>
|
||||
<p v-if="rule.user">User email: [[ rule.user ]]</p>
|
||||
</template>
|
||||
[[ [rule.inboundTag,rule.user].join('\n') ]]
|
||||
</a-popover>
|
||||
</template>
|
||||
<template slot="outbound" slot-scope="text, rule, index">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content">
|
||||
<p v-if="rule.outboundTag">Outbound Tag: [[ rule.outboundTag ]]</p>
|
||||
</template>
|
||||
[[ rule.outboundTag ]]
|
||||
</a-popover>
|
||||
</template>
|
||||
<template slot="balancer" slot-scope="text, rule, index">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||
<template slot="content">
|
||||
<p v-if="rule.balancerTag">Balancer Tag: [[ rule.balancerTag ]]</p>
|
||||
</template>
|
||||
[[ rule.balancerTag ]]
|
||||
</a-popover>
|
||||
</template>
|
||||
<template slot="info" slot-scope="text, rule, index">
|
||||
<a-popover placement="bottomRight"
|
||||
v-if="(rule.source+rule.sourcePort+rule.network+rule.protocol+rule.attrs+rule.ip+rule.domain+rule.port).length>0"
|
||||
:overlay-class-name="themeSwitcher.currentTheme" trigger="click">
|
||||
<template slot="content">
|
||||
<table cellpadding="2" :style="{ maxWidth: '300px' }">
|
||||
<tr v-if="rule.source">
|
||||
<td>Source</td>
|
||||
<td><a-tag color="blue" v-for="r in rule.source.split(',')">[[ r ]]</a-tag></td>
|
||||
</tr>
|
||||
<tr v-if="rule.sourcePort">
|
||||
<td>Source Port</td>
|
||||
<td><a-tag color="green" v-for="r in rule.sourcePort.split(',')">[[ r ]]</a-tag></td>
|
||||
</tr>
|
||||
<tr v-if="rule.network">
|
||||
<td>Network</td>
|
||||
<td><a-tag color="blue" v-for="r in rule.network.split(',')">[[ r ]]</a-tag></td>
|
||||
</tr>
|
||||
<tr v-if="rule.protocol">
|
||||
<td>Protocol</td>
|
||||
<td><a-tag color="green" v-for="r in rule.protocol.split(',')">[[ r ]]</a-tag></td>
|
||||
</tr>
|
||||
<tr v-if="rule.attrs">
|
||||
<td>Attrs</td>
|
||||
<td><a-tag color="blue" v-for="r in rule.attrs.split(',')">[[ r ]]</a-tag></td>
|
||||
</tr>
|
||||
<tr v-if="rule.ip">
|
||||
<td>IP</td>
|
||||
<td><a-tag color="green" v-for="r in rule.ip.split(',')">[[ r ]]</a-tag></td>
|
||||
</tr>
|
||||
<tr v-if="rule.domain">
|
||||
<td>Domain</td>
|
||||
<td><a-tag color="blue" v-for="r in rule.domain.split(',')">[[ r ]]</a-tag></td>
|
||||
</tr>
|
||||
<tr v-if="rule.port">
|
||||
<td>Port</td>
|
||||
<td><a-tag color="green" v-for="r in rule.port.split(',')">[[ r ]]</a-tag></td>
|
||||
</tr>
|
||||
<tr v-if="rule.balancerTag">
|
||||
<td>Balancer Tag</td>
|
||||
<td><a-tag color="blue">[[ rule.balancerTag ]]</a-tag></td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
<a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
|
||||
<a-icon type="info"></a-icon>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</template>
|
||||
</a-table-sortable>
|
||||
</a-space>
|
||||
{{end}}
|
||||
1487
web/html/xray.html
Normal file
1487
web/html/xray.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user