mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2025-04-20 05:52:24 +00:00
Fixes and improvements
This commit is contained in:
TaraRostami
parent
db62a07fb8
commit
e4e0f01e57
2 changed files with 153 additions and 155 deletions
|
|
@ -12,31 +12,6 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
{{define "component/aCustomStatistic"}}
|
{{define "component/aCustomStatistic"}}
|
||||||
<style>
|
|
||||||
.dark .ant-statistic-title,
|
|
||||||
.dark .ant-statistic-content {
|
|
||||||
color: var(--dark-color-text-primary) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .ant-statistic-title {
|
|
||||||
user-select: none;
|
|
||||||
opacity: 0.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-statistic-title {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-statistic-content-prefix {
|
|
||||||
margin-right: 6px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-statistic-content-prefix,
|
|
||||||
.ant-statistic-content-value {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Vue.component('a-custom-statistic', {
|
Vue.component('a-custom-statistic', {
|
||||||
props: {
|
props: {
|
||||||
|
|
|
||||||
|
|
@ -21,17 +21,23 @@
|
||||||
}
|
}
|
||||||
.ant-backup-list-item {
|
.ant-backup-list-item {
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
.dark .ant-backup-list-item svg,
|
.dark .ant-backup-list-item svg,
|
||||||
.dark .ant-card-actions>li>*,
|
|
||||||
.dark .ant-badge-status-text,
|
.dark .ant-badge-status-text,
|
||||||
|
.dark .ant-statistic-content,
|
||||||
.dark .ant-card-extra {
|
.dark .ant-card-extra {
|
||||||
color: var(--dark-color-text-primary) !important;
|
color: var(--dark-color-text-primary);
|
||||||
}
|
}
|
||||||
.dark .ant-card-actions>li>*:hover {
|
.dark .ant-statistic-title,
|
||||||
color: var(--color-primary-100) !important;
|
.dark .ant-card-actions>li {
|
||||||
|
color: rgba(255, 255, 255, 0.55);
|
||||||
|
}
|
||||||
|
.dark .ant-radio-inner {
|
||||||
|
background-color: var(--dark-color-surface-100);
|
||||||
|
border-color: var(--dark-color-surface-600);
|
||||||
|
}
|
||||||
|
.dark .ant-radio-checked .ant-radio-inner {
|
||||||
|
border-color: var(--color-primary-100);
|
||||||
}
|
}
|
||||||
.dark .ant-backup-list,
|
.dark .ant-backup-list,
|
||||||
.dark .ant-xray-version-list,
|
.dark .ant-xray-version-list,
|
||||||
|
|
@ -40,11 +46,35 @@
|
||||||
border-color: var(--dark-color-stroke);
|
border-color: var(--dark-color-stroke);
|
||||||
}
|
}
|
||||||
.ant-card-actions {
|
.ant-card-actions {
|
||||||
background: transparent !important;
|
background: transparent;
|
||||||
|
}
|
||||||
|
.ant-statistic-content {
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.ip-hidden {
|
.ip-hidden {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
filter: blur(10px);
|
filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
.running-animation .ant-badge-status-dot {
|
||||||
|
animation: runningAnimation 1.2s linear infinite;
|
||||||
|
}
|
||||||
|
.running-animation .ant-badge-status-processing:after {
|
||||||
|
border-color: var(--color-primary-100);
|
||||||
|
}
|
||||||
|
@keyframes runningAnimation {
|
||||||
|
0%,
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
transform: scale(1.5);
|
||||||
|
opacity: .2;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -61,7 +91,14 @@
|
||||||
show-icon closable>
|
show-icon closable>
|
||||||
</a-alert>
|
</a-alert>
|
||||||
</transition>
|
</transition>
|
||||||
<transition v-if="status.isLoaded" name="list" appear>
|
<transition name="list" appear>
|
||||||
|
<template>
|
||||||
|
<a-row v-if="!status.isLoaded">
|
||||||
|
<a-card hoverable style="text-align: center; padding: 30px 0; margin-top: 10px; background: transparent;">
|
||||||
|
<a-spin tip="Loading..."></a-spin>
|
||||||
|
</a-card>
|
||||||
|
</a-row>
|
||||||
|
<a-row v-else>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-card hoverable>
|
<a-card hoverable>
|
||||||
<a-row>
|
<a-row>
|
||||||
|
|
@ -112,15 +149,6 @@
|
||||||
</a-row>
|
</a-row>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-row>
|
</a-row>
|
||||||
</transition>
|
|
||||||
<transition name="list" appear>
|
|
||||||
<template v-if="!status.isLoaded">
|
|
||||||
<div style="text-align: center; padding: 30px 0; margin-top: 10px;">
|
|
||||||
<a-spin size="large"></a-spin>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-row>
|
|
||||||
<a-col :sm="24" :lg="12">
|
<a-col :sm="24" :lg="12">
|
||||||
<a-card hoverable>
|
<a-card hoverable>
|
||||||
<template #title>
|
<template #title>
|
||||||
|
|
@ -133,7 +161,7 @@
|
||||||
</template>
|
</template>
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<template v-if="status.xray.state != State.Error">
|
<template v-if="status.xray.state != State.Error">
|
||||||
<a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
|
<a-badge status="processing" class="running-animation" :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
|
||||||
|
|
@ -213,58 +241,10 @@
|
||||||
<a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
|
<a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :sm="24" :lg="12">
|
|
||||||
<a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
|
|
||||||
<template #extra>
|
|
||||||
<a-tooltip>
|
|
||||||
<template #title>
|
|
||||||
{{ i18n "pages.index.toggleIpVisibility" }}
|
|
||||||
</template>
|
|
||||||
<a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
<a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
|
|
||||||
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
|
||||||
<a-custom-statistic title="IPv4" :value="status.publicIP.ipv4">
|
|
||||||
<template #prefix>
|
|
||||||
<a-icon type="global" />
|
|
||||||
</template>
|
|
||||||
</a-custom-statistic>
|
|
||||||
</a-col>
|
|
||||||
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
|
||||||
<a-custom-statistic title="IPv6" :value="status.publicIP.ipv6">
|
|
||||||
<template #prefix>
|
|
||||||
<a-icon type="global" />
|
|
||||||
</template>
|
|
||||||
</a-custom-statistic>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</a-card>
|
|
||||||
</a-col>
|
|
||||||
<a-col :sm="24" :lg="12">
|
|
||||||
<a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
|
|
||||||
<a-row>
|
|
||||||
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
|
||||||
<a-custom-statistic title="TCP" :value="status.tcpCount">
|
|
||||||
<template #prefix>
|
|
||||||
<a-icon type="swap" />
|
|
||||||
</template>
|
|
||||||
</a-custom-statistic>
|
|
||||||
</a-col>
|
|
||||||
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
|
||||||
<a-custom-statistic title="UDP" :value="status.udpCount">
|
|
||||||
<template #prefix>
|
|
||||||
<a-icon type="swap" />
|
|
||||||
</template>
|
|
||||||
</a-custom-statistic>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</a-card>
|
|
||||||
</a-col>
|
|
||||||
<a-col :sm="24" :lg="12">
|
<a-col :sm="24" :lg="12">
|
||||||
<a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
|
<a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
<a-col :span="12">
|
||||||
<a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
|
<a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<a-icon type="arrow-up" />
|
<a-icon type="arrow-up" />
|
||||||
|
|
@ -274,7 +254,7 @@
|
||||||
</template>
|
</template>
|
||||||
</a-custom-statistic>
|
</a-custom-statistic>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
<a-col :span="12">
|
||||||
<a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
|
<a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<a-icon type="arrow-down" />
|
<a-icon type="arrow-down" />
|
||||||
|
|
@ -290,14 +270,14 @@
|
||||||
<a-col :sm="24" :lg="12">
|
<a-col :sm="24" :lg="12">
|
||||||
<a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
|
<a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
<a-col :span="12">
|
||||||
<a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
|
<a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<a-icon type="cloud-upload" />
|
<a-icon type="cloud-upload" />
|
||||||
</template>
|
</template>
|
||||||
</a-custom-statistic>
|
</a-custom-statistic>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
<a-col :span="12">
|
||||||
<a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
|
<a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<a-icon type="cloud-download" />
|
<a-icon type="cloud-download" />
|
||||||
|
|
@ -307,6 +287,54 @@
|
||||||
</a-row>
|
</a-row>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
<a-col :sm="24" :lg="12">
|
||||||
|
<a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
|
||||||
|
<template #extra>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>
|
||||||
|
{{ i18n "pages.index.toggleIpVisibility" }}
|
||||||
|
</template>
|
||||||
|
<a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
<a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
|
||||||
|
<a-col :xs="24" :xxl="12" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
||||||
|
<a-custom-statistic title="IPv4" :value="status.publicIP.ipv4">
|
||||||
|
<template #prefix>
|
||||||
|
<a-icon type="global" />
|
||||||
|
</template>
|
||||||
|
</a-custom-statistic>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xs="24" :xxl="12" :style="{ marginTop: isMobile ? '10px' : 0 }">
|
||||||
|
<a-custom-statistic title="IPv6" :value="status.publicIP.ipv6">
|
||||||
|
<template #prefix>
|
||||||
|
<a-icon type="global" />
|
||||||
|
</template>
|
||||||
|
</a-custom-statistic>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :sm="24" :lg="12">
|
||||||
|
<a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-custom-statistic title="TCP" :value="status.tcpCount">
|
||||||
|
<template #prefix>
|
||||||
|
<a-icon type="swap" />
|
||||||
|
</template>
|
||||||
|
</a-custom-statistic>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-custom-statistic title="UDP" :value="status.udpCount">
|
||||||
|
<template #prefix>
|
||||||
|
<a-icon type="swap" />
|
||||||
|
</template>
|
||||||
|
</a-custom-statistic>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</template>
|
</template>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
@ -318,10 +346,8 @@
|
||||||
<a-alert type="warning" style="margin-bottom: 12px; width: 100%;"
|
<a-alert type="warning" style="margin-bottom: 12px; width: 100%;"
|
||||||
message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
|
message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
|
||||||
<a-list class="ant-xray-version-list" bordered style="width: 100%;">
|
<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 class="ant-xray-version-list-item" v-for="version, index in versionModal.versions">
|
||||||
<a-list-item-meta>
|
<a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
|
||||||
<template #title>[[ version ]]</template>
|
|
||||||
</a-list-item-meta>
|
|
||||||
<a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
|
<a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
</a-list>
|
</a-list>
|
||||||
|
|
@ -378,22 +404,19 @@
|
||||||
footer=""
|
footer=""
|
||||||
:class="themeSwitcher.currentTheme">
|
:class="themeSwitcher.currentTheme">
|
||||||
<a-list class="ant-backup-list" bordered style="width: 100%;">
|
<a-list class="ant-backup-list" bordered style="width: 100%;">
|
||||||
<a-list-item class="ant-backup-list-item" @click="exportDatabase()">
|
<a-list-item class="ant-backup-list-item">
|
||||||
<a-list-item-meta>
|
<a-list-item-meta>
|
||||||
<template #title>{{ i18n "pages.index.exportDatabase" }}</template>
|
<template #title>{{ i18n "pages.index.exportDatabase" }}</template>
|
||||||
<template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
|
<template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
|
||||||
</a-list-item-meta>
|
</a-list-item-meta>
|
||||||
<a-icon type="right" />
|
<a-button @click="exportDatabase()" type="primary" icon="download"/>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
<a-list-item class="ant-backup-list-item" @click="importDatabase()">
|
<a-list-item class="ant-backup-list-item">
|
||||||
<a-list-item-meta>
|
<a-list-item-meta>
|
||||||
<template #title>{{ i18n "pages.index.importDatabase" }}</template>
|
<template #title>{{ i18n "pages.index.importDatabase" }}</template>
|
||||||
<template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template>
|
<template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template>
|
||||||
<templaet #avatar>
|
|
||||||
<a-icon type="import" />
|
|
||||||
</templaet>
|
|
||||||
</a-list-item-meta>
|
</a-list-item-meta>
|
||||||
<a-icon type="right" />
|
<a-button @click="importDatabase()" type="primary" icon="upload" />
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
</a-list>
|
</a-list>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue