diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index 2101637cf0..aeb2217d76 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -23,6 +23,8 @@
         :isFolder="state.isFolder"
         @add="createNewPage('publicPages')"
         @openSettingPanel="openSettingPanel"
+        @createPage="createNewPage"
+        @createFolder="createNewFolder"
       ></page-tree>
     </template>
   </plugin-panel>
@@ -79,12 +81,12 @@ export default {
       isFolder: false
     })
 
-    const createNewPage = (group) => {
+    const createNewPage = (group, parentId = ROOT_ID) => {
       closeFolderSettingPanel()
       pageSettingState.isNew = true
       pageSettingState.currentPageData = {
         ...DEFAULT_PAGE,
-        parentId: ROOT_ID,
+        parentId,
         route: '',
         name: 'Untitled',
         page_content: {
@@ -97,10 +99,10 @@ export default {
       openPageSettingPanel()
     }
 
-    const createNewFolder = () => {
+    const createNewFolder = (parentId = ROOT_ID) => {
       closePageSettingPanel()
       pageSettingState.isNew = true
-      pageSettingState.currentPageData = { parentId: ROOT_ID, route: '', name: 'untitled' }
+      pageSettingState.currentPageData = { parentId, route: '', name: 'untitled' }
       pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
       state.isFolder = true
       openFolderSettingPanel()
@@ -112,11 +114,11 @@ export default {
       }
     })
 
-    const openSettingPanel = async (node) => {
-      state.isFolder = !node.data.isPage
+    const openSettingPanel = async (pageData) => {
+      state.isFolder = !pageData.isPage
       pageSettingState.isNew = false
 
-      const isPageChange = node.data.id !== pageSettingState.currentPageData.id
+      const isPageChange = pageData.id !== pageSettingState.currentPageData.id
 
       if (state.isFolder) {
         isPageChange && closePageSettingPanel()
@@ -125,7 +127,7 @@ export default {
         isPageChange && closeFolderSettingPanel()
         openPageSettingPanel()
       }
-      const pageDetail = await fetchPageDetail(node.data?.id)
+      const pageDetail = await fetchPageDetail(pageData?.id)
       initCurrentPageData(pageDetail)
     }
 
diff --git a/packages/plugins/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue
index c141518e1d..8ac9e11fa9 100644
--- a/packages/plugins/page/src/PageGeneral.vue
+++ b/packages/plugins/page/src/PageGeneral.vue
@@ -26,14 +26,18 @@
         ></tiny-input>
       </tiny-form-item>
 
-      <tiny-form-item v-if="pageSettingState.currentPageData.group !== 'publicPages'" label="父文件夹" prop="parentId">
+      <tiny-form-item
+        v-if="pageSettingState.currentPageData.group !== 'publicPages'"
+        label="父文件夹/父页面"
+        prop="parentId"
+      >
         <tiny-select
           v-model="pageSettingState.currentPageData.parentId"
           value-field="id"
           render-type="tree"
           :tree-op="treeFolderOp"
           text-field="name"
-          placeholder="请选择父文件夹"
+          placeholder="请选择父文件夹/父页面"
           popper-class="parent-fold-select-dropdown"
           @change="changeParentForderId"
         ></tiny-select>
@@ -154,39 +158,50 @@ export default {
       group: [{ required: true, message: '必须选择页面类型' }]
     }
 
-    const getFolders = (pages) => {
-      const list = []
+    const pageToTreeData = (page) => {
+      const { id, name, isPage, children } = page
 
-      pages.forEach((page) => {
-        if (!page.isPage && page.id !== pageSettingState.currentPageData.id) {
-          list.push(page)
-          if (!page.children) {
-            page.children = []
-          }
-          page.children = getFolders(page.children)
-        }
-      })
+      if (!Array.isArray(children)) {
+        return { id, name, isPage }
+      }
+
+      return {
+        id,
+        name,
+        isPage,
+        children: children
+          .filter((page) => page.id !== pageSettingState.currentPageData.id)
+          .map((page) => pageToTreeData(page))
+      }
+    }
+
+    // TODO 遗留问题：无法收缩下拉面板的树目录。如果使用tree自带的icon，无法动态设置expandIcon和shrinkIcon
+    const getNodeIcon = (data) => {
+      if (data.id === ROOT_ID) {
+        return null
+      }
+
+      if (data.isPage) {
+        return <SvgIcon name="text-page-common"></SvgIcon>
+      }
 
-      return list
+      return <SvgIcon name="text-page-folder"></SvgIcon>
     }
 
     const treeFolderOp = computed(() => {
-      const expandIcon = <SvgIcon name="text-page-folder-closed" class="folder-icon"></SvgIcon>
-      const shrinkIcon = <SvgIcon name="text-page-folder" class="folder-icon"></SvgIcon>
       const staticPages = pageSettingState.pages[STATIC_PAGE_GROUP_ID]?.data || []
-      const data = [{ name: '无', id: ROOT_ID }, ...getFolders(JSON.parse(JSON.stringify(staticPages)))]
+      const dummyRoot = pageToTreeData({ children: [{ name: '无', id: ROOT_ID }].concat(staticPages) })
+      const data = dummyRoot.children
       const options = {
         data: data,
-        shrinkIcon: shrinkIcon,
-        expandIcon: expandIcon,
+        shrinkIcon: null,
+        expandIcon: null,
         renderContent: (_h, { node, data }) => {
           return (
-            <span style="display:flex">
-              {node.isLeaf && data.id !== ROOT_ID ? (
-                <svg-icon name="text-page-folder-closed" style="margin-right:14px"></svg-icon>
-              ) : null}
-              <span class="label">{node.label}</span>
-            </span>
+            <>
+              {getNodeIcon(data)}
+              <label>{node.label}</label>
+            </>
           )
         }
       }
@@ -277,22 +292,44 @@ export default {
 </style>
 <style lang="less">
 .tiny-select-dropdown.parent-fold-select-dropdown {
-  .tiny-tree {
-    background-color: var(--ti-lowcode-page-manage-tree-text-background-color);
+  padding: 8px 0;
 
+  .tiny-tree {
     .tiny-tree-node {
-      &.is-current {
-        .tiny-tree-node__content {
-          background-color: var(--ti-lowcode-page-manage-tree-node-background-color);
+      .tiny-tree-node__content {
+        padding: 0;
+        background-color: var(--te-common-bg-default);
+        &:hover {
+          background-color: var(--te-common-bg-container);
+        }
+        // 移除子节点的的背景色，才能保证鼠标hover到.tiny-tree-node__content节点任意位置时，整行都有hover状态的背景色
+        .tiny-tree-node__content-left,
+        .tiny-tree-node__content-left .tiny-tree-node__content-box {
+          background-color: unset;
+          &:hover {
+            background-color: unset;
+          }
+        }
+        .tiny-tree-node__content-left {
+          padding: 0;
+          .tree-node-icon {
+            margin: 0;
+          }
+          .tiny-tree-node__content-box {
+            padding: 0 12px;
+            svg {
+              margin-right: 8px;
+            }
+            * {
+              cursor: pointer;
+            }
+          }
+          .tiny-tree-node__label {
+            font-size: 12px;
+          }
         }
       }
     }
   }
-
-  .tiny-tree-node__content {
-    &:hover {
-      --ti-lowcode-tree-node-content-hover-bg-color: var(--ti-lowcode-page-manage-tree-node-background-color);
-    }
-  }
 }
 </style>
diff --git a/packages/plugins/page/src/PageHome.vue b/packages/plugins/page/src/PageHome.vue
index e431e54ec3..31311d4c99 100644
--- a/packages/plugins/page/src/PageHome.vue
+++ b/packages/plugins/page/src/PageHome.vue
@@ -67,7 +67,7 @@ export default {
           handleRouteHomeUpdate(id, params)
             .then(() => {
               pageSettingState.updateTreeData()
-              openSettingPanel({ data: pageSettingState.currentPageData })
+              openSettingPanel(pageSettingState.currentPageData)
               pageSettingState.isNew = false
               if (isVsCodeEnv) {
                 generateRouter({
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index 2578c1d19a..d10da1eb0a 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -339,6 +339,15 @@ export default {
     }
 
     const deletePage = () => {
+      if (pageSettingState.treeDataMapping[pageSettingState.currentPageData.id]?.children?.length) {
+        useNotify({
+          type: 'error',
+          message: '此页面存在子页面或子文件夹，不能删除！'
+        })
+
+        return
+      }
+
       confirm({
         title: '提示',
         message: '您是否要删除页面?',
diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue
index 6ac0762799..25674d4630 100644
--- a/packages/plugins/page/src/PageTree.vue
+++ b/packages/plugins/page/src/PageTree.vue
@@ -13,29 +13,46 @@
         <span class="title">{{ groupItem.groupName }}</span>
       </template>
       <div class="app-manage-tree">
-        <tiny-tree
-          :ref="getPageTreeRefs"
-          :key="pageSettingState.pageTreeKey"
+        <!-- TODO 1. filters; 2. lock, home icons; 3. pageTreeKey是否需要？ -->
+        <draggble-tree
           :data="groupItem.data"
-          :props="{
-            children: 'children',
-            label: 'name'
-          }"
-          default-expand-all
-          :filter-node-method="filterPageTreeData"
-          :render-content="renderContent"
-          :expand-on-click-node="false"
-          :icon="nullIcon"
-          node-key="id"
-        ></tiny-tree>
+          label-key="name"
+          :active="state.currentNodeData.id"
+          @click-row="handleClickRow"
+        >
+          <template #row-suffix="{ node }">
+            <div :class="['actions']">
+              <tiny-popover
+                :ref="(el) => setPopoverRef(el, node.id)"
+                placement="bottom-start"
+                :visible-arrow="false"
+                popper-class="page-tree-row-operation-list"
+              >
+                <div class="operation-list">
+                  <div
+                    v-for="(operation, index) in getRowOperations(groupItem.groupId, node)"
+                    :key="index"
+                    :class="[operation.type === 'divider' ? 'divider' : 'item'].concat(operation.class || [])"
+                    @click="operation.action?.(node)"
+                  >
+                    {{ operation.label }}
+                  </div>
+                </div>
+                <template #reference>
+                  <svg-icon name="ellipsis"></svg-icon>
+                </template>
+              </tiny-popover>
+            </div>
+          </template>
+        </draggble-tree>
       </div>
     </tiny-collapse-item>
   </tiny-collapse>
 </template>
 
 <script lang="jsx">
-import { reactive, ref, nextTick, onUnmounted } from 'vue'
-import { Search, Tree, Collapse, CollapseItem } from '@opentiny/vue'
+import { reactive, onUnmounted } from 'vue'
+import { Search, Collapse, CollapseItem, Popover } from '@opentiny/vue'
 import { IconFolderOpened, IconFolderClosed, IconSearch } from '@opentiny/vue-icon'
 import {
   useCanvas,
@@ -53,16 +70,18 @@ import { constants } from '@opentiny/tiny-engine-utils'
 import { closePageSettingPanel } from './PageSetting.vue'
 import { closeFolderSettingPanel } from './PageFolderSetting.vue'
 import http from './http.js'
+import DraggbleTree from './Tree.vue'
 
-const { ELEMENT_TAG, PAGE_STATUS, COMPONENT_NAME } = constants
+const { PAGE_STATUS, COMPONENT_NAME } = constants
 
 export default {
   components: {
     TinySearch: Search,
-    TinyTree: Tree,
     TinyCollapse: Collapse,
     TinyCollapseItem: CollapseItem,
-    TinyIconSearch: IconSearch()
+    TinyIconSearch: IconSearch(),
+    TinyPopover: Popover,
+    DraggbleTree
   },
   props: {
     isFolder: {
@@ -70,16 +89,20 @@ export default {
       default: false
     }
   },
-  emits: ['openSettingPanel', 'add'],
+  emits: ['openSettingPanel', 'add', 'createPage', 'createFolder'],
   setup(props, { emit }) {
     const { confirm } = useModal()
     const { initData, pageState, isBlock, isSaved } = useCanvas()
-    const { pageSettingState, changeTreeData, isCurrentDataSame, STATIC_PAGE_GROUP_ID, COMMON_PAGE_GROUP_ID } =
-      usePage()
-    const { fetchPageList, fetchPageDetail } = http
+    const {
+      pageSettingState,
+      changeTreeData,
+      isCurrentDataSame,
+      getPageList,
+      STATIC_PAGE_GROUP_ID,
+      COMMON_PAGE_GROUP_ID
+    } = usePage()
+    const { fetchPageDetail } = http
     const { setBreadcrumbPage } = useBreadcrumb()
-    const pageTreeRefs = ref([])
-    const ROOT_ID = pageSettingState.ROOT_ID
     const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
 
     const state = reactive({
@@ -87,74 +110,16 @@ export default {
       collapseValue: [STATIC_PAGE_GROUP_ID, COMMON_PAGE_GROUP_ID],
       currentNodeData: {}
     })
-    const formatTreeData = (data, parentId, id) => {
-      const originObj = { [ROOT_ID]: { id: ROOT_ID, name: '站点根目录', children: [] } }
-      const treeArr = []
-
-      data.forEach((item) => {
-        originObj[item[id]] = item
-        if (item.parentId === ROOT_ID) {
-          originObj[ROOT_ID].children.push(item)
-        }
-      })
 
-      data.forEach((item) => {
-        let parentObj = originObj[item[parentId]]
-        if (parentObj && parentObj.id !== ROOT_ID) {
-          parentObj.children = parentObj.children || []
-          parentObj.children.push(item)
-        } else if (parentObj && parentObj.id === ROOT_ID) {
-          treeArr.push(item)
-        }
-      })
-
-      pageSettingState.treeDataMapping = originObj
-
-      return pageSettingState.treeDataMapping
+    const searchPageData = (_value) => {
+      // TODO
     }
 
-    const searchPageData = (value) => {
-      if (Array.isArray(pageTreeRefs?.value)) {
-        nextTick(() => {
-          pageTreeRefs.value.forEach((item) => {
-            item?.filter(value)
-          })
-        })
-      }
-    }
-
-    const refreshPageList = async (appId, data) => {
-      const pagesData = data ? data : await fetchPageList(appId)
-
-      const firstGroupData = { groupName: '静态页面', groupId: STATIC_PAGE_GROUP_ID, data: [] }
-      const secondGroupData = { groupName: '公共页面', groupId: COMMON_PAGE_GROUP_ID, data: [] }
-
-      pagesData.forEach((item) => {
-        const namedNode = item.name ? item : { ...item, name: item.folderName, group: 'staticPages' }
-        const node = item.meta
-          ? {
-              ...item,
-              ...item.meta,
-              name: item.fileName,
-              isPage: true,
-              isBody: item.meta.rootElement === ELEMENT_TAG.Body
-            }
-          : namedNode
-
-        const { children, ...other } = node
-
-        if (node.group === 'staticPages') {
-          firstGroupData.data.push(other)
-        } else {
-          secondGroupData.data.push(other)
-        }
-      })
-
-      const firstGroupTreeData = formatTreeData([...firstGroupData.data], 'parentId', 'id')
-      firstGroupData.data = firstGroupTreeData[ROOT_ID].children
-      pageSettingState.pages = [firstGroupData, secondGroupData]
+    const refreshPageList = async (appId) => {
+      const pages = await getPageList(appId)
       searchPageData(state.pageSearchValue)
-      return pageSettingState.pages
+
+      return pages
     }
 
     pageSettingState.updateTreeData = async () => {
@@ -215,10 +180,10 @@ export default {
       getPageDetail(data.id)
     }
 
-    const nodeClick = (e, node) => {
-      e.stopPropagation()
+    const nodeClick = (e, pageData) => {
+      e?.stopPropagation()
 
-      const { id, isPage } = node.data
+      const { id, isPage } = pageData
 
       // 区块切换回页面需要重新加载页面
       if ((!isBlock() && id === state?.currentNodeData?.id) || !isPage) {
@@ -226,7 +191,7 @@ export default {
       }
 
       if (isSaved() && isCurrentDataSame()) {
-        switchPage(node.data)
+        switchPage(pageData)
       } else {
         confirm({
           title: '提示',
@@ -234,17 +199,17 @@ export default {
           exec: () => {
             changeTreeData(pageSettingState.oldParentId, pageSettingState.currentPageData.parentId)
             Object.assign(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)
-            switchPage(node.data)
+            switchPage(pageData)
           }
         })
       }
     }
 
-    const openSettingPanel = (e, node, isPageLocked) => {
-      e.stopPropagation()
+    const openSettingPanel = (e, pageData, isPageLocked) => {
+      e?.stopPropagation()
 
-      if (isPageLocked && node.data.isPage) {
-        const username = node.data.occupier?.username || ''
+      if (isPageLocked && pageData.isPage) {
+        const username = pageData.occupier?.username || ''
 
         useModal().message({
           message: `您点击的页面被${username}锁定，暂时无法编辑，请联系解锁`,
@@ -255,7 +220,7 @@ export default {
       }
 
       if (isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)) {
-        emit('openSettingPanel', node)
+        emit('openSettingPanel', pageData)
       } else {
         confirm({
           title: '提示',
@@ -263,40 +228,67 @@ export default {
           exec: () => {
             changeTreeData(pageSettingState.oldParentId, pageSettingState.currentPageData.parentId)
             Object.assign(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)
-            emit('openSettingPanel', node)
+            emit('openSettingPanel', pageData)
           }
         })
       }
     }
 
-    const renderContent = (h, { node, data }) => {
-      const isPageLocked = getCanvasStatus(data.occupier).state === PAGE_STATUS.Lock
-
-      return (
-        <span class="tiny-tree-node__label" onMousedown={(e) => nodeClick(e, node)}>
-          {data.isPage ? (
-            <SvgIcon name="text-page-common" class="icon-page"></SvgIcon>
-          ) : (
-            <SvgIcon name="text-page-folder-closed" class="folder-icon"></SvgIcon>
-          )}
-          <span class="label">{node.label}</span>
-          <span class="icons">
-            {data.isPage && isPageLocked ? (
-              <SvgIcon
-                class="page-edit-icon"
-                name="locked"
-                onMousedown={(e) => openSettingPanel(e, node, isPageLocked)}
-              ></SvgIcon>
-            ) : null}
-            {data.isHome ? <SvgIcon class="page-edit-icon" name="text-page-home"></SvgIcon> : null}
-            <SvgIcon
-              name="setting"
-              class="setting page-edit-icon"
-              onMousedown={(e) => openSettingPanel(e, node, isPageLocked)}
-            ></SvgIcon>
-          </span>
-        </span>
-      )
+    const popoverRefs = {}
+    const setPopoverRef = (el, nodeId) => {
+      popoverRefs[nodeId] = el
+    }
+
+    const handleClickRow = (node) => {
+      nodeClick(null, node.rawData)
+    }
+
+    const handleClickPageSettings = (node) => {
+      const isPageLocked = getCanvasStatus(node.rawData.occupier).state === PAGE_STATUS.Lock
+      openSettingPanel(null, node.rawData, isPageLocked)
+    }
+
+    const createPage = (node) => {
+      emit('createPage', 'staticPages', node.id)
+    }
+
+    const createFolder = (node) => {
+      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 }
+    ].map((item) => ({
+      ...item,
+      action: (node) => {
+        item.action?.(node)
+        // 点击 action 后，关闭 popover 弹窗
+        popoverRefs[node.id]?.doClose?.()
+      }
+    }))
+
+    const getRowOperations = (groupId, node) => {
+      if (groupId === COMMON_PAGE_GROUP_ID) {
+        return rowOperations.slice(0, 2).concat(rowOperations.slice(5))
+      }
+      if (!node.rawData.isPage) {
+        return rowOperations.filter((item) => item.type !== 'copy')
+      }
+      return rowOperations
     }
 
     useMessage().subscribe({
@@ -307,26 +299,12 @@ export default {
       }
     })
 
-    const filterPageTreeData = (value, data) => {
-      if (!value) return true
-
-      return data.name?.toLowerCase().indexOf(value?.toLowerCase()) !== -1
-    }
-
-    const getPageTreeRefs = (el) => {
-      if (el) {
-        pageTreeRefs.value.push(el)
-      }
-    }
-
     const createPublicPage = (e) => {
       e.stopPropagation()
       e.preventDefault()
       emit('add')
     }
 
-    const nullIcon = <span></span>
-
     onUnmounted(() => {
       useMessage().unsubscribe({
         topic: 'app_id_changed',
@@ -340,13 +318,12 @@ export default {
       switchPage,
       pageSettingState,
       searchPageData,
-      renderContent,
-      refreshPageList,
-      filterPageTreeData,
-      getPageTreeRefs,
+      setPopoverRef,
       IconFolderOpened: IconFolderOpened(),
       IconFolderClosed: IconFolderClosed(),
-      nullIcon
+      getRowOperations,
+      handleClickRow,
+      handleClickPageSettings
     }
   }
 }
@@ -441,5 +418,59 @@ export default {
       }
     }
   }
+  .actions {
+    display: none;
+    align-items: center;
+    gap: 8px;
+    svg {
+      color: var(--te-common-icon-secondary);
+      outline: none;
+    }
+    &.show {
+      display: flex;
+    }
+  }
+  .row:hover .actions {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="less">
+.tiny-popover.tiny-popper[x-placement].page-tree-row-operation-list {
+  padding: 0;
+  margin-top: 4px;
+  .operation-list {
+    padding: 8px 0;
+    & > div {
+      padding: 0 12px;
+    }
+    .item {
+      height: 24px;
+      font-size: 12px;
+      line-height: 18px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      &:hover {
+        background-color: var(--te-common-bg-container);
+      }
+    }
+    .divider {
+      height: 8px;
+      display: flex;
+      align-items: center;
+      &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--te-common-border-divider);
+      }
+    }
+    .danger {
+      color: var(--te-common-color-error);
+    }
+  }
 }
 </style>
diff --git a/packages/plugins/page/src/Tree.vue b/packages/plugins/page/src/Tree.vue
new file mode 100644
index 0000000000..ce5effb688
--- /dev/null
+++ b/packages/plugins/page/src/Tree.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="draggable-tree">
+    <div :class="['row', { active: active === node.id }]" v-for="node of list" :key="node.id">
+      <div class="content" @click="handleClickRow(node)">
+        <span v-for="i in node.level - 1" :key="i" class="gap"></span>
+        <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>
+        </div>
+        <label>{{ node.label }}</label>
+      </div>
+      <slot name="row-suffix" :node="node"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from 'vue'
+
+// TODO filter 功能
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  idKey: {
+    type: String,
+    default: 'id'
+  },
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+  childrenKey: {
+    type: String,
+    default: 'children'
+  },
+  active: {
+    type: String
+  }
+})
+
+const emit = defineEmits(['clickRow'])
+
+const ROOT_ID = '0'
+
+const flattenTreeData = (node, parentId, level = 0) => {
+  const { idKey, labelKey, childrenKey } = props
+
+  const currentNode = {
+    id: node[idKey],
+    label: node[labelKey],
+    parentId,
+    level,
+    rawData: node
+  }
+  const result = [currentNode]
+
+  const children = node[childrenKey]
+
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      result.push(...flattenTreeData(child, currentNode.id, level + 1))
+    }
+  }
+
+  return result
+}
+
+const list = computed(() => {
+  return flattenTreeData({ id: ROOT_ID, children: props.data }).slice(1)
+})
+
+const handleClickRow = (node) => {
+  emit('clickRow', node)
+}
+</script>
+
+<style lang="less" scoped>
+.draggable-tree {
+  .row {
+    height: 24px;
+    padding: 0 12px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    &,
+    * {
+      cursor: pointer;
+    }
+    &: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;
+      line-height: 18px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .prefix-icon {
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+      svg {
+        color: var(--te-common-icon-secondary);
+      }
+    }
+    &.active {
+      background-color: var(--te-base-blue-20);
+      color: var(--te-common-bg-primary-checked);
+      svg {
+        color: var(--te-common-bg-primary-checked);
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js
index c99072cc4c..634d2e4f98 100644
--- a/packages/plugins/page/src/composable/usePage.js
+++ b/packages/plugins/page/src/composable/usePage.js
@@ -12,6 +12,11 @@
 
 import { reactive, ref } from 'vue'
 import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
+import { constants } from '@opentiny/tiny-engine-utils'
+import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import http from '../http'
+
+const { ELEMENT_TAG } = constants
 
 const DEFAULT_PAGE = {
   app: '',
@@ -132,6 +137,113 @@ const isChangePageData = () => !isEqual(pageSettingState.currentPageData, pageSe
 const STATIC_PAGE_GROUP_ID = 0
 const COMMON_PAGE_GROUP_ID = 1
 
+/**
+ *
+ * @typedef {Object} PageData
+ * @property {string | number} id
+ * @property {string | number} parentId
+ *
+ * @typedef {Object} PageNode
+ * @property {string | number} id
+ * @property {string | number} parentId
+ * @property {PageNode[] | undefined} children
+ *
+ * @param {PageData[]} data
+ * @returns
+ */
+const generateTree = (data) => {
+  const { ROOT_ID } = pageSettingState
+
+  /** @type {Record<string, PageNode>} */
+  const treeDataMapping = { [ROOT_ID]: { id: ROOT_ID } }
+
+  data.forEach((item) => {
+    treeDataMapping[item.id] = item
+  })
+
+  data.forEach((item) => {
+    const parentNode = treeDataMapping[item.parentId]
+
+    if (!parentNode) {
+      return
+    }
+
+    parentNode.children = parentNode.children || []
+    parentNode.children.push(item)
+  })
+
+  return treeDataMapping
+}
+
+const getPageList = async (appId) => {
+  const pagesData = await http.fetchPageList(appId)
+
+  const firstGroupData = { groupName: '静态页面', groupId: STATIC_PAGE_GROUP_ID, data: [] }
+  const secondGroupData = { groupName: '公共页面', groupId: COMMON_PAGE_GROUP_ID, data: [] }
+
+  pagesData.forEach((item) => {
+    const namedNode = item.name ? item : { ...item, name: item.folderName, group: 'staticPages' }
+    const node = item.meta
+      ? {
+          ...item,
+          ...item.meta,
+          name: item.fileName,
+          isPage: true,
+          isBody: item.meta.rootElement === ELEMENT_TAG.Body
+        }
+      : namedNode
+
+    const { children, ...other } = node
+
+    if (node.group === 'staticPages') {
+      firstGroupData.data.push(other)
+    } else {
+      secondGroupData.data.push(other)
+    }
+  })
+
+  const firstGroupTreeData = generateTree(firstGroupData.data)
+  pageSettingState.treeDataMapping = firstGroupTreeData
+  firstGroupData.data = firstGroupTreeData[pageSettingState.ROOT_ID].children
+  pageSettingState.pages = [firstGroupData, secondGroupData]
+  return pageSettingState.pages
+}
+
+/**
+ * @param {string | number} id page Id
+ * @param {boolean} withFolders default `false`
+ * @returns {(string | number)[]}
+ */
+const getAncestors = async (id, withFolders) => {
+  if (pageSettingState.pages.length === 0) {
+    const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
+    await getPageList(appId)
+  }
+
+  /**
+   * @param {string | number} id
+   * @param {(string | number)[]} ancestors
+   * @returns {(string | number)[]}
+   */
+  const getAncestorsRecursively = (id) => {
+    const pageNode = pageSettingState.treeDataMapping[id]
+
+    if (pageNode.id === pageSettingState.ROOT_ID) {
+      return []
+    }
+
+    return [pageNode].concat(getAncestorsRecursively(pageNode.parentId))
+  }
+
+  const ancestorsWithSelf = getAncestorsRecursively(id)
+  const ancestors = ancestorsWithSelf.slice(1).reverse()
+
+  if (withFolders) {
+    return ancestors.map((item) => item.id)
+  }
+  return ancestors.filter((item) => item.isPage).map((item) => item.id)
+}
+
 export default () => {
   return {
     DEFAULT_PAGE,
@@ -144,6 +256,8 @@ export default () => {
     resetPageData,
     initCurrentPageData,
     isChangePageData,
+    getPageList,
+    getAncestors,
     STATIC_PAGE_GROUP_ID,
     COMMON_PAGE_GROUP_ID
   }