chore: pretty backup and xray version modal (#2737)

* chore: pretty `backup & restore` modal

* chore: pretty `xray version` modal

* fix: new `xray version` modal style
This commit is contained in:
Shishkevich D.
2025-03-08 20:41:23 +07:00
committed by GitHub
parent 751f564c4a
commit c6d27a4463
13 changed files with 79 additions and 59 deletions
+48 -40
View File
@@ -19,6 +19,18 @@
.ant-card-dark h2 {
color: var(--dark-color-text-primary);
}
.ant-backup-list-item {
text-align: left;
user-select: none;
cursor: pointer;
}
.dark .ant-backup-list-item svg {
color: var(--dark-color-text-primary);
}
.dark .ant-backup-list,
.dark .ant-xray-version-list {
border-color: var(--dark-color-stroke);
}
</style>
<body>
@@ -262,12 +274,14 @@
@ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
<a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
<template v-for="version, index in versionModal.versions">
<a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin-right: 12px; margin-bottom: 12px"
@click="switchV2rayVersion(version)">
[[ version ]]
</a-tag>
</template>
<a-list class="ant-xray-version-list" bordered style="width: 100%;">
<a-list-item class="ant-xray-version-list-item" v-for="version in versionModal.versions">
<a-list-item-meta>
<template #title>[[ version ]]</template>
</a-list-item-meta>
<a-radio :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
</a-list-item>
</a-list>
</a-modal>
<a-modal id="log-modal" v-model="logModal.visible"
:closable="true" @cancel="() => logModal.visible = false"
@@ -314,20 +328,32 @@
</a-form>
<div class="ant-input" style="height: auto; max-height: 500px; overflow: auto; margin-top: 0.5rem;" v-html="logModal.formattedLogs"></div>
</a-modal>
<a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
:closable="true" footer=""
<a-modal id="backup-modal"
v-model="backupModal.visible"
title='{{ i18n "pages.index.backupTitle" }}'
:closable="true"
footer=""
:class="themeSwitcher.currentTheme">
<a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
:message="backupModal.description"
show-icon>
</a-alert>
<a-space direction="horizontal" style="text-align: center; margin-bottom: 10px;">
<a-button type="primary" @click="exportDatabase()">
[[ backupModal.exportText ]]
</a-button>
<a-button type="primary" @click="importDatabase()">
[[ backupModal.importText ]]
</a-button>
<a-list class="ant-backup-list" bordered style="width: 100%;">
<a-list-item class="ant-backup-list-item" @click="exportDatabase()">
<a-list-item-meta>
<template #title>{{ i18n "pages.index.exportDatabase" }}</template>
<template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
</a-list-item-meta>
<a-icon type="right" />
</a-list-item>
<a-list-item class="ant-backup-list-item" @click="importDatabase()">
<a-list-item-meta>
<template #title>{{ i18n "pages.index.importDatabase" }}</template>
<template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template>
<templaet #avatar>
<a-icon type="import" />
</templaet>
</a-list-item-meta>
<a-icon type="right" />
</a-list-item>
</a-list>
</a-space>
</a-modal>
</a-layout>
@@ -491,24 +517,11 @@
const backupModal = {
visible: false,
title: '',
description: '',
exportText: '',
importText: '',
show({
title = '{{ i18n "pages.index.backupTitle" }}',
description = '{{ i18n "pages.index.backupDescription" }}',
exportText = '{{ i18n "pages.index.exportDatabase" }}',
importText = '{{ i18n "pages.index.importDatabase" }}',
}) {
this.title = title;
this.description = description;
this.exportText = exportText;
this.importText = importText;
this.visible = true;
show() {
this.visible = true;
},
hide() {
this.visible = false;
this.visible = false;
},
};
@@ -604,12 +617,7 @@
txtModal.show('config.json', JSON.stringify(msg.obj, null, 2), 'config.json');
},
openBackup() {
backupModal.show({
title: '{{ i18n "pages.index.backupTitle" }}',
description: '{{ i18n "pages.index.backupDescription" }}',
exportText: '{{ i18n "pages.index.exportDatabase" }}',
importText: '{{ i18n "pages.index.importDatabase" }}',
});
backupModal.show();
},
exportDatabase() {
window.location = basePath + 'server/getDb';