feat(FileTree): 为文件树空白区域添加上下文菜单
新增对文件树空白区域的右键菜单支持,包含新建文件/文件夹、刷新和打开资源管理器选项
This commit is contained in:
parent
1bf39910dd
commit
7f6d445305
|
|
@ -23,7 +23,8 @@
|
|||
<a-empty description="请选择目录" />
|
||||
</div>
|
||||
|
||||
<div v-else class="tree-content" ref="treeContentRef">
|
||||
<a-dropdown v-else :trigger="['contextmenu']">
|
||||
<div class="tree-content" ref="treeContentRef">
|
||||
<a-directory-tree ref="treeRef" v-model:expandedKeys="state.expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="treeData" :field-names="{ title: 'name', key: 'path', children: 'children' }" :load-data="onLoadData" @select="onSelect">
|
||||
<template #icon="{ dataRef, expanded }">
|
||||
<component :is="getFileIcon(dataRef.name, dataRef.type, expanded)" :style="{ color: getFileIconColor(dataRef.name, dataRef.type), fontSize: '18px', marginRight: '6px' }" />
|
||||
|
|
@ -62,6 +63,16 @@
|
|||
</template>
|
||||
</a-directory-tree>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleBackgroundMenuClick">
|
||||
<a-menu-item key="newFile">新建文件</a-menu-item>
|
||||
<a-menu-item key="newFolder">新建文件夹</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="refresh">刷新</a-menu-item>
|
||||
<a-menu-item key="openInExplorer">在资源管理器打开</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<!-- 重命名/新建弹窗 -->
|
||||
<a-modal v-model:open="modalVisible" :title="modalTitle" @ok="handleModalOk">
|
||||
|
|
@ -362,6 +373,26 @@ const handleMenuClick = async ({ key }, node) => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleBackgroundMenuClick = ({ key }) => {
|
||||
if (key === 'refresh') {
|
||||
handleRefresh();
|
||||
return;
|
||||
}
|
||||
|
||||
// 构建根目录的虚拟节点
|
||||
const separator = window.utools.isWindows() ? "\\" : "/";
|
||||
// 注意:如果是根驱动器(如 C:\),pop() 可能为空字符串,但 state.rootPath 是完整的
|
||||
const rootName = state.rootPath.split(separator).pop() || state.rootPath;
|
||||
|
||||
const rootNode = {
|
||||
name: rootName,
|
||||
path: state.rootPath,
|
||||
type: "directory"
|
||||
};
|
||||
|
||||
handleMenuClick({ key }, rootNode);
|
||||
};
|
||||
|
||||
const handleModalOk = async () => {
|
||||
if (!modalInputValue.value) {
|
||||
message.warning("请输入内容");
|
||||
|
|
@ -493,10 +524,8 @@ const handleModalOk = async () => {
|
|||
}
|
||||
|
||||
:deep(.ant-dropdown-trigger) {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-tree-node-content-wrapper:hover) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue