diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue index 7a9c50dd..e3820d0c 100644 --- a/packages/editor/src/components/CodeBlockEditor.vue +++ b/packages/editor/src/components/CodeBlockEditor.vue @@ -9,59 +9,57 @@ :before-close="beforeClose" > - - - diff --git a/packages/editor/src/components/FloatingBox.vue b/packages/editor/src/components/FloatingBox.vue index 56fb0eeb..a08489e6 100644 --- a/packages/editor/src/components/FloatingBox.vue +++ b/packages/editor/src/components/FloatingBox.vue @@ -17,13 +17,14 @@ diff --git a/packages/editor/src/fields/DataSourceMocks.vue b/packages/editor/src/fields/DataSourceMocks.vue index 8480bd7f..854f8fef 100644 --- a/packages/editor/src/fields/DataSourceMocks.vue +++ b/packages/editor/src/fields/DataSourceMocks.vue @@ -6,32 +6,44 @@ 添加 - + :position="boxPosition" + > + + diff --git a/packages/editor/src/hooks/use-editor-content-height.ts b/packages/editor/src/hooks/use-editor-content-height.ts index 6bc5fa20..0c69cfb9 100644 --- a/packages/editor/src/hooks/use-editor-content-height.ts +++ b/packages/editor/src/hooks/use-editor-content-height.ts @@ -10,7 +10,7 @@ export const useEditorContentHeight = () => { const height = ref(0); watchEffect(() => { - if (height.value > 0) return; + if (height.value > 0 && height.value === editorContentHeight.value) return; height.value = editorContentHeight.value; }); diff --git a/packages/editor/src/hooks/use-float-box.ts b/packages/editor/src/hooks/use-float-box.ts index c4fc0948..13da788f 100644 --- a/packages/editor/src/hooks/use-float-box.ts +++ b/packages/editor/src/hooks/use-float-box.ts @@ -1,4 +1,6 @@ -import { computed, ComputedRef, ref, watch } from 'vue'; +import { computed, ComputedRef, inject, ref, watch } from 'vue'; + +import type { Services } from '@editor/type'; interface State { status: boolean; @@ -7,6 +9,8 @@ interface State { } export const useFloatBox = (slideKeys: ComputedRef) => { + const services = inject('services'); + const floatBoxStates = ref<{ [key in (typeof slideKeys.value)[number]]: State; }>( @@ -30,9 +34,10 @@ export const useFloatBox = (slideKeys: ComputedRef) => { const dragstartHandler = () => (isDragging.value = true); const dragendHandler = (key: string, e: DragEvent) => { + const navMenuRect = services?.uiService?.get('navMenuRect'); floatBoxStates.value[key] = { left: e.clientX, - top: e.clientY, + top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0), status: true, }; isDragging.value = false; @@ -47,12 +52,13 @@ export const useFloatBox = (slideKeys: ComputedRef) => { () => slideKeys.value, (slideKeys) => { slideKeys.forEach((key) => { - if (floatBoxStates.value[key]) return; - floatBoxStates.value[key] = { - status: false, - top: 0, - left: 0, - }; + if (!floatBoxStates.value[key]) { + floatBoxStates.value[key] = { + status: false, + top: 0, + left: 0, + }; + } }); }, { diff --git a/packages/editor/src/hooks/use-next-float-box-position.ts b/packages/editor/src/hooks/use-next-float-box-position.ts new file mode 100644 index 00000000..67034e8f --- /dev/null +++ b/packages/editor/src/hooks/use-next-float-box-position.ts @@ -0,0 +1,29 @@ +import { Ref, ref } from 'vue'; + +import { UiService } from '@editor/services/ui'; + +export const useNextFloatBoxPosition = (uiService?: UiService, parent?: Ref) => { + const boxPosition = ref({ + left: 0, + top: 0, + }); + + const calcBoxPosition = () => { + const columnWidth = uiService?.get('columnWidth'); + const navMenuRect = uiService?.get('navMenuRect'); + let left = columnWidth?.left ?? 0; + if (parent?.value) { + const rect = parent?.value?.getBoundingClientRect(); + left = (rect?.left ?? 0) + (rect?.width ?? 0); + } + boxPosition.value = { + left, + top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0), + }; + }; + + return { + boxPosition, + calcBoxPosition, + }; +}; diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue index 6cc969c9..2b99821c 100644 --- a/packages/editor/src/layouts/sidebar/Sidebar.vue +++ b/packages/editor/src/layouts/sidebar/Sidebar.vue @@ -111,8 +111,8 @@ :key="config.$key ?? index" v-if="floatBoxStates[config.$key]?.status" v-model:visible="floatBoxStates[config.$key].status" - :width="columnLeftWitch" - :height="600" + v-model:width="columnLeftWidth" + v-model:height="columnLeftHeight" :title="config.text" :position="{ left: floatBoxStates[config.$key].left, @@ -123,8 +123,8 @@
@@ -140,6 +140,7 @@ 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 { useEditorContentHeight } from '@editor/hooks/use-editor-content-height'; import { useFloatBox } from '@editor/hooks/use-float-box'; import { ColumnLayout, @@ -176,7 +177,8 @@ const props = withDefaults( const services = inject('services'); -const columnLeftWitch = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0); +const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0); +const { height: columnLeftHeight } = useEditorContentHeight(); const activeTabName = ref(props.data?.status); @@ -209,11 +211,6 @@ const getItemConfig = (data: SideItem): SideComponent => { text: '代码编辑', component: CodeBlockListPanel, slots: {}, - boxComponentConfig: { - props: { - slideType: 'box', - }, - }, }, 'data-source': { $key: 'data-source', diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue index 951fa812..6303d364 100644 --- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue @@ -23,7 +23,6 @@ ref="codeBlockEditor" :disabled="!editable" :content="codeConfig" - :slideType="slideType" @submit="submitCodeBlockHandler" > @@ -37,7 +36,7 @@ import type { Id } from '@tmagic/schema'; import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue'; import SearchInput from '@editor/components/SearchInput.vue'; import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit'; -import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services, SlideType } from '@editor/type'; +import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services } from '@editor/type'; import CodeBlockList from './CodeBlockList.vue'; @@ -49,7 +48,6 @@ defineOptions({ defineProps<{ customError?: (id: Id, errorType: CodeDeleteErrorType) => any; - slideType?: SlideType; }>(); const { codeBlockService } = inject('services') || {}; diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue index 815a919d..6cf7661a 100644 --- a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue @@ -1,27 +1,37 @@ diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue index 9b99952d..987be909 100644 --- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue +++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue @@ -33,7 +33,6 @@ :disabled="!editable" :values="dataSourceValues" :title="dialogTitle" - :slideType="slideType" @submit="submitDataSourceHandler" > @@ -47,7 +46,7 @@ import type { DataSourceSchema } from '@tmagic/schema'; import SearchInput from '@editor/components/SearchInput.vue'; import ToolButton from '@editor/components/ToolButton.vue'; -import type { DataSourceListSlots, Services, SlideType } from '@editor/type'; +import type { DataSourceListSlots, Services } from '@editor/type'; import DataSourceConfigPanel from './DataSourceConfigPanel.vue'; import DataSourceList from './DataSourceList.vue'; @@ -58,10 +57,6 @@ defineOptions({ name: 'MEditorDataSourceListPanel', }); -defineProps<{ - slideType?: SlideType; -}>(); - const { dataSourceService } = inject('services') || {}; const editDialog = ref>(); diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss index 91e18f1a..b7ff2ca1 100644 --- a/packages/editor/src/theme/code-block.scss +++ b/packages/editor/src/theme/code-block.scss @@ -4,13 +4,3 @@ display: none; } } - -.m-editor-code-block-editor { - .tmagic-design-table { - height: 180px; - } - - .el-drawer__body { - padding: 10px 20px; - } -} diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index c5df1bb4..15e5de1c 100644 --- a/packages/editor/src/type.ts +++ b/packages/editor/src/type.ts @@ -401,12 +401,6 @@ export interface SideBarData { items: SideItem[]; } -/** - * drawer 抽屉 - * box 悬浮窗 - */ -export type SlideType = 'drawer' | 'box'; - export interface ComponentItem { /** 显示文案 */ text: string;