This commit is contained in:
lhj
2024-11-17 17:29:03 +08:00
parent 2e1d590c89
commit 192ae66997
4 changed files with 45 additions and 27 deletions

2
components.d.ts vendored
View File

@ -8,9 +8,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AdaptivePage: typeof import('./src/components/AdaptivePage.vue')['default']
Designer: typeof import('./src/components/Designer.vue')['default']
DynamicComponent: typeof import('./src/components/DynamicComponent.vue')['default']
MainView: typeof import('./src/components/MainView.vue')['default']
NestedFunction: typeof import('./src/components/NestedFunction.vue')['default']
PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']

View File

@ -6,7 +6,7 @@
:class="[
'dynamic-component',
{ 'hover-state': isHovered && store.designerMode },
{ 'click-state': componentSelected && store.designerMode }
{ 'click-state': componentSelected && store.designerMode &&isComponent }
]"
@click.stop="handleClick"
@mouseover="isHovered = true"
@ -15,7 +15,7 @@
<div v-if="isHovered && store.designerMode" class="component-header">
<span>{{ componentName }}</span>
</div>
<div v-if="componentSelected && store.designerMode" class="component-header" :style="headerStyle">
<div v-if="componentSelected && store.designerMode&&isComponent" class="component-header" :style="headerStyle">
<div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
<div style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap">
<icon-copy class="clickable" size="20" />
@ -51,7 +51,7 @@ const store = useSchemeStore();
const props = defineProps({
componentData: Object
});
const isComponent=ref(true)
const componentId = computed(() => props.componentData?.id || '');
const componentName = computed(() => props.componentData?.name || 'Unnamed Component');
const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
@ -65,6 +65,13 @@ const componentStyle = computed(() => props.componentData?.style || []);
const componentSlots = computed(() => props.componentData?.slots || {});
const componentSelected = computed(() => store.nowComponentsData?.id && props.componentData?.id === store.nowComponentsData?.id);
onMounted(() => {
debugger
isComponent.value=props.componentData?.type!='AdaptivePage';
adjustHeaderPosition();
});
// 确保 componentProps 包含 disabled 属性
const componentPropsWithDisabled = computed(() => ({
...componentProps.value,
@ -143,9 +150,7 @@ const adjustHeaderPosition = () => {
};
};
onMounted(() => {
adjustHeaderPosition();
});
watch(() => componentSelected.value, () => {
if (componentSelected.value) {

View File

@ -1,17 +1,22 @@
[
{
"id": "AdaptivePage-4e510f833910000",
"name": "AdaptivePage",
"type": "AdaptivePage",
"props": {},
"class": "",
"designer": "",
"children": [],
"style": "",
"visible": true,
"slots": {},
"disable": true,
"events": {},
"loop": {}
}
]
{
"type": "AdaptivePage",
"name": "AdaptivePage",
"id": "AdaptivePage",
"version": "2.0",
"props": {},
"class": "",
"style": "",
"variables": {},
"dataSources": {},
"functions": {},
"orchestrations": {},
"events": {},
"slots": {},
"header": [],
"footer": [],
"body": [],
"meta": {},
"visible": true,
"disable": false,
"designer": {}
}

View File

@ -137,7 +137,10 @@ onMounted(() => {
initScheme();
});
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots' | 'visible' | 'disable' | 'children', IComponent>) {
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots' | 'visible'
| 'disable'|'header'|'footer'|'dataSources'|'functions'|'variables'
|'orchestrations'|'events'
|'meta' | 'children'|'body'|'designer', IComponent>) {
// console.log("clone", element);
return {
id: `${element.type}-${uuid()}`,
@ -145,7 +148,6 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
type: element.type,
props: element.props,
class: element.class,
designer: '',
text: element.text,
children: element.children || [],
style: element.style,
@ -154,6 +156,14 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
disable: element.visible,
events: {},
loop: {},
body: element.body,
designer:element.designer||{},
dataSources:element.dataSources,
functions:element.functions,
variables:element.variables,
orchestrations:element.orchestrations,
footer:element.footer,
meta:element.meta,
};
}