|
19 | 19 | .ant-card-dark h2 { |
20 | 20 | color: var(--dark-color-text-primary); |
21 | 21 | } |
| 22 | + .ant-backup-list-item { |
| 23 | + text-align: left; |
| 24 | + user-select: none; |
| 25 | + cursor: pointer; |
| 26 | + } |
| 27 | + .dark .ant-backup-list-item svg { |
| 28 | + color: var(--dark-color-text-primary); |
| 29 | + } |
| 30 | + .dark .ant-backup-list, |
| 31 | + .dark .ant-xray-version-list { |
| 32 | + border-color: var(--dark-color-stroke); |
| 33 | + } |
22 | 34 | </style> |
23 | 35 |
|
24 | 36 | <body> |
|
262 | 274 | @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer=""> |
263 | 275 | <a-alert type="warning" style="margin-bottom: 12px; width: fit-content" |
264 | 276 | message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert> |
265 | | - <template v-for="version, index in versionModal.versions"> |
266 | | - <a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin-right: 12px; margin-bottom: 12px" |
267 | | - @click="switchV2rayVersion(version)"> |
268 | | - [[ version ]] |
269 | | - </a-tag> |
270 | | - </template> |
| 277 | + <a-list class="ant-xray-version-list" bordered style="width: 100%;"> |
| 278 | + <a-list-item class="ant-xray-version-list-item" v-for="version in versionModal.versions"> |
| 279 | + <a-list-item-meta> |
| 280 | + <template #title>[[ version ]]</template> |
| 281 | + </a-list-item-meta> |
| 282 | + <a-radio :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio> |
| 283 | + </a-list-item> |
| 284 | + </a-list> |
271 | 285 | </a-modal> |
272 | 286 | <a-modal id="log-modal" v-model="logModal.visible" |
273 | 287 | :closable="true" @cancel="() => logModal.visible = false" |
|
314 | 328 | </a-form> |
315 | 329 | <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto; margin-top: 0.5rem;" v-html="logModal.formattedLogs"></div> |
316 | 330 | </a-modal> |
317 | | - <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title" |
318 | | - :closable="true" footer="" |
| 331 | + <a-modal id="backup-modal" |
| 332 | + v-model="backupModal.visible" |
| 333 | + title='{{ i18n "pages.index.backupTitle" }}' |
| 334 | + :closable="true" |
| 335 | + footer="" |
319 | 336 | :class="themeSwitcher.currentTheme"> |
320 | | - <a-alert type="warning" style="margin-bottom: 10px; width: fit-content" |
321 | | - :message="backupModal.description" |
322 | | - show-icon> |
323 | | - </a-alert> |
324 | 337 | <a-space direction="horizontal" style="text-align: center; margin-bottom: 10px;"> |
325 | | - <a-button type="primary" @click="exportDatabase()"> |
326 | | - [[ backupModal.exportText ]] |
327 | | - </a-button> |
328 | | - <a-button type="primary" @click="importDatabase()"> |
329 | | - [[ backupModal.importText ]] |
330 | | - </a-button> |
| 338 | + <a-list class="ant-backup-list" bordered style="width: 100%;"> |
| 339 | + <a-list-item class="ant-backup-list-item" @click="exportDatabase()"> |
| 340 | + <a-list-item-meta> |
| 341 | + <template #title>{{ i18n "pages.index.exportDatabase" }}</template> |
| 342 | + <template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template> |
| 343 | + </a-list-item-meta> |
| 344 | + <a-icon type="right" /> |
| 345 | + </a-list-item> |
| 346 | + <a-list-item class="ant-backup-list-item" @click="importDatabase()"> |
| 347 | + <a-list-item-meta> |
| 348 | + <template #title>{{ i18n "pages.index.importDatabase" }}</template> |
| 349 | + <template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template> |
| 350 | + <templaet #avatar> |
| 351 | + <a-icon type="import" /> |
| 352 | + </templaet> |
| 353 | + </a-list-item-meta> |
| 354 | + <a-icon type="right" /> |
| 355 | + </a-list-item> |
| 356 | + </a-list> |
331 | 357 | </a-space> |
332 | 358 | </a-modal> |
333 | 359 | </a-layout> |
|
491 | 517 |
|
492 | 518 | const backupModal = { |
493 | 519 | visible: false, |
494 | | - title: '', |
495 | | - description: '', |
496 | | - exportText: '', |
497 | | - importText: '', |
498 | | - show({ |
499 | | - title = '{{ i18n "pages.index.backupTitle" }}', |
500 | | - description = '{{ i18n "pages.index.backupDescription" }}', |
501 | | - exportText = '{{ i18n "pages.index.exportDatabase" }}', |
502 | | - importText = '{{ i18n "pages.index.importDatabase" }}', |
503 | | - }) { |
504 | | - this.title = title; |
505 | | - this.description = description; |
506 | | - this.exportText = exportText; |
507 | | - this.importText = importText; |
508 | | - this.visible = true; |
| 520 | + show() { |
| 521 | + this.visible = true; |
509 | 522 | }, |
510 | 523 | hide() { |
511 | | - this.visible = false; |
| 524 | + this.visible = false; |
512 | 525 | }, |
513 | 526 | }; |
514 | 527 |
|
|
604 | 617 | txtModal.show('config.json', JSON.stringify(msg.obj, null, 2), 'config.json'); |
605 | 618 | }, |
606 | 619 | openBackup() { |
607 | | - backupModal.show({ |
608 | | - title: '{{ i18n "pages.index.backupTitle" }}', |
609 | | - description: '{{ i18n "pages.index.backupDescription" }}', |
610 | | - exportText: '{{ i18n "pages.index.exportDatabase" }}', |
611 | | - importText: '{{ i18n "pages.index.importDatabase" }}', |
612 | | - }); |
| 620 | + backupModal.show(); |
613 | 621 | }, |
614 | 622 | exportDatabase() { |
615 | 623 | window.location = basePath + 'server/getDb'; |
|
0 commit comments