fix: 新增删除功能

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

@@ -59,7 +59,7 @@ const addConfig = {
     // 点击上传事件
     addHandle: (photoConfig: ConfigType) => {
       goDialog({
-        message: `图片需小于 ${backgroundImageSize}M 且只暂存在浏览器中，请自行对接后端接口！现只编译成 base64 进行渲染，对接后端请返回地址使用！`,
+        message: `图片需小于 ${backgroundImageSize}M 且只暂存在浏览器中(暂存上限5M，超过不再缓存新图片)，请自行对接后端接口！现只编译成 base64 进行渲染，对接后端请返回地址使用！`,
         transformOrigin: 'center',
         onPositiveCallback: () => {
           uploadFile((e: UploadCompletedEventType) => {
@@ -84,13 +84,6 @@ const addConfig = {
           })
         }
       })
-    },
-    deleteHandle: (photoConfig: ConfigType, index: number) => {
-      goDialog({
-        message: '是否删除此图片？',
-        transformOrigin: 'center',
-        onPositiveCallback: () => {}
-      })
     }
   }
 }

src/store/modules/packagesStore/packagesStore.ts

@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia'
 import { ConfigType, PackagesStoreType, PackagesType } from './packagesStore.d'
 import { packagesList } from '@/packages/index'
+import { StorageEnum } from '@/enums/storageEnum'
+import { getLocalStorage, setLocalStorage } from '@/utils'
 
 // 组件 packages
 export const usePackagesStore = defineStore({
@@ -18,6 +20,13 @@ export const usePackagesStore = defineStore({
     addPhotos(newPhoto: ConfigType, index: number) {
       this.newPhoto = newPhoto
       this.packagesList.Photos.splice(index, 0, newPhoto)
+    },
+    deletePhotos(photoInfo: ConfigType, index: number) {
+      this.packagesList.Photos.splice(index, 1)
+      const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
+      const userPhotosList = getLocalStorage(StoreKey)
+      userPhotosList.splice(index - 1, 1)
+      setLocalStorage(StoreKey, userPhotosList)
     }
   }
 })

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

@@ -8,7 +8,7 @@
       <!-- 每一项组件的渲染 -->
       <div
         class="item-box"
-        v-for="item in menuOptions"
+        v-for="(item, index) in menuOptions"
         :key="item.title"
         draggable
         @dragstart="!item.disabled && dragStartHandle($event, item)"
@@ -34,7 +34,7 @@
         <!-- 遮罩 -->
         <div v-if="item.disabled" class="list-model"></div>
         <!-- 工具栏 -->
-        <div v-if="isShowTools(item)" class="list-tools go-transition">
+        <div v-if="isShowTools(item)" class="list-tools go-transition" @click="deleteHandle(item, index)">
           <n-button text type="default" color="#ffffff">
             <template #icon>
               <n-icon>
@@ -57,7 +57,8 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils'
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify, goDialog } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
@@ -71,6 +72,7 @@ import omit from 'lodash/omit'
 const chartEditStore = useChartEditStore()
 const { TrashIcon } = icon.ionicons5
 
+const emit = defineEmits(['deletePhoto'])
 const props = defineProps({
   menuOptions: {
     type: Array as PropType<ConfigType[]>,
@@ -135,7 +137,21 @@ const dblclickHandle = async (item: ConfigType) => {
 }
 
 // 单击事件
-const clickHandle = (item: ConfigType) => item?.configEvents?.addHandle(item)
+const clickHandle = (item: ConfigType) => {
+  item?.configEvents?.addHandle(item)
+}
+
+const deleteHandle = (item: ConfigType, index: number) => {
+  goDialog({
+    message: '是否删除此图片？',
+    transformOrigin: 'center',
+    onPositiveCallback: () => {
+      const packagesStore = usePackagesStore()
+      emit('deletePhoto', item, index)
+      packagesStore.deletePhotos(item, index)
+    }
+  })
+}
 
 watch(
   () => chartMode.value,
@@ -147,13 +163,6 @@ watch(
     }
   }
 )
-
-watch(
-  () => props.menuOptions,
-  n => {
-    console.log(n)
-  }
-)
 </script>
 
 <style lang="scss" scoped>
@@ -202,6 +211,7 @@ $halfCenterHeight: 50px;
       &-text {
         font-size: 12px;
         margin-left: 8px;
+        user-select: none;
       }
     }
     .list-center {
@@ -244,7 +254,7 @@ $halfCenterHeight: 50px;
       opacity: 0;
       border-radius: 6px;
       backdrop-filter: blur(20px);
-      background-color: rgba(255, 255, 255, 0.1);
+      background-color: rgba(255, 255, 255, 0.15);
       &:hover {
         background-color: rgba(232, 128, 128, 0.7);
       }

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

@@ -12,7 +12,7 @@
     ></n-menu>
     <div class="chart-content-list">
       <n-scrollbar trigger="none">
-        <charts-item-box :menuOptions="packages.selectOptions"></charts-item-box>
+        <charts-item-box :menuOptions="packages.selectOptions" @deletePhoto="deleteHandle"></charts-item-box>
       </n-scrollbar>
     </div>
   </div>
@@ -112,6 +112,12 @@ watch(
   }
 )
 
+// 删除图片
+const deleteHandle = (item: ConfigType, index: number) => {
+  packages.categorys[item.category].splice(index, 1)
+  packages.categorys['all'].splice(index, 1)
+}
+
 // 处理点击事件
 const clickItemHandle = (key: string) => {
   packages.selectOptions = packages.categorys[key]