feat: 新增左侧图表数据

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

@@ -38,7 +38,16 @@ $centerHeight: 80px;
   width: $itemWidth;
   overflow: hidden;
   border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid rgba(0,0,0,0);
   @include filter-bg-color("background-color2");
+  @extend .go-transition;
+  &:hover {
+    @include hover-border-color('background-color4');
+    .list-img {
+      transform: scale(1.1);
+    }
+  }
   .list-header {
     display: flex;
     align-items: center;
@@ -53,9 +62,11 @@ $centerHeight: 80px;
   .list-center {
     padding: 6px 0;
     height: $centerHeight;
+    overflow: hidden;
     .list-img {
       height: 100%;
       border-radius: 6px;
+      @extend .go-transition;
     }
   }
 }

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

@@ -10,13 +10,15 @@
       @update:value="clickItemHandle"
     />
     <div class="chart-content-list">
-      <ItemBox :menuOptions="packages.selectOptions" />
+      <n-scrollbar>
+        <ItemBox :menuOptions="packages.selectOptions" />
+      </n-scrollbar>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, markRaw, reactive, computed } from 'vue'
+import { ref, watch, reactive, computed } from 'vue'
 import { ItemBox } from '../ItemBox/index'
 import { ConfigType } from '@/packages/index.d'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
@@ -32,7 +34,7 @@ const props = defineProps({
 const settingStore = useSettingStore()
 
 const hidePackageOneCategory = computed(() => {
-  if (packages.categorysNum > 1) return true
+  if (packages.categorysNum > 2) return true
   return !settingStore.getHidePackageOneCategory
 })
 
@@ -45,7 +47,10 @@ let packages = reactive<{
   // 当前选择
   selectOptions: {},
   // 分类归档
-  categorys: {},
+  categorys: {
+    // 全部
+    '全部': []
+  },
   // 分类归档数量
   categorysNum: 0,
   // 存储不同类别组件进来的选中值
@@ -71,8 +76,8 @@ watch(
     newData.list.forEach((e: ConfigType) => {
       const value: ConfigType[] = (packages.categorys as any)[e.category]
       // @ts-ignore
-      packages.categorys[e.category] =
-        value && value.length ? [...value, e] : [e]
+      packages.categorys[e.category] = (value && value.length ? [...value, e] : [e])
+      packages.categorys['全部'].push(e)
     })
     for (const val in packages.categorys) {
       packages.categorysNum += 1
@@ -98,7 +103,7 @@ const clickItemHandle = (key: string) => {
 
 <style lang="scss" scoped>
 /* 此高度与 ContentBox 组件关联*/
-$topHeight: 60px;
+$topHeight: 36px;
 $menuWidth: 65px;
 @include go("chart-common") {
   display: flex;

src/views/chart/components/ContentCharts/hooks/asideHook.ts

@@ -30,7 +30,7 @@ const packagesListObj = {
     label: renderLang('信息')
   },
   [PackagesCategoryEnum.TABLES]: {
-    icon: renderIcon(GraphicalDataFlowIcon),
+    icon: renderIcon(TableSplitIcon),
     label: renderLang('表格')
   },
   [PackagesCategoryEnum.DECORATES]: {

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

@@ -3,6 +3,7 @@
     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