diff options
Diffstat (limited to 'web/html/xray.html')
| -rw-r--r-- | web/html/xray.html | 2682 |
1 files changed, 1371 insertions, 1311 deletions
diff --git a/web/html/xray.html b/web/html/xray.html index 8a60dafe..b6e40858 100644 --- a/web/html/xray.html +++ b/web/html/xray.html @@ -9,102 +9,148 @@ margin: 24px 16px; } } + @media (max-width: 768px) { .ant-tabs-nav .ant-tabs-tab { margin: 0; padding: 12px .5rem; } + .ant-table-thead>tr>th, .ant-table-tbody>tr>td { padding: 10px 0px; } } + .ant-tabs-bar { margin: 0; } + .ant-list-item { display: block; } + .ant-list-item>li { padding: 10px 20px !important; } + .ant-collapse-content-box .ant-alert { margin-block-end: 12px; -} + } </style> {{ template "page/head_end" .}} {{ template "page/body_start" .}} <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> -<a-sidebar></a-sidebar> -<a-layout id="content-layout"> + <a-sidebar></a-sidebar> + <a-layout id="content-layout"> <a-layout-content> - <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'> + <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'> <transition name="list" appear> - <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }" - message='{{ i18n "secAlertTitle" }}' - color="red" - description='{{ i18n "secAlertSsl" }}' - show-icon closable> - </a-alert> + <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }" message='{{ i18n "secAlertTitle" }}' + color="red" description='{{ i18n "secAlertSsl" }}' show-icon closable> + </a-alert> </transition> - <a-space direction="vertical"> - <a-card hoverable :style="{ marginBottom: '.5rem' }"> - <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }"> - <a-col :xs="24" :sm="10" :style="{ padding: '4px' }"> - <a-space direction="horizontal"> - <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">{{ i18n "pages.xray.save" }}</a-button> - <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">{{ i18n "pages.xray.restart" }}</a-button> - <a-popover v-if="restartResult" - :overlay-class-name="themeSwitcher.currentTheme"> - <span slot="title">{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span> - <template slot="content"> - <span :style="{ maxWidth: '400px' }" v-for="line in restartResult.split('\n')">[[ line ]]</span> + <transition name="list" appear> + <a-row v-if="!loadingStates.fetched"> + <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }"> + <a-spin tip='{{ i18n "loading" }}'></a-spin> + </a-card> + </a-row> + <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else> + <a-col> + <a-card hoverable> + <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }"> + <a-col :xs="24" :sm="10" :style="{ padding: '4px' }"> + <a-space direction="horizontal"> + <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting"> + {{ i18n "pages.xray.save" }} + </a-button> + <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray"> + {{ i18n "pages.xray.restart" }} + </a-button> + <a-popover v-if="restartResult" :overlay-class-name="themeSwitcher.currentTheme"> + <span slot="title">{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span> + <template slot="content"> + <span :style="{ maxWidth: '400px' }" v-for="line in restartResult.split('\n')">[[ line ]]</span> + </template> + <a-icon type="question-circle"></a-icon> + </a-popover> + </a-space> + </a-col> + <a-col :xs="24" :sm="14"> + <template> + <div> + <a-back-top :target="() => document.getElementById('content-layout')" + visibility-height="200"></a-back-top> + <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }" + message='{{ i18n "pages.settings.infoDesc" }}' show-icon> + </a-alert> + </div> </template> - <a-icon type="question-circle"></a-icon> - </a-popover> - </a-space> + </a-col> + </a-row> + </a-card> </a-col> - <a-col :xs="24" :sm="14"> - <template> - <div> - <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top> - <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }" message='{{ i18n "pages.settings.infoDesc" }}' show-icon> - </a-alert> - </div> - </template> + <a-col> + <a-tabs default-active-key="tpl-basic" @change="(activeKey) => { this.changePage(activeKey); }" + :class="themeSwitcher.currentTheme"> + <a-tab-pane key="tpl-basic" :style="{ paddingTop: '20px' }"> + <template #tab> + <a-icon type="setting"></a-icon> + <span>{{ i18n "pages.xray.basicTemplate"}}</span> + </template> + {{ template "settings/xray/basics" . }} + </a-tab-pane> + <a-tab-pane key="tpl-routing" :style="{ paddingTop: '20px' }"> + <template #tab> + <a-icon type="swap"></a-icon> + <span>{{ i18n "pages.xray.Routings"}}</span> + </template> + {{ template "settings/xray/routing" . }} + </a-tab-pane> + <a-tab-pane key="tpl-outbound" force-render="true"> + <template #tab> + <a-icon type="upload"></a-icon> + <span>{{ i18n "pages.xray.Outbounds"}}</span> + </template> + {{ template "settings/xray/outbounds" . }} + </a-tab-pane> + <a-tab-pane key="tpl-reverse" :style="{ paddingTop: '20px' }" force-render="true"> + <template #tab> + <a-icon type="import"></a-icon> + <span>{{ i18n "pages.xray.outbound.reverse"}}</span> + </template> + {{ template "settings/xray/reverse" . }} + </a-tab-pane> + <a-tab-pane key="tpl-balancer" :style="{ paddingTop: '20px' }" force-render="true"> + <template #tab> + <a-icon type="cluster"></a-icon> + <span>{{ i18n "pages.xray.Balancers"}}</span> + </template> + {{ template "settings/xray/balancers" . }} + </a-tab-pane> + <a-tab-pane key="tpl-dns" :style="{ paddingTop: '20px' }" force-render="true"> + <template #tab> + <a-icon type="database"></a-icon> + <span>DNS</span> + </template> + {{ template "settings/xray/dns" . }} + </a-tab-pane> + <a-tab-pane key="tpl-advanced" force-render="true"> + <template #tab> + <a-icon type="code"></a-icon> + <span>{{ i18n "pages.xray.advancedTemplate"}}</span> + </template> + {{ template "settings/xray/advanced" . }} + </a-tab-pane> + </a-tabs> </a-col> - </a-row> - </a-card> - <a-tabs class="ant-card-dark-box-nohover" default-active-key="1" - @change="(activeKey) => { this.changePage(activeKey); }" - :class="themeSwitcher.currentTheme"> - <a-tab-pane key="tpl-basic" tab='{{ i18n "pages.xray.basicTemplate"}}' :style="{ paddingTop: '20px' }"> - {{ template "settings/xray/basics" . }} - </a-tab-pane> - <a-tab-pane key="tpl-routing" tab='{{ i18n "pages.xray.Routings"}}' :style="{ paddingTop: '20px' }"> - {{ template "settings/xray/routing" . }} - </a-tab-pane> - <a-tab-pane key="tpl-outbound" tab='{{ i18n "pages.xray.Outbounds"}}' force-render="true"> - {{ template "settings/xray/outbounds" . }} - </a-tab-pane> - <a-tab-pane key="tpl-reverse" tab='{{ i18n "pages.xray.outbound.reverse"}}' :style="{ paddingTop: '20px' }" force-render="true"> - {{ template "settings/xray/reverse" . }} - </a-tab-pane> - <a-tab-pane key="tpl-balancer" tab='{{ i18n "pages.xray.Balancers"}}' :style="{ paddingTop: '20px' }" force-render="true"> - {{ template "settings/xray/balancers" . }} - </a-tab-pane> - <a-tab-pane key="tpl-dns" tab='DNS' :style="{ paddingTop: '20px' }" force-render="true"> - {{ template "settings/xray/dns" . }} - </a-tab-pane> - <a-tab-pane key="tpl-advanced" tab='{{ i18n "pages.xray.advancedTemplate"}}' :style="{ paddingTop: '20px' }" force-render="true"> - {{ template "settings/xray/advanced" . }} - </a-tab-pane> - </a-tabs> - </a-space> - </a-spin> + </a-row> + </transition> + </a-spin> </a-layout-content> -</a-layout> + </a-layout> </a-layout> {{template "page/body_scripts" .}} <script src="{{ .base_path }}assets/js/model/outbound.js?{{ .cur_ver }}"></script> @@ -131,1282 +177,1296 @@ {{template "modals/fakednsModal"}} {{template "modals/warpModal"}} <script> - const rulesColumns = [ - { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } }, - { title: '{{ i18n "pages.xray.rules.source"}}', children: [ - { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true }, - { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true } ]}, - { title: '{{ i18n "pages.inbounds.network"}}', children: [ - { title: 'L4', dataIndex: 'network', align: 'center', width: 10 }, - { title: '{{ i18n "protocol" }}', dataIndex: 'protocol', align: 'center', width: 15, ellipsis: true }, - { title: 'Attrs', dataIndex: 'attrs', align: 'center', width: 10, ellipsis: true } ]}, - { title: '{{ i18n "pages.xray.rules.dest"}}', children: [ - { title: 'IP', dataIndex: 'ip', align: 'center', width: 20, ellipsis: true }, - { title: '{{ i18n "pages.xray.outbound.domain" }}', dataIndex: 'domain', align: 'center', width: 20, ellipsis: true }, - { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]}, - { title: '{{ i18n "pages.xray.rules.inbound"}}', children: [ - { title: '{{ i18n "pages.xray.outbound.tag" }}', dataIndex: 'inboundTag', align: 'center', width: 15, ellipsis: true }, - { title: '{{ i18n "pages.inbounds.client" }}', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]}, - { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 17 }, - { title: '{{ i18n "pages.xray.rules.balancer"}}', dataIndex: 'balancerTag', align: 'center', width: 15 }, - ]; + const rulesColumns = [ + { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } }, + { + title: '{{ i18n "pages.xray.rules.source"}}', children: [ + { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true }, + { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true }] + }, + { + title: '{{ i18n "pages.inbounds.network"}}', children: [ + { title: 'L4', dataIndex: 'network', align: 'center', width: 10 }, + { title: '{{ i18n "protocol" }}', dataIndex: 'protocol', align: 'center', width: 15, ellipsis: true }, + { title: 'Attrs', dataIndex: 'attrs', align: 'center', width: 10, ellipsis: true }] + }, + { + title: '{{ i18n "pages.xray.rules.dest"}}', children: [ + { title: 'IP', dataIndex: 'ip', align: 'center', width: 20, ellipsis: true }, + { title: '{{ i18n "pages.xray.outbound.domain" }}', dataIndex: 'domain', align: 'center', width: 20, ellipsis: true }, + { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }] + }, + { + title: '{{ i18n "pages.xray.rules.inbound"}}', children: [ + { title: '{{ i18n "pages.xray.outbound.tag" }}', dataIndex: 'inboundTag', align: 'center', width: 15, ellipsis: true }, + { title: '{{ i18n "pages.inbounds.client" }}', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }] + }, + { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 17 }, + { title: '{{ i18n "pages.xray.rules.balancer"}}', dataIndex: 'balancerTag', align: 'center', width: 15 }, + ]; - const rulesMobileColumns = [ - { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, - { title: '{{ i18n "pages.xray.rules.inbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'inbound' } }, - { title: '{{ i18n "pages.xray.rules.outbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'outbound' } }, - { title: '{{ i18n "pages.xray.rules.info"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'info' } }, - ]; + const rulesMobileColumns = [ + { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, + { title: '{{ i18n "pages.xray.rules.inbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'inbound' } }, + { title: '{{ i18n "pages.xray.rules.outbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'outbound' } }, + { title: '{{ i18n "pages.xray.rules.info"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'info' } }, + ]; - const outboundColumns = [ - { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, - { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 }, - { title: '{{ i18n "protocol"}}', align: 'center', width: 50, scopedSlots: { customRender: 'protocol' } }, - { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } }, - { title: '{{ i18n "pages.inbounds.traffic" }}', align: 'center', width: 50, scopedSlots: { customRender: 'traffic' } }, - ]; + const outboundColumns = [ + { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, + { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 }, + { title: '{{ i18n "protocol"}}', align: 'center', width: 50, scopedSlots: { customRender: 'protocol' } }, + { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } }, + { title: '{{ i18n "pages.inbounds.traffic" }}', align: 'center', width: 50, scopedSlots: { customRender: 'traffic' } }, + ]; - const reverseColumns = [ - { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, - { title: '{{ i18n "pages.xray.outbound.type"}}', dataIndex: 'type', align: 'center', width: 50 }, - { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 }, - { title: '{{ i18n "pages.xray.outbound.domain"}}', dataIndex: 'domain', align: 'center', width: 50 }, - ]; + const reverseColumns = [ + { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, + { title: '{{ i18n "pages.xray.outbound.type"}}', dataIndex: 'type', align: 'center', width: 50 }, + { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 }, + { title: '{{ i18n "pages.xray.outbound.domain"}}', dataIndex: 'domain', align: 'center', width: 50 }, + ]; - const balancerColumns = [ - { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, - { title: '{{ i18n "pages.xray.balancer.tag"}}', dataIndex: 'tag', align: 'center', width: 50 }, - { title: '{{ i18n "pages.xray.balancer.balancerStrategy"}}', align: 'center', width: 50, scopedSlots: { customRender: 'strategy' }}, - { title: '{{ i18n "pages.xray.balancer.balancerSelectors"}}', align: 'center', width: 100, scopedSlots: { customRender: 'selector' }}, - ]; + const balancerColumns = [ + { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, + { title: '{{ i18n "pages.xray.balancer.tag"}}', dataIndex: 'tag', align: 'center', width: 50 }, + { title: '{{ i18n "pages.xray.balancer.balancerStrategy"}}', align: 'center', width: 50, scopedSlots: { customRender: 'strategy' } }, + { title: '{{ i18n "pages.xray.balancer.balancerSelectors"}}', align: 'center', width: 100, scopedSlots: { customRender: 'selector' } }, + ]; - const dnsColumns = [ - { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, - { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } }, - { title: '{{ i18n "pages.xray.dns.domains"}}', align: 'center', width: 50, scopedSlots: { customRender: 'domain' } }, - { title: '{{ i18n "pages.xray.dns.expectIPs"}}', align: 'center', width: 50, scopedSlots: { customRender: 'expectIPs' } }, - ]; + const dnsColumns = [ + { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, + { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } }, + { title: '{{ i18n "pages.xray.dns.domains"}}', align: 'center', width: 50, scopedSlots: { customRender: 'domain' } }, + { title: '{{ i18n "pages.xray.dns.expectIPs"}}', align: 'center', width: 50, scopedSlots: { customRender: 'expectIPs' } }, + ]; - const fakednsColumns = [ - { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, - { title: '{{ i18n "pages.xray.fakedns.ipPool"}}', dataIndex: 'ipPool', align: 'center', width: 50 }, - { title: '{{ i18n "pages.xray.fakedns.poolSize"}}', dataIndex: 'poolSize', align: 'center', width: 50 }, - ]; + const fakednsColumns = [ + { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } }, + { title: '{{ i18n "pages.xray.fakedns.ipPool"}}', dataIndex: 'ipPool', align: 'center', width: 50 }, + { title: '{{ i18n "pages.xray.fakedns.poolSize"}}', dataIndex: 'poolSize', align: 'center', width: 50 }, + ]; - const app = new Vue({ - delimiters: ['[[', ']]'], - mixins: [MediaQueryMixin], - el: '#app', - data: { - themeSwitcher, - isDarkTheme: themeSwitcher.isDarkTheme, - spinning: false, - oldXraySetting: '', - xraySetting: '', - inboundTags: [], - outboundsTraffic: [], - saveBtnDisable: true, - refreshing: false, - restartResult: '', - showAlert: false, - advSettings: 'xraySetting', - obsSettings: '', - cm: null, - cmOptions: { - lineNumbers: true, - mode: "application/json", - lint: true, - styleActiveLine: true, - matchBrackets: true, - theme: "xq", - autoCloseTags: true, - lineWrapping: true, - indentUnit: 2, - indentWithTabs: true, - smartIndent: true, - tabSize: 2, - lineWiseCopyCut: false, - foldGutter: true, - gutters: [ - "CodeMirror-lint-markers", - "CodeMirror-linenumbers", - "CodeMirror-foldgutter", - ], - }, - ipv4Settings: { - tag: "IPv4", - protocol: "freedom", - settings: { - domainStrategy: "UseIPv4" - } - }, - directSettings: { - tag: "direct", - protocol: "freedom" - }, - routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"], - log: { - loglevel: ["none", "debug", "info", "warning", "error"], - access: ["none", "./access.log"], - error: ["none", "./error.log"], - dnsLog: false, - maskAddress: ["quarter", "half", "full"], - }, - settingsData: { - protocols: { - bittorrent: ["bittorrent"], - }, - IPsOptions: [ - { label: 'Private IPs', value: 'geoip:private' }, - { label: '🇮🇷 Iran', value: 'ext:geoip_IR.dat:ir' }, - { label: '🇨🇳 China', value: 'geoip:cn' }, - { label: '🇷🇺 Russia', value: 'ext:geoip_RU.dat:ru' }, - { label: '🇻🇳 Vietnam', value: 'geoip:vn' }, - { label: '🇪🇸 Spain', value: 'geoip:es' }, - { label: '🇮🇩 Indonesia', value: 'geoip:id' }, - { label: '🇺🇦 Ukraine', value: 'geoip:ua' }, - { label: '🇹🇷 Türkiye', value: 'geoip:tr' }, - { label: '🇧🇷 Brazil', value: 'geoip:br' }, - ], - DomainsOptions: [ - { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' }, - { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' }, - { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' }, - { label: '🇨🇳 China', value: 'geosite:cn' }, - { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' }, - { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' }, - { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru$' }, - { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' }, - { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' }, - { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' }, - ], - BlockDomainsOptions: [ - { label: 'Ads All', value: 'geosite:category-ads-all' }, - { label: 'Ads IR 🇮🇷', value: 'ext:geosite_IR.dat:category-ads-all' }, - { label: 'Ads RU 🇷🇺', value: 'ext:geosite_RU.dat:category-ads-all' }, - { label: 'Malware 🇮🇷', value: 'ext:geosite_IR.dat:malware' }, - { label: 'Phishing 🇮🇷', value: 'ext:geosite_IR.dat:phishing' }, - { label: 'Cryptominers 🇮🇷', value: 'ext:geosite_IR.dat:cryptominers' }, - { label: 'Adult +18', value: 'geosite:category-porn' }, - { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' }, - { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' }, - { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' }, - { label: '🇨🇳 China', value: 'geosite:cn' }, - { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' }, - { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' }, - { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru' }, - { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' }, - { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' }, - { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' }, - ], - ServicesOptions: [ - { label: 'Apple', value: 'geosite:apple' }, - { label: 'Meta', value: 'geosite:meta' }, - { label: 'Google', value: 'geosite:google' }, - { label: 'OpenAI', value: 'geosite:openai' }, - { label: 'Spotify', value: 'geosite:spotify' }, - { label: 'Netflix', value: 'geosite:netflix' }, - { label: 'Reddit', value: 'geosite:reddit' }, - { label: 'Speedtest', value: 'geosite:speedtest' }, - ] - }, - defaultObservatory: { - subjectSelector: [], - probeURL: "http://www.google.com/gen_204", - probeInterval: "10m", - enableConcurrency: true - }, - defaultBurstObservatory: { - subjectSelector: [], - pingConfig: { - destination: "http://www.google.com/gen_204", - interval: "30m", - connectivity: "http://connectivitycheck.platform.hicloud.com/generate_204", - timeout: "10s", - sampling: 2 - } - } + const app = new Vue({ + delimiters: ['[[', ']]'], + mixins: [MediaQueryMixin], + el: '#app', + data: { + themeSwitcher, + isDarkTheme: themeSwitcher.isDarkTheme, + loadingStates: { + fetched: false, + spinning: false + }, + oldXraySetting: '', + xraySetting: '', + inboundTags: [], + outboundsTraffic: [], + saveBtnDisable: true, + refreshing: false, + restartResult: '', + showAlert: false, + advSettings: 'xraySetting', + obsSettings: '', + cm: null, + cmOptions: { + lineNumbers: true, + mode: "application/json", + lint: true, + styleActiveLine: true, + matchBrackets: true, + theme: "xq", + autoCloseTags: true, + lineWrapping: true, + indentUnit: 2, + indentWithTabs: true, + smartIndent: true, + tabSize: 2, + lineWiseCopyCut: false, + foldGutter: true, + gutters: [ + "CodeMirror-lint-markers", + "CodeMirror-linenumbers", + "CodeMirror-foldgutter", + ], + }, + ipv4Settings: { + tag: "IPv4", + protocol: "freedom", + settings: { + domainStrategy: "UseIPv4" + } + }, + directSettings: { + tag: "direct", + protocol: "freedom" + }, + routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"], + log: { + loglevel: ["none", "debug", "info", "warning", "error"], + access: ["none", "./access.log"], + error: ["none", "./error.log"], + dnsLog: false, + maskAddress: ["quarter", "half", "full"], + }, + settingsData: { + protocols: { + bittorrent: ["bittorrent"], }, - methods: { - loading(spinning = true) { - this.spinning = spinning; - }, - async getOutboundsTraffic() { - const msg = await HttpUtil.get("/panel/xray/getOutboundsTraffic"); - if (msg.success) { - this.outboundsTraffic = msg.obj; - } - }, - async getXraySetting() { - this.loading(true); - const msg = await HttpUtil.post("/panel/xray/"); - this.loading(false); - if (msg.success) { - result = JSON.parse(msg.obj); - xs = JSON.stringify(result.xraySetting, null, 2); - this.oldXraySetting = xs; - this.xraySetting = xs; - this.inboundTags = result.inboundTags; - this.saveBtnDisable = true; - } - }, - async updateXraySetting() { - this.loading(true); - const msg = await HttpUtil.post("/panel/xray/update", {xraySetting : this.xraySetting}); - this.loading(false); - if (msg.success) { - await this.getXraySetting(); - } - }, - async restartXray() { - this.loading(true); - const msg = await HttpUtil.post("server/restartXrayService"); - this.loading(false); - if (msg.success) { - await PromiseUtil.sleep(500); - await this.getXrayResult(); - } - this.loading(false); - }, - async getXrayResult() { - const msg = await HttpUtil.get("/panel/xray/getXrayResult"); - if (msg.success) { - this.restartResult=msg.obj; - if(msg.obj.length > 1) Vue.prototype.$message.error(msg.obj); - } - }, - async resetXrayConfigToDefault() { - this.loading(true); - const msg = await HttpUtil.get("/panel/setting/getDefaultJsonConfig"); - this.loading(false); - if (msg.success) { - this.templateSettings = JSON.parse(JSON.stringify(msg.obj, null, 2)); - this.saveBtnDisable = true; - } - }, - changePage(pageKey) { - if(pageKey == 'tpl-advanced') this.changeCode(); - if(pageKey == 'tpl-balancer') this.changeObsCode(); - }, - syncRulesWithOutbound(tag, setting) { - const newTemplateSettings = this.templateSettings; - const haveRules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === tag); - const outboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.tag === tag); - if (!haveRules && outboundIndex > 0) { - newTemplateSettings.outbounds.splice(outboundIndex); - } - if (haveRules && outboundIndex < 0) { - newTemplateSettings.outbounds.push(setting); - } - this.templateSettings = newTemplateSettings; - }, - templateRuleGetter(routeSettings) { - const { property, outboundTag } = routeSettings; - let result = []; - if (this.templateSettings != null) { - this.templateSettings.routing.rules.forEach( - (routingRule) => { - if ( - routingRule.hasOwnProperty(property) && - routingRule.hasOwnProperty("outboundTag") && - routingRule.outboundTag === outboundTag - ) { - result.push(...routingRule[property]); - } - } - ); - } - return result; - }, - templateRuleSetter(routeSettings) { - const { data, property, outboundTag } = routeSettings; - const oldTemplateSettings = this.templateSettings; - const newTemplateSettings = oldTemplateSettings; - currentProperty = this.templateRuleGetter({ outboundTag, property }) - if (currentProperty.length == 0) { - const propertyRule = { - type: "field", - outboundTag, - [property]: data - }; - newTemplateSettings.routing.rules.push(propertyRule); - } - else { - const newRules = []; - insertedOnce = false; - newTemplateSettings.routing.rules.forEach( - (routingRule) => { - if ( - routingRule.hasOwnProperty(property) && - routingRule.hasOwnProperty("outboundTag") && - routingRule.outboundTag === outboundTag - ) { - if (!insertedOnce && data.length > 0) { - insertedOnce = true; - routingRule[property] = data; - newRules.push(routingRule); - } - } - else { - newRules.push(routingRule); - } - } - ); - newTemplateSettings.routing.rules = newRules; - } - this.templateSettings = newTemplateSettings; - }, - changeCode() { - if(this.cm != null) { - this.cm.toTextArea(); - } - textAreaObj = document.getElementById('xraySetting'); - textAreaObj.value = this[this.advSettings]; - this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions); - this.cm.on('change',editor => { - value = editor.getValue(); - if (this.isJsonString(value)) { - this[this.advSettings] = value; - } - }); - }, - changeObsCode() { - if(this.cm != null) { - this.cm.toTextArea(); - } - if (this.obsSettings == ''){ - this.cm = null; - return - } - textAreaObj = document.getElementById('obsSetting'); - textAreaObj.value = this[this.obsSettings]; - this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions); - this.cm.on('change',editor => { - value = editor.getValue(); - if(this.isJsonString(value)){ - this[this.obsSettings] = value; - } - }); - }, - isJsonString(str) { - try { - JSON.parse(str); - } catch (e) { - return false; - } - return true; - }, - findOutboundTraffic(o) { - for (const otraffic of this.outboundsTraffic) { - if (otraffic.tag == o.tag) { - return SizeFormatter.sizeFormat(otraffic.up) + ' / ' + SizeFormatter.sizeFormat(otraffic.down); - } - } - return SizeFormatter.sizeFormat(0) + ' / ' + SizeFormatter.sizeFormat(0); - }, - findOutboundAddress(o) { - serverObj = null; - switch(o.protocol){ - case Protocols.VMess: - case Protocols.VLESS: - serverObj = o.settings.vnext; - break; - case Protocols.HTTP: - case Protocols.Socks: - case Protocols.Shadowsocks: - case Protocols.Trojan: - serverObj = o.settings.servers; - break; - case Protocols.DNS: - return [o.settings?.address + ':' + o.settings?.port]; - case Protocols.Wireguard: - return o.settings.peers.map(peer => peer.endpoint); - default: - return null; - } - return serverObj ? serverObj.map(obj => obj.address + ':' + obj.port) : null; - }, - addOutbound(){ - outModal.show({ - title: '{{ i18n "pages.xray.outbound.addOutbound"}}', - okText: '{{ i18n "pages.xray.outbound.addOutbound" }}', - confirm: (outbound) => { - outModal.loading(); - if(outbound.tag.length > 0){ - this.templateSettings.outbounds.push(outbound); - this.outboundSettings = JSON.stringify(this.templateSettings.outbounds); - } - outModal.close(); - }, - isEdit: false, - tags: this.templateSettings.outbounds.map(obj => obj.tag) - }); - }, - editOutbound(index){ - outModal.show({ - title: '{{ i18n "pages.xray.outbound.editOutbound"}} ' + (index+1), - outbound: app.templateSettings.outbounds[index], - confirm: (outbound) => { - outModal.loading(); - this.templateSettings.outbounds[index] = outbound; - this.outboundSettings = JSON.stringify(this.templateSettings.outbounds); - outModal.close(); - }, - isEdit: true, - tags: this.outboundData.filter((o) => o.key != index ).map(obj => obj.tag) - }); - }, - deleteOutbound(index){ - outbounds = this.templateSettings.outbounds; - outbounds.splice(index,1); - this.outboundSettings = JSON.stringify(outbounds); - }, - setFirstOutbound(index){ - outbounds = this.templateSettings.outbounds; - outbounds.splice(0, 0, outbounds.splice(index, 1)[0]); - this.outboundSettings = JSON.stringify(outbounds); - }, - addReverse(){ - reverseModal.show({ - title: '{{ i18n "pages.xray.outbound.addReverse"}}', - okText: '{{ i18n "pages.xray.outbound.addReverse" }}', - confirm: (reverse, rules) => { - reverseModal.loading(); - if(reverse.tag.length > 0){ - newTemplateSettings = this.templateSettings; - if(newTemplateSettings.reverse == undefined) newTemplateSettings.reverse = {}; - if(newTemplateSettings.reverse[reverse.type+'s'] == undefined) newTemplateSettings.reverse[reverse.type+'s'] = []; - newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain }); - this.templateSettings = newTemplateSettings; + IPsOptions: [ + { label: 'Private IPs', value: 'geoip:private' }, + { label: '🇮🇷 Iran', value: 'ext:geoip_IR.dat:ir' }, + { label: '🇨🇳 China', value: 'geoip:cn' }, + { label: '🇷🇺 Russia', value: 'ext:geoip_RU.dat:ru' }, + { label: '🇻🇳 Vietnam', value: 'geoip:vn' }, + { label: '🇪🇸 Spain', value: 'geoip:es' }, + { label: '🇮🇩 Indonesia', value: 'geoip:id' }, + { label: '🇺🇦 Ukraine', value: 'geoip:ua' }, + { label: '🇹🇷 Türkiye', value: 'geoip:tr' }, + { label: '🇧🇷 Brazil', value: 'geoip:br' }, + ], + DomainsOptions: [ + { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' }, + { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' }, contacts: admin@thfree.ru |