Customização do Frontend

Introdução e Avisos Importantes

O código do frontend do Z-PRO é aberto e permite customizações para adequá-lo à sua marca.

AVISO: CONHECIMENTO TÉCNICO NECESSÁRIO

• As alterações descritas nesta documentação exigem conhecimento técnico em desenvolvimento Vue.js e administração de servidores Linux.

• Antes de iniciar qualquer procedimento, crie um ponto de restauração (snapshot) completo do seu servidor VPS. Alterações incorretas podem comprometer o funcionamento da sua plataforma.

• Todas as alterações devem ser feitas logado na VPS com o usuário deployzdg. Não realize os procedimentos se estiver logado como root.

• O Z-PRO não se responsabilza com alterações no frontend e suporte para essas personalizações.

Procedimento Obrigatório Após Alterações

Após realizar qualquer modificação nos arquivos do frontend, você precisa "compilar" o código para que as mudanças apareçam na sua aplicação. Siga os passos abaixo:

1. navegar até a pasta do frontend pelo terminal
2. cd zpro.io
3. cd frontend
4. export NODE_OPTIONS=--openssl-legacy-provider && npx quasar build -P -m pwa
5. pm2 restart all
6. limpar os cookies/cache do navegador

---

Guia de Customização por Elemento

Ícones

• Local: frontend/public/icons

• Ação: Gere e substitua os arquivos de ícone nos tamanhos disponíveis nesta pasta.

Logos e Favicon

• Local: frontend/public/

• Ação: Substitua os seguintes arquivos pelos seus:

  • frontend/public/zpro.png

  • frontend/public/favicon.ico

Vídeos e Sons

• Local: frontend/src/assets

• Ação: Substitua os seguintes arquivos:

  • frontend/src/assets/110694.mp4 (Vídeo da tela de login)

  • frontend/src/assets/sound.mp3 (Som de notificação)

  • frontend/src/assets/sound.ogg (Som de notificação)

Nomes da Aplicação

• Ação: Altere o nome "Z-PRO" para o nome da sua marca nos seguintes arquivos e locais:

  • Arquivo: frontend/quasar.conf.js

    name: "Z-PRO",
    short_name: "Z-PRO",
    appId: "Z-PRO",

  • Arquivo: frontend/src/App.vue

    name: 'Z-PRO',

  • Arquivo: frontend/src/index.template.html

    <title>Z-PRO</title>

Cores

• Ação: Altere os códigos hexadecimais de cor (#5c67f2, etc.) nos seguintes arquivos:

  • Arquivo: frontend/src/css/app.sass (Estilos e Fontes)

  • Arquivo: frontend/src/css/quasar.variables.sass (Cores Básicas)

    $primary: #5c67f2
    $secondary: #f5f5f9
    // ...e outras variáveis de cor

  • Arquivo: frontend/src/pages/dashboard/Index.vue (Cores Dashboard)

    background-color: #5c67f2;

  • Arquivo: frontend/src/components/EssentialLink.vue (Borda Esquerda do Menu)

    border-left: 4px solid #5c67f2

  • Arquivo: frontend/src/pages/relatorios/ccListaRelatorios.vue (Bordas dos Relatórios)

    border-left: solid #5c67f2 3px

  • Arquivos: frontend/src/pages/atendimento/ModalLayout.vue e frontend/src/layouts/ModalLayout.vue (Borda do Modal de Atendimento)

    background-color: #5c67f2 !important;

  • Arquivos do Construtor de Chatbot (frontend/src/components/ccFlowBuilder/):

    • panel.vue: paintStyle: { strokeWidth: 3, stroke: '#5c67f2' }

    • node.vue: border-left: 5px solid #5c67f2 !important;

    • mixins.js: stroke: '#5c67f2' e HoverPaintStyle: { stroke: '#5c67f2', ... }

    • jsplumb.js: EndpointStyle: { fill: "#5c67f2" } e PaintStyle: { ..., stroke: "#5c67f2" }

    • defaultFlow.js: paintStyle: { strokeWidth: 3, stroke: '#5c67f2' }

    • index.css: Altere as variáveis CSS como --primary-color: #5c67f2;

---

Precisa de Ajuda Profissional?

Como mencionado, a customização do frontend requer a ajuda de um desenvolvedor com experiência em Vue.js.

Se precisar de indicações, temos uma lista de profissionais e parceiros externos que podem te auxiliar. Para isso, por favor, abra um chamado no departamento "Preciso de indicação de profissional para manutenção e desenvolvimento".