From 3f2ba87706626dc3062e678c429ab1edd496b9de Mon Sep 17 00:00:00 2001
From: weifegn <1982392655@qq.com>
Date: Thu, 21 Nov 2024 16:28:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E6=96=B0=E5=BB=BA?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=8A=A5=E9=94=99=E5=BC=82=E5=B8=B8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/index.ts                         |  1 +
 src/views/FileTree/components/FileTree.vue | 39 ++++++++++------------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 1eb264b..d25e50a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -152,6 +152,7 @@ export function setTheme(name: "dark" | "light") {
  * 解析文件后缀
  */
 function getFileSuffix(filename: string) {
+  if (!filename) return "";
   return filename.split(".").pop()!;
 }
 
diff --git a/src/views/FileTree/components/FileTree.vue b/src/views/FileTree/components/FileTree.vue
index 5109eac..e8bed50 100644
--- a/src/views/FileTree/components/FileTree.vue
+++ b/src/views/FileTree/components/FileTree.vue
@@ -13,30 +13,28 @@
   >
     <template #default="{ data }">
       <!-- 处理新建 -->
-      <template v-if="data.isNew">
-        <el-input
-          v-model="newValue"
-          ref="newInputRef"
-          size="small"
-          placeholder="Please input"
-          @blur="newInputBlur"
-          @keydown.enter="newInputRef?.blur()"
-        />
-      </template>
+      <el-input
+        size="small"
+        v-if="data.isNew"
+        v-model="newValue"
+        ref="newInputRef"
+        @blur="newInputBlur"
+        placeholder="Please input"
+        @keydown.enter="newInputRef?.blur()"
+      />
 
       <!-- 处理重命名 -->
-      <template v-else-if="data.rename">
-        <el-input
-          ref="renameInputRef"
-          v-model="renameValue"
-          size="small"
-          @blur="renameInputBlur"
-          @keydown.enter="renameInputRef?.blur()"
-        />
-      </template>
+      <el-input
+        size="small"
+        ref="renameInputRef"
+        v-model="renameValue"
+        v-else-if="data.rename"
+        @blur="renameInputBlur"
+        @keydown.enter="renameInputRef?.blur()"
+      />
 
       <!-- 正常展示文件名称/文件夹名称， -->
-      <div class="file-tree-item">
+      <div class="file-tree-item" v-else>
         <img
           v-if="data.type !== 'Folder'"
           :src="Utils.getFileIcon(data.label)"
@@ -74,7 +72,6 @@ import { useFileTreeStore } from "../../../pinia/useFileTreeStore";
 import { FileSystemTreeMock } from "../../../mock/FileSystemTreeMock";
 import { TreeNodeData } from "element-plus/es/components/tree/src/tree.type.mjs";
 import { useEditorStore } from "../../../pinia/useEditorStore";
-import Mask from "../../../class/Mask";
 
 // 解析 pinia store
 const fileTreeStore = useFileTreeStore();
-- 
Gitee


From d15fb54c6fb18b42938ad9b90a6c39fa4a80b21d Mon Sep 17 00:00:00 2001
From: weifegn <1982392655@qq.com>
Date: Thu, 21 Nov 2024 17:22:37 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=E5=AE=9E=E7=8E=B0=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=20aria-hidden=20=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=8F=B0=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/class/Mask.ts                          | 33 ---------
 src/class/Popover.ts                       | 78 ++++++++++++++++++++++
 src/style/index.css                        | 29 +++++++-
 src/views/FileTree/components/FileTree.vue | 56 +++++-----------
 src/views/FileTree/components/TopMenu.vue  | 61 +++++++++++------
 src/views/FileTree/config/index.ts         |  9 +--
 src/views/FileTree/index.vue               |  2 +-
 src/views/Home/components/Aside.vue        |  7 +-
 8 files changed, 169 insertions(+), 106 deletions(-)
 delete mode 100644 src/class/Mask.ts
 create mode 100644 src/class/Popover.ts

diff --git a/src/class/Mask.ts b/src/class/Mask.ts
deleted file mode 100644
index 9812877..0000000
--- a/src/class/Mask.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * 蒙版工具类 - 点击显示蒙版，提供关闭方法，实现原理为 zindex
- *  蒙版至于 body 下，撑满整个视口
- *  通过属性 display 控制 蒙版是否显示，防止频繁操作 dom
- */
-
-class Mask {
-  private maskBox: HTMLElement;
-  constructor() {
-    const haveMaskBox = document.querySelector(".mask-box");
-    if (haveMaskBox) {
-      this.maskBox = haveMaskBox as HTMLElement;
-      return;
-    }
-
-    const maskBox = document.createElement("div");
-    this.maskBox = maskBox;
-    maskBox.classList.add("mask-box");
-    document.body.appendChild(maskBox);
-
-    maskBox.addEventListener("click", this.close.bind(this));
-  }
-  public show() {
-    if (!this.maskBox) return;
-    this.maskBox.style.display = "block";
-  }
-  public close() {
-    if (!this.maskBox) return;
-    this.maskBox.style.display = "none";
-  }
-}
-
-export default new Mask();
diff --git a/src/class/Popover.ts b/src/class/Popover.ts
new file mode 100644
index 0000000..2969a64
--- /dev/null
+++ b/src/class/Popover.ts
@@ -0,0 +1,78 @@
+/**
+ * 使用内置的 El-Popover 控制台会报错，因此自己封装一个来实现相同功能
+ */
+
+type IPopoverList = Array<{
+  title: string;
+  shortcut?: string;
+  callback: () => void;
+}>;
+
+export class Popover {
+  private popover: HTMLElement;
+  private mask: HTMLElement;
+  private menuList: IPopoverList;
+
+  constructor(menuList: IPopoverList) {
+    this.menuList = menuList;
+    // 先创建 mask
+    this.mask = document.createElement("div");
+    this.mask.classList.add("unicode-mask-box");
+    document.body.appendChild(this.mask);
+
+    // 后创建 菜单
+    this.popover = document.createElement("div");
+    this.popover.classList.add("unicode-popover");
+
+    // 循环创建子项
+    for (let i = 0; i < this.menuList.length; i++) {
+      const item = this.menuList[i];
+      const menuItem = document.createElement("div");
+      menuItem.classList.add("unicode-popover-item");
+      // 内部创建
+      menuItem.innerHTML = `<span class="text">${
+        item.title
+      }</span> <span class="shortcut">${item.shortcut || ""}</span>`;
+      menuItem.addEventListener("click", item.callback);
+      this.popover.appendChild(menuItem);
+    }
+
+    // 添加到 mask
+    this.mask.appendChild(this.popover);
+
+    // 处理事件
+    this.mask.addEventListener("click", this.close.bind(this));
+    this.mask.addEventListener("popover", (e) => e.preventDefault());
+  }
+
+  public show(payload: {
+    x: number;
+    y: number;
+    hiddenMask?: boolean;
+    width?: number;
+    offsetX?: number;
+    offsetY?: number;
+  }) {
+    const {
+      x,
+      y,
+      hiddenMask = false,
+      width = 220,
+      offsetX = 0,
+      offsetY = 0,
+    } = payload;
+
+    this.mask.style.display = "block";
+    if (hiddenMask) this.mask.style.backgroundColor = "transparent";
+    // transform 实现定位
+    this.popover.style.transform = `translate(${x + offsetX}px, ${
+      y + offsetY
+    }px)`;
+
+    if (width) this.popover.style.width = `${width}px`;
+  }
+  public close() {
+    this.mask.style.display = "none";
+    this.popover.style.transform = `translate(0)`;
+  }
+}
diff --git a/src/style/index.css b/src/style/index.css
index 0bf179b..ede4e38 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -5,7 +5,8 @@
 }
 
 /** mask-box */
-.mask-box {
+.unicode-mask-box {
+  transition: all 0.3s;
   position: absolute;
   left: 0;
   top: 0;
@@ -16,6 +17,32 @@
   background-color: rgba(0, 0, 0, 0.2);
 }
 
+/* 右键菜单 样式 */
+.unicode-popover {
+  transition: all 0.3s;
+  background-color: #fff;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
+  width: 220px;
+  z-index: 10;
+  border-radius: 4px;
+  padding: 6px 10px;
+}
+.unicode-popover-item {
+  color: #606266;
+  margin: 8px 0;
+  padding: 4px 8px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+}
+.unicode-popover-item:hover {
+  background-color: #ecf5ff;
+}
+.unicode-popover-item .shortcut {
+  font-size: 12px;
+  color: #93a2b3;
+}
+
 /* 拖拽条 */
 .unicode-drag-bar {
   transition: all 0.3s;
diff --git a/src/views/FileTree/components/FileTree.vue b/src/views/FileTree/components/FileTree.vue
index e8bed50..7537492 100644
--- a/src/views/FileTree/components/FileTree.vue
+++ b/src/views/FileTree/components/FileTree.vue
@@ -44,17 +44,6 @@
     </template>
   </el-tree>
 
-  <!-- 自定义右键菜单 使用 Popover 会有问题 -->
-  <!-- <div
-    @click="contextmenuItemClick(menu.command)"
-    class="file-tree-contextmenu-item"
-    v-for="menu in contextmenuList"
-    :key="menu.command"
-  >
-    <span class="text">{{ menu.title }}</span>
-    <span class="shortcut">{{ menu.shortcut }}</span>
-  </div> -->
-
   <!-- 导入文件夹 -->
   <FolderUpload ref="folderUploadRef" @upload="uploadHandle" />
 </template>
@@ -63,7 +52,6 @@
 import { Utils } from "../../../utils";
 import { reactive, ref, watch } from "vue";
 import FolderUpload from "./FolderUpload.vue";
-import { contextmenuList } from "../config/index";
 import { ElMessage, type ElTree } from "element-plus";
 import { nextTick, onBeforeUnmount, onMounted } from "vue";
 import { IFileTreeItem } from "../../../interface/FileTree";
@@ -72,6 +60,19 @@ import { useFileTreeStore } from "../../../pinia/useFileTreeStore";
 import { FileSystemTreeMock } from "../../../mock/FileSystemTreeMock";
 import { TreeNodeData } from "element-plus/es/components/tree/src/tree.type.mjs";
 import { useEditorStore } from "../../../pinia/useEditorStore";
+import { Popover } from "../../../class/Popover";
+
+/**
+ * 定义右键菜单
+ */
+const contextmenu = ref(<InstanceType<typeof Popover> | null>null);
+const menuList = [
+  { callback: openinterminalHandle, title: "在集成终端打开", shortcut: "" },
+  { callback: opentimelineHandle, title: "打开时间线", shortcut: "Ctrl + T" },
+  { callback: copypathHandle, title: "复制相对路径", shortcut: "" },
+  { callback: renameHandle, title: "重命名", shortcut: "F2" },
+  { callback: deleteHandle, title: "删除", shortcut: "Delete" },
+];
 
 // 解析 pinia store
 const fileTreeStore = useFileTreeStore();
@@ -126,17 +127,8 @@ function nodeClickHandle(data: IFileTreeItem) {
 function nodeContextmenuHandle(e: PointerEvent, data: IFileTreeItem) {
   e.stopPropagation();
   setCurrentNodeID(data.id); // 高亮当前节点
-}
-
-/**
- * contextmenuItemClick 右键菜单菜单项事件响应
- */
-async function contextmenuItemClick(command: string) {
-  if (command === "openinterminal") openinterminalHandle();
-  if (command === "opentimeline") opentimelineHandle();
-  if (command === "copypath") copypathHandle();
-  if (command === "rename") renameHandle();
-  if (command === "delete") deleteHandle();
+  const { pageX, pageY } = e;
+  contextmenu.value?.show({ x: pageX, y: pageY });
 }
 
 /**
@@ -278,7 +270,6 @@ async function initDefaultProject() {
 function importFileHandle() {
   // 导入文件 - 创建 input
   const dataMap = getDataMap();
-  console.log("==> ", dataMap);
   const input = document.createElement("input");
   input.type = "file";
   input.multiple = true; // 多选
@@ -525,6 +516,9 @@ function setCurrentNodeID(id: string | undefined) {
 
 onMounted(() => {
   window.addEventListener("keydown", keydownHandle);
+
+  // 初始化右键菜单
+  contextmenu.value = new Popover(menuList);
 });
 
 onBeforeUnmount(() => {
@@ -570,20 +564,6 @@ defineExpose({
 .el-tree-node__content {
   border-radius: 4px;
 }
-.file-tree-contextmenu-item {
-  margin: 8px 0;
-  padding: 4px 8px;
-  display: flex;
-  justify-content: space-between;
-  cursor: pointer;
-}
-.file-tree-contextmenu-item:hover {
-  background-color: #ecf5ff;
-}
-.file-tree-contextmenu-item .shortcut {
-  font-size: 12px;
-  color: #93a2b3;
-}
 :deep().is-leaf {
   display: none;
 }
diff --git a/src/views/FileTree/components/TopMenu.vue b/src/views/FileTree/components/TopMenu.vue
index 5b7a593..6a6e4f9 100644
--- a/src/views/FileTree/components/TopMenu.vue
+++ b/src/views/FileTree/components/TopMenu.vue
@@ -3,39 +3,58 @@
     <i
       class="iconfont"
       v-for="icon in topIconList"
-      @click="menuClick(icon)"
+      @click="(e) => menuClick(e, icon)"
       :key="icon"
       :class="icon"
     />
-    <!-- 下拉菜单 -->
-    <el-dropdown @command="handleCommand">
-      <i class="iconfont icon-gengduo"> </i>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item command="import-file"> 导入文件 </el-dropdown-item>
-          <el-dropdown-item command="import-folder">
-            导入文件夹
-          </el-dropdown-item>
-          <el-dropdown-item command="init-default">
-            初始化默认项目
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
 import { topIconList } from "../config/index";
+import { Popover } from "../../../class/Popover";
 
 const emit = defineEmits(["menuClick", "command"]);
 
-function menuClick(icon: string) {
-  emit("menuClick", icon);
+const dropdown = ref(<InstanceType<typeof Popover> | null>null);
+
+const dropdownList = [
+  {
+    title: "导入文件",
+    command: "import-file",
+    callback: () => emit("command", "import-file"),
+  },
+  {
+    title: "导入文件夹",
+    command: "import-folder",
+    callback: () => emit("command", "import-folder"),
+  },
+  {
+    title: "初始化默认项目",
+    command: "init-default",
+    callback: () => emit("command", "init-default"),
+  },
+];
+
+function menuClick(e: Event, icon: string) {
+  if (icon !== "icon-gengduo") return emit("menuClick", icon);
+  const event = <PointerEvent>e;
+  const { pageX, pageY } = event;
+  dropdown.value?.show({
+    x: pageX,
+    y: pageY,
+    hiddenMask: true,
+    offsetX: -50,
+    offsetY: 20,
+    width: 180,
+  });
 }
-const handleCommand = (command: string) => {
-  emit("command", command);
-};
+
+onMounted(() => {
+  // 初始化下拉菜单
+  dropdown.value = new Popover(dropdownList);
+});
 </script>
 
 <style lang="css" scoped>
diff --git a/src/views/FileTree/config/index.ts b/src/views/FileTree/config/index.ts
index ed3cdb6..87ec029 100644
--- a/src/views/FileTree/config/index.ts
+++ b/src/views/FileTree/config/index.ts
@@ -5,12 +5,5 @@ export const topIconList = [
   "icon-newfolder",
   "icon-shuaxin",
   "icon-ico_niantiejiankongrenwu",
-];
-// 右键菜单列表
-export const contextmenuList = [
-  { command: "openinterminal", title: "在集成终端打开", shortcut: "" },
-  { command: "opentimeline", title: "打开时间线", shortcut: "Ctrl + T" },
-  { command: "copypath", title: "复制相对路径", shortcut: "" },
-  { command: "rename", title: "重命名", shortcut: "F2" },
-  { command: "delete", title: "删除", shortcut: "Delete" },
+  "icon-gengduo",
 ];
diff --git a/src/views/FileTree/index.vue b/src/views/FileTree/index.vue
index 01a424e..2cfa305 100644
--- a/src/views/FileTree/index.vue
+++ b/src/views/FileTree/index.vue
@@ -5,7 +5,7 @@
     <TopMenuVue @menu-click="handleClick" @command="handleCommand" />
 
     <!-- 文件树 -->
-    <el-scrollbar @click.stop="scrollbarClick">
+    <el-scrollbar @click.stop="scrollbarClick" @contextmenu.stop>
       <FileTreeVue ref="fileTreeRef" />
     </el-scrollbar>
   </div>
diff --git a/src/views/Home/components/Aside.vue b/src/views/Home/components/Aside.vue
index d7a8ba6..b31974b 100644
--- a/src/views/Home/components/Aside.vue
+++ b/src/views/Home/components/Aside.vue
@@ -10,8 +10,8 @@
       @click="menuClick(item)"
     />
 
-    <!-- 设置弹出层 -->
-    <el-popover
+    <!-- el-popover 控制台会报错，使用自定义右键菜单实现 -->
+    <!-- <el-popover
       trigger="hover"
       :show-arrow="false"
       placement="right-start"
@@ -20,7 +20,6 @@
       <template #reference>
         <i class="iconfont icon-shezhi"></i>
       </template>
-      <!-- 设置内容 -->
       <div class="setting-box">
         <span
           v-for="item in settingList"
@@ -30,7 +29,7 @@
           {{ item.title }}
         </span>
       </div>
-    </el-popover>
+    </el-popover> -->
   </div>
 </template>
 
-- 
Gitee