85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<template>
|
|
<div class="log-node" :style="{ borderColor: node.data?.color || '#10b981' }">
|
|
<div class="node-header">
|
|
<svg class="node-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-width="2" />
|
|
<path d="M14 2v6h6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M16 13H8" stroke-width="2" stroke-linecap="round" />
|
|
<path d="M16 17H8" stroke-width="2" stroke-linecap="round" />
|
|
<path d="M10 9H8" stroke-width="2" stroke-linecap="round" />
|
|
</svg>
|
|
<span class="node-title">日志</span>
|
|
</div>
|
|
<div class="node-content">
|
|
<span class="log-message">{{ node.data?.config?.message || '输出日志' }}</span>
|
|
</div>
|
|
<Handle
|
|
id="in"
|
|
type="target"
|
|
:position="Position.Top"
|
|
class="handle"
|
|
/>
|
|
<Handle
|
|
id="out"
|
|
type="source"
|
|
:position="Position.Bottom"
|
|
class="handle"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Handle, Position } from "@vue-flow/core";
|
|
|
|
const _props = defineProps<{
|
|
node: any
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.log-node {
|
|
background: white;
|
|
border: 2px solid #10b981;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
min-width: 120px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.node-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.node-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #10b981;
|
|
}
|
|
|
|
.node-title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.node-content {
|
|
text-align: center;
|
|
}
|
|
|
|
.log-message {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.handle {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #fff;
|
|
border: 2px solid #10b981;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|