inbounds.html 80 KB

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