feat: add panel update functionality via web GUI (#4117)

* feat: add panel update functionality via web GUI

* feat: enhance panel update notifications in web GUI

* feat: implement panel update modal and enhance translation strings

* fix design

web/html/index.html

@@ -139,7 +139,7 @@
                       <a-icon type="reload"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.restartXray" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="openSelectV2rayVersion" class="jc-center">
+                    <a-space direction="horizontal" @click="openSelectV2rayVersion()" class="jc-center">
                       <a-icon type="tool"></a-icon>
                       <span v-if="!isMobile">
                         [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n
@@ -169,6 +169,14 @@
               </a-col>
               <a-col :sm="24" :lg="12">
                 <a-card title='3X-UI' hoverable>
+                  <template v-if="panelUpdateModal.info.updateAvailable" #extra>
+                    <a-tooltip :overlay-class-name="themeSwitcher.currentTheme" :title='`{{ i18n "pages.index.updatePanel" }}: ${panelUpdateModal.info.latestVersion}`'>
+                      <a-tag color="orange" style="cursor:pointer;margin:0" @click="openPanelUpdate">
+                        <a-icon type="cloud-download"></a-icon>[[ panelUpdateModal.info.latestVersion ]]
+                      <span v-if="!isMobile">{{ i18n "pages.index.updatePanel" }}</span>
+                      </a-tag>
+                    </a-tooltip>
+                  </template>
                   <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank">
                     <a-tag color="green">
                       <span>v{{ .cur_ver }}</span>
@@ -317,9 +325,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 default-active-key="1">
+    <a-collapse accordion :active-key="versionModal.activeKey" @change="key => versionModal.activeKey = key">
       <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>
@@ -799,9 +834,11 @@
 
   const versionModal = {
     visible: false,
+    activeKey: '1',
     versions: [],
-    show(versions) {
+    show(versions, activeKey = '1') {
       this.visible = true;
+      this.activeKey = activeKey;
       this.versions = versions;
     },
     hide() {
@@ -809,6 +846,24 @@
     },
   };
 
+  const panelUpdateModal = {
+    visible: false,
+    info: {
+      currentVersion: '{{ .cur_ver }}',
+      latestVersion: '',
+      updateAvailable: false,
+    },
+    show(info) {
+      this.visible = true;
+      if (info) {
+        this.info = info;
+      }
+    },
+    hide() {
+      this.visible = false;
+    },
+  };
+
   const logModal = {
     visible: false,
     logs: [],
@@ -958,11 +1013,12 @@
         spinning: false
       },
       status: new Status(),
-  cpuHistory: [], // small live widget history
-  cpuHistoryLong: [], // aggregated points from backend
-  cpuHistoryLabels: [],
-  cpuHistoryModal: { visible: false, bucket: 2 },
+      cpuHistory: [], // small live widget history
+      cpuHistoryLong: [], // aggregated points from backend
+      cpuHistoryLabels: [],
+      cpuHistoryModal: { visible: false, bucket: 2 },
       versionModal,
+      panelUpdateModal,
       logModal,
       xraylogModal,
       backupModal,
@@ -1049,16 +1105,25 @@
           console.error('Failed to fetch bucketed cpu history', e)
         }
       },
-      async openSelectV2rayVersion() {
+      async openSelectV2rayVersion(activeKey = '1') {
         this.loading(true);
         const msg = await HttpUtil.get('/panel/api/server/getXrayVersion');
         this.loading(false);
         if (!msg.success) {
           return;
         }
-        versionModal.show(msg.obj);
+        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);
@@ -1195,6 +1260,27 @@
           },
         });
       },
+      updatePanel() {
+        this.$confirm({
+          title: '{{ i18n "pages.index.panelUpdateDialog" }}',
+          content: '{{ i18n "pages.index.panelUpdateDialogDesc" }}'
+            .replace('#version#', panelUpdateModal.info.latestVersion || ''),
+          okText: '{{ i18n "confirm"}}',
+          class: themeSwitcher.currentTheme,
+          cancelText: '{{ i18n "cancel"}}',
+          onOk: async () => {
+            panelUpdateModal.hide();
+            this.loading(true, '{{ i18n "pages.index.dontRefresh"}}');
+            const msg = await HttpUtil.post('/panel/api/server/updatePanel');
+            if (!msg.success) {
+              this.loading(false);
+              return;
+            }
+            await PromiseUtil.sleep(15000);
+            window.location.reload();
+          },
+        });
+      },
       updateGeofile(fileName) {
         const isSingleFile = !!fileName;
         this.$confirm({
@@ -1346,6 +1432,13 @@
       // Initial status fetch
       await this.getStatus();
 
+      // Silently check for panel updates so the indicator shows on load
+      HttpUtil.get('/panel/api/server/getPanelUpdateInfo').then(msg => {
+        if (msg && msg.success && msg.obj) {
+          panelUpdateModal.info = msg.obj;
+        }
+      });
+
       // Setup WebSocket for real-time updates
       if (window.wsClient) {
         window.wsClient.connect();