From 36a1a18615ac29fc4448ee2498d51ece51fe8dbd Mon Sep 17 00:00:00 2001 From: roymondchen Date: Fri, 15 Mar 2024 15:22:30 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8D=E7=AC=AC?= =?UTF-8?q?=E4=B8=80=E6=AC=A1=E6=89=93=E5=BC=80=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E8=BE=B9=E6=A0=8F=E5=AE=BD=E5=BA=A6=E5=8F=AF?= =?UTF-8?q?=E8=83=BD=E4=B8=BA0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/components/SplitView.vue | 81 +++++++++++--------- packages/editor/src/layouts/Framework.vue | 67 ++++++++-------- packages/editor/src/services/ui.ts | 6 ++ 3 files changed, 85 insertions(+), 69 deletions(-) diff --git a/packages/editor/src/components/SplitView.vue b/packages/editor/src/components/SplitView.vue index cc6d5c307..69ca04458 100644 --- a/packages/editor/src/components/SplitView.vue +++ b/packages/editor/src/components/SplitView.vue @@ -21,7 +21,7 @@ diff --git a/packages/editor/src/hooks/index.ts b/packages/editor/src/hooks/index.ts index 7c1396f4c..af026d354 100644 --- a/packages/editor/src/hooks/index.ts +++ b/packages/editor/src/hooks/index.ts @@ -20,3 +20,5 @@ export * from './use-code-block-edit'; export * from './use-data-source-method'; export * from './use-stage'; export * from './use-float-box'; +export * from './use-window-rect'; +export * from './use-editor-content-height'; diff --git a/packages/editor/src/hooks/use-code-block-edit.ts b/packages/editor/src/hooks/use-code-block-edit.ts index 4ea6b32d5..3b5b88c54 100644 --- a/packages/editor/src/hooks/use-code-block-edit.ts +++ b/packages/editor/src/hooks/use-code-block-edit.ts @@ -20,7 +20,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => { } codeConfig.value = { - name: '代码块', + name: '', content: `({app, params}) => {\n // place your code here\n}`, params: [], }; diff --git a/packages/editor/src/hooks/use-editor-content-height.ts b/packages/editor/src/hooks/use-editor-content-height.ts new file mode 100644 index 000000000..6bc5fa20e --- /dev/null +++ b/packages/editor/src/hooks/use-editor-content-height.ts @@ -0,0 +1,20 @@ +import { computed, inject, ref, watchEffect } from 'vue'; + +import type { Services } from '@editor/type'; + +export const useEditorContentHeight = () => { + const services = inject('services'); + const frameworkHeight = computed(() => services?.uiService.get('frameworkRect').height || 0); + const navMenuHeight = computed(() => services?.uiService.get('navMenuRect').height || 0); + const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value); + + const height = ref(0); + watchEffect(() => { + if (height.value > 0) return; + height.value = editorContentHeight.value; + }); + + return { + height, + }; +}; diff --git a/packages/editor/src/hooks/use-float-box.ts b/packages/editor/src/hooks/use-float-box.ts index 07e20242d..c4fc09484 100644 --- a/packages/editor/src/hooks/use-float-box.ts +++ b/packages/editor/src/hooks/use-float-box.ts @@ -26,34 +26,34 @@ export const useFloatBox = (slideKeys: ComputedRef) => { const showingBoxKeys = computed(() => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status), ); - const isDraging = ref(false); + const isDragging = ref(false); - const dragstartHandler = () => (isDraging.value = true); + const dragstartHandler = () => (isDragging.value = true); const dragendHandler = (key: string, e: DragEvent) => { floatBoxStates.value[key] = { left: e.clientX, top: e.clientY, status: true, }; - isDraging.value = false; + isDragging.value = false; }; document.body.addEventListener('dragover', (e: DragEvent) => { - if (!isDraging.value) return; + if (!isDragging.value) return; e.preventDefault(); }); watch( () => slideKeys.value, - () => { - for (const key in slideKeys.value) { - if (floatBoxStates.value[key]) continue; + (slideKeys) => { + slideKeys.forEach((key) => { + if (floatBoxStates.value[key]) return; floatBoxStates.value[key] = { status: false, top: 0, left: 0, }; - } + }); }, { deep: true, diff --git a/packages/editor/src/hooks/use-window-rect.ts b/packages/editor/src/hooks/use-window-rect.ts new file mode 100644 index 000000000..c90e71db0 --- /dev/null +++ b/packages/editor/src/hooks/use-window-rect.ts @@ -0,0 +1,20 @@ +import { onBeforeUnmount, reactive } from 'vue'; + +export const useWindowRect = () => { + const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight }); + + const windowResizeHandler = () => { + rect.width = globalThis.innerWidth; + rect.height = globalThis.innerHeight; + }; + + globalThis.addEventListener('resize', windowResizeHandler); + + onBeforeUnmount(() => { + globalThis.removeEventListener('resize', windowResizeHandler); + }); + + return { + rect, + }; +}; diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue index c2ee0392c..6cc969c99 100644 --- a/packages/editor/src/layouts/sidebar/Sidebar.vue +++ b/packages/editor/src/layouts/sidebar/Sidebar.vue @@ -111,6 +111,8 @@ :key="config.$key ?? index" v-if="floatBoxStates[config.$key]?.status" v-model:visible="floatBoxStates[config.$key].status" + :width="columnLeftWitch" + :height="600" :title="config.text" :position="{ left: floatBoxStates[config.$key].left, @@ -139,14 +141,15 @@ import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue'; import FloatingBox from '@editor/components/FloatingBox.vue'; import MIcon from '@editor/components/Icon.vue'; import { useFloatBox } from '@editor/hooks/use-float-box'; -import type { - MenuButton, - MenuComponent, - Services, - SideBarData, - SidebarSlots, - SideComponent, - SideItem, +import { + ColumnLayout, + type MenuButton, + type MenuComponent, + type Services, + type SideBarData, + type SidebarSlots, + type SideComponent, + type SideItem, } from '@editor/type'; import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue'; @@ -173,6 +176,8 @@ const props = withDefaults( const services = inject('services'); +const columnLeftWitch = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0); + const activeTabName = ref(props.data?.status); const getItemConfig = (data: SideItem): SideComponent => { diff --git a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue index 7f20041b9..14a98e7f3 100644 --- a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue +++ b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue @@ -2,6 +2,7 @@
可选组件
 + -
-
-
- +
+
+ +
+ +
- - -
- -
- - +
+
+ +
+
- {{ + {{ confirmText }} - - +
+
diff --git a/packages/editor/src/theme/props-panel.scss b/packages/editor/src/theme/props-panel.scss index 6da68a832..2a5d643c0 100644 --- a/packages/editor/src/theme/props-panel.scss +++ b/packages/editor/src/theme/props-panel.scss @@ -1,6 +1,20 @@ .m-editor-props-panel { padding: 0 10px; + .m-editor-props-panel-src-icon { + position: absolute; + right: 15px; + bottom: 15px; + z-index: 30; + } + + .magic-code-editor { + position: absolute; + left: 0; + top: 0; + z-index: 10; + } + &.small { .el-form-item__label { font-size: 12px; From 42f1f28b02fa274d201fa6d945f88129b465aac5 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Fri, 15 Mar 2024 17:14:56 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix(editor):=20=E6=8B=96=E5=8A=A8=E6=B5=AE?= =?UTF-8?q?=E5=8A=A8=E7=AA=97=E5=8F=A3=E4=BC=9A=E5=AF=BC=E8=87=B4=E7=AA=97?= =?UTF-8?q?=E5=8F=A3=E5=8F=98=E5=A4=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/components/FloatingBox.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/editor/src/components/FloatingBox.vue b/packages/editor/src/components/FloatingBox.vue index f8d708b44..6258d1e8b 100644 --- a/packages/editor/src/components/FloatingBox.vue +++ b/packages/editor/src/components/FloatingBox.vue @@ -90,8 +90,6 @@ const initMoveable = () => { }); moveable.on('drag', (e) => { - width.value = e.width; - height.value = e.height; e.target.style.transform = e.transform; });