feat: PluginPage iframe bridge + CallPluginFunction binding
- PluginPage.svelte: bidirectional postMessage bridge with iframe - Handles: ready, get-events, create-event, update-event, delete-event - Queues messages until iframe is ready - Exports handleDrop() for drag-and-drop from parent - CallPluginFunction binding: calls arbitrary Lua functions on active plugins - Supports dotted paths: 'calendar.create_event' → _G.calendar.create_event - JSON params → Lua table conversion - LuaVM: added DoString(), LState(), VM() public methods - Plugin: added VM() getter for external access
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { t } from './i18n'
|
||||
import { onMount, onDestroy } from 'svelte'
|
||||
|
||||
export let sectionId = ''
|
||||
|
||||
@@ -13,6 +12,9 @@
|
||||
let htmlPanel = ''
|
||||
let loading = true
|
||||
let error = ''
|
||||
let iframeEl = null
|
||||
let messageQueue = []
|
||||
let iframeReady = false
|
||||
|
||||
function wailsCall(method, ...args) {
|
||||
try {
|
||||
@@ -24,14 +26,173 @@
|
||||
return Promise.reject(new Error('Wails not connected: ' + method))
|
||||
}
|
||||
|
||||
// Post message to iframe (queue if not ready)
|
||||
function postToIframe(msg) {
|
||||
if (iframeEl && iframeEl.contentWindow && iframeReady) {
|
||||
iframeEl.contentWindow.postMessage(msg, '*')
|
||||
} else {
|
||||
messageQueue.push(msg)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle messages from iframe
|
||||
function handleIframeMessage(e) {
|
||||
const msg = e.data
|
||||
if (!msg || !msg.source || msg.source !== 'calendar-plugin') return
|
||||
|
||||
switch (msg.action) {
|
||||
case 'ready':
|
||||
iframeReady = true
|
||||
// Flush queued messages
|
||||
while (messageQueue.length > 0) {
|
||||
iframeEl.contentWindow.postMessage(messageQueue.shift(), '*')
|
||||
}
|
||||
// Load initial data
|
||||
loadCalendarData()
|
||||
break
|
||||
|
||||
case 'get-events':
|
||||
handleGetEvents(msg.data)
|
||||
break
|
||||
|
||||
case 'create-event':
|
||||
handleCreateEvent(msg.data)
|
||||
break
|
||||
|
||||
case 'update-event':
|
||||
handleUpdateEvent(msg.data)
|
||||
break
|
||||
|
||||
case 'delete-event':
|
||||
handleDeleteEvent(msg.data)
|
||||
break
|
||||
|
||||
default:
|
||||
console.log('[PluginPage] Unknown iframe action:', msg.action)
|
||||
}
|
||||
}
|
||||
|
||||
// Load events + categories from Lua backend and send to iframe
|
||||
async function loadCalendarData() {
|
||||
try {
|
||||
// Get current month range
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth()
|
||||
const start = new Date(year, month, 1).toISOString().slice(0, 10) + 'T00:00:00'
|
||||
const end = new Date(year, month + 1, 0).toISOString().slice(0, 10) + 'T23:59:59'
|
||||
|
||||
const [eventsRaw, categoriesRaw] = await Promise.all([
|
||||
wailsCall('CallPluginAction', pluginName, 'get_events', JSON.stringify({ start, end })),
|
||||
wailsCall('CallPluginAction', pluginName, 'get_categories', '{}'),
|
||||
])
|
||||
|
||||
const events = eventsRaw ? JSON.parse(eventsRaw) : []
|
||||
const categories = categoriesRaw ? JSON.parse(categoriesRaw) : []
|
||||
|
||||
postToIframe({
|
||||
source: 'verstak',
|
||||
type: 'calendar-data',
|
||||
events,
|
||||
categories,
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('[PluginPage] loadCalendarData:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGetEvents(data) {
|
||||
try {
|
||||
const params = JSON.stringify({ start: data.start, end: data.end })
|
||||
const raw = await wailsCall('CallPluginAction', pluginName, 'get_events', params)
|
||||
const events = raw ? JSON.parse(raw) : []
|
||||
postToIframe({
|
||||
source: 'verstak',
|
||||
type: 'calendar-data',
|
||||
events,
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('[PluginPage] get-events:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateEvent(data) {
|
||||
try {
|
||||
const params = JSON.stringify(data)
|
||||
const raw = await wailsCall('CallPluginAction', pluginName, 'create_event', params)
|
||||
const result = raw ? JSON.parse(raw) : {}
|
||||
postToIframe({
|
||||
source: 'verstak',
|
||||
type: 'event-created',
|
||||
event: result,
|
||||
})
|
||||
// Refresh data
|
||||
loadCalendarData()
|
||||
} catch (e) {
|
||||
console.error('[PluginPage] create-event:', e)
|
||||
postToIframe({
|
||||
source: 'verstak',
|
||||
type: 'error',
|
||||
message: String(e),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdateEvent(data) {
|
||||
try {
|
||||
const params = JSON.stringify(data)
|
||||
await wailsCall('CallPluginAction', pluginName, 'update_event', params)
|
||||
postToIframe({
|
||||
source: 'verstak',
|
||||
type: 'event-updated',
|
||||
event: data,
|
||||
})
|
||||
loadCalendarData()
|
||||
} catch (e) {
|
||||
console.error('[PluginPage] update-event:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteEvent(data) {
|
||||
try {
|
||||
const params = JSON.stringify({ id: data.id })
|
||||
await wailsCall('CallPluginAction', pluginName, 'delete_event', params)
|
||||
postToIframe({
|
||||
source: 'verstak',
|
||||
type: 'event-deleted',
|
||||
id: data.id,
|
||||
})
|
||||
loadCalendarData()
|
||||
} catch (e) {
|
||||
console.error('[PluginPage] delete-event:', e)
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
htmlPanel = await wailsCall('GetPluginPanelHTML', pluginName) || ''
|
||||
htmlPanel = (await wailsCall('GetPluginPanelHTML', pluginName)) || ''
|
||||
} catch (e) {
|
||||
error = String(e)
|
||||
}
|
||||
loading = false
|
||||
|
||||
// Listen for messages from iframe
|
||||
window.addEventListener('message', handleIframeMessage)
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
window.removeEventListener('message', handleIframeMessage)
|
||||
})
|
||||
|
||||
// Expose drop handler for parent Svelte components
|
||||
export function handleDrop(data, date) {
|
||||
postToIframe({
|
||||
source: 'verstak',
|
||||
type: 'drop',
|
||||
date: date,
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="plugin-page">
|
||||
@@ -40,11 +201,12 @@
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="loading">{t('common.loading')}</p>
|
||||
<p class="loading">Загрузка…</p>
|
||||
{:else if error}
|
||||
<p class="error">{error}</p>
|
||||
{:else if htmlPanel}
|
||||
<iframe
|
||||
bind:this={iframeEl}
|
||||
class="plugin-frame"
|
||||
srcdoc={htmlPanel}
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
@@ -60,11 +222,11 @@
|
||||
|
||||
<style>
|
||||
.plugin-page { padding: 1.5rem; height: 100%; display: flex; flex-direction: column; }
|
||||
.plugin-page-header { margin-bottom: 1rem; }
|
||||
.plugin-page-header { margin-bottom: 1rem; flex-shrink: 0; }
|
||||
.plugin-page-header h2 { margin: 0; font-size: 1.1rem; color: var(--text, #e0e0e0); }
|
||||
.loading { color: var(--text-dim, #888); }
|
||||
.error { color: #f87171; }
|
||||
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-dim, #888); }
|
||||
.empty-state code { background: var(--surface-alt, #252538); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.85rem; }
|
||||
.plugin-frame { flex: 1; border: 1px solid var(--border, #2a2a3e); border-radius: 8px; background: #fff; width: 100%; min-height: 400px; }
|
||||
.plugin-frame { flex: 1; border: 1px solid var(--border, #2a2a3e); border-radius: 8px; background: #fff; width: 100%; min-height: 400px; display: block; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user