xinyin025/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-09-17 23:57:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(inbounds): mobile card layout for inbounds and clients

Browse Source 
Replace the cramped <a-table> on <768px with a stacked card list for
both inbounds and the per-client expanded rows. Each card surfaces
protocol, port, node, traffic, all-time traffic, client count and
expiry inline as labeled rows instead of hiding them behind popovers,
fixes the 0px gutter that made cards visually merge, and softens the
in-quota green from #52c41a to #389e0a (Ant green-7) so traffic tags
are no longer blinding on dark themes.
This commit is contained in:
MHSanaei
2026-05-10 01:46:48 +02:00
parent b776b33497
commit 5ac88271af
4 changed files with 532 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/inbounds/InboundsPage.vue
+6 -6
View File
@@ -549,12 +549,12 @@ function onRowAction({ key, dbInbound }) {
<a-spin :spinning="!fetched" :delay="200" tip="Loading…" size="large">
<div v-if="!fetched" class="loading-spacer" />
<a-row v-else :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]">
<a-row v-else :gutter="[isMobile ? 8 : 16, 12]">
<!-- Summary statistics card -->
<a-col :span="24">
<a-card size="small" hoverable class="summary-card">
<a-row :gutter="[16, 12]">
<a-col :sm="12" :md="5">
<a-col :xs="12" :sm="12" :md="5">
<CustomStatistic :title="t('pages.inbounds.totalDownUp')"
:value="`${SizeFormatter.sizeFormat(totals.up)} / ${SizeFormatter.sizeFormat(totals.down)}`">
<template #prefix>
@@ -562,7 +562,7 @@ function onRowAction({ key, dbInbound }) {
</template>
</CustomStatistic>
</a-col>
<a-col :sm="12" :md="5">
<a-col :xs="12" :sm="12" :md="5">
<CustomStatistic :title="t('pages.inbounds.totalUsage')"
:value="SizeFormatter.sizeFormat(totals.up + totals.down)">
<template #prefix>
@@ -570,7 +570,7 @@ function onRowAction({ key, dbInbound }) {
</template>
</CustomStatistic>
</a-col>
<a-col :sm="12" :md="5">
<a-col :xs="12" :sm="12" :md="5">
<CustomStatistic :title="t('pages.inbounds.allTimeTrafficUsage')"
:value="SizeFormatter.sizeFormat(totals.allTime)">
<template #prefix>
@@ -578,14 +578,14 @@ function onRowAction({ key, dbInbound }) {
</template>
</CustomStatistic>
</a-col>
<a-col :sm="12" :md="5">
<a-col :xs="12" :sm="12" :md="5">
<CustomStatistic :title="t('pages.inbounds.inboundCount')" :value="String(dbInbounds.length)">
<template #prefix>
<BarsOutlined />
</template>
</CustomStatistic>
</a-col>
<a-col :sm="24" :md="4">
<a-col :xs="24" :sm="24" :md="4">
<CustomStatistic :title="t('clients')" value=" ">
<template #prefix>
<a-space direction="horizontal">