|
|
|
|
@@ -2,30 +2,39 @@
|
|
|
|
|
<template slot="actions" slot-scope="text, client, index">
|
|
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">{{ i18n "qrCode" }}</template>
|
|
|
|
|
<a-icon :style="{ fontSize: '22px', marginInlineStart: '14px' }" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
|
|
|
|
|
<a-icon :style="{ fontSize: '22px', marginInlineStart: '14px' }" 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: '22px' }" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
|
|
|
|
|
<a-icon :style="{ fontSize: '22px' }" 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: '22px' }" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
|
|
|
|
|
<a-icon :style="{ fontSize: '22px' }" 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-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: '22px', cursor: 'pointer' }" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
|
|
|
|
|
<a-icon :style="{ fontSize: '22px', 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-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: '22px', cursor: 'pointer' }" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
|
|
|
|
|
<a-icon :style="{ fontSize: '22px', cursor: 'pointer' }" class="delete-icon" type="delete"
|
|
|
|
|
v-if="isRemovable(record.id)"></a-icon>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</template>
|
|
|
|
|
@@ -34,7 +43,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
<template slot="online" slot-scope="text, client, index">
|
|
|
|
|
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
|
|
|
|
<template slot="content" >
|
|
|
|
|
<template slot="content">
|
|
|
|
|
{{ i18n "lastOnline" }}: [[ formatLastOnline(client.email) ]]
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="client.enable && isClientOnline(client.email)">
|
|
|
|
|
@@ -53,7 +62,8 @@
|
|
|
|
|
<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-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>
|
|
|
|
|
@@ -87,10 +97,13 @@
|
|
|
|
|
<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)" />
|
|
|
|
|
<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="isClientDepleted(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
|
|
|
|
|
<a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false"
|
|
|
|
|
:status="isClientDepleted(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>
|
|
|
|
|
@@ -118,7 +131,8 @@
|
|
|
|
|
<tr class="tr-table-box">
|
|
|
|
|
<td class="tr-table-rt"> [[ IntlUtil.formatRelativeTime(client.expiryTime) ]] </td>
|
|
|
|
|
<td class="infinite-bar tr-table-bar">
|
|
|
|
|
<a-progress :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
|
|
|
|
|
<a-progress :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''"
|
|
|
|
|
:percent="expireProgress(client.expiryTime, client.reset)" />
|
|
|
|
|
</td>
|
|
|
|
|
<td class="tr-table-lt">[[ client.reset + "d" ]]</td>
|
|
|
|
|
</tr>
|
|
|
|
|
@@ -131,11 +145,16 @@
|
|
|
|
|
<span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
|
|
|
|
|
<span v-else>[[ IntlUtil.formatDate(client.expiryTime) ]]</span>
|
|
|
|
|
</template>
|
|
|
|
|
<a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ IntlUtil.formatRelativeTime(client.expiryTime) ]] </a-tag>
|
|
|
|
|
<a-tag :style="{ minWidth: '50px', border: 'none' }"
|
|
|
|
|
:color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[
|
|
|
|
|
IntlUtil.formatRelativeTime(client.expiryTime) ]] </a-tag>
|
|
|
|
|
</a-popover>
|
|
|
|
|
<a-tag v-else :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" :style="{ border: 'none' }" class="infinite-tag">
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
@@ -165,7 +184,8 @@
|
|
|
|
|
<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, $event)"></a-switch>
|
|
|
|
|
<a-switch v-model="client.enable" size="small"
|
|
|
|
|
@change="switchEnableClient(record.id, client, $event)"></a-switch>
|
|
|
|
|
{{ i18n "enable"}}
|
|
|
|
|
</a-menu-item>
|
|
|
|
|
</a-menu>
|
|
|
|
|
@@ -179,9 +199,11 @@
|
|
|
|
|
<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="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)" />
|
|
|
|
|
<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">
|
|
|
|
|
@@ -197,11 +219,14 @@
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</template>
|
|
|
|
|
<a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
|
|
|
|
|
<a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false"
|
|
|
|
|
:status="isClientDepleted(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>
|
|
|
|
|
<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>
|
|
|
|
|
@@ -216,14 +241,16 @@
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<template v-if="client.expiryTime !=0 && client.reset >0">
|
|
|
|
|
<td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[ IntlUtil.formatRelativeTime(client.expiryTime) ]] </td>
|
|
|
|
|
<td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[
|
|
|
|
|
IntlUtil.formatRelativeTime(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>[[ IntlUtil.formatDate(client.expiryTime) ]]</span>
|
|
|
|
|
</template>
|
|
|
|
|
<a-progress :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
|
|
|
|
|
<a-progress :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''"
|
|
|
|
|
:percent="expireProgress(client.expiryTime, client.reset)" />
|
|
|
|
|
</a-popover>
|
|
|
|
|
</td>
|
|
|
|
|
<td width="60px">[[ client.reset + "d" ]]</td>
|
|
|
|
|
@@ -235,11 +262,16 @@
|
|
|
|
|
<span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
|
|
|
|
|
<span v-else>[[ IntlUtil.formatDate(client.expiryTime) ]]</span>
|
|
|
|
|
</template>
|
|
|
|
|
<a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ IntlUtil.formatRelativeTime(client.expiryTime) ]] </a-tag>
|
|
|
|
|
<a-tag :style="{ minWidth: '50px', border: 'none' }"
|
|
|
|
|
:color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[
|
|
|
|
|
IntlUtil.formatRelativeTime(client.expiryTime) ]] </a-tag>
|
|
|
|
|
</a-popover>
|
|
|
|
|
<a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
@@ -248,7 +280,8 @@
|
|
|
|
|
</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-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>
|
|
|
|
|
@@ -271,4 +304,4 @@
|
|
|
|
|
-
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
{{end}}
|
|
|
|
|
{{end}}
|