inbounds.html 84 KB

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