|
@@ -3,6 +3,7 @@ import { computed } from 'vue'
|
|
|
import CodeEditor from '@/nodes/_base/CodeEditor.vue'
|
|
import CodeEditor from '@/nodes/_base/CodeEditor.vue'
|
|
|
|
|
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
|
|
|
+ hasOutputNode: boolean
|
|
|
hasExecutionData: boolean
|
|
hasExecutionData: boolean
|
|
|
isRunning: boolean
|
|
isRunning: boolean
|
|
|
finalResultText: string
|
|
finalResultText: string
|
|
@@ -14,44 +15,42 @@ const editorValue = computed(() => props.finalResultText || '-')
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<div class="tab-pane tab-pane--scroll">
|
|
<div class="tab-pane tab-pane--scroll">
|
|
|
- <div v-if="!hasExecutionData" class="empty-state">无结果</div>
|
|
|
|
|
- <div v-else-if="isRunning && !finalResultText" class="running-state">
|
|
|
|
|
- <div class="running-state__header">
|
|
|
|
|
- <div class="running-state__signal">
|
|
|
|
|
- <span></span>
|
|
|
|
|
- <span></span>
|
|
|
|
|
- <span></span>
|
|
|
|
|
|
|
+ <template v-if="props.hasOutputNode">
|
|
|
|
|
+ <div v-if="!hasExecutionData" class="empty-state">无结果</div>
|
|
|
|
|
+ <div v-else-if="isRunning && !finalResultText" class="running-state">
|
|
|
|
|
+ <div class="running-state__header">
|
|
|
|
|
+ <div class="running-state__signal">
|
|
|
|
|
+ <span></span>
|
|
|
|
|
+ <span></span>
|
|
|
|
|
+ <span></span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <div class="running-state__title">Workflow Running</div>
|
|
|
|
|
+ <div class="running-state__desc">正在执行,请等待...</div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div>
|
|
|
|
|
- <div class="running-state__title">Workflow Running</div>
|
|
|
|
|
- <div class="running-state__desc">正则执行,请等待...</div>
|
|
|
|
|
|
|
+ <div class="running-state__skeleton">
|
|
|
|
|
+ <div class="skeleton-line skeleton-line--lg"></div>
|
|
|
|
|
+ <div class="skeleton-line"></div>
|
|
|
|
|
+ <div class="skeleton-line"></div>
|
|
|
|
|
+ <div class="skeleton-line skeleton-line--sm"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="running-state__skeleton">
|
|
|
|
|
- <div class="skeleton-line skeleton-line--lg"></div>
|
|
|
|
|
- <div class="skeleton-line"></div>
|
|
|
|
|
- <div class="skeleton-line"></div>
|
|
|
|
|
- <div class="skeleton-line skeleton-line--sm"></div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div v-else class="panel" :class="{ 'panel--running': isRunning }">
|
|
|
|
|
- <div class="panel-header">
|
|
|
|
|
|
|
+ <div v-else class="panel" :class="{ 'panel--running': isRunning }">
|
|
|
<div class="section-title">输出</div>
|
|
<div class="section-title">输出</div>
|
|
|
- <div v-if="isRunning" class="running-badge">运行中...</div>
|
|
|
|
|
- <el-button text @click="$emit('copy', finalResultValue)">复制</el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="editor-shell">
|
|
|
|
|
- <div v-if="isRunning" class="editor-shell__scanner"></div>
|
|
|
|
|
- <CodeEditor
|
|
|
|
|
- :model-value="editorValue"
|
|
|
|
|
- language="json"
|
|
|
|
|
- :tools="true"
|
|
|
|
|
- :read-only="true"
|
|
|
|
|
- :allow-change-language="false"
|
|
|
|
|
- :height="300"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <div class="editor-shell">
|
|
|
|
|
+ <div v-if="isRunning" class="editor-shell__scanner"></div>
|
|
|
|
|
+ <CodeEditor
|
|
|
|
|
+ :model-value="editorValue"
|
|
|
|
|
+ language="json"
|
|
|
|
|
+ :tools="true"
|
|
|
|
|
+ :read-only="true"
|
|
|
|
|
+ :allow-change-language="false"
|
|
|
|
|
+ :height="300"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </template>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -216,6 +215,7 @@ const editorValue = computed(() => props.finalResultText || '-')
|
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
color: #344054;
|
|
color: #344054;
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.running-badge {
|
|
.running-badge {
|