inbounds.html 74 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. {{template "head" .}}
  4. <style>
  5. @media (min-width: 769px) {
  6. .ant-layout-content {
  7. margin: 24px 16px;
  8. }
  9. }
  10. @media (max-width: 768px) {
  11. .ant-card-body {
  12. padding: .5rem;
  13. }
  14. }
  15. .ant-col-sm-24 {
  16. margin: 0.5rem -2rem 0.5rem 2rem;
  17. }
  18. tr.hideExpandIcon .ant-table-row-expand-icon {
  19. display: none;
  20. }
  21. .infinite-tag {
  22. padding: 0 5px;
  23. border-radius: 2rem;
  24. min-width: 50px;
  25. }
  26. .infinite-bar .ant-progress-inner .ant-progress-bg {
  27. background-color: #F2EAF1;
  28. border: #D5BED2 solid 1px;
  29. }
  30. .dark .infinite-bar .ant-progress-inner .ant-progress-bg {
  31. background-color: #3c1536;
  32. border: #7a316f solid 1px;
  33. }
  34. .ant-collapse {
  35. margin: 5px 0;
  36. }
  37. .online-animation .ant-badge-status-dot {
  38. animation: 1.2s ease infinite normal none running onlineAnimation;
  39. }
  40. @keyframes onlineAnimation {
  41. 0%, 50%, 100% { transform: scale(1); opacity: 1; }
  42. 10% { transform: scale(1.5); opacity: .2; }
  43. }
  44. .info-large-tag {
  45. max-width: 200px;
  46. overflow: hidden;
  47. }
  48. </style>
  49. <body>
  50. <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
  51. {{ template "commonSider" . }}
  52. <a-layout id="content-layout">
  53. <a-layout-content>
  54. <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
  55. <transition name="list" appear>
  56. <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
  57. message='{{ i18n "secAlertTitle" }}'
  58. color="red"
  59. description='{{ i18n "secAlertSsl" }}'
  60. show-icon closable
  61. >
  62. </a-alert>
  63. </transition>
  64. <transition name="list" appear>
  65. <a-tag v-if="false" color="red" style="margin-bottom: 10px">
  66. Please go to the panel settings as soon as possible to modify the username and password, otherwise there may be a risk of leaking account information
  67. </a-tag>
  68. </transition>
  69. <transition name="list" appear>
  70. <a-card hoverable>
  71. <a-row>
  72. <a-col :xs="24" :sm="24" :lg="12">
  73. {{ i18n "pages.inbounds.totalDownUp" }}:
  74. <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
  75. </a-col>
  76. <a-col :xs="24" :sm="24" :lg="12">
  77. {{ i18n "pages.inbounds.totalUsage" }}:
  78. <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
  79. </a-col>
  80. <a-col :xs="24" :sm="24" :lg="12">
  81. {{ i18n "pages.inbounds.inboundCount" }}:
  82. <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
  83. </a-col>
  84. <a-col :xs="24" :sm="24" :lg="12">
  85. <template>
  86. <div>
  87. <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
  88. </a-back-top>
  89. {{ i18n "clients" }}:
  90. <a-tag color="green">[[ total.clients ]]</a-tag>
  91. <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
  92. <template slot="content">
  93. <p v-for="clientEmail in total.deactive">[[ clientEmail ]]</p>
  94. </template>
  95. <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
  96. </a-popover>
  97. <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
  98. <template slot="content">
  99. <p v-for="clientEmail in total.depleted">[[ clientEmail ]]</p>
  100. </template>
  101. <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
  102. </a-popover>
  103. <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
  104. <template slot="content">
  105. <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
  106. </template>
  107. <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
  108. </a-popover>
  109. <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
  110. <template slot="content">
  111. <p v-for="clientEmail in onlineClients">[[ clientEmail ]]</p>
  112. </template>
  113. <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
  114. </a-popover>
  115. </div>
  116. </template>
  117. </a-col>
  118. </a-row>
  119. </a-card>
  120. </transition>
  121. <transition name="list" appear>
  122. <a-card hoverable>
  123. <div slot="title">
  124. <a-row>
  125. <a-col :xs="12" :sm="12" :lg="12">
  126. <a-button type="primary" icon="plus" @click="openAddInbound">
  127. <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template>
  128. </a-button>
  129. <a-dropdown :trigger="['click']">
  130. <a-button type="primary" icon="menu">
  131. <template v-if="!isMobile">{{ i18n "pages.inbounds.generalActions" }}</template>
  132. </a-button>
  133. <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
  134. <a-menu-item key="import">
  135. <a-icon type="import"></a-icon>
  136. {{ i18n "pages.inbounds.importInbound" }}
  137. </a-menu-item>
  138. <a-menu-item key="export">
  139. <a-icon type="export"></a-icon>
  140. {{ i18n "pages.inbounds.export" }}
  141. </a-menu-item>
  142. <a-menu-item key="subs" v-if="subSettings.enable">
  143. <a-icon type="export"></a-icon>
  144. {{ i18n "pages.inbounds.export" }} - {{ i18n "pages.settings.subSettings" }}
  145. </a-menu-item>
  146. <a-menu-item key="resetInbounds">
  147. <a-icon type="reload"></a-icon>
  148. {{ i18n "pages.inbounds.resetAllTraffic" }}
  149. </a-menu-item>
  150. <a-menu-item key="resetClients">
  151. <a-icon type="file-done"></a-icon>
  152. {{ i18n "pages.inbounds.resetAllClientTraffics" }}
  153. </a-menu-item>
  154. <a-menu-item key="delDepletedClients" style="color: #FF4D4F;">
  155. <a-icon type="rest"></a-icon>
  156. {{ i18n "pages.inbounds.delDepletedClients" }}
  157. </a-menu-item>
  158. </a-menu>
  159. </a-dropdown>
  160. </a-col>
  161. <a-col :xs="12" :sm="12" :lg="12" style="text-align: right;">
  162. <a-select v-model="refreshInterval"
  163. style="width: 65px;"
  164. v-if="isRefreshEnabled"
  165. @change="changeRefreshInterval"
  166. :dropdown-class-name="themeSwitcher.currentTheme">
  167. <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
  168. </a-select>
  169. <a-icon type="sync" :spin="refreshing" @click="manualRefresh" style="margin: 0 5px;"></a-icon>
  170. <a-switch v-model="isRefreshEnabled" @change="toggleRefresh"></a-switch>
  171. </a-col>
  172. </a-row>
  173. </div>
  174. <div :style="isMobile ? '' : 'display: flex; align-items: center; justify-content: flex-start;'">
  175. <a-switch v-model="enableFilter"
  176. :style="isMobile ? 'margin-bottom: .5rem; display: flex;' : 'margin-right: .5rem;'"
  177. @change="toggleFilter">
  178. <a-icon slot="checkedChildren" type="search"></a-icon>
  179. <a-icon slot="unCheckedChildren" type="filter"></a-icon>
  180. </a-switch>
  181. <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus style="max-width: 300px" :size="isMobile ? 'small' : ''"></a-input>
  182. <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''">
  183. <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
  184. <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
  185. <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
  186. <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button>
  187. <a-radio-button value="online">{{ i18n "online" }}</a-radio-button>
  188. </a-radio-group>
  189. </div>
  190. <a-back-top></a-back-top>
  191. <a-table :columns="isMobile ? mobileColums : columns" :row-key="dbInbound => dbInbound.id"
  192. :data-source="searchedInbounds"
  193. :scroll="isMobile ? {} : { x: 1000 }"
  194. :pagination=pagination(searchedInbounds)
  195. :expand-icon-as-cell="false"
  196. :expand-row-by-click="false"
  197. :expand-icon-column-index="0"
  198. :indent-size="0"
  199. :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
  200. style="margin-top: 10px">
  201. <template slot="action" slot-scope="text, dbInbound">
  202. <a-dropdown :trigger="['click']">
  203. <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 20px; text-decoration: solid;"></a-icon>
  204. <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
  205. <a-menu-item key="edit">
  206. <a-icon type="edit"></a-icon>
  207. {{ i18n "edit" }}
  208. </a-menu-item>
  209. <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
  210. <a-icon type="qrcode"></a-icon>
  211. {{ i18n "qrCode" }}
  212. </a-menu-item>
  213. <template v-if="dbInbound.isMultiUser()">
  214. <a-menu-item key="addClient">
  215. <a-icon type="user-add"></a-icon>
  216. {{ i18n "pages.client.add"}}
  217. </a-menu-item>
  218. <a-menu-item key="addBulkClient">
  219. <a-icon type="usergroup-add"></a-icon>
  220. {{ i18n "pages.client.bulk"}}
  221. </a-menu-item>
  222. <a-menu-item key="resetClients">
  223. <a-icon type="file-done"></a-icon>
  224. {{ i18n "pages.inbounds.resetInboundClientTraffics"}}
  225. </a-menu-item>
  226. <a-menu-item key="export">
  227. <a-icon type="export"></a-icon>
  228. {{ i18n "pages.inbounds.export"}}
  229. </a-menu-item>
  230. <a-menu-item key="subs" v-if="subSettings.enable">
  231. <a-icon type="export"></a-icon>
  232. {{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}
  233. </a-menu-item>
  234. <a-menu-item key="delDepletedClients" style="color: #FF4D4F;">
  235. <a-icon type="rest"></a-icon>
  236. {{ i18n "pages.inbounds.delDepletedClients" }}
  237. </a-menu-item>
  238. </template>
  239. <template v-else>
  240. <a-menu-item key="showInfo">
  241. <a-icon type="info-circle"></a-icon>
  242. {{ i18n "info"}}
  243. </a-menu-item>
  244. </template>
  245. <a-menu-item key="clipboard">
  246. <a-icon type="copy"></a-icon>
  247. {{ i18n "pages.inbounds.exportInbound" }}
  248. </a-menu-item>
  249. <a-menu-item key="resetTraffic">
  250. <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
  251. </a-menu-item>
  252. <a-menu-item key="clone">
  253. <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}}
  254. </a-menu-item>
  255. <a-menu-item key="delete">
  256. <span style="color: #FF4D4F">
  257. <a-icon type="delete"></a-icon> {{ i18n "delete"}}
  258. </span>
  259. </a-menu-item>
  260. <a-menu-item v-if="isMobile">
  261. <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
  262. {{ i18n "pages.inbounds.enable" }}
  263. </a-menu-item>
  264. </a-menu>
  265. </a-dropdown>
  266. </template>
  267. <template slot="protocol" slot-scope="text, dbInbound">
  268. <a-tag style="margin:0;" color="purple">[[ dbInbound.protocol ]]</a-tag>
  269. <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
  270. <a-tag style="margin:0;" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
  271. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag>
  272. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isXtls" color="blue">XTLS</a-tag>
  273. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
  274. </template>
  275. </template>
  276. <template slot="clients" slot-scope="text, dbInbound">
  277. <template v-if="clientCount[dbInbound.id]">
  278. <a-tag style="margin:0;" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
  279. <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
  280. <template slot="content">
  281. <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
  282. </template>
  283. <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
  284. </a-popover>
  285. <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
  286. <template slot="content">
  287. <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
  288. </template>
  289. <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
  290. </a-popover>
  291. <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
  292. <template slot="content">
  293. <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
  294. </template>
  295. <a-tag style="margin:0; padding: 0 2px;" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
  296. </a-popover>
  297. <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
  298. <template slot="content">
  299. <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p>
  300. </template>
  301. <a-tag style="margin:0; padding: 0 2px;" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
  302. </a-popover>
  303. </template>
  304. </template>
  305. <template slot="traffic" slot-scope="text, dbInbound">
  306. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  307. <template slot="content">
  308. <table cellpadding="2" width="100%">
  309. <tr>
  310. <td>↑[[ sizeFormat(dbInbound.up) ]]</td>
  311. <td>↓[[ sizeFormat(dbInbound.down) ]]</td>
  312. </tr>
  313. <tr v-if="dbInbound.total > 0 && dbInbound.up + dbInbound.down < dbInbound.total">
  314. <td>{{ i18n "remained" }}</td>
  315. <td>[[ sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
  316. </tr>
  317. </table>
  318. </template>
  319. <a-tag :color="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
  320. [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
  321. <template v-if="dbInbound.total > 0">
  322. [[ sizeFormat(dbInbound.total) ]]
  323. </template>
  324. <template v-else>
  325. <svg style="fill: currentColor; height: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><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"/></svg>
  326. </template>
  327. </a-tag>
  328. </a-popover>
  329. </template>
  330. <template slot="enable" slot-scope="text, dbInbound">
  331. <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
  332. </template>
  333. <template slot="expiryTime" slot-scope="text, dbInbound">
  334. <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
  335. <template slot="content">
  336. [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
  337. </template>
  338. <a-tag style="min-width: 50px;" :color="usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
  339. [[ remainedDays(dbInbound._expiryTime) ]]
  340. </a-tag>
  341. </a-popover>
  342. <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
  343. </template>
  344. <template slot="info" slot-scope="text, dbInbound">
  345. <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
  346. <template slot="content">
  347. <table cellpadding="2">
  348. <tr>
  349. <td>{{ i18n "pages.inbounds.protocol" }}</td>
  350. <td>
  351. <a-tag style="margin:0;" color="purple">[[ dbInbound.protocol ]]</a-tag>
  352. <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
  353. <a-tag style="margin:0;" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag>
  354. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag>
  355. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag>
  356. </template>
  357. </td>
  358. </tr>
  359. <tr>
  360. <td>{{ i18n "pages.inbounds.port" }}</td>
  361. <td><a-tag>[[ dbInbound.port ]]</a-tag></td>
  362. </tr>
  363. <tr v-if="clientCount[dbInbound.id]">
  364. <td>{{ i18n "clients" }}</td>
  365. <td>
  366. <a-tag style="margin:0;" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
  367. <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
  368. <template slot="content">
  369. <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
  370. </template>
  371. <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
  372. </a-popover>
  373. <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
  374. <template slot="content">
  375. <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
  376. </template>
  377. <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
  378. </a-popover>
  379. <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
  380. <template slot="content">
  381. <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
  382. </template>
  383. <a-tag style="margin:0; padding: 0 2px;" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
  384. </a-popover>
  385. <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
  386. <template slot="content">
  387. <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p>
  388. </template>
  389. <a-tag style="margin:0; padding: 0 2px;" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
  390. </a-popover>
  391. </td>
  392. </tr>
  393. <tr>
  394. <td>{{ i18n "pages.inbounds.traffic" }}</td>
  395. <td>
  396. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  397. <template slot="content">
  398. <table cellpadding="2" width="100%">
  399. <tr>
  400. <td>↑[[ sizeFormat(dbInbound.up) ]]</td>
  401. <td>↓[[ sizeFormat(dbInbound.down) ]]</td>
  402. </tr>
  403. <tr v-if="dbInbound.total > 0 && dbInbound.up + dbInbound.down < dbInbound.total">
  404. <td>{{ i18n "remained" }}</td>
  405. <td>[[ sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
  406. </tr>
  407. </table>
  408. </template>
  409. <a-tag :color="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
  410. [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
  411. <template v-if="dbInbound.total > 0">
  412. [[ sizeFormat(dbInbound.total) ]]
  413. </template>
  414. <template v-else>&infin;</template>
  415. </a-tag>
  416. </a-popover>
  417. </td>
  418. </tr>
  419. <tr>
  420. <td>{{ i18n "pages.inbounds.expireDate" }}</td>
  421. <td>
  422. <a-tag style="min-width: 50px; text-align: center;" v-if="dbInbound.expiryTime > 0" :color="dbInbound.isExpiry? 'red': 'blue'">
  423. [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
  424. </a-tag>
  425. <a-tag v-else style="text-align: center;" color="purple" class="infinite-tag">&infin;</a-tag>
  426. </td>
  427. </tr>
  428. </table>
  429. </template>
  430. <a-badge>
  431. <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
  432. <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;">
  433. <a-icon type="info"></a-icon>
  434. </a-button>
  435. </a-badge>
  436. </a-popover>
  437. </template>
  438. <template slot="expandedRowRender" slot-scope="record">
  439. <a-table
  440. :row-key="client => client.id"
  441. :columns="isMobile ? innerMobileColumns : innerColumns"
  442. :data-source="getInboundClients(record)"
  443. :pagination=pagination(getInboundClients(record))
  444. :style="isMobile ? 'margin: -12px 2px -13px;' : 'margin: -12px 22px -13px;'">
  445. {{template "client_table"}}
  446. </a-table>
  447. </template>
  448. </a-table>
  449. </a-card>
  450. </transition>
  451. </a-spin>
  452. </a-layout-content>
  453. </a-layout>
  454. </a-layout>
  455. {{template "js" .}}
  456. <script src="{{ .base_path }}assets/base64/base64.min.js"></script>
  457. <script src="{{ .base_path }}assets/qrcode/qrious.min.js"></script>
  458. <script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script>
  459. <script src="{{ .base_path }}assets/uri/URI.min.js"></script>
  460. <script src="{{ .base_path }}assets/js/model/xray.js?{{ .cur_ver }}"></script>
  461. <script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
  462. {{template "component/themeSwitcher" .}}
  463. {{template "component/persianDatepicker" .}}
  464. <script>
  465. const columns = [{
  466. title: "ID",
  467. align: 'right',
  468. dataIndex: "id",
  469. width: 30,
  470. responsive: ["xs"],
  471. }, {
  472. title: '{{ i18n "pages.inbounds.operate" }}',
  473. align: 'center',
  474. width: 30,
  475. scopedSlots: { customRender: 'action' },
  476. }, {
  477. title: '{{ i18n "pages.inbounds.enable" }}',
  478. align: 'center',
  479. width: 30,
  480. scopedSlots: { customRender: 'enable' },
  481. }, {
  482. title: '{{ i18n "pages.inbounds.remark" }}',
  483. align: 'center',
  484. width: 60,
  485. dataIndex: "remark",
  486. }, {
  487. title: '{{ i18n "pages.inbounds.port" }}',
  488. align: 'center',
  489. dataIndex: "port",
  490. width: 40,
  491. }, {
  492. title: '{{ i18n "pages.inbounds.protocol" }}',
  493. align: 'left',
  494. width: 70,
  495. scopedSlots: { customRender: 'protocol' },
  496. }, {
  497. title: '{{ i18n "clients" }}',
  498. align: 'left',
  499. width: 50,
  500. scopedSlots: { customRender: 'clients' },
  501. }, {
  502. title: '{{ i18n "pages.inbounds.traffic" }}',
  503. align: 'center',
  504. width: 60,
  505. scopedSlots: { customRender: 'traffic' },
  506. }, {
  507. title: '{{ i18n "pages.inbounds.expireDate" }}',
  508. align: 'center',
  509. width: 40,
  510. scopedSlots: { customRender: 'expiryTime' },
  511. }];
  512. const mobileColums = [{
  513. title: "ID",
  514. align: 'right',
  515. dataIndex: "id",
  516. width: 10,
  517. responsive: ["s"],
  518. }, {
  519. title: '{{ i18n "pages.inbounds.operate" }}',
  520. align: 'center',
  521. width: 25,
  522. scopedSlots: { customRender: 'action' },
  523. }, {
  524. title: '{{ i18n "pages.inbounds.remark" }}',
  525. align: 'left',
  526. width: 70,
  527. dataIndex: "remark",
  528. }, {
  529. title: '{{ i18n "pages.inbounds.info" }}',
  530. align: 'center',
  531. width: 10,
  532. scopedSlots: { customRender: 'info' },
  533. }];
  534. const innerColumns = [
  535. { title: '{{ i18n "pages.inbounds.operate" }}', width: 65, scopedSlots: { customRender: 'actions' } },
  536. { title: '{{ i18n "pages.inbounds.enable" }}', width: 30, scopedSlots: { customRender: 'enable' } },
  537. { title: '{{ i18n "online" }}', width: 30, scopedSlots: { customRender: 'online' } },
  538. { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
  539. { title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } },
  540. { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
  541. ];
  542. const innerMobileColumns = [
  543. { title: '{{ i18n "pages.inbounds.operate" }}', width: 10, align: 'center', scopedSlots: { customRender: 'actionMenu' } },
  544. { title: '{{ i18n "pages.inbounds.client" }}', width: 90, align: 'left', scopedSlots: { customRender: 'client' } },
  545. { title: '{{ i18n "pages.inbounds.info" }}', width: 10, align: 'center', scopedSlots: { customRender: 'info' } },
  546. ];
  547. const app = new Vue({
  548. delimiters: ['[[', ']]'],
  549. el: '#app',
  550. data: {
  551. siderDrawer,
  552. themeSwitcher,
  553. persianDatepicker,
  554. spinning: false,
  555. inbounds: [],
  556. dbInbounds: [],
  557. searchKey: '',
  558. enableFilter: false,
  559. filterBy: '',
  560. searchedInbounds: [],
  561. expireDiff: 0,
  562. trafficDiff: 0,
  563. defaultCert: '',
  564. defaultKey: '',
  565. clientCount: [],
  566. onlineClients: [],
  567. isRefreshEnabled: localStorage.getItem("isRefreshEnabled") === "true" ? true : false,
  568. refreshing: false,
  569. refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
  570. subSettings: {
  571. enable : false,
  572. subURI : ''
  573. },
  574. remarkModel: '-ieo',
  575. datepicker: 'gregorian',
  576. tgBotEnable: false,
  577. showAlert: false,
  578. pageSize: 0,
  579. isMobile: window.innerWidth <= 768,
  580. },
  581. methods: {
  582. loading(spinning = true) {
  583. this.spinning = spinning;
  584. },
  585. async getDBInbounds() {
  586. this.refreshing = true;
  587. const msg = await HttpUtil.post('/panel/inbound/list');
  588. if (!msg.success) {
  589. this.refreshing = false;
  590. return;
  591. }
  592. await this.getOnlineUsers();
  593. this.setInbounds(msg.obj);
  594. setTimeout(() => {
  595. this.refreshing = false;
  596. }, 500);
  597. },
  598. async getOnlineUsers() {
  599. const msg = await HttpUtil.post('/panel/inbound/onlines');
  600. if (!msg.success) {
  601. return;
  602. }
  603. this.onlineClients = msg.obj != null ? msg.obj : [];
  604. },
  605. async getDefaultSettings() {
  606. const msg = await HttpUtil.post('/panel/setting/defaultSettings');
  607. if (!msg.success) {
  608. return;
  609. }
  610. with(msg.obj){
  611. this.expireDiff = expireDiff * 86400000;
  612. this.trafficDiff = trafficDiff * 1073741824;
  613. this.defaultCert = defaultCert;
  614. this.defaultKey = defaultKey;
  615. this.tgBotEnable = tgBotEnable;
  616. this.subSettings = {
  617. enable : subEnable,
  618. subURI: subURI
  619. };
  620. this.pageSize = pageSize;
  621. this.remarkModel = remarkModel;
  622. this.datepicker = datepicker;
  623. }
  624. },
  625. setInbounds(dbInbounds) {
  626. this.inbounds.splice(0);
  627. this.dbInbounds.splice(0);
  628. this.clientCount.splice(0);
  629. for (const inbound of dbInbounds) {
  630. const dbInbound = new DBInbound(inbound);
  631. to_inbound = dbInbound.toInbound()
  632. this.inbounds.push(to_inbound);
  633. this.dbInbounds.push(dbInbound);
  634. if ([Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN, Protocols.SHADOWSOCKS].includes(inbound.protocol)) {
  635. if (inbound.protocol === Protocols.SHADOWSOCKS && (!to_inbound.isSSMultiUser)) {
  636. continue;
  637. }
  638. this.clientCount[inbound.id] = this.getClientCounts(inbound, to_inbound);
  639. }
  640. }
  641. if(this.enableFilter){
  642. this.filterInbounds();
  643. } else {
  644. this.searchInbounds(this.searchKey);
  645. }
  646. },
  647. getClientCounts(dbInbound, inbound) {
  648. let clientCount = 0, active = [], deactive = [], depleted = [], expiring = [], online = [];
  649. clients = inbound.clients;
  650. clientStats = dbInbound.clientStats
  651. now = new Date().getTime()
  652. if (clients) {
  653. clientCount = clients.length;
  654. if (dbInbound.enable) {
  655. clients.forEach(client => {
  656. if (client.enable) {
  657. active.push(client.email);
  658. if (this.isClientOnline(client.email)) online.push(client.email);
  659. } else {
  660. deactive.push(client.email);
  661. }
  662. });
  663. clientStats.forEach(client => {
  664. if (!client.enable) {
  665. depleted.push(client.email);
  666. } else {
  667. if ((client.expiryTime > 0 && (client.expiryTime - now < this.expireDiff)) ||
  668. (client.total > 0 && (client.total - (client.up + client.down) < this.trafficDiff))) expiring.push(client.email);
  669. }
  670. });
  671. } else {
  672. clients.forEach(client => {
  673. deactive.push(client.email);
  674. });
  675. }
  676. }
  677. return {
  678. clients: clientCount,
  679. active: active,
  680. deactive: deactive,
  681. depleted: depleted,
  682. expiring: expiring,
  683. online: online,
  684. };
  685. },
  686. searchInbounds(key) {
  687. if (ObjectUtil.isEmpty(key)) {
  688. this.searchedInbounds = this.dbInbounds.slice();
  689. } else {
  690. this.searchedInbounds.splice(0, this.searchedInbounds.length);
  691. this.dbInbounds.forEach(inbound => {
  692. if (ObjectUtil.deepSearch(inbound, key)) {
  693. const newInbound = new DBInbound(inbound);
  694. const inboundSettings = JSON.parse(inbound.settings);
  695. if (inboundSettings.hasOwnProperty('clients')) {
  696. const searchedSettings = { "clients": [] };
  697. inboundSettings.clients.forEach(client => {
  698. if (ObjectUtil.deepSearch(client, key)) {
  699. searchedSettings.clients.push(client);
  700. }
  701. });
  702. newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, searchedSettings);
  703. }
  704. this.searchedInbounds.push(newInbound);
  705. }
  706. });
  707. }
  708. },
  709. filterInbounds() {
  710. if (ObjectUtil.isEmpty(this.filterBy)) {
  711. this.searchedInbounds = this.dbInbounds.slice();
  712. } else {
  713. this.searchedInbounds.splice(0, this.searchedInbounds.length);
  714. this.dbInbounds.forEach(inbound => {
  715. const newInbound = new DBInbound(inbound);
  716. const inboundSettings = JSON.parse(inbound.settings);
  717. if (this.clientCount[inbound.id] && this.clientCount[inbound.id].hasOwnProperty(this.filterBy)){
  718. const list = this.clientCount[inbound.id][this.filterBy];
  719. if (list.length > 0) {
  720. const filteredSettings = { "clients": [] };
  721. inboundSettings.clients.forEach(client => {
  722. if (list.includes(client.email)) {
  723. filteredSettings.clients.push(client);
  724. }
  725. });
  726. newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, filteredSettings);
  727. this.searchedInbounds.push(newInbound);
  728. }
  729. }
  730. });
  731. }
  732. },
  733. toggleFilter(){
  734. if(this.enableFilter) {
  735. this.searchKey = '';
  736. } else {
  737. this.filterBy = '';
  738. this.searchedInbounds = this.dbInbounds.slice();
  739. }
  740. },
  741. generalActions(action) {
  742. switch (action.key) {
  743. case "import":
  744. this.importInbound();
  745. break;
  746. case "export":
  747. this.exportAllLinks();
  748. break;
  749. case "subs":
  750. this.exportAllSubs();
  751. break;
  752. case "resetInbounds":
  753. this.resetAllTraffic();
  754. break;
  755. case "resetClients":
  756. this.resetAllClientTraffics(-1);
  757. break;
  758. case "delDepletedClients":
  759. this.delDepletedClients(-1)
  760. break;
  761. }
  762. },
  763. clickAction(action, dbInbound) {
  764. switch (action.key) {
  765. case "qrcode":
  766. this.showQrcode(dbInbound.id);
  767. break;
  768. case "showInfo":
  769. this.showInfo(dbInbound.id);
  770. break;
  771. case "edit":
  772. this.openEditInbound(dbInbound.id);
  773. break;
  774. case "addClient":
  775. this.openAddClient(dbInbound.id)
  776. break;
  777. case "addBulkClient":
  778. this.openAddBulkClient(dbInbound.id)
  779. break;
  780. case "export":
  781. this.inboundLinks(dbInbound.id);
  782. break;
  783. case "subs":
  784. this.exportSubs(dbInbound.id);
  785. break;
  786. case "clipboard":
  787. this.copyToClipboard(dbInbound.id);
  788. break;
  789. case "resetTraffic":
  790. this.resetTraffic(dbInbound.id);
  791. break;
  792. case "resetClients":
  793. this.resetAllClientTraffics(dbInbound.id);
  794. break;
  795. case "clone":
  796. this.openCloneInbound(dbInbound);
  797. break;
  798. case "delete":
  799. this.delInbound(dbInbound.id);
  800. break;
  801. case "delDepletedClients":
  802. this.delDepletedClients(dbInbound.id)
  803. break;
  804. }
  805. },
  806. openCloneInbound(dbInbound) {
  807. this.$confirm({
  808. title: '{{ i18n "pages.inbounds.cloneInbound"}} \"' + dbInbound.remark + '\"',
  809. content: '{{ i18n "pages.inbounds.cloneInboundContent"}}',
  810. okText: '{{ i18n "pages.inbounds.cloneInboundOk"}}',
  811. class: themeSwitcher.currentTheme,
  812. cancelText: '{{ i18n "cancel" }}',
  813. onOk: () => {
  814. const baseInbound = dbInbound.toInbound();
  815. dbInbound.up = 0;
  816. dbInbound.down = 0;
  817. this.cloneInbound(baseInbound, dbInbound);
  818. },
  819. });
  820. },
  821. async cloneInbound(baseInbound, dbInbound) {
  822. const data = {
  823. up: dbInbound.up,
  824. down: dbInbound.down,
  825. total: dbInbound.total,
  826. remark: dbInbound.remark + " - Cloned",
  827. enable: dbInbound.enable,
  828. expiryTime: dbInbound.expiryTime,
  829. listen: '',
  830. port: RandomUtil.randomIntRange(10000, 60000),
  831. protocol: baseInbound.protocol,
  832. settings: Inbound.Settings.getSettings(baseInbound.protocol).toString(),
  833. streamSettings: baseInbound.stream.toString(),
  834. sniffing: baseInbound.sniffing.toString(),
  835. };
  836. await this.submit('/panel/inbound/add', data, inModal);
  837. },
  838. openAddInbound() {
  839. inModal.show({
  840. title: '{{ i18n "pages.inbounds.addInbound"}}',
  841. okText: '{{ i18n "pages.inbounds.create"}}',
  842. cancelText: '{{ i18n "close" }}',
  843. confirm: async (inbound, dbInbound) => {
  844. inModal.loading();
  845. await this.addInbound(inbound, dbInbound);
  846. inModal.close();
  847. },
  848. isEdit: false
  849. });
  850. },
  851. openEditInbound(dbInboundId) {
  852. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  853. const inbound = dbInbound.toInbound();
  854. inModal.show({
  855. title: '{{ i18n "pages.inbounds.modifyInbound"}}',
  856. okText: '{{ i18n "pages.inbounds.update"}}',
  857. cancelText: '{{ i18n "close" }}',
  858. inbound: inbound,
  859. dbInbound: dbInbound,
  860. confirm: async (inbound, dbInbound) => {
  861. inModal.loading();
  862. await this.updateInbound(inbound, dbInbound);
  863. inModal.close();
  864. },
  865. isEdit: true
  866. });
  867. },
  868. async addInbound(inbound, dbInbound) {
  869. const data = {
  870. up: dbInbound.up,
  871. down: dbInbound.down,
  872. total: dbInbound.total,
  873. remark: dbInbound.remark,
  874. enable: dbInbound.enable,
  875. expiryTime: dbInbound.expiryTime,
  876. listen: inbound.listen,
  877. port: inbound.port,
  878. protocol: inbound.protocol,
  879. settings: inbound.settings.toString(),
  880. };
  881. if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
  882. data.sniffing = inbound.sniffing.toString();
  883. await this.submit('/panel/inbound/add', data, inModal);
  884. },
  885. async updateInbound(inbound, dbInbound) {
  886. const data = {
  887. up: dbInbound.up,
  888. down: dbInbound.down,
  889. total: dbInbound.total,
  890. remark: dbInbound.remark,
  891. enable: dbInbound.enable,
  892. expiryTime: dbInbound.expiryTime,
  893. listen: inbound.listen,
  894. port: inbound.port,
  895. protocol: inbound.protocol,
  896. settings: inbound.settings.toString(),
  897. };
  898. if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
  899. data.sniffing = inbound.sniffing.toString();
  900. await this.submit(`/panel/inbound/update/${dbInbound.id}`, data, inModal);
  901. },
  902. openAddClient(dbInboundId) {
  903. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  904. clientModal.show({
  905. title: '{{ i18n "pages.client.add"}}',
  906. okText: '{{ i18n "pages.client.submitAdd"}}',
  907. dbInbound: dbInbound,
  908. confirm: async (clients, dbInboundId) => {
  909. clientModal.loading();
  910. await this.addClient(clients, dbInboundId);
  911. clientModal.close();
  912. },
  913. isEdit: false
  914. });
  915. },
  916. openAddBulkClient(dbInboundId) {
  917. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  918. clientsBulkModal.show({
  919. title: '{{ i18n "pages.client.bulk"}} ' + dbInbound.remark,
  920. okText: '{{ i18n "pages.client.bulk"}}',
  921. dbInbound: dbInbound,
  922. confirm: async (clients, dbInboundId) => {
  923. clientsBulkModal.loading();
  924. await this.addClient(clients, dbInboundId);
  925. clientsBulkModal.close();
  926. },
  927. });
  928. },
  929. openEditClient(dbInboundId, client) {
  930. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  931. clients = this.getInboundClients(dbInbound);
  932. index = this.findIndexOfClient(dbInbound.protocol, clients, client);
  933. clientModal.show({
  934. title: '{{ i18n "pages.client.edit"}}',
  935. okText: '{{ i18n "pages.client.submitEdit"}}',
  936. dbInbound: dbInbound,
  937. index: index,
  938. confirm: async (client, dbInboundId, clientId) => {
  939. clientModal.loading();
  940. await this.updateClient(client, dbInboundId, clientId);
  941. clientModal.close();
  942. },
  943. isEdit: true
  944. });
  945. },
  946. findIndexOfClient(protocol, clients, client) {
  947. switch (protocol) {
  948. case Protocols.TROJAN:
  949. case Protocols.SHADOWSOCKS:
  950. return clients.findIndex(item => item.password === client.password && item.email === client.email);
  951. default: return clients.findIndex(item => item.id === client.id && item.email === client.email);
  952. }
  953. },
  954. async addClient(clients, dbInboundId) {
  955. const data = {
  956. id: dbInboundId,
  957. settings: '{"clients": [' + clients.toString() + ']}',
  958. };
  959. await this.submit(`/panel/inbound/addClient`, data);
  960. },
  961. async updateClient(client, dbInboundId, clientId) {
  962. const data = {
  963. id: dbInboundId,
  964. settings: '{"clients": [' + client.toString() + ']}',
  965. };
  966. await this.submit(`/panel/inbound/updateClient/${clientId}`, data);
  967. },
  968. resetTraffic(dbInboundId) {
  969. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  970. this.$confirm({
  971. title: '{{ i18n "pages.inbounds.resetTraffic"}}',
  972. content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
  973. class: themeSwitcher.currentTheme,
  974. okText: '{{ i18n "reset"}}',
  975. cancelText: '{{ i18n "cancel"}}',
  976. onOk: () => {
  977. const inbound = dbInbound.toInbound();
  978. dbInbound.up = 0;
  979. dbInbound.down = 0;
  980. this.updateInbound(inbound, dbInbound);
  981. },
  982. });
  983. },
  984. delInbound(dbInboundId) {
  985. this.$confirm({
  986. title: '{{ i18n "pages.inbounds.deleteInbound"}}',
  987. content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
  988. class: themeSwitcher.currentTheme,
  989. okText: '{{ i18n "delete"}}',
  990. cancelText: '{{ i18n "cancel"}}',
  991. onOk: () => this.submit('/panel/inbound/del/' + dbInboundId),
  992. });
  993. },
  994. delClient(dbInboundId, client,confirmation = true) {
  995. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  996. clientId = this.getClientId(dbInbound.protocol, client);
  997. if (confirmation){
  998. this.$confirm({
  999. title: '{{ i18n "pages.inbounds.deleteClient"}}',
  1000. content: '{{ i18n "pages.inbounds.deleteClientContent"}}',
  1001. class: themeSwitcher.currentTheme,
  1002. okText: '{{ i18n "delete"}}',
  1003. cancelText: '{{ i18n "cancel"}}',
  1004. onOk: () => this.submit(`/panel/inbound/${dbInboundId}/delClient/${clientId}`),
  1005. });
  1006. } else {
  1007. this.submit(`/panel/inbound/${dbInboundId}/delClient/${clientId}`);
  1008. }
  1009. },
  1010. getClientId(protocol, client) {
  1011. switch (protocol) {
  1012. case Protocols.TROJAN: return client.password;
  1013. case Protocols.SHADOWSOCKS: return client.email;
  1014. default: return client.id;
  1015. }
  1016. },
  1017. checkFallback(dbInbound) {
  1018. newDbInbound = new DBInbound(dbInbound);
  1019. if (dbInbound.listen.startsWith("@")){
  1020. rootInbound = this.inbounds.find((i) =>
  1021. i.isTcp &&
  1022. ['trojan','vless'].includes(i.protocol) &&
  1023. i.settings.fallbacks.find(f => f.dest === dbInbound.listen)
  1024. );
  1025. if (rootInbound) {
  1026. newDbInbound.listen = rootInbound.listen;
  1027. newDbInbound.port = rootInbound.port;
  1028. newInbound = newDbInbound.toInbound();
  1029. newInbound.stream.security = rootInbound.stream.security;
  1030. newInbound.stream.tls = rootInbound.stream.tls;
  1031. newInbound.stream.externalProxy = rootInbound.stream.externalProxy;
  1032. newDbInbound.streamSettings = newInbound.stream.toString();
  1033. }
  1034. }
  1035. return newDbInbound;
  1036. },
  1037. showQrcode(dbInboundId, client) {
  1038. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1039. newDbInbound = this.checkFallback(dbInbound);
  1040. qrModal.show('{{ i18n "qrCode"}}', newDbInbound, client);
  1041. },
  1042. showInfo(dbInboundId, client) {
  1043. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1044. index=0;
  1045. if (dbInbound.isMultiUser()){
  1046. inbound = dbInbound.toInbound();
  1047. clients = inbound.clients;
  1048. index = this.findIndexOfClient(dbInbound.protocol, clients, client);
  1049. }
  1050. newDbInbound = this.checkFallback(dbInbound);
  1051. infoModal.show(newDbInbound, index);
  1052. },
  1053. switchEnable(dbInboundId,state) {
  1054. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1055. dbInbound.enable = state;
  1056. this.submit(`/panel/inbound/update/${dbInboundId}`, dbInbound);
  1057. },
  1058. async switchEnableClient(dbInboundId, client) {
  1059. this.loading()
  1060. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1061. inbound = dbInbound.toInbound();
  1062. clients = inbound.clients;
  1063. index = this.findIndexOfClient(dbInbound.protocol, clients, client);
  1064. clients[index].enable = !clients[index].enable;
  1065. clientId = this.getClientId(dbInbound.protocol, clients[index]);
  1066. await this.updateClient(clients[index], dbInboundId, clientId);
  1067. this.loading(false);
  1068. },
  1069. async submit(url, data) {
  1070. const msg = await HttpUtil.postWithModal(url, data);
  1071. if (msg.success) {
  1072. await this.getDBInbounds();
  1073. }
  1074. },
  1075. getInboundClients(dbInbound) {
  1076. return dbInbound.toInbound().clients;
  1077. },
  1078. resetClientTraffic(client, dbInboundId, confirmation = true) {
  1079. if (confirmation){
  1080. this.$confirm({
  1081. title: '{{ i18n "pages.inbounds.resetTraffic"}}',
  1082. content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
  1083. class: themeSwitcher.currentTheme,
  1084. okText: '{{ i18n "reset"}}',
  1085. cancelText: '{{ i18n "cancel"}}',
  1086. onOk: () => this.submit('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email),
  1087. })
  1088. } else {
  1089. this.submit('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email);
  1090. }
  1091. },
  1092. resetAllTraffic() {
  1093. this.$confirm({
  1094. title: '{{ i18n "pages.inbounds.resetAllTrafficTitle"}}',
  1095. content: '{{ i18n "pages.inbounds.resetAllTrafficContent"}}',
  1096. class: themeSwitcher.currentTheme,
  1097. okText: '{{ i18n "reset"}}',
  1098. cancelText: '{{ i18n "cancel"}}',
  1099. onOk: () => this.submit('/panel/inbound/resetAllTraffics'),
  1100. });
  1101. },
  1102. resetAllClientTraffics(dbInboundId) {
  1103. this.$confirm({
  1104. title: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficTitle"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficTitle"}}',
  1105. content: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficContent"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficContent"}}',
  1106. class: themeSwitcher.currentTheme,
  1107. okText: '{{ i18n "reset"}}',
  1108. cancelText: '{{ i18n "cancel"}}',
  1109. onOk: () => this.submit('/panel/inbound/resetAllClientTraffics/' + dbInboundId),
  1110. })
  1111. },
  1112. delDepletedClients(dbInboundId) {
  1113. this.$confirm({
  1114. title: '{{ i18n "pages.inbounds.delDepletedClientsTitle"}}',
  1115. content: '{{ i18n "pages.inbounds.delDepletedClientsContent"}}',
  1116. class: themeSwitcher.currentTheme,
  1117. okText: '{{ i18n "delete"}}',
  1118. cancelText: '{{ i18n "cancel"}}',
  1119. onOk: () => this.submit('/panel/inbound/delDepletedClients/' + dbInboundId),
  1120. })
  1121. },
  1122. isExpiry(dbInbound, index) {
  1123. return dbInbound.toInbound().isExpiry(index);
  1124. },
  1125. getUpStats(dbInbound, email) {
  1126. if (email.length == 0) return 0;
  1127. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1128. return clientStats ? clientStats.up : 0;
  1129. },
  1130. getDownStats(dbInbound, email) {
  1131. if (email.length == 0) return 0;
  1132. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1133. return clientStats ? clientStats.down : 0;
  1134. },
  1135. getSumStats(dbInbound, email) {
  1136. if (email.length == 0) return 0;
  1137. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1138. return clientStats ? clientStats.up + clientStats.down : 0;
  1139. },
  1140. getRemStats(dbInbound, email) {
  1141. if (email.length == 0) return 0;
  1142. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1143. if (!clientStats) return 0;
  1144. remained = clientStats.total - (clientStats.up + clientStats.down);
  1145. return remained>0 ? remained : 0;
  1146. },
  1147. clientStatsColor(dbInbound, email) {
  1148. if (email.length == 0) return clientUsageColor();
  1149. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1150. return clientUsageColor(clientStats, app.trafficDiff)
  1151. },
  1152. statsProgress(dbInbound, email) {
  1153. if (email.length == 0) return 100;
  1154. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1155. if (!clientStats) return 0;
  1156. if (clientStats.total == 0) return 100;
  1157. return 100*(clientStats.down + clientStats.up)/clientStats.total;
  1158. },
  1159. expireProgress(expTime, reset) {
  1160. now = new Date().getTime();
  1161. remainedSeconds = expTime < 0 ? -expTime/1000 : (expTime-now)/1000;
  1162. resetSeconds = reset * 86400;
  1163. if (remainedSeconds >= resetSeconds) return 0;
  1164. return 100*(1-(remainedSeconds/resetSeconds));
  1165. },
  1166. remainedDays(expTime){
  1167. if (expTime == 0) return null;
  1168. if (expTime < 0) return formatSecond(expTime/-1000);
  1169. now = new Date().getTime();
  1170. if (expTime < now) return '{{ i18n "depleted" }}';
  1171. return formatSecond((expTime-now)/1000);
  1172. },
  1173. statsExpColor(dbInbound, email){
  1174. if (email.length == 0) return '#7a316f';
  1175. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1176. if (!clientStats) return '#7a316f';
  1177. statsColor = usageColor(clientStats.down + clientStats.up, this.trafficDiff, clientStats.total);
  1178. expColor = usageColor(new Date().getTime(), this.expireDiff, clientStats.expiryTime);
  1179. switch (true) {
  1180. case statsColor == "red" || expColor == "red":
  1181. return "#cf3c3c"; // Red
  1182. case statsColor == "orange" || expColor == "orange":
  1183. return "#f37b24"; // Orange
  1184. case statsColor == "green" || expColor == "green":
  1185. return "#008771"; // Green
  1186. default:
  1187. return "#7a316f"; // purple
  1188. }
  1189. },
  1190. isClientEnabled(dbInbound, email) {
  1191. clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null;
  1192. return clientStats ? clientStats['enable'] : true;
  1193. },
  1194. isClientOnline(email) {
  1195. return this.onlineClients.includes(email);
  1196. },
  1197. isRemovable(dbInboundId) {
  1198. return this.getInboundClients(this.dbInbounds.find(row => row.id === dbInboundId)).length > 1
  1199. },
  1200. inboundLinks(dbInboundId) {
  1201. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1202. newDbInbound = this.checkFallback(dbInbound);
  1203. txtModal.show('{{ i18n "pages.inbounds.export"}}', newDbInbound.genInboundLinks(), newDbInbound.remark);
  1204. },
  1205. exportSubs(dbInboundId) {
  1206. const dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1207. const clients = this.getInboundClients(dbInbound);
  1208. let subLinks = []
  1209. if (clients != null){
  1210. clients.forEach(c => {
  1211. if (c.subId && c.subId.length>0){
  1212. subLinks.push(this.subSettings.subURI + c.subId + "?name=" + c.subId)
  1213. }
  1214. })
  1215. }
  1216. txtModal.show(
  1217. '{{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}',
  1218. [...new Set(subLinks)].join('\n'),
  1219. dbInbound.remark + "-Subs");
  1220. },
  1221. importInbound() {
  1222. promptModal.open({
  1223. title: '{{ i18n "pages.inbounds.importInbound" }}',
  1224. type: 'textarea',
  1225. value: '',
  1226. okText: '{{ i18n "pages.inbounds.import" }}',
  1227. confirm: async (dbInboundText) => {
  1228. await this.submit('/panel/inbound/import', {data: dbInboundText}, promptModal);
  1229. promptModal.close();
  1230. },
  1231. });
  1232. },
  1233. exportAllSubs() {
  1234. let subLinks = []
  1235. for (const dbInbound of this.dbInbounds) {
  1236. const clients = this.getInboundClients(dbInbound);
  1237. if (clients != null){
  1238. clients.forEach(c => {
  1239. if (c.subId && c.subId.length>0){
  1240. subLinks.push(this.subSettings.subURI + c.subId + "?name=" + c.subId)
  1241. }
  1242. })
  1243. }
  1244. }
  1245. txtModal.show(
  1246. '{{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}',
  1247. [...new Set(subLinks)].join('\r\n'),
  1248. 'All-Inbounds-Subs');
  1249. },
  1250. exportAllLinks() {
  1251. let copyText = [];
  1252. for (const dbInbound of this.dbInbounds) {
  1253. copyText.push(dbInbound.genInboundLinks(this.remarkModel));
  1254. }
  1255. txtModal.show('{{ i18n "pages.inbounds.export"}}', copyText.join('\r\n'), 'All-Inbounds');
  1256. },
  1257. copyToClipboard(dbInboundId) {
  1258. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1259. txtModal.show('{{ i18n "pages.inbounds.inboundData" }}', JSON.stringify(dbInbound, null, 2));
  1260. },
  1261. async startDataRefreshLoop() {
  1262. while (this.isRefreshEnabled) {
  1263. try {
  1264. await this.getDBInbounds();
  1265. } catch (e) {
  1266. console.error(e);
  1267. }
  1268. await PromiseUtil.sleep(this.refreshInterval);
  1269. }
  1270. },
  1271. toggleRefresh() {
  1272. localStorage.setItem("isRefreshEnabled", this.isRefreshEnabled);
  1273. if (this.isRefreshEnabled) {
  1274. this.startDataRefreshLoop();
  1275. }
  1276. },
  1277. changeRefreshInterval() {
  1278. localStorage.setItem("refreshInterval", this.refreshInterval);
  1279. },
  1280. async manualRefresh() {
  1281. if (!this.refreshing) {
  1282. this.spinning = true;
  1283. await this.getDBInbounds();
  1284. this.spinning = false;
  1285. }
  1286. },
  1287. pagination(obj){
  1288. if (this.pageSize > 0 && obj.length>this.pageSize) {
  1289. // Set page options based on object size
  1290. sizeOptions = []
  1291. for (i=this.pageSize;i<=obj.length;i=i+this.pageSize) {
  1292. sizeOptions.push(i.toString());
  1293. }
  1294. // Add option to see all in one page
  1295. sizeOptions.push(i.toString());
  1296. p = {
  1297. showSizeChanger: true,
  1298. size: 'small',
  1299. position: 'bottom',
  1300. pageSize: this.pageSize,
  1301. pageSizeOptions: sizeOptions
  1302. }
  1303. return p
  1304. }
  1305. return false
  1306. },
  1307. onResize() {
  1308. this.isMobile = window.innerWidth <= 768;
  1309. }
  1310. },
  1311. watch: {
  1312. searchKey: debounce(function (newVal) {
  1313. this.searchInbounds(newVal);
  1314. }, 500)
  1315. },
  1316. mounted() {
  1317. if (window.location.protocol !== "https:") {
  1318. this.showAlert = true;
  1319. }
  1320. window.addEventListener('resize', this.onResize);
  1321. this.onResize();
  1322. this.loading();
  1323. this.getDefaultSettings();
  1324. if (this.isRefreshEnabled) {
  1325. this.startDataRefreshLoop();
  1326. }
  1327. else {
  1328. this.getDBInbounds();
  1329. }
  1330. this.loading(false);
  1331. },
  1332. computed: {
  1333. total() {
  1334. let down = 0, up = 0;
  1335. let clients = 0, deactive = [], depleted = [], expiring = [];
  1336. this.dbInbounds.forEach(dbInbound => {
  1337. down += dbInbound.down;
  1338. up += dbInbound.up;
  1339. if (this.clientCount[dbInbound.id]) {
  1340. clients += this.clientCount[dbInbound.id].clients;
  1341. deactive = deactive.concat(this.clientCount[dbInbound.id].deactive);
  1342. depleted = depleted.concat(this.clientCount[dbInbound.id].depleted);
  1343. expiring = expiring.concat(this.clientCount[dbInbound.id].expiring);
  1344. }
  1345. });
  1346. return {
  1347. down: down,
  1348. up: up,
  1349. clients: clients,
  1350. deactive: deactive,
  1351. depleted: depleted,
  1352. expiring: expiring,
  1353. };
  1354. }
  1355. },
  1356. });
  1357. </script>
  1358. {{template "inboundModal"}}
  1359. {{template "promptModal"}}
  1360. {{template "qrcodeModal"}}
  1361. {{template "textModal"}}
  1362. {{template "inboundInfoModal"}}
  1363. {{template "clientsModal"}}
  1364. {{template "clientsBulkModal"}}
  1365. </body>
  1366. </html>