fix: 新增切换按钮

src/plugins/icon.ts

@@ -33,8 +33,9 @@ import {
   BarChart as BarChartIcon,
   Layers as LayersIcon,
   Prism as PrismIcon,
-  CubeOutline as CubeIcon,
-  ChevronBackOutline as ChevronBackOutlineIcon
+  Cube as CubeIcon,
+  ChevronBackOutline as ChevronBackOutlineIcon,
+  Flash as FlashIcon
 } from '@vicons/ionicons5'
 
 // ionicons5 在这里
@@ -110,7 +111,9 @@ const ionicons5 = {
   // 正方体
   CubeIcon,
   // 折叠/回退
-  ChevronBackOutlineIcon
+  ChevronBackOutlineIcon,
+  // 后端数据（闪电）
+  FlashIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/styles/common/style.scss

@@ -27,6 +27,11 @@
   cursor: pointer;
 }
 
+// IE盒模型
+.go-boderbox {
+  box-sizing: border-box;
+}
+
 // 毛玻璃
 .go-background-filter {
   backdrop-filter: $--filter-blur-base;
@@ -49,18 +54,18 @@
 // todo 使用 scss 循环写一套完整的
 // margin
 .go-mt-0 {
-  margin-top: 0!important;
+  margin-top: 0 !important;
 }
 
 .go-mb-0 {
-  margin-bottom: 0!important;
+  margin-bottom: 0 !important;
 }
 .go-ml-0 {
-  margin-left: 0!important;
+  margin-left: 0 !important;
 }
 
 .go-mr-0 {
-  margin-right: 0!important;
+  margin-right: 0 !important;
 }
 
 .go-my-0 {
@@ -74,18 +79,18 @@
 }
 
 .go-pt-0 {
-  padding-top: 0!important;
+  padding-top: 0 !important;
 }
 
 .go-pb-0 {
-  padding-bottom: 0!important;
+  padding-bottom: 0 !important;
 }
 .go-pl-0 {
-  padding-left: 0!important;
+  padding-left: 0 !important;
 }
 
 .go-pr-0 {
-  padding-right: 0!important;
+  padding-right: 0 !important;
 }
 
 .go-py-0 {

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

@@ -1,13 +1,49 @@
 <template>
-   
+  <ContentBox class="go-content-layers go-boderbox" :showTop="false">
+    <n-tabs size="small" type="segment">
+      <n-tab-pane name="chap1" display-directive="show:lazy">
+        <template #tab>
+          <n-space>
+            <span>配置项</span>
+            <n-icon size="16" class="icon-position">
+              <CubeIcon />
+            </n-icon>
+          </n-space>
+        </template>
+        1
+      </n-tab-pane>
+      <n-tab-pane name="chap2" display-directive="show:lazy">
+         <template #tab>
+          <n-space>
+            <span>后端数据</span>
+            <n-icon size="16" class="icon-position">
+              <FlashIcon />
+            </n-icon>
+          </n-space>
+        </template>
+        2
+      </n-tab-pane>
+    </n-tabs>
+  </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'
+
+const { CubeIcon, FlashIcon } = icon.ionicons5
 </script>
-<style lang="scss" scoped> 
+
+<style lang="scss" scoped>
+$wight: 400px;
+@include go(content-layers) {
+  width: $wight;
+  padding: 10px;
+  .icon-position {
+    padding-top: 2px;
+    color: #70c0e8;
+  }
+}
 </style>

src/views/chart/index.vue

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