vue3+ts+antdv原创请勿转载,纯手写
<!-- @format -->
<template>
<div>
<div class="directory_d">
<div class="directory_title">目录</div>
<div class="directory_but">
<a-tooltip placement="top">
<template #title>
<span>{{ expandedKeys.length > 0 ? '全部收起' : '全部展开' }}</span>
</template>
<a-button class="doc_action_button" size="small" @click="toggleTreeExpand">
<span class="material-icons more-icon">unfold_more_double</span>
</a-button>
</a-tooltip>
</div>
<div>
<a-button class="doc_action_button" size="small" @click="addTreeClcik">
<span class="material-icons more-icon">create_new_folder</span>
</a-button>
</div>
</div>
<div class="tree_d">
<div class="move_directory" v-show="showRadio">
<div>移动目录</div>
<div class="directory_name">
<div class="directory_name_icon">
<FolderOutlined />
<div>{{ thisDirectoryTitle.title }}</div>
</div>
</div>
<div>到</div>
</div>
<div class="root_style">
<a-radio
v-show="showRadio"
:checked="rootDirectory.checked"
:value="rootDirectory.key"
:disabled="rootDirectory.disabled"
size="small"
@click="handleSidebarRadioChange(rootDirectory.uuid)"
></a-radio>
<div
class="root_directory"
:class="{ selected: isRootDirectorySelected }"
@click="handRootDirectoryClick(rootDirectory)"
>
<div class="root_directory_icon">
<HomeOutlined />
</div>
<div class="root_directory_title">知识库名称</div>
</div>
</div>
<div class="new_durectory" v-show="newDirectoryShow">
<a-input
placeholder="新目录"
v-model:value="newDirectoryInput"
@blur="newDirectoryBlue"
@keydown.enter="newDirectoryBlue"
/>
</div>
<a-tree
:expandedKeys="expandedKeys"
:selectedKeys="selectedKey"
:treeData="treeData"
:draggable="true"
@drop="handleDrop"
@expand="onTreeExpand"
@select="handleNodeSelect"
>
<!-- 定义树节点的渲染方式 -->
<template #title="{ title, data }">
<a-row>
<div class="sidebar_list" :class="{ treeNodeStyle: data.treeNodeselected }">
<div class="list_one">
<a-radio
v-show="showRadio"
:checked="data.checked"
:value="data.key"
:disabled="data.disabled"
size="small"
@click="handleSidebarRadioChange(data.key)"
></a-radio>
<FolderOutlined />
</div>
<div class="list_two">
<span class="icon_title" v-if="!data.editing">{{ data.editing ? '' : title }}</span>
<a-input
v-else
v-model:value="newrEnameTitle"
placeholder="重命名"
@blur="saveNode(data)"
@keydown.enter="saveNode(data)"
/>
</div>
<div class="list_three">
<div class="three_two_icon">
<span class="material-icons more-icon" @click="createSubdirectory(data)"
>create_new_folder</span
>
<a-dropdown placement="bottomRight" trigger="click">
<span class="material-icons more-icon">more_vert</span>
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="directoryUploadFilesClick(data)">
<div class="menu-item normal_menu_item">
<span class="menu-icon material-icons-outlined">upload_file</span>
<span>上传文件</span>
</div>
</a-menu-item>
<a-menu-item key="2" @click="handTreeRename(data)">
<div class="menu-item normal_menu_item">
<span class="menu-icon material-icons-outlined">edit</span>
<span>重命名</span>
</div>
</a-menu-item>
<a-menu-item key="3" @click="handMOVEToClcik(data)">
<div class="menu-item normal_menu_item">
<span class="menu-icon material-icons-outlined">drive_file_move</span>
<span>移动到...</span>
</div>
</a-menu-item>
<a-menu-divider />
<a-menu-item @click="handTreeleDelete">
<div class="menu-item" style="color: #f5222d">
<span class="material-icons menu-icon">delete</span>
<span>删除</span>
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</div>
</div>
<div v-show="data.showInput">
<a-input
placeholder="新目录"
v-model:value="inputValue"
@blur="showInputCancle(data)"
@keydown.enter="showInputCancle(data)"
/>
</div>
</a-row>
</template>
</a-tree>
<div class="move_but" v-show="showRadio">
<a-space wrap>
<a-button type="primary" size="small" @click="submitMobileDirectory">确定</a-button>
<a-button size="small" @click="cancelMovingDirectory">取消</a-button>
</a-space>
</div>
</div>
</div>
<!-- 上传文件 -->
<uploadFile
:uploadVisible="showUploadModal"
:treeData="uplodData"
:directoryUuid="currentDirectoryUuid"
@cancel="handleClsoeUploadFile"
@ok="handleUploadFile"
/>
</template>
<script lang="ts">
// @ts-nocheck
import { defineComponent, ref, h, onMounted, watch } from 'vue'
import { Tree, message, Modal } from 'ant-design-vue'
import { FolderOutlined, ExclamationCircleOutlined, HomeOutlined } from '@ant-design/icons-vue'
import uploadFile from './uploadFile.vue'
import { DocumentApi } from '@/generated/documents/index'
import { useRouter } from 'vue-router'
export default defineComponent({
components: {
ATree: Tree,
FolderOutlined,
uploadFile,
HomeOutlined,
},
emits: ['change', 'upload'],
props: ['newCurrentDirectoryUuid'],
setup(props: any, { emit }: any) {
const router = useRouter()
const uuid = router.currentRoute.value.params.id as string
const documentsApi = new DocumentApi()
const appId = router.currentRoute.value.params.id as number | string
const name = router.currentRoute.value.query.name as string
const infoNewCurrentDirectoryUuid = ref([])
let userInfo =
sessionStorage.getItem('user') &&
sessionStorage.getItem('user') != '' &&
sessionStorage.getItem('user') != 'undefined'
? JSON.parse(sessionStorage.getItem('user') || '{}')
: {}
const metaData = [
{
keyName: 'knowledge_base_id',
keyValue: appId,
},
{
keyName: 'knowledge_base_name',
keyValue: name,
},
{
keyName: 'userId',
keyValue: userInfo.id,
},
{
keyName: 'userLoginId',
keyValue: userInfo.loginId,
},
]
watch(
() => props.newCurrentDirectoryUuid,
(newValue) => {
infoNewCurrentDirectoryUuid.value = [newValue]
let nodeInfo = {
node: {
dataRef: {
title: infoNewCurrentDirectoryUuid.value[0].name, // 传递节点的标题或其他必要信息
// 其他可能需要传递的属性
key: infoNewCurrentDirectoryUuid.value[0].uuid,
},
},
}
console.log(
infoNewCurrentDirectoryUuid.value,
infoNewCurrentDirectoryUuid.value[0].uuid,
infoNewCurrentDirectoryUuid.value[0].name,
'newCurrentDirectoryUuid.value'
)
if (
infoNewCurrentDirectoryUuid.value.length !== 0 &&
infoNewCurrentDirectoryUuid.value[0].uuid !== undefined
) {
handleNodeSelect(infoNewCurrentDirectoryUuid.value[0].uuid, nodeInfo)
}
},
{ deep: true }
)
onMounted(() => {
getTreeData()
})
// 初始化树数据
const treeData = ref([])
// 上传文件要用
const uplodData = ref([])
// 获取根目录的uuid
const uuidRootDirectory = ref('')
// 获取根目录的数据
const rootDirectory = ref('')
// const treeData = ref([
// {
// key: '1',
// title: 'Node 1',
// checked: false,
// children: [
// {
// key: '2',
// title: 'Node 1-1',
// checked: false,
// },
// {
// key: '3',
// title: 'Node 1-2',
// checked: false,
// },
// ],
// },
// {
// key: '10',
// title: 'Node 10',
// checked: false,
// children: [
// {
// key: '20',
// title: 'Node 1-10',
// checked: false,
// },
// {
// key: '30',
// title: 'Node 1-20',
// checked: false,
// },
// ],
// },
// ])
const updateProperties = (directory: any) => {
directory.title = directory.name
directory.key = directory.uuid
// delete directory.name
// delete directory.uuid
directory.checked = false
directory.treeNodeselected = false
if (directory.subDirectories && directory.subDirectories.length > 0) {
// 将 subDirectories 改为 children
directory.children = directory.subDirectories
// delete directory.subDirectories
directory.children.forEach((child: any) => {
updateProperties(child)
})
}
}
// 获取初始化数据
const getTreeData = () => {
documentsApi.directoryTreeData(uuid).then((res: any) => {
const { code, data } = res.data
if (code === '200') {
// 上传文件用到的data
uplodData.value = [data]
console.log(uplodData.value, ' uplodData.value')
selectedKey.value = [data.uuid]
rootDirectory.value = data
// sessionStorage.setItem('directoryUuid', JSON.stringify(data))
// data.subDirectories.forEach((directory: any) => {
// console.log(directory, 'directory')
// updateProperties(directory)
// })
const dataArray = data.subDirectories // 之前将对象转换为数组,新版本直接获取子目录
dataArray.forEach((directory: any) => {
updateProperties(directory)
})
uuidRootDirectory.value = data
treeData.value = dataArray
}
})
}
// 全部展开全部收起
const expandedKeys = ref<string[]>([]) // 初始为空数组表示全部收起
const onTreeExpand = (keys: any) => {
// 将展开的节点保存到 expandedKeys 中
expandedKeys.value = keys
}
const expandAllChildren = (node: { key: any; children: any[] }) => {
// 将当前节点的 key 加入 expandedKeys 中
expandedKeys.value.push(node.key)
// 递归处理子节点
if (node.children && node.children.length > 0) {
node.children.forEach((childNode: any) => {
expandAllChildren(childNode) // 递归展开所有子节点
})
}
}
const toggleTreeExpand = () => {
if (expandedKeys.value.length === 0) {
// 全部展开
treeData.value.forEach((node: any) => {
expandAllChildren(node) // 递归展开所有子节点
})
} else {
// 全部收起
expandedKeys.value = []
}
}
// 新增节点
const selectedKey = ref<string>('') // 用于存储当前选中节点的 key
const showInput = ref(false) //控制新增input框的展示
const inputValue = ref<string>('') //新增节点的title
const deleteTitle = ref<string>('') //删除所用到的title
const newrEnameTitle = ref<string>('') //重命名获取最新tile
const newDirectoryInput = ref<string>('')
const newDirectoryShow = ref(false)
const createSubdirectory = (data) => {
selectedKey.value = [data.key]
isRootDirectorySelected.value = false
addTreeClcik()
}
// 处理节点选中事件 获取到当前点击的节点
const handleNodeSelect = (
selectedKeys: any[],
info: { node: { dataRef: { title: any } } }
) => {
// if (selectedKeys[0] == infoNewCurrentDirectoryUuid.value[0].key) {
// sessionStorage.setItem('directoryUuid', info.node.dataRef.key)
console.log(selectedKeys, info.node.dataRef, '1111')
if (selectedKeys[0]) {
emit('change', JSON.stringify(info.node.dataRef))
deleteTitle.value = info.node.dataRef.title
selectedKey.value = [selectedKeys[0]] // 更新选中的节点 key
newDirectoryShow.value = false
isRootDirectorySelected.value = false
// info.node.dataRef.treeNodeselected = true
// 遍历整个树节点数据,设置选中节点的 treeNodeselected 为 true,其他节点为 false
const updateTreeNodes = (nodes) => {
nodes.forEach((node) => {
if (node.key === info.node.dataRef.key) {
node.treeNodeselected = true
} else {
node.treeNodeselected = false
node.showInput = false
node.editing = false
}
if (node.children) {
updateTreeNodes(node.children)
}
})
}
updateTreeNodes(treeData.value)
}
// } else {
// return false
// }
}
// a-tree选中的key
const addTreeClcik = () => {
// isRootDirectorySelected.value = false
// inputValue.value = ''
if (!isRootDirectorySelected.value) {
if (selectedKey.value[0]) {
// 在 treeData 中找到选中的节点
const findNode = (nodes: any[], parentKey: null) => {
newDirectoryShow.value = false
newDirectoryInput.value = ''
nodes.forEach((node: { key: any; showInput: boolean; children: any }) => {
node.treeNodeselected = false
node.showInput = false
if (node.key === selectedKey.value[0]) {
node.showInput = true
node.treeNodeselected = true
if (parentKey && node.children) {
// 隐藏父节点的子节点的输入框
nodes.forEach((n: { key: any; children: any[] }) => {
if (n.key === parentKey && n.children) {
n.children.forEach((child: { showInput: boolean }) => {
child.showInput = false
child.treeNodeselected = false
})
}
})
}
} else {
node.showInput = false
node.treeNodeselected = false
if (node.children) {
findNode(node.children, node.key)
}
}
})
}
findNode(treeData.value, selectedKey.value[0])
} else {
newDirectoryShow.value = false
// message.error('请选择需要新增的新目录')
treeData.value.forEach((node: { showInput: boolean; children: any[] }) => {
node.showInput = false
node.treeNodeselected = false
if (node.children) {
node.children.forEach((child: { showInput: boolean }) => {
child.showInput = false
node.treeNodeselected = false
})
}
})
}
} else {
newDirectoryShow.value = true
}
}
const regularExpression = ref(new RegExp('^[a-zA-Z0-9_-][a-zA-Z0-9 _-]*$'))
const showInputCancle = (datakey: { key: any }) => {
// 阻止事件冒泡,避免同时触发blur事件
// datakey.stopPropagation()
if (inputValue.value) {
console.log(
inputValue.value,
regularExpression.value.test(inputValue.value),
'regularExpression.value.test(inputValue.value)'
)
const isMatch = regularExpression.value.test(inputValue.value) // 进行匹配
if (!isMatch) {
message.warning('请检查存在特殊字符')
} else {
let data = {
parentUuid: datakey.key,
name: inputValue.value,
metaDataList: metaData,
}
documentsApi.addNewDirectory(data).then((res: any) => {
const { code, data } = res.data
if (code === '200') {
getTreeData()
emit('upload')
inputValue.value = ''
treeData.value.forEach((node: { showInput: boolean; children: any[] }) => {
node.showInput = false
if (node.children) {
node.children.forEach((child: { showInput: boolean }) => {
child.showInput = false
})
}
})
}
})
}
} else {
message.warning('新目录不能为空')
}
}
// 新增一级目录
const newDirectoryBlue = (data) => {
const isMatch = regularExpression.value.test(newDirectoryInput.value) // 进行匹配
if (!isMatch) {
message.warning('请检查存在特殊字符')
} else {
data.stopPropagation()
if (newDirectoryInput.value) {
let data = {
parentUuid: uuidRootDirectory.value.uuid,
name: newDirectoryInput.value,
metaDataList: metaData,
}
documentsApi.addNewDirectory(data).then((res: any) => {
const { code, data } = res.data
if (code === '200') {
getTreeData()
emit('upload')
newDirectoryShow.value = false
newDirectoryInput.value = ''
}
})
} else {
newDirectoryShow.value = false
newDirectoryInput.value = ''
}
}
}
// 处理拖拽事件
const isSameLevel = (treeData: any, dragKey: any, dropKey: any) => {
let dragNode: { parent: any }, dropNode: { parent: any }
// 递归查找拖拽节点和目标节点
function findNodes(data: string | any[], key: any) {
for (let i = 0; i < data.length; i++) {
if (data[i].key === key) {
return data[i]
}
if (data[i].children) {
const result = findNodes(data[i].children, key)
if (result) {
return result
}
}
}
return null
}
dragNode = findNodes(treeData, dragKey)
dropNode = findNodes(treeData, dropKey)
if (dragNode && dropNode && dragNode.parent === dropNode.parent) {
return true // 在同级操作
} else {
return false // 不在同级操作
}
}
const handleDrop = (info: any) => {
const dropKey = info.node.key
const dragKey = info.dragNode.key
const dropPos = info.node.pos.split('-')
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
const loop = (
data: string | any[],
key: any,
callback: {
(item: any, index: any, arr: any): void
(item: any): void
(item: any): void
(item: any, index: any, arr: any): void
(arg0: any, arg1: number, arg2: any): any
}
) => {
for (let i = 0; i < data.length; i++) {
if (data[i].key === key) {
return callback(data[i], i, data)
}
if (data[i].children) {
loop(data[i].children, key, callback)
}
}
}
const data = [...treeData.value]
let dragObj: any
loop(data, dragKey, (item: any, index: number, arr: any[]) => {
arr.splice(index, 1)
dragObj = item
})
if (!info.dropToGap) {
loop(data, dropKey, (item: { children: any[] }) => {
item.children = item.children || []
// 示例添加到头部,可以是随意位置
item.children.unshift(dragObj)
})
} else if (
(info.node.props.children || []).length > 0 &&
info.node.props.expanded &&
dropPosition === 1
) {
loop(data, dropKey, (item: { children: any[] }) => {
item.children = item.children || []
// 示例添加到头部,可以是随意位置
item.children.unshift(dragObj)
})
} else {
let ar: any[]
let i: number
loop(data, dropKey, (item: any, index: any, arr: any) => {
ar = arr
i = index
})
if (dropPosition === -1) {
ar.splice(i, 0, dragObj)
} else {
ar.splice(i + 1, 0, dragObj)
}
}
// treeData.value = data
//dragKey 需要移动的目录
// dropKey 移动到指定目录uuid
if (isSameLevel(treeData, dragKey, dropKey)) {
console.log('拖拽和目标在同级操作')
} else {
console.log(info.node, info.dragNode, 'info.dragNode')
const isNameDuplicate = checkNameDuplicate(info.dragNode.title, info.node.children)
if (info.node.children && isNameDuplicate) {
message.warning('名称重复,不能移动')
getTreeData()
return
}
// console.log('拖拽和目标不在同级操作')
let dropdatakey = {
parentUuid: dropKey, //要传到的父节点uuid
name: info.dragNode.title,
metaDataList: metaData,
uuid: dragKey,
}
documentsApi.renameDirectories(dragKey, dropdatakey).then((res: any) => {
const { code } = res.data
if (code === '200') {
showRadio.value = false
targetuuid.value = ''
getTreeData()
emit('upload')
}
})
}
}
const checkNameDuplicate = (name: string, children: any[]) => {
return children.some((child) => child.title === name)
}
// 删除tree
// 删除提示框所需
const handTreeleDelete = () => {
if (selectedKey.value[0]) {
Modal.confirm({
title: '删除目录',
icon: h(ExclamationCircleOutlined),
content: `您确定要删除目录“${deleteTitle.value}”吗?删除后相关的数据将无法恢复`,
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk() {
//deleteTitle.value 删除的目录名称
const uuid = selectedKey.value[0] //获取需要删除的key
documentsApi.directoryDelete(uuid).then((res: any) => {
const { code } = res.data
if (code === '200') {
emit('upload')
getTreeData()
}
})
},
onCancel() {
console.log('取消')
},
})
}
}
// 重命名
const handTreeRename = (data: any) => {
newrEnameTitle.value = data.title
const findAndRename = (nodes: any[], targetKey: any) => {
nodes.forEach(
(node: { key: any; editing: boolean; showInput: boolean; children: any }) => {
if (node.key === targetKey) {
node.editing = true
node.showInput = false
} else {
node.editing = false
node.showInput = false
}
if (node.children) {
findAndRename(node.children, targetKey)
}
}
)
}
findAndRename(treeData.value, data.key)
}
// 重命名递归查找并更新节点标题
const findAndUpdateNode = (nodes: string | any[], keyToFind: any, newTitle: any) => {
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i]
if (node.key === keyToFind) {
// 找到匹配的 key,更新标题
node.title = newTitle
return true // 返回 true 表示找到并更新成功
}
if (node.children) {
const found = findAndUpdateNode(node.children, keyToFind, newTitle)
if (found) {
return true // 如果在子节点中找到,则直接返回 true
}
}
}
return false // 如果未找到,则返回 false
}
// 重命名内容的方法
const saveNode = (nodedata: any, newTitle: any, event: Event) => {
const isMatch = regularExpression.value.test(newrEnameTitle.value) // 进行匹配
if (!isMatch) {
message.warning('请检查存在特殊字符')
getTreeData()
} else {
if (newrEnameTitle.value && newrEnameTitle.value !== nodedata.title) {
let data = {
parentUuid: nodedata.parentUuid, //父节点uuid
name: newrEnameTitle.value,
metaDataList: metaData,
uuid: nodedata.key,
}
documentsApi.renameDirectories(nodedata.key, data).then((res: any) => {
const { code } = res.data
if (code === '200') {
const success = findAndUpdateNode(treeData.value, nodedata.key, newTitle)
emit('upload')
nodedata.editing = false
newrEnameTitle.value = ''
if (!success) {
console.error('未找到匹配的子级节点 key')
}
getTreeData()
}
})
event.stopPropagation() // 阻止事件冒泡
} else {
message.warning('名称不能为空或名称重复')
getTreeData()
const success = findAndUpdateNode(treeData.value, nodedata.key, newTitle)
nodedata.editing = false
if (!success) {
console.error('未找到匹配的子级节点 key')
}
}
}
}
// 移动到。。
const showRadio = ref(false) //控制移动radio的显示隐藏
const thisDirectoryTitle = ref<string>('')
const targetuuid = ref<string>('')
// 移动到某一个节点,并且选择key
const handleSidebarRadioChange = (key: any) => {
const updateCheckedStatus = (items: any[], radioKey: any) => {
items.forEach((item: { key: any; children: any }) => {
if (item.key === radioKey) {
item.checked = true
} else {
item.checked = false
}
if (item.children) {
updateCheckedStatus(item.children, radioKey)
}
})
}
targetuuid.value = key
updateCheckedStatus(treeData.value, key)
}
const handMOVEToClcik = (data: any) => {
thisDirectoryTitle.value = data
showRadio.value = true
data.disabled = true
}
// 确定提交移动目录 获取到key title
const submitMobileDirectory = () => {
if (targetuuid.value) {
let data = {
parentUuid: targetuuid.value, //要传到的父节点uuid
name: thisDirectoryTitle.value.title,
metaDataList: metaData,
uuid: thisDirectoryTitle.value.key,
}
documentsApi.renameDirectories(thisDirectoryTitle.value.key, data).then((res: any) => {
const { code } = res.data
if (code === '200') {
showRadio.value = false
rootDirectory.value.checked = false
targetuuid.value = ''
getTreeData()
emit('upload')
}
})
} else {
message.warning('请选择需要移动的目录')
}
}
// 取消提交移动目录
const cancelMovingDirectory = () => {
showRadio.value = false
getTreeData()
}
// 上传文件
const showUploadModal = ref<Boolean>(false)
const currentDirectoryUuid = ref<string>('')
const directoryUploadFilesClick = (data: any) => {
currentDirectoryUuid.value = data.key
showUploadModal.value = true
}
// 取消上传
const handleClsoeUploadFile = () => {
showUploadModal.value = false
}
// 上传成功关闭弹窗
const handleUploadFile = () => {
emit('upload')
showUploadModal.value = false
}
// 所有文件点击
const isRootDirectorySelected = ref(true)
const handRootDirectoryClick = (root) => {
getTreeData()
isRootDirectorySelected.value = true // 切换选中状态
selectedKey.value = []
let dataArrayRoot = [root]
dataArrayRoot.forEach((directory: any) => {
directory.title = directory.name
directory.key = directory.uuid
delete directory.name
delete directory.uuid
directory.checked = false
})
console.log(dataArrayRoot[0].key, 'root')
emit('change', JSON.stringify(dataArrayRoot[0]))
}
return {
treeData,
handleDrop,
expandedKeys,
toggleTreeExpand,
addTreeClcik,
onTreeExpand,
handleNodeSelect,
showInput,
inputValue,
regularExpression,
handTreeleDelete,
handTreeRename,
saveNode,
newrEnameTitle,
showRadio,
handleSidebarRadioChange,
handMOVEToClcik,
thisDirectoryTitle,
submitMobileDirectory,
cancelMovingDirectory,
newDirectoryShow,
newDirectoryInput,
newDirectoryBlue,
showInputCancle,
directoryUploadFilesClick,
showUploadModal,
handleClsoeUploadFile,
handleUploadFile,
currentDirectoryUuid,
selectedKey,
rootDirectory,
handRootDirectoryClick,
isRootDirectorySelected,
uplodData,
createSubdirectory,
infoNewCurrentDirectoryUuid,
}
},
})
</script>
<style lang="less" scoped>
.directory_d {
display: flex;
padding: 13px 16px;
border-bottom: 1px solid #eaecf0;
.directory_title {
flex: 5;
}
.directory_but {
flex: 1;
}
}
.doc_action_button {
padding: 0;
box-shadow: none;
outline: none;
border: none;
width: 32px;
height: 20px;
background-color: transparent;
&:hover {
background-color: #1018280f;
}
}
.tree_d {
padding-top: 13px;
}
.sidebar_list {
padding: 0px 0px 0px 5px;
width: 100%;
&:hover .list_three {
display: block;
}
display: flex;
.list_one {
display: flex;
}
.list_two {
width: 230px;
.icon_title {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; /* 设置容器的宽度 */
padding-left: 10px;
}
}
.list_three {
display: none;
position: absolute;
right: 0px;
.three_two_icon {
display: flex;
}
.material-icons {
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #667085;
font-size: 20px;
cursor: pointer;
}
}
}
/deep/ .opAnt-tree-list-holder-inner {
align-items: flex-start;
background-color: #f9fafb;
}
/deep/ .opAnt-tree-treenode {
display: flex;
align-items: flex-start;
padding: 0 0 8px 0;
outline: none;
}
/deep/ .material-icons {
font-size: 16px;
padding-right: 0px !important;
}
.move_but {
padding: 10px;
border-top: 1px solid #eaecf0;
}
.move_directory {
padding: 5px 15px;
font-size: 14px;
color: #101828;
.directory_name {
padding: 5px 5px;
.directory_name_icon {
display: flex;
align-items: center;
gap: 2px;
align-self: stretch;
border-radius: var(--BorderRadius-borderRadius, 6px);
border: 1px solid var(--colorLink, #2f54eb);
background: var(--Primary-colorPrimaryBg, #f0f5ff);
padding: 5px 10px;
}
}
}
.new_durectory {
padding: 0px 10px;
}
/deep/ :where(.css-dev-only-do-not-override-1hsjdkk).opAnt-tree .opAnt-tree-node-content-wrapper,
:where(.css-dev-only-do-not-override-1hsjdkk).opAnt-tree .opAnt-tree-checkbox + span {
position: static;
}
/deep/
:where(.css-dev-only-do-not-override-1hsjdkk).opAnt-tree
.opAnt-tree-node-content-wrapper.opAnt-tree-node-selected,
:where(.css-dev-only-do-not-override-1hsjdkk).opAnt-tree
.opAnt-tree-checkbox
+ span.opAnt-tree-node-selected {
// background-color: #e6f4ff;
background: #fff;
// color: #2f54eb;
// border: 1px solid #85a5ff;
}
.root_style {
display: flex;
padding: 0 6px 0 6px;
}
.root_directory {
display: flex;
padding: 5px 5px 5px 5px;
width: 100%;
cursor: pointer;
}
.root_directory_icon {
padding-right: 10px;
}
.root_directory_title {
}
.selected {
/* 选中状态下的样式 */
background: #f0f5ff;
color: #2f54eb;
border: 1px solid #85a5ff;
border-radius: 4px;
}
.treeNodeStyle {
background: #f0f5ff;
color: #2f54eb;
border: 1px solid #85a5ff;
border-radius: 4px;
padding: 0px 0px 0px 5px;
}
</style>