@coopenomics/desktop 2025.7.3 → 2025.11.8-alpha-2

package/src/app/App.vue

@@ -1,59 +1,89 @@
 <template lang="pug">
-div(v-if="isLoaded").breable-text
+.breable-text(v-if='isLoaded')
   router-view
+
   RequireAgreements
   SelectBranchOverlay
+  NotificationPermissionDialog
 </template>
 
-  <script setup lang="ts">
-  import { onMounted, ref } from 'vue'
-  import { useRoute } from 'vue-router'
-  import { Cookies, LocalStorage } from 'quasar'
-  import { FailAlert } from 'src/shared/api/alerts'
-  import { handleException } from 'src/shared/api'
-  import { RequireAgreements } from 'src/widgets/RequireAgreements'
-  import { SelectBranchOverlay } from 'src/features/Branch/SelectBranch'
-  import { useSystemStore } from 'src/entities/System/model'
-  import { useDesktopHealthWatcherProcess } from 'src/processes/watch-desktop-health'
-  import 'src/shared/ui/CardStyles/index.scss';
-
-  const { info } = useSystemStore()
-  const route = useRoute()
-  const isLoaded = ref(false)
-
-  // запускаем процесс мониторинга "технического обслуживания"
-  useDesktopHealthWatcherProcess()
-
-  onMounted(() => {
-    try {
-      removeLoader()
-      isLoaded.value = true
-
-      const ref = Cookies.get('referer') || String(route.query.r || '')
-      if (ref) {
-        LocalStorage.setItem(`${info.coopname}:referer`, ref)
-      }
-    } catch (e) {
-      console.error(e)
-      handleException(e)
-      isLoaded.value = true
-      removeLoader()
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { Cookies, LocalStorage } from 'quasar';
+import { FailAlert } from 'src/shared/api/alerts';
+import { RequireAgreements } from 'src/widgets/RequireAgreements';
+import { SelectBranchOverlay } from 'src/features/Branch/SelectBranch';
+import {
+  NotificationPermissionDialog,
+  useNotificationPermissionDialog,
+} from 'src/features/NotificationPermissionDialog';
+import { useSystemStore } from 'src/entities/System/model';
+import { useDesktopHealthWatcherProcess } from 'src/processes/watch-desktop-health';
+import 'src/shared/ui/CardStyles/index.scss';
+
+const system = useSystemStore();
+const { info } = system;
+const route = useRoute();
+const isLoaded = ref(false);
+
+// Диалог разрешения уведомлений
+const { showDialog } = useNotificationPermissionDialog();
+
+onMounted(async () => {
+  try {
+    console.log('systemInfo', info)
+    // Если мы в SPA режиме (hash mode) и pathname не является главной страницей
+    // и при этом hash пустой или указывает не на текущий pathname
+    if (typeof window !== 'undefined' && window.location.pathname !== '/' &&
+        (!window.location.hash || !window.location.hash.includes(window.location.pathname))) {
+      console.log('URL needs hash correction');
+      const newUrl = window.location.origin + '/#' + window.location.pathname + window.location.search;
+      console.log('Redirecting to:', newUrl);
+      window.location.replace(newUrl);
+      return; // Прерываем выполнение, так как будет редирект
     }
-  })
-
-  function removeLoader() {
-    const loaderContainer = document.querySelector('.loader-container')
-    if (loaderContainer) {
-      loaderContainer.remove()
-    } else {
-      FailAlert('Возникла ошибка при загрузке сайта :(')
+
+    // Запускаем процесс мониторинга "технического обслуживания" после монтирования
+    useDesktopHealthWatcherProcess();
+
+    removeLoader();
+    isLoaded.value = true;
+
+    const ref = Cookies.get('referer') || String(route.query.r || '');
+    if (ref) {
+      LocalStorage.setItem(`${info.coopname}:referer`, ref);
     }
+
+    // Показываем диалог разрешения уведомлений после загрузки
+    setTimeout(() => {
+      showDialog();
+    }, 1000);
+  } catch (e) {
+    console.error(e);
+    FailAlert(e);
+    isLoaded.value = true;
+    removeLoader();
+  }
+});
+
+onUnmounted(() => {
+  // Останавливаем мониторинг системной информации при размонтировании
+  system.stopSystemMonitoring();
+});
+
+function removeLoader() {
+  const loaderContainer = document.querySelector('.loader-container');
+  if (loaderContainer) {
+    loaderContainer.remove();
+  } else {
+    FailAlert('Возникла ошибка при загрузке сайта :(');
   }
+}
 </script>
 <style>
 .q-loading__backdrop {
   /* стиль полного оверлея технического обслуживания */
   opacity: 1 !important;
 }
-
-</style>
+</style>

package/src/app/layouts/default.vue

@@ -7,39 +7,89 @@ q-layout(view='lHh LpR fff')
     v-model='leftDrawerOpen',
     side='left',
     bordered,
+    persistent,
     :width='200'
   )
     LeftDrawerMenu
 
-  q-footer(v-if='!loggedIn', :class='headerClass', bordered)
+  // Кнопка открытия drawer (снаружи)
+  q-btn.fixed-top-right(
+    v-if='rightDrawerActions.length > 0 && !rightDrawerOpen',
+    :style='buttonStyle',
+    dense,
+
+    flat
+    icon='fas fa-chevron-left',
+    @click='toggleRightDrawer'
+  )
+
+  q-drawer.drawer-right(
+    v-if='rightDrawerActions.length > 0',
+    v-model='rightDrawerOpen',
+    side='right',
+    bordered,
+    :width='250'
+  )
+    // Кнопка закрытия drawer (внутри)
+    .div
+      q-btn(
+        dense,
+        :style='buttonStyle',
+        flat,
+        icon='fas fa-chevron-right',
+        @click='toggleRightDrawer'
+      )
+
+    // Инжектированные компоненты действий
+    template(v-for='action in rightDrawerActions', :key='action.id')
+      component(:is='action.component', v-bind='action.props')
+
+  q-footer(v-if='!loggedIn && system.info.system_status !== Zeus.SystemStatus.install && system.info.system_status !== Zeus.SystemStatus.initialized', :class='headerClass', bordered)
     ContactsFooter(:text='footerText')
 
   q-page-container
     q-page
-      .absolute-full.flex.flex-center.z-top(v-if='desktop.isWorkspaceChanging')
-        Loader
-
+      WindowLoader(v-if='desktop?.isWorkspaceChanging')
       router-view(v-else)
+
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { Header } from 'src/widgets/Header/CommonHeader';
 import { LeftDrawerMenu } from 'src/widgets/Desktop/LeftDrawerMenu';
 import { ContactsFooter } from 'src/shared/ui/Footer';
-import { Loader } from 'src/shared/ui/Loader';
+
 import { useDesktopStore } from 'src/entities/Desktop/model';
+import { useSystemStore } from 'src/entities/System/model';
 import { useDefaultLayoutLogic } from './useDefaultLayoutLogic';
-
+import { usePWAThemeColor } from 'src/shared/lib/composables/usePWAThemeColor';
+import { useRightDrawerReader } from 'src/shared/hooks/useRightDrawer';
+import { WindowLoader } from 'src/shared/ui/Loader';
+import { Zeus } from '@coopenomics/sdk';
 const desktop = useDesktopStore();
+const system = useSystemStore();
+const { rightDrawerActions } = useRightDrawerReader();
+
+// Настраиваем автоматическое обновление PWA theme-color
+usePWAThemeColor();
 
 const {
   leftDrawerOpen,
+  rightDrawerOpen,
   showDrawer,
   headerClass,
   footerText,
   loggedIn,
+  isMobile,
   toggleLeftDrawer,
+  toggleRightDrawer,
 } = useDefaultLayoutLogic();
+
+const buttonStyle = computed(() => ({
+  width: isMobile.value ? '45px' : '56px',
+  height: isMobile.value ? '30px' : '50px'
+}));
 </script>
 
 <style lang="scss">
@@ -50,4 +100,18 @@ const {
 .drawer-left {
   border-right: 1px solid #00800038 !important;
 }
+
+.fixed-top-right {
+  position: fixed !important;
+  top: 51px; // Под header'ом
+  right: 0px;
+  z-index: 10;
+}
+
+.drawer-close-btn {
+  position: absolute !important;
+  top: 16px;
+  right: 16px;
+  z-index: 10;
+}
 </style>

package/src/app/layouts/useDefaultLayoutLogic.ts

@@ -1,11 +1,11 @@
-import { computed, ref, onMounted, watch } from 'vue';
+import { computed, onMounted, watch, ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useWindowSize } from 'vue-window-size';
 import { useSystemStore } from 'src/entities/System/model';
 import { useSessionStore } from 'src/entities/Session';
 import { useCurrentUser } from 'src/entities/Session';
-import { useCooperativeStore } from 'src/entities/Cooperative';
+import { useDesktopStore } from 'src/entities/Desktop/model';
 
 export function useDefaultLayoutLogic() {
   const $q = useQuasar();
@@ -13,12 +13,18 @@ export function useDefaultLayoutLogic() {
   const route = useRoute();
   const session = useSessionStore();
   const currentUser = useCurrentUser();
-  const cooperativeStore = useCooperativeStore();
   const system = useSystemStore();
+  const desktop = useDesktopStore();
 
-  cooperativeStore.loadContacts();
+  // Теперь используем состояние из desktop store
+  const leftDrawerOpen = computed({
+    get: () => desktop.leftDrawerOpen,
+    set: (value: boolean) => desktop.setLeftDrawerOpen(value),
+  });
+
+  // Переменная для управления видимостью правого drawer
+  const rightDrawerOpen = ref(true);
 
-  const leftDrawerOpen = ref(true);
   const isMobile = computed(() => width.value < 768);
   const isDark = computed(() => $q.dark.isActive);
   const headerClass = computed(() =>
@@ -37,29 +43,31 @@ export function useDefaultLayoutLogic() {
   );
 
   const footerText = computed(() => {
-    const c = cooperativeStore.contacts;
-    const d = c?.details;
-    return d
-      ? `${c.full_name}, ИНН: ${d.inn}, ОГРН: ${d.ogrn}, телефон: ${c.phone}, почта: ${c.email}`
-      : '';
+    const info = system.info;
+    return `${info.contacts?.full_name}, ИНН: ${info.contacts?.details.inn}, ОГРН: ${info.contacts?.details.ogrn}, телефон: ${info.contacts?.phone}, почта: ${info.contacts?.email}`;
   });
 
   onMounted(() => {
     if (isMobile.value || !loggedIn.value) {
-      leftDrawerOpen.value = false;
+      desktop.setLeftDrawerOpen(false);
     }
   });
 
   watch(loggedIn, (v) => {
-    leftDrawerOpen.value = v;
+    desktop.setLeftDrawerOpen(v);
   });
 
   const toggleLeftDrawer = () => {
-    leftDrawerOpen.value = !leftDrawerOpen.value;
+    desktop.toggleLeftDrawer();
+  };
+
+  const toggleRightDrawer = () => {
+    rightDrawerOpen.value = !rightDrawerOpen.value;
   };
 
   return {
     leftDrawerOpen,
+    rightDrawerOpen,
     isMobile,
     loggedIn,
     isRegistrationComplete,
@@ -67,5 +75,6 @@ export function useDefaultLayoutLogic() {
     headerClass,
     footerText,
     toggleLeftDrawer,
+    toggleRightDrawer,
   };
 }

package/src/app/layouts/widget.vue

@@ -0,0 +1,261 @@
+<template lang="pug">
+q-layout(view='hHh lpR fFf', :class='layoutClass')
+  // Упрощенный header только если разрешен
+  q-header(v-if='!config.hideHeader', :class='headerClass')
+    q-toolbar
+      q-toolbar-title(v-if='pageTitle') {{ pageTitle }}
+
+      // Кнопка назад если включена навигация
+      q-btn(
+        v-if='!config.disableNavigation && canGoBack',
+        flat,
+        dense,
+        round,
+        icon='arrow_back',
+        @click='goBack'
+      )
+
+  // Основной контент без footer
+  q-page-container
+    q-page.widget-page
+      // Индикатор загрузки при смене workspace
+      .absolute-full.flex.flex-center.z-top(v-if='desktop.isWorkspaceChanging')
+        q-spinner(size='2em', color='primary')
+
+      // Основной контент
+      router-view(v-else)
+
+  // Упрощенный footer только если разрешен
+  q-footer(v-if='!config.hideFooter', :class='footerClass')
+    q-toolbar.justify-center
+      .text-caption {{ footerText }}
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useDesktopStore } from 'src/entities/Desktop/model';
+import { useWidgetBridge } from 'src/shared/lib/widget/use-widget-bridge';
+import { useSystemStore } from 'src/entities/System/model';
+
+// Подключаем widget bridge
+const {
+  isWidget,
+  isReady,
+  widgetData,
+  config,
+  sendError,
+  sendNavigation,
+  sendResize,
+} = useWidgetBridge({
+  hideHeader: true,
+  hideFooter: true,
+  disableNavigation: false,
+});
+
+const route = useRoute();
+const router = useRouter();
+const desktop = useDesktopStore();
+const { info } = useSystemStore();
+
+// Вычисляемые свойства
+const layoutClass = computed(() => ({
+  'widget-layout': true,
+  'widget-layout--ready': isReady.value,
+  'widget-layout--no-header': config.hideHeader,
+  'widget-layout--no-footer': config.hideFooter,
+  [`widget-layout--theme-${config.theme}`]: true,
+}));
+
+const headerClass = computed(() => ({
+  'widget-header': true,
+  'bg-primary': config.theme === 'light',
+  'bg-dark': config.theme === 'dark',
+  'text-white': true,
+}));
+
+const footerClass = computed(() => ({
+  'widget-footer': true,
+  'bg-grey-3': config.theme === 'light',
+  'bg-grey-8': config.theme === 'dark',
+}));
+
+const pageTitle = computed(() => {
+  return route.meta?.title || info.coopname || 'Виджет';
+});
+
+const canGoBack = computed(() => {
+  const historyState = router.options.history.state;
+  return (
+    historyState &&
+    typeof historyState.position === 'number' &&
+    historyState.position > 0
+  );
+});
+
+const footerText = computed(() => {
+  return info.coopname || 'Цифровой Кооператив';
+});
+
+// Методы
+function goBack() {
+  if (canGoBack.value) {
+    router.back();
+  }
+}
+
+// Отправка данных о навигации
+watch(
+  route,
+  (newRoute) => {
+    if (isWidget.value && isReady.value) {
+      sendNavigation(newRoute.fullPath);
+    }
+  },
+  { immediate: true },
+);
+
+// Обработка ошибок
+const originalConsoleError = console.error;
+console.error = (...args) => {
+  originalConsoleError.apply(console, args);
+
+  if (isWidget.value && isReady.value) {
+    sendError({
+      message: args.join(' '),
+      source: 'console',
+      timestamp: Date.now(),
+    });
+  }
+};
+
+// Обработка данных виджета
+watch(widgetData, (newData) => {
+  if (newData) {
+    console.log('[Widget Layout] Received data:', newData);
+    // Здесь можно обработать входящие данные
+  }
+});
+
+// Автоматическое обновление размеров при изменении контента
+onMounted(() => {
+  if (isWidget.value) {
+    // Наблюдаем за изменениями DOM
+    const observer = new MutationObserver(() => {
+      // Небольшая задержка для корректного вычисления размеров
+      setTimeout(() => {
+        const body = document.body;
+        const height = Math.max(
+          body.scrollHeight,
+          body.offsetHeight,
+          document.documentElement.clientHeight,
+          document.documentElement.scrollHeight,
+          document.documentElement.offsetHeight,
+        );
+
+        sendResize({
+          width: body.offsetWidth,
+          height: height,
+        });
+      }, 100);
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    });
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.widget-layout {
+  // Убираем все лишние отступы
+  &.q-layout {
+    min-height: auto;
+  }
+
+  // Компактный header
+  .widget-header {
+    min-height: 40px;
+
+    .q-toolbar {
+      min-height: 40px;
+      padding: 0 8px;
+    }
+  }
+
+  // Компактный footer
+  .widget-footer {
+    min-height: 30px;
+
+    .q-toolbar {
+      min-height: 30px;
+      padding: 0 8px;
+    }
+  }
+
+  // Основная страница виджета
+  .widget-page {
+    padding: 8px;
+
+    // Убираем стандартные отступы если скрыты header/footer
+    &.q-page {
+      min-height: auto;
+    }
+  }
+
+  // Стили для скрытых элементов
+  &.widget-layout--no-header .widget-page {
+    padding-top: 8px;
+  }
+
+  &.widget-layout--no-footer .widget-page {
+    padding-bottom: 8px;
+  }
+
+  // Темы
+  &.widget-layout--theme-light {
+    background: white;
+    color: #1a1a1a;
+  }
+
+  &.widget-layout--theme-dark {
+    background: #1a1a1a;
+    color: white;
+  }
+
+  // Состояние готовности
+  &.widget-layout--ready {
+    opacity: 1;
+    transition: opacity 0.3s ease;
+  }
+
+  &:not(.widget-layout--ready) {
+    opacity: 0.7;
+  }
+}
+
+// Глобальные стили для виджета
+:deep(.q-layout__section--marginal) {
+  // Уменьшаем отступы для всех секций
+  z-index: 1;
+}
+
+:deep(.q-page-container) {
+  // Убираем лишние отступы
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+// Убираем скроллбары для iframe
+:deep(html) {
+  overflow: hidden;
+}
+
+:deep(body) {
+  overflow: hidden;
+}
+</style>