mirror of https://github.com/allinssl/allinssl
63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { defineComponent } from 'vue'
|
|
import { useWorkflowStore } from '../store/workflow'
|
|
import styles from './WorkflowNodeConfig.module.css'
|
|
|
|
export default defineComponent({
|
|
name: 'WorkflowNodeConfig',
|
|
setup() {
|
|
const workflowStore = useWorkflowStore()
|
|
|
|
return () => {
|
|
const selectedNode = workflowStore.selectedNode
|
|
|
|
// 如果没有选中节点，显示默认内容
|
|
if (!selectedNode) {
|
|
return (
|
|
<div class={styles.nodeConfig}>
|
|
<div class={styles.emptyConfig}>
|
|
<div class={styles.emptyIcon}>🔍</div>
|
|
<div class={styles.emptyText}>请选择一个节点进行配置</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 渲染节点配置内容
|
|
return (
|
|
<div class={styles.nodeConfig}>
|
|
<div class={styles.nodeConfigHeader}>
|
|
<div class={styles.nodeConfigTitle}>{selectedNode.data?.label || '未命名节点'}</div>
|
|
</div>
|
|
<div class={styles.nodeConfigContent}>
|
|
<div class={styles.configField}>
|
|
<div class={styles.configLabel}>节点ID</div>
|
|
<div class={styles.configValue}>{selectedNode.id}</div>
|
|
</div>
|
|
|
|
<div class={styles.configField}>
|
|
<div class={styles.configLabel}>节点类型</div>
|
|
<div class={styles.configValue}>{selectedNode.type}</div>
|
|
</div>
|
|
|
|
<div class={styles.configField}>
|
|
<div class={styles.configLabel}>节点名称</div>
|
|
<input
|
|
type="text"
|
|
value={selectedNode.data?.label || ''}
|
|
onInput={(e) => {
|
|
if (selectedNode.data) {
|
|
workflowStore.updateNodeData(selectedNode.id, {
|
|
label: (e.target as HTMLInputElement).value,
|
|
})
|
|
}
|
|
}}
|
|
class={styles.configInput}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
})
|