支持共享空间目录树结构

.gitignore

@@ -21,3 +21,4 @@ src/types/auto-imports.d.ts
 
 package-lock.json
 pnpm-lock.yaml
+*.code-workspace

src/views/doc/manage.vue

@@ -52,17 +52,24 @@ const currentHoverRow=ref("") //table 行的按钮控制
 const selectedValue = ref("sixhour") //分享弹窗的世间变量
 const tabSelected=ref<matterInfo[]>([]) //table组件多选数据维护
 //to support tree mode refactor
-const treeData=ref<matterTree[]>([{name:'个人空间',uuid:'root',children:[]}])
+const treeData=ref<matterTree[]>([])//{name:'个人空间',uuid:'root',children:[]}
 const treeRef = ref();
 const currentNode=ref<matterTree>({})  //打开的路径层次
 const officeHost=import.meta.env.VITE_OFFICE_HOST
 const dynamicVNode = ref<VNode | null>(null) //permission 组件的父组件
+
+
 const multipleTableRef = ref<TableInstance>()
 const paginInfo = ref({ page: 0, total: 0 })
 
 const PRIVATESPACE = ref(true) //是空间状态的控制 2种：私有云盘和共享空间
 const SpaceID= ref<{name:string,uuid:string,userUuid:string}>({})  //当前space的id
 const SpaceList=ref<{name:string,uuid:string,userUuid:string}[]>([])
+const spaceEleRef = ref() //space组件的引用,它与spaceTreeRef没有父子关系，反而是为了处理spaceTree的操作而创建的该变量
+const spaceTreeData=ref<matterTree[]>([])//{name:'个人空间',uuid:'root',children:[]}
+const spaceTreeRef = ref(); //space的树树组件的引用
+let spaceNodeUid="" //用来判断树组件的展开和关闭，如何只是展开和关闭的点击事件不在刷新，通currentNode的作用
+
 const Departs = computed(() => {
     return `${userStore.userInfoCont.company},${userStore.userInfoCont.department},${userStore.userInfoCont.organization}`
 })
@@ -307,7 +314,7 @@ function onCreateDir(){
       {uuid:resp.data.uuid,dir:false,name:resp.data.name,puuid:resp.data.puuid},
       currentNode.value.uuid
     )
-    onLoadMatterList()
+    //onLoadMatterList()
   })
   .catch((e)=>{
     ElMessage.error(e.msg)
@@ -353,6 +360,8 @@ function onNodeClick(data:matterTree,node:TreeNode,self:any,env:any){
   if (currentNode.value.uuid === data.uuid) return;
   const cuuid = data.uuid
   currentNode.value = data
+  onLoadMatterList()
+  return
   let _page: matterPage = {
       page: 0,
       pageSize: 50,
@@ -441,14 +450,51 @@ function onNewSpace(){
   })
 }
 
+function onSpaceNodeClick(data:matterTree,node:TreeNode,self:any,env:any){
+  //如果在单个组件上重复点击，不在刷新请求
+  if(spaceNodeUid==data.uuid) return;
+  spaceNodeUid=data.uuid
+
+  if(data.uuid.startsWith("s0") && data.uuid!=SpaceID.value.uuid){ //切换空间
+    SpaceID.value={
+      name: data.name ?? "",
+      uuid: data.uuid ?? "",
+      userUuid: data.userUuid ?? ""
+    }; 
+    PRIVATESPACE.value=false;
+  }else{
+    let matter= {
+      uuid:data.uuid==SpaceID.value.uuid?"root":data.uuid,
+      puuid: data.puuid,
+      name:data.name,
+      agent:data.agent,
+      dir:true
+    }
+    //打开具体的节点
+    spaceEleRef.value.handleDoubleClick(matter)
+  }
+}
+
+function flushSpaceTree(uuid:string,data:matterTree[]){
+  if(uuid==="root") uuid=SpaceID.value.uuid
+  spaceTreeRef.value.updateKeyChildren(uuid,data)
+}
+
 //------------------------------------------------------
 //http://172.20.2.87:6010/api/alien/preview/5a10aaf6-396e-4d9a-7e87-3c5c8029d4db/123.png?ir=fill_100_100
 //渲染完页面再执行
 onMounted(() => {
-  onNodeClick(treeData.value[0], null as unknown as TreeNode, null, null)
+  treeRef.value.append(
+    {name:'个人空间',uuid:'root',dir:false},
+    currentNode.value.uuid
+  )
+
   //加载我的空间列表
   getMySpaces(uid,{roles:Departs}).then((resp)=>{
-    SpaceList.value=resp.data
+    //SpaceList.value=resp.data
+    resp.data.forEach((item)=>{
+      spaceTreeRef.value.append({name:item.name,uuid:item.uuid,dir:false,userUuid:item.userUuid})
+    })
   })
 });
 
@@ -466,6 +512,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
       style="max-width: 600px"
       :data="treeData"
       node-key="uuid"
+      highlight-current
       lazy
       :props="{label: 'name',children:'children',isLeaf:'dir'}"
       :load="onNodeExpand"
@@ -473,7 +520,18 @@ const handleSelectionChange = (val:matterInfo[]) => {
       @node-click="onNodeClick"
     />
     <el-button style="margin: 10px 0;" :icon="Plus"  @click="onNewSpace"> 共享空间</el-button>
-    <ul style="background-color: white;">
+    <el-tree
+      ref="spaceTreeRef"
+      style="max-width: 600px"
+      :data="spaceTreeData"
+      node-key="uuid"
+      accordion
+      highlight-current
+      lazy
+      :props="{label: 'name',children:'children',isLeaf:'dir'}"
+      @node-click="onSpaceNodeClick"
+    />
+    <ul style="background-color: white;max-width: 600px;">
       <li class="spaceitem" v-for="sp in SpaceList" @click="()=>{SpaceID=sp; PRIVATESPACE=false;}">{{ sp.name }}</li>
     </ul>
   </div>
@@ -565,8 +623,10 @@ const handleSelectionChange = (val:matterInfo[]) => {
     </el-row>
   </div>
   <div v-else class="app_container">
-    <space :uid="uid" :spaceid="SpaceID.uuid" :roles="Departs" :spacename="SpaceID.name" :owner="SpaceID.userUuid"
-      :officeHost="officeHost" :site-host="siteHost" :api-u-r-l="apiURL"></space> 
+    <space ref="spaceEleRef" :uid="uid" :tree="spaceTreeRef" 
+      :spaceid="SpaceID.uuid" :roles="Departs" :spacename="SpaceID.name" :owner="SpaceID.userUuid"
+      :officeHost="officeHost" :site-host="siteHost" :api-u-r-l="apiURL"
+      :flushSpaceTree="flushSpaceTree"></space> 
   </div>
 
 
@@ -582,7 +642,8 @@ const handleSelectionChange = (val:matterInfo[]) => {
    height: 100%;
    overflow-y: auto;
    .el-tree{
-    --el-tree-node-hover-bg-color:#d9dadb;
+    --el-color-primary-light-9:#6eb3f8;
+    --el-tree-node-hover-bg-color:#a1c7ee;
     --el-tree-node-content-height:43px;
     --el-tree-expand-icon-color:#4c4c4e;
    }
@@ -593,7 +654,9 @@ const handleSelectionChange = (val:matterInfo[]) => {
   height: calc(100% - 10px);
   overflow: hidden;
   overflow-y: auto;
+  position: relative;
 }
+
 .search{
     margin-right: 20px;
     display:inherit;

src/views/doc/space.vue

@@ -6,7 +6,7 @@
 <script lang="ts" setup>
 import { getFileIcon, readableSize,fileType} from "./tools"
 import sharePermission from './sharePermission.vue';
-import { matterPage,matterInfo} from "@/api/doc/type"
+import { matterPage,matterInfo,matterTree} from "@/api/doc/type"
 import { doAccessManage,getSpaceMatterList,doCreateSpaceDir,doDelSpaceMatter,doDelSpace,
   doAiTraining ,doCreateAiagent,doFileUpload} from "@/api/doc/space"
 import { h } from 'vue'
@@ -29,6 +29,7 @@ const breadcrumbList=ref<matterInfo[]>([{name:"根目录",uuid:"root", dir:true}
 
 const tabSelected=ref<matterInfo[]>([]) //table组件多选数据维护
 const currentNode=ref<matterInfo>({})  //打开的路径层次
+let isNewNode=true //用来减少父组件树的重置
 
 const dynamicVNode = ref<VNode | null>(null) //permission 组件的父组件
 const paginInfo = ref({ page: 0, total: 0 })
@@ -43,18 +44,23 @@ const currentAgent=ref<{model:boolean,name:string,uuid:string}>({})
 
 //---------------------------------
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(defineProps<{  
   uid:string,   //当前用户的uuid,注意已经且必须通过base64编码,因为后端获取Identifier后，会base64解码
+  tree:object,
   spaceid:string,
   spacename:string,
   officeHost:string,
   siteHost:string,
   owner:string,
   apiURL:string,
-  roles:string
+  roles:string,
+
+  flushSpaceTree:(uuid:string,data:matterTree[])=>void
 }>(),{})
 
+//属性变更，特别是为了处理空间切换的状态更新
 watch(props,()=>{
+  currentNode.value.uuid="root"
   onLoadMatterList()
 })
 
@@ -159,6 +165,22 @@ function onLoadMatterList(){
     //page+1 是由于分页的起始index是1，而后端api的分页index起始是0
     paginInfo.value={total:resp.data.totalPages, page:resp.data.page}
     matterList.value=resp.data.data
+
+    //展开的时候暂时不做目录更新，看以后的使用情况
+    let node_data = resp.data.data.filter((item) => {
+        return item.dir
+    }).map(val => {
+      const copy = structuredClone(val)
+      copy.dir = !copy.dir
+      return copy
+    })
+
+    if(isNewNode) {
+      //由于支持目录树的原因，所有的空间根目录uuid都是root，这样树组件就有问题，所以用了spaceid作为其uuid
+      //但是云盘的根目录是root，所以当uuid是spaceid时，自动替换为root
+      if(currentNode.value.uuid=="root") props.flushSpaceTree(props.spaceid,node_data);
+      else props.flushSpaceTree(currentNode.value.uuid,node_data);
+    }
   })
 }
 //----------for dir-----------
@@ -190,10 +212,21 @@ function onCreateDir(){
   })
 }
 //------------------------------------------
-
+// @cell-dblclick="handleDoubleClick" 取消了目录双击打开功能
 //打开一个目录
 function handleDoubleClick(row:matterInfo,ind?:number){
   if(row.dir){
+    if(row.agent){
+      currentAgent.value={name:row.name,model:false,uuid:row.uuid}
+    }
+    isNewNode=true
+    //1：如果是当前目录的父组件没必要更新目录树
+    //2: 如果当前目录是当前空间根目录，没必要更新木林森
+    if(currentNode.value.puuid==row.uuid || row.uuid=="root") isNewNode=false
+    currentNode.value=row
+    onLoadMatterList()
+
+    /* 由于添加了父级树组件，breadcrumblis的功能废弃
     //table的双击事件也在此方法处理
     if(typeof(ind)==="number"){
       //返回某一级,面包屑组件的点击处理
@@ -204,7 +237,7 @@ function handleDoubleClick(row:matterInfo,ind?:number){
       }
     }else{
       //进入下一级
-      //TODO：当前的目录暂时作为agentid，后期判断当前dir是不是智能体，来决定是否更新
+      //如果目录是一个智能体，把当前智能体设置为该目录
       if(row.agent){
         currentAgent.value={name:row.name,model:false,uuid:row.uuid}
       }
@@ -212,7 +245,8 @@ function handleDoubleClick(row:matterInfo,ind?:number){
       currentNode.value=row
       breadcrumbList.value.push(row)
       onLoadMatterList()
-    }    
+    } 
+    */   
   }
 }
 
@@ -409,6 +443,8 @@ const handleSelectionChange = (val:matterInfo[]) => {
   tabSelected.value = val
 }
 
+defineExpose({handleDoubleClick})
+
 //判断是不是空间的所有者
 function isOwner(){
   return props.uid===btoa(props.owner)
@@ -416,12 +452,13 @@ function isOwner(){
 </script>
 
 <template>
+ 
   <div>
     <el-row :gutter="24" style="margin: 12px 0px;">
       <span class="el-breadcrumb" style="font-weight: bold;">[ {{ props.spacename }} ] : </span>
       <el-breadcrumb separator="/">
         <el-breadcrumb-item v-for="(item,index) in breadcrumbList" 
-          :key="index" @click="index===breadcrumbList.length-1?'': handleDoubleClick(item,index)">
+          :key="index" @click="handleDoubleClick(item,index)">
           <span style="font-weight: bold;">{{ item.name }}</span>
         </el-breadcrumb-item>
       </el-breadcrumb>
@@ -448,7 +485,7 @@ function isOwner(){
           />
           文件夹上传
         </div>
-        
+        <el-button @click="onLoadMatterList()">刷新</el-button>
         <el-button @click="createDir">新建目录</el-button>
         <el-button type="danger" plain @click="onDelMatter({uuid:currentNode.uuid,name:currentNode.name,dir:true,
           puuid:currentNode.puuid,path:currentNode.path})">删除目录</el-button>
@@ -470,7 +507,6 @@ function isOwner(){
         row-key="uuid"
         :row-style ="() => ({ lineHeight: '36px' })"
         @selection-change="handleSelectionChange"
-        @cell-dblclick="handleDoubleClick"
         @cell-mouse-enter="handleMouseEnter">
         <el-table-column type="selection" width="50" />
         <el-table-column width="450" property="name" label="文件名">