panels-origin/web-panel/components/AppRibbon.vue
Alberto Martinez 7bcef22d59 Menú agrupado y ribbon tipo mockup
<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
El menú principal deja de ser una lista plana que se parte en dos filas. Queda en una sola barra con iconos a la izquierda y grupos:

- Inicio
- Obra (Proyectos, Presupuesto, Programa de obra, Control costos)
- Operación (Gastos, Almacén, Kanban)
- Personal (Padrón, Gafetes, Nómina)
- Administración (Usuarios)

Configuración y empresas siguen en el menú del avatar. Ayuda duplicada se quitó del menú (queda el botón de la derecha).

El ribbon (Nuevo/Editar) se compacta como tarjeta: icono arriba, grupos, hover suave y Alta en azul.

Validación:
- `npm run build` en `web-panel` completó sin errores.
- Capturas del escritorio en `/proyectos`: menú en una fila, dropdown de Obra y ribbon de Acciones.
<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a href="https://cursor.com/agents/bc-3755a070-b0cd-40ee-b616-7493e3911e5c?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a href="https://cursor.com/background-agent?bcId=bc-3755a070-b0cd-40ee-b616-7493e3911e5c&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>
2026-09-08 16:57:19 +00:00

31 lines
945 B
Vue

<template>
<Toolbar v-if="ribbon.length" class="ribbon">
<template #start>
<div v-for="(group, i) in ribbon" :key="group.key" class="ribbon-cluster">
<Divider v-if="i > 0" layout="vertical" />
<div class="ribbon-group">
<div class="ribbon-group-items">
<Button
v-for="item in group.items"
:key="item.key"
:icon="item.icon"
:label="item.label"
:title="item.title"
:class="['ribbon-action', `ribbon-action--${item.key}`]"
icon-pos="top"
text
size="small"
:disabled="item.disabled"
@click="item.command?.()"
/>
</div>
<div class="ribbon-group-label">{{ group.label }}</div>
</div>
</div>
</template>
</Toolbar>
</template>
<script setup lang="ts">
const { ribbon } = useDesktop();
</script>