Mr.Dat
15b69773f0
- Updated `GlobalUploadIndicator.vue` to include `watch` for better state management. - Modified `CoinsIcon.vue`, `Globe.vue`, and `VideoPlayIcon.vue` to support filled and outlined states. - Added new icons: `hard-drive.vue` and `shield-user.vue`. - Improved `AppDialog.vue` to include `ClientOnly` for hydration mismatch handling. - Refactored `BaseTable.vue` to include `ref` for better reactivity. - Changed route redirection in `index.ts` for better clarity. - Enhanced `Billing.vue` and `BillingTopupDialog.vue` with new icons and improved UI elements. - Updated `PaymentHistory.tsx` and `PlanSelection.tsx` to use new icon components. - Refined `Settings.vue` to utilize new icons and improve layout. - Adjusted `Upload.vue` and `Videos.vue` for better component organization and imports. - Cleaned up `auth.ts` store to include `computed` for better state management. - Updated `tsconfig.json` to streamline TypeScript configuration. - Removed unnecessary console log in `vite-plugin-ssr-middleware.ts`.
246 lines
10 KiB
Vue
246 lines
10 KiB
Vue
<template>
|
|
<section>
|
|
<PageHeader :title="content[route.name as keyof typeof content]?.title || t('settings.content.fallbackTitle')"
|
|
:description="content[route.name as keyof typeof content]?.subtitle || t('settings.content.fallbackSubtitle')"
|
|
:breadcrumbs="breadcrumbs" />
|
|
<div class="max-w-7xl mx-auto pb-12">
|
|
|
|
<div class="flex flex-col md:flex-row gap-8 mt-6">
|
|
<!-- Sidebar Navigation (GitHub-style) -->
|
|
<aside class="md:w-56 shrink-0">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
|
|
<UserIcon class="w-8 h-8 text-primary" :filled="true" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-foreground">{{ auth.user?.username || t('app.name') }}
|
|
</h3>
|
|
<p class="text-sm text-foreground/60">{{ auth.user?.email || '' }}</p>
|
|
</div>
|
|
</div>
|
|
<nav class="space-y-6">
|
|
<div v-for="section in menuSections" :key="section.title">
|
|
<h3 v-if="section.title"
|
|
class="text-xs font-semibold text-foreground/50 uppercase tracking-wider mb-2 pl-3">
|
|
{{ section.title }}
|
|
</h3>
|
|
<ul class="space-y-0.5">
|
|
<li v-for="item in section.items" :key="item.value">
|
|
<router-link :to="item.to" :class="[
|
|
'w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all duration-150',
|
|
currentTab === item.value
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: item.danger
|
|
? 'text-danger hover:bg-danger/10'
|
|
: 'text-foreground/70 hover:bg-header hover:text-foreground'
|
|
]">
|
|
<component :is="item.icon" class="w-5 h-5 shrink-0"
|
|
:filled="currentTab === item.value" />
|
|
{{ item.label }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 min-w-0">
|
|
<router-view />
|
|
|
|
<!-- Settings-only toast/confirm hosts (no PrimeVue dependency) -->
|
|
<ClientOnly>
|
|
<AppToastHost />
|
|
<AppConfirmHost />
|
|
</ClientOnly>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ClientOnly from '@/components/ClientOnly';
|
|
import PageHeader from '@/components/dashboard/PageHeader.vue';
|
|
import AdvertisementIcon from '@/components/icons/AdvertisementIcon.vue';
|
|
import AlertTriangle from '@/components/icons/AlertTriangle.vue';
|
|
import Bell from '@/components/icons/Bell.vue';
|
|
import Credit from '@/components/icons/Credit.vue';
|
|
import GlobeIcon from '@/components/icons/Globe.vue';
|
|
import ShieldUser from '@/components/icons/shield-user.vue';
|
|
import UserIcon from '@/components/icons/UserIcon.vue';
|
|
import VideoPlayIcon from '@/components/icons/VideoPlayIcon.vue';
|
|
import AppConfirmHost from '@/components/ui/AppConfirmHost.vue';
|
|
import AppToastHost from '@/components/ui/AppToastHost.vue';
|
|
import { isAdmin } from '@/lib/utils';
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import { useTranslation } from 'i18next-vue';
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
const auth = useAuthStore();
|
|
const { t } = useTranslation();
|
|
|
|
type MenuItem = {
|
|
to: string
|
|
value: string
|
|
label: string
|
|
icon?: any
|
|
description?: string
|
|
danger?: boolean
|
|
}
|
|
// Menu items grouped by category (GitHub-style)
|
|
const menuSections = computed<{ title: string; items: MenuItem[] }[]>(() => [
|
|
{
|
|
title: t('settings.menu.securityGroup'),
|
|
items: [
|
|
{
|
|
to: '/settings/security',
|
|
value: 'security', label: t('settings.menu.security'), icon: ShieldUser
|
|
},
|
|
{ to: '/settings/billing', value: 'billing', label: t('settings.menu.billing'), icon: Credit },
|
|
],
|
|
},
|
|
{
|
|
title: t('settings.menu.preferencesGroup'),
|
|
items: [
|
|
{ to: '/settings/notifications', value: 'notifications', label: t('settings.menu.notifications'), icon: Bell },
|
|
],
|
|
},
|
|
{
|
|
title: t('settings.menu.playerGroup'),
|
|
items: [
|
|
{ to: '/settings/player-configs', value: 'player-configs', label: t('settings.menu.playerConfigs'), icon: VideoPlayIcon },
|
|
],
|
|
},
|
|
{
|
|
title: t('settings.menu.integrationsGroup'),
|
|
items: [
|
|
{ to: '/settings/domains', value: 'domains', label: t('settings.menu.domains'), icon: GlobeIcon },
|
|
{ to: '/settings/ads', value: 'ads', label: t('settings.menu.ads'), icon: AdvertisementIcon },
|
|
],
|
|
},
|
|
...(isAdmin(auth.user?.role) ? [{
|
|
title: 'Admin Workspace',
|
|
items: [
|
|
{ to: '/settings/admin/users', value: 'admin-users', label: 'Users', description: 'Accounts, plans and moderation' },
|
|
{ to: '/settings/admin/videos', value: 'admin-videos', label: 'Videos', description: 'Cross-user media inventory' },
|
|
{ to: '/settings/admin/payments', value: 'admin-payments', label: 'Payments', description: 'Revenue, invoices and state changes' },
|
|
{ to: '/settings/admin/plans', value: 'admin-plans', label: 'Plans', description: 'Catalog and subscription offers' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Admin Operations',
|
|
items: [
|
|
{ to: '/settings/admin/ad-templates', value: 'admin-ad-templates', label: 'Ad Templates', description: 'VAST templates and defaults' },
|
|
{ to: '/settings/admin/player-configs', value: 'admin-player-configs', label: 'Player Configs', description: 'Cross-user player presets and defaults' },
|
|
{ to: '/settings/admin/jobs', value: 'admin-jobs', label: 'Jobs', description: 'Queue, retries and live logs' },
|
|
{ to: '/settings/admin/agents', value: 'admin-agents', label: 'Agents', description: 'Workers, health and maintenance' },
|
|
{ to: '/settings/admin/logs', value: 'admin-logs', label: 'Logs', description: 'Direct runtime log lookup' },
|
|
],
|
|
},] : []),
|
|
{
|
|
title: t('settings.menu.dangerGroup'),
|
|
items: [
|
|
{ to: '/settings/danger', value: 'danger', label: t('settings.menu.danger'), icon: AlertTriangle, danger: true },
|
|
],
|
|
}
|
|
] as const);
|
|
|
|
type TabValue = 'profile' | 'security' | 'notifications' | 'playerConfigs' | 'billing' | 'domains' | 'ads' | 'danger';
|
|
|
|
// Get current tab from route path
|
|
const currentTab = computed<TabValue>(() => {
|
|
const path = route.path as string;
|
|
const tabName = path.replace('/settings', '') || '/profile';
|
|
// support admin sub-routes
|
|
if (tabName.startsWith('/admin/')) {
|
|
return tabName.replace('/admin/', 'admin-') as TabValue;
|
|
}
|
|
if (tabName === '' || tabName === '/') return 'profile';
|
|
return (tabName.replace('/', '') as TabValue) || 'profile';
|
|
});
|
|
|
|
// Breadcrumbs with dynamic tab
|
|
const allMenuItems = computed(() => menuSections.value.map(section => section.items).flat());
|
|
const currentItem = computed(() => allMenuItems.value.find(item => item.value === currentTab.value));
|
|
|
|
const breadcrumbs = computed(() => [
|
|
{ label: t('pageHeader.dashboard'), to: '/overview' },
|
|
{ label: t('pageHeader.settings'), to: '/settings' },
|
|
...(currentItem.value ? [{ label: currentItem.value.label + (currentItem.value.value.includes("admin") ? " (Admin)" : "") }] : []),
|
|
]);
|
|
|
|
const content = computed(() => ({
|
|
'settings-security': {
|
|
title: t('settings.content.security.title'),
|
|
subtitle: t('settings.content.security.subtitle')
|
|
},
|
|
'settings-notifications': {
|
|
title: t('settings.content.notifications.title'),
|
|
subtitle: t('settings.content.notifications.subtitle')
|
|
},
|
|
'settings-billing': {
|
|
title: t('settings.content.billing.title'),
|
|
subtitle: t('settings.content.billing.subtitle')
|
|
},
|
|
'settings-domains': {
|
|
title: t('settings.content.domains.title'),
|
|
subtitle: t('settings.content.domains.subtitle')
|
|
},
|
|
'settings-ads': {
|
|
title: t('settings.content.ads.title'),
|
|
subtitle: t('settings.content.ads.subtitle')
|
|
},
|
|
'settings-player-configs': {
|
|
title: t('settings.content.playerConfigs.title'),
|
|
subtitle: t('settings.content.playerConfigs.subtitle')
|
|
},
|
|
'settings-danger': {
|
|
title: t('settings.content.danger.title'),
|
|
subtitle: t('settings.content.danger.subtitle')
|
|
},
|
|
'admin-overview': {
|
|
title: 'Overview',
|
|
subtitle: 'KPIs, usage and runtime pulse across the admin workspace.',
|
|
},
|
|
'admin-users': {
|
|
title: 'Users',
|
|
subtitle: 'Accounts, plans and moderation tools for the full user base.',
|
|
},
|
|
'admin-videos': {
|
|
title: 'Videos',
|
|
subtitle: 'Cross-user media inventory, review and operational controls.',
|
|
},
|
|
'admin-payments': {
|
|
title: 'Payments',
|
|
subtitle: 'Revenue records, invoices and payment state operations.',
|
|
},
|
|
'admin-plans': {
|
|
title: 'Plans',
|
|
subtitle: 'Subscription catalog management and offer maintenance.',
|
|
},
|
|
'admin-ad-templates': {
|
|
title: 'Ad Templates',
|
|
subtitle: 'VAST templates, ownership metadata and default assignments.',
|
|
},
|
|
'admin-player-configs': {
|
|
title: 'Player Configs',
|
|
subtitle: 'Cross-user player presets, flags and default assignments.',
|
|
},
|
|
'admin-jobs': {
|
|
title: 'Jobs',
|
|
subtitle: 'Queue state, retries and runtime execution tracking.',
|
|
},
|
|
'admin-agents': {
|
|
title: 'Agents',
|
|
subtitle: 'Connected workers, health checks and maintenance actions.',
|
|
},
|
|
'admin-logs': {
|
|
title: 'Logs',
|
|
subtitle: 'Persisted output lookup and live runtime tailing.',
|
|
},
|
|
}));
|
|
</script>
|