<script setup lang="ts">
|
import type { FieldDefinition } from './domain/types';
|
import type { OnlyOfficeBridge } from './onlyoffice/bridge';
|
|
import { computed, inject, onBeforeUnmount } from 'vue';
|
|
import DocumentFieldList from './components/DocumentFieldList.vue';
|
import FieldEditor from './components/FieldEditor.vue';
|
import OperationStatus from './components/OperationStatus.vue';
|
import { useTemplateAnnotator } from './composables/useTemplateAnnotator';
|
import { useAnnotationStore } from './stores/annotation';
|
import { usePluginContextStore } from './stores/plugin-context';
|
|
const bridge = inject<null | OnlyOfficeBridge>('onlyOfficeBridge', null);
|
const annotator = bridge ? useTemplateAnnotator(bridge) : null;
|
const store = annotator?.store ?? useAnnotationStore();
|
const contextStore = annotator?.contextStore ?? usePluginContextStore();
|
const runtimeStatus = computed(() => (bridge ? store.status : 'error'));
|
const editorDisabled = computed(() => !bridge || store.status !== 'ready' || !contextStore.context?.canAnnotate);
|
const documentFieldsDisabled = computed(() => !bridge || contextStore.status !== 'ready');
|
|
function insert(definition: FieldDefinition): void {
|
void annotator?.insert(definition).catch(() => undefined);
|
}
|
|
function refresh(): void {
|
void annotator?.refresh().catch(() => undefined);
|
}
|
|
function select(internalId: string): void {
|
void annotator?.select(internalId).catch(() => undefined);
|
}
|
|
function deleteControl(internalId: string): void {
|
void annotator?.deleteControl(internalId).catch(() => undefined);
|
}
|
|
onBeforeUnmount(() => annotator?.dispose());
|
</script>
|
|
<template>
|
<main class="plugin-shell">
|
<header class="plugin-header">
|
<OperationStatus :operation="store.operation" :sdk-available="Boolean(bridge)" :status="runtimeStatus" />
|
</header>
|
|
<section class="plugin-section" aria-labelledby="field-editor-title">
|
<h2 id="field-editor-title">字段设置</h2>
|
<FieldEditor :disabled="editorDisabled" @submit="insert" />
|
</section>
|
|
<DocumentFieldList
|
:controls="store.controls"
|
:delete-disabled="editorDisabled"
|
:disabled="documentFieldsDisabled"
|
:status="runtimeStatus"
|
@delete="deleteControl"
|
@refresh="refresh"
|
@select="select"
|
/>
|
</main>
|
</template>
|
