fix: 修改收缩功能

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">
-    <n-tabs size="small" type="segment">
-      <n-tab-pane name="chap1" display-directive="show:lazy">
+  <ContentBox
+    class="go-content-layers go-boderbox"
+    :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
-      </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
+        <component :is="item.render"></component>
       </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>