xray_reverse_modal.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. {{define "reverseModal"}}
  2. <a-modal id="reverse-modal" v-model="reverseModal.visible" :title="reverseModal.title" @ok="reverseModal.ok"
  3. :confirm-loading="reverseModal.confirmLoading" :closable="true" :mask-closable="false"
  4. :ok-text="reverseModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
  5. <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
  6. <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
  7. <a-select v-model="reverseModal.reverse.type" :dropdown-class-name="themeSwitcher.currentTheme">
  8. <a-select-option v-for="x,y in reverseTypes" :value="y">[[ x ]]</a-select-option>
  9. </a-select>
  10. </a-form-item>
  11. <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}'>
  12. <a-input v-model.trim="reverseModal.reverse.tag"></a-input>
  13. </a-form-item>
  14. <a-form-item label='{{ i18n "pages.xray.outbound.domain" }}'>
  15. <a-input v-model.trim="reverseModal.reverse.domain"></a-input>
  16. </a-form-item>
  17. <template v-if="reverseModal.reverse.type=='bridge'">
  18. <a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
  19. <a-select v-model="reverseModal.rules[0].outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
  20. <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
  21. </a-select>
  22. </a-form-item>
  23. <a-form-item label='{{ i18n "pages.xray.rules.outbound" }}'>
  24. <a-select v-model="reverseModal.rules[1].outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
  25. <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
  26. </a-select>
  27. </a-form-item>
  28. </template>
  29. <template v-else>
  30. <a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
  31. <a-checkbox-group
  32. v-model="reverseModal.rules[0].inboundTag"
  33. :options="reverseModal.inboundTags"></a-checkbox-group>
  34. </a-form-item>
  35. <a-form-item label='{{ i18n "pages.xray.rules.inbound" }}'>
  36. <a-checkbox-group
  37. v-model="reverseModal.rules[1].inboundTag"
  38. :options="reverseModal.inboundTags"></a-checkbox-group>
  39. </a-form-item>
  40. </template>
  41. </a-form>
  42. </a-modal>
  43. <script>
  44. const reverseModal = {
  45. title: '',
  46. visible: false,
  47. confirmLoading: false,
  48. okText: '{{ i18n "sure" }}',
  49. isEdit: false,
  50. confirm: null,
  51. reverse: {
  52. tag: "",
  53. type: "",
  54. domain: ""
  55. },
  56. rules: [
  57. { outboundTag: '', inboundTag: []},
  58. { outboundTag: '', inboundTag: []}
  59. ],
  60. inboundTags: [],
  61. outboundTags: [],
  62. ok() {
  63. reverseModal.rules[0].domain = ["full:" + reverseModal.reverse.domain];
  64. reverseModal.rules[0].type = 'field';
  65. reverseModal.rules[1].type = 'field';
  66. if(reverseModal.reverse.type == 'bridge'){
  67. reverseModal.rules[0].inboundTag = [reverseModal.reverse.tag];
  68. reverseModal.rules[1].inboundTag = [reverseModal.reverse.tag];
  69. } else {
  70. reverseModal.rules[0].outboundTag = reverseModal.reverse.tag;
  71. reverseModal.rules[1].outboundTag = reverseModal.reverse.tag;
  72. }
  73. ObjectUtil.execute(reverseModal.confirm, reverseModal.reverse, reverseModal.rules);
  74. },
  75. show({ title='', okText='{{ i18n "sure" }}', reverse, rules, confirm=(reverse, rules)=>{}, isEdit=false }) {
  76. this.title = title;
  77. this.okText = okText;
  78. this.confirm = confirm;
  79. this.visible = true;
  80. if(isEdit) {
  81. this.reverse = {
  82. tag: reverse.tag,
  83. type: reverse.type,
  84. domain: reverse.domain,
  85. };
  86. reverse;
  87. rules0 = rules.filter(r => r.domain != null);
  88. if(rules0.length == 0) rules0 = [{ outboundTag: '', domain: ["full:" + this.reverse.domain], inboundTag: []}];
  89. rules1 = rules.filter(r => r.domain == null);
  90. if(rules1.length == 0) rules1 = [{ outboundTag: '', inboundTag: []}];
  91. this.rules = [];
  92. this.rules.push({
  93. domain: rules0[0].domain,
  94. outboundTag: rules0[0].outboundTag,
  95. inboundTag: rules0.map(r => r.inboundTag).flat()
  96. });
  97. this.rules.push({
  98. outboundTag: rules1[0].outboundTag,
  99. inboundTag: rules1.map(r => r.inboundTag).flat()
  100. });
  101. } else {
  102. this.reverse = {
  103. tag: "reverse-" + app.reverseData.length,
  104. type: "bridge",
  105. domain: "reverse.xui"
  106. }
  107. this.rules = [
  108. { outboundTag: '', inboundTag: []},
  109. { outboundTag: '', inboundTag: []}
  110. ]
  111. }
  112. this.isEdit = isEdit;
  113. this.inboundTags = app.templateSettings.inbounds.filter((i) => !ObjectUtil.isEmpty(i.tag)).map(obj => obj.tag);
  114. this.inboundTags.push(...app.inboundTags);
  115. if (app.enableDNS && !ObjectUtil.isEmpty(app.dnsTag)) this.inboundTags.push(app.dnsTag)
  116. this.outboundTags = app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag);
  117. },
  118. close() {
  119. reverseModal.visible = false;
  120. reverseModal.loading(false);
  121. },
  122. loading(loading=true) {
  123. reverseModal.confirmLoading = loading;
  124. },
  125. };
  126. new Vue({
  127. delimiters: ['[[', ']]'],
  128. el: '#reverse-modal',
  129. data: {
  130. reverseModal: reverseModal,
  131. reverseTypes: { bridge: '{{ i18n "pages.xray.outbound.bridge" }}', portal:'{{ i18n "pages.xray.outbound.portal" }}'},
  132. },
  133. });
  134. </script>
  135. {{end}}