feat: add canvas import from .canvas file
This commit is contained in:
@@ -3,10 +3,16 @@
|
||||
<div class="max-w-7xl mx-auto p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-slate-100">Мои Карты</h1>
|
||||
<div class="flex gap-2">
|
||||
<button @click="triggerImport" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition">
|
||||
Импорт .canvas
|
||||
</button>
|
||||
<input ref="importInput" type="file" accept=".canvas,.json" class="hidden" @change="handleImport" />
|
||||
<button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
|
||||
+ Новая Карта
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="flex gap-1 mb-6 bg-slate-900 rounded-lg p-1 w-fit">
|
||||
@@ -121,6 +127,7 @@ const authFetch = (url, opts = {}) => $fetch(url, {
|
||||
const canvases = ref([])
|
||||
const userGroups = ref([])
|
||||
const showCreateModal = ref(false)
|
||||
const importInput = ref(null)
|
||||
const activeTab = ref('personal')
|
||||
|
||||
const newCanvas = reactive({
|
||||
@@ -203,6 +210,35 @@ const duplicateCanvas = async (id) => {
|
||||
}
|
||||
}
|
||||
|
||||
const triggerImport = () => {
|
||||
importInput.value?.click()
|
||||
}
|
||||
|
||||
const handleImport = async (event) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
try {
|
||||
const text = await file.text()
|
||||
const data = JSON.parse(text)
|
||||
const name = file.name.replace(/\.canvas$|\.json$/, '')
|
||||
const payload = {
|
||||
name,
|
||||
nodes: data.nodes || [],
|
||||
edges: data.edges || [],
|
||||
isPublic: false
|
||||
}
|
||||
const result = await authFetch('/api/canvas', { method: 'POST', body: payload })
|
||||
await loadData()
|
||||
navigateTo(`/canvas/${result.canvas.id}`)
|
||||
} catch (error) {
|
||||
console.error('Failed to import canvas:', error)
|
||||
alert('Ошибка импорта: проверьте формат файла')
|
||||
} finally {
|
||||
event.target.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const exportCanvas = async (id) => {
|
||||
try {
|
||||
const canvas = await authFetch(`/api/canvas/${id}`)
|
||||
|
||||
Reference in New Issue
Block a user