diff options
Diffstat (limited to 'web/html/inbounds.html')
| -rw-r--r-- | web/html/inbounds.html | 1530 |
1 files changed, 1530 insertions, 0 deletions
diff --git a/web/html/inbounds.html b/web/html/inbounds.html new file mode 100644 index 00000000..cadcb95a --- /dev/null +++ b/web/html/inbounds.html @@ -0,0 +1,1530 @@ +<!DOCTYPE html> +<html lang="en"> +{{template "head" .}} +<style> + .ant-table:not(.ant-table-expanded-row .ant-table) { + outline: 1px solid #f0f0f0; + outline-offset: -1px; + border-radius: 1rem; + overflow-x: hidden; + } + .dark .ant-table:not(.ant-table-expanded-row .ant-table) { + outline-color: var(--dark-color-table-ring); + } + .ant-table .ant-table-content .ant-table-scroll .ant-table-body { + overflow-y: hidden; + } + .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper { + margin:-10px 22px !important; + } + .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper .ant-table { + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + } + .ant-table .ant-table-content .ant-table-tbody tr:last-child tr:last-child td { + border-bottom-color: transparent; + } + .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:first-child { + border-bottom-left-radius: 6px; + } + .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:last-child { + border-bottom-right-radius: 6px; + } + @media (min-width: 769px) { + .ant-layout-content { + margin: 24px 16px; + } + } + @media (max-width: 768px) { + .ant-card-body { + padding: .5rem; + } + .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper { + margin:-10px 2px !important; + } + } + .dark .ant-switch-small:not(.ant-switch-checked) { + background-color: var(--dark-color-surface-100) !important; + } + .ant-custom-popover-title { + display: flex; + align-items: center; + gap: 10px; + margin: 5px 0; + } + .ant-col-sm-24 { + margin: 0.5rem -2rem 0.5rem 2rem; + } + tr.hideExpandIcon .ant-table-row-expand-icon { + display: none; + } + .infinite-tag { + padding: 0 5px; + border-radius: 2rem; + min-width: 50px; + min-height: 22px; + } + .infinite-bar .ant-progress-inner .ant-progress-bg { + background-color: #F2EAF1; + border: #D5BED2 solid 1px; + } + .dark .infinite-bar .ant-progress-inner .ant-progress-bg { + background-color: #7a316f !important; + border: #7a316f solid 1px; + } + .ant-collapse { + margin: 5px 0; + } + .info-large-tag { + max-width: 200px; + overflow: hidden; + } + .online-animation .ant-badge-status-dot { + animation: onlineAnimation 1.2s linear infinite; + } + @keyframes onlineAnimation { + 0%, + 50%, + 100% { + transform: scale(1); + opacity: 1; + } + 10% { + transform: scale(1.5); + opacity: .2; + } + } + .tr-table-box { + display: flex; + gap: 4px; + justify-content: center; + align-items: center; + } + .tr-table-rt { + flex-basis: 70px; + min-width: 70px; + text-align: end; + } + .tr-table-lt { + flex-basis: 70px; + min-width: 70px; + text-align: start; + } + .tr-table-bar { + flex-basis: 160px; + min-width: 60px; + } + .tr-infinity-ch { + font-size: 14pt; + max-height: 24px; + display: inline-flex; + align-items: center; + } + .ant-table-expanded-row .ant-table .ant-table-body { + overflow-x: hidden; + } + .ant-table-expanded-row .ant-table-tbody>tr>td { + padding: 10px 2px; + } + .ant-table-expanded-row .ant-table-thead>tr>th { + padding: 12px 2px; + } +</style> + +<body> +<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> + <a-sidebar></a-sidebar> + <a-layout id="content-layout"> + <a-layout-content> + <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'> + <transition name="list" appear> + <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }" + message='{{ i18n "secAlertTitle" }}' + color="red" + description='{{ i18n "secAlertSsl" }}' + show-icon closable> + </a-alert> + </transition> + <transition name="list" appear> + <a-card size="small" :style="{ padding: '16px' }" hoverable> + <a-row> + <a-col :sm="12" :md="6"> + <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}' :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`"> + <template #prefix> + <a-icon type="swap"></a-icon> + </template> + </a-custom-statistic> + </a-col> + <a-col :sm="12" :md="6"> + <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}' :value="SizeFormatter.sizeFormat(total.up + total.down)" :style="{ marginTop: isMobile ? '10px' : 0 }"> + <template #prefix> + <a-icon type="pie-chart"></a-icon> + </template> + </a-custom-statistic> + </a-col> + <a-col :sm="12" :md="6"> + <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length" :style="{ marginTop: isMobile ? '10px' : 0 }"> + <template #prefix> + <a-icon type="bars"></a-icon> + </template> + </a-custom-statistic> + </a-col> + <a-col :sm="12" :md="6"> + <a-custom-statistic title='{{ i18n "clients" }}' value=" " :style="{ marginTop: isMobile ? '10px' : 0 }"> + <template #prefix> + <a-space direction="horizontal"> + <a-icon type="team"></a-icon> + <div> + <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top> + <a-tag color="green">[[ total.clients ]]</a-tag> + <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <div v-for="clientEmail in total.deactive"><span>[[ clientEmail ]]</span></div> + </template> + <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <div v-for="clientEmail in total.depleted"><span>[[ clientEmail ]]</span></div> + </template> + <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <div v-for="clientEmail in total.expiring"><span>[[ clientEmail ]]</span></div> + </template> + <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <div v-for="clientEmail in onlineClients"><span>[[ clientEmail ]]</span></div> + </template> + <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag> + </a-popover> + </div> + </a-space> + </template> + </a-custom-statistic> + </a-col> + </a-row> + </a-card> + </transition> + <transition name="list" appear> + <a-card hoverable> + <template #title> + <a-space direction="horizontal"> + <a-button type="primary" icon="plus" @click="openAddInbound"> + <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template> + </a-button> + <a-dropdown :trigger="['click']"> + <a-button type="primary" icon="menu"> + <template v-if="!isMobile">{{ i18n "pages.inbounds.generalActions" }}</template> + </a-button> + <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme"> + <a-menu-item key="import"> + <a-icon type="import"></a-icon> + {{ i18n "pages.inbounds.importInbound" }} + </a-menu-item> + <a-menu-item key="export"> + <a-icon type="export"></a-icon> + {{ i18n "pages.inbounds.export" }} + </a-menu-item> + <a-menu-item key="subs" v-if="subSettings.enable"> + <a-icon type="export"></a-icon> + {{ i18n "pages.inbounds.export" }} - {{ i18n "pages.settings.subSettings" }} + </a-menu-item> + <a-menu-item key="resetInbounds"> + <a-icon type="reload"></a-icon> + {{ i18n "pages.inbounds.resetAllTraffic" }} + </a-menu-item> + <a-menu-item key="resetClients"> + <a-icon type="file-done"></a-icon> + {{ i18n "pages.inbounds.resetAllClientTraffics" }} + </a-menu-item> + <a-menu-item key="delDepletedClients" :style="{ color: '#FF4D4F' }"> + <a-icon type="rest"></a-icon> + {{ i18n "pages.inbounds.delDepletedClients" }} + </a-menu-item> + </a-menu> + </a-dropdown> + </a-space> + </template> + <template #extra> + <a-button-group> + <a-button icon="sync" @click="manualRefresh" :loading="refreshing"></a-button> + <a-popover placement="bottomRight" trigger="click" :overlay-class-name="themeSwitcher.currentTheme"> + <template #title> + <div class="ant-custom-popover-title"> + <a-switch v-model="isRefreshEnabled" @change="toggleRefresh" size="small"></a-switch> + <span>{{ i18n "pages.inbounds.autoRefresh" }}</span> + </div> + </template> + <template #content> + <a-space direction="vertical"> + <span>{{ i18n "pages.inbounds.autoRefreshInterval" }}</span> + <a-select v-model="refreshInterval" + :disabled="!isRefreshEnabled" + :style="{ width: '100%' }" + @change="changeRefreshInterval" + :dropdown-class-name="themeSwitcher.currentTheme"> + <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option> + </a-select> + </a-space> + </template> + <a-button icon="down"></a-button> + </a-popover> + </a-button-group> + </template> + <a-space direction="vertical"> + <div :style="isMobile ? {} : { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }"> + <a-switch v-model="enableFilter" + :style="isMobile ? { marginBottom: '.5rem', display: 'flex' } : { marginRight: '.5rem' }" + @change="toggleFilter"> + <a-icon slot="checkedChildren" type="search"></a-icon> + <a-icon slot="unCheckedChildren" type="filter"></a-icon> + </a-switch> + <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus :style="{ maxWidth: '300px' }" :size="isMobile ? 'small' : ''"></a-input> + <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''"> + <a-radio-button value="">{{ i18n "none" }}</a-radio-button> + <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button> + <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button> + <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button> + <a-radio-button value="online">{{ i18n "online" }}</a-radio-button> + </a-radio-group> + </div> + <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id" + :data-source="searchedInbounds" + :scroll="isMobile ? {} : { x: 1000 }" + :pagination=pagination(searchedInbounds) + :expand-icon-as-cell="false" + :expand-row-by-click="false" + :expand-icon-column-index="0" + :indent-size="0" + :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')" + :style="{ marginTop: '10px' }"> + <template slot="action" slot-scope="text, dbInbound"> + <a-dropdown :trigger="['click']"> + <a-icon @click="e => e.preventDefault()" type="more" :style="{ fontSize: '20px', textDecoration: 'solid' }"></a-icon> + <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme"> + <a-menu-item key="edit"> + <a-icon type="edit"></a-icon> + {{ i18n "edit" }} + </a-menu-item> + <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard"> + <a-icon type="qrcode"></a-icon> + {{ i18n "qrCode" }} + </a-menu-item> + <template v-if="dbInbound.isMultiUser()"> + <a-menu-item key="addClient"> + <a-icon type="user-add"></a-icon> + {{ i18n "pages.client.add"}} + </a-menu-item> + <a-menu-item key="addBulkClient"> + <a-icon type="usergroup-add"></a-icon> + {{ i18n "pages.client.bulk"}} + </a-menu-item> + <a-menu-item key="resetClients"> + <a-icon type="file-done"></a-icon> + {{ i18n "pages.inbounds.resetInboundClientTraffics"}} + </a-menu-item> + <a-menu-item key="export"> + <a-icon type="export"></a-icon> + {{ i18n "pages.inbounds.export"}} + </a-menu-item> + <a-menu-item key="subs" v-if="subSettings.enable"> + <a-icon type="export"></a-icon> + {{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }} + </a-menu-item> + <a-menu-item key="delDepletedClients" :style="{ color: '#FF4D4F' }"> + <a-icon type="rest"></a-icon> + {{ i18n "pages.inbounds.delDepletedClients" }} + </a-menu-item> + </template> + <template v-else> + <a-menu-item key="showInfo"> + <a-icon type="info-circle"></a-icon> + {{ i18n "info"}} + </a-menu-item> + </template> + <a-menu-item key="clipboard"> + <a-icon type="copy"></a-icon> + {{ i18n "pages.inbounds.exportInbound" }} + </a-menu-item> + <a-menu-item key="resetTraffic"> + <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }} + </a-menu-item> + <a-menu-item key="clone"> + <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}} + </a-menu-item> + <a-menu-item key="delete"> + <span :style="{ color: '#FF4D4F' }"> + <a-icon type="delete"></a-icon> {{ i18n "delete"}} + </span> + </a-menu-item> + <a-menu-item v-if="isMobile"> + <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch> + {{ i18n "pages.inbounds.enable" }} + </a-menu-item> + </a-menu> + </a-dropdown> + </template> + <template slot="protocol" slot-scope="text, dbInbound"> + <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag> + <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS"> + <a-tag :style="{ margin: '0' }" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag> + <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag> + <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag> + </template> + </template> + <template slot="clients" slot-scope="text, dbInbound"> + <template v-if="clientCount[dbInbound.id]"> + <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag> + <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <div v-for="clientEmail in clientCount[dbInbound.id].deactive"><span>[[ clientEmail ]]</span></div> + </template> + <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <div v-for="clientEmail in clientCount[dbInbound.id].depleted"><span>[[ clientEmail ]]</span></div> + </template> + <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <div v-for="clientEmail in clientCount[dbInbound.id].expiring"><span>[[ clientEmail ]]</span></div> + </template> + <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <div v-for="clientEmail in clientCount[dbInbound.id].online"><span>[[ clientEmail ]]</span></div> + </template> + <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag> + </a-popover> + </template> + </template> + <template slot="traffic" slot-scope="text, dbInbound"> + <a-popover :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <table cellpadding="2" width="100%"> + <tr> + <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td> + <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td> + </tr> + <tr v-if="dbInbound.total > 0 && dbInbound.up + dbInbound.down < dbInbound.total"> + <td>{{ i18n "remained" }}</td> + <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td> + </tr> + </table> + </template> + <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)"> + [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] / + <template v-if="dbInbound.total > 0"> + [[ SizeFormatter.sizeFormat(dbInbound.total) ]] + </template> + <template v-else> + <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> + </template> + </a-tag> + </a-popover> + </template> + <template slot="enable" slot-scope="text, dbInbound"> + <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch> + </template> + <template slot="expiryTime" slot-scope="text, dbInbound"> + <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content" v-if="app.datepicker === 'gregorian'"> + [[ DateUtil.formatMillis(dbInbound.expiryTime) ]] + </template> + <template v-else slot="content"> + [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]] + </template> + <a-tag :style="{ minWidth: '50px' }" :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)"> + [[ remainedDays(dbInbound._expiryTime) ]] + </a-tag> + </a-popover> + <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> + </template> + <template slot="info" slot-scope="text, dbInbound"> + <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click"> + <template slot="content"> + <table cellpadding="2"> + <tr> + <td>{{ i18n "pages.inbounds.protocol" }}</td> + <td> + <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag> + <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS"> + <a-tag :style="{ margin: '0' }" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag> + <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag> + <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag> + </template> + </td> + </tr> + <tr> + <td>{{ i18n "pages.inbounds.port" }}</td> + <td><a-tag>[[ dbInbound.port ]]</a-tag></td> + </tr> + <tr v-if="clientCount[dbInbound.id]"> + <td>{{ i18n "clients" }}</td> + <td> + <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag> + <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p> + </template> + <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p> + </template> + <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p> + </template> + <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag> + </a-popover> + <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p> + </template> + <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag> + </a-popover> + </td> + </tr> + <tr> + <td>{{ i18n "pages.inbounds.traffic" }}</td> + <td> + <a-popover :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <table cellpadding="2" width="100%"> + <tr> + <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td> + <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td> + </tr> + <tr v-if="dbInbound.total > 0 && dbInbound.up + dbInbound.down < dbInbound.total"> + <td>{{ i18n "remained" }}</td> + <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td> + </tr> + </table> + </template> + <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)"> + [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] / + <template v-if="dbInbound.total > 0"> + [[ SizeFormatter.sizeFormat(dbInbound.total) ]] + </template> + <template v-else> + <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> + </template> + </a-tag> + </a-popover> + </td> + </tr> + <tr> + <td>{{ i18n "pages.inbounds.expireDate" }}</td> + <td> + <a-tag :style="{ minWidth: '50px', textAlign: 'center' }" v-if="dbInbound.expiryTime > 0" + :color="dbInbound.isExpiry? 'red': 'blue'"> + <template v-if="app.datepicker === 'gregorian'"> + [[ DateUtil.formatMillis(dbInbound.expiryTime) ]] + </template> + <template v-else> + [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]] + </template> + </a-tag> + <a-tag v-else :style="{ textAlign: 'center' }" 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> + <a-badge> + <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon> + <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }"> + <a-icon type="info"></a-icon> + </a-button> + </a-badge> + </a-popover> + </template> + <template slot="expandedRowRender" slot-scope="record"> + <a-table + :row-key="client => client.id" + :columns="isMobile ? innerMobileColumns : innerColumns" + :data-source="getInboundClients(record)" + :pagination=pagination(getInboundClients(record)) + :style="{ margin: `-10px ${isMobile ? '2px' : '22px'} -11px` }"> + {{template "component/aClientTable"}} + </a-table> + </template> + </a-table> + </a-space> + </a-card> + </transition> + </a-spin> + </a-layout-content> + </a-layout> +</a-layout> +{{template "js" .}} +<script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script> +<script src="{{ .base_path }}assets/uri/URI.min.js?{{ .cur_ver }}"></script> +<script src="{{ .base_path }}assets/js/model/inbound.js?{{ .cur_ver }}"></script> +<script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script> +{{template "component/aSidebar" .}} +{{template "component/aThemeSwitch" .}} +{{template "component/aCustomStatistic" .}} +{{template "component/aPersianDatepicker" .}} +<script> + const columns = [{ + title: "ID", + align: 'right', + dataIndex: "id", + width: 30, + responsive: ["xs"], + }, { + title: '{{ i18n "pages.inbounds.operate" }}', + align: 'center', + width: 30, + scopedSlots: { customRender: 'action' }, + }, { + title: '{{ i18n "pages.inbounds.enable" }}', + align: 'center', + width: 30, + scopedSlots: { customRender: 'enable' }, + }, { + title: '{{ i18n "pages.inbounds.remark" }}', + align: 'center', + width: 60, + dataIndex: "remark", + }, { + title: '{{ i18n "pages.inbounds.port" }}', + align: 'center', + dataIndex: "port", + width: 40, + }, { + title: '{{ i18n "pages.inbounds.protocol" }}', + align: 'left', + width: 70, + scopedSlots: { customRender: 'protocol' }, + }, { + title: '{{ i18n "clients" }}', + align: 'left', + width: 50, + scopedSlots: { customRender: 'clients' }, + }, { + title: '{{ i18n "pages.inbounds.traffic" }}', + align: 'center', + width: 60, + scopedSlots: { customRender: 'traffic' }, + }, { + title: '{{ i18n "pages.inbounds.expireDate" }}', + align: 'center', + width: 40, + scopedSlots: { customRender: 'expiryTime' }, + }]; + + const mobileColumns = [{ + title: "ID", + align: 'right', + dataIndex: "id", + width: 10, + responsive: ["s"], + }, { + title: '{{ i18n "pages.inbounds.operate" }}', + align: 'center', + width: 25, + scopedSlots: { customRender: 'action' }, + }, { + title: '{{ i18n "pages.inbounds.remark" }}', + align: 'left', + width: 70, + dataIndex: "remark", + }, { + title: '{{ i18n "pages.inbounds.info" }}', + align: 'center', + width: 10, + scopedSlots: { customRender: 'info' }, + }]; + + const innerColumns = [ + { title: '{{ i18n "pages.inbounds.operate" }}', width: 65, scopedSlots: { customRender: 'actions' } }, + { title: '{{ i18n "pages.inbounds.enable" }}', width: 30, scopedSlots: { customRender: 'enable' } }, + { title: '{{ i18n "online" }}', width: 30, scopedSlots: { customRender: 'online' } }, + { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } }, + { title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } }, + { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, align: 'center', scopedSlots: { customRender: 'expiryTime' } }, + ]; + + const innerMobileColumns = [ + { title: '{{ i18n "pages.inbounds.operate" }}', width: 10, align: 'center', scopedSlots: { customRender: 'actionMenu' } }, + { title: '{{ i18n "pages.inbounds.client" }}', width: 90, align: 'left', scopedSlots: { customRender: 'client' } }, + { title: '{{ i18n "pages.inbounds.info" }}', width: 10, align: 'center', scopedSlots: { customRender: 'info' } }, + ]; + + const app = new Vue({ + delimiters: ['[[', ']]'], + el: '#app', + mixins: [MediaQueryMixin], + data: { + themeSwitcher, + persianDatepicker, + spinning: false, + inbounds: [], + dbInbounds: [], + searchKey: '', + enableFilter: false, + filterBy: '', + searchedInbounds: [], + expireDiff: 0, + trafficDiff: 0, + defaultCert: '', + defaultKey: '', + clientCount: [], + onlineClients: [], + isRefreshEnabled: localStorage.getItem("isRefreshEnabled") === "true" ? true : false, + refreshing: false, + refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000, + subSettings: { + enable : false, + subTitle : '', + subURI : '', + subJsonURI : '', + }, + remarkModel: '-ieo', + datepicker: 'gregorian', + tgBotEnable: false, + showAlert: false, + ipLimitEnable: false, + pageSize: 50, + }, + methods: { + loading(spinning = true) { + this.spinning = spinning; + }, + async getDBInbounds() { + this.refreshing = true; + const msg = await HttpUtil.post('/panel/inbound/list'); + if (!msg.success) { + this.refreshing = false; + return; + } + + await this.getOnlineUsers(); + this.setInbounds(msg.obj); + setTimeout(() => { + this.refreshing = false; + }, 500); + }, + async getOnlineUsers() { + const msg = await HttpUtil.post('/panel/inbound/onlines'); + if (!msg.success) { + return; + } + this.onlineClients = msg.obj != null ? msg.obj : []; + }, + async getDefaultSettings() { + const msg = await HttpUtil.post('/panel/setting/defaultSettings'); + if (!msg.success) { + return; + } + with(msg.obj){ + this.expireDiff = expireDiff * 864
|