support self-check

This commit is contained in:
锦恢 2025-07-03 19:15:53 +08:00
parent 13673d798b
commit 8a6d555da1

View File

@ -7,27 +7,29 @@
<div class="item-desc">{{ props.dataView.tool.description }}</div> <div class="item-desc">{{ props.dataView.tool.description }}</div>
<div v-if="props.dataView.function !== undefined" class="item-result"> <div v-if="props.dataView.function !== undefined" class="item-result">
<span class="item-label">Function</span> <div class="item-label">Function</div>
<pre class="item-json">{{ props.dataView.function.name }}</pre> <div class="item-json">{{ props.dataView.function.name }}</div>
<span class="item-label">Arguments</span>
<pre class="item-json">{{ formatJson(props.dataView.function.arguments) }}</pre>
</div> </div>
<div v-if="props.dataView.result !== undefined" class="item-result"> <div v-if="props.dataView.function !== undefined" class="item-result">
<span class="item-label">Result</span> <span class="item-label">Arguments</span>
<template v-if="Array.isArray(props.dataView.result)"> <json-render :json="props.dataView.function.arguments" />
<div </div>
v-for="(item, idx) in props.dataView.result"
:key="idx" <div v-if="props.dataView.result !== undefined" class="item-result">
class="result-block" <span class="item-label">Result</span>
> <template v-if="Array.isArray(props.dataView.result)">
<pre class="item-json" v-if="typeof item === 'object' && item.text !== undefined">{{ item.text }}</pre> <div v-for="(item, idx) in props.dataView.result" :key="idx" class="result-block"
<pre class="item-json" v-else>{{ formatJson(item) }}</pre> :class="[props.dataView.status]">
</div> <pre class="item-json"
</template> v-if="typeof item === 'object' && item.text !== undefined">{{ item.text }}</pre>
<pre class="item-json" v-else-if="typeof props.dataView.result === 'string'">{{ props.dataView.result }}</pre> <pre class="item-json" v-else>{{ formatJson(item) }}</pre>
<pre class="item-json" v-else>{{ formatJson(props.dataView.result) }}</pre> </div>
</div> </template>
<pre class="item-json"
v-else-if="typeof props.dataView.result === 'string'">{{ props.dataView.result }}</pre>
<pre class="item-json" v-else>{{ formatJson(props.dataView.result) }}</pre>
</div>
</div> </div>
<div v-else class="diagram-item-record"> <div v-else class="diagram-item-record">
<div class="item-header"> <div class="item-header">
@ -41,6 +43,8 @@
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import type { NodeDataView } from './diagram'; import type { NodeDataView } from './diagram';
import JsonRender from '@/components/json-render/index.vue';
const props = defineProps({ const props = defineProps({
dataView: { dataView: {
type: Object as PropType<NodeDataView | undefined | null>, type: Object as PropType<NodeDataView | undefined | null>,
@ -61,7 +65,7 @@ function formatJson(obj: any) {
.diagram-item-record { .diagram-item-record {
padding: 14px 18px; padding: 14px 18px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
font-size: 15px; font-size: 15px;
max-width: 300px; max-width: 300px;
word-break: break-all; word-break: break-all;
@ -87,11 +91,26 @@ function formatJson(obj: any) {
margin-left: 8px; margin-left: 8px;
text-transform: capitalize; text-transform: capitalize;
} }
.item-status.running { color: #2196f3; }
.item-status.success { color: #43a047; } .item-status.running {
.item-status.error { color: #e53935; } color: #2196f3;
.item-status.waiting { color: #aaa; } }
.item-status.default { color: #888; }
.item-status.success {
color: #43a047;
}
.item-status.error {
color: #e53935;
}
.item-status.waiting {
color: #aaa;
}
.item-status.default {
color: #888;
}
.item-desc { .item-desc {
margin-bottom: 8px; margin-bottom: 8px;
@ -108,11 +127,6 @@ function formatJson(obj: any) {
.item-json { .item-json {
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
font-size: 13px;
font-family: var(--code-font-family, monospace);
margin: 2px 0 8px 0;
white-space: pre-wrap;
word-break: break-all;
} }
.item-result { .item-result {
@ -122,6 +136,14 @@ function formatJson(obj: any) {
.result-block { .result-block {
margin-bottom: 6px; margin-bottom: 6px;
border-radius: .5em; border-radius: .5em;
background-color: rgba(245, 108, 108, 0.3); margin: 5px 0;
}
.result-block.error {
background-color: rgba(245, 108, 108, 0.5);
}
.result-block.success {
background-color: rgba(67, 160, 71, 0.5);
} }
</style> </style>