Fix script paths and move assets to public/ folder for Vite build compatibility
This commit is contained in:
Marcos
304
public/docs-historicos/GUIA-VISUAL-ACESSO-DADOS.md
Normal file
304
public/docs-historicos/GUIA-VISUAL-ACESSO-DADOS.md
Normal file
@@ -0,0 +1,304 @@
|
||||
# 🎯 Guia Visual - Como Acessar o Sistema de Dados
|
||||
|
||||
## 📍 Onde Encontrar os Controles
|
||||
|
||||
### 1. **Botão no Header** (Recomendado) 🗄️
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 🏗️ AÇO CALC PRO │
|
||||
│ Plataforma Técnica... │
|
||||
│ │
|
||||
│ [🔍 Buscar] [📖 Manual] [📋 Histórico] [⭐ Favoritos] │
|
||||
│ [⚙️ Admin] [🗄️ Dados] [✅ Cache Ativo] [🎯 Expert] [🌙] │
|
||||
│ ↑ ↑ │
|
||||
│ │ └─ Badge de Status │
|
||||
│ └─ CLIQUE AQUI! │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Localização**: Canto superior direito, botão roxo com ícone 🗄️
|
||||
**Texto**: "Dados"
|
||||
**Cor**: Gradiente roxo (destaca dos outros botões)
|
||||
|
||||
---
|
||||
|
||||
### 2. **Badge de Status do Cache** ✅
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Header Actions: │
|
||||
│ [...] [🗄️ Dados] [✅ Cache Ativo] [🎯 Expert] [🌙] │
|
||||
│ ↑ │
|
||||
│ └─ CLIQUE AQUI TAMBÉM! │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Localização**: Ao lado do botão "Dados"
|
||||
**Estados**:
|
||||
- ⏳ Carregando... (cinza) - Inicializando
|
||||
- ✅ Cache Ativo (verde) - Dados prontos
|
||||
- ❌ Sem Cache (vermelho) - Precisa carregar
|
||||
|
||||
**Ação**: Clique para abrir o painel de administração
|
||||
|
||||
---
|
||||
|
||||
### 3. **Botão Flutuante (FAB)** 🗄️
|
||||
|
||||
```
|
||||
┌─────────┐
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ 🗄️ │ ← CLIQUE AQUI!
|
||||
└─────────┘
|
||||
```
|
||||
|
||||
**Localização**: Canto inferior direito (flutuante)
|
||||
**Cor**: Gradiente roxo
|
||||
**Sempre visível**: Sim, em todas as páginas
|
||||
**Hover**: Gira 15° e aumenta
|
||||
|
||||
---
|
||||
|
||||
### 4. **Atalho de Teclado** ⌨️
|
||||
|
||||
```
|
||||
Ctrl + Shift + D
|
||||
```
|
||||
|
||||
**Funciona**: Em qualquer lugar da aplicação
|
||||
**Ação**: Abre o painel de administração instantaneamente
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Painel de Administração
|
||||
|
||||
Quando você clicar em qualquer um dos controles acima, verá:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 🗄️ Administração de Dados [×] │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 📊 Status do Sistema │
|
||||
│ ┌──────────────────────────────────────────────────────┐ │
|
||||
│ │ Versão: 1.0.0 │ Cache: ✅ Ativo │ Última: hoje │ │
|
||||
│ └──────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ⚡ Ações Rápidas │
|
||||
│ [🔄 Atualizar Todos] [🗑️ Limpar Cache] │
|
||||
│ [📤 Exportar] [🔍 Verificar Integridade] │
|
||||
│ │
|
||||
│ 📋 Status por Tipo de Perfil │
|
||||
│ ┌──────────────────────────────────────────────────────┐ │
|
||||
│ │ Tipo │ Status │ Itens │ Ações │ │
|
||||
│ ├──────────────────────────────────────────────────────┤ │
|
||||
│ │ Cantoneiras │ ✅ Cached │ 39 │ [🔄] [🗑️] │ │
|
||||
│ │ Barras │ ✅ Cached │ 25 │ [🔄] [🗑️] │ │
|
||||
│ │ Tubos │ ❌ Vazio │ 0 │ [🔄] [🗑️] │ │
|
||||
│ │ ... │ ... │ ... │ ... │ │
|
||||
│ └──────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 📝 Log de Atividades │
|
||||
│ ┌──────────────────────────────────────────────────────┐ │
|
||||
│ │ ✅ Última atualização: 08/11/2025 14:30 │ │
|
||||
│ │ 📊 Tipos carregados: 10/10 │ │
|
||||
│ │ ❌ Erros: 0 │ │
|
||||
│ └──────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [Fechar] │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Como Usar - Passo a Passo
|
||||
|
||||
### Primeira Vez:
|
||||
|
||||
1. **Abra a aplicação** no navegador
|
||||
2. **Aguarde** o carregamento (você verá ⏳ Carregando...)
|
||||
3. **Observe** o badge mudar para ✅ Cache Ativo
|
||||
4. **Clique** no botão 🗄️ Dados (header) ou no FAB (canto)
|
||||
5. **Veja** o painel com todas as informações
|
||||
|
||||
### Para Atualizar Dados:
|
||||
|
||||
1. **Clique** em 🗄️ Dados
|
||||
2. **Clique** em "🔄 Atualizar Todos os Dados"
|
||||
3. **Confirme** a ação
|
||||
4. **Aguarde** o processamento
|
||||
5. **Veja** o log de atividades com resultados
|
||||
|
||||
### Para Limpar Cache:
|
||||
|
||||
1. **Clique** em 🗄️ Dados
|
||||
2. **Clique** em "🗑️ Limpar Cache"
|
||||
3. **Confirme** a ação
|
||||
4. **Recarregue** a página (dados serão recarregados)
|
||||
|
||||
### Para Verificar Status:
|
||||
|
||||
1. **Olhe** o badge no header
|
||||
- ✅ Verde = Tudo OK
|
||||
- ❌ Vermelho = Precisa carregar
|
||||
- ⏳ Cinza = Carregando
|
||||
|
||||
2. **Ou clique** em 🗄️ Dados para ver detalhes completos
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Atalhos Rápidos
|
||||
|
||||
| Ação | Método |
|
||||
|------|--------|
|
||||
| Abrir painel | Clique em 🗄️ Dados (header) |
|
||||
| Abrir painel | Clique no FAB (canto inferior direito) |
|
||||
| Abrir painel | Clique no badge ✅ Cache Ativo |
|
||||
| Abrir painel | Pressione `Ctrl + Shift + D` |
|
||||
| Ver status | Olhe o badge no header |
|
||||
| Atualizar dados | Painel → 🔄 Atualizar Todos |
|
||||
| Limpar cache | Painel → 🗑️ Limpar Cache |
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Indicadores Visuais
|
||||
|
||||
### Badge de Status:
|
||||
|
||||
```
|
||||
⏳ Carregando... → Sistema inicializando
|
||||
✅ Cache Ativo → Dados prontos para uso
|
||||
❌ Sem Cache → Precisa carregar dados
|
||||
⚠️ Erro → Problema detectado
|
||||
```
|
||||
|
||||
### Cores:
|
||||
|
||||
```
|
||||
🟢 Verde → Tudo funcionando
|
||||
🔴 Vermelho → Atenção necessária
|
||||
🟡 Amarelo → Carregando/Processando
|
||||
🟣 Roxo → Botões de administração
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 Responsivo
|
||||
|
||||
### Desktop:
|
||||
- ✅ Botão no header
|
||||
- ✅ Badge de status
|
||||
- ✅ FAB no canto
|
||||
- ✅ Atalho de teclado
|
||||
|
||||
### Tablet:
|
||||
- ✅ Botão no header (menor)
|
||||
- ✅ Badge de status
|
||||
- ✅ FAB no canto (menor)
|
||||
|
||||
### Mobile:
|
||||
- ✅ FAB no canto (adaptado)
|
||||
- ⚠️ Header pode estar colapsado
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Personalização
|
||||
|
||||
### Mudar Posição do FAB:
|
||||
|
||||
No `style.css`, procure `.fab-data-admin` e altere:
|
||||
|
||||
```css
|
||||
/* Canto inferior esquerdo */
|
||||
.fab-data-admin {
|
||||
bottom: 24px;
|
||||
left: 24px; /* em vez de right */
|
||||
}
|
||||
|
||||
/* Canto superior direito */
|
||||
.fab-data-admin {
|
||||
top: 24px;
|
||||
right: 24px; /* em vez de bottom */
|
||||
}
|
||||
```
|
||||
|
||||
### Mudar Cor do FAB:
|
||||
|
||||
```css
|
||||
.fab-data-admin {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); /* Vermelho */
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); /* Verde */
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); /* Rosa */
|
||||
}
|
||||
```
|
||||
|
||||
### Desabilitar FAB:
|
||||
|
||||
No `index.html`, remova ou comente:
|
||||
|
||||
```html
|
||||
<!-- Botão Flutuante de Administração de Dados -->
|
||||
<!-- <button class="fab-data-admin" onclick="abrirPainelDados()" ...>...</button> -->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Botão não aparece?
|
||||
1. Verifique se os scripts foram carregados
|
||||
2. Abra console (F12) e procure erros
|
||||
3. Recarregue a página (Ctrl+F5)
|
||||
|
||||
### Badge mostra "Erro"?
|
||||
1. Abra o painel de administração
|
||||
2. Clique em "Verificar Integridade"
|
||||
3. Veja o log de erros
|
||||
4. Tente "Atualizar Todos os Dados"
|
||||
|
||||
### FAB não funciona?
|
||||
1. Verifique se o CSS foi carregado
|
||||
2. Procure por conflitos de z-index
|
||||
3. Teste em modo anônimo do navegador
|
||||
|
||||
### Atalho não funciona?
|
||||
1. Certifique-se de usar `Ctrl + Shift + D` (maiúsculo)
|
||||
2. Verifique se não há conflito com atalhos do navegador
|
||||
3. Teste em outra página da aplicação
|
||||
|
||||
---
|
||||
|
||||
## ✅ Checklist de Verificação
|
||||
|
||||
Após implementar, verifique:
|
||||
|
||||
- [ ] Botão 🗄️ Dados aparece no header
|
||||
- [ ] Badge de status aparece e atualiza
|
||||
- [ ] FAB aparece no canto inferior direito
|
||||
- [ ] Clicar em qualquer controle abre o painel
|
||||
- [ ] Atalho Ctrl+Shift+D funciona
|
||||
- [ ] Painel mostra informações corretas
|
||||
- [ ] Ações do painel funcionam
|
||||
- [ ] Badge atualiza automaticamente
|
||||
- [ ] Visual está consistente com o tema
|
||||
- [ ] Funciona em mobile
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Pronto!
|
||||
|
||||
Agora você tem **4 formas diferentes** de acessar o sistema de administração de dados:
|
||||
|
||||
1. 🗄️ **Botão no Header** (mais visível)
|
||||
2. ✅ **Badge de Status** (informativo)
|
||||
3. 🗄️ **FAB Flutuante** (sempre acessível)
|
||||
4. ⌨️ **Atalho de Teclado** (mais rápido)
|
||||
|
||||
**Escolha o que preferir e comece a usar! 🚀**
|
||||
Reference in New Issue
Block a user