diff --git a/src/views/LinkUp/compoment/addDialogChunk.vue b/src/views/LinkUp/compoment/addDialogChunk.vue
new file mode 100644
index 0000000..6d951a9
--- /dev/null
+++ b/src/views/LinkUp/compoment/addDialogChunk.vue
@@ -0,0 +1,933 @@
+<template>
+  <div class="addDialogChunk">
+    <base-right-dialog
+      @handleClose="examineHandleClose"
+      :dialogVisible="examineOperateDialog"
+      size="100%"
+      :appendBody="true"
+      :loading="sceneLoading"
+      :footerShow="true"
+      :submitShow="true"
+      @handleConfirmClick="handleConfirmClick"
+      :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" style="background: #fff">
+        <!-- 画布 -->
+        <div class="drawCanvas" v-if="drawShowList.length > 0">
+          <div
+            class="drawItem"
+            v-for="(ele, index) in drawShowList"
+            :key="ele.value"
+          >
+            <div class="title">{{ ele.title }}</div>
+            <div
+              @click="selectDrawItem(index)"
+              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 }}
+                    <img
+                      class="acionImg"
+                      v-if="
+                        ele.options.resourcesType == 1 ||
+                        ele.options.resourcesType == '1' ||
+                        ele.options.resourcesType == 'API接口'
+                      "
+                      src="../images/apiison.svg"
+                      alt=""
+                    />
+                    <img
+                      class="acionImg"
+                      v-else-if="
+                        ele.options.resourcesType == 2 ||
+                        ele.options.resourcesType == '2' ||
+                        ele.options.resourcesType == '插件'
+                      "
+                      src="../images/chajian.svg"
+                      alt=""
+                    />
+                    <img
+                      v-else-if="
+                        ele.options.resourcesType == 3 ||
+                        ele.options.resourcesType == '3' ||
+                        ele.options.resourcesType == '数据源'
+                      "
+                      class="acionImg"
+                      src="../images/shujuyuan.svg"
+                      alt=""
+                    />
+                  </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="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="配置">
+              <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>
+    </base-right-dialog>
+    <editSence ref="editSence" @handleConfirmClick="updateTitle"></editSence>
+  </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 } from "./constant";
+// 导入 cron 表达式组件
+import FishCrontab from "fish-crontab";
+export default {
+  components: {
+    editSence,
+    baseRightDialog,
+    FishCrontab,
+  },
+  data() {
+    return {
+      examineOperateDialog: false, //判断是都打开弹窗
+      sceneLoading: false, //遮照
+      sceneName: "", //场景名称
+      sceneID: "", //场景ID
+      // 画布列表，对应右侧操作区域
+      drawShowList: [],
+      drawSelectIndex: 0, // 当前选中的画布索引
+
+      // 应用列表
+      appList: [],
+      appCodeOrName: "", // 应用搜索关键字
+      appActivIndex: "", // 当前选中的应用 ID
+      //
+      timeDivide:timeDivide,
+      activeTabName: "选择操作", // 当步骤为1时 显示的操作栏
+      activTimeIndex: "", // 当前选择操作的类型
+      expression: "",
+    };
+  },
+  methods: {
+    /**
+     * 打开弹窗
+     * @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");
+      }
+    },
+    /**
+     * 新增、实时修改场景步骤基本信息
+     * @param {Object} params 请求参数
+     * @param {string} type 操作类型
+     */
+    async SaveSceneStepData(params, type, insertIndex) {
+      let res = await authApi(
+        "sysFlowStepService",
+        "",
+        "saveFlowStep",
+        "",
+        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 = "接口配置";
+            obj[0].content = "请输入 IP 白名单";
+          } else if (this.triggerMode === 3) {
+            obj[0].actionName = "手动触发";
+          }
+          // 更新画布列表
+          this.drawShowList = obj;
+          // 在下一个 DOM 更新周期后执行操作
+          this.$nextTick(() => {
+            // 选中第一个步骤
+            this.drawSelectIndex = 0;
+            this.selectDrawItem(this.drawSelectIndex);
+            // 获取应用列表
+            this.getAppList();
+          });
+        }
+        // 手动新增时
+        if (type === "add") {
+          // 将新步骤添加到画布列表
+          this.drawShowList.push({
+            ...stepUse,
+            options: {
+              // 步骤 id
+              stepID: res.attribute.id,
+            },
+          });
+          // 在下一个 DOM 更新周期后执行操作
+          this.$nextTick(() => {
+            // 选中当前新增的步骤
+            this.drawSelectIndex = this.drawShowList.length - 1;
+            this.selectDrawItem(this.drawSelectIndex);
+          });
+        }
+
+        if (type == "insert") {
+          this.drawShowList.splice(insertIndex + 1, 0, {
+            ...stepUse,
+            options: {
+              // 步骤 id
+              stepID: res.attribute.id,
+            },
+          });
+          // 在下一个 DOM 更新周期后执行操作
+          this.$nextTick(() => {
+            // 选中当前新增的步骤
+            this.drawSelectIndex = insertIndex + 1;
+            this.selectDrawItem(this.drawSelectIndex);
+          });
+        }
+      }
+    },
+    /**
+     * 手动新增场景步骤
+     * @param {string} type 操作类型
+     */
+    addDrwaItem(type) {
+      // 新增步骤的参数
+      let params = {
+        flowId: this.sceneID,
+        step: this.drawShowList.length + 1,
+        stepType: 2,
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params, "add");
+    },
+    /**
+     * 切换步骤时
+     * @param {number} index 步骤索引
+     */
+    selectDrawItem(index) {
+      // 更新当前选中的步骤索引
+      this.drawSelectIndex = index;
+    },
+
+    /**
+     * 删除场景步骤
+     * @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",
+              "",
+              "saveFlowStep",
+              "",
+              {
+                id: stepID,
+              }
+            );
+            if (res.status == "200") {
+              // 提示删除成功
+              this.$vmNews("删除成功", "success");
+              // 从画布列表中删除该步骤
+              this.drawShowList.splice(index, 1);
+              if (this.drawSelectIndex === index) {
+                // 选中第一个步骤
+                this.drawSelectIndex = 0;
+                this.selectDrawItem(this.drawSelectIndex);
+              } else if (this.drawSelectIndex >= this.drawShowList.length) {
+                // 选中最后一个步骤
+                this.drawSelectIndex = this.drawShowList.length - 1;
+                this.selectDrawItem(this.drawSelectIndex);
+              }
+            }
+          } else {
+            // 提示删除成功
+            this.$vmNews("删除成功", "success");
+            // 从画布列表中删除该步骤
+            this.drawShowList.splice(index, 1);
+            if (this.drawSelectIndex === index) {
+              // 选中第一个步骤
+              this.drawSelectIndex = 0;
+              this.selectDrawItem(this.drawSelectIndex);
+            } else if (this.drawSelectIndex >= this.drawShowList.length) {
+              // 选中最后一个步骤
+              this.drawSelectIndex = this.drawShowList.length - 1;
+              this.selectDrawItem(this.drawSelectIndex);
+            }
+          }
+        })
+        .catch(() => {});
+    },
+    /**
+     * 插入场景步骤
+     * @param {any} value 标签页值
+     */
+
+    insertDrawItem(ele, index) {
+      let params = {
+        flowId: this.sceneID,
+        step: index + 1,
+        stepType: 2,
+      };
+      // 保存场景步骤数据
+      this.SaveSceneStepData(params, "insert", index);
+    },
+    /**
+     * cron 表达式点击确定时时间插件回调
+     * @param {string} value cron 表达式的值
+     */
+    crontabFill(value) {
+      // 更新 cron 表达式
+      this.expression = value;
+      // 更新当前步骤的任务值
+      this.drawShowList[this.drawSelectIndex].options.taskValue = value;
+    },
+    /**
+     * 获取应用列表
+     */
+    async getAppList() {
+      // 获取应用列表的参数
+      let params = {
+        appName: this.appCodeOrName,
+      };
+      // 调用获取应用列表的 API
+      let res = await authApi(
+        "sysApplicationService",
+        "",
+        "queryEntity",
+        "",
+        params
+      );
+      // 隐藏搜索遮罩
+      this.drawMask = false;
+      if (res.status == "200") {
+        // 更新应用列表
+        this.appList = 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.drawShowList[this.drawSelectIndex].actionName = "平台触发配置";
+      } else if (this.triggerMode === 1) {
+        this.drawShowList[this.drawSelectIndex].actionName = "定时器配置";
+      } else if (this.triggerMode === 4) {
+        this.drawShowList[this.drawSelectIndex].actionName = "接口配置";
+      } else if (this.triggerMode === 3) {
+        this.drawShowList[this.drawSelectIndex].actionName = "手动触发";
+      }
+    },
+    // 场景步骤---【确定】
+    handleConfirmClick() {
+      this.examineHandleClose();
+    },
+    // 关闭场景步骤弹窗
+    examineHandleClose() {
+      // 触发关闭事件
+      this.$emit("examineHandleClose");
+      this.examineOperateDialog = false;
+      this.sceneName = "";
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.drawContent {
+  width: 100%;
+  height: 100%;
+  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;
+        }
+      }
+      .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;
+      }
+    }
+  }
+
+  .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;
+  }
+}
+
+// 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;
+    }
+  }
+}
+.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%;
+    }
+  }
+}
+// 选择操作
+.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;
+  }
+}
+</style>
\ No newline at end of file
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..e02831d
--- /dev/null
+++ b/src/views/LinkUp/compoment/constant.js
@@ -0,0 +1,33 @@
+
+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 小时执行一次",
+		},
+	]
+
+export { tabListDisposition, tabListAction, stepAdd, stepUse, timeDivide }
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/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..fe1667a
--- /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.sceneID,
+        row.sceneName,
+        row.triggerMode,
+        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