feat(src/views/chart): 修改重写ChartsOptionContent组件路径,修改不需要的隐藏

+/**
+ * 需要隐藏的组件配置
+ * 加重写的都是覆盖原组件的
+ * 没加重写的是原来就有的
+ */
+
+export const hideAsideComponentsObj = {
+  Bars: [
+    'VBarCommon' //柱状图
+  ],
+  Lines: [
+    'VLineCommon', //折线图
+    'VLineGradients', //双折线渐变面积图
+    'ExternalVCOverrideLineGradients' //重写双折线渐变面积图
+  ],
+  Pies: [
+    'VPieCircle' //饼图-环形
+  ],
+  Maps: [
+    'VMapBase' //地图(可选省份)
+  ],
+  Mores: [
+    'VProcess', //NaiveUI-进度
+    'VImage', //图片
+    'VImageCarousel' //轮播图
+  ],
+  Texts: [
+    'VTextGradient', //渐变文字
+    'VTextBarrage', //弹幕文字
+    'VTextCommon' //文字
+  ],
+  all: [
+    'VBarCommon', //柱状图
+    'VLineCommon', //折线图
+    'VLineLinearSingle', //单折线渐变图
+    'VLineGradientSingle', //单折线渐变面积图
+    'VLineGradients', //双折线渐变面积图
+    'ExternalVCOverrideLineGradients', //重写双折线渐变面积图
+    'VPieCircle', //饼图-环形
+    'VMapBase', //地图(可选省份)
+    'VProcess', //NaiveUI-进度
+    'VTextGradient', //渐变文字
+    'VTextBarrage', //弹幕文字
+    'VTextCommon', //文字
+    'VVideo', //视频
+    'VIframe' //远程网页
+  ]
+}

+import ChartsOptionContent from './index.vue'
+
+export { ChartsOptionContent }

+<template>
+  <!-- 侧边栏和数据分发处理 -->
+  <div class="go-chart-common">
+    <n-menu
+      v-show="hidePackageOneCategory"
+      class="chart-menu-width"
+      v-model:value="selectValue"
+      :options="packages.menuOptions"
+      :icon-size="16"
+      :indent="18"
+      @update:value="clickItemHandle"
+    ></n-menu>
+    <div class="chart-content-list">
+      <n-scrollbar trigger="none">
+        <charts-item-box :menuOptions="packages.selectOptions" @deletePhoto="deleteHandle"></charts-item-box>
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, computed, reactive } from 'vue'
+import { ConfigType } from '@/packages/index.d'
+import { useSettingStore } from '@/store/modules/settingStore/settingStore'
+import { loadAsyncComponent } from '@/utils'
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+import { PackagesCategoryEnum } from '@/packages/index.d'
+import { hideAsideComponentsObj } from './config'
+import { remove } from 'lodash'
+
+const ChartsItemBox = loadAsyncComponent(() => import('../../../components/ChartsItemBox/index.vue'))
+const packagesStore = usePackagesStore()
+
+const props = defineProps({
+  selectOptions: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+// 隐藏设置
+const settingStore = useSettingStore()
+
+const hidePackageOneCategory = computed(() => {
+  if (packages.categorysNum > 2) return true
+  return !settingStore.getHidePackageOneCategory
+})
+
+let packages = reactive<{
+  [T: string]: any
+}>({
+  // 侧边栏
+  menuOptions: [],
+  // 当前选择
+  selectOptions: {},
+  // 分类归档
+  categorys: {
+    all: []
+  },
+  categoryNames: {
+    all: '所有'
+  },
+  // 分类归档数量
+  categorysNum: 0,
+  // 存储不同类别组件进来的选中值
+  saveSelectOptions: {}
+})
+
+const selectValue = ref<string>('all')
+
+// 设置初始列表
+const setSelectOptions = (categorys: any) => {
+  for (const val in categorys) {
+    packages.selectOptions = categorys[val]
+    break
+  }
+}
+
+// THINGS_KIT修改左侧边栏隐藏部分组件（比如重写的，有问题的等需要隐藏）
+const byKeyhideAside = (hideAsideComponentsObj: Record<string, string[]>, categorys: Record<string, any>) => {
+  for (const key in categorys) {
+    const categoryKey = key
+    const categoryValue = categorys[key]
+    for (const hideKey in hideAsideComponentsObj) {
+      const needHideKey = hideKey
+      const needCategoryValue = hideAsideComponentsObj[key]
+      if (categoryKey === needHideKey) {
+        remove(categoryValue, item => {
+          const { chartKey } = item as any
+          return needCategoryValue.includes(chartKey)
+        })
+      }
+    }
+  }
+  return categorys
+}
+
+watch(
+  // @ts-ignore
+  () => props.selectOptions,
+  (newData: { list: ConfigType[] }) => {
+    packages.categorysNum = 0
+    if (!newData) return
+    newData.list.forEach((e: ConfigType) => {
+      const value: ConfigType[] = (packages.categorys as any)[e.category]
+      packages.categorys[e.category] = value && value.length ? [...value, e] : [e]
+      packages.categoryNames[e.category] = e.categoryName
+      packages.categorys['all'].push(e)
+    })
+    for (const val in packages.categorys) {
+      packages.categorysNum += 1
+      packages.menuOptions.push({
+        key: val,
+        label: packages.categoryNames[val]
+      })
+    }
+    setSelectOptions(packages.categorys)
+    byKeyhideAside(hideAsideComponentsObj, packages.categorys)
+    console.log(packages.categorys)
+    // 默认选中处理
+    selectValue.value = packages.menuOptions[0]['key']
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => packagesStore.newPhoto,
+  newPhoto => {
+    if (!newPhoto) return
+    const newPhotoCategory = newPhoto.category
+    packages.categorys[newPhotoCategory].splice(1, 0, newPhoto)
+    packages.categorys['all'].splice(1, 0, newPhoto)
+  }
+)
+
+// 删除图片
+const deleteHandle = (item: ConfigType, index: number) => {
+  packages.categorys[item.category].splice(index, 1)
+  packages.categorys['all'].splice(index, 1)
+}
+
+// 处理点击事件
+const clickItemHandle = (key: string) => {
+  packages.selectOptions = packages.categorys[key]
+}
+</script>
+
+<style lang="scss" scoped>
+/* 此高度与 ContentBox 组件关联*/
+$topHeight: 40px;
+$menuWidth: 65px;
+@include go('chart-common') {
+  display: flex;
+  height: calc(100vh - #{$--header-height} - #{$topHeight});
+  .chart-menu-width {
+    width: $menuWidth;
+    flex-shrink: 0;
+    @include fetch-bg-color('background-color2-shallow');
+  }
+  .chart-content-list {
+    width: 200px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  @include deep() {
+    .n-menu-item {
+      height: 30px;
+      &.n-menu-item--selected {
+        &::before {
+          background-color: rgba(0, 0, 0, 0);
+        }
+      }
+      .n-menu-item-content {
+        text-align: center;
+        padding: 0px 14px !important;
+        font-size: 12px !important;
+      }
+    }
+  }
+}
+</style>

 <template>
   <!-- 左侧所有组件的展示列表 -->
-  <content-box class="go-content-charts" :class="{ scoped: !getCharts }" title="组件" :depth="1" :backIcon="false">
+  <content-box class="go-content-charts" :class="{ scoped: !getCharts }" title="组件" :depth="1" :backIcon="false">
     <template #icon>
       <n-icon size="14" :depth="2">
         <bar-chart-icon></bar-chart-icon>
@@ -22,7 +22,7 @@
           @update:value="clickItemHandle"
         ></n-menu>
         <div class="menu-component-box">
-          <go-skeleton :load="!selectOptions" round text :repeat="2" style="width: 90%"></go-skeleton>
+          <go-skeleton :load="!selectOptions" round text :repeat="2" style="width: 90%"></go-skeleton>
           <charts-option-content
             v-if="selectOptions"
             :selectOptions="selectOptions"
@@ -36,11 +36,12 @@
 
 <script setup lang="ts">
 import { ContentBox } from '../ContentBox/index'
-import { ChartsOptionContent } from './components/ChartsOptionContent'
+// THINGS_KIT 重写ChartsOptionContent组件路径
+import { ChartsOptionContent } from './external/components/ChartsOptionContent'
 import { ChartsSearch } from './components/ChartsSearch'
-import { useAsideHook } from './hooks/useAside.hook'
-
-const { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions } = useAsideHook()
+import { useAsideHook } from './hooks/useAside.hook'
+
+const { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions } = useAsideHook()
 </script>
 
 <style lang="scss" scoped>