mirror of
https://github.com/EvolutionAPI/evolution-manager.git
synced 2025-07-12 22:54:49 -06:00
add doc
This commit is contained in:
Gabriel Pastori
parent
2f97ad16f5
commit
3a08a0014a
152
docs/en/index.md
Normal file
152
docs/en/index.md
Normal file
@ -0,0 +1,152 @@
|
||||
# Evolution Manager - README
|
||||
|
||||
## Introduction
|
||||
|
||||
Evolution Manager is an open-source management tool for the Evolution API, designed to streamline the administration and monitoring of instances. It can be accessed online at [Evolution Manager](https://github.com/gabrielpastori1/evolution-manager).
|
||||
|
||||
---
|
||||
|
||||
🇧🇷 **Atenção, Comunidade Brasileira!** 🇧🇷
|
||||
|
||||
Se você é um desenvolvedor ou usuário brasileiro interessado no Evolution Manager, temos boas notícias! Agora você pode acessar a documentação completa do projeto em português. Isso facilitará seu entendimento e uso desta ferramenta incrível. Clique no link abaixo para ler o README em português:
|
||||
|
||||
🔗 [Leia o README em Português](https://github.com/gabrielpastori1/evolution-manager/blob/main/README.pt_BR.md)
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- **Instance Management**: Create, manage, and delete instances.
|
||||
- **Instance Settings**: Customize behavior settings (e.g., disabling calls, always-online mode), webhook integration, RabbitMQ, WebSocket, Chatwoot, and Typebot configurations.
|
||||
- **User Utilities**: Check user numbers, search for conversations, and find groups.
|
||||
|
||||
## Limitations
|
||||
|
||||
- The version hosted on Vercel requires the server to have an SSL certificate.
|
||||
|
||||
## Technology
|
||||
|
||||
- The project is built using Vue.js v3 and Vuetify.
|
||||
|
||||
## Evolution-Manager CLI - Documentation
|
||||
|
||||
For detailed information on how to use the Evolution-Manager CLI, please refer to the documentation available at the following links:
|
||||
|
||||
🔗 Full Documentation: [Documentation in English](https://github.com/gabrielpastori1/evolution-manager/blob/main/docs/en/cli.md)
|
||||
|
||||
## Docker Image - Documentation
|
||||
|
||||
For detailed information on using the Docker image, including configurations and examples, please refer to our comprehensive documentation. You will find step-by-step instructions, as well as helpful tips to make the most of the Evolution Manager's Docker image.
|
||||
|
||||
🔗 Full Documentation: [Documentation in English](https://github.com/gabrielpastori1/evolution-manager/tree/main/docs/en/docker.md)
|
||||
|
||||
## Self-Hosted - Evolution Manager CLI and PM2
|
||||
|
||||
### Straight to the Point: Quick Setup with PM2
|
||||
|
||||
To quickly install Evolution Manager globally and set it up with PM2, follow these commands:
|
||||
|
||||
1. **Install Evolution Manager Globally**:
|
||||
|
||||
```bash
|
||||
npm install -g evolution-manager
|
||||
```
|
||||
|
||||
2. **Set Up PM2 for Evolution Manager**:
|
||||
|
||||
```bash
|
||||
evolution-manager pm2 setup
|
||||
```
|
||||
|
||||
These two steps will install the Evolution Manager CLI globally on your system and configure it to run with PM2, a powerful process manager.
|
||||
|
||||
### Installation and Configuration
|
||||
|
||||
These two steps will install the Evolution Manager CLI globally on your system and configure it to run with PM2, a powerful process manager.
|
||||
|
||||
1. **Install Evolution Manager Globally**:
|
||||
- Ensure Node.js and NPM are installed on your system.
|
||||
- Install Evolution Manager globally using NPM to access the CLI (Command Line Interface):
|
||||
|
||||
```bash
|
||||
npm install -g evolution-manager
|
||||
```
|
||||
|
||||
2. **Using the CLI**:
|
||||
- After installation, access the CLI commands by typing `evolution-manager` in your terminal.
|
||||
- Available commands include:
|
||||
- `help`: Displays a list of available commands and their descriptions.
|
||||
- `server`: Server-related operations.
|
||||
- `start [--port=9615]`: Starts the server on the specified port (default: 9615).
|
||||
- `build`: Builds the project.
|
||||
- `pm2`: Manages the process with PM2.
|
||||
- `setup`: Sets up PM2 for the project.
|
||||
- `start`: Starts the service with PM2.
|
||||
- `stop`: Stops the service in PM2.
|
||||
- `restart`: Restarts the service in PM2.
|
||||
- `delete`: Removes the service from PM2.
|
||||
|
||||
3. **Running the Project with PM2**:
|
||||
- To set up and manage the service with PM2, start with the setup command:
|
||||
|
||||
```bash
|
||||
evolution-manager pm2 setup
|
||||
```
|
||||
|
||||
- Then, you can start, stop, restart, or delete the service using the respective `pm2` commands in the CLI.
|
||||
|
||||
These instructions provide a streamlined method for managing Evolution Manager across various systems, utilizing PM2 for efficient service start-up, maintenance, and control.
|
||||
|
||||
## Development Setup
|
||||
|
||||
1. **Prerequisites**: Ensure you have `yarn` installed on your system.
|
||||
2. **Clone the Repository**:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/gabrielpastori1/evolution-manager.git
|
||||
cd evolution-manager
|
||||
```
|
||||
|
||||
3. **Install Dependencies**:
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
4. **Run Development Server**:
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
```
|
||||
|
||||
This will start a local development server. You can access the app at `localhost:8080`.
|
||||
|
||||
## Building the Project
|
||||
|
||||
To build the project for production, run:
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
```
|
||||
|
||||
This will create a `dist` folder with the compiled assets.
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions are an essential part of the Evolution Manager project. Whether you're contributing code, suggestions, or feedback, your input is invaluable. To facilitate contributions, we have included a direct means for donations:
|
||||
|
||||
### Making a Donation
|
||||
|
||||
If you wish to support the project financially, we have provided a QR code for Pix donations. Your generosity helps in maintaining and evolving this open-source tool.
|
||||
|
||||
<img src="https://github.com/gabrielpastori1/evolution-manager/blob/main/src/assets/pix.svg" width="300" alt="Pix Donation QR Code">
|
||||
|
||||
### Contributing Code or Ideas
|
||||
|
||||
We also welcome code contributions and innovative ideas. If you're interested in contributing in this way, please read our contributing guidelines for more information on how to get started.
|
||||
|
||||
Your support, in any form, makes a significant difference and is greatly appreciated. Thank you for being a part of the Evolution Manager community!
|
||||
|
||||
## License
|
||||
|
||||
This project is open-source and available under the [MIT License](LICENSE.md).
|
||||
@ -1,7 +1,9 @@
|
||||
# Evolution-Manager CLI
|
||||
|
||||
## Instalação
|
||||
|
||||
Para instalar o Evolution-Manager CLI, execute o seguinte comando:
|
||||
|
||||
```
|
||||
npm install -g evolution-manager
|
||||
```
|
||||
@ -9,14 +11,18 @@ npm install -g evolution-manager
|
||||
## Comandos Disponíveis
|
||||
|
||||
### Geral
|
||||
|
||||
- `help`: Exibe uma lista de comandos disponíveis. Para mais detalhes sobre cada comando, consulte este documento.
|
||||
|
||||
### Server
|
||||
|
||||
- `server start [--port=9615]`: Inicia um servidor temporário no terminal, ideal para execução local. O parâmetro `--port` define a porta do servidor, sendo `9615` o valor padrão.
|
||||
- `server build`: Realiza o build do servidor, mas não o executa. (Atualmente sem uso específico).
|
||||
|
||||
### PM2
|
||||
|
||||
O CLI interage com o PM2 para gerenciar processos do Evolution Manager.
|
||||
|
||||
- `pm2 setup`: Configura o PM2 para hospedar o Evolution Manager. Se o PM2 não estiver instalado, o CLI o instalará automaticamente.
|
||||
- `pm2 start`: Inicia o processo do Evolution Manager no PM2.
|
||||
- `pm2 stop`: Para o processo do Evolution Manager no PM2.
|
||||
@ -33,10 +39,10 @@ A seção API do Evolution-Manager CLI inclui várias funções para gerenciar a
|
||||
|
||||
Esses comandos fornecem uma interface de linha de comando flexível e poderosa para gerenciar as versões e a configuração do manager na sua instalação da Evolution API.
|
||||
|
||||
|
||||
## Fluxo de Uso Típico
|
||||
|
||||
1. Instale o CLI globalmente.
|
||||
2. Utilize o comando `help` para ver a lista de comandos disponíveis.
|
||||
3. Para hospedar o Evolution Manager, use os comandos sob `PM2`.
|
||||
4. Use o comando `server start` para rodar um servidor temporário localmente.
|
||||
5. Utilize `api setup` para interagir com o projeto "evolution-api" e configurar o manager.
|
||||
5. Utilize `api setup` para interagir com o projeto "evolution-api" e configurar o manager.
|
||||
|
||||
144
docs/pt_br/index.md
Normal file
144
docs/pt_br/index.md
Normal file
@ -0,0 +1,144 @@
|
||||
# Evolution Manager - README
|
||||
|
||||
## Introdução
|
||||
|
||||
O Evolution Manager é uma ferramenta de gerenciamento open-source para a Evolution API, projetada para facilitar a administração e monitoramento de instâncias. Pode ser acessada online em [Evolution Manager](https://github.com/gabrielpastori1/evolution-manager).
|
||||
|
||||
## Funcionalidades
|
||||
|
||||
- **Gerenciamento de Instâncias**: Criação, gerenciamento e exclusão de instâncias.
|
||||
- **Configurações de Instância**: Personalização das configurações de comportamento (por exemplo, desativar chamadas, modo sempre online), integração com webhook, RabbitMQ, WebSocket, Chatwoot e configurações do Typebot.
|
||||
- **Utilitários para Usuários**: Verificação de números de usuários, busca por conversas e grupos.
|
||||
|
||||
## Limitações
|
||||
|
||||
- A versão hospedada na Vercel requer que o servidor tenha um certificado SSL.
|
||||
|
||||
## Tecnologia
|
||||
|
||||
- O projeto é desenvolvido usando Vue.js v3 e Vuetify.
|
||||
|
||||
## Evolution-Manager CLI - Documentação
|
||||
|
||||
Para informações detalhadas sobre como usar o Evolution-Manager CLI, consulte a documentação disponível nos seguintes links:
|
||||
|
||||
🔗 Documentação completa: [Documentação em Português](https://github.com/gabrielpastori1/evolution-manager/blob/main/docs/pt_br/cli.md)
|
||||
|
||||
## Imagem Docker - Documentação
|
||||
|
||||
Para obter informações detalhadas sobre como usar a imagem Docker, incluindo configurações e exemplos, acesse a nossa documentação completa. Você encontrará instruções passo a passo, bem como dicas úteis para maximizar o uso da imagem Docker do Evolution Manager.
|
||||
|
||||
🔗 Documentação completa: [Documentação em Português](https://github.com/gabrielpastori1/evolution-manager/tree/main/docs/pt_br/docker.md)
|
||||
|
||||
---
|
||||
|
||||
## Auto-Hospedagem - CLI e PM2 do Evolution Manager
|
||||
|
||||
### Direto ao Ponto: Configuração Rápida com PM2
|
||||
|
||||
Para instalar rapidamente o Evolution Manager globalmente e configurá-lo com o PM2, siga estes comandos:
|
||||
|
||||
1. **Instalar o Evolution Manager Globalmente**:
|
||||
|
||||
```bash
|
||||
npm install -g evolution-manager
|
||||
```
|
||||
|
||||
2. **Configurar PM2 para o Evolution Manager**:
|
||||
|
||||
```bash
|
||||
evolution-manager pm2 setup
|
||||
```
|
||||
|
||||
Estes dois passos instalarão o CLI do Evolution Manager globalmente em seu sistema e o configurarão para funcionar com o PM2, um gerenciador de processos poderoso.
|
||||
|
||||
### Instalação e Configuração
|
||||
|
||||
Esses dois passos instalarão o CLI do Evolution Manager globalmente em seu sistema e o configurarão para funcionar com o PM2, um gerenciador de processos poderoso.
|
||||
|
||||
1. **Instalar o Evolution Manager Globalmente**:
|
||||
- Certifique-se de ter o Node.js e o NPM instalados em seu sistema.
|
||||
- Instale o Evolution Manager globalmente usando o NPM para acessar o CLI (Interface de Linha de Comando):
|
||||
|
||||
```bash
|
||||
npm install -g evolution-manager
|
||||
```
|
||||
|
||||
2. **Usando o CLI**:
|
||||
- Após a instalação, acesse os comandos do CLI digitando `evolution-manager` em seu terminal.
|
||||
- Os comandos disponíveis incluem:
|
||||
- `help`: Exibe uma lista de comandos disponíveis e suas descrições.
|
||||
- `server`: Operações relacionadas ao servidor.
|
||||
- `start [--port=9615]`: Inicia o servidor na porta especificada (padrão: 9615).
|
||||
- `build`: Constrói o projeto.
|
||||
- `pm2`: Gerencia o processo com o PM2.
|
||||
- `setup`: Configura o PM2 para o projeto.
|
||||
- `start`: Inicia o serviço com o PM2.
|
||||
- `stop`: Para o serviço no PM2.
|
||||
- `restart`: Reinicia o serviço no PM2.
|
||||
- `delete`: Remove o serviço do PM2.
|
||||
|
||||
3. **Executando o Projeto com o PM2**:
|
||||
- Para configurar e gerenciar o serviço com o PM2, comece com o comando de configuração:
|
||||
|
||||
```bash
|
||||
evolution-manager pm2 setup
|
||||
```
|
||||
|
||||
- Em seguida, você pode iniciar, parar, reiniciar ou excluir o serviço usando os respectivos comandos `pm2` no CLI.
|
||||
|
||||
Estas instruções fornecem um método simplificado para gerenciar o Evolution Manager em vários sistemas, utilizando o PM2 para um eficiente início de serviço
|
||||
|
||||
## Configuração para Desenvolvimento
|
||||
|
||||
1. **Pré-requisitos**: Certifique-se de ter o `yarn` instalado no seu sistema.
|
||||
2. **Clonar o Repositório**:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/gabrielpastori1/evolution-manager.git
|
||||
cd evolution-manager
|
||||
```
|
||||
|
||||
3. **Instalar Dependências**:
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
4. **Executar o Servidor de Desenvolvimento**:
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Isso iniciará um servidor de desenvolvimento local. Você pode acessar o aplicativo em `localhost:8080`.
|
||||
|
||||
## Construção do Projeto
|
||||
|
||||
Para construir o projeto para produção, execute:
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
```
|
||||
|
||||
Isso criará uma pasta `dist` com os ativos compilados.
|
||||
|
||||
## Contribuindo
|
||||
|
||||
As contribuições são uma parte essencial do projeto Evolution Manager. Seja contribuindo com código, sugestões ou feedback, sua participação é inestimável. Para facilitar as contribuições, incluímos um meio direto para doações:
|
||||
|
||||
### Fazendo uma Doação
|
||||
|
||||
Se desejar apoiar o projeto financeiramente, disponibilizamos um QR code para doações via Pix. Sua generosidade ajuda na manutenção e evolução desta ferramenta de código aberto.
|
||||
|
||||
<img src="https://github.com/gabrielpastori1/evolution-manager/blob/main/src/assets/pix.svg" width="300" alt="QR Code para Doação Pix">
|
||||
|
||||
### Contribuindo com Código ou Ideias
|
||||
|
||||
Também recebemos contribuições de código e ideias inovadoras. Se você tem interesse em contribuir dessa forma, por favor, leia nossas diretrizes de contribuição para mais informações sobre como começar.
|
||||
|
||||
Seu apoio, de qualquer forma, faz uma grande diferença e é muito apreciado. Obrigado por fazer parte da comunidade Evolution Manager!
|
||||
|
||||
## Licença
|
||||
|
||||
Este projeto é de código aberto e está disponível sob a [Licença MIT](LICENSE.md).
|
||||
17
package.json
17
package.json
@ -16,21 +16,22 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "7.0.96",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"axios": "^1.6.0",
|
||||
"core-js": "^3.29.0",
|
||||
"eslint": "^8.37.0",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
"optimist": "^0.6.1",
|
||||
"pinia": "^2.0.0",
|
||||
"pm2": "^5.3.0",
|
||||
"roboto-fontface": "*",
|
||||
"vue": "^3.2.0",
|
||||
"vue-router": "^4.0.0",
|
||||
"vuetify": "^3.4.0",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"vite-plugin-vuetify": "^1.0.0",
|
||||
"eslint": "^8.37.0",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
"sass": "^1.60.0",
|
||||
"unplugin-fonts": "^1.0.3",
|
||||
"vite": "^4.2.0"
|
||||
"vite": "^4.2.0",
|
||||
"vite-plugin-vuetify": "^1.0.0",
|
||||
"vue": "^3.2.0",
|
||||
"vue-router": "^4.0.0",
|
||||
"vue3-markdown": "^1.1.9",
|
||||
"vuetify": "^3.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
<!-- {{ connection }} -->
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<v-chip
|
||||
v-else-if="AppStore.validConnection"
|
||||
color="success"
|
||||
style="max-width: 40vw"
|
||||
style="max-width: 35vw"
|
||||
>
|
||||
<v-icon color="success" start> mdi-check-circle </v-icon>
|
||||
{{
|
||||
|
||||
81
src/layouts/doc/AppBar.vue
Normal file
81
src/layouts/doc/AppBar.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<v-app-bar flat>
|
||||
<v-app-bar-title class="flex-shrink-0">
|
||||
<v-btn @click="drawer = !drawer" icon>
|
||||
<v-icon>mdi-menu</v-icon>
|
||||
</v-btn>
|
||||
<v-btn variant="text" @click="$router.push({ name: 'doc' })">
|
||||
<v-img src="@/assets/logo.png" height="24" width="24" class="mr-2" />
|
||||
Evolution Doc
|
||||
</v-btn>
|
||||
</v-app-bar-title>
|
||||
<v-btn :to="{ name: 'instances' }"> Instâncias </v-btn>
|
||||
<v-btn @click="toggleTheme" icon>
|
||||
<v-icon>mdi-{{ dark ? "white-balance-sunny" : "weather-night" }}</v-icon>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer :width="200" v-model="drawer">
|
||||
<v-select
|
||||
:value="lang"
|
||||
:items="lang_list"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
density="compact"
|
||||
hide-details="auto"
|
||||
class="ma-1"
|
||||
@update:model-value="DocStore.setLang"
|
||||
/>
|
||||
<v-list-item
|
||||
title="Documentação"
|
||||
subtitle="Evolution-Manager"
|
||||
></v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item
|
||||
link
|
||||
:title="doc"
|
||||
v-for="doc in docs"
|
||||
:key="doc"
|
||||
:to="{ name: 'doc', params: { doc } }"
|
||||
/>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useTheme } from "vuetify";
|
||||
import { useDocStore } from "@/store/doc";
|
||||
export default {
|
||||
name: "AppBar",
|
||||
data: () => ({
|
||||
theme: useTheme(),
|
||||
drawer: false,
|
||||
lang_list: [
|
||||
{ title: "Português", value: "pt_br" },
|
||||
{ title: "English", value: "en" },
|
||||
],
|
||||
DocStore: useDocStore(),
|
||||
}),
|
||||
methods: {
|
||||
toggleTheme() {
|
||||
const theme = this.theme.global.current.dark ? "light" : "dark";
|
||||
this.theme.global.name = theme;
|
||||
localStorage.setItem("theme", theme);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
lang() {
|
||||
return this.DocStore.lang;
|
||||
},
|
||||
docs() {
|
||||
return Object.keys(this.DocStore.docs).filter((doc) => doc !== "index");
|
||||
},
|
||||
dark() {
|
||||
return this.theme.global.current.dark;
|
||||
},
|
||||
files() {},
|
||||
},
|
||||
mounted() {
|
||||
this.DocStore.loadDocs();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
53
src/layouts/doc/AppFooter.vue
Normal file
53
src/layouts/doc/AppFooter.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<v-footer absolute app class="mt-10">
|
||||
<div class="d-flex flex-grow-1 flex-wrap gap-y-1 align-end">
|
||||
<div class="flex-shrink-0 d-flex gap-2 align-center">
|
||||
<v-btn
|
||||
@click="about"
|
||||
variant="tonal"
|
||||
size="small"
|
||||
color="blue"
|
||||
>
|
||||
<v-icon start> mdi-information </v-icon>
|
||||
Sobre
|
||||
</v-btn>
|
||||
<v-btn
|
||||
@click="contribute"
|
||||
variant="tonal"
|
||||
size="small"
|
||||
color="light-blue-lighten-1"
|
||||
>
|
||||
<v-icon start>mdi-hand-coin</v-icon>
|
||||
Contribua com o projeto
|
||||
</v-btn>
|
||||
<p style="font-size: 12px" class="text-disabled">v{{ version }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-footer>
|
||||
<Contribute ref="contribute" />
|
||||
<About ref="about" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import About from "@/components/modal/About.vue";
|
||||
import Contribute from "@/components/modal/Contribute.vue";
|
||||
import { version } from "../../../package.json";
|
||||
|
||||
export default {
|
||||
name: "AppFooter",
|
||||
data: () => ({
|
||||
version,
|
||||
}),
|
||||
methods: {
|
||||
about() {
|
||||
this.$refs.about.open();
|
||||
},
|
||||
contribute() {
|
||||
this.$refs.contribute.open();
|
||||
},
|
||||
},
|
||||
components: { Contribute, About },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
16
src/layouts/doc/Index.vue
Normal file
16
src/layouts/doc/Index.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<doc-bar />
|
||||
|
||||
<doc-view />
|
||||
|
||||
<doc-footer />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import DocBar from "./AppBar.vue";
|
||||
import DocView from "./View.vue";
|
||||
import DocFooter from "./AppFooter.vue";
|
||||
</script>
|
||||
11
src/layouts/doc/View.vue
Normal file
11
src/layouts/doc/View.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<v-main>
|
||||
<v-container>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//
|
||||
</script>
|
||||
@ -21,6 +21,23 @@ const routes = [
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
path: BASE_URL + 'doc',
|
||||
component: () => import('@/layouts/doc/Index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: ':doc',
|
||||
name: 'doc',
|
||||
component: () => import('@/views/Doc.vue'),
|
||||
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
name: 'doc.index',
|
||||
component: () => import('@/views/Doc.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
redirect: BASE_URL,
|
||||
|
||||
@ -85,7 +85,8 @@ export const useAppStore = defineStore('app', {
|
||||
this.instancesList = []
|
||||
this.instancesKeys = {}
|
||||
this.connectionsList = []
|
||||
window.localStorage.clear();
|
||||
this.saveLocalStorage()
|
||||
|
||||
},
|
||||
|
||||
async reconnect() {
|
||||
|
||||
65
src/store/doc.js
Normal file
65
src/store/doc.js
Normal file
@ -0,0 +1,65 @@
|
||||
// Utilities
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
|
||||
export const useDocStore = defineStore('doc', {
|
||||
getters: {
|
||||
lang: (state) => state.language,
|
||||
},
|
||||
state: () => ({
|
||||
language: 'pt_br',
|
||||
languages: [],
|
||||
docs: {},
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async setLang(lang) {
|
||||
this.language = lang;
|
||||
},
|
||||
async loadDocs() {
|
||||
try {
|
||||
const { languages, docs } = getFileTree();
|
||||
this.languages = languages;
|
||||
this.docs = docs;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
async loadDoc(path) {
|
||||
try {
|
||||
debugger;
|
||||
const { language } = this;
|
||||
const doc = this.docs[path]
|
||||
const content = await doc[language]();
|
||||
return {
|
||||
content,
|
||||
language,
|
||||
};
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
throw new Error('Documento não encontrado');
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Function to get the file tree from @doc
|
||||
function getFileTree() {
|
||||
const tree = import.meta.glob('@docs/**/*.{md,mdx}', { as: 'raw'})
|
||||
const docsFiles = {}
|
||||
const languages = new Set()
|
||||
|
||||
Object.entries(tree).forEach(([path, imprt]) => {
|
||||
const [, , lang, ...rest] = path.split('/')
|
||||
languages.add(lang)
|
||||
|
||||
const filename = rest.join('/').replace(/\.mdx?$/, '')
|
||||
docsFiles[filename] = docsFiles[filename] || {}
|
||||
docsFiles[filename][lang] = imprt
|
||||
})
|
||||
|
||||
return {
|
||||
languages: Array.from(languages),
|
||||
docs: docsFiles,
|
||||
}
|
||||
}
|
||||
75
src/views/Doc.vue
Normal file
75
src/views/Doc.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<v-card elevation="0" :loading="loading">
|
||||
<VMarkdownView
|
||||
v-if="!error"
|
||||
:mode="dark ? 'dark' : 'light'"
|
||||
:content="content"
|
||||
></VMarkdownView>
|
||||
|
||||
<div v-else>
|
||||
<v-alert type="error" outlined>
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VMarkdownView } from "vue3-markdown";
|
||||
import "vue3-markdown/dist/style.css";
|
||||
import { useDocStore } from "@/store/doc";
|
||||
export default {
|
||||
components: {
|
||||
VMarkdownView,
|
||||
},
|
||||
data: () => ({
|
||||
drawer: false,
|
||||
lang_list: [
|
||||
{ title: "Português", value: "pt_br" },
|
||||
{ title: "English", value: "en" },
|
||||
],
|
||||
DocStore: useDocStore(),
|
||||
content: "",
|
||||
error: false,
|
||||
loading: false,
|
||||
}),
|
||||
methods: {
|
||||
async loadDoc(doc) {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.error = false;
|
||||
debugger;
|
||||
const { content } = await this.DocStore.loadDoc(doc || "index");
|
||||
this.content = content;
|
||||
} catch (e) {
|
||||
this.error = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.loadDoc(this.$route.params.doc);
|
||||
},
|
||||
lang() {
|
||||
this.loadDoc(this.$route.params.doc);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
lang() {
|
||||
return this.DocStore.lang;
|
||||
},
|
||||
docs() {
|
||||
return this.DocStore.docs;
|
||||
},
|
||||
dark() {
|
||||
return this.theme?.global?.current?.dark;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
debugger;
|
||||
this.loadDoc(this.$route.params.doc);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -17,7 +17,6 @@ export default defineConfig(({ command, mode }) => {
|
||||
vue({
|
||||
template: { transformAssetUrls }
|
||||
}),
|
||||
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
|
||||
vuetify({
|
||||
autoImport: true,
|
||||
styles: {
|
||||
@ -38,7 +37,8 @@ export default defineConfig(({ command, mode }) => {
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
'@docs': fileURLToPath(new URL('./docs', import.meta.url))
|
||||
},
|
||||
extensions: [
|
||||
'.js',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user