borbad.s5l.ru/vue/app/pages/Page/index.coffee

# Загрузка стилей компонента
document.head.insertAdjacentHTML('beforeend','<style type="text/tailwindcss"  page="Page">'+stylFns['app/pages/Page/index.styl']+'</style>')

module.exports =
    name: 'PageView'
    render: (new Function '_ctx', '_cache', renderFns['app/pages/Page/index.pug'])()
    
    data: ->
        page: null
        loading: true
        error: null
        processedContent: ''
        components: {}
    
    beforeMount: ->
        @loadPageData()
    
    methods:
        # Загрузка данных страницы
        loadPageData: ->
            try
                @loading = true
                pageId = @$route.params.id
                
                if pageId
                    # Загрузка конкретной страницы по ID
                    @page = await AppDB.getDocumentById(pageId)
                else
                    # Загрузка по slug из пути
                    slug = @$route.path.replace(/^\//, '')
                    @page = await @findPageBySlug(slug)
                
                if @page
                    @processPageContent()
                else
                    @error = "Страница не найдена"
                
                @loading = false
                
            catch error
                @error = "Ошибка загрузки страницы: "+error
                @loading = false
        
        # Поиск страницы по slug
        findPageBySlug: (slug) ->
            try
                result = await AppDB.db.query('multilingual_content/published_by_domain_language', {
                    startkey: [_.currentDomain, _.currentLanguage, 'page']
                    endkey: [_.currentDomain, _.currentLanguage, 'page', {}]
                    include_docs: true
                })
                
                for row in result.rows
                    doc = row.doc
                    pageSlug = AppDB.multilingual.getText(doc.slug, '')
                    if pageSlug == slug
                        return AppDB.processMultilingualDocument(doc)
                
                return null
            catch error
                debug.log "Ошибка поиска страницы по slug: "+error
                return null
        
        # Обработка контента с компонентами
        processPageContent: ->
            if not @page?.content
                @processedContent = ''
                return
            
            # Получаем контент для текущего языка
            content = AppDB.multilingual.getText(@page.content, '')
            
            # Обрабатываем компоненты в Markdown
            @processedContent = @parseComponents(content)
        
        # Парсинг компонентов в Markdown
        parseComponents: (content) ->
            # Регулярное выражение для поиска компонентов
            componentPattern = /\[component\s+name="([^"]+)"\s*(?:props='([^']*)')?\s*\]/g
            
            # Заменяем компоненты на HTML-разметку
            processedContent = content.replace componentPattern, (match, componentName, propsJson = '{}') =>
                try
                    props = JSON.parse(propsJson)
                catch
                    props = {}
                
                # Создаем уникальный ID для компонента
                componentId = "component_"+Math.random().toString(36).substr(2, 9)
                
                # Регистрируем компонент для рендеринга
                @components[componentId] = {
                    name: componentName
                    props: props
                }
                
                # Возвращаем placeholder для Vue компонента
                return '<div class="dynamic-component" data-component-id="'+componentId+'"></div>'
            
            return processedContent
        
        # Рендеринг динамических компонентов
        renderDynamicComponents: ->
            elements = document.querySelectorAll('.dynamic-component')
            for element in elements
                componentId = element.getAttribute('data-component-id')
                componentInfo = @components[componentId]
                
                if componentInfo
                    try
                        # Загружаем компонент динамически
                        componentModule = await @loadComponent(componentInfo.name)
                        if componentModule
                            # Создаем и монтируем компонент
                            componentInstance = Vue.createAppComponent(
                                componentModule.default or componentModule
                                componentInfo.props
                            )
                            componentInstance.mount(element)
                    catch error
                        debug.log "Ошибка загрузки компонента "+componentInfo.name+": "+error
        
        # Динамическая загрузка компонента
        loadComponent: (componentName) ->
            # Преобразуем имя компонента в путь
            componentPath = @getComponentPath(componentName)
            try
                return await import(componentPath)
            catch error
                debug.log "Компонент не найден: "+componentPath
                return null
        
        # Получение пути к компоненту
        getComponentPath: (componentName) ->
            # Базовая карта компонентов
            componentMap =
                'HeroSection': '@/app/shared/HeroSection'
                'ImageGallery': '@/app/shared/ImageGallery'
                'ContactForm': '@/app/shared/ContactForm'
                'EventList': '@/app/shared/EventList'
                'Testimonials': '@/app/shared/Testimonials'
            
            return componentMap[componentName] or '@/app/shared/'+componentName
        
        # Получение текста с учетом языка
        getText: (textArray) ->
            return AppDB.multilingual.getText(textArray, '')
    
    mounted: ->
        # Рендерим динамические компоненты после монтирования
        @$nextTick =>
            @renderDynamicComponents()
    
    watch:
        '$route': 'loadPageData'
        '_.currentLanguage': 'loadPageData'