Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 13:14:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: implement panel update modal and enhance translation strings

Browse source
This commit is contained in:
farhadh 2026-04-28 01:35:29 +02:00
parent a94eff4518
commit 882473b352
No known key found for this signature in database
2 changed files with 66 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
web/html/index.html
View file

@ -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;
this.versions = versions;
if (panelUpdate) {
this.panelUpdate = panelUpdate;
if (info) {
this.info = info;
}
},
hide() {
@ -1000,11 +1011,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,
@ -1093,17 +1105,23 @@
},
async openSelectV2rayVersion(activeKey = '1') {
this.loading(true);
const [xrayMsg, panelMsg] = await Promise.all([
HttpUtil.get('/panel/api/server/getXrayVersion'),
HttpUtil.get('/panel/api/server/getPanelUpdateInfo'),
]);
const msg = await HttpUtil.get('/panel/api/server/getXrayVersion');
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) {

2
web/translation/translate.en_US.toml
View file

@ -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"