开发大纲树

src/utils/material.js

@@ -5,6 +5,7 @@ export default class Material{
     constructor(type){
         const material = materialMap.get(type)
         this.id = nanoid(10)
+        this.title = material.title
         this.label = '组件描述' + nanoid(5)
         this.isContainer =  material.isContainer
         this.componentName = type,

src/views/layoutLeft/components/dataPanel.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { reactive, ref } from 'vue'
 import { _state, _stateKeys } from '@/stores/index.js'
-import { Tree } from 'ant-design-vue';
-import { Collapse, CollapsePanel, Modal, Form, FormItem, Input, Textarea, Button, List, ListItem } from 'ant-design-vue';
+import { Collapse, CollapsePanel, Modal, Form, FormItem, Input, Textarea, Button, Tree } from 'ant-design-vue';
 import { CaretRightOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons-vue';
 // https://jsonplaceholder.typicode.com/users
 const activeKey = ref("")

src/views/layoutLeft/components/outlinePanel.vue

@@ -1,9 +1,69 @@
 <script setup>
+import { Input, Tree } from 'ant-design-vue';
+import { SearchOutlined } from '@ant-design/icons-vue';
+import { schemaJson } from '@/stores/globalData.js'
+import { ref, watch } from 'vue'
+const list = ref([])
+watch(()=>schemaJson.value,(newValue) => {
+    console.log(newValue)
+    list.value = [{...newValue}]
+},{
+    immediate: true
+})
 </script>
 
 <template>
-    <h1>大纲面板</h1>
+    <div class="outline_panel">
+        <div class="panel-title">
+            大纲树
+        </div>
+        <div class="panel-search">
+            <Input v-model:value="keyWord" placeholder="搜索组件">
+            <template #suffix>
+                <SearchOutlined />
+            </template>
+            </Input>
+        </div>
+        <div class="panel-body">
+            <Tree :tree-data="list">
+
+            </Tree>
+        </div>
+    </div>
+
 </template>
 
-<style scoped>
+<style lang="scss">
+.outline_panel {
+    width: 100%;
+    height: 100%;
+
+    .panel-title {
+        height: 48px;
+        padding: 0 15px;
+        font-size: 16px;
+        line-height: 48px;
+        font-weight: 700;
+    }
+
+    .panel-search {
+        height: 52px;
+        padding: 0 16px;
+
+    }
+    .panel-body {
+        box-sizing: border-box;
+        border-top: 1px solid rgba(31, 56, 88, .1);
+        max-height: calc(100% - 100px);
+        overflow-y: auto;
+        padding: 10px 0;
+        .ant-tree-treenode{
+            width: 100%;
+            .ant-tree-node-content-wrapper{
+                flex: 1;
+            }
+        }
+
+    }
+}
 </style>