Styling - Estilização

Abordagem Híbrida

1. Tailwind CSS: Layout, espaçamento, tipografia, cores
2. SCSS: Customizações de componentes Naive UI, estilos complexos

---

Classes Utilitárias (Tailwind)

<div class="flex items-center gap-4 p-4 bg-white dark:bg-neutral-800">
  <span class="text-sm text-gray-600 dark:text-gray-300">
    Texto
  </span>
</div>

---

Dark Mode

• Detecção automática via useOsTheme() do Naive UI
• Classes Tailwind: dark:bg-neutral-800, dark:text-white
• Temas customizados em src/theme/index.ts

---

Estilo do componente: <style scoped lang="scss">

Regra: o estilo de um componente mora dentro do próprio .vue, em <style scoped lang="scss">. Não criar arquivo SCSS global por feature/componente (ex.: _agente.scss), estilo de feature é escopado no componente que o usa.

Exceções (e como tratar dentro do próprio componente):

• Conteúdo v-html (ex.: markdown renderizado): scoped não alcança nós injetados por v-html. Use um segundo bloco <style lang="scss"> sem scoped no mesmo componente que renderiza o v-html.
• Internos de Naive UI: alcance via :deep(.n-...) dentro do <style scoped> do componente.
• @keyframes / animation: declarados no mesmo bloco scoped do elemento que os usa (o compilador do Vue reescreve os nomes com o hash do escopo automaticamente).

Arquivos SCSS Modulares (apenas Naive UI / global)

Os partials em src/assets/styles/scss/ são somente para customização global de componentes Naive UI compartilhados, não para estilo de feature/componente da aplicação.

src/assets/styles/scss/
├── _table.scss
├── _select.scss
├── _input.scss
├── _pagination.scss
├── _buttons.scss
├── _dialog.scss
└── _breadcrumb.scss

---

Internacionalização (i18n)

Estrutura de Locales

{
  "global": { "save": "Salvar", "cancel": "Cancelar" },
  "routes": { "dashboard": "Dashboard", "contracts": "Contratos" },
  "contracts": {
    "list": { "title": "Lista de Contratos" }
  }
}

Uso no Template

<span>{{ $t('contracts.list.title') }}</span>

Uso no Script

const { t } = useI18n()
const title = t('contracts.list.title')