inbounds.html 73 KB

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