Joe Allen
154fb15130
- Tauri v2 + Vue 3 + TypeScript + Element Plus
- Connection management (CRUD + enable/disable/test)
- Preset system with {{variable}} placeholders
- Dashboard with live message scrolling + topic tree
- Payload inspector (JSON/Hex/Base64/Plain)
- Protocol-level logging (file + UI dual channel)
- Global variable manager with localStorage persistence
- MQTT v5 property support (user properties, content type, etc.)
- SubAck result tracking with subscribe_tracked API
75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { extractVariables } from '../../utils/envVarResolver'
|
|
|
|
const props = defineProps<{
|
|
payloadTemplate: string
|
|
modelValue: Record<string, string>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: Record<string, string>]
|
|
}>()
|
|
|
|
const variables = computed(() => {
|
|
return extractVariables(props.payloadTemplate)
|
|
})
|
|
|
|
function updateValue(name: string, value: string) {
|
|
emit('update:modelValue', { ...props.modelValue, [name]: value })
|
|
}
|
|
function formatVariableName(name: string): string {
|
|
return '\u007B\u007B' + name + '\u007D\u007D'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="variables.length > 0" class="variable-editor">
|
|
<div class="variable-editor-title">变量</div>
|
|
<div class="variable-grid">
|
|
<div
|
|
v-for="v in variables"
|
|
:key="v"
|
|
class="variable-item"
|
|
>
|
|
<span class="variable-label">{{ formatVariableName(v) }}</span>
|
|
<el-input
|
|
:model-value="modelValue[v] ?? ''"
|
|
size="small"
|
|
placeholder="输入值..."
|
|
@input="(val: string) => updateValue(v, val)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.variable-editor {
|
|
margin-top: 8px;
|
|
padding: 8px;
|
|
background: var(--el-fill-color-light);
|
|
border-radius: 4px;
|
|
}
|
|
.variable-editor-title {
|
|
font-size: 12px;
|
|
color: var(--el-text-color-secondary);
|
|
margin-bottom: 6px;
|
|
}
|
|
.variable-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.variable-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.variable-label {
|
|
min-width: 80px;
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
color: var(--el-color-primary);
|
|
}
|
|
</style> |