qjkankan_v1.1.1/packages/qjkankan-editor/src/components/dragTree/index.vue

<template>
  <div>
    <!-- <div v-if="isRenaming">
      <input ref="rename" type="text" @blur="onInputNewNameComplete" v-model="inputData.name" />
    </div> -->
    <!-- <button @click="addNode(null)">Add Node</button> -->
    <el-tree
      :highlight-current="true"
      ref="sceneTree"
      :data="this.info.navigationTrees"
      :expand-on-click-node="false"
      node-key="id"
      class="custom-tree"
      :default-expand-all="false"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      @node-click="handlerGroup"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
    >
      <template slot-scope="{ node, data }">
        <div class="tree-msg" :class="data.type == 'group' ? 'group-item' : 'image-item'">
          <!-- <div class="line"></div> -->

          <div class="tree-info">
            <div v-if="data.type == 'group'" class="group-info">
              <i v-if="data.type == 'group' && !expandedNodes.includes(data.id)" class="iconfont icon-editor_folder_off folder_collapsed"></i>
              <!-- 拖拽图标 -->
              <i ref="drag-group" class="drag-icon iconfont icon-editor_folder_off folder_collapsed"></i>
              <i v-if="data.type == 'group' && expandedNodes.includes(data.id)" class="iconfont icon-editor_folder_on folder_expanded"></i>
              <span v-if="reNameId != data.id"> {{ data.name }}</span>
              <input
                ref="reNameInput"
                v-model.trim="data.name"
                @blur="onInputNewNameComplete(data)"
                v-if="reNameId == data.id"
                maxlength="50"
                :placeholder="$i18n.t('navigation.enter_name')"
                class="group-title-input"
              />
              <div v-if="reNameId != data.id && deleteId == null" class="controls-btn">
                <i v-if="data.type == 'group' && data.level == 0" class="iconfont icon-editor_list_add icon-add" @click.stop="addNode(data)" v-tooltip="$i18n.t('navigation.add_two_group')"> </i>
                <i
                  v-if="(data.type == 'group' && data.children.length && data.children[0].type != 'group') || (data.type == 'group' && !data.children.length)"
                  class="iconfont icon-editor_list_image icon-image"
                  @click.stop="onRequestForAddScene(data)"
                  v-tooltip="$i18n.t('navigation.add_pano_or_scene')"
                >
                </i>
                <i @click="onClickForRename(data)" class="iconfont icon-editor_list_edit icon-edit" v-tooltip="$i18n.t('navigation.rename')"> </i>
                <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="$i18n.t('navigation.delete')" @click.stop="onDel(node, data)"> </i>
              </div>
            </div>
            <div class="image-info" v-else>
              <div class="cover-image">
                <img ref="drag-image" :src="data.icon + ossImagePreviewUrlSuffix()" alt="" />
              </div>

              <div class="image-name">
                <div class="name-top">
                  <span v-if="reNameId != data.id">{{ data.name }}</span>
                  <input
                    ref="reNameInput"
                    v-if="reNameId == data.id"
                    v-model.trim="inputData.name"
                    @blur="onInputNewNameComplete(data)"
                    maxlength="50"
                    :placeholder="$i18n.t('navigation.enter_name')"
                    class="group-title-input"
                  />
                </div>
                <span class="name-bottom">
                  {{ data.type === "pano" ? $i18n.t("navigation.pano") : $i18n.t("navigation.scene") }}
                </span>
              </div>

              <div v-if="reNameId != data.id && deleteId == null" class="controls-btn">
                <i @click="onClickForRename(data)" class="iconfont icon-editor_list_edit icon-edit" v-tooltip="$i18n.t('navigation.rename')"> </i>
                <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="$i18n.t('navigation.delete')" @click.stop="onDel(node, data)"> </i>
              </div>
            </div>
          </div>
          <div class="deletion-confirm-wrap">
            <div class="deletion-confirm" :class="deleteId == data.id ? 'show' : 'hide'" v-clickoutside="onRequestForCancelDelete" @click.stop="onConfirmDelete(node, data)">
              {{ $i18n.t("navigation.delete") }}
            </div>
          </div>
          <!-- <div class="controls-btn">
            <i v-if="data.type == 'group' && data.level == 0" class="iconfont icon-editor_list_add icon-add" @click.stop="addNode(data)" v-tooltip="$i18n.t('navigation.add_two_group')"> </i>
            <i
              v-if="(data.type == 'group' && data.children.length && data.children[0].type != 'group') || (data.type == 'group' && !data.children.length)"
              class="iconfont icon-editor_list_image icon-image"
              @click.stop="onRequestForAddScene(data)"
              v-tooltip="$i18n.t('navigation.add_pano_or_scene')"
            >
            </i>
            <i @click="onClickForRename(data)" class="iconfont icon-editor_list_edit icon-edit" v-tooltip="$i18n.t('navigation.rename')"> </i>
            <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="$i18n.t('navigation.delete')" @click.stop="() => remove(node, data)"> </i>
          </div> -->
        </div>
      </template>
    </el-tree>

    <!-- 选择全景图 or 场景 组件 -->
    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
      <MaterialSelector
        :title="$i18n.t('gather.select_material')"
        @cancel="isShowSelectionWindow = false"
        @submit="onSubmitFromMaterialSelector"
        :selectableType="['pano', '3D']"
        :initialMaterialType="'pano'"
        :isMultiSelection="true"
      />
    </div>
  </div>
</template>

<script>
// import { VueTreeList, Tree, TreeNode } from "vue-tree-list";
import { mapGetters, mapMutations } from "vuex";
import SceneInGroup from "@/components/sceneInGroupInEditor.vue";
import MaterialSelector from "@/components/materialSelector.vue";

import { isUpgradeAdapter } from "@/utils/fixVersion";
import { ossImagePreviewUrlSuffix } from "@/utils/other.js";
export default {
  components: {
    // VueTreeList,
    MaterialSelector,
  },
  computed: {
    ...mapGetters({
      info: "base/baseInfo",
      sceneList: "base/sceneList",
      currentScene: "scene/currentScene",
      currentSecondId: "navigation/currentSecondId",
      currentRootId: "navigation/currentRootId",
    }),
  },
  watch: {
    "info.navigationTrees": {
      // immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          //赋值新数据后保存展开状态
          this.$nextTick(() => {
            this.newNodesMap = [];
            for (let key in this.$refs.sceneTree.store.nodesMap) {
              this.newNodesMap.push(this.$refs.sceneTree.store.nodesMap[key]);
            }

            this.nodesMap.forEach((item, index) => {
              this.newNodesMap.forEach((new_item, new_index) => {
                if (index == new_index) {
                  new_item.expanded = item.expanded;
                }
              });
            });

            this.nodesMap = this.newNodesMap;
          });
        }
      },
      deep: true,
    },
    sceneList: {
      // immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          if (this.info.firstScene) {
            if (!newVal.some((item) => item.id == this.info.firstScene.id)) {
              this.$store.commit("base/setData", { firstScene: null });
            }

            if (!newVal.some((item) => item.id == this.currentScene.id)) {
              this.$store.commit("scene/setCurrentScene", null);
            }
          }
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      inputData: null,
      insertTag: null,
      isShowSelectionWindow: false,
      expandedNodes: [], // 用于存储已展开节点的数组
      nodesMap: [],
      newNodesMap: [],
      reNameId: null,
      backUpName: "",
      deleteId: null,
      timer: null,
    };
  },
  methods: {
    ossImagePreviewUrlSuffix,

    handleNodeExpand(data, node, instance) {
      console.log("节点展开", data);
      // 当节点展开时，将其id添加到数组中
      this.expandedNodes.push(data.id);
      console.error(this.expandedNodes);
    },
    handleNodeCollapse(data, node, instance) {
      console.log("节点折叠", data);
      // 当节点折叠时，从数组中移除其id
      const index = this.expandedNodes.indexOf(data.id);
      if (index !== -1) {
        this.expandedNodes.splice(index, 1);
      }
      console.error(this.expandedNodes);
    },
    handleDragStart(node, ev) {
      console.log("drag start", node);
      if (node.data.type == "group") {
        ev.dataTransfer.setDragImage(this.$refs["drag-group"], -10, -18);
      } else {
        ev.dataTransfer.setDragImage(this.$refs["drag-image"], -10, -18);
      }
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log("tree drag enter: ", dropNode);
      if (!this.timer) {
        if (dropNode.data.type == "group" && dropNode.data.children.length && !dropNode.expanded) {
          this.timer = setTimeout(() => {
            console.error("可以展开");
            dropNode.expanded = true;
            this.clearTimer();
          }, 1000);
        }
      }
    },
    clearTimer() {
      clearTimeout(this.timer);
      this.timer = null;
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      this.clearTimer();
      // if (dropNode.expanded) {
      //   dropNode.expanded = false;
      // }
      // console.log("tree drag leave: ", dropNode.data.type);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      // console.log("tree drag over: ", dropNode.data.type);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // console.log("tree drag end: ", dropNode && dropNode.data.type, dropType);
      this.clearTimer();
      this.processTreeData("drag");
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // console.log("tree drop: ", dropNode.data.type, dropType);
      return false;
    },
    allowDrop(draggingNode, dropNode, type) {
      if (draggingNode.data.type != "group") {
        //拖拽场景
        if (dropNode.level == 1) {
          //不允许拖拽到第一层级
          if (!dropNode.data.children.length || (dropNode.data.children.length && dropNode.data.children[0].type != "group")) {
            return type == "inner";
          } else {
            return false;
          }
        } else if (dropNode.level == 2) {
          //不允许拖拽到和目录同级
          if (dropNode.data.type == "group") {
            return type == "inner";
          }
        }
        return type == "prev" || type == "next";
      } else {
        //拖拽组
        if (draggingNode.level == 2 || draggingNode.level == 1) {
          //当拖拽的是第一第二级目录的时候，只能拖拽到第二级目录的前后，不能拖拽到2级目录的里面
          if (dropNode.level == 3) {
            return false;
          }

          if (dropNode.level == 2) {
            if (dropNode.data.type != "group") {
              if (dropNode.parent.data.children.length && dropNode.parent.data.children[0].type != "group") {
                return type == "prev" || type == "next";
              } else {
                return false;
              }
            } else {
              return type == "prev" || type == "next";
            }
          } else if (dropNode.level == 1) {
            return type == "prev" || type == "next" || type == "inner";
          }
        }
      }
    },
    allowDrag(draggingNode) {
      // console.error(draggingNode.data.name)
      // return draggingNode.data.name.indexOf("三级 3-2-2") === -1;
      return true;
    },

    handlerGroup(data, note, e) {
      if (data.type == "group") {
        // if (data.children.length) {
        this.$refs.sceneTree.store.nodesMap[data.id].expanded = !this.$refs.sceneTree.store.nodesMap[data.id].expanded;
        if (this.$refs.sceneTree.store.nodesMap[data.id].expanded) {
          this.handleNodeExpand(data);
        } else {
          this.handleNodeCollapse(data);
        }
        // }
      }
    },
    onRequestForAddScene(item) {
      this.insertTag = item;
      this.isShowSelectionWindow = true;
    },
    onSubmitFromMaterialSelector(selected) {
      console.error(this.insertTag);
      let changeListLength = this.insertTag.children.length || 0;
      let newScenes = [];
      let roundId = new Date().getTime();
      for (const item of selected) {
        roundId += 1;
        if (item.materialType === "pano") {
          newScenes.push({
            children: [],
            fodderId: item.id,
            icon: item.icon,
            sceneCode: item.sceneCode,
            name: item.name,
            // category: this.level === 1 ? this.groupNode.children[0].id : this.groupNode.id,
            type: "pano",
            sort: changeListLength,
            parentId: null,
            level: this.insertTag.level + 1,
            id: "add_" + roundId,
            // id: "s_" + this.$randomWord(true, 8, 8),
          });
        } else if (item.materialType === "3D") {
          console.log("item.num", item.num);
          newScenes.push({
            children: [],
            icon: item.thumb,
            sceneCode: item.num,
            name: item.sceneName,
            sort: changeListLength,
            // category: this.level === 1 ? this.groupNode.children[0].id : this.groupNode.id,
            type: "4dkk",
            level: this.insertTag.level + 1,
            version: isUpgradeAdapter(item.isUpgrade), // 'V3' OR 'V4'. 全景看看v1.3新增
            id: "add_" + roundId,

            // id: "s_" + this.$randomWord(true, 8, 8),
            // fodderId: item.id,
          });
        }
        changeListLength++;
      }
      console.error(newScenes);
      console.error(this.sceneList);

      let allSuccess = true;
      newScenes.forEach((item, i) => {
        // let temp = this.info.scenes.find((eachScene) => {
        let temp = this.sceneList.find((eachScene) => {
          return eachScene.sceneCode === item.sceneCode;
        });
        if (temp) {
          setTimeout(() => {
            this.$msg.message(
              `${item.type == "4dkk" ? this.$i18n.t("navigation.scene_name") : this.$i18n.t("navigation.pano")}${this.$i18n.t("navigation.already_exists", {
                msg: item.sceneTitle,
              })}`
            );
          }, i * 100);
          allSuccess = false;
          return;
        }
        // this.info.scenes.push(item);
        this.insertTag.children.push(item);
      });

      this.isShowSelectionWindow = false;
      if (allSuccess) {
        this.handlerGroup(this.insertTag);
        this.$msg.success(this.$i18n.t("gather.success"));
      }
    },
    onClickForRename(data) {
      // this.isRenaming = true;
      this.inputData = data;
      this.backUpName = data.name;
      this.reNameId = data.id;

      if (this.inputData.name == "默认二级分组") {
        this.inputData.name = this.$i18n.t("navigation.default_group_two");
      } else if (this.inputData.name == "一级分组") {
        this.inputData.name = this.$i18n.t("navigation.group_one");
      } else {
        // this.inputData .name = data.name;
      }
      this.$nextTick(() => {
        this.$refs.reNameInput.focus();
      });
      // this.$nextTick(() => {
      //   // this.$refs['input-for-rename'].focus()
      //   this.$refs["input-for-rename"].select();
      //   this.$refs["input-for-rename"].scrollIntoView({
      //     behavior: "smooth",
      //   });
      // });
    },
    onInputNewNameComplete(data) {
      console.error(data.name);
      if (this.inputData.name.trim() == "") {
        // data.name = this.backUpName;
        // data.name = data.name;
        this.reNameId = null;
        return;
      }
      data.name = this.inputData.name;
      this.reNameId = null;
      // this.isRenaming = false;
      // if (!this.inputData.name.trim()) {
      //   return;
      // }
      // if (this.inputData.name !== this.groupNode.name) {
      //   // this.$emit("renameGroup", this.groupNode.id, this.level, this.newName);
      // }
      // this.inputData = null;
    },

    onDel(node, data) {
      this.deleteId = data.id;
    },
    onRequestForCancelDelete() {
      this.deleteId = null;
    },
    onConfirmDelete(node, data) {
      // this.$emit("delete", this.sceneInfo.id);
      // this.isConfirmingDeletion = false;
      this.onRequestForCancelDelete();
      if (this.sceneList.length == 1 && data.type != "group") {
        this.$alert({
          title: this.$i18n.t("navigation.delete_init_scene"),
          content: this.$i18n.t("navigation.keep_one_scene"),
        });
        return;
      }

      console.error(node, data);

      if (this.info.navigationTrees.length == 1 && node.level == 1) {
        this.$alert({
          content: this.$i18n.t("navigation.keep_one_group"),
        });
        return;
      }

      if ((node.level == 1 || node.level == 2) && data.type == "group") {
        let delScenes = [];
        this.info.navigationTrees.forEach((item) => {
          item.children.forEach((s_item) => {
            if (s_item.type != "group" && (item.id == node.data.id || s_item.id == node.data.id)) {
              delScenes.push(s_item);
            }
            s_item.children.forEach((t_item) => {
              if (t_item.type != "group" && (item.id == node.data.id || s_item.id == node.data.id)) {
                delScenes.push(t_item);
              }
            });
          });
        });
        if (delScenes.length >= this.sceneList.length) {
          //如果要删除的场景大于等于 当前场景数量，则弹出提示 至少保留一个
          this.$alert({
            title: this.$i18n.t("navigation.delete_init_scene"),
            content: this.$i18n.t("navigation.keep_one_scene"),
          });
          return;
        }
      }

      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
      this.processTreeData("del");
      // if (parent.data.children.length == 1 && parent.data.children[0].type == "group") {
      //   let newChild = children[0].children;
      //   parent.data.children = newChild;
      // }
      // console.error(this.info.navigationTrees);
    },

    addNode(data) {
      let roundId = new Date().getTime();
      let group = {
        id: "add_" + roundId,
        name: data ? this.$i18n.t("navigation.group_two") : this.$i18n.t("navigation.group_one"),
        type: "group",
        level: data ? 1 : 0,
        children: [],
      };
      if (data) {
        // if (data.children.length && data.children[0].type != "group") {
        //   //新增子目录的时候，如果目录里面没有子目录，新增一个默认目录包含旧数据
        //   let list = JSON.parse(JSON.stringify(data.children));
        //   data.children = [];
        //   let defaultDir = {
        //     id: "add_" + (roundId + 1),
        //     sort: 0,
        //     name: this.$i18n.t("navigation.default_group_two"),
        //     type: "group",
        //     children: list,
        //   };
        //   data.children.push(defaultDir);
        // }
        data.children.push(group);
        this.$refs.sceneTree.store.nodesMap[data.id].expanded = true;
      } else {
        this.info.navigationTrees.push(group);
      }
      this.processTreeData("add");
      this.$nextTick(() => {
        this.onClickForRename(group);
      });
    },
    getRoundId() {
      return new Date().getTime();
    },
    processTreeData(type) {
      this.info.navigationTrees.forEach((item) => {
        //一级目录

        let panoList = item.children.filter((pano) => pano.type != "group");
        let groupList = item.children.filter((pano) => pano.type == "group");

        switch (type) {
          case "add":
            if (panoList.length && groupList.length) {
              //新增目录到二级目录。且二级目录只有场景的时候
              console.error("add");
              let list = [];
              let defaultDir = {
                id: "add_" + (this.getRoundId() + 1),
                sort: 0,
                name: this.$i18n.t("navigation.default_group_two"),
                type: "group",
                children: panoList,
              };
              list.push(defaultDir);
              list = list.concat(groupList);
              item.children = list;
            }

            if (item.children.length == 1 && item.type == "group" && !item.children[0].children.length) {
              //新增二级目录的时候，如果新增完只有一个二级目录，且二级目录为空，创建多一个目录，且第一个为默认二级目录
              let list = [];
              let defaultDir = {
                id: "add_" + (this.getRoundId() + 1),
                sort: 0,
                name: this.$i18n.t("navigation.default_group_two"),
                type: "group",
                children: [],
              };
              list.push(defaultDir);
              list = list.concat(groupList);
              item.children = list;
            }

            break;
          case "del":
            if (groupList.length == 1 && !panoList.length && groupList[0].children.length) {
              //当只有一个二级目录，二级目录有场景
              item.children = groupList[0].children;
            }
            if (groupList.length == 1 && !groupList[0].children.length) {
              //当只有一个二级目录，二级目录没有场景

              item.children = [];
            }

            break;
          case "drag":
            if (panoList.length && groupList.length) {
              //新增目录到二级目录。且二级目录只有场景的时候
              console.error("drag");
              let list = [];
              let defaultDir = {
                id: "add_" + (this.getRoundId() + 1),
                sort: 0,
                name: this.$i18n.t("navigation.default_group_two"),
                type: "group",
                children: panoList,
              };
              list.push(defaultDir);
              list = list.concat(groupList);
              item.children = list;
              console.error(item.children);
              break;
            }
        }

        // if (item.id == this.currentRootId) {
        //   console.error(groupList);
        //   if (groupList.length) {
        //     let index = groupList.findIndex((pano) => pano.children.length);

        //     this.$store.commit("navigation/setData", { currentSecondId: groupList[index].id });
        //   } else {
        //     this.$store.commit("navigation/setData", { currentSecondId: null });
        //   }
        //   // let currentSecondId = item.children.find((group) => group.id == this.currentSecondId);
        //   // console.error("currentSecondId", currentSecondId);
        // }
      });
    },
  },
  created() {},
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.vtl {
  // .vtl-drag-disabled {
  //   background-color: #d0cfcf;
  //   &:hover {
  //     background-color: #d0cfcf;
  //   }
  // }
  // .vtl-disabled {
  //   background-color: #d0cfcf;
  // }
}
</style>

<style lang="less" rel="stylesheet/less" scoped>
.icon {
  &:hover {
    cursor: pointer;
  }
}
.el-tree {
  background: none !important;
  color: hsla(0, 0%, 100%, 0.6);
  // .folder_expanded {
  //   display: none;
  // }
  // .is-expanded {
  //   .folder_collapsed {
  //     display: none;
  //   }
  //   .folder_expanded {
  //     display: inline-block;
  //   }
  // }
  .tree-msg {
    width: calc(100% - 24px);
    // min-height: 40px;
    color: hsla(0, 0%, 100%, 0.6);
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    padding-right: 10px;
    .tree-info {
      // display: flex;
      // align-items: center;
      // justify-content: flex-start;
      height: 100%;
      // height: 40px;
      // flex: 1;
      .group-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1;
        height: 100%;
        position: relative;
        .drag-icon {
          position: absolute;
          width: 40px;
          height: 40px;
          background: #313131;
          box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%);
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: -1;
        }
        span {
          margin-left: 6px;
          display: inline-block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          flex: 1 1 auto;
        }
      }
    }
    .image-info {
      display: flex;
      align-items: center;
      // padding: 10px 0;
      height: 64px;
      // flex: 1;
      width: 100%;
      .cover-image {
        flex: 0 0 auto;
        width: 64px;
        height: 64px;
        background: #b0b0b0;
        border-radius: 2px;
        background-size: cover;
        img {
          width: 100%;
          height: 100%;
          pointer-events: none;
          object-fit: cover;
        }
      }
      .image-name {
        margin-left: 10px;
        width: calc(100% - 74px);
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        flex: 1;
        .name-top {
          width: 100%;
          span {
            width: 100%;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 14px;
            color: hsla(0, 0%, 100%, 0.6);

            white-space: normal;
          }
        }
        .name-bottom {
          color: #0076f6;
        }
      }
      .group-title-input {
        width: 100%;
        margin-left: 0;
      }
    }
    .group-title-input {
      margin-left: 6px;
      flex: 1 1 auto;
      width: 1px;
      height: 30px;
      background: #1a1b1d;
      border-radius: 2px;
      border: 1px solid #404040;
      color: #fff;
      font-size: 14px;
      padding: 0 10px 0 16px;
      &:focus {
        border-color: #0076f6;
      }
    }
    .deletion-confirm-wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 44px;
      overflow: hidden;
      pointer-events: none;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      > .deletion-confirm {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #fa5555;
        transition: right 0.3s;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        color: #fff;
        pointer-events: auto;
        &::after {
          content: "";
          height: 100%;
          vertical-align: middle;
          display: inline-block;
        }
        &.show {
          right: 0;
        }
        &.hide {
          right: -44px;
        }
      }
    }
    .controls-btn {
      display: none;

      > i {
        margin-left: 12px;

        &.iconfont {
          &:hover {
            color: #0076f6;
          }
        }
      }
    }
    &.image-item {
      .controls-btn {
        position: absolute;
        right: 10px;
        bottom: 8px;
      }
      .tree-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
      }
    }
  }
}
</style>
<style lang="less">
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: none !important;
}
.el-tree-node:focus > .el-tree-node__content {
  background: none !important;
}
.el-tree-node:focus > .el-tree-node__content:hover {
  background: #313131 !important;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:hover {
  background: #313131 !important;
}
.el-tree-node__content:hover,
.el-upload-list__item:hover {
  background: #313131;
}
.el-tree-node > .el-tree-node__children {
  overflow: inherit;
}
.el-tree-node__content {
  // height: 60px;
  height: auto;
  // padding: 10px 0;
  border-radius: 4px;
}
.el-tree-node__content {
  // padding-left: 30px !important;
  position: relative;
  &::before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
  }
  &:hover {
    .controls-btn {
      display: block !important;
    }
  }
}

.custom-tree .el-tree__drop-indicator {
  // display: none
  // margin-top: -25px; /* 修改间距为10px */
  // margin-bottom: 10px; /* 修改间距为10px */
}
.el-tree-node__expand-icon {
  // height: 44px;
  display: flex;
  align-items: center;
  margin-right: 5px;
}
// .el-tree-node__expand-icon:hover {
//   background: red;
// }
// .el-tree-node__content{
//   background: red;
// }
.el-tree-node__content .el-tree-node__expand-icon {
  position: absolute;
  height: 100%;
  // left: 6px;
}
.el-tree-node__content .el-tree-node__expand-icon:first-child + .group-item {
  height: 44px;
}
.el-tree-node__content .el-tree-node__expand-icon:first-child + .image-item {
  height: 80px;
}
</style>