feat:conflict

src/services/defaults.ts

@@ -2074,21 +2074,6 @@ export const formComponents = [
                 "col": 2,
                 "width": 112
             },
-            // {
-            //     "col": 3,
-            //     "pens": [
-            //         {
-            //             "disableAnchor": true,
-            //             "fontSize": 0.6,
-            //             "height": 20,
-            //             "lineWidth": 0,
-            //             "name": "rectangle",
-            //             "textColor": "#05CFF9FF",
-            //             "width": 56
-            //         }
-            //     ],
-            //     "width": 70
-            // },
             {
                 "col": 0,
                 "textColor": "rgba(255,255,255,0.6)",
@@ -6063,6 +6048,755 @@ export const defaultGradientColor: string[] = [
   '#FFFFFF',
 ];
 
-export const penProps:string[] = [
-  
-]
+export const penProps = [
+  {
+    label: '唯一ID',
+    value: 'id',
+    type: 'string',
+  },
+  {
+    label: '标签',
+    value: 'tags',
+    type: 'array',
+  },
+  {
+    label: '父图元id',
+    value: 'parentId',
+    type: 'string',
+  },
+  {
+    label: '类型',
+    value: 'type',
+    type: 'integer',
+  },
+  {
+    label: '名称',
+    value: 'name',
+    type: 'string',
+  },
+  {
+    label: 'X坐标',
+    value: 'x',
+    type: 'float',
+  },
+  {
+    label: 'Y坐标',
+    value: 'y',
+    type: 'float',
+  },
+  {
+    label: '宽度',
+    value: 'width',
+    type: 'float',
+  },
+  {
+    label: '高度',
+    value: 'height',
+    type: 'float',
+  },
+  {
+    label: '连线类型名',
+    value: 'lineName',
+    type: 'string',
+  },
+  {
+    label: '连线封闭',
+    value: 'close',
+    type: 'bool',
+  },
+  {
+    label: '锚点数组。',
+    value: 'anchors',
+    type: 'array',
+  },
+  {
+    label: '锁定宽高比',
+    value: 'ratio',
+    type: 'bool',
+  },
+  {
+    label: '旋转角度',
+    value: 'rotate',
+    type: 'float',
+  },
+  {
+    label: '文字旋转',
+    value: 'textRotate',
+    type: 'bool',
+  },
+  {
+    label: '显示',
+    value: 'visible',
+    type: 'bool',
+  },
+  {
+    label: '锁定',
+    value: 'locked',
+    type: 'integer',
+  },
+  {
+    label: '连线长度',
+    value: 'length',
+    type: 'float',
+  },
+  {
+    label: '提示',
+    value: 'title',
+    type: 'string',
+  },
+  {
+    label: '提示脚本',
+    value: 'titleFnJs',
+    type: 'string',
+  },
+  {
+    label: '线宽',
+    value: 'lineWidth',
+    type: 'float',
+  },
+  {
+    label: '透明度',
+    value: 'globalAlpha',
+    type: 'float',
+  },
+  {
+    label: '虚线模式',
+    value: 'lineDash',
+    type: 'array',
+  },
+  {
+    label: '虚线偏移',
+    value: 'lineDashOffset',
+    type: 'float',
+  },
+  {
+    label: '颜色',
+    value: 'color',
+    type: 'string',
+  },
+  {
+    label: '背景色',
+    value: 'background',
+    type: 'string',
+  },
+  {
+    label: '选中颜色',
+    value: 'activeColor',
+    type: 'string',
+  },
+  {
+    label: '选中背景',
+    value: 'activeBackground',
+    type: 'string',
+  },
+  {
+    label: '移入颜色',
+    value: 'hoverColor',
+    type: 'string',
+  },
+  {
+    label: '移入背景',
+    value: 'hoverBackground',
+    type: 'string',
+  },
+  {
+    label: '锚点颜色',
+    value: 'anchorColor',
+    type: 'string',
+  },
+  {
+    label: '禁用',
+    value: 'disabled',
+    type: 'bool',
+  },
+  {
+    label: '禁用颜色',
+    value: 'disabledColor',
+    type: 'string',
+  },
+  {
+    label: '禁用背景',
+    value: 'disabledBackground',
+    type: 'string',
+  },
+  {
+    label: '禁用文本颜色',
+    value: 'disabledTextColor',
+    type: 'string',
+  },
+  {
+    label: '文本',
+    value: 'text',
+    type: 'string',
+  },
+  {
+    label: '文本自动调整',
+    value: 'textAutoAdjust',
+    type: 'bool',
+  },
+  {
+    label: '文本颜色',
+    value: 'textColor',
+    type: 'string',
+  },
+  {
+    label: '进度',
+    value: 'progress',
+    type: 'float',
+  },
+  {
+    label: '进度颜色',
+    value: 'progressColor',
+    type: 'string',
+  },
+  {
+    label: '垂直进度',
+    value: 'verticalProgress',
+    type: 'bool',
+  },
+  {
+    label: '反向进度',
+    value: 'reverseProgress',
+    type: 'bool',
+  },
+  {
+    label: '背景类型',
+    value: 'bkType',
+    type: 'integer',
+  },
+  {
+    label: '渐变半径',
+    value: 'gradientRadius',
+    type: 'float',
+  },
+  {
+    label: '绘制类型',
+    value: 'strokeType',
+    type: 'integer',
+  },
+  {
+    label: '渐变背景色',
+    value: 'gradientColors',
+    type: 'string',
+  },
+  {
+    label: '连线渐变色',
+    value: 'lineGradientColors',
+    type: 'string',
+  },
+  {
+    label: '线端点样式',
+    value: 'lineCap',
+    type: 'string',
+  },
+  {
+    label: '线连接样式',
+    value: 'lineJoin',
+    type: 'string',
+  },
+  {
+    label: '阴影颜色',
+    value: 'shadowColor',
+    type: 'string',
+  },
+  {
+    label: '阴影模糊度',
+    value: 'shadowBlur',
+    type: 'float',
+  },
+  {
+    label: '阴影X偏移量',
+    value: 'shadowOffsetX',
+    type: 'float',
+  },
+  {
+    label: '阴影Y偏移量',
+    value: 'shadowOffsetY',
+    type: 'float',
+  },
+  {
+    label: '文字阴影',
+    value: 'textHasShadow',
+    type: 'bool',
+  },
+  {
+    label: '文本宽度',
+    value: 'textWidth',
+    type: 'float',
+  },
+  {
+    label: '文本高度',
+    value: 'textHeight',
+    type: 'float',
+  },
+  {
+    label: '文本左偏移',
+    value: 'textLeft',
+    type: 'float',
+  },
+  {
+    label: '文本上偏移',
+    value: 'textTop',
+    type: 'float',
+  },
+  // {
+  //     "label": "文本颜色",
+  //     "value": "textColor",
+  //     "type": "string"
+  // },
+  {
+    label: '文本颜色类型',
+    value: 'textType',
+    type: 'integer',
+  },
+  {
+    label: '文本渐变颜色',
+    value: 'textGradientColors',
+    type: 'string',
+  },
+  {
+    label: '移入文本颜色',
+    value: 'hoverTextColor',
+    type: 'string',
+  },
+  {
+    label: '选中文本颜色',
+    value: 'activeTextColor',
+    type: 'string',
+  },
+  {
+    label: '字体',
+    value: 'fontFamily',
+    type: 'string',
+  },
+  {
+    label: '文本大小',
+    value: 'fontSize',
+    type: 'float',
+  },
+  {
+    label: '行高',
+    value: 'lineHeight',
+    type: 'float',
+  },
+  {
+    label: '字体样式',
+    value: 'fontStyle',
+    type: 'string',
+  },
+  {
+    label: '字体粗细',
+    value: 'fontWeight',
+    type: 'string',
+  },
+  {
+    label: '文字对齐',
+    value: 'textAlign',
+    type: 'string',
+  },
+  {
+    label: '文本基线',
+    value: 'textBaseline',
+    type: 'string',
+  },
+  {
+    label: '文本背景',
+    value: 'textBackground',
+    type: 'string',
+  },
+  {
+    label: '文本换行方式',
+    value: 'whiteSpace',
+    type: 'string',
+  },
+  {
+    label: '文本省略',
+    value: 'ellipsis',
+    type: 'bool',
+  },
+  {
+    label: '图片地址',
+    value: 'image',
+    type: 'string',
+  },
+  {
+    label: 'image跨源',
+    value: 'crossOrigin',
+    type: 'string',
+  },
+  {
+    label: '图片保持比例',
+    value: 'imageRatio',
+    type: 'bool',
+  },
+  {
+    label: '图片圆角',
+    value: 'imageRadius',
+    type: 'float',
+  },
+  {
+    label: '图标',
+    value: 'icon',
+    type: 'string',
+  },
+  {
+    label: '图标旋转',
+    value: 'iconRotate',
+    type: 'float',
+  },
+  {
+    label: '图片/图标宽度',
+    value: 'iconWidth',
+    type: 'float',
+  },
+  {
+    label: '图片/图标高度',
+    value: 'iconHeight',
+    type: 'float',
+  },
+  {
+    label: '图标大小',
+    value: 'iconSize',
+    type: 'float',
+  },
+  {
+    label: '图标上偏移',
+    value: 'iconTop',
+    type: 'float',
+  },
+  {
+    label: '图标左偏移',
+    value: 'iconLeft',
+    type: 'float',
+  },
+  {
+    label: '图标字体',
+    value: 'iconFamily',
+    type: 'string',
+  },
+  {
+    label: '图标颜色',
+    value: 'iconColor',
+    type: 'string',
+  },
+  {
+    label: '字体对齐',
+    value: 'iconAlign',
+    type: 'string',
+  },
+  {
+    label: '图标加粗',
+    value: 'iconWeight',
+    type: 'string',
+  },
+  {
+    label: '禁止输入',
+    value: 'disableInput',
+    type: 'bool',
+  },
+  {
+    label: '禁止旋转',
+    value: 'disableRotate',
+    type: 'bool',
+  },
+  {
+    label: '禁止改变大小',
+    value: 'disableSize',
+    type: 'bool',
+  },
+  {
+    label: '禁用锚点',
+    value: 'disableAnchor',
+    type: 'bool',
+  },
+  {
+    label: '顶部填充',
+    value: 'paddingTop',
+    type: 'float',
+  },
+  {
+    label: '背景图片',
+    value: 'backgroundImage',
+    type: 'string',
+  },
+  {
+    label: '线条填充图片',
+    value: 'strokeImage',
+    type: 'string',
+  },
+  {
+    label: '子画笔',
+    value: 'children',
+    type: 'array',
+  },
+  {
+    label: '锚点大小',
+    value: 'anchorRadius',
+    type: 'float',
+  },
+  {
+    label: '锚点背景',
+    value: 'anchorBackground',
+    type: 'string',
+  },
+  {
+    label: 'svg路径',
+    value: 'path',
+    type: 'string',
+  },
+  {
+    label: '起始箭头',
+    value: 'fromArrow',
+    type: 'string',
+  },
+  {
+    label: '终点箭头',
+    value: 'toArrow',
+    type: 'string',
+  },
+  {
+    label: '起始箭头大小',
+    value: 'fromArrowSize',
+    type: 'float',
+  },
+  {
+    label: '终点箭头大小',
+    value: 'toArrowSize',
+    type: 'float',
+  },
+  {
+    label: '起始箭头颜色',
+    value: 'fromArrowColor',
+    type: 'string',
+  },
+  {
+    label: '终点箭头颜色',
+    value: 'toArrowColor',
+    type: 'string',
+  },
+  {
+    label: '连线关系',
+    value: 'connectedLines',
+    type: 'array',
+  },
+  {
+    label: '动画播放次数',
+    value: 'animateCycle',
+    type: 'float',
+  },
+  {
+    label: '下一个动画',
+    value: 'nextAnimate',
+    type: 'string',
+  },
+  {
+    label: '自动播放',
+    value: 'autoPlay',
+    type: 'bool',
+  },
+  {
+    label: '循环播放',
+    value: 'playLoop',
+    type: 'bool',
+  },
+  {
+    label: '动画时长',
+    value: 'duration',
+    type: 'float',
+  },
+  {
+    label: '线性播放',
+    value: 'linear',
+    type: 'bool',
+  },
+  {
+    label: '缩放比例',
+    value: 'scale',
+    type: 'float',
+  },
+  {
+    label: '动画速度',
+    value: 'animateSpan',
+    type: 'float',
+  },
+  {
+    label: '动画颜色',
+    value: 'animateColor',
+    type: 'string',
+  },
+  {
+    label: '动画虚线样式',
+    value: 'animateLineDash',
+    type: 'array',
+  },
+  {
+    label: '动画圆点大小',
+    value: 'animateDotSize',
+    type: 'float',
+  },
+  {
+    label: '动画反向',
+    value: 'animateReverse',
+    type: 'bool',
+  },
+  {
+    label: '动画保持初始状态',
+    value: 'keepAnimateState',
+    type: 'bool',
+  },
+  {
+    label: '连线动画类型',
+    value: 'lineAnimateType',
+    type: 'float',
+  },
+  {
+    label: '动画帧',
+    value: 'frames',
+    type: 'array',
+  },
+  {
+    label: '单击输入',
+    value: 'input',
+    type: 'bool',
+  },
+  {
+    label: '下拉列表',
+    value: 'dropdownList',
+    type: 'array',
+  },
+  {
+    label: '事件',
+    value: 'events',
+    type: 'array',
+  },
+  {
+    label: '网页',
+    value: 'iframe',
+    type: 'string',
+  },
+  {
+    label: '外部元素',
+    value: 'externElement',
+    type: 'bool',
+  },
+  {
+    label: '视频地址',
+    value: 'video',
+    type: 'string',
+  },
+  {
+    label: '音频地址',
+    value: 'vaudio',
+    type: 'string',
+  },
+  {
+    label: '自动折线',
+    value: 'autoPolyline',
+    type: 'bool',
+  },
+  // {
+  //     "label": "进度值",
+  //     "value": "progress",
+  //     "type": "float"
+  // },
+  // {
+  //     "label": "进度颜色",
+  //     "value": "progressColor",
+  //     "type": "string"
+  // },
+  // {
+  //     "label": "垂直进度",
+  //     "value": "verticalProgress",
+  //     "type": "bool"
+  // },
+  {
+    label: '起点自动关联',
+    value: 'autoFrom',
+    type: 'bool',
+  },
+  {
+    label: '终点自动关联',
+    value: 'autoTo',
+    type: 'bool',
+  },
+  {
+    label: '水平翻转',
+    value: 'flipX',
+    type: 'bool',
+  },
+  {
+    label: '垂直翻转',
+    value: 'flipY',
+    type: 'bool',
+  },
+  {
+    label: '文字镜像',
+    value: 'textFlip',
+    type: 'bool',
+  },
+  {
+    label: '层',
+    value: 'layer',
+    type: 'float',
+  },
+  {
+    label: '连线边框',
+    value: 'borderWidth',
+    type: 'float',
+  },
+  {
+    label: '边框颜色',
+    value: 'borderColor',
+    type: 'string',
+  },
+  {
+    label: '边框圆角',
+    value: 'borderRadius',
+    type: 'float',
+  },
+  {
+    label: 'path ID',
+    value: 'pathId',
+    type: 'string',
+  },
+  {
+    label: '隐藏文本',
+    value: 'hiddenText',
+    type: 'bool',
+  },
+  {
+    label: '小数点',
+    value: 'keepDecimal',
+    type: 'float',
+  },
+  {
+    label: '最后帧',
+    value: 'lastFrame',
+    type: 'object',
+  },
+  {
+    label: '元素层级',
+    value: 'zIndex',
+    type: 'float',
+  },
+  {
+    label: '类名',
+    value: 'className',
+    type: 'string',
+  },
+  {
+    label: '样式',
+    value: 'styles',
+    type: 'object',
+  },
+  {
+    label: '跟随图元',
+    value: 'followers',
+    type: 'array',
+  },
+  {
+    label: '旋转中心',
+    value: 'pivot',
+    type: 'object',
+  },
+];

src/views/components/Actions.vue

@@ -209,18 +209,35 @@
             <t-tooltip content="json格式">
               <div class="flex middle mr-8" style="font-size:12px;color:var(--color)">数据</div>
             </t-tooltip>
-            <add-circle-icon @click="addSendData(a)" class="hover"/>
+            <!-- <add-circle-icon @click="addSendData(a)" class="hover"/> -->
           </div>
           <template v-for="(d,idx) in a.data">
-            <div class="flex middle actions-data mt-16" style="position:relative" >
-              <t-tooltip :content="d.prop?(d._label+'('+d.prop+')'):''">
-              <!-- <t-input class="actions-prop" style="width: 70px;" v-model="d.prop" /> -->
-              <div class="actions-prop"> {{ d.label||'请编辑'  }}</div>
-              </t-tooltip>
-              <Edit1Icon style="position:absolute;left:56px;height: 32px;" class="hover" @click="selectDeviceProps(d)"/>
+            <div class="flex middle actions-data mt-4">
+              <div class="flex action-param">
+                <t-tooltip>
+                <template #content>
+                  <template v-if="d.prop">{{d._label||d.label}}<br>{{ d.prop }}</template>
+                </template>
+                <!-- <t-input class="actions-prop" style="width: 70px;" v-model="d.prop" /> -->
+                <div class="actions-prop"> {{ d.label||'参数名'  }}</div>
+                </t-tooltip>
+                <Edit1Icon class="hover" @click="selectDeviceProps(d)"/>
               <!-- <t-input style="width: 100px;" v-model="item.value" /> -->
+              </div>
               ：
-              <t-tree-select
+              <div class="flex actions-value">
+                <t-button
+                  v-if="['code','struct','array','object'].includes(d.type)&&!(d.key&&d.id)"
+                  shape="square"
+                  variant="outline"
+                  @click="showCode(d)"
+                >
+                  <ellipsis-icon slot="icon" />
+                </t-button>
+                <t-input v-else :placeholder="d.key&&d.id?((d.idLabel||d.id)+'.'+(d.keyLabel||d.key)):('参数值')" :readonly="!!(d.key&&d.id)" class="full" v-model="d.value" />
+                <LinkIcon class="hover actions-bind" :class="{ primary: d.key }" @click="bindPenProp(d)" />
+              </div>
+              <!-- <t-tree-select
                 placeholder="固定值"
                 style="width: 90px;"
                 v-model="d.id"
@@ -287,8 +304,12 @@
                   <ellipsis-icon slot="icon" />
                 </t-button>
                 <t-input v-else class="actions-value"  placeholder="输入值" style="width: 82px;" v-model="d.value" @change="valueDChange($event,d)" />
-              </template>
-              <close-icon style="position:absolute;right:2px" class="hover" @click="delSendData(a.data,idx)"/>
+              </template> -->
+              <div class="actions-operation">
+                <add-circle-icon @click="addSendData(a,idx)" class="hover"/>
+                <!-- <close-icon class="hover" @click="delSendData(a,idx)"/> -->
+                <minus-circle-icon class="hover ml-4" @click="delSendData(a,idx)"/>
+              </div> 
             </div>
           </template>
           <template v-for="(item,idx) in a.list">
@@ -602,7 +623,9 @@
   </div>
   <PropModal v-model:visible="propModal.visible" @change="getProp" />
   <MoreModal v-model:visible="more.visible" @change="getMProp" />
-  <t-dialog
+  <PenPropModal v-model:visible="penProp.visible" v-model:data="penProp.data"/>
+  <JsonModal v-model:visible="codeDialog.visible" v-model:data="codeDialog.data.value" @change="getJsonData" />
+  <!-- <t-dialog
     v-if="codeDialog.show"
     :visible="true"
     header="下发数据"
@@ -611,16 +634,18 @@
     :width="800"
   >
     <CodeEditor v-model="codeDialog.data.value" style="height: 300px" />
-  </t-dialog>
+  </t-dialog> -->
 </template>
 
 <script lang="ts" setup>
 import { onBeforeMount, ref, reactive, getCurrentInstance } from 'vue';
 import PropModal from '@/views/components/common/PropModal.vue';
 import MoreModal from '@/views/components/common/MoreModal.vue';
+import PenPropModal from '@/views/components/common/PenPropModal.vue';
+import JsonModal from '@/views/components/common/JsonModal.vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import Network from './Network.vue';
-import { CloseIcon, AddCircleIcon, DeleteIcon, CheckIcon, Edit1Icon, LinkIcon, EllipsisIcon} from 'tdesign-icons-vue-next';
+import { CloseIcon, AddCircleIcon, DeleteIcon, CheckIcon, Edit1Icon, LinkIcon, EllipsisIcon, MinusCircleIcon} from 'tdesign-icons-vue-next';
 import { getPenAnimations, getPenTree ,changeType, getIframeTree} from '@/services/common';
 import { deepClone } from '@meta2d/core';
 
@@ -769,6 +794,12 @@ const onChangeAction = (action: any) => {
       // action.params = '';
       // action.value = {};
       action.targetType = 'id';
+      if(!action.data){
+        action.data = [{
+          key:'',
+          value:''
+        }];
+      }
       // action.list = [
       //   {params:undefined,value:{}}
       // ];
@@ -948,18 +979,19 @@ const addData = (a:any)=>{
   a.list.push({params:undefined,value:{}})
 }
 
-const addSendData = (a:any)=>{
+const addSendData = (a:any ,i:number)=>{
   if(!a.data){
     a.data = [];
   }
-  a.data.push({
-    key:'',
-    value:''
-  });
+  a.data.splice(i+1,0,{ key:'',value:''});
 }
 
-const delSendData = (data:any[] ,i:number)=>{
-  data.splice(i,1);
+const delSendData = (a:any ,i:number)=>{
+  if(i==0){
+    a.data = [{ key:'',value:''}];
+  }else{
+    a.data.splice(i,1);
+  }
 }
 
 let dprops = ref<any>([{
@@ -1054,13 +1086,30 @@ const getProp = (e)=>{
 }
 
 const codeDialog = reactive({
-  show:false,
-  data:null
+  visible:false,
+  data:{
+    value:null
+  }
 });
 
 const showCode = (d)=>{
   codeDialog.data = d;
-  codeDialog.show = true;
+  codeDialog.visible = true;
+}
+
+const getJsonData = (data)=>{
+  codeDialog.data.value = data;
+  codeDialog.visible = false;
+}
+
+const penProp = ref({
+  visible:false,
+  data:null
+});
+
+const bindPenProp = (d)=>{
+  penProp.value.visible = true;
+  penProp.value.data = d;
 }
 
 const more = ref({
@@ -1132,6 +1181,67 @@ const themeOptions = [
     }
   }
   .actions-data{
+    position:relative;
+    .action-param{
+      position:relative;
+      svg{
+        position:absolute;
+        left:56px;
+        height: 22px;
+        display: none;
+      }
+      &:hover{
+        svg{
+          display: inline-block;
+        }
+      }
+    }
+    .actions-value{
+      position: relative;
+      width: 150px;
+      :deep(.t-input){
+        width: 150px;
+      }
+      .actions-bind{
+        display: none;
+        position: absolute;
+        right: 2px;
+        height: 30px;
+      }
+
+      :deep(.t-button){
+        border-color: transparent;
+        height: 30px;
+        width: 150px;
+        justify-content:left;
+        padding-left: 8px;
+        &:hover{
+          border-color: var(--color-desc);
+        }
+      }
+      &:hover{
+        svg{
+          display: inline-block;
+        }
+      }
+    }
+    .actions-operation{
+      display: none;
+      svg{
+        position:absolute;
+        right:0px;
+        top:9px;
+      }
+      svg:first-child{
+        right:16px;
+      }
+    }
+    
+    &:hover{
+      .actions-operation{
+        display: inline-block;
+      }
+    }
     :deep(.t-input){
       border-color:transparent;
       &:hover {
@@ -1153,14 +1263,14 @@ const themeOptions = [
         width: 82px;
       }
     }
-    .actions-value{
+    /* .actions-value{
       :deep(.t-input){
         width: 82px;
       }
-    }
-    .t-input-number.t-is-controls-right{
+    } */
+    /* .t-input-number.t-is-controls-right{
       width: 82px;
-    }
+    } */
   }
 }
 </style>

src/views/components/Network.vue

@@ -21,10 +21,16 @@
       >
         <template #panel>
           <ul style="padding: 4px">
-            <li class="hover-background item"  @click="() => onSelect({protocol:'http',name:'自定义'})">
-                自定义
+            <li class="hover-background item"  @click="() => {onSelect({protocol:'http',name:'HTTP'}); protocolChange('http') }">
+                HTTP
             </li>
-            <t-divider></t-divider>
+            <li class="hover-background item"  @click="() => {onSelect({protocol:'websocket',name:'Websocket'}); protocolChange('websocket')}">
+                Websocket
+            </li>
+            <li class="hover-background item"  @click="() => {onSelect({protocol:'mqtt',name:'MQTT'});protocolChange('mqtt')}">
+                MQTT
+            </li>
+            <t-divider style="border-top: 1px solid var(--color-border-input);"></t-divider>
             <li v-if="hasIot" class="hover-background item"  @click="() => onSelect({protocol:'iot',name:'物联网平台'})">
                 物联网平台
             </li>
@@ -58,7 +64,7 @@
       <t-input v-else v-model="modelValue.name" :placeholder="$t('名称')"></t-input>
     </div>
     <template v-if="modelValue.protocol&&modelValue.protocol!=='iot'">
-    <div v-if="!modelValue.unmodifiable"  class="form-item mt-8">
+    <!-- <div v-if="!modelValue.unmodifiable"  class="form-item mt-8">
       <label>通信方式</label>
       <t-select
         v-model="modelValue.protocol"
@@ -69,7 +75,7 @@
         <t-option key="websocket" value="websocket" label="Websocket" />
         <t-option key="http" value="http" label="HTTP" />
       </t-select>
-    </div>
+    </div> -->
     <div v-if="!modelValue.unmodifiable"  class="form-item mt-8">
       <label>URL地址</label>
       <t-input
@@ -107,18 +113,26 @@
           :autosize="{ minRows: 3, maxRows: 5 }"
           placeholder="请输入"
         /> -->
-        <CodeEditor
+        <!-- <CodeEditor
           :json="true"
           :language="'json'"
           v-model="modelValue.headers"
           class="mt-4"
           style="height: 50px"
-        />
+        /> -->
+        <t-button
+          class="ml-8"
+          shape="square"
+          variant="outline"
+          @click="showJsonModal()"
+        >
+          <ellipsis-icon slot="icon" />
+        </t-button>
       </div>
-      <div class="form-item mt-8 desc">
+      <!-- <div class="form-item mt-8 desc">
         <label></label>
-        {{$t('支持设置动态参数')}}，{{$t('例如')}}：{"Authorization": "Bearer ${token}"}
-      </div>
+        支持设置动态参数，例如：{"Authorization": "Bearer ${token}"}
+      </div> -->
       <div v-if="!mode && modelValue.method === 'POST'" class="form-item mt-8">
         <label>{{$t('请求体')}}</label>
         <!-- <t-textarea
@@ -174,10 +188,11 @@
       </div>
     </div> -->
   </div>
+  <JsonModal v-model:visible="codeDialog.visible" v-model:data="codeDialog.data" :options="headersOptions" tips='支持设置动态参数，例如：{"Authorization": "Bearer ${token}"}' @change="getJsonData" />
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, ref,getCurrentInstance } from 'vue';
+import { onBeforeMount, ref, getCurrentInstance, reactive } from 'vue';
 import axios from 'axios';
 import { debounce } from '@/services/debouce';
 import { MessagePlugin } from 'tdesign-vue-next';
@@ -185,6 +200,8 @@ import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import { DeleteIcon } from 'tdesign-icons-vue-next';
 import { transformData } from '@/services/utils';
 import { deepClone } from '@meta2d/core';
+import { EllipsisIcon } from 'tdesign-icons-vue-next';
+import JsonModal from '@/views/components/common/JsonModal.vue';
 
 const { modelValue, mode } = defineProps<{
   modelValue: any;
@@ -339,6 +356,27 @@ const urlFormat = (val) => {
     return val;
   }
 };
+
+const codeDialog = reactive({
+  visible:false,
+  data:null
+});
+
+const showJsonModal = () => {
+  codeDialog.visible = true;
+  codeDialog.data = modelValue.headers;
+};
+
+const getJsonData = (data) => {
+  modelValue.headers = data;
+  codeDialog.visible = false;
+};
+
+const headersOptions = [{
+  label: 'Authorization',
+  value: 'Authorization',
+}]
+
 </script>
 <style lang="postcss" scoped>
 .network-component {