From 729d8549e2b536a10c402a88e0d4cfde9e4baf3f Mon Sep 17 00:00:00 2001 From: Alireza Ahmadi Date: Mon, 4 Dec 2023 19:17:38 +0100 Subject: new frontend and mobile view #1286 --- web/html/xui/settings.html | 825 +++------------------------------------------ 1 file changed, 39 insertions(+), 786 deletions(-) (limited to 'web/html/xui/settings.html') diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html index 1f3b0ebb..7c4fef16 100644 --- a/web/html/xui/settings.html +++ b/web/html/xui/settings.html @@ -8,8 +8,11 @@ } } - .ant-col-sm-24 { - margin-top: 10px; + @media (max-width: 768px) { + .ant-tabs-nav .ant-tabs-tab { + margin: 0; + padding: 12px .5rem; + } } .ant-tabs-bar { @@ -20,10 +23,6 @@ display: block; } - :not(.ant-card-dark)>.ant-tabs-top-bar { - background: white; - } - .alert-msg { color: rgb(194, 117, 18); font-weight: normal; @@ -71,25 +70,31 @@ } - + {{ template "commonSider" . }} - +

- +

- - {{ i18n "pages.settings.save" }} - {{ i18n "pages.settings.restartPanel" }} - - + + + + + {{ i18n "pages.settings.save" }} + {{ i18n "pages.settings.restartPanel" }} + + + + + + + +

- -

- - {{ i18n "pages.settings.infoDesc" }} -

- - +

@@ -112,7 +117,7 @@ ref="selectLang" v-model="lang" @change="setLang(lang)" - :dropdown-class-name="themeSwitcher.darkCardClass" + :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%" > @@ -127,9 +132,9 @@

- +

@@ -148,7 +153,7 @@

- +

@@ -183,188 +188,8 @@

- - - {{ i18n "pages.settings.actions"}} - - {{ i18n "pages.settings.resetDefaultConfig" }} - - {{ i18n "pages.settings.templates.title"}} - -

- - {{ i18n "pages.settings.infoDesc" }} -

- - - - - - -

- - {{ i18n "pages.settings.templates.generalConfigsDesc" }} -

- - - - - - - - - - - - - - - - - - - - - - - -

- - {{ i18n "pages.settings.templates.blockConfigsDesc" }} -

- - - - - - - - - -

- - {{ i18n "pages.settings.templates.blockCountryConfigsDesc" }} -

- - - - - - - - - - -

- - {{ i18n "pages.settings.templates.directCountryConfigsDesc" }} -

- - - - - - - - - - -

- - {{ i18n "pages.settings.templates.ipv4ConfigsDesc" }} -

- - - - - - -

- - {{ i18n "pages.settings.templates.warpConfigsDesc" }} -

- - - - - - - - - - -

- - {{ i18n "pages.settings.templates.manualListsDesc" }} -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - {{ i18n "pages.settings.infoDesc" }} -

- - + +

@@ -383,7 +208,7 @@

@@ -397,14 +222,8 @@

- - -

- - {{ i18n "pages.settings.infoDesc" }} -

- - + +

@@ -440,75 +259,6 @@ saveBtnDisable: true, user: new User(), lang: getLang(), - ipv4Settings: { - tag: "IPv4", - protocol: "freedom", - settings: { - domainStrategy: "UseIPv4" - } - }, - warpSettings: { - tag: "WARP", - protocol: "socks", - settings: { - servers: [ - { - address: "127.0.0.1", - port: 40000 - } - ] - } - }, - directSettings: { - tag: "direct", - protocol: "freedom" - }, - outboundDomainStrategies: ["AsIs", "UseIP", "UseIPv4", "UseIPv6"], - routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"], - settingsData: { - protocols: { - bittorrent: ["bittorrent"], - }, - ips: { - local: ["geoip:private"], - cn: ["geoip:cn"], - ir: ["ext:geoip_IR.dat:ir","ext:geoip_IR.dat:arvancloud","ext:geoip_IR.dat:derakcloud","ext:geoip_IR.dat:iranserver"], - ru: ["geoip:ru"], - }, - domains: { - ads: [ - "geosite:category-ads-all", - "ext:geosite_IR.dat:category-ads-all" - ], - speedtest: ["geosite:speedtest"], - openai: ["geosite:openai"], - google: ["geosite:google"], - spotify: ["geosite:spotify"], - netflix: ["geosite:netflix"], - cn: [ - "geosite:cn", - "regexp:.*\\.cn$" - ], - ru: [ - "geosite:category-gov-ru", - "regexp:.*\\.ru$" - ], - ir: [ - "regexp:.*\\.ir$", - "regexp:.*\\.xn--mgba3a4f16a$", // .ایران - "ext:geosite_IR.dat:ir" // have rules to bypass all .ir domains. - ] - }, - familyProtectDNS: { - "servers": [ - "1.1.1.3", // https://developers.cloudflare.com/1.1.1.1/setup/ - "1.0.0.3", - "94.140.14.15", // https://adguard-dns.io/kb/general/dns-providers/ - "94.140.15.16" - ], - "queryStrategy": "UseIPv4" - }, - } }, methods: { loading(spinning = true) { @@ -547,6 +297,7 @@ this.$confirm({ title: '{{ i18n "pages.settings.restartPanel" }}', content: '{{ i18n "pages.settings.restartPanelDesc" }}', + class: themeSwitcher.currentTheme, okText: '{{ i18n "sure" }}', cancelText: '{{ i18n "cancel" }}', onOk: () => resolve(), @@ -558,7 +309,9 @@ if (msg.success) { this.loading(true); await PromiseUtil.sleep(5000); - const { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting; + var { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting; + if (host == this.oldAllSetting.webDomain) host = null; + if (port == this.oldAllSetting.webPort) port = null; const isTLS = webCertFile !== "" || webKeyFile !== ""; const url = buildURL({ host, port, isTLS, base, path: "panel/settings" }); window.location.replace(url); @@ -605,83 +358,6 @@ this.user.loginSecret = ""; } }, - 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; - } - }, - 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, 1); - } - if (haveRules && outboundIndex === -1) { - 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; - } }, async mounted() { await this.getAllSetting(); @@ -690,429 +366,6 @@ this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting); } }, - computed: { - templateSettings: { - get: function () { return this.allSetting.xrayTemplateConfig ? JSON.parse(this.allSetting.xrayTemplateConfig) : null; }, - set: function (newValue) { this.allSetting.xrayTemplateConfig = JSON.stringify(newValue, null, 2); }, - }, - inboundSettings: { - get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.inbounds, null, 2) : null; }, - set: function (newValue) { - newTemplateSettings = this.templateSettings; - newTemplateSettings.inbounds = JSON.parse(newValue); - this.templateSettings = newTemplateSettings; - }, - }, - outboundSettings: { - get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.outbounds, null, 2) : null; }, - set: function (newValue) { - newTemplateSettings = this.templateSettings; - newTemplateSettings.outbounds = JSON.parse(newValue); - this.templateSettings = newTemplateSettings; - }, - }, - routingRuleSettings: { - get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.routing.rules, null, 2) : null; }, - set: function (newValue) { - newTemplateSettings = this.templateSettings; - newTemplateSettings.routing.rules = JSON.parse(newValue); - this.templateSettings = newTemplateSettings; - }, - }, - freedomStrategy: { - get: function () { - if (!this.templateSettings) return "AsIs"; - freedomOutbound = this.templateSettings.outbounds.find((o) => o.protocol === "freedom" && !o.tag); - if (!freedomOutbound) return "AsIs"; - if (!freedomOutbound.settings || !freedomOutbound.settings.domainStrategy) return "AsIs"; - return freedomOutbound.settings.domainStrategy; - }, - set: function (newValue) { - newTemplateSettings = this.templateSettings; - freedomOutboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.protocol === "freedom" && !o.tag); - if (!newTemplateSettings.outbounds[freedomOutboundIndex].settings) { - newTemplateSettings.outbounds[freedomOutboundIndex].settings = {"domainStrategy": newValue}; - } else { - newTemplateSettings.outbounds[freedomOutboundIndex].settings.domainStrategy = newValue; - } - this.templateSettings = newTemplateSettings; - } - }, - routingStrategy: { - get: function () { - if (!this.templateSettings || !this.templateSettings.routing || !this.templateSettings.routing.domainStrategy) return "AsIs"; - return this.templateSettings.routing.domainStrategy; - }, - set: function (newValue) { - newTemplateSettings = this.templateSettings; - newTemplateSettings.routing.domainStrategy = newValue; - this.templateSettings = newTemplateSettings; - } - }, - blockedIPs: { - get: function () { - return this.templateRuleGetter({ outboundTag: "blocked", property: "ip" }); - }, - set: function (newValue) { - this.templateRuleSetter({ outboundTag: "blocked", property: "ip", data: newValue }); - } - }, - blockedDomains: { - get: function () { - return this.templateRuleGetter({ outboundTag: "blocked", property: "domain" }); - }, - set: function (newValue) { - this.templateRuleSetter({ outboundTag: "blocked", property: "domain", data: newValue }); - } - }, - blockedProtocols: { - get: function () { - return this.templateRuleGetter({ outboundTag: "blocked", property: "protocol" }); - }, - set: function (newValue) { - this.templateRuleSetter({ outboundTag: "blocked", property: "protocol", data: newValue }); - } - }, - directIPs: { - get: function () { - return this.templateRuleGetter({ outboundTag: "direct", property: "ip" }); - }, - set: function (newValue) { - this.templateRuleSetter({ outboundTag: "direct", property: "ip", data: newValue }); - this.syncRulesWithOutbound("direct", this.directSettings); - } - }, - directDomains: { - get: function () { - return this.templateRuleGetter({ outboundTag: "direct", property: "domain" }); - }, - set: function (newValue) { - this.templateRuleSetter({ outboundTag: "direct", property: "domain", data: newValue }); - this.syncRulesWithOutbound("direct", this.directSettings); - } - }, - ipv4Domains: { - get: function () { - return this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" }); - }, - set: function (newValue) { - this.templateRuleSetter({ outboundTag: "IPv4", property: "domain", data: newValue }); - this.syncRulesWithOutbound("IPv4", this.ipv4Settings); - } - }, - warpDomains: { - get: function () { - return this.templateRuleGetter({ outboundTag: "WARP", property: "domain" }); - }, - set: function (newValue) { - this.templateRuleSetter({ outboundTag: "WARP", property: "domain", data: newValue }); - this.syncRulesWithOutbound("WARP", this.warpSettings); - } - }, - manualBlockedIPs: { - get: function () { return JSON.stringify(this.blockedIPs, null, 2); }, - set: debounce(function (value) { this.blockedIPs = JSON.parse(value); }, 1000) - }, - manualBlockedDomains: { - get: function () { return JSON.stringify(this.blockedDomains, null, 2); }, - set: debounce(function (value) { this.blockedDomains = JSON.parse(value); }, 1000) - }, - manualDirectIPs: { - get: function () { return JSON.stringify(this.directIPs, null, 2); }, - set: debounce(function (value) { this.directIPs = JSON.parse(value); }, 1000) - }, - manualDirectDomains: { - get: function () { return JSON.stringify(this.directDomains, null, 2); }, - set: debounce(function (value) { this.directDomains = JSON.parse(value); }, 1000) - }, - manualIPv4Domains: { - get: function () { return JSON.stringify(this.ipv4Domains, null, 2); }, - set: debounce(function (value) { this.ipv4Domains = JSON.parse(value); }, 1000) - }, - manualWARPDomains: { - get: function () { return JSON.stringify(this.warpDomains, null, 2); }, - set: debounce(function (value) { this.warpDomains = JSON.parse(value); }, 1000) - }, - torrentSettings: { - get: function () { - return doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols); - }, - set: function (newValue) { - if (newValue) { - this.blockedProtocols = [...this.blockedProtocols, ...this.settingsData.protocols.bittorrent]; - } else { - this.blockedProtocols = this.blockedProtocols.filter(data => !this.settingsData.protocols.bittorrent.includes(data)); - } - }, - }, - privateIpSettings: { - get: function () { - return doAllItemsExist(this.settingsData.ips.local, this.blockedIPs); - }, - set: function (newValue) { - if (newValue) { - this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.local]; - } else { - this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.local.includes(data)); - } - }, - }, - AdsSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.ads, this.blockedDomains); - }, - set: function (newValue) { - if (newValue) { - this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ads]; - } else { - this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ads.includes(data)); - } - }, - }, - SpeedTestSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.speedtest, this.blockedDomains); - }, - set: function (newValue) { - if (newValue) { - this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.speedtest]; - } else { - this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.speedtest.includes(data)); - } - }, - }, - familyProtectSettings: { - get: function () { - if (!this.templateSettings || !this.templateSettings.dns || !this.templateSettings.dns.servers) return false; - return doAllItemsExist(this.templateSettings.dns.servers, this.settingsData.familyProtectDNS.servers); - }, - set: function (newValue) { - newTemplateSettings = this.templateSettings; - if (newValue) { - newTemplateSettings.dns = this.settingsData.familyProtectDNS; - } else { - delete newTemplateSettings.dns; - } - this.templateSettings = newTemplateSettings; - }, - }, - GoogleIPv4Settings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.google, this.ipv4Domains); - }, - set: function (newValue) { - if (newValue) { - this.ipv4Domains = [...this.ipv4Domains, ...this.settingsData.domains.google]; - } else { - this.ipv4Domains = this.ipv4Domains.filter(data => !this.settingsData.domains.google.includes(data)); - } - }, - }, - NetflixIPv4Settings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.netflix, this.ipv4Domains); - }, - set: function (newValue) { - if (newValue) { - this.ipv4Domains = [...this.ipv4Domains, ...this.settingsData.domains.netflix]; - } else { - this.ipv4Domains = this.ipv4Domains.filter(data => !this.settingsData.domains.netflix.includes(data)); - } - }, - }, - IRIpSettings: { - get: function () { - return doAllItemsExist(this.settingsData.ips.ir, this.blockedIPs); - }, - set: function (newValue) { - if (newValue) { - this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.ir]; - } else { - this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.ir.includes(data)); - } - } - }, - IRDomainSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.ir, this.blockedDomains); - }, - set: function (newValue) { - if (newValue) { - this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ir]; - } else { - this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ir.includes(data)); - } - } - }, - ChinaIpSettings: { - get: function () { - return doAllItemsExist(this.settingsData.ips.cn, this.blockedIPs); - }, - set: function (newValue) { - if (newValue) { - this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.cn]; - } else { - this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.cn.includes(data)); - } - } - }, - ChinaDomainSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.cn, this.blockedDomains); - }, - set: function (newValue) { - if (newValue) { - this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.cn]; - } else { - this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.cn.includes(data)); - } - } - }, - RussiaIpSettings: { - get: function () { - return doAllItemsExist(this.settingsData.ips.ru, this.blockedIPs); - }, - set: function (newValue) { - if (newValue) { - this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.ru]; - } else { - this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.ru.includes(data)); - } - } - }, - RussiaDomainSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.ru, this.blockedDomains); - }, - set: function (newValue) { - if (newValue) { - this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ru]; - } else { - this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ru.includes(data)); - } - } - }, - IRIpDirectSettings: { - get: function () { - return doAllItemsExist(this.settingsData.ips.ir, this.directIPs); - }, - set: function (newValue) { - if (newValue) { - this.directIPs = [...this.directIPs, ...this.settingsData.ips.ir]; - } else { - this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.ir.includes(data)); - } - } - }, - IRDomainDirectSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.ir, this.directDomains); - }, - set: function (newValue) { - if (newValue) { - this.directDomains = [...this.directDomains, ...this.settingsData.domains.ir]; - } else { - this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.ir.includes(data)); - } - } - }, - ChinaIpDirectSettings: { - get: function () { - return doAllItemsExist(this.settingsData.ips.cn, this.directIPs); - }, - set: function (newValue) { - if (newValue) { - this.directIPs = [...this.directIPs, ...this.settingsData.ips.cn]; - } else { - this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.cn.includes(data)); - } - } - }, - ChinaDomainDirectSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.cn, this.directDomains); - }, - set: function (newValue) { - if (newValue) { - this.directDomains = [...this.directDomains, ...this.settingsData.domains.cn]; - } else { - this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.cn.includes(data)); - } - } - }, - RussiaIpDirectSettings: { - get: function () { - return doAllItemsExist(this.settingsData.ips.ru, this.directIPs); - }, - set: function (newValue) { - if (newValue) { - this.directIPs = [...this.directIPs, ...this.settingsData.ips.ru]; - } else { - this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.ru.includes(data)); - } - } - }, - RussiaDomainDirectSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.ru, this.directDomains); - }, - set: function (newValue) { - if (newValue) { - this.directDomains = [...this.directDomains, ...this.settingsData.domains.ru]; - } else { - this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.ru.includes(data)); - } - } - }, - GoogleWARPSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.google, this.warpDomains); - }, - set: function (newValue) { - if (newValue) { - this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.google]; - } else { - this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.google.includes(data)); - } - }, - }, - OpenAIWARPSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.openai, this.warpDomains); - }, - set: function (newValue) { - if (newValue) { - this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.openai]; - } else { - this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.openai.includes(data)); - } - }, - }, - NetflixWARPSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.netflix, this.warpDomains); - }, - set: function (newValue) { - if (newValue) { - this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.netflix]; - } else { - this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.netflix.includes(data)); - } - }, - }, - SpotifyWARPSettings: { - get: function () { - return doAllItemsExist(this.settingsData.domains.spotify, this.warpDomains); - }, - set: function (newValue) { - if (newValue) { - this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.spotify]; - } else { - this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.spotify.includes(data)); - } - }, - }, - }, }); -- cgit v1.2.3