mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 05:04:22 +00:00
refactor(frontend): port subpage to react+ts
Step 1 of the planned vue->react migration. The standalone subscription page (sub/sub.go renders the HTML host; React mounts into #app) is the first entry off vue. Introduces two shared pieces both entries (and future ones) will use: * src/hooks/useTheme.tsx — React Context + useTheme hook + the same buildAntdThemeConfig (dark/ultra-dark token overrides) and pauseAnimationsUntilLeave helper the vue version exposes. Same localStorage keys (dark-mode, isUltraDarkThemeEnabled) and DOM side effects (body.className, html[data-theme]) so the two stay in sync across the coexistence period. * src/i18n/react.ts — i18next + react-i18next loader that reads the same web/translation/*.json files via import.meta.glob. The vue-i18n setup in src/i18n/index.js is untouched and still serves the remaining vue entries. SubPage.tsx mirrors the vue version's behavior: reads window.__SUB_PAGE_DATA__ injected by the Go sub server, renders QR codes / descriptions / Android+iOS deep-link dropdowns, supports theme cycle and language switch. Uses AntD v5 idioms: Descriptions items prop, Dropdown menu prop, Layout.Content.
This commit is contained in:
MHSanaei
parent
8c20bde1da
commit
88e71940fa
8 changed files with 785 additions and 552 deletions
|
|
@ -1,20 +0,0 @@
|
||||||
import { createApp } from 'vue';
|
|
||||||
import Antd, { message } from 'ant-design-vue';
|
|
||||||
import 'ant-design-vue/dist/reset.css';
|
|
||||||
|
|
||||||
// The sub page is served by the subscription HTTP server (sub/sub.go)
|
|
||||||
// at /<linksPath>/<subId>?html=1. Go injects window.__SUB_PAGE_DATA__
|
|
||||||
// with the parsed traffic/quota/expiry view-model and the rendered
|
|
||||||
// share links — the SPA reads those at mount.
|
|
||||||
import '@/composables/useTheme.js';
|
|
||||||
import { i18n, readyI18n } from '@/i18n/index.js';
|
|
||||||
import SubPage from '@/pages/sub/SubPage.vue';
|
|
||||||
|
|
||||||
const messageContainer = document.getElementById('message');
|
|
||||||
if (messageContainer) {
|
|
||||||
message.config({ getContainer: () => messageContainer });
|
|
||||||
}
|
|
||||||
|
|
||||||
readyI18n().then(() => {
|
|
||||||
createApp(SubPage).use(Antd).use(i18n).mount('#app');
|
|
||||||
});
|
|
||||||
23
frontend/src/entries/subpage.tsx
Normal file
23
frontend/src/entries/subpage.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import { message } from 'antd';
|
||||||
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
import { ThemeProvider } from '@/hooks/useTheme';
|
||||||
|
import SubPage from '@/pages/sub/SubPage';
|
||||||
|
|
||||||
|
const messageContainer = document.getElementById('message');
|
||||||
|
if (messageContainer) {
|
||||||
|
message.config({ getContainer: () => messageContainer });
|
||||||
|
}
|
||||||
|
|
||||||
|
readyI18n().then(() => {
|
||||||
|
const root = document.getElementById('app');
|
||||||
|
if (root) {
|
||||||
|
createRoot(root).render(
|
||||||
|
<ThemeProvider>
|
||||||
|
<SubPage />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
129
frontend/src/hooks/useTheme.tsx
Normal file
129
frontend/src/hooks/useTheme.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import { theme as antdTheme } from 'antd';
|
||||||
|
import type { ThemeConfig } from 'antd';
|
||||||
|
|
||||||
|
const STORAGE_DARK = 'dark-mode';
|
||||||
|
const STORAGE_ULTRA = 'isUltraDarkThemeEnabled';
|
||||||
|
|
||||||
|
function readBool(key: string, fallback: boolean): boolean {
|
||||||
|
const raw = localStorage.getItem(key);
|
||||||
|
if (raw === null) return fallback;
|
||||||
|
return raw === 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyDom(isDark: boolean, isUltra: boolean) {
|
||||||
|
document.body.setAttribute('class', isDark ? 'dark' : 'light');
|
||||||
|
if (isUltra) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'ultra-dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute('data-theme');
|
||||||
|
}
|
||||||
|
const msg = document.getElementById('message');
|
||||||
|
if (msg) msg.className = isDark ? 'dark' : 'light';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mirror the Vue useTheme module: apply current localStorage state at
|
||||||
|
// module load so the document is in the right theme before React mounts.
|
||||||
|
const initialDark = readBool(STORAGE_DARK, true);
|
||||||
|
const initialUltra = readBool(STORAGE_ULTRA, false);
|
||||||
|
applyDom(initialDark, initialUltra);
|
||||||
|
|
||||||
|
const DARK_TOKENS = {
|
||||||
|
colorBgBase: '#1e1e1e',
|
||||||
|
colorBgLayout: '#1e1e1e',
|
||||||
|
colorBgContainer: '#252526',
|
||||||
|
colorBgElevated: '#2d2d30',
|
||||||
|
};
|
||||||
|
const ULTRA_DARK_TOKENS = {
|
||||||
|
colorBgBase: '#000',
|
||||||
|
colorBgLayout: '#000',
|
||||||
|
colorBgContainer: '#0a0a0a',
|
||||||
|
colorBgElevated: '#141414',
|
||||||
|
};
|
||||||
|
const DARK_LAYOUT_TOKENS = {
|
||||||
|
colorBgHeader: '#252526',
|
||||||
|
colorBgTrigger: '#333333',
|
||||||
|
colorBgBody: '#1e1e1e',
|
||||||
|
};
|
||||||
|
const ULTRA_DARK_LAYOUT_TOKENS = {
|
||||||
|
colorBgHeader: '#0a0a0a',
|
||||||
|
colorBgTrigger: '#141414',
|
||||||
|
colorBgBody: '#000',
|
||||||
|
};
|
||||||
|
const DARK_MENU_TOKENS = {
|
||||||
|
colorItemBg: '#252526',
|
||||||
|
colorSubItemBg: '#1e1e1e',
|
||||||
|
menuSubMenuBg: '#252526',
|
||||||
|
};
|
||||||
|
const ULTRA_DARK_MENU_TOKENS = {
|
||||||
|
colorItemBg: '#0a0a0a',
|
||||||
|
colorSubItemBg: '#000',
|
||||||
|
menuSubMenuBg: '#0a0a0a',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function buildAntdThemeConfig(isDark: boolean, isUltra: boolean): ThemeConfig {
|
||||||
|
if (!isDark) {
|
||||||
|
return { algorithm: antdTheme.defaultAlgorithm };
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
algorithm: antdTheme.darkAlgorithm,
|
||||||
|
token: isUltra ? ULTRA_DARK_TOKENS : DARK_TOKENS,
|
||||||
|
components: {
|
||||||
|
Layout: isUltra ? ULTRA_DARK_LAYOUT_TOKENS : DARK_LAYOUT_TOKENS,
|
||||||
|
Menu: isUltra ? ULTRA_DARK_MENU_TOKENS : DARK_MENU_TOKENS,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function pauseAnimationsUntilLeave(elementId: string): void {
|
||||||
|
document.documentElement.setAttribute('data-theme-animations', 'off');
|
||||||
|
const el = document.getElementById(elementId);
|
||||||
|
if (!el) return;
|
||||||
|
const restore = () => {
|
||||||
|
document.documentElement.removeAttribute('data-theme-animations');
|
||||||
|
el.removeEventListener('mouseleave', restore);
|
||||||
|
el.removeEventListener('touchend', restore);
|
||||||
|
};
|
||||||
|
el.addEventListener('mouseleave', restore);
|
||||||
|
el.addEventListener('touchend', restore);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ThemeContextValue {
|
||||||
|
isDark: boolean;
|
||||||
|
isUltra: boolean;
|
||||||
|
toggleTheme: () => void;
|
||||||
|
toggleUltra: () => void;
|
||||||
|
antdThemeConfig: ThemeConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ThemeContext = createContext<ThemeContextValue | null>(null);
|
||||||
|
|
||||||
|
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||||
|
const [isDark, setIsDark] = useState<boolean>(initialDark);
|
||||||
|
const [isUltra, setIsUltra] = useState<boolean>(initialUltra);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
applyDom(isDark, isUltra);
|
||||||
|
localStorage.setItem(STORAGE_DARK, String(isDark));
|
||||||
|
localStorage.setItem(STORAGE_ULTRA, String(isUltra));
|
||||||
|
}, [isDark, isUltra]);
|
||||||
|
|
||||||
|
const toggleTheme = useCallback(() => setIsDark((v) => !v), []);
|
||||||
|
const toggleUltra = useCallback(() => setIsUltra((v) => !v), []);
|
||||||
|
|
||||||
|
const antdThemeConfig = useMemo(() => buildAntdThemeConfig(isDark, isUltra), [isDark, isUltra]);
|
||||||
|
|
||||||
|
const value = useMemo<ThemeContextValue>(
|
||||||
|
() => ({ isDark, isUltra, toggleTheme, toggleUltra, antdThemeConfig }),
|
||||||
|
[isDark, isUltra, toggleTheme, toggleUltra, antdThemeConfig],
|
||||||
|
);
|
||||||
|
|
||||||
|
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTheme(): ThemeContextValue {
|
||||||
|
const ctx = useContext(ThemeContext);
|
||||||
|
if (!ctx) throw new Error('useTheme must be used inside <ThemeProvider>');
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
43
frontend/src/i18n/react.ts
Normal file
43
frontend/src/i18n/react.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
import i18next from 'i18next';
|
||||||
|
import { initReactI18next } from 'react-i18next';
|
||||||
|
|
||||||
|
import { LanguageManager } from '@/utils';
|
||||||
|
import enUS from '../../../web/translation/en-US.json';
|
||||||
|
|
||||||
|
const FALLBACK = 'en-US';
|
||||||
|
|
||||||
|
const lazyModules = import.meta.glob([
|
||||||
|
'../../../web/translation/*.json',
|
||||||
|
'!../../../web/translation/en-US.json',
|
||||||
|
]);
|
||||||
|
|
||||||
|
function moduleKeyFor(code: string): string {
|
||||||
|
return `../../../web/translation/${code}.json`;
|
||||||
|
}
|
||||||
|
|
||||||
|
let active: string = LanguageManager.getLanguage();
|
||||||
|
if (active !== FALLBACK && !Object.prototype.hasOwnProperty.call(lazyModules, moduleKeyFor(active))) {
|
||||||
|
active = FALLBACK;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function readyI18n() {
|
||||||
|
await i18next.use(initReactI18next).init({
|
||||||
|
lng: active,
|
||||||
|
fallbackLng: FALLBACK,
|
||||||
|
resources: { [FALLBACK]: { translation: enUS } },
|
||||||
|
interpolation: { escapeValue: false },
|
||||||
|
returnNull: false,
|
||||||
|
});
|
||||||
|
if (active !== FALLBACK) {
|
||||||
|
const loader = lazyModules[moduleKeyFor(active)] as (() => Promise<{ default: Record<string, unknown> }>) | undefined;
|
||||||
|
if (loader) {
|
||||||
|
const mod = await loader();
|
||||||
|
const messages = (mod.default ?? mod) as Record<string, unknown>;
|
||||||
|
i18next.addResourceBundle(active, 'translation', messages, true, true);
|
||||||
|
await i18next.changeLanguage(active);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return i18next;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { i18next as i18n };
|
||||||
206
frontend/src/pages/sub/SubPage.css
Normal file
206
frontend/src/pages/sub/SubPage.css
Normal file
|
|
@ -0,0 +1,206 @@
|
||||||
|
.subscription-page {
|
||||||
|
--bg-page: #e6e8ec;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--bg-page);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-page.is-dark {
|
||||||
|
--bg-page: #1e1e1e;
|
||||||
|
--bg-card: #252526;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-page.is-dark.is-ultra {
|
||||||
|
--bg-page: #050505;
|
||||||
|
--bg-card: #0c0e12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-page .ant-layout,
|
||||||
|
.subscription-page .ant-layout-content {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-page .content {
|
||||||
|
padding: 24px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-card {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-tag {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 !important;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table .ant-descriptions-view,
|
||||||
|
.info-table .ant-descriptions-view table,
|
||||||
|
.info-table .ant-descriptions-view th,
|
||||||
|
.info-table .ant-descriptions-view td {
|
||||||
|
border-color: rgba(0, 0, 0, 0.18) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table tbody > tr > th,
|
||||||
|
.info-table tbody > tr > td {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table tbody > tr:last-child > th,
|
||||||
|
.info-table tbody > tr:last-child > td {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-dark .info-table .ant-descriptions-view,
|
||||||
|
.is-dark .info-table .ant-descriptions-view table,
|
||||||
|
.is-dark .info-table .ant-descriptions-view th,
|
||||||
|
.is-dark .info-table .ant-descriptions-view td {
|
||||||
|
border-color: rgba(255, 255, 255, 0.18) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-dark .info-table tbody > tr > th,
|
||||||
|
.is-dark .info-table tbody > tr > td {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-dark .info-table tbody > tr:last-child > th,
|
||||||
|
.is-dark .info-table tbody > tr:last-child > td {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.apps-row {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-col {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-popover {
|
||||||
|
min-width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cycle {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
background: var(--bg-card);
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
transition: background-color 0.2s, transform 0.15s, color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cycle:hover,
|
||||||
|
.theme-cycle:focus-visible {
|
||||||
|
background-color: rgba(64, 150, 255, 0.1);
|
||||||
|
color: #4096ff;
|
||||||
|
transform: scale(1.05);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cycle svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-dark .theme-cycle {
|
||||||
|
border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-dark .theme-cycle:hover,
|
||||||
|
.is-dark .theme-cycle:focus-visible {
|
||||||
|
background-color: rgba(64, 150, 255, 0.1);
|
||||||
|
color: #4096ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
383
frontend/src/pages/sub/SubPage.tsx
Normal file
383
frontend/src/pages/sub/SubPage.tsx
Normal file
|
|
@ -0,0 +1,383 @@
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Col,
|
||||||
|
ConfigProvider,
|
||||||
|
Descriptions,
|
||||||
|
Dropdown,
|
||||||
|
Layout,
|
||||||
|
message,
|
||||||
|
Popover,
|
||||||
|
QRCode,
|
||||||
|
Row,
|
||||||
|
Select,
|
||||||
|
Space,
|
||||||
|
Tag,
|
||||||
|
} from 'antd';
|
||||||
|
import {
|
||||||
|
AndroidOutlined,
|
||||||
|
AppleOutlined,
|
||||||
|
CopyOutlined,
|
||||||
|
DownOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
|
||||||
|
import { ClipboardManager, IntlUtil, LanguageManager } from '@/utils';
|
||||||
|
import { pauseAnimationsUntilLeave, useTheme } from '@/hooks/useTheme';
|
||||||
|
import './SubPage.css';
|
||||||
|
|
||||||
|
const QR_SIZE = 240;
|
||||||
|
|
||||||
|
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 subTitle = subData.subTitle || '';
|
||||||
|
const links: string[] = Array.isArray(subData.links) ? subData.links : [];
|
||||||
|
const datepicker = subData.datepicker || 'gregorian';
|
||||||
|
|
||||||
|
const isUnlimited = totalByte <= 0 && expireMs === 0;
|
||||||
|
const isActive = (() => {
|
||||||
|
if (!enabled) return false;
|
||||||
|
if (totalByte > 0) {
|
||||||
|
const usedByteCalc = Number(subData.usedByte || 0)
|
||||||
|
|| (Number(subData.downloadByte || 0) + Number(subData.uploadByte || 0));
|
||||||
|
if (usedByteCalc >= totalByte) return false;
|
||||||
|
}
|
||||||
|
if (expireMs > 0 && Date.now() >= expireMs) return false;
|
||||||
|
return true;
|
||||||
|
})();
|
||||||
|
|
||||||
|
function linkName(link: string, idx: number): string {
|
||||||
|
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 {
|
||||||
|
return link.slice(hashIdx + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const proto = link.split('://')[0];
|
||||||
|
return `${proto.toUpperCase()} ${idx + 1}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SubPage() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { isDark, isUltra, toggleTheme, toggleUltra, antdThemeConfig } = useTheme();
|
||||||
|
|
||||||
|
const [isMobile, setIsMobile] = useState<boolean>(() => window.innerWidth < 576);
|
||||||
|
const [lang, setLang] = useState<string>(() => LanguageManager.getLanguage());
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onResize = () => setIsMobile(window.innerWidth < 576);
|
||||||
|
window.addEventListener('resize', onResize);
|
||||||
|
return () => window.removeEventListener('resize', onResize);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onLangChange = useCallback((next: string) => {
|
||||||
|
setLang(next);
|
||||||
|
LanguageManager.setLanguage(next);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const cycleTheme = useCallback(() => {
|
||||||
|
pauseAnimationsUntilLeave('sub-theme-cycle');
|
||||||
|
if (!isDark) {
|
||||||
|
toggleTheme();
|
||||||
|
if (isUltra) toggleUltra();
|
||||||
|
} else if (!isUltra) {
|
||||||
|
toggleUltra();
|
||||||
|
} else {
|
||||||
|
toggleUltra();
|
||||||
|
toggleTheme();
|
||||||
|
}
|
||||||
|
}, [isDark, isUltra, toggleTheme, toggleUltra]);
|
||||||
|
|
||||||
|
const copy = useCallback(async (value: string) => {
|
||||||
|
if (!value) return;
|
||||||
|
const ok = await ClipboardManager.copyText(value);
|
||||||
|
if (ok) message.success(t('copied'));
|
||||||
|
}, [t]);
|
||||||
|
|
||||||
|
const open = useCallback((url: string) => {
|
||||||
|
if (!url) return;
|
||||||
|
window.open(url, '_blank');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const shadowrocketUrl = useMemo(() => {
|
||||||
|
if (!subUrl) return '';
|
||||||
|
const separator = subUrl.includes('?') ? '&' : '?';
|
||||||
|
const rawUrl = subUrl + separator + 'flag=shadowrocket';
|
||||||
|
const base64Url = btoa(rawUrl).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
|
||||||
|
const remark = encodeURIComponent(subTitle || sId || 'Subscription');
|
||||||
|
return `shadowrocket://add/sub/${base64Url}?remark=${remark}`;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const v2boxUrl = useMemo(
|
||||||
|
() => `v2box://install-sub?url=${encodeURIComponent(subUrl)}&name=${encodeURIComponent(sId)}`,
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const streisandUrl = useMemo(() => `streisand://import/${encodeURIComponent(subUrl)}`, []);
|
||||||
|
const happUrl = useMemo(() => `happ://add/${subUrl}`, []);
|
||||||
|
|
||||||
|
const pageClass = useMemo(() => {
|
||||||
|
const classes = ['subscription-page'];
|
||||||
|
if (isDark) classes.push('is-dark');
|
||||||
|
if (isUltra) classes.push('is-ultra');
|
||||||
|
return classes.join(' ');
|
||||||
|
}, [isDark, isUltra]);
|
||||||
|
|
||||||
|
const descriptionsItems = useMemo(() => {
|
||||||
|
const items = [
|
||||||
|
{ key: 'subId', label: t('subscription.subId'), children: sId },
|
||||||
|
{
|
||||||
|
key: 'status',
|
||||||
|
label: t('subscription.status'),
|
||||||
|
children: !enabled
|
||||||
|
? <Tag color="red">{t('subscription.inactive')}</Tag>
|
||||||
|
: isUnlimited
|
||||||
|
? <Tag color="purple">{t('subscription.unlimited')}</Tag>
|
||||||
|
: <Tag color={isActive ? 'green' : 'red'}>
|
||||||
|
{isActive ? t('subscription.active') : t('subscription.inactive')}
|
||||||
|
</Tag>,
|
||||||
|
},
|
||||||
|
{ key: 'down', label: t('subscription.downloaded'), children: download },
|
||||||
|
{ key: 'up', label: t('subscription.uploaded'), children: upload },
|
||||||
|
{ key: 'used', label: t('usage'), children: used },
|
||||||
|
{ key: 'total', label: t('subscription.totalQuota'), children: total },
|
||||||
|
];
|
||||||
|
if (totalByte > 0) {
|
||||||
|
items.push({ key: 'remained', label: t('remained'), children: remained });
|
||||||
|
}
|
||||||
|
items.push({
|
||||||
|
key: 'lastOnline',
|
||||||
|
label: t('lastOnline'),
|
||||||
|
children: lastOnlineMs > 0 ? IntlUtil.formatDate(lastOnlineMs, datepicker) : '-',
|
||||||
|
});
|
||||||
|
items.push({
|
||||||
|
key: 'expiry',
|
||||||
|
label: t('subscription.expiry'),
|
||||||
|
children: expireMs === 0
|
||||||
|
? t('subscription.noExpiry')
|
||||||
|
: IntlUtil.formatDate(expireMs, datepicker),
|
||||||
|
});
|
||||||
|
return items;
|
||||||
|
}, [t]);
|
||||||
|
|
||||||
|
const androidMenuItems = useMemo(() => [
|
||||||
|
{
|
||||||
|
key: 'android-v2box',
|
||||||
|
label: 'V2Box',
|
||||||
|
onClick: () => open(`v2box://install-sub?url=${encodeURIComponent(subUrl)}&name=${encodeURIComponent(sId)}`),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'android-v2rayng',
|
||||||
|
label: 'V2RayNG',
|
||||||
|
onClick: () => open(`v2rayng://install-config?url=${encodeURIComponent(subUrl)}`),
|
||||||
|
},
|
||||||
|
{ key: 'android-singbox', label: 'Sing-box', onClick: () => copy(subUrl) },
|
||||||
|
{ key: 'android-v2raytun', label: 'V2RayTun', onClick: () => copy(subUrl) },
|
||||||
|
{ key: 'android-npvtunnel', label: 'NPV Tunnel', onClick: () => copy(subUrl) },
|
||||||
|
{ key: 'android-happ', label: 'Happ', onClick: () => open(`happ://add/${subUrl}`) },
|
||||||
|
], [copy, open]);
|
||||||
|
|
||||||
|
const iosMenuItems = useMemo(() => [
|
||||||
|
{ key: 'ios-shadowrocket', label: 'Shadowrocket', onClick: () => open(shadowrocketUrl) },
|
||||||
|
{ key: 'ios-v2box', label: 'V2Box', onClick: () => open(v2boxUrl) },
|
||||||
|
{ key: 'ios-streisand', label: 'Streisand', onClick: () => open(streisandUrl) },
|
||||||
|
{ key: 'ios-v2raytun', label: 'V2RayTun', onClick: () => copy(subUrl) },
|
||||||
|
{ key: 'ios-npvtunnel', label: 'NPV Tunnel', onClick: () => copy(subUrl) },
|
||||||
|
{ key: 'ios-happ', label: 'Happ', onClick: () => open(happUrl) },
|
||||||
|
], [copy, open, shadowrocketUrl, v2boxUrl, streisandUrl, happUrl]);
|
||||||
|
|
||||||
|
const langOptions = useMemo(
|
||||||
|
() => LanguageManager.supportedLanguages.map((l: { value: string; name: string; icon: string }) => ({
|
||||||
|
value: l.value,
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
<span aria-label={l.name}>{l.icon}</span>
|
||||||
|
<span>{l.name}</span>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
})),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const themeIcon = !isDark ? (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="4" />
|
||||||
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
|
||||||
|
</svg>
|
||||||
|
) : !isUltra ? (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||||
|
<path fill="none" d="M19 3l0.7 1.4 1.4 0.7-1.4 0.7L19 7.2l-0.7-1.4-1.4-0.7 1.4-0.7z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const cardTitle = (
|
||||||
|
<Space>
|
||||||
|
<span>{t('subscription.title')}</span>
|
||||||
|
<Tag>{sId}</Tag>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
|
||||||
|
const cardExtra = (
|
||||||
|
<Space size={8} align="center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id="sub-theme-cycle"
|
||||||
|
className="theme-cycle"
|
||||||
|
aria-label={t('menu.theme')}
|
||||||
|
title={t('menu.theme')}
|
||||||
|
onClick={cycleTheme}
|
||||||
|
>
|
||||||
|
{themeIcon}
|
||||||
|
</button>
|
||||||
|
<Popover
|
||||||
|
title={t('pages.settings.language')}
|
||||||
|
placement="bottomRight"
|
||||||
|
trigger="click"
|
||||||
|
content={
|
||||||
|
<Space direction="vertical" size={10} className="settings-popover">
|
||||||
|
<Select
|
||||||
|
className="lang-select"
|
||||||
|
value={lang}
|
||||||
|
onChange={onLangChange}
|
||||||
|
options={langOptions}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button shape="circle" icon={<SettingOutlined />} />
|
||||||
|
</Popover>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConfigProvider theme={antdThemeConfig}>
|
||||||
|
<Layout className={pageClass}>
|
||||||
|
<Layout.Content className="content">
|
||||||
|
<Row justify="center">
|
||||||
|
<Col xs={24} sm={22} md={18} lg={14} xl={12}>
|
||||||
|
<Card hoverable className="subscription-card" title={cardTitle} extra={cardExtra}>
|
||||||
|
<Row gutter={[8, 8]} justify="center" className="qr-row">
|
||||||
|
<Col xs={24} sm={subJsonUrl || subClashUrl ? 12 : 24} className="qr-col">
|
||||||
|
<div className="qr-box">
|
||||||
|
<Tag color="purple" className="qr-tag">{t('pages.settings.subSettings')}</Tag>
|
||||||
|
<QRCode
|
||||||
|
className="qr-code"
|
||||||
|
value={subUrl}
|
||||||
|
size={QR_SIZE}
|
||||||
|
type="svg"
|
||||||
|
bordered={false}
|
||||||
|
color="#000000"
|
||||||
|
bgColor="#ffffff"
|
||||||
|
title={t('copy')}
|
||||||
|
onClick={() => copy(subUrl)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
{subJsonUrl && (
|
||||||
|
<Col xs={24} sm={12} className="qr-col">
|
||||||
|
<div className="qr-box">
|
||||||
|
<Tag color="purple" className="qr-tag">
|
||||||
|
{t('pages.settings.subSettings')} JSON
|
||||||
|
</Tag>
|
||||||
|
<QRCode
|
||||||
|
className="qr-code"
|
||||||
|
value={subJsonUrl}
|
||||||
|
size={QR_SIZE}
|
||||||
|
type="svg"
|
||||||
|
bordered={false}
|
||||||
|
color="#000000"
|
||||||
|
bgColor="#ffffff"
|
||||||
|
title={t('copy')}
|
||||||
|
onClick={() => copy(subJsonUrl)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
)}
|
||||||
|
{subClashUrl && (
|
||||||
|
<Col xs={24} sm={12} className="qr-col">
|
||||||
|
<div className="qr-box">
|
||||||
|
<Tag color="purple" className="qr-tag">Clash / Mihomo</Tag>
|
||||||
|
<QRCode
|
||||||
|
className="qr-code"
|
||||||
|
value={subClashUrl}
|
||||||
|
size={QR_SIZE}
|
||||||
|
type="svg"
|
||||||
|
bordered={false}
|
||||||
|
color="#000000"
|
||||||
|
bgColor="#ffffff"
|
||||||
|
title={t('copy')}
|
||||||
|
onClick={() => copy(subClashUrl)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
)}
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Descriptions
|
||||||
|
bordered
|
||||||
|
column={1}
|
||||||
|
size="small"
|
||||||
|
className="info-table"
|
||||||
|
items={descriptionsItems}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{links.length > 0 && (
|
||||||
|
<div className="links-section">
|
||||||
|
{links.map((link, idx) => (
|
||||||
|
<div key={link} className="link-row" onClick={() => copy(link)}>
|
||||||
|
<Tag color="purple" className="link-tag">{linkName(link, idx)}</Tag>
|
||||||
|
<div className="link-box">
|
||||||
|
<CopyOutlined className="link-copy-icon" />
|
||||||
|
{link}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Row gutter={[8, 8]} justify="center" className="apps-row">
|
||||||
|
<Col xs={24} sm={12} className="app-col">
|
||||||
|
<Dropdown trigger={['click']} menu={{ items: androidMenuItems }}>
|
||||||
|
<Button block={isMobile} size="large" type="primary">
|
||||||
|
<AndroidOutlined /> Android <DownOutlined />
|
||||||
|
</Button>
|
||||||
|
</Dropdown>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} sm={12} className="app-col">
|
||||||
|
<Dropdown trigger={['click']} menu={{ items: iosMenuItems }}>
|
||||||
|
<Button block={isMobile} size="large" type="primary">
|
||||||
|
<AppleOutlined /> iOS <DownOutlined />
|
||||||
|
</Button>
|
||||||
|
</Dropdown>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Layout.Content>
|
||||||
|
</Layout>
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,531 +0,0 @@
|
||||||
<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 { ClipboardManager, IntlUtil, LanguageManager } from '@/utils';
|
|
||||||
import {
|
|
||||||
theme as themeState,
|
|
||||||
antdThemeConfig,
|
|
||||||
toggleTheme,
|
|
||||||
toggleUltra,
|
|
||||||
pauseAnimationsUntilLeave,
|
|
||||||
} from '@/composables/useTheme.js';
|
|
||||||
|
|
||||||
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 subTitle = subData.subTitle || '';
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Same Light -> Dark -> Ultra Dark -> Light cycle the panel sidebar
|
|
||||||
* uses, so the standalone subscription page offers a one-click theme
|
|
||||||
* toggle without the popover ceremony. */
|
|
||||||
function cycleTheme() {
|
|
||||||
pauseAnimationsUntilLeave('sub-theme-cycle');
|
|
||||||
if (!themeState.isDark) {
|
|
||||||
toggleTheme();
|
|
||||||
if (themeState.isUltra) toggleUltra();
|
|
||||||
} else if (!themeState.isUltra) {
|
|
||||||
toggleUltra();
|
|
||||||
} else {
|
|
||||||
toggleUltra();
|
|
||||||
toggleTheme();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const QR_SIZE = 240;
|
|
||||||
|
|
||||||
// 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(() => {
|
|
||||||
if (!subUrl) return '';
|
|
||||||
const separator = subUrl.includes('?') ? '&' : '?';
|
|
||||||
const rawUrl = subUrl + separator + 'flag=shadowrocket';
|
|
||||||
const base64Url = btoa(rawUrl).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
|
|
||||||
const remark = encodeURIComponent(subTitle || sId || 'Subscription');
|
|
||||||
return `shadowrocket://add/sub/${base64Url}?remark=${remark}`;
|
|
||||||
});
|
|
||||||
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-space :size="8" align="center">
|
|
||||||
<button type="button" class="theme-cycle" :aria-label="t('menu.theme')" :title="t('menu.theme')"
|
|
||||||
@click="cycleTheme">
|
|
||||||
<svg v-if="!themeState.isDark" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
||||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<circle cx="12" cy="12" r="4" />
|
|
||||||
<path
|
|
||||||
d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
|
|
||||||
</svg>
|
|
||||||
<svg v-else-if="!themeState.isUltra" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
||||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
||||||
</svg>
|
|
||||||
<svg v-else viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"
|
|
||||||
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
||||||
<path fill="none" d="M19 3l0.7 1.4 1.4 0.7-1.4 0.7L19 7.2l-0.7-1.4-1.4-0.7 1.4-0.7z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<a-popover :title="t('pages.settings.language')" placement="bottomRight" trigger="click">
|
|
||||||
<template #content>
|
|
||||||
<a-space direction="vertical" :size="10" class="settings-popover">
|
|
||||||
<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>
|
|
||||||
<span>{{ l.name }}</span>
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
<a-button shape="circle">
|
|
||||||
<template #icon>
|
|
||||||
<SettingOutlined />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</a-popover>
|
|
||||||
</a-space>
|
|
||||||
</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>
|
|
||||||
<a-qrcode class="qr-code" :value="subUrl" :size="QR_SIZE" type="svg" :bordered="false"
|
|
||||||
color="#000000" bg-color="#ffffff" :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>
|
|
||||||
<a-qrcode class="qr-code" :value="subJsonUrl" :size="QR_SIZE" type="svg" :bordered="false"
|
|
||||||
color="#000000" bg-color="#ffffff" :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>
|
|
||||||
<a-qrcode class="qr-code" :value="subClashUrl" :size="QR_SIZE" type="svg" :bordered="false"
|
|
||||||
color="#000000" bg-color="#ffffff" :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: #1e1e1e;
|
|
||||||
--bg-card: #252526;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-tag {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-code {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0 !important;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-cycle {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
||||||
background: var(--bg-card);
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
transition: background-color 0.2s, transform 0.15s, color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-cycle:hover,
|
|
||||||
.theme-cycle:focus-visible {
|
|
||||||
background-color: rgba(64, 150, 255, 0.1);
|
|
||||||
color: #4096ff;
|
|
||||||
transform: scale(1.05);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-cycle svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-dark .theme-cycle {
|
|
||||||
border-color: rgba(255, 255, 255, 0.08);
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-dark .theme-cycle:hover,
|
|
||||||
.is-dark .theme-cycle:focus-visible {
|
|
||||||
background-color: rgba(64, 150, 255, 0.1);
|
|
||||||
color: #4096ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-select {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -9,6 +9,6 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="message"></div>
|
<div id="message"></div>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/entries/subpage.js"></script>
|
<script type="module" src="/src/entries/subpage.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue