Merge branch 'ft' into 'main_dev'

fix: 修改问题

See merge request yunteng/thingskit-view!83

@@ -129,17 +129,24 @@ export const customRequest = async (request: RequestConfigType) => {
 
   const body = transformBodyValue(Body, requestParamsBodyType)
 
+  /**
+   * ft 修改post请求针对这种接口(/api/yt/device,设备列表分页)，是post请求，body体一定要携带内容，空内容也可以
+   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+   * 源代码 data: body,
+   * 修改后代码   data: !body? {"":null} :body,
+   */
   Params = handleParams(Params)
   return customHttp.request<any>({
     url: requestUrl,
     baseURL: getOriginUrl(requestOriginUrl!),
     method: requestHttpType,
     params: Params,
-    data: body,
+    data: !body? {"":null} :body,
     headers: extraValue(Header)
   }, {
     joinPrefix: false,
     apiUrl: '',
     withShareToken: isShareMode()
   })
+  //ft
 }

@@ -7,11 +7,38 @@ import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
-
+export const seriesItem = {
+  type: 'line',
+  smooth: false,
+  symbolSize: 5, //设定实心点的大小
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  lineStyle: {
+    width: 3,
+    type: 'solid'
+  },
+  areaStyle: {
+    opacity: 0.8,
+    color: new graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: chartColorsSearch[defaultTheme][3]
+      },
+      {
+        offset: 1,
+        color: 'rgba(0,0,0,0)'
+      }
+    ])
+  }
+}
 // 其它配置项比如新增（动画）
 const otherConfig = {
   // 轮播动画
-  isCarousel: false,
+  isCarousel: false
 }
 const option = {
   ...otherConfig,
@@ -31,63 +58,7 @@ const option = {
     type: 'value'
   },
   dataset: { ...dataJson },
-  series: [
-    {
-      type: 'line',
-      smooth: false,
-      symbolSize: 5, //设定实心点的大小
-      label: {
-        show: true,
-        position: 'top',
-        color: '#fff',
-        fontSize: 12
-      },
-      lineStyle: {
-        width: 3,
-        type: 'solid'
-      },
-      areaStyle: {
-        opacity: 0.8,
-        color: new graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColorsSearch[defaultTheme][3]
-          },
-          {
-            offset: 1,
-            color: 'rgba(0,0,0,0)'
-          }
-        ])
-      }
-    },
-    {
-      type: 'line',
-      smooth: false,
-      label: {
-        show: true,
-        position: 'top',
-        color: '#fff',
-        fontSize: 12
-      },
-      lineStyle: {
-        width: 3,
-        type: 'solid'
-      },
-      areaStyle: {
-        opacity: 0.8,
-        color: new graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColorsSearch[defaultTheme][4]
-          },
-          {
-            offset: 1,
-            color: 'rgba(0,0,0,0)'
-          }
-        ])
-      }
-    }
-  ]
+  series: [seriesItem, seriesItem]
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -3,22 +3,25 @@
     ref="vChartRef"
     :init-options="initOptions"
     :theme="themeColor"
-    :option="option.value"
+    :option="option"
     :manual-update="isPreview()"
     autoresize
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
     @mouseover="handleHighlight"
     @mouseout="handleDownplay"
   ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, PropType, onMounted } from 'vue'
+import { reactive, watch, PropType, onMounted, ref, nextTick,computed } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import config, { includes } from './config'
+import config, { includes, seriesItem } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
@@ -27,6 +30,7 @@ import { useChartDataFetch } from '@/hooks'
 import { isPreview, colorGradientCustomMerge } from '@/utils'
 import dataJson from './data.json'
 import { useFullScreen } from '../../utls/fullScreen'
+import isObject from 'lodash/isObject'
 
 const props = defineProps({
   themeSetting: {
@@ -48,8 +52,8 @@ const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSe
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 
-const option = reactive({
-  value: {}
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 const toolBoxOption = {
   show: true,
@@ -95,7 +99,7 @@ watch(
           ])
         })
       }
-      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      // option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
       props.chartConfig.option = option.value
     } catch (error) {
       console.log(error)
@@ -106,12 +110,12 @@ watch(
   }
 )
 
-watch(
-  () => props.chartConfig.option.dataset,
-  () => {
-    option.value = props.chartConfig.option
-  }
-)
+// watch(
+//   () => props.chartConfig.option.dataset,
+//   () => {
+//     option.value = props.chartConfig.option
+//   }
+// )
 let seriesDataNum = -1
 let seriesDataMaxLength = 0
 let intervalInstance: any = null
@@ -194,7 +198,36 @@ const updateVChart = (newData: any) => {
   })
 }
 
-const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
+const replaceMergeArr = ref<string[]>()
+
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      // option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        const seriesArr = []
+        for (let i = 0; i < newData.dimensions.length - 1; i++) {
+          seriesArr.push(seriesItem)
+        }
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
   // addPieInterval(newData)
   updateVChart(newData)
 })

@@ -50,7 +50,11 @@ export const option = {
   // 指标颜色
   indicatorTextColor: '#FFFFFFFF',
   // 偏移角度
-  offsetDegree: 0
+  offsetDegree: 0,
+  value:{
+    min:0,
+    max:1000
+  }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -10,7 +10,14 @@
         <n-input v-model:value="optionData.unit" size="small"></n-input>
       </setting-item>
     </SettingItemBox>
-
+    <SettingItemBox name="范围">
+      <SettingItem name="最小值">
+        <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number>
+      </SettingItem>
+      <setting-item name="最大值">
+        <n-input-number v-model:value="optionData.value.max" size="small"></n-input-number>
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="轨道">
       <SettingItem name="形状">
         <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" />
@@ -41,7 +48,7 @@
       <SettingItem name="文本颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker>
       </SettingItem>
-       <setting-item name="文本大小">
+      <setting-item name="文本大小">
         <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number>
       </setting-item>
     </SettingItemBox>
@@ -49,17 +56,26 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, watch, ref } from 'vue'
 // 以下是封装的设置模块布局组件，具体效果可在官网查看
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 // 获取 option 的数据，便于使用 typeof 获取类型
 import { option, types, indicatorPlacements } from './config'
 
-defineProps({
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
   }
 })
+
+watch(
+  () => props.optionData.dataset,
+  (newData: number) => {
+    if (newData < props.optionData.value.min || newData > props.optionData.value.max) {
+      window['$message'].error('取值范围在最小值和最大值之间')
+    }
+  }
+)
 </script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideWaterPoloConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const shapes = [
+  {
+    label: '圆形',
+    value: 'circle'
+  },
+  {
+    label: '正方形',
+    value: 'rect'
+  },
+  {
+    label: '带圆角的正方形',
+    value: 'roundRect'
+  },
+  {
+    label: '正三角形',
+    value: 'triangle'
+  },
+  {
+    label: '菱形',
+    value: 'diamond'
+  },
+  {
+    label: '水滴',
+    value: 'pin'
+  },
+  {
+    label: '箭头',
+    value: 'arrow'
+  },
+]
+
+export const includes = []
+
+export const option = {
+  dataset: 0.5,
+  series: [
+    {
+      type: 'liquidFill',
+      shape: shapes[0].value,
+      radius: '90%',
+      data: [0],
+      center: ['50%', '50%'],
+      color: [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#446bf5',
+            },
+            {
+              offset: 1,
+              color: '#2ca3e2',
+            },
+          ],
+          globalCoord: false,
+        },
+      ],
+      backgroundStyle: {
+        borderWidth: 1,
+        color: 'rgba(51, 66, 127, 0.7)',
+      },
+      label: {
+        normal: {
+          textStyle: {
+            fontSize: 50,
+            color: '#fff',
+          },
+        },
+      },
+      outline: {
+        show: false,
+        borderDistance: 10,
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: '#112165'
+        }
+      }
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType
+{
+  public key = OverrideWaterPoloConfig.key
+  public chartConfig = cloneDeep(OverrideWaterPoloConfig)
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="水球"
+    :expanded="true"
+  >
+    <SettingItemBox name="内容">
+      <SettingItem name="数值">
+        <n-input-number
+          v-model:value="optionData.dataset"
+          :min="0"
+          :step="0.01"
+          size="small"
+          placeholder="水球数值"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="形状">
+        <n-select v-model:value="item.shape" :options="shapes" placeholder="选择形状" />
+      </SettingItem>
+      <SettingItem name="文本">
+        <n-input-number v-model:value="item.label.normal.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色1">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.color[0].colorStops[0].color"
+      ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色2">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.color[0].colorStops[1].color"
+      ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景" :alone="true">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.backgroundStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { option, shapes } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideWaterPolo', true)
+
+export const OverrideWaterPoloConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义水球图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'water_WaterPolo.png'
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, reactive } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import 'echarts-liquidfill/src/liquidFill.js'
+import { CanvasRenderer } from 'echarts/renderers'
+import { GridComponent } from 'echarts/components'
+import config from './config'
+import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([CanvasRenderer, GridComponent])
+
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  value: {}
+})
+
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    try {
+      if (!isPreview()) {
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        // 背景颜色
+        props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
+        // 水球颜色
+        props.chartConfig.option.series[0].color[0].colorStops = [
+          {
+            offset: 0,
+            color: themeColor[0]
+          },
+          {
+            offset: 1,
+            color: themeColor[1]
+          }
+        ]
+      }
+      option.value = props.chartConfig.option
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 数据处理
+const dataHandle = (newData: number | string) => {
+  newData = isString(newData) ? parseFloat(newData) : newData
+  return parseFloat(newData.toFixed(2))
+}
+
+// 编辑
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    if (!isString(newData) && !isNumber(newData)) return
+    props.chartConfig.option.series[0].data = [dataHandle(newData)]
+    option.value = props.chartConfig.option
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  // @ts-ignore
+  option.value.series[0].data = [dataHandle(newData)]
+})
+</script>

@@ -6,7 +6,7 @@ import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
   //vue3dLoader支持数组或字符串，暂且绑定字符串，这个插件可以加载多个模型
-  dataset: '',
+  dataset: 'src/assets/external/three/踏月桥.stl',
   backgroundColor: '', //场景背景色
   backgroundAlpha: 0, //场景透明度
   enableDamping: false, //是否启用阻尼

@@ -2,10 +2,30 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { OverrideCarouselConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import logo from '@/assets/logo.png'
 
 export const option = {
   // 图片资源列表
-  dataset: [],
+  dataset: [
+    {
+      id: -Math.random() + '',
+      name: '图片1',
+      status: 'finished',
+      url: logo
+    },
+    {
+      id: -Math.random() + '',
+      name: '图片2',
+      status: 'finished',
+      url: logo
+    },
+    {
+      id: -Math.random() + '',
+      name: '图片3',
+      status: 'finished',
+      url: logo
+    }
+  ],
   // 自动播放
   autoplay: true,
   // 自动播放的间隔（ms）

@@ -94,7 +94,7 @@ const fileList = ref<UploadFileInfo[]>([])
 watch(
   () => props.optionData,
   newValue => {
-    fileList.value = newValue?.dataset
+    fileList.value = newValue?.dataset as UploadFileInfo[]
   },
   {
     immediate: true

 <template>
-  <div class="iframe-content" :style="getStyle(borderRadius)">
+  <div
+    @mouseenter="handleMouseenter"
+    @mouseleave="handleMouseleave"
+    class="iframe-content"
+    :style="getStyle(borderRadius)"
+  >
     <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
       <svg
         focusable="false"
@@ -16,16 +21,7 @@
         ></path>
       </svg>
     </div>
-    <iframe
-      @mouseenter="handleMouseenter"
-      @mouseleave="handleMouseleave"
-      id="iframeContent"
-      :src="option.dataset"
-      :width="w"
-      :height="h"
-      :allowfullscreen="allowfullscreen"
-      style="border-width: 0"
-    ></iframe>
+    <iframe id="iframeContent" :src="option.dataset" :width="w" :height="h" style="border-width: 0"></iframe>
   </div>
 </template>
 

@@ -5,6 +5,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import video from '@/assets/videos/earth.mp4'
 
 export const option = {
+  text:'视频.mp4',
   // 视频路径
   dataset: video,
   // 循环播放

@@ -2,7 +2,12 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
   <collapse-item name="视频" expanded>
-    <setting-item-box name="源" alone>
+    <setting-item-box name="名字" alone>
+      <setting-item>
+        <n-input disabled v-model:value="optionData.text" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="上传" alone>
       <FileUpload
         :fileSizeConst="fileSizeConst"
         :max="1"
@@ -71,6 +76,7 @@ const props = defineProps({
 })
 
 const handleFileStaticUri = (value: UploadFileInfo[]) => {
+  props.optionData.text=value[0]?.name as string 
   props.optionData.dataset = value[0]?.url as string
 }
 </script>

@@ -21,6 +21,7 @@ import { OverridePieCircleConfig } from '@/packages/components/external/Charts/P
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
+import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
 
 export function useInjectLib(packagesList: EPackagesType) {
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
@@ -43,8 +44,13 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)
-  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)
+  addWidgetToCategoryByCategoryName(
+    packagesList,
+    PackagesCategoryEnum.INFORMATIONS,
+    OverrideILoadConfigurationframeConfig
+  )
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)
 }
 
 /**

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

+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>