feat: 修改代码结构，新增删除按钮

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

@@ -55,33 +55,43 @@ const addConfig = {
   image: 'upload.png',
   redirectComponent: './components/Informations/Mores/Image', // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
   disabled: true,
-  clickHandle: (photoConfig: ConfigType) => {
-    goDialog({
-      message: `图片需小于 ${backgroundImageSize}M 且只暂存在浏览器中，请自行对接后端接口！现只编译成 base64 进行渲染，对接后端请返回地址使用！`,
-      transformOrigin: 'center',
-      onPositiveCallback: () => {
-        uploadFile((e: UploadCompletedEventType) => {
-          // 和上传组件一样配置，更换标题，图片，预设数据
-          const packagesStore = usePackagesStore()
-          const newPhoto = {
-            ...ImageConfig,
-            category: ChatCategoryEnum.PRIVATE,
-            categoryName: ChatCategoryEnumName.PRIVATE,
-            package: PackagesCategoryEnum.PHOTOS,
-            chartFrame: ChartFrameEnum.STATIC,
-            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)
-        })
-      }
-    })
+  configEvents: {
+    // 点击上传事件
+    addHandle: (photoConfig: ConfigType) => {
+      goDialog({
+        message: `图片需小于 ${backgroundImageSize}M 且只暂存在浏览器中，请自行对接后端接口！现只编译成 base64 进行渲染，对接后端请返回地址使用！`,
+        transformOrigin: 'center',
+        onPositiveCallback: () => {
+          uploadFile((e: UploadCompletedEventType) => {
+            // 和上传组件一样配置，更换标题，图片，预设数据
+            const packagesStore = usePackagesStore()
+            const newPhoto = {
+              ...ImageConfig,
+              category: ChatCategoryEnum.PRIVATE,
+              categoryName: ChatCategoryEnumName.PRIVATE,
+              package: PackagesCategoryEnum.PHOTOS,
+              chartFrame: ChartFrameEnum.STATIC,
+              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)
+          })
+        }
+      })
+    },
+    deleteHandle: (photoConfig: ConfigType, index: number) => {
+      goDialog({
+        message: '是否删除此图片？',
+        transformOrigin: 'center',
+        onPositiveCallback: () => {}
+      })
+    }
   }
 }
 

src/packages/index.d.ts

@@ -41,8 +41,8 @@ export type ConfigType = {
   disabled?: boolean
   // 图标
   icon?: string
-  // 自定义单击事件
-  clickHandle?: Function
+  // 事件
+  configEvents?: { [T: string]: Function }
 }
 
 // 数据请求

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

@@ -31,6 +31,19 @@
             <n-ellipsis style="max-width: 90%">{{ item.title }}</n-ellipsis>
           </n-text>
         </div>
+        <!-- 遮罩 -->
+        <div v-if="item.disabled" class="list-model"></div>
+        <!-- 工具栏 -->
+        <div v-if="isShowTools(item)" class="list-tools go-transition">
+          <n-button text type="default" color="#ffffff">
+            <template #icon>
+              <n-icon>
+                <TrashIcon />
+              </n-icon>
+            </template>
+            <span>删除</span>
+          </n-button>
+        </div>
       </div>
     </div>
   </div>
@@ -47,13 +60,16 @@ import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayou
 import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
-import { ConfigType, CreateComponentType } from '@/packages/index.d'
+import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import { Icon } from '@iconify/vue'
+import { icon } from '@/plugins'
 
 import omit from 'lodash/omit'
 
 const chartEditStore = useChartEditStore()
+const { TrashIcon } = icon.ionicons5
 
 const props = defineProps({
   menuOptions: {
@@ -65,6 +81,11 @@ const props = defineProps({
 const chartLayoutStore = useChartLayoutStore()
 const contentChartsItemBoxRef = ref()
 
+// 判断工具栏展示
+const isShowTools = (item: ConfigType) => {
+  return !item.disabled && item.package === PackagesCategoryEnum.PHOTOS && item.category === ChatCategoryEnum.PRIVATE
+}
+
 // 组件展示状态
 const chartMode: Ref<ChartModeEnum> = computed(() => {
   return chartLayoutStore.getChartType
@@ -114,7 +135,7 @@ const dblclickHandle = async (item: ConfigType) => {
 }
 
 // 单击事件
-const clickHandle = (item: ConfigType) => item.clickHandle && item.clickHandle(item)
+const clickHandle = (item: ConfigType) => item?.configEvents?.addHandle(item)
 
 watch(
   () => chartMode.value,
@@ -127,9 +148,12 @@ watch(
   }
 )
 
-watch(() => props.menuOptions, (n) => {
-  console.log(n)
-})
+watch(
+  () => props.menuOptions,
+  n => {
+    console.log(n)
+  }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -152,6 +176,7 @@ $halfCenterHeight: 50px;
   gap: 9px;
   transition: all 0.7s linear;
   .item-box {
+    position: relative;
     margin: 0;
     width: $itemWidth;
     overflow: hidden;
@@ -162,7 +187,10 @@ $halfCenterHeight: 50px;
     &:hover {
       @include hover-border-color('background-color4');
       .list-img {
-        transform: scale(1.1);
+        transform: scale(1.08);
+      }
+      .list-tools {
+        opacity: 1;
       }
     }
     .list-header {
@@ -194,6 +222,33 @@ $halfCenterHeight: 50px;
         padding-left: 5px;
       }
     }
+    .list-model {
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0);
+    }
+    .list-tools {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      bottom: 0;
+      left: 0;
+      margin: 0 4px 2px;
+      height: 26px;
+      width: calc(100% - 8px);
+      opacity: 0;
+      border-radius: 6px;
+      backdrop-filter: blur(20px);
+      background-color: rgba(255, 255, 255, 0.1);
+      &:hover {
+        background-color: rgba(232, 128, 128, 0.7);
+      }
+    }
   }
   &.single {
     .item-box {