From 2f80f9a854d27c17c85f3d5295af7db7740dbf48 Mon Sep 17 00:00:00 2001 From: STATICHIT <2394412110@qq.com> Date: Wed, 11 Sep 2024 00:44:21 +0800 Subject: [PATCH 1/3] feat: supports plugin drag and plugin order state is persisted using vueuse --- packages/controller/src/useLayout.js | 72 ++++++++++++++++-- packages/design-core/package.json | 1 + packages/design-core/src/App.vue | 26 ++++++- packages/design-core/src/DesignPlugins.vue | 81 ++++++++++++++++----- packages/design-core/src/DesignSettings.vue | 54 ++++++++------ packages/plugins/help/index.js | 2 +- 6 files changed, 187 insertions(+), 49 deletions(-) diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js index fa08c375f5..d1718a9b60 100644 --- a/packages/controller/src/useLayout.js +++ b/packages/controller/src/useLayout.js @@ -42,7 +42,8 @@ const PLUGIN_POSITION = { leftBottom: 'leftBottom', independence: 'independence', rightTop: 'rightTop', - rightBottom: 'rightBottom' + rightBottom: 'rightBottom', + fixed: 'fixed' } const pluginState = reactive({ @@ -184,11 +185,15 @@ export default () => { //获取某个布局（左上/左下/右上）的插件名称列表 const getPluginsByLayout = (layout = 'all') => { - // 遍历对象并将 align 值分类到不同的数组中 - const targetLayout = Object.keys(pluginStorageReactive.value).filter( + // 筛选出符合布局条件的插件名称 + const pluginNames = Object.keys(pluginStorageReactive.value).filter( (key) => pluginStorageReactive.value[key].align === layout || layout === 'all' ) - return targetLayout //这里返回的是只有名字的数组 + + // 根据 index 对插件名称进行排序 + pluginNames.sort((a, b) => pluginStorageReactive.value[a].index - pluginStorageReactive.value[b].index) + + return pluginNames // 返回排序后的插件名称数组 } //修改某个插件的布局 @@ -198,6 +203,61 @@ export default () => { } } + //拖拽后改变插件位置 + const dargPluginLayout = (from, to, oldIndex, newIndex) => { + if (from === to && oldIndex === newIndex) return + + const items = Object.values(pluginStorageReactive.value) + // 记录拖拽项 + const movedItem = items.find((item) => item.align === from && item.index === oldIndex) + + // 同一列表中的拖拽 + if (from === to) { + if (oldIndex < newIndex) { + //往后移动 + items.forEach((item) => { + if (item !== movedItem && item.align === from && item.index > oldIndex && item.index <= newIndex) { + item.index -= 1 + } + }) + } else { + //往前移动 + items.forEach((item) => { + if (item !== movedItem && item.align === from && item.index >= newIndex && item.index < oldIndex) { + item.index += 1 + } + }) + } + } else { + // 跨列表拖拽 + items.forEach((item) => { + if (item !== movedItem && item.align === from && item.index > oldIndex) { + item.index -= 1 + } + if (item !== movedItem && item.align === to && item.index >= newIndex) { + item.index += 1 + } + }) + } + + // 更新拖拽项的位置 + if (movedItem) { + movedItem.align = to + movedItem.index = newIndex + } + } + + //判断是否在同一侧 + const isSameSide = (from, to) => { + const leftSide = ['leftTop', 'leftBottom'] + const rightSide = ['rightTop', 'rightBottom'] + + const isLeft = leftSide.includes(from) && leftSide.includes(to) + const isRight = rightSide.includes(from) && rightSide.includes(to) + + return isLeft || isRight + } + return { PLUGIN_NAME, PLUGIN_POSITION, @@ -222,6 +282,8 @@ export default () => { changeRightFixedPanels, getPluginsByLayout, changePluginLayout, - getPluginByLayout + getPluginByLayout, + dargPluginLayout, + isSameSide } } diff --git a/packages/design-core/package.json b/packages/design-core/package.json index 0c6a1234db..3439bdeec8 100644 --- a/packages/design-core/package.json +++ b/packages/design-core/package.json @@ -94,6 +94,7 @@ "prettier": "2.7.1", "sortablejs": "^1.14.0", "vue": "3.4.23", + "vue-draggable-plus": "^0.5.3", "vue-i18n": "^9.9.0" }, "devDependencies": { diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue index 7926440cc5..007a683870 100644 --- a/packages/design-core/src/App.vue +++ b/packages/design-core/src/App.vue @@ -75,10 +75,32 @@ export default { jsClose: null }) + // Step 1: 收集插件的 align 信息 + const alignGroups = {} + const pluginList = addons.plugins + + pluginList.forEach((item) => { + if (item.id) { + const align = item.options?.align || 'rightTop' + if (!alignGroups[align]) { + alignGroups[align] = [] + } + alignGroups[align].push(item.id) + } + }) + + // Step 2: 为每个插件分配 index 值 const plugin = {} - addons.plugins.forEach((item) => { + pluginList.forEach((item) => { if (item.id) { - plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'rightTop' } + const align = item.options?.align || 'rightTop' + const index = alignGroups[align].indexOf(item.id) + + plugin[item.id] = { + width: item.options?.width || 300, + align: align, + index: index + } } }) localStorage.setItem('plugin', JSON.stringify(plugin)) diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue index c458eaa8e4..2b8657742d 100644 --- a/packages/design-core/src/DesignPlugins.vue +++ b/packages/design-core/src/DesignPlugins.vue @@ -3,8 +3,15 @@
- +
+ - +
+ @@ -111,11 +139,14 @@ import { Popover, Tooltip } from '@opentiny/vue' import { useLayout, usePage } from '@opentiny/tiny-engine-controller' import { PublicIcon } from '@opentiny/tiny-engine-common' import { getPlugin } from '../config/plugin.js' +import { VueDraggable } from 'vue-draggable-plus' + export default { components: { TinyPopover: Popover, TinyTooltip: Tooltip, - PublicIcon + PublicIcon, + VueDraggable }, props: { renderPanel: { @@ -138,7 +169,9 @@ export default { changeLeftFixedPanels, leftFixedPanelsStorage, getPluginsByLayout, - PLUGIN_POSITION + PLUGIN_POSITION, + dargPluginLayout, + isSameSide } = useLayout() const plugins = getPluginsByLayout().map((pluginName) => getPlugin(pluginName)) @@ -158,7 +191,8 @@ export default { prevIdex: -2, topNavLists: getPluginsByLayout(PLUGIN_POSITION.leftTop).map((pluginName) => getPlugin(pluginName)), bottomNavLists: getPluginsByLayout(PLUGIN_POSITION.leftBottom).map((pluginName) => getPlugin(pluginName)), - independence: getPluginsByLayout(PLUGIN_POSITION.independence).map((pluginName) => getPlugin(pluginName)) + independence: getPluginsByLayout(PLUGIN_POSITION.independence).map((pluginName) => getPlugin(pluginName)), + fixedNavLists: getPluginsByLayout(PLUGIN_POSITION.fixed).map((pluginName) => getPlugin(pluginName)) }) const doCompleted = () => { @@ -190,6 +224,7 @@ export default { }) } } + watch(isTemporaryPage, () => { if (isTemporaryPage.saved) { const pagePanel = state.topNavLists?.find((item) => item.id === 'AppManage') || null @@ -204,6 +239,7 @@ export default { robotComponent.value = components.Robot robotVisible.value = !robotVisible.value } + const close = () => { state.prevIdex = -2 useLayout().closePlugin(true) @@ -214,6 +250,12 @@ export default { changeLeftFixedPanels(pluginName) } + //监听拖拽结束事件 + const onEnd = (e) => { + if (!isSameSide(e.from.id, e.to.id)) close() + dargPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex) + } + return { state, clickMenu, @@ -228,7 +270,8 @@ export default { completed, doCompleted, pluginState, - leftFixedPanelsStorage + leftFixedPanelsStorage, + onEnd } } } diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue index ee6738de53..53fce753c3 100644 --- a/packages/design-core/src/DesignSettings.vue +++ b/packages/design-core/src/DesignSettings.vue @@ -18,29 +18,23 @@ - +
- - + + + + +
+ @@ -50,13 +44,15 @@ import { Popover, Tooltip } from '@opentiny/vue' import { Tabs, TabItem } from '@opentiny/vue' import { useLayout } from '@opentiny/tiny-engine-controller' import { getPlugin } from '../config/plugin.js' +import { VueDraggable } from 'vue-draggable-plus' export default { components: { TinyTabs: Tabs, TinyTabItem: TabItem, TinyPopover: Popover, - TinyTooltip: Tooltip + TinyTooltip: Tooltip, + VueDraggable }, props: { renderPanel: { @@ -74,6 +70,8 @@ export default { registerPluginApi, changeRightFixedPanels, getPluginsByLayout, + dargPluginLayout, + isSameSide, layoutState: { settings: settingsState } } = useLayout() @@ -121,6 +119,12 @@ export default { changeRightFixedPanels(pluginName) } + //监听拖拽结束事件 + const onEnd = (e) => { + if (!isSameSide(e.from.id, e.to.id)) close() + dargPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex) + } + return { state, showMask, @@ -131,7 +135,8 @@ export default { clickMenu, close, fixPanel, - rightFixedPanelsStorage + rightFixedPanelsStorage, + onEnd } } } @@ -269,4 +274,9 @@ export default { box-shadow: inset 0px 0px 14px var(--ti-lowcode-canvas-handle-hover-bg); } } + +.ghost { + opacity: 0.5; + background: #f2f2f2; +} diff --git a/packages/plugins/help/index.js b/packages/plugins/help/index.js index 32727a3152..7ef4be42cd 100644 --- a/packages/plugins/help/index.js +++ b/packages/plugins/help/index.js @@ -17,7 +17,7 @@ export default { title: '', icon: HelpIcon, options: { - align: 'leftBottom' + align: 'fixed' }, align: 'bottom' } From 01a3d04c38a46fe9efb480fb0c405c35a02a43c6 Mon Sep 17 00:00:00 2001 From: STATICHIT <2394412110@qq.com> Date: Thu, 12 Sep 2024 22:27:20 +0800 Subject: [PATCH 2/3] optimize: Deal with comments --- packages/controller/src/useLayout.js | 8 ++++---- packages/design-core/src/App.vue | 4 ++-- packages/design-core/src/DesignPlugins.vue | 4 ++-- packages/design-core/src/DesignSettings.vue | 7 +++---- 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js index d1718a9b60..841794b14b 100644 --- a/packages/controller/src/useLayout.js +++ b/packages/controller/src/useLayout.js @@ -204,7 +204,7 @@ export default () => { } //拖拽后改变插件位置 - const dargPluginLayout = (from, to, oldIndex, newIndex) => { + const dragPluginLayout = (from, to, oldIndex, newIndex) => { if (from === to && oldIndex === newIndex) return const items = Object.values(pluginStorageReactive.value) @@ -249,8 +249,8 @@ export default () => { //判断是否在同一侧 const isSameSide = (from, to) => { - const leftSide = ['leftTop', 'leftBottom'] - const rightSide = ['rightTop', 'rightBottom'] + const leftSide = [PLUGIN_POSITION.leftTop, PLUGIN_POSITION.leftBottom] + const rightSide = [PLUGIN_POSITION.rightTop, PLUGIN_POSITION.rightBottom] const isLeft = leftSide.includes(from) && leftSide.includes(to) const isRight = rightSide.includes(from) && rightSide.includes(to) @@ -283,7 +283,7 @@ export default () => { getPluginsByLayout, changePluginLayout, getPluginByLayout, - dargPluginLayout, + dragPluginLayout, isSameSide } } diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue index 007a683870..1e29ecaffa 100644 --- a/packages/design-core/src/App.vue +++ b/packages/design-core/src/App.vue @@ -81,7 +81,7 @@ export default { pluginList.forEach((item) => { if (item.id) { - const align = item.options?.align || 'rightTop' + const align = item.options?.align || 'leftTop' if (!alignGroups[align]) { alignGroups[align] = [] } @@ -93,7 +93,7 @@ export default { const plugin = {} pluginList.forEach((item) => { if (item.id) { - const align = item.options?.align || 'rightTop' + const align = item.options?.align || 'leftTop' const index = alignGroups[align].indexOf(item.id) plugin[item.id] = { diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue index 2b8657742d..b6899f203d 100644 --- a/packages/design-core/src/DesignPlugins.vue +++ b/packages/design-core/src/DesignPlugins.vue @@ -170,7 +170,7 @@ export default { leftFixedPanelsStorage, getPluginsByLayout, PLUGIN_POSITION, - dargPluginLayout, + dragPluginLayout, isSameSide } = useLayout() @@ -253,7 +253,7 @@ export default { //监听拖拽结束事件 const onEnd = (e) => { if (!isSameSide(e.from.id, e.to.id)) close() - dargPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex) + dragPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex) } return { diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue index 53fce753c3..1d2bbe99fd 100644 --- a/packages/design-core/src/DesignSettings.vue +++ b/packages/design-core/src/DesignSettings.vue @@ -24,8 +24,7 @@
@@ -70,7 +69,7 @@ export default { registerPluginApi, changeRightFixedPanels, getPluginsByLayout, - dargPluginLayout, + dragPluginLayout, isSameSide, layoutState: { settings: settingsState } } = useLayout() @@ -122,7 +121,7 @@ export default { //监听拖拽结束事件 const onEnd = (e) => { if (!isSameSide(e.from.id, e.to.id)) close() - dargPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex) + dragPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex) } return { From 75ae8a3aa3bfaaa10f7ee010a456aa40233ccceb Mon Sep 17 00:00:00 2001 From: STATICHIT <2394412110@qq.com> Date: Thu, 12 Sep 2024 22:39:40 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor=EF=BC=9Avue-draggable-next=20repla?= =?UTF-8?q?ce=20vue-draggable-plus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design-core/package.json | 2 +- packages/design-core/src/DesignPlugins.vue | 12 ++++++------ packages/design-core/src/DesignSettings.vue | 8 ++++---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/design-core/package.json b/packages/design-core/package.json index 3439bdeec8..52a4ab324e 100644 --- a/packages/design-core/package.json +++ b/packages/design-core/package.json @@ -94,7 +94,7 @@ "prettier": "2.7.1", "sortablejs": "^1.14.0", "vue": "3.4.23", - "vue-draggable-plus": "^0.5.3", + "vue-draggable-next": "2.1.0", "vue-i18n": "^9.9.0" }, "devDependencies": { diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue index b6899f203d..6787b6bcdd 100644 --- a/packages/design-core/src/DesignPlugins.vue +++ b/packages/design-core/src/DesignPlugins.vue @@ -3,7 +3,7 @@
-
- +
- +
- +
- +
- +
@@ -43,7 +43,7 @@ import { Popover, Tooltip } from '@opentiny/vue' import { Tabs, TabItem } from '@opentiny/vue' import { useLayout } from '@opentiny/tiny-engine-controller' import { getPlugin } from '../config/plugin.js' -import { VueDraggable } from 'vue-draggable-plus' +import { VueDraggableNext } from 'vue-draggable-next' export default { components: { @@ -51,7 +51,7 @@ export default { TinyTabItem: TabItem, TinyPopover: Popover, TinyTooltip: Tooltip, - VueDraggable + VueDraggableNext }, props: { renderPanel: {