mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 13:14:11 +00:00
312 lines
13 KiB
HTML
312 lines
13 KiB
HTML
{{ template "page/head_start" .}}
|
|
{{ template "page/head_end" .}}
|
|
|
|
{{ template "page/body_start" .}}
|
|
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
|
|
<transition name="list" appear>
|
|
<a-layout-content class="under min-h-0">
|
|
<div class="waves-header">
|
|
<div class="waves-inner-header"></div>
|
|
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|
<defs>
|
|
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
|
</defs>
|
|
<g class="parallax">
|
|
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<a-row type="flex" justify="center" align="middle" class="h-100 overflow-y-auto overflow-x-hidden">
|
|
<a-col :xs="22" :sm="16" :md="12" :lg="10" :xl="8" :xxl="6" class="my-3rem">
|
|
<template v-if="loading">
|
|
<div class="text-center">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<!-- User Info Card -->
|
|
<a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
|
|
<div class="setting-section">
|
|
<a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}'
|
|
placement="bottomRight" trigger="click">
|
|
<template slot="content">
|
|
<a-space direction="vertical" :size="10">
|
|
<a-theme-switch-login></a-theme-switch-login>
|
|
<span>{{ i18n "pages.settings.language" }}</span>
|
|
<a-select ref="selectLang" class="w-100" v-model="lang" @change="LanguageManager.setLanguage(lang)"
|
|
:dropdown-class-name="themeSwitcher.currentTheme">
|
|
<a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
|
|
<span role="img" aria-label="l.name" v-text="l.icon"></span>
|
|
<span v-text="l.name"></span>
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-space>
|
|
</template>
|
|
<a-button shape="circle" icon="setting"></a-button>
|
|
</a-popover>
|
|
</div>
|
|
<div class="text-center mb-16">
|
|
<a-icon type="user" style="font-size: 48px; color: #008771;" />
|
|
<h2 class="mt-8 mb-0">[[ username ]]</h2>
|
|
</div>
|
|
<a-divider style="margin: 12px 0;" />
|
|
<a-descriptions :column="1" bordered size="small">
|
|
<a-descriptions-item label='{{ i18n "pages.user.upload" }}'>
|
|
[[ traffic ? SizeFormatter.sizeFormat(traffic.up) : '-' ]]
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label='{{ i18n "pages.user.download" }}'>
|
|
[[ traffic ? SizeFormatter.sizeFormat(traffic.down) : '-' ]]
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label='{{ i18n "pages.user.totalTraffic" }}'>
|
|
<template v-if="traffic">
|
|
<template v-if="traffic.total > 0">
|
|
[[ SizeFormatter.sizeFormat(traffic.up + traffic.down) ]] / [[ SizeFormatter.sizeFormat(traffic.total) ]]
|
|
<a-progress :percent="traffic.total > 0 ? NumberFormatter.toFixed((traffic.up + traffic.down) / traffic.total * 100, 1) : 0" size="small" :status="((traffic.up + traffic.down) / traffic.total * 100) >= 90 ? 'exception' : 'normal'" />
|
|
</template>
|
|
<template v-else>
|
|
{{ i18n "unlimited" }}
|
|
</template>
|
|
</template>
|
|
<template v-else>-</template>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label='{{ i18n "pages.user.remained" }}'>
|
|
<template v-if="traffic && traffic.total > 0">
|
|
<span :class="{ 'text-red': (traffic.total - traffic.up - traffic.down) <= 0 }">
|
|
[[ SizeFormatter.sizeFormat(Math.max(traffic.total - traffic.up - traffic.down, 0)) ]]
|
|
</span>
|
|
</template>
|
|
<template v-else-if="traffic">{{ i18n "unlimited" }}</template>
|
|
<template v-else>-</template>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label='{{ i18n "pages.user.expiryTime" }}'>
|
|
<template v-if="traffic">
|
|
<template v-if="traffic.expiryTime > 0">
|
|
<span :class="{ 'text-red': traffic.expiryTime < Date.now() }">
|
|
[[ formatExpiryTime(traffic.expiryTime) ]]
|
|
</span>
|
|
</template>
|
|
<template v-else>
|
|
{{ i18n "unlimited" }}
|
|
</template>
|
|
</template>
|
|
<template v-else>-</template>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label='{{ i18n "pages.user.lastOnline" }}'>
|
|
<template v-if="traffic && traffic.lastOnline > 0">
|
|
[[ new Date(traffic.lastOnline * 1000).toLocaleString() ]]
|
|
</template>
|
|
<template v-else>-</template>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label='{{ i18n "pages.user.status" }}'>
|
|
<a-badge v-if="traffic" :status="traffic.enable ? 'processing' : 'default'" :text='traffic.enable ? "{{ i18n "enabled" }}" : "{{ i18n "disabled" }}"' />
|
|
<template v-else>-</template>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-card>
|
|
|
|
<!-- Clash Link Card -->
|
|
<a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
|
|
<template #title>
|
|
<a-icon type="link" style="margin-right: 8px;" />{{ i18n "pages.user.clashUrl" }}
|
|
</template>
|
|
<template v-if="subClashEnable && subClashUrl">
|
|
<div class="clash-link-box" @click="copy(subClashUrl)">
|
|
<code>[[ subClashUrl ]]</code>
|
|
</div>
|
|
<div class="mt-12 text-center">
|
|
<a-button type="primary" icon="copy" size="small" @click="copy(subClashUrl)">
|
|
{{ i18n "copy" }}
|
|
</a-button>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<a-empty :description='{{ i18n "pages.user.noSubscription" }}' />
|
|
</template>
|
|
</a-card>
|
|
|
|
<!-- Quick Import Actions -->
|
|
<a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
|
|
<div class="quick-import-section">
|
|
<div class="quick-import-title">{{ i18n "pages.user.quickImport" }}</div>
|
|
<a-space direction="vertical" size="small" class="quick-import-actions">
|
|
<a-button type="primary" block @click="quickImportAndroid">
|
|
{{ i18n "pages.user.android" }}
|
|
</a-button>
|
|
<a-button type="primary" block @click="quickImportIOS">
|
|
{{ i18n "pages.user.ios" }}
|
|
</a-button>
|
|
<a-button type="primary" block @click="quickImportDesktop">
|
|
{{ i18n "pages.user.desktop" }}
|
|
</a-button>
|
|
</a-space>
|
|
</div>
|
|
</a-card>
|
|
|
|
<!-- Logout -->
|
|
<div class="text-center mt-16">
|
|
<a-button type="danger" icon="logout" @click="logout">
|
|
{{ i18n "menu.logout" }}
|
|
</a-button>
|
|
</div>
|
|
</template>
|
|
</a-col>
|
|
</a-row>
|
|
</a-layout-content>
|
|
</transition>
|
|
</a-layout>
|
|
{{template "page/body_scripts" .}}
|
|
{{template "component/aThemeSwitch" .}}
|
|
<script>
|
|
const app = new Vue({
|
|
delimiters: ['[[', ']]'],
|
|
el: '#app',
|
|
data: {
|
|
themeSwitcher,
|
|
loading: true,
|
|
username: '',
|
|
traffic: null,
|
|
lang: '',
|
|
subEnable: false,
|
|
subUrl: '',
|
|
subClashEnable: false,
|
|
subClashUrl: '',
|
|
},
|
|
async mounted() {
|
|
this.lang = LanguageManager.getLanguage();
|
|
await Promise.all([this.loadUserInfo(), this.loadSubscriptions()]);
|
|
this.loading = false;
|
|
},
|
|
methods: {
|
|
async loadUserInfo() {
|
|
try {
|
|
const msg = await HttpUtil.get('/panel/api/inbounds/userInfo');
|
|
if (msg.success) {
|
|
this.username = msg.obj?.email || '';
|
|
this.traffic = msg.obj;
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to get user info:", e);
|
|
}
|
|
},
|
|
async loadSubscriptions() {
|
|
try {
|
|
const msg = await HttpUtil.get('/panel/api/inbounds/userSubscriptions');
|
|
if (msg.success && msg.obj) {
|
|
this.subEnable = msg.obj.subEnable || false;
|
|
this.subUrl = msg.obj.subUrl || '';
|
|
this.subClashEnable = msg.obj.subClashEnable || false;
|
|
this.subClashUrl = msg.obj.subClashUrl || '';
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to get subscriptions:", e);
|
|
}
|
|
},
|
|
copy(text) {
|
|
ClipboardManager.copyText(text).then(ok => {
|
|
const messageType = ok ? 'success' : 'error';
|
|
this.$message[messageType](ok ? '{{ i18n "pages.user.copied" }}' : 'Copy failed');
|
|
});
|
|
},
|
|
quickImportAndroid() {
|
|
const url = this.subClashUrl || this.subUrl;
|
|
if (!url) {
|
|
this.$message.warning('{{ i18n "pages.user.noSubscription" }}');
|
|
return;
|
|
}
|
|
window.location.href = 'clash://install-config?url=' + encodeURIComponent(url);
|
|
},
|
|
quickImportIOS() {
|
|
const url = this.subUrl || this.subClashUrl;
|
|
if (!url) {
|
|
this.$message.warning('{{ i18n "pages.user.noSubscription" }}');
|
|
return;
|
|
}
|
|
const base64Url = btoa(url);
|
|
const remark = encodeURIComponent(this.username || 'Subscription');
|
|
window.location.href = 'shadowrocket://add/sub/' + base64Url + '?remark=' + remark;
|
|
},
|
|
quickImportDesktop() {
|
|
const url = this.subClashUrl || this.subUrl;
|
|
if (!url) {
|
|
this.$message.warning('{{ i18n "pages.user.noSubscription" }}');
|
|
return;
|
|
}
|
|
window.location.href = 'clash-verge://install-config?name=' + encodeURIComponent(this.username || 'Subscription') + '&url=' + encodeURIComponent(url);
|
|
},
|
|
formatExpiryTime(timestamp) {
|
|
if (timestamp <= 0) return '{{ i18n "unlimited" }}';
|
|
const date = new Date(timestamp);
|
|
const now = Date.now();
|
|
if (timestamp < now) {
|
|
return date.toLocaleString() + ' ({{ i18n "depleted" }})';
|
|
}
|
|
const diffDays = Math.ceil((timestamp - now) / (1000 * 60 * 60 * 24));
|
|
return date.toLocaleString() + ' (' + diffDays + ' {{ i18n "day" }})';
|
|
},
|
|
logout() {
|
|
location.href = basePath + 'logout/';
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
<style>
|
|
.clash-link-box {
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
word-break: break-all;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
transition: all 0.3s;
|
|
}
|
|
.dark .clash-link-box {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
}
|
|
.dark .clash-link-box:hover {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
.light .clash-link-box {
|
|
background: rgba(0, 0, 0, 0.03);
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
.light .clash-link-box:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-color: rgba(0, 0, 0, 0.14);
|
|
}
|
|
.user-card .ant-card-head {
|
|
min-height: auto;
|
|
padding: 0 16px;
|
|
}
|
|
.user-card .ant-card-head-title {
|
|
padding: 12px 0;
|
|
font-size: 14px;
|
|
}
|
|
.user-card .ant-card-body {
|
|
padding: 16px;
|
|
}
|
|
.quick-import-section {
|
|
text-align: left;
|
|
}
|
|
.quick-import-title {
|
|
margin-bottom: 12px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.quick-import-actions {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.quick-import-actions .ant-space-item {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
{{ template "page/body_end" .}}
|