feat: 新增图片和图标

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

@@ -8,8 +8,8 @@
       <!-- 每一项组件的渲染 -->
       <div
         class="item-box"
-        v-for="(item, index) in menuOptions"
-        :key="index"
+        v-for="item in menuOptions"
+        :key="item.title"
         draggable
         @dragstart="!item.disabled && dragStartHandle($event, item)"
         @dragend="!item.disabled && dragendHandle"
@@ -55,7 +55,7 @@ import omit from 'lodash/omit'
 
 const chartEditStore = useChartEditStore()
 
-defineProps({
+const props = defineProps({
   menuOptions: {
     type: Array as PropType<ConfigType[]>,
     default: () => []
@@ -97,7 +97,7 @@ const dblclickHandle = async (item: ConfigType) => {
     componentInstall(item.conKey, fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
-    if (item.virtualComponent) {
+    if (item.redirectComponent) {
       item.dataset && (newComponent.option.dataset = item.dataset)
       newComponent.chartConfig.title = item.title
     }
@@ -125,6 +125,10 @@ watch(
     }
   }
 )
+
+watch(() => props.menuOptions, (n) => {
+  console.log(n)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -177,7 +181,7 @@ $halfCenterHeight: 50px;
       overflow: hidden;
       .list-img {
         height: 100px;
-        width: 140px;
+        max-width: 140px;
         border-radius: 6px;
         @extend .go-transition;
       }
@@ -208,6 +212,9 @@ $halfCenterHeight: 50px;
     .item-box {
       width: $halfItemWidth;
       max-width: $maxItemWidth;
+      .list-img {
+        max-width: 76px;
+      }
     }
     .list-center {
       height: $halfCenterHeight;

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

@@ -23,8 +23,11 @@ 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'
 
 const ChartsItemBox = loadAsyncComponent(() => import('../ChartsItemBox/index.vue'))
+const packagesStore = usePackagesStore()
 
 const props = defineProps({
   selectOptions: {
@@ -61,7 +64,7 @@ let packages = reactive<{
   saveSelectOptions: {}
 })
 
-const selectValue = ref<string>()
+const selectValue = ref<string>('all')
 
 // 设置初始列表
 const setSelectOptions = (categorys: any) => {
@@ -79,7 +82,6 @@ watch(
     if (!newData) return
     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.categoryNames[e.category] = e.categoryName
       packages.categorys['all'].push(e)
@@ -100,6 +102,16 @@ watch(
   }
 )
 
+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 clickItemHandle = (key: string) => {
   packages.selectOptions = packages.categorys[key]

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

@@ -71,7 +71,7 @@ import { ref, onUnmounted } from 'vue'
 import { icon } from '@/plugins'
 import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
-import { themeColor, MenuOptionsType } from '../../hooks/useAside.hook'
+import { themeColor } from '../../hooks/useLayout.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ChartModeEnum, ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
@@ -158,7 +158,7 @@ const selectChartHandle = async (item: ConfigType) => {
     componentInstall(item.conKey, fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
-    if (item.virtualComponent) {
+    if (item.redirectComponent) {
       item.dataset && (newComponent.option.dataset = item.dataset)
       newComponent.chartConfig.title = item.title
     }