feat: outline tree

packages/plugins/tree/src/DraggableTree.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="draggable-tree"></div>
+</template>
+
+<script setup>
+import { computed, defineProps, watch } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  idKey: {
+    type: String,
+    default: 'id'
+  },
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+  childrenKey: {
+    type: String,
+    default: 'children'
+  }
+})
+
+/**
+ * @typedef {Object} Node
+ * @property {string} id
+ * @property {string} label
+ * @property {Node[]} [children]
+ * @property {any} rawData
+ */
+
+/**
+ *
+ * @param dataItem
+ * @returns {Node}
+ */
+const normalizeDataItem = (dataItem) => {
+  const { idKey, labelKey, childrenKey } = props
+
+  const id = dataItem[idKey]
+  const label = dataItem[labelKey]
+  const children = dataItem[childrenKey]
+
+  const result = { id, label, rawData: dataItem }
+
+  if (Array.isArray(children)) {
+    result.children = children.map((child) => normalizeDataItem(child))
+  }
+
+  return result
+}
+
+const normalizeData = (data) => {
+  if (!Array.isArray(data)) {
+    return []
+  }
+
+  return data.map((item) => normalizeDataItem(item))
+}
+
+const normalizedData = computed(() => normalizeData(props.data))
+
+/**
+ * @typedef {Object} ListItem
+ * @property {string} id
+ * @property {string} label
+ * @property {number} level level 为 0 表示顶层节点
+ * @property {string} [parentId]
+ * @property {any} rawData
+ */
+
+/**
+ *
+ * @param {Node} node
+ * @param {string} [parentId]
+ * @param {number} level
+ * @returns {ListItem[]}
+ */
+const flatternNode = (node, parentId, level = 0) => {
+  const { children, ...rest } = node
+
+  const childNodes = (children || [])
+    .map((child) => flatternNode(child, node.id, level + 1))
+    .reduce((acc, current) => acc.concat(current), [])
+
+  const listItem = { ...rest, parentId, level }
+
+  return [listItem].concat(childNodes)
+}
+
+/**
+ *
+ * @param {Node[]} nodes
+ * @returns {ListItem[]}
+ */
+const flatternNodes = (nodes) => {
+  const dummyNode = { children: nodes }
+  return flatternNode(dummyNode, null, -1).slice(1)
+}
+
+const listItems = computed(() => flatternNodes(normalizedData.value))
+
+watch(
+  listItems,
+  (value) => {
+    // eslint-disable-next-line no-console
+    console.log(value)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="less" scoped>
+.draggable-tree {
+}
+</style>

packages/plugins/tree/src/Main.vue

@@ -44,6 +44,7 @@
           </tiny-grid-column>
         </tiny-grid>
       </div>
+      <draggable-tree :data="state.pageSchema" label-key="componentName"></draggable-tree>
     </template>
   </plugin-panel>
 </template>
@@ -57,6 +58,7 @@ import { IconChevronDown, iconEyeopen, iconEyeclose } from '@opentiny/vue-icon'
 import { useCanvas, useMaterial, useLayout, useMessage } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
+import DraggableTree from './DraggableTree.vue'
 
 const { PAGE_STATUS } = constants
 export default {
@@ -65,6 +67,7 @@ export default {
     TinyGridColumn: GridColumn,
     PluginPanel,
     SvgButton,
+    DraggableTree,
     IconEyeopen: iconEyeopen(),
     IconEyeclose: iconEyeclose()
   },
@@ -99,7 +102,7 @@ export default {
         return data
       }
 
-      return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body' }]
+      return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body', id: 'root' }]
     }
     const state = reactive({
       pageSchema: [],
@@ -118,6 +121,14 @@ export default {
       }
     })
 
+    watch(
+      () => state.pageSchema,
+      (value) => {
+        // eslint-disable-next-line no-console
+        console.log(value)
+      }
+    )
+
     const { subscribe, unsubscribe } = useMessage()
 
     onActivated(() => {
@@ -149,6 +160,7 @@ export default {
       }
     )
 
+    // TODO 未使用到的功能
     const toggleTree = () => {
       state.expandAll = !state.expandAll
     }

原版大纲树功能记录.md

@@ -0,0 +1,13 @@
+# 原版大纲数功能记录
+
+- 展开、收起
+- 全部展开按钮（逻辑实现了，UI 未体现）
+- 悬停节点，画布中出现对应的 hover 框
+- 悬停节点，展示“眼睛”。点击“眼睛”，画布中元素显隐
+- 点击节点，画布中选中节点
+- 如果节点是 Block，样式稍微不一样
+
+其他测试点：
+
+- 拖拽
+- 超高列表，带滚动条