inbounds.html 25 KB

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