fix: 修改key

src/components/LoadingComponent/index.ts

@@ -1,3 +1,12 @@
-import LoadingComponent from './index.vue';
+import type { App } from 'vue'
+import LoadingComponent from './index.vue'
+import AsyncLoading from './index.vue'
 
-export { LoadingComponent };
+// 正常组件
+export { LoadingComponent }
+
+// 异步
+AsyncLoading.install = (app: App): void => {
+  app.component('AsyncLoading', AsyncLoading)
+}
+export { AsyncLoading }

src/components/LoadingComponent/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Skeleton repeat="3" :load="true"/>
+    <Skeleton :repeat="3" :load="true"/>
   </div>
 </template>
 

src/packages/components/Chart/Bars/BarCommon/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const BarCommonConfig: ConfigType = {
-  key: 'BarCommon',
+  key: 'VBarCommon',
   title: '柱状图',
   category: ChatCategoryEnum.BAR,
   node: BarCommon,

src/packages/components/Chart/Bars/BarCrossrange/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const BarCrossrangefig: ConfigType = {
-  key: 'BarCrossrange',
+  key: 'VBarCrossrange',
   title: '横向柱状图',
   category: ChatCategoryEnum.BAR,
   node: BarCrossrange,

src/packages/components/Chart/Lines/LineCommon/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const LineCommonConfig: ConfigType = {
-  key: 'LineCommon',
+  key: 'VLineCommon',
   title: '折线图',
   category: ChatCategoryEnum.LINE,
   node: LineCommon,

src/packages/components/Chart/Lines/LineGradientSingle/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const LineGradientSingleConfig: ConfigType = {
-  key: 'LineGradientSingle',
+  key: 'VLineGradientSingle',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
   node: LineGradientSingle,

src/packages/components/Chart/Lines/LineGradients/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const LineGradientsConfig: ConfigType = {
-  key: 'LineGradientSingle',
+  key: 'VLineGradientSingle',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
   node: LineGradients,

src/packages/components/Chart/Maps/MapChine/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const MapChineConfig: ConfigType = {
-  key: 'MapChine',
+  key: 'VMapChine',
   title: '北京地图',
   category: ChatCategoryEnum.MAP,
   node: MapChine,

src/packages/components/Chart/Mores/Funnel/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const FunnelConfig: ConfigType = {
-  key: 'Funnel',
+  key: 'VFunnel',
   title: '漏斗图',
   category: ChatCategoryEnum.MORE,
   node: Funnel,

src/packages/components/Chart/Mores/Heatmap/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const HeatmapConfig: ConfigType = {
-  key: 'Heatmap',
+  key: 'VHeatmap',
   title: '热力图',
   category: ChatCategoryEnum.MORE,
   node: Heatmap,

src/packages/components/Chart/Mores/Point/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const PointConfig: ConfigType = {
-  key: 'Point',
+  key: 'VPoint',
   title: '热力图',
   category: ChatCategoryEnum.MORE,
   node: Point,

src/packages/components/Chart/Mores/Radar/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const RadarConfig: ConfigType = {
-  key: 'Radar',
+  key: 'VRadar',
   title: '雷达',
   category: ChatCategoryEnum.MORE,
   node: Radar,

src/packages/components/Chart/Mores/TreeMap/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const TreeMapConfig: ConfigType = {
-  key: 'TreeMap',
+  key: 'VTreeMap',
   title: '树形分布',
   category: ChatCategoryEnum.MORE,
   node: TreeMap,

src/packages/components/Chart/Mores/Variable/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const VariableConfig: ConfigType = {
-  key: 'Variable',
+  key: 'VVariable',
   title: '折线面积图',
   category: ChatCategoryEnum.MORE,
   node: Variable,

src/packages/components/Chart/Pies/PieCommon/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const PieCommonConfig: ConfigType = {
-  key: 'PieCommon',
+  key: 'VPieCommon',
   title: '计量图',
   category: ChatCategoryEnum.PIE,
   node: PieCommon,

src/packages/components/Decorate/Mores/Number/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const NumberConfig: ConfigType = {
-  key: 'Number',
+  key: 'VNumber',
   title: '数字翻牌',
   category: ChatCategoryEnum.MORE,
   node: Number,

src/packages/components/Decorate/Mores/Time/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const TimeConfig: ConfigType = {
-  key: 'Time',
+  key: 'VTime',
   title: '时间',
   category: ChatCategoryEnum.MORE,
   node: Time,

src/packages/components/Decorate/Mores/Weather/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const WeatherConfig: ConfigType = {
-  key: 'Weather',
+  key: 'VWeather',
   title: '天气',
   category: ChatCategoryEnum.MORE,
   node: Weather,

src/packages/components/Decorate/Mores/WeatherTime/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const WeatherTimeConfig: ConfigType = {
-  key: 'WeatherTime',
+  key: 'VWeatherTime',
   title: '天气和时间',
   category: ChatCategoryEnum.MORE,
   node: WeatherTime,

src/packages/components/Decorate/borders/borderCommon/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const BorderCommonConfig: ConfigType = {
-  key: 'BorderCommon',
+  key: 'VBorderCommon',
   title: '边框',
   category: ChatCategoryEnum.BORDER,
   node: BorderCommon,

src/packages/components/Information/Mores/Image/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const ImageConfig: ConfigType = {
-  key: 'Image',
+  key: 'VImage',
   title: '图片',
   category: ChatCategoryEnum.MORE,
   node: Image,

src/packages/components/Information/Mores/TextCloud/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const TextCloudConfig: ConfigType = {
-  key: 'TextCloud',
+  key: 'VTextCloud',
   title: '词云',
   category: ChatCategoryEnum.MORE,
   node: TextCloud,

src/packages/components/Information/Texts/TextCommon/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const TextCommonConfig: ConfigType = {
-  key: 'Text',
+  key: 'VText',
   title: '文字',
   category: ChatCategoryEnum.TEXT,
   node: TextCommon,

src/packages/components/Information/Titles/TitleBevelAngle/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const TitleBevelAngleConfig: ConfigType = {
-  key: 'TitleBevelAngle',
+  key: 'VTitleBevelAngle',
   title: '斜角标题',
   category: ChatCategoryEnum.TITLE,
   node: TitleBevelAngle,

src/packages/components/Information/Titles/TitleCommon/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const TitleCommonConfig: ConfigType = {
-  key: 'Text',
+  key: 'VText',
   title: '普通标题',
   category: ChatCategoryEnum.TITLE,
   node: TitleCommon,

src/packages/components/Information/Titles/TitlePro/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
 export const TitleProConfig: ConfigType = {
-  key: 'TitlePro',
+  key: 'VTitlePro',
   title: '中心标题',
   category: ChatCategoryEnum.TITLE,
   node: TitlePro,

src/packages/components/Tables/TableCategory/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../index.d'
 
 export const TableCategoryConfig: ConfigType = {
-  key: 'TableCategory',
+  key: 'VTableCategory',
   title: '归类表格',
   category: ChatCategoryEnum.table,
   node: TableCategory,

src/packages/components/Tables/tableCommon/index.ts

@@ -4,7 +4,7 @@ import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../index.d'
 
 export const TableCommonConfig: ConfigType = {
-  key: 'TableCommon',
+  key: 'VTableCommon',
   title: '表格',
   category: ChatCategoryEnum.table,
   node: TableCommon,

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -58,7 +58,7 @@ export const useChartLayoutStore = defineStore({
       ;(this as any)[key] = value
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
     },
-    setFilter<T extends keyof ChartLayoutType>(key: T, value: boolean): void {
+    setFilter<T extends keyof ChartLayoutFilterType>(key: T, value: boolean): void {
       ;(this.filter as any)[key] = value
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
     },

src/utils/componets.ts

@@ -0,0 +1,14 @@
+import { defineAsyncComponent, AsyncComponentLoader } from 'vue'
+import { AsyncLoading } from '@/components/LoadingComponent'
+
+/**
+ * * 异步加载组件
+ * @param loader
+ * @returns
+ */
+export const loadAsyncComponent = (loader: AsyncComponentLoader<any>) =>
+  defineAsyncComponent({
+    loader,
+    loadingComponent: AsyncLoading,
+    delay: 20,
+  })

src/utils/utils.ts

@@ -4,7 +4,7 @@ import screenfull from 'screenfull'
 import debounce from 'lodash/debounce'
 
 /**
- * * 生成一个用不重复的ID
+ * * 生成一个不重复的ID
  * @param { Number } randomLength
  */
 export function getUUID(randomLength: number) {

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>