<script setup lang="ts">
|
import type { OperationState, RuntimeStatus } from '../stores/annotation';
|
|
import { computed } from 'vue';
|
|
const props = withDefaults(
|
defineProps<{
|
fatalMessage?: string;
|
operation: OperationState;
|
retryable?: boolean;
|
sdkAvailable?: boolean;
|
status: RuntimeStatus;
|
}>(),
|
{ fatalMessage: 'ONLYOFFICE SDK 未加载，无法初始化插件', retryable: false, sdkAvailable: true },
|
);
|
const emit = defineEmits<{ retry: [] }>();
|
|
const connectionError = computed(() => props.sdkAvailable && props.status === 'error');
|
const connectionErrorMessage = computed(() => (props.operation.kind === 'error' && props.operation.message ? props.operation.message : '插件连接失败'));
|
const connectionStatus = computed<'default' | 'error' | 'processing' | 'success'>(() => {
|
if (props.status === 'ready') return 'success';
|
if (props.status === 'working') return 'processing';
|
if (props.status === 'error') return 'error';
|
return 'default';
|
});
|
const connectionText = computed(() => {
|
if (props.status === 'ready') return '已连接';
|
if (props.status === 'working') return '处理中';
|
if (props.status === 'error') return '连接异常';
|
return '加载中';
|
});
|
</script>
|
|
<template>
|
<div class="operation-status">
|
<div class="status-line">
|
<a-badge class="connection-status" :status="connectionStatus" :text="connectionText" data-test="connection-status" />
|
<span class="plugin-version" data-test="plugin-version">v0.1.0</span>
|
</div>
|
|
<a-result
|
v-if="!sdkAvailable || connectionError"
|
class="fatal-result"
|
status="error"
|
:sub-title="sdkAvailable ? connectionErrorMessage : fatalMessage"
|
:title="sdkAvailable ? '插件连接失败' : '插件无法启动'">
|
<template v-if="sdkAvailable && retryable" #extra>
|
<a-button data-test="retry-initialization" type="primary" @click="emit('retry')">重试</a-button>
|
</template>
|
</a-result>
|
</div>
|
</template>
|
