src/pages/index.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
 import { usePrefeituraStore } from '@/stores/prefeituraStore'
 import { useAuth } from '@/composables/useAuth'
 import { useFocusLoginInput } from '@/composables/useFocusLoginInput'
 import { useMotion } from '@/composables/useMotion'
+import { avisoService } from '@/services/avisoService'
 
 import bgTutoia from '@/assets/images/bg-tutoia.jpeg'
 
@@ -53,8 +54,8 @@ const heroBgStyle = computed(() => {
 
 const heroHasPhoto = computed(() => !!heroBgUrl.value)
 
-// Dados mockados — conectar ao endpoint /publico/avisos/{dominio} futuramente
-const avisos = ref([
+// ─── FALLBACK — exibido quando nenhum aviso está cadastrado no banco ──────────
+const AVISOS_FALLBACK = [
     {
         id: 1,
         tipo: 'prazo',
@@ -82,7 +83,28 @@ const avisos = ref([
         cor: 'blue',
         acao: null,
     },
-])
+]
+// ─────────────────────────────────────────────────────────────────────────────
+
+const avisos = ref(AVISOS_FALLBACK)
+
+onMounted(async () => {
+    try {
+        const res = await avisoService.listar(prefeitura.dominio)
+        const lista = (res.data ?? []).map(a => ({
+            id: a.id,
+            tipo: a.tipo ?? 'info',
+            icone: a.icone ?? 'pi-info-circle',
+            titulo: a.titulo,
+            descricao: a.descricao,
+            cor: a.cor ?? 'blue',
+            acao: a.acaoLabel ? { label: a.acaoLabel, to: a.acaoLink } : null,
+        }))
+        if (lista.length > 0) avisos.value = lista
+    } catch {
+        // mantém fallback
+    }
+})
 
 const corAviso = {
     amber: { bg: 'bg-amber-50 dark:bg-amber-900/20', borda: 'border-amber-200 dark:border-amber-700/40', icone: 'text-amber-600 dark:text-amber-400', tag: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300' },
@@ -315,12 +337,12 @@ async function continuar() {
                         <div
                             :class="[
                                 'mx-2 rounded-xl border p-4 flex items-start gap-4',
-                                corAviso[aviso.cor].bg,
-                                corAviso[aviso.cor].borda,
+                                (corAviso[aviso.cor] ?? corAviso.blue).bg,
+                                (corAviso[aviso.cor] ?? corAviso.blue).borda,
                             ]"
                         >
                             <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-white shadow-sm">
-                                <i :class="['pi', aviso.icone, 'text-lg', corAviso[aviso.cor].icone]" />
+                                <i :class="['pi', aviso.icone, 'text-lg', (corAviso[aviso.cor] ?? corAviso.blue).icone]" />
                             </div>
                             <div class="flex-1 min-w-0">
                                 <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ aviso.titulo }}</p>

src/services/avisoService.js

@@ -0,0 +1,9 @@
+const FETCH_HEADERS = { 'X-Requested-With': 'fetch' }
+
+export const avisoService = {
+    listar(dominio) {
+        return $fetch(`/api/proxy/publico/avisos/${dominio ?? 'portal'}`, {
+            headers: FETCH_HEADERS,
+        })
+    },
+}