feat: layout demos

d2/menus/index.js

@@ -8,26 +8,26 @@ export const indexMenu = new Menu('首页')
   .url('/')
   .icon('icon-park-outline:home')
 
-export const demoScrollMenus = new Menu('滚动')
+export const demoComponentScrollMenus = new Menu('滚动')
   .scope('/dashboard/demo/component/scroll')
   .icon('icon-park-outline:move')
   .add(new Menu('总览').index())
   .add(new Menu('基础').url('/base'))
 
-export const demoSvgMenus = new Menu('SVG')
+export const demoComponentSvgMenus = new Menu('SVG')
   .icon('icon-park-outline:pic-one')
   .scope('/dashboard/demo/component/svg')
   .add(new Menu('总览').index())
   .add(new Menu('基础').url('/base'))
   .add(new Menu('尺寸').url('/size'))
 
-export const demoIconMenus = new Menu('图标')
+export const demoComponentIconMenus = new Menu('图标')
   .icon('icon-park-outline:emotion-happy')
   .scope('/dashboard/demo/component/icon')
   .add(new Menu('总览').index())
   .add(new Menu('基础').url('/base'))
 
-export const demoBreakPointMenus = new Menu('断点')
+export const demoComponentBreakPointMenus = new Menu('断点')
   .icon('icon-park-outline:distribute-horizontally')
   .scope('/dashboard/demo/component/break-point')
   .add(new Menu('总览').index())
@@ -35,7 +35,7 @@ export const demoBreakPointMenus = new Menu('断点')
   .add(new Menu('data').url('/data'))
   .add(new Menu('slot').url('/slot'))
 
-export const demoFlexMenus = new Menu('Flex')
+export const demoComponentFlexMenus = new Menu('Flex')
   .icon('icon-park-outline:carousel')
   .scope('/dashboard/demo/component/flex')
   .add(new Menu('总览').index())
@@ -52,14 +52,23 @@ export const demoFlexMenus = new Menu('Flex')
   .add(new Menu('tag').url('/tag'))
   .add(new Menu('all').url('/all'))
 
-export const demoMenus = new Menu('组件')
+export const demoComponentMenus = new Menu('组件')
   .icon('icon-park-outline:components')
   .add(new Menu('总览').url('/dashboard/demo/component').index())
-  .add(demoScrollMenus)
-  .add(demoSvgMenus)
-  .add(demoIconMenus)
-  .add(demoBreakPointMenus)
-  .add(demoFlexMenus)
+  .add(demoComponentScrollMenus)
+  .add(demoComponentSvgMenus)
+  .add(demoComponentIconMenus)
+  .add(demoComponentBreakPointMenus)
+  .add(demoComponentFlexMenus)
+
+export const demoLayoutMenus = new Menu('布局')
+  .icon('icon-park-outline:components')
+  .scope('/dashboard/demo/layout')
+  .add(new Menu('总览').index())
+  .add(new Menu('基础').url('/base'))
+  .add(new Menu('absolute').url('/absolute'))
+  .add(new Menu('full').url('/full'))
+  .add(new Menu('page-width').url('/page-width'))
 
 export const documentMenus = new Menu('文档')
   .icon('icon-park-outline:doc-detail')

d2/views/dashboard/demo/layout/absolute.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="absolute top-0 left-0 p-2 bg-gray-100">LT</div>
+  <div class="absolute top-0 right-0 p-2 bg-gray-100">RT</div>
+  <div class="absolute bottom-0 left-0 p-2 bg-gray-100">LB</div>
+  <div class="absolute bottom-0 right-0 p-2 bg-gray-100">RB</div>
+</template>

d2/views/dashboard/demo/layout/base.vue

@@ -0,0 +1,3 @@
+<template>
+  page content  
+</template>

d2/views/dashboard/demo/layout/full.vue

@@ -0,0 +1,3 @@
+<template>
+  <d2-flex class="w-full h-full text-4xl bg-gray-700 text-gray-50" center>Full</d2-flex>
+</template>

d2/views/dashboard/demo/layout/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <demo-page-placeholder/>
+</template>

d2/views/dashboard/demo/layout/page-width.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="max-w-5xl mx-auto">
+    <div class="bg-gray-50">
+      <p v-for="n in 100" :key="n">{{ n }}</p>
+    </div>
+  </div>
+</template>

src/menus/index.js

@@ -2,7 +2,8 @@ import { Menu } from 'd2/utils/menu.js'
 import {
   indexMenu,
   dashboardIndexMenu,
-  demoMenus,
+  demoComponentMenus,
+  demoLayoutMenus,
   documentMenus
 } from 'd2/menus/index.js'
 
@@ -15,12 +16,13 @@ export const menuMain = [
   indexMenu.value(),
   dashboardIndexMenu.value(),
   startMenu,
-  demoMenus.value(),
+  demoComponentMenus.value(),
+  demoLayoutMenus.value(),
   documentMenus.value()
 ]
 
 export const menuSecondary = [
-  demoMenus.value(),
+  demoComponentMenus.value(),
   documentMenus.value()
 ]