83 lines
5.5 KiB
Markdown
83 lines
5.5 KiB
Markdown
# Layout CyberCore Signer — Design Dual-Theme & Assinatura em Lote
|
||
|
||
O **CyberCore Signer** adota uma interface gráfica que une a ergonomia de hub consolidada no mercado nacional com uma identidade visual moderna, autoral e com suporte dinâmico a **Tema Claro (Light)** e **Tema Escuro (Dark)**.
|
||
|
||
---
|
||
|
||
## 1. Identidade Visual e Filosofia de Design
|
||
|
||
Em conformidade com os requisitos do projeto, a interface **não é uma cópia datada**, mas sim uma evolução:
|
||
1. **Identidade CyberCore:** Logotipo central em cristal tridimensional e escudo criptográfico vetorial (`SvgIcons`), subtítulo "Agente Criptográfico Local • ICP-Brasil" e indicador de segurança em tempo real.
|
||
2. **Badge de Status Ativo:** Exibe o status da porta local (`● Agente Ativo • 127.0.0.1:21325`) com verde esmeralda no modo claro e verde neon no modo escuro.
|
||
3. **Alternador Dinâmico de Temas:** Botão pílula localizado no cabeçalho superior que permite ao usuário alternar instantaneamente entre **Modo Claro** e **Modo Escuro**:
|
||
- Ícone do Sol ☀️ para comutar para o tema Claro.
|
||
- Ícone da Lua 🌙 para comutar para o tema Escuro.
|
||
- Classe gerenciadora centralizada: [`ThemeManager.java`](file:///var/www/cybercore/cybercore-signer/modules/cybercore-ui/src/main/java/br/com/cybercore/signer/ui/theme/ThemeManager.java), que replica a escolha de tema para todos os diálogos secundários.
|
||
|
||
---
|
||
|
||
## 2. Paleta de Cores dos Temas
|
||
|
||
| Componente | Tema Claro (Light) | Tema Escuro (Dark) |
|
||
|---|---|---|
|
||
| **Fundo da Janela** | `#f1f5f9` (Slate suave) | `#0b0f17` (Dark profundo) |
|
||
| **Header Superior** | `#ffffff`, borda `#e2e8f0` | `#121824`, borda `#1e293b` |
|
||
| **Cartões de Ação** | `#ffffff`, borda `#e2e8f0`, hover `#0284c7` | `#131c2e`, borda `#1e293b`, hover `#38bdf8` |
|
||
| **Texto dos Botões** | `#1e293b` (Cinza escuro de alto contraste) | `#f8fafc` (Branco gelo nítido) |
|
||
| **Painel Lateral** | `#ffffff`, borda `#e2e8f0` | `#121824`, borda `#1e293b` |
|
||
| **Badge de Status** | Fundo `#ecfdf5`, texto `#047857`, borda `#10b981` | Fundo `rgba(16, 185, 129, 0.15)`, texto `#34d399` |
|
||
| **Alternador de Tema** | Fundo `#ffffff`, borda `#cbd5e1`, hover `#0284c7` | Fundo `#1e293b`, borda `#334155`, hover `#38bdf8` |
|
||
|
||
---
|
||
|
||
## 3. Grade Central de Ações (Hub 4x3)
|
||
|
||
A interface principal organiza as operações em 12 cartões modernos com cantos arredondados (8px), sombras suaves e ícones vetoriais SVG nítidos:
|
||
|
||
| Posição | Operação | Descrição |
|
||
|---|---|---|
|
||
| (0, 0) | **Assinar PDF** | Assinatura digital de documentos PDF com cálculo de hash SHA-256 e gravação de assinatura. |
|
||
| (1, 0) | **Assinar XML** | Assinatura de documentos XML (estruturas fiscais, NF-e, XMLDSig). |
|
||
| (2, 0) | **Assinar Arquivo** | Assinatura genérica de qualquer arquivo ou binário do sistema. |
|
||
| (3, 0) | **Assinar em Lote** | Processamento simultâneo de múltiplos arquivos com barra de progresso em tempo real. |
|
||
| (0, 1) | **Assinatura Atachada** | Assinatura embutida/anexada ao documento original (CAdES enveloped). |
|
||
| (1, 1) | **Co-Assinar Documento** | Adição de nova assinatura a um documento previamente assinado por outro titular. |
|
||
| (2, 1) | **Carimbo do Tempo** | Integração com protocolo RFC 3161 TSP para prova de anterioridade temporal. |
|
||
| (3, 1) | **Assinatura LTV** | Perfil de Longa Duração com inclusão de cadeia de certificados e carimbos para validade permanente. |
|
||
| (0, 2) | **Validar Assinatura** | Verificação de integridade criptográfica e conformidade do certificado digital. |
|
||
| (1, 2) | **Validar Carimbo** | Verificação da autenticidade e validade temporal de tokens TSR/TSP. |
|
||
| (2, 2) | *(Reservado)* | Espaço reservado para expansões futuras do agente. |
|
||
| (3, 2) | **Sair do Agente** | Encerramento seguro da sessão do agente. |
|
||
|
||
---
|
||
|
||
## 4. Painel Lateral de Utilitários
|
||
|
||
Na coluna lateral direita, o usuário dispõe de atalhos rápidos para operações do sistema:
|
||
|
||
1. **`</> Logs`:** Visualizador de auditoria em tempo real, monitorando requisições locais CCSP/1 e eventos criptográficos.
|
||
2. **`⚙ Configurações`:** Gerenciador de origens web autorizadas, revogação de acessos e opções de PIN.
|
||
3. **`💻 Tutorial`:** Guia passo a passo interativo de uso do assinador e integração web.
|
||
4. **`🗂 Certificados`:** Lista de certificados ICP-Brasil instalados (Windows-MY, A1 e A3) e ferramenta para importação de certificados A1 (`.pfx` / `.p12`).
|
||
5. **`ℹ Sobre`:** Informações de versão, engine JCA/JCE e garantias de privacidade local.
|
||
|
||
---
|
||
|
||
## 5. Assinatura Digital em Lote (`BatchSigningDialog`)
|
||
|
||
A funcionalidade de assinatura em lote permite:
|
||
- Seleção de múltiplos arquivos simultâneos via diálogo de arquivos ou pastas.
|
||
- Visualização de tabela com nome, tamanho e status de cada item em tempo real.
|
||
- Seleção do certificado digital ICP-Brasil desejado (com exibição de titular, CPF/CNPJ, tipo A1/A3 e validade).
|
||
- Escolha da pasta de destino para os arquivos assinados (salvando arquivos `.p7s` correspondentes).
|
||
- Execução assíncrona em thread isolada para manter a interface responsiva durante todo o lote.
|
||
- Compatibilidade automática com o tema ativo (Claro ou Escuro).
|
||
|
||
---
|
||
|
||
## 6. Ícones Vetoriais SVG Nativos (`SvgIcons`)
|
||
|
||
Todos os ícones e o logotipo central em cristal foram construídos via `SVGPath` e primitivas vetoriais JavaFX nativas:
|
||
- **Resolução Infinita:** Perfeita nitidez em monitores Full HD, 2K, 4K e configurações de escala de DPI do Windows (100%, 125%, 150%, 200%).
|
||
- **Sem Dependência de Imagens Rasterizadas:** Sem risco de imagens ausentes ou corrompidas no runtime empacotado.
|