diff --git a/.eslintrc.js b/.eslintrc.js index d01f44ae..25f7f0d1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -22,6 +22,7 @@ module.exports = { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-unused-vars': 'off', + 'vue/no-unused-vars': 'off', 'vue/multi-word-component-names': 'off', 'vue/valid-template-root': 'off', 'vue/no-mutating-props': 'off' diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts index e2044bd8..df395653 100644 --- a/src/enums/editPageEnum.ts +++ b/src/enums/editPageEnum.ts @@ -1,7 +1,7 @@ // 鼠标点击左右键 export enum MouseEventButton { LEFT = 1, - RIGHT = 2, + RIGHT = 2 } // 页面拖拽键名 @@ -41,7 +41,15 @@ export enum MenuEnum { // 后退 BACK = 'back', // 前进 - FORWORD = 'forward' + FORWORD = 'forward', + // 锁定 + LOCK = 'lock', + // 解除锁定 + UNLOCK = 'unLock', + // 隐藏 + HIDE = 'hide', + // 显示 + SHOW = 'show' } // Win 键盘枚举 @@ -49,9 +57,9 @@ export enum WinKeyboard { CTRL = 'ctrl', SHIFT = 'shift', ALT = ' alt', - CTRL_SOURCE_KEY = "control", - SHIFT_SOURCE_KEY = "shift", - ALT_SOURCE_KEY = "alt" + CTRL_SOURCE_KEY = 'control', + SHIFT_SOURCE_KEY = 'shift', + ALT_SOURCE_KEY = 'alt' } // Mac 键盘枚举 @@ -60,7 +68,7 @@ export enum MacKeyboard { CTRL = '⌘', SHIFT = '⇧', ALT = '⌥', - CTRL_SOURCE_KEY = "⌘", - SHIFT_SOURCE_KEY = "⇧", - ALT_SOURCE_KEY = "⌥" + CTRL_SOURCE_KEY = '⌘', + SHIFT_SOURCE_KEY = '⇧', + ALT_SOURCE_KEY = '⌥' } diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 90bf057c..48d6a0a0 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -57,7 +57,12 @@ import { ChevronDownOutline as ChevronDownOutlineIcon, Pulse as PulseIcon, Folder as FolderIcon, - FolderOpen as FolderOpenIcon + FolderOpen as FolderOpenIcon, + Image as ImageIcon, + Images as ImagesIcon, + List as ListIcon, + EyeOutline as EyeOutlineIcon, + EyeOffOutline as EyeOffOutlineIcon } from '@vicons/ionicons5' import { @@ -211,7 +216,16 @@ const ionicons5 = { // 文件夹 FolderIcon, // 文件夹打开 - FolderOpenIcon + FolderOpenIcon, + // 图片 + ImageIcon, + // 多个图片 + ImagesIcon, + // 列表 + ListIcon, + // 眼睛 + EyeOutlineIcon, + EyeOffOutlineIcon } const carbon = { diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 32c55a94..6db94d74 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -602,7 +602,8 @@ export const useChartEditStore = defineStore({ ids.push(item.id) }) } else { - (historyData[0] as CreateComponentGroupType).groupList.forEach(item => { + const group = historyData[0] as CreateComponentGroupType + group.groupList.forEach(item => { ids.push(item.id) }) } @@ -617,6 +618,32 @@ export const useChartEditStore = defineStore({ } return } + + switch (HistoryItem.actionType) { + // 锁定处理 + case HistoryActionTypeEnum.LOCK: + case HistoryActionTypeEnum.UNLOCK: + if (!isForward) { + // 恢复原来状态 + if (HistoryItem.actionType === HistoryActionTypeEnum.LOCK) historyData[0].status.lock = false + if (HistoryItem.actionType === HistoryActionTypeEnum.UNLOCK) historyData[0].status.lock = true + return + } + this.setLock(!historyData[0].status.lock, false) + break + + // 隐藏处理 + case HistoryActionTypeEnum.HIDE: + case HistoryActionTypeEnum.SHOW: + if (!isForward) { + // 恢复原来状态 + if (HistoryItem.actionType === HistoryActionTypeEnum.HIDE) historyData[0].status.hide = false + if (HistoryItem.actionType === HistoryActionTypeEnum.SHOW) historyData[0].status.hide = true + return + } + this.setHide(!historyData[0].status.hide, false) + break + } }, // * 撤回 setBack() { @@ -795,6 +822,76 @@ export const useChartEditStore = defineStore({ loadingFinish() } }, + // * 锁定 + setLock(status: boolean = true, isHistory: boolean = true) { + try { + // 暂不支持多选 + if (this.getTargetChart.selectId.length > 1) return + + loadingStart() + const index: number = this.fetchTargetIndex() + if (index !== -1) { + // 更新状态 + const targetItem = this.getComponentList[index] + targetItem.status.lock = status + + // 历史记录 + if (isHistory) { + chartHistoryStore.createLockHistory( + [targetItem], + status ? HistoryActionTypeEnum.LOCK : HistoryActionTypeEnum.UNLOCK + ) + } + this.updateComponentList(index, targetItem) + loadingFinish() + return + } + } catch (value) { + loadingError() + } + }, + // * 解除锁定 + setUnLock(isHistory: boolean = true) { + this.setLock(false, isHistory) + }, + // * 隐藏 + setHide(status: boolean = true, isHistory: boolean = true) { + try { + // 暂不支持多选 + if (this.getTargetChart.selectId.length > 1) return + + loadingStart() + const index: number = this.fetchTargetIndex() + if (index !== -1) { + // 更新状态 + const targetItem = this.getComponentList[index] + targetItem.status.hide = status + + // 历史记录 + if (isHistory) { + chartHistoryStore.createHideHistory( + [targetItem], + status ? HistoryActionTypeEnum.HIDE : HistoryActionTypeEnum.SHOW + ) + } + this.updateComponentList(index, targetItem) + loadingFinish() + + // 取消选择隐藏 + if (status) { + const chartEditStore = useChartEditStore() + chartEditStore.setTargetSelectChart(undefined) + } + return + } + } catch (value) { + loadingError() + } + }, + // * 显示 + setShow(isHistory: boolean = true) { + this.setHide(false, isHistory) + }, // ---------------- // * 设置页面大小 setPageSize(scale: number): void { diff --git a/src/store/modules/chartHistoryStore/chartHistoryDefine.ts b/src/store/modules/chartHistoryStore/chartHistoryDefine.ts index a3f70d7c..7c38de1b 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryDefine.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryDefine.ts @@ -1,7 +1,4 @@ -import { - HistoryTargetTypeEnum, - HistoryActionTypeEnum -} from './chartHistoryStore.d' +import { HistoryTargetTypeEnum, HistoryActionTypeEnum } from './chartHistoryStore.d' export const historyActionTypeName = { [HistoryActionTypeEnum.ADD]: '新增图表', @@ -18,6 +15,10 @@ export const historyActionTypeName = { [HistoryActionTypeEnum.GROUP]: '创建分组', [HistoryActionTypeEnum.UN_GROUP]: '解除分组', [HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录', - + [HistoryActionTypeEnum.LOCK]: '锁定', + [HistoryActionTypeEnum.UNLOCK]: '解除锁定', + [HistoryActionTypeEnum.HIDE]: '隐藏', + [HistoryActionTypeEnum.SHOW]: '显示', + [HistoryTargetTypeEnum.CANVAS]: '画布初始化' } diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts index 0ea7be39..e27240bb 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts @@ -2,6 +2,7 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index. import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' // 操作类型枚举 + export enum HistoryActionTypeEnum { // 新增 ADD = 'add', @@ -30,7 +31,15 @@ export enum HistoryActionTypeEnum { // 解组 UN_GROUP = 'unGroup', // 选择历史记录 - SELECT_HISTORY = 'selectHistory' + SELECT_HISTORY = 'selectHistory', + // 锁定 + LOCK = 'lock', + // 解除锁定 + UNLOCK = 'unLock', + // 隐藏 + HIDE = 'hide', + // 显示 + SHOW = 'show' } // 对象类型 diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index b8627ca6..b773300b 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts @@ -167,6 +167,20 @@ export const useChartHistoryStore = defineStore({ // * 解除分组 createUnGroupHistory(item: Array) { this.createStackItem(item, HistoryActionTypeEnum.UN_GROUP, HistoryTargetTypeEnum.CHART) + }, + // * 锁定记录 + createLockHistory( + item: Array, + type: HistoryActionTypeEnum.LOCK | HistoryActionTypeEnum.UNLOCK + ) { + this.createStackItem(item, type, HistoryTargetTypeEnum.CHART) + }, + // * 隐藏记录 + createHideHistory( + item: Array, + type: HistoryActionTypeEnum.HIDE | HistoryActionTypeEnum.SHOW + ) { + this.createStackItem(item, type, HistoryTargetTypeEnum.CHART) } } }) diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss index 9fde7bf4..13dee27b 100644 --- a/src/styles/common/style.scss +++ b/src/styles/common/style.scss @@ -1,7 +1,7 @@ -@import './var.scss'; -@import './format.scss'; -@import './animation.scss'; -@import './mixins/mixins.scss'; +@import "./var.scss"; +@import "./format.scss"; +@import "./animation.scss"; +@import "./mixins/mixins.scss"; // 过度 .go-transition { @@ -49,14 +49,14 @@ // 毛玻璃 .go-background-filter { backdrop-filter: $--filter-blur-base; - @include fetch-bg-color('filter-color'); + @include fetch-bg-color("filter-color"); box-shadow: $--border-shadow; } // 毛玻璃 .go-background-filter-shallow { backdrop-filter: $--filter-blur-base; - @include fetch-bg-color('filter-color-shallow'); + @include fetch-bg-color("filter-color-shallow"); box-shadow: $--border-shadow; } @@ -68,7 +68,7 @@ // 背景斑点需配合 @mixin background-image 使用 .go-point-bg { - @include fetch-theme-custom('background-color', 'background-color1'); + @include fetch-theme-custom("background-color", "background-color1"); background-size: 15px 15px, 15px 15px; } @@ -117,4 +117,11 @@ .go-#{$typekey} { #{$type}: 0 !important; } -} \ No newline at end of file +} + +.go-d-inline-block { + display: inline-block; +} +.go-d-block { + display: block; +} diff --git a/src/views/chart/ContentBox/index.vue b/src/views/chart/ContentBox/index.vue index 8c10edcf..826bbb85 100644 --- a/src/views/chart/ContentBox/index.vue +++ b/src/views/chart/ContentBox/index.vue @@ -10,14 +10,9 @@ - + - + @@ -151,7 +146,7 @@ $topOrBottomHeight: 40px; border-bottom: 1px solid; @include fetch-border-color('background-color1'); } - + .content { height: calc(100vh - #{$--header-height}); overflow: hidden; @@ -165,9 +160,7 @@ $topOrBottomHeight: 40px; height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight}); } .content-height-show-both { - height: calc( - 100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight} - ); + height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight}); } } diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue index c78b0b27..3a217c45 100644 --- a/src/views/chart/ContentEdit/components/EditGroup/index.vue +++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue @@ -85,26 +85,32 @@ const optionsHandle = ( allList: MenuOptionsItemType[], targetInstance: CreateComponentType ) => { - // 多选 - const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE] - // 单选 - const singleMenuEnums = [MenuEnum.UN_GROUP] - const filter = (menulist: MenuEnum[]) => { - const list: MenuOptionsItemType[] = [] - allList.forEach(item => { - if (menulist.includes(item.key as MenuEnum)) { - list.push(item) - } - }) - return list + return allList.filter(i => menulist.includes(i.key as MenuEnum)) } // 多选处理 if (chartEditStore.getTargetChart.selectId.length > 1) { - return filter(moreMenuEnums) + return filter([MenuEnum.GROUP, MenuEnum.DELETE]) } else { - return [...filter(singleMenuEnums), divider(), ...targetList] + const statusMenuEnums: MenuEnum[] = [] + if (targetInstance.status.lock) { + statusMenuEnums.push(MenuEnum.LOCK) + } else { + statusMenuEnums.push(MenuEnum.UNLOCK) + } + if (targetInstance.status.hide) { + statusMenuEnums.push(MenuEnum.HIDE) + } else { + statusMenuEnums.push(MenuEnum.SHOW) + } + // 单选 + const singleMenuEnums = [MenuEnum.UN_GROUP] + return [ + ...filter(singleMenuEnums), + divider(), + ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum)) + ] } } diff --git a/src/views/chart/ContentEdit/components/EditHistory/index.vue b/src/views/chart/ContentEdit/components/EditHistory/index.vue index 4346905b..4ad642bb 100644 --- a/src/views/chart/ContentEdit/components/EditHistory/index.vue +++ b/src/views/chart/ContentEdit/components/EditHistory/index.vue @@ -48,8 +48,19 @@ import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' -const { DesktopOutlineIcon, PencilIcon, TrashIcon, CopyIcon, LayersIcon, DuplicateIcon, HelpOutlineIcon } = - icon.ionicons5 +const { + DesktopOutlineIcon, + PencilIcon, + TrashIcon, + CopyIcon, + LayersIcon, + DuplicateIcon, + HelpOutlineIcon, + LockClosedOutlineIcon, + LockOpenOutlineIcon, + EyeOffOutlineIcon, + EyeOutlineIcon +} = icon.ionicons5 const { StackedMoveIcon, Carbon3DCursorIcon, Carbon3DSoftwareIcon } = icon.carbon const chartHistoryStoreStore = useChartHistoryStore() @@ -83,6 +94,14 @@ const iconHandle = (e: HistoryItemType) => { return Carbon3DCursorIcon case HistoryActionTypeEnum.UN_GROUP: return Carbon3DSoftwareIcon + case HistoryActionTypeEnum.LOCK: + return LockClosedOutlineIcon + case HistoryActionTypeEnum.UNLOCK: + return LockOpenOutlineIcon + case HistoryActionTypeEnum.HIDE: + return EyeOffOutlineIcon + case HistoryActionTypeEnum.SHOW: + return EyeOutlineIcon default: return PencilIcon } @@ -109,9 +128,7 @@ const options = computed(() => { } }) - return reverse(options.filter(item => { - return item.label - })) + return reverse(options.filter(item => item.label)) }) diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue index b7b3bd65..a1d162df 100644 --- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue +++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue @@ -1,5 +1,5 @@