Files
cybercore-signer/docs/serpro-layout-and-batch.md
T

4.8 KiB
Raw Blame History

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, 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 3x2)

A interface principal organiza as operações em 6 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) Assinatura Atachada Assinatura embutida/anexada ao documento original (CAdES enveloped).
(0, 1) Gerenciar Selos Abertura do Designer e Gerenciador de Selos Digitais visuais para PAdES.
(1, 1) Validar Assinatura Verificação de integridade criptográfica e conformidade do certificado digital.
(2, 1) 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.