inbounds.html 83 KB

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