配置引导页完成一部分

core/apps/AppMenuManager/tools/compRender.vue

@@ -0,0 +1,22 @@
+<template>
+  <section class="compRender">
+
+  </section>
+</template>
+
+<script>
+export default {
+  name: "compRender",
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.compRender {
+}
+</style>

core/apps/AppMenuManager/tools/componentLib.vue

@@ -0,0 +1,67 @@
+<template>
+  <section class="componentLib">
+    <el-button type="text" @click="drawer=true">组件库</el-button>
+    <el-drawer title="组件库" :visible.sync="drawer" direction="ltr" :modal="false" size="100%">
+      <el-row class="item" type="flex" align="middle" v-for="item in list" :key="item.value" @click.native="handleClick">
+        <i class="icon" :class="item.icon"/>
+        <div class="fill mar-l8" v-text="item.label"/>
+      </el-row>
+    </el-drawer>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "componentLib",
+  data() {
+    return {
+      drawer: true,
+      list: [
+        {value: 'text', icon: 'iconfont iconrich_text', label: "文字组件", width: 300, height: 32},
+        {value: 'image', icon: 'el-icon-picture', label: "图片组件", width: 300, height: 300},
+        {value: 'startBtn', icon: 'el-icon-video-play', label: "开始使用", width: 80, height: 32},
+      ]
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.$emit('select', item)
+    }
+  },
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.componentLib {
+  .mar-l8 {
+    margin-left: 8px;
+  }
+
+  .item {
+    font-size: 16px;
+    margin: 8px;
+    padding: 4px;
+    border: 1px dashed #ddd;
+    cursor: pointer;
+
+    &:hover {
+      opacity: .8;
+    }
+
+    .icon {
+      font-size: 20px;
+    }
+  }
+
+  ::v-deep.el-drawer__wrapper {
+    position: fixed !important;
+    top: 96px;
+    bottom: 0;
+    left: 0;
+    width: 200px;
+  }
+}
+</style>

core/apps/AppMenuManager/tools/fieldPane.vue

@@ -0,0 +1,22 @@
+<template>
+  <section class="fieldPane">
+    <el-drawer></el-drawer>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "fieldPane",
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fieldPane {
+}
+</style>