完成布局

examples/App.vue

@@ -3,11 +3,15 @@
     <header-nav v-if="showTools" title="web端产品库">
       <template #right>
         <mock/>
+        <div @click="showTools=false,dvDev=true">大屏开发</div>
         <div @click="showTools=false">隐藏工具栏</div>
         <div @click="handleLogin">点此登录</div>
       </template>
     </header-nav>
-    <el-row v-if="showTools" class="fill mar-t48" type="flex">
+    <ai-dv-wrapper class="fill" :views="[{label: '返回'}]" v-if="dvDev">
+      <router-view/>
+    </ai-dv-wrapper>
+    <el-row v-else-if="showTools" class="fill mar-t48" type="flex">
       <slider-nav/>
       <main-content class="fill"/>
     </el-row>
@@ -26,10 +30,11 @@ import MainContent from "./components/mainContent";
 import HeaderNav from "./components/headerNav";
 import {mapActions, mapMutations, mapState} from "vuex";
 import Mock from "./components/mock";
+import AiDvWrapper from "@dui/dv/layout/AiDvWrapper/AiDvWrapper.vue";
 
 export default {
   name: 'app',
-  components: {Mock, HeaderNav, MainContent, SliderNav},
+  components: {AiDvWrapper, Mock, HeaderNav, MainContent, SliderNav},
   computed: {
     ...mapState(['user']),
     login() {
@@ -42,6 +47,12 @@ export default {
     return {
       dialog: false,
       showTools: true,
+      dvDev: false
+    }
+  },
+  watch: {
+    showTools(v) {
+      v && (this.dvDev = false)
     }
   },
   methods: {