diff --git a/src/components/base/BaseNewDialog/index.vue b/src/components/base/BaseNewDialog/index.vue
index c68b448..f29be04 100644
--- a/src/components/base/BaseNewDialog/index.vue
+++ b/src/components/base/BaseNewDialog/index.vue
@@ -9,7 +9,7 @@
 				<el-button type="primary" @click="handleReset" v-if="resetButton">重 置</el-button>
 				<el-button @click="handleClose">取 消</el-button>
 				<!-- <el-button v-if="orderCenter" @click="handleCancel">取消下单</el-button> -->
-				<el-button type="primary" @click="handleConfirmClick">确 定</el-button>
+				<el-button type="primary" v-if="submitButton" @click="handleConfirmClick">确 定</el-button>
 			</span>
 		</el-dialog>
 	</div>
@@ -87,6 +87,11 @@ export default {
 			type: String,
 			default: '30%',
 		},
+		// 重置按钮
+    submitButton: {
+      type: Boolean,
+      default: true,
+    },
 	},
 	data() {
 		return {
diff --git a/src/components/base/baseRightDialog/index.vue b/src/components/base/baseRightDialog/index.vue
index 5c3b2ff..790a8f4 100644
--- a/src/components/base/baseRightDialog/index.vue
+++ b/src/components/base/baseRightDialog/index.vue
@@ -15,7 +15,7 @@
     >
       <div class="rightDialog">
         <div flex="cross:center main:justify" class="rightConcat">
-          <span style="font-size: 16px">{{ title }}</span>
+          <span style="font-size: 16px">{{ title }} <slot name="operateTitle"></slot></span>
           <span v-if="footerShow" flex="main:right">
             <el-button @click="handleClose" v-if="closeShow">关 闭</el-button>
             <slot name="addButton"></slot>
diff --git a/src/layout/components/NewMenu/index.vue b/src/layout/components/NewMenu/index.vue
index f3dc8cf..a3d0099 100644
--- a/src/layout/components/NewMenu/index.vue
+++ b/src/layout/components/NewMenu/index.vue
@@ -211,9 +211,9 @@ export default {
           value: false,
         });
       }
-      this.$router.push({
-        path: url,
-      });
+      // this.$router.push({
+      //   path: url,
+      // });
     } else {
       this.$store.dispatch("settings/changeSetting", {
         key: "showTagsView",
@@ -221,9 +221,9 @@ export default {
       });
       setMenuNode("/index");
       this.$store.commit("SET_CURRENT_MENU_NODE", "/index");
-      this.$router.push({
-        path: "/index",
-      });
+      // this.$router.push({
+      //   path: "/index",
+      // });
     }
   },
   mounted() {
diff --git a/src/permission.js b/src/permission.js
index 4d29677..0106dfa 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -3,7 +3,7 @@ import store from './store'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import { getToken, getCompanyId } from '@/utils/auth'
+import { getToken, getCompanyId, getMenuNode,setMenuNode } from '@/utils/auth'
 import { isRelogin, getButtonLish } from '@/utils/request'
 import { authApi } from '@/api/apis/auth'
 import { getInfo } from '@/utils/auth'
@@ -11,7 +11,8 @@ import { getInfo } from '@/utils/auth'
 NProgress.configure({
   showSpinner: false
 })
-
+//判断是否第一次进入页面
+let isFirst = true;
 const whiteList = [
   '/login',
   '/test',
@@ -27,6 +28,32 @@ const whiteList = [
 ]
 
 router.beforeEach((to, from, next) => {
+  let reloaded = sessionStorage.getItem('reloaded')
+    //网站第一次进来逻辑 当from为空
+  if (from.path === '/' && !reloaded && isFirst && !whiteList.includes(to.path)) {
+    isFirst = false
+    setMenuNode("/index");
+    store.commit("SET_CURRENT_MENU_NODE", "/index");
+    next({
+      path: '/index',
+    })
+    return
+  }
+  //网站刷新后逻辑
+  if (reloaded === 'true' && !whiteList.includes(to.path)) {
+    sessionStorage.setItem('reloaded', 'false')
+    let url = getMenuNode();
+    if (url) {
+      next({
+        path: url,
+      })
+    } else {
+      next({
+        path: '/index',
+      })
+    }
+    return
+  }
   NProgress.start()
   if (getToken()) {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 37bc4a7..9328fad 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -59,6 +59,14 @@ const permission = {
                     hidden: true
                   }
                 },
+                {
+                  path: 'accountAdmin',
+                  name: 'accountAdmin',
+                  component: () => import('@/views/applicationList/accountList/accountAdmin'),
+                  meta: {
+                    hidden: true
+                  }
+                },
                 {
                   path: 'inserterAdmin',
                   name: 'inserterAdmin',
diff --git a/src/utils/request.js b/src/utils/request.js
index 8c86324..5ecbbfa 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -8,6 +8,7 @@ import {
 import store from '@/store'
 import {
   getToken,
+  setMenuNode,
   setToken,
   removeCompanyId,
   removeToken,
@@ -147,6 +148,10 @@ service.interceptors.response.use(
           type: 'error'
         })
           .then(() => {
+            store.commit("REMOVE_ROUTER");
+            store.dispatch("tagsView/delAllViews");
+            setMenuNode("/index");
+            store.commit("SET_CURRENT_MENU_NODE", "/index");
             store.dispatch('LogOut').then(() => {
               route.replace({
                 path: '/login'
@@ -298,7 +303,7 @@ export function download(url, params, filename, config) {
       responseType: 'blob',
       ...config
     })
-    .then(async(data) => {
+    .then(async (data) => {
       const isLogin = await blobValidate(data)
       if (isLogin) {
         const blob = new Blob([data])
diff --git a/src/utils/util.js b/src/utils/util.js
index 2012477..3e3442d 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -769,3 +769,18 @@ export function delTreeChildren(data){
 	delChilren(data)
 	return data
 }
+
+// 动态宽 boxWidth 最大的div盒子大小,minWidth最小宽度,marginSize间距
+export function dynamicWidth(boxWidth, minWidth, marginSize = 0) {
+	let num = Math.floor(boxWidth / (minWidth + marginSize))
+	return boxWidth / num - marginSize
+}
+
+// 动态高度
+export function dynamicHeight(boxWidth, minWidth, marginSize = 0, boxHeight, listHeight, heightMargin = 0) {
+	let num = Math.floor(boxWidth / (minWidth + marginSize))
+	// console.log(,'几行')
+
+	return Math.ceil(boxHeight / (listHeight + heightMargin)) * num
+	// return boxWidth / num - marginSize
+}
\ No newline at end of file
diff --git a/src/views/LinkUp/compoment/TreeNode.vue b/src/views/LinkUp/compoment/TreeNode.vue
new file mode 100644
index 0000000..0ca76b5
--- /dev/null
+++ b/src/views/LinkUp/compoment/TreeNode.vue
@@ -0,0 +1,132 @@
+<template>
+  <div style="    margin-right: 10px;">
+    <div
+      :class="{
+        'tree-node': true,
+        expandable: isObject,
+        leaf: !isObject,
+        selected: isSelected,
+      }"
+      @click="isObject ? toggleExpand() : selectNode()"
+    >
+      <div v-if="isObject" class="tree-expand-icon" :class="{ expanded }">
+        <i class="el-icon-caret-right"></i>
+      </div>
+      <div v-else class="tree-expand-icon">
+        <i class="el-icon-caret-bottom" style="font-size: 6px; color: #94a3b8"></i>
+      </div>
+      <span>{{ nodeKey }}</span>
+      <el-tag v-if="!isObject" size="small" style="margin-left: 8px">
+        {{ nodeValue }}
+      </el-tag>
+    </div>
+
+    <div v-if="isObject && expanded" style="margin-left: 20px">
+      <tree-node
+        v-for="(value, key) in nodeValue"
+        :key="key"
+        :node-key="key"
+        :node-value="value"
+        :path="path + '.' + key"
+        :selected-node="selectedNode"
+        @node-selected="handleNodeSelected"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TreeNode",
+  props: {
+    nodeKey: [String,Number],
+    nodeValue: [Object, String, Number, Boolean, Array, null],
+    path: String,
+    selectedNode: String,
+  },
+  data() {
+    return {
+      expanded: this.path && !this.path.includes("."),
+    };
+  },
+  computed: {
+    isObject() {
+      return typeof this.nodeValue === "object" && this.nodeValue !== null;
+    },
+    isSelected() {
+      return this.selectedNode === this.path;
+    },
+  },
+  methods: {
+    toggleExpand() {
+      if (this.isObject) {
+        this.expanded = !this.expanded;
+      }
+    },
+    selectNode() {
+      if (!this.isObject) {
+        this.$emit("node-selected", this.path);
+      }
+    },
+    handleNodeSelected(path) {
+      this.$emit("node-selected", path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 原样式类名保持不变，这里你可以加你自己的样式，或者留空 */
+.tree-container {
+  padding: 16px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.tree-node {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  margin: 2px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+  position: relative;
+}
+
+.tree-node:hover {
+  background: #f0f9ff;
+  color: #0ea5e9;
+}
+
+.tree-node.selected {
+  background: #dbeafe;
+  color: #0284c7;
+  border: 1px solid #93c5fd;
+}
+
+.tree-node.expandable {
+  font-weight: 500;
+}
+
+.tree-node.leaf {
+  margin-left: 20px;
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.tree-expand-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.tree-expand-icon.expanded {
+  transform: rotate(90deg);
+}
+</style>
diff --git a/src/views/LinkUp/compoment/addAccount.vue b/src/views/LinkUp/compoment/addAccount.vue
new file mode 100644
index 0000000..6ec8501
--- /dev/null
+++ b/src/views/LinkUp/compoment/addAccount.vue
@@ -0,0 +1,316 @@
+<template>
+  <base-right-dialog
+    @handleClose="examineHandleClose"
+    @handleConfirmClick="handleConfirmClick"
+    :dialogVisible="dialogVisible"
+    size="500px"
+    :appendBody="true"
+    :loading="true"
+    :footerShow="true"
+    :submitShow="submitShow"
+    :submitTitle="'保存'"
+    title="新增账号"
+  >
+    <template #addButton>
+      <el-button type="primary" @click="VerifyAccount">验证账号</el-button>
+    </template>
+    <div class="rightDialogClass_main" style="background: #fff; padding: 10px">
+      <base-form
+        style="padding-top: 0 !important"
+        spanWidth="80px"
+        ref="customForm"
+        :formRow="accountFormRow"
+        :isFunBtn="false"
+        :rules="accountRules"
+        alignAt="block"
+        :span="24"
+      >
+      </base-form>
+      <div class="custom-error-box" v-if="!submitShow && message">
+        <el-alert
+          title="验证失败"
+          type="error"
+          show-icon
+          :closable="false"
+          :description="message"
+        >
+        </el-alert>
+      </div>
+      <div class="custom-error-box" v-if="submitShow && message">
+        <el-alert
+          title="验证成功"
+          type="success"
+          show-icon
+          :closable="false"
+          :description="message"
+        >
+        </el-alert>
+      </div>
+    </div>
+  </base-right-dialog>
+</template>
+
+<script>
+import { authApi } from "@/api/apis/auth";
+import baseRightDialog from "@/components/base/baseRightDialog/index.vue";
+import baseForm from "@/components/base/baseNewForm";
+export default {
+  components: {
+    baseRightDialog,
+    baseForm,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      accountFormRow: [
+        {
+          elCol: [
+            {
+              label: "账号名称",
+              prop: "name",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "登录账号",
+              prop: "userName",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "登录密码",
+              prop: "password",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "数据库类型",
+              prop: "dbType",
+              tag: "elSelect",
+              options: [],
+              optionValue: "columnContent",
+              optionLabel: "columnValue",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "数据库名称",
+              prop: "dbName",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "ip地址",
+              prop: "ipAddress",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "端口",
+              prop: "port",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+      ],
+      accountRules: {
+        name: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        userName: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        dbType: [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change, blur",
+          },
+        ],
+        dbName: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        ipAddress: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        port: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+      },
+      appID: "",
+      sceneID: "",
+      stepID: "",
+      accountType: "",
+      submitShow: false, //是否显示查看按钮
+      message: "",
+    };
+  },
+  methods: {
+    openDialog(appID, sceneID, stepID) {
+      this.submitShow = false;
+      this.message = "";
+      this.queryDictionaryList();
+      this.appID = appID;
+      this.sceneID = sceneID;
+      this.stepID = stepID;
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs.customForm?.resetFields("ruleForm");
+      });
+    },
+    async queryDictionaryList() {
+      let params = {
+        tabName: "sys_flow_step_account",
+        columnName: "db_type",
+      };
+      let res = await authApi(
+        "sysdictionaryshopnewService",
+        "",
+        "queryDictionaryList",
+        "",
+        params
+      );
+      if (res.status == 200) {
+        this.accountFormRow[3].elCol[0].options = res.attribute;
+      }
+    },
+    VerifyAccount() {
+      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          let params = {
+            ...this.$refs.customForm.ruleForm,
+          };
+          this.verifyDataBase(params);
+        } else {
+          this.$message({ message: "请选择必填项", type: "warning" });
+          return;
+        }
+      });
+    },
+    async verifyDataBase(params) {
+      this.openLoading("验证");
+      let res = await authApi(
+        "sysFlowStepAccountService",
+        "",
+        "verifyDataBase",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.message = res.attribute.msg || "";
+        if (res.attribute.flag == true) {
+          this.submitShow = true;
+        } else {
+          this.submitShow = false;
+        }
+      }
+    },
+    handleConfirmClick() {
+      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          let params = {
+            ...this.$refs.customForm.ruleForm,
+            appId: this.appID,
+            status: 1,
+            flowId: this.sceneID,
+            stepId: this.stepID,
+          };
+          this.SaveAccountData(params);
+        } else {
+          this.$message({ message: "请选择必填项", type: "warning" });
+          return;
+        }
+      });
+    },
+
+    async SaveAccountData(params) {
+      let res = await authApi(
+        "sysFlowStepAccountService",
+        "",
+        "saveAccount",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("新增账号成功", "success");
+        this.dialogVisible = false;
+        this.$emit("handleConfirmClick");
+      }
+    },
+    examineHandleClose() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-form-item__content {
+  width: 100% !important;
+}
+
+::v-deep .label {
+  text-align: left !important;
+}
+
+::v-deep .custom-error-box .el-alert {
+  padding: 15px 16px !important;
+}
+::v-deep .custom-error-box .el-alert__title {
+  font-size: 14px !important;
+}
+::v-deep .custom-error-box .el-alert__description {
+  font-size: 13px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/LinkUp/compoment/addDialogChunk.vue b/src/views/LinkUp/compoment/addDialogChunk.vue
new file mode 100644
index 0000000..027a64e
--- /dev/null
+++ b/src/views/LinkUp/compoment/addDialogChunk.vue
@@ -0,0 +1,3148 @@
+<template>
+  <div class="addDialogChunk">
+    <base-right-dialog
+      @handleClose="examineHandleClose"
+      :dialogVisible="examineOperateDialog"
+      size="100%"
+      :appendBody="true"
+      :loading="sceneLoading"
+      :footerShow="true"
+      :submitShow="false"
+      :submitTitle="'发布'"
+      :submitIcon="'el-icon-upload2'"
+      :title="sceneName"
+    >
+      <template #operateTitle>
+        <img
+          style="width: 15px; height: 15px; margin-left: 10px; cursor: pointer"
+          src="../images/edit.svg"
+          @click="editSceneName"
+        />
+      </template>
+      <div
+        class="rightDialogClass_main drawContent"
+        v-if="drawShowList.length > 0"
+        style="background: #fff"
+      >
+        <!-- 步骤画布 -->
+        <div class="drawCanvas" v-show="!representation">
+          <div
+            class="drawItem"
+            v-for="(ele, index) in drawShowList"
+            :key="ele.value"
+          >
+            <div class="title">{{ ele.title }}</div>
+            <div
+              @click="selectDrawItem(index, ele)"
+              class="drawBox"
+              :class="{ active: index == drawSelectIndex }"
+            >
+              <template v-if="index == 0">
+                <div class="img">
+                  <img src="../images/pingtai.svg" v-if="triggerMode == 2" />
+                  <img
+                    src="../images/naozhong.svg"
+                    v-else-if="triggerMode == 1"
+                  />
+                  <img src="../images/api.svg" v-else-if="triggerMode == 4" />
+                  <img src="../images/point.svg" v-else-if="triggerMode == 3" />
+                </div>
+                <div style="width: calc(100% - 60px)">
+                  <div class="actionName">
+                    {{ index + 1 + "." + ele.actionName }}
+                  </div>
+                  <div
+                    class="content DescribeContent"
+                    v-if="!ele.options.taskType"
+                  >
+                    {{ ele.content }}
+                  </div>
+                  <div class="content" v-else>
+                    {{ getTimeDivide(ele.options.taskType) }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div
+                  :class="
+                    ele.options && ele.options.iconUrl ? 'iconStyle' : 'img'
+                  "
+                >
+                  <img
+                    v-if="ele.options && ele.options.iconUrl"
+                    :src="
+                      ele.options.iconUrl
+                        ? ele.options.iconUrl.split('/wwwroot')[1]
+                        : ''
+                    "
+                  />
+                  <img v-else src="../images/huaO.svg" />
+                </div>
+                <div style="width: calc(100% - 60px)">
+                  <div class="actionName" v-if="!ele.options.appName">
+                    {{ index + 1 + "." + ele.actionName }}
+                  </div>
+                  <div
+                    class="actionName"
+                    style="display: flex; align-items: center"
+                    v-else
+                  >
+                    {{ index + 1 + "." + ele.options.appName }}
+                  </div>
+
+                  <div
+                    class="content DescribeContent"
+                    v-if="ele.options.stepDescribe"
+                  >
+                    {{ ele.options.stepDescribe }}
+                  </div>
+                  <div class="content" v-else>{{ ele.content }}</div>
+                </div>
+              </template>
+
+              <div
+                @click.stop="delDrawItem(ele, index)"
+                v-if="index != 0"
+                class="del"
+              >
+                <img src="../images/close.svg" />
+              </div>
+            </div>
+            <div class="line-wrapper" v-if="index != drawShowList.length - 1">
+              <div class="line"></div>
+              <img
+                src="../images/addBtn.svg"
+                @click.stop="insertDrawItem(ele, index)"
+              />
+            </div>
+          </div>
+
+          <div @click="addDrwaItem" class="drawItem drawItemBtn">
+            添加新步骤
+          </div>
+        </div>
+        <!-- 动态内容及其表达式 -->
+        <div
+          class="drawCanvas"
+          style="align-items: flex-start; padding: 0"
+          v-show="representation"
+        >
+          <div class="repContainer">
+            <el-tabs
+              v-model="representationActiveName"
+              @tab-click="representationChange"
+            >
+              <el-tab-pane label="动态内容" name="first"></el-tab-pane>
+              <el-tab-pane label="表达式" name="second"></el-tab-pane>
+            </el-tabs>
+            <div class="closeRepContainer" @click="closeRepContainer">
+              <i class="el-icon-close"></i> 关闭
+            </div>
+            <div class="treeNodeBox" v-if="representationActiveName == 'first'">
+              <tree-node
+                v-for="(value, key) in treeData"
+                :key="key"
+                :node-key="key"
+                :node-value="value"
+                :path="key"
+                :selected-node="selectedNode"
+                @node-selected="handleNodeSelected"
+              />
+            </div>
+            <div
+              class="treeNodeBox"
+              v-if="representationActiveName == 'second'"
+            >
+              <el-tabs tab-position="left" style="height: 100%">
+                <el-tab-pane
+                  v-for="(item, index) in representationData"
+                  :label="item.label"
+                >
+                  <template v-for="(row, rowIndex) in item.children">
+                    <div class="repItem" @click="handleTagSelected(row.label)">
+                      <el-tag size="small">
+                        {{ row.label }}
+                      </el-tag>
+                      <span class="repItemValue">{{ row.value }}</span>
+                    </div>
+                  </template>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+          </div>
+        </div>
+        <!-- 操作区 -->
+        <!-- 第一步的时候单独处理 -->
+        <div class="drawAction" v-if="drawSelectIndex == 0">
+          <el-tabs v-model="activeTabName">
+            <el-tab-pane label="1. 选择操作" name="选择操作">
+              <div
+                class="currentDrawBox"
+                style="padding: 10px"
+                v-if="drawShowList.length > 0"
+              >
+                <div class="drawimg">
+                  <img src="../images/pingtai.svg" v-if="triggerMode == 2" />
+                  <img
+                    src="../images/naozhong.svg"
+                    v-else-if="triggerMode == 1"
+                  />
+                  <img src="../images/api.svg" v-else-if="triggerMode == 4" />
+                  <img src="../images/point.svg" v-else-if="triggerMode == 3" />
+                </div>
+                <div style="width: calc(100% - 60px)">
+                  <div class="actionName">
+                    {{ 1 + "." + drawShowList[0].actionName }}
+                  </div>
+                  <div class="content" v-if="!drawShowList[0].options.taskType">
+                    {{ drawShowList[0].content }}
+                  </div>
+                  <div class="content" v-else>
+                    {{ getTimeDivide(drawShowList[0].options.taskType) }}
+                  </div>
+                </div>
+              </div>
+              <div class="timeWrap">
+                <template v-for="(item, index) in timeDivide">
+                  <div
+                    @click="handleTimeItem(item, index)"
+                    :class="{ activTimeItem: activTimeIndex == item.id }"
+                    class="timeItem"
+                  >
+                    <div class="imgBox">
+                      <img src="../images/shandian.svg" />
+                    </div>
+                    <div>
+                      <div class="title">{{ item.title }}</div>
+                      <div class="content">{{ item.content }}</div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane
+              label="2. 配置"
+              name="配置"
+              :disabled="!this.activTimeIndex"
+            >
+              <div
+                class="currentDrawBox"
+                style="padding: 10px"
+                v-if="drawShowList.length > 0"
+              >
+                <div class="drawimg">
+                  <img src="../images/pingtai.svg" v-if="triggerMode == 2" />
+                  <img
+                    src="../images/naozhong.svg"
+                    v-else-if="triggerMode == 1"
+                  />
+                  <img src="../images/api.svg" v-else-if="triggerMode == 4" />
+                  <img src="../images/point.svg" v-else-if="triggerMode == 3" />
+                </div>
+                <div style="width: calc(100% - 60px)">
+                  <div class="actionName">
+                    {{ 1 + "." + drawShowList[0].actionName }}
+                  </div>
+                  <div class="content" v-if="!drawShowList[0].options.taskType">
+                    {{ drawShowList[0].content }}
+                  </div>
+                  <div class="content" v-else>
+                    {{ getTimeDivide(drawShowList[0].options.taskType) }}
+                  </div>
+                </div>
+              </div>
+              <div class="crontabBox">
+                <div class="crontabBoxTitle">cron表达式</div>
+                <FishCrontab
+                  ref="fishCrontab"
+                  class="crontab"
+                  @fill="crontabFill"
+                  :expression="expression"
+                  :fiveTimes="false"
+                ></FishCrontab>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <!-- 其他步骤 -->
+        <div class="drawAction" v-else v-loading="drawMask">
+          <el-tabs
+            v-model="activeOtherTabName"
+            @tab-click="handleOtherTabClick"
+          >
+            <el-tab-pane label="1. 选择应用" name="选择应用">
+              <!-- 选中的操作步骤 -->
+              <div class="drawItemBox">
+                <div class="currentDrawBox" style="width: 100%">
+                  <div class="img">
+                    <img class="appIcon" src="../images/applicotion.svg" />
+                  </div>
+                  <div style="width: calc(100% - 64px)">
+                    <!-- 应用名称 -->
+                    <div class="actionName" v-if="CurrentAppRow.appName">
+                      {{ CurrentAppRow.appName }}
+                    </div>
+                    <!-- 步骤描述 -->
+                    <div class="content" v-if="CurrentAppRow.description">
+                      {{ CurrentAppRow.description }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="search">
+                <el-input
+                  class="input"
+                  v-model="appCodeOrName"
+                  placeholder="请输入"
+                  clearable
+                  style="width: 210px"
+                  @keydown.enter.native="searchApp"
+                ></el-input>
+                <el-button
+                  type="primary"
+                  style="margin-right: 5px"
+                  size="small"
+                  @click="searchApp"
+                  >查询</el-button
+                >
+              </div>
+              <div
+                class="app"
+                style="max-height: calc(-345px + 100vh); overflow: auto"
+              >
+                <div class="applist">
+                  <div
+                    v-for="(app, index) in appList"
+                    class="appItem"
+                    @click="hangleAppItem(app, index)"
+                    :class="{ active: appActivIndex == app.id }"
+                  >
+                    <img class="appIcon" src="../images/applicotion.svg" />
+                    <div class="name">{{ app.name }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="DescribeDataBox">
+                <span style="font-size: 14px">步骤描述</span>
+                <el-input
+                  class="input"
+                  v-model="description"
+                  placeholder="请输入步骤描述"
+                  clearable
+                  @blur="changeDescription"
+                  type="textarea"
+                ></el-input>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane
+              label="2. 选择操作"
+              name="选择操作"
+              :disabled="!this.appActivIndex"
+            >
+              <!-- 选中的操作步骤 -->
+              <div class="drawItemBox">
+                <div class="currentDrawBox" style="width: 100%">
+                  <div class="img">
+                    <img class="appIcon" src="../images/applicotion.svg" />
+                  </div>
+                  <div style="width: calc(100% - 64px)">
+                    <!-- 应用名称 -->
+                    <div class="actionName" v-if="CurrentAppRow.appName">
+                      {{ CurrentAppRow.appName }}
+                    </div>
+                    <!-- 步骤描述 -->
+                    <div class="content" v-if="CurrentAppRow.description">
+                      {{ CurrentAppRow.description }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="search">
+                <el-input
+                  class="input"
+                  v-model="operateCodeOrName"
+                  placeholder="请输入"
+                  style="width: 210px"
+                  clearable
+                  @keydown.enter.native="searchApiPlugin"
+                ></el-input>
+                <el-button type="primary" size="small" @click="searchApiPlugin"
+                  >查询</el-button
+                >
+              </div>
+
+              <el-radio-group
+                v-model="activeApiPliginTabName"
+                @change="ApiPliginTabChangeEvent"
+              >
+                <el-radio-button label="API接口">API接口</el-radio-button>
+                <el-radio-button label="插件">插件</el-radio-button>
+              </el-radio-group>
+              <div class="ApiPliginBox app">
+                <div
+                  class="applist"
+                  v-show="activeApiPliginTabName == 'API接口'"
+                >
+                  <div
+                    v-for="(item, index) in apiList"
+                    class="appItem"
+                    @click="hangleApiClickEvent(item, index)"
+                    :class="{ active: apiIdActiv == item.id }"
+                  >
+                    <div class="imgBox">
+                      <img src="../images/shandian.svg" />
+                    </div>
+                    <div>
+                      <div class="name">{{ item.apiName }}</div>
+                      <div class="name">{{ item.apiPath }}</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="applist" v-show="activeApiPliginTabName == '插件'">
+                  <div
+                    v-for="(item, index) in pluginList"
+                    class="appItem"
+                    @click="hanglePluginClickEvent(item, index)"
+                    :class="{ active: pluginActiv == item.id }"
+                  >
+                    <div class="imgBox">
+                      <img src="../images/shandian.svg" />
+                    </div>
+                    <div>
+                      <div class="name">{{ item.plugName }}</div>
+                      <div class="name">{{ item.plugDescribe }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane
+              label="3. 选择账号"
+              name="选择账号"
+              :disabled="
+                !this.appActivIndex || !(this.apiIdActiv || this.pluginActiv)
+              "
+            >
+              <!-- 选中的操作步骤 -->
+              <div class="drawItemBox">
+                <div class="currentDrawBox" style="width: 100%">
+                  <div class="img">
+                    <img class="appIcon" src="../images/applicotion.svg" />
+                  </div>
+                  <div style="width: calc(100% - 64px)">
+                    <!-- 应用名称 -->
+                    <div class="actionName" v-if="CurrentAppRow.appName">
+                      {{ CurrentAppRow.appName }}
+                    </div>
+                    <!-- 步骤描述 -->
+                    <div class="content" v-if="CurrentAppRow.description">
+                      {{ CurrentAppRow.description }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="userList">
+                <div @click="addAccount" class="userItem userBtn">
+                  <i
+                    class="el-icon-plus"
+                    style="font-size: 12px; margin-right: 5px"
+                  ></i>
+                  添加账户
+                </div>
+                <div class="userContentBox">
+                  <div
+                    v-for="(item, index) in userList"
+                    class="userItem"
+                    style="justify-content: flex-start"
+                    @click="handleUserClickEvent(item, index)"
+                    :class="{ active: userActivId == item.id }"
+                  >
+                    <div class="status">
+                      <i
+                        class="el-icon-success"
+                        style="color: #7ec050"
+                        v-if="item.status == 1"
+                      ></i>
+                      <i
+                        class="el-icon-error"
+                        style="color: #f56c6c"
+                        v-else-if="item.status == 0"
+                      ></i>
+                      <i
+                        class="el-icon-remove"
+                        style="color: #919398"
+                        v-else
+                      ></i>
+                    </div>
+                    <div>
+                      <div class="userName">{{ item.name }}</div>
+                      <div class="content" style="margin-top: 5px">
+                        最新编辑时间：{{ item.modify_time }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane
+              label="4. 配置"
+              name="配置应用"
+              :disabled="
+                !this.appActivIndex ||
+                !(this.apiIdActiv || this.pluginActiv) ||
+                !this.userActivId
+              "
+            >
+              <!-- 选中的操作步骤 -->
+              <div class="drawItemBox">
+                <div class="currentDrawBox" style="width: 100%">
+                  <div class="img">
+                    <img class="appIcon" src="../images/applicotion.svg" />
+                  </div>
+                  <div style="width: calc(100% - 64px)">
+                    <!-- 应用名称 -->
+                    <div class="actionName" v-if="CurrentAppRow.appName">
+                      {{ CurrentAppRow.appName }}
+                    </div>
+                    <!-- 步骤描述 -->
+                    <div class="content" v-if="CurrentAppRow.description">
+                      {{ CurrentAppRow.description }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="outsideContent">
+                <!-- 选择表 -->
+                <el-form
+                  ref="outsideForm"
+                  :model="outsideFormData"
+                  :rules="outsideRules"
+                  label-width="80px"
+                  label-position="top"
+                  style="margin-bottom: 10px"
+                >
+                  <el-form-item label="选择表">
+                    <el-select
+                      v-model="outsideFormData.tableName"
+                      placeholder="请选择表"
+                      @change="outsideSelectChange"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="(el, index) in outsideOptions"
+                        :key="index"
+                        :label="el.table_name"
+                        :value="el.table_name"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+                <div class="Columnsbtn">
+                  <el-button @click="saveTestTableEvent">暂存</el-button>
+                  <el-button @click="hitTesting">点击测试</el-button>
+                </div>
+                <div class="fixedChildTable">
+                  <!-- 表字段 -->
+                  <el-collapse
+                    v-model="activeNames"
+                    v-if="outsideColumns.length > 0"
+                  >
+                    <el-collapse-item title="查询条件配置" name="1">
+                      <el-form
+                        ref="ColumnsForm"
+                        label-width="80px"
+                        label-position="top"
+                        style="margin: 0 10px"
+                      >
+                        <div id="editorContainer">
+                          <div
+                            v-for="(row, rowIndex) in outsideColumns"
+                            :key="rowIndex"
+                            class="editorItem"
+                          >
+                            <el-form-item :label="row.column_name">
+                              <div class="editor-container">
+                                <div
+                                  class="content-editor"
+                                  :ref="
+                                    'contentEditor' + row.column_name + rowIndex
+                                  "
+                                  contenteditable="true"
+                                  @keydown="
+                                    handleKeyDown(
+                                      $event,
+                                      row.column_name,
+                                      rowIndex
+                                    )
+                                  "
+                                  @input="
+                                    handleInput(
+                                      $event,
+                                      row.column_name,
+                                      rowIndex
+                                    )
+                                  "
+                                  @click="
+                                    handleEditorClick(
+                                      $event,
+                                      row.column_name,
+                                      rowIndex
+                                    )
+                                  "
+                                  @paste="
+                                    handlePaste(
+                                      $event,
+                                      row.column_name,
+                                      rowIndex
+                                    )
+                                  "
+                                  @focus="
+                                    handleEditorFocus(
+                                      $event,
+                                      row.column_name,
+                                      rowIndex
+                                    )
+                                  "
+                                  @blur="
+                                    handleEditorBlur(
+                                      $event,
+                                      row.column_name,
+                                      rowIndex
+                                    )
+                                  "
+                                ></div>
+                                <div
+                                  class="editorIcon"
+                                  @click.stop="
+                                    handleAddNodeToEditor(
+                                      row.column_name,
+                                      rowIndex
+                                    )
+                                  "
+                                >
+                                  <i class="el-icon-circle-plus"></i>
+                                </div>
+                                <div
+                                  class="clearIcon"
+                                  @click.stop="
+                                    handleClearNodeToEditor(
+                                      row.column_name,
+                                      rowIndex
+                                    )
+                                  "
+                                >
+                                  <i class="el-icon-circle-close"></i>
+                                </div>
+                              </div>
+                            </el-form-item>
+                          </div>
+                        </div>
+                      </el-form>
+                    </el-collapse-item>
+                  </el-collapse>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </base-right-dialog>
+    <editSence ref="editSence" @handleConfirmClick="updateTitle"></editSence>
+    <addAccount
+      ref="addAccount"
+      @handleConfirmClick="addAccountConfirmClick"
+    ></addAccount>
+  </div>
+</template>
+
+<script>
+// 导入编辑场景组件
+import baseRightDialog from "@/components/base/baseRightDialog/index.vue";
+import editSence from "./editSence.vue";
+import { authApi } from "@/api/apis/auth";
+// 导入步骤添加和使用的常量
+import { stepAdd, stepUse, timeDivide, representationData } from "./constant";
+// 导入 cron 表达式组件
+import FishCrontab from "fish-crontab";
+// 导入添加账号组件
+import addAccount from "./addAccount.vue";
+import baseForm from "@/components/base/baseNewForm";
+import treeNode from "./TreeNode";
+import IconsDialog from "../../tool/build/IconsDialog.vue";
+export default {
+  components: {
+    editSence,
+    baseRightDialog,
+    FishCrontab,
+    addAccount,
+    baseForm,
+    treeNode,
+    IconsDialog,
+  },
+  data() {
+    return {
+      examineOperateDialog: false, //判断是都打开弹窗
+      sceneLoading: false, //遮照
+      sceneName: "", //场景名称
+      sceneID: "", //场景ID
+      // 画布列表，对应右侧操作区域
+      drawShowList: [],
+      drawSelectIndex: 0, // 当前选中的画布索引
+      currentRowData: {},
+      //当步骤为1时
+      timeDivide: timeDivide,
+      activeTabName: "选择操作", // 显示的操作栏
+      activTimeIndex: "", // 当前选择操作的类型
+      expression: "", //cron表达式
+      // 其他步骤
+      activeOtherTabName: "",
+      CurrentAppRow: {}, // 当前选择的应用数据
+      appCodeOrName: "", //应用搜索条件
+      drawMask: false,
+
+      // 应用列表
+      appList: [],
+      appCodeOrName: "", // 应用搜索关键字
+      appActivIndex: "", // 当前选中的应用 ID
+      description: "", //应用描述
+      operateCodeOrName: "", //api 或者 插件的搜索
+      activeApiPliginTabName: "API接口", // 当前操作是 API 还是插件
+      // API 插件列表
+      pluginList: [],
+      // API 接口列表
+      apiList: [],
+      apiIdActiv: "", // 选择的 API ID
+      pluginActiv: "", // 选择的插件 ID
+      // 用户列表
+      userList: [],
+      userActivId: "", // 选择的用户 ID
+      outsideFormRow: [
+        {
+          elCol: [
+            {
+              label: "选择表",
+              prop: "tableName",
+              tag: "elSelect",
+              span: 24,
+            },
+          ],
+        },
+      ],
+      outsideRules: {
+        tableName: [
+          {
+            required: true,
+            message: "请选择表",
+            trigger: "change, blur",
+          },
+        ],
+      },
+      outsideFormData: {
+        tableName: "",
+      },
+      outsideOptions: [],
+      outsideColumns: [], //表字段
+      activeNames: "1", //展开
+      ColumnsFormData: {},
+      ColumnsRules: {},
+
+      representation: false,
+      selectedNode: "",
+      representationActiveName: "first",
+      treeData: {
+        user: {
+          id: 1001,
+          profile: {
+            name: "李四",
+            email: "lisi@example.com",
+            settings: {
+              theme: "dark",
+              notifications: {
+                email: true,
+                sms: false,
+                push: true,
+              },
+            },
+          },
+          permissions: ["read", "write", "admin"],
+          metadata: {
+            created_at: "2023-01-15T10:30:00Z",
+            updated_at: "2024-03-20T15:45:30Z",
+            version: 2.1,
+          },
+        },
+        config: {
+          database: {
+            host: "localhost",
+            port: 5432,
+            ssl: false,
+          },
+          features: {
+            experimental: ["ai_assist", "real_time_sync"],
+            stable: ["user_management", "data_export"],
+          },
+        },
+      },
+      currenrActiveNodeRef: "",
+      lastSelectedTokenIndex: -1,
+      representationData: representationData,
+      savedRange: null, // ⬅️ 用于存储当前 range
+    };
+  },
+  methods: {
+    async saveTestTableEvent() {
+      if (!this.outsideFormData.tableName) {
+        this.$vmNews("请先选择表");
+        return;
+      }
+      this.openLoading("暂存");
+      // 使用示例：传入你这段 HTML 所在的 DOM 根节点
+      const root = document.querySelector("#editorContainer");
+      const parsed = this.extractEditorItems(root);
+      let data = this.currentRowData.options;
+      let params = {
+        detailList: parsed,
+        flowId: this.sceneID,
+        stepID: data.stepID,
+        stepAccountId: data.step_acc_id,
+        actionName: data.apiName || data.plugName,
+        tableName: this.outsideFormData.tableName,
+      };
+      let res = await authApi(
+        "sysFlowStepConfigService",
+        "",
+        "saveOrUpdateConfig",
+        "",
+        params
+      );
+      if(res.status == "200"){
+        this.$vmNews("暂存成功！","success")
+      }
+    },
+    extractEditorItems(rootElement) {
+      const result = [];
+      const items = rootElement.querySelectorAll(".editorItem");
+      items.forEach((item) => {
+        const fieldName =
+          item.querySelector(".el-form-item__label")?.innerText.trim() || "";
+        const editor = item.querySelector(".content-editor");
+        if (!editor) return;
+
+        const html_label = editor.innerHTML.trim(); // 保留标签结构
+
+        let whereCondition = "";
+        editor.childNodes.forEach((node) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            whereCondition += node.textContent;
+          } else if (node.nodeType === Node.ELEMENT_NODE) {
+            whereCondition += node.getAttribute("data-token-text") || "";
+          }
+        });
+        // 替换中文符号为英文符号
+        whereCondition = whereCondition
+          .replace(/，/g, ",")
+          .replace(/（/g, "(")
+          .replace(/）/g, ")");
+
+        result.push({ fieldName, whereCondition, html_label });
+      });
+
+      return result;
+    },
+    hitTesting(){
+
+    },
+    /**
+     * 打开弹窗
+     * @param {string} sceneID 场景 ID
+     * @param {string} sceneName 场景名称
+     * @param {string} type 操作类型
+     * @param {number} triggerMode 触发模式
+     */
+    openDialog(sceneID, sceneName, type, triggerMode) {
+      // 更新场景 ID
+      this.sceneID = sceneID;
+      // 更新场景类型
+      this.sceneType = type;
+      // 更新场景名称
+      this.sceneName = sceneName;
+      // 更新触发模式
+      this.triggerMode = triggerMode;
+      // 显示审核操作弹窗
+      this.examineOperateDialog = true;
+      // 显示场景加载状态
+      this.sceneLoading = true;
+      // 5 秒后隐藏场景加载状态
+      setTimeout(() => {
+        this.sceneLoading = false;
+      }, 5000);
+
+      if (type === "add") {
+        // 新增时生成第一步
+        let params = {
+          flowId: this.sceneID,
+          step: 1,
+          stepType: 2,
+        };
+        this.SaveSceneStepData(params, "first");
+      }
+
+      if (type === "edit") {
+        // 编辑时获取场景步骤列表
+        this.GetSceneStepList();
+      }
+    },
+    /**
+     * 获取场景步骤列表
+     */
+    async GetSceneStepList() {
+      // 清空画布列表
+      this.drawShowList = [];
+      // 获取场景步骤列表的参数
+      let params = {
+        flowId: this.sceneID,
+      };
+      let res = await authApi(
+        "sysFlowStepService",
+        "",
+        "queryList",
+        "",
+        params
+      );
+      // 隐藏场景加载状态
+      this.sceneLoading = false;
+      if (res.status == "200") {
+        if (res.attribute.length > 0) {
+          res.attribute.forEach((item, index) => {
+            if (index === 0) {
+              let obj = {
+                ...stepAdd,
+                options: {
+                  ...item,
+                  stepID: item.id,
+                  taskType: item.apiId,
+                },
+              };
+              if (this.triggerMode === 2) {
+                obj.actionName = "定时触发";
+              } else if (this.triggerMode === 1) {
+                obj.actionName = "应用程序触发";
+              } else if (this.triggerMode === 4) {
+                obj.actionName = "Webhook触发";
+              } else if (this.triggerMode === 3) {
+                obj.actionName = "手动触发";
+              }
+              // 将第一个步骤添加到画布列表
+              this.drawShowList.push(obj);
+            } else {
+              // 将其他步骤添加到画布列表
+              this.drawShowList.push({
+                ...stepUse,
+                options: {
+                  ...item,
+                  stepID: item.id,
+                  stepDescribe: item.apiName || item.plugName,
+                },
+              });
+            }
+          });
+          // 在下一个 DOM 更新周期后执行操作
+          this.$nextTick(() => {
+            // 选中第一个步骤
+            this.selectDrawItem(0, this.drawShowList[0]);
+          });
+        } else {
+          // 新增时生成第一步
+          let params = {
+            flowId: this.sceneID,
+            step: 1,
+            stepType: 2,
+          };
+          this.SaveSceneStepData(params, "first");
+        }
+      }
+    },
+    /**
+     * 新增、实时修改场景步骤基本信息
+     * @param {Object} params 请求参数
+     * @param {string} type 操作类型
+     * @param {string} insertIndex 用于插入
+     */
+    async SaveSceneStepData(params, type, insertIndex) {
+      let res = await authApi(
+        "sysFlowStepService",
+        "",
+        "saveOrUpdateFlowStep",
+        "",
+        params
+      );
+      // 隐藏场景加载状态
+      this.sceneLoading = false;
+      if (res.status == "200") {
+        // 第一次打开弹窗
+        if (type === "first") {
+          let obj = [
+            {
+              ...stepAdd,
+              options: {
+                // 步骤 id
+                stepID: res.attribute.id,
+                step: 1,
+                stepType: 2, // 步骤类型（1、触发方式 2、应用 3、 数据集 4、条件
+              },
+            },
+          ];
+          if (this.triggerMode === 2) {
+            obj[0].actionName = "定时触发";
+          } else if (this.triggerMode === 1) {
+            obj[0].actionName = "应用程序触发";
+          } else if (this.triggerMode === 4) {
+            obj[0].actionName = "Webhook触发";
+          } else if (this.triggerMode === 3) {
+            obj[0].actionName = "手动触发";
+          }
+          // 更新画布列表
+          this.drawShowList = obj;
+          // 在下一个 DOM 更新周期后执行操作
+          this.$nextTick(async () => {
+            await this.selectDrawItem(0, this.drawShowList[0]);
+            // 获取应用列表
+            await this.getAppList();
+          });
+        }
+        // 手动新增时
+        if (type === "add") {
+          // 将新步骤添加到画布列表
+          this.drawShowList.push({
+            ...stepUse,
+            options: {
+              // 步骤 id
+              stepID: res.attribute.id,
+            },
+          });
+          // 在下一个 DOM 更新周期后执行操作
+          this.$nextTick(() => {
+            // 选中当前新增的步骤
+            let indexFlag = this.drawShowList.length - 1;
+            this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]);
+          });
+        }
+        // 插入时
+        if (type == "insert") {
+          this.drawShowList.splice(insertIndex + 1, 0, {
+            ...stepUse,
+            options: {
+              // 步骤 id
+              stepID: res.attribute.id,
+            },
+          });
+          // 在下一个 DOM 更新周期后执行操作
+          this.$nextTick(() => {
+            // 选中当前新增的步骤
+            let indexFlag = insertIndex + 1;
+            this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]);
+          });
+        }
+        if (type === "time") {
+          this.activeTabName = "配置";
+        }
+        // cron表达式保存后
+        if (type === "expression") {
+          if (this.drawShowList.length === 1) {
+            // 自动添加一个步骤
+            this.addDrwaItem();
+          } else {
+            // 在下一个 DOM 更新周期后执行操作
+            this.$nextTick(() => {
+              // 选中第二个步骤
+              this.selectDrawItem(1, this.drawShowList[1]);
+            });
+          }
+        }
+      }
+    },
+    /**
+     * 手动新增场景步骤
+     */
+    addDrwaItem() {
+      // 新增步骤的参数
+      let params = {
+        flowId: this.sceneID,
+        step: this.drawShowList.length + 1,
+        stepType: 2,
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params, "add");
+    },
+    /**
+     * 切换步骤时
+     * @param {number} index 步骤索引
+     */
+    async selectDrawItem(index, row) {
+      // 更新当前选中的步骤索引
+      this.drawSelectIndex = index;
+      this.currentRowData = row;
+      // 先清空
+      this.pluginActiv = "";
+      this.apiIDActiv = "";
+      this.userActivId = "";
+      this.CurrentAppRow = {};
+      if (index === 0) {
+        this.activeTabName = "选择操作";
+      } else {
+        this.activeOtherTabName = "选择应用";
+        // 清空应用搜索关键字
+        this.appCodeOrName = "";
+        // 获取应用列表
+        await this.getAppList();
+        // 获取场景步骤数据
+        await this.GetSceneStepData();
+      }
+    },
+    /**
+     * 获取场景步骤数据
+     */
+    async GetSceneStepData() {
+      // 获取场景步骤数据的参数
+      let params = {
+        id: this.currentRowData.options.stepID,
+      };
+      let res = await authApi(
+        "sysFlowStepService",
+        "",
+        "getFlowStep",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        let obj = {
+          ...this.currentRowData.options,
+          ...res.attribute,
+        };
+        // 更新当前步骤的选项
+        obj.stepDescribe = obj.apiName || obj.plugName;
+        this.currentRowData.options = obj;
+        // 更新当前选择的应用步骤描述
+        this.CurrentAppRow.description = obj.stepDescribe;
+        if (this.drawSelectIndex == 0) {
+          this.expression = obj.taskCorn;
+          this.activTimeIndex = obj.apiId;
+        } else {
+          this.activeApiPliginTabName = obj.actionType || "API接口";
+
+          // 清空 API 或插件搜索关键字
+          this.operateCodeOrName = "";
+          // 清空 API 列表
+          this.apiList = [];
+          // 清空插件列表
+          this.pluginList = [];
+          // 清空用户列表
+          this.userList = [];
+          if (this.currentRowData.options.appId) {
+            // 更新当前选中的应用 ID
+            this.appActivIndex = this.currentRowData.options.appId;
+            // 更新当前选择的应用名称
+            this.CurrentAppRow.appName = this.currentRowData.options.appName;
+            // 获取当前步骤的 api、插件、账号
+            await this.GetApiList(this.appActivIndex);
+            // this.getPluginList(this.appActivIndex);
+            await this.GetAccountListAPI(this.appActivIndex);
+          } else {
+            // 重置当前选中的应用 ID
+            this.appActivIndex = "";
+            // 重置当前选择的应用数据
+            this.CurrentAppRow = {};
+          }
+          this.$nextTick(() => {
+            if (this.currentRowData.options.description) {
+              // 更新步骤描述
+              this.description = this.currentRowData.options.description;
+            } else {
+              // 重置步骤描述
+              this.description = "";
+            }
+
+            if (this.currentRowData.options.apiId) {
+              // 更新选择的 API ID
+              this.apiIdActiv = this.currentRowData.options.apiId;
+            } else {
+              // 重置选择的 API ID
+              this.apiIdActiv = "";
+            }
+            // 插件
+            if (this.currentRowData.options.plugId) {
+              // 更新选择的插件 ID
+              this.pluginActiv = this.currentRowData.options.plugId;
+            } else {
+              // 重置选择的插件 ID
+              this.pluginActiv = "";
+            }
+            // 账号
+            if (this.currentRowData.options.step_acc_id) {
+              // 更新选择的用户 ID
+              this.userActivId = this.currentRowData.options.step_acc_id;
+              // 更新当前选择的应用账号名称
+              this.CurrentAppRow.step_acc_name =
+                this.currentRowData.options.step_acc_name;
+              // 获取表数据
+              this.queryTables(this.userActivId);
+            } else {
+              // 重置选择的用户 ID
+              this.userActivId = "";
+              // 重置当前选择的应用账号名称
+              this.CurrentAppRow.step_acc_name = "";
+            }
+
+            // 表名
+            if (this.currentRowData.options.tableName) {
+              // 更新选择的用户 ID
+              this.outsideFormData.tableName =
+                this.currentRowData.options.tableName;
+            } else {
+              // 重置选择的用户 ID
+              this.outsideFormData.tableName = "";
+            }
+          });
+        }
+      }
+    },
+    /**
+     * 删除场景步骤
+     * @param {Object} ele 步骤数据
+     * @param {number} index 步骤索引
+     */
+    delDrawItem(ele, index) {
+      // 获取步骤 ID
+      let stepID = ele.options.stepID || null;
+      if (!stepID) {
+        this.$vmNews("删除失败！步骤ID丢失，请联系管理员处理");
+        return;
+      }
+      // 弹出确认删除对话框
+      this.$confirm("确认删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          if (stepID) {
+            let res = await authApi(
+              "sysFlowStepService",
+              "",
+              "deleteFlowStep",
+              "",
+              {
+                id: stepID,
+              }
+            );
+            if (res.status == "200") {
+              // 提示删除成功
+              this.$vmNews("删除成功", "success");
+              // 从画布列表中删除该步骤
+              this.drawShowList.splice(index, 1);
+              if (this.drawSelectIndex === index) {
+                // 选中第一个步骤
+                this.selectDrawItem(0, this.drawShowList[0]);
+              } else if (this.drawSelectIndex >= this.drawShowList.length) {
+                // 选中最后一个步骤
+                let indexFlag = this.drawShowList.length - 1;
+                this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]);
+              }
+            }
+          } else {
+            // 提示删除成功
+            this.$vmNews("删除成功", "success");
+            // 从画布列表中删除该步骤
+            this.drawShowList.splice(index, 1);
+            if (this.drawSelectIndex === index) {
+              // 选中第一个步骤
+              this.selectDrawItem(0, this.drawShowList[0]);
+            } else if (this.drawSelectIndex >= this.drawShowList.length) {
+              // 选中最后一个步骤
+              let indexFlag = this.drawShowList.length - 1;
+              this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]);
+            }
+          }
+        })
+        .catch(() => {});
+    },
+    /**
+     * 插入场景步骤
+     * @param {any} value 标签页值
+     */
+
+    insertDrawItem(ele, index) {
+      let params = {
+        flowId: this.sceneID,
+        step: index + 1,
+        stepType: 2,
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params, "insert", index);
+    },
+    // ----------------------------------------------步骤一相关操作
+    /**
+     * 处理时间项点击事件
+     * @param {Object} item 时间项数据
+     * @param {number} index 时间项索引
+     */
+    handleTimeItem(item, index) {
+      // 更新当前选择操作的类型
+      this.activTimeIndex = item.id;
+      // 更新当前步骤的任务类型
+      this.currentRowData.options.taskType = item.id;
+      let params = {
+        flowId: this.sceneID,
+        id: this.currentRowData.options.stepID,
+        apiId: item.id,
+        apiName: this.getTimeDivide(item.id),
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params, "time");
+    },
+    /**
+     * cron 表达式点击确定时时间插件回调
+     * @param {string} value cron 表达式的值
+     */
+    crontabFill(value) {
+      // 更新 cron 表达式
+      this.expression = value;
+      // 更新当前步骤的任务值
+      this.currentRowData.options.taskValue = value;
+      let params = {
+        flowId: this.sceneID,
+        id: this.currentRowData.options.stepID,
+        taskCorn: value,
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params, "expression");
+    },
+    // ----------------------------------------------其他步骤--相关操作
+    /**
+     * 处理 其他步骤的tab点击事件
+     * @param {any} value 标签页值
+     */
+    handleOtherTabClick(value) {
+      console.log(
+        this.activeOtherTabName,
+        this.userActivId,
+        this.outsideFormData.tableName
+      );
+      if (
+        this.activeOtherTabName == "配置应用" &&
+        this.userActivId &&
+        this.outsideFormData.tableName
+      ) {
+        this.queryColumns(this.outsideFormData.tableName);
+      }
+    },
+    /**
+     * 应用搜索
+     */
+    searchApp() {
+      // 显示搜索遮罩
+      this.drawMask = true;
+      // 5 秒后隐藏搜索遮罩
+      setTimeout(() => {
+        this.drawMask = false;
+      }, 5000);
+      // 获取应用列表
+      this.getAppList();
+    },
+    /**
+     * 获取应用列表
+     */
+    async getAppList() {
+      // 获取应用列表的参数
+      let params = {
+        name: this.appCodeOrName,
+      };
+      // 调用获取应用列表的 API
+      let res = await authApi(
+        "sysApplicationService",
+        "",
+        "queryEntity",
+        "",
+        params
+      );
+      // 隐藏搜索遮罩
+      this.drawMask = false;
+      if (res.status == "200") {
+        // 更新应用列表
+        this.appList = res.attribute;
+      }
+    },
+    /**
+     * 步骤描述变化时保存数据
+     */
+    changeDescription() {
+      // 更新当前步骤的步骤描述
+      this.currentRowData.options.description = this.description;
+      let params = {
+        flowId: this.sceneID,
+        id: this.currentRowData.options.stepID,
+        description: this.description,
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params);
+    },
+    /**
+     * 选择应用时触发的方法
+     * @param {Object} row 应用数据
+     * @param {number} index 应用索引
+     */
+    async hangleAppItem(row, index) {
+      if (!this.appActivIndex) {
+        // 保存应用信息
+        this.matchAppData(row);
+      } else if (this.appActivIndex !== row.appId) {
+        this.$confirm(
+          "切换应用会清空操作、账号及配置内的所有数据，确定切换吗?",
+          "提示",
+          {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          }
+        )
+          .then(async () => {
+            // 重置当前选择的应用插件名称
+            this.CurrentAppRow.plugName = "";
+            // 重置当前选择的应用账号名称
+            this.CurrentAppRow.step_acc_name = "";
+            this.CurrentAppRow.description = "";
+            // 重置当前步骤的资源类型
+            this.currentRowData.options.actionType = "";
+            // 重置当前步骤的 API ID
+            this.currentRowData.options.apiId = "";
+            this.currentRowData.options.apiName = "";
+            // 重置当前步骤的插件 ID
+            this.currentRowData.options.plugId = "";
+            // 重置当前步骤的插件名称
+            this.currentRowData.options.plugName = "";
+            // 重置当前步骤的账号 ID
+            this.currentRowData.options.step_acc_id = "";
+            // 重置当前步骤的账号名称
+            this.currentRowData.options.step_acc_name = "";
+            this.currentRowData.options.stepDescribe = "";
+            this.apiIdActiv = "";
+            this.apiList = [];
+            this.pluginActiv = "";
+            this.pluginList = [];
+            this.userActivId = "";
+            this.userList = [];
+            // 保存应用信息
+            this.matchAppData(row);
+            // 清空步骤配置
+            await this.clearFlowStep();
+          })
+          .catch(() => {});
+      }
+    },
+    async matchAppData(row) {
+      // 更新当前选中的应用 ID
+      this.appActivIndex = row.id;
+      // 更新当前选择的应用 ID
+      this.CurrentAppRow.appId = row.id;
+      // 更新当前选择的应用名称
+      this.CurrentAppRow.appName = row.name;
+      // 更新当前步骤的应用 ID
+      this.currentRowData.options.appId = row.id;
+      // 更新当前步骤的应用名称
+      this.currentRowData.options.appName = row.name;
+
+      // 切换到选择操作标签页
+      this.activeOtherTabName = "选择操作";
+      // 切换到 API 接口标签页
+      this.activeApiPliginTabName = "API接口";
+      // 清空 API 或插件搜索关键字
+      this.operateCodeOrName = "";
+      // 更新当前步骤的资源类型
+      this.currentRowData.options.actionType = "API接口";
+      // 实时保存配置
+      let params = {
+        flowId: this.sceneID,
+        id: this.currentRowData.options.stepID,
+        appId: row.id,
+        appName: row.name,
+        actionType: "",
+        plugId: "",
+        plugName: "",
+        apiId: "",
+        apiName: "",
+        step_acc_name: "",
+        step_acc_id: "",
+      };
+      // 保存场景步骤数据
+      await this.SaveSceneStepData(params);
+      // 获取 API 列表
+      await this.GetApiList(row.id);
+      // 获取插件列表
+      // await this.getPluginList(row.id);
+      // // 获取用户列表
+      await this.GetAccountListAPI(row.id);
+    },
+    async clearFlowStep() {
+      let params = {
+        id: this.currentRowData.options.stepID,
+      };
+      let res = await authApi(
+        "sysFlowStepService",
+        "",
+        "clearFlowStep",
+        "",
+        params
+      );
+    },
+    /**
+     * API 或者插件的搜索
+     */
+    searchApiPlugin() {
+      // 检查是否选择了应用
+      if (!this.currentRowData.options.appId) {
+        this.$vmNews("请先选择应用");
+        return;
+      }
+      if (this.activeApiPliginTabName === "API接口") {
+        // 显示搜索遮罩
+        this.drawMask = true;
+        // 5 秒后隐藏搜索遮罩
+        setTimeout(() => {
+          this.drawMask = false;
+        }, 5000);
+        // 获取 API 列表
+        this.GetApiList(this.currentRowData.options.appId);
+      } else if (this.activeApiPliginTabName === "插件") {
+        // 显示搜索遮罩
+        this.drawMask = true;
+        // 5 秒后隐藏搜索遮罩
+        setTimeout(() => {
+          this.drawMask = false;
+        }, 5000);
+        // 获取插件列表
+        this.getPluginList(this.currentRowData.options.appId);
+      }
+    },
+    /**
+     * 切换 API 插件标签页
+     * @param {string} e 标签页值
+     */
+    ApiPliginTabChangeEvent(e) {
+      // 更新当前操作是 API 还是插件
+      this.activeApiPliginTabName = e;
+    },
+    // 选择API
+    hangleApiClickEvent(item) {
+      this.pluginActiv = "";
+      this.currentRowData.options.plugId = "";
+      this.currentRowData.options.plugName = "";
+      // 更新选择的 API ID
+      this.apiIdActiv = item.id;
+      // 更新当前步骤的 API ID
+      this.currentRowData.options.apiId = item.id;
+      this.currentRowData.options.apiName = item.apiName;
+      // 更新当前选择的应用步骤描述
+      this.CurrentAppRow.description = item.apiName;
+      this.currentRowData.options.stepDescribe = item.apiName;
+      // 更新当前步骤的资源类型
+      this.currentRowData.options.actionType = this.activeApiPliginTabName;
+      // 切换到选择账号标签页
+      this.activeOtherTabName = "选择账号";
+      let params = {
+        flowId: this.sceneID,
+        id: this.currentRowData.options.stepID,
+        actionType: this.activeApiPliginTabName,
+        plugId: "",
+        plugName: "",
+        apiId: item.id,
+        apiName: item.apiName,
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params);
+    },
+    // 选择插件
+    hanglePluginClickEvent(item) {
+      // 更新选择的 API ID
+      this.apiIdActiv = "";
+      // 更新当前步骤的 API ID
+      this.currentRowData.options.apiId = "";
+      this.currentRowData.options.apiName = "";
+      this.pluginActiv = item.id;
+      this.currentRowData.options.plugId = item.id;
+      this.currentRowData.options.plugName = item.plugName;
+      // 更新当前选择的应用步骤描述
+      this.CurrentAppRow.description = item.plugName;
+      this.currentRowData.options.stepDescribe = item.plugName;
+      // 更新当前步骤的资源类型
+      this.currentRowData.options.actionType = this.activeApiPliginTabName;
+      // 切换到选择账号标签页
+      this.activeOtherTabName = "选择账号";
+      let params = {
+        flowId: this.sceneID,
+        id: this.currentRowData.options.stepID,
+        actionType: this.activeApiPliginTabName,
+        plugId: item.id,
+        plugName: item.plugName,
+        apiId: "",
+        apiName: "",
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params);
+    },
+    /**
+     * 选择账号 --》 添加账号
+     */
+    addAccount() {
+      if (!this.appActivIndex) {
+        this.$vmNews("请选择应用");
+        return;
+      }
+      // 打开添加账号弹窗
+      this.$refs.addAccount.openDialog(
+        this.appActivIndex,
+        this.sceneID,
+        this.currentRowData.options.stepID
+      );
+    },
+    /**
+     * 重新加载用户列表
+     */
+    addAccountConfirmClick() {
+      // 获取用户列表
+      this.GetAccountListAPI(this.appActivIndex);
+    },
+    /**
+     * 当前选中的用户
+     * @param {Object} item 用户数据
+     */
+    async handleUserClickEvent(item) {
+      // 更新选择的用户 ID
+      this.userActivId = item.id;
+      // 更新当前选择的应用账号名称
+      this.CurrentAppRow.step_acc_name = item.name;
+      // 更新当前步骤的用户 ID
+      this.currentRowData.options.step_acc_id = item.id;
+      // 更新当前步骤的用户账号名称
+      this.currentRowData.options.step_acc_name = item.name;
+      this.outsideFormData = {
+        tableName: "",
+      };
+      this.ColumnsFormData = {};
+      this.outsideOptions = [];
+      this.outsideColumns = [];
+      let params = {
+        flowId: this.sceneID,
+        id: this.currentRowData.options.stepID,
+        step_acc_name: item.name,
+        step_acc_id: item.id,
+        tableName: "",
+      };
+      // 保存场景步骤数据
+      await this.SaveSceneStepData(params);
+      // 切换到配置应用
+      this.activeOtherTabName = "配置应用";
+      // 获取表数据
+      await this.queryTables(item.id);
+      this.$nextTick(() => {
+        this.resetForm("outsideForm");
+      });
+    },
+    /**
+     * 重置表单
+     * @param {string} formName 表单的ref
+     */
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    /**
+     * 获取表列表
+     * @param {string} stepAccountId 账号ID
+     */
+    async queryTables(stepAccountId) {
+      let params = {
+        stepAccountId: stepAccountId,
+      };
+      let res = await authApi(
+        "sysFlowDataBaseExtServiceImpl",
+        "",
+        "queryTables",
+        "",
+        params
+      );
+      this.drawMask = false;
+      if (res.status == "200") {
+        this.outsideOptions = res.attribute;
+      }
+    },
+    // 切换表时
+    async outsideSelectChange(val) {
+      if (val) {
+        // 更新当前步骤的步骤描述
+        this.currentRowData.options.description = this.description;
+        let params = {
+          flowId: this.sceneID,
+          id: this.currentRowData.options.stepID,
+          tableName: val,
+        };
+        // 保存场景步骤数据
+        await this.SaveSceneStepData(params);
+        await this.queryColumns(val);
+      }
+    },
+    // 获取表字段
+    async queryColumns(tableName) {
+      this.outsideColumns = [];
+      let params = {
+        stepAccountId: this.userActivId, //账户id
+        tableName: tableName,
+      };
+      let res = await authApi(
+        "sysFlowDataBaseExtServiceImpl",
+        "",
+        "queryColumns",
+        "",
+        params
+      );
+      this.drawMask = false;
+      if (res.status == "200") {
+        this.outsideColumns = res.attribute.cloums || [];
+        this.ColumnsRules = res.attribute.rules || {};
+        this.$nextTick(() => {
+          this.getStepConfig();
+        });
+      }
+    },
+    /**
+     * 获取字段配置信息
+     * @param {string} id 步骤 ID
+     */
+    async getStepConfig() {
+      let params = {
+        id: this.currentRowData.options.stepID,
+      };
+      // 调用获取应用列表的 API
+      let res = await authApi(
+        "sysFlowStepService",
+        "",
+        "getStepConfig",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        const root = document.querySelector("#editorContainer");
+        if (
+          res.attribute &&
+          res.attribute.detailList &&
+          res.attribute.detailList.length > 0
+        ) {
+          res.attribute.detailList.forEach((item) => {
+            this.matchEditorItems(root, item.fieldName, item.html_label);
+          });
+        }
+      }
+    },
+    matchEditorItems(rootElement, rootName, rootHtml) {
+      const items = rootElement.querySelectorAll(".editorItem");
+      items.forEach((item) => {
+        const fieldName =
+          item.querySelector(".el-form-item__label")?.innerText.trim() || "";
+        const editor = item.querySelector(".content-editor");
+        if (!editor) return;
+        if (rootName == fieldName) {
+          editor.innerHTML = rootHtml;
+        }
+      });
+    },
+    /**
+     * 获取插件列表
+     * @param {string} appId 应用 ID
+     */
+    async getPluginList(appId) {
+      let params = {
+        appId: appId,
+        name: this.operateCodeOrName,
+      };
+      let res = await authApi(
+        "sysApplicationApiService",
+        "",
+        "queryEntity",
+        "",
+        params
+      );
+      this.drawMask = false;
+      if (res.status == "200") {
+        this.pluginList = res.attribute;
+      }
+    },
+    /**
+     * 获取 api 列表
+     * @param {string} appId 应用 ID
+     */
+    async GetApiList(appId) {
+      let params = {
+        appId: appId,
+        name: this.operateCodeOrName,
+      };
+      let res = await authApi(
+        "sysApplicationApiService",
+        "",
+        "queryEntity",
+        "",
+        params
+      );
+      this.drawMask = false;
+      if (res.status == "200") {
+        this.apiList = res.attribute;
+      }
+    },
+    /**
+     * 获取用户列表
+     * @param {string} appId 应用 ID
+     */
+    async GetAccountListAPI(appId) {
+      let params = {
+        appId: appId,
+      };
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "queryAccountList",
+        "",
+        params
+      );
+      this.drawMask = false;
+      if (res.status == "200") {
+        this.userList = res.attribute;
+      }
+    },
+    /**
+     * 根据任务类型获取时间划分的标题
+     * @param {number} taskType 任务类型
+     * @returns {string} 时间划分的标题
+     */
+    getTimeDivide(taskType) {
+      if (taskType === 1) {
+        return "秒级";
+      } else if (taskType === 2) {
+        return "分钟级";
+      } else if (taskType === 3) {
+        return "小时级";
+      } else if (taskType === 4) {
+        return "天级";
+      }
+    },
+    /**
+     * 编辑场景名称
+     */
+    editSceneName() {
+      // 编辑场景名称的参数
+      let row = {
+        flowId: this.sceneID,
+      };
+      // 在下一个 DOM 更新周期后打开编辑场景名称的弹窗
+      this.$nextTick(() => {
+        this.$refs.editSence.openDialog(row, "edit");
+      });
+    },
+    /**
+     * 更新场景名称
+     * @param {string} sceneID 场景 ID
+     * @param {Object} res 响应数据
+     */
+    updateTitle(sceneID, res) {
+      // 更新场景名称
+      this.sceneName = res.sceneName;
+      this.title = res.sceneName;
+      // 更新触发模式
+      this.triggerMode = res.triggerMode;
+      if (this.triggerMode === 2) {
+        this.currentRowData.actionName = "定时触发";
+      } else if (this.triggerMode === 1) {
+        this.currentRowData.actionName = "应用程序触发";
+      } else if (this.triggerMode === 4) {
+        this.currentRowData.actionName = "Webhook触发";
+      } else if (this.triggerMode === 3) {
+        this.currentRowData.actionName = "手动触发";
+      }
+    },
+    // 场景步骤---【确定】
+    handleConfirmClick() {
+      this.examineHandleClose();
+    },
+    // 关闭场景步骤弹窗
+    examineHandleClose() {
+      // 触发关闭事件
+      this.$emit("examineHandleClose");
+      this.examineOperateDialog = false;
+      this.sceneName = "";
+      // 清空画布列表
+      this.drawShowList = [];
+      // 重置当前选中的步骤索引
+      this.drawSelectIndex = "";
+      // 重置当前选择操作的类型
+      this.activTimeIndex = "";
+      // 重置 cron 表达式
+      this.expression = "";
+      // 清空应用搜索关键字
+      this.appCodeOrName = "";
+      // 重置当前选中的应用 ID
+      this.appActivIndex = "";
+      // 清空 API 或插件搜索关键字
+      this.operateCodeOrName = "";
+      // 重置当前操作是 API 还是插件
+      this.activeApiPliginTabName = "API接口";
+      // 重置选择的 API ID
+      this.apiIdActiv = "";
+      // 清空 API 列表
+      this.apiList = [];
+      // 重置选择的插件 ID
+      this.pluginActiv = "";
+      // 清空插件列表
+      this.pluginList = [];
+      // 重置选择的用户 ID
+      this.userActivId = "";
+      // 清空用户列表
+      this.userList = [];
+      this.representation = false;
+    },
+    representationChange() {
+      if (!this.currenrActiveNodeRef) return;
+      const editor = this.$refs[this.currenrActiveNodeRef][0];
+      if (!editor) return;
+      // 创建 range 和 selection
+      const range = document.createRange();
+      const selection = window.getSelection();
+
+      // 将 range 定位到 editor 的最后一个子节点
+      range.selectNodeContents(editor);
+      range.collapse(false); // 折叠到末尾
+      // 清空现有选区并设置新 range
+      selection.removeAllRanges();
+      selection.addRange(range);
+      // 确保编辑器有焦点
+      editor.focus();
+      this.saveRange();
+    },
+    handleKeyDown(e, columnName, rowIndex) {
+      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
+
+      if (e.key === "Backspace") {
+        // 检查是否在光标前有token需要删除
+        const selection = window.getSelection();
+        if (selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0);
+
+          // 如果光标在文本开头或者前一个兄弟节点是token
+          if (range.startOffset === 0) {
+            const prevSibling = range.startContainer.previousSibling;
+            if (
+              prevSibling &&
+              prevSibling.classList &&
+              prevSibling.classList.contains("content-token")
+            ) {
+              e.preventDefault();
+              prevSibling.remove();
+              this.$message.success("已删除元素");
+              return;
+            }
+          }
+        }
+      }
+    },
+    // 清除token选中状态
+    clearTokenSelection(columnName, rowIndex) {
+      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
+
+      this.lastSelectedTokenIndex = -1;
+    },
+    // 处理输入事件
+    handleInput(e, columnName, rowIndex) {
+      // this.clearTokenSelection(columnName, rowIndex);
+      this.saveRange();
+    },
+    // 处理编辑器点击
+    handleEditorClick(e, columnName, rowIndex) {
+      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
+      this.currenrActiveNodeRef = "contentEditor" + columnName + rowIndex;
+
+      // // 如果点击的不是token，清除选中状态
+      // if (
+      //   !e.target.classList.contains("content-token") &&
+      //   !e.target.closest(".content-token")
+      // ) {
+      //   this.clearTokenSelection(columnName, rowIndex);
+      // }
+
+      // // 确保编辑器获得焦点
+      // if (e.target === editor || editor.contains(e.target)) {
+      editor.focus();
+      this.saveRange();
+      // }
+    },
+    // 处理粘贴事件
+    handlePaste(e, columnName, rowIndex) {
+      // 清除token选中状态
+      this.clearTokenSelection(columnName, rowIndex);
+    },
+    // 处理编辑器获得焦点
+    handleEditorFocus(e, columnName, rowIndex) {
+      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
+      // 如果编辑器为空，设置光标到开始位置
+      if (this.isEmpty(columnName, rowIndex)) {
+        setTimeout(() => {
+          const range = document.createRange();
+          const selection = window.getSelection();
+          range.setStart(editor, 0);
+          range.setEnd(editor, 0);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }, 0);
+      }
+    },
+    // 判断当前编辑器是否为空
+    isEmpty(columnName, rowIndex) {
+      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
+      if (!editor) return true;
+      const content = editor.textContent.trim();
+      const hasTokens = editor.querySelectorAll(".content-token").length > 0;
+      return content === "" && !hasTokens;
+    },
+    // 处理编辑器失去焦点
+    handleEditorBlur(e, columnName, rowIndex) {
+      // 可以在这里处理失去焦点的逻辑
+    },
+    handleClearNodeToEditor(columnName, rowIndex) {
+      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
+      if (!editor) return;
+      let nodeRef = "contentEditor" + columnName + rowIndex;
+      this.currenrActiveNodeRef = nodeRef;
+
+      editor.innerHTML = ""; // 先清空内容
+      this.$forceUpdate();
+      this.$nextTick(() => {
+        // 创建 range 和 selection
+        const range = document.createRange();
+        const selection = window.getSelection();
+
+        // 将 range 定位到 editor 的最后一个子节点
+        range.selectNodeContents(editor);
+        range.collapse(false); // 折叠到末尾
+        // 清空现有选区并设置新 range
+        selection.removeAllRanges();
+        selection.addRange(range);
+        // 确保编辑器有焦点
+        editor.focus();
+        this.saveRange();
+      });
+    },
+
+    //添加节点
+    handleAddNodeToEditor(columnName, rowIndex) {
+      let nodeRef = "contentEditor" + columnName + rowIndex;
+      this.currenrActiveNodeRef = nodeRef;
+      this.representation = true;
+      this.representationActiveName = "first";
+
+      // 这段代码的目的是 让光标停留在最后一个span标签后面
+      const editor = this.$refs[this.currenrActiveNodeRef][0];
+      if (!editor) return;
+      // 创建 range 和 selection
+      const range = document.createRange();
+      const selection = window.getSelection();
+
+      // 将 range 定位到 editor 的最后一个子节点
+      range.selectNodeContents(editor);
+      range.collapse(false); // 折叠到末尾
+      // 清空现有选区并设置新 range
+      selection.removeAllRanges();
+      selection.addRange(range);
+      // 确保编辑器有焦点
+      editor.focus();
+      this.saveRange();
+    },
+    handleNodeSelected(path) {
+      this.selectedNode = path;
+      this.insertToken(path, "node-reference");
+    },
+    handleTagSelected(label) {
+      this.insertToken(label, "node-edit");
+    },
+    // 插入token到编辑器
+    insertToken(text, type) {
+      if (!this.currenrActiveNodeRef) return;
+
+      const editor = this.$refs[this.currenrActiveNodeRef][0];
+      if (!editor) return;
+
+      // 确保编辑器有焦点
+      editor.focus();
+      setTimeout(() => {
+        const token = this.createTokenElement(text, type);
+        const space = document.createTextNode(" ");
+
+        // 获取当前光标位置
+        const selection = window.getSelection();
+        let range = this.savedRange?.cloneRange();
+
+        // fallback：没有保存 range，则使用当前选区
+        if (!range && selection.rangeCount > 0) {
+          range = selection.getRangeAt(0);
+        }
+
+        if (!range) {
+          // fallback：插入到末尾
+          editor.appendChild(token);
+          editor.appendChild(space);
+          this.setCursorToEnd();
+          this.$nextTick(() => {
+            if (!this.setCursorAfter(space)) {
+              this.setCursorToEnd();
+            }
+          });
+          return;
+        }
+
+        // 删除选中内容（若有）
+        range.deleteContents();
+
+        // 插入 token + 空格
+        const frag = document.createDocumentFragment();
+        frag.appendChild(token);
+        frag.appendChild(space);
+        range.insertNode(frag);
+
+        // 设置光标到空格后
+        range.setStartAfter(space);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        // 更新 savedRange
+        this.savedRange = range.cloneRange();
+
+        this.$nextTick(() => {
+          if (!this.setCursorAfter(space)) {
+            this.setCursorToEnd();
+          }
+        });
+
+        this.saveRange();
+      }, 10);
+    },
+    saveRange() {
+      const selection = window.getSelection();
+      if (selection.rangeCount > 0) {
+        this.savedRange = selection.getRangeAt(0).cloneRange();
+      }
+    },
+    // 设置光标到末尾
+    setCursorToEnd() {
+      if (!this.currenrActiveNodeRef) return;
+
+      const editor = this.$refs[this.currenrActiveNodeRef][0];
+      if (!editor) return;
+
+      const range = document.createRange();
+      const selection = window.getSelection();
+      range.selectNodeContents(editor);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+
+    // 设置光标到指定节点后面
+    setCursorAfter(node) {
+      try {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStartAfter(node);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return true;
+      } catch (error) {
+        return false;
+      }
+    },
+    // 创建token元素
+    createTokenElement(text, type) {
+      let token = null;
+
+      token = document.createElement("span");
+      token.contentEditable = false;
+      token.setAttribute("data-token-text", text);
+      if (type === "node-reference") {
+        token.className = "content-token token-function";
+        token.innerHTML = `<i class="el-icon-connection"></i> ${text}`;
+      } else {
+        token.className = "content-token token-edit";
+        token.innerHTML = `${text}`;
+      }
+      return token;
+    },
+    // 设置光标到末尾
+    setCursorToEnd() {
+      // 清除之前的选中状态
+      if (!this.currenrActiveNodeRef) return;
+      const editor = this.$refs[this.currenrActiveNodeRef][0];
+      if (!editor) return;
+
+      const range = document.createRange();
+      const selection = window.getSelection();
+      range.selectNodeContents(editor);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+    closeRepContainer() {
+      this.representationActiveName = "first";
+      this.representation = false;
+      this.selectedNode = "";
+      this.currenrActiveNodeRef = "";
+    },
+  },
+  mounted() {
+    // 绑定事件监听器
+    const editor = this.$refs[this.currenrActiveNodeRef]?.[0];
+    if (editor) {
+      editor.addEventListener("mouseup", this.saveRange);
+      editor.addEventListener("keyup", this.saveRange);
+      editor.addEventListener("mouseleave", this.saveRange); // 鼠标移开也记录一次
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-radio-group {
+  background: #fff;
+  padding: 2px;
+  margin: 0 10px 0 10px;
+  border-radius: 4px;
+}
+::v-deep .el-radio-button__inner {
+  border: 0 !important;
+  background-color: #fff;
+  color: #999999;
+  font-weight: 400;
+  font-size: 14px;
+  padding: 7px 15px;
+}
+
+::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  background-color: #f5f5f5;
+  color: #333333;
+  box-shadow: none;
+  border-radius: 4px;
+}
+.drawContent {
+  width: 100%;
+  height: calc(100vh - 100px);
+  display: flex;
+
+  .drawCanvas {
+    width: 40%;
+    height: 100%;
+    background: url("../images/background.png") no-repeat;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-pack: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    overflow-y: auto;
+    padding: 50px 0;
+
+    .drawItem {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .title {
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        margin-bottom: 5px;
+      }
+
+      .drawBox {
+        width: 300px;
+        height: 58px;
+        background: #ffffff;
+        border-radius: 4px;
+        border: 1px solid #dbdde1;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        display: flex;
+        // justify-content: center;
+        align-items: center;
+        position: relative;
+
+        .img {
+          margin: 0 10px;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid #f18709;
+
+          img {
+            width: 60%;
+            height: 60%;
+          }
+        }
+        .iconStyle {
+          margin: 0 10px;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+          }
+        }
+
+        .actionName {
+          font-weight: 400;
+          font-size: 14px;
+          color: #333333;
+        }
+
+        .content {
+          font-weight: 500;
+          font-size: 14px;
+          color: #333333;
+          margin-top: 5px;
+        }
+      }
+      .drawBox:hover {
+        background: #f2fcff;
+        border: 1px solid #1478f5;
+      }
+
+      .del {
+        position: absolute;
+        right: -5px;
+        top: -3px;
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+        background: #fff;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .active {
+        background: #f2fcff;
+        border: 1px solid #1478f5;
+      }
+
+      .line-wrapper {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        position: relative;
+
+        img {
+          position: absolute;
+          cursor: pointer;
+          width: 20px;
+          height: 20px;
+          top: 33px;
+          left: 140px;
+          display: none;
+        }
+      }
+      .line-wrapper:hover img {
+        display: block;
+      }
+      .line {
+        width: 1px;
+        height: 60px;
+        border: 1px solid #dbdde1;
+        margin: 10px 0;
+      }
+    }
+  }
+
+  .drawAction {
+    width: 60%;
+    height: 100%;
+    background-color: #f5f5f5;
+    position: relative;
+
+    .nextButton {
+      position: absolute;
+      right: 15px;
+      top: 8px;
+      color: #1477f3;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    ::v-deep .el-tabs__header {
+      margin: 0;
+      background: #ffffff;
+
+      .el-tabs__nav {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+// cron表达式样式
+.crontabBox {
+  padding: 15px;
+
+  .crontabBoxTitle {
+    margin-bottom: 15px;
+    color: #333333;
+  }
+  ::v-deep .el-tabs--border-card {
+    border-radius: 8px;
+    box-shadow: unset;
+    border: 1px solid #dadce0;
+  }
+  ::v-deep .popup-main {
+    border-radius: 8px;
+    border: 1px solid #dadce0;
+    font-size: 14px;
+  }
+  ::v-deep .popup-result {
+    border: unset;
+    margin: 0 auto;
+    padding: 15px 10px 5px 15px;
+
+    .title {
+      width: unset;
+      margin-left: unset;
+      background: transparent;
+      color: #333;
+    }
+  }
+  ::v-deep .el-tabs__header {
+    border-radius: 8px 8px 0 0;
+    margin: 0;
+    background: #f5f7fa !important;
+    .el-tabs__nav {
+      margin-left: 0 !important;
+    }
+  }
+
+  ::v-deep .el-tabs__header .el-tabs__item:first-child {
+    border-radius: 8px 0 0 0;
+    margin-left: -2px;
+    margin-top: 0px;
+  }
+  ::v-deep .pop_btn {
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    .el-button:last-child {
+      display: none;
+    }
+  }
+}
+.drawItemBox {
+  display: flex;
+  background: #ffffff;
+  padding: 10px;
+
+  .title {
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+  }
+
+  .drawBox {
+    background: #ffffff;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    display: flex;
+    position: relative;
+    align-items: center;
+
+    .img {
+      margin-right: 20px;
+    }
+
+    .actionName {
+      font-weight: 400;
+      font-size: 14px;
+      color: #333333;
+      margin-bottom: 5px;
+    }
+
+    .content {
+      font-weight: 500;
+      font-size: 14px;
+      color: #333333;
+      margin-top: 5px;
+    }
+  }
+
+  .del {
+    position: absolute;
+    right: 5px;
+    top: 2px;
+    cursor: pointer;
+  }
+
+  .active {
+    background: #f2fcff;
+    border: 1px solid #1478f5;
+  }
+
+  .line {
+    width: 1px;
+    height: 60px;
+    border: 1px solid #dbdde1;
+    margin: 10px 0;
+  }
+}
+
+// 选择操作
+.timeWrap {
+  padding: 15px;
+  box-sizing: border-box;
+
+  .timeItem {
+    width: 100%;
+    height: 58px;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #dbdde1;
+    padding: 10px 14px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    display: flex;
+
+    .imgBox {
+      width: 15px;
+      height: 20px;
+      margin-right: 3px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .title {
+      font-weight: 500;
+      font-size: 14px;
+      color: #333333;
+    }
+
+    .content {
+      font-weight: 400;
+      font-size: 14px;
+      color: #333333;
+    }
+  }
+
+  .timeItem:hover {
+    background: #f2fcff;
+    border: 1px solid #1478f5;
+  }
+
+  .activTimeItem {
+    background: #f2fcff;
+    border-radius: 4px;
+    border: 1px solid #1478f6;
+  }
+}
+
+.app {
+  .applist {
+    display: flex;
+    padding: 10px;
+    flex-wrap: wrap;
+
+    .appItem {
+      width: 202px;
+      height: 58px;
+      background: #ffffff;
+      border-radius: 4px;
+      padding: 0 10px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-right: 10px;
+      border: 1px solid #fff;
+      margin-bottom: 10px;
+      cursor: pointer;
+
+      .imgBox {
+        width: 15px;
+        height: 22px;
+        margin-right: 3px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .appIcon {
+        width: 44px;
+        height: 44px;
+        margin-right: 10px;
+        border-radius: 50%;
+      }
+
+      .name {
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        flex: 1;
+      }
+    }
+    .appItem:hover {
+      background: #f2fcff;
+      border: 1px solid #1478f5;
+    }
+    .active {
+      background: #f2fcff;
+      border: 1px solid #1478f5;
+    }
+  }
+}
+
+.DescribeDataBox {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 15px 10px 10px;
+  font-size: 15px;
+  color: #333;
+
+  span {
+    margin-bottom: 10px;
+  }
+}
+.search {
+  display: flex;
+  margin: 10px;
+
+  .input {
+    margin-right: 10px;
+  }
+}
+
+.ApiPliginBox {
+  height: calc(100vh - 270px);
+  overflow: auto;
+  padding-right: 5px;
+  .appItem {
+    height: unset !important;
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
+    padding: 10px !important;
+    align-items: flex-start !important;
+    margin-right: 0 !important;
+    color: #333333 !important;
+    font-size: 14px !important;
+
+    .name:first-child {
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+}
+
+.userList {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 15px 10px 10px;
+  font-size: 14px;
+
+  .userItem {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #dbdde1;
+    margin-bottom: 10px;
+    padding: 15px;
+    cursor: pointer;
+  }
+  .status {
+    margin-right: 10px;
+    font-size: 18px !important;
+  }
+  .userAccountIcon {
+    width: 15px;
+    height: 15px;
+    margin-right: 10px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .userItem:hover {
+    background: #f2fcff;
+    border: 1px solid #1478f5;
+  }
+  .userBtn {
+    padding: 15px 10px;
+    border: 1px dashed #dbdde1;
+  }
+  .userBtn:hover {
+    background: #f2fcff;
+    border: 1px dashed #1478f6;
+  }
+}
+
+.userContentBox {
+  width: 100%;
+  height: calc(100vh - 200px);
+  overflow: auto;
+
+  .active {
+    background: #f2fcff;
+    border: 1px solid #1478f5;
+  }
+}
+.redBox {
+  background: #fff1eb;
+  border-radius: 4px;
+  border: 1px solid #ffb999;
+  color: #ff5100;
+  font-size: 12px;
+  text-align: center;
+  padding: 2px 8px;
+  margin-left: 5px;
+}
+
+.successBox {
+  background: #f6ffed;
+  border-radius: 4px;
+  border: 1px solid #b7eb8f;
+  color: #52c41a;
+  font-size: 12px;
+  text-align: center;
+  padding: 2px 8px;
+  margin-left: 5px;
+}
+
+.settingBox {
+  padding: 10px;
+
+  .title {
+    margin-bottom: 10px;
+    color: #333333;
+    font-weight: 500;
+    font-size: 14px;
+  }
+}
+.settingbtn {
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+  color: #1478f6;
+  text-align: center;
+  line-height: 20px;
+  cursor: pointer;
+  margin: 0 auto;
+  position: absolute;
+  top: 90px;
+  left: 19px;
+  z-index: 999;
+  padding: 6px;
+}
+
+.settingTabs {
+  width: 100%;
+  padding: 10px 15px 10px 10px;
+  .tabs {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    background: #fff;
+    border-radius: 4px;
+    padding: 2px;
+    width: fit-content;
+
+    .tabsItem {
+      height: 28px;
+      line-height: 28px;
+      background: #fff;
+      border-radius: 3px;
+      font-size: 14px;
+      color: #999;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+
+    .active {
+      background: #f5f5f5;
+      color: #333;
+    }
+  }
+
+  ::v-deep .el-switch {
+    height: 23px !important;
+    line-height: 23px !important;
+  }
+}
+
+.currentDrawBox {
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #333;
+  .img {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    margin-right: 10px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+
+  .actionName {
+    font-weight: 400;
+    color: #333333;
+    margin-bottom: 5px;
+  }
+  .content {
+    font-weight: 500;
+    color: #333333;
+    margin-bottom: 5px;
+  }
+
+  .drawimg {
+    margin-right: 10px;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #f18709;
+
+    img {
+      width: 60%;
+      height: 60%;
+    }
+  }
+}
+
+.drawItemBtn {
+  background: #ffffff;
+  padding: 10px 50px;
+  font-size: 14px;
+  color: #1478f6;
+  border: 1px dashed #dbdde1;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 50px;
+}
+.drawItemBtn:hover {
+  background: #f2fcff;
+  border: 1px dashed #1478f6;
+}
+
+.DescribeContent {
+  display: -webkit-box;
+  /*作为弹性伸缩盒子模型显示。*/
+  -webkit-box-orient: vertical;
+  /*作为弹性伸缩盒子模型显示。*/
+  -webkit-line-clamp: 1; //*显示的行*/
+  overflow: hidden;
+  /*溢出隐藏*/
+  /* 对于连字情况或者纯字母，可以解决 */
+  word-break: break-all;
+  // max-width: 100px;
+}
+
+.InterfaceConfiguration {
+  background: #fff;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 4px;
+
+  .InterCigTitle {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+}
+
+::v-deep .operatingClass {
+  display: flex;
+  align-items: center;
+  .el-radio-group {
+    background: unset !important;
+  }
+}
+
+::v-deep .CodeMirror {
+  height: 100% !important;
+}
+
+.toolbar {
+  background: #fff;
+  padding: 8px;
+  font-size: 14px;
+  border-radius: 4px 4px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  select {
+    width: 100px;
+    margin-left: 10px;
+    padding: 2px;
+  }
+}
+.fullScreen {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  margin-left: 10px;
+  cursor: pointer;
+
+  > img {
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+  }
+}
+
+.acionImg {
+  width: 15px;
+  height: 15px;
+  margin-left: 5px;
+}
+
+::v-deep .el-form-item {
+  margin-bottom: 0 !important;
+}
+::v-deep .el-form-item__label {
+  padding-bottom: 0 !important;
+  font-weight: bold;
+}
+
+.outsideContent {
+  height: calc(100vh - 220px);
+  overflow: auto;
+  padding: 0 10px 10px 10px;
+}
+::v-deep .el-collapse-item__header {
+  padding-left: 10px !important;
+}
+// ------------------------
+.editor-container {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.editorIcon {
+  position: absolute;
+  right: 10px;
+  top: 0;
+  font-size: 20px;
+  color: #999999;
+}
+
+.clearIcon {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 35px;
+  font-size: 20px;
+  color: #999999;
+}
+.editor-container:hover .clearIcon {
+  display: block;
+}
+/* hover 时显示 close-icon */
+.editor-container:hover .close-icon {
+  display: inline-flex; /* 或 block，根据你的布局 */
+}
+.content-editor {
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  min-height: 36px;
+  padding: 0 50px 0 15px;
+  background: #fff;
+  position: relative;
+  font-size: 14px;
+  // line-height: 1.6;
+  overflow-y: auto;
+  outline: none;
+  word-wrap: break-word;
+}
+
+.content-editor:focus {
+  border-color: #409eff;
+}
+
+.content-editor:empty:before {
+  content: attr(data-placeholder);
+  color: #9ca3af;
+  font-style: italic;
+  pointer-events: none;
+}
+
+.content-editor:focus:empty:before {
+  content: "";
+}
+
+/* 确保空编辑器也能显示光标 */
+.content-editor:empty {
+  min-height: 20px;
+}
+
+.content-editor:focus {
+  outline: none;
+}
+
+// --------------------------------
+::v-deep .content-token {
+  display: inline-table;
+  padding: 0 10px;
+  border-radius: 4px;
+  margin: 2px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  vertical-align: middle;
+  font-size: 13px;
+  font-weight: 500;
+  user-select: none;
+}
+::v-deep .token-function {
+  background: #ecfdf5;
+  color: #047857;
+  border: 1px solid #10b981;
+}
+
+::v-deep .repContainer {
+  width: 100%;
+  height: 100%;
+  background: #f5f5f5;
+  padding: 10px;
+  position: relative;
+}
+.treeNodeBox {
+  height: calc(100% - 50px);
+  overflow-y: auto;
+}
+
+.closeRepContainer {
+  position: absolute;
+  top: 20px;
+  right: 12px;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+.closeRepContainer:hover {
+  color: #409eff;
+}
+
+.repItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+
+.repItem:hover .repItemValue {
+  color: #409eff;
+}
+
+.repItemValue {
+  color: #6b7280;
+  font-size: 13px;
+  margin-left: 10px;
+}
+
+.token-editable-content {
+  display: inline-block;
+  min-width: 1em;
+  padding: 0 2px;
+  border-bottom: 1px dashed #aaa;
+  cursor: text;
+  outline: none;
+}
+::v-deep .content-token.token-edit {
+  display: inline-flex !important;
+  color: #5b21b6;
+  font-weight: bold;
+  padding: 0;
+}
+
+.Columnsbtn {
+  margin: 10px 0;
+  display: flex;
+      justify-content: flex-end;
+}
+.fixedChildTable {
+  height: calc(100vh - 360px);
+  overflow: auto;
+}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/LinkUp/compoment/addSence.vue b/src/views/LinkUp/compoment/addSence.vue
new file mode 100644
index 0000000..45ab94f
--- /dev/null
+++ b/src/views/LinkUp/compoment/addSence.vue
@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <base-dialog
+      :closeEscape="true"
+      :showClose="true"
+      :closeModal="false"
+      @handleConfirmClick="handleConfirmClick"
+      @handleClose="handleClose"
+      :dialogVisible="dialogVisible"
+      :title="senceType == 'add' ? '开始创建场景' : '编辑场景'"
+      width="800px"
+      top="8vh"
+      :footerShow="true"
+      :submitButtonTitle="'开始创建'"
+    >
+      <base-form
+        ref="senceForm"
+        :formRow="senceFormRow"
+        :isFunBtn="false"
+        :rules="senceRules"
+        :spanNumber="24"
+        style="padding-bottom: 0"
+      >
+      </base-form>
+      <div class="TriggerModeBox">
+        <div class="label">触发方式</div>
+        <div class="stepWrap">
+          <div
+            class="step"
+            :class="{
+              activeBorder: triggerModeId === ele.value,
+            }"
+            @click="choseType(ele, index)"
+            v-for="(ele, index) in stepList"
+            :key="ele.value"
+          >
+            <div class="img">
+              <img src="../images/pingtai.svg" v-if="ele.value == 2" />
+              <img src="../images/naozhong.svg" v-else-if="ele.value == 1" />
+              <img src="../images/api.svg" v-else-if="ele.value == 4" />
+              <img src="../images/point.svg" v-else-if="ele.value == 3" />
+            </div>
+            {{ ele.label }}
+          </div>
+        </div>
+      </div>
+    </base-dialog>
+    <addDialogChunk
+      ref="addDialogChunk"
+      @examineHandleClose="examineHandleClose"
+    ></addDialogChunk>
+  </div>
+</template>
+
+<script>
+import baseDialog from "@/components/base/BaseNewDialog/index.vue";
+import addDialogChunk from "./addDialogChunk";
+import { authApi } from "@/api/apis/auth";
+import baseForm from "@/components/base/baseNewForm";
+export default {
+  components: {
+    baseDialog,
+    baseForm,
+    addDialogChunk,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      senceFormRow: [
+        {
+          elCol: [
+            {
+              label: "项目分类",
+              prop: "classId",
+              tag: "elSelect",
+              options: [],
+              optionValue: "id",
+              optionLabel: "name",
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "场景名称",
+              prop: "name",
+              tag: "elInput",
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "场景描述",
+              prop: "description",
+              tag: "elInput",
+              type: "textarea",
+            },
+          ],
+        },
+      ],
+      senceRules: {
+        classId: [
+          {
+            required: true,
+            message: "请选择项目分类",
+            trigger: "change, blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入场景名称",
+            trigger: "change, blur",
+          },
+        ],
+      },
+      stepList: [
+        { label: "应用程序触发", value: 1 },
+        { label: "定时触发", value: 2 },
+        { label: "手动触发", value: 3 },
+        { label: "Webhook触发", value: 4 },
+      ],
+      triggerModeId: "", //当前选择的模块
+      senceType: "",
+    };
+  },
+  methods: {
+    // 获取项目分类
+    async GetProductionTableData() {
+      let param = {};
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "queryListJson",
+        "",
+        param
+      );
+      if (res.status == "200") {
+        this.senceFormRow[0].elCol[0].options = res.attribute;
+      }
+    },
+    openDialog(row, type, projectClassificationID) {
+      this.senceType = type;
+      this.dialogVisible = true;
+      this.GetProductionTableData();
+      this.$nextTick(() => {
+        this.triggerModeId = "";
+        this.$refs.senceForm.resetFields("ruleForm");
+        if (type == "add") {
+          this.triggerModeId = 1;
+          if (projectClassificationID && projectClassificationID != "1") {
+            this.$refs.senceForm.getField("classId", projectClassificationID);
+          }
+        }
+        if (type == "edit") {
+          this.GetSceneDetail(row.id);
+        }
+      });
+    },
+    async GetSceneDetail(sceneID) {
+      let params = {
+        sceneID: sceneID,
+      };
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "queryListJson",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$refs.senceForm.choiceAssignment(res.data[0]);
+        this.triggerModeId = res.data[0].triggerMode;
+      }
+    },
+    choseType(row) {
+      this.triggerModeId = row.value;
+    },
+    handleConfirmClick() {
+      this.$refs.senceForm.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (!this.triggerModeId) {
+            this.$vmNews("请选择触发方式");
+            return;
+          }
+          this.SaveSenceData();
+        } else {
+          this.$message({ message: "请输入必填项", type: "warning" });
+          return;
+        }
+      });
+    },
+    async SaveSenceData() {
+      let params = {
+        ...this.$refs.senceForm.ruleForm,
+        triggerModeId: this.triggerModeId,
+      };
+      let res = await authApi("sysFlowService", "", "saveFlow", "", params);
+      if (res.status == "200") {
+        this.$nextTick(() => {
+          if (this.senceType == "add") {
+            this.$vmNews("创建成功！", "success");
+            this.dialogVisible = false;
+            this.$refs.addDialogChunk.openDialog(
+              res.data[0],
+              params.dataMain.name,
+              "add",
+              "",
+              this.triggerModeId
+            );
+          }
+        });
+      }
+    },
+    handleClose() {
+      this.$nextTick(() => {
+        this.triggerModeId = "";
+        this.$refs.senceForm.resetFields("ruleForm");
+        this.dialogVisible = false;
+      });
+    },
+    examineHandleClose() {
+      this.$emit("examineHandleClose");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.TriggerModeBox {
+  display: flex;
+  margin-bottom: 20px;
+
+  .label {
+    width: 85px;
+    color: #999;
+    text-align: right;
+    padding-right: 5px;
+  }
+  .stepWrap {
+    display: flex;
+    margin-left: 15px;
+  }
+}
+
+.step {
+  width: 150px;
+  height: 58px;
+  background: #ffffff;
+  border-radius: 4px;
+  border: 1px solid #dbdde1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+
+  .img {
+    margin-right: 10px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #f18709;
+
+    img {
+      width: 60%;
+      height: 60%;
+    }
+  }
+}
+
+.activeBorder {
+  background: #f2fcff;
+  border: 1px solid #1478f5;
+}
+.step:hover {
+  background: #f2fcff;
+  border: 1px solid #1478f5;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/LinkUp/compoment/baseLayout/index.vue b/src/views/LinkUp/compoment/baseLayout/index.vue
new file mode 100644
index 0000000..f46ea76
--- /dev/null
+++ b/src/views/LinkUp/compoment/baseLayout/index.vue
@@ -0,0 +1,712 @@
+<!--
+* @name: 页面基本结构组件
+* @author: zhangpengcheng
+* @date: 2022-08-23
+-->
+<!-- style="overflow: auto;" -->
+<template>
+  <div
+      class="container"
+      v-loading="loading"
+      :style="
+      'backgroundColor:' +
+      bgColor +
+      ';paddingBottom:' +
+      paddingBottom +
+      ';height:' +
+      bodyHight
+    "
+  >
+    <!-- 标题       -->
+    <div class="title" flex="cross:center" v-if="showTitle">
+      <span v-if="!$route.meta.back">{{ title }}</span>
+      <span @click="goBack" class="back" v-else
+      ><i class="el-icon-arrow-left"></i>返回</span
+      >
+    </div>
+
+    <!-- <div class="main":style="'backgroundColor:'+ mainColor " > -->
+    <div
+        class="main"
+        :style="{
+        height: showTitle ? 'calc(100% - 38px)' : '100%',
+        backgroundColor: mainColor,
+      }"
+    >
+      <!-- 操作按钮 -->
+      <div
+          class="pushButton"
+
+          v-if="operateButtonSwitch"
+          style="display: flex;align-items: center;justify-content: space-between"
+      >
+        <!--        搜索区域-->
+        <slot name="searchListNew"></slot>
+        <div class="btnList" style="display: flex;align-items: center">
+          <div class="operationButton" flex="cross:center" style="display: flex;align-items: center">
+            <div v-if="defaultButtonSwitch" style="margin-right: 5px">
+              <el-button
+                  v-for="(item, index) in defaultButtonList"
+                  :type="item.type ? item.type : 'primary'"
+                  size="small"
+                  class="iconfont buttonList"
+                  :icon="item.icon"
+                  @click="funNewClick(item)"
+                  :key="index"
+              >
+                {{ item.menuName }}
+              </el-button>
+            </div>
+            <el-button
+                v-for="(item, index) in buttonList"
+                :type="item.type ? item.type : 'primary'"
+                size="small"
+                class="iconfont buttonList"
+                :icon="item.icon"
+                @click="funNewClick(item)"
+                :key="index"
+            >
+              <span v-if="item.menuName">{{ item.menuName }}</span>
+            </el-button>
+          </div>
+          <div v-if="fixedButton" style="margin-left: 5px">
+            <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.title"
+                placement="top"
+                v-for="(item, index) in fixedButtonList"
+                :key="index"
+                trigger="hover"
+            >
+            <span>
+              <el-button
+                  size="small"
+                  :icon="item.icon"
+                  @click.stop="fixedClick(item)"
+                  style="margin: 0"
+              ></el-button>
+            </span>
+            </el-tooltip>
+          </div>
+          <slot name="btn"></slot>
+          <slot name="fixedButton"></slot>
+        </div>
+      </div>
+      <!-- 搜索 -->
+      <div
+          v-if="querySwitch"
+          style="padding: 5px; background-color: #fff"
+          flex="cross:center"
+          ref="serchRefs"
+          class="searchForTable"
+      >
+        <div
+            v-for="(row, indexRow) in searchList"
+            class="searchBox"
+            :key="indexRow"
+            style="margin-right: 5px"
+        >
+          <el-input
+              v-model="ruleForm[row.columnNameEN]"
+              clearable
+              :type="row.type ? row.type : 'text'"
+              style="width: 100%"
+              :placeholder="!row.columnNameCN ? '请输入' : row.columnNameCN"
+              v-if="row.tag === 'elInput'"
+              min="1"
+              @keydown.enter.native="handerInputEnter()"
+          >
+          </el-input>
+          <el-date-picker
+              v-model="ruleForm[row.columnNameEN]"
+              v-if="row.tag === 'elDatePicker'"
+              :class="{ one: row.type ? 'date' : row.type }"
+              style="width: 100%"
+              :value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :type="!row.type ? 'date' : row.type"
+              :placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
+          >
+          </el-date-picker>
+          <el-radio-group
+              v-model="ruleForm[row.columnNameEN]"
+              v-if="row.tag === 'elRadio'"
+          >
+            <el-radio-button
+                v-for="el in row.options"
+                :label="el.value"
+                :key="el.value"
+            >{{ el.label }}
+            </el-radio-button>
+          </el-radio-group>
+          <div
+              v-if="row.tag === 'elDialog'"
+              class="elDialog"
+              style="cursor: pointer; height: 32px; ine-height: 32px"
+          >
+            <p
+                :style="{
+                color: ruleForm[row.columnNameEN] ? '#000' : '#c0c4cc',
+              }"
+                style="width: 100%; margin: 0"
+                @click="elDialogClick(row, index, indexRow)"
+            >
+              {{
+                ruleForm[row.columnNameEN]
+                    ? ruleForm[row.columnNameEN]
+                    : row.columnNameCN
+                        ? row.columnNameCN
+                        : "请点击选择"
+              }}
+            </p>
+            <i
+                class="el-icon-more"
+                @click="elDialogClick(row, index, indexRow)"
+                v-if="!row.disabled && !ruleForm[row.columnNameEN]"
+            ></i>
+            <i
+                class="el-icon-circle-close"
+                v-if="!row.disabled && ruleForm[row.columnNameEN]"
+                @click="elDialogClear(row)"
+                style="margin-left: 10px"
+            ></i>
+          </div>
+          <el-select
+              v-model="ruleForm[row.columnNameEN]"
+              filterable
+              style="width: 100%"
+              @change="selectChange($event, indexRow)"
+              :clearable="row.clearable ? row.clearable : true"
+              :placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
+              v-if="row.tag === 'elSelect'"
+          >
+            <el-option
+                v-for="(el, elIndex) in row.options"
+                :key="!row.optionValue ? el['value'] : el[row.optionValue]"
+                :label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
+                :value="!row.optionValue ? el['value'] : el[row.optionValue]"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 搜索按钮 -->
+        <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-search searchIcon"
+            @click="search"
+            title="查询"
+        >
+          查询
+        </el-button>
+        <el-button
+            v-if="searchList.length > 1"
+            type="primary"
+            size="small"
+            icon="el-icon-refresh-left searchIcon"
+            class="searchIcon"
+            @click="refresh"
+            title="重置"
+        >重置
+        </el-button>
+        <slot name="searchBtn"></slot>
+      </div>
+      <div :style="'height:' + getMainHeight()" class="tableHeight">
+        <slot name="main" :tableHeight="tableHeight"></slot>
+      </div>
+      <!-- 主要内容  -->
+      <!-- 分页 -->
+      <base-page
+          v-if="isPage"
+          :pageModel.sync="pageModel"
+          @onPageChange="onPageChange"
+      ></base-page>
+    </div>
+  </div>
+</template>
+
+<script>
+// import heightTransition from '@/common/js/heightTransition'
+// import customCascader from "@/components/customCascader";
+import {exportDown, wordDown, zipDown} from "@/utils/util.js";
+import basePage from "@/components/base/basePage";
+import {TokenKeys} from "@/utils/variable";
+// import fetch from '../../api/request'
+import {getApiSign} from "@/utils/apiSign";
+// import domainsFuc from '@/api/domains.js'
+export default {
+  components: {
+    // heightTransition,
+    basePage,
+    // customCascader
+  },
+  props: {
+    // 是否展示标题
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+
+    // 标题
+    title: {
+      type: String,
+      default: "",
+    },
+
+    // 背景颜色
+    bgColor: {
+      type: String,
+      default: "#ffffff",
+    },
+    // 背景颜色
+    mainColor: {
+      type: String,
+      default: "",
+    },
+    // 底部padding
+    paddingBottom: {
+      type: String,
+      // default: '68px'
+    },
+    // 高度
+    bodyHight: {
+      type: [Number, String],
+      default: "100%",
+    },
+    // main高度
+    mainHight: {
+      type: [Number, String, Boolean],
+      default: "calc(100% - 38px)",
+    },
+    // 搜索配置
+    searchModel: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+
+    // 按钮配置
+    buttonList: {
+      type: Array,
+      default: () => {
+        return [];
+        // [{
+        // 	icon: 'el-icon-plus',
+        // 	menuName: '新增'
+        // }, {
+        // 	icon: 'el-icon-edit',
+        // 	menuName: '编辑'
+        // }, {
+        // 	icon: 'el-icon-delete',
+        // 	menuName: '删除',
+        // 	type: 'danger'
+        // }, {
+        // 	icon: 'el-icon-refresh',
+        // 	menuName: '刷新'
+        // },]
+      },
+    },
+    defaultButtonList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            icon: "el-icon-plus",
+            menuName: "新增",
+          },
+          {
+            icon: "el-icon-edit",
+            menuName: "编辑",
+          },
+          {
+            icon: "el-icon-delete",
+            menuName: "删除",
+            type: "danger",
+          },
+          // {
+          // 	icon: 'el-icon-refresh',
+          // 	menuName: '刷新'
+          // },
+        ];
+      },
+    },
+    // 是否展示分页
+    isPage: {
+      type: Boolean,
+      default: false,
+    },
+    // 导出接口地址
+    exportUrl: {
+      default: "",
+    },
+    // 导入接口地址
+    importUrl: {
+      default: "",
+    },
+    //单选
+    only: {
+      default: "",
+    },
+    // 左侧固定按钮
+    fixedButton: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示查询条件
+    querySwitch: {
+      type: Boolean,
+      default: false,
+    },
+    // 搜索列表
+    searchList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 操作按钮
+    operateButtonSwitch: {
+      type: Boolean,
+      default: true,
+    },
+    // 操作按钮
+    defaultButtonSwitch: {
+      type: Boolean,
+      default: true,
+    },
+    // 右侧按钮
+    fixedButtonList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            icon: "el-icon-s-operation",
+            title: "筛选",
+          },
+          {
+            icon: "el-icon-printer",
+            title: "打印",
+          },
+          {
+            icon: "el-icon-folder",
+            title: "导出",
+          },
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      ruleForm: {},
+      onlyUrl: "",
+      clientHeight: "",
+      // 上传请求头
+      uploadHeaders: {},
+      // uurl: domainsFuc().domain,
+      uurl: "http://www.wldxt.cn:8089/taizhou/daxitong/crm/",
+      // 参数
+      model: {},
+      // 收起/展开搜索
+      isSearch: false,
+      // 分页数据
+      pageModel: {
+        total: 200,
+        page: 1,
+        limit: 20,
+      },
+      // 清除状态
+      clearState: 0,
+      loading: false,
+      // fixedButtonList: [{
+      // 	icon: 'el-icon-s-operation',
+      // 	title: '筛选'
+      // },
+      // {
+      // 	icon: 'el-icon-printer',
+      // 	title: '打印'
+      // },
+      // {
+      // 	icon: 'el-icon-folder',
+      // 	title: '导出'
+      // }
+      // ],
+      // defaultButtonList: [
+      // 	{
+      // 		icon: 'el-icon-plus',
+      // 		menuName: '新增'
+      // 	}, {
+      // 		icon: 'el-icon-edit',
+      // 		menuName: '编辑'
+      // 	}, {
+      // 		icon: 'el-icon-delete',
+      // 		menuName: '删除',
+      // 		type: 'danger'
+      // 	}, {
+      // 		icon: 'el-icon-refresh',
+      // 		menuName: '刷新'
+      // 	},
+      // ],
+      tableHeight: "100%",
+    };
+  },
+  created() {
+  },
+  mounted() {
+    // this.getTableHight()
+    // window.onresize = () => {
+    // 	this.clientHeight = document.documentElement.clientHeight;
+    // },
+    // this.importUpload(); //初始化上传
+  },
+  computed: {
+    // menuJson() {
+    // 	return JSON.parse(localStorage.getItem(TokenKeys.MENU_JSON))
+    // }
+  },
+  methods: {
+    getTableHight() {
+      let height = "100%";
+      let heightReduce = 0;
+      if (this.operateButtonSwitch) {
+        heightReduce = heightReduce + 53;
+      }
+      if (this.querySwitch) {
+        heightReduce = heightReduce + 47;
+      }
+      if (this.isPage) {
+        heightReduce = heightReduce + 53;
+      }
+      height = "calc(100% - " + heightReduce + "px)";
+      this.tableHeight = height;
+    },
+    getMainHeight() {
+      // operateButtonSwitch 操作开关 querySwitch查询高 度
+      let height = "100%";
+      let heightReduce = 10;
+      if (this.operateButtonSwitch) {
+        heightReduce = heightReduce + 56;
+      }
+      if (this.querySwitch) {
+        heightReduce = heightReduce + 33;
+      }
+      if (this.isPage) {
+        heightReduce = heightReduce + 56;
+      }
+      height = "calc(100% - " + heightReduce + "px)";
+      // console.log(height, "height")
+      return height;
+    },
+    pageClear() {
+      this.pageModel.page = 1;
+    },
+    // importUpload() {
+    // 	const timestamp = new Date().getTime() + '';
+    // 	const sign = getApiSign(timestamp);
+    // 	this.uploadHeaders['timestamp'] = timestamp;
+    // 	this.uploadHeaders['appKey'] = TokenKeys.APP_KEY;
+    // 	this.uploadHeaders['sign'] = sign;
+    // 	this.uploadHeaders[TokenKeys.ACCESS_TOKEN] = localStorage.getItem(TokenKeys.ACCESS_TOKEN);
+    // },
+    handleSuccess(res) {
+      const {code, msg, data} = res;
+      if (code && code == 10000) {
+        this.loading = false;
+        this.$vmNews("上传成功", "success");
+      } else {
+        this.$vmNews(msg);
+        this.loading = false;
+      }
+    },
+    handleProgress() {
+      this.loading = true;
+    },
+    handleError() {
+      this.$vmNews("上传失败", "error");
+    },
+    // 自定义级联选择器返回值
+    getCascader(value, field) {
+      this.$set(this.model, field, value);
+    },
+    // 设置分页total值
+    setPageTotal(total) {
+      this.$set(this.pageModel, "total", total);
+    },
+    setPageNum(pageNum) {
+      this.$set(this.pageModel, "page", pageNum);
+    },
+    //参数propLabel ， 值value
+    getField(propLabel, value) {
+      this.$set(this.ruleForm, propLabel, value);
+    },
+    // 返回
+    goBack() {
+      this.$router.go(-1);
+    },
+    // 按钮点击事件
+    funNewClick(item) {
+      if (item.menuName == "刷新" || item.btnFunction == "Refresh") {
+        this.$tab.refreshPage(this.$route);
+      } else {
+        this.$emit("onFuncBtn", item);
+      }
+    },
+    // 固定按钮点击事件
+    fixedClick(item) {
+      this.$emit("onFixedBtn", item);
+    },
+    // 操作按钮点击事件
+    funcClick(btnItem) {
+      this.$emit("onFuncBtn", btnItem);
+    },
+    // 导出函数
+    eventExport(params) {
+      // console.log(params, 'params')
+      // console.log(this.onlyUrl ? this.onlyUrl : this.exportUrl, 'this.onlyUrl?this.onlyUrl:this.exportUrl')
+      // return fetch.get(this.onlyUrl ? this.onlyUrl : this.exportUrl, {
+      // 	params,
+      // 	responseType: 'blob'
+      // })
+    },
+    // 设置某个参数的值
+    setSomeParam(field, value = null) {
+      this.$set(this.model, field, value);
+    },
+    // 查询、重置事件
+    queryEvent(state) {
+      this.$emit("onQuery", this.mergeParam(true));
+    },
+    // 回车搜索
+    handerInputEnter() {
+      this.$emit("handerInputEnter", this.ruleForm);
+    },
+    // 条件查询-下拉框
+    selectChange(event, index, indexItem) {
+      if (typeof event == "number" && event < 3) {
+        if (Number(event) == 2) {
+          event = 0;
+        } else {
+          event = event - 1;
+        }
+      }
+      if (event !== "" && event != undefined) {
+        this.$emit("onElSelect", event, index, indexItem, this.model);
+      }
+    },
+    // 页数或每页条数更改时触发
+    onPageChange() {
+      this.$emit("pageChange", this.mergeParam());
+    },
+    // 合并参数
+    mergeParam(state) {
+      if (state) {
+        this.pageModel.page = 1;
+      }
+      let page = {
+        page: this.pageModel.page,
+        limit: this.pageModel.limit,
+      };
+      for (let i in this.model) {
+        if (!this.model[i]) {
+          this.model[i] = null;
+        }
+      }
+      let search = Object.assign({}, page, this.model);
+      return Object.assign({}, page, this.model);
+    },
+    // 收起展开分页
+    showSearch() {
+      this.isSearch = !this.isSearch;
+    },
+    // 查询函数
+    search() {
+      this.$emit("search", this.ruleForm);
+    },
+    // 重置函数
+    refresh() {
+      this.ruleForm = Object.assign({}, "");
+      this.search();
+    },
+  },
+};
+</script>
+<style scoped lang='scss'>
+.pushButton {
+  /* margin: 12px 10px 10px 10px; */
+  padding: 10px;
+}
+
+::v-deep .iconfont {
+  font-size: 12px;
+  text-align: center;
+}
+
+::v-deep .el-tooltip {
+  padding: 0 3px;
+}
+
+::v-deep .el-button--mini {
+  padding: 6px 8px;
+  margin: 5px;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+
+  .title {
+    /* @include boxBase(100%, 48px, $base-color); */
+    /* @include fontBase(16px, #fff); */
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  .buttonList + .buttonList {
+    margin-left: 5px;
+  }
+
+  .main {
+    /* height: auto !important; */
+    overflow-y: auto;
+
+    /* padding:0 12px; */
+    .search {
+      height: auto;
+      background: #f5f5f5;
+      border: 1px solid #d8d8d8;
+      padding: 12px;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .hide {
+      height: 0;
+    }
+  }
+
+  .main::-webkit-scrollbar {
+    width: 5px;
+    /* background-color: #D8D8D8; */
+  }
+
+  .main::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    width: 5px;
+    background: #b4bccc;
+  }
+
+  .w-100 {
+    width: 100%;
+  }
+
+  .mb-12 {
+    margin-bottom: 12px;
+  }
+
+  .back {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/LinkUp/compoment/constant.js b/src/views/LinkUp/compoment/constant.js
new file mode 100644
index 0000000..06a6eda
--- /dev/null
+++ b/src/views/LinkUp/compoment/constant.js
@@ -0,0 +1,185 @@
+
+var tabListDisposition = [{ tabName: '1', name: '选择操作', success: false, }, { tabName: '2', name: '配置', success: false },]
+
+var tabListAction = [{ tabName: '1', name: '选择应用', success: false }, { tabName: '2', name: '选择操作', success: false }, { tabName: '3', name: '选择账号', success: false }, { tabName: '4', name: '配置', success: false }, { tabName: '5', name: '输出', success: false },]
+
+var stepAdd = { icon: '', title: '触发条件', actionName: '平台触发配置', content: '请选择触发操作' }
+
+var stepUse = { icon: '', title: '执行操作', actionName: '请选择执行操作', content: '请选择动作', }
+
+var timeDivide = [
+	{
+		id: 1,
+		title: "秒级",
+		content: "用户可使用 cron 表达式自定义时间执行",
+	},
+	{
+		id: 2,
+		title: "分钟级",
+		content: "用户可使用 cron 表达式自定义时间执行",
+	},
+	{
+		id: 3,
+		title: "小时级",
+		content: "按设定的周期时间开始执行，如每月 x 执行一次",
+	},
+	{
+		id: 4,
+		title: "天级",
+		content: "按设定的时间间隔开始执行，如间隔 x 小时执行一次",
+	},
+]
+var representationData = [
+	{
+		id: 1,
+		label: "字符串函数",
+		children: [
+			{
+				label: "concat",
+				value: "将任意数量的字符串拼接到一起",
+			},
+			{
+				label: "replaceFirst",
+				value: "用给定的字符串替换字符串中的第一个",
+			},
+			{
+				label: "replaceAll",
+				value: "用给定的字符串替换字符串中所有匹配上的字符串",
+			},
+			{
+				label: "format",
+				value: "使用指定的格式字符串和参数返回一个格式化字符串",
+			},
+			{
+				label: "startsWith",
+				value: "判断字符串是否是以指定的字符串开始",
+			},
+			{
+				label: "endsWith",
+				value: "判断字符串是否是以指定的字符串结束",
+			},
+			{
+				label: "equals",
+				value: "判断两个字符串是否相等",
+			},
+			{
+				label: "equalsIgnoreCase",
+				value: "判断两个字符串是否相等(忽略大小写)",
+			},
+			{
+				label: "contains",
+				value: "判断字符串是否包含指定的字符串",
+			},
+			{
+				label: "indexOf",
+				value: "查询指定字符串在字符串中的第一次出现的位置",
+			},
+			{
+				label: "substring",
+				value: "截取指定位置字符串，end不指定时表示到字符串末尾，从0开始",
+			},
+			{
+				label: "split",
+				value: "按分割符分割字符串",
+			},
+			{
+				label: "md5",
+				value: "MD5加密",
+			},
+			{
+				label: "upperCase",
+				value: "英文字符串转大写",
+			},
+			{
+				label: "lowerCase",
+				value: "英文字符串转小写",
+			},
+		]
+	},
+	{
+		id: 2,
+		label: "JSON函数",
+		children: [
+			{
+				label: "toString",
+				value: "将JSON转化为字符串输出",
+			},
+			{
+				label: "parseObject",
+				value: "将字符串转化为JSON输出",
+			},
+		]
+	},
+	{
+		id: 3,
+		label: "数学计算",
+		children: [
+			{
+				label: "add",
+				value: "计算两个数据的和",
+			},
+			{
+				label: "addWithScale",
+				value: "计算两个数据的和(指定精度)",
+			},
+			{
+				label: "subtract",
+				value: "计算两个数据的差",
+			},
+			{
+				label: "subtractWithScale",
+				value: "计算两个数据的差(指定精度)",
+			},
+			{
+				label: "multiply",
+				value: "计算两个数据的积",
+			},
+			{
+				label: "multiplyWithScale",
+				value: "计算两个数据的积(指定精度)",
+			},
+			{
+				label: "divide",
+				value: "计算两个数据的商",
+			},
+			{
+				label: "divideWithScale",
+				value: "计算两个数据的商(指定精度)",
+			},
+			{
+				label: "modly",
+				value: "取两个数据的余数",
+			},
+			{
+				label: "abs",
+				value: "计算数据绝对值",
+			},
+			{
+				label: "greaterThan",
+				value: "判断数据1是否大于数据2",
+			},
+			{
+				label: "greaterThanOrEqual",
+				value: "判断数据1是否大于等于数据2",
+			},
+			{
+				label: "lessThan",
+				value: "判断数据1是否小于数据2",
+			},
+			{
+				label: "lessThanOrEqual",
+				value: "判断数据1是否小于等于数据2",
+			},
+			{
+				label: "equals",
+				value: "判断数据1是否等于数据2",
+			},
+			{
+				label: "notEqual",
+				value: "判断数据1是否不等于数据2",
+			},
+		]
+	},
+]
+
+export { tabListDisposition, tabListAction, stepAdd, stepUse, timeDivide,representationData }
diff --git a/src/views/LinkUp/compoment/editSence.vue b/src/views/LinkUp/compoment/editSence.vue
new file mode 100644
index 0000000..cb42ca8
--- /dev/null
+++ b/src/views/LinkUp/compoment/editSence.vue
@@ -0,0 +1,274 @@
+<template>
+  <div>
+    <base-dialog
+      :closeEscape="true"
+      :showClose="true"
+      :closeModal="false"
+      @handleConfirmClick="handleConfirmClick"
+      @handleClose="handleClose"
+      :dialogVisible="dialogVisible"
+      :title="senceType == 'add' ? '开始创建场景' : '编辑场景'"
+      width="800px"
+      top="8vh"
+      :footerShow="true"
+      :submitButtonTitle="'开始创建'"
+    >
+      <base-form
+        ref="senceForm"
+        :formRow="senceFormRow"
+        :isFunBtn="false"
+        :rules="senceRules"
+        :spanNumber="24"
+        style="padding-bottom: 0"
+      >
+      </base-form>
+      <div class="TriggerModeBox">
+        <div class="label">触发方式</div>
+        <div class="stepWrap">
+          <div
+            class="step"
+            :class="{
+              activeBorder: triggerModeId === ele.value,
+            }"
+            v-for="(ele, index) in stepList"
+            :key="ele.value"
+          >
+            <div class="img">
+              <img src="../images/pingtai.svg" v-if="ele.value == 2" />
+              <img src="../images/naozhong.svg" v-else-if="ele.value == 1" />
+              <img src="../images/api.svg" v-else-if="ele.value == 4" />
+              <img src="../images/point.svg" v-else-if="ele.value == 3" />
+            </div>
+            {{ ele.label }}
+          </div>
+        </div>
+      </div>
+    </base-dialog>
+    <!-- <addDialogChunk
+      ref="addDialogChunk"
+      @examineHandleClose="examineHandleClose"
+    ></addDialogChunk> -->
+  </div>
+</template>
+
+<script>
+import baseDialog from "@/components/base/BaseNewDialog/index.vue";
+// import addDialogChunk from "./addDialogChunk";
+import { authApi } from "@/api/apis/auth";
+import baseForm from "@/components/base/baseNewForm";
+export default {
+  components: {
+    baseDialog,
+    baseForm,
+    // addDialogChunk,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      senceFormRow: [
+        {
+          elCol: [
+            {
+              label: "项目分类",
+              prop: "classId",
+              tag: "elSelect",
+              options: [],
+              optionValue: "id",
+              optionLabel: "name",
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "场景名称",
+              prop: "name",
+              tag: "elInput",
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "场景描述",
+              prop: "description",
+              tag: "elInput",
+              type: "textarea",
+            },
+          ],
+        },
+      ],
+      senceRules: {
+        classId: [
+          {
+            required: true,
+            message: "请选择项目分类",
+            trigger: "change, blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入场景名称",
+            trigger: "change, blur",
+          },
+        ],
+      },
+      stepList: [
+        { label: "应用程序触发", value: 1 },
+        { label: "定时触发", value: 2 },
+        { label: "手动触发", value: 3 },
+        { label: "Webhook触发", value: 4 },
+      ],
+      triggerModeId: "", //当前选择的模块
+      senceType: "",
+    };
+  },
+  methods: {
+    // 获取项目分类
+    async GetProductionTableData() {
+      let param = {};
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "queryListJson",
+        "",
+        param
+      );
+      if (res.status == "200") {
+        this.senceFormRow[0].elCol[0].options = res.attribute;
+      }
+    },
+    openDialog(row, type, projectClassificationID) {
+      this.senceType = type;
+      this.dialogVisible = true;
+      this.GetProductionTableData();
+      this.$nextTick(() => {
+        this.triggerModeId = "";
+        this.$refs.senceForm.resetFields("ruleForm");
+        if (type == "add") {
+          this.triggerModeId = 1;
+          if (projectClassificationID && projectClassificationID != "1") {
+            this.$refs.senceForm.getField("classId", projectClassificationID);
+          }
+        }
+        if (type == "edit") {
+          this.GetSceneDetail(row.id);
+        }
+      });
+    },
+    async GetSceneDetail(sceneID) {
+      let params = {
+        sceneID: sceneID,
+      };
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "queryListJson",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$refs.senceForm.choiceAssignment(res.data[0]);
+        this.triggerModeId = res.data[0].triggerMode;
+      }
+    },
+    handleConfirmClick() {
+      this.$refs.senceForm.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (!this.triggerModeId) {
+            this.$vmNews("请选择触发方式");
+            return;
+          }
+          this.SaveSenceData();
+        } else {
+          this.$message({ message: "请输入必填项", type: "warning" });
+          return;
+        }
+      });
+    },
+    async SaveSenceData() {
+      let params = {
+        ...this.$refs.senceForm.ruleForm,
+        triggerModeId: this.triggerModeId,
+      };
+      let res = await authApi("sysFlowService", "", "saveFlow", "", params);
+      if (res.status == "200") {
+        this.$emit("handleConfirmClick", res.data[0], params);
+        this.$nextTick(() => {
+          if (this.senceType == "edit") {
+            this.$vmNews("修改成功！", "success");
+            this.dialogVisible = false;
+          }
+        });
+      }
+    },
+    handleClose() {
+      this.$nextTick(() => {
+        this.triggerModeId = "";
+        this.$refs.senceForm.resetFields("ruleForm");
+        this.dialogVisible = false;
+      });
+    },
+    examineHandleClose() {
+      this.$emit("examineHandleClose");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.TriggerModeBox {
+  display: flex;
+  margin-bottom: 20px;
+
+  .label {
+    width: 85px;
+    color: #999;
+    text-align: right;
+    padding-right: 5px;
+  }
+  .stepWrap {
+    display: flex;
+    margin-left: 15px;
+  }
+}
+
+.step {
+  width: 150px;
+  height: 58px;
+  background: #ffffff;
+  border-radius: 4px;
+  border: 1px solid #dbdde1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+
+  .img {
+    margin-right: 10px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #f18709;
+
+    img {
+      width: 60%;
+      height: 60%;
+    }
+  }
+}
+
+.activeBorder {
+  background: #f2fcff;
+  border: 1px solid #1478f5;
+}
+.step:hover {
+  background: #f2fcff;
+  border: 1px solid #1478f5;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/LinkUp/configData.js b/src/views/LinkUp/configData.js
new file mode 100644
index 0000000..cb83065
--- /dev/null
+++ b/src/views/LinkUp/configData.js
@@ -0,0 +1,37 @@
+// 列表表头配置
+const tableColumn = [
+    {
+        label: "场景名称",
+        prop: "name",
+        tooltip: true,
+    },
+    {
+        label: "流程分类名称",
+        prop: "className",
+        tooltip: true,
+    },
+    {
+        label: "触发方式",
+        prop: "triggerModeName",
+        tooltip: true,
+    },
+    // {
+    //     label: "NIFI应用组ID",
+    //     prop: "nifiGroupId",
+    //     tooltip: true,
+    // },
+    {
+        label: "描述",
+        prop: "description",
+        tooltip: true,
+    },
+    {
+        label: "操作",
+        prop: "operate",
+        width: 100,
+    }
+];
+
+export default {
+    tableColumn,
+};
diff --git a/src/views/LinkUp/images/account.svg b/src/views/LinkUp/images/account.svg
new file mode 100644
index 0000000..fb59356
--- /dev/null
+++ b/src/views/LinkUp/images/account.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747448742430" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2686" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M384 51.2h-256C87.04 51.2 51.2 87.04 51.2 128v256C51.2 424.96 87.04 460.8 128 460.8h256C424.96 460.8 460.8 424.96 460.8 384v-256C460.8 87.04 424.96 51.2 384 51.2z m10.24 332.8c0 5.12-5.12 10.24-10.24 10.24h-256c-5.12 0-10.24-5.12-10.24-10.24v-256c0-5.12 5.12-10.24 10.24-10.24h256c5.12 0 10.24 5.12 10.24 10.24v256zM384 563.2h-256c-40.96 0-76.8 35.84-76.8 76.8v256c0 40.96 35.84 76.8 76.8 76.8h256c40.96 0 76.8-35.84 76.8-76.8v-256c0-40.96-35.84-76.8-76.8-76.8z m10.24 332.8c0 5.12-5.12 10.24-10.24 10.24h-256c-5.12 0-10.24-5.12-10.24-10.24v-256c0-5.12 5.12-10.24 10.24-10.24h256c5.12 0 10.24 5.12 10.24 10.24v256zM640 460.8h256c40.96 0 76.8-35.84 76.8-76.8v-256c0-40.96-35.84-76.8-76.8-76.8h-256c-40.96 0-76.8 35.84-76.8 76.8v256c0 40.96 35.84 76.8 76.8 76.8z m-10.24-332.8c0-5.12 5.12-10.24 10.24-10.24h256c5.12 0 10.24 5.12 10.24 10.24v256c0 5.12-5.12 10.24-10.24 10.24h-256c-5.12 0-10.24-5.12-10.24-10.24v-256zM860.16 757.76c15.36-20.48 25.6-46.08 25.6-76.8 0-66.56-51.2-117.76-117.76-117.76s-117.76 51.2-117.76 117.76c0 30.72 10.24 56.32 25.6 76.8-66.56 30.72-112.64 102.4-112.64 179.2 0 15.36 15.36 30.72 30.72 30.72s30.72-15.36 30.72-30.72c0-76.8 61.44-138.24 138.24-138.24 76.8 0 138.24 61.44 138.24 138.24 0 15.36 15.36 30.72 30.72 30.72s30.72-15.36 30.72-30.72c10.24-76.8-35.84-143.36-102.4-179.2zM716.8 686.08c0-30.72 25.6-51.2 51.2-51.2s51.2 25.6 51.2 51.2-25.6 51.2-51.2 51.2-51.2-25.6-51.2-51.2z" fill="#f18709" p-id="2687"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/addBtn.svg b/src/views/LinkUp/images/addBtn.svg
new file mode 100644
index 0000000..e39f9dd
--- /dev/null
+++ b/src/views/LinkUp/images/addBtn.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746864269723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5261" data-spm-anchor-id="a313x.search_index.0.i16.49f93a811yUL7v" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024a512 512 0 1 1 512-512 512.595349 512.595349 0 0 1-512 512z m0-952.55814a440.55814 440.55814 0 1 0 440.55814 440.55814 441.093953 441.093953 0 0 0-440.55814-440.55814z" p-id="5262" data-spm-anchor-id="a313x.search_index.0.i17.49f93a811yUL7v" class="selected" fill="#1478f6"></path><path d="M720.372093 476.27907H547.72093V303.627907H476.27907v172.651163H303.627907v71.44186h172.651163v172.651163h71.44186V547.72093h172.651163V476.27907z" p-id="5263" data-spm-anchor-id="a313x.search_index.0.i18.49f93a811yUL7v" class="selected" fill="#1478f6"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/api.svg b/src/views/LinkUp/images/api.svg
new file mode 100644
index 0000000..e9b5e29
--- /dev/null
+++ b/src/views/LinkUp/images/api.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735960350340" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28131" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M900.6 483c12.3 0 22.4-10.1 22.4-22.4 0-12.3-10.1-22.4-22.4-22.4h-78.2V386h78.2c12.3 0 22.4-10.1 22.4-22.4 0-12.3-10.1-22.4-22.4-22.4h-78.2v-63.7c0-43.3-35.2-78.5-78.6-78.5h-31.2v-75.5c0-12.3-10.1-22.4-22.4-22.4-12.3 0-22.4 10.1-22.4 22.4V199h-52.2v-75.5c0-12.3-10.1-22.4-22.4-22.4-12.3 0-22.4 10.1-22.4 22.4V199h-52.2v-75.5c0-12.3-10.1-22.4-22.4-22.4-12.3 0-22.4 10.1-22.4 22.4V199h-52.2v-75.5c0-12.3-10.1-22.4-22.4-22.4-12.3 0-22.4 10.1-22.4 22.4V199h-96.3c-43.3 0-78.6 35.2-78.6 78.5v63.7h-78.2c-12.3 0-22.4 10.1-22.4 22.4 0 12.3 10.1 22.4 22.4 22.4h78.2v52.1h-78.2c-12.3 0-22.4 10.1-22.4 22.4 0 12.3 10.1 22.4 22.4 22.4h78.2V535h-78.2c-12.3 0-22.4 10.1-22.4 22.4 0 12.3 10.1 22.4 22.4 22.4h78.2v52.1h-78.2c-12.3 0-22.4 10.1-22.4 22.4 0 12.3 10.1 22.4 22.4 22.4h78.2v63.7c0 43.3 35.2 78.5 78.6 78.5h34.6v81.3c0 12.3 10.1 22.4 22.4 22.4 12.3 0 22.4-10.1 22.4-22.4v-81.3h52.2v81.3c0 12.3 10.1 22.4 22.4 22.4 12.3 0 22.4-10.1 22.4-22.4v-81.3h52.2v81.3c0 12.3 10.1 22.4 22.4 22.4 12.3 0 22.4-10.1 22.4-22.4v-81.3H606v81.3c0 12.3 10.1 22.4 22.4 22.4 12.3 0 22.4-10.1 22.4-22.4v-81.3h92.9c43.3 0 78.6-35.2 78.6-78.5V677h78.2c12.3 0 22.4-10.1 22.4-22.4 0-12.3-10.1-22.4-22.4-22.4h-78.2V580h78.2c12.3 0 22.4-10.1 22.4-22.4 0-12.3-10.1-22.4-22.4-22.4h-78.2V483h78.3zM777.5 740.6c0 18.5-15.1 33.6-33.7 33.6H280.2c-18.5 0-33.7-15.1-33.7-33.6V277.5c0-18.5 15.1-33.6 33.7-33.6h463.6c18.5 0 33.7 15.1 33.7 33.6v463.1z" p-id="28132" fill="#f18709"></path><path d="M681.3 420.8h36.9v183.7h-36.9zM615.3 423.6c-6.8-1.9-21.5-2.8-43.9-2.8h-59.5v183.7h36.9v-69.2h24.1c16.7 0 29.5-0.9 38.4-2.6 6.5-1.5 12.9-4.4 19.2-8.8 6.3-4.4 11.5-10.4 15.6-18.1 4.1-7.7 6.1-17.2 6.1-28.5 0-14.6-3.5-26.6-10.6-35.8-7.1-9.1-15.9-15.1-26.3-17.9z m-5.6 68.6c-2.8 4.1-6.7 7.2-11.5 9.1-4.9 1.9-14.7 2.9-29.2 2.9h-20.2v-52.3h17.9c13.4 0 22.1 0.4 26.6 1.3 6 1 10.9 3.8 14.8 8.2 3.9 4.4 5.8 9.9 5.8 16.5 0.1 5.4-1.4 10.3-4.2 14.3zM379.8 420.8l-71.3 183.7h39.3l15.1-41.8H436l16 41.8h40.1L419 420.8h-39.2z m-5.5 111l24.7-68.2 25.2 68.2h-49.9z" p-id="28133" fill="#f18709"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/apiison.svg b/src/views/LinkUp/images/apiison.svg
new file mode 100644
index 0000000..a59366f
--- /dev/null
+++ b/src/views/LinkUp/images/apiison.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747457562742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9343" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M832 544c23.466667 2.133333 44.8 8.533333 64 17.066667v-17.066667c0-155.733333-91.733333-292.266667-224-356.266667 0 23.466667-6.4 44.8-14.933333 64 104.533333 55.466667 174.933333 166.4 174.933333 292.266667zM172.8 567.466667c0-8.533333-2.133333-17.066667-2.133333-23.466667 0-125.866667 70.4-236.8 174.933333-292.266667-8.533333-19.2-14.933333-40.533333-14.933333-64C198.4 251.733333 106.666667 388.266667 106.666667 544c0 17.066667 2.133333 32 4.266666 49.066667 17.066667-12.8 38.4-21.333333 61.866667-25.6zM686.933333 819.2c-53.333333 36.266667-117.333333 55.466667-185.6 55.466667-57.6 0-110.933333-14.933333-160-40.533334-12.8 19.2-29.866667 34.133333-46.933333 44.8 59.733333 36.266667 130.133333 59.733333 206.933333 59.733334 87.466667 0 168.533333-29.866667 232.533334-76.8-17.066667-10.666667-34.133333-25.6-46.933334-42.666667z" p-id="9344" fill="#f18709"></path><path d="M501.333333 181.333333m-96 0a96 96 0 1 0 192 0 96 96 0 1 0-192 0Z" p-id="9345" fill="#f18709"></path><path d="M202.666667 736m-96 0a96 96 0 1 0 192 0 96 96 0 1 0-192 0Z" p-id="9346" fill="#f18709"></path><path d="M821.333333 714.666667m-96 0a96 96 0 1 0 192 0 96 96 0 1 0-192 0Z" p-id="9347" fill="#f18709"></path><path d="M328.533333 605.866667v6.4c0 10.666667 6.4 17.066667 17.066667 17.066666 8.533333 0 14.933333-4.266667 19.2-12.8l8.533333-23.466666h70.4l6.4 23.466666c4.266667 8.533333 10.666667 12.8 19.2 12.8 10.666667 0 17.066667-4.266667 17.066667-14.933333 0-2.133333 0-6.4-2.133333-10.666667l-49.066667-138.666666c-6.4-14.933333-14.933333-21.333333-27.733333-21.333334-12.8 0-21.333333 8.533333-27.733334 21.333334l-51.2 140.8z m78.933334-121.6l23.466666 74.666666H384l23.466667-74.666666zM518.4 445.866667c-12.8 0-19.2 6.4-19.2 19.2v145.066666c0 12.8 6.4 17.066667 19.2 17.066667s19.2-6.4 19.2-17.066667v-42.666666h27.733333c40.533333-2.133333 61.866667-23.466667 64-61.866667-2.133333-38.4-23.466667-57.6-64-61.866667h-46.933333z m70.4 61.866666c-2.133333 17.066667-10.666667 25.6-25.6 27.733334h-25.6v-53.333334h25.6c17.066667 0 25.6 8.533333 25.6 25.6zM659.2 629.333333c12.8 0 19.2-6.4 19.2-17.066666v-145.066667c0-12.8-6.4-19.2-19.2-19.2-12.8 0-19.2 6.4-19.2 19.2v145.066667c2.133333 10.666667 8.533333 17.066667 19.2 17.066666z" p-id="9348" fill="#f18709"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/applicotion.svg b/src/views/LinkUp/images/applicotion.svg
new file mode 100644
index 0000000..c737190
--- /dev/null
+++ b/src/views/LinkUp/images/applicotion.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748587059398" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6748" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M486.691591 738.679719c0 114.043383-92.448552 206.490911-206.490911 206.490911S73.708745 852.723102 73.708745 738.679719c0-114.042359 92.449575-206.490911 206.491934-206.490911L417.860946 532.188808l68.830645 0 0 68.830645L486.691591 738.679719 486.691591 738.679719zM532.579711 738.679719c0 114.043383 92.448552 206.490911 206.490911 206.490911s206.490911-92.447529 206.490911-206.490911c0-114.042359-92.448552-206.490911-206.490911-206.490911L601.410356 532.188808l-68.830645 0 0 68.830645L532.579711 738.679719 532.579711 738.679719zM486.691591 279.8108c0-114.043383-92.448552-206.490911-206.490911-206.490911S73.708745 165.767418 73.708745 279.8108s92.449575 206.490911 206.491934 206.490911L417.860946 486.301711l68.830645 0L486.691591 417.471067 486.691591 279.8108 486.691591 279.8108zM532.579711 279.8108 532.579711 279.8108c0-114.043383 92.448552-206.490911 206.490911-206.490911s206.490911 92.448552 206.490911 206.490911-92.448552 206.490911-206.490911 206.490911L601.410356 486.301711l-68.830645 0L532.579711 417.471067 532.579711 279.8108 532.579711 279.8108z" fill="#f18709" p-id="6749"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/background.png b/src/views/LinkUp/images/background.png
new file mode 100644
index 0000000..e47e916
Binary files /dev/null and b/src/views/LinkUp/images/background.png differ
diff --git a/src/views/LinkUp/images/chajian.svg b/src/views/LinkUp/images/chajian.svg
new file mode 100644
index 0000000..622c30e
--- /dev/null
+++ b/src/views/LinkUp/images/chajian.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747457568957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9554" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M576 32A160 160 0 0 1 736 192H896a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64h-234.24v-104.32a87.68 87.68 0 0 0-79.232-87.296L574.08 768a87.68 87.68 0 0 0-87.68 87.68V960H256a64 64 0 0 1-64-64v-160a160 160 0 1 1 0-320V256a64 64 0 0 1 64-64h160A160 160 0 0 1 576 32z m0 74.24c-47.36 0-85.76 38.4-85.76 85.76v74.24h-211.2a12.8 12.8 0 0 0-12.8 12.8v211.2H192a85.76 85.76 0 0 0 0 171.52h74.24v211.2c0 7.04 5.76 12.8 12.8 12.8h133.12v-30.08c0-85.824 66.816-156.096 154.368-161.472l11.072-0.384 11.968 0.64A161.92 161.92 0 0 1 736 855.68v30.08h136.96a12.8 12.8 0 0 0 12.8-12.8V279.04a12.8 12.8 0 0 0-12.8-12.8h-211.2V192c0-47.36-38.4-85.76-85.76-85.76z" fill="#f18709" p-id="9555"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/close.svg b/src/views/LinkUp/images/close.svg
new file mode 100644
index 0000000..b53715c
--- /dev/null
+++ b/src/views/LinkUp/images/close.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735808726286" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024C229.376 1024 0 794.624 0 512S229.376 0 512 0s512 229.376 512 512-229.376 512-512 512z m0-975.36C257.024 48.64 48.64 257.024 48.64 512c0 254.976 207.872 463.36 463.36 463.36S975.36 767.488 975.36 512 766.976 48.64 512 48.64z" fill="#8A8A8A" p-id="5695"></path><path d="M548.864 512l195.072-195.072c9.728-9.728 9.728-25.6 0-36.864l-1.536-1.536c-9.728-9.728-25.6-9.728-35.328 0L512 475.136 316.928 280.064c-9.728-9.728-25.6-9.728-35.328 0l-1.536 1.536c-9.728 9.728-9.728 25.6 0 36.864L475.136 512 280.064 707.072c-9.728 9.728-9.728 25.6 0 36.864l1.536 1.536c9.728 9.728 25.6 9.728 35.328 0L512 548.864l195.072 195.072c9.728 9.728 25.6 9.728 35.328 0l1.536-1.536c9.728-9.728 9.728-25.6 0-36.864L548.864 512z" fill="#8A8A8A" p-id="5696"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/closeOne.svg b/src/views/LinkUp/images/closeOne.svg
new file mode 100644
index 0000000..12d6ef4
--- /dev/null
+++ b/src/views/LinkUp/images/closeOne.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736246510143" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9524" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M963.2 60.8c35.2 35.2 35.2 86.4 0 121.6L179.2 963.2c-32 32-86.4 32-118.4 0s-32-86.4 0-118.4L844.8 60.8c32-35.2 86.4-35.2 118.4 0z" p-id="9525" fill="#999999"></path><path d="M963.2 963.2c-35.2 35.2-86.4 35.2-121.6 0L60.8 179.2c-32-32-32-86.4 0-118.4s86.4-32 118.4 0l784 784c35.2 32 35.2 86.4 0 118.4z" p-id="9526" fill="#999999"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/db.svg b/src/views/LinkUp/images/db.svg
new file mode 100644
index 0000000..16d6679
--- /dev/null
+++ b/src/views/LinkUp/images/db.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747448804234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3767" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M85.333 138.667a32 32 0 0 1 32 32v256c0 1.365 0.512 5.12 6.272 11.136 5.974 6.272 16.043 13.312 30.976 19.968C184.32 470.997 227.712 480 277.333 480c49.622 0 93.014-9.003 122.752-22.23 14.934-6.655 25.046-13.695 30.976-19.967 5.76-6.059 6.272-9.771 6.272-11.136v-256a32 32 0 0 1 64 0v256c0 22.186-10.24 40.96-23.893 55.296-13.483 14.165-31.53 25.472-51.328 34.304C386.389 533.888 333.739 544 277.333 544s-109.056-10.112-148.778-27.733c-19.798-8.832-37.846-20.139-51.286-34.304-13.653-14.379-23.936-33.11-23.936-55.296v-256a32 32 0 0 1 32-32z" p-id="3768" fill="#f18709"></path><path d="M85.333 266.667a32 32 0 0 1 32 32c0 1.365 0.512 5.12 6.272 11.136 5.974 6.272 16.043 13.312 30.976 19.968C184.32 342.997 227.712 352 277.333 352c49.622 0 93.014-9.003 122.752-22.23 14.934-6.655 25.046-13.695 30.976-19.967 5.76-6.059 6.272-9.771 6.272-11.136a32 32 0 0 1 64 0c0 22.186-10.24 40.96-23.893 55.296-13.483 14.165-31.53 25.472-51.328 34.304C386.389 405.888 333.739 416 277.333 416s-109.056-10.112-148.778-27.733c-19.798-8.832-37.846-20.139-51.286-34.304-13.696-14.379-23.936-33.11-23.936-55.296a32 32 0 0 1 32-32z" p-id="3769" fill="#f18709"></path><path d="M123.605 159.53c-5.76 6.06-6.272 9.771-6.272 11.137s0.512 5.12 6.272 11.136c5.974 6.272 16.043 13.312 30.976 19.968C184.32 214.997 227.712 224 277.333 224c49.622 0 93.014-9.003 122.752-22.23 14.934-6.655 25.046-13.695 30.976-19.967 5.76-6.059 6.272-9.771 6.272-11.136s-0.512-5.12-6.272-11.136c-5.973-6.272-16.042-13.312-30.976-19.968-29.738-13.227-73.13-22.23-122.752-22.23-49.621 0-93.013 9.003-122.752 22.23-14.933 6.656-25.045 13.696-30.976 19.968z m4.95-78.463c39.722-17.622 92.373-27.734 148.778-27.734S386.39 63.445 426.112 81.067c19.797 8.832 37.803 20.138 51.328 34.304 13.653 14.378 23.893 33.109 23.893 55.296s-10.24 40.96-23.893 55.296c-13.483 14.165-31.53 25.472-51.328 34.304C386.389 277.888 333.739 288 277.333 288s-109.056-10.112-148.778-27.733c-19.798-8.832-37.846-20.139-51.286-34.304-13.696-14.379-23.936-33.11-23.936-55.296s10.24-40.96 23.894-55.296c13.482-14.166 31.53-25.472 51.328-34.304zM650.667 128a32 32 0 0 1 32-32h128A117.333 117.333 0 0 1 928 213.333v128a32 32 0 0 1-64 0v-128c0-29.44-23.893-53.333-53.333-53.333h-128a32 32 0 0 1-32-32zM128 650.667a32 32 0 0 1 32 32v128c0 29.44 23.893 53.333 53.333 53.333h128a32 32 0 0 1 0 64h-128A117.333 117.333 0 0 1 96 810.667v-128a32 32 0 0 1 32-32zM746.667 544a74.667 74.667 0 1 0 0 149.333 74.667 74.667 0 0 0 0-149.333zM608 618.667a138.667 138.667 0 1 1 277.333 0 138.667 138.667 0 0 1-277.333 0z" p-id="3770" fill="#f18709"></path><path d="M589.867 906.667h313.6a160 160 0 0 0-313.6 0z m-67.2 32a224 224 0 0 1 448 0 32 32 0 0 1-32 32h-384a32 32 0 0 1-32-32z" p-id="3771" fill="#f18709"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/edit.svg b/src/views/LinkUp/images/edit.svg
new file mode 100644
index 0000000..dbf4d9b
--- /dev/null
+++ b/src/views/LinkUp/images/edit.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735812194109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9254" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M867.22 413.07c-9.68 0-19.36-3.63-26.82-10.92-15.19-14.82-15.49-39.14-0.68-54.32 46.84-48.02 45.89-125.18-2.12-172.02-23.27-22.7-54.13-34.93-86.46-34.56-32.49 0.4-62.87 13.43-85.56 36.69-14.83 15.19-39.15 15.47-54.32 0.68-15.19-14.81-15.49-39.13-0.68-54.32C687 45.94 812.9 44.4 891.24 120.82c78.33 76.42 79.89 202.32 3.47 280.66-7.52 7.71-17.51 11.59-27.49 11.59z" p-id="9255" fill="#000000"></path><path d="M819.09 462.01c-9.68 0-19.36-3.63-26.82-10.92L563.13 227.55c-15.19-14.82-15.49-39.14-0.68-54.32 14.82-15.2 39.15-15.47 54.32-0.68L845.92 396.1c15.19 14.82 15.49 39.14 0.68 54.32-7.54 7.72-17.52 11.59-27.51 11.59z" p-id="9256" fill="#000000"></path><path d="M164.51 674.68c-9.68 0-19.36-3.63-26.82-10.92-15.19-14.82-15.49-39.14-0.68-54.32l473.74-485.6c14.82-15.2 39.15-15.47 54.33-0.67 15.18 14.82 15.48 39.14 0.67 54.33L192.01 663.09c-7.53 7.72-17.52 11.59-27.5 11.59z" p-id="9257" fill="#000000"></path><path d="M111.34 958.62c-2.31 0-4.65-0.21-7.01-0.64-20.86-3.85-34.66-23.88-30.81-44.74l51.7-280.46c3.85-20.86 23.86-34.7 44.74-30.81 20.86 3.85 34.66 23.88 30.81 44.74l-51.7 280.46c-3.41 18.5-19.56 31.45-37.73 31.45z" p-id="9258" fill="#000000"></path><path d="M393.86 898.44c-9.68 0-19.36-3.63-26.82-10.92-15.19-14.82-15.49-39.14-0.68-54.32L840.1 347.6c14.82-15.19 39.14-15.49 54.32-0.68 15.19 14.82 15.49 39.13 0.68 54.32l-473.74 485.6c-7.53 7.72-17.51 11.6-27.5 11.6z" p-id="9259" fill="#000000"></path><path d="M111.3 958.66c-17.79 0-33.76-12.42-37.56-30.52-4.36-20.76 8.93-41.13 29.7-45.49l279.1-58.62c20.8-4.35 41.13 8.93 45.49 29.7 4.36 20.76-8.93 41.13-29.7 45.49l-279.1 58.62c-2.66 0.55-5.31 0.82-7.93 0.82z" p-id="9260" fill="#000000"></path><path d="M912.71 959.5H592.59c-21.21 0-38.41-17.2-38.41-38.41 0-21.21 17.2-38.41 38.41-38.41h320.12c21.21 0 38.41 17.2 38.41 38.41 0 21.21-17.2 38.41-38.41 38.41z" p-id="9261" fill="#000000"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/error.svg b/src/views/LinkUp/images/error.svg
new file mode 100644
index 0000000..eb217b5
--- /dev/null
+++ b/src/views/LinkUp/images/error.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736243812804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5727" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0c282.7648 0 512 229.2352 512 512s-229.2352 512-512 512S0 794.7648 0 512 229.2352 0 512 0z m-1.4848 450.978133L341.162667 281.6256a34.133333 34.133333 0 0 0-48.273067 0l-11.264 11.264a34.133333 34.133333 0 0 0 0 48.273067l169.352533 169.352533-169.352533 169.352533a34.133333 34.133333 0 0 0 0 48.273067l11.264 11.264a34.133333 34.133333 0 0 0 48.273067 0l169.352533-169.3568 169.352533 169.3568a34.133333 34.133333 0 0 0 48.273067 0l11.264-11.264a34.133333 34.133333 0 0 0 0-48.273067l-169.3568-169.352533 169.3568-169.352533a34.133333 34.133333 0 0 0 0-48.273067l-11.264-11.264a34.133333 34.133333 0 0 0-48.273067 0l-169.352533 169.352533z" fill="#E40000" p-id="5728" data-spm-anchor-id="a313x.search_index.0.i9.72a33a81KEISlk" class="selected"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/hua.svg b/src/views/LinkUp/images/hua.svg
new file mode 100644
index 0000000..a62af67
--- /dev/null
+++ b/src/views/LinkUp/images/hua.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735550467426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15957" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M229.216 485.44h254.688V230.72A225.6 225.6 0 0 0 258.56 5.44 254.976 254.976 0 0 0 3.904 260.096a225.6 225.6 0 0 0 225.312 225.344z m29.344-416a161.504 161.504 0 0 1 161.344 161.312v190.688H229.216a161.504 161.504 0 0 1-161.312-161.344A190.88 190.88 0 0 1 258.56 69.44zM5.44 765.44a254.976 254.976 0 0 0 254.688 254.656 225.6 225.6 0 0 0 225.312-225.312v-254.688H230.784A225.6 225.6 0 0 0 5.44 765.44z m416 29.344a161.504 161.504 0 0 1-161.312 161.312A190.88 190.88 0 0 1 69.44 765.44a161.504 161.504 0 0 1 161.344-161.344h190.656zM794.784 538.56h-254.688v254.688a225.6 225.6 0 0 0 225.344 225.312 254.944 254.944 0 0 0 254.656-254.656 225.6 225.6 0 0 0-225.312-225.344z m-29.344 416a161.504 161.504 0 0 1-161.344-161.312V602.56h190.688a161.504 161.504 0 0 1 161.312 161.344 190.88 190.88 0 0 1-190.656 190.656zM1018.56 258.56A254.944 254.944 0 0 0 763.904 3.904a225.6 225.6 0 0 0-225.344 225.312v254.688h254.656A225.6 225.6 0 0 0 1018.56 258.56z m-416-29.344a161.504 161.504 0 0 1 161.344-161.312A190.88 190.88 0 0 1 954.56 258.56a161.504 161.504 0 0 1-161.344 161.344H602.56z" fill="#ffffff" p-id="15958"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/huaO.svg b/src/views/LinkUp/images/huaO.svg
new file mode 100644
index 0000000..ad0364e
--- /dev/null
+++ b/src/views/LinkUp/images/huaO.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735961718454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10582" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M404.248183 781.45109v-161.699273h-161.699273c-89.292342 0-161.699273 72.406931-161.699273 161.699273s72.406931 161.699273 161.699273 161.699273c89.435439 0 161.699273-72.406931 161.699273-161.699273z m80.849637 0c0 133.938513-108.610397 242.54891-242.54891 242.54891S0 915.389603 0 781.45109s108.610397-242.54891 242.54891-242.54891H485.09782v242.54891z m134.797093 0v-161.699273h161.699274c89.292342 0 161.699273 72.406931 161.699273 161.699273s-72.406931 161.699273-161.699273 161.699273-161.699273-72.406931-161.699274-161.699273z m-80.849636 0c0 133.938513 108.610397 242.54891 242.54891 242.54891s242.54891-108.610397 242.54891-242.54891-108.610397-242.54891-242.54891-242.54891H539.045277v242.54891z m-134.797094-538.90218v161.699273h-161.699273c-89.292342 0-161.699273-72.406931-161.699273-161.699273s72.406931-161.699273 161.699273-161.699273c89.435439 0.143097 161.699273 72.406931 161.699273 161.699273z m80.849637 0C485.09782 108.610397 376.487423 0 242.54891 0S0 108.610397 0 242.54891 108.753494 485.09782 242.692007 485.09782h242.54891V242.54891h-0.143097z m134.797093 0v161.699273h161.699274c89.292342 0 161.699273-72.406931 161.699273-161.699273s-72.406931-161.699273-161.699273-161.699273c-89.292342 0.143097-161.699273 72.406931-161.699274 161.699273z m-80.849636 0C539.045277 108.610397 647.655674 0 781.594187 0s242.54891 108.610397 242.54891 242.54891S915.389603 485.09782 781.45109 485.09782H539.045277V242.54891z" fill="#f18709" opacity=".8" p-id="10583"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/naozhong.svg b/src/views/LinkUp/images/naozhong.svg
new file mode 100644
index 0000000..82c5be9
--- /dev/null
+++ b/src/views/LinkUp/images/naozhong.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735960397324" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8044" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M518.144 946.176c-237.568 0-431.104-193.536-431.104-431.104C87.04 276.48 280.576 82.944 518.144 82.944S949.248 276.48 949.248 515.072c0 237.568-193.536 431.104-431.104 431.104z m0-793.6c-199.68 0-362.496 162.816-362.496 362.496s162.816 362.496 362.496 362.496S880.64 714.752 880.64 515.072c0-200.704-162.816-362.496-362.496-362.496z" fill="#f18709" p-id="8045"></path><path d="M672.768 566.272H531.456c-35.84 0-65.536-29.696-65.536-65.536V289.792c0-19.456 15.36-34.816 34.816-34.816s34.816 15.36 34.816 34.816v206.848h138.24c19.456 0 34.816 15.36 34.816 34.816-1.024 19.456-16.384 34.816-35.84 34.816z" fill="#f18709" p-id="8046"></path><path d="M87.04 273.408c-13.312 0-26.624-5.12-36.864-15.36-20.48-20.48-20.48-53.248 0-72.704L153.6 80.896c20.48-20.48 53.248-20.48 72.704 0 20.48 20.48 20.48 53.248 0 72.704L122.88 258.048c-10.24 10.24-22.528 15.36-35.84 15.36zM949.248 273.408c-13.312 0-26.624-5.12-36.864-15.36L808.96 154.624c-20.48-20.48-20.48-53.248 0-72.704 20.48-20.48 53.248-20.48 72.704 0l104.448 102.4c20.48 20.48 20.48 53.248 0 72.704-10.24 11.264-23.552 16.384-36.864 16.384z" fill="#f18709" p-id="8047"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/pingtai.svg b/src/views/LinkUp/images/pingtai.svg
new file mode 100644
index 0000000..a7da384
--- /dev/null
+++ b/src/views/LinkUp/images/pingtai.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735960409297" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8249" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M846.848 754.688H175.872c-57.856 0-104.96-47.104-104.96-104.96V181.76c0-57.856 47.104-104.96 104.96-104.96h670.976c57.856 0 104.96 47.104 104.96 104.96v468.224c0 57.6-47.104 104.704-104.96 104.704zM175.872 138.24c-24.064 0-43.52 19.456-43.52 43.52v468.224c0 24.064 19.456 43.52 43.52 43.52h670.976c24.064 0 43.52-19.456 43.52-43.52V181.76c0-24.064-19.456-43.52-43.52-43.52H175.872zM817.152 946.432H206.592c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h610.56c16.896 0 30.72 13.824 30.72 30.72s-13.568 30.72-30.72 30.72z" fill="#f18709" p-id="8250"></path><path d="M328.448 609.28c-16.896 0-30.72-13.824-30.72-30.72v-173.056c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72V578.56c0 16.896-13.824 30.72-30.72 30.72zM508.672 609.28c-16.896 0-30.72-13.824-30.72-30.72v-238.592c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72V578.56c0 16.896-13.824 30.72-30.72 30.72zM688.64 609.28c-16.896 0-30.72-13.824-30.72-30.72V269.568c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72V578.56c0 16.896-13.568 30.72-30.72 30.72z" fill="#f18709" p-id="8251"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/point.svg b/src/views/LinkUp/images/point.svg
new file mode 100644
index 0000000..1f36c77
--- /dev/null
+++ b/src/views/LinkUp/images/point.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735550536607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17279" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M434.656 346.656v205.344q0 3.136 0.64 6.24 0.608 3.104 1.792 6.016 1.216 2.88 2.976 5.536 1.76 2.592 3.968 4.832 2.24 2.24 4.864 3.968 2.624 1.76 5.536 2.976 2.88 1.216 5.984 1.824 3.104 0.608 6.24 0.608 3.168 0 6.24-0.64 3.104-0.576 6.016-1.792 2.912-1.216 5.536-2.976 2.624-1.728 4.832-3.968 2.24-2.24 4-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.824-6.016 0.64-3.104 0.64-6.24v-205.344q0-36.448-25.792-62.208-25.792-25.792-62.24-25.792t-62.208 25.792q-25.792 25.76-25.792 62.208v205.344q0 3.136 0.64 6.24 0.608 3.104 1.792 6.016 1.216 2.88 2.976 5.536 1.76 2.592 3.968 4.832 2.24 2.24 4.864 3.968 2.624 1.76 5.536 2.976 2.88 1.216 5.984 1.824 3.104 0.608 6.24 0.608 3.168 0 6.24-0.64 3.104-0.576 6.016-1.792 2.912-1.216 5.536-2.976 2.624-1.728 4.832-3.968 2.24-2.24 4-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.824-6.016 0.64-3.104 0.64-6.24v-205.344q0-9.92 7.008-16.96 7.04-7.04 16.96-7.04 9.952 0 16.96 7.04 7.04 7.04 7.04 16.96z" fill="#F18709" p-id="17280"></path><path d="M386.656 654.656v-121.312q0-3.168-0.608-6.24-0.64-3.104-1.824-6.016-1.184-2.912-2.944-5.536-1.76-2.624-4-4.832-2.24-2.24-4.832-4-2.624-1.76-5.536-2.944-2.912-1.216-6.016-1.824-3.072-0.64-6.24-0.64-3.136 0-6.24 0.64-3.072 0.64-5.984 1.824-2.912 1.184-5.536 2.944-2.624 1.76-4.864 4-2.24 2.24-3.968 4.832-1.76 2.624-2.976 5.536-1.184 2.912-1.792 6.016-0.64 3.072-0.64 6.24v121.312q0 102.176 72.256 174.4 72.256 72.288 174.4 72.288h18.688q102.176 0 174.4-72.256 72.256-72.256 72.256-174.4v-121.344q0-3.168-0.608-6.24-0.64-3.104-1.824-6.016-1.184-2.912-2.944-5.536-1.76-2.624-4-4.832-2.24-2.24-4.832-4-2.624-1.76-5.536-2.944-2.912-1.216-6.016-1.824-3.072-0.64-6.24-0.64-3.136 0-6.24 0.64-3.072 0.64-5.984 1.824-2.912 1.184-5.536 2.944-2.624 1.76-4.864 4-2.24 2.24-3.968 4.832-1.76 2.624-2.976 5.536-1.184 2.912-1.792 6.016-0.64 3.072-0.64 6.24v121.312q0 75.68-53.504 129.184-53.504 53.504-129.152 53.504h-18.656q-75.68 0-129.184-53.504-53.504-53.504-53.504-129.184z" fill="#F18709" p-id="17281"></path><path d="M546.656 574.08V608q0 3.136 0.64 6.24 0.608 3.104 1.792 6.016 1.216 2.88 2.976 5.536 1.76 2.592 3.968 4.832 2.24 2.24 4.864 3.968 2.624 1.76 5.536 2.976 2.88 1.216 5.984 1.824 3.104 0.608 6.24 0.608 3.168 0 6.24-0.64 3.104-0.576 6.016-1.792 2.912-1.216 5.536-2.976 2.624-1.728 4.832-3.968 2.24-2.24 4-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.824-6.016 0.64-3.104 0.64-6.24v-93.344q0-36.448-25.792-62.208-25.792-25.792-62.24-25.792t-62.208 25.792q-25.792 25.76-25.792 62.208V608q0 3.136 0.64 6.24 0.608 3.104 1.792 6.016 1.216 2.88 2.976 5.536 1.76 2.592 3.968 4.832 2.24 2.24 4.864 3.968 2.624 1.76 5.536 2.976 2.88 1.216 5.984 1.824 3.104 0.608 6.24 0.608 3.168 0 6.24-0.64 3.104-0.576 6.016-1.792 2.912-1.216 5.536-2.976 2.624-1.728 4.832-3.968 2.24-2.24 4-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.824-6.016 0.64-3.104 0.64-6.24v-93.344q0-9.92 7.008-16.96 7.04-7.04 16.96-7.04 9.952 0 16.96 7.04 7.04 7.04 7.04 16.96v59.392z" fill="#F18709" p-id="17282"></path><path d="M658.656 574.08V608q0 3.136 0.64 6.24 0.608 3.104 1.792 6.016 1.216 2.88 2.976 5.536 1.76 2.592 3.968 4.832 2.24 2.24 4.864 3.968 2.624 1.76 5.536 2.976 2.88 1.216 5.984 1.824 3.104 0.608 6.24 0.608 3.168 0 6.24-0.64 3.104-0.576 6.016-1.792 2.912-1.216 5.536-2.976 2.624-1.728 4.832-3.968 2.24-2.24 4-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.824-6.016 0.64-3.104 0.64-6.24v-93.344q0-36.448-25.792-62.208-25.792-25.792-62.24-25.792t-62.208 25.792q-25.792 25.76-25.792 62.208V608q0 3.136 0.64 6.24 0.608 3.104 1.792 6.016 1.216 2.88 2.976 5.536 1.76 2.592 3.968 4.832 2.24 2.24 4.864 3.968 2.624 1.76 5.536 2.976 2.88 1.216 5.984 1.824 3.104 0.608 6.24 0.608 3.168 0 6.24-0.64 3.104-0.576 6.016-1.792 2.912-1.216 5.536-2.976 2.624-1.728 4.832-3.968 2.24-2.24 4-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.824-6.016 0.64-3.104 0.64-6.24v-93.344q0-9.92 7.008-16.96 7.04-7.04 16.96-7.04 9.952 0 16.96 7.04 7.04 7.04 7.04 16.96v59.392z" fill="#F18709" p-id="17283"></path><path d="M770.656 574.08V608q0 3.136 0.64 6.24 0.608 3.104 1.792 6.016 1.216 2.88 2.976 5.536 1.76 2.592 3.968 4.832 2.24 2.24 4.864 3.968 2.624 1.76 5.536 2.976 2.88 1.216 5.984 1.824 3.104 0.608 6.24 0.608 3.168 0 6.24-0.64 3.104-0.576 6.016-1.792 2.912-1.216 5.536-2.976 2.624-1.728 4.832-3.968 2.24-2.24 4-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.824-6.016 0.64-3.104 0.64-6.24v-93.344q0-36.448-25.792-62.208-25.792-25.792-62.24-25.792t-62.208 25.792q-25.792 25.76-25.792 62.208V608q0 3.136 0.64 6.24 0.608 3.104 1.792 6.016 1.216 2.88 2.976 5.536 1.76 2.592 3.968 4.832 2.24 2.24 4.864 3.968 2.624 1.76 5.536 2.976 2.88 1.216 5.984 1.824 3.104 0.608 6.24 0.608 3.168 0 6.24-0.64 3.104-0.576 6.016-1.792 2.912-1.216 5.536-2.976 2.624-1.728 4.832-3.968 2.24-2.24 4-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.824-6.016 0.64-3.104 0.64-6.24v-93.344q0-9.92 7.008-16.96 7.04-7.04 16.96-7.04 9.952 0 16.96 7.04 7.04 7.04 7.04 16.96v59.392z" fill="#F18709" p-id="17284"></path><path d="M202.112 280.736Q192 312.768 192 346.656q0 3.168 0.64 6.24 0.576 3.104 1.792 6.016 1.216 2.912 2.976 5.536 1.728 2.624 3.968 4.832 2.24 2.24 4.832 4 2.624 1.76 5.536 2.944 2.912 1.216 6.016 1.824 3.104 0.64 6.24 0.64t6.24-0.64q3.104-0.64 6.016-1.824 2.88-1.184 5.536-2.944 2.592-1.76 4.832-4 2.24-2.24 3.968-4.832 1.76-2.624 2.976-5.536 1.216-2.912 1.824-6.016 0.608-3.072 0.608-6.24 0-24 7.168-46.656 7.744-24.512 23.104-45.28 21.568-29.12 53.664-45.664Q373.12 192 410.656 192q37.6 0 70.72 17.056 32.128 16.544 53.696 45.664 15.36 20.8 23.104 45.28 7.168 22.656 7.168 46.656 0 3.168 0.608 6.24 0.64 3.104 1.824 6.016 1.216 2.912 2.944 5.536 1.76 2.624 4 4.832 2.24 2.24 4.832 4 2.624 1.76 5.536 2.944 2.912 1.216 6.016 1.824 3.072 0.64 6.24 0.64 3.136 0 6.24-0.64 3.072-0.64 5.984-1.824 2.912-1.184 5.536-2.944 2.624-1.76 4.864-4 2.24-2.24 3.968-4.832 1.76-2.624 2.944-5.536 1.216-2.912 1.856-6.016 0.608-3.072 0.608-6.24 0-33.888-10.144-65.92-10.976-34.72-32.704-64.096-30.432-41.088-75.808-64.448Q463.776 128 410.656 128t-100.032 24.192Q265.28 175.552 234.88 216.64q-21.76 29.376-32.736 64.096z" fill="#F18709" p-id="17285"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/shandian.svg b/src/views/LinkUp/images/shandian.svg
new file mode 100644
index 0000000..aa5ed3b
--- /dev/null
+++ b/src/views/LinkUp/images/shandian.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735809341577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7950" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M395.765333 586.570667h-171.733333c-22.421333 0-37.888-22.442667-29.909333-43.381334L364.768 95.274667A32 32 0 0 1 394.666667 74.666667h287.957333c22.72 0 38.208 23.018667 29.632 44.064l-99.36 243.882666h187.050667c27.509333 0 42.186667 32.426667 24.042666 53.098667l-458.602666 522.56c-22.293333 25.408-63.626667 3.392-54.976-29.28l85.354666-322.421333z" fill="#333333" p-id="7951"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/shujuyuan.svg b/src/views/LinkUp/images/shujuyuan.svg
new file mode 100644
index 0000000..5104cbd
--- /dev/null
+++ b/src/views/LinkUp/images/shujuyuan.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747457553845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9126" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M420.228414 387.142621c123.303724 0 251.409655-25.423448 328.386207-73.939862v88.381793h71.291586V207.942621C819.906207 91.559724 613.976276 28.742621 420.193103 28.742621 226.480552 28.742621 20.585931 91.559724 20.585931 207.977931v528.242759c0 116.382897 205.894621 179.2 399.642483 179.2v-66.948414c-203.458207 0-328.386207-65.394759-328.386207-112.286897V577.324138c76.976552 48.481103 205.117793 73.939862 328.386207 73.939862v-66.948414c-203.458207 0-328.386207-65.394759-328.386207-112.251586v-158.896552c76.976552 48.516414 205.082483 73.975172 328.386207 73.975173z m0-291.416276c203.458207 0 328.386207 65.359448 328.386207 112.216276 0 46.892138-124.928 112.251586-328.386207 112.251586-203.458207 0-328.386207-65.359448-328.386207-112.251586 0-46.856828 124.928-112.216276 328.386207-112.216276zM739.751724 423.724138c-176.975448 0-269.594483 63.947034-269.594483 127.117241v339.438345c0 63.205517 92.619034 127.117241 269.594483 127.117242 175.633655 0 268.111448-62.993655 269.488552-125.704828h0.070621v-340.850759c0-63.170207-92.583724-127.117241-269.559173-127.117241z m0 66.948414c130.789517 0 198.267586 42.195862 198.267586 60.168827 0 18.008276-67.442759 60.168828-198.267586 60.168828s-198.302897-42.160552-198.302896-60.168828 67.478069-60.168828 198.302896-60.168827z m0 459.740689c-130.824828 0-198.302897-42.160552-198.302896-60.133517v-81.037241c45.232552 23.057655 111.616 38.417655 198.302896 38.417655 86.651586 0 153.035034-15.36 198.267586-38.417655v81.037241c0 18.008276-67.442759 60.168828-198.267586 60.168828z m0-169.701517c-130.824828 0-198.302897-42.160552-198.302896-60.168827v-81.037242c45.232552 23.092966 111.616 38.488276 198.302896 38.488276 86.651586 0 153.035034-15.39531 198.267586-38.488276v81.072552c0 17.972966-67.442759 60.133517-198.267586 60.133517z" fill="#f18709" p-id="9127"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/success.svg b/src/views/LinkUp/images/success.svg
new file mode 100644
index 0000000..0703c18
--- /dev/null
+++ b/src/views/LinkUp/images/success.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736243765009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4547" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="4548"></path><path d="M955.733333 512c0 245.077333-198.656 443.733333-443.733333 443.733333S68.266667 757.077333 68.266667 512 266.922667 68.266667 512 68.266667s443.733333 198.656 443.733333 443.733333z" fill="#62D46A" p-id="4549" data-spm-anchor-id="a313x.search_index.0.i3.72a33a81KEISlk" class="selected"></path><path d="M512 102.4C285.7984 102.4 102.4 285.7984 102.4 512s183.3984 409.6 409.6 409.6 409.6-183.3984 409.6-409.6S738.2016 102.4 512 102.4zM34.133333 512C34.133333 248.081067 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512z" fill="#62D46A" p-id="4550" data-spm-anchor-id="a313x.search_index.0.i6.72a33a81KEISlk" class=""></path><path d="M787.114667 339.285333a51.2 51.2 0 0 1 0 72.362667l-307.2 307.2a51.2 51.2 0 0 1-72.362667 0l-170.666667-170.666667a51.2 51.2 0 0 1 72.362667-72.362666L443.733333 610.235733l271.018667-271.018666a51.2 51.2 0 0 1 72.362667 0z" fill="#FFFFFF" p-id="4551" data-spm-anchor-id="a313x.search_index.0.i4.72a33a81KEISlk" class=""></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/target.svg b/src/views/LinkUp/images/target.svg
new file mode 100644
index 0000000..1586717
--- /dev/null
+++ b/src/views/LinkUp/images/target.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736413244116" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8878" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0C300.8 0 128 172.8 128 384c0 198.4 224 416 358.4 601.6 12.8 19.2 38.4 19.2 51.2 0C672 800 896 582.4 896 384c0-211.2-172.8-384-384-384z m12.8 902.4c-6.4 6.4-12.8 6.4-19.2 0-19.2-25.6-44.8-57.6-70.4-89.6C320 672 192 512 192 384c0-179.2 140.8-320 320-320s320 140.8 320 320c0 128-128 288-243.2 428.8-19.2 32-44.8 57.6-64 89.6z" p-id="8879" fill="#f57703"></path><path d="M512 192C403.2 192 320 275.2 320 384s83.2 192 192 192 192-83.2 192-192-83.2-192-192-192z m0 320c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z" p-id="8880" fill="#f57703"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/time.svg b/src/views/LinkUp/images/time.svg
new file mode 100644
index 0000000..64fbc75
--- /dev/null
+++ b/src/views/LinkUp/images/time.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735550391762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10403" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M553 186.4v-84h204.8c22.5 0 41-18.4 41-41 0-22.5-18.4-41-41-41H266.2c-22.5 0-41 18.4-41 41 0 22.5 18.4 41 41 41H471v84C264 207 102.4 381.5 102.4 593.9c0 226.2 183.4 409.6 409.6 409.6s409.6-183.4 409.6-409.6c0-212.4-161.7-387-368.6-407.5z m-41 735.2c-180.7 0-327.7-147-327.7-327.7s147-327.7 327.7-327.7 327.7 147 327.7 327.7-147 327.7-327.7 327.7z" p-id="10404" fill="#ffffff"></path><path d="M532.5 556.5V368.6c0-22.5-18.4-41-41-41s-41 18.4-41 41v204.8c0 0.3 0.1 0.5 0.1 0.7 0 2.4 0.3 4.9 0.7 7.3 0.2 0.9 0.5 1.7 0.8 2.6 0.5 1.7 0.9 3.5 1.6 5.2 0.2 0.5 0.5 1 0.8 1.5 2 4.2 4.5 8.2 8 11.6l173.8 173.8c15.9 15.9 42 15.9 57.9 0 15.9-15.9 15.9-42 0-57.9L532.5 556.5z" p-id="10405" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/wei.svg b/src/views/LinkUp/images/wei.svg
new file mode 100644
index 0000000..3a9c713
--- /dev/null
+++ b/src/views/LinkUp/images/wei.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736243875455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7340" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 512C0 794.756129 229.243871 1024 512 1024 794.756129 1024 1024 794.756129 1024 512 1024 229.243871 794.756129 0 512 0 229.243871 0 0 229.243871 0 512z m307.2-64.016516h409.6c34.122323 0 51.2 17.077677 51.2 51.2 0 34.155355-17.077677 51.2-51.2 51.2H307.2c-34.122323 0-51.2-17.044645-51.2-51.2 0-34.122323 17.077677-51.2 51.2-51.2z" fill="#bfbfbf" p-id="7341"></path></svg>
\ No newline at end of file
diff --git a/src/views/LinkUp/images/全屏.png b/src/views/LinkUp/images/全屏.png
new file mode 100644
index 0000000..6bab616
Binary files /dev/null and b/src/views/LinkUp/images/全屏.png differ
diff --git a/src/views/LinkUp/index.vue b/src/views/LinkUp/index.vue
new file mode 100644
index 0000000..f02764f
--- /dev/null
+++ b/src/views/LinkUp/index.vue
@@ -0,0 +1,1156 @@
+<template>
+  <div v-loading="maskLoading">
+    <div flex style="height: 100%; padding: 0 10px; background: #fff">
+      <base-layout
+        :defaultButtonSwitch="false"
+        title="项目分类"
+        :queryShow="false"
+        ref="treeLayout"
+        class="fenlei"
+      >
+        <div
+          slot="main"
+          style="overflow: auto; height: calc(100vh - 150px) !important"
+        >
+          <div class="addBtn" @click="classifyFuncBtn()">
+            <i class="el-icon-plus"></i>
+          </div>
+          <div
+            v-for="(item, index) in classifyList"
+            :key="index"
+            flex
+            class="classifyBox"
+            @click="listClick(item)"
+            :class="{ active: item.id == projectClassificationID }"
+          >
+            <i class="el-icon-folder"></i>
+            <div class="classifyName" flex>
+              <p>{{ item.name }}</p>
+            </div>
+            <div class="treeItemBtn" v-if="item.id != '1'">
+              <el-button
+                type="text"
+                size="mini"
+                icon="el-icon-edit"
+                @click.stop="editProjectClassification(item)"
+                style="color: #333"
+              >
+              </el-button>
+              <el-button
+                type="text"
+                size="mini"
+                icon="el-icon-delete"
+                @click.stop="deleteProjectClassification(item)"
+                style="color: #ff3b30"
+              >
+              </el-button>
+              <el-button
+                type="text"
+                size="mini"
+                icon="el-icon-coordinate"
+                @click.stop="permissionProjectClassification(item)"
+                style="color: #333"
+              >
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </base-layout>
+      <layout-new
+        ref="layoutNew"
+        @pageChange="pageChange"
+        :showTitle="false"
+        @onFuncBtn="getFuncBtn"
+        :defaultButtonList="defaultButtonList"
+        :fixedButtonList="fixedButtonList"
+        :fixedButton="false"
+        @onFixedBtn="onFixedBtn"
+        :isPage="listSwitchState"
+      >
+        <div
+          slot="main"
+          slot-scope="{ tableHeight }"
+          style="height: 100%; padding: 0 10px"
+        >
+          <!--        列表显示模式和豆腐块显示模式-->
+          <template v-if="listSwitchState">
+            <base-table
+              ref="customtable"
+              :border="true"
+              :showIndex="true"
+              :tableHeight="tableHeight"
+              :tableData="tableData"
+              :tableColumn="tableColumn"
+              :slotrow="false"
+            >
+              <!-- 触发方式 -->
+              <template #triggerModeId="{ row }">
+                <div v-if="row.triggerModeId == 2">定时触发</div>
+                <div v-else-if="row.triggerModeId == 1">应用程序触发</div>
+                <div v-else-if="row.triggerModeId == 3">手动触发</div>
+                <div v-else-if="row.triggerModeId == 4">Webhook触发</div>
+              </template>
+              <!-- 发布状态 -->
+              <template #isPublic="{ row }">
+                <div
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  "
+                >
+                  <div
+                    class="label_class"
+                    :style="{
+                      'border-color': itemColor4(row) + '!important',
+                      color: itemColor(row),
+                      backgroundColor: itemColor2(row),
+                    }"
+                  >
+                    {{ itemText(row) }}
+                  </div>
+                </div>
+              </template>
+              <template #operate="{ row }">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="配置"
+                  placement="top"
+                >
+                  <i
+                    class="el-icon-setting"
+                    style="
+                      color: #000;
+                      font-size: 12px;
+                      padding: 5px;
+                      background-color: #ebebeb;
+                      border-radius: 4px;
+                      margin-right: 2px;
+                    "
+                    @click="settingHandle(row)"
+                  />
+                </el-tooltip>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="删除当前行"
+                  placement="top"
+                >
+                  <i
+                    class="el-icon-delete"
+                    style="
+                      color: red;
+                      font-size: 12px;
+                      margin-left: 2px;
+                      padding: 5px;
+                      background-color: #ebebeb;
+                      border-radius: 4px;
+                      margin-right: 2px;
+                    "
+                    @click="deleChunkData(row)"
+                  />
+                </el-tooltip>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="查看"
+                  placement="top"
+                >
+                  <i
+                    class="el-icon-view"
+                    style="
+                      color: #000;
+                      font-size: 12px;
+                      padding: 5px;
+                      margin-left: 2px;
+                      background-color: #ebebeb;
+                      border-radius: 4px;
+                    "
+                    @click="viewChunkData(row)"
+                  />
+                </el-tooltip>
+              </template>
+            </base-table>
+          </template>
+          <template v-else>
+            <div class="diamondChunk" ref="workBox">
+              <div class="diamondList">
+                <div
+                  class="diamondItem"
+                  v-for="(item, index) in tableData"
+                  :key="index"
+                  :style="'max-width:' + listMaxWidth + 'px'"
+                  style="position: relative"
+                >
+                  <div class="tableInfo">
+                    <div class="leftAva">
+                      <template>
+                        <div class="imgBox">
+                          <img
+                            src="./images/pingtai.svg"
+                            v-if="item.triggerModeId == 2"
+                          />
+                          <img
+                            src="./images/naozhong.svg"
+                            v-else-if="item.triggerModeId == 1"
+                          />
+                          <img
+                            src="./images/api.svg"
+                            v-else-if="item.triggerModeId == 4"
+                          />
+                          <img
+                            src="./images/point.svg"
+                            v-else-if="item.triggerModeId == 3"
+                          />
+                        </div>
+                      </template>
+                      <div class="middleBox">
+                        <i
+                          class="el-icon-caret-right caretBox"
+                          v-if="item.stepCount && item.stepCount >= 0"
+                        ></i>
+                        <div class="caretCount" v-if="item.stepCount > 0">
+                          {{ "+" + item.stepCount }}
+                        </div>
+                        <i
+                          class="el-icon-caret-right caretBox"
+                          v-if="item.stepCount > 0 || item.lastAppIconUrl"
+                        ></i>
+                      </div>
+
+                      <template
+                        v-if="
+                          item.lastAppIconUrl && item.lastAppIconUrl != null
+                        "
+                      >
+                        <div class="lastAppImg">
+                          <img
+                            :src="
+                              item.lastAppIconUrl
+                                ? item.lastAppIconUrl.split('/wwwroot')[1]
+                                : ''
+                            "
+                          />
+                        </div>
+                      </template>
+                      <template
+                        v-if="!item.lastAppIconUrl && item.stepCount >= 0"
+                      >
+                        <i class="el-icon-caret-right caretBox"></i>
+                        <div class="imgBox">
+                          <img src="./images/huaO.svg" />
+                        </div>
+                      </template>
+                    </div>
+                  </div>
+                  <div class="ruler" style="margin-top: 10px">
+                    <!-- 场景名称 -->
+                    <div class="value" style="font-weight: bold">
+                      {{ item.name }}
+                    </div>
+                  </div>
+                  <div class="ruler">
+                    <!-- 场景描述 -->
+                    <div class="value" style="color: #999999">
+                      {{ item.description }}
+                    </div>
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      position: absolute;
+                      right: 10px;
+                      top: 20px;
+                    "
+                  >
+                    <div
+                      class="label_class"
+                      :style="{
+                        'border-color': itemColor4(item) + '!important',
+                        color: itemColor(item),
+                        backgroundColor: itemColor2(item),
+                      }"
+                    >
+                      {{ itemText(item) }}
+                    </div>
+                  </div>
+                  <div class="shadowBox">
+                    <div @click="settingHandle(item)">
+                      <div class="icon">
+                        <i class="el-icon-setting"></i>
+                      </div>
+                      <div class="iconname">配置</div>
+                    </div>
+                    <div @click="deleChunkData(item)">
+                      <div class="icon">
+                        <i class="el-icon-delete" style="color: red"></i>
+                      </div>
+                      <div class="iconname" style="color: red">删除</div>
+                    </div>
+                    <div @click="viewChunkData(item)">
+                      <div class="icon">
+                        <i class="el-icon-view"></i>
+                      </div>
+                      <div class="iconname">查看</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div slot="fixedButton" style="margin-left: 10px">
+          <div class="iconSwitchBox">
+            <div
+              class="iconSwitch"
+              :style="{ background: !listSwitchState ? '#fff' : '#f5f5f5' }"
+              @click="onFixedBtn(false)"
+            >
+              <span class="icon el-icon-menu"></span>
+            </div>
+            <div
+              class="iconSwitch"
+              :style="{ background: listSwitchState ? '#fff' : '#f5f5f5' }"
+              @click="onFixedBtn(true)"
+            >
+              <span class="icon el-icon-tickets"></span>
+            </div>
+          </div>
+        </div>
+        <div slot="searchListNew" style="display: flex; padding: 0 5px">
+          <el-input
+            v-model="searchObj.name"
+            placeholder="场景名称"
+            clearable
+            style="width: 200px; margin-right: 10px"
+            @keydown.native.enter="searchhanlde"
+          ></el-input>
+          <el-select
+            v-model="searchObj.triggerModeId"
+            @change="searchhanlde"
+            placeholder="请选择触发方式"
+            clearable
+          >
+            <el-option
+              v-for="(item, index) in triggerModeOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </layout-new>
+    </div>
+    <addSence ref="addSence" @examineHandleClose="resetTable"></addSence>
+    <projectClassificationRightDialog
+      ref="projectClassificationRightDialog"
+      @resetTable="resetAll"
+    ></projectClassificationRightDialog>
+    <authorizationDialog
+      ref="authorizationDialog"
+      @resetTable="resetAll"
+    ></authorizationDialog>
+    <addDialogChunk
+      ref="addDialogChunk"
+      @examineHandleClose="resetTable"
+    ></addDialogChunk>
+  </div>
+</template>
+
+<script>
+import baseLayout from "@/components/base/baseLayout";
+import baseTable from "@/components/base/baseTable";
+import layoutNew from "./compoment/baseLayout";
+import { authApi } from "@/api/apis/auth";
+import configData from "./configData";
+import { dynamicWidth, dynamicHeight } from "@/utils/util.js";
+import addSence from "@/views/LinkUp/compoment/addSence.vue";
+import projectClassificationRightDialog from "@/views/projectClassification/rightDialog.vue";
+import authorizationDialog from "@/views/projectClassification/authorizationDialog.vue";
+import addDialogChunk from "./compoment/addDialogChunk.vue";
+export default {
+  components: {
+    baseLayout,
+    layoutNew,
+    baseTable,
+    addSence,
+    projectClassificationRightDialog,
+    authorizationDialog,
+    addDialogChunk,
+  },
+  data() {
+    return {
+      maskLoading: false,
+      classifyList: [],
+      projectClassificationID: "", //项目分类id
+      listMaxWidth: 0,
+      listSwitchState: true,
+      tableData: [],
+      tableColumn: configData.tableColumn,
+      pageModel: {
+        page: 1,
+        limit: 20,
+        total: "",
+      },
+      searchObj: {
+        name: "",
+        triggerModeId: "",
+      },
+      triggerModeOptions: [
+        { label: "应用程序触发", value: 1 },
+        { label: "定时触发", value: 2 },
+        { label: "手动触发", value: 3 },
+        { label: "Webhook触发", value: 4 },
+      ],
+    };
+  },
+  computed: {
+    fixedButtonList() {
+      if (this.listSwitchState) {
+        return [
+          {
+            icon: "el-icon-menu",
+            title: "切换",
+          },
+        ];
+      } else {
+        return [
+          {
+            icon: "el-icon-s-data",
+            title: "切换",
+          },
+        ];
+      }
+    },
+    defaultButtonList() {
+      // const containsAddOperate = this.BtnListData.some(
+      //   (item) => item.nameCN === "新增"
+      // );
+      // if (containsAddOperate) {
+      return [
+        {
+          icon: "el-icon-plus",
+          menuName: "新增",
+        },
+      ];
+      // } else {
+      //   return [];
+      // }
+    },
+  },
+  mounted() {
+    this.openLoading("detail");
+    this.$refs.layoutNew.pageClear();
+    this.GetProductionTableData();
+    this.getTableData();
+  },
+  methods: {
+    // 新增项目分类
+    classifyFuncBtn() {
+      this.$refs.projectClassificationRightDialog.openDialog("add");
+    },
+    // 编辑项目分类
+    editProjectClassification(row) {
+      this.openLoading("detail");
+      this.$refs.projectClassificationRightDialog.openDialog("edit", row);
+    },
+    // 删除项目分类
+    deleteProjectClassification(row) {
+      this.$delConfirm().then(() => {
+        this.openLoading("del");
+        this.productionDeleteById(row.id);
+      });
+    },
+    async productionDeleteById(id) {
+      let param = {
+        id: id,
+      };
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "deleteFlowClass",
+        "",
+        param
+      );
+      if (res.status == "200") {
+        this.$vmNews("删除成功", "success");
+        this.resetAll();
+      }
+    },
+    permissionProjectClassification(row) {
+      this.$refs.authorizationDialog.openDialog(row);
+    },
+    resetAll() {
+      this.pageModel.page = 1;
+      this.projectClassificationID = "";
+      this.$refs.layoutNew.pageClear();
+      this.GetProductionTableData();
+      this.getTableData();
+    },
+    // 获取项目分类
+    async GetProductionTableData() {
+      let param = {};
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "queryListJson",
+        "",
+        param
+      );
+      if (res.status == "200") {
+        this.classifyList = res.attribute;
+        this.classifyList.unshift({
+          id: "1",
+          name: "全部分类",
+        });
+      }
+    },
+    // 点击左侧
+    listClick(item) {
+      this.projectClassificationID = item.id;
+      this.getTableData();
+    },
+    // 查询、筛选事件
+    pageChange(model) {
+      this.pageModel.page = model.page;
+      this.pageModel.limit = model.limit;
+      this.$refs.customtable.clearRadioIndex();
+      this.getTableData();
+    },
+    // 按钮点击事件
+    getFuncBtn(btnEven) {
+      if (btnEven.menuName == "新增") {
+        // this.$refs.addDialogChunk.openDialog(
+        //   "-4252471217359269890",
+        //   "3-33003",
+        //   "add",
+        //   3
+        // );
+
+        this.$refs.addSence.openDialog("", "add", this.projectClassificationID);
+      }
+    },
+    //hyt 2024/08/14 切换豆腐块
+    onFixedBtn(flag) {
+      this.$refs.layoutNew.pageClear();
+      this.pageModel.page = 1;
+      this.listSwitchState = flag;
+      if (!this.listSwitchState) {
+        this.pageModel.limit = 9999;
+        localStorage.setItem("listSwitchState", "true");
+      } else {
+        this.pageModel.limit = 20;
+        localStorage.removeItem("listSwitchState");
+      }
+      this.getTableData();
+    },
+    //配置方法
+    settingHandle(row) {
+      this.$refs.addDialogChunk.openDialog(
+        row.id,
+        row.name,
+        "edit",
+        row.triggerModeId
+      );
+    },
+    // 查看
+    viewChunkData(row) {
+      this.$refs.viewDialogChunk.openDialog(
+        row.id,
+        row.name,
+        row.triggerModeId,
+        row
+      );
+    },
+    // 豆腐块删除事件
+    deleChunkData(item) {
+      this.$delConfirm().then((res) => {
+        let params = {
+          id: item.id,
+        };
+        this.deleteSence(params);
+      });
+    },
+    async deleteSence(params) {
+      let res = await authApi("sysFlowService", "", "deleteFlow", "", params);
+
+      if (res.status == "200") {
+        this.$vmNews("删除成功！", "success");
+        this.resetTable();
+      }
+    },
+    resetTable() {
+      this.pageModel.page = 1;
+      this.getTableData();
+      this.$nextTick(() => {
+        this.$refs.layoutNew.setPageNum(1);
+      });
+    },
+    searchhanlde() {
+      this.pageModel.page = 1;
+      if (this.listSwitchState) {
+        this.$refs.layoutNew.pageClear();
+      }
+      this.getTableData();
+    },
+    // 获得表格数据
+    async getTableData() {
+      this.maskLoading = true;
+      let params = {
+        ...this.searchObj,
+        pageNum: this.pageModel.page,
+        pageSize: this.pageModel.limit,
+        classId: this.projectClassificationID,
+      };
+      if (params.classId == "1") {
+        params.classId = "";
+      }
+      setTimeout(() => {
+        this.maskLoading = false;
+      }, 20000);
+      let res = await authApi(
+        "sysFlowService",
+        "",
+        "queryFlowPagedInfo",
+        "",
+        params
+      );
+
+      if (res.status == "200") {
+        this.$nextTick(() => {
+          this.$refs.layoutNew.setPageTotal(res.attribute.total);
+          this.pageModel.total = res.attribute.total;
+        });
+        this.tableData = res.attribute.list;
+        this.maskLoading = false;
+        this.$nextTick(() => {
+          this.watchSize();
+        });
+      }
+    },
+    watchSize() {
+      if (!this.listSwitchState) {
+        let boxWidth = this.$refs.workBox.offsetWidth - 6;
+        let listMaxWidth = dynamicWidth(boxWidth, 400, 10);
+        this.listMaxWidth = listMaxWidth;
+      }
+    },
+    itemColor(val) {
+      if (val.isPublic == 1) {
+        return "#0EA63C";
+      } else {
+        return "#333";
+      }
+    },
+    itemColor2(val) {
+      if (val.isPublic == 1) {
+        return "#f9fdf0";
+      } else {
+        return "#f4f4f4";
+      }
+    },
+    itemColor4(val) {
+      if (val.isPublic == 1) {
+        return "#0EA63C";
+      } else {
+        return "#C9C9C9";
+      }
+    },
+    itemText(val) {
+      if (val.isPublic == 1) {
+        return "已发布";
+      } else {
+        return "未发布";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$activeColor: var(--bg-color, #55aaff);
+
+.classifyBox {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+  align-items: center;
+  display: flex;
+  position: relative;
+  i {
+    vertical-align: middle;
+  }
+  .el-icon-folder {
+    vertical-align: middle;
+  }
+  .classifyName {
+    margin-left: 0.3125rem;
+  }
+  .treeItemBtn {
+    position: absolute;
+    right: 5px;
+    display: none;
+  }
+  &:hover {
+    .treeItemBtn {
+      display: block;
+    }
+  }
+}
+.classifyBox:hover {
+  background-color: rgb(238, 245, 254);
+  cursor: pointer;
+  // text-decoration: underline;
+}
+
+.classifyBox.active {
+  background-color: rgb(238, 245, 254);
+}
+
+.fenlei {
+  width: 260px;
+  min-width: 260px;
+  border-right: 1px solid #ededed;
+  padding-right: 5px;
+  position: relative;
+}
+
+// -----------------------
+.labelStateName {
+  padding: 2px 8px;
+  border-radius: 2px;
+  color: #fff;
+  background: #3876ee;
+  margin-left: 5px;
+}
+
+> .el-dialog--center .el-dialog__body {
+  padding-top: 0 !important;
+}
+
+.diamondChunk {
+  height: calc(100vh - 140px);
+  overflow: auto;
+
+  .diamondList {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .diamondItem {
+      min-width: 400px;
+      height: 160px;
+      border-radius: 8px;
+      border: 1px solid #e5e5e5;
+      margin: 10px 5px;
+      padding: 20px 10px;
+      position: relative;
+      flex: 1;
+
+      .tableInfo {
+        display: flex;
+        //align-items: center;
+        justify-content: flex-start;
+
+        .leftAva {
+          // width: 44px;
+          // height: 44px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+        .lastAppImg {
+          width: 44px;
+          height: 44px;
+
+          img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+          }
+        }
+        .caretBox {
+          color: #d8d8d8;
+          margin-right: 10px;
+        }
+        .imgBox {
+          margin-right: 10px;
+          width: 44px;
+          height: 44px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid #f18709;
+
+          img {
+            width: 60%;
+            height: 60%;
+          }
+        }
+
+        .rightInfo {
+          flex: 1;
+          margin-left: 15px;
+
+          .infotitle {
+            display: flex;
+            align-items: center;
+            font-size: 18px;
+            color: #333;
+            align-items: center;
+
+            .text {
+              display: -webkit-box;
+              /*作为弹性伸缩盒子模型显示。*/
+              -webkit-box-orient: vertical;
+              /*作为弹性伸缩盒子模型显示。*/
+              -webkit-line-clamp: 1; //*显示的行*/
+              overflow: hidden;
+              /*溢出隐藏*/
+              /* 对于连字情况或者纯字母，可以解决 */
+              word-break: break-all;
+              max-width: 100px;
+            }
+
+            .classify {
+              margin-left: 10px;
+              height: 16px;
+              background: #fff;
+              border-radius: 2px;
+              font-size: 12px;
+              color: #ff8b0f;
+              text-align: center;
+              border: 1px solid #ff8b0f;
+              padding: 0 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              min-width: 30px;
+              max-width: 100px;
+            }
+          }
+
+          .switchList {
+            margin-top: 9px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            > div {
+              color: #999;
+              font-size: 14px;
+              display: flex;
+              align-items: center;
+              flex: 1;
+
+              .littletitle {
+                width: 60px;
+                text-align: right;
+                margin-right: 10px;
+              }
+
+              .value {
+                flex: 1;
+              }
+
+              &:nth-child(2) {
+                flex: 0.7;
+              }
+            }
+          }
+
+          .infoChunk {
+            margin-top: 9px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            > div {
+              color: #999;
+              font-size: 14px;
+              display: flex;
+              align-items: center;
+              flex: 1;
+
+              .littletitle {
+                width: 60px;
+                text-align: right;
+                margin-right: 10px;
+              }
+
+              .value {
+                flex: 1;
+                display: -webkit-box;
+                /*作为弹性伸缩盒子模型显示。*/
+                -webkit-box-orient: vertical;
+                /*作为弹性伸缩盒子模型显示。*/
+                -webkit-line-clamp: 1; //*显示的行*/
+                overflow: hidden;
+                /*溢出隐藏*/
+                /* 对于连字情况或者纯字母，可以解决 */
+                word-break: break-all;
+              }
+
+              &:nth-child(2) {
+                flex: 0.7;
+              }
+            }
+          }
+        }
+      }
+
+      .ruler {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        margin-top: 5px;
+
+        .rulerTitle {
+          width: 60px;
+          color: #999;
+          margin-right: 10px;
+        }
+
+        .value {
+          flex: 1;
+          color: #333;
+          display: -webkit-box;
+          /*作为弹性伸缩盒子模型显示。*/
+          -webkit-box-orient: vertical;
+          /*作为弹性伸缩盒子模型显示。*/
+          -webkit-line-clamp: 2; //*显示的行*/
+          overflow: hidden;
+          /*溢出隐藏*/
+          /* 对于连字情况或者纯字母，可以解决 */
+          word-break: break-all;
+        }
+      }
+
+      .functionContent {
+        display: flex;
+        font-size: 14px;
+        margin-top: 5px;
+
+        .functionTitle {
+          width: 60px;
+          color: #999;
+          margin-right: 10px;
+        }
+
+        .value {
+          flex: 1;
+          color: #333;
+          display: -webkit-box;
+          /*作为弹性伸缩盒子模型显示。*/
+          -webkit-box-orient: vertical;
+          /*作为弹性伸缩盒子模型显示。*/
+          -webkit-line-clamp: 2; //*显示的行*/
+          overflow: hidden;
+          /*溢出隐藏*/
+          /* 对于连字情况或者纯字母，可以解决 */
+          word-break: break-all;
+        }
+      }
+
+      .shadowBox {
+        display: none;
+        width: 100%;
+        height: 80px;
+        background: #000000;
+        border-radius: 0px 0px 8px 8px;
+        opacity: 0.7;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        > div {
+          .icon {
+            font-size: 22px;
+          }
+        }
+      }
+
+      &:hover {
+        .shadowBox {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          > div {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: #fff;
+            font-size: 14px;
+            cursor: pointer;
+            margin: 0 10%;
+
+            .iconname {
+              margin-top: 7px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.middleBox {
+  display: flex;
+  align-items: center;
+
+  .caretCount {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    margin-right: 10px;
+    background: #f2f2f2;
+    color: #333333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+  }
+}
+.switchList {
+  margin-top: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  > div {
+    color: #999;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    .littletitle {
+      width: 60px;
+      text-align: right;
+      margin-right: 10px;
+    }
+
+    .value {
+      flex: 1;
+    }
+
+    &:nth-child(2) {
+      flex: 0.7;
+    }
+  }
+}
+
+.switchListTwo {
+  margin-top: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  > div {
+    color: #999;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+
+    .littletitle {
+      text-align: left;
+      margin-right: 10px;
+    }
+
+    .value {
+    }
+  }
+}
+
+.textChunk {
+  display: -webkit-box;
+  /*作为弹性伸缩盒子模型显示。*/
+  -webkit-box-orient: vertical;
+  /*作为弹性伸缩盒子模型显示。*/
+  -webkit-line-clamp: 1; //*显示的行*/
+  overflow: hidden;
+  /*溢出隐藏*/
+  /* 对于连字情况或者纯字母，可以解决 */
+  word-break: break-all;
+  max-width: 100px;
+}
+
+.classify {
+  margin-left: 5px;
+  height: 16px;
+  background: #fff;
+  border-radius: 2px;
+  font-size: 12px;
+  color: #ff8b0f;
+  text-align: center;
+  border: 1px solid #ff8b0f;
+  padding: 0 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  max-width: 100px;
+}
+
+/* 切换图标样式 */
+.iconSwitchBox {
+  width: 60px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  padding: 2px;
+  display: flex !important;
+  align-items: center;
+  font-size: 12px !important;
+
+  .iconfont {
+    font-size: 12px !important;
+  }
+}
+
+.iconSwitch {
+  width: 50%;
+  border-radius: 3px;
+  text-align: center;
+  height: 100%;
+  line-height: 28px;
+  cursor: pointer;
+}
+
+/* 标签统一样式 */
+.label_class {
+  height: 22px !important;
+  line-height: 22px !important;
+  padding: 0 7px !important;
+  font-size: 12px !important;
+  border: 1px solid;
+  border-radius: 4px !important;
+  box-sizing: border-box !important;
+  overflow: hidden;
+  width: max-content !important;
+  font-weight: normal;
+}
+
+.addBtn {
+  position: absolute;
+  background: #f5f5f5;
+
+  top: 18px;
+  right: 13px;
+  border-radius: 4px;
+  padding: 3px 5px;
+  font-weight: bold;
+
+  i {
+    font-size: 16px;
+    color: #333;
+    font-weight: bold;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/NIFIConstant/configData.js b/src/views/NIFIConstant/configData.js
new file mode 100644
index 0000000..e18f328
--- /dev/null
+++ b/src/views/NIFIConstant/configData.js
@@ -0,0 +1,149 @@
+/**
+ * @desc NIFI常量
+ * @date 2023-07-10
+ */
+// 表头
+const tableColumnData = [
+  {
+    label: 'key',
+    prop: 'nifiKey'
+  },
+  {
+    label: 'value',
+    prop: 'nifiValue'
+  },
+  {
+    label: '显示值',
+    prop: 'showValue'
+  },
+  {
+    label: '描述',
+    prop: 'description'
+  },
+  {
+    label: '类型',
+    prop: 'type'
+  }
+]
+
+// 基本信息内容
+const formRow = [
+  {
+    elCol: [{
+      label: 'key',
+      prop: 'nifiKey',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: 'value',
+      prop: 'nifiValue',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '显示值',
+      prop: 'showValue',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '描述',
+      prop: 'description',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '类型',
+      prop: 'type',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+]
+
+const basicsRules = {
+  nifiKey: [{
+    required: true,
+    message: '请输入key',
+    trigger: 'blur'
+  }],
+  nifiValue: [{
+    required: true,
+    message: '请输入value',
+    trigger: 'blur'
+  }],
+  showValue: [{
+    required: true,
+    message: '请输入显示值',
+    trigger: 'blur'
+  }],
+  description: [{
+    required: true,
+    message: '请输入描述',
+    trigger: 'blur'
+  }],
+  type: [{
+    required: true,
+    message: '请输入类型',
+    trigger: 'blur'
+  }],
+}
+
+// 查看
+const formRowShow = [
+  {
+    elCol: [{
+      label: 'key',
+      prop: 'nifiKey',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: 'value',
+      prop: 'nifiValue',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '显示值',
+      prop: 'showValue',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '描述',
+      prop: 'description',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '类型',
+      prop: 'type',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+]
+export default {
+  tableColumnData,
+  formRow,
+  basicsRules,
+  formRowShow,
+}
diff --git a/src/views/NIFIConstant/index.vue b/src/views/NIFIConstant/index.vue
new file mode 100644
index 0000000..bcb4296
--- /dev/null
+++ b/src/views/NIFIConstant/index.vue
@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <base-layout
+      ref="baseLayout"
+      :buttonList="buttonList"
+      @onFuncBtn="onFuncBtn"
+      :querySwitch="true"
+      :searchList="requirementList"
+      @search="handleSearchEvent"
+      :isPage="true"
+      @pageChange="handlePageChange"
+    >
+      <div slot="main" slot-scope="{ tableHeight }">
+        <base-table
+          ref="baseTable"
+          :showIndex="true"
+          :funWidth="180"
+          :funData="funData"
+          @onFunc="onFunc"
+          :tabLoading.sync="tabLoading"
+          :tableHeight="tableHeight"
+          :tableData="tableData"
+          :tableColumn="tableColumnData"
+          @onCellClick="onCellClick"
+        >
+          <template #state="{row}">
+            {{ row.state == 0 ? '启用' : '停用'}}
+          </template>
+        </base-table>
+      </div>
+    </base-layout>
+    <right-dialog ref="rightDialog" @resetTable="resetTable"></right-dialog>
+  </div>
+</template>
+
+<script>
+import baseLayout from "@/components/base/baseLayout";
+import baseTable from "@/components/base/baseTable";
+import rightDialog from "./rightDialog";
+import configData from "./configData";
+import { authApi } from "@/api/apis/auth";
+export default {
+  components: {
+    baseLayout,
+    baseTable,
+    rightDialog,
+  },
+  data() {
+    return {
+      buttonList: [
+        {
+          menuName: "新增",
+          icon: "el-icon-plus",
+          btnFunction: "add",
+        },
+        {
+          menuName: "刷新",
+          icon: "el-icon-refresh",
+          btnFunction: "resetLoad",
+        },
+      ], //按钮组
+      requirementList: [
+        {
+          placeholder: "key",
+          prop: "nifiKey",
+          tag: "elInput",
+        },
+        {
+          placeholder: "value",
+          prop: "nifiValue",
+          tag: "elInput",
+        },
+      ], //查询模板list
+      tabLoading: false,
+      tableColumnData: configData.tableColumnData, //表头数据
+      funData: [
+        {
+          color: "#6a9af1",
+          text: "编辑",
+        },
+        {
+          color: "#d67a74",
+          text: "删除",
+        },
+      ],
+      tableData: [], //表格数据
+      pageModel: {
+        pageNum: 1,
+        pageSize: 100,
+      },
+      queryModel: {
+        name: "",
+      },
+    };
+  },
+  mounted() {
+    this.GetProductionTableData();
+  },
+  methods: {
+    onCellClick(row){
+      this.openLoading("detail");
+      this.$refs.rightDialog.openDialog("show", row);
+    },
+    // 表格数据
+    async GetProductionTableData() {
+      this.tabLoading = true;
+      let param = {
+        ...this.pageModel,
+        ...this.queryModel,
+      };
+      let res = await authApi(
+        "sysFlowNifiConstantService",
+        "",
+        "queryPagedJson",
+        "",
+        param
+      );
+      this.tabLoading = false;
+      if (res.status == "200") {
+        this.tableData = res.attribute.list;
+        this.$refs.baseLayout.setPageTotal(res.attribute.total);
+      }
+    },
+    // 分页变化
+    handlePageChange(val) {
+      this.pageModel.pageNum = val.pageIndex;
+      this.pageModel.pageSize = val.pageSize;
+      this.GetProductionTableData();
+    },
+    // 按钮组
+    onFuncBtn(btn) {
+      this[btn.btnFunction]();
+    },
+    // 新增
+    add() {
+      this.$refs.rightDialog.openDialog("add");
+    },
+    // 表格操作事件 查看 重推 删除
+    onFunc(index, row,item) {
+      // 查看
+      if (item.text==='查看') {
+        this.openLoading("detail");
+        this.$refs.rightDialog.openDialog("show", row);
+      }
+      // 重推
+      if (item.text==='编辑') {
+        this.openLoading("detail");
+        this.$refs.rightDialog.openDialog("edit", row);
+      }
+      // 删除
+      if (item.text==='删除') {
+        this.$delConfirm().then(() => {
+          this.openLoading("del");
+          this.productionDeleteById(row.id);
+        });
+      }
+    },
+    async productionDeleteById(id) {
+      let param = {
+        id: id,
+      };
+      let res = await authApi(
+        "sysFlowNifiConstantService",
+        "",
+        "deleteNifiConstant",
+        "",
+        param
+      );
+      if (res.status == "200") {
+        this.$vmNews("删除成功", "success");
+        this.resetTable();
+      }
+    },
+    // 重置表格
+    resetTable() {
+      this.pageModel.pageNum = 1;
+      this.$refs.baseLayout.pageClear();
+      this.GetProductionTableData();
+    },
+    // 搜索
+    handleSearchEvent() {
+      let data = this.$refs.baseLayout.ruleForm;
+      this.queryModel = data;
+      this.resetTable();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.clickTitle {
+  color: #409eff;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/NIFIConstant/rightDialog.vue b/src/views/NIFIConstant/rightDialog.vue
new file mode 100644
index 0000000..bc5d2f9
--- /dev/null
+++ b/src/views/NIFIConstant/rightDialog.vue
@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <base-right-dialog
+      size="1000px"
+      ref="baseRightDialog"
+      :footerShow="true"
+      :dialogVisible.sync="dialogVisible"
+      :title="dialogTitle + ' 项目分类管理'"
+      @handleClose="handleDialogClose"
+      :type="dialogType"
+      :submitShow="submitShow"
+      @handleConfirmClick="handleConfirmClick"
+    >
+      <base-form
+        ref="basicsForm"
+        :formRow="formRow"
+        :isFunBtn="false"
+        :rules="basicsRules"
+        class="dialog_form"
+        :spanWidth="`120px`"
+        :loading="vLoading"
+      >
+      </base-form>
+
+    </base-right-dialog>
+  </div>
+</template>
+
+<script>
+import baseRightDialog from '@/components/base/baseRightDialog'
+import baseForm from '@/components/base/baseNewForm'
+import baseTable from '@/components/base/baseTable'
+import configData from './configData'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  components: {
+    baseRightDialog,
+    baseForm,
+    baseTable,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '',
+      dialogType: '',
+      formRow: configData.formRow,
+      basicsRules: configData.basicsRules,
+      vLoading: false,
+      newMarryOptions: [],
+      submitShow: true,
+      loadingType: true,
+      tableVersionData: [],
+      funData: [],
+      isEdit: false,
+      select_dist: {},
+      plugNameOptions: [],
+      tableColumn: configData.operationTableColumn,//操作记录
+      tableData: []
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    openDialog(type, row) {
+
+      this.formRow = configData.formRow
+      this.submitShow = true
+
+      this.isEdit = false
+      this.funData = []
+
+      // 编辑
+      if (type == 'edit') {
+        this.isEdit = true
+        this.dialogTitle = '编辑'
+        this.dialogType = 'edit'
+        this.productGetById(row.id)
+      }
+      // 查看
+      if (type == 'show') {
+        this.funData = Object.assign([], [])
+        this.submitShow = false
+        this.formRow = configData.formRowShow
+        this.dialogTitle = '查看'
+        this.dialogType = 'show'
+        this.productGetById(row.id)
+
+      }
+      this.dialogVisible = true
+      // 新增
+      if (type == 'add') {
+        this.dialogTitle = '新增'
+        this.dialogType = 'add'
+        this.$nextTick(() => {
+          this.$set(this.$refs.basicsForm.ruleForm, 'state', '0')
+        })
+      }
+
+    },
+    // 编辑详情
+    async productGetById(id) {
+      let params = {
+        id: id
+      }
+      let res = await authApi(
+        'sysFlowNifiConstantService',
+        '',
+        'getNifiConstant',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.$nextTick(() => {
+          this.$refs.basicsForm.incomingParameters(res.attribute)
+        })
+      }
+    },
+    addVersionDialog() {
+      let obj = {
+        argName: '',
+        argCode: '',
+        argType: '1',
+        remark: ''
+      }
+      this.tableVersionData.push(obj)
+    },
+    // 删除
+    onFunc(index, row) {
+      if (index == 0) {
+        this.$delConfirm().then(() => {
+          this.tableVersionData.forEach((item, itemIndex) => {
+            if (item.id === row.id) {
+              this.tableVersionData.splice(itemIndex, 1)
+            }
+          })
+        })
+      }
+    },
+    // 弹窗关闭
+    handleDialogClose() {
+      this.tableVersionData = Object.assign([], [])
+      this.$refs.basicsForm.resetFields()
+      this.dialogVisible = false
+    },
+    // 弹窗确认按钮
+    handleConfirmClick() {
+      this.$refs.basicsForm.$refs['ruleForm'].validate((valid) => {
+        if (!valid) {
+          return
+        } else {
+          let params = {
+            ...this.$refs.basicsForm.ruleForm
+          }
+          if (this.dialogType == 'add') {
+            this.openLoading('submit')
+            this.productSaveDto(params)
+          }
+          if (this.dialogType == 'edit') {
+            this.openLoading('submit')
+            this.productUpdateDto(params)
+          }
+        }
+      })
+    },
+    // 新增保存
+    async productSaveDto(params) {
+      let res = await authApi(
+        'sysFlowNifiConstantService',
+        '',
+        'saveNifiConstant',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.handleDialogClose()
+        this.$vmNews('新增成功', 'success')
+        this.$emit('resetTable')
+      }
+    },
+    // 编辑保存
+    async productUpdateDto(params) {
+      let res = await authApi(
+        'sysFlowNifiConstantService',
+        '',
+        'updateNifiConstant',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.handleDialogClose()
+        this.$vmNews('更新成功', 'success')
+        this.$emit('resetTable')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.small_title {
+  margin: 10px 0;
+  font-size: 16px;
+}
+
+.dialogList {
+  padding: 16px 0;
+  border-top: 1px solid #dcdfe6;
+  display: flex;
+  flex-direction: column;
+}
+
+.updateBtn {
+  border: 1px solid #ebedf1;
+  padding: 5px 0;
+  border-radius: 3px;
+  text-align: center;
+  font-size: 14px;
+  cursor: pointer;
+  width: 100px;
+}
+
+.updateBtn:hover {
+  color: #1890ff;
+  border-color: #badeff;
+  background-color: #e8f4ff;
+}
+
+::v-deep .el-table__body-wrapper.is-scrolling-none {
+  height: auto !important;
+}
+
+::v-deep .app-container {
+  height: auto !important;
+}
+</style>
diff --git a/src/views/applicationList/accountList/accountAdmin.vue b/src/views/applicationList/accountList/accountAdmin.vue
new file mode 100644
index 0000000..54edf68
--- /dev/null
+++ b/src/views/applicationList/accountList/accountAdmin.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="apiWrap">
+    <div class="tablebox">
+      <div class="tablebox">
+        <div class="tablebtn">
+          <div class="search">
+            <el-input
+              placeholder="账号名称"
+              v-model="searchForm.name"
+              @keyup.enter.native="queryAccountList(searchForm)"
+            >
+              <i
+                slot="suffix"
+                class="el-input__icon el-icon-search"
+                @click="queryAccountList(searchForm)"
+              ></i>
+            </el-input>
+          </div>
+          <div class="btn">
+            <el-button
+              icon="el-icon-back"
+              @click="
+                $router.replace({
+                  path: '/applicationList/applicationListAdmin',
+                })
+              "
+              >返回
+            </el-button>
+            <el-button type="primary" @click="goAddHandle" icon="el-icon-plus">
+              添加账号
+            </el-button>
+          </div>
+        </div>
+
+        <!-- 应用账号表格 -->
+        <div class="main">
+          <div class="left">
+            <baseTable
+              ref="mainTable"
+              :tableData="mainTableData"
+              :tableColumn="mainTableColumn"
+              :funData="mainFunData"
+              :funWidth="funWidth"
+              :showIndex="true"
+              :tabLoading="mainTabLoading"
+              @onFunc="tableButtonHandle"
+              @view="viewHandle"
+              :border="false"
+              :tableHeight="'77.5vh'"
+            ></baseTable>
+          </div>
+        </div>
+      </div>
+    </div>
+    <addAccount
+      ref="addAccount"
+      @handleConfirmClick="searchBtnHandle"
+    ></addAccount>
+  </div>
+</template>
+
+<script>
+import baseTable from "@/views/applicationList/apiList/compoments/baseTable.vue";
+import { authApi } from "@/api/apis/auth";
+import addAccount from "./addAccount.vue";
+export default {
+  components: {
+    baseTable,
+    addAccount,
+  },
+  data() {
+    return {
+      // 表格数据
+      mainTableData: [],
+      mainTabLoading: false,
+      // 搜索框输入数据
+      searchForm: {
+        name: "",
+      },
+      // 表格框架
+      mainTableColumn: [
+        {
+          id: "name",
+          title: "账号名称",
+        },
+        {
+          id: "userName",
+          title: "登录账号",
+        },
+        {
+          id: "password",
+          title: "登录密码",
+          width: 180,
+        },
+        {
+          id: "dbType",
+          title: "数据库类型",
+        },
+        {
+          id: "dbName",
+          title: "数据库名称",
+        },
+        {
+          id: "ipAddress",
+          title: "ip地址",
+        },
+        {
+          id: "port",
+          title: "端口",
+        },
+      ],
+      // 表格操作按钮
+      mainFunData: [
+        {
+          type: "edit",
+          text: "编辑",
+          color: "#5a9cf8",
+        },
+        {
+          type: "dele",
+          text: "删除",
+          color: "#e47470",
+        },
+      ],
+    };
+  },
+  computed: {
+    // 操作框的宽度
+    funWidth() {
+      return this.mainFunData.length * 90;
+    },
+  },
+  mounted() {
+    this.queryAccountList();
+  },
+  methods: {
+    // 点击新增
+    goAddHandle() {
+      this.$refs.addAccount.openDialog(this.$route.query.id, "", "add");
+    },
+    // 点击查看
+    viewHandle(row) {
+      this.$refs.addAccount.openDialog(this.$route.query.id, row.id, "show");
+    },
+    // 搜索框按钮
+    searchBtnHandle() {
+      this.$nextTick(() => {
+        this.queryAccountList(this.searchForm);
+      });
+    },
+    // 主表的操作按钮方法
+    tableButtonHandle(val, item) {
+      if (item.type === "dele") {
+        this.$confirm("确认删除？")
+          .then(() => {
+            this.deleteAccount(val.id);
+          })
+          .catch(() => {});
+      } else if (item.type === "edit") {
+        this.$refs.addAccount.openDialog(this.$route.query.id, val.id, "edit");
+      }
+    },
+    // 删除行
+    async deleteAccount(id) {
+      let params = {
+        id,
+      };
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "deleteAccount",
+        "",
+        params
+      );
+      if (res.status == 200) {
+        this.$nextTick(() => {
+          this.queryAccountList(this.searchForm);
+        });
+      }
+    },
+    // 获取app模块
+    async queryAccountList(obj = {}) {
+      this.mainTabLoading = true;
+      let params = {
+        appId: this.$route.query.id,
+        ...obj,
+      };
+      const res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "queryAccountList",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.mainTableData = res.attribute;
+        this.$nextTick(() => {
+          this.$refs.mainTable.setTableKey();
+        });
+      }
+      this.mainTabLoading = false;
+    },
+  },
+};
+</script>
+
+
+<style scoped lang='scss'>
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.apiWrap {
+  background-color: #fbfbfb;
+  overflow: scroll;
+  width: 100%;
+
+  .searchBox {
+    margin: 10px;
+    padding: 15px;
+    background-color: #fff;
+    border-radius: 20px;
+
+    .searchbtn {
+      margin-left: 80%;
+    }
+  }
+
+  .tablebox {
+    .tablebtn {
+      padding: 10px 15px;
+      border-radius: 16px;
+      margin-bottom: 5px;
+      background: #fff;
+      display: flex;
+      justify-content: space-between;
+
+      > .search {
+        margin-left: 10px;
+      }
+    }
+
+    .main {
+      display: flex;
+      .left {
+        background-color: #fff;
+        border-radius: 16px;
+        width: 100%;
+        padding: 15px;
+      }
+    }
+  }
+}
+
+.shareDialog {
+  display: flex;
+  justify-content: space-around;
+
+  .left,
+  .right {
+    flex: 0.48;
+    position: relative;
+
+    > .title {
+      text-align: center;
+      font-size: 18px;
+      padding: 10px;
+      background-color: #f7f7f7;
+      border-radius: 16px;
+      margin-bottom: 10px;
+    }
+
+    > .list {
+      height: 50vh;
+      padding: 15px;
+      height: 40vh;
+      overflow: auto;
+
+      .item {
+        cursor: pointer;
+        padding: 15px;
+        border-radius: 16px;
+        font-size: 14px;
+
+        &:hover {
+          background-color: #fafafa;
+        }
+      }
+
+      .actived {
+        background-color: #fafafa !important;
+      }
+    }
+  }
+}
+
+.addressChunk {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .label {
+    flex: 0.1;
+  }
+
+  .input {
+    flex: 0.9;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+.code-json-editor {
+  /* jsoneditor右上角默认有一个链接,加css去掉 */
+
+  /deep/ .jsoneditor-poweredBy {
+    display: none !important;
+  }
+
+  /deep/ .jsoneditor-menu {
+    background-color: #fff !important;
+    color: #000 !important;
+
+    button {
+      background-color: #4c81f2 !important;
+    }
+  }
+
+  /deep/ .ace_gutter {
+    background-color: #fff;
+    border-right: 1px solid gainsboro;
+  }
+
+  /deep/ .ace-jsoneditor {
+    height: 200px !important;
+  }
+}
+</style>
diff --git a/src/views/applicationList/accountList/addAccount.vue b/src/views/applicationList/accountList/addAccount.vue
new file mode 100644
index 0000000..6a6945b
--- /dev/null
+++ b/src/views/applicationList/accountList/addAccount.vue
@@ -0,0 +1,286 @@
+<template>
+  <base-right-dialog
+    @handleClose="examineHandleClose"
+    @handleConfirmClick="handleConfirmClick"
+    :dialogVisible="dialogVisible"
+    size="500px"
+    :appendBody="true"
+    :loading="true"
+    :footerShow="true"
+    :submitShow="true"
+    :submitTitle="'保存'"
+    :title="title + '应用账号'"
+  >
+    <div class="rightDialogClass_main" style="background: #fff; padding: 10px">
+      <base-form
+        style="padding-top: 0 !important"
+        spanWidth="130px"
+        ref="customForm"
+        :formRow="accountFormRow"
+        :isFunBtn="false"
+        :rules="accountRules"
+        alignAt="block"
+        :span="24"
+      >
+      </base-form>
+    </div>
+  </base-right-dialog>
+</template>
+
+<script>
+import baseRightDialog from "@/components/base/baseRightDialog/index.vue";
+import { authApi } from "@/api/apis/auth";
+import baseForm from "@/components/base/baseNewForm";
+export default {
+  components: {
+    baseForm,
+    baseRightDialog,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      accountFormRow: [
+        {
+          elCol: [
+            {
+              label: "账号名称",
+              prop: "name",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "登录账号",
+              prop: "userName",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "登录密码",
+              prop: "password",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "数据库类型",
+              prop: "dbType",
+              tag: "elSelect",
+              options: [],
+              optionValue:"columnContent",
+              optionLabel:"columnValue",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "数据库名称",
+              prop: "dbName",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "ip地址",
+              prop: "ipAddress",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "端口",
+              prop: "port",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+      ],
+      accountRules: {
+        name: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        userName: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        dbType: [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change, blur",
+          },
+        ],
+        dbName: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        ipAddress: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        port: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+      },
+      title: "",
+      appID: "",
+    };
+  },
+  methods: {
+    openDialog(appID, accountId, type) {
+      this.queryDictionaryList()
+      this.appID = appID;
+      this.dialogVisible = true;
+      this.dialogType = type;
+      this.$nextTick(() => {
+        this.$refs.customForm?.resetFields("ruleForm");
+        if (type == "add") {
+          this.title = "新增";
+        }
+        if (type == "edit") {
+          this.title = "编辑";
+          this.GetSceneDetail(accountId);
+        }
+        if (type == "show") {
+          this.title = "查看";
+          this.GetSceneDetail(accountId);
+        }
+      });
+    },
+    async queryDictionaryList() {
+      let params = {
+        tabName: "sys_flow_step_account",
+        columnName: "db_type",
+      };
+      let res = await authApi(
+        "sysdictionaryshopnewService",
+        "",
+        "queryDictionaryList",
+        "",
+        params
+      );
+      if (res.status == 200) {
+        this.accountFormRow[3].elCol[0].options = res.attribute;
+      }
+    },
+    async GetSceneDetail(accountId) {
+      let params = {
+        id: accountId,
+      };
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "getAccount",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$refs.customForm.choiceAssignment(res.attribute);
+      }
+    },
+    handleConfirmClick() {
+      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          let params = {
+            ...this.$refs.customForm.ruleForm,
+            appId: this.appID,
+          };
+          if (this.dialogType == "add") {
+            this.SaveAccountData(params);
+          } else if (this.dialogType == "edit") {
+            this.editAccountData(params);
+          }
+        } else {
+          this.$message({ message: "请选择必填项", type: "warning" });
+          return;
+        }
+      });
+    },
+
+    async SaveAccountData(params) {
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "saveAccount",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("新增账号成功", "success");
+        this.dialogVisible = false;
+        this.$emit("handleConfirmClick");
+      }
+    },
+    async editAccountData(params) {
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "updateAccount",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("修改账号成功", "success");
+        this.dialogVisible = false;
+        this.$emit("handleConfirmClick");
+      }
+    },
+    examineHandleClose() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-form-item__content {
+  width: 100% !important;
+}
+
+::v-deep .label {
+  text-align: left !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/applicationList/accountList/configData.js b/src/views/applicationList/accountList/configData.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/applicationList/accountList/index.vue b/src/views/applicationList/accountList/index.vue
new file mode 100644
index 0000000..234687d
--- /dev/null
+++ b/src/views/applicationList/accountList/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="wrap">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang='scss'>
+</style>
\ No newline at end of file
diff --git a/src/views/applicationList/configData.js b/src/views/applicationList/configData.js
index c9dbc5e..b945793 100644
--- a/src/views/applicationList/configData.js
+++ b/src/views/applicationList/configData.js
@@ -116,6 +116,10 @@ const addForm = [
             id: "8",
             label: "用友NCC",
           },
+          {
+            id: "9",
+            label: "数据库",
+          },
         ],
         fontSize: 16,
       },
@@ -211,6 +215,11 @@ const settingMenu = [
     icon: "appMenu03",
     path: "appApiAdmin"
   },
+  {
+    title: "应用账号授权",
+    icon: "appMenu03",
+    path: "accountAdmin"
+  },
   {
     title: "安全与监控",
     icon: "appMenu04"
diff --git a/src/views/projectClassification/authorizationDialog.vue b/src/views/projectClassification/authorizationDialog.vue
new file mode 100644
index 0000000..244973f
--- /dev/null
+++ b/src/views/projectClassification/authorizationDialog.vue
@@ -0,0 +1,265 @@
+<template>
+  <div>
+    <base-dialog
+      :closeEscape="true"
+      :showClose="true"
+      :closeModal="false"
+      @handleClose="handleDialogClose"
+      @handleConfirmClick="handleConfirmClick"
+      :dialogVisible="dialogVisible"
+      :title="'权限分配'"
+      width="95%"
+      top="8vh"
+      :footerShow="true"
+    >
+      <div style="height: 50vh; display: flex;    overflow: auto;">
+        <div style="width: calc(50% - 5px);">
+          <div class="small_title">
+            已分配权限用户 {{ authorizedMembers.length }}
+          </div>
+          <base-table
+            ref="authorizedMemberstable"
+            :border="true"
+            :showIndex="true"
+            :tableHeight="'45vh'"
+            :tableData="authorizedMembers"
+            :tableColumn="tableAssColumn"
+            :slotrow="false"
+            :funData="funData"
+            @onFunc="onFunc"
+          ></base-table>
+        </div>
+        <div style="width: calc(50% - 5px); margin-left: 10px">
+          <div
+            class="small_title"
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            "
+          >
+            <span>未分配权限用户</span>
+            <span>已选择 {{ SelectionData.length }} 人 </span>
+          </div>
+          <base-table
+            ref="customtable"
+            :border="true"
+            :showIndex="true"
+            :tableHeight="'45vh'"
+            :tableData="tableData"
+            :tableColumn="tableColumn"
+            :slotrow="false"
+            :showSelect="true"
+            @onSelectionChange="onSelectionChange"
+          ></base-table>
+        </div>
+      </div>
+    </base-dialog>
+  </div>
+</template>
+
+<script>
+import baseDialog from "@/components/base/BaseNewDialog/index.vue";
+import baseTable from "@/components/base/baseTable";
+import { authApi } from "@/api/apis/auth";
+
+export default {
+  components: {
+    baseDialog,
+    baseTable,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      tableColumn: [
+        {
+          label: "用户名称",
+          prop: "personName",
+        },
+        {
+          label: "用户编码",
+          prop: "personCode",
+        },
+      ],
+      tableAssColumn: [
+        {
+          label: "用户名称",
+          prop: "userName",
+        },
+        {
+          label: "用户编码",
+          prop: "userCode",
+        },
+      ],
+      funData: [
+        {
+          color: "#ff0000",
+          text: "删除",
+        },
+      ],
+      tableData: [],
+      activeTab: "first",
+      proClassID: "", //项目分类的id
+      authorizedMembers: [], //权限成员
+      SelectionData: [], //已选择
+    };
+  },
+  mounted() {},
+  methods: {
+    openDialog(row) {
+      this.proClassID = row.id;
+      this.activeTab = "first";
+      this.dialogVisible = true;
+      this.queryRuleList();
+      this.queryUserList();
+    },
+    // 查询未分配权限的用户
+    async queryUserList() {
+      let params = {
+        flowClassId:this.proClassID,
+      };
+      this.openLoading("detail");
+      let res = await authApi(
+        "sysFlowClassRuleService",
+        "",
+        "queryUserList",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.tableData = res.attribute;
+      }
+    },
+    // 流程分类权限列表查询
+    async queryRuleList() {
+      let params = {
+        flowClassId: this.proClassID,
+      };
+      let res = await authApi(
+        "sysFlowClassRuleService",
+        "",
+        "queryRuleList",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.authorizedMembers = res.attribute.ruleList;
+      }
+    },
+    // 表格操作事件 复制 删除
+    onFunc(index, row, item) {
+      // 删除
+      if (item.text == "删除") {
+        this.$confirm("确认删除该内容吗?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.openLoading("del");
+            this.userDelete(row);
+          })
+          .catch(() => {
+            this.$vmNews("取消操作", "info");
+          });
+      }
+    },
+    async userDelete(row) {
+      let params = {
+        flowClassId:this.proClassID,
+        userId: row.userId,
+      };
+      let res = await authApi(
+        "sysFlowClassRuleService",
+        "",
+        "deleteFlowClassRule",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("删除成功！", "success");
+        this.queryRuleList();
+        this.queryUserList();
+        this.SelectionData = [];
+        this.$refs.customtable.clearSelect();
+      }
+    },
+    // 确定分配权限
+    async handleConfirmClick() {
+      if (this.SelectionData.length <= 0) {
+        this.$vmNews("请选择需要分配权限的用户！");
+        return;
+      }
+      let userList = [];
+
+      this.SelectionData.forEach((item) => {
+        let obj = {
+          userId: item.personId, //用户id
+          userName: item.personName, //用户名
+          userCode: item.personCode, //用户编码
+        };
+        userList.push(obj);
+      });
+      let params = {
+        flowClassId: this.proClassID,
+        ruleList: userList,
+      };
+      let res = await authApi(
+        "sysFlowClassRuleService",
+        "",
+        "saveFlowClassRule",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("分配权限成功", "success");
+        this.handleDialogClose();
+        this.$emit('resetTable')
+      }
+    },
+    // 多选事件
+    onSelectionChange(value) {
+      this.SelectionData = value;
+    },
+    // 弹窗关闭
+    handleDialogClose() {
+      this.$refs.customtable.clearSelect();
+      this.tableData = [];
+      this.authorizedMembers = [];
+      this.SelectionData = [];
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.small_title {
+  font-size: 14px;
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.authBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  padding: 10px;
+
+  .content {
+    display: flex;
+    align-items: center;
+  }
+
+  .arrow {
+    display: flex;
+    align-items: center;
+    i {
+      margin: 0 5px;
+      font-size: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/projectClassification/configData.js b/src/views/projectClassification/configData.js
new file mode 100644
index 0000000..e5105c3
--- /dev/null
+++ b/src/views/projectClassification/configData.js
@@ -0,0 +1,49 @@
+/**
+ * @desc 项目分类
+ * @date 2023-07-10
+ */
+// 表头
+const tableColumnData = [
+  {
+    label: '项目分类名称',
+    prop: 'name'
+  }
+]
+
+// 基本信息内容
+const formRow = [
+  {
+    elCol: [{
+      label: '项目分类名称',
+      prop: 'name',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+]
+
+const basicsRules = {
+  name: [{
+    required: true,
+    message: '请输入项目分类名称',
+    trigger: 'blur'
+  }],
+}
+
+// 查看
+const formRowShow = [
+  {
+    elCol: [{
+      label: '项目分类名称',
+      prop: 'name',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+]
+export default {
+  tableColumnData,
+  formRow,
+  basicsRules,
+  formRowShow,
+}
diff --git a/src/views/projectClassification/index.vue b/src/views/projectClassification/index.vue
new file mode 100644
index 0000000..945c286
--- /dev/null
+++ b/src/views/projectClassification/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <base-layout
+      ref="baseLayout"
+      :buttonList="buttonList"
+      @onFuncBtn="onFuncBtn"
+      :querySwitch="true"
+      :searchList="requirementList"
+      @search="handleSearchEvent"
+      :isPage="true"
+      @pageChange="handlePageChange"
+    >
+      <div slot="main" slot-scope="{ tableHeight }">
+        <base-table
+          ref="baseTable"
+          :showIndex="true"
+          :funWidth="220"
+          :funData="funData"
+          @onFunc="onFunc"
+          :tabLoading.sync="tabLoading"
+          :tableHeight="tableHeight"
+          :tableData="tableData"
+          :tableColumn="tableColumnData"
+          @onCellClick="onCellClick"
+        >
+        </base-table>
+      </div>
+    </base-layout>
+    <right-dialog ref="rightDialog" @resetTable="resetTable"></right-dialog>
+    <authorizationDialog ref="authorizationDialog" @resetTable="resetTable"></authorizationDialog>
+  </div>
+</template>
+
+<script>
+import baseLayout from "@/components/base/baseLayout";
+import baseTable from "@/components/base/baseTable";
+import rightDialog from "./rightDialog";
+import authorizationDialog from "./authorizationDialog";
+import configData from "./configData";
+import { authApi } from "@/api/apis/auth";
+export default {
+  components: {
+    baseLayout,
+    baseTable,
+    rightDialog,
+    authorizationDialog,
+  },
+  data() {
+    return {
+      buttonList: [
+        {
+          menuName: "新增",
+          icon: "el-icon-plus",
+          btnFunction: "add",
+        },
+        {
+          menuName: "刷新",
+          icon: "el-icon-refresh",
+          btnFunction: "resetLoad",
+        },
+      ], //按钮组
+      requirementList: [
+        {
+          placeholder: "项目分类名称",
+          prop: "name",
+          tag: "elInput",
+        },
+      ], //查询模板list
+      tabLoading: false,
+      tableColumnData: configData.tableColumnData, //表头数据
+      funData: [
+        {
+          color: "#6a9af1",
+          text: "编辑",
+        },
+        {
+          color: "#d67a74",
+          text: "删除",
+        },
+        {
+          color: "#6a9af1",
+          text: "权限管理",
+        },
+      ],
+      tableData: [], //表格数据
+      pageModel: {
+        pageNum: 1,
+        pageSize: 100,
+      },
+      queryModel: {
+        name: "",
+      },
+    };
+  },
+  mounted() {
+    this.GetProductionTableData();
+  },
+  methods: {
+    onCellClick(row) {
+      this.openLoading("detail");
+      this.$refs.rightDialog.openDialog("show", row);
+    },
+    // 表格数据
+    async GetProductionTableData() {
+      this.tabLoading = true;
+      let param = {
+        ...this.pageModel,
+        ...this.queryModel,
+      };
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "queryPagedJson",
+        "",
+        param
+      );
+      this.tabLoading = false;
+      if (res.status == "200") {
+        this.tableData = res.attribute.list;
+        this.$refs.baseLayout.setPageTotal(res.attribute.total);
+      }
+    },
+    // 分页变化
+    handlePageChange(val) {
+      this.pageModel.pageNum = val.pageIndex;
+      this.pageModel.pageSize = val.pageSize;
+      this.GetProductionTableData();
+    },
+    // 按钮组
+    onFuncBtn(btn) {
+      this[btn.btnFunction]();
+    },
+    // 新增
+    add() {
+      this.$refs.rightDialog.openDialog("add");
+    },
+    // 表格操作事件 查看 重推 删除
+    onFunc(index, row, item) {
+      // 查看
+      if (item.text === "查看") {
+        this.openLoading("detail");
+        this.$refs.rightDialog.openDialog("show", row);
+      }
+      // 重推
+      if (item.text === "编辑") {
+        this.openLoading("detail");
+        this.$refs.rightDialog.openDialog("edit", row);
+      }
+      // 权限管理
+      if (item.text === "权限管理") {
+        // this.openLoading("detail");
+        this.$refs.authorizationDialog.openDialog(row);
+      }
+      // 删除
+      if (item.text === "删除") {
+        this.$delConfirm().then(() => {
+          this.openLoading("del");
+          this.productionDeleteById(row.id);
+        });
+      }
+    },
+    async productionDeleteById(id) {
+      let param = {
+        id: id,
+      };
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "deleteFlowClass",
+        "",
+        param
+      );
+      if (res.status == "200") {
+        this.$vmNews("删除成功", "success");
+        this.resetTable();
+      }
+    },
+    // 重置表格
+    resetTable() {
+      this.pageModel.pageNum = 1;
+      this.$refs.baseLayout.pageClear();
+      this.GetProductionTableData();
+    },
+    // 搜索
+    handleSearchEvent() {
+      let data = this.$refs.baseLayout.ruleForm;
+      this.queryModel = data;
+      this.resetTable();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.clickTitle {
+  color: #409eff;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/projectClassification/rightDialog.vue b/src/views/projectClassification/rightDialog.vue
new file mode 100644
index 0000000..89c728a
--- /dev/null
+++ b/src/views/projectClassification/rightDialog.vue
@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <base-right-dialog
+      size="450px"
+      ref="baseRightDialog"
+      :footerShow="true"
+      :dialogVisible.sync="dialogVisible"
+      :title="dialogTitle + ' 项目分类管理'"
+      @handleClose="handleDialogClose"
+      :type="dialogType"
+      :submitShow="submitShow"
+      @handleConfirmClick="handleConfirmClick"
+    >
+      <base-form
+        ref="basicsForm"
+        :formRow="formRow"
+        :isFunBtn="false"
+        :rules="basicsRules"
+        class="dialog_form"
+        :spanWidth="`120px`"
+        :loading="vLoading"
+      >
+      </base-form>
+
+    </base-right-dialog>
+  </div>
+</template>
+
+<script>
+import baseRightDialog from '@/components/base/baseRightDialog'
+import baseForm from '@/components/base/baseNewForm'
+import baseTable from '@/components/base/baseTable'
+import configData from '@/views/projectClassification/configData'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  components: {
+    baseRightDialog,
+    baseForm,
+    baseTable,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '',
+      dialogType: '',
+      formRow: configData.formRow,
+      basicsRules: configData.basicsRules,
+      vLoading: false,
+      newMarryOptions: [],
+      submitShow: true,
+      loadingType: true,
+      tableVersionData: [],
+      funData: [],
+      isEdit: false,
+      select_dist: {},
+      plugNameOptions: [],
+      tableColumn: configData.operationTableColumn,//操作记录
+      tableData: []
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    openDialog(type, row) {
+
+      this.formRow = configData.formRow
+      this.submitShow = true
+
+      this.isEdit = false
+      this.funData = []
+
+      // 编辑
+      if (type == 'edit') {
+        this.isEdit = true
+        this.dialogTitle = '编辑'
+        this.dialogType = 'edit'
+        this.productGetById(row.id)
+      }
+      // 查看
+      if (type == 'show') {
+        this.funData = Object.assign([], [])
+        this.submitShow = false
+        this.formRow = configData.formRowShow
+        this.dialogTitle = '查看'
+        this.dialogType = 'show'
+        this.productGetById(row.id)
+
+      }
+      this.dialogVisible = true
+      // 新增
+      if (type == 'add') {
+        this.dialogTitle = '新增'
+        this.dialogType = 'add'
+        this.$nextTick(() => {
+          this.$set(this.$refs.basicsForm.ruleForm, 'state', '0')
+        })
+      }
+
+    },
+    // 编辑详情
+    async productGetById(id) {
+      let params = {
+        id: id
+      }
+      let res = await authApi(
+        'sysFlowClassService',
+        '',
+        'getFlowClass',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.$nextTick(() => {
+          this.$refs.basicsForm.incomingParameters(res.attribute)
+        })
+      }
+    },
+    addVersionDialog() {
+      let obj = {
+        argName: '',
+        argCode: '',
+        argType: '1',
+        remark: ''
+      }
+      this.tableVersionData.push(obj)
+    },
+    // 删除
+    onFunc(index, row) {
+      if (index == 0) {
+        this.$delConfirm().then(() => {
+          this.tableVersionData.forEach((item, itemIndex) => {
+            if (item.id === row.id) {
+              this.tableVersionData.splice(itemIndex, 1)
+            }
+          })
+        })
+      }
+    },
+    // 弹窗关闭
+    handleDialogClose() {
+      this.tableVersionData = Object.assign([], [])
+      this.$refs.basicsForm.resetFields()
+      this.dialogVisible = false
+    },
+    // 弹窗确认按钮
+    handleConfirmClick() {
+      this.$refs.basicsForm.$refs['ruleForm'].validate((valid) => {
+        if (!valid) {
+          return
+        } else {
+          let params = {
+            ...this.$refs.basicsForm.ruleForm
+          }
+          if (this.dialogType == 'add') {
+            this.openLoading('submit')
+            this.productSaveDto(params)
+          }
+          if (this.dialogType == 'edit') {
+            this.openLoading('submit')
+            this.productUpdateDto(params)
+          }
+        }
+      })
+    },
+    // 新增保存
+    async productSaveDto(params) {
+      let res = await authApi(
+        'sysFlowClassService',
+        '',
+        'saveFlowClass',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.handleDialogClose()
+        this.$vmNews('新增成功', 'success')
+        this.$emit('resetTable')
+      }
+    },
+    // 编辑保存
+    async productUpdateDto(params) {
+      let res = await authApi(
+        'sysFlowClassService',
+        '',
+        'updateFlowClass',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.handleDialogClose()
+        this.$vmNews('更新成功', 'success')
+        this.$emit('resetTable')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.small_title {
+  margin: 10px 0;
+  font-size: 16px;
+}
+
+.dialogList {
+  padding: 16px 0;
+  border-top: 1px solid #dcdfe6;
+  display: flex;
+  flex-direction: column;
+}
+
+.updateBtn {
+  border: 1px solid #ebedf1;
+  padding: 5px 0;
+  border-radius: 3px;
+  text-align: center;
+  font-size: 14px;
+  cursor: pointer;
+  width: 100px;
+}
+
+.updateBtn:hover {
+  color: #1890ff;
+  border-color: #badeff;
+  background-color: #e8f4ff;
+}
+
+::v-deep .el-table__body-wrapper.is-scrolling-none {
+  height: auto !important;
+}
+
+::v-deep .app-container {
+  height: auto !important;
+}
+</style>