inbounds.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  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. .ant-col-sm-24 {
  11. margin-top: 10px;
  12. }
  13. </style>
  14. <body>
  15. <a-layout id="app" v-cloak>
  16. {{ template "commonSider" . }}
  17. <a-layout id="content-layout" :style="siderDrawer.isDarkTheme ? bgDarkStyle : ''">
  18. <a-layout-content>
  19. <a-spin :spinning="spinning" :delay="500" tip="loading">
  20. <transition name="list" appear>
  21. <a-tag v-if="false" color="red" style="margin-bottom: 10px">
  22. 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
  23. </a-tag>
  24. </transition>
  25. <transition name="list" appear>
  26. <a-card hoverable style="margin-bottom: 20px;" :class="siderDrawer.isDarkTheme ? darkClass : ''">
  27. <a-row>
  28. <a-col :xs="24" :sm="24" :lg="12">
  29. {{ i18n "pages.inbounds.totalDownUp" }}:
  30. <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
  31. </a-col>
  32. <a-col :xs="24" :sm="24" :lg="12">
  33. {{ i18n "pages.inbounds.totalUsage" }}:
  34. <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
  35. </a-col>
  36. <a-col :xs="24" :sm="24" :lg="12">
  37. {{ i18n "pages.inbounds.inboundCount" }}:
  38. <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
  39. </a-col>
  40. <a-col :xs="24" :sm="24" :lg="12">
  41. {{ i18n "clients" }}:
  42. <a-tag color="green">[[ total.clients ]]</a-tag>
  43. <a-tag color="blue">{{ i18n "enabled" }} [[ total.active ]]</a-tag>
  44. <a-tag color="red">{{ i18n "disabled" }} [[ total.deactive ]]</a-tag>
  45. </a-col>
  46. </a-row>
  47. </a-card>
  48. </transition>
  49. <transition name="list" appear>
  50. <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
  51. <div slot="title">
  52. <a-button type="primary" icon="plus" @click="openAddInbound">{{ i18n "pages.inbounds.addInbound" }}</a-button>
  53. <a-button type="primary" icon="export" @click="exportAllLinks">{{ i18n "pages.inbounds.export" }}</a-button>
  54. </div>
  55. <a-input v-model.lazy="searchKey" placeholder="{{ i18n "search" }}" autofocus style="max-width: 300px"></a-input>
  56. <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
  57. :data-source="searchedInbounds"
  58. :loading="spinning" :scroll="{ x: 1300 }"
  59. :pagination="false"
  60. style="margin-top: 20px"
  61. @change="() => getDBInbounds()">
  62. <template slot="action" slot-scope="text, dbInbound">
  63. <a-icon type="edit" style="font-size: 25px" @click="openEditInbound(dbInbound.id);"></a-icon>
  64. <a-dropdown :trigger="['click']">
  65. <a @click="e => e.preventDefault()">{{ i18n "pages.inbounds.operate" }}</a>
  66. <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="siderDrawer.theme" style="border: 1px solid rgba(255, 255, 255, 0.65);">
  67. <a-menu-item v-if="dbInbound.isSS" key="qrcode">
  68. <a-icon type="qrcode"></a-icon>
  69. {{ i18n "qrCode" }}
  70. </a-menu-item>
  71. <a-menu-item key="edit">
  72. <a-icon type="edit"></a-icon>
  73. {{ i18n "edit" }}
  74. </a-menu-item>
  75. <template v-if="dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess">
  76. <a-menu-item key="addClient">
  77. <a-icon type="user"></a-icon>
  78. {{ i18n "pages.client.add"}}
  79. </a-menu-item>
  80. <a-menu-item key="addBulkClient">
  81. <a-icon type="team"></a-icon>
  82. {{ i18n "pages.client.bulk"}}
  83. </a-menu-item>
  84. <a-menu-item key="export">
  85. <a-icon type="export"></a-icon>
  86. {{ i18n "pages.inbounds.export"}}
  87. </a-menu-item>
  88. </template>
  89. <template v-else>
  90. <a-menu-item key="showInfo">
  91. <a-icon type="info-circle"></a-icon>
  92. {{ i18n "info"}}
  93. </a-menu-item>
  94. </template>
  95. <a-menu-item key="resetTraffic">
  96. <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
  97. </a-menu-item>
  98. <a-menu-item key="clone">
  99. <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.Clone"}}
  100. </a-menu-item>
  101. <a-menu-item key="delete">
  102. <span style="color: #FF4D4F">
  103. <a-icon type="delete"></a-icon> {{ i18n "delete"}}
  104. </span>
  105. </a-menu-item>
  106. </a-menu>
  107. </a-dropdown>
  108. </template>
  109. <template slot="protocol" slot-scope="text, dbInbound">
  110. <a-tag color="blue">[[ dbInbound.protocol ]]</a-tag>
  111. </template>
  112. <template slot="traffic" slot-scope="text, dbInbound">
  113. <a-tag color="blue">[[ sizeFormat(dbInbound.up) ]] / [[ sizeFormat(dbInbound.down) ]]</a-tag>
  114. <template v-if="dbInbound.total > 0">
  115. <a-tag v-if="dbInbound.up + dbInbound.down < dbInbound.total" color="cyan">[[ sizeFormat(dbInbound.total) ]]</a-tag>
  116. <a-tag v-else color="red">[[ sizeFormat(dbInbound.total) ]]</a-tag>
  117. </template>
  118. <a-tag v-else color="green">{{ i18n "unlimited" }}</a-tag>
  119. </template>
  120. <template slot="stream" slot-scope="text, dbInbound, index">
  121. <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
  122. <a-tag color="green">[[ inbounds[index].stream.network ]]</a-tag>
  123. <a-tag v-if="inbounds[index].stream.isTls" color="blue">tls</a-tag>
  124. <a-tag v-if="inbounds[index].stream.isXTls" color="blue">xtls</a-tag>
  125. </template>
  126. <template v-else>{{ i18n "none" }}</template>
  127. </template>
  128. <template slot="enable" slot-scope="text, dbInbound">
  129. <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id)"></a-switch>
  130. </template>
  131. <template slot="expiryTime" slot-scope="text, dbInbound">
  132. <template v-if="dbInbound.expiryTime > 0">
  133. <a-tag v-if="dbInbound.isExpiry" color="red">
  134. [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
  135. </a-tag>
  136. <a-tag v-else color="blue">
  137. [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
  138. </a-tag>
  139. </template>
  140. <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
  141. </template>
  142. <template slot="expandedRowRender" slot-scope="record">
  143. <a-table
  144. v-if="(record.protocol === Protocols.VLESS) || (record.protocol === Protocols.VMESS)"
  145. :row-key="client => client.id"
  146. :columns="innerColumns"
  147. :data-source="getInboundClients(record)"
  148. :pagination="false"
  149. >
  150. {{template "client_table"}}
  151. </a-table>
  152. <a-table
  153. v-else-if="record.protocol === Protocols.TROJAN"
  154. :row-key="client => client.id"
  155. :columns="innerTrojanColumns"
  156. :data-source="getInboundClients(record)"
  157. :pagination="false"
  158. >
  159. {{template "client_table"}}
  160. </a-table>
  161. </template>
  162. </a-table>
  163. </a-card>
  164. </transition>
  165. </a-spin>
  166. </a-layout-content>
  167. </a-layout>
  168. </a-layout>
  169. {{template "js" .}}
  170. <script>
  171. const columns = [{
  172. title: '{{ i18n "pages.inbounds.operate" }}',
  173. align: 'center',
  174. width: 60,
  175. scopedSlots: { customRender: 'action' },
  176. }, {
  177. title: '{{ i18n "pages.inbounds.enable" }}',
  178. align: 'center',
  179. width: 40,
  180. scopedSlots: { customRender: 'enable' },
  181. }, {
  182. title: "ID",
  183. align: 'center',
  184. dataIndex: "id",
  185. width: 30,
  186. }, {
  187. title: '{{ i18n "pages.inbounds.remark" }}',
  188. align: 'center',
  189. width: 80,
  190. dataIndex: "remark",
  191. }, {
  192. title: '{{ i18n "pages.inbounds.protocol" }}',
  193. align: 'center',
  194. width: 50,
  195. scopedSlots: { customRender: 'protocol' },
  196. }, {
  197. title: '{{ i18n "pages.inbounds.port" }}',
  198. align: 'center',
  199. dataIndex: "port",
  200. width: 40,
  201. }, {
  202. title: '{{ i18n "pages.inbounds.traffic" }}↑|↓',
  203. align: 'center',
  204. width: 150,
  205. scopedSlots: { customRender: 'traffic' },
  206. }, {
  207. title: '{{ i18n "pages.inbounds.transportConfig" }}',
  208. align: 'center',
  209. width: 60,
  210. scopedSlots: { customRender: 'stream' },
  211. }, {
  212. title: '{{ i18n "pages.inbounds.expireDate" }}',
  213. align: 'center',
  214. width: 80,
  215. scopedSlots: { customRender: 'expiryTime' },
  216. }];
  217. const innerColumns = [
  218. { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
  219. { title: '{{ i18n "pages.inbounds.client" }}', width: 60, scopedSlots: { customRender: 'client' } },
  220. { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 100, scopedSlots: { customRender: 'traffic' } },
  221. { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
  222. { title: 'UID', width: 150, dataIndex: "id" },
  223. ];
  224. const innerTrojanColumns = [
  225. { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
  226. { title: '{{ i18n "pages.inbounds.client" }}', width: 60, scopedSlots: { customRender: 'client' } },
  227. { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 100, scopedSlots: { customRender: 'traffic' } },
  228. { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
  229. { title: 'Password', width: 100, dataIndex: "password" },
  230. ];
  231. const app = new Vue({
  232. delimiters: ['[[', ']]'],
  233. el: '#app',
  234. data: {
  235. siderDrawer,
  236. spinning: false,
  237. inbounds: [],
  238. dbInbounds: [],
  239. searchKey: '',
  240. searchedInbounds: [],
  241. },
  242. methods: {
  243. loading(spinning=true) {
  244. this.spinning = spinning;
  245. },
  246. async getDBInbounds() {
  247. this.loading();
  248. const msg = await HttpUtil.post('/xui/inbound/list');
  249. this.loading(false);
  250. if (!msg.success) {
  251. return;
  252. }
  253. this.setInbounds(msg.obj);
  254. this.searchKey = '';
  255. },
  256. setInbounds(dbInbounds) {
  257. this.inbounds.splice(0);
  258. this.dbInbounds.splice(0);
  259. this.searchedInbounds.splice(0);
  260. for (const inbound of dbInbounds) {
  261. const dbInbound = new DBInbound(inbound);
  262. this.inbounds.push(dbInbound.toInbound());
  263. this.dbInbounds.push(dbInbound);
  264. this.searchedInbounds.push(dbInbound);
  265. }
  266. },
  267. searchInbounds(key) {
  268. if (ObjectUtil.isEmpty(key)) {
  269. this.searchedInbounds = this.dbInbounds.slice();
  270. } else {
  271. this.searchedInbounds.splice(0, this.searchedInbounds.length);
  272. this.dbInbounds.forEach(inbound => {
  273. if (ObjectUtil.deepSearch(inbound, key)) {
  274. const newInbound = new DBInbound(inbound);
  275. const inboundSettings = JSON.parse(inbound.settings);
  276. if (inboundSettings.hasOwnProperty('clients')){
  277. const searchedSettings = { "clients": [] };
  278. inboundSettings.clients.forEach(client => {
  279. if (ObjectUtil.deepSearch(client, key)){
  280. searchedSettings.clients.push(client);
  281. }
  282. });
  283. newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, searchedSettings);
  284. }
  285. this.searchedInbounds.push(newInbound);
  286. }
  287. });
  288. }
  289. },
  290. clickAction(action, dbInbound) {
  291. switch (action.key) {
  292. case "qrcode":
  293. this.showQrcode(dbInbound);
  294. break;
  295. case "showInfo":
  296. this.showInfo(dbInbound);
  297. break;
  298. case "edit":
  299. this.openEditInbound(dbInbound.id);
  300. break;
  301. case "addClient":
  302. this.openAddClient(dbInbound.id)
  303. break;
  304. case "addBulkClient":
  305. this.openAddBulkClient(dbInbound.id)
  306. break;
  307. case "export":
  308. this.inboundLinks(dbInbound.id);
  309. break;
  310. case "resetTraffic":
  311. this.resetTraffic(dbInbound.id);
  312. break;
  313. case "clone":
  314. this.openCloneInbound(dbInbound);
  315. break;
  316. case "delete":
  317. this.delInbound(dbInbound.id);
  318. break;
  319. }
  320. },
  321. openCloneInbound(dbInbound) {
  322. this.$confirm({
  323. title: '{{ i18n "pages.inbounds.cloneInbound"}} ' + dbInbound.remark,
  324. content: '{{ i18n "pages.inbounds.cloneInboundContent"}}',
  325. okText: '{{ i18n "pages.inbounds.cloneInboundOk"}}',
  326. cancelText: '{{ i18n "cancel" }}',
  327. onOk: () => {
  328. const baseInbound = dbInbound.toInbound();
  329. dbInbound.up = 0;
  330. dbInbound.down = 0;
  331. this.cloneInbound(baseInbound, dbInbound);
  332. },
  333. });
  334. },
  335. async cloneInbound(baseInbound, dbInbound) {
  336. const inbound = new Inbound();
  337. const data = {
  338. up: dbInbound.up,
  339. down: dbInbound.down,
  340. total: dbInbound.total,
  341. remark: dbInbound.remark + " - Cloned",
  342. enable: dbInbound.enable,
  343. expiryTime: dbInbound.expiryTime,
  344. listen: inbound.listen,
  345. port: inbound.port,
  346. protocol: baseInbound.protocol,
  347. settings: inbound.settings.toString(),
  348. streamSettings: baseInbound.stream.toString(),
  349. sniffing: baseInbound.canSniffing() ? baseInbound.sniffing.toString() : '{}',
  350. };
  351. await this.submit('/xui/inbound/add', data, inModal);
  352. },
  353. openAddInbound() {
  354. inModal.show({
  355. title: '{{ i18n "pages.inbounds.addInbound"}}',
  356. okText: '{{ i18n "pages.inbounds.addTo"}}',
  357. cancelText: '{{ i18n "close" }}',
  358. confirm: async (inbound, dbInbound) => {
  359. inModal.loading();
  360. await this.addInbound(inbound, dbInbound);
  361. inModal.close();
  362. },
  363. isEdit: false
  364. });
  365. },
  366. openEditInbound(dbInboundId) {
  367. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  368. const inbound = dbInbound.toInbound();
  369. inModal.show({
  370. title: '{{ i18n "pages.inbounds.modifyInbound"}}',
  371. okText: '{{ i18n "pages.inbounds.revise"}}',
  372. cancelText: '{{ i18n "close" }}',
  373. inbound: inbound,
  374. dbInbound: dbInbound,
  375. confirm: async (inbound, dbInbound) => {
  376. inModal.loading();
  377. await this.updateInbound(inbound, dbInbound);
  378. inModal.close();
  379. },
  380. isEdit: true
  381. });
  382. },
  383. async addInbound(inbound, dbInbound) {
  384. const data = {
  385. up: dbInbound.up,
  386. down: dbInbound.down,
  387. total: dbInbound.total,
  388. remark: dbInbound.remark,
  389. enable: dbInbound.enable,
  390. expiryTime: dbInbound.expiryTime,
  391. listen: inbound.listen,
  392. port: inbound.port,
  393. protocol: inbound.protocol,
  394. settings: inbound.settings.toString(),
  395. };
  396. if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
  397. if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();
  398. await this.submit('/xui/inbound/add', data, inModal);
  399. },
  400. async updateInbound(inbound, dbInbound) {
  401. const data = {
  402. up: dbInbound.up,
  403. down: dbInbound.down,
  404. total: dbInbound.total,
  405. remark: dbInbound.remark,
  406. enable: dbInbound.enable,
  407. expiryTime: dbInbound.expiryTime,
  408. listen: inbound.listen,
  409. port: inbound.port,
  410. protocol: inbound.protocol,
  411. settings: inbound.settings.toString(),
  412. };
  413. if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
  414. if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();
  415. await this.submit(`/xui/inbound/update/${dbInbound.id}`, data, inModal);
  416. },
  417. openAddClient(dbInboundId) {
  418. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  419. clientModal.show({
  420. title: '{{ i18n "pages.client.add"}}',
  421. okText: '{{ i18n "pages.client.submitAdd"}}',
  422. dbInbound: dbInbound,
  423. confirm: async (inbound, dbInbound, index) => {
  424. clientModal.loading();
  425. await this.addClient(inbound, dbInbound);
  426. clientModal.close();
  427. },
  428. isEdit: false
  429. });
  430. },
  431. openAddBulkClient(dbInboundId) {
  432. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  433. clientsBulkModal.show({
  434. title: '{{ i18n "pages.client.bulk"}} ' + dbInbound.remark,
  435. okText: '{{ i18n "pages.client.bulk"}}',
  436. dbInbound: dbInbound,
  437. confirm: async (inbound, dbInbound) => {
  438. clientsBulkModal.loading();
  439. await this.addClient(inbound, dbInbound);
  440. clientsBulkModal.close();
  441. },
  442. });
  443. },
  444. openEditClient(dbInboundId, client) {
  445. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  446. clients = this.getInboundClients(dbInbound);
  447. index = this.findIndexOfClient(clients, client);
  448. clientModal.show({
  449. title: '{{ i18n "pages.client.edit"}}',
  450. okText: '{{ i18n "pages.client.submitEdit"}}',
  451. dbInbound: dbInbound,
  452. index: index,
  453. confirm: async (inbound, dbInbound, index) => {
  454. clientModal.loading();
  455. await this.updateClient(inbound, dbInbound, index);
  456. clientModal.close();
  457. },
  458. isEdit: true
  459. });
  460. },
  461. findIndexOfClient(clients,client) {
  462. firstKey = Object.keys(client)[0];
  463. return clients.findIndex(c => c[firstKey] === client[firstKey]);
  464. },
  465. async addClient(inbound, dbInbound) {
  466. const data = {
  467. id: dbInbound.id,
  468. settings: inbound.settings.toString(),
  469. };
  470. await this.submit('/xui/inbound/addClient', data);
  471. },
  472. async updateClient(inbound, dbInbound, index) {
  473. const data = {
  474. id: dbInbound.id,
  475. settings: inbound.settings.toString(),
  476. };
  477. await this.submit(`/xui/inbound/updateClient/${index}`, data);
  478. },
  479. resetTraffic(dbInboundId) {
  480. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  481. this.$confirm({
  482. title: '{{ i18n "pages.inbounds.resetTraffic"}}',
  483. content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
  484. class: siderDrawer.isDarkTheme ? darkClass : '',
  485. okText: '{{ i18n "reset"}}',
  486. cancelText: '{{ i18n "cancel"}}',
  487. onOk: () => {
  488. const inbound = dbInbound.toInbound();
  489. dbInbound.up = 0;
  490. dbInbound.down = 0;
  491. this.updateInbound(inbound, dbInbound);
  492. },
  493. });
  494. },
  495. delInbound(dbInboundId) {
  496. this.$confirm({
  497. title: '{{ i18n "pages.inbounds.deleteInbound"}}',
  498. content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
  499. class: siderDrawer.isDarkTheme ? darkClass : '',
  500. okText: '{{ i18n "delete"}}',
  501. cancelText: '{{ i18n "cancel"}}',
  502. onOk: () => this.submit('/xui/inbound/del/' + dbInboundId),
  503. });
  504. },
  505. delClient(dbInboundId,client) {
  506. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  507. newDbInbound = new DBInbound(dbInbound);
  508. inbound = newDbInbound.toInbound();
  509. clients = this.getClients(dbInbound.protocol, inbound.settings);
  510. index = this.findIndexOfClient(clients, client);
  511. clients.splice(index, 1);
  512. const data = {
  513. id: dbInboundId,
  514. settings: inbound.settings.toString(),
  515. };
  516. this.$confirm({
  517. title: '{{ i18n "pages.inbounds.deleteInbound"}}',
  518. content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
  519. class: siderDrawer.isDarkTheme ? darkClass : '',
  520. okText: '{{ i18n "delete"}}',
  521. cancelText: '{{ i18n "cancel"}}',
  522. onOk: () => this.submit('/xui/inbound/delClient/' + client.email, data),
  523. });
  524. },
  525. getClients(protocol, clientSettings) {
  526. switch(protocol){
  527. case Protocols.VMESS: return clientSettings.vmesses;
  528. case Protocols.VLESS: return clientSettings.vlesses;
  529. case Protocols.TROJAN: return clientSettings.trojans;
  530. default: return null;
  531. }
  532. },
  533. showQrcode(dbInbound, clientIndex) {
  534. const link = dbInbound.genLink(clientIndex);
  535. qrModal.show('{{ i18n "qrCode"}}', link, dbInbound);
  536. },
  537. showInfo(dbInbound, index) {
  538. infoModal.show(dbInbound, index);
  539. },
  540. switchEnable(dbInboundId) {
  541. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  542. this.submit(`/xui/inbound/update/${dbInboundId}`, dbInbound);
  543. },
  544. async submit(url, data) {
  545. const msg = await HttpUtil.postWithModal(url, data);
  546. if (msg.success) {
  547. await this.getDBInbounds();
  548. }
  549. },
  550. getInboundClients(dbInbound) {
  551. if(dbInbound.protocol == Protocols.VLESS) {
  552. return dbInbound.toInbound().settings.vlesses
  553. } else if(dbInbound.protocol == Protocols.VMESS) {
  554. return dbInbound.toInbound().settings.vmesses
  555. } else if(dbInbound.protocol == Protocols.TROJAN) {
  556. return dbInbound.toInbound().settings.trojans
  557. }
  558. },
  559. resetClientTraffic(client,dbInboundId) {
  560. this.$confirm({
  561. title: '{{ i18n "pages.inbounds.resetTraffic"}}',
  562. content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
  563. class: siderDrawer.isDarkTheme ? darkClass : '',
  564. okText: '{{ i18n "reset"}}',
  565. cancelText: '{{ i18n "cancel"}}',
  566. onOk: () => this.submit('/xui/inbound/' + dbInboundId + '/resetClientTraffic/'+ client.email),
  567. })
  568. },
  569. isExpiry(dbInbound, index) {
  570. return dbInbound.toInbound().isExpiry(index)
  571. },
  572. getUpStats(dbInbound, email) {
  573. if(email.length == 0) return 0
  574. clientStats = dbInbound.clientStats.find(stats => stats.email === email)
  575. return clientStats ? clientStats.up : 0
  576. },
  577. getDownStats(dbInbound, email) {
  578. if(email.length == 0) return 0
  579. clientStats = dbInbound.clientStats.find(stats => stats.email === email)
  580. return clientStats ? clientStats.down : 0
  581. },
  582. isTrafficExhausted(dbInbound, email) {
  583. if(email.length == 0) return false
  584. clientStats = dbInbound.clientStats.find(stats => stats.email === email)
  585. return clientStats ? clientStats.down + clientStats.up > clientStats.total : false
  586. },
  587. isClientEnabled(dbInbound, email) {
  588. clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null
  589. return clientStats ? clientStats['enable'] : true
  590. },
  591. isRemovable(dbInbound_id){
  592. return this.getInboundClients(this.dbInbounds.find(row => row.id === dbInbound_id)).length > 1
  593. },
  594. inboundLinks(dbInboundId) {
  595. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  596. txtModal.show('{{ i18n "pages.inbounds.export"}}',dbInbound.genInboundLinks,dbInbound.remark);
  597. },
  598. exportAllLinks() {
  599. let copyText = '';
  600. for (const dbInbound of this.dbInbounds) {
  601. copyText += dbInbound.genInboundLinks
  602. }
  603. txtModal.show('{{ i18n "pages.inbounds.export"}}',copyText,'All-Inbounds');
  604. },
  605. },
  606. watch: {
  607. searchKey: debounce(function (newVal) {
  608. this.searchInbounds(newVal);
  609. }, 500)
  610. },
  611. mounted() {
  612. this.getDBInbounds();
  613. },
  614. computed: {
  615. total() {
  616. let down = 0, up = 0;
  617. let clients = 0, active = 0, deactive = 0;
  618. this.dbInbounds.forEach(dbInbound => {
  619. down += dbInbound.down;
  620. up += dbInbound.up;
  621. inbound = dbInbound.toInbound();
  622. clients = this.getClients(dbInbound.protocol, inbound.settings);
  623. if(clients){
  624. if(dbInbound.enable){
  625. isClientEnable = false;
  626. clients.forEach(client => {
  627. isClientEnable = client.email == "" ? true: this.isClientEnabled(dbInbound,client.email);
  628. isClientEnable ? active++ : deactive++;
  629. });
  630. } else {
  631. deactive += clients.length;
  632. }
  633. } else {
  634. dbInbound.enable ? active++ : deactive++;
  635. }
  636. });
  637. return {
  638. down: down,
  639. up: up,
  640. clients: active + deactive,
  641. active: active,
  642. deactive: deactive,
  643. };
  644. }
  645. },
  646. });
  647. </script>
  648. {{template "inboundModal"}}
  649. {{template "promptModal"}}
  650. {{template "qrcodeModal"}}
  651. {{template "textModal"}}
  652. {{template "inboundInfoModal"}}
  653. {{template "clientsModal"}}
  654. {{template "clientsBulkModal"}}
  655. </body>
  656. </html>