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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 79 additions and 59 deletions

View file

@ -19,6 +19,18 @@
.ant-card-dark h2 { .ant-card-dark h2 {
color: var(--dark-color-text-primary); 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> </style>
<body> <body>
@ -262,12 +274,14 @@
@ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer=""> @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
<a-alert type="warning" style="margin-bottom: 12px; width: fit-content" <a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert> message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
<template v-for="version, index in versionModal.versions"> <a-list class="ant-xray-version-list" bordered style="width: 100%;">
<a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin-right: 12px; margin-bottom: 12px" <a-list-item class="ant-xray-version-list-item" v-for="version in versionModal.versions">
@click="switchV2rayVersion(version)"> <a-list-item-meta>
[[ version ]] <template #title>[[ version ]]</template>
</a-tag> </a-list-item-meta>
</template> <a-radio :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
</a-list-item>
</a-list>
</a-modal> </a-modal>
<a-modal id="log-modal" v-model="logModal.visible" <a-modal id="log-modal" v-model="logModal.visible"
:closable="true" @cancel="() => logModal.visible = false" :closable="true" @cancel="() => logModal.visible = false"
@ -314,20 +328,32 @@
</a-form> </a-form>
<div class="ant-input" style="height: auto; max-height: 500px; overflow: auto; margin-top: 0.5rem;" v-html="logModal.formattedLogs"></div> <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>
<a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title" <a-modal id="backup-modal"
:closable="true" footer="" v-model="backupModal.visible"
title='{{ i18n "pages.index.backupTitle" }}'
:closable="true"
footer=""
:class="themeSwitcher.currentTheme"> :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-space direction="horizontal" style="text-align: center; margin-bottom: 10px;">
<a-button type="primary" @click="exportDatabase()"> <a-list class="ant-backup-list" bordered style="width: 100%;">
[[ backupModal.exportText ]] <a-list-item class="ant-backup-list-item" @click="exportDatabase()">
</a-button> <a-list-item-meta>
<a-button type="primary" @click="importDatabase()"> <template #title>{{ i18n "pages.index.exportDatabase" }}</template>
[[ backupModal.importText ]] <template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
</a-button> </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-space>
</a-modal> </a-modal>
</a-layout> </a-layout>
@ -491,20 +517,7 @@
const backupModal = { const backupModal = {
visible: false, visible: false,
title: '', show() {
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; this.visible = true;
}, },
hide() { hide() {
@ -604,12 +617,7 @@
txtModal.show('config.json', JSON.stringify(msg.obj, null, 2), 'config.json'); txtModal.show('config.json', JSON.stringify(msg.obj, null, 2), 'config.json');
}, },
openBackup() { openBackup() {
backupModal.show({ backupModal.show();
title: '{{ i18n "pages.index.backupTitle" }}',
description: '{{ i18n "pages.index.backupDescription" }}',
exportText: '{{ i18n "pages.index.exportDatabase" }}',
importText: '{{ i18n "pages.index.importDatabase" }}',
});
}, },
exportDatabase() { exportDatabase() {
window.location = basePath + 'server/getDb'; window.location = basePath + 'server/getDb';

View file

@ -113,9 +113,10 @@
"config" = "Config" "config" = "Config"
"backup" = "Backup & Restore" "backup" = "Backup & Restore"
"backupTitle" = "Database Backup & Restore" "backupTitle" = "Database Backup & Restore"
"backupDescription" = "It is recommended to make a backup before restoring a database."
"exportDatabase" = "Back Up" "exportDatabase" = "Back Up"
"exportDatabaseDesc" = "Click to download a .db file containing a backup of your current database to your device."
"importDatabase" = "Restore" "importDatabase" = "Restore"
"importDatabaseDesc" = "Click to select and upload a .db file from your device to restore your database from a backup."
[pages.inbounds] [pages.inbounds]
"title" = "Inbounds" "title" = "Inbounds"

View file

@ -113,9 +113,10 @@
"config" = "Configuración" "config" = "Configuración"
"backup" = "Copia de Seguridad y Restauración" "backup" = "Copia de Seguridad y Restauración"
"backupTitle" = "Copia de Seguridad y Restauración de la Base de Datos" "backupTitle" = "Copia de Seguridad y Restauración de la Base de Datos"
"backupDescription" = "Recuerda hacer una copia de seguridad antes de importar una nueva base de datos." "exportDatabase" = "Copia de seguridad"
"exportDatabase" = "Descargar Base de Datos" "exportDatabaseDesc" = "Haz clic para descargar un archivo .db que contiene una copia de seguridad de tu base de datos actual en tu dispositivo."
"importDatabase" = "Cargar Base de Datos" "importDatabase" = "Restaurar"
"importDatabaseDesc" = "Haz clic para seleccionar y cargar un archivo .db desde tu dispositivo para restaurar tu base de datos desde una copia de seguridad."
[pages.inbounds] [pages.inbounds]
"title" = "Entradas" "title" = "Entradas"

View file

@ -113,9 +113,10 @@
"config" = "پیکربندی" "config" = "پیکربندی"
"backup" = "پشتیبان‌گیری" "backup" = "پشتیبان‌گیری"
"backupTitle" = "پشتیبان‌گیری دیتابیس" "backupTitle" = "پشتیبان‌گیری دیتابیس"
"backupDescription" = "توصیه‌می‌شود قبل‌از واردکردن یک دیتابیس جدید، نسخه پشتیبان تهیه ‌کنید"
"exportDatabase" = "پشتیبان‌گیری" "exportDatabase" = "پشتیبان‌گیری"
"importDatabase" = "بازگرداندن" "exportDatabaseDesc" = "برای دانلود یک فایل .db حاوی پشتیبان از پایگاه داده فعلی خود به دستگاهتان کلیک کنید."
"importDatabase" = "بازیابی"
"importDatabaseDesc" = "برای انتخاب و آپلود یک فایل .db از دستگاهتان و بازیابی پایگاه داده از یک پشتیبان کلیک کنید."
[pages.inbounds] [pages.inbounds]
"title" = "کاربران" "title" = "کاربران"

View file

@ -113,9 +113,10 @@
"config" = "Konfigurasi" "config" = "Konfigurasi"
"backup" = "Cadangan & Pulihkan" "backup" = "Cadangan & Pulihkan"
"backupTitle" = "Cadangan & Pulihkan Database" "backupTitle" = "Cadangan & Pulihkan Database"
"backupDescription" = "Disarankan untuk membuat cadangan sebelum memulihkan database."
"exportDatabase" = "Cadangkan" "exportDatabase" = "Cadangkan"
"exportDatabaseDesc" = "Klik untuk mengunduh file .db yang berisi cadangan dari database Anda saat ini ke perangkat Anda."
"importDatabase" = "Pulihkan" "importDatabase" = "Pulihkan"
"importDatabaseDesc" = "Klik untuk memilih dan mengunggah file .db dari perangkat Anda untuk memulihkan database dari cadangan."
[pages.inbounds] [pages.inbounds]
"title" = "Masuk" "title" = "Masuk"

View file

@ -113,9 +113,10 @@
"config" = "設定" "config" = "設定"
"backup" = "バックアップと復元" "backup" = "バックアップと復元"
"backupTitle" = "データベースのバックアップと復元" "backupTitle" = "データベースのバックアップと復元"
"backupDescription" = "データベースを復元する前にバックアップすることをお勧めします"
"exportDatabase" = "バックアップ" "exportDatabase" = "バックアップ"
"exportDatabaseDesc" = "クリックして、現在のデータベースのバックアップを含む .db ファイルをデバイスにダウンロードします。"
"importDatabase" = "復元" "importDatabase" = "復元"
"importDatabaseDesc" = "クリックして、デバイスから .db ファイルを選択し、アップロードしてバックアップからデータベースを復元します。"
[pages.inbounds] [pages.inbounds]
"title" = "インバウンド一覧" "title" = "インバウンド一覧"

View file

@ -113,9 +113,10 @@
"config" = "Configuração" "config" = "Configuração"
"backup" = "Backup e Restauração" "backup" = "Backup e Restauração"
"backupTitle" = "Backup e Restauração do Banco de Dados" "backupTitle" = "Backup e Restauração do Banco de Dados"
"backupDescription" = "É recomendado fazer um backup antes de restaurar o banco de dados." "exportDatabase" = "Backup"
"exportDatabase" = "Fazer Backup" "exportDatabaseDesc" = "Clique para baixar um arquivo .db contendo um backup do seu banco de dados atual para o seu dispositivo."
"importDatabase" = "Restaurar" "importDatabase" = "Restaurar"
"importDatabaseDesc" = "Clique para selecionar e enviar um arquivo .db do seu dispositivo para restaurar seu banco de dados a partir de um backup."
[pages.inbounds] [pages.inbounds]
"title" = "Inbounds" "title" = "Inbounds"

View file

@ -113,9 +113,10 @@
"config" = "Конфигурация" "config" = "Конфигурация"
"backup" = "Резервное копирование и восстановление" "backup" = "Резервное копирование и восстановление"
"backupTitle" = "База данных резервных копий" "backupTitle" = "База данных резервных копий"
"backupDescription" = "Рекомендуется сделать резервную копию перед восстановлением базы данных."
"exportDatabase" = "Экспорт базы данных" "exportDatabase" = "Экспорт базы данных"
"exportDatabaseDesc" = "Нажмите, чтобы скачать файл .db, содержащий резервную копию вашей текущей базы данных на ваше устройство."
"importDatabase" = "Импорт базы данных" "importDatabase" = "Импорт базы данных"
"importDatabaseDesc" = "Нажмите, чтобы выбрать и загрузить файл .db с вашего устройства для восстановления базы данных из резервной копии."
[pages.inbounds] [pages.inbounds]
"title" = "Подключения" "title" = "Подключения"

View file

@ -113,9 +113,10 @@
"config" = "Yapılandırma" "config" = "Yapılandırma"
"backup" = "Yedekle & Geri Yükle" "backup" = "Yedekle & Geri Yükle"
"backupTitle" = "Veritabanı Yedekleme & Geri Yükleme" "backupTitle" = "Veritabanı Yedekleme & Geri Yükleme"
"backupDescription" = "Veritabanını geri yüklemeden önce yedek almanız önerilir."
"exportDatabase" = "Yedekle" "exportDatabase" = "Yedekle"
"exportDatabaseDesc" = "Mevcut veritabanınızın yedeğini içeren bir .db dosyasını cihazınıza indirmek için tıklayın."
"importDatabase" = "Geri Yükle" "importDatabase" = "Geri Yükle"
"importDatabaseDesc" = "Cihazınızdan bir .db dosyası seçip yükleyerek veritabanınızı yedekten geri yüklemek için tıklayın."
[pages.inbounds] [pages.inbounds]
"title" = "Gelenler" "title" = "Gelenler"

View file

@ -113,9 +113,10 @@
"config" = "Конфігурація" "config" = "Конфігурація"
"backup" = "Резервне копіювання та відновлення" "backup" = "Резервне копіювання та відновлення"
"backupTitle" = "Резервне копіювання та відновлення бази даних" "backupTitle" = "Резервне копіювання та відновлення бази даних"
"backupDescription" = "Рекомендується зробити резервну копію перед відновленням бази даних." "exportDatabase" = "Резервна копія"
"exportDatabase" = "Резервне копіювання" "exportDatabaseDesc" = "Натисніть, щоб завантажити файл .db, що містить резервну копію вашої поточної бази даних на ваш пристрій."
"importDatabase" = "Відновити" "importDatabase" = "Відновити"
"importDatabaseDesc" = "Натисніть, щоб вибрати та завантажити файл .db з вашого пристрою для відновлення бази даних з резервної копії."
[pages.inbounds] [pages.inbounds]
"title" = "Вхідні" "title" = "Вхідні"

View file

@ -113,9 +113,10 @@
"config" = "Cấu hình" "config" = "Cấu hình"
"backup" = "Sao lưu & Khôi phục" "backup" = "Sao lưu & Khôi phục"
"backupTitle" = "Sao lưu & Khôi phục Cơ sở dữ liệu" "backupTitle" = "Sao lưu & Khôi phục Cơ sở dữ liệu"
"backupDescription" = "Hãy nhớ sao lưu trước khi nhập cơ sở dữ liệu mới." "exportDatabase" = "Sao lưu"
"exportDatabase" = "Tải về Cơ sở dữ liệu" "exportDatabaseDesc" = "Nhấp để tải xuống tệp .db chứa bản sao lưu cơ sở dữ liệu hiện tại của bạn vào thiết bị."
"importDatabase" = "Tải lên Cơ sở dữ liệu" "importDatabase" = "Khôi phục"
"importDatabaseDesc" = "Nhấp để chọn và tải lên tệp .db từ thiết bị của bạn để khôi phục cơ sở dữ liệu từ bản sao lưu."
[pages.inbounds] [pages.inbounds]
"title" = "Điểm vào (Inbounds)" "title" = "Điểm vào (Inbounds)"

View file

@ -113,9 +113,10 @@
"config" = "配置" "config" = "配置"
"backup" = "备份和恢复" "backup" = "备份和恢复"
"backupTitle" = "备份和恢复数据库" "backupTitle" = "备份和恢复数据库"
"backupDescription" = "恢复数据库之前建议进行备份"
"exportDatabase" = "备份" "exportDatabase" = "备份"
"exportDatabaseDesc" = "点击下载包含当前数据库备份的 .db 文件到您的设备。"
"importDatabase" = "恢复" "importDatabase" = "恢复"
"importDatabaseDesc" = "点击选择并上传设备中的 .db 文件以从备份恢复数据库。"
[pages.inbounds] [pages.inbounds]
"title" = "入站列表" "title" = "入站列表"

View file

@ -113,9 +113,10 @@
"config" = "配置" "config" = "配置"
"backup" = "備份和恢復" "backup" = "備份和恢復"
"backupTitle" = "備份和恢復資料庫" "backupTitle" = "備份和恢復資料庫"
"backupDescription" = "恢復資料庫之前建議進行備份"
"exportDatabase" = "備份" "exportDatabase" = "備份"
"exportDatabaseDesc" = "點擊下載包含當前資料庫備份的 .db 文件到您的設備。"
"importDatabase" = "恢復" "importDatabase" = "恢復"
"importDatabaseDesc" = "點擊選擇並上傳設備中的 .db 文件以從備份恢復資料庫。"
[pages.inbounds] [pages.inbounds]
"title" = "入站列表" "title" = "入站列表"