06c212821a
- Updated README.md to reflect new project structure and conventions. - Refactored component imports and paths to align with new layout. - Removed legacy components (AppConfig.vue, AppTopbar.vue) and created new layout components (MainLayout.vue, Sidebar.vue, TopBar.vue). - Implemented warehouse module with components for inventory management (WarehouseDashboard.vue, InventoryTable.vue). - Added composables and services for warehouse logic and API interactions. - Introduced shared components (KpiCard.vue) for KPI display. - Enhanced API service for handling HTTP requests. - Defined TypeScript types for warehouse entities and global application types.
81 lines
4.3 KiB
Vue
81 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import TopBar from './components/layout/TopBar.vue';
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-surface-50 dark:bg-surface-950">
|
|
<TopBar />
|
|
|
|
<div class="p-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-0 mb-4">
|
|
Personalización de Colores
|
|
</h1>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Tarjeta de ejemplo 1 -->
|
|
<div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
|
|
<h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
|
|
Color Primario
|
|
</h2>
|
|
<p class="text-surface-600 dark:text-surface-400 mb-4">
|
|
El color primario azul se usa para botones, enlaces y elementos destacados.
|
|
</p>
|
|
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-600 transition-colors">
|
|
Botón Primario
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tarjeta de ejemplo 2 -->
|
|
<div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
|
|
<h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
|
|
Colores de Superficie
|
|
</h2>
|
|
<p class="text-surface-600 dark:text-surface-400 mb-4">
|
|
Los colores de superficie definen el fondo y los tonos neutros de la aplicación.
|
|
</p>
|
|
<div class="flex gap-2">
|
|
<div class="w-8 h-8 rounded bg-surface-100 dark:bg-surface-800" title="surface-100"></div>
|
|
<div class="w-8 h-8 rounded bg-surface-200 dark:bg-surface-700" title="surface-200"></div>
|
|
<div class="w-8 h-8 rounded bg-surface-300 dark:bg-surface-600" title="surface-300"></div>
|
|
<div class="w-8 h-8 rounded bg-surface-400 dark:bg-surface-500" title="surface-400"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tarjeta de ejemplo 3 -->
|
|
<div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
|
|
<h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
|
|
Modo Oscuro
|
|
</h2>
|
|
<p class="text-surface-600 dark:text-surface-400 mb-4">
|
|
Usa el botón en la barra superior para cambiar entre modo claro y oscuro.
|
|
</p>
|
|
<div class="flex items-center gap-3">
|
|
<i class="pi pi-moon text-2xl text-primary"></i>
|
|
<span class="text-surface-700 dark:text-surface-300">Tema adaptable</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tarjeta de ejemplo 4 -->
|
|
<div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
|
|
<h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
|
|
Personalización
|
|
</h2>
|
|
<p class="text-surface-600 dark:text-surface-400 mb-4">
|
|
Haz clic en el ícono de paleta en la barra superior para cambiar el color de superficie.
|
|
</p>
|
|
<div class="flex items-center gap-3">
|
|
<i class="pi pi-palette text-2xl text-primary"></i>
|
|
<span class="text-surface-700 dark:text-surface-300">5 colores de superficie</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Estilos adicionales si es necesario */
|
|
</style>
|