publico/.agent
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ajustes de memoria

Browse source
This commit is contained in:
Luiz Silva 2026-07-07 23:31:14 -03:00
parent 768ceb8c1b
commit a3cbd154f5
18 changed files with 449 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

102
global/rules/css-global-betha Normal file
View file

@ -0,0 +1,102 @@
---
type: rule
name: css-global-betha
description: Define o padrão de CSS global com variáveis --bth-* para todos os frontends do ecossistema GOV (QUIPO-FRONT, QUIPO-PORTAL3, AUTENTICACAO-FRONT, QUIPO-CONSOLE)
scope: global
trigger: context_match
priority: alta
updatedAt: "2026-07-02"
---
# Regra: CSS Global Betha — Variáveis `--bth-*`
Todo frontend do ecossistema GOV deve possuir um arquivo CSS global com as variáveis `--bth-*` e reset visual Betha.
## Localização por Frontend
| Frontend | Arquivo | Importado em |
|----------|---------|-------------|
| QUIPO-FRONT | `src/styles/index.css` | `index.tsx` |
| QUIPO-PORTAL3 | `src/styles/globals.css` | `layout.tsx` |
| AUTENTICACAO-FRONT | `src/styles/global.css` | `App.tsx` |
| QUIPO-CONSOLE | `src/styles/global.css` | `main.ts` |
## Variáveis Obrigatórias
```css
:root {
/* Cores primárias */
--bth-primary: #007bff;
--bth-dark: #343a40;
--bth-body-bg: #EBEDF0;
--bth-white: #ffffff;
--bth-border: #dee2e6;
/* Texto */
--bth-text: #212529;
--bth-text-muted: #495057;
--bth-secondary: #6c757d;
/* Semânticas */
--bth-success: #28a745;
--bth-danger: #dc3545;
--bth-warning: #ffc107;
--bth-info: #17a2b8;
/* Utilitárias */
--bth-light-bg: #f8f9fa;
--bth-border-radius: 0.25rem;
--bth-font: "Open Sans", Arial, sans-serif;
--bth-shadow-sm: 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
--bth-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
/* Seleção de itens (cartões interativos) */
--bth-selected-bg: #cce5ff;
--bth-selected-hover: #b8daff;
}
```
## Reset Global Obrigatório
```css
body {
font-family: var(--bth-font);
font-size: 0.875rem; /* 14px */
background-color: var(--bth-body-bg);
color: var(--bth-text);
margin: 0;
}
/* Scrollbar personalizada */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6c757d; }
```
## Fonte Open Sans
- **QUIPO-PORTAL3:** usa `@fontsource/open-sans` (npm package) — sem request externo
- **Outros frontends:** importar via `<link>` no `index.html`:
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet" />
```
## Regras
✅ **Correto:** usar `var(--bth-primary)` nos componentes
✅ **Correto:** o arquivo global é a única fonte das variáveis — componentes não redeclaram
❌ **Incorreto:** declarar cores hardcoded (`#007bff`, `#343a40`) diretamente nos componentes
❌ **Incorreto:** ter `--bth-*` duplicadas em múltiplos arquivos CSS
## Impacto
Garante consistência visual entre todos os frontends e facilita troca de tema — alterar uma variável reflete em todo o sistema.
## Referências
- Memória: https://memoria-ia.idz.one (código: 63)
- Rule: `estilos-design-system`

85
global/rules/estilos-design-system
View file

@ -4,7 +4,7 @@ name: estilos-design-system
description: Define os dois design systems do ecossistema e-licencie — Floreta (iniciativa privada) e Betha (governo) — e quando usar cada um
scope: global
trigger: always
updatedAt: "2026-07-01"
updatedAt: "2026-07-02"
---
# Regra: Estilos e Design Systems do Ecossistema
@ -110,15 +110,96 @@ Usado em: aplicações integradas à plataforma Betha (gestão municipal, e-Gov)
- Interfaces que operam dentro do ecossistema e-Gov Betha
- Aplicações web com `body class="suite-pla iv"`
### Tokens Reais — Ecossistema GOV (React/MUI)
Os frontends React (QUIPO-FRONT, QUIPO-PORTAL3, AUTENTICACAO-FRONT) usam estes tokens via MUI ThemeProvider:
| Token | Hex | Uso |
|-------|-----|-----|
| primary | `#007bff` | botões, links, destaques |
| primary dark | `#0069d9` | hover de botões primários |
| secondary | `#6c757d` | ações secundárias |
| dark (header) | `#343a40` | header de telas, DialogTitle, navbar |
| body bg | `#EBEDF0` | background da aplicação |
| light bg | `#f8f9fa` | DialogActions, cards neutros |
| border | `#dee2e6` | bordas de separadores |
| text | `#212529` | texto principal |
| text muted | `#495057` | texto secundário/labels |
| success | `#28a745` | status positivo |
| danger | `#dc3545` | erro/exclusão |
| warning | `#ffc107` | alerta |
| info | `#17a2b8` | informação |
| e-licencie primary | `#688c00` | substituição de primary quando marca e-licencie ativa |
**Seleção de itens (cartões interativos):**
- Selecionado: `#cce5ff` / hover: `#b8daff`
- Não selecionado: `#f8f9fa` / hover: `#e9ecef`
### Vue 3 + Vuetify — QUIPO-CONSOLE
O QUIPO-CONSOLE usa Vue 3 + Vuetify 3. Configuração do tema em `src/plugins/vuetify.ts`:
```typescript
theme: {
defaultTheme: "bethaTema",
themes: {
bethaTema: {
dark: false,
colors: {
primary: "#007bff",
secondary: "#6c757d",
background: "#EBEDF0",
surface: "#ffffff",
error: "#dc3545",
warning: "#ffc107",
success: "#28a745",
info: "#17a2b8",
}
}
}
}
```
- **Navbar** (`App.vue`): `<v-app-bar flat color="#343a40" theme="dark">`
- **Botões:** sempre `color="primary"` para usar o token do tema
---
## 3. Branding Dinâmico — eBetha() nos Footers
Todos os footers do ecossistema usam a função `eBetha()` para determinar a identidade da empresa exibida:
```typescript
import { eBetha } from "p-ambiente";
// eBetha() == true → Betha Sistemas Ltda, CNPJ 00.456.865/0001-67, Criciúma-SC
// eBetha() == false → Azteca Software LTDA, CNPJ 29.979.144/0001-13, Içara-SC
```
**Arquivos de footer por frontend:**
| Frontend | Arquivo |
|----------|---------|
| QUIPO-FRONT | `src/components/Footer.tsx` e `src/pages/Portal/PortalFooter.tsx` |
| QUIPO-PORTAL3 | `src/components/Footer/Footer.tsx` |
| AUTENTICACAO-FRONT | sem footer próprio |
- O footer exibe sempre a versão da API e do frontend
- O logotipo é condicional: logotipo diferente por marca
---
## Decisão: Como identificar qual estilo usar
1. **Pergunte o contexto:** se o operador não especificar, pergunte se o módulo é para iniciativa privada (Floreta/Vuetify) ou governo (Betha)
2. **Nunca misture:** um módulo usa UM estilo — nunca combine Vuetify com Betha Design
3. **Header identifica:** header azul-escuro com logo "B" = Betha; barra lateral com menu Vuetify = Floreta
3. **Header identifica:** header `#343a40` com logo = Betha; barra lateral com menu Vuetify customizado = Floreta
## Referências
- Betha Design System: https://design.plataforma.betha.cloud/doc/index.html
- Framework Design CDN: https://cdn.betha.cloud/base/g4/design/4.0.0/
- Rule: `css-global-betha` (variáveis --bth-*)
- Rule: `theme-provider-mui-betha` (arquitetura ThemeProvider)
- Rule: `modal-dialog-padrao-betha` (estrutura de modais)
- Memórias: https://memoria-ia.idz.one (códigos: 59, 62, 65)

106
global/rules/modal-dialog-padrao-betha Normal file
View file

@ -0,0 +1,106 @@
---
type: rule
name: modal-dialog-padrao-betha
description: Define a estrutura obrigatória de modais e dialogs MUI no padrão Betha — header escuro, body branco, footer cinza — para os frontends React do ecossistema GOV
scope: global
trigger: context_match
priority: alta
updatedAt: "2026-07-02"
---
# Regra: Padrão Modal/Dialog MUI — Estrutura Betha
Todo modal/dialog nos frontends React do ecossistema GOV deve seguir a estrutura visual Betha: **header escuro + body branco + footer cinza**.
## Estrutura Obrigatória
```typescript
<Dialog
open={open}
onClose={onClose}
PaperProps={{
sx: {
borderRadius: "0.25rem",
boxShadow: "0 0.5rem 1rem rgba(0,0,0,.15)",
}
}}
>
{/* HEADER — escuro */}
<DialogTitle
sx={{
backgroundColor: "#343a40",
color: "#ffffff",
padding: "0.75rem 1rem",
position: "relative",
}}
>
Título do Modal
<IconButton
onClick={onClose}
size="small"
sx={{ position: "absolute", right: 8, top: 8, color: "#ffffff" }}
>
<CloseIcon fontSize="small" />
</IconButton>
</DialogTitle>
{/* BODY — branco */}
<DialogContent sx={{ backgroundColor: "#ffffff", padding: "1rem" }}>
{/* conteúdo */}
</DialogContent>
{/* FOOTER — cinza claro */}
<DialogActions
sx={{
backgroundColor: "#f8f9fa",
borderTop: "1px solid #dee2e6",
padding: "0.75rem 1rem",
}}
>
<Button variant="outlined" color="secondary" onClick={onClose}>
Cancelar
</Button>
<Button variant="contained" color="primary" onClick={onConfirm}>
Confirmar
</Button>
</DialogActions>
</Dialog>
```
## Tokens dos Estilos
| Região | Cor | Hex |
|--------|-----|-----|
| DialogTitle bg | Dark | `#343a40` |
| DialogTitle color | Branco | `#ffffff` |
| DialogContent bg | Branco | `#ffffff` |
| DialogActions bg | Light | `#f8f9fa` |
| DialogActions border | Border | `#dee2e6` |
| Dialog shadow | — | `0 0.5rem 1rem rgba(0,0,0,.15)` |
| Dialog radius | — | `0.25rem` |
## Botões de Ação
| Papel | Variante | Cor |
|-------|---------|-----|
| Cancelar / Fechar | `outlined` | `secondary` |
| Confirmar / Salvar | `contained` | `primary` |
| Destrutivo (excluir) | `contained` | `error` |
## Regras
✅ **Correto:** sempre usar `IconButton` com `CloseIcon` no `DialogTitle` em posição `absolute`
✅ **Correto:** `DialogActions` sempre com `borderTop` e `backgroundColor` cinza
❌ **Incorreto:** header branco ou sem cor de fundo definida
❌ **Incorreto:** botões sem variante e cor explícitas
❌ **Incorreto:** usar `Modal` nu do MUI — sempre usar `Dialog` com as 3 regiões
## Impacto
Evita modais com aparências inconsistentes entre telas e garante conformidade com a identidade visual Betha exigida pelo parceiro.
## Referências
- Memória: https://memoria-ia.idz.one (código: 61)
- Rule: `theme-provider-mui-betha`
- Rule: `estilos-design-system`

91
global/rules/theme-provider-mui-betha Normal file
View file

@ -0,0 +1,91 @@
---
type: rule
name: theme-provider-mui-betha
description: Define a arquitetura centralizada do ThemeProvider MUI Betha nos frontends React do ecossistema GOV (AUTENTICACAO-FRONT, QUIPO-FRONT, QUIPO-PORTAL3)
scope: global
trigger: context_match
priority: alta
updatedAt: "2026-07-02"
---
# Regra: ThemeProvider MUI Centralizado — Arquitetura Betha
Os frontends React do ecossistema GOV usam MUI com tema centralizado. **Nunca criar temas locais em componentes.**
## Arquitetura de Camadas
```
themeOptions.ts
├── tema-betha.ts → createTheme(themeOptions) — marca Betha
├── tema-e-licencie.ts → createTheme({...themeOptions, — marca e-licencie
│ palette: { primary: { main: "#688c00" } }})
└── tema.ts → exporta { tema } baseado em eBetha()
↓
index.tsx / App.tsx
<ThemeProvider theme={tema.tema}>
```
## Tokens do `themeOptions.ts`
```typescript
const themeOptions = {
palette: {
primary: { main: "#007bff", dark: "#0069d9" },
secondary: { main: "#6c757d" },
error: { main: "#dc3545" },
warning: { main: "#ffc107" },
info: { main: "#17a2b8" },
success: { main: "#28a745" },
background:{ default: "#EBEDF0", paper: "#ffffff" },
},
typography: {
fontFamily: '"Open Sans", Arial, sans-serif',
fontSize: 14,
button: { textTransform: "none" },
},
shape: {
borderRadius: 4, // 0.25rem
},
shadows: [
"none",
"0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15)",
// ... MUI padrão para os demais
],
};
```
## Regras
✅ **Correto:** importar `tema` de `styles/tema-betha.ts` quando um componente isolado precisa de ThemeProvider próprio
✅ **Correto:** `themeOptions.ts` é a única fonte de tokens — modificar só lá
❌ **Incorreto:** `createTheme()` vazio ou com tokens hardcoded dentro de componentes
❌ **Incorreto:** múltiplos `ThemeProvider` aninhados com temas distintos
## Exemplo — Componente que precisa de ThemeProvider próprio
```typescript
// ✅ Importar de styles/tema-betha.ts, NUNCA criar novo
import { tema } from "@/styles/tema-betha";
<ThemeProvider theme={tema}>
<Passos />
</ThemeProvider>
```
## AUTENTICACAO-FRONT — Estrutura específica
```
src/_FRONT/Components/Plugins/tema.ts
→ exporta themeBetha e themeELicencie
→ App.tsx decide qual usar via eBetha()
```
## Impacto
Evita divergências visuais entre telas e garante que a troca de marca (Betha ↔ e-licencie) seja controlada por um único ponto.
## Referências
- Memória: https://memoria-ia.idz.one (código: 60)
- Rule: `estilos-design-system`
- Rule: `css-global-betha`