feat: 新增图片和图标

package.json

@@ -33,6 +33,7 @@
     "highlight.js": "^11.5.0",
     "html2canvas": "^1.4.1",
     "keymaster": "^1.6.2",
+    "mitt": "^3.0.0",
     "monaco-editor": "^0.33.0",
     "naive-ui": "2.34.3",
     "pinia": "^2.0.13",

src/packages/components/Icons/Common/index.ts

@@ -71,14 +71,14 @@ const iconNames = [
 ]
 const iconList = iconNames.map(name => ({
   ...IconConfig,
-  category: ChatCategoryEnum.UNICONS,
+  category: ChatCategoryEnum.COMMON,
-  categoryName: ChatCategoryEnumName.UNICONS,
+  categoryName: ChatCategoryEnumName.COMMON,
   package: PackagesCategoryEnum.ICONS,
   image: name,
   icon: name,
   dataset: name,
   title: name.replace('uim:', ''),
-  virtualComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
 }))
 
 export default iconList

src/packages/components/Icons/Icon/index.ts

@@ -6,8 +6,8 @@ export const IconConfig: ConfigType = {
   chartKey: 'VIcon',
   conKey: 'VCIcon',
   title: '图标',
-  category: ChatCategoryEnum.UNICONS,
+  category: ChatCategoryEnum.COMMON,
-  categoryName: ChatCategoryEnumName.UNICONS,
+  categoryName: ChatCategoryEnumName.COMMON,
   package: PackagesCategoryEnum.ICONS,
   chartFrame: ChartFrameEnum.COMMON,
   image: 'icon.png'

src/packages/components/Icons/MaterialLine/index.ts

@@ -39,7 +39,7 @@ const iconList = iconNames.map(name => ({
   icon: name,
   dataset: name,
   title: name.replace('line-md:', ''),
-  virtualComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
 }))
 
 export default iconList

src/packages/components/Icons/Weather/index.ts

@@ -36,7 +36,6 @@ const iconNames = [
   'wi:night-alt-cloudy-high',
   'wi:night-alt-hail',
   'wi:night-alt-lightning',
-  'wi:night-alt-lightning',
   'wi:umbrella',
 ]
 const iconList = iconNames.map(name => ({
@@ -48,7 +47,7 @@ const iconList = iconNames.map(name => ({
   icon: name,
   dataset: name,
   title: name.replace('wi:', ''),
-  virtualComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
 }))
 
 export default iconList

src/packages/components/Icons/index.d.ts

@@ -1,12 +1,12 @@
 export enum ChatCategoryEnum {
   ML = 'MaterialLine',
-  UNICONS = 'Unicons',
+  COMMON = 'Common',
   WEATHER = "WEATHER"
 }
 
 
 export enum ChatCategoryEnumName {
   ML = '动画',
-  UNICONS = '通用',
+  COMMON = '通用',
   WEATHER = "天气"
 }

src/packages/components/Icons/index.ts

@@ -1,5 +1,5 @@
 import MaterialLine from './MaterialLine'
-import Unicons from './Unicons'
+import Common from './Common'
 import Weather from './Weather'
 
-export const IconList = [...MaterialLine, ...Unicons, ...Weather]
+export const IconList = [...MaterialLine, ...Common, ...Weather]

src/packages/components/Photos/My/index.ts

@@ -1,67 +0,0 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
-import { setLocalStorage, getLocalStorage } from '@/utils'
-import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
-import { StorageEnum } from '@/enums/storageEnum'
-
-const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
-
-/**
- * 上传完成事件类型
- */
-type UploadCompletedEventType = {
-  fileName: string
-  url: string
-}
-
-const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
-
-const uploadFile = (callback: Function | null = null) => {
-  const input = document.createElement('input')
-  input.type = 'file'
-  input.accept = 'image/*' // 这里只允许图片类型
-  input.onchange = async () => {
-    if (!input.files || !input.files.length) return
-    const file = input.files[0]
-    const reader = new FileReader()
-    reader.onload = () => {
-      const eventObj: UploadCompletedEventType = { fileName: file.name, url: reader.result as string }
-      callback && callback(eventObj)
-    }
-    reader.readAsDataURL(file)
-  }
-  input.click()
-}
-
-const addConfig = {
-  ...ImageConfig,
-  category: ChatCategoryEnum.MY,
-  categoryName: ChatCategoryEnumName.MY,
-  package: PackagesCategoryEnum.PHOTOS,
-  title: '上传新项',
-  image: 'upload.png',
-  virtualComponent: './components/Informations/Mores/Image', // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
-  disabled: true,
-  clickHandle: (photoConfig: ConfigType) => {
-    uploadFile((e: UploadCompletedEventType) => {
-      // 和上传组件一样配置，更换标题，图片，预设数据
-      const newPhoto = {
-        ...ImageConfig,
-        category: ChatCategoryEnum.MY,
-        categoryName: ChatCategoryEnumName.MY,
-        package: PackagesCategoryEnum.PHOTOS,
-        title: e.fileName,
-        image: e.url,
-        dataset: e.url,
-        virtualComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
-      }
-      userPhotosList.push(newPhoto)
-      setLocalStorage(StoreKey, userPhotosList)
-      const { getPackagesList } = usePackagesStore()
-      getPackagesList.Photos.splice(getPackagesList.Photos.length - 1, 0, newPhoto) // 插入到上传按钮前的位置
-    })
-  }
-}
-
-export default [...userPhotosList, addConfig]

src/packages/components/Photos/Private/index.ts

@@ -0,0 +1,86 @@
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+import { setLocalStorage, getLocalStorage, goDialog } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { backgroundImageSize } from '@/settings/designSetting'
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+
+const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
+
+/**
+ * 上传完成事件类型
+ */
+type UploadCompletedEventType = {
+  fileName: string
+  url: string
+}
+
+const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
+
+const uploadFile = (callback: Function | null = null) => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = 'image/*' // 这里只允许图片类型
+  input.onchange = async () => {
+    if (!input.files || !input.files.length) return
+    const file = input.files[0]
+    const { name, size, type } = file
+    if (size > 1024 * 1024 * backgroundImageSize) {
+      window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
+      return false
+    }
+    if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
+      window['$message'].warning('文件格式不符合，请重新上传！')
+      return false
+    }
+    const reader = new FileReader()
+    reader.onload = () => {
+      const eventObj: UploadCompletedEventType = { fileName: name, url: reader.result as string }
+      callback && callback(eventObj)
+    }
+    reader.readAsDataURL(file)
+  }
+  input.click()
+}
+
+const addConfig = {
+  ...ImageConfig,
+  category: ChatCategoryEnum.PRIVATE,
+  categoryName: ChatCategoryEnumName.PRIVATE,
+  package: PackagesCategoryEnum.PHOTOS,
+  title: '点击上传图片',
+  image: 'upload.png',
+  redirectComponent: './components/Informations/Mores/Image', // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  disabled: true,
+  clickHandle: (photoConfig: ConfigType) => {
+    goDialog({
+      message: `图片需小于 ${backgroundImageSize}M 且只暂存在浏览器中，请自行对接后端接口！`,
+      transformOrigin: 'center',
+      onPositiveCallback: () => {
+        uploadFile((e: UploadCompletedEventType) => {
+          // 和上传组件一样配置，更换标题，图片，预设数据
+          const packagesStore = usePackagesStore()
+          const newPhoto = {
+            ...ImageConfig,
+            category: ChatCategoryEnum.PRIVATE,
+            categoryName: ChatCategoryEnumName.PRIVATE,
+            package: PackagesCategoryEnum.PHOTOS,
+            title: e.fileName,
+            image: e.url,
+            dataset: e.url,
+            redirectComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+          }
+          userPhotosList.unshift(newPhoto)
+          // 存储在本地数据中
+          setLocalStorage(StoreKey, userPhotosList)
+          // 插入到上传按钮前的位置
+          packagesStore.addPhotos(newPhoto, 1)
+        })
+      }
+    })
+  }
+}
+
+export default [addConfig, ...userPhotosList]

src/packages/components/Photos/Share/index.ts

@@ -2,10 +2,12 @@ import { PackagesCategoryEnum } from '@/packages/index.d'
 import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
 
+// 远程共享库（调接口获取图像列表）
 const imageList = [
   { imageName: 'carousel1', imageUrl: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg' },
   { imageName: 'carousel2', imageUrl: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg' }
 ]
+
 const photoConfigList = imageList.map(i => ({
   ...ImageConfig,
   category: ChatCategoryEnum.SHARE,
@@ -14,7 +16,7 @@ const photoConfigList = imageList.map(i => ({
   image: i.imageUrl,
   dataset: i.imageUrl,
   title: i.imageName,
-  virtualComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
 }))
 
 export default photoConfigList

src/packages/components/Photos/index.d.ts

@@ -1,9 +1,9 @@
 export enum ChatCategoryEnum {
-  MY = 'My',
+  PRIVATE = 'Private',
   SHARE = 'Share'
 }
 
 export enum ChatCategoryEnumName {
-  MY = '我的',
+  PRIVATE = '私有图',
-  SHARE = '共享'
+  SHARE = '共享图'
 }

src/packages/components/Photos/index.ts

@@ -1,4 +1,4 @@
-import My from './My'
+import Private from './Private'
 import Share from './Share'
 
-export const PhotoList = [...Share, ...My]
+export const PhotoList = [...Private, ...Share]

src/packages/index.d.ts

@@ -15,20 +15,34 @@ export enum ChartFrameEnum {
 
 // 组件配置
 export type ConfigType = {
+  // 组件 key
   key: string
+  // 画布组件 key
   chartKey: string
+  // 右侧设置面板组件 key
   conKey: string
+  // 标题
   title: string
+  // 分类
   category: string
+  // 分类名称
   categoryName: string
+  // 所属包
   package: string
+  // 归类
   chartFrame?: ChartFrameEnum
+  // 预览图
   image: string
-  virtualComponent?: string // 虚拟组件Path，指定后创建该组件时，从指定路径创建
+  // 从指定路径创建创建该组件
-  dataset?: any // 组件预设的 dataset 值
+  redirectComponent?: string
-  disabled?: boolean // 禁用的
+  // 组件预设的 dataset 值(图片/图标)
-  clickHandle?: Function // 单击事件
+  dataset?: any
-  icon?: string // 图标
+  // 禁用 拖拽或双击生成组件
+  disabled?: boolean
+  // 图标
+  icon?: string
+  // 自定义单击事件
+  clickHandle?: Function
 }
 
 // 数据请求

src/packages/index.ts

@@ -21,9 +21,9 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
+  [PackagesCategoryEnum.DECORATES]: DecorateList,
   [PackagesCategoryEnum.PHOTOS]: PhotoList,
-  [PackagesCategoryEnum.ICONS]: IconList,
+  [PackagesCategoryEnum.ICONS]: IconList
-  [PackagesCategoryEnum.DECORATES]: DecorateList
 }
 
 /**
@@ -31,9 +31,10 @@ export let packagesList: PackagesType = {
  * @param targetData
  */
 export const createComponent = async (targetData: ConfigType) => {
-  const { virtualComponent, category, key } = targetData
+  const { redirectComponent, category, key } = targetData
-  const componentPath = virtualComponent
+  // redirectComponent 是给图片组件库和图标组件库使用的
-    ? `${virtualComponent}/config.ts`
+  const componentPath = redirectComponent
+    ? `${redirectComponent}/config.ts`
     : `./components/${targetData.package}/${category}/${key}/config.ts`
   const chart = await import(/* @vite-ignore */ componentPath)
   return new chart.default()
@@ -78,8 +79,8 @@ export const fetchConfigComponent = (dropData: ConfigType) => {
  */
 export const fetchImages = async (targetData?: ConfigType) => {
   if (!targetData) return ''
-  // 判断图片是否为 url，是则直接返回该 url
+  // 正则判断图片是否为 url，是则直接返回该 url
-  if (/^(?:https?):\/\/[^\s/.?#].[^\s]*/.test(targetData.image)) return targetData.image
+  if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
   // 新数据动态处理
   const { image, package: targetDataPackage } = targetData
   // 兼容旧数据

src/plugins/icon.ts

@@ -61,14 +61,14 @@ import {
   Pulse as PulseIcon,
   Folder as FolderIcon,
   FolderOpen as FolderOpenIcon,
-  Image as ImageIcon,
+  ImageOutline as ImageIcon,
   Images as ImagesIcon,
   List as ListIcon,
   EyeOutline as EyeOutlineIcon,
   EyeOffOutline as EyeOffOutlineIcon,
   Albums as AlbumsIcon,
   Analytics as AnalyticsIcon,
-  Airplane as AirPlaneIcon
+  AirplaneOutline as AirPlaneOutlineIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -244,7 +244,7 @@ const ionicons5 = {
   // 分析
   AnalyticsIcon,
   // 飞机
-  AirPlaneIcon
+  AirPlaneOutlineIcon
 }
 
 const carbon = {

src/store/modules/packagesStore/packagesStore.d.ts

@@ -4,5 +4,6 @@ export { ConfigType }
 
 export { PackagesType }
 export interface PackagesStoreType {
-  packagesList: PackagesType
+  packagesList: PackagesType,
+  newPhoto?: ConfigType
 }

src/store/modules/packagesStore/packagesStore.ts

@@ -1,16 +1,23 @@
 import { defineStore } from 'pinia'
-import { PackagesStoreType, PackagesType } from './packagesStore.d'
+import { ConfigType, PackagesStoreType, PackagesType } from './packagesStore.d'
 import { packagesList } from '@/packages/index'
 
-// 组件 pakages
+// 组件 packages
 export const usePackagesStore = defineStore({
   id: 'usePackagesStore',
   state: (): PackagesStoreType => ({
-    packagesList: Object.freeze(packagesList)
+    packagesList: Object.freeze(packagesList),
+    newPhoto: undefined
   }),
   getters: {
     getPackagesList(): PackagesType {
       return this.packagesList
     }
+  },
+  actions: {
+    addPhotos(newPhoto: ConfigType, index: number) {
+      this.newPhoto = newPhoto
+      this.packagesList.Photos.splice(index, 0, newPhoto)
+    }
   }
 })

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

@@ -8,8 +8,8 @@
       <!-- 每一项组件的渲染 -->
       <div
         class="item-box"
-        v-for="(item, index) in menuOptions"
+        v-for="item in menuOptions"
-        :key="index"
+        :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
   }
 }
 
-// 处理列表
+export const useAsideHook = () => {
-const handlePackagesList = () => {
+  const packagesStore = usePackagesStore()
-  for (const val in getPackagesList) {
+  const menuOptions: MenuOptionsType[] = []
-    menuOptions.push({
+
-      key: val,
+  // 处理列表
-      // @ts-ignore
+  const handlePackagesList = () => {
-      icon: packagesListObj[val].icon,
+    for (const val in packagesStore.getPackagesList) {
-      // @ts-ignore
+      menuOptions.push({
-      label: packagesListObj[val].label,
+        key: val,
-      // @ts-ignore
+        // @ts-ignore
-      list: getPackagesList[val]
+        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,12 +1,6 @@
 <template>
   <!-- 左侧所有组件的展示列表 -->
-  <content-box
+  <content-box class="go-content-charts" :class="{ scoped: !getCharts }" title="组件" :depth="1" :backIcon="false">
-    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>
@@ -28,13 +22,7 @@
           @update:value="clickItemHandle"
         ></n-menu>
         <div class="menu-component-box">
-          <go-skeleton
+          <go-skeleton :load="!selectOptions" round text :repeat="2" style="width: 90%"></go-skeleton>
-            :load="!selectOptions"
-            round
-            text
-            :repeat="2"
-            style="width: 90%"
-          ></go-skeleton>
           <charts-option-content
             v-if="selectOptions"
             :selectOptions="selectOptions"
@@ -50,15 +38,9 @@
 import { ContentBox } from '../ContentBox/index'
 import { ChartsOptionContent } from './components/ChartsOptionContent'
 import { ChartsSearch } from './components/ChartsSearch'
-import {
+import { useAsideHook } from './hooks/useAside.hook'
-  getCharts,
+
-  BarChartIcon,
+const { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions } = useAsideHook()
-  themeColor,
-  selectOptions,
-  selectValue,
-  clickItemHandle,
-  menuOptions,
-} from './hooks/useAside.hook'
 </script>
 
 <style lang="scss" scoped>

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

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, watch } from 'vue'
+import { computed, PropType, ref } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

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
       }