feat: implement panel update modal and enhance translation strings

web/html/index.html

@@ -185,7 +185,7 @@
                     </a-tag>
                   </a>
                   <template #actions>
-                    <a-space direction="horizontal" @click="openSelectV2rayVersion('0')" class="jc-center">
+                    <a-space direction="horizontal" @click="openPanelUpdate" class="jc-center">
                       <a-icon type="cloud-download"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.updatePanel" }}</span>
                     </a-space>
@@ -323,35 +323,36 @@
       </a-spin>
     </a-layout-content>
   </a-layout>
-  <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
+  <a-modal id="panel-update-modal" v-model="panelUpdateModal.visible" title='{{ i18n "pages.index.updatePanel" }}'
+    :closable="true" @ok="() => panelUpdateModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
+    <a-alert type="warning" class="mb-12 w-100" message='{{ i18n "pages.index.panelUpdateDesc" }}'
+      show-icon></a-alert>
+    <a-list class="ant-version-list w-100" bordered>
+      <a-list-item class="ant-version-list-item">
+        <span>{{ i18n "pages.index.currentPanelVersion" }}</span>
+        <a-tag color="green">v[[ panelUpdateModal.info.currentVersion || '{{ .cur_ver }}' ]]</a-tag>
+      </a-list-item>
+      <a-list-item class="ant-version-list-item" v-if="panelUpdateModal.info.updateAvailable">
+        <span>{{ i18n "pages.index.latestPanelVersion" }}</span>
+        <a-tag color="purple">
+          [[ panelUpdateModal.info.latestVersion || '-' ]]
+        </a-tag>
+      </a-list-item>
+      <a-list-item class="ant-version-list-item" v-else>
+        <span>{{ i18n "pages.index.panelUpToDate" }}</span>
+        <a-tag color="green">{{ i18n "pages.index.upToDate" }}</a-tag>
+      </a-list-item>
+    </a-list>
+    <div class="mt-5 d-flex justify-end">
+      <a-button type="primary" icon="cloud-download" :disabled="!panelUpdateModal.info.updateAvailable"
+        @click="updatePanel">
+        {{ i18n "pages.index.updatePanel" }}
+      </a-button>
+    </div>
+  </a-modal>
+  <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xrayUpdates" }}'
     :closable="true" @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
     <a-collapse accordion :active-key="versionModal.activeKey" @change="key => versionModal.activeKey = key">
-      <a-collapse-panel key="0" header='3X-UI'>
-        <a-alert type="warning" class="mb-12 w-100" message='{{ i18n "pages.index.panelUpdateDesc" }}'
-          show-icon></a-alert>
-        <a-list class="ant-version-list w-100" bordered>
-          <a-list-item class="ant-version-list-item">
-            <span>{{ i18n "pages.index.currentPanelVersion" }}</span>
-            <a-tag color="green">v[[ versionModal.panelUpdate.currentVersion || '{{ .cur_ver }}' ]]</a-tag>
-          </a-list-item>
-          <a-list-item class="ant-version-list-item" v-if="versionModal.panelUpdate.updateAvailable">
-            <span>{{ i18n "pages.index.latestPanelVersion" }}</span>
-            <a-tag color="purple">
-              [[ versionModal.panelUpdate.latestVersion || '-' ]]
-            </a-tag>
-          </a-list-item>
-          <a-list-item class="ant-version-list-item" v-else>
-            <span>{{ i18n "pages.index.panelUpToDate" }}</span>
-            <a-tag color="green">{{ i18n "pages.index.xrayStatusRunning" }}</a-tag>
-          </a-list-item>
-        </a-list>
-        <div class="mt-5 d-flex justify-end">
-          <a-button type="primary" icon="cloud-download" :disabled="!versionModal.panelUpdate.updateAvailable"
-            @click="updatePanel">
-            {{ i18n "pages.index.updatePanel" }}
-          </a-button>
-        </div>
-      </a-collapse-panel>
       <a-collapse-panel key="1" header='Xray'>
         <a-alert type="warning" class="mb-12 w-100" message='{{ i18n "pages.index.xraySwitchClickDesk" }}'
           show-icon></a-alert>
@@ -833,17 +834,27 @@
     visible: false,
     activeKey: '1',
     versions: [],
-    panelUpdate: {
+    show(versions, activeKey = '1') {
+      this.visible = true;
+      this.activeKey = activeKey;
+      this.versions = versions;
+    },
+    hide() {
+      this.visible = false;
+    },
+  };
+
+  const panelUpdateModal = {
+    visible: false,
+    info: {
       currentVersion: '{{ .cur_ver }}',
       latestVersion: '',
       updateAvailable: false,
     },
-    show(versions, panelUpdate, activeKey = '1') {
+    show(info) {
       this.visible = true;
-      this.activeKey = activeKey;
+      if (info) {
-      this.versions = versions;
+        this.info = info;
-      if (panelUpdate) {
-        this.panelUpdate = panelUpdate;
       }
     },
     hide() {
@@ -1000,11 +1011,12 @@
         spinning: false
       },
       status: new Status(),
-  cpuHistory: [], // small live widget history
+      cpuHistory: [], // small live widget history
-  cpuHistoryLong: [], // aggregated points from backend
+      cpuHistoryLong: [], // aggregated points from backend
-  cpuHistoryLabels: [],
+      cpuHistoryLabels: [],
-  cpuHistoryModal: { visible: false, bucket: 2 },
+      cpuHistoryModal: { visible: false, bucket: 2 },
       versionModal,
+      panelUpdateModal,
       logModal,
       xraylogModal,
       backupModal,
@@ -1093,17 +1105,23 @@
       },
       async openSelectV2rayVersion(activeKey = '1') {
         this.loading(true);
-        const [xrayMsg, panelMsg] = await Promise.all([
+        const msg = await HttpUtil.get('/panel/api/server/getXrayVersion');
-          HttpUtil.get('/panel/api/server/getXrayVersion'),
-          HttpUtil.get('/panel/api/server/getPanelUpdateInfo'),
-        ]);
         this.loading(false);
-        if (!xrayMsg.success && !panelMsg.success) {
+        if (!msg.success) {
           return;
         }
-        versionModal.show(xrayMsg.success ? xrayMsg.obj : [], panelMsg.success ? panelMsg.obj : null, activeKey);
+        versionModal.show(msg.obj, activeKey);
         this.loadCustomGeo();
       },
+      async openPanelUpdate() {
+        this.loading(true);
+        const msg = await HttpUtil.get('/panel/api/server/getPanelUpdateInfo');
+        this.loading(false);
+        if (!msg.success) {
+          return;
+        }
+        panelUpdateModal.show(msg.obj);
+      },
       customGeoFormatTime(ts) {
         if (!ts) return '';
         return typeof moment !== 'undefined' ? moment(ts * 1000).format('YYYY-MM-DD HH:mm') : String(ts);
@@ -1244,12 +1262,12 @@
         this.$confirm({
           title: '{{ i18n "pages.index.panelUpdateDialog" }}',
           content: '{{ i18n "pages.index.panelUpdateDialogDesc" }}'
-            .replace('#version#', versionModal.panelUpdate.latestVersion || ''),
+            .replace('#version#', panelUpdateModal.info.latestVersion || ''),
           okText: '{{ i18n "confirm"}}',
           class: themeSwitcher.currentTheme,
           cancelText: '{{ i18n "cancel"}}',
           onOk: async () => {
-            versionModal.hide();
+            panelUpdateModal.hide();
             this.loading(true, '{{ i18n "pages.index.dontRefresh"}}');
             const msg = await HttpUtil.post('/panel/api/server/updatePanel');
             if (!msg.success) {

web/translation/translate.en_US.toml

@@ -124,6 +124,7 @@
 "stopXray" = "Stop"
 "restartXray" = "Restart"
 "xraySwitch" = "Version"
+"xrayUpdates" = "Xray Updates"
 "xraySwitchClick" = "Choose the version you want to switch to."
 "xraySwitchClickDesk" = "Choose carefully, as older versions may not be compatible with current configurations."
 "updatePanel" = "Update Panel"
@@ -131,6 +132,7 @@
 "currentPanelVersion" = "Current panel version"
 "latestPanelVersion" = "Latest panel version"
 "panelUpToDate" = "Panel is up to date"
+"upToDate" = "Up to date"
 "xrayStatusUnknown" = "Unknown"
 "xrayStatusRunning" = "Running"
 "xrayStatusStop" = "Stop"