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
     }

src/views/chart/ContentCharts/hooks/useAside.hook.ts

@@ -1,13 +1,12 @@
-import { shallowReactive, ref } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { icon } from '@/plugins'
 import { renderLang, renderIcon } from '@/utils'
 import { themeColor, setItem, getCharts } from './useLayout.hook'
-import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
-// 图表
+import { PackagesCategoryEnum, PackagesCategoryName, ConfigType } from '@/packages/index.d'
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 // 图标
-const { AirPlaneIcon, ImageIcon, BarChartIcon } = icon.ionicons5
+const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
 const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
 
 // 图表
@@ -15,12 +14,9 @@ export type MenuOptionsType = {
   key: string
   icon: ReturnType<typeof renderIcon>
   label: ReturnType<typeof renderLang>
-  list: PackagesType
+  list: ConfigType[]
 }
 
-const { getPackagesList } = usePackagesStore()
-const menuOptions: MenuOptionsType[] = []
-
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {
     icon: renderIcon(RoadmapIcon),
@@ -34,53 +30,66 @@ const packagesListObj = {
     icon: renderIcon(TableSplitIcon),
     label: PackagesCategoryName.TABLES
   },
+  [PackagesCategoryEnum.DECORATES]: {
+    icon: renderIcon(GraphicalDataFlowIcon),
+    label: PackagesCategoryName.DECORATES
+  },
   [PackagesCategoryEnum.PHOTOS]: {
     icon: renderIcon(ImageIcon),
     label: PackagesCategoryName.PHOTOS
   },
   [PackagesCategoryEnum.ICONS]: {
-    icon: renderIcon(AirPlaneIcon),
+    icon: renderIcon(AirPlaneOutlineIcon),
     label: PackagesCategoryName.ICONS
-  },
-  [PackagesCategoryEnum.DECORATES]: {
-    icon: renderIcon(GraphicalDataFlowIcon),
-    label: PackagesCategoryName.DECORATES
   }
 }
 
-// 处理列表
-const handlePackagesList = () => {
-  for (const val in getPackagesList) {
-    menuOptions.push({
-      key: val,
-      // @ts-ignore
-      icon: packagesListObj[val].icon,
-      // @ts-ignore
-      label: packagesListObj[val].label,
-      // @ts-ignore
-      list: getPackagesList[val]
-    })
+export const useAsideHook = () => {
+  const packagesStore = usePackagesStore()
+  const menuOptions: MenuOptionsType[] = []
+
+  // 处理列表
+  const handlePackagesList = () => {
+    for (const val in packagesStore.getPackagesList) {
+      menuOptions.push({
+        key: val,
+        // @ts-ignore
+        icon: packagesListObj[val].icon,
+        // @ts-ignore
+        label: packagesListObj[val].label,
+        // @ts-ignore
+        list: packagesStore.getPackagesList[val]
+      })
+    }
+  }
+  handlePackagesList()
+
+  // 记录选中值
+  let beforeSelect: string = menuOptions[0]['key']
+  const selectValue = ref<string>(menuOptions[0]['key'])
+
+  // 选中的对象值
+  const selectOptions = ref(menuOptions[0])
+
+  // 点击 item
+  const clickItemHandle = (key: string, item: any) => {
+    selectOptions.value = item
+    // 处理折叠
+    if (beforeSelect === key) {
+      setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
+    } else {
+      setItem(ChartLayoutStoreEnum.CHARTS, true, false)
+    }
+    beforeSelect = key
+  }
+
+  return {
+    getCharts,
+    BarChartIcon,
+    themeColor,
+    selectOptions,
+    selectValue,
+    clickItemHandle,
+    menuOptions
   }
 }
-handlePackagesList()
-
-// 记录选中值
-let beforeSelect: string = menuOptions[0]['key']
-const selectValue = ref<string>(menuOptions[0]['key'])
-
-// 选中的对象值
-const selectOptions = ref(menuOptions[0])
-
-// 点击 item
-const clickItemHandle = (key: string, item: any) => {
-  selectOptions.value = item
-  // 处理折叠
-  if (beforeSelect === key) {
-    setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
-  } else {
-    setItem(ChartLayoutStoreEnum.CHARTS, true, false)
-  }
-  beforeSelect = key
-}
-
-export { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions }

src/views/chart/ContentCharts/index.vue

@@ -1,123 +1,105 @@
-<template>
-  <!-- 左侧所有组件的展示列表 -->
-  <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>
-      </n-icon>
-    </template>
-
-    <template #top-right>
-      <charts-search v-show="getCharts" :menuOptions="menuOptions"></charts-search>
-    </template>
-    <!-- 图表 -->
-    <aside>
-      <div class="menu-width-box">
-        <n-menu
-          class="menu-width"
-          v-model:value="selectValue"
-          :options="menuOptions"
-          :icon-size="16"
-          :indent="18"
-          @update:value="clickItemHandle"
-        ></n-menu>
-        <div class="menu-component-box">
-          <go-skeleton
-            :load="!selectOptions"
-            round
-            text
-            :repeat="2"
-            style="width: 90%"
-          ></go-skeleton>
-          <charts-option-content
-            v-if="selectOptions"
-            :selectOptions="selectOptions"
-            :key="selectValue"
-          ></charts-option-content>
-        </div>
-      </div>
-    </aside>
-  </content-box>
-</template>
-
-<script setup lang="ts">
-import { ContentBox } from '../ContentBox/index'
-import { ChartsOptionContent } from './components/ChartsOptionContent'
-import { ChartsSearch } from './components/ChartsSearch'
-import {
-  getCharts,
-  BarChartIcon,
-  themeColor,
-  selectOptions,
-  selectValue,
-  clickItemHandle,
-  menuOptions,
-} from './hooks/useAside.hook'
-</script>
-
-<style lang="scss" scoped>
-/* 整体宽度 */
-$width: 330px;
-/* 列表的宽度 */
-$widthScoped: 65px;
-/* 此高度与 ContentBox 组件关联 */
-$topHeight: 40px;
-
-@include go(content-charts) {
-  width: $width;
-  @extend .go-transition;
-  &.scoped,
-  .menu-width {
-    width: $widthScoped;
-  }
-  .menu-width-box {
-    display: flex;
-    height: calc(100vh - #{$--header-height} - #{$topHeight});
-    .menu-width {
-      flex-shrink: 0;
-      @include fetch-bg-color('background-color2');
-    }
-    .menu-component-box {
-      flex-shrink: 0;
-      width: $width - $widthScoped;
-      overflow: hidden;
-    }
-  }
-  @include deep() {
-    .menu-width {
-      .n-menu-item {
-        height: auto !important;
-        &.n-menu-item--selected {
-          &::after {
-            content: '';
-            position: absolute;
-            left: 2px;
-            top: 0;
-            height: 100%;
-            width: 3px;
-            background-color: v-bind('themeColor');
-            border-top-right-radius: 3px;
-            border-bottom-right-radius: 3px;
-          }
-        }
-        .n-menu-item-content {
-          display: flex;
-          flex-direction: column;
-          padding: 6px 12px !important;
-          font-size: 14px !important;
-        }
-        .n-menu-item-content__icon {
-          font-size: 18px !important;
-          margin-right: 0 !important;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <!-- 左侧所有组件的展示列表 -->
+  <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>
+      </n-icon>
+    </template>
+
+    <template #top-right>
+      <charts-search v-show="getCharts" :menuOptions="menuOptions"></charts-search>
+    </template>
+    <!-- 图表 -->
+    <aside>
+      <div class="menu-width-box">
+        <n-menu
+          class="menu-width"
+          v-model:value="selectValue"
+          :options="menuOptions"
+          :icon-size="16"
+          :indent="18"
+          @update:value="clickItemHandle"
+        ></n-menu>
+        <div class="menu-component-box">
+          <go-skeleton :load="!selectOptions" round text :repeat="2" style="width: 90%"></go-skeleton>
+          <charts-option-content
+            v-if="selectOptions"
+            :selectOptions="selectOptions"
+            :key="selectValue"
+          ></charts-option-content>
+        </div>
+      </div>
+    </aside>
+  </content-box>
+</template>
+
+<script setup lang="ts">
+import { ContentBox } from '../ContentBox/index'
+import { ChartsOptionContent } from './components/ChartsOptionContent'
+import { ChartsSearch } from './components/ChartsSearch'
+import { useAsideHook } from './hooks/useAside.hook'
+
+const { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions } = useAsideHook()
+</script>
+
+<style lang="scss" scoped>
+/* 整体宽度 */
+$width: 330px;
+/* 列表的宽度 */
+$widthScoped: 65px;
+/* 此高度与 ContentBox 组件关联 */
+$topHeight: 40px;
+
+@include go(content-charts) {
+  width: $width;
+  @extend .go-transition;
+  &.scoped,
+  .menu-width {
+    width: $widthScoped;
+  }
+  .menu-width-box {
+    display: flex;
+    height: calc(100vh - #{$--header-height} - #{$topHeight});
+    .menu-width {
+      flex-shrink: 0;
+      @include fetch-bg-color('background-color2');
+    }
+    .menu-component-box {
+      flex-shrink: 0;
+      width: $width - $widthScoped;
+      overflow: hidden;
+    }
+  }
+  @include deep() {
+    .menu-width {
+      .n-menu-item {
+        height: auto !important;
+        &.n-menu-item--selected {
+          &::after {
+            content: '';
+            position: absolute;
+            left: 2px;
+            top: 0;
+            height: 100%;
+            width: 3px;
+            background-color: v-bind('themeColor');
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+          }
+        }
+        .n-menu-item-content {
+          display: flex;
+          flex-direction: column;
+          padding: 6px 12px !important;
+          font-size: 14px !important;
+        }
+        .n-menu-item-content__icon {
+          font-size: 18px !important;
+          margin-right: 0 !important;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -33,7 +33,7 @@ export const dragHandle = async (e: DragEvent) => {
 
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)
-    if (dropData.virtualComponent) {
+    if (dropData.redirectComponent) {
       dropData.dataset && (newComponent.option.dataset = dropData.dataset)
       newComponent.chartConfig.title = dropData.title
     }

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -1,159 +1,159 @@
-<template>
-  <div class="go-content-layers-list-item" :class="{ hover, select, 'list-mini': selectText }">
-    <div class="go-flex-center item-content">
-      <n-image
-        class="list-img"
-        object-fit="contain"
-        preview-disabled
-        :src="imageInfo"
-        :fallback-src="requireErrorImg()"
-      ></n-image>
-      <n-ellipsis style="margin-right: auto">
-        <span class="list-text">
-          {{ props.componentData.chartConfig.title }}
-        </span>
-      </n-ellipsis>
-      <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
-    </div>
-    <div :class="{ 'select-modal': select }"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, PropType, ref, watch } from 'vue'
-import { requireErrorImg } from '@/utils'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { fetchImages } from '@/packages'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-import { LayersStatus } from '../LayersStatus/index'
-
-const props = defineProps({
-  componentData: {
-    type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
-    required: true
-  },
-  isGroup: {
-    type: Boolean,
-    default: false
-  },
-  layerMode: {
-    type: String as PropType<LayerModeEnum>,
-    default: LayerModeEnum.THUMBNAIL
-  }
-})
-
-// 全局颜色
-const designStore = useDesignStore()
-const chartEditStore = useChartEditStore()
-const imageInfo = ref('')
-
-// 获取图片
-const fetchImageUrl = async () => {
-  imageInfo.value = await fetchImages(props.componentData.chartConfig)
-}
-fetchImageUrl()
-
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
-
-// 计算当前选中目标
-const select = computed(() => {
-  const id = props.componentData.id
-  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
-})
-
-// 悬浮对象
-const hover = computed(() => {
-  return props.componentData.id === chartEditStore.getTargetChart.hoverId
-})
-
-// 组件状态 隐藏/锁定
-const status = computed(() => {
-  return props.componentData.status
-})
-
-// 是否选中文本
-const selectText = computed(() => {
-  return props.layerMode === LayerModeEnum.TEXT
-})
-</script>
-
-<style lang="scss" scoped>
-$centerHeight: 52px;
-$centerMiniHeight: 28px;
-$textSize: 10px;
-
-@include go(content-layers-list-item) {
-  position: relative;
-  height: $centerHeight;
-  width: 90%;
-  margin: 5px 5%;
-  margin-bottom: 5px;
-  border-radius: 5px;
-  cursor: pointer;
-  border: 1px solid rgba(0, 0, 0, 0);
-  @extend .go-transition-quick;
-  &.hover,
-  &:hover {
-    @include fetch-bg-color('background-color4');
-  }
-  &:hover {
-    @include deep() {
-      .icon-item {
-        opacity: 1;
-      }
-    }
-  }
-
-  .select-modal,
-  .item-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .item-content {
-    z-index: 1;
-    padding: 6px 5px;
-    justify-content: start !important;
-    width: calc(100% - 10px);
-    height: calc(100% - 10px);
-  }
-
-  .select-modal {
-    width: 100%;
-    height: 100%;
-    opacity: 0.3;
-    background-color: v-bind('themeColor');
-  }
-
-  .list-img {
-    flex-shrink: 0;
-    height: $centerHeight;
-    border-radius: 5px;
-    overflow: hidden;
-    border: none !important;
-    padding: 2px;
-    @include hover-border-color('hover-border-color');
-  }
-
-  .list-text {
-    padding-left: 6px;
-    font-size: $textSize;
-  }
-
-  /* 选中样式 */
-  &.select {
-    border: 1px solid v-bind('themeColor');
-    background-color: rgba(0, 0, 0, 0);
-  }
-
-  // mini样式
-  &.list-mini {
-    height: $centerMiniHeight;
-  }
-}
-</style>
+<template>
+  <div class="go-content-layers-list-item" :class="{ hover, select, 'list-mini': selectText }">
+    <div class="go-flex-center item-content">
+      <n-image
+        class="list-img"
+        object-fit="contain"
+        preview-disabled
+        :src="imageInfo"
+        :fallback-src="requireErrorImg()"
+      ></n-image>
+      <n-ellipsis style="margin-right: auto">
+        <span class="list-text">
+          {{ props.componentData.chartConfig.title }}
+        </span>
+      </n-ellipsis>
+      <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
+    </div>
+    <div :class="{ 'select-modal': select }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, ref } from 'vue'
+import { requireErrorImg } from '@/utils'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { fetchImages } from '@/packages'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { LayersStatus } from '../LayersStatus/index'
+
+const props = defineProps({
+  componentData: {
+    type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
+    required: true
+  },
+  isGroup: {
+    type: Boolean,
+    default: false
+  },
+  layerMode: {
+    type: String as PropType<LayerModeEnum>,
+    default: LayerModeEnum.THUMBNAIL
+  }
+})
+
+// 全局颜色
+const designStore = useDesignStore()
+const chartEditStore = useChartEditStore()
+const imageInfo = ref('')
+
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.componentData.chartConfig)
+}
+fetchImageUrl()
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 计算当前选中目标
+const select = computed(() => {
+  const id = props.componentData.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
+})
+
+// 悬浮对象
+const hover = computed(() => {
+  return props.componentData.id === chartEditStore.getTargetChart.hoverId
+})
+
+// 组件状态 隐藏/锁定
+const status = computed(() => {
+  return props.componentData.status
+})
+
+// 是否选中文本
+const selectText = computed(() => {
+  return props.layerMode === LayerModeEnum.TEXT
+})
+</script>
+
+<style lang="scss" scoped>
+$centerHeight: 52px;
+$centerMiniHeight: 28px;
+$textSize: 10px;
+
+@include go(content-layers-list-item) {
+  position: relative;
+  height: $centerHeight;
+  width: 90%;
+  margin: 5px 5%;
+  margin-bottom: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0);
+  @extend .go-transition-quick;
+  &.hover,
+  &:hover {
+    @include fetch-bg-color('background-color4');
+  }
+  &:hover {
+    @include deep() {
+      .icon-item {
+        opacity: 1;
+      }
+    }
+  }
+
+  .select-modal,
+  .item-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .item-content {
+    z-index: 1;
+    padding: 6px 5px;
+    justify-content: start !important;
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
+  }
+
+  .select-modal {
+    width: 100%;
+    height: 100%;
+    opacity: 0.3;
+    background-color: v-bind('themeColor');
+  }
+
+  .list-img {
+    flex-shrink: 0;
+    height: $centerHeight;
+    border-radius: 5px;
+    overflow: hidden;
+    border: none !important;
+    padding: 2px;
+    @include hover-border-color('hover-border-color');
+  }
+
+  .list-text {
+    padding-left: 6px;
+    font-size: $textSize;
+  }
+
+  /* 选中样式 */
+  &.select {
+    border: 1px solid v-bind('themeColor');
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  // mini样式
+  &.list-mini {
+    height: $centerMiniHeight;
+  }
+}
+</style>

src/views/chart/hooks/useSync.hook.ts

@@ -132,7 +132,7 @@ export const useSync = () => {
     ) => {
       // 补充 class 上的方法
       let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
-      if (_componentInstance.chartConfig.virtualComponent) {
+      if (_componentInstance.chartConfig.redirectComponent) {
         _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
         newComponent.chartConfig.title = _componentInstance.chartConfig.title
       }