3x-ui/frontend/src/pages/sub/SubPage.vue

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import {
  SettingOutlined,
  AndroidOutlined,
  AppleOutlined,
  DownOutlined,
  CopyOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import QRious from 'qrious';

import { ClipboardManager, IntlUtil, LanguageManager } from '@/utils';
import {
  theme as themeState,
  antdThemeConfig,
} from '@/composables/useTheme.js';
import ThemeSwitchLogin from '@/components/ThemeSwitchLogin.vue';

const { t } = useI18n();

// Read the view-model Go injects via window.__SUB_PAGE_DATA__. Falls
// back to safe defaults so the page still renders if the global is
// missing (e.g. during local dev without the backend).
const subData = window.__SUB_PAGE_DATA__ || {};

const sId = subData.sId || '';
const enabled = !!subData.enabled;
const download = subData.download || '0';
const upload = subData.upload || '0';
const total = subData.total || '∞';
const used = subData.used || '0';
const remained = subData.remained || '';
const totalByte = Number(subData.totalByte || 0);
const expireMs = Number(subData.expire || 0) * 1000;
const lastOnlineMs = Number(subData.lastOnline || 0);
const subUrl = subData.subUrl || '';
const subJsonUrl = subData.subJsonUrl || '';
const subClashUrl = subData.subClashUrl || '';
const links = Array.isArray(subData.links) ? subData.links : [];
// Panel's "Calendar Type" setting; controls whether expiry / lastOnline
// render in Gregorian or Jalali on this standalone subscription page.
const datepicker = subData.datepicker || 'gregorian';

// Derived state ===============================================
const isUnlimited = computed(() => totalByte <= 0 && expireMs === 0);
const isActive = computed(() => {
  if (!enabled) return false;
  if (totalByte > 0) {
    const used = Number(subData.usedByte || 0)
      || (Number(subData.downloadByte || 0) + Number(subData.uploadByte || 0));
    if (used >= totalByte) return false;
  }
  if (expireMs > 0 && Date.now() >= expireMs) return false;
  return true;
});

// Mobile-aware layout — shows app dropdowns full-width below 576px
const isMobile = ref(false);
function updateMobile() { isMobile.value = window.innerWidth < 576; }
onMounted(() => {
  updateMobile();
  window.addEventListener('resize', updateMobile);
});

// Language switcher mirrors the legacy panel: setting the language
// triggers a full-page reload which re-renders with the new locale.
const lang = ref(LanguageManager.getLanguage());
function onLangChange(next) {
  LanguageManager.setLanguage(next);
}

// QR code rendering ===========================================
// Each ref points at a canvas element we paint after mount; QRious
// sizes itself from the element's `size` attribute.
const subQr = ref(null);
const subJsonQr = ref(null);
const subClashQr = ref(null);

function paintQr(canvas, value) {
  if (!canvas || !value) return;
  new QRious({
    element: canvas,
    size: 220,
    value,
    background: 'white',
    backgroundAlpha: 1,
    foreground: 'black',
    padding: 4,
    level: 'M',
  });
}

onMounted(() => {
  paintQr(subQr.value, subUrl);
  paintQr(subJsonQr.value, subJsonUrl);
  paintQr(subClashQr.value, subClashUrl);
});

// Actions =====================================================
async function copy(value) {
  if (!value) return;
  const ok = await ClipboardManager.copyText(value);
  if (ok) message.success(t('copied'));
}

function open(url) {
  if (!url) return;
  window.open(url, '_blank');
}

// Pretty label per share link — pulls protocol + remark out of the
// URL fragment (most clients put the remark after the # sign).
function linkName(link, idx) {
  if (!link) return `Link ${idx + 1}`;
  const hashIdx = link.indexOf('#');
  if (hashIdx >= 0 && hashIdx + 1 < link.length) {
    try {
      return decodeURIComponent(link.slice(hashIdx + 1));
    } catch (_e) {
      return link.slice(hashIdx + 1);
    }
  }
  const proto = link.split('://')[0];
  return `${proto.toUpperCase()} ${idx + 1}`;
}

// iOS deep links — taken verbatim from the legacy subpage. Each
// client expects the sub URL in a slightly different param name.
const shadowrocketUrl = computed(() => `sub://${btoa(subUrl)}`);
const v2boxUrl = computed(() => `v2box://install-sub?url=${encodeURIComponent(subUrl)}&name=${encodeURIComponent(sId)}`);
const streisandUrl = computed(() => `streisand://import/${encodeURIComponent(subUrl)}`);
const v2raytunUrl = computed(() => subUrl);
const npvtunUrl = computed(() => subUrl);
const happUrl = computed(() => `happ://add/${subUrl}`);

// Theme classes for the page wrapper.
const themeClass = computed(() => ({
  'is-dark': themeState.isDark,
  'is-ultra': themeState.isUltra,
}));

</script>

<template>
  <a-config-provider :theme="antdThemeConfig">
    <a-layout class="subscription-page" :class="themeClass">
      <a-layout-content class="content">
        <a-row type="flex" justify="center">
          <a-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
            <a-card hoverable class="subscription-card">
              <template #title>
                <a-space>
                  <span>{{ t('subscription.title') }}</span>
                  <a-tag>{{ sId }}</a-tag>
                </a-space>
              </template>
              <template #extra>
                <a-popover :title="t('menu.settings')" placement="bottomRight" trigger="click">
                  <template #content>
                    <a-space direction="vertical" :size="10" class="settings-popover">
                      <ThemeSwitchLogin />
                      <span>{{ t('pages.settings.language') }}</span>
                      <a-select v-model:value="lang" class="lang-select" @change="onLangChange">
                        <a-select-option v-for="l in LanguageManager.supportedLanguages" :key="l.value"
                          :value="l.value">
                          <span :aria-label="l.name">{{ l.icon }}</span>
                          &nbsp;&nbsp;<span>{{ l.name }}</span>
                        </a-select-option>
                      </a-select>
                    </a-space>
                  </template>
                  <a-button shape="circle">
                    <template #icon>
                      <SettingOutlined />
                    </template>
                  </a-button>
                </a-popover>
              </template>

              <!-- ============== QR codes ============== -->
              <a-row :gutter="[8, 8]" justify="center" class="qr-row">
                <a-col :xs="24" :sm="subJsonUrl || subClashUrl ? 12 : 24" class="qr-col">
                  <div class="qr-box">
                    <a-tag color="purple" class="qr-tag">{{ t('pages.settings.subSettings') }}</a-tag>
                    <canvas ref="subQr" class="qr-canvas" :title="t('copy')" @click="copy(subUrl)" />
                  </div>
                </a-col>
                <a-col v-if="subJsonUrl" :xs="24" :sm="12" class="qr-col">
                  <div class="qr-box">
                    <a-tag color="purple" class="qr-tag">
                      {{ t('pages.settings.subSettings') }} JSON
                    </a-tag>
                    <canvas ref="subJsonQr" class="qr-canvas" :title="t('copy')" @click="copy(subJsonUrl)" />
                  </div>
                </a-col>
                <a-col v-if="subClashUrl" :xs="24" :sm="12" class="qr-col">
                  <div class="qr-box">
                    <a-tag color="purple" class="qr-tag">Clash / Mihomo</a-tag>
                    <canvas ref="subClashQr" class="qr-canvas" :title="t('copy')" @click="copy(subClashUrl)" />
                  </div>
                </a-col>
              </a-row>

              <!-- ============== Subscription details ============== -->
              <a-descriptions bordered :column="1" size="small" class="info-table">
                <a-descriptions-item :label="t('subscription.subId')">{{ sId }}</a-descriptions-item>
                <a-descriptions-item :label="t('subscription.status')">
                  <a-tag v-if="!enabled" color="red">{{ t('subscription.inactive') }}</a-tag>
                  <a-tag v-else-if="isUnlimited" color="purple">{{ t('subscription.unlimited') }}</a-tag>
                  <a-tag v-else :color="isActive ? 'green' : 'red'">
                    {{ isActive ? t('subscription.active') : t('subscription.inactive') }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item :label="t('subscription.downloaded')">{{ download }}</a-descriptions-item>
                <a-descriptions-item :label="t('subscription.uploaded')">{{ upload }}</a-descriptions-item>
                <a-descriptions-item :label="t('usage')">{{ used }}</a-descriptions-item>
                <a-descriptions-item :label="t('subscription.totalQuota')">{{ total }}</a-descriptions-item>
                <a-descriptions-item v-if="totalByte > 0" :label="t('remained')">
                  {{ remained }}
                </a-descriptions-item>
                <a-descriptions-item :label="t('lastOnline')">
                  <template v-if="lastOnlineMs > 0">{{ IntlUtil.formatDate(lastOnlineMs, datepicker) }}</template>
                  <template v-else>-</template>
                </a-descriptions-item>
                <a-descriptions-item :label="t('subscription.expiry')">
                  <template v-if="expireMs === 0">{{ t('subscription.noExpiry') }}</template>
                  <template v-else>{{ IntlUtil.formatDate(expireMs, datepicker) }}</template>
                </a-descriptions-item>
              </a-descriptions>

              <!-- ============== Individual links ============== -->
              <div v-if="links.length" class="links-section">
                <div v-for="(link, idx) in links" :key="link" class="link-row" @click="copy(link)">
                  <a-tag color="purple" class="link-tag">{{ linkName(link, idx) }}</a-tag>
                  <div class="link-box">
                    <CopyOutlined class="link-copy-icon" />
                    {{ link }}
                  </div>
                </div>
              </div>

              <!-- ============== App dropdowns ============== -->
              <a-row :gutter="[8, 8]" justify="center" class="apps-row">
                <a-col :xs="24" :sm="12" class="app-col">
                  <a-dropdown :trigger="['click']">
                    <a-button :block="isMobile" size="large" type="primary">
                      <AndroidOutlined /> Android
                      <DownOutlined />
                    </a-button>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="android-v2box"
                          @click="open(`v2box://install-sub?url=${encodeURIComponent(subUrl)}&name=${encodeURIComponent(sId)}`)">V2Box</a-menu-item>
                        <a-menu-item key="android-v2rayng"
                          @click="open(`v2rayng://install-config?url=${encodeURIComponent(subUrl)}`)">V2RayNG</a-menu-item>
                        <a-menu-item key="android-singbox" @click="copy(subUrl)">Sing-box</a-menu-item>
                        <a-menu-item key="android-v2raytun" @click="copy(subUrl)">V2RayTun</a-menu-item>
                        <a-menu-item key="android-npvtunnel" @click="copy(subUrl)">NPV Tunnel</a-menu-item>
                        <a-menu-item key="android-happ" @click="open(`happ://add/${subUrl}`)">Happ</a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </a-col>
                <a-col :xs="24" :sm="12" class="app-col">
                  <a-dropdown :trigger="['click']">
                    <a-button :block="isMobile" size="large" type="primary">
                      <AppleOutlined /> iOS
                      <DownOutlined />
                    </a-button>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="ios-shadowrocket" @click="open(shadowrocketUrl)">Shadowrocket</a-menu-item>
                        <a-menu-item key="ios-v2box" @click="open(v2boxUrl)">V2Box</a-menu-item>
                        <a-menu-item key="ios-streisand" @click="open(streisandUrl)">Streisand</a-menu-item>
                        <a-menu-item key="ios-v2raytun" @click="copy(v2raytunUrl)">V2RayTun</a-menu-item>
                        <a-menu-item key="ios-npvtunnel" @click="copy(npvtunUrl)">NPV Tunnel</a-menu-item>
                        <a-menu-item key="ios-happ" @click="open(happUrl)">Happ</a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
  </a-config-provider>
</template>

<style scoped>
.subscription-page {
  --bg-page: #e6e8ec;
  --bg-card: #ffffff;
  min-height: 100vh;
  background: var(--bg-page);
}

.subscription-page.is-dark {
  --bg-page: #0a1222;
  --bg-card: #151f31;
}

.subscription-page.is-dark.is-ultra {
  --bg-page: #050505;
  --bg-card: #0c0e12;
}

.subscription-page :deep(.ant-layout),
.subscription-page :deep(.ant-layout-content) {
  background: transparent;
}

.content {
  padding: 24px 12px;
}

.subscription-card {
  margin-top: 8px;
}

/* QR section */
.qr-row {
  margin-bottom: 12px;
}

.qr-col {
  display: flex;
  justify-content: center;
}

.qr-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 220px;
}

.qr-tag {
  width: 100%;
  text-align: center;
  margin: 0;
}

.qr-canvas {
  cursor: pointer;
  background: #fff;
  border-radius: 4px;
}

/* Description list spacing + visible borders. AD-Vue's default
 * descriptions border is rgba(5,5,5,0.06) which disappears against
 * the white card in light theme. AD-Vue puts the horizontal divider
 * on <tr> with border-collapse:collapse — browsers treat <tr>
 * borders inconsistently in collapse mode, so paint the divider on
 * each cell's bottom edge instead. */
.info-table {
  margin-top: 12px;
}

.info-table :deep(.ant-descriptions-view),
.info-table :deep(.ant-descriptions-view) table,
.info-table :deep(.ant-descriptions-view) th,
.info-table :deep(.ant-descriptions-view) td {
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.info-table :deep(tbody > tr > th),
.info-table :deep(tbody > tr > td) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
}

.info-table :deep(tbody > tr:last-child > th),
.info-table :deep(tbody > tr:last-child > td) {
  border-bottom: none !important;
}

.is-dark .info-table :deep(.ant-descriptions-view),
.is-dark .info-table :deep(.ant-descriptions-view) table,
.is-dark .info-table :deep(.ant-descriptions-view) th,
.is-dark .info-table :deep(.ant-descriptions-view) td {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.is-dark .info-table :deep(tbody > tr > th),
.is-dark .info-table :deep(tbody > tr > td) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.is-dark .info-table :deep(tbody > tr:last-child > th),
.is-dark .info-table :deep(tbody > tr:last-child > td) {
  border-bottom: none !important;
}

/* Share links */
.links-section {
  margin-top: 16px;
}

.link-row {
  position: relative;
  margin-bottom: 16px;
  text-align: center;
}

.link-tag {
  margin-bottom: -10px;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.link-box {
  cursor: pointer;
  border-radius: 12px;
  padding: 22px 18px 14px;
  margin-top: -10px;
  word-break: break-all;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  transition: background 120ms ease, border-color 120ms ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.link-box:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.14);
}

.link-copy-icon {
  margin-right: 6px;
  opacity: 0.6;
}

.is-dark .link-box {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.is-dark .link-box:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

/* App dropdown row */
.apps-row {
  margin-top: 24px;
}

.app-col {
  text-align: center;
}

.settings-popover {
  min-width: 220px;
}

.lang-select {
  width: 100%;
}
</style>