feat: Add anonymous dynamic canvas option to gallery
This commit is contained in:
@@ -240,7 +240,7 @@ function triggerToolFlash() {
|
||||
}, 500)
|
||||
}
|
||||
|
||||
type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'project-canvas' | 'database' | 'source' | 'terminal' | 'tools'
|
||||
type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'project-canvas' | 'database' | 'source' | 'terminal' | 'tools' | 'agents'
|
||||
|
||||
onMounted(async () => {
|
||||
// Connect to WebSocket for Claude status updates
|
||||
@@ -357,6 +357,10 @@ watch(() => route.name, (newPage) => {
|
||||
<span class="header-canvas-name">{{ projectCanvasStore.activeCanvas.name }}</span>
|
||||
<span v-if="projectCanvasStore.activeCanvas.is_system" class="header-canvas-badge">Sistema</span>
|
||||
</template>
|
||||
<template v-if="canvasStore.isAnonymousCanvas && route.name === 'canvas'">
|
||||
<span class="header-sep">/</span>
|
||||
<span class="header-canvas-name">anonimo</span>
|
||||
</template>
|
||||
<button class="debug-btn" :class="{ active: showDebugConsole }" @click="showDebugConsole = !showDebugConsole" title="Debug Console">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
|
||||
|
||||
@@ -39,10 +39,17 @@ function handleLoadComponent(e: Event) {
|
||||
|
||||
function handleContentRendered() {
|
||||
showGallery.value = false
|
||||
canvasStore.isAnonymousCanvas = false
|
||||
}
|
||||
|
||||
function handleStartAnonymous() {
|
||||
showGallery.value = false
|
||||
canvasStore.isAnonymousCanvas = true
|
||||
}
|
||||
|
||||
function handleClearCanvas() {
|
||||
showGallery.value = true
|
||||
canvasStore.isAnonymousCanvas = false
|
||||
const container = document.getElementById('canvas-content')
|
||||
if (container) {
|
||||
// Remove all non-gallery content
|
||||
@@ -72,7 +79,7 @@ onUnmounted(() => {
|
||||
<div class="canvas-container">
|
||||
<div id="canvas-content" class="canvas-content">
|
||||
<div v-if="showGallery" class="canvas-placeholder">
|
||||
<CanvasGallery @snapshot-restored="showGallery = false" @component-loaded="showGallery = false" />
|
||||
<CanvasGallery @snapshot-restored="showGallery = false" @component-loaded="showGallery = false" @start-anonymous="handleStartAnonymous" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,7 @@ import { useCanvasStore } from '../stores/canvas'
|
||||
const emit = defineEmits<{
|
||||
(e: 'snapshot-restored'): void
|
||||
(e: 'component-loaded'): void
|
||||
(e: 'start-anonymous'): void
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
@@ -223,6 +224,19 @@ onMounted(() => {
|
||||
<template v-else>
|
||||
<!-- Project Canvases -->
|
||||
<div class="gallery-grid">
|
||||
<!-- Anonymous dynamic canvas card -->
|
||||
<div class="canvas-card new-card anon-card" @click="emit('start-anonymous')">
|
||||
<div class="card-icon new-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-name">Dynamic Canvas</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New canvas card -->
|
||||
<div class="canvas-card new-card" @click="showNewForm = true" v-if="!showNewForm">
|
||||
<div class="card-icon new-icon">
|
||||
|
||||
@@ -35,6 +35,7 @@ export const useCanvasStore = defineStore('canvas', () => {
|
||||
const history = ref<HistoryEntry[]>([])
|
||||
const notifications = ref<Notification[]>([])
|
||||
const showHistoryPanel = ref(false)
|
||||
const isAnonymousCanvas = ref(false)
|
||||
|
||||
let notificationId = 0
|
||||
|
||||
@@ -111,6 +112,8 @@ export const useCanvasStore = defineStore('canvas', () => {
|
||||
connectionError,
|
||||
connectionInfo,
|
||||
statusColor,
|
||||
// Canvas mode
|
||||
isAnonymousCanvas,
|
||||
// History & UI
|
||||
history,
|
||||
notifications,
|
||||
|
||||
Reference in New Issue
Block a user