diff options
Diffstat (limited to 'web/html/xui/index.html')
| -rw-r--r-- | web/html/xui/index.html | 88 |
1 files changed, 48 insertions, 40 deletions
diff --git a/web/html/xui/index.html b/web/html/xui/index.html index 89146932..305d3943 100644 --- a/web/html/xui/index.html +++ b/web/html/xui/index.html @@ -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'; |