index.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  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. .ant-card-hoverable {
  10. margin-inline: 0.3rem;
  11. }
  12. .ant-alert-error {
  13. margin-inline: 0.3rem;
  14. }
  15. }
  16. .ant-col-sm-24 {
  17. margin-top: 10px;
  18. }
  19. .ant-card-dark h2 {
  20. color: var(--dark-color-text-primary);
  21. }
  22. </style>
  23. <body>
  24. <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
  25. {{ template "commonSider" . }}
  26. <a-layout id="content-layout">
  27. <a-layout-content>
  28. <a-spin :spinning="spinning" :delay="200" :tip="loadingTip">
  29. <transition name="list" appear>
  30. <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
  31. message='{{ i18n "secAlertTitle" }}'
  32. color="red"
  33. description='{{ i18n "secAlertSsl" }}'
  34. show-icon closable>
  35. </a-alert>
  36. </transition>
  37. <transition name="list" appear>
  38. <a-row>
  39. <a-card hoverable>
  40. <a-row>
  41. <a-col :sm="24" :md="12">
  42. <a-row>
  43. <a-col :span="12" style="text-align: center">
  44. <a-progress type="dashboard" status="normal"
  45. :stroke-color="status.cpu.color"
  46. :percent="status.cpu.percent"></a-progress>
  47. <div><b>CPU:</b> [[ cpuCoreFormat(status.cpuCores) ]] <a-tooltip>
  48. <a-icon type="area-chart"></a-icon>
  49. <template slot="title">
  50. <div><b>Logical Processors:</b> [[ (status.logicalPro) ]]</div>
  51. <div><b>Speed:</b> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
  52. </template>
  53. </a-tooltip></div>
  54. </a-col>
  55. <a-col :span="12" style="text-align: center">
  56. <a-progress type="dashboard" status="normal"
  57. :stroke-color="status.mem.color"
  58. :percent="status.mem.percent"></a-progress>
  59. <div>
  60. <b>{{ i18n "pages.index.memory"}}:</b> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
  61. </div>
  62. </a-col>
  63. </a-row>
  64. </a-col>
  65. <a-col :sm="24" :md="12">
  66. <a-row>
  67. <a-col :span="12" style="text-align: center">
  68. <a-progress type="dashboard" status="normal"
  69. :stroke-color="status.swap.color"
  70. :percent="status.swap.percent"></a-progress>
  71. <div>
  72. <b>Swap:</b> [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
  73. </div>
  74. </a-col>
  75. <a-col :span="12" style="text-align: center">
  76. <a-progress type="dashboard" status="normal"
  77. :stroke-color="status.disk.color"
  78. :percent="status.disk.percent"></a-progress>
  79. <div>
  80. <b>{{ i18n "pages.index.hard"}}:</b> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
  81. </div>
  82. </a-col>
  83. </a-row>
  84. </a-col>
  85. </a-row>
  86. </a-card>
  87. </a-row>
  88. </transition>
  89. <transition name="list" appear>
  90. <a-row>
  91. <a-col :sm="24" :lg="12">
  92. <a-card hoverable>
  93. <b>3X-UI:</b>
  94. <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
  95. <a rel="noopener" href="https://t.me/XrayUI" target="_blank"><a-tag color="green">@XrayUI</a-tag></a>
  96. </a-card>
  97. </a-col>
  98. <a-col :sm="24" :lg="12">
  99. <a-card hoverable>
  100. <b>{{ i18n "pages.index.operationHours" }}:</b>
  101. <a-tag :color="status.xray.color">Xray: [[ formatSecond(status.appStats.uptime) ]]</a-tag>
  102. <a-tag color="green">OS: [[ formatSecond(status.uptime) ]]</a-tag>
  103. </a-card>
  104. </a-col>
  105. <a-col :sm="24" :lg="12">
  106. <a-card hoverable>
  107. <b>{{ i18n "pages.index.xrayStatus" }}:</b>
  108. <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]] </a-tag>
  109. <a-popover v-if="status.xray.state === State.Error" :overlay-class-name="themeSwitcher.currentTheme">
  110. <span slot="title" style="font-size: 12pt">An error occurred while running Xray
  111. <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
  112. </span>
  113. <template slot="content">
  114. <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
  115. </template>
  116. <a-icon type="question-circle"></a-icon>
  117. </a-popover>
  118. <a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
  119. <a-tag color="purple" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>
  120. <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
  121. </a-card>
  122. </a-col>
  123. <a-col :sm="24" :lg="12">
  124. <a-card hoverable>
  125. <b>{{ i18n "menu.link" }}:</b>
  126. <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
  127. <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
  128. <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
  129. </a-card>
  130. </a-col>
  131. <a-col :sm="24" :lg="12">
  132. <a-card hoverable>
  133. <b>{{ i18n "pages.index.systemLoad" }}:</b>
  134. <a-tag color="green">
  135. <a-tooltip>
  136. [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
  137. <template slot="title">
  138. {{ i18n "pages.index.systemLoadDesc" }}
  139. </template>
  140. </a-tooltip>
  141. </a-tag>
  142. </a-card>
  143. </a-col>
  144. <a-col :sm="24" :lg="12">
  145. <a-card hoverable>
  146. <b>{{ i18n "usage"}}:</b>
  147. <a-tag color="green"> RAM: [[ sizeFormat(status.appStats.mem) ]] </a-tag>
  148. <a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
  149. </a-card>
  150. </a-col>
  151. <a-col :sm="24" :lg="12">
  152. <a-card hoverable>
  153. <a-row>
  154. <a-col :span="12">
  155. <a-tag>
  156. <a-tooltip>
  157. <a-icon type="global"></a-icon> IPv4
  158. <template slot="title">
  159. [[ status.publicIP.ipv4 ]]
  160. </template>
  161. </a-tooltip>
  162. </a-tag>
  163. </a-col>
  164. <a-col :span="12">
  165. <a-tag>
  166. <a-tooltip>
  167. <a-icon type="global"></a-icon> IPv6
  168. <template slot="title">
  169. [[ status.publicIP.ipv6 ]]
  170. </template>
  171. </a-tooltip>
  172. </a-tag>
  173. </a-col>
  174. </a-row>
  175. </a-card>
  176. </a-col>
  177. <a-col :sm="24" :lg="12">
  178. <a-card hoverable>
  179. <a-row>
  180. <a-col :span="12">
  181. <a-tag>
  182. <a-tooltip>
  183. <a-icon type="swap"></a-icon> TCP: [[ status.tcpCount ]]
  184. <template slot="title">
  185. {{ i18n "pages.index.connectionTcpCountDesc" }}
  186. </template>
  187. </a-tooltip>
  188. </a-tag>
  189. </a-col>
  190. <a-col :span="12">
  191. <a-tag>
  192. <a-tooltip>
  193. <a-icon type="swap"></a-icon> UDP: [[ status.udpCount ]]
  194. <template slot="title">
  195. {{ i18n "pages.index.connectionUdpCountDesc" }}
  196. </template>
  197. </a-tooltip>
  198. </a-tag>
  199. </a-col>
  200. </a-row>
  201. </a-card>
  202. </a-col>
  203. <a-col :sm="24" :lg="12">
  204. <a-card hoverable>
  205. <a-row>
  206. <a-col :span="12">
  207. <a-tag>
  208. <a-tooltip>
  209. <a-icon type="arrow-up"></a-icon> Up: [[ sizeFormat(status.netIO.up) ]]/s
  210. <template slot="title">
  211. {{ i18n "pages.index.upSpeed" }}
  212. </template>
  213. </a-tooltip>
  214. </a-tag>
  215. </a-col>
  216. <a-col :span="12">
  217. <a-tag>
  218. <a-tooltip>
  219. <a-icon type="arrow-down"></a-icon> Down: [[ sizeFormat(status.netIO.down) ]]/s
  220. <template slot="title">
  221. {{ i18n "pages.index.downSpeed" }}
  222. </template>
  223. </a-tooltip>
  224. </a-tag>
  225. </a-col>
  226. </a-row>
  227. </a-card>
  228. </a-col>
  229. <a-col :sm="24" :lg="12">
  230. <a-card hoverable>
  231. <a-row>
  232. <a-col :span="12">
  233. <a-tag>
  234. <a-tooltip>
  235. <a-icon type="cloud-upload"></a-icon>
  236. <template slot="title">
  237. {{ i18n "pages.index.totalSent" }}
  238. </template> Out: [[ sizeFormat(status.netTraffic.sent) ]]
  239. </a-tooltip>
  240. </a-tag>
  241. </a-col>
  242. <a-col :span="12">
  243. <a-tag>
  244. <a-tooltip>
  245. <a-icon type="cloud-download"></a-icon>
  246. <template slot="title">
  247. {{ i18n "pages.index.totalReceive" }}
  248. </template> In: [[ sizeFormat(status.netTraffic.recv) ]]
  249. </a-tooltip>
  250. </a-tag>
  251. </a-col>
  252. </a-row>
  253. </a-card>
  254. </a-col>
  255. </a-row>
  256. </transition>
  257. </a-spin>
  258. </a-layout-content>
  259. </a-layout>
  260. <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
  261. @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
  262. <a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
  263. message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
  264. <template v-for="version, index in versionModal.versions">
  265. <a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin-right: 12px; margin-bottom: 12px"
  266. @click="switchV2rayVersion(version)">
  267. [[ version ]]
  268. </a-tag>
  269. </template>
  270. </a-modal>
  271. <a-modal id="log-modal" v-model="logModal.visible"
  272. :closable="true" @cancel="() => logModal.visible = false"
  273. :class="themeSwitcher.currentTheme"
  274. width="800px" footer="">
  275. <template slot="title">
  276. {{ i18n "pages.index.logs" }}
  277. <a-icon :spin="logModal.loading"
  278. type="sync"
  279. style="vertical-align: middle; margin-left: 10px;"
  280. :disabled="logModal.loading"
  281. @click="openLogs()">
  282. </a-icon>
  283. </template>
  284. <a-form layout="inline">
  285. <a-form-item style="margin-right: 0.5rem;">
  286. <a-input-group compact>
  287. <a-select size="small" v-model="logModal.rows" style="width:70px;"
  288. @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
  289. <a-select-option value="10">10</a-select-option>
  290. <a-select-option value="20">20</a-select-option>
  291. <a-select-option value="50">50</a-select-option>
  292. <a-select-option value="100">100</a-select-option>
  293. <a-select-option value="500">500</a-select-option>
  294. </a-select>
  295. <a-select size="small" v-model="logModal.level" style="width:95px;"
  296. @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
  297. <a-select-option value="debug">Debug</a-select-option>
  298. <a-select-option value="info">Info</a-select-option>
  299. <a-select-option value="notice">Notice</a-select-option>
  300. <a-select-option value="warning">Warning</a-select-option>
  301. <a-select-option value="err">Error</a-select-option>
  302. </a-select>
  303. </a-input-group>
  304. </a-form-item>
  305. <a-form-item>
  306. <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
  307. </a-form-item>
  308. <a-form-item style="float: right;">
  309. <a-button type="primary" icon="download"
  310. :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs?.join('\n'))" download="x-ui.log">
  311. </a-button>
  312. </a-form-item>
  313. </a-form>
  314. <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto; margin-top: 0.5rem;" v-html="logModal.formattedLogs"></div>
  315. </a-modal>
  316. <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
  317. :closable="true" footer=""
  318. :class="themeSwitcher.currentTheme">
  319. <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
  320. :message="backupModal.description"
  321. show-icon>
  322. </a-alert>
  323. <a-space direction="horizontal" style="text-align: center; margin-bottom: 10px;">
  324. <a-button type="primary" @click="exportDatabase()">
  325. [[ backupModal.exportText ]]
  326. </a-button>
  327. <a-button type="primary" @click="importDatabase()">
  328. [[ backupModal.importText ]]
  329. </a-button>
  330. </a-space>
  331. </a-modal>
  332. </a-layout>
  333. {{template "js" .}}
  334. <script src="{{ .base_path }}assets/clipboard/clipboard.min.js?{{ .cur_ver }}"></script>
  335. {{template "component/themeSwitcher" .}}
  336. {{template "textModal"}}
  337. <script>
  338. const State = {
  339. Running: "running",
  340. Stop: "stop",
  341. Error: "error",
  342. }
  343. Object.freeze(State);
  344. class CurTotal {
  345. constructor(current, total) {
  346. this.current = current;
  347. this.total = total;
  348. }
  349. get percent() {
  350. if (this.total === 0) {
  351. return 0;
  352. }
  353. return toFixed(this.current / this.total * 100, 2);
  354. }
  355. get color() {
  356. const percent = this.percent;
  357. if (percent < 80) {
  358. return '#008771'; // Green
  359. } else if (percent < 90) {
  360. return "#f37b24"; // Orange
  361. } else {
  362. return "#cf3c3c"; // Red
  363. }
  364. }
  365. }
  366. class Status {
  367. constructor(data) {
  368. this.cpu = new CurTotal(0, 0);
  369. this.cpuCores = 0;
  370. this.logicalPro = 0;
  371. this.cpuSpeedMhz = 0;
  372. this.disk = new CurTotal(0, 0);
  373. this.loads = [0, 0, 0];
  374. this.mem = new CurTotal(0, 0);
  375. this.netIO = { up: 0, down: 0 };
  376. this.netTraffic = { sent: 0, recv: 0 };
  377. this.publicIP = { ipv4: 0, ipv6: 0 };
  378. this.swap = new CurTotal(0, 0);
  379. this.tcpCount = 0;
  380. this.udpCount = 0;
  381. this.uptime = 0;
  382. this.appUptime = 0;
  383. this.appStats = {threads: 0, mem: 0, uptime: 0};
  384. this.xray = { state: State.Stop, errorMsg: "", version: "", color: "" };
  385. if (data == null) {
  386. return;
  387. }
  388. this.cpu = new CurTotal(data.cpu, 100);
  389. this.cpuCores = data.cpuCores;
  390. this.logicalPro = data.logicalPro;
  391. this.cpuSpeedMhz = data.cpuSpeedMhz;
  392. this.disk = new CurTotal(data.disk.current, data.disk.total);
  393. this.loads = data.loads.map(load => toFixed(load, 2));
  394. this.mem = new CurTotal(data.mem.current, data.mem.total);
  395. this.netIO = data.netIO;
  396. this.netTraffic = data.netTraffic;
  397. this.publicIP = data.publicIP;
  398. this.swap = new CurTotal(data.swap.current, data.swap.total);
  399. this.tcpCount = data.tcpCount;
  400. this.udpCount = data.udpCount;
  401. this.uptime = data.uptime;
  402. this.appUptime = data.appUptime;
  403. this.appStats = data.appStats;
  404. this.xray = data.xray;
  405. switch (this.xray.state) {
  406. case State.Running:
  407. this.xray.color = "green";
  408. break;
  409. case State.Stop:
  410. this.xray.color = "orange";
  411. break;
  412. case State.Error:
  413. this.xray.color = "red";
  414. break;
  415. default:
  416. this.xray.color = "gray";
  417. }
  418. }
  419. }
  420. const versionModal = {
  421. visible: false,
  422. versions: [],
  423. show(versions) {
  424. this.visible = true;
  425. this.versions = versions;
  426. },
  427. hide() {
  428. this.visible = false;
  429. },
  430. };
  431. const logModal = {
  432. visible: false,
  433. logs: [],
  434. rows: 20,
  435. level: 'info',
  436. syslog: false,
  437. loading: false,
  438. show(logs) {
  439. this.visible = true;
  440. this.logs = logs;
  441. this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record...";
  442. },
  443. formatLogs(logs) {
  444. let formattedLogs = '';
  445. const levels = ["DEBUG","INFO","NOTICE","WARNING","ERROR"];
  446. const levelColors = ["#3c89e8","#008771","#008771","#f37b24","#e04141","#bcbcbc"];
  447. logs.forEach((log, index) => {
  448. let [data, message] = log.split(" - ",2);
  449. const parts = data.split(" ")
  450. if(index>0) formattedLogs += '<br>';
  451. if (parts.length === 3) {
  452. const d = parts[0];
  453. const t = parts[1];
  454. const level = parts[2];
  455. const levelIndex = levels.indexOf(level,levels) || 5;
  456. //formattedLogs += `<span style="color: gray;">${index + 1}.</span>`;
  457. formattedLogs += `<span style="color: ${levelColors[0]};">${d} ${t}</span> `;
  458. formattedLogs += `<span style="color: ${levelColors[levelIndex]}">${level}</span>`;
  459. } else {
  460. const levelIndex = levels.indexOf(data,levels) || 5;
  461. formattedLogs += `<span style="color: ${levelColors[levelIndex]}">${data}</span>`;
  462. }
  463. if(message){
  464. if(message.startsWith("XRAY:"))
  465. message = "<b>XRAY: </b>" + message.substring(5);
  466. else
  467. message = "<b>X-UI: </b>" + message;
  468. }
  469. formattedLogs += message ? ' - ' + message : '';
  470. });
  471. return formattedLogs;
  472. },
  473. hide() {
  474. this.visible = false;
  475. },
  476. };
  477. const backupModal = {
  478. visible: false,
  479. title: '',
  480. description: '',
  481. exportText: '',
  482. importText: '',
  483. show({
  484. title = '{{ i18n "pages.index.backupTitle" }}',
  485. description = '{{ i18n "pages.index.backupDescription" }}',
  486. exportText = '{{ i18n "pages.index.exportDatabase" }}',
  487. importText = '{{ i18n "pages.index.importDatabase" }}',
  488. }) {
  489. this.title = title;
  490. this.description = description;
  491. this.exportText = exportText;
  492. this.importText = importText;
  493. this.visible = true;
  494. },
  495. hide() {
  496. this.visible = false;
  497. },
  498. };
  499. const app = new Vue({
  500. delimiters: ['[[', ']]'],
  501. el: '#app',
  502. data: {
  503. siderDrawer,
  504. themeSwitcher,
  505. status: new Status(),
  506. versionModal,
  507. logModal,
  508. backupModal,
  509. spinning: false,
  510. loadingTip: '{{ i18n "loading"}}',
  511. showAlert: false,
  512. },
  513. methods: {
  514. loading(spinning, tip = '{{ i18n "loading"}}') {
  515. this.spinning = spinning;
  516. this.loadingTip = tip;
  517. },
  518. async getStatus() {
  519. try {
  520. const msg = await HttpUtil.post('/server/status');
  521. if (msg.success) {
  522. this.setStatus(msg.obj);
  523. }
  524. } catch (e) {
  525. console.error("Failed to get status:", e);
  526. }
  527. },
  528. setStatus(data) {
  529. this.status = new Status(data);
  530. },
  531. async openSelectV2rayVersion() {
  532. this.loading(true);
  533. const msg = await HttpUtil.post('server/getXrayVersion');
  534. this.loading(false);
  535. if (!msg.success) {
  536. return;
  537. }
  538. versionModal.show(msg.obj);
  539. },
  540. switchV2rayVersion(version) {
  541. this.$confirm({
  542. title: '{{ i18n "pages.index.xraySwitchVersionDialog"}}',
  543. content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}' + ` ${version}?`,
  544. okText: '{{ i18n "confirm"}}',
  545. class: themeSwitcher.currentTheme,
  546. cancelText: '{{ i18n "cancel"}}',
  547. onOk: async () => {
  548. versionModal.hide();
  549. this.loading(true, '{{ i18n "pages.index.dontRefresh"}}');
  550. await HttpUtil.post(`/server/installXray/${version}`);
  551. this.loading(false);
  552. },
  553. });
  554. },
  555. async stopXrayService() {
  556. this.loading(true);
  557. const msg = await HttpUtil.post('server/stopXrayService');
  558. this.loading(false);
  559. if (!msg.success) {
  560. return;
  561. }
  562. },
  563. async restartXrayService() {
  564. this.loading(true);
  565. const msg = await HttpUtil.post('server/restartXrayService');
  566. this.loading(false);
  567. if (!msg.success) {
  568. return;
  569. }
  570. },
  571. async openLogs(){
  572. logModal.loading = true;
  573. const msg = await HttpUtil.post('server/logs/'+logModal.rows,{level: logModal.level, syslog: logModal.syslog});
  574. if (!msg.success) {
  575. return;
  576. }
  577. logModal.show(msg.obj);
  578. await PromiseUtil.sleep(500);
  579. logModal.loading = false;
  580. },
  581. async openConfig() {
  582. this.loading(true);
  583. const msg = await HttpUtil.post('server/getConfigJson');
  584. this.loading(false);
  585. if (!msg.success) {
  586. return;
  587. }
  588. txtModal.show('config.json', JSON.stringify(msg.obj, null, 2), 'config.json');
  589. },
  590. openBackup() {
  591. backupModal.show({
  592. title: '{{ i18n "pages.index.backupTitle" }}',
  593. description: '{{ i18n "pages.index.backupDescription" }}',
  594. exportText: '{{ i18n "pages.index.exportDatabase" }}',
  595. importText: '{{ i18n "pages.index.importDatabase" }}',
  596. });
  597. },
  598. exportDatabase() {
  599. window.location = basePath + 'server/getDb';
  600. },
  601. importDatabase() {
  602. const fileInput = document.createElement('input');
  603. fileInput.type = 'file';
  604. fileInput.accept = '.db';
  605. fileInput.addEventListener('change', async (event) => {
  606. const dbFile = event.target.files[0];
  607. if (dbFile) {
  608. const formData = new FormData();
  609. formData.append('db', dbFile);
  610. backupModal.hide();
  611. this.loading(true);
  612. const uploadMsg = await HttpUtil.post('server/importDB', formData, {
  613. headers: {
  614. 'Content-Type': 'multipart/form-data',
  615. }
  616. });
  617. this.loading(false);
  618. if (!uploadMsg.success) {
  619. return;
  620. }
  621. this.loading(true);
  622. const restartMsg = await HttpUtil.post("/panel/setting/restartPanel");
  623. this.loading(false);
  624. if (restartMsg.success) {
  625. this.loading(true);
  626. await PromiseUtil.sleep(5000);
  627. location.reload();
  628. }
  629. }
  630. });
  631. fileInput.click();
  632. },
  633. },
  634. async mounted() {
  635. if (window.location.protocol !== "https:") {
  636. this.showAlert = true;
  637. }
  638. while (true) {
  639. try {
  640. await this.getStatus();
  641. } catch (e) {
  642. console.error(e);
  643. }
  644. await PromiseUtil.sleep(2000);
  645. }
  646. },
  647. });
  648. </script>
  649. </body>
  650. </html>