diff options
| -rw-r--r-- | web/html/component/aClientTable.html | 8 | ||||
| -rw-r--r-- | web/html/inbounds.html | 2202 | ||||
| -rw-r--r-- | web/html/modals/inbound_info_modal.html | 14 | ||||
| -rw-r--r-- | web/service/inbound.go | 11 |
4 files changed, 1162 insertions, 1073 deletions
diff --git a/web/html/component/aClientTable.html b/web/html/component/aClientTable.html index a7279e50..572b1be5 100644 --- a/web/html/component/aClientTable.html +++ b/web/html/component/aClientTable.html @@ -37,7 +37,7 @@ <template slot="content" > {{ i18n "lastOnline" }}: [[ formatLastOnline(client.email) ]] </template> - <template v-if="client.enable && isClientOnline(client.email)"> + <template v-if="client.enable && isClientOnline(client.email) && !isClientDepleted"> <a-tag color="green">{{ i18n "online" }}</a-tag> </template> <template v-else> @@ -49,9 +49,9 @@ <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 v-if="isClientDepleted">{{ i18n "depleted" }}</template> + <template v-if="!isClientDepleted && !client.enable">{{ i18n "disabled" }}</template> + <template v-if="!isClientDepleted && 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> diff --git a/web/html/inbounds.html b/web/html/inbounds.html index 328a9cd5..84b5fda8 100644 --- a/web/html/inbounds.html +++ b/web/html/inbounds.html @@ -9,15 +9,13 @@ <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'> <transition name="list" appear> <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }" - message='{{ i18n "secAlertTitle" }}' - color="red" - description='{{ i18n "secAlertSsl" }}' - show-icon closable> + message='{{ i18n "secAlertTitle" }}' color="red" description='{{ i18n "secAlertSsl" }}' show-icon closable> </a-alert> </transition> <transition name="list" appear> <a-row v-if="!loadingStates.fetched"> - <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }"> + <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> @@ -26,40 +24,47 @@ <a-card size="small" :style="{ padding: '16px' }" hoverable> <a-row> <a-col :sm="12" :md="5"> - <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}' :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`"> + <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="5"> - <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}' :value="SizeFormatter.sizeFormat(total.up + total.down)" :style="{ marginTop: isMobile ? '10px' : 0 }"> + <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="5"> - <a-custom-statistic title='{{ i18n "pages.inbounds.allTimeTrafficUsage" }}' :value="SizeFormatter.sizeFormat(total.allTime)" :style="{ marginTop: isMobile ? '10px' : 0 }"> + <a-custom-statistic title='{{ i18n "pages.inbounds.allTimeTrafficUsage" }}' + :value="SizeFormatter.sizeFormat(total.allTime)" :style="{ marginTop: isMobile ? '10px' : 0 }"> <template #prefix> <a-icon type="history"></a-icon> </template> </a-custom-statistic> </a-col> <a-col :sm="12" :md="5"> - <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length" :style="{ marginTop: isMobile ? '10px' : 0 }"> + <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="4"> - <a-custom-statistic title='{{ i18n "clients" }}' value=" " :style="{ marginTop: isMobile ? '10px' : 0 }"> + <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-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"> @@ -73,7 +78,8 @@ </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"> + <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> @@ -136,7 +142,7 @@ <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"> + <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> @@ -146,11 +152,8 @@ <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 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> @@ -162,13 +165,15 @@ <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"> + :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-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> @@ -177,25 +182,24 @@ </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' }" - :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}`, emptyText: `{{ i18n "noData" }}` }'> + :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' }" + :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}`, emptyText: `{{ i18n "noData" }}` }'> <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-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-menu-item key="qrcode" + v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard"> <a-icon type="qrcode"></a-icon> {{ i18n "qrCode" }} </a-menu-item> @@ -247,7 +251,8 @@ </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> + <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> @@ -257,8 +262,10 @@ <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> + <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"> @@ -266,59 +273,75 @@ <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" :key="clientEmail" class="client-popup-item"> + <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" + class="client-popup-item"> <span>[[ clientEmail ]]</span> <a-tooltip :overlay-class-name="themeSwitcher.currentTheme"> <template #title> [[ clientCount[dbInbound.id].comments.get(clientEmail) ]] </template> - <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> + <a-icon type="message" + v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> </a-tooltip> </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-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" :key="clientEmail" class="client-popup-item"> + <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" + class="client-popup-item"> <span>[[ clientEmail ]]</span> <a-tooltip :overlay-class-name="themeSwitcher.currentTheme"> <template #title> [[ clientCount[dbInbound.id].comments.get(clientEmail) ]] </template> - <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> + <a-icon type="message" + v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> </a-tooltip> </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-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" :key="clientEmail" class="client-popup-item"> + <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" + class="client-popup-item"> <span>[[ clientEmail ]]</span> <a-tooltip :overlay-class-name="themeSwitcher.currentTheme"> <template #title> [[ clientCount[dbInbound.id].comments.get(clientEmail) ]] </template> - <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> + <a-icon type="message" + v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> </a-tooltip> </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-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" :key="clientEmail" class="client-popup-item"> + <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" + class="client-popup-item"> <span>[[ clientEmail ]]</span> <a-tooltip :overlay-class-name="themeSwitcher.currentTheme"> <template #title> [[ clientCount[dbInbound.id].comments.get(clientEmail) ]] </template> - <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> + <a-icon type="message" + v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> </a-tooltip> </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-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> @@ -336,14 +359,17 @@ </tr> </table> </template> - <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)"> + <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) ]] + [[ 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> + <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> @@ -353,7 +379,8 @@ <a-tag>[[ SizeFormatter.sizeFormat(dbInbound.allTime || 0) ]]</a-tag> </template> <template slot="enable" slot-scope="text, dbInbound"> - <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch> + <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"> @@ -363,28 +390,36 @@ <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)"> + <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> + <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"> + <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 + 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> @@ -395,62 +430,82 @@ <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"> + <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"> - <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item"> + <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" + class="client-popup-item"> <span>[[ clientEmail ]]</span> <a-tooltip :overlay-class-name="themeSwitcher.currentTheme"> <template #title> [[ clientCount[dbInbound.id].comments.get(clientEmail) ]] </template> - <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> + <a-icon type="message" + v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> </a-tooltip> </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-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"> + <a-popover title='{{ i18n "depleted" }}' + :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item"> + <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" + class="client-popup-item"> <span>[[ clientEmail ]]</span> <a-tooltip :overlay-class-name="themeSwitcher.currentTheme"> <template #title> [[ clientCount[dbInbound.id].comments.get(clientEmail) ]] </template> - <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> + <a-icon type="message" + v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> </a-tooltip> </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-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"> + <a-popover title='{{ i18n "depletingSoon" }}' + :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item"> + <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" + class="client-popup-item"> <span>[[ clientEmail ]]</span> <a-tooltip :overlay-class-name="themeSwitcher.currentTheme"> <template #title> [[ clientCount[dbInbound.id].comments.get(clientEmail) ]] </template> - <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> + <a-icon type="message" + v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> </a-tooltip> </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-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" :key="clientEmail" class="client-popup-item"> + <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" + class="client-popup-item"> <span>[[ clientEmail ]]</span> <a-tooltip :overlay-class-name="themeSwitcher.currentTheme"> <template #title> [[ clientCount[dbInbound.id].comments.get(clientEmail) ]] </template> - <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> + <a-icon type="message" + v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon> </a-tooltip> </div> </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-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> @@ -464,20 +519,25 @@ <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"> + <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> + <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> + <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> + <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> @@ -487,8 +547,8 @@ <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'"> + <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> @@ -498,7 +558,9 @@ </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> + <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> @@ -506,13 +568,15 @@ <tr> <td>{{ i18n "pages.inbounds.periodicTrafficResetTitle" }}</td> |