From fe06b55a56554f3b405e8e9f5b79734f1c3279a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
<1262327911@qq.com>
Date: Wed, 24 May 2023 16:56:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?=
=?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=88=A0=E9=99=A4?=
=?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/Photos/Private/index.ts | 64 ++++++++++--------
src/packages/index.d.ts | 4 +-
.../components/ChartsItemBox/index.vue | 67 +++++++++++++++++--
3 files changed, 100 insertions(+), 35 deletions(-)
diff --git a/src/packages/components/Photos/Private/index.ts b/src/packages/components/Photos/Private/index.ts
index e4a65b6f..0577aa66 100644
--- a/src/packages/components/Photos/Private/index.ts
+++ b/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: () => {}
+ })
+ }
}
}
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index cac3d173..3be43105 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -41,8 +41,8 @@ export type ConfigType = {
disabled?: boolean
// 图标
icon?: string
- // 自定义单击事件
- clickHandle?: Function
+ // 事件
+ configEvents?: { [T: string]: Function }
}
// 数据请求
diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
index 6dea1e02..36d1cf02 100644
--- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
+++ b/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 {