29 lines
1.1 KiB
Vue
29 lines
1.1 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-900 text-gray-200 font-sans">
|
|
<app-header @toggle-help="showHelpModal" />
|
|
<div class="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
<sidebar class="lg:col-span-1" />
|
|
<main-content class="lg:col-span-3" />
|
|
</div>
|
|
<preview-modal ref="previewModalRef" />
|
|
<notification />
|
|
<help-button @show-help="showHelpModal" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import AppHeader from './components/AppHeader.vue';
|
|
import Sidebar from './components/Sidebar.vue';
|
|
import MainContent from './components/MainContent.vue';
|
|
import PreviewModal from './components/PreviewModal.vue';
|
|
import Notification from './components/Notification.vue';
|
|
import HelpButton from './components/HelpButton.vue';
|
|
|
|
const previewModalRef = ref<InstanceType<typeof PreviewModal> | null>(null);
|
|
|
|
const showHelpModal = () => {
|
|
alert('Keyboard Shortcuts:\n\n' + 'Shift + Drag: Fine-tune sprite position\n' + 'Space: Play/Pause animation\n' + 'Esc: Close preview modal\n' + 'Arrow Keys: Navigate frames when paused');
|
|
};
|
|
</script>
|