feat(FileTree): 为文件树空白区域添加上下文菜单
新增对文件树空白区域的右键菜单支持,包含新建文件/文件夹、刷新和打开资源管理器选项
This commit is contained in:
parent
1bf39910dd
commit
7f6d445305
|
|
@ -23,7 +23,8 @@
|
||||||
<a-empty description="请选择目录" />
|
<a-empty description="请选择目录" />
|
||||||
</div>
|
</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">
|
<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 }">
|
<template #icon="{ dataRef, expanded }">
|
||||||
<component :is="getFileIcon(dataRef.name, dataRef.type, expanded)" :style="{ color: getFileIconColor(dataRef.name, dataRef.type), fontSize: '18px', marginRight: '6px' }" />
|
<component :is="getFileIcon(dataRef.name, dataRef.type, expanded)" :style="{ color: getFileIconColor(dataRef.name, dataRef.type), fontSize: '18px', marginRight: '6px' }" />
|
||||||
|
|
@ -62,6 +63,16 @@
|
||||||
</template>
|
</template>
|
||||||
</a-directory-tree>
|
</a-directory-tree>
|
||||||
</div>
|
</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">
|
<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 () => {
|
const handleModalOk = async () => {
|
||||||
if (!modalInputValue.value) {
|
if (!modalInputValue.value) {
|
||||||
message.warning("请输入内容");
|
message.warning("请输入内容");
|
||||||
|
|
@ -493,10 +524,8 @@ const handleModalOk = async () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-dropdown-trigger) {
|
:deep(.ant-dropdown-trigger) {
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-tree-node-content-wrapper:hover) {
|
:deep(.ant-tree-node-content-wrapper:hover) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue