vue-wiring-diagram 1.1.24 → 1.1.26

package/packages/components/text-control/index.vue

@@ -1,457 +1,472 @@
-/**
-* @Author: HuaYJ
-* @Date: 2024/10/22 15:03
-*/
-<template>
-    <div class="control">
-        <el-collapse v-model="activeName" accordion>
-            <el-collapse-item title="文本内容" name="0" v-if="payload.data.type === 'text'">
-                <el-input ref="inputRef" type="textarea" v-model="text" @input="changeContent" @blur="leaveInput"
-                          :rows="10"></el-input>
-                <el-alert type="info" title="提示"
-                          description="请先选择设备，再选择字段，最后点击确定按钮，即可绑定设备数据。绑定完成后会由 $<> 进行包裹！"
-                          style="margin-top: 20px;"></el-alert>
-                <el-select v-model="deviceCode" placeholder="请选择设备" @change="checkDevice" filterable clearable
-                           style="margin-top: 20px">
-                    <el-option v-for="item in deviceList" :key="item.deviceCode" :label="item.deviceName"
-                               :value="item.deviceCode"/>
-                </el-select>
-                <el-table :data="fieldList" border style="margin-top: 20px;" size="small" height="500"
-                          @row-click="checkField">
-                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
-                    <el-table-column prop="name" label="字段名称" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="dataField" label="字段编码" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="unit" label="单位" width="50"></el-table-column>
-                </el-table>
-            </el-collapse-item>
-            <el-collapse-item title="图形设置" name="1">
-                <div class="row-column">
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">背景颜色</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-color-picker v-model="background" :show-alpha="true" size="small" @change="changeText"/>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">边框颜色</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-color-picker v-model="stroke" :show-alpha="true" size="small" @change="changeText"/>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">边框宽度</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-input-number v-model="strokeWidth" size="small" controls-position="right"
-                                             @change="changeText" :min="0" :max="10" :step="1"/>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">背景圆角rx</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-input-number v-model="rx" size="small" controls-position="right" @change="changeText"
-                                             :min="0" :max="50" :step="1"/>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">背景圆角ry</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-input-number v-model="ry" size="small" controls-position="right" @change="changeText"
-                                             :min="0" :max="50" :step="1"/>
-                        </el-col>
-                    </el-row>
-                </div>
-            </el-collapse-item>
-            <el-collapse-item title="文字设置" name="2" v-if="payload.data.type === 'text'">
-                <div class="row-column">
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">字体颜色</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-color-picker v-model="color" :show-alpha="true" size="small" @change="changeText"/>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">字体大小</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-input-number v-model="size" size="small" controls-position="right" @change="changeText"
-                                             :min="12" :max="48" :step="2"/>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">对齐方式</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-select v-model="textAnchor" size="small" @change="changeText">
-                                <el-option v-for="item in ['start', 'middle', 'end']" :key="item" :label="item"
-                                           :value="item"/>
-                            </el-select>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">x轴偏移</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-input-number v-model="x" size="small" controls-position="right" @change="changeText"
-                                             :min="0" :max="100" :step="1"/>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <div class="row-label">y轴偏移</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-input-number v-model="y" size="small" controls-position="right" @change="changeText"
-                                             :min="0" :max="100" :step="1"/>
-                        </el-col>
-                    </el-row>
-                </div>
-            </el-collapse-item>
-            <el-collapse-item title="连接桩设置" name="3">
-                <el-button type="primary" @click="addPorts" size="small">添加连接桩</el-button>
-                <el-button type="primary" @click="showPort" size="small">显示连接桩</el-button>
-                <el-table :data="ports" border size="small" style="margin-top: 10px;">
-                    <el-table-column label="ID" width="50" align="center">
-                        <template v-slot="{row}">
-                            {{ row.attrs.text.text }}
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="x" width="100" align="center">
-                        <template v-slot="{row}">
-                            <el-slider v-model="row.args.x" :min="0" :max="100" :step="1"
-                                       @input="(e) => changePorts(row.id, 'x', e)"/>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="y" width="100" align="center">
-                        <template v-slot="{row}">
-                            <el-slider v-model="row.args.y" :min="0" :max="100" :step="1"
-                                       @input="(e) => changePorts(row.id, 'y', e)"/>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="操作" align="center">
-                        <template v-slot="{row}">
-                            <el-button type="danger" size="small" @click="deletePort(row.id)">
-                                <el-icon>
-                                    <delete-filled/>
-                                </el-icon>
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </el-collapse-item>
-        </el-collapse>
-    </div>
-</template>
-
-<script setup>
-import {nextTick, onMounted, reactive, ref,} from "vue";
-import {DeleteFilled} from '@element-plus/icons-vue'
-import {getFieldList, showPorts} from "../common.js";
-import {ElMessageBox} from "element-plus";
-import {portOption} from "../settings.js";
-import {defaultMatch, defaultText} from "packages/components/tools.js";
-import {getDeviceList} from "/packages/components/common.js";
-
-defineOptions({
-    name: 'text-control'
-})
-
-const props = defineProps({
-    payload: Object,
-    itemId: {
-        type: String,
-        default: ''
-    }
-})
-
-const activeName = ref(props.payload.attrs.label?.textAnchor ? '0' : '1') // 激活的折叠面板
-
-
-const deviceList = ref([]) // 设备列表
-const fieldList = ref([])
-
-/**
- * 获取设备列表
- */
-const getDevices = async () => {
-    deviceList.value = await getDeviceList(props.itemId)
-}
-
-const deviceCode = ref() // 设备编码
-let currentDevice = reactive({}) // 当前设备信息
-
-/**
- * 监听设备编码变化
- */
-const checkDevice = () => {
-    currentDevice = deviceList.value.find(item => item.deviceCode === deviceCode.value)
-    if (currentDevice) {
-        getFields()
-    }
-}
-
-/**
- * 获取字段列表
- */
-const getFields = async () => {
-    fieldList.value = await getFieldList(currentDevice.deviceCode)
-}
-
-
-const replace = (str) => {
-    return str.replace(defaultMatch, defaultText)
-}
-
-/**
- * 监听字段变化
- * @param row
- */
-const checkField = (row) => {
-    ElMessageBox.confirm(`是否确定要添加${currentDevice.deviceName}-${row.name}？\n 添加后为：--${row.unit ?? ''}`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-    }).then(() => {
-        const unit = row.unit ?? ''
-        const content = props.payload.data.content
-        console.log(cursorPosition.value)
-        if (cursorPosition.value) {
-            // 在记录的光标位置后面添加字段
-            props.payload.data.content = text.value = content.slice(0, cursorPosition.value) + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit + content.slice(cursorPosition.value)
-        } else {
-            props.payload.data.content = text.value = content + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit
-        }
-        // 查找所有${}
-        const matches = content.match(defaultMatch)
-        const index = matches?.length || 0
-        props.payload.data.fields.push({
-            index: index,
-            deviceName: currentDevice.deviceName,
-            deviceCode: currentDevice.deviceCode,
-            field: row.dataField,
-            fieldName: row.name,
-        })
-        props.payload.label = replace(props.payload.data.content)
-        console.log(props.payload.data.content, props.payload.data.fields)
-    })
-}
-
-const text = ref(props.payload.data.content || null) // 文本内容
-const background = ref(props.payload.attrs.body.fill || null) // 背景颜色
-const stroke = ref(props.payload.attrs.body.stroke || null) // 边框颜色
-const strokeWidth = ref(props.payload.attrs.body.strokeWidth || null) // 边框宽度
-const rx = ref(props.payload.attrs.body.rx || null) // 圆角
-const ry = ref(props.payload.attrs.body.ry || null) // 圆角
-const color = ref(props.payload.attrs.text.fill || null) // 文字颜色
-const size = ref(props.payload.attrs.text.fontSize || null) // 文字大小
-const textAnchor = ref(props.payload.attrs.label?.textAnchor || null) // 文字对齐方式
-const x = ref(props.payload.attrs.label?.x || null) // x轴偏移
-const y = ref(props.payload.attrs.label?.y || null)
-
-/**
- * 编辑文字
- */
-const changeText = () => {
-    props.payload.attr('body/fill', background.value)
-    props.payload.attr('body/stroke', stroke.value)
-    props.payload.attr('body/strokeWidth', strokeWidth.value)
-    props.payload.attr('body/rx', rx.value)
-    props.payload.attr('body/ry', ry.value)
-    props.payload.attr('text/fill', color.value)
-    props.payload.attr('text/fontSize', size.value)
-    props.payload.attr('label/textAnchor', textAnchor.value)
-    props.payload.attr('label/x', x.value)
-    props.payload.attr('label/y', y.value)
-}
-
-const inputRef = ref(null)
-const forbiddenRegex = /[\$\{|\}]/g;
-
-/**
- * 编辑内容
- */
-const changeContent = (currentValue) => {
-    if (forbiddenRegex.test(currentValue)) {
-        text.value = text.value.slice(0, -1)
-    }
-    const content = props.payload.data.content
-
-    if (currentValue.length < content.length) {
-        const {deleted, start, end} = getDeletedSubstring(content, currentValue);
-        if (deleted === '}') {
-            // 找到前面的"${" 删除
-            const startIndex = content.lastIndexOf('${', start)
-            const deleteContent = content.substring(startIndex, start) + '}'
-            text.value = content.replace(deleteContent, '')
-            // 字符串去掉'${'和'}'
-            const matchedContent = deleteContent.replace(/[${}]/g, '')
-            props.payload.data.fields = props.payload.data.fields.filter(item => {
-                return item.deviceName + '.' + item.fieldName !== matchedContent
-            })
-        }
-    }
-
-    // 正常更新
-    props.payload.data.content = text.value;
-    props.payload.label = replace(text.value);
-    console.log(props.payload.data.content, props.payload.data.fields);
-}
-
-const getDeletedSubstring = (oldStr, newStr) => {
-    let i = 0;
-    let j = 0;
-
-    // 找到第一个不相同的字符位置
-    while (i < oldStr.length && j < newStr.length && oldStr[i] === newStr[j]) {
-        i++;
-        j++;
-    }
-
-    // 如果新字符串已经结束，则后续都是被删除的内容
-    if (j === newStr.length && i < oldStr.length) {
-        return {
-            deleted: oldStr.slice(i),
-            start: i,
-            end: oldStr.length
-        };
-    }
-
-    // 向后尝试匹配剩余部分，找到最短删除范围
-    let k = oldStr.length - 1;
-    let l = newStr.length - 1;
-
-    while (k > i && l > j && oldStr[k] === newStr[l]) {
-        k--;
-        l--;
-    }
-
-    const deleted = oldStr.slice(i, k);
-    return {
-        deleted,
-        start: i,
-        end: k
-    };
-}
-
-// 记录光标位置
-const cursorPosition = ref(null)
-
-const leaveInput = () => {
-    const inputElement = inputRef.value?.$refs.textarea;
-    cursorPosition.value = inputElement.selectionStart;
-}
-
-
-const ports = ref([]) // 连接桩数据
-
-/**
- * 获取连接桩数据
- */
-const getPorts = () => {
-    ports.value = JSON.parse(JSON.stringify(props.payload.getPorts().map((item) => {
-        return {
-            id: item.id,
-            attrs: item.attrs,
-            args: {
-                x: Number(item.args.x.replace('%', '')),
-                y: Number(item.args.y.replace('%', ''))
-            }
-        }
-    })))
-}
-
-/**
- * 添加连接桩
- */
-const addPorts = () => {
-    const port = portOption
-    port.attrs.text.text = `${props.payload.getPorts().length + 1}`
-    port.args.x = '50%'
-    port.args.y = '50%'
-    props.payload.addPorts([
-        {
-            group: 'ports',
-            ...port
-        },
-    ])
-    getPorts()
-}
-
-/**
- * 显示连接桩
- */
-const showPort = () => {
-    showPorts("#drawing-board", true)
-}
-
-/**
- * 修改连接桩
- * @param id
- * @param key
- * @param value
- */
-const changePorts = (id, key, value) => {
-    props.payload.portProp(id, 'args/' + key, value + '%')
-    getPorts()
-}
-
-/**
- *  删除连接桩
- * @param id
- */
-const deletePort = (id) => {
-    props.payload.removePort(id)
-    getPorts()
-}
-
-
-onMounted(() => {
-    getPorts()
-    getDevices()
-
-    nextTick(() => {
-        document.addEventListener('selectionchange', () => {
-            if (!inputRef.value) {
-                return false;
-            }
-            const inputElement = inputRef.value?.$refs.textarea;
-            const cursorPosition = inputElement.selectionStart;
-            const content = text.value;
-            const regex = /\$\{.*?\}/g;
-            let match;
-
-            while ((match = regex.exec(content)) !== null) {
-                const start = match.index;
-                const end = regex.lastIndex;
-
-                if (cursorPosition > start && cursorPosition < end) {
-                    console.log('光标位于字段:', match[0]);
-                    // 设置光标到往后的第一个}符号后面
-                    inputElement.setSelectionRange(end, end);
-                    return true; // 光标在 ${...} 内
-                }
-            }
-            console.log('光标不在任何字段内');
-            return false;
-        })
-    })
-})
-</script>
-
-<style scoped lang="scss">
-@use "../../styles/editor.scss";
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2024/10/22 15:03
+*/
+<template>
+    <div class="control">
+        <el-collapse v-model="activeName" accordion>
+            <el-collapse-item title="文本内容" name="0" v-if="payload.data.type === 'text'">
+                <el-input ref="inputRef" type="textarea" v-model="text" @input="changeContent" @blur="leaveInput"
+                          :rows="10"></el-input>
+                <el-alert type="info" title="提示"
+                          description="请先选择设备，再选择字段，最后点击确定按钮，即可绑定设备数据。绑定完成后会由 $<> 进行包裹！"
+                          style="margin-top: 20px;"></el-alert>
+                <el-select v-model="deviceCode" placeholder="请选择设备" @change="checkDevice" filterable clearable
+                           style="margin-top: 20px">
+                    <el-option v-for="item in deviceList" :key="item.deviceCode" :label="item.deviceName"
+                               :value="item.deviceCode"/>
+                </el-select>
+                <el-input v-model="deviceName" placeholder="请输入设备名称" clearable style="margin-top: 5px"/>
+                <el-table :data="filterFieldList" border style="margin-top: 20px;" size="small" height="500"
+                          @row-click="checkField">
+                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+                    <el-table-column prop="name" label="字段名称" show-overflow-tooltip></el-table-column>
+                    <el-table-column prop="dataField" label="字段编码" show-overflow-tooltip></el-table-column>
+                    <el-table-column prop="unit" label="单位" width="50"></el-table-column>
+                </el-table>
+            </el-collapse-item>
+            <el-collapse-item title="图形设置" name="1">
+                <div class="row-column">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">背景颜色</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-color-picker v-model="background" :show-alpha="true" size="small" @change="changeText"/>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">边框颜色</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-color-picker v-model="stroke" :show-alpha="true" size="small" @change="changeText"/>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">边框宽度</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-input-number v-model="strokeWidth" size="small" controls-position="right"
+                                             @change="changeText" :min="0" :max="10" :step="1"/>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">背景圆角rx</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-input-number v-model="rx" size="small" controls-position="right" @change="changeText"
+                                             :min="0" :max="50" :step="1"/>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">背景圆角ry</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-input-number v-model="ry" size="small" controls-position="right" @change="changeText"
+                                             :min="0" :max="50" :step="1"/>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item title="文字设置" name="2" v-if="payload.data.type === 'text'">
+                <div class="row-column">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">字体颜色</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-color-picker v-model="color" :show-alpha="true" size="small" @change="changeText"/>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">字体大小</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-input-number v-model="size" size="small" controls-position="right" @change="changeText"
+                                             :min="12" :max="48" :step="2"/>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">对齐方式</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-select v-model="textAnchor" size="small" @change="changeText">
+                                <el-option v-for="item in ['start', 'middle', 'end']" :key="item" :label="item"
+                                           :value="item"/>
+                            </el-select>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">x轴偏移</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-input-number v-model="x" size="small" controls-position="right" @change="changeText"
+                                             :min="0" :max="100" :step="1"/>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <div class="row-label">y轴偏移</div>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-input-number v-model="y" size="small" controls-position="right" @change="changeText"
+                                             :min="0" :max="100" :step="1"/>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item title="连接桩设置" name="3">
+                <el-button type="primary" @click="addPorts" size="small">添加连接桩</el-button>
+                <el-button type="primary" @click="showPort" size="small">显示连接桩</el-button>
+                <el-table :data="ports" border size="small" style="margin-top: 10px;">
+                    <el-table-column label="ID" width="50" align="center">
+                        <template v-slot="{row}">
+                            {{ row.attrs.text.text }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="x" width="100" align="center">
+                        <template v-slot="{row}">
+                            <el-slider v-model="row.args.x" :min="0" :max="100" :step="1"
+                                       @input="(e) => changePorts(row.id, 'x', e)"/>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="y" width="100" align="center">
+                        <template v-slot="{row}">
+                            <el-slider v-model="row.args.y" :min="0" :max="100" :step="1"
+                                       @input="(e) => changePorts(row.id, 'y', e)"/>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center">
+                        <template v-slot="{row}">
+                            <el-button type="danger" size="small" @click="deletePort(row.id)">
+                                <el-icon>
+                                    <delete-filled/>
+                                </el-icon>
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-collapse-item>
+        </el-collapse>
+    </div>
+</template>
+
+<script setup>
+import {nextTick, onMounted, reactive, ref, watch,} from "vue";
+import {DeleteFilled} from '@element-plus/icons-vue'
+import {getFieldList, showPorts} from "../common.js";
+import {ElMessageBox} from "element-plus";
+import {portOption} from "../settings.js";
+import {defaultMatch, defaultText} from "packages/components/tools.js";
+import {getDeviceList} from "/packages/components/common.js";
+
+defineOptions({
+    name: 'text-control'
+})
+
+const props = defineProps({
+    payload: Object,
+    itemId: {
+        type: String,
+        default: ''
+    }
+})
+
+const activeName = ref(props.payload.attrs.label?.textAnchor ? '0' : '1') // 激活的折叠面板
+
+
+const deviceList = ref([]) // 设备列表
+const fieldList = ref([])
+const filterFieldList = ref([])
+
+/**
+ * 获取设备列表
+ */
+const getDevices = async () => {
+    deviceList.value = await getDeviceList(props.itemId)
+}
+
+const deviceCode = ref() // 设备编码
+const deviceName = ref() // 设备名称
+
+watch(
+        () => deviceName.value,
+        (v) => {
+            if (v) {
+                filterFieldList.value = fieldList.value.filter(item => item.name.includes(v))
+            } else {
+                filterFieldList.value = fieldList.value
+            }
+        }
+)
+
+let currentDevice = reactive({}) // 当前设备信息
+
+/**
+ * 监听设备编码变化
+ */
+const checkDevice = () => {
+    currentDevice = deviceList.value.find(item => item.deviceCode === deviceCode.value)
+    if (currentDevice) {
+        getFields()
+    }
+}
+
+/**
+ * 获取字段列表
+ */
+const getFields = async () => {
+    filterFieldList.value = fieldList.value = await getFieldList(currentDevice.deviceCode)
+}
+
+
+const replace = (str) => {
+    return str.replace(defaultMatch, defaultText)
+}
+
+/**
+ * 监听字段变化
+ * @param row
+ */
+const checkField = (row) => {
+    ElMessageBox.confirm(`是否确定要添加${currentDevice.deviceName}-${row.name}？\n 添加后为：--${row.unit ?? ''}`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        const unit = row.unit ?? ''
+        const content = props.payload.data.content
+        console.log(cursorPosition.value)
+        if (cursorPosition.value) {
+            // 在记录的光标位置后面添加字段
+            props.payload.data.content = text.value = content.slice(0, cursorPosition.value) + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit + content.slice(cursorPosition.value)
+        } else {
+            props.payload.data.content = text.value = content + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit
+        }
+        // 查找所有${}
+        const matches = content.match(defaultMatch)
+        const index = matches?.length || 0
+        props.payload.data.fields.push({
+            index: index,
+            deviceName: currentDevice.deviceName,
+            deviceCode: currentDevice.deviceCode,
+            field: row.dataField,
+            fieldName: row.name,
+        })
+        props.payload.label = replace(props.payload.data.content)
+        console.log(props.payload.data.content, props.payload.data.fields)
+    })
+}
+
+const text = ref(props.payload.data.content || null) // 文本内容
+const background = ref(props.payload.attrs.body.fill || null) // 背景颜色
+const stroke = ref(props.payload.attrs.body.stroke || null) // 边框颜色
+const strokeWidth = ref(props.payload.attrs.body.strokeWidth || null) // 边框宽度
+const rx = ref(props.payload.attrs.body.rx || null) // 圆角
+const ry = ref(props.payload.attrs.body.ry || null) // 圆角
+const color = ref(props.payload.attrs.text.fill || null) // 文字颜色
+const size = ref(props.payload.attrs.text.fontSize || null) // 文字大小
+const textAnchor = ref(props.payload.attrs.label?.textAnchor || null) // 文字对齐方式
+const x = ref(props.payload.attrs.label?.x || null) // x轴偏移
+const y = ref(props.payload.attrs.label?.y || null)
+
+/**
+ * 编辑文字
+ */
+const changeText = () => {
+    props.payload.attr('body/fill', background.value)
+    props.payload.attr('body/stroke', stroke.value)
+    props.payload.attr('body/strokeWidth', strokeWidth.value)
+    props.payload.attr('body/rx', rx.value)
+    props.payload.attr('body/ry', ry.value)
+    props.payload.attr('text/fill', color.value)
+    props.payload.attr('text/fontSize', size.value)
+    props.payload.attr('label/textAnchor', textAnchor.value)
+    props.payload.attr('label/x', x.value)
+    props.payload.attr('label/y', y.value)
+}
+
+const inputRef = ref(null)
+const forbiddenRegex = /[\$\{|\}]/g;
+
+/**
+ * 编辑内容
+ */
+const changeContent = (currentValue) => {
+    if (forbiddenRegex.test(currentValue)) {
+        text.value = text.value.slice(0, -1)
+    }
+    const content = props.payload.data.content
+
+    if (currentValue.length < content.length) {
+        const {deleted, start, end} = getDeletedSubstring(content, currentValue);
+        if (deleted === '}') {
+            // 找到前面的"${" 删除
+            const startIndex = content.lastIndexOf('${', start)
+            const deleteContent = content.substring(startIndex, start) + '}'
+            text.value = content.replace(deleteContent, '')
+            // 字符串去掉'${'和'}'
+            const matchedContent = deleteContent.replace(/[${}]/g, '')
+            props.payload.data.fields = props.payload.data.fields.filter(item => {
+                return item.deviceName + '.' + item.fieldName !== matchedContent
+            })
+        }
+    }
+
+    // 正常更新
+    props.payload.data.content = text.value;
+    props.payload.label = replace(text.value);
+    console.log(props.payload.data.content, props.payload.data.fields);
+}
+
+const getDeletedSubstring = (oldStr, newStr) => {
+    let i = 0;
+    let j = 0;
+
+    // 找到第一个不相同的字符位置
+    while (i < oldStr.length && j < newStr.length && oldStr[i] === newStr[j]) {
+        i++;
+        j++;
+    }
+
+    // 如果新字符串已经结束，则后续都是被删除的内容
+    if (j === newStr.length && i < oldStr.length) {
+        return {
+            deleted: oldStr.slice(i),
+            start: i,
+            end: oldStr.length
+        };
+    }
+
+    // 向后尝试匹配剩余部分，找到最短删除范围
+    let k = oldStr.length - 1;
+    let l = newStr.length - 1;
+
+    while (k > i && l > j && oldStr[k] === newStr[l]) {
+        k--;
+        l--;
+    }
+
+    const deleted = oldStr.slice(i, k);
+    return {
+        deleted,
+        start: i,
+        end: k
+    };
+}
+
+// 记录光标位置
+const cursorPosition = ref(null)
+
+const leaveInput = () => {
+    const inputElement = inputRef.value?.$refs.textarea;
+    cursorPosition.value = inputElement.selectionStart;
+}
+
+
+const ports = ref([]) // 连接桩数据
+
+/**
+ * 获取连接桩数据
+ */
+const getPorts = () => {
+    ports.value = JSON.parse(JSON.stringify(props.payload.getPorts().map((item) => {
+        return {
+            id: item.id,
+            attrs: item.attrs,
+            args: {
+                x: Number(item.args.x.replace('%', '')),
+                y: Number(item.args.y.replace('%', ''))
+            }
+        }
+    })))
+}
+
+/**
+ * 添加连接桩
+ */
+const addPorts = () => {
+    const port = portOption
+    port.attrs.text.text = `${props.payload.getPorts().length + 1}`
+    port.args.x = '50%'
+    port.args.y = '50%'
+    props.payload.addPorts([
+        {
+            group: 'ports',
+            ...port
+        },
+    ])
+    getPorts()
+}
+
+/**
+ * 显示连接桩
+ */
+const showPort = () => {
+    showPorts("#drawing-board", true)
+}
+
+/**
+ * 修改连接桩
+ * @param id
+ * @param key
+ * @param value
+ */
+const changePorts = (id, key, value) => {
+    props.payload.portProp(id, 'args/' + key, value + '%')
+    getPorts()
+}
+
+/**
+ *  删除连接桩
+ * @param id
+ */
+const deletePort = (id) => {
+    props.payload.removePort(id)
+    getPorts()
+}
+
+
+onMounted(() => {
+    getPorts()
+    getDevices()
+
+    nextTick(() => {
+        document.addEventListener('selectionchange', () => {
+            if (!inputRef.value) {
+                return false;
+            }
+            const inputElement = inputRef.value?.$refs.textarea;
+            const cursorPosition = inputElement.selectionStart;
+            const content = text.value;
+            const regex = /\$\{.*?\}/g;
+            let match;
+
+            while ((match = regex.exec(content)) !== null) {
+                const start = match.index;
+                const end = regex.lastIndex;
+
+                if (cursorPosition > start && cursorPosition < end) {
+                    console.log('光标位于字段:', match[0]);
+                    // 设置光标到往后的第一个}符号后面
+                    inputElement.setSelectionRange(end, end);
+                    return true; // 光标在 ${...} 内
+                }
+            }
+            console.log('光标不在任何字段内');
+            return false;
+        })
+    })
+})
+</script>
+
+<style scoped lang="scss">
+@use "../../styles/editor.scss";
+</style>