feat: Add anonymous dynamic canvas option to gallery
This commit is contained in:
@@ -240,7 +240,7 @@ function triggerToolFlash() {
|
|||||||
}, 500)
|
}, 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 () => {
|
onMounted(async () => {
|
||||||
// Connect to WebSocket for Claude status updates
|
// 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 class="header-canvas-name">{{ projectCanvasStore.activeCanvas.name }}</span>
|
||||||
<span v-if="projectCanvasStore.activeCanvas.is_system" class="header-canvas-badge">Sistema</span>
|
<span v-if="projectCanvasStore.activeCanvas.is_system" class="header-canvas-badge">Sistema</span>
|
||||||
</template>
|
</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">
|
<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">
|
<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"/>
|
<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() {
|
function handleContentRendered() {
|
||||||
showGallery.value = false
|
showGallery.value = false
|
||||||
|
canvasStore.isAnonymousCanvas = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleStartAnonymous() {
|
||||||
|
showGallery.value = false
|
||||||
|
canvasStore.isAnonymousCanvas = true
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleClearCanvas() {
|
function handleClearCanvas() {
|
||||||
showGallery.value = true
|
showGallery.value = true
|
||||||
|
canvasStore.isAnonymousCanvas = false
|
||||||
const container = document.getElementById('canvas-content')
|
const container = document.getElementById('canvas-content')
|
||||||
if (container) {
|
if (container) {
|
||||||
// Remove all non-gallery content
|
// Remove all non-gallery content
|
||||||
@@ -72,7 +79,7 @@ onUnmounted(() => {
|
|||||||
<div class="canvas-container">
|
<div class="canvas-container">
|
||||||
<div id="canvas-content" class="canvas-content">
|
<div id="canvas-content" class="canvas-content">
|
||||||
<div v-if="showGallery" class="canvas-placeholder">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import { useCanvasStore } from '../stores/canvas'
|
|||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: 'snapshot-restored'): void
|
(e: 'snapshot-restored'): void
|
||||||
(e: 'component-loaded'): void
|
(e: 'component-loaded'): void
|
||||||
|
(e: 'start-anonymous'): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@@ -223,6 +224,19 @@ onMounted(() => {
|
|||||||
<template v-else>
|
<template v-else>
|
||||||
<!-- Project Canvases -->
|
<!-- Project Canvases -->
|
||||||
<div class="gallery-grid">
|
<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 -->
|
<!-- New canvas card -->
|
||||||
<div class="canvas-card new-card" @click="showNewForm = true" v-if="!showNewForm">
|
<div class="canvas-card new-card" @click="showNewForm = true" v-if="!showNewForm">
|
||||||
<div class="card-icon new-icon">
|
<div class="card-icon new-icon">
|
||||||
|
|||||||
@@ -35,6 +35,7 @@ export const useCanvasStore = defineStore('canvas', () => {
|
|||||||
const history = ref<HistoryEntry[]>([])
|
const history = ref<HistoryEntry[]>([])
|
||||||
const notifications = ref<Notification[]>([])
|
const notifications = ref<Notification[]>([])
|
||||||
const showHistoryPanel = ref(false)
|
const showHistoryPanel = ref(false)
|
||||||
|
const isAnonymousCanvas = ref(false)
|
||||||
|
|
||||||
let notificationId = 0
|
let notificationId = 0
|
||||||
|
|
||||||
@@ -111,6 +112,8 @@ export const useCanvasStore = defineStore('canvas', () => {
|
|||||||
connectionError,
|
connectionError,
|
||||||
connectionInfo,
|
connectionInfo,
|
||||||
statusColor,
|
statusColor,
|
||||||
|
// Canvas mode
|
||||||
|
isAnonymousCanvas,
|
||||||
// History & UI
|
// History & UI
|
||||||
history,
|
history,
|
||||||
notifications,
|
notifications,
|
||||||
|
|||||||
Reference in New Issue
Block a user