diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
index 8930f44..d9ad20a 100644
--- a/src/api/menu/index.ts
+++ b/src/api/menu/index.ts
@@ -74,13 +74,39 @@ class MenuAPI {
             roles: ["GUEST", "ADMIN", "ADMIN6"],
             alwaysShow: false,
           },
-          children: [
+          children: [           
             {
               path: "index",
               component: "protocol/index",
               name: "protocolIndex",
               meta: {
-                title: "互联协议1",
+                title: "互联协议",
+                icon: "user",
+                hidden: true,
+                roles: ["ADMIN", "GUEST"],
+                keepAlive: true,
+                alwaysShow: false,
+              },
+            },
+            {
+              path: "edit",
+              component: "protocol/edit",
+              name: "protocolEdit",
+              meta: {
+                title: "互联协议修改",
+                icon: "user",
+                hidden: true,
+                roles: ["ADMIN", "GUEST"],
+                keepAlive: true,
+                alwaysShow: false,
+              },
+            },
+            {
+              path: "detail",
+              component: "protocol/detail",
+              name: "protocolDetail",
+              meta: {
+                title: "互联协议详情",
                 icon: "user",
                 hidden: true,
                 roles: ["ADMIN", "GUEST"],
diff --git a/src/views/flow/demo/index.vue b/src/views/flow/demo/index.vue
index 20cc46c..daef86a 100644
--- a/src/views/flow/demo/index.vue
+++ b/src/views/flow/demo/index.vue
@@ -41,7 +41,7 @@ const themeApprove = {
   },
   polyline: {
     strokeWidth: 1,
-    stroke: '#3CB371'
+    stroke: 'red'
   },
   edgeText: {
     background: {
diff --git a/src/views/flow/demo/nodePanel.vue b/src/views/flow/demo/nodePanel.vue
index 37e02e3..2d20664 100644
--- a/src/views/flow/demo/nodePanel.vue
+++ b/src/views/flow/demo/nodePanel.vue
@@ -45,10 +45,10 @@ const list1 = reactive([
 
 const list2 = reactive([
     { text: "VIT推理算子1", id: 301,show:true },
-    { text: "VIT推理算子2", id: 301,show:true },
-    { text: "VIT后处理算子1", id: 301,show:true },
-    { text: "VIT后处理算子2", id: 301,show:true },
-    { text: "VIT后处理算子3", id: 301,show:true },
+    { text: "VIT推理算子2", id: 302,show:true },
+    { text: "VIT后处理算子1", id: 303,show:true },
+    { text: "VIT后处理算子2", id: 304,show:true },
+    { text: "VIT后处理算子3", id: 305,show:true },
 ]);
 
 const updateNode=(nodes)=>{
diff --git a/src/views/model/index.vue b/src/views/model/index.vue
index 272d463..a04d5e2 100644
--- a/src/views/model/index.vue
+++ b/src/views/model/index.vue
@@ -32,7 +32,7 @@
             <el-button text type="primary" size="small"
               @click="doShowModelDetail(scope.row)"><i-ep-edit />查看</el-button>
             <el-button text type="primary" size="small"
-              @click="openDialog('user-form', scope.row.id)"><i-ep-link/>互联</el-button>
+              @click="doUploadModel()"><i-ep-link/>互联</el-button>
             <el-button text type="primary" size="small" @click="handleDelete(scope.row)"><i-ep-delete />删除</el-button>
           </template>
         </el-table-column>
diff --git a/src/views/model/modelDetail.vue b/src/views/model/modelDetail.vue
index a474efe..2a11742 100644
--- a/src/views/model/modelDetail.vue
+++ b/src/views/model/modelDetail.vue
@@ -67,7 +67,7 @@
         <el-button>前处理-GRAY图像格式</el-button>
         <el-button>前处理-RGB24图像格式</el-button>
     </el-card>
-    <el-card style="margin-top: 12px;">
+    <el-card style="margin-top: 12px;margin-bottom:60px;">
         <template #header>
             <svg-icon  icon-class="pause" style="width:20px;height:20px;" />
             模型结构</template>
@@ -75,14 +75,21 @@
             <iframe frameborder="0" scrolling="no" :src="url" style="width:100%;height:100%;position: absolute;top:0px;"></iframe>
             </div>
     </el-card>
+    <el-card class="card-footer">
+            <el-button type="primary" @click="doBack">返回</el-button>
+        </el-card>
     </div>
 </template>
 
 <script  setup>
+const router = useRouter();
 let url=ref("")
 onMounted(()=>{
   url.value="./onnx/onnx.html?url=/ai/siamRPN_192.onnx"
 });
+const doBack=()=>{
+    router.replace({path:"/modelMgr/index"})
+}
 </script>
 <style scoped lang='scss'>
 .model-detail{
@@ -101,4 +108,15 @@ onMounted(()=>{
 :deep(.svg-icon){
     margin-right:8px;
 }
+.card-footer{
+  position: fixed;
+  width: calc(100% - 215px);
+  bottom: 0px;
+  :deep(.el-card__body){
+    padding:10px;
+    .el-pagination{
+      justify-content: end;
+    }
+  }
+}
 </style>
diff --git a/src/views/model/uploadModel.vue b/src/views/model/uploadModel.vue
index 62b08f6..7bc2168 100644
--- a/src/views/model/uploadModel.vue
+++ b/src/views/model/uploadModel.vue
@@ -123,14 +123,21 @@
             </el-card>
         </div>
 <el-card class="card-footer">
-      <el-button type="primary">分割</el-button>
-      <el-button>取消</el-button>
+      <el-button type="primary" @click="doSave">分割</el-button>
+      <el-button @click="doBack">取消</el-button>
     </el-card>
     </div>
 
 </template>
 
 <script  setup>
+const router = useRouter();
+const doSave=()=>{
+    router.replace({path:"/modelMgr/index"})
+}
+const doBack=()=>{
+    router.replace({path:"/modelMgr/index"})
+}
 const uploadForm=ref(ElForm)
 const upForm=reactive({
     name:''
diff --git a/src/views/protocol/detail.vue b/src/views/protocol/detail.vue
new file mode 100644
index 0000000..c5fec37
--- /dev/null
+++ b/src/views/protocol/detail.vue
@@ -0,0 +1,175 @@
+<template>
+    <div class="app-container protocol-detail">
+        <el-card>
+            <template #header>
+                <svg-icon icon-class="pause" style="width:20px;height:20px;" />
+                互联协议信息</template>
+            <table style="width:100%" class="tb-base-info">
+                <tr>
+                    <td style="width: 50%;">
+                        <span class="sp-title">模型名称:</span>
+                        <span class="sp-text">目标分类模型</span>
+                    </td>
+                    <td style="width: 50%;">
+                        <span class="sp-title">模型版本:</span>
+                        <span class="sp-text">1.0</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="width: 50%;">
+                        <span class="sp-title">互联名称:</span>
+                        <span class="sp-text">我的互联名称</span>
+                    </td>
+                    <td style="width: 50%;">
+                        <span class="sp-title">标签:</span>
+                        <span class="sp-text">标分类模型</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="width: 50%;">
+                        <span class="sp-title">创建用户:</span>
+                        <span class="sp-text">USER</span>
+                    </td>
+                    <td style="width: 50%;">
+                        <span class="sp-title">创建时间:</span>
+                        <span class="sp-text">2024-02-02 12:12:12</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="width: 100%;" colspan="2">
+                        <span class="sp-title">互联说明:</span>
+                        <span class="sp-text">进行10种类型 的目标分类模型查看</span>
+                    </td>
+
+                </tr>
+            </table>
+        </el-card>
+        <el-card style="margin-top: 12px;">
+            <template #header>
+                <svg-icon icon-class="pause" style="width:20px;height:20px;" />
+                算子互联信息</template>
+            <div class="detail-content">
+                <div  class="item">
+                <div class="div-title">
+                    <i-ep-setting/><span>互联设置</span>
+                </div>
+                <div class="div-chart">
+                    <detailFlow/>
+                </div>
+                </div>
+                <div  class="item" style="margin-left: 100px;">
+                <div class="div-title">
+                    <i-ep-document/><span>算子基本信息</span>
+                </div>
+                <div class="div-info">
+                    <div class="row">
+                        <span class="sp-label">算子名称:</span>
+                        <span class="sp-text">图像缩放</span>
+                    </div>
+                    <div class="row">
+                        <span class="sp-label">算子版本:</span>
+                        <span class="sp-text">1.0</span>
+                    </div>
+                    <div class="row">
+                        <span class="sp-label">算子说明:</span>
+                        <span class="sp-text">算子说明算子说明算子说明算子说明算子说明算子说明算子说明算子说明</span>
+                    </div>
+                    <div class="row">
+                        <span class="sp-label">输入参数:</span>
+                        <span class="sp-text">
+                            size(1024,1080)
+                        </span>
+                    </div>
+                    <div class="row">
+                        <span class="sp-label">输出参数:</span>
+                        <span class="sp-text">
+                            <div>size:(1024,1080)</div>
+                            <div>type:nearest</div>
+                        </span>
+                    </div>
+                </div>
+                </div>
+            </div>
+        </el-card>
+        <el-card class="card-footer">
+            <el-button type="primary" @click="doBack">返回</el-button>
+        </el-card>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import detailFlow from './detailFlow.vue';
+const router = useRouter();
+const doBack=()=>{
+    router.replace({path:"/protocol/index"})
+}
+
+
+</script>
+<style scoped lang='scss'>
+.protocol-detail {
+    :deep(.el-card__header) {
+        padding: 8px 4px;
+        display: flex;
+        align-items: center
+    }
+    .detail-content{
+        display: flex;
+        justify-content: center;
+        .item{
+            width:300px;
+            .div-title{
+                color:#409EFF;
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+            }
+            .div-chart{
+                border:solid 1px #409EFF;
+                min-height: 400px;
+                height: 400px;
+            }
+            .div-info{
+                border:dotted 1px #409EFF;
+                min-height: 400px;    
+                padding:10px;
+                font-size: 12px;            
+                .row{
+                    display: flex;
+                    .sp-label{
+                        color:#888;
+                        display: block;                        
+                        white-space: nowrap;
+                    }
+                    .sp-text{
+                        flex-grow: 1;
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.tb-base-info {
+   
+        line-height: 30px;        
+   
+
+}
+
+:deep(.svg-icon) {
+    margin-right: 8px;
+}
+.card-footer{
+  position: fixed;
+  width: calc(100% - 215px);
+  bottom: 0px;
+  :deep(.el-card__body){
+    padding:10px;
+    .el-pagination{
+      justify-content: end;
+    }
+  }
+}
+</style>
diff --git a/src/views/protocol/detailFlow.vue b/src/views/protocol/detailFlow.vue
new file mode 100644
index 0000000..1d8567b
--- /dev/null
+++ b/src/views/protocol/detailFlow.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="flow-demo1">
+        <div ref="flow" class="viewport" id="flowMain" />
+    </div>
+</template>
+
+<script lang='ts' setup>
+import LogicFlow from '@logicflow/core';
+// 引入整体背景的样式
+import '@logicflow/core/dist/style/index.css';
+import { Menu } from "@logicflow/extension";
+import AiNodeExtension from '@/components/flow/index'
+import RegisteMenu from '@/components/flow/menu.js'
+const themeApprove = {
+    rect: { // 矩形样式
+        radius: 8,
+        stroke: '#3CB371'
+    },
+    circle: {
+        r: 25,
+        stroke: '#FF6347'
+    },
+    polygon: {
+        stroke: '#6495ED',
+    },
+    polyline: {
+        strokeWidth: 1,
+        stroke: '#6495ED'
+    },
+    edgeText: {
+        background: {
+            fill: 'white',
+        },
+    },
+}
+const flow = ref()
+let lf = ref(null)
+const config = {
+    stopScrollGraph: true,
+    stopZoomGraph: true,
+    isSilentMode: true,
+    grid: {
+        size: 10,
+        visible: false,
+        type: 'mesh',
+        config: {
+            color: '#DCDCDC',
+        }
+    },
+    keyboard: { enabled: false },
+    style: themeApprove,
+    plugins: [AiNodeExtension, Menu]
+};
+onMounted(() => {
+    const logicFlow = new LogicFlow({
+        ...config,
+        container: flow.value
+    })
+    lf.value = logicFlow
+    window.lf = lf;
+    const data = { "nodes": [{ "id": "node_1", "type": "ai-node",
+    fill:'#409effaa',
+     "x": 150, "y": 20, "properties": { "node": 201, "ui": "node-ai" }, 
+     "text": { "x": 160, "y": 20, "value": "图像缩放" } }, 
+     { "id": "node_2", "type": "ai-node",fill:'#3CB371', "x": 150, "y": 290, "properties": { "node": 900, "ui": "node-ai" }, "text": { "x": 160, "y": 290, "value": "目标绘图" } }, 
+     { "id": "a758b24e-6a3f-4652-b7ea-4b844bf5d44a", fill:'#409effaa',"type": "ai-node", "x": 150, "y": 90, "properties": { "node": 202, "ui": "node-ai" }, "text": { "x": 160, "y": 90, "value": "RGB12图像格式转换" } }, 
+     { "id": "ea1ec036-7fe4-4e2d-8e17-1840647c6cb3",fill:'#ccccccaa', "type": "ai-node", "x": 150, "y": 150, "properties": { "node": 301, "ui": "node-ai" }, "text": { "x": 160, "y": 150, "value": "VIT推理算子1" } }, 
+     { "id": "3a03b42c-bc46-4eab-aac6-e2f2b9c83736", fill:'#ccccccaa',"type": "ai-node", "x": 150, "y": 220, "properties": { "node": 302, "ui": "node-ai" }, "text": { "x": 160, "y": 220, "value": "VIT推理算子2" } }], "edges": [{ "id": "54555484-e393-4a43-8b51-1f407dd42c11", "type": "polyline", "sourceNodeId": "node_1", "targetNodeId": "a758b24e-6a3f-4652-b7ea-4b844bf5d44a", "startPoint": { "x": 150, "y": 35 }, "endPoint": { "x": 150, "y": 75 }, "properties": {}, "pointsList": [{ "x": 150, "y": 35 }, { "x": 150, "y": 65 }, { "x": 150, "y": 65 }, { "x": 150, "y": 45 }, { "x": 150, "y": 45 }, { "x": 150, "y": 75 }] }, { "id": "46e53f10-8997-42fc-9107-9e0083670ce8", "type": "polyline", "sourceNodeId": "a758b24e-6a3f-4652-b7ea-4b844bf5d44a", "targetNodeId": "ea1ec036-7fe4-4e2d-8e17-1840647c6cb3", "startPoint": { "x": 150, "y": 105 }, "endPoint": { "x": 150, "y": 135 }, "properties": {}, "pointsList": [{ "x": 150, "y": 105 }, { "x": 150, "y": 135 }, { "x": 150, "y": 135 }, { "x": 150, "y": 105 }, { "x": 150, "y": 105 }, { "x": 150, "y": 135 }] }, { "id": "7d5407fa-01f5-457c-8504-f5f464dd254f", "type": "polyline", "sourceNodeId": "ea1ec036-7fe4-4e2d-8e17-1840647c6cb3", "targetNodeId": "3a03b42c-bc46-4eab-aac6-e2f2b9c83736", "startPoint": { "x": 150, "y": 165 }, "endPoint": { "x": 150, "y": 205 }, "properties": {}, "pointsList": [{ "x": 150, "y": 165 }, { "x": 150, "y": 195 }, { "x": 150, "y": 195 }, { "x": 150, "y": 175 }, { "x": 150, "y": 175 }, { "x": 150, "y": 205 }] }, { "id": "4ece042b-faf1-4e95-8213-ee1c9b6060c5", "type": "polyline", "sourceNodeId": "3a03b42c-bc46-4eab-aac6-e2f2b9c83736", "targetNodeId": "node_2", "startPoint": { "x": 150, "y": 235 }, "endPoint": { "x": 150, "y": 275 }, "properties": {}, "pointsList": [{ "x": 150, "y": 235 }, { "x": 150, "y": 265 }, { "x": 150, "y": 265 }, { "x": 150, "y": 245 }, { "x": 150, "y": 245 }, { "x": 150, "y": 275 }] }] }
+    logicFlow.render(data)
+});
+</script>
+<style scoped lang='scss'>
+.flow-demo1 {
+    height: 100%;
+    overflow: hidden;
+    padding: 20px 0px 10px;
+
+    .viewport {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .custom-anchor {
+        stroke: #999;
+        stroke-width: 1;
+        fill: #d9d9d9;
+        cursor: crosshair;
+        rx: 3;
+        ry: 3;
+    }
+
+    .custom-anchor:hover {
+        fill: #ff7f0e;
+        stroke: #ff7f0e;
+    }
+
+    .flow-card {
+        height: 80%;
+        width: calc(100% - 450px);
+
+        .el-card__body {
+            height: 100%;
+            padding: 4px;
+        }
+
+        margin: 0px 12px;
+    }
+
+    .node-panel {
+        width: 240px;
+
+        .el-tabs__item {
+            padding: 0px 10px !important;
+        }
+    }
+
+    .card-prop {
+        height: 300px;
+        width: 200px;
+        min-width: 200px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/protocol/edit.vue b/src/views/protocol/edit.vue
new file mode 100644
index 0000000..f653cf2
--- /dev/null
+++ b/src/views/protocol/edit.vue
@@ -0,0 +1,196 @@
+<template>
+    <div class="app-container protocol-edit">
+        <el-card>
+            <template #header>
+                互联信息</template>
+
+            <el-form ref="uploadForm" :model="upForm" label-width="120">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="模型名称">
+                            <el-input disabled v-model="upForm.name" placeholder="目标分类模型" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="模型版本">
+                            <el-input disabled v-model="upForm.ver" placeholder="v1.0" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="互联名称">
+                            <el-input v-model="upForm.netName" placeholder="请输入互联名称" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="标签">
+                            <el-input v-model="upForm.label" placeholder="请输入标签" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="互联说明">
+                            <el-input v-model="upForm.netName" type="textarea" style="width:100%;" :rows="4"
+                                placeholder="请输入互联说明" />
+                        </el-form-item>
+                    </el-col>
+
+                </el-row>
+            </el-form>
+        </el-card>
+        <el-card style="margin-top: 12px;margin-bottom: 80px;">
+            <template #header>算子互联</template>
+            <div class="edit-content">
+                <div class="item" style="position: relative;">
+                    <div class="line-arrow" style="position: absolute;left: 270px;width: 80px;border-bottom: solid 1px #409eff;top: 250px;">
+                        <i-ep-arrow-right style="color:#409eff;position: absolute;right: -7px;top: -9px;"/>
+                    </div>
+                    <div class="div-title">
+                        <i-ep-office-building/><span>可用算子</span>
+                    </div>
+                    <div class="div-nodes">
+                       <nodePanel :lf="lf"  ref="ndPanel"/>
+                    </div>
+                </div>
+                <div  class="item" style="margin-left: 100px;">
+                <div class="div-title">
+                    <i-ep-setting/><span>互联设置</span>
+                </div>
+                <div class="div-chart">
+                    <editFlow @initLf="doInitLf" @updateNode="doUpdateNode"/>
+                </div>
+                </div>
+                <div  class="item" style="margin-left: 100px;">
+                <div class="div-title">
+                    <i-ep-document/><span>算子基本信息</span>
+                </div>
+                <div class="div-info">
+                    <div class="row">
+                        <span class="sp-label">算子名称:</span>
+                        <span class="sp-text">图像缩放</span>
+                    </div>
+                    <div class="row">
+                        <span class="sp-label">算子版本:</span>
+                        <span class="sp-text">1.0</span>
+                    </div>
+                    <div class="row">
+                        <span class="sp-label">算子说明:</span>
+                        <span class="sp-text">算子说明算子说明算子说明算子说明算子说明算子说明算子说明算子说明</span>
+                    </div>
+                    <div class="row">
+                        <span class="sp-label">输入参数:</span>
+                        <span class="sp-text">
+                            size(1024,1080)
+                        </span>
+                    </div>
+                    <div class="row">
+                        <span class="sp-label">输出参数:</span>
+                        <span class="sp-text">
+                            <div>size:(1024,1080)</div>
+                            <div>type:nearest</div>
+                        </span>
+                    </div>
+                </div>
+                </div>
+            </div>
+
+        </el-card>
+        <el-card class="card-footer">
+            <el-button type="primary" @click="doSave">保存</el-button>
+            <el-button  @click="doCancel">取消</el-button>
+          
+        </el-card>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import nodePanel from './nodePanel.vue'
+import editFlow from './editFlow.vue'
+const router = useRouter();
+const uploadForm = ref(ElForm)
+const upForm = reactive({
+    name: ''
+})
+let lf = ref(null)
+const ndPanel=ref()
+const doUpdateNode=(data:any)=>{
+    ndPanel.value.updateNode(data)
+}
+const doInitLf=(o:any)=>{
+    lf.value=o.value
+}
+const doSave=()=>{
+    router.replace({path:"/protocol/index"})
+}
+const doCancel=()=>{
+    router.replace({path:"/protocol/index"})
+}
+</script>
+<style scoped lang='scss'>
+.protocol-edit{
+    :deep(.el-card__header) {
+        padding: 8px 12px;
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+    }
+}
+.card-footer{
+  position: fixed;
+  width: calc(100% - 215px);
+  bottom: 0px;
+  :deep(.el-card__body){
+    padding:10px;
+    .el-pagination{
+      justify-content: end;
+    }
+  }
+}
+.edit-content{
+        display: flex;
+        justify-content: center;
+        .item{
+            width:300px;
+            .div-title{
+                color:#409EFF;
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+            }
+            .div-nodes{
+                border:solid 1px #409EFF;
+                min-height: 600px;
+                height: 600px;
+                :deep(.el-tabs--border-card){
+                    border:none;
+                }
+            }
+            .div-chart{
+                border:solid 1px #409EFF;
+                min-height: 600px;
+                height: 600px;
+            }
+            .div-info{
+                border:dotted 1px #409EFF;
+                min-height: 600px;    
+                height:600px;
+                padding:10px;
+                font-size: 12px;            
+                .row{
+                    display: flex;
+                    .sp-label{
+                        color:#888;
+                        display: block;                        
+                        white-space: nowrap;
+                    }
+                    .sp-text{
+                        flex-grow: 1;
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/protocol/editFlow.vue b/src/views/protocol/editFlow.vue
new file mode 100644
index 0000000..abaef73
--- /dev/null
+++ b/src/views/protocol/editFlow.vue
@@ -0,0 +1,187 @@
+<template>
+    <div class="flow-demo1">
+        <div ref="flow" class="viewport" id="flowMain" />
+    </div>
+</template>
+
+<script lang='ts' setup>
+import LogicFlow from '@logicflow/core';
+// 引入整体背景的样式
+import '@logicflow/core/dist/style/index.css';
+import { Menu } from "@logicflow/extension";
+import AiNodeExtension from '@/components/flow/index'
+import RegisteMenu from '@/components/flow/menu.js'
+const emit=defineEmits(["initLf","updateNode"])
+const themeApprove = {
+    rect: { // 矩形样式
+        radius: 8,
+        stroke: '#3CB371'
+    },
+    circle: {
+        r: 25,
+        stroke: '#FF6347'
+    },
+    polygon: {
+        stroke: '#6495ED',
+    },
+    polyline: {
+        strokeWidth: 1,
+        stroke: '#6495ED'
+    },
+    edgeText: {
+        background: {
+            fill: 'white',
+        },
+    },
+}
+
+const config = {
+  stopScrollGraph: true,
+  stopZoomGraph: true,
+  grid: {
+    size: 10,
+    visible: true,
+    type: 'mesh',
+    config: {
+      color: '#DCDCDC',
+    }
+  },
+  keyboard: { enabled: true },
+  style: themeApprove,
+  plugins: [AiNodeExtension,Menu]
+};
+const flow = ref()
+let lf = ref(null)
+let showProp=ref(false)
+let nodeData=reactive(null)
+let nodePropKey=ref(1)
+const initEvent=(lf)=>{
+  lf.on("element:click",node=>{
+    nodeData=node.data
+    showProp.value=true
+    nodePropKey.value++
+    console.log("-->",nodeData)
+  });
+  lf.on("node:dnd-add",data=>{
+    nodeData=data.data;
+    showProp.value=true
+    nodePropKey.value++
+    doUpdateState()
+  });
+  lf.on("node:delete",data=>{
+    if(data.data.text.value=="目标绘图"){
+      ElMessage.error("目标绘图节点不能删除");      
+      setTimeout(() => {
+            lf.undo();
+          }, 400);
+      return;
+    }
+    doUpdateState()
+  });
+  lf.on("node:contextmenu",(d,e,p)=>{
+    if(d.data.text.value=="目标绘图"){
+      setTimeout(()=>{
+        document.querySelector(".lf-menu").style.display="none";
+      },0)
+    }
+  });
+}
+const doUpdateState=()=>{  
+  //nodePanel.value.updateNode(lf.value.getGraphData());
+    emit("updateNode",lf.value.getGraphData())
+}
+
+onMounted(() => {
+    const logicFlow = new LogicFlow({
+        ...config,
+        container: flow.value
+    })
+    lf.value = logicFlow
+    RegisteMenu(logicFlow)
+    initEvent(logicFlow);
+    emit("initLf",lf);
+    window.lf = lf;
+    logicFlow.render({
+    nodes: [
+      {
+        id: 'node_1',
+        type: 'ai-node',
+        x: 150,
+        y: 40,
+        fill:'#409effaa',
+        text: '图像缩放',
+        properties:{
+          node:201
+        }
+      },
+      {
+        id: 'node_2',
+        type: 'ai-node',
+        x: 150,
+        y: 540,
+        fill:'#3CB371',
+        text: '目标绘图',
+        properties:{
+          node:900
+        }
+      }
+    ],
+    edges: [
+      
+    ]
+  })
+  doUpdateState();
+});
+</script>
+<style scoped lang='scss'>
+.flow-demo1 {
+    height: 100%;
+    overflow: hidden;
+    padding: 0px;
+
+    .viewport {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .custom-anchor {
+        stroke: #999;
+        stroke-width: 1;
+        fill: #d9d9d9;
+        cursor: crosshair;
+        rx: 3;
+        ry: 3;
+    }
+
+    .custom-anchor:hover {
+        fill: #ff7f0e;
+        stroke: #ff7f0e;
+    }
+
+    .flow-card {
+        height: 80%;
+        width: calc(100% - 450px);
+
+        .el-card__body {
+            height: 100%;
+            padding: 4px;
+        }
+
+        margin: 0px 12px;
+    }
+
+    .node-panel {
+        width: 240px;
+
+        .el-tabs__item {
+            padding: 0px 10px !important;
+        }
+    }
+
+    .card-prop {
+        height: 300px;
+        width: 200px;
+        min-width: 200px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/protocol/index.vue b/src/views/protocol/index.vue
index a78b6b4..f315ded 100644
--- a/src/views/protocol/index.vue
+++ b/src/views/protocol/index.vue
@@ -1,11 +1,220 @@
+<!-- 用户管理 -->
 <template>
-  <div>
-2222222
+  <div class="app-container">
+    <div class="search-container">            
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true" style="flex-grow: 1;text-align: right;">
+        <el-form-item label="" prop="keywords">
+          <el-input v-model="queryParams.keywords" placeholder="请输入互联名将，标签，模型名称" clearable style="width: 250px"
+            @keyup.enter="handleQuery" />
+        </el-form-item>        
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
+          <el-button @click="resetQuery">
+            <i-ep-refresh />
+            重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
 
+    <el-card shadow="never" class="table-container">      
+
+      <el-table v-loading="loading" :data="tableData" stripe @selection-change="handleSelectionChange">
+        <el-table-column label="模型名称" align="left" prop="name" />
+        <el-table-column label="网络名称" align="left" prop="netName"  width="120"/>
+        <el-table-column label="模型类型"  align="left" prop="modelType" />
+        <el-table-column label="版本" align="left" prop="ver" />
+        <el-table-column label="互联名称" align="left" prop="netName"  width="120"/>
+        <el-table-column label="互联说明"  align="left" prop="desc" />
+        <el-table-column label="互联创建时间" width="120" align="left" prop="upTime" />
+        <el-table-column label="创建用户" width="100" align="left" prop="upUser" />
+        <el-table-column label="状态" width="100" align="left" prop="state">
+          <template #default="scope">
+            <el-button type="success" size="small" v-if="scope.row.state==1">已互联</el-button>
+            <el-button type="info" size="small" v-else plain>未互联</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center" width="270">
+          <template #default="scope">
+            <template v-if="scope.row.state==1">
+            <el-button text type="primary" size="small"
+              @click="doShowDetail(scope.row)"><i-ep-edit />查看</el-button>
+            <el-button text type="primary" size="small"
+              @click="doEdit('user-form', scope.row.id)"><i-ep-link/>修改互联</el-button>
+            <el-button text type="primary" size="small" @click="handleDelete(scope.row)"><i-ep-delete />删除</el-button>
+            </template>
+            <template v-else>
+              <el-button text type="primary" size="small"
+                @click="doAdd(scope.row)">新建互联</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="card-footer">
+      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
+    </el-card>
   </div>
 </template>
 
-<script  setup>
+<script setup lang="ts">
+
+import { UserQuery } from "@/api/user/model";
+
+const queryFormRef = ref(ElForm); // 查询表单
+const router = useRouter();
+
+const loading = ref(false); //  加载状态
+const removeIds = ref([]); // 删除用户ID集合 用于批量删除
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const dateTimeRange = ref("");
+const total = ref(100); // 数据总数
+
+watch(dateTimeRange, (newVal) => {
+  if (newVal) {
+    queryParams.startTime = newVal[0];
+    queryParams.endTime = newVal[1];
+  }
+});
+
+const tableData = [
+  {
+    id:"1",
+    name: "模型名称模型名称模型名称查看",
+    netName: "VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    netName:'我的互联名称',
+    desc:'进行10种类型 的目标分类模型查看',    
+    upTime: "2024-02-02",
+    upUser:'USER',
+    state:'1'        
+  },
+  {
+    id:"2",
+    name: "模型名称模型名称模型名称查看",
+    netName: "Mobile-VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    netName:'我的互联名称',
+    desc:'进行10种类型 的目标分类模型查看',
+    upTime: "2024-02-02",
+    upUser:'USER' ,
+    state:'1'        
+  },
+  {
+    id:"3",
+    name: "模型名称模型名称模型名称查看",
+    netName: "VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    netName:'我的互联名称',
+    desc:'进行人员检测的模型',
+    upTime: "2024-02-02",
+    upUser:'USER' ,
+    state:'1'        
+  },
+  {
+    id:"4",
+    name: "模型名称模型名称模型名称查看",
+    netName: "Mobile-VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    netName:'我的互联名称',
+    desc:'进行10种类型 的目标分类模型查看',
+    upTime: "2024-02-02",
+    upUser:'USER' ,
+    state:'0'        
+  },
+  {
+    id:"5",
+    name: "模型名称模型名称模型名称查看",
+    netName: "VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    netName:'我的互联名称',
+    desc:'进行人员检测的模型',
+    upTime: "2024-02-02",
+    upUser:'USER' ,
+    state:'0'        
+  }
+];
+
+/** 查询 */
+function handleQuery() {
+  loading.value = true;
+  ElMessage.success("查询成功");
+  loading.value = false;
+  
+}
+
+function doUploadModel(){
+  router.replace({ path: "/modelMgr/uploadModel" });
+}
+
+/** 重置查询 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  dateTimeRange.value = "";
+  queryParams.pageNum = 1;
+  queryParams.deptId = undefined;
+  queryParams.startTime = undefined;
+  queryParams.endTime = undefined;
+  handleQuery();
+}
+
+/** 行选中 */
+function handleSelectionChange(selection: any) {
+  removeIds.value = selection.map((item: any) => item.id);
+}
+
+/** 删除数据 */
+function handleDelete(row: { [key: string]: any }) {
+  ElMessageBox.confirm("确认删除算子?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    ElMessage.success("删除成功");
+  });
+}
+
+const doShowDetail=(row:any)=>{
+  router.replace({path:"/protocol/detail",query:{id:row.id}})
+}
+
+const doEdit=(row:any)=>{
+  router.replace({path:"/protocol/edit",query:{id:row.id,type:'edit'}})
+}
+
+const doAdd=(row:any)=>{
+  router.replace({path:"/protocol/edit",query:{id:row.id,type:'add'}})
+}
+
+
+onMounted(() => {
+  //handleQuery();
+});
 </script>
-<style scoped lang='less'>
-</style>
\ No newline at end of file
+
+
+<style scoped lang='scss'>
+.search-container{
+  display:flex;
+}
+.card-footer{
+  position: fixed;
+  width: calc(100% - 215px);
+  bottom: 0px;
+  :deep(.el-card__body){
+    padding:0px;
+    .el-pagination{
+      justify-content: end;
+    }
+  }
+}
+</style>
+
diff --git a/src/views/protocol/nodePanel.vue b/src/views/protocol/nodePanel.vue
new file mode 100644
index 0000000..2d20664
--- /dev/null
+++ b/src/views/protocol/nodePanel.vue
@@ -0,0 +1,87 @@
+<template>
+    <div class="node-panel">
+        <el-tabs type="border-card">
+            <el-tab-pane label="前处理算子">
+                <div v-for="(it1, idx1) in list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)" v-show="it1.show">
+                    {{ it1.text }}
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="后处理算子">
+                <div v-for="(it2, idx2) in list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"  v-show="it2.show">
+                    {{ it2.text }}
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    lf: {
+        type: Object,
+        require: true,
+        default: null
+    }
+})
+const dragNode = (it, t) => {
+    props.lf.dnd.startDrag({
+        type: 'ai-node',
+        text: it.text,
+        fill: t == 1 ? '#409effaa' : '#ccccccaa',
+        properties:{
+          node:it.id
+        }
+    })
+}
+
+const list1 = reactive([
+    { text: "图像缩放", id: 201,show:true },
+    { text: "RGB12图像格式转换", id: 202,show:true },
+    { text: "RGB24图像格式转换", id: 203,show:true },
+    { text: "RGB36图像格式转换", id: 204,show:true },
+    { text: "RGB48图像格式转换", id: 205,show:true },
+    { text: "RGB72图像格式转换", id: 206,show:true }
+])
+
+const list2 = reactive([
+    { text: "VIT推理算子1", id: 301,show:true },
+    { text: "VIT推理算子2", id: 302,show:true },
+    { text: "VIT后处理算子1", id: 303,show:true },
+    { text: "VIT后处理算子2", id: 304,show:true },
+    { text: "VIT后处理算子3", id: 305,show:true },
+]);
+
+const updateNode=(nodes)=>{
+    let nds=nodes.nodes.map(d=>d.properties.node);
+    list2.forEach(d=>{
+        d.show=nds.indexOf(d.id)==-1
+    })
+    list1.forEach(d=>{
+        d.show=nds.indexOf(d.id)==-1
+    })
+}
+
+defineExpose({
+    updateNode
+})
+
+</script>
+<style lang='scss'>
+.node-panel {
+    .div-item {
+        font-size: 12px;
+        border: solid 1px #888;
+        margin-bottom: 10px;
+        line-height: 30px;
+        text-align: center;
+        border-radius: 4px;
+        background: #409effaa;
+        user-select: none;
+        cursor: move;
+
+        &.item2 {
+            background: #ccccccaa;
+        }
+    }
+}
+</style>
\ No newline at end of file