inbounds.html 71 KB

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