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:
+48
-40
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user