jcloud/dashboard/src2/components/AddressableErrorDialog.vue
2025-04-12 17:39:38 +08:00

117 lines
2.5 KiB
Vue

<template>
<Dialog v-if="pg" v-model="show">
<!-- 标题 -->
<template v-slot:body-title>
<h1 class="font-semibold">
{{ pg.title }}
</h1>
</template>
<!-- 消息和堆栈跟踪 -->
<template v-slot:body-content>
<div
:if="pg.message"
v-html="pg.message"
class="flex flex-col gap-2 whitespace-pre-wrap text-p-base text-gray-700"
></div>
<div v-if="pg.traceback" class="relative mt-6">
<button
class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-white p-1 text-xs text-gray-600"
variant="outline"
@click="copyTraceback"
>
{{ copied ? '已复制' : '复制' }}
</button>
<div
class="max-h-48 w-full overflow-scroll rounded-sm border border-gray-200 bg-gray-100 p-3 text-xs text-gray-600"
>
<pre>{{ pg.traceback }}</pre>
</div>
</div>
<ErrorMessage :message="error" class="mt-2"></ErrorMessage>
</template>
<!-- 帮助和完成 -->
<template v-slot:actions>
<div class="flex justify-end gap-5">
<Link v-if="pg.assistance_url" class="cursor-pointer" @click="help">
帮助
</Link>
<Button
v-if="!pg.is_addressed"
variant="solid"
class="w-40"
@click="done"
>
完成
</Button>
</div>
</template>
</Dialog>
</template>
<script>
import { Button, Dialog, FeatherIcon, ErrorMessage } from 'jingrow-ui';
export default {
props: {
name: String
},
components: {
Dialog,
Button,
FeatherIcon
},
emits: ['done'],
data() {
return {
helpViewed: false,
show: true,
copied: false,
error: ''
};
},
resources: {
notification() {
return {
type: 'document',
pagetype: 'Jcloud Notification',
name: this.name,
whitelistedMethods: {
markAsAddressed: 'mark_as_addressed'
}
};
}
},
computed: {
pg() {
return this.$resources.notification.pg ?? null;
}
},
methods: {
async copyTraceback() {
await navigator.clipboard.writeText(this.pg.traceback);
this.copied = true;
setTimeout(() => (this.copied = false), 4000);
},
async done() {
if (this.pg.assistance_url && !this.helpViewed) {
this.error =
'请在点击完成之前按照<i>帮助</i>中的步骤操作';
return;
}
await this.$resources.notification.markAsAddressed.submit();
this.show = false;
this.$emit('done');
},
help() {
this.error = '';
this.helpViewed = true;
window.open(this.pg.assistance_url, '_blank');
}
}
};
</script>