From 23513121672c8b5325aa8dbbe4b274b60500d316 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Fri, 20 Dec 2024 17:06:46 +0800
Subject: [PATCH] feat: add lock, home icons

---
 packages/plugins/page/src/PageTree.vue | 44 +++++++++++++-------------
 packages/plugins/page/src/Tree.vue     | 16 ++++++++--
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue
index 4837e8e4f..fc9f13af8 100644
--- a/packages/plugins/page/src/PageTree.vue
+++ b/packages/plugins/page/src/PageTree.vue
@@ -13,7 +13,6 @@
         <span class="title">{{ groupItem.groupName }}</span>
       </template>
       <div class="app-manage-tree">
-        <!-- TODO 1. lock, home icons -->
         <draggble-tree
           :data="groupItem.data"
           label-key="name"
@@ -25,6 +24,8 @@
         >
           <template #row-suffix="{ node }">
             <div :class="['actions']">
+              <svg-icon v-if="isPageLocked(node.rawData)" name="locked"></svg-icon>
+              <svg-icon v-if="node.rawData.isHome" name="home"></svg-icon>
               <tiny-popover
                 :ref="(el) => setPopoverRef(el, node.id)"
                 placement="bottom-start"
@@ -42,7 +43,7 @@
                   </div>
                 </div>
                 <template #reference>
-                  <svg-icon name="ellipsis"></svg-icon>
+                  <svg-icon name="ellipsis" class="auto-hidden"></svg-icon>
                 </template>
               </tiny-popover>
             </div>
@@ -244,9 +245,12 @@ export default {
       nodeClick(null, node.rawData)
     }
 
+    const isPageLocked = (pageData) => {
+      return getCanvasStatus(pageData.occupier).state === PAGE_STATUS.Lock
+    }
+
     const handleClickPageSettings = (node) => {
-      const isPageLocked = getCanvasStatus(node.rawData.occupier).state === PAGE_STATUS.Lock
-      openSettingPanel(null, node.rawData, isPageLocked)
+      openSettingPanel(null, node.rawData, isPageLocked(node.rawData))
     }
 
     const createPage = (node) => {
@@ -257,22 +261,15 @@ export default {
       emit('createFolder', node.id)
     }
 
-    const copyPage = () => {
-      // TODO
-    }
-
-    const deleteNode = () => {
-      // TODO
-    }
-
     const rowOperations = [
       { type: 'settings', label: '设置', action: handleClickPageSettings },
       { type: 'divider' },
       { type: 'createPage', label: '新建子页面', action: createPage },
-      { type: 'createFolder', label: '新建子文件夹', action: createFolder },
-      { type: 'divider' },
-      { type: 'copy', label: '复制页面', action: copyPage },
-      { type: 'delete', label: '删除', class: ['danger'], action: deleteNode }
+      { type: 'createFolder', label: '新建子文件夹', action: createFolder }
+      // TODO 复制和删除的逻辑耦合在其他组件内，暂时屏蔽
+      // { type: 'divider' },
+      // { type: 'copy', label: '复制页面', action: copyPage },
+      // { type: 'delete', label: '删除', class: ['danger'], action: deleteNode }
     ].map((item) => ({
       ...item,
       action: (node) => {
@@ -285,7 +282,7 @@ export default {
 
     const getRowOperations = (groupId, node) => {
       if (groupId === COMMON_PAGE_GROUP_ID) {
-        return rowOperations.slice(0, 2).concat(rowOperations.slice(5))
+        return rowOperations.slice(0, 1)
       }
       if (!node.rawData.isPage) {
         return rowOperations.filter((item) => item.type !== 'copy')
@@ -339,6 +336,7 @@ export default {
         // TODO 页面更换父节点后，原来每次变更需要填写变更信息
         fetchPageDetail(dragged.id).then((pageDetail) => {
           pageDetail.parentId = newParent.id
+          // TOOD 接口失败要回退，原来逻辑没有处理回退
           if (pageDetail.isPage) {
             updatePage(pageDetail)
           } else {
@@ -392,6 +390,7 @@ export default {
       getRowOperations,
       handleClickRow,
       handleMoveNode,
+      isPageLocked,
       handleClickPageSettings
     }
   }
@@ -488,19 +487,19 @@ export default {
     }
   }
   .actions {
-    display: none;
+    display: flex;
     align-items: center;
     gap: 8px;
     svg {
       color: var(--te-common-icon-secondary);
       outline: none;
     }
-    &.show {
-      display: flex;
+    .auto-hidden {
+      display: none;
     }
   }
-  .row:hover .actions {
-    display: flex;
+  .row:hover .actions .auto-hidden {
+    display: unset;
   }
 }
 </style>
@@ -510,6 +509,7 @@ export default {
   padding: 0;
   margin-top: 4px;
   .operation-list {
+    min-width: 110px;
     padding: 8px 0;
     & > div {
       padding: 0 12px;
diff --git a/packages/plugins/page/src/Tree.vue b/packages/plugins/page/src/Tree.vue
index 662d97e9a..f5c47bb3c 100644
--- a/packages/plugins/page/src/Tree.vue
+++ b/packages/plugins/page/src/Tree.vue
@@ -2,13 +2,20 @@
   <div class="draggable-tree">
     <div
       v-for="(node, rowIndex) of filteredNodesWithAncestors"
-      :class="['row', { active: active === node.id, hover: hoveringNodeId === node.id }]"
+      :class="[
+        'row',
+        {
+          active: active === node.id,
+          ['hover-border']: hoveringNodeId === node.id
+        }
+      ]"
       :key="node.id"
       draggable="true"
       @dragstart="handleDragStart($event, node)"
       @dragover="handleDragOver($event, node)"
       @dragenter="handleDragOver($event, node)"
       @drop="handleDrop($event, node)"
+      @dragend="handleDragEnd"
     >
       <div class="content" @click="handleClickRow(node)">
         <layer-lines :line-data="layerLine[rowIndex]" :level="node.level"></layer-lines>
@@ -177,7 +184,6 @@ const handleDrop = (event, node) => {
 
   const dragged = draggedNode.value
   draggedNode.value = null
-  hoveringNodeId.value = null
 
   if (!dragged) {
     return
@@ -189,6 +195,10 @@ const handleDrop = (event, node) => {
     emit('moveNode', dragged, node)
   }
 }
+
+const handleDragEnd = () => {
+  hoveringNodeId.value = null
+}
 </script>
 
 <style lang="less" scoped>
@@ -236,7 +246,7 @@ const handleDrop = (event, node) => {
         color: var(--te-common-bg-primary-checked);
       }
     }
-    &.hover {
+    &.hover-border {
       border: 1px solid var(--te-common-border-checked);
     }
   }