portal/app/resources/js/views/SettingsView.vue

<script setup lang="ts">
/**
 * Settings — настройки тенанта/пользователя. 4 рабочие вкладки.
 *
 * Источник дизайна: liderra_v8_handoff/concepts/v8_settings.html.
 * Полностью реализованы (с UI-разводкой): Профиль, Безопасность, API и Webhook,
 * Уведомления (матрица 8×3 по schema v8.7 §4 users.notification_preferences).
 *
 * Аудит D6/D7 (Sprint 3E, 2026-05-16): placeholder-вкладки Проекты/Команда/
 * Интеграции/Тихие часы убраны — UI не должен обещать «в разработке».
 * «Проекты» дублировали /projects; «Команда» и «Тихие часы» (ТЗ §17.8)
 * требуют schema+backend (отдельные эпики); «Интеграции» внешне-блокированы (Б-1).
 * Вкладки вернутся при реальной реализации соответствующих модулей.
 */
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import ApiTab from './settings/ApiTab.vue';
import NotificationsTab from './settings/NotificationsTab.vue';
import ProfileTab from './settings/ProfileTab.vue';
import RequisitesTab from './settings/RequisitesTab.vue';
import SecurityTab from './settings/SecurityTab.vue';

interface Tab {
    id: string;
    label: string;
    icon: string;
}

const tabs: Tab[] = [
    { id: 'profile', label: 'Профиль', icon: 'mdi-account-outline' },
    { id: 'requisites', label: 'Реквизиты', icon: 'mdi-file-document-outline' },
    { id: 'security', label: 'Безопасность', icon: 'mdi-shield-lock-outline' },
    { id: 'api', label: 'API и Webhook', icon: 'mdi-api' },
    { id: 'notifications', label: 'Уведомления', icon: 'mdi-bell-outline' },
];

const activeTab = ref('profile');

// Якоря для экскурсий портала (data-tour) — по одному на каждую вкладку рейла.
const tabTourAnchors: Record<string, string> = {
    profile: 'settings-tab-profile',
    security: 'settings-tab-security',
    notifications: 'settings-tab-notifications',
    requisites: 'settings-tab-requisites',
    api: 'settings-tab-api',
};

const route = useRoute();
onMounted(() => {
    const t = route.query.tab;
    if (typeof t === 'string' && tabs.some((tab) => tab.id === t)) {
        activeTab.value = t;
    }
});
</script>

<template>
    <v-container fluid class="settings pa-6">
        <header class="page-head">
            <h1 class="text-h4 mb-2 page-title">Настройки</h1>
            <p class="text-body-2 text-medium-emphasis ma-0">Профиль, безопасность, API и интеграции</p>
        </header>

        <v-row class="settings-row mt-4">
            <v-col cols="12" md="3">
                <v-card variant="outlined" class="tabs-rail pa-2">
                    <v-list density="compact" nav>
                        <v-list-item
                            v-for="tab in tabs"
                            :key="tab.id"
                            :prepend-icon="tab.icon"
                            :active="activeTab === tab.id"
                            :data-tour="tabTourAnchors[tab.id]"
                            rounded="lg"
                            @click="activeTab = tab.id"
                        >
                            <v-list-item-title>{{ tab.label }}</v-list-item-title>
                        </v-list-item>
                    </v-list>
                </v-card>
            </v-col>

            <v-col cols="12" md="9">
                <v-card variant="outlined" class="tab-pane pa-6">
                    <ProfileTab v-if="activeTab === 'profile'" />
                    <RequisitesTab v-else-if="activeTab === 'requisites'" />
                    <SecurityTab v-else-if="activeTab === 'security'" />
                    <ApiTab v-else-if="activeTab === 'api'" />
                    <NotificationsTab v-else-if="activeTab === 'notifications'" />
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

<style scoped>
.settings {
    max-width: 1440px;
}

.page-title {
    font-variation-settings: 'opsz' 28;
    letter-spacing: -0.018em;
}

.tabs-rail {
    background: #fff;
}

.tab-pane {
    background: #fff;
    min-height: 480px;
}
</style>