fix: 修改收缩功能

src/plugins/naive.ts

@@ -9,6 +9,7 @@ import {
   NH4,
   NText,
   NTime,
+  NEllipsis,
   NConfigProvider,
   NMessageProvider,
   NDialogProvider,
@@ -91,6 +92,7 @@ const naive = create({
     NH4,
     NText,
     NTime,
+    NEllipsis,
     NMessageProvider,
     NDialogProvider,
     NConfigProvider,

src/styles/common/style.scss

@@ -5,7 +5,7 @@
 // extends
 // 过度
 .go-transition {
-  transition: all 0.2s;
+  transition: all 0.4s;
 }
 
 .go-flex-center {
@@ -15,6 +15,10 @@
   text-align: center;
 }
 
+.go-flex-no-wrap {
+  flex-wrap: nowrap!important;
+}
+
 .go-absolute-center {
   position: absolute;
   top: 50%;

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

@@ -1,10 +1,22 @@
 <template>
   <div class="go-content-box" :class="[`bg-depth${depth}`, flex && 'flex']">
-    <div v-if="showTop" class="top go-mt-0">
+    <div v-if="showTop" class="top go-mt-0 go-flex-no-wrap">
+      <n-space class="go-flex-no-wrap">
+        <n-ellipsis>
           <n-text>{{ title }}</n-text>
+        </n-ellipsis>
+        <div class="mt-1">
+          <slot name="icon"></slot>
+        </div>
+      </n-space>
       <n-space>
         <slot name="top-right"></slot>
-        <n-icon size="20" class="go-cursor-pointer">
+        <n-icon
+          v-show="backIcon"
+          size="20"
+          class="go-cursor-pointer"
+          @click="backHandle"
+        >
           <ChevronBackOutlineIcon />
         </n-icon>
       </n-space>
@@ -25,6 +37,7 @@
 <script setup lang="ts">
 import { icon } from '@/plugins'
 const { ChevronBackOutlineIcon } = icon.ionicons5
+const emit = defineEmits(['back'])
 
 defineProps({
   title: String,
@@ -40,12 +53,21 @@ defineProps({
     type: Boolean,
     default: false
   },
+  // back
+  backIcon: {
+    type: Boolean,
+    default: true
+  },
   // 背景深度
   depth: {
     type: Number,
     default: 1
   }
 })
+
+const backHandle = () => {
+  emit('back')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -89,9 +111,13 @@ $topHeight: 36px;
   .bottom {
     display: flex;
     justify-content: space-between;
+    flex-wrap: nowrap;
     align-items: center;
     height: 36px;
     padding: 0 10px;
+    .mt-1 {
+      margin-top: 2px;
+    }
   }
   .content {
     height: calc(100vh - #{$--header-height} - #{$topHeight});

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

@@ -1,20 +1,36 @@
 <template>
-  <ContentBox class="go-content-charts" title="图表" :depth="2">
+  <ContentBox
-    <n-scrollbar></n-scrollbar>
+    class="go-content-charts"
+    :class="{ scoped: !getCharts }"
+    title="图表"
+    :depth="2"
+    :backIcon="getCharts"
+  >
+    <template #icon>
+      <n-icon size="14" :depth="2">
+        <component :is="BarChartIcon" />
+      </n-icon>
+    </template>
   </ContentBox>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { toRefs } from 'vue'
-import { renderIcon } from '@/utils'
 import { icon } from '@/plugins'
-const {} = icon.ionicons5
+const { BarChartIcon } = icon.ionicons5
 import { ContentBox } from '../ContentBox/index'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+const { getCharts } = toRefs(useChartLayoutStore())
 </script>
 
 <style lang="scss" scoped>
-$wight: 200px;
+$wight: 300px;
+$wightScoped: 80px;
 @include go(content-charts) {
   width: $wight;
+  @extend .go-transition;
+  &.scoped {
+    width: $wightScoped;
+  }
 }
 </style>

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

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

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

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    后端数据
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

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

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

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    设置
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -1,27 +1,25 @@
 <template>
-  <ContentBox class="go-content-layers go-boderbox" :showTop="false">
+  <ContentBox
-    <n-tabs size="small" type="segment">
+    class="go-content-layers go-boderbox"
-      <n-tab-pane name="chap1" display-directive="show:lazy">
+    :class="{ scoped: !chartLayoutStore.getDetails }"
+    :showTop="false"
+  >
+    <n-tabs class="tabs-box" size="small" type="segment">
+      <n-tab-pane
+        v-for="item in tabList"
+        :key="item.key"
+        :name="item.key"
+        display-directive="show:lazy"
+      >
         <template #tab>
           <n-space>
-            <span>配置项</span>
+            <span>{{ item.title }}</span>
             <n-icon size="16" class="icon-position">
-              <CubeIcon />
+              <component :is="item.icon"></component>
             </n-icon>
           </n-space>
         </template>
-        1
+        <component :is="item.render"></component>
-      </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>
@@ -32,8 +30,28 @@ import { reactive } from 'vue'
 import { renderIcon } from '@/utils'
 import { icon } from '@/plugins'
 import { ContentBox } from '../ContentBox/index'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { Setting } from './components/Setting/index'
+import { Behind } from './components/Behind/index'
+
+const chartLayoutStore = useChartLayoutStore()
 
 const { CubeIcon, FlashIcon } = icon.ionicons5
+
+const tabList = reactive([
+  {
+    key: 'setting',
+    title: '配置项',
+    icon: renderIcon(CubeIcon),
+    render: Setting
+  },
+  {
+    key: 'behind',
+    title: '后端数据',
+    icon: renderIcon(FlashIcon),
+    render: Behind
+  }
+])
 </script>
 
 <style lang="scss" scoped>
@@ -41,8 +59,18 @@ $wight: 400px;
 @include go(content-layers) {
   width: $wight;
   padding: 10px;
+  overflow: hidden;
+  @extend .go-transition;
   .icon-position {
     padding-top: 2px;
   }
+  &.scoped {
+    width: 0;
+    padding: 0;
+  }
+  .tabs-box {
+    /* padding 值 */
+    width: $wight - 2 * 10;
+  }
 }
 </style>

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

@@ -1,18 +1,38 @@
 <template>
-  <ContentBox class="go-content-layers" title="图层"> </ContentBox>
+  <ContentBox
+    class="go-content-layers"
+    :class="{ scoped: !chartLayoutStore.getLayers }"
+    title="图层"
+    @back="backHandle"
+  >
+    <template #icon>
+      <n-icon size="16" :depth="2">
+        <component :is="LayersIcon" />
+      </n-icon>
+    </template>
+  </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'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { icon } from '@/plugins'
+const { LayersIcon } = icon.ionicons5
+const chartLayoutStore = useChartLayoutStore()
+
+const backHandle = () => {
+  chartLayoutStore.setItem('layers', false)
+}
 </script>
 
 <style lang="scss" scoped>
 $wight: 200px;
 @include go(content-layers) {
   width: $wight;
+  overflow: hidden;
+  @extend .go-transition;
+  &.scoped {
+    width: 0;
+  }
 }
 </style>