diff options
Diffstat (limited to 'web/html/xui/index.html')
| -rw-r--r-- | web/html/xui/index.html | 73 |
1 files changed, 36 insertions, 37 deletions
diff --git a/web/html/xui/index.html b/web/html/xui/index.html index 62e60297..cafdb8f9 100644 --- a/web/html/xui/index.html +++ b/web/html/xui/index.html @@ -6,6 +6,9 @@ .ant-layout-content { margin: 24px 16px; } + .ant-card-hoverable { + margin-inline: 0.3rem; + } } .ant-col-sm-24 { @@ -18,21 +21,20 @@ </style> <body> -<a-layout id="app" v-cloak> +<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> {{ template "commonSider" . }} - <a-layout id="content-layout" :style="themeSwitcher.bgStyle"> + <a-layout id="content-layout"> <a-layout-content> <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/> <transition name="list" appear> <a-row> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> <a-row> <a-col :sm="24" :md="12"> <a-row> <a-col :span="12" style="text-align: center"> <a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color" - :class="themeSwitcher.darkCardClass" :percent="status.cpu.percent"></a-progress> <div>CPU: [[ cpuCoreFormat(status.cpuCores) ]]</div> <div>Speed: [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div> @@ -40,7 +42,6 @@ <a-col :span="12" style="text-align: center"> <a-progress type="dashboard" status="normal" :stroke-color="status.mem.color" - :class="themeSwitcher.darkCardClass" :percent="status.mem.percent"></a-progress> <div> {{ i18n "pages.index.memory"}}: [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]] @@ -53,7 +54,6 @@ <a-col :span="12" style="text-align: center"> <a-progress type="dashboard" status="normal" :stroke-color="status.swap.color" - :class="themeSwitcher.darkCardClass" :percent="status.swap.percent"></a-progress> <div> Swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]] @@ -62,7 +62,6 @@ <a-col :span="12" style="text-align: center"> <a-progress type="dashboard" status="normal" :stroke-color="status.disk.color" - :class="themeSwitcher.darkCardClass" :percent="status.disk.percent"></a-progress> <div> {{ i18n "pages.index.hard"}}: [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]] @@ -77,22 +76,22 @@ <transition name="list" appear> <a-row> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> 3X: <a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a> Xray: <a-tag color="green" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag> <a href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@panel3xui</a-tag></a> </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> {{ i18n "menu.link" }}: - <a-tag color="blue" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag> - <a-tag color="blue" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag> - <a-tag color="blue" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag> + <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag> + <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag> + <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag> </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> {{ i18n "pages.index.xrayStatus" }}: <a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag> <a-tooltip v-if="status.xray.state === State.Error"> @@ -101,13 +100,13 @@ </template> <a-icon type="question-circle" theme="filled"></a-icon> </a-tooltip> - <a-tag color="blue" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag> - <a-tag color="blue" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag> - <a-tag color="blue" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag> + <a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag> + <a-tag color="purple" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag> + <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag> </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> {{ i18n "pages.index.operationHours" }}: Xray: <a-tag color="green">[[ formatSecond(status.appStats.uptime) ]]</a-tag> @@ -116,7 +115,7 @@ </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> {{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]] <a-tooltip> <template slot="title"> @@ -127,7 +126,7 @@ </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> {{ i18n "usage"}}: Memory [[ sizeFormat(status.appStats.mem) ]] - Threads [[ status.appStats.threads ]] @@ -135,7 +134,7 @@ </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> <a-row> <a-col :span="12"> IPv4: @@ -159,7 +158,7 @@ </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> <a-row> <a-col :span="12"> TCP: [[ status.tcpCount ]] @@ -183,7 +182,7 @@ </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> <a-row> <a-col :span="12"> <a-icon type="arrow-up"></a-icon> @@ -209,7 +208,7 @@ </a-card> </a-col> <a-col :sm="24" :md="12"> - <a-card hoverable :class="themeSwitcher.darkCardClass"> + <a-card hoverable> <a-row> <a-col :span="12"> <a-icon type="cloud-upload"></a-icon> @@ -241,12 +240,12 @@ <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true" @ok="() => versionModal.visible = false" - :class="themeSwitcher.darkCardClass" + :class="themeSwitcher.currentTheme" footer=""> <h2>{{ i18n "pages.index.xraySwitchClick"}}</h2> <h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2> <template v-for="version, index in versionModal.versions"> - <a-tag :color="index % 2 == 0 ? 'blue' : 'green'" + <a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin: 10px" @click="switchV2rayVersion(version)"> [[ version ]] </a-tag> @@ -255,7 +254,7 @@ <a-modal id="log-modal" v-model="logModal.visible" title="X-UI logs" :closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false" - :class="themeSwitcher.darkCardClass" + :class="themeSwitcher.currentTheme" width="800px" footer=""> <a-form layout="inline"> @@ -263,7 +262,7 @@ <a-select v-model="logModal.rows" style="width: 80px" @change="openLogs()" - :dropdown-class-name="themeSwitcher.darkCardClass"> + :dropdown-class-name="themeSwitcher.currentTheme"> <a-select-option value="10">10</a-select-option> <a-select-option value="20">20</a-select-option> <a-select-option value="50">50</a-select-option> @@ -274,7 +273,7 @@ <a-select v-model="logModal.level" style="width: 120px" @change="openLogs()" - :dropdown-class-name="themeSwitcher.darkCardClass"> + :dropdown-class-name="themeSwitcher.currentTheme"> <a-select-option value="debug">Debug</a-select-option> <a-select-option value="info">Info</a-select-option> <a-select-option value="notice">Notice</a-select-option> @@ -300,12 +299,12 @@ </a-modal> <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title" - :closable="true" :class="themeSwitcher.darkCardClass" + :closable="true" :class="themeSwitcher.currentTheme" @ok="() => backupModal.hide()" @cancel="() => backupModal.hide()"> - <p style="color: inherit; font-size: 16px; padding: 4px 2px;"> - <a-icon type="warning" style="color: inherit; font-size: 20px;"></a-icon> - [[ backupModal.description ]] - </p> + <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" style="margin-bottom: 10px;"> <a-button type="primary" @click="exportDatabase()"> [[ backupModal.exportText ]] @@ -346,11 +345,11 @@ get color() { const percent = this.percent; if (percent < 80) { - return '#67C23A'; + return '#0a7557'; } else if (percent < 90) { - return '#E6A23C'; + return '#ffa031'; } else { - return '#F56C6C'; + return '#e04141'; } } } @@ -504,7 +503,7 @@ title: '{{ i18n "pages.index.xraySwitchVersionDialog"}}', content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}' + ` ${version}?`, okText: '{{ i18n "confirm"}}', - class: themeSwitcher.darkCardClass, + class: themeSwitcher.currentTheme, cancelText: '{{ i18n "cancel"}}', onOk: async () => { versionModal.hide(); |