feat:完整布局封装

src/plugins/icon.ts

@@ -33,7 +33,8 @@ import {
   BarChart as BarChartIcon,
   Layers as LayersIcon,
   Prism as PrismIcon,
-  CubeOutline as CubeIcon
+  CubeOutline as CubeIcon,
+  ChevronBackOutline as ChevronBackOutlineIcon
 } from '@vicons/ionicons5'
 
 // ionicons5 在这里
@@ -106,7 +107,10 @@ const ionicons5 = {
   LayersIcon,
   // 组件详情设置（三棱镜）
   PrismIcon,
-  CubeIcon
+  // 正方体
+  CubeIcon,
+  // 折叠/回退
+  ChevronBackOutlineIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/styles/common/_dark.scss

@@ -5,6 +5,11 @@ $dark: (
     color: $--color-text-4,
   //背景
     background-color: $--color-dark-bg-1,
+    background-color1: $--color-dark-bg-1,
+    background-color2: $--color-dark-bg-2,
+    background-color3: $--color-dark-bg-3,
+    background-color4: $--color-dark-bg-4,
+    background-color5: $--color-dark-bg-5,
   //渐变背景
     background-image:
     linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-1 100%),

src/styles/common/_light.scss

@@ -4,20 +4,25 @@ $light: (
   // 文字颜色
     color: $--color-text,
   // aside 背景
-    aside-background_color: $--color-light-fill-1,
+    aside-background-color: $--color-light-bg-1,
   //背景
-    background_color: $--color-light-fill-3,
+    background-color: $--color-light-bg-3,
+    background-color1: $--color-light-bg-1,
+    background-color2: $--color-light-bg-2,
+    background-color3: $--color-light-bg-3,
+    background-color4: $--color-light-bg-4,
+    background-color5: $--color-light-bg-5,
   //渐变背景
     background-image:
-    linear-gradient(120deg, $--color-light-fill 0%, $--color-light-fill 100%),
+    linear-gradient(120deg, $--color-light-bg 0%, $--color-light-bg 100%),
   // 斑点背景
     background-point:
     (
-      linear-gradient($--color-light-fill-1 14px, transparent 0),
+      linear-gradient($--color-light-bg-1 14px, transparent 0),
       linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0)
     ),
   //毛玻璃
     filter-color: $--filter-color-login-light,
   // hover 边框颜色
-    hover-border-color: $--color-light-fill-1
+    hover-border-color: $--color-light-bg-1
 );

src/styles/common/style.scss

@@ -22,6 +22,11 @@
   transform: translate(-50%, -50%);
 }
 
+// cursor 小手
+.go-cursor-pointer {
+  cursor: pointer;
+}
+
 // 毛玻璃
 .go-background-filter {
   backdrop-filter: $--filter-blur-base;

src/styles/common/var.scss

@@ -11,11 +11,13 @@ $--color-text-3: #c9cdd4;
 $--color-text-4: #f2f3f5;
 
 // 白色
-$--color-light-fill: #fff;
+$--color-light-bg: #fff;
-$--color-light-fill-1: #fafafc;
+$--color-light-bg-1: #fafafc;
-$--color-light-fill-2: #f2f3f5;
+$--color-light-bg-2: #f2f3f5;
-$--color-light-fill-3: #e5e6eb;
+$--color-light-bg-3: #e5e6eb;
-$--color-light-fill-4: #c9cdd4;
+$--color-light-bg-4: #c9cdd4;
+$--color-light-bg-5: #bebebe;
+$--color-dark-border: #efeff5;
 
 // 黑色
 $--color-dark-black: #000;

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-layout-content content-style="overflow:hidden; display: flex">
-        <n-space></n-space>
+        <!-- <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>

src/views/project/layout/components/Sider/index.vue

@@ -68,7 +68,7 @@ $siderHeight: 100vh;
 
 @include go(project) {
   &-sider {
-    @include filter-bg-color('aside-background_color');
+    @include filter-bg-color('aside-background-color');
     &-top {
       display: flex;
       align-items: center;