chore: redesign Inbound Information modal

This commit is contained in:
Shishkevich D. 2025-04-10 14:34:25 +00:00
parent 523cec9ebd
commit fc99108ab1
3 changed files with 352 additions and 422 deletions

View file

@ -1,6 +1,6 @@
{{define "component/customDescriptions"}} {{define "component/customDescriptions"}}
<template> <template>
<a-descriptions class="ant-custom-descriptions" bordered :layout="layout" :size="size" :column="column"> <a-descriptions class="ant-custom-descriptions" :title="title" bordered :layout="layout" :size="size" :column="column">
<slot></slot> <slot></slot>
</a-descriptions> </a-descriptions>
</template> </template>
@ -22,9 +22,14 @@
} }
.ant-descriptions-item-label, .ant-descriptions-item-label,
.ant-descriptions-item-content { .ant-descriptions-item-content,
.ant-descriptions-title {
color: var(--dark-color-text-primary); color: var(--dark-color-text-primary);
} }
.ant-descriptions-title {
margin-bottom: 16px;
}
} }
</style> </style>
@ -39,6 +44,10 @@
return ['horizontal', 'vertical'].includes(value) return ['horizontal', 'vertical'].includes(value)
} }
}, },
'title': {
type: String,
required: false,
},
'size': { 'size': {
type: String, type: String,
required: false, required: false,

View file

@ -588,6 +588,7 @@
{{template "component/aThemeSwitch" .}} {{template "component/aThemeSwitch" .}}
{{template "component/aCustomStatistic" .}} {{template "component/aCustomStatistic" .}}
{{template "component/aPersianDatepicker" .}} {{template "component/aPersianDatepicker" .}}
{{template "component/aCustomDescriptions" .}}
<script> <script>
const columns = [{ const columns = [{
title: "ID", title: "ID",

View file

@ -1,207 +1,126 @@
{{define "modals/inboundInfoModal"}} {{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-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' :closable="true"
<a-row> :mask-closable="true" :footer="null" width="600px" :class="themeSwitcher.currentTheme">
<a-col :xs="24" :md="12"> <a-space direction='vertical' size="middle">
<table> <a-custom-descriptions title='{{ i18n "pages.inbounds.info"}}' layout="vertical" size="small" :column="2">
<tr> <a-descriptions-item label='{{ i18n "pages.inbounds.address" }}' :span="2">
<td>{{ i18n "protocol" }}</td> <span>[[ dbInbound.address ]]</span>
<td> </a-descriptions-item>
<a-tag color="purple">[[ dbInbound.protocol ]]</a-tag> <a-descriptions-item label='{{ i18n "protocol" }}' :span="1">
</td> <a-tag color="purple">
</tr> <span>[[ dbInbound.protocol ]]</span>
<tr> </a-tag>
<td>{{ i18n "pages.inbounds.address" }}</td> </a-descriptions-item>
<td> <a-descriptions-item label='{{ i18n "pages.inbounds.port" }}' :span="1">
<a-tooltip :title="[[ dbInbound.address ]]"> <span>[[ dbInbound.port ]]</span>
<a-tag class="info-large-tag">[[ dbInbound.address ]]</a-tag> </a-descriptions-item>
</a-tooltip> <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS" layout="vertical"
</td> size="small" :column="2">
</tr> <a-descriptions-item label='{{ i18n "transmission" }}' :span="2">
<tr> <span>[[ inbound.network ]]</span>
<td>{{ i18n "pages.inbounds.port" }}</td> </a-descriptions-item>
<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"> <template v-if="inbound.isTcp || inbound.isWs || inbound.isHttpupgrade || inbound.isXHTTP">
<tr> <a-descriptions-item label='{{ i18n "host" }}' :span="1">
<td>{{ i18n "host" }}</td> <span>[[ inbound.host || '{{ i18n "none" }}' ]]</span>
<td v-if="inbound.host"> </a-descriptions-item>
<a-tooltip :title="[[ inbound.host ]]"> <a-descriptions-item label='{{ i18n "path" }}' :span="1">
<a-tag class="info-large-tag">[[ inbound.host ]]</a-tag> <span>[[ inbound.path || '{{ i18n "none" }}' ]]</span>
</a-tooltip> </a-descriptions-item>
</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>
<template v-if="inbound.isXHTTP"> <template v-if="inbound.isXHTTP">
<tr> <a-descriptions-item label="Mode" :span="2">
<td>Mode</td> <span>[[ inbound.stream.xhttp.mode ]]</span>
<td> </a-descriptions-item>
<a-tag>[[ inbound.stream.xhttp.mode ]]</a-tag>
</td>
</tr>
</template> </template>
<template v-if="inbound.isKcp"> <template v-if="inbound.isKcp">
<tr> <a-descriptions-item label='kcp {{ i18n "encryption" }}' :span="1">
<td>kcp {{ i18n "encryption" }}</td> <span>[[ inbound.kcpType ]]</span>
<td> </a-descriptions-item>
<a-tag>[[ inbound.kcpType ]]</a-tag> <a-descriptions-item label='kcp {{ i18n "password" }}' :span="1">
</td> <span>[[ inbound.kcpSeed ]]</span>
</tr> </a-descriptions-item>
<tr>
<td>kcp {{ i18n "password" }}</td>
<td>
<a-tag>[[ inbound.kcpSeed ]]</a-tag>
</td>
</tr>
</template> </template>
<template v-if="inbound.isGrpc"> <template v-if="inbound.isGrpc">
<tr> <a-descriptions-item label="grpc serviceName" :span="1">
<td>grpc serviceName</td> <span>[[ inbound.serviceName ]]</span>
<td> </a-descriptions-item>
<a-tooltip :title="[[ inbound.serviceName ]]"> <a-descriptions-item label="grpc multiMode" :span="1">
<a-tag class="info-large-tag">[[ inbound.serviceName ]]</a-tag> <a-switch :checked="inbound.stream.grpc.multiMode" disabled></a-switch>
</a-tooltip> </a-descriptions-item>
<tr>
<td>grpc multiMode</td>
<td>
<a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag>
</td>
</tr>
</template> </template>
</table> <a-descriptions-item v-if="dbInbound.hasLink()" label='{{ i18n "security" }}' :span="2">
</template> <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">
</a-col> <span>[[ inbound.stream.security ]]</span>
<template v-if="dbInbound.hasLink()"> </a-tag>
{{ i18n "security" }}
<a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
<br /> <br />
<template v-if="inbound.stream.security != 'none'"> <template v-if="inbound.stream.security != 'none'">
{{ i18n "domainName" }} <span>{{ i18n "domainName" }}: </span>
<a-tag v-if="inbound.serverName" :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag> <a-tag v-if="inbound.serverName" :color="inbound.serverName ? 'green' : 'orange'">
<a-tag v-else color="orange">{{ i18n "none" }}</a-tag> <span>[[ inbound.serverName ? inbound.serverName : '' ]]</span>
</a-tag>
<a-tag v-else color="orange">
<span>{{ i18n "none" }}</span>
</a-tag>
</template> </template>
</a-descriptions-item>
</template> </template>
<table v-if="dbInbound.isSS" :style="{ marginBottom: '10px', width: '100%' }"> <template v-if="dbInbound.isSS">
<tr> <a-descriptions-item label='{{ i18n "encryption" }}' :span="1">
<td>{{ i18n "encryption" }}</td> <span>[[ inbound.settings.method ]]</span>
<td> </a-descriptions-item>
<a-tag color="green">[[ inbound.settings.method ]]</a-tag> <a-descriptions-item label='{{ i18n "pages.inbounds.network" }}' :span="1">
</td> <span>[[ inbound.settings.network ]]</span>
</tr> </a-descriptions-item>
<tr v-if="inbound.isSS2022"> <a-descriptions-item v-if="inbound.isSS2022" label='{{ i18n "password" }}' :span="2">
<td>{{ i18n "password" }}</td> <span>[[ inbound.settings.password ]]</span>
<td> </a-descriptions-item>
<a-tooltip :title="[[ inbound.settings.password ]]"> </template>
<a-tag class="info-large-tag">[[ inbound.settings.password ]]</a-tag> </a-custom-descriptions>
</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"> <template v-if="infoModal.clientSettings">
<a-divider>{{ i18n "pages.inbounds.client" }}</a-divider> <a-custom-descriptions title='{{ i18n "pages.inbounds.client" }}' layout="vertical" size="small" :column="2">
<table :style="{ marginBottom: '10px' }"> <a-descriptions-item label='{{ i18n "pages.inbounds.email" }}' :span="2">
<tr> <span>[[ infoModal.clientSettings.email || '{{ i18n "none" }}' ]]</span>
<td>{{ i18n "pages.inbounds.email" }}</td> </a-descriptions-item>
<td v-if="infoModal.clientSettings.email"> <a-descriptions-item v-if="infoModal.clientSettings.id" label='ID' :span="2">
<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> <a-tag>[[ infoModal.clientSettings.id ]]</a-tag>
</td> </a-descriptions-item>
</tr> <a-descriptions-item v-if="dbInbound.isVMess" label='{{ i18n "security" }}' :span="2">
<tr v-if="dbInbound.isVMess">
<td>{{ i18n "security" }}</td>
<td>
<a-tag>[[ infoModal.clientSettings.security ]]</a-tag> <a-tag>[[ infoModal.clientSettings.security ]]</a-tag>
</td> </a-descriptions-item>
</tr> <a-descriptions-item v-if="infoModal.inbound.canEnableTlsFlow()" label='Flow' :span="2">
<tr v-if="infoModal.inbound.canEnableTlsFlow()"> <template v-if="infoModal.clientSettings.flow">
<td>Flow</td>
<td v-if="infoModal.clientSettings.flow">
<a-tag>[[ infoModal.clientSettings.flow ]]</a-tag> <a-tag>[[ infoModal.clientSettings.flow ]]</a-tag>
</td> </template>
<td v-else> <template v-else>
<a-tag color="orange">{{ i18n "none" }}</a-tag> <a-tag color="orange">{{ i18n "none" }}</a-tag>
</td> </template>
</tr> </a-descriptions-item>
<tr v-if="infoModal.clientSettings.password"> <a-descriptions-item v-if="infoModal.clientSettings.password" label='{{ i18n "password" }}' :span="2">
<td>{{ i18n "password" }}</td> <span>[[ infoModal.clientSettings.password ]]</span>
<td> </a-descriptions-item>
<a-tooltip :title="[[ infoModal.clientSettings.password ]]"> <a-descriptions-item label='{{ i18n "status" }}' :span="infoModal.clientStats ? 1 : 2">
<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-if="isEnable" color="green">{{ i18n "enabled" }}</a-tag>
<a-tag v-else>{{ i18n "disabled" }}</a-tag> <a-tag v-else>{{ i18n "disabled" }}</a-tag>
<a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag> <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
</td> </a-descriptions-item>
</tr> <a-descriptions-item v-if="infoModal.clientStats" label='{{ i18n "usage" }}' :span="1">
<tr v-if="infoModal.clientStats"> <a-space direction="horizontal">
<td>{{ i18n "usage" }}</td> <a-tag color="green">
<td> <span>[[ SizeFormatter.sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</span>
<a-tag color="green">[[ SizeFormatter.sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag> </a-tag>
<a-tag>↑ [[ SizeFormatter.sizeFormat(infoModal.clientStats.up) ]] / [[ SizeFormatter.sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag> <a-tag>
</td> <span>↑ [[ SizeFormatter.sizeFormat(infoModal.clientStats.up) ]] / [[
</tr> SizeFormatter.sizeFormat(infoModal.clientStats.down) ]] ↓</span>
<tr v-if="infoModal.clientSettings.comment"> </a-tag>
<td>{{ i18n "comment" }}</td> </a-space>
<td> </a-descriptions-item>
<a-tooltip :title="[[ infoModal.clientSettings.comment ]]"> <a-descriptions-item v-if="infoModal.clientSettings.comment" label='{{ i18n "comment" }}' :span="2">
<a-tag class="info-large-tag">[[ infoModal.clientSettings.comment ]]</a-tag> <span>[[ infoModal.clientSettings.comment ]]</span>
</a-tooltip> </a-descriptions-item>
</td> <a-descriptions-item v-if="app.ipLimitEnable" label='{{ i18n "pages.inbounds.IPLimit" }}' :span="2">
</tr> <span>[[ infoModal.clientSettings.limitIp ]]</span>
<tr v-if="app.ipLimitEnable"> </a-descriptions-item>
<td>{{ i18n "pages.inbounds.IPLimit" }}</td> <a-descriptions-item v-if="app.ipLimitEnable" label='{{ i18n "pages.inbounds.IPLimitlog" }}' :span="2">
<td>
<a-tag>[[ infoModal.clientSettings.limitIp ]]</a-tag>
</td>
</tr>
<tr v-if="app.ipLimitEnable">
<td>{{ i18n "pages.inbounds.IPLimitlog" }}</td>
<td>
<a-tag>[[ infoModal.clientIps ]]</a-tag> <a-tag>[[ infoModal.clientIps ]]</a-tag>
<a-icon type="sync" :spin="refreshing" @click="refreshIPs" :style="{ margin: '0 5px' }"></a-icon> <a-icon type="sync" :spin="refreshing" @click="refreshIPs" :style="{ margin: '0 5px' }"></a-icon>
<a-tooltip :title="[[ dbInbound.address ]]"> <a-tooltip :title="[[ dbInbound.address ]]">
@ -210,30 +129,40 @@
</template> </template>
<a-icon type="delete" @click="clearClientIps"></a-icon> <a-icon type="delete" @click="clearClientIps"></a-icon>
</a-tooltip> </a-tooltip>
</td> </a-descriptions-item>
</tr> <a-descriptions-item v-if="app.tgBotEnable && infoModal.clientSettings.tgId" :span="2">
</table> <template #label>
<table :style="{ display: 'inline-table', marginBlock: '10px', width: '100%', textAlign: 'center' }"> <a-space direction="horizontal">
<tr> <span>Telegram ChatID</span>
<th>{{ i18n "remained" }}</th> <a-tooltip title='{{ i18n "copy" }}'>
<th>{{ i18n "pages.inbounds.totalFlow" }}</th> <a-icon type="snippets" @click="copy(infoModal.clientSettings.tgId)"></a-icon>
<th>{{ i18n "pages.inbounds.expireDate" }}</th> </a-tooltip>
</tr> </a-space>
<tr> </template>
<td> <span>[[ infoModal.clientSettings.tgId ]]</span>
<a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ getRemStats() ]] </a-tag> </a-descriptions-item>
</td> </a-custom-descriptions>
<td> <a-custom-descriptions title="Usage" layout="vertical" size="small" :column="3">
<a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ SizeFormatter.sizeFormat(infoModal.clientSettings.totalGB) ]] </a-tag> <a-descriptions-item label='{{ i18n "remained" }}' :span="1">
<a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0"
:color="statsColor(infoModal.clientStats)"> [[ getRemStats() ]] </a-tag>
<a-tag v-else color="purple">-</a-tag>
</a-descriptions-item>
<a-descriptions-item label='{{ i18n "pages.inbounds.totalFlow" }}' :span="1">
<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"> <a-tag v-else color="purple" class="infinite-tag">
<svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor"> <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> </svg>
</a-tag> </a-tag>
</td> </a-descriptions-item>
<td> <a-descriptions-item label='{{ i18n "pages.inbounds.expireDate" }}' :span="1">
<template v-if="infoModal.clientSettings.expiryTime > 0"> <template v-if="infoModal.clientSettings.expiryTime > 0">
<a-tag :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)"> <a-tag
:color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
<template v-if="app.datepicker === 'gregorian'"> <template v-if="app.datepicker === 'gregorian'">
[[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]] [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
</template> </template>
@ -242,207 +171,198 @@
</template> </template>
</a-tag> </a-tag>
</template> </template>
<a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }} <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[
infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}
</a-tag> </a-tag>
<a-tag v-else color="purple" class="infinite-tag"> <a-tag v-else color="purple" class="infinite-tag">
<svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor"> <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> </svg>
</a-tag> </a-tag>
</td> </a-descriptions-item>
</tr> </a-custom-descriptions>
</table>
<template v-if="app.subSettings.enable && infoModal.clientSettings.subId"> <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
<a-divider>Subscription URL</a-divider> <a-custom-descriptions title="Subscription URL" layout="vertical" size="small" :column="1">
<tr-info-row class="tr-info-row"> <a-descriptions-item v-for="(link,index) in infoModal.links">
<tr-info-title class="tr-info-title"> <template #label>
<a-tag color="purple">Subscription Link</a-tag> <a-space direction="horizontal">
<span>Subscription Link</span>
<a-tooltip title='{{ i18n "copy" }}'> <a-tooltip title='{{ i18n "copy" }}'>
<a-button size="small" icon="snippets" @click="copy(infoModal.subLink)"></a-button> <a-icon type="snippets" @click="copy(infoModal.subLink)"></a-icon>
</a-tooltip> </a-tooltip>
</tr-info-title> </a-space>
<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>
<template v-if="app.tgBotEnable && infoModal.clientSettings.tgId"> <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a>
<a-divider>Telegram ChatID</a-divider> </a-descriptions-item>
<tr-info-row class="tr-info-row"> <a-descriptions-item v-for="(link,index) in infoModal.links">
<tr-info-title class="tr-info-title"> <template #label>
<a-tag color="blue">[[ infoModal.clientSettings.tgId ]]</a-tag> <a-space direction="horizontal">
<span>Json Link</span>
<a-tooltip title='{{ i18n "copy" }}'> <a-tooltip title='{{ i18n "copy" }}'>
<a-button size="small" icon="snippets" @click="copy(infoModal.clientSettings.tgId)"></a-button> <a-icon type="snippets" @click="copy(infoModal.subJsonLink)"></a-icon>
</a-tooltip> </a-tooltip>
</tr-info-title> </a-space>
</tr-info-row> </template>
<a :href="[[ infoModal.subJsonLink ]]" target="_blank">[[ infoModal.subJsonLink ]]</a>
</a-descriptions-item>
</a-custom-descriptions>
</template> </template>
<template v-if="dbInbound.hasLink()"> <template v-if="dbInbound.hasLink()">
<a-divider>URL</a-divider> <a-custom-descriptions title="URL" layout="vertical" size="small" :column="1">
<tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row"> <a-descriptions-item v-for="(link,index) in infoModal.links">
<tr-info-title class="tr-info-title"> <template #label>
<a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag> <a-space direction="horizontal">
<span>[[ link.remark ]]</span>
<a-tooltip title='{{ i18n "copy" }}'> <a-tooltip title='{{ i18n "copy" }}'>
<a-button :style="{ minWidth: '24px' }" size="small" icon="snippets" @click="copy(link.link)"></a-button> <a-icon type="snippets" @click="copy(link.link)"></a-icon>
</a-tooltip> </a-tooltip>
</tr-info-title> </a-space>
</template>
<code>[[ link.link ]]</code> <code>[[ link.link ]]</code>
</tr-info-row> </a-descriptions-item>
</a-custom-descriptions>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<template v-if="dbInbound.isSS && !inbound.isSSMultiUser"> <template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
<a-divider>URL</a-divider> <a-custom-descriptions title="URL" layout="vertical" size="small" :column="1">
<tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row"> <a-descriptions-item v-for="(link,index) in infoModal.links">
<tr-info-title class="tr-info-title"> <template #label>
<a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag> <a-space direction="horizontal">
<span>[[ link.remark ]]</span>
<a-tooltip title='{{ i18n "copy" }}'> <a-tooltip title='{{ i18n "copy" }}'>
<a-button :style="{ minWidth: '24px' }" size="small" icon="snippets" @click="copy(link.link)"></a-button> <a-icon type="snippets" @click="copy(link.link)"></a-icon>
</a-tooltip> </a-tooltip>
</tr-info-title> </a-space>
</template>
<code>[[ link.link ]]</code> <code>[[ link.link ]]</code>
</tr-info-row> </a-descriptions-item>
</a-custom-descriptions>
</template> </template>
<table v-if="inbound.protocol == Protocols.DOKODEMO" class="tr-info-table"> <template v-if="inbound.protocol == Protocols.DOKODEMO">
<tr> <a-custom-descriptions layout="vertical" size="small" :column="2">
<th>{{ i18n "pages.inbounds.targetAddress" }}</th> <a-descriptions-item label='{{ i18n "pages.inbounds.targetAddress" }}' :span="1">
<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> <a-tag color="green">[[ inbound.settings.address ]]</a-tag>
</td> </a-descriptions-item>
<td> <a-descriptions-item label='{{ i18n "pages.inbounds.destinationPort" }}' :span="1">
<a-tag color="green">[[ inbound.settings.port ]]</a-tag> <a-tag color="green">[[ inbound.settings.port ]]</a-tag>
</td> </a-descriptions-item>
<td> <a-descriptions-item label='{{ i18n "pages.inbounds.network" }}' :span="1">
<a-tag color="green">[[ inbound.settings.network ]]</a-tag> <a-tag color="green">[[ inbound.settings.network ]]</a-tag>
</td> </a-descriptions-item>
<td> <a-descriptions-item label='FollowRedirect' :span="1">
<a-tag color="green">[[ inbound.settings.followRedirect ]]</a-tag> <a-switch :checked="inbound.settings.followRedirect" disabled></a-switch>
</td> </a-descriptions-item>
</tr> </a-custom-descriptions>
</table> </template>
<table v-if="dbInbound.isSocks" class="tr-info-table"> <template v-if="dbInbound.isSocks">
<tr> <a-custom-descriptions layout="vertical" size="small" :column="3">
<th>{{ i18n "password" }} Auth</th> <a-descriptions-item label='{{ i18n "password" }} Auth' :span="1">
<th>{{ i18n "pages.inbounds.enable" }} udp</th>
<th>IP</th>
</tr>
<tr>
<td>
<a-tag color="green">[[ inbound.settings.auth ]]</a-tag> <a-tag color="green">[[ inbound.settings.auth ]]</a-tag>
</td> </a-descriptions-item>
<td> <a-descriptions-item label='{{ i18n "pages.inbounds.enable" }} UDP' :span="1">
<a-tag color="green">[[ inbound.settings.udp]]</a-tag> <a-switch :checked="inbound.settings.udp" disabled></a-switch>
</td> </a-descriptions-item>
<td> <a-descriptions-item label='IP' :span="1">
<a-tag color="green">[[ inbound.settings.ip ]]</a-tag> <span>[[ inbound.settings.ip ]]</span>
</td> </a-descriptions-item>
</tr> </a-custom-descriptions>
<template v-if="inbound.settings.auth == 'password'"> <a-custom-descriptions title="Users" v-if="inbound.settings.auth == 'password'" layout="vertical" size="small"
<tr> :column="3">
<td></td> <a-descriptions-item label="#" :span="1">
<td>{{ i18n "username" }}</td> <template v-for="account,index in inbound.settings.accounts">
<td>{{ i18n "password" }}</td> <span>[[ index + 1 ]]</span>
</tr> <br />
<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> </template>
</table> </a-descriptions-item>
<table v-if="dbInbound.isHTTP" class="tr-info-table"> <a-descriptions-item label='{{ i18n "username" }}' :span="1">
<tr> <template v-for="account,index in inbound.settings.accounts">
<th></th> <span>[[ account.user ]]</span>
<th>{{ i18n "username" }}</th> <br />
<th>{{ i18n "password" }}</th> </template>
</tr> </a-descriptions-item>
<tr v-for="account,index in inbound.settings.accounts"> <a-descriptions-item label='{{ i18n "password" }}' :span="1">
<td>[[ index ]]</td> <template v-for="account,index in inbound.settings.accounts">
<td> <span>[[ account.pass || '-' ]]</span>
<a-tag color="green">[[ account.user ]]</a-tag> <br />
</td> </template>
<td> </a-descriptions-item>
<a-tag color="green">[[ account.pass ]]</a-tag> </a-custom-descriptions>
</td> </template>
</tr> <template v-if="dbInbound.isHTTP">
</table> <a-custom-descriptions title="Users" layout="vertical" size="small" :column="3">
<table v-if="dbInbound.isWireguard" class="tr-info-table"> <a-descriptions-item label="#" :span="1">
<tr class="client-table-odd-row"> <template v-for="account,index in inbound.settings.accounts">
<td>{{ i18n "pages.xray.wireguard.secretKey" }}</td> <span>[[ index + 1 ]]</span>
<td>[[ inbound.settings.secretKey ]]</td> <br />
</tr> </template>
<tr> </a-descriptions-item>
<td>{{ i18n "pages.xray.wireguard.publicKey" }}</td> <a-descriptions-item label='{{ i18n "username" }}' :span="1">
<td>[[ inbound.settings.pubKey ]]</td> <template v-for="account,index in inbound.settings.accounts">
</tr> <span>[[ account.user ]]</span>
<tr class="client-table-odd-row"> <br />
<td>MTU</td> </template>
<td>[[ inbound.settings.mtu ]]</td> </a-descriptions-item>
</tr> <a-descriptions-item label='{{ i18n "password" }}' :span="1">
<tr> <template v-for="account,index in inbound.settings.accounts">
<td>No Kernel Tun</td> <span>[[ account.pass ]]</span>
<td>[[ inbound.settings.noKernelTun ]]</td> <br />
</tr> </template>
</a-descriptions-item>
</a-custom-descriptions>
</template>
<template v-if="dbInbound.isWireguard">
<a-custom-descriptions layout="vertical" size="small" :column="2">
<a-descriptions-item label='{{ i18n "pages.xray.wireguard.secretKey" }}' :span="2">
<span>[[ inbound.settings.secretKey ]]</span>
</a-descriptions-item>
<a-descriptions-item label='{{ i18n "pages.xray.wireguard.publicKey" }}' :span="2">
<span>[[ inbound.settings.pubKey ]]</span>
</a-descriptions-item>
<a-descriptions-item label='MTU' :span="1">
<span>[[ inbound.settings.mtu ]]</span>
</a-descriptions-item>
<a-descriptions-item label='No Kernel Tun' :span="1">
<a-switch :checked="inbound.settings.noKernelTun" disabled></a-switch>
</a-descriptions-item>
</a-custom-descriptions>
<template v-for="(peer, index) in inbound.settings.peers"> <template v-for="(peer, index) in inbound.settings.peers">
<tr> <a-custom-descriptions :title="`Peer ${index + 1}`" layout="vertical" size="small" :column="1">
<td colspan="2"> <a-descriptions-item label='{{ i18n "pages.xray.wireguard.secretKey" }}'>
<a-divider>Peer [[ index + 1 ]]</a-divider> <span>[[ peer.privateKey ]]</span>
</td> </a-descriptions-item>
</tr> <a-descriptions-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
<tr class="client-table-odd-row"> <span>[[ peer.publicKey ]]</span>
<td>{{ i18n "pages.xray.wireguard.secretKey" }}</td> </a-descriptions-item>
<td>[[ peer.privateKey ]]</td> <a-descriptions-item label='{{ i18n "pages.xray.wireguard.psk" }}' v-if="peer.psk">
</tr> <span>[[ peer.psk ]]</span>
<tr> </a-descriptions-item>
<td>{{ i18n "pages.xray.wireguard.publicKey" }}</td> <a-descriptions-item label='{{ i18n "pages.xray.wireguard.allowedIPs" }}'>
<td>[[ peer.publicKey ]]</td> <span>[[ peer.allowedIPs.join(",") ]]</span>
</tr> </a-descriptions-item>
<tr class="client-table-odd-row"> <a-descriptions-item label='Keep Alive'>
<td>{{ i18n "pages.xray.wireguard.psk" }}</td> <span>[[ peer.keepAlive ]]</span>
<td>[[ peer.psk ]]</td> </a-descriptions-item>
</tr> <a-descriptions-item>
<tr> <template #label>
<td>{{ i18n "pages.xray.wireguard.allowedIPs" }}</td> <a-space direction="horizontal">
<td>[[ peer.allowedIPs.join(",") ]]</td> <span>Config</span>
</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-tooltip title='{{ i18n "copy" }}'>
<a-button :style="{ minWidth: '24px' }" size="small" icon="snippets" @click="copy(infoModal.links[index])"></a-button> <a-icon type="snippets" @click="copy(infoModal.links[index])"></a-icon>
</a-tooltip> </a-tooltip>
</tr-info-title> </a-space>
<div v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)" :style="{ borderRadius: '1rem', padding: '0.5rem' }" class="client-table-odd-row"> </template>
</div> <div v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)" :style="{ fontFamily: 'monospace' }"></div>
</tr-info-row> </a-descriptions-item>
</td> </a-custom-descriptions>
</tr>
</table>
</template> </template>
</template> </template>
</template>
</a-space>
</a-modal> </a-modal>
<script> <script>
function refreshIPs(email) { function refreshIPs(email) {
return HttpUtil.post(`/panel/inbound/clientIps/${email}`).then((msg) => { return HttpUtil.post(`/panel/inbound/clientIps/${email}`).then((msg) => {