From ad794d83da0eedfe463a8f45c686c3ac5b454518 Mon Sep 17 00:00:00 2001
From: Gene <Pacify.98@gmail.com>
Date: Tue, 24 Dec 2024 16:18:18 +0800
Subject: [PATCH] feat: page tree supports dragging (#948)

* feat: add layer line to node tree

* feat: draggable tree

* feat: save immediately after dragging

* add hover style(demo)

* feat: add lock, home icons

* fx routing path issues

* move updateTreeData to the finally block

* fix generateTemplate execution error

* fix default value incorrect in create new folder form
---
 packages/common/js/http.js                    |  10 +-
 packages/plugins/page/src/LayerLines.vue      |  31 ++++
 packages/plugins/page/src/Main.vue            |   2 +-
 packages/plugins/page/src/PageGeneral.vue     |   1 -
 packages/plugins/page/src/PageTree.vue        | 132 +++++++++++----
 packages/plugins/page/src/Tree.vue            | 152 ++++++++++++++++--
 .../plugins/page/src/composable/usePage.js    |   6 +-
 .../src/plugins/parseSchemaPlugin.js          |   4 +-
 .../src/templates/vue-template/index.js       |   9 +-
 9 files changed, 289 insertions(+), 58 deletions(-)
 create mode 100644 packages/plugins/page/src/LayerLines.vue

diff --git a/packages/common/js/http.js b/packages/common/js/http.js
index 2460db797..4fcd6654a 100644
--- a/packages/common/js/http.js
+++ b/packages/common/js/http.js
@@ -41,7 +41,6 @@ export const handlePageUpdate = (pageId, params, routerChange, isCurEditPage) =>
   return getMetaApi(META_SERVICE.Http)
     .post(`/app-center/api/pages/update/${pageId}`, params)
     .then((res) => {
-      const { pageSettingState } = usePage()
       const { setSaved } = useCanvas()
       if (isVsCodeEnv) {
         generatePage({
@@ -58,9 +57,6 @@ export const handlePageUpdate = (pageId, params, routerChange, isCurEditPage) =>
         }
       }
 
-      // 更新页面管理的列表，如果不存在，说明还没有打开过页面管理面板
-      pageSettingState.updateTreeData?.()
-      pageSettingState.isNew = false
       useNotify({ message: '保存成功!', type: 'success' })
 
       // 更新 页面状态 标志
@@ -76,4 +72,10 @@ export const handlePageUpdate = (pageId, params, routerChange, isCurEditPage) =>
     .catch((err) => {
       useNotify({ title: '保存失败', message: `${err?.message || ''}`, type: 'error' })
     })
+    .finally(() => {
+      const { pageSettingState } = usePage()
+      // 更新页面管理的列表，如果不存在，说明还没有打开过页面管理面板
+      pageSettingState.updateTreeData?.()
+      pageSettingState.isNew = false
+    })
 }
diff --git a/packages/plugins/page/src/LayerLines.vue b/packages/plugins/page/src/LayerLines.vue
new file mode 100644
index 000000000..d9fd026bc
--- /dev/null
+++ b/packages/plugins/page/src/LayerLines.vue
@@ -0,0 +1,31 @@
+<template>
+  <span v-for="i in level - 1" :key="i" class="gap">
+    <svg v-if="lineData[i]" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <line x1="8" y1="0" x2="8" y2="12" stroke="#EBEBEB" stroke-width="1" />
+      <line v-if="(lineData[i] & 1) === 1" x1="8" y1="12" x2="20" y2="12" stroke="#EBEBEB" stroke-width="1" />
+      <line v-if="((lineData[i] >> 1) & 1) === 1" x1="8" y1="12" x2="8" y2="24" stroke="#EBEBEB" stroke-width="1" />
+    </svg>
+  </span>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  level: {
+    type: Number,
+    required: true
+  },
+  lineData: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+.gap {
+  width: 24px;
+  height: 24px;
+}
+</style>
diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index aeb2217d7..2932ce5ad 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -6,7 +6,7 @@
         name="add-folder"
         placement="bottom"
         tips="新建文件夹"
-        @click="createNewFolder"
+        @click="createNewFolder()"
       ></svg-button>
       <svg-button
         class="new-page-icon"
diff --git a/packages/plugins/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue
index 8ac9e11fa..b3e2069b3 100644
--- a/packages/plugins/page/src/PageGeneral.vue
+++ b/packages/plugins/page/src/PageGeneral.vue
@@ -175,7 +175,6 @@ export default {
       }
     }
 
-    // TODO 遗留问题：无法收缩下拉面板的树目录。如果使用tree自带的icon，无法动态设置expandIcon和shrinkIcon
     const getNodeIcon = (data) => {
       if (data.id === ROOT_ID) {
         return null
diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue
index 25674d463..d98e5120e 100644
--- a/packages/plugins/page/src/PageTree.vue
+++ b/packages/plugins/page/src/PageTree.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-manage-search">
-    <tiny-search v-model="state.pageSearchValue" clearable placeholder="搜索" @update:modelValue="searchPageData">
+    <tiny-search v-model="state.pageSearchValue" clearable placeholder="搜索">
       <template #prefix>
         <tiny-icon-search />
       </template>
@@ -13,15 +13,19 @@
         <span class="title">{{ groupItem.groupName }}</span>
       </template>
       <div class="app-manage-tree">
-        <!-- TODO 1. filters; 2. lock, home icons; 3. pageTreeKey是否需要？ -->
         <draggble-tree
           :data="groupItem.data"
           label-key="name"
           :active="state.currentNodeData.id"
+          :filter-value="state.pageSearchValue"
+          :root-id="pageSettingState.ROOT_ID"
           @click-row="handleClickRow"
+          @move-node="handleMoveNode"
         >
           <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"
@@ -39,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>
@@ -60,12 +64,14 @@ import {
   usePage,
   useBreadcrumb,
   useLayout,
+  useNotify,
   useMessage,
   getMetaApi,
   META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { isEqual } from '@opentiny/vue-renderless/common/object'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
+import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { closePageSettingPanel } from './PageSetting.vue'
 import { closeFolderSettingPanel } from './PageFolderSetting.vue'
@@ -98,26 +104,22 @@ export default {
       changeTreeData,
       isCurrentDataSame,
       getPageList,
+      resetPageData,
       STATIC_PAGE_GROUP_ID,
       COMMON_PAGE_GROUP_ID
     } = usePage()
-    const { fetchPageDetail } = http
+    const { fetchPageDetail, requestUpdatePage } = http
     const { setBreadcrumbPage } = useBreadcrumb()
     const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
 
     const state = reactive({
       pageSearchValue: '',
       collapseValue: [STATIC_PAGE_GROUP_ID, COMMON_PAGE_GROUP_ID],
-      currentNodeData: {}
+      currentNodeData: { id: getMetaApi(META_SERVICE.GlobalService).getBaseInfo().pageId }
     })
 
-    const searchPageData = (_value) => {
-      // TODO
-    }
-
     const refreshPageList = async (appId) => {
       const pages = await getPageList(appId)
-      searchPageData(state.pageSearchValue)
 
       return pages
     }
@@ -243,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) => {
@@ -256,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) => {
@@ -283,7 +281,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')
@@ -291,6 +289,76 @@ export default {
       return rowOperations
     }
 
+    const updatePage = (pageDetail) => {
+      const { id, name, page_content } = pageDetail
+      const params = {
+        ...pageDetail,
+        page_content: {
+          ...page_content,
+          fileName: name
+        }
+      }
+
+      const isCurEditPage = pageState?.currentPage?.id === id
+
+      return handlePageUpdate(id, params, false, isCurEditPage)
+    }
+
+    const updateFolder = (pageDetail) => {
+      const { id } = pageDetail
+
+      // requestUpdatePage加了then和catch回调函数，而handlePageUpdate没有加，是因为handlePageUpdate内部都已经有了类似逻辑
+      return requestUpdatePage(id, { ...pageDetail, page_content: null })
+        .then(() => {
+          useNotify({
+            type: 'success',
+            message: '更新文件夹成功!'
+          })
+        })
+        .catch((error) => {
+          useNotify({
+            type: 'error',
+            title: '更新文件夹失败',
+            message: JSON.stringify(error?.message || error)
+          })
+        })
+        .finally(() => {
+          pageSettingState.updateTreeData()
+          pageSettingState.isNew = false
+        })
+    }
+
+    const handleMoveNode = (dragged, newParent) => {
+      if (isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)) {
+        closePageSettingPanel()
+        closeFolderSettingPanel()
+        pageSettingState.currentPageData.id = dragged.id
+        changeTreeData(newParent.id, dragged.parentId)
+        resetPageData()
+        // TODO 页面更换父节点后，原来每次变更需要填写变更信息
+        fetchPageDetail(dragged.id).then((pageDetail) => {
+          pageDetail.parentId = newParent.id
+          if (pageDetail.isPage) {
+            updatePage(pageDetail)
+          } else {
+            updateFolder(pageDetail)
+          }
+        })
+      } else {
+        confirm({
+          title: '提示',
+          message: '更改关未保存，是否要放弃这些更改？',
+          exec: () => {
+            if (!pageSettingState.isNew) {
+              changeTreeData(pageSettingState.oldParentId, pageSettingState.currentPageData.parentId)
+              Object.assign(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)
+            }
+            closePageSettingPanel()
+          }
+        })
+      }
+    }
+
     useMessage().subscribe({
       topic: 'app_id_changed',
       subscriber: 'page_tree_app_id_changed',
@@ -317,12 +385,13 @@ export default {
       state,
       switchPage,
       pageSettingState,
-      searchPageData,
       setPopoverRef,
       IconFolderOpened: IconFolderOpened(),
       IconFolderClosed: IconFolderClosed(),
       getRowOperations,
       handleClickRow,
+      handleMoveNode,
+      isPageLocked,
       handleClickPageSettings
     }
   }
@@ -419,19 +488,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>
@@ -441,6 +510,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 ce5effb68..b8edca7e9 100644
--- a/packages/plugins/page/src/Tree.vue
+++ b/packages/plugins/page/src/Tree.vue
@@ -1,8 +1,24 @@
 <template>
   <div class="draggable-tree">
-    <div :class="['row', { active: active === node.id }]" v-for="node of list" :key="node.id">
+    <div
+      v-for="(node, rowIndex) of filteredNodesWithAncestors"
+      :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)">
-        <span v-for="i in node.level - 1" :key="i" class="gap"></span>
+        <layer-lines :line-data="layerLine[rowIndex]" :level="node.level"></layer-lines>
         <div class="prefix-icon">
           <svg-icon v-if="node.rawData.isPage" name="text-page-common"></svg-icon>
           <svg-icon v-else name="text-page-folder-closed"></svg-icon>
@@ -15,13 +31,13 @@
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits } from 'vue'
+import { computed, defineEmits, defineProps, ref } from 'vue'
+import LayerLines from './LayerLines.vue'
 
-// TODO filter 功能
 const props = defineProps({
   data: {
     type: Object,
-    default: () => ({})
+    required: true
   },
   idKey: {
     type: String,
@@ -37,12 +53,18 @@ const props = defineProps({
   },
   active: {
     type: String
+  },
+  filterValue: {
+    type: String,
+    default: ''
+  },
+  rootId: {
+    type: [String, Number],
+    default: 'root'
   }
 })
 
-const emit = defineEmits(['clickRow'])
-
-const ROOT_ID = '0'
+const emit = defineEmits(['clickRow', 'moveNode'])
 
 const flattenTreeData = (node, parentId, level = 0) => {
   const { idKey, labelKey, childrenKey } = props
@@ -67,13 +89,116 @@ const flattenTreeData = (node, parentId, level = 0) => {
   return result
 }
 
-const list = computed(() => {
-  return flattenTreeData({ id: ROOT_ID, children: props.data }).slice(1)
+const nodes = computed(() => {
+  return flattenTreeData({ [props.idKey]: props.rootId, [props.childrenKey]: props.data }).slice(1)
+})
+
+const nodesMap = computed(() => {
+  return nodes.value.reduce((result, node) => {
+    result[node.id] = node
+    return result
+  }, {})
+})
+
+const filteredNodes = computed(() => {
+  return nodes.value.filter((node) => node.label.toLowerCase().includes(props.filterValue))
+})
+
+const getAncestorIds = (nodeId) => {
+  const currentNode = nodesMap.value[nodeId]
+
+  if (!currentNode || !currentNode.parentId) {
+    return []
+  }
+
+  const ancestors = getAncestorIds(currentNode.parentId)
+
+  ancestors.push(currentNode.parentId)
+
+  return ancestors
+}
+
+const filteredNodesWithAncestors = computed(() => {
+  const idSet = new Set()
+
+  for (const node of filteredNodes.value) {
+    idSet.add(node.id)
+    for (const id of getAncestorIds(node.id)) {
+      idSet.add(id)
+    }
+  }
+
+  return nodes.value.filter((node) => idSet.has(node.id))
+})
+
+const lines = {
+  node: 0b01, // └
+  layer: 0b10, // │
+  layerNode: 0b11 // ├
+}
+
+const layerLine = computed(() => {
+  const result = {}
+
+  const nodes = filteredNodesWithAncestors.value
+
+  for (const [index, node] of nodes.entries()) {
+    result[index] = result[index] || {}
+    result[index][node.level - 1] = lines.node
+
+    if (node.parentId !== props.rootId) {
+      const parentIndex = nodes.findIndex((item) => item.id === node.parentId)
+      for (let i = parentIndex + 1; i < index; i++) {
+        result[i][node.level - 1] = (result[i][node.level - 1] || 0) | lines.layer
+      }
+    }
+  }
+
+  return result
 })
 
 const handleClickRow = (node) => {
   emit('clickRow', node)
 }
+
+const draggedNode = ref(null)
+const hoveringNodeId = ref(null)
+
+const handleDragStart = (event, node) => {
+  draggedNode.value = node
+}
+
+// dragover和dragenter事件回调函数都为handleDragOver。跨行拖动时，禁止拖拽图标可能会闪一下，所以将dragenter事件也加上回调函数
+const handleDragOver = (event, node) => {
+  const isDescendant = getAncestorIds(node.id).includes(draggedNode.value.id)
+
+  if (!isDescendant) {
+    // 阻止默认行为以允许放置
+    event.preventDefault()
+    hoveringNodeId.value = node.id
+  }
+}
+
+const handleDrop = (event, node) => {
+  event.preventDefault()
+
+  const dragged = draggedNode.value
+  draggedNode.value = null
+
+  if (!dragged) {
+    return
+  }
+
+  const isDescendant = getAncestorIds(node.id).includes(dragged.id)
+
+  if (!isDescendant && dragged.id !== node.id && dragged.parentId !== node.id) {
+    emit('moveNode', dragged, node)
+  }
+}
+
+const handleDragEnd = () => {
+  hoveringNodeId.value = null
+}
 </script>
 
 <style lang="less" scoped>
@@ -91,15 +216,13 @@ const handleClickRow = (node) => {
     &:hover {
       background-color: var(--te-common-bg-container);
     }
+
     .content {
       flex: 1;
       display: flex;
       align-items: center;
       overflow: hidden;
     }
-    .gap {
-      width: 16px;
-    }
     label {
       flex: 1;
       font-size: 12px;
@@ -123,6 +246,9 @@ const handleClickRow = (node) => {
         color: var(--te-common-bg-primary-checked);
       }
     }
+    &.hover-border {
+      border: 1px solid var(--te-common-border-checked);
+    }
   }
 }
 </style>
diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js
index 634d2e4f9..d98ab683b 100644
--- a/packages/plugins/page/src/composable/usePage.js
+++ b/packages/plugins/page/src/composable/usePage.js
@@ -51,7 +51,6 @@ const pageSettingState = reactive({
   currentPageData: {}, // 当前配置页面的数据
   pages: [],
   oldParentId: null,
-  pageTreeKey: 0,
   isNew: false,
   ROOT_ID: '0', // 根节点ID
   updateTreeData: null,
@@ -105,12 +104,11 @@ const changeTreeData = (newParentId, oldParentId) => {
     const curDataIndex = parentData.children?.findIndex?.(({ id }) => id === currentPageDataId)
 
     if (curDataIndex > -1) {
-      parentData.children.splice(curDataIndex, 1)
+      const splicedPageData = parentData.children.splice(curDataIndex, 1)[0]
       if (!folderData.children) {
         folderData.children = []
       }
-      folderData.children.unshift(pageSettingState.currentPageData)
-      pageSettingState.pageTreeKey++
+      folderData.children.unshift(splicedPageData)
     }
   }
 }
diff --git a/packages/vue-generator/src/plugins/parseSchemaPlugin.js b/packages/vue-generator/src/plugins/parseSchemaPlugin.js
index 1510c9c23..c8fa7cf21 100644
--- a/packages/vue-generator/src/plugins/parseSchemaPlugin.js
+++ b/packages/vue-generator/src/plugins/parseSchemaPlugin.js
@@ -25,9 +25,7 @@ function parseSchema() {
           continue
         }
 
-        const newComponentItem = {
-          ...componentItem
-        }
+        const newComponentItem = structuredClone(componentItem)
         let path = ''
         let curParentId = componentItem.meta.parentId
         let depth = 0
diff --git a/packages/vue-generator/src/templates/vue-template/index.js b/packages/vue-generator/src/templates/vue-template/index.js
index 3c9c229e6..e10818881 100644
--- a/packages/vue-generator/src/templates/vue-template/index.js
+++ b/packages/vue-generator/src/templates/vue-template/index.js
@@ -160,8 +160,15 @@ export function generateTemplate(schema) {
     }
   ]
 
+  let nodeProcess = {}
+  try {
+    nodeProcess = process
+  } catch (error) {
+    /* empty */
+  }
+
   // FIXME: vitest 测试的时候得到的并不是 base64data，所以这里需要跳过文件的出码
-  if (process.env?.NODE_ENV !== 'test') {
+  if (nodeProcess.env?.NODE_ENV !== 'test') {
     try {
       const faviconData = base64ToBlob(logoImage)