Добавил уведомление о создании отчета

resources/js/Pages/Analytics/Components/PresetCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { NText } from 'naive-ui'
+import { NText, NEl } from 'naive-ui'
 import { TbPlus } from 'vue-icons-plus/tb'
 
 defineProps({
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <div class="preset-card">
+    <NEl class="preset-card">
         <div v-if="preset.key === 'blank'" class="preset-blank">
             <TbPlus :size="26" />
         </div>
@@ -17,7 +17,7 @@ defineProps({
         </div>
         <NText class="preset-title">{{ preset.label }}</NText>
         <NText depth="3" class="preset-desc">{{ preset.description }}</NText>
-    </div>
+    </NEl>
 </template>
 
 <style scoped>

resources/js/Pages/Analytics/Components/SettingsPanel.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import {
-    NButton, NText, NIcon, NSelect, NScrollbar, NGrid, NGi, NAlert, NRadio, NEmpty,
+    NButton, NText, NIcon, NSelect, NScrollbar, NGrid, NGi, NAlert, NRadio, NEmpty, NEl
 } from 'naive-ui'
 import {
     TbX, TbChevronRight, TbCalendar, TbTrendingUp, TbLayoutGrid, TbDatabase,
@@ -60,7 +60,7 @@ const filterOptions = (def) => (def.options ?? [])
 </script>
 
 <template>
-    <div class="settings">
+    <NEl class="settings">
         <!-- ROOT -->
         <template v-if="view === 'root'">
             <div class="head">
@@ -242,11 +242,11 @@ const filterOptions = (def) => (def.options ?? [])
                 />
             </div>
         </template>
-    </div>
+    </NEl>
 </template>
 
 <style scoped>
-.settings { padding: 4px 2px; background: var(--n-) }
+.settings { padding: 4px 2px; }
 .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
 .head-title { font-size: 18px; font-weight: 600; }
 .sub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
@@ -257,15 +257,15 @@ const filterOptions = (def) => (def.options ?? [])
     align-items: center;
     gap: 10px;
     padding: 12px 14px;
-    border: 1px solid var(--n-border-color, rgba(255,255,255,.1));
+    border: 1px solid var(--border-color, rgba(255,255,255,.1));
     border-radius: 12px;
     margin-bottom: 8px;
     cursor: pointer;
-    background: var(--n-card-color);
+    background: var(--card-color);
     transition: border-color .15s;
 }
 .row:hover { border-color: var(--primary-color); }
-.row.static, .row.static:hover { cursor: default; border-color: var(--n-border-color, rgba(255,255,255,.1)); }
+.row.static, .row.static:hover { cursor: default; border-color: var(--border-color, rgba(255,255,255,.1)); }
 .row.disabled { opacity: .5; pointer-events: none; }
 .row-icon { color: var(--primary-color); }
 .row-label { flex: 1; font-weight: 500; }
@@ -293,7 +293,7 @@ const filterOptions = (def) => (def.options ?? [])
     font-size: 13px;
     color: var(--n-text-color-2);
 }
-.seg-btn.active { background: var(--n-card-color); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
+.seg-btn.active { background: var(--card-color); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
 .data-list { display: flex; flex-direction: column; gap: 8px; }
 .data-card {
     display: flex;
@@ -301,7 +301,7 @@ const filterOptions = (def) => (def.options ?? [])
     justify-content: space-between;
     gap: 8px;
     padding: 12px 14px;
-    border: 1px solid var(--n-border-color, rgba(255,255,255,.1));
+    border: 1px solid var(--border-color, rgba(255,255,255,.1));
     border-radius: 12px;
     cursor: pointer;
 }

resources/js/Pages/Analytics/Components/TemplatePickerModal.vue

@@ -32,16 +32,17 @@ const pick = (preset) => {
         :show="show"
         preset="card"
         title="Шаблоны для отчёта"
-        style="width: 860px; max-width: 94vw;"
-        class="h-[580px]"
+        class="max-w-[860px] h-[580px] relative"
+        :content-scrollable="true"
         @update:show="emit('update:show', $event)"
     >
         <template #header-extra>
             <NText depth="3" style="font-size: 13px;">Создавайте отчёт по шаблонам</NText>
         </template>
 
-        <div class="picker">
-            <div class="picker-side">
+        <div class="picker relative flex gap-2 items-start">
+            <!-- Боковая панель с sticky -->
+            <div class="picker-side sticky top-0 shrink-0 align-start">
                 <NInput v-model:value="search" placeholder="Поиск" clearable size="small">
                     <template #prefix><TbSearch :size="14" /></template>
                 </NInput>
@@ -58,13 +59,14 @@ const pick = (preset) => {
                 </div>
             </div>
 
-            <NScrollbar style="max-height: 60vh;" class="picker-main">
+            <!-- Контент справа -->
+            <div style="flex: 1; min-width: 0;">
                 <NGrid responsive="screen" cols="2 s:3" :x-gap="12" :y-gap="12" class="pt-0.5">
                     <NGi v-for="preset in filtered" :key="preset.key">
                         <PresetCard :preset="preset" @click="pick(preset)" />
                     </NGi>
                 </NGrid>
-            </NScrollbar>
+            </div>
         </div>
     </NModal>
 </template>