fix: 修改key

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

@@ -1,76 +1,100 @@
 <template>
-  <ContentBox
-    class="go-content-layers go-boderbox"
-    :class="{ scoped: !chartLayoutStore.getDetails }"
-    :showTop="false"
-    :depth="2"
-  >
-    <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>{{ item.title }}</span>
-            <n-icon size="16" class="icon-position">
-              <component :is="item.icon"></component>
-            </n-icon>
-          </n-space>
-        </template>
-        <component :is="item.render"></component>
-      </n-tab-pane>
-    </n-tabs>
-  </ContentBox>
+  <n-layout has-sider sider-placement="right">
+    <n-layout-content>
+      <!-- 为了展示折叠的按钮，放在了这里 呜呜呜 -->
+      <ContentDrag />
+    </n-layout-content>
+    <n-layout-sider
+      collapse-mode="transform"
+      :collapsed-width="0"
+      :width="350"
+      :collapsed="collapsed"
+      :native-scrollbar="false"
+      show-trigger="bar"
+      @collapse="collapsedHindle"
+      @expand="expandHindle"
+    >
+      <ContentBox class="go-content-layers go-boderbox" :showTop="false" :depth="2">
+        <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>{{ item.title }}</span>
+                <n-icon size="16" class="icon-position">
+                  <component :is="item.icon"></component>
+                </n-icon>
+              </n-space>
+            </template>
+            <component :is="item.render"></component>
+          </n-tab-pane>
+        </n-tabs>
+      </ContentBox>
+    </n-layout-sider>
+  </n-layout>
 </template>
 
 <script setup lang="ts">
-import { reactive, shallowRef } from 'vue'
+import {  shallowRef, ref, toRefs, watch } from 'vue'
 import { icon } from '@/plugins'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { Setting } from './components/Setting/index'
 import { Behind } from './components/Behind/index'
+import { ContentDrag } from '../ContentDrag/index'
 
-const chartLayoutStore = useChartLayoutStore()
+const { getDetails } = toRefs(useChartLayoutStore())
+const { setItem } = useChartLayoutStore()
 
 const { CubeIcon, FlashIcon } = icon.ionicons5
 
-const tabList = reactive([
+const collapsed = ref<boolean>(getDetails.value)
+
+const collapsedHindle = () => {
+  collapsed.value = true
+  setItem(ChartLayoutStoreEnums.DETAILS, true)
+}
+
+const expandHindle = () => {
+  collapsed.value = false
+  setItem(ChartLayoutStoreEnums.DETAILS, false)
+}
+
+watch(getDetails, (newData) => {
+  if (newData) {
+    collapsedHindle()
+  } else {
+    expandHindle()
+  }
+})
+
+const tabList = shallowRef([
   {
     key: 'setting',
     title: '配置项',
     icon: CubeIcon,
-    render: shallowRef(Setting)
+    render: Setting
   },
   {
     key: 'behind',
     title: '后端数据',
     icon: FlashIcon,
-    render: shallowRef(Behind)
+    render: Behind
   }
 ])
 </script>
 
 <style lang="scss" scoped>
-$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/HeaderLeftBtn/index.vue

@@ -8,19 +8,9 @@
       </template>
     </n-button>
     <n-space>
-      <n-tooltip
-        v-for="item in btnList"
-        :key="item.key"
-        placement="bottom"
-        trigger="hover"
-      >
+      <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
         <template #trigger>
-          <n-button
-            :type="item.select ? 'success' : ''"
-            size="small"
-            ghost
-            @click="clickHandle(item)"
-          >
+          <n-button :type="styleHandle(item)" size="small" ghost @click="clickHandle(item)">
             <component :is="item.icon"></component>
           </n-button>
         </template>
@@ -69,6 +59,15 @@ const btnList = reactive<ItemType[]>([
   }
 ])
 
+
+// store 描述的是展示的值，所以和 ContentDetails 的 collapsed 是相反的
+const styleHandle = (item: ItemType) => {
+  if (item.key === ChartLayoutStoreEnums.DETAILS) {
+    return item.select ? '' : 'success'
+  }
+  return item.select ? 'success' : ''
+}
+
 const clickHandle = (item: ItemType) => {
   setItem(item.key, !item.select)
 }

src/views/chart/index.vue

@@ -15,7 +15,6 @@
       <n-layout-content content-style="overflow:hidden; display: flex">
         <ContentCharts />
         <ContentLayers />
-        <ContentDrag />
         <ContentDetails />
       </n-layout-content>
     </n-layout>
@@ -29,7 +28,6 @@ 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 { ContentDrag } from './components/ContentDrag/index'
 import { ContentDetails } from './components/ContentDetails/index'
 </script>