Merge branch 'dev-photos' into dev-commet

package.json

@@ -49,6 +49,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.0.2",
     "@commitlint/config-conventional": "^17.0.2",
+    "@iconify/types": "^2.0.0",
+    "@iconify/vue": "^4.1.1",
     "@types/node": "^16.11.26",
     "@types/three": "^0.144.0",
     "@typescript-eslint/eslint-plugin": "^5.18.0",

src/enums/storageEnum.ts

@@ -12,5 +12,7 @@ export enum StorageEnum {
   // 工作台布局配置
   GO_CHART_LAYOUT_STORE = 'GO_CHART_LAYOUT',
   // 工作台需要保存的数据
-  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST'
+  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST',
+  // 用户存储的图片媒体
+  GO_USER_MEDIA_PHOTOS = 'GO_USER_MEDIA_PHOTOS'
 }

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

@@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { IconConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 图标名称
+  dataset: 'uim:apple',
+  color: '#03A9F4',
+  size: 64,
+  rotate: 0 // 旋转角度
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = IconConfig.key
+  public attr = { ...chartInitConfig, w: 64, h: 64, zIndex: 1 }
+  public chartConfig = cloneDeep(IconConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Icons/Icon/config.vue

@@ -0,0 +1,50 @@
+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="尺寸">
+        <n-input-number v-model:value="optionData.size" size="small" :min="0" placeholder="尺寸"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="旋转">
+      <setting-item name="旋转">
+        <n-select v-model:value="optionData.rotate" size="small" :options="rotateMode"></n-select>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+// 旋转方式
+const rotateMode = [
+  {
+    value: 0,
+    label: '0°'
+  },
+  {
+    value: 1,
+    label: '90°'
+  },
+  {
+    value: 2,
+    label: '180°'
+  },
+  {
+    value: 3,
+    label: '270°'
+  }
+]
+</script>

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+export const IconConfig: ConfigType = {
+  key: 'Icon',
+  chartKey: 'VIcon',
+  conKey: 'VCIcon',
+  title: '图标',
+  category: ChatCategoryEnum.UNICONS,
+  categoryName: ChatCategoryEnumName.UNICONS,
+  package: PackagesCategoryEnum.ICONS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'icon.png'
+}

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="go-icon-box">
+    <Icon :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { dataset, color, size, rotate } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('icon-box') {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: v-bind('`${w}px`');
+  height: v-bind('`${h}px`');
+}
+</style>

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

@@ -0,0 +1,45 @@
+import { IconConfig } from '../Icon/index'
+import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+const iconNames = [
+  'line-md:beer-alt-filled-loop',
+  'line-md:beer-alt-twotone-loop',
+  'line-md:cloud-braces-loop',
+  'line-md:cloud-download-loop',
+  'line-md:cloud-download-outline-loop',
+  'line-md:cloud-upload-loop',
+  'line-md:cloud-upload-outline-loop',
+  'line-md:coffee-half-empty-twotone-loop',
+  'line-md:coffee-loop',
+  'line-md:coffee-twotone-loop',
+  'line-md:downloading-loop',
+  'line-md:github-loop',
+  'line-md:light-dark-loop',
+  'line-md:loading-alt-loop',
+  'line-md:loading-loop',
+  'line-md:loading-twotone-loop',
+  'line-md:moon-alt-loop',
+  'line-md:moon-alt-to-sunny-outline-loop-transition',
+  'line-md:moon-filled-loop',
+  'line-md:moon-filled-to-sunny-filled-loop-transition',
+  'line-md:star-pulsating-filled-loop',
+  'line-md:star-pulsating-loop',
+  'line-md:star-pulsating-twotone-loop',
+  'line-md:upload-loop',
+  'line-md:upload-outline-loop',
+  'line-md:uploading-loop'
+]
+const iconList = iconNames.map(name => ({
+  ...IconConfig,
+  category: ChatCategoryEnum.ML,
+  categoryName: ChatCategoryEnumName.ML,
+  package: PackagesCategoryEnum.ICONS,
+  image: name,
+  icon: name,
+  dataset: name,
+  title: name.replace('line-md:', ''),
+  virtualComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+}))
+
+export default iconList

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

@@ -0,0 +1,86 @@
+import { IconConfig } from '../Icon/index'
+import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+const iconNames = [
+  'uim:adobe',
+  'uim:airplay',
+  'uim:align',
+  'uim:align-alt',
+  'uim:android-alt',
+  'uim:angle-double-down',
+  'uim:angle-double-left',
+  'uim:angle-double-right',
+  'uim:angle-double-up',
+  'uim:angle-down',
+  'uim:angle-left',
+  'uim:angle-right',
+  'uim:angle-up',
+  'uim:apple',
+  'uim:apple-alt',
+  'uim:apps',
+  'uim:bag',
+  'uim:battery-bolt',
+  'uim:bing',
+  'uim:box',
+  'uim:briefcase',
+  'uim:calender',
+  'uim:chart',
+  'uim:chart-pie',
+  'uim:circle-layer',
+  'uim:clinic-medical',
+  'uim:clock',
+  'uim:comment-alt',
+  'uim:comment-alt-dots',
+  'uim:docker',
+  'uim:download-alt',
+  'uim:dribbble',
+  'uim:dropbox',
+  'uim:entry',
+  'uim:exclamation-circle',
+  'uim:exclamation-triangle',
+  'uim:exit',
+  'uim:facebook',
+  'uim:facebook-messenger',
+  'uim:facebook-messenger-alt',
+  'uim:google-drive',
+  'uim:google-play',
+  'uim:graph-bar',
+  'uim:head-side-mask',
+  'uim:horizontal-align-left',
+  'uim:hospital',
+  'uim:house-user',
+  'uim:image-v',
+  'uim:key-skeleton',
+  'uim:layer-group',
+  'uim:layers-alt',
+  'uim:link-h',
+  'uim:microscope',
+  'uim:microsoft',
+  'uim:object-group',
+  'uim:object-ungroup',
+  'uim:paypal',
+  'uim:refresh',
+  'uim:repeat',
+  'uim:right-indent-alt',
+  'uim:rocket',
+  'uim:shield-plus',
+  'uim:social-distancing',
+  'uim:telegram-alt',
+  'uim:user-md',
+  'uim:toilet-paper',
+  'uim:youtube'
+]
+const iconList = iconNames.map(name => ({
+  ...IconConfig,
+  category: ChatCategoryEnum.UNICONS,
+  categoryName: ChatCategoryEnumName.UNICONS,
+  package: PackagesCategoryEnum.ICONS,
+  image: name,
+  icon: name,
+  dataset: name,
+  title: name.replace('uim:', ''),
+  virtualComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+}))
+
+export default iconList

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

@@ -0,0 +1,9 @@
+export enum ChatCategoryEnum {
+  ML = 'MaterialLine',
+  UNICONS = 'Unicons',
+}
+
+export enum ChatCategoryEnumName {
+  ML = '动画',
+  UNICONS = '通用'
+}

src/packages/components/Icons/index.ts

@@ -0,0 +1,4 @@
+import MaterialLine from './MaterialLine'
+import Unicons from './Unicons'
+
+export const IconList = [...MaterialLine, ...Unicons]

src/packages/components/Informations/Mores/Image/index.vue

@@ -7,7 +7,8 @@
       :fallback-src="requireErrorImg()"
       :width="w"
       :height="h"
-    ></n-image>
+      lazy
+    />
   </div>
 </template>
 

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

@@ -0,0 +1,66 @@
+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
+      }
+      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/Share/index.ts

@@ -0,0 +1,20 @@
+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,
+  categoryName: ChatCategoryEnumName.SHARE,
+  package: PackagesCategoryEnum.PHOTOS,
+  image: i.imageUrl,
+  dataset: i.imageUrl,
+  title: i.imageName,
+  virtualComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+}))
+
+export default photoConfigList

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

@@ -0,0 +1,9 @@
+export enum ChatCategoryEnum {
+  MY = 'My',
+  SHARE = 'Share'
+}
+
+export enum ChatCategoryEnumName {
+  MY = '我的',
+  SHARE = '共享'
+}

src/packages/components/Photos/index.ts

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

src/packages/index.d.ts

@@ -24,6 +24,11 @@ export type ConfigType = {
   package: string
   chartFrame?: ChartFrameEnum
   image: string
+  virtualComponent?: string // 虚拟组件Path，指定后创建该组件时，从指定路径创建
+  dataset?: any // 组件预设的 dataset 值
+  disabled?: boolean // 禁用的
+  clickHandle?: Function // 单击事件
+  icon?: string // 图标
 }
 
 // 数据请求
@@ -120,7 +125,7 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
-  interactActions?: InteractActionsType[],
+  interactActions?: InteractActionsType[]
   events: {
     baseEvent: {
       [K in BaseEvent]?: string
@@ -156,6 +161,8 @@ export enum PackagesCategoryEnum {
   CHARTS = 'Charts',
   TABLES = 'Tables',
   INFORMATIONS = 'Informations',
+  PHOTOS = 'Photos',
+  ICONS = 'Icons',
   DECORATES = 'Decorates'
 }
 
@@ -164,6 +171,8 @@ export enum PackagesCategoryName {
   CHARTS = '图表',
   TABLES = '列表',
   INFORMATIONS = '信息',
+  PHOTOS = '图片',
+  ICONS = '图标',
   DECORATES = '小组件'
 }
 
@@ -178,5 +187,7 @@ export type PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ConfigType[]
   [PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
   [PackagesCategoryEnum.TABLES]: ConfigType[]
+  [PackagesCategoryEnum.PHOTOS]: ConfigType[]
+  [PackagesCategoryEnum.ICONS]: ConfigType[]
   [PackagesCategoryEnum.DECORATES]: ConfigType[]
 }

src/packages/index.ts

@@ -1,87 +1,96 @@
-import { ChartList } from '@/packages/components/Charts/index'
-import { DecorateList } from '@/packages/components/Decorates/index'
-import { InformationList } from '@/packages/components/Informations/index'
-import { TableList } from '@/packages/components/Tables/index'
-import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
-
-const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
-  eager: true
-})
-const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
-  eager: true
-})
-const imagesModules: Record<string, { default: string }> = import.meta.glob('../assets/images/chart/**', {
-  eager: true
-})
-
-// * 所有图表
-export let packagesList: PackagesType = {
-  [PackagesCategoryEnum.CHARTS]: ChartList,
-  [PackagesCategoryEnum.INFORMATIONS]: InformationList,
-  [PackagesCategoryEnum.TABLES]: TableList,
-  [PackagesCategoryEnum.DECORATES]: DecorateList
-}
-
-/**
- * * 获取目标组件配置信息
- * @param targetData
- */
-export const createComponent = async (targetData: ConfigType) => {
-  const { category, key } = targetData
-  const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
-  return new chart.default()
-}
-
-/**
- * * 获取组件
- * @param {string} chartName 名称
- * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
- */
-const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
-  const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
-  for (const key in module) {
-    const urlSplit = key.split('/')
-    if (urlSplit[urlSplit.length - 2] === chartName) {
-      return module[key]
-    }
-  }
-}
-
-/**
- * * 获取展示组件
- * @param {ConfigType} dropData 配置项
- */
-export const fetchChartComponent = (dropData: ConfigType) => {
-  const { key } = dropData
-  return fetchComponent(key, FetchComFlagType.VIEW)?.default
-}
-
-/**
- * * 获取配置组件
- * @param {ConfigType} dropData 配置项
- */
-export const fetchConfigComponent = (dropData: ConfigType) => {
-  const { key } = dropData
-  return fetchComponent(key, FetchComFlagType.CONFIG)?.default
-}
-
-/**
- * * 获取图片内容
- * @param {ConfigType} targetData 配置项
- */
-export const fetchImages = async (targetData?: ConfigType) => {
-  if (!targetData) return ''
-  // 新数据动态处理
-  const { image, package: targetDataPackage } = targetData
-  // 兼容旧数据
-  if (image.includes('@') || image.includes('base64')) return image
-
-  const imageName = image.substring(image.lastIndexOf('/') + 1)
-  for (const key in imagesModules) {
-    const urlSplit = key.split('/')
-    if (urlSplit[urlSplit.length - 1] === imageName) {
-      return imagesModules[key]?.default
-    }
-  }
-  return ''
-}
+import { ChartList } from '@/packages/components/Charts/index'
+import { DecorateList } from '@/packages/components/Decorates/index'
+import { InformationList } from '@/packages/components/Informations/index'
+import { TableList } from '@/packages/components/Tables/index'
+import { PhotoList } from '@/packages/components/Photos/index'
+import { IconList } from '@/packages/components/Icons/index'
+import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
+
+const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
+  eager: true
+})
+const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
+  eager: true
+})
+const imagesModules: Record<string, { default: string }> = import.meta.glob('../assets/images/chart/**', {
+  eager: true
+})
+
+// * 所有图表
+export let packagesList: PackagesType = {
+  [PackagesCategoryEnum.CHARTS]: ChartList,
+  [PackagesCategoryEnum.INFORMATIONS]: InformationList,
+  [PackagesCategoryEnum.TABLES]: TableList,
+  [PackagesCategoryEnum.PHOTOS]: PhotoList,
+  [PackagesCategoryEnum.ICONS]: IconList,
+  [PackagesCategoryEnum.DECORATES]: DecorateList
+}
+
+/**
+ * * 获取目标组件配置信息
+ * @param targetData
+ */
+export const createComponent = async (targetData: ConfigType) => {
+  const { virtualComponent, category, key } = targetData
+  const componentPath = virtualComponent
+    ? `${virtualComponent}/config.ts`
+    : `./components/${targetData.package}/${category}/${key}/config.ts`
+  const chart = await import(/* @vite-ignore */ componentPath)
+  return new chart.default()
+}
+
+/**
+ * * 获取组件
+ * @param {string} chartName 名称
+ * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
+ */
+const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
+  const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
+  for (const key in module) {
+    const urlSplit = key.split('/')
+    if (urlSplit[urlSplit.length - 2] === chartName) {
+      return module[key]
+    }
+  }
+}
+
+/**
+ * * 获取展示组件
+ * @param {ConfigType} dropData 配置项
+ */
+export const fetchChartComponent = (dropData: ConfigType) => {
+  const { key } = dropData
+  return fetchComponent(key, FetchComFlagType.VIEW)?.default
+}
+
+/**
+ * * 获取配置组件
+ * @param {ConfigType} dropData 配置项
+ */
+export const fetchConfigComponent = (dropData: ConfigType) => {
+  const { key } = dropData
+  return fetchComponent(key, FetchComFlagType.CONFIG)?.default
+}
+
+/**
+ * * 获取图片内容
+ * @param {ConfigType} targetData 配置项
+ */
+export const fetchImages = async (targetData?: ConfigType) => {
+  if (!targetData) return ''
+  // 判断图片是否为 url，是则直接返回该 url
+  if (/^(?:https?):\/\/[^\s/.?#].[^\s]*/.test(targetData.image)) return targetData.image
+  // 新数据动态处理
+  const { image, package: targetDataPackage } = targetData
+  // 兼容旧数据
+  if (image.includes('@') || image.includes('base64')) return image
+
+  const imageName = image.substring(image.lastIndexOf('/') + 1)
+  for (const key in imagesModules) {
+    const urlSplit = key.split('/')
+    if (urlSplit[urlSplit.length - 1] === imageName) {
+      return imagesModules[key]?.default
+    }
+  }
+  return ''
+}

src/plugins/icon.ts

@@ -67,7 +67,8 @@ import {
   EyeOutline as EyeOutlineIcon,
   EyeOffOutline as EyeOffOutlineIcon,
   Albums as AlbumsIcon,
-  Analytics as AnalyticsIcon
+  Analytics as AnalyticsIcon,
+  Airplane as AirPlaneIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -238,10 +239,12 @@ const ionicons5 = {
   // 眼睛
   EyeOutlineIcon,
   EyeOffOutlineIcon,
-  // 图表列表 
+  // 图表列表
   AlbumsIcon,
   // 分析
-  AnalyticsIcon
+  AnalyticsIcon,
+  // 飞机
+  AirPlaneIcon
 }
 
 const carbon = {

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

@@ -11,9 +11,10 @@
         v-for="(item, index) in menuOptions"
         :key="index"
         draggable
-        @dragstart="dragStartHandle($event, item)"
-        @dragend="dragendHandle"
+        @dragstart="!item.disabled && dragStartHandle($event, item)"
+        @dragend="!item.disabled && dragendHandle"
         @dblclick="dblclickHandle(item)"
+        @click="clickHandle(item)"
       >
         <div class="list-header">
           <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
@@ -22,7 +23,8 @@
           </n-text>
         </div>
         <div class="list-center go-flex-center go-transition">
-          <chart-glob-image class="list-img" :chartConfig="item"></chart-glob-image>
+          <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
+          <chart-glob-image v-else class="list-img" :chartConfig="item" />
         </div>
         <div class="list-bottom">
           <n-text class="list-bottom-text" depth="3">
@@ -47,6 +49,7 @@ import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
+import { Icon } from '@iconify/vue'
 
 import omit from 'lodash/omit'
 
@@ -69,6 +72,7 @@ const chartMode: Ref<ChartModeEnum> = computed(() => {
 
 // 拖拽处理
 const dragStartHandle = (e: DragEvent, item: ConfigType) => {
+  if (item.disabled) return
   // 动态注册图表组件
   componentInstall(item.chartKey, fetchChartComponent(item))
   componentInstall(item.conKey, fetchConfigComponent(item))
@@ -85,6 +89,7 @@ const dragendHandle = () => {
 
 // 双击添加
 const dblclickHandle = async (item: ConfigType) => {
+  if (item.disabled) return
   try {
     loadingStart()
     // 动态注册图表组件
@@ -92,6 +97,10 @@ const dblclickHandle = async (item: ConfigType) => {
     componentInstall(item.conKey, fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
+    if (item.virtualComponent) {
+      item.dataset && (newComponent.option.dataset = item.dataset)
+      newComponent.chartConfig.title = item.title
+    }
     // 添加
     chartEditStore.addComponentList(newComponent, false, true)
     // 选中
@@ -103,6 +112,9 @@ const dblclickHandle = async (item: ConfigType) => {
   }
 }
 
+// 单击事件
+const clickHandle = (item: ConfigType) => item.clickHandle && item.clickHandle(item)
+
 watch(
   () => chartMode.value,
   (newValue: ChartModeEnum) => {

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

@@ -129,7 +129,9 @@ const searchHandle = (key: string | null) => {
   }
   loading.value = true
   showPopover.value = true
-  searchRes.value = List.filter((e: ConfigType) => !key || e.title.toLowerCase().includes(key.toLowerCase()))
+  searchRes.value = List.filter(
+    (e: ConfigType) => !e.disabled && (!key || e.title.toLowerCase().includes(key.toLowerCase()))
+  )
   setTimeout(() => {
     loading.value = undefined
   }, 500)
@@ -146,6 +148,7 @@ const listenerCloseHandle = (e: Event) => {
 
 // 选择处理
 const selectChartHandle = async (item: ConfigType) => {
+  if (item.disabled) return
   try {
     loadingStart()
     // 动态注册图表组件
@@ -153,6 +156,10 @@ const selectChartHandle = async (item: ConfigType) => {
     componentInstall(item.conKey, fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
+    if (item.virtualComponent) {
+      item.dataset && (newComponent.option.dataset = item.dataset)
+      newComponent.chartConfig.title = item.title
+    }
     // 添加
     chartEditStore.addComponentList(newComponent, false, true)
     // 选中

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

@@ -1,92 +1,86 @@
-import { shallowReactive, ref } 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 { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-// 图标
-const { BarChartIcon } = icon.ionicons5
-const {
-  TableSplitIcon,
-  RoadmapIcon,
-  SpellCheckIcon,
-  GraphicalDataFlowIcon,
-} = icon.carbon
-
-
-// 图表
-export type MenuOptionsType = {
-  key: string
-  icon: ReturnType<typeof renderIcon>
-  label: ReturnType<typeof renderLang>
-  list: PackagesType
-}
-
-const { getPackagesList } = usePackagesStore()
-const menuOptions: MenuOptionsType[] = []
-
-const packagesListObj = {
-  [PackagesCategoryEnum.CHARTS]: {
-    icon: renderIcon(RoadmapIcon),
-    label: PackagesCategoryName.CHARTS,
-  },
-  [PackagesCategoryEnum.INFORMATIONS]: {
-    icon: renderIcon(SpellCheckIcon),
-    label: PackagesCategoryName.INFORMATIONS,
-  },
-  [PackagesCategoryEnum.TABLES]: {
-    icon: renderIcon(TableSplitIcon),
-    label: PackagesCategoryName.TABLES,
-  },
-  [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],
-    })
-  }
-}
-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,
-}
+import { shallowReactive, ref } 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 { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+// 图标
+const { AirPlaneIcon, ImageIcon, BarChartIcon } = icon.ionicons5
+const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
+
+// 图表
+export type MenuOptionsType = {
+  key: string
+  icon: ReturnType<typeof renderIcon>
+  label: ReturnType<typeof renderLang>
+  list: PackagesType
+}
+
+const { getPackagesList } = usePackagesStore()
+const menuOptions: MenuOptionsType[] = []
+
+const packagesListObj = {
+  [PackagesCategoryEnum.CHARTS]: {
+    icon: renderIcon(RoadmapIcon),
+    label: PackagesCategoryName.CHARTS
+  },
+  [PackagesCategoryEnum.INFORMATIONS]: {
+    icon: renderIcon(SpellCheckIcon),
+    label: PackagesCategoryName.INFORMATIONS
+  },
+  [PackagesCategoryEnum.TABLES]: {
+    icon: renderIcon(TableSplitIcon),
+    label: PackagesCategoryName.TABLES
+  },
+  [PackagesCategoryEnum.PHOTOS]: {
+    icon: renderIcon(ImageIcon),
+    label: PackagesCategoryName.PHOTOS
+  },
+  [PackagesCategoryEnum.ICONS]: {
+    icon: renderIcon(AirPlaneIcon),
+    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]
+    })
+  }
+}
+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/ContentEdit/hooks/useDrag.hook.ts

@@ -29,9 +29,14 @@ export const dragHandle = async (e: DragEvent) => {
     // 修改状态
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
     const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
+    if (dropData.disabled) return
 
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)
+    if (dropData.virtualComponent) {
+      dropData.dataset && (newComponent.option.dataset = dropData.dataset)
+      newComponent.chartConfig.title = dropData.title
+    }
 
     setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
     chartEditStore.addComponentList(newComponent, false, true)

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

@@ -132,6 +132,10 @@ export const useSync = () => {
     ) => {
       // 补充 class 上的方法
       let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+      if (_componentInstance.chartConfig.virtualComponent) {
+        _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
+        newComponent.chartConfig.title = _componentInstance.chartConfig.title
+      }
       if (callBack) {
         if (changeId) {
           callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
@@ -156,7 +160,7 @@ export const useSync = () => {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         let loadIndex = 0
-        const listLength = projectData[key].length;
+        const listLength = projectData[key].length
         for (const comItem of projectData[key]) {
           // 设置加载数量
           let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())