feat(links): richer share-link labels across QR, client info and sub views

Show colored protocol/transport/security tags followed by the inbound remark and port for each share link in the client QR modal, client info modal and subscription page. The client email and the traffic/expiry decorations are stripped from the remark so only the inbound remark and port remain.

Consolidate the duplicated per-page parseLinkMeta/trimEmail/PROTOCOL_COLORS into a shared lib/xray/link-label.tsx (parseLinkParts, LinkTags, linkMetaText) so the colours and the email/stats stripping stay identical across all three surfaces.
This commit is contained in:
MHSanaei
2026-06-03 02:18:40 +02:00
parent ccfd04219b
commit d0998c1d6d
4 changed files with 160 additions and 162 deletions
+11 -2
View File
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { Collapse, Modal, Spin } from 'antd';
import { HttpUtil } from '@/utils';
import { isPostQuantumLink } from '@/lib/xray/inbound-link';
import { LinkTags, linkMetaText, parseLinkParts } from '@/lib/xray/link-label';
import { QrPanel } from '@/pages/inbounds/qr';
import type { ClientRecord } from '@/hooks/useClients';
@@ -75,7 +76,7 @@ export default function ClientQrModal({
const [activeKey, setActiveKey] = useState<string[]>([]);
const items = useMemo(() => {
const out: { key: string; label: string; children: React.ReactNode }[] = [];
const out: { key: string; label: React.ReactNode; children: React.ReactNode }[] = [];
if (subLink) {
out.push({
key: 'sub',
@@ -91,9 +92,17 @@ export default function ClientQrModal({
});
}
links.forEach((link, idx) => {
const parts = parseLinkParts(link, client?.email ?? '');
const meta = parts ? linkMetaText(parts) : '';
const label: React.ReactNode = parts ? (
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
<LinkTags parts={parts} />
{meta && <span style={{ opacity: 0.6, fontSize: 12 }}>({meta})</span>}
</span>
) : `${t('pages.clients.link')} ${idx + 1}`;
out.push({
key: `l${idx}`,
label: `${t('pages.clients.link')} ${idx + 1}`,
label,
children: (
<QrPanel
value={link}