inbounds.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
  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" @click="openAddInbound">Add Inbound</a-button>
  53. <a-button type="primary" @click="exportAllLinks" class="copy-btn">Export Links</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)">
  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="export">
  77. <a-icon type="export"></a-icon>
  78. {{ i18n "pages.inbounds.export"}}
  79. </a-menu-item>
  80. </template>
  81. <a-menu-item key="resetTraffic">
  82. <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
  83. </a-menu-item>
  84. <a-menu-item key="delete">
  85. <span style="color: #FF4D4F">
  86. <a-icon type="delete"></a-icon> {{ i18n "delete"}}
  87. </span>
  88. </a-menu-item>
  89. </a-menu>
  90. </a-dropdown>
  91. </template>
  92. <template slot="protocol" slot-scope="text, dbInbound">
  93. <a-tag color="blue">[[ dbInbound.protocol ]]</a-tag>
  94. </template>
  95. <template slot="traffic" slot-scope="text, dbInbound">
  96. <a-tag color="blue">[[ sizeFormat(dbInbound.up) ]] / [[ sizeFormat(dbInbound.down) ]]</a-tag>
  97. <template v-if="dbInbound.total > 0">
  98. <a-tag v-if="dbInbound.up + dbInbound.down < dbInbound.total" color="cyan">[[ sizeFormat(dbInbound.total) ]]</a-tag>
  99. <a-tag v-else color="red">[[ sizeFormat(dbInbound.total) ]]</a-tag>
  100. </template>
  101. <a-tag v-else color="green">{{ i18n "unlimited" }}</a-tag>
  102. </template>
  103. <template slot="stream" slot-scope="text, dbInbound, index">
  104. <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
  105. <a-tag color="green">[[ inbounds[index].stream.network ]]</a-tag>
  106. <a-tag v-if="inbounds[index].stream.isTls" color="blue">tls</a-tag>
  107. <a-tag v-if="inbounds[index].stream.isXTls" color="blue">xtls</a-tag>
  108. </template>
  109. <template v-else>{{ i18n "none" }}</template>
  110. </template>
  111. <template slot="enable" slot-scope="text, dbInbound">
  112. <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound)"></a-switch>
  113. </template>
  114. <template slot="expiryTime" slot-scope="text, dbInbound">
  115. <template v-if="dbInbound.expiryTime > 0">
  116. <a-tag v-if="dbInbound.isExpiry" color="red">
  117. [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
  118. </a-tag>
  119. <a-tag v-else color="blue">
  120. [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
  121. </a-tag>
  122. </template>
  123. <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
  124. </template>
  125. <template slot="expandedRowRender" slot-scope="record">
  126. <a-table
  127. v-if="(record.protocol === Protocols.VLESS) || (record.protocol === Protocols.VMESS)"
  128. :row-key="client => client.id"
  129. :columns="innerColumns"
  130. :data-source="getInboundClients(record)"
  131. :pagination="false"
  132. >
  133. {{template "client_row"}}
  134. </a-table>
  135. <a-table
  136. v-else-if="record.protocol === Protocols.TROJAN"
  137. :row-key="client => client.id"
  138. :columns="innerTrojanColumns"
  139. :data-source="getInboundClients(record)"
  140. :pagination="false"
  141. >
  142. {{template "client_row"}}
  143. </a-table>
  144. <a-table
  145. v-else
  146. :row-key="client => client.id"
  147. :columns="innerOneColumns"
  148. :data-source="record"
  149. :pagination="false"
  150. >
  151. {{template "client_row"}}
  152. </a-table>
  153. </template>
  154. </a-table>
  155. </a-card>
  156. </transition>
  157. </a-spin>
  158. </a-layout-content>
  159. </a-layout>
  160. </a-layout>
  161. {{template "js" .}}
  162. <script>
  163. const columns = [{
  164. title: '{{ i18n "pages.inbounds.operate" }}',
  165. align: 'center',
  166. width: 60,
  167. scopedSlots: { customRender: 'action' },
  168. }, {
  169. title: '{{ i18n "pages.inbounds.enable" }}',
  170. align: 'center',
  171. width: 40,
  172. scopedSlots: { customRender: 'enable' },
  173. }, {
  174. title: "Id",
  175. align: 'center',
  176. dataIndex: "id",
  177. width: 30,
  178. }, {
  179. title: '{{ i18n "pages.inbounds.remark" }}',
  180. align: 'center',
  181. width: 80,
  182. dataIndex: "remark",
  183. }, {
  184. title: '{{ i18n "pages.inbounds.protocol" }}',
  185. align: 'center',
  186. width: 50,
  187. scopedSlots: { customRender: 'protocol' },
  188. }, {
  189. title: '{{ i18n "pages.inbounds.port" }}',
  190. align: 'center',
  191. dataIndex: "port",
  192. width: 40,
  193. }, {
  194. title: '{{ i18n "pages.inbounds.traffic" }}↑|↓',
  195. align: 'center',
  196. width: 150,
  197. scopedSlots: { customRender: 'traffic' },
  198. },{
  199. title: '{{ i18n "pages.inbounds.transportConfig" }}',
  200. align: 'center',
  201. width: 60,
  202. scopedSlots: { customRender: 'stream' },
  203. }, {
  204. title: '{{ i18n "pages.inbounds.expireDate" }}',
  205. align: 'center',
  206. width: 80,
  207. scopedSlots: { customRender: 'expiryTime' },
  208. }];
  209. const innerColumns = [
  210. { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
  211. { title: '{{ i18n "pages.inbounds.client" }}', width: 60, scopedSlots: { customRender: 'client' } },
  212. { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 100, scopedSlots: { customRender: 'traffic' } },
  213. { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
  214. { title: 'UID', width: 150, dataIndex: "id" },
  215. ];
  216. const innerTrojanColumns = [
  217. { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
  218. { title: '{{ i18n "pages.inbounds.client" }}', width: 60, scopedSlots: { customRender: 'client' } },
  219. { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 100, scopedSlots: { customRender: 'traffic' } },
  220. { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
  221. { title: 'Password', width: 100, dataIndex: "password" },
  222. ];
  223. const innerOneColumns = [
  224. { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
  225. ];
  226. const app = new Vue({
  227. delimiters: ['[[', ']]'],
  228. el: '#app',
  229. data: {
  230. siderDrawer,
  231. spinning: false,
  232. inbounds: [],
  233. dbInbounds: [],
  234. searchKey: '',
  235. searchedInbounds: [],
  236. },
  237. methods: {
  238. loading(spinning=true) {
  239. this.spinning = spinning;
  240. },
  241. async getDBInbounds() {
  242. this.loading();
  243. const msg = await HttpUtil.post('/xui/inbound/list');
  244. this.loading(false);
  245. if (!msg.success) {
  246. return;
  247. }
  248. this.setInbounds(msg.obj);
  249. },
  250. setInbounds(dbInbounds) {
  251. this.inbounds.splice(0);
  252. this.dbInbounds.splice(0);
  253. this.searchedInbounds.splice(0);
  254. for (const inbound of dbInbounds) {
  255. const dbInbound = new DBInbound(inbound);
  256. this.inbounds.push(dbInbound.toInbound());
  257. this.dbInbounds.push(dbInbound);
  258. this.searchedInbounds.push(dbInbound);
  259. }
  260. },
  261. searchInbounds(key) {
  262. if (ObjectUtil.isEmpty(key)) {
  263. this.searchedInbounds = this.dbInbounds.slice();
  264. } else {
  265. this.searchedInbounds.splice(0, this.searchedInbounds.length);
  266. this.dbInbounds.forEach(inbound => {
  267. if (ObjectUtil.deepSearch(inbound, key)) {
  268. const newInbound = new DBInbound(inbound);
  269. const inboundSettings = JSON.parse(inbound.settings);
  270. if (inboundSettings.hasOwnProperty('clients')){
  271. const searchedSettings = { "clients": [] };
  272. inboundSettings.clients.forEach(client => {
  273. if (ObjectUtil.deepSearch(client, key)){
  274. searchedSettings.clients.push(client);
  275. }
  276. });
  277. newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, searchedSettings);
  278. }
  279. this.searchedInbounds.push(newInbound);
  280. }
  281. });
  282. }
  283. },
  284. clickAction(action, dbInbound) {
  285. switch (action.key) {
  286. case "qrcode":
  287. this.showQrcode(dbInbound);
  288. break;
  289. case "export":
  290. this.inboundLinks(dbInbound.id);
  291. break;
  292. case "edit":
  293. this.openEditInbound(dbInbound.id);
  294. break;
  295. case "resetTraffic":
  296. this.resetTraffic(dbInbound);
  297. break;
  298. case "delete":
  299. this.delInbound(dbInbound);
  300. break;
  301. }
  302. },
  303. openAddInbound() {
  304. inModal.show({
  305. title: '{{ i18n "pages.inbounds.addInbound"}}',
  306. okText: '{{ i18n "pages.inbounds.addTo"}}',
  307. cancelText: '{{ i18n "close" }}',
  308. confirm: async (inbound, dbInbound) => {
  309. inModal.loading();
  310. await this.addInbound(inbound, dbInbound);
  311. inModal.close();
  312. },
  313. isEdit: false
  314. });
  315. },
  316. openEditInbound(dbInbound_id) {
  317. dbInbound = this.dbInbounds.find(row => row.id === dbInbound_id);
  318. const inbound = dbInbound.toInbound();
  319. inModal.show({
  320. title: '{{ i18n "pages.inbounds.modifyInbound"}}',
  321. okText: '{{ i18n "pages.inbounds.revise"}}',
  322. cancelText: '{{ i18n "close" }}',
  323. inbound: inbound,
  324. dbInbound: dbInbound,
  325. confirm: async (inbound, dbInbound) => {
  326. inModal.loading();
  327. await this.updateInbound(inbound, dbInbound);
  328. inModal.close();
  329. },
  330. isEdit: true
  331. });
  332. },
  333. async addInbound(inbound, dbInbound) {
  334. const data = {
  335. up: dbInbound.up,
  336. down: dbInbound.down,
  337. total: dbInbound.total,
  338. remark: dbInbound.remark,
  339. enable: dbInbound.enable,
  340. expiryTime: dbInbound.expiryTime,
  341. listen: inbound.listen,
  342. port: inbound.port,
  343. protocol: inbound.protocol,
  344. settings: inbound.settings.toString(),
  345. streamSettings: inbound.stream.toString(),
  346. sniffing: inbound.canSniffing() ? inbound.sniffing.toString() : '{}',
  347. };
  348. await this.submit('/xui/inbound/add', data, inModal);
  349. },
  350. async updateInbound(inbound, dbInbound) {
  351. const data = {
  352. up: dbInbound.up,
  353. down: dbInbound.down,
  354. total: dbInbound.total,
  355. remark: dbInbound.remark,
  356. enable: dbInbound.enable,
  357. expiryTime: dbInbound.expiryTime,
  358. listen: inbound.listen,
  359. port: inbound.port,
  360. protocol: inbound.protocol,
  361. settings: inbound.settings.toString(),
  362. streamSettings: inbound.stream.toString(),
  363. sniffing: inbound.canSniffing() ? inbound.sniffing.toString() : '{}',
  364. };
  365. await this.submit(`/xui/inbound/update/${dbInbound.id}`, data, inModal);
  366. },
  367. resetTraffic(dbInbound) {
  368. this.$confirm({
  369. title: '{{ i18n "pages.inbounds.resetTraffic"}}',
  370. content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
  371. okText: '{{ i18n "reset"}}',
  372. cancelText: '{{ i18n "cancel"}}',
  373. onOk: () => {
  374. const inbound = dbInbound.toInbound();
  375. dbInbound.up = 0;
  376. dbInbound.down = 0;
  377. this.updateInbound(inbound, dbInbound);
  378. },
  379. });
  380. },
  381. delInbound(dbInbound) {
  382. this.$confirm({
  383. title: '{{ i18n "pages.inbounds.deleteInbound"}}',
  384. content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
  385. okText: '{{ i18n "delete"}}',
  386. cancelText: '{{ i18n "cancel"}}',
  387. onOk: () => this.submit('/xui/inbound/del/' + dbInbound.id),
  388. });
  389. },
  390. getClients(protocol, clientSettings) {
  391. switch(protocol){
  392. case Protocols.VMESS: return clientSettings.vmesses;
  393. case Protocols.VLESS: return clientSettings.vlesses;
  394. case Protocols.TROJAN: return clientSettings.trojans;
  395. default: return null;
  396. }
  397. },
  398. showQrcode(dbInbound, clientIndex) {
  399. const link = dbInbound.genLink(clientIndex);
  400. qrModal.show('{{ i18n "qrCode"}}', link, dbInbound);
  401. },
  402. showInfo(dbInbound, index) {
  403. infoModal.show(dbInbound, index);
  404. },
  405. switchEnable(dbInbound) {
  406. this.submit(`/xui/inbound/update/${dbInbound.id}`, dbInbound);
  407. },
  408. async submit(url, data, modal) {
  409. const msg = await HttpUtil.postWithModal(url, data, modal);
  410. if (msg.success) {
  411. await this.getDBInbounds();
  412. }
  413. },
  414. getInboundClients(dbInbound) {
  415. if(dbInbound.protocol == Protocols.VLESS) {
  416. return dbInbound.toInbound().settings.vlesses
  417. } else if(dbInbound.protocol == Protocols.VMESS) {
  418. return dbInbound.toInbound().settings.vmesses
  419. } else if(dbInbound.protocol == Protocols.TROJAN) {
  420. return dbInbound.toInbound().settings.trojans
  421. }
  422. },
  423. resetClientTraffic(client,inbound,event) {
  424. this.$confirm({
  425. title: '{{ i18n "pages.inbounds.resetTraffic"}}',
  426. content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
  427. okText: '{{ i18n "reset"}}',
  428. cancelText: '{{ i18n "cancel"}}',
  429. onOk: () => {
  430. this.resetClTraffic(client,inbound,event);
  431. },
  432. });
  433. },
  434. async resetClTraffic(client,inbound,event) {
  435. const msg = await HttpUtil.post('/xui/inbound/resetClientTraffic/'+ client.email);
  436. if (!msg.success) {
  437. return;
  438. }
  439. clientStats = inbound.clientStats
  440. if(clientStats.length > 0)
  441. {
  442. for (const key in clientStats) {
  443. if (Object.hasOwnProperty.call(clientStats, key)) {
  444. if(clientStats[key]['email'] == client.email){
  445. clientStats[key]['up'] = 0
  446. clientStats[key]['down'] = 0
  447. }
  448. }
  449. }
  450. }
  451. },
  452. isExpiry(dbInbound, index) {
  453. return dbInbound.toInbound().isExpiry(index)
  454. },
  455. getUpStats(dbInbound, email) {
  456. if(email.length == 0) return 0
  457. clientStats = dbInbound.clientStats.find(stats => stats.email === email)
  458. return clientStats ? clientStats.up : 0
  459. },
  460. getDownStats(dbInbound, email) {
  461. if(email.length == 0) return 0
  462. clientStats = dbInbound.clientStats.find(stats => stats.email === email)
  463. return clientStats ? clientStats.down : 0
  464. },
  465. isTrafficExhausted(dbInbound, email) {
  466. if(email.length == 0) return false
  467. clientStats = dbInbound.clientStats.find(stats => stats.email === email)
  468. return clientStats ? clientStats.down + clientStats.up > clientStats.total : false
  469. },
  470. inboundLinks(dbInboundId) {
  471. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  472. txtModal.show('{{ i18n "pages.inbounds.export"}}',dbInbound.genInboundLinks,dbInbound.remark);
  473. },
  474. exportAllLinks() {
  475. let copyText = '';
  476. for (const dbInbound of this.dbInbounds) {
  477. copyText += dbInbound.genInboundLinks
  478. }
  479. txtModal.show('{{ i18n "pages.inbounds.export"}}',copyText,'All-Inbounds');
  480. },
  481. isClientEnabled(dbInbound, email) {
  482. clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null
  483. return clientStats ? clientStats['enable'] : true
  484. },
  485. },
  486. watch: {
  487. searchKey: debounce(function (newVal) {
  488. this.searchInbounds(newVal);
  489. }, 500)
  490. },
  491. mounted() {
  492. this.getDBInbounds();
  493. },
  494. computed: {
  495. total() {
  496. let down = 0, up = 0;
  497. let clients = 0, active = 0, deactive = 0;
  498. this.dbInbounds.forEach(dbInbound => {
  499. down += dbInbound.down;
  500. up += dbInbound.up;
  501. inbound = dbInbound.toInbound();
  502. clients = this.getClients(dbInbound.protocol, inbound.settings);
  503. if(clients){
  504. if(dbInbound.enable){
  505. isClientEnable = false;
  506. clients.forEach(client => {
  507. isClientEnable = client.email == "" ? true: this.isClientEnabled(dbInbound,client.email);
  508. isClientEnable ? active++ : deactive++;
  509. });
  510. } else {
  511. deactive += clients.length;
  512. }
  513. } else {
  514. dbInbound.enable ? active++ : deactive++;
  515. }
  516. });
  517. return {
  518. down: down,
  519. up: up,
  520. clients: active + deactive,
  521. active: active,
  522. deactive: deactive,
  523. };
  524. }
  525. },
  526. });
  527. </script>
  528. {{template "inboundModal"}}
  529. {{template "promptModal"}}
  530. {{template "qrcodeModal"}}
  531. {{template "textModal"}}
  532. {{template "inboundInfoModal"}}
  533. </body>
  534. </html>