58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import type { IExecuteRawResponse } from '@/api'
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import MarkdownIt from 'markdown-it'
|
||
|
|
import DOMPurify from 'dompurify'
|
||
|
|
import Iod from './Iod.vue'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
executePlans: IExecuteRawResponse[]
|
||
|
|
nodeId?: string
|
||
|
|
actionId?: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const md = new MarkdownIt({
|
||
|
|
html: true,
|
||
|
|
linkify: true,
|
||
|
|
typographer: true,
|
||
|
|
})
|
||
|
|
|
||
|
|
const data = computed(() => {
|
||
|
|
for (const result of props.executePlans) {
|
||
|
|
if (result.NodeId === props.nodeId && result.ActionHistory) {
|
||
|
|
for (const action of result.ActionHistory) {
|
||
|
|
if (action.ID === props.actionId) {
|
||
|
|
return action
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null
|
||
|
|
})
|
||
|
|
|
||
|
|
const action_Result = computed(() => {
|
||
|
|
const html = md.render(data.value?.Action_Result ?? '')
|
||
|
|
return DOMPurify.sanitize(html)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div v-if="data" class="card-item w-full pl-[56px] pr-[41px]">
|
||
|
|
<!-- 分割线 -->
|
||
|
|
<div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
|
||
|
|
<div class="text-[16px] flex items-center gap-1 text-[var(--color-text-secondary)]">
|
||
|
|
{{ data.Description }}
|
||
|
|
<Iod />
|
||
|
|
</div>
|
||
|
|
<div class="rounded-[8px] p-[15px] text-[14px] bg-[var(--color-bg-quaternary)] mt-1">
|
||
|
|
<div class="markdown-content max-h-[240px] overflow-y-auto" v-html="action_Result"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.card-item + .card-item {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
</style>
|