107 lines
2.2 KiB
Vue
107 lines
2.2 KiB
Vue
<template>
|
||
<div class="mnode" :class="'mnode--' + (data.kind || 'mid')">
|
||
<Handle type="target" :position="Position.Top" class="mnode__handle" />
|
||
<span class="mnode__tag">{{ kindLabel }}</span>
|
||
<div class="mnode__name" :title="data.label">{{ data.label }}</div>
|
||
<Handle type="source" :position="Position.Bottom" class="mnode__handle" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Handle, Position } from "@vue-flow/core";
|
||
|
||
// 物料节点卡片：xtFlowEditor（编辑）与 xtFlowViewer（查看）共用，保证两端视觉一致
|
||
export default {
|
||
name: "MaterialNode",
|
||
components: { Handle },
|
||
props: {
|
||
// { label, kind: raw|mid|final }
|
||
data: { type: Object, default: () => ({}) },
|
||
},
|
||
data() {
|
||
return { Position };
|
||
},
|
||
computed: {
|
||
kindLabel() {
|
||
return { raw: "原料", final: "成品", mid: "半成品" }[this.data.kind] || "半成品";
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mnode {
|
||
position: relative;
|
||
width: 150px;
|
||
padding: 6px 10px 8px;
|
||
border-radius: 8px;
|
||
border: 1px solid #dcdfe6;
|
||
background: #fff;
|
||
box-shadow: 0 2px 8px rgba(31, 45, 61, 0.08);
|
||
text-align: center;
|
||
transition: box-shadow 0.15s, transform 0.15s;
|
||
}
|
||
.mnode:hover {
|
||
box-shadow: 0 4px 14px rgba(31, 45, 61, 0.16);
|
||
transform: translateY(-1px);
|
||
}
|
||
.mnode__tag {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
line-height: 1;
|
||
padding: 2px 6px;
|
||
border-radius: 8px;
|
||
margin-bottom: 5px;
|
||
color: #fff;
|
||
}
|
||
.mnode__name {
|
||
font-size: 12px;
|
||
line-height: 1.3;
|
||
color: #303133;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
.mnode--raw {
|
||
border-color: #f0c78a;
|
||
background: #fffaf2;
|
||
}
|
||
.mnode--raw .mnode__tag {
|
||
background: #e6a23c;
|
||
}
|
||
.mnode--mid {
|
||
border-color: #a3d0ff;
|
||
background: #f5faff;
|
||
}
|
||
.mnode--mid .mnode__tag {
|
||
background: #409eff;
|
||
}
|
||
.mnode--final {
|
||
border-color: #a4da89;
|
||
background: #f6fcf1;
|
||
}
|
||
.mnode--final .mnode__tag {
|
||
background: #67c23a;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* Vue Flow 内部元素（非 scoped） */
|
||
.vue-flow__node-material {
|
||
background: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
.vue-flow__handle {
|
||
width: 9px;
|
||
height: 9px;
|
||
background: #fff;
|
||
border: 2px solid #409eff;
|
||
}
|
||
.vue-flow__handle:hover {
|
||
background: #409eff;
|
||
}
|
||
</style>
|