123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- {{define "dnsModal"}}
- <a-modal id="dns-modal" v-model="dnsModal.visible" :title="dnsModal.title" @ok="dnsModal.ok" :closable="true"
- :mask-closable="false" :ok-text="dnsModal.okText" cancel-text='{{ i18n "close" }}'
- :class="themeSwitcher.currentTheme">
- <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
- <a-form-item label='{{ i18n "pages.xray.outbound.address" }}'>
- <a-input v-model.trim="dnsModal.dnsServer.address"></a-input>
- </a-form-item>
- <a-form-item label='{{ i18n "pages.xray.dns.domains" }}'>
- <a-button icon="plus" size="small" type="primary" @click="dnsModal.dnsServer.domains.push('')"></a-button>
- <template v-for="(domain, index) in dnsModal.dnsServer.domains">
- <a-input v-model.trim="dnsModal.dnsServer.domains[index]">
- <a-button icon="minus" size="small" slot="addonAfter"
- @click="dnsModal.dnsServer.domains.splice(index,1)"></a-button>
- </a-input>
- </template>
- </a-form-item>
- <a-form-item label='{{ i18n "pages.xray.dns.strategy" }}' v-if="isAdvanced">
- <a-select v-model="dnsModal.dnsServer.queryStrategy" style="width: 100%"
- :dropdown-class-name="themeSwitcher.currentTheme">
- <a-select-option :value="l" :label="l" v-for="l in ['UseIP', 'UseIPv4', 'UseIPv6']"> [[ l ]] </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item label='Skip Fallback' v-if="isAdvanced">
- <a-switch v-model="dnsModal.dnsServer.skipFallback"></a-switch>
- </a-form-item>
- <a-form-item label='{{ i18n "pages.xray.dns.expectIPs"}}'>
- <a-button icon="plus" size="small" type="primary" @click="dnsModal.dnsServer.expectIPs.push('')"></a-button>
- <template v-for="(domain, index) in dnsModal.dnsServer.expectIPs">
- <a-input v-model.trim="dnsModal.dnsServer.expectIPs[index]">
- <a-button icon="minus" size="small" slot="addonAfter"
- @click="dnsModal.dnsServer.expectIPs.splice(index,1)"></a-button>
- </a-input>
- </template>
- </a-form-item>
- </a-form>
- </a-modal>
- <script>
- const dnsModal = {
- title: '',
- visible: false,
- okText: '{{ i18n "confirm" }}',
- isEdit: false,
- confirm: null,
- dnsServer: {
- address: "localhost",
- domains: [],
- expectIPs: [],
- queryStrategy: 'UseIP',
- skipFallback: true,
- },
- ok() {
- domains = dnsModal.dnsServer.domains.filter(d => d.length > 0);
- expectIPs = dnsModal.dnsServer.expectIPs.filter(ip => ip.length > 0);
- dnsModal.dnsServer.domains = domains;
- dnsModal.dnsServer.expectIPs = expectIPs;
- newDnsServer = (domains.length > 0 || expectIPs.length > 0) ? dnsModal.dnsServer : dnsModal.dnsServer.address;
- ObjectUtil.execute(dnsModal.confirm, newDnsServer);
- },
- show({
- title = '',
- okText = '{{ i18n "confirm" }}',
- dnsServer,
- confirm = (dnsServer) => { },
- isEdit = false
- }) {
- this.title = title;
- this.okText = okText;
- this.confirm = confirm;
- this.visible = true;
- if (isEdit) {
- if (typeof dnsServer == 'object') {
- this.dnsServer = dnsServer;
- } else {
- this.dnsServer = {
- address: dnsServer ?? "",
- domains: [],
- expectIPs: [],
- queryStrategy: 'UseIP',
- skipFallback: true,
- }
- }
- } else {
- this.dnsServer = {
- address: "localhost",
- domains: [],
- expectIPs: [],
- queryStrategy: 'UseIP',
- skipFallback: true,
- }
- }
- this.isEdit = isEdit;
- },
- close() {
- dnsModal.visible = false;
- },
- };
- new Vue({
- delimiters: ['[[', ']]'],
- el: '#dns-modal',
- data: {
- dnsModal: dnsModal,
- },
- computed: {
- isAdvanced: {
- get: function () {
- return dnsModal.dnsServer.domains.length > 0;
- }
- }
- }
- });
- </script>
- {{end}}
|