feat:完整布局封装

src/views/chart/components/ContentBox/index.ts

@@ -0,0 +1,3 @@
+import ContentBox from './index.vue'
+
+export { ContentBox }

src/views/chart/components/ContentBox/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="go-content-box" :class="[`bg-depth${depth}`, flex && 'flex']">
+    <div v-if="showTop" class="top go-mt-0">
+      <n-text> {{ title }} </n-text>
+      <n-space>
+        <slot name="top-right"></slot>
+        <n-icon size="20" class="go-cursor-pointer">
+          <ChevronBackOutlineIcon />
+        </n-icon>
+      </n-space>
+    </div>
+    <aside class="content">
+      <n-scrollbar x-scrollable>
+        <n-scrollbar>
+          <slot></slot>
+        </n-scrollbar>
+      </n-scrollbar>
+    </aside>
+    <div v-if="showBottom" class="bottom go-mt-0">
+      <slot name="bottom"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { icon } from '@/plugins'
+const { ChevronBackOutlineIcon } = icon.ionicons5
+
+defineProps({
+  title: String,
+  showTop: {
+    type: Boolean,
+    default: true
+  },
+  showBottom: {
+    type: Boolean,
+    default: false
+  },
+  flex: {
+    type: Boolean,
+    default: false
+  },
+  // 背景深度
+  depth: {
+    type: Number,
+    default: 1
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$topHeight: 36px;
+@include go(content-box) {
+  height: calc(100vh - #{$--header-height});
+  margin: 1px;
+  margin-bottom: 0;
+  &.bg-depth0 {
+    @include filter-bg-color('background-color1');
+    .bottom,
+    .top {
+      @include filter-bg-color('background-color1');
+    }
+  }
+  &.bg-depth1 {
+    @include filter-bg-color('background-color1');
+    .bottom,
+    .top {
+      @include filter-bg-color('background-color2');
+    }
+  }
+  &.bg-depth2 {
+    @include filter-bg-color('background-color2');
+    .bottom,
+    .top {
+      @include filter-bg-color('background-color3');
+    }
+  }
+  &.bg-depth3 {
+    @include filter-bg-color('background-color3');
+    .bottom,
+    .top {
+      @include filter-bg-color('background-color4');
+    }
+  }
+  &.flex {
+    flex: 1;
+  }
+  .top,
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 36px;
+    padding: 0 10px;
+  }
+  .content {
+    height: calc(100vh - #{$--header-height} - #{$topHeight});
+    overflow: hidden;
+  }
+}
+</style>

src/views/chart/components/ContentCharts/index.ts

@@ -0,0 +1,3 @@
+import ContentCharts from './index.vue'
+
+export { ContentCharts }

src/views/chart/components/ContentCharts/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <ContentBox class="go-content-charts" title="图表" :depth="2">
+    <n-scrollbar></n-scrollbar>
+  </ContentBox>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { renderIcon } from '@/utils'
+import { icon } from '@/plugins'
+const {} = icon.ionicons5
+import { ContentBox } from '../ContentBox/index'
+</script>
+
+<style lang="scss" scoped>
+$wight: 200px;
+@include go(content-charts) {
+  width: $wight;
+}
+</style>

src/views/chart/components/ContentDetails/index.ts

@@ -0,0 +1,3 @@
+import ContentDetails from './index.vue'
+
+export { ContentDetails }

src/views/chart/components/ContentDetails/index.vue

@@ -0,0 +1,13 @@
+<template>
+   
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { renderIcon } from '@/utils'
+import { icon } from '@/plugins'
+const {   } = icon.ionicons5
+ 
+</script>
+<style lang="scss" scoped> 
+</style>

src/views/chart/components/ContentDraw/index.ts

@@ -0,0 +1,3 @@
+import ContentDraw from './index.vue'
+
+export { ContentDraw }

src/views/chart/components/ContentDraw/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <ContentBox
+    class="go-content-draw"
+    :flex="true"
+    :showTop="false"
+    :showBottom="true"
+    :depth="2"
+  >
+    <template #bottom>
+    </template>
+  </ContentBox>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { ContentBox } from '../ContentBox/index'
+</script>
+
+<style lang="scss" scoped>
+@include go(content-draw) {
+  overflow: hidden;
+  @include background-point('background-point');
+  @extend .go-point-bg;
+}
+</style>

src/views/chart/components/ContentLayers/index.ts

@@ -0,0 +1,3 @@
+import ContentLayers from './index.vue'
+
+export { ContentLayers }

src/views/chart/components/ContentLayers/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <ContentBox class="go-content-layers" title="图层"> </ContentBox>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { renderIcon } from '@/utils'
+import { icon } from '@/plugins'
+const {} = icon.ionicons5
+import { ContentBox } from '../ContentBox/index'
+</script>
+
+<style lang="scss" scoped>
+$wight: 200px;
+@include go(content-layers) {
+  width: $wight;
+}
+</style>

src/views/chart/index.vue

@@ -12,8 +12,13 @@
           <HeaderRightBtn />
         </template>
       </HeaderPro>
-      <n-layout-content>
-        <n-space></n-space>
+      <n-layout-content content-style="overflow:hidden; display: flex">
+        <!-- <n-space :size="2">
+          
+        </n-space> -->
+        <ContentLayers />
+        <ContentCharts />
+        <ContentDraw />
       </n-layout-content>
     </n-layout>
   </div>
@@ -24,6 +29,9 @@ import { HeaderPro } from '@/layout/components/HeaderPro'
 import { HeaderLeftBtn } from './components/HeaderLeftBtn/index'
 import { HeaderRightBtn } from './components/HeaderRightBtn/index'
 import { HeaderTitle } from './components/HeaderTitle/index'
+import { ContentLayers } from './components/ContentLayers/index'
+import { ContentCharts } from './components/ContentCharts/index'
+import { ContentDraw } from './components/ContentDraw/index'
 </script>
 
 <style lang="scss" scoped>