mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 20:54:14 +00:00
1
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
8fd1dc94bb
commit
8a4101a96b
7 changed files with 396 additions and 130 deletions
|
|
@ -102,6 +102,10 @@ function regenerateSubId() {
|
||||||
form.subId = RandomUtil.randomLowerAndNum(16);
|
form.subId = RandomUtil.randomLowerAndNum(16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function regenerateEmail() {
|
||||||
|
form.email = RandomUtil.randomLowerAndNum(9);
|
||||||
|
}
|
||||||
|
|
||||||
async function onSubmit() {
|
async function onSubmit() {
|
||||||
if (!form.email || form.email.trim() === '') {
|
if (!form.email || form.email.trim() === '') {
|
||||||
message.error(t('pages.clients.email') + ' *');
|
message.error(t('pages.clients.email') + ' *');
|
||||||
|
|
@ -159,7 +163,10 @@ async function onSubmit() {
|
||||||
<a-row :gutter="16">
|
<a-row :gutter="16">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-item :label="t('pages.clients.email')" required>
|
<a-form-item :label="t('pages.clients.email')" required>
|
||||||
<a-input v-model:value="form.email" :placeholder="t('pages.clients.email')" />
|
<a-input-group compact style="display: flex">
|
||||||
|
<a-input v-model:value="form.email" :placeholder="t('pages.clients.email')" style="flex: 1" />
|
||||||
|
<a-button @click="regenerateEmail">↻</a-button>
|
||||||
|
</a-input-group>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { SizeFormatter, IntlUtil, ClipboardManager } from '@/utils';
|
|
||||||
import { CopyOutlined } from '@ant-design/icons-vue';
|
import { CopyOutlined } from '@ant-design/icons-vue';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
|
import { SizeFormatter, IntlUtil, ClipboardManager, HttpUtil } from '@/utils';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
|
@ -12,10 +12,17 @@ const props = defineProps({
|
||||||
client: { type: Object, default: null },
|
client: { type: Object, default: null },
|
||||||
inboundsById: { type: Object, default: () => ({}) },
|
inboundsById: { type: Object, default: () => ({}) },
|
||||||
isOnline: { type: Boolean, default: false },
|
isOnline: { type: Boolean, default: false },
|
||||||
|
subSettings: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({ enable: false, subURI: '', subJsonURI: '', subJsonEnable: false }),
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:open']);
|
const emit = defineEmits(['update:open']);
|
||||||
|
|
||||||
|
const links = ref([]);
|
||||||
|
const linksLoading = ref(false);
|
||||||
|
|
||||||
const traffic = computed(() => props.client?.traffic || null);
|
const traffic = computed(() => props.client?.traffic || null);
|
||||||
const totalBytes = computed(() => props.client?.totalGB || 0);
|
const totalBytes = computed(() => props.client?.totalGB || 0);
|
||||||
const used = computed(() => (traffic.value?.up || 0) + (traffic.value?.down || 0));
|
const used = computed(() => (traffic.value?.up || 0) + (traffic.value?.down || 0));
|
||||||
|
|
@ -25,6 +32,21 @@ const remaining = computed(() => {
|
||||||
return r > 0 ? r : 0;
|
return r > 0 ? r : 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const subLink = computed(() => {
|
||||||
|
if (!props.client?.subId || !props.subSettings?.subURI) return '';
|
||||||
|
return props.subSettings.subURI + props.client.subId;
|
||||||
|
});
|
||||||
|
|
||||||
|
const subJsonLink = computed(() => {
|
||||||
|
if (!props.client?.subId) return '';
|
||||||
|
if (!props.subSettings?.subJsonEnable || !props.subSettings?.subJsonURI) return '';
|
||||||
|
return props.subSettings.subJsonURI + props.client.subId;
|
||||||
|
});
|
||||||
|
|
||||||
|
const showSubscription = computed(
|
||||||
|
() => !!(props.subSettings?.enable && props.client?.subId),
|
||||||
|
);
|
||||||
|
|
||||||
function expiryLabel(ts) {
|
function expiryLabel(ts) {
|
||||||
if (!ts || ts <= 0) return '∞';
|
if (!ts || ts <= 0) return '∞';
|
||||||
return IntlUtil.formatDate(ts);
|
return IntlUtil.formatDate(ts);
|
||||||
|
|
@ -40,161 +62,294 @@ function lastOnlineLabel(ts) {
|
||||||
return IntlUtil.formatDate(ts);
|
return IntlUtil.formatDate(ts);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function dateLabel(ts) {
|
||||||
|
if (!ts || ts <= 0) return '-';
|
||||||
|
return IntlUtil.formatDate(ts);
|
||||||
|
}
|
||||||
|
|
||||||
async function copyValue(text) {
|
async function copyValue(text) {
|
||||||
if (!text) return;
|
if (!text) return;
|
||||||
const ok = await ClipboardManager.copyText(String(text));
|
const ok = await ClipboardManager.copyText(String(text));
|
||||||
if (ok) message.success(t('copied'));
|
if (ok) message.success(t('copied'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function loadLinks() {
|
||||||
|
if (!props.client?.subId) {
|
||||||
|
links.value = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
linksLoading.value = true;
|
||||||
|
try {
|
||||||
|
const msg = await HttpUtil.get(
|
||||||
|
`/panel/api/inbounds/getSubLinks/${encodeURIComponent(props.client.subId)}`,
|
||||||
|
);
|
||||||
|
links.value = msg?.success && Array.isArray(msg.obj) ? msg.obj : [];
|
||||||
|
} finally {
|
||||||
|
linksLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => props.open, (next) => {
|
||||||
|
if (next) loadLinks();
|
||||||
|
else links.value = [];
|
||||||
|
});
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
emit('update:open', false);
|
emit('update:open', false);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<a-modal :open="open" :title="client ? client.email : t('info')" :footer="null" :width="560" @cancel="close">
|
<a-modal :open="open" :title="client ? client.email : t('info')" :footer="null" :width="640" @cancel="close">
|
||||||
<div v-if="client" class="info-grid">
|
<template v-if="client">
|
||||||
<div class="row">
|
<table class="info-table block">
|
||||||
<span class="label">{{ t('online') }}</span>
|
<tbody>
|
||||||
<a-tag v-if="client.enable && isOnline" color="green">{{ t('online') }}</a-tag>
|
<tr>
|
||||||
<a-tag v-else>{{ t('offline') }}</a-tag>
|
<td>{{ t('pages.clients.online') || 'Online' }}</td>
|
||||||
<span class="hint">{{ t('lastOnline') }}: {{ lastOnlineLabel(traffic?.lastOnline) }}</span>
|
<td>
|
||||||
</div>
|
<a-tag v-if="client.enable && isOnline" color="green">{{ t('pages.clients.online') || 'Online' }}</a-tag>
|
||||||
|
<a-tag v-else>{{ t('pages.clients.offline') || 'Offline' }}</a-tag>
|
||||||
|
<span class="hint">{{ t('lastOnline') }}: {{ lastOnlineLabel(traffic?.lastOnline) }}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="row">
|
<tr>
|
||||||
<span class="label">{{ t('enabled') }}</span>
|
<td>{{ t('status') }}</td>
|
||||||
<a-tag :color="client.enable ? 'green' : 'default'">
|
<td>
|
||||||
{{ client.enable ? t('enabled') : t('disabled') }}
|
<a-tag :color="client.enable ? 'green' : 'default'">
|
||||||
</a-tag>
|
{{ client.enable ? t('enabled') : t('disabled') }}
|
||||||
</div>
|
</a-tag>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="row">
|
<tr>
|
||||||
<span class="label">subId</span>
|
<td>{{ t('pages.clients.email') || 'Email' }}</td>
|
||||||
<span class="value mono">{{ client.subId || '-' }}</span>
|
<td>
|
||||||
<a-button v-if="client.subId" size="small" type="text" @click="copyValue(client.subId)">
|
<a-tag v-if="client.email" color="green">{{ client.email }}</a-tag>
|
||||||
<CopyOutlined />
|
<a-tag v-else color="red">{{ t('none') }}</a-tag>
|
||||||
</a-button>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
|
|
||||||
<div v-if="client.uuid" class="row">
|
<tr>
|
||||||
<span class="label">UUID</span>
|
<td>subId</td>
|
||||||
<span class="value mono">{{ client.uuid }}</span>
|
<td>
|
||||||
<a-button size="small" type="text" @click="copyValue(client.uuid)">
|
<a-tag class="info-large-tag">{{ client.subId || '-' }}</a-tag>
|
||||||
<CopyOutlined />
|
<a-button v-if="client.subId" size="small" type="text" @click="copyValue(client.subId)">
|
||||||
</a-button>
|
<CopyOutlined />
|
||||||
</div>
|
</a-button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div v-if="client.password" class="row">
|
<tr v-if="client.uuid">
|
||||||
<span class="label">Password</span>
|
<td>UUID</td>
|
||||||
<span class="value mono">{{ client.password }}</span>
|
<td>
|
||||||
<a-button size="small" type="text" @click="copyValue(client.password)">
|
<a-tag class="info-large-tag">{{ client.uuid }}</a-tag>
|
||||||
<CopyOutlined />
|
<a-button size="small" type="text" @click="copyValue(client.uuid)">
|
||||||
</a-button>
|
<CopyOutlined />
|
||||||
</div>
|
</a-button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div v-if="client.auth" class="row">
|
<tr v-if="client.password">
|
||||||
<span class="label">Auth</span>
|
<td>{{ t('password') }}</td>
|
||||||
<span class="value mono">{{ client.auth }}</span>
|
<td>
|
||||||
<a-button size="small" type="text" @click="copyValue(client.auth)">
|
<a-tag class="info-large-tag">{{ client.password }}</a-tag>
|
||||||
<CopyOutlined />
|
<a-button size="small" type="text" @click="copyValue(client.password)">
|
||||||
</a-button>
|
<CopyOutlined />
|
||||||
</div>
|
</a-button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="row">
|
<tr v-if="client.auth">
|
||||||
<span class="label">{{ t('pages.inbounds.traffic') }}</span>
|
<td>Auth</td>
|
||||||
<a-tag>
|
<td>
|
||||||
↑ {{ SizeFormatter.sizeFormat(traffic?.up || 0) }}
|
<a-tag class="info-large-tag">{{ client.auth }}</a-tag>
|
||||||
/ ↓ {{ SizeFormatter.sizeFormat(traffic?.down || 0) }}
|
<a-button size="small" type="text" @click="copyValue(client.auth)">
|
||||||
</a-tag>
|
<CopyOutlined />
|
||||||
<span class="hint">
|
</a-button>
|
||||||
{{ SizeFormatter.sizeFormat(used) }}
|
</td>
|
||||||
/
|
</tr>
|
||||||
{{ totalBytes > 0 ? SizeFormatter.sizeFormat(totalBytes) : '∞' }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
<tr>
|
||||||
<span class="label">{{ t('remained') || 'Remaining' }}</span>
|
<td>Flow</td>
|
||||||
<a-tag v-if="remaining < 0" color="purple">∞</a-tag>
|
<td>
|
||||||
<a-tag v-else :color="remaining > 0 ? '' : 'red'">
|
<a-tag v-if="client.flow">{{ client.flow }}</a-tag>
|
||||||
{{ SizeFormatter.sizeFormat(remaining) }}
|
<a-tag v-else color="orange">{{ t('none') }}</a-tag>
|
||||||
</a-tag>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
|
|
||||||
<div class="row">
|
<tr>
|
||||||
<span class="label">{{ t('pages.inbounds.allTimeTraffic') || 'All-time' }}</span>
|
<td>{{ t('pages.inbounds.traffic') }}</td>
|
||||||
<a-tag>{{ SizeFormatter.sizeFormat(traffic?.allTime || (used)) }}</a-tag>
|
<td>
|
||||||
</div>
|
<a-tag>
|
||||||
|
↑ {{ SizeFormatter.sizeFormat(traffic?.up || 0) }}
|
||||||
|
/ ↓ {{ SizeFormatter.sizeFormat(traffic?.down || 0) }}
|
||||||
|
</a-tag>
|
||||||
|
<span class="hint">
|
||||||
|
{{ SizeFormatter.sizeFormat(used) }}
|
||||||
|
/
|
||||||
|
{{ totalBytes > 0 ? SizeFormatter.sizeFormat(totalBytes) : '∞' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="row">
|
<tr>
|
||||||
<span class="label">{{ t('pages.inbounds.expireDate') || 'Expiry' }}</span>
|
<td>{{ t('remained') || 'Remaining' }}</td>
|
||||||
<a-tag v-if="!client.expiryTime || client.expiryTime <= 0" color="purple">∞</a-tag>
|
<td>
|
||||||
<a-tag v-else>{{ expiryLabel(client.expiryTime) }}</a-tag>
|
<a-tag v-if="remaining < 0" color="purple">∞</a-tag>
|
||||||
<span v-if="client.expiryTime > 0" class="hint">{{ expiryRelative(client.expiryTime) }}</span>
|
<a-tag v-else :color="remaining > 0 ? '' : 'red'">
|
||||||
</div>
|
{{ SizeFormatter.sizeFormat(remaining) }}
|
||||||
|
</a-tag>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="row">
|
<tr>
|
||||||
<span class="label">IP limit</span>
|
<td>{{ t('pages.inbounds.allTimeTraffic') || 'All-time' }}</td>
|
||||||
<a-tag v-if="!client.limitIp">∞</a-tag>
|
<td>
|
||||||
<a-tag v-else>{{ client.limitIp }}</a-tag>
|
<a-tag>{{ SizeFormatter.sizeFormat(traffic?.allTime || used) }}</a-tag>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div v-if="client.comment" class="row">
|
<tr>
|
||||||
<span class="label">{{ t('pages.clients.comment') || 'Comment' }}</span>
|
<td>{{ t('pages.inbounds.expireDate') || 'Expiry' }}</td>
|
||||||
<span class="value">{{ client.comment }}</span>
|
<td>
|
||||||
</div>
|
<a-tag v-if="!client.expiryTime || client.expiryTime <= 0" color="purple">∞</a-tag>
|
||||||
|
<a-tag v-else>{{ expiryLabel(client.expiryTime) }}</a-tag>
|
||||||
|
<span v-if="client.expiryTime > 0" class="hint">{{ expiryRelative(client.expiryTime) }}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="row">
|
<tr>
|
||||||
<span class="label">{{ t('pages.clients.attachedInbounds') || 'Attached inbounds' }}</span>
|
<td>IP limit</td>
|
||||||
<div class="chips">
|
<td>
|
||||||
<a-tag v-for="id in (client.inboundIds || [])" :key="id" color="blue">
|
<a-tag v-if="!client.limitIp">∞</a-tag>
|
||||||
<template v-if="inboundsById[id]">
|
<a-tag v-else>{{ client.limitIp }}</a-tag>
|
||||||
{{ inboundsById[id].remark || `#${id}` }} ({{ inboundsById[id].protocol }}:{{ inboundsById[id].port }})
|
</td>
|
||||||
</template>
|
</tr>
|
||||||
<template v-else>#{{ id }}</template>
|
|
||||||
</a-tag>
|
<tr>
|
||||||
<span v-if="!client.inboundIds || client.inboundIds.length === 0" class="hint">—</span>
|
<td>{{ t('pages.inbounds.createdAt') || 'Created' }}</td>
|
||||||
|
<td>
|
||||||
|
<a-tag>{{ dateLabel(client.createdAt) }}</a-tag>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>{{ t('pages.inbounds.updatedAt') || 'Updated' }}</td>
|
||||||
|
<td>
|
||||||
|
<a-tag>{{ dateLabel(client.updatedAt) }}</a-tag>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr v-if="client.comment">
|
||||||
|
<td>{{ t('pages.clients.comment') || 'Comment' }}</td>
|
||||||
|
<td>
|
||||||
|
<a-tag class="info-large-tag">{{ client.comment }}</a-tag>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>{{ t('pages.clients.attachedInbounds') || 'Attached inbounds' }}</td>
|
||||||
|
<td>
|
||||||
|
<div class="chips">
|
||||||
|
<a-tag v-for="id in (client.inboundIds || [])" :key="id" color="blue">
|
||||||
|
<template v-if="inboundsById[id]">
|
||||||
|
{{ inboundsById[id].remark || `#${id}` }} ({{ inboundsById[id].protocol }}:{{ inboundsById[id].port }})
|
||||||
|
</template>
|
||||||
|
<template v-else>#{{ id }}</template>
|
||||||
|
</a-tag>
|
||||||
|
<span v-if="!client.inboundIds || client.inboundIds.length === 0" class="hint">—</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<template v-if="links.length > 0">
|
||||||
|
<a-divider>{{ t('pages.inbounds.copyLink') || 'URL' }}</a-divider>
|
||||||
|
<div v-for="(link, idx) in links" :key="idx" class="link-panel">
|
||||||
|
<div class="link-panel-header">
|
||||||
|
<a-tag color="green">{{ `${t('pages.clients.link') || 'Link'} ${idx + 1}` }}</a-tag>
|
||||||
|
<a-tooltip :title="t('copy')">
|
||||||
|
<a-button size="small" @click="copyValue(link)">
|
||||||
|
<template #icon>
|
||||||
|
<CopyOutlined />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
<code class="link-panel-text">{{ link }}</code>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
|
||||||
|
<template v-if="showSubscription && subLink">
|
||||||
|
<a-divider>{{ t('subscription.title') || 'Subscription info' }}</a-divider>
|
||||||
|
<div class="link-panel">
|
||||||
|
<div class="link-panel-header">
|
||||||
|
<a-tag color="green">{{ t('subscription.title') || 'Subscription info' }}</a-tag>
|
||||||
|
<a-tooltip :title="t('copy')">
|
||||||
|
<a-button size="small" @click="copyValue(subLink)">
|
||||||
|
<template #icon>
|
||||||
|
<CopyOutlined />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
<a :href="subLink" target="_blank" rel="noopener noreferrer" class="link-panel-anchor">{{ subLink }}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="subJsonLink" class="link-panel">
|
||||||
|
<div class="link-panel-header">
|
||||||
|
<a-tag color="green">JSON</a-tag>
|
||||||
|
<a-tooltip :title="t('copy')">
|
||||||
|
<a-button size="small" @click="copyValue(subJsonLink)">
|
||||||
|
<template #icon>
|
||||||
|
<CopyOutlined />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
<a :href="subJsonLink" target="_blank" rel="noopener noreferrer" class="link-panel-anchor">{{ subJsonLink }}</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.info-grid {
|
.info-table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
border-collapse: collapse;
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.info-table.block {
|
||||||
display: flex;
|
margin-bottom: 10px;
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.info-table td {
|
||||||
min-width: 120px;
|
padding: 4px 8px;
|
||||||
font-size: 12px;
|
vertical-align: top;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
opacity: 0.6;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.info-table td:first-child {
|
||||||
word-break: break-all;
|
width: 140px;
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 0.75;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mono {
|
.info-large-tag {
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
max-width: 100%;
|
||||||
font-size: 12px;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
|
margin-left: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chips {
|
.chips {
|
||||||
|
|
@ -202,4 +357,62 @@ function close() {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link-panel {
|
||||||
|
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-panel-text {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
padding: 6px 8px;
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
border-radius: 4px;
|
||||||
|
user-select: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(body.dark) .link-panel-text {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-panel-anchor {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
word-break: break-all;
|
||||||
|
padding: 6px 8px;
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--ant-color-primary, #1677ff);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: rgba(22, 119, 255, 0.4);
|
||||||
|
transition: background 120ms ease, text-decoration-color 120ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-panel-anchor:hover {
|
||||||
|
background: rgba(22, 119, 255, 0.08);
|
||||||
|
text-decoration-color: var(--ant-color-primary, #1677ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(body.dark) .link-panel-anchor {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(body.dark) .link-panel-anchor:hover {
|
||||||
|
background: rgba(22, 119, 255, 0.16);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { HttpUtil } from '@/utils';
|
import { HttpUtil } from '@/utils';
|
||||||
import QrPanel from '@/pages/inbounds/QrPanel.vue';
|
import QrPanel from '@/pages/inbounds/QrPanel.vue';
|
||||||
|
|
@ -9,6 +9,10 @@ const { t } = useI18n();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
open: { type: Boolean, default: false },
|
open: { type: Boolean, default: false },
|
||||||
client: { type: Object, default: null },
|
client: { type: Object, default: null },
|
||||||
|
subSettings: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({ enable: false, subURI: '', subJsonURI: '', subJsonEnable: false }),
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:open']);
|
const emit = defineEmits(['update:open']);
|
||||||
|
|
@ -16,6 +20,29 @@ const emit = defineEmits(['update:open']);
|
||||||
const links = ref([]);
|
const links = ref([]);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const subLink = computed(() => {
|
||||||
|
if (!props.client?.subId || !props.subSettings?.enable || !props.subSettings?.subURI) return '';
|
||||||
|
return props.subSettings.subURI + props.client.subId;
|
||||||
|
});
|
||||||
|
|
||||||
|
const subJsonLink = computed(() => {
|
||||||
|
if (!props.client?.subId || !props.subSettings?.enable) return '';
|
||||||
|
if (!props.subSettings?.subJsonEnable || !props.subSettings?.subJsonURI) return '';
|
||||||
|
return props.subSettings.subJsonURI + props.client.subId;
|
||||||
|
});
|
||||||
|
|
||||||
|
const activeKeys = computed(() => {
|
||||||
|
const keys = [];
|
||||||
|
if (subLink.value) keys.push('sub');
|
||||||
|
if (subJsonLink.value) keys.push('subJson');
|
||||||
|
if (links.value.length > 0) keys.push('l0');
|
||||||
|
return keys;
|
||||||
|
});
|
||||||
|
|
||||||
|
const hasAnything = computed(
|
||||||
|
() => !!subLink.value || !!subJsonLink.value || links.value.length > 0,
|
||||||
|
);
|
||||||
|
|
||||||
watch(() => props.open, async (next) => {
|
watch(() => props.open, async (next) => {
|
||||||
if (!next || !props.client?.subId) {
|
if (!next || !props.client?.subId) {
|
||||||
links.value = [];
|
links.value = [];
|
||||||
|
|
@ -42,10 +69,16 @@ function close() {
|
||||||
<div v-if="!client?.subId && !loading" class="empty">
|
<div v-if="!client?.subId && !loading" class="empty">
|
||||||
{{ t('pages.clients.noSubId') || 'This client has no subId, no shareable link.' }}
|
{{ t('pages.clients.noSubId') || 'This client has no subId, no shareable link.' }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="links.length === 0 && !loading" class="empty">
|
<div v-else-if="!hasAnything && !loading" class="empty">
|
||||||
{{ t('pages.clients.noLinks') || 'No shareable links — attach this client to a protocol-capable inbound first.' }}
|
{{ t('pages.clients.noLinks') || 'No shareable links — attach this client to a protocol-capable inbound first.' }}
|
||||||
</div>
|
</div>
|
||||||
<a-collapse v-else :default-active-key="['l0']" accordion>
|
<a-collapse v-else :active-key="activeKeys" accordion>
|
||||||
|
<a-collapse-panel v-if="subLink" key="sub" :header="t('subscription.title') || 'Subscription info'">
|
||||||
|
<QrPanel :value="subLink" :remark="`${client?.email || ''} — ${t('subscription.title') || 'Subscription'}`" />
|
||||||
|
</a-collapse-panel>
|
||||||
|
<a-collapse-panel v-if="subJsonLink" key="subJson" :header="`${t('subscription.title') || 'Subscription info'} (JSON)`">
|
||||||
|
<QrPanel :value="subJsonLink" :remark="`${client?.email || ''} — JSON`" />
|
||||||
|
</a-collapse-panel>
|
||||||
<a-collapse-panel v-for="(link, idx) in links" :key="`l${idx}`"
|
<a-collapse-panel v-for="(link, idx) in links" :key="`l${idx}`"
|
||||||
:header="`${t('pages.clients.link') || 'Link'} ${idx + 1}`">
|
:header="`${t('pages.clients.link') || 'Link'} ${idx + 1}`">
|
||||||
<QrPanel :value="link" :remark="`${client?.email || ''} #${idx + 1}`" />
|
<QrPanel :value="link" :remark="`${client?.email || ''} #${idx + 1}`" />
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ const {
|
||||||
onlines,
|
onlines,
|
||||||
loading,
|
loading,
|
||||||
fetched,
|
fetched,
|
||||||
|
subSettings,
|
||||||
create,
|
create,
|
||||||
update,
|
update,
|
||||||
remove,
|
remove,
|
||||||
|
|
@ -322,7 +323,7 @@ const columns = computed(() => [
|
||||||
<QrcodeOutlined />
|
<QrcodeOutlined />
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
<a-tooltip :title="t('pages.clients.info') || 'Info'">
|
<a-tooltip :title="t('pages.clients.moreInformation') || 'More Information'">
|
||||||
<a-button size="small" type="text" @click="onShowInfo(record)">
|
<a-button size="small" type="text" @click="onShowInfo(record)">
|
||||||
<InfoCircleOutlined />
|
<InfoCircleOutlined />
|
||||||
</a-button>
|
</a-button>
|
||||||
|
|
@ -363,8 +364,8 @@ const columns = computed(() => [
|
||||||
<ClientFormModal v-model:open="formOpen" :mode="formMode" :client="editingClient"
|
<ClientFormModal v-model:open="formOpen" :mode="formMode" :client="editingClient"
|
||||||
:attached-ids="editingAttachedIds" :inbounds="inbounds" :save="onSave" />
|
:attached-ids="editingAttachedIds" :inbounds="inbounds" :save="onSave" />
|
||||||
<ClientInfoModal v-model:open="infoOpen" :client="infoClient" :inbounds-by-id="inboundsById"
|
<ClientInfoModal v-model:open="infoOpen" :client="infoClient" :inbounds-by-id="inboundsById"
|
||||||
:is-online="infoClient ? isOnline(infoClient.email) : false" />
|
:is-online="infoClient ? isOnline(infoClient.email) : false" :sub-settings="subSettings" />
|
||||||
<ClientQrModal v-model:open="qrOpen" :client="qrClient" />
|
<ClientQrModal v-model:open="qrOpen" :client="qrClient" :sub-settings="subSettings" />
|
||||||
</a-layout>
|
</a-layout>
|
||||||
</a-config-provider>
|
</a-config-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ export function useClients() {
|
||||||
const onlines = ref([]);
|
const onlines = ref([]);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const fetched = ref(false);
|
const fetched = ref(false);
|
||||||
|
const subSettings = ref({ enable: false, subURI: '', subJsonURI: '', subJsonEnable: false });
|
||||||
let onlinesTimer = null;
|
let onlinesTimer = null;
|
||||||
|
|
||||||
async function refresh() {
|
async function refresh() {
|
||||||
|
|
@ -31,6 +32,18 @@ export function useClients() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function fetchSubSettings() {
|
||||||
|
const msg = await HttpUtil.post('/panel/setting/defaultSettings');
|
||||||
|
if (!msg?.success) return;
|
||||||
|
const s = msg.obj || {};
|
||||||
|
subSettings.value = {
|
||||||
|
enable: !!s.subEnable,
|
||||||
|
subURI: s.subURI || '',
|
||||||
|
subJsonURI: s.subJsonURI || '',
|
||||||
|
subJsonEnable: !!s.subJsonEnable,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
async function refreshOnlines() {
|
async function refreshOnlines() {
|
||||||
const msg = await HttpUtil.post('/panel/api/inbounds/onlines');
|
const msg = await HttpUtil.post('/panel/api/inbounds/onlines');
|
||||||
if (msg?.success) {
|
if (msg?.success) {
|
||||||
|
|
@ -104,7 +117,7 @@ export function useClients() {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await refresh();
|
await Promise.all([refresh(), fetchSubSettings()]);
|
||||||
refreshOnlines();
|
refreshOnlines();
|
||||||
onlinesTimer = setInterval(refreshOnlines, ONLINES_POLL_MS);
|
onlinesTimer = setInterval(refreshOnlines, ONLINES_POLL_MS);
|
||||||
});
|
});
|
||||||
|
|
@ -119,6 +132,7 @@ export function useClients() {
|
||||||
onlines,
|
onlines,
|
||||||
loading,
|
loading,
|
||||||
fetched,
|
fetched,
|
||||||
|
subSettings,
|
||||||
refresh,
|
refresh,
|
||||||
refreshOnlines,
|
refreshOnlines,
|
||||||
create,
|
create,
|
||||||
|
|
|
||||||
|
|
@ -1253,10 +1253,9 @@ func (s *InboundService) DelInboundClient(inboundId int, clientId string) (bool,
|
||||||
return false, common.NewError("Client Not Found In Inbound For ID:", clientId)
|
return false, common.NewError("Client Not Found In Inbound For ID:", clientId)
|
||||||
}
|
}
|
||||||
|
|
||||||
if len(newClients) == 0 {
|
if newClients == nil {
|
||||||
return false, common.NewError("no client remained in Inbound")
|
newClients = []any{}
|
||||||
}
|
}
|
||||||
|
|
||||||
settings["clients"] = newClients
|
settings["clients"] = newClients
|
||||||
newSettings, err := json.MarshalIndent(settings, "", " ")
|
newSettings, err := json.MarshalIndent(settings, "", " ")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
|
@ -3943,10 +3942,9 @@ func (s *InboundService) DelInboundClientByEmail(inboundId int, email string) (b
|
||||||
if !found {
|
if !found {
|
||||||
return false, common.NewError(fmt.Sprintf("client with email %s not found", email))
|
return false, common.NewError(fmt.Sprintf("client with email %s not found", email))
|
||||||
}
|
}
|
||||||
if len(newClients) == 0 {
|
if newClients == nil {
|
||||||
return false, common.NewError("no client remained in Inbound")
|
newClients = []any{}
|
||||||
}
|
}
|
||||||
|
|
||||||
settings["clients"] = newClients
|
settings["clients"] = newClients
|
||||||
newSettings, err := json.MarshalIndent(settings, "", " ")
|
newSettings, err := json.MarshalIndent(settings, "", " ")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
|
|
||||||
|
|
@ -418,7 +418,7 @@
|
||||||
"offline": "Offline",
|
"offline": "Offline",
|
||||||
"addTitle": "Add Client",
|
"addTitle": "Add Client",
|
||||||
"qrCode": "QR Code",
|
"qrCode": "QR Code",
|
||||||
"info": "Info",
|
"moreInformation": "More Information",
|
||||||
"delete": "Delete",
|
"delete": "Delete",
|
||||||
"reset": "Reset Traffic",
|
"reset": "Reset Traffic",
|
||||||
"editTitle": "Edit Client",
|
"editTitle": "Edit Client",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue