332 lines
16 KiB
Vue
332 lines
16 KiB
Vue
<template>
|
|
<aside
|
|
class="sidebar"
|
|
:class="[
|
|
sidebarCollapsed ? 'w-[72px]' : 'w-64',
|
|
{ '-translate-x-full lg:translate-x-0': !mobileOpen }
|
|
]"
|
|
>
|
|
<!-- Logo/Brand -->
|
|
<div class="sidebar-header">
|
|
<!-- Custom Logo or Default Logo -->
|
|
<div class="w-9 h-9 rounded-xl overflow-hidden flex items-center justify-center shadow-glow">
|
|
<img :src="siteLogo || '/logo.png'" alt="Logo" class="w-full h-full object-contain" />
|
|
</div>
|
|
<transition name="fade">
|
|
<div v-if="!sidebarCollapsed" class="flex flex-col">
|
|
<span class="text-lg font-bold text-gray-900 dark:text-white">
|
|
{{ siteName }}
|
|
</span>
|
|
<!-- Version Badge -->
|
|
<VersionBadge :version="siteVersion" />
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="sidebar-nav scrollbar-hide">
|
|
<!-- Admin View: Admin menu first, then personal menu -->
|
|
<template v-if="isAdmin">
|
|
<!-- Admin Section -->
|
|
<div class="sidebar-section">
|
|
<router-link
|
|
v-for="item in adminNavItems"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
class="sidebar-link mb-1"
|
|
:class="{ 'sidebar-link-active': isActive(item.path) }"
|
|
:title="sidebarCollapsed ? item.label : undefined"
|
|
>
|
|
<component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
|
|
<transition name="fade">
|
|
<span v-if="!sidebarCollapsed">{{ item.label }}</span>
|
|
</transition>
|
|
</router-link>
|
|
</div>
|
|
|
|
<!-- Personal Section for Admin -->
|
|
<div class="sidebar-section">
|
|
<div v-if="!sidebarCollapsed" class="sidebar-section-title">
|
|
{{ t('nav.myAccount') }}
|
|
</div>
|
|
<div v-else class="h-px bg-gray-200 dark:bg-dark-700 mx-3 my-3"></div>
|
|
|
|
<router-link
|
|
v-for="item in personalNavItems"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
class="sidebar-link mb-1"
|
|
:class="{ 'sidebar-link-active': isActive(item.path) }"
|
|
:title="sidebarCollapsed ? item.label : undefined"
|
|
>
|
|
<component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
|
|
<transition name="fade">
|
|
<span v-if="!sidebarCollapsed">{{ item.label }}</span>
|
|
</transition>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Regular User View -->
|
|
<template v-else>
|
|
<div class="sidebar-section">
|
|
<router-link
|
|
v-for="item in userNavItems"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
class="sidebar-link mb-1"
|
|
:class="{ 'sidebar-link-active': isActive(item.path) }"
|
|
:title="sidebarCollapsed ? item.label : undefined"
|
|
>
|
|
<component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
|
|
<transition name="fade">
|
|
<span v-if="!sidebarCollapsed">{{ item.label }}</span>
|
|
</transition>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
</nav>
|
|
|
|
<!-- Bottom Section -->
|
|
<div class="mt-auto border-t border-gray-100 dark:border-dark-800 p-3">
|
|
<!-- Theme Toggle -->
|
|
<button
|
|
@click="toggleTheme"
|
|
class="sidebar-link w-full mb-2"
|
|
:title="sidebarCollapsed ? (isDark ? t('nav.lightMode') : t('nav.darkMode')) : undefined"
|
|
>
|
|
<SunIcon v-if="isDark" class="w-5 h-5 flex-shrink-0 text-amber-500" />
|
|
<MoonIcon v-else class="w-5 h-5 flex-shrink-0" />
|
|
<transition name="fade">
|
|
<span v-if="!sidebarCollapsed">{{ isDark ? t('nav.lightMode') : t('nav.darkMode') }}</span>
|
|
</transition>
|
|
</button>
|
|
|
|
<!-- Collapse Button -->
|
|
<button
|
|
@click="toggleSidebar"
|
|
class="sidebar-link w-full"
|
|
:title="sidebarCollapsed ? t('nav.expand') : t('nav.collapse')"
|
|
>
|
|
<ChevronDoubleLeftIcon v-if="!sidebarCollapsed" class="w-5 h-5 flex-shrink-0" />
|
|
<ChevronDoubleRightIcon v-else class="w-5 h-5 flex-shrink-0" />
|
|
<transition name="fade">
|
|
<span v-if="!sidebarCollapsed">{{ t('nav.collapse') }}</span>
|
|
</transition>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile Overlay -->
|
|
<transition name="fade">
|
|
<div
|
|
v-if="mobileOpen"
|
|
class="fixed inset-0 bg-black/50 z-30 lg:hidden"
|
|
@click="closeMobile"
|
|
></div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, h, ref, onMounted } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useAppStore, useAuthStore } from '@/stores';
|
|
import { getPublicSettings } from '@/api/auth';
|
|
import VersionBadge from '@/components/common/VersionBadge.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const route = useRoute();
|
|
const appStore = useAppStore();
|
|
const authStore = useAuthStore();
|
|
|
|
const sidebarCollapsed = computed(() => appStore.sidebarCollapsed);
|
|
const isAdmin = computed(() => authStore.isAdmin);
|
|
const isDark = ref(document.documentElement.classList.contains('dark'));
|
|
const mobileOpen = ref(false);
|
|
|
|
// Site settings
|
|
const siteName = ref('Sub2API');
|
|
const siteLogo = ref('');
|
|
const siteVersion = ref('');
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const settings = await getPublicSettings();
|
|
siteName.value = settings.site_name || 'Sub2API';
|
|
siteLogo.value = settings.site_logo || '';
|
|
siteVersion.value = settings.version || '';
|
|
} catch (error) {
|
|
console.error('Failed to load public settings:', error);
|
|
}
|
|
});
|
|
|
|
// SVG Icon Components
|
|
const DashboardIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z' })
|
|
])
|
|
};
|
|
|
|
const KeyIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z' })
|
|
])
|
|
};
|
|
|
|
const ChartIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z' })
|
|
])
|
|
};
|
|
|
|
const GiftIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z' })
|
|
])
|
|
};
|
|
|
|
const UserIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z' })
|
|
])
|
|
};
|
|
|
|
const UsersIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z' })
|
|
])
|
|
};
|
|
|
|
const FolderIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z' })
|
|
])
|
|
};
|
|
|
|
const CreditCardIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z' })
|
|
])
|
|
};
|
|
|
|
const GlobeIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418' })
|
|
])
|
|
};
|
|
|
|
const ServerIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z' })
|
|
])
|
|
};
|
|
|
|
const TicketIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z' })
|
|
])
|
|
};
|
|
|
|
const CogIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z' }),
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z' })
|
|
])
|
|
};
|
|
|
|
const SunIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z' })
|
|
])
|
|
};
|
|
|
|
const MoonIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z' })
|
|
])
|
|
};
|
|
|
|
const ChevronDoubleLeftIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'm18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5' })
|
|
])
|
|
};
|
|
|
|
const ChevronDoubleRightIcon = {
|
|
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'm5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5' })
|
|
])
|
|
};
|
|
|
|
// User navigation items (for regular users)
|
|
const userNavItems = computed(() => [
|
|
{ path: '/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
|
|
{ path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
|
|
{ path: '/usage', label: t('nav.usage'), icon: ChartIcon },
|
|
{ path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon },
|
|
{ path: '/redeem', label: t('nav.redeem'), icon: GiftIcon },
|
|
{ path: '/profile', label: t('nav.profile'), icon: UserIcon },
|
|
]);
|
|
|
|
// Personal navigation items (for admin's "My Account" section, without Dashboard)
|
|
const personalNavItems = computed(() => [
|
|
{ path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
|
|
{ path: '/usage', label: t('nav.usage'), icon: ChartIcon },
|
|
{ path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon },
|
|
{ path: '/redeem', label: t('nav.redeem'), icon: GiftIcon },
|
|
{ path: '/profile', label: t('nav.profile'), icon: UserIcon },
|
|
]);
|
|
|
|
// Admin navigation items
|
|
const adminNavItems = computed(() => [
|
|
{ path: '/admin/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
|
|
{ path: '/admin/users', label: t('nav.users'), icon: UsersIcon },
|
|
{ path: '/admin/groups', label: t('nav.groups'), icon: FolderIcon },
|
|
{ path: '/admin/subscriptions', label: t('nav.subscriptions'), icon: CreditCardIcon },
|
|
{ path: '/admin/accounts', label: t('nav.accounts'), icon: GlobeIcon },
|
|
{ path: '/admin/proxies', label: t('nav.proxies'), icon: ServerIcon },
|
|
{ path: '/admin/redeem', label: t('nav.redeemCodes'), icon: TicketIcon },
|
|
{ path: '/admin/usage', label: t('nav.usage'), icon: ChartIcon },
|
|
{ path: '/admin/settings', label: t('nav.settings'), icon: CogIcon },
|
|
]);
|
|
|
|
function toggleSidebar() {
|
|
appStore.toggleSidebar();
|
|
}
|
|
|
|
function toggleTheme() {
|
|
isDark.value = !isDark.value;
|
|
document.documentElement.classList.toggle('dark', isDark.value);
|
|
localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
|
|
}
|
|
|
|
function closeMobile() {
|
|
mobileOpen.value = false;
|
|
}
|
|
|
|
function isActive(path: string): boolean {
|
|
return route.path === path || route.path.startsWith(path + '/');
|
|
}
|
|
|
|
// Initialize theme
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
isDark.value = true;
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|