claudes variant of ui
This commit is contained in:
JohannesItten
@@ -0,0 +1,194 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import type { NodeProps } from '@vue-flow/core'
|
||||
import type { StudioNodeData } from '../../types'
|
||||
import { NODE_TYPES } from '../../nodeTypes'
|
||||
|
||||
const props = defineProps<NodeProps<StudioNodeData>>()
|
||||
|
||||
const typeDef = computed(() => NODE_TYPES[props.data.nodeType] ?? null)
|
||||
|
||||
const inputs = computed(() => typeDef.value?.ports.filter(p => p.direction === 'in') ?? [])
|
||||
const outputs = computed(() => typeDef.value?.ports.filter(p => p.direction === 'out') ?? [])
|
||||
|
||||
const stateBadge = computed(() => {
|
||||
switch (props.data.serverState) {
|
||||
case 'running': return { text: 'RUN', cls: 'badge-running' }
|
||||
case 'stopped': return { text: 'STOP', cls: 'badge-stopped' }
|
||||
case 'crashed': return { text: 'ERR', cls: 'badge-crashed' }
|
||||
default: return null
|
||||
}
|
||||
})
|
||||
|
||||
// Update a param value; Vue Flow tracks node data reactively
|
||||
function setParam(key: string, value: string | number) {
|
||||
props.data.params[key] = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="studio-node" :class="{ 'node-running': data.serverState === 'running', 'node-crashed': data.serverState === 'crashed' }">
|
||||
<!-- Input handles (left) -->
|
||||
<Handle
|
||||
v-for="port in inputs"
|
||||
:key="port.id"
|
||||
:id="port.id"
|
||||
type="target"
|
||||
:position="Position.Left"
|
||||
:class="`handle-${port.kind}`"
|
||||
/>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="node-header">
|
||||
<span class="node-label">{{ typeDef?.label ?? data.nodeType }}</span>
|
||||
<span v-if="stateBadge" :class="['badge', stateBadge.cls]">{{ stateBadge.text }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Params -->
|
||||
<div v-if="typeDef && typeDef.params.length" class="node-body">
|
||||
<div v-for="param in typeDef.params" :key="param.key" class="param-row">
|
||||
<label class="param-label">{{ param.label }}</label>
|
||||
<select
|
||||
v-if="param.type === 'select'"
|
||||
class="param-input"
|
||||
:value="data.params[param.key] ?? param.default"
|
||||
@change="setParam(param.key, ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option v-for="opt in param.options" :key="String(opt.value)" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
<input
|
||||
v-else-if="param.type === 'number'"
|
||||
type="number"
|
||||
class="param-input"
|
||||
:value="data.params[param.key] ?? param.default"
|
||||
:min="param.min"
|
||||
:max="param.max"
|
||||
@change="setParam(param.key, Number(($event.target as HTMLInputElement).value))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Node id -->
|
||||
<div class="node-id">{{ id }}</div>
|
||||
|
||||
<!-- Output handles (right) -->
|
||||
<Handle
|
||||
v-for="port in outputs"
|
||||
:key="port.id"
|
||||
:id="port.id"
|
||||
type="source"
|
||||
:position="Position.Right"
|
||||
:class="`handle-${port.kind}`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.studio-node {
|
||||
background: #1e2030;
|
||||
border: 1px solid #383a4e;
|
||||
border-radius: 8px;
|
||||
min-width: 180px;
|
||||
font-size: 12px;
|
||||
color: #cdd6f4;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.studio-node.node-running {
|
||||
border-color: #a6e3a1;
|
||||
box-shadow: 0 0 0 1px #a6e3a1, 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.studio-node.node-crashed {
|
||||
border-color: #f38ba8;
|
||||
box-shadow: 0 0 0 1px #f38ba8, 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.node-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px 6px;
|
||||
border-bottom: 1px solid #383a4e;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #89b4fa;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.badge-running { background: #a6e3a1; color: #1e2030; }
|
||||
.badge-stopped { background: #6c7086; color: #cdd6f4; }
|
||||
.badge-crashed { background: #f38ba8; color: #1e2030; }
|
||||
|
||||
.node-body {
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.param-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #9399b2;
|
||||
min-width: 70px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.param-input {
|
||||
flex: 1;
|
||||
background: #11111b;
|
||||
border: 1px solid #383a4e;
|
||||
border-radius: 4px;
|
||||
color: #cdd6f4;
|
||||
font-size: 11px;
|
||||
padding: 3px 6px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.param-input:focus {
|
||||
border-color: #89b4fa;
|
||||
}
|
||||
|
||||
.node-id {
|
||||
padding: 4px 10px;
|
||||
font-size: 10px;
|
||||
color: #45475a;
|
||||
border-top: 1px solid #2a2b3d;
|
||||
}
|
||||
|
||||
/* Handle styles */
|
||||
:deep(.handle-video) {
|
||||
background: #89b4fa !important;
|
||||
border-color: #89b4fa !important;
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
|
||||
:deep(.handle-audio) {
|
||||
background: #fab387 !important;
|
||||
border-color: #fab387 !important;
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user