setting.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  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-tabs-bar {
  14. margin: 0;
  15. }
  16. .ant-list-item {
  17. display: block;
  18. }
  19. :not(.ant-card-dark)>.ant-tabs-top-bar {
  20. background: white;
  21. }
  22. </style>
  23. <body>
  24. <a-layout id="app" v-cloak>
  25. {{ template "commonSider" . }}
  26. <a-layout id="content-layout" :style="siderDrawer.isDarkTheme ? bgDarkStyle : ''">
  27. <a-layout-content>
  28. <a-spin :spinning="spinning" :delay="500" tip="loading">
  29. <a-space direction="vertical">
  30. <a-space direction="horizontal">
  31. <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.setting.save" }}</a-button>
  32. <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.setting.restartPanel" }}</a-button>
  33. </a-space>
  34. <a-tabs default-active-key="1" :class="siderDrawer.isDarkTheme ? darkClass : ''">
  35. <a-tab-pane key="1" tab='{{ i18n "pages.setting.panelConfig"}}'>
  36. <a-list item-layout="horizontal" :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
  37. <setting-list-item type="text" title='{{ i18n "pages.setting.panelListeningIP"}}' desc='{{ i18n "pages.setting.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
  38. <setting-list-item type="number" title='{{ i18n "pages.setting.panelPort"}}' desc='{{ i18n "pages.setting.panelPortDesc"}}' v-model.number="allSetting.webPort"></setting-list-item>
  39. <setting-list-item type="text" title='{{ i18n "pages.setting.publicKeyPath"}}' desc='{{ i18n "pages.setting.publicKeyPathDesc"}}' v-model="allSetting.webCertFile"></setting-list-item>
  40. <setting-list-item type="text" title='{{ i18n "pages.setting.privateKeyPath"}}' desc='{{ i18n "pages.setting.privateKeyPathDesc"}}' v-model="allSetting.webKeyFile"></setting-list-item>
  41. <setting-list-item type="text" title='{{ i18n "pages.setting.panelUrlPath"}}' desc='{{ i18n "pages.setting.panelUrlPathDesc"}}' v-model="allSetting.webBasePath"></setting-list-item>
  42. <a-list-item>
  43. <a-row style="padding: 20px">
  44. <a-col :lg="24" :xl="12">
  45. <a-list-item-meta title="Language"/>
  46. </a-col>
  47. <a-col :lg="24" :xl="12">
  48. <temlate>
  49. <a-select
  50. ref="selectLang"
  51. v-model="lang"
  52. @change="setLang(lang)"
  53. :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
  54. style="width: 100%"
  55. >
  56. <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
  57. <span role="img" aria-label="l.name" v-text="l.icon"></span>
  58. &nbsp;&nbsp;<span v-text="l.name"></span>
  59. </a-select-option>
  60. </a-select>
  61. </temlate>
  62. </a-col>
  63. </a-row>
  64. </a-list-item>
  65. </a-list>
  66. </a-tab-pane>
  67. <a-tab-pane key="2" tab='{{ i18n "pages.setting.userSetting"}}'>
  68. <a-form :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65); padding: 20px;': 'background: white; padding: 20px;'">
  69. <a-form-item label='{{ i18n "pages.setting.oldUsername"}}'>
  70. <a-input v-model="user.oldUsername" style="max-width: 300px"></a-input>
  71. </a-form-item>
  72. <a-form-item label='{{ i18n "pages.setting.currentPassword"}}'>
  73. <a-input type="password" v-model="user.oldPassword"
  74. style="max-width: 300px"></a-input>
  75. </a-form-item>
  76. <a-form-item label='{{ i18n "pages.setting.newUsername"}}'>
  77. <a-input v-model="user.newUsername" style="max-width: 300px"></a-input>
  78. </a-form-item>
  79. <a-form-item label='{{ i18n "pages.setting.newPassword"}}'>
  80. <a-input type="password" v-model="user.newPassword"
  81. style="max-width: 300px"></a-input>
  82. </a-form-item>
  83. <a-form-item>
  84. <!-- <a-button type="primary" @click="updateUser">Revise</a-button>-->
  85. <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
  86. </a-form-item>
  87. </a-form>
  88. </a-tab-pane>
  89. <a-tab-pane key="3" tab='{{ i18n "pages.setting.xrayConfiguration"}}'>
  90. <a-list item-layout="horizontal" :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
  91. <setting-list-item type="switch" title='{{ i18n "pages.setting.xrayConfigTorrent"}}' desc='{{ i18n "pages.setting.xrayConfigTorrentDesc"}}' v-model="torrentSettings"></setting-list-item>
  92. <setting-list-item type="switch" title='{{ i18n "pages.setting.xrayConfigPrivateIp"}}' desc='{{ i18n "pages.setting.xrayConfigPrivateIpDesc"}}' v-model="privateIpSettings"></setting-list-item>
  93. <setting-list-item type="switch" title='{{ i18n "pages.setting.xrayConfigIRIp"}}' desc='{{ i18n "pages.setting.xrayConfigIRIpDesc"}}' v-model="IRIpSettings"></setting-list-item>
  94. <setting-list-item type="switch" title='{{ i18n "pages.setting.xrayConfigIRdomain"}}' desc='{{ i18n "pages.setting.xrayConfigIRdomainDesc"}}' v-model="IRdomainSettings"></setting-list-item>
  95. <a-divider>{{ i18n "pages.setting.advancedTemplate"}}</a-divider>
  96. <a-collapse>
  97. <a-collapse-panel header="{{ i18n "pages.setting.xrayConfigInbounds"}}">
  98. <setting-list-item type="textarea" title='{{ i18n "pages.setting.xrayConfigInbounds"}}' desc='{{ i18n "pages.setting.xrayConfigInboundsDesc"}}' v-model ="inboundSettings"></setting-list-item>
  99. </a-collapse-panel>
  100. <a-collapse-panel header="{{ i18n "pages.setting.xrayConfigOutbounds"}}">
  101. <setting-list-item type="textarea" title='{{ i18n "pages.setting.xrayConfigOutbounds"}}' desc='{{ i18n "pages.setting.xrayConfigOutboundsDesc"}}' v-model ="outboundSettings"></setting-list-item>
  102. </a-collapse-panel>
  103. <a-collapse-panel header="{{ i18n "pages.setting.xrayConfigRoutings"}}">
  104. <setting-list-item type="textarea" title='{{ i18n "pages.setting.xrayConfigRoutings"}}' desc='{{ i18n "pages.setting.xrayConfigRoutingsDesc"}}' v-model ="routingRuleSettings"></setting-list-item>
  105. </a-collapse-panel>
  106. </a-collapse>
  107. <a-divider>{{ i18n "pages.setting.completeTemplate"}}</a-divider>
  108. <setting-list-item type="textarea" title='{{ i18n "pages.setting.xrayConfigTemplate"}}' desc='{{ i18n "pages.setting.xrayConfigTemplateDesc"}}' v-model="allSetting.xrayTemplateConfig"></setting-list-item>
  109. </a-list>
  110. </a-tab-pane>
  111. <a-tab-pane key="4" tab='{{ i18n "pages.setting.TGReminder"}}'>
  112. <a-list item-layout="horizontal" :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
  113. <setting-list-item type="switch" title='{{ i18n "pages.setting.telegramBotEnable" }}' desc='{{ i18n "pages.setting.telegramBotEnableDesc" }}' v-model="allSetting.tgBotEnable"></setting-list-item>
  114. <setting-list-item type="text" title='{{ i18n "pages.setting.telegramToken"}}' desc='{{ i18n "pages.setting.telegramTokenDesc"}}' v-model="allSetting.tgBotToken"></setting-list-item>
  115. <setting-list-item type="text" title='{{ i18n "pages.setting.telegramChatId"}}' desc='{{ i18n "pages.setting.telegramChatIdDesc"}}' v-model="allSetting.tgBotChatId"></setting-list-item>
  116. <setting-list-item type="text" title='{{ i18n "pages.setting.telegramNotifyTime"}}' desc='{{ i18n "pages.setting.telegramNotifyTimeDesc"}}' v-model="allSetting.tgRunTime"></setting-list-item>
  117. <setting-list-item type="switch" title='{{ i18n "pages.setting.tgNotifyBackup" }}' desc='{{ i18n "pages.setting.tgNotifyBackupDesc" }}' v-model="allSetting.tgBotBackup"></setting-list-item>
  118. <setting-list-item type="number" title='{{ i18n "pages.setting.tgNotifyExpireTimeDiff" }}' desc='{{ i18n "pages.setting.tgNotifyExpireTimeDiffDesc" }}' v-model="allSetting.tgExpireDiff" :min="0"></setting-list-item>
  119. <setting-list-item type="number" title='{{ i18n "pages.setting.tgNotifyTrafficDiff" }}' desc='{{ i18n "pages.setting.tgNotifyTrafficDiffDesc" }}' v-model="allSetting.tgTrafficDiff" :min="0"></setting-list-item>
  120. <setting-list-item type="number" title='{{ i18n "pages.setting.tgNotifyCpu" }}' desc='{{ i18n "pages.setting.tgNotifyCpuDesc" }}' v-model="allSetting.tgCpu" :min="0" :max="100"></setting-list-item>
  121. </a-list>
  122. </a-tab-pane>
  123. <a-tab-pane key="5" tab='{{ i18n "pages.setting.otherSetting"}}'>
  124. <a-list item-layout="horizontal" :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
  125. <setting-list-item type="text" title='{{ i18n "pages.setting.timeZonee"}}' desc='{{ i18n "pages.setting.timeZoneDesc"}}' v-model="allSetting.timeLocation"></setting-list-item>
  126. </a-list>
  127. </a-tab-pane>
  128. </a-tabs>
  129. </a-space>
  130. </a-spin>
  131. </a-layout-content>
  132. </a-layout>
  133. </a-layout>
  134. {{template "js" .}}
  135. {{template "component/setting"}}
  136. <script>
  137. const app = new Vue({
  138. delimiters: ['[[', ']]'],
  139. el: '#app',
  140. data: {
  141. siderDrawer,
  142. spinning: false,
  143. oldAllSetting: new AllSetting(),
  144. allSetting: new AllSetting(),
  145. saveBtnDisable: true,
  146. user: {},
  147. lang : getLang()
  148. },
  149. methods: {
  150. loading(spinning = true) {
  151. this.spinning = spinning;
  152. },
  153. async getAllSetting() {
  154. this.loading(true);
  155. const msg = await HttpUtil.post("/xui/setting/all");
  156. this.loading(false);
  157. if (msg.success) {
  158. this.oldAllSetting = new AllSetting(msg.obj);
  159. this.allSetting = new AllSetting(msg.obj);
  160. this.saveBtnDisable = true;
  161. }
  162. },
  163. async updateAllSetting() {
  164. this.loading(true);
  165. const msg = await HttpUtil.post("/xui/setting/update", this.allSetting);
  166. this.loading(false);
  167. if (msg.success) {
  168. await this.getAllSetting();
  169. }
  170. },
  171. async updateUser() {
  172. this.loading(true);
  173. const msg = await HttpUtil.post("/xui/setting/updateUser", this.user);
  174. this.loading(false);
  175. if (msg.success) {
  176. this.user = {};
  177. }
  178. },
  179. async restartPanel() {
  180. await new Promise(resolve => {
  181. this.$confirm({
  182. title: '{{ i18n "pages.setting.restartPanel" }}',
  183. content: '{{ i18n "pages.setting.restartPanelDesc" }}',
  184. okText: '{{ i18n "sure" }}',
  185. cancelText: '{{ i18n "cancel" }}',
  186. onOk: () => resolve(),
  187. });
  188. });
  189. this.loading(true);
  190. const msg = await HttpUtil.post("/xui/setting/restartPanel");
  191. this.loading(false);
  192. if (msg.success) {
  193. this.loading(true);
  194. await PromiseUtil.sleep(5000);
  195. location.reload();
  196. }
  197. }
  198. },
  199. async mounted() {
  200. await this.getAllSetting();
  201. while (true) {
  202. await PromiseUtil.sleep(1000);
  203. this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
  204. }
  205. },
  206. computed: {
  207. templateSettings: {
  208. get: function () { return this.allSetting.xrayTemplateConfig ? JSON.parse(this.allSetting.xrayTemplateConfig) : null ; },
  209. set: function (newValue) { this.allSetting.xrayTemplateConfig = JSON.stringify(newValue, null, 2) },
  210. },
  211. inboundSettings: {
  212. get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.inbounds, null, 2) : null; },
  213. set: function (newValue) {
  214. newTemplateSettings = this.templateSettings;
  215. newTemplateSettings.inbounds = JSON.parse(newValue)
  216. this.templateSettings = newTemplateSettings
  217. },
  218. },
  219. outboundSettings: {
  220. get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.outbounds, null, 2) : null; },
  221. set: function (newValue) {
  222. newTemplateSettings = this.templateSettings;
  223. newTemplateSettings.outbounds = JSON.parse(newValue)
  224. this.templateSettings = newTemplateSettings
  225. },
  226. },
  227. routingRuleSettings: {
  228. get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.routing.rules, null, 2) : null; },
  229. set: function (newValue) {
  230. newTemplateSettings = this.templateSettings;
  231. newTemplateSettings.routing.rules = JSON.parse(newValue)
  232. this.templateSettings = newTemplateSettings
  233. },
  234. },
  235. torrentSettings: {
  236. get: function () {
  237. torrentFilter = false
  238. if(this.templateSettings != null){
  239. this.templateSettings.routing.rules.forEach(routingRule => {
  240. if(routingRule.hasOwnProperty("protocol")){
  241. if (routingRule.protocol[0] === "bittorrent" && routingRule.outboundTag == "blocked"){
  242. torrentFilter = true
  243. }
  244. }
  245. });
  246. }
  247. return torrentFilter
  248. },
  249. set: function (newValue) {
  250. newTemplateSettings = JSON.parse(this.allSetting.xrayTemplateConfig);
  251. if (newValue){
  252. newTemplateSettings.routing.rules.push(JSON.parse("{\"outboundTag\": \"blocked\",\"protocol\": [\"bittorrent\"],\"type\": \"field\"}"))
  253. }
  254. else {
  255. newTemplateSettings.routing.rules = [];
  256. this.templateSettings.routing.rules.forEach(routingRule => {
  257. if (routingRule.hasOwnProperty('protocol')){
  258. if (routingRule.protocol[0] === "bittorrent" && routingRule.outboundTag == "blocked"){
  259. return;
  260. }
  261. }
  262. newTemplateSettings.routing.rules.push(routingRule);
  263. });
  264. }
  265. this.templateSettings = newTemplateSettings
  266. },
  267. },
  268. privateIpSettings: {
  269. get: function () {
  270. localIpFilter = false
  271. if(this.templateSettings != null){
  272. this.templateSettings.routing.rules.forEach(routingRule => {
  273. if(routingRule.hasOwnProperty("ip")){
  274. if (routingRule.ip[0] === "geoip:private" && routingRule.outboundTag == "blocked"){
  275. localIpFilter = true
  276. }
  277. }
  278. });
  279. }
  280. return localIpFilter
  281. },
  282. set: function (newValue) {
  283. newTemplateSettings = JSON.parse(this.allSetting.xrayTemplateConfig);
  284. if (newValue){
  285. newTemplateSettings.routing.rules.push(JSON.parse("{\"outboundTag\": \"blocked\",\"ip\": [\"geoip:private\"],\"type\": \"field\"}"))
  286. }
  287. else {
  288. newTemplateSettings.routing.rules = [];
  289. this.templateSettings.routing.rules.forEach(routingRule => {
  290. if (routingRule.hasOwnProperty('ip')){
  291. if (routingRule.ip[0] === "geoip:private" && routingRule.outboundTag == "blocked"){
  292. return;
  293. }
  294. }
  295. newTemplateSettings.routing.rules.push(routingRule);
  296. });
  297. }
  298. this.templateSettings = newTemplateSettings
  299. },
  300. },
  301. IRIpSettings: {
  302. get: function () {
  303. localIpFilter = false
  304. if(this.templateSettings != null){
  305. this.templateSettings.routing.rules.forEach(routingRule => {
  306. if(routingRule.hasOwnProperty("ip")){
  307. if (routingRule.ip[0] === "geoip:ir" && routingRule.outboundTag == "blocked"){
  308. localIpFilter = true
  309. }
  310. }
  311. });
  312. }
  313. return localIpFilter
  314. },
  315. set: function (newValue) {
  316. newTemplateSettings = JSON.parse(this.allSetting.xrayTemplateConfig);
  317. if (newValue){
  318. newTemplateSettings.routing.rules.push(JSON.parse("{\"outboundTag\": \"blocked\",\"ip\": [\"geoip:ir\"],\"type\": \"field\"}"))
  319. }
  320. else {
  321. newTemplateSettings.routing.rules = [];
  322. this.templateSettings.routing.rules.forEach(routingRule => {
  323. if (routingRule.hasOwnProperty('ip')){
  324. if (routingRule.ip[0] === "geoip:ir" && routingRule.outboundTag == "blocked"){
  325. return;
  326. }
  327. }
  328. newTemplateSettings.routing.rules.push(routingRule);
  329. });
  330. }
  331. this.templateSettings = newTemplateSettings
  332. },
  333. },
  334. IRdomainSettings: {
  335. get: function () {
  336. localdomainFilter = false
  337. if(this.templateSettings != null){
  338. this.templateSettings.routing.rules.forEach(routingRule => {
  339. if(routingRule.hasOwnProperty("domain")){
  340. if ((routingRule.domain[0] === "regexp:.+.ir$" || routingRule.domain[0] === "ext:iran.dat:ir" || routingRule.domain[0] === "ext:iran.dat:other") && routingRule.outboundTag == "blocked") {
  341. localdomainFilter = true
  342. }
  343. }
  344. });
  345. }
  346. return localdomainFilter
  347. },
  348. set: function (newValue) {
  349. newTemplateSettings = JSON.parse(this.allSetting.xrayTemplateConfig);
  350. if (newValue){
  351. newTemplateSettings.routing.rules.push(JSON.parse("{\"outboundTag\": \"blocked\",\"domain\": [\"regexp:.+.ir$\", \"ext:iran.dat:ir\", \"ext:iran.dat:other\"],\"type\": \"field\"}"))
  352. }
  353. else {
  354. newTemplateSettings.routing.rules = [];
  355. this.templateSettings.routing.rules.forEach(routingRule => {
  356. if (routingRule.hasOwnProperty('domain')){
  357. if ((routingRule.domain[0] === "regexp:.+.ir$" || routingRule.domain[0] === "ext:iran.dat:ir" || routingRule.domain[0] === "ext:iran.dat:other") && routingRule.outboundTag == "blocked"){
  358. return;
  359. }
  360. }
  361. newTemplateSettings.routing.rules.push(routingRule);
  362. });
  363. }
  364. this.templateSettings = newTemplateSettings
  365. },
  366. },
  367. }
  368. });
  369. </script>
  370. </body>
  371. </html>