JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

fix(runtime): 数据源变化更新页面出错

Browse Source
This commit is contained in:
roymondchen 2024-02-29 16:54:49 +08:00
parent 58b62d18e4
commit 0df98bc226
3 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
runtime/react/page/App.tsx
View File

@ -23,7 +23,7 @@ import Core from '@tmagic/core';
import type { ChangeEvent } from '@tmagic/data-source'; import type { ChangeEvent } from '@tmagic/data-source';
import type { MNode } from '@tmagic/schema'; import type { MNode } from '@tmagic/schema';
import { AppContent } from '@tmagic/ui-react'; import { AppContent } from '@tmagic/ui-react';
import { replaceChildNode } from '@tmagic/utils'; import { isPage, replaceChildNode } from '@tmagic/utils';
function App() { function App() {
const app = useContext<Core | undefined>(AppContent); const app = useContext<Core | undefined>(AppContent);
@ -33,11 +33,16 @@ function App() {
const [config, setConfig] = useState(app.page.data); const [config, setConfig] = useState(app.page.data);
app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, event: ChangeEvent) => { app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
let pageConfig = config;
nodes.forEach((node) => { nodes.forEach((node) => {
replaceChildNode(node, [config]); if (isPage(node)) {
pageConfig = node;
} else {
replaceChildNode(node, [pageConfig]);
}
}); });
setConfig(cloneDeep(config)); setConfig(cloneDeep(pageConfig));
setTimeout(() => { setTimeout(() => {
app.emit('replaced-node', { app.emit('replaced-node', {

12
runtime/vue2/page/App.vue
View File

@ -3,23 +3,27 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, inject, nextTick, reactive } from 'vue'; import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
import Core from '@tmagic/core'; import Core from '@tmagic/core';
import type { ChangeEvent } from '@tmagic/data-source'; import type { ChangeEvent } from '@tmagic/data-source';
import type { MNode } from '@tmagic/schema'; import type { MNode } from '@tmagic/schema';
import { replaceChildNode } from '@tmagic/utils'; import { isPage, replaceChildNode } from '@tmagic/utils';
export default defineComponent({ export default defineComponent({
name: 'App', name: 'App',
setup() { setup() {
const app = inject<Core | undefined>('app'); const app = inject<Core | undefined>('app');
const pageConfig = reactive(app?.page?.data || {}); const pageConfig = ref(app?.page?.data || {});
app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => { app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
nodes.forEach((node) => { nodes.forEach((node) => {
replaceChildNode(reactive(node), [pageConfig as MNode]); if (isPage(node)) {
pageConfig.value = node;
} else {
replaceChildNode(reactive(node), [pageConfig.value as MNode]);
}
}); });
if (!app) return; if (!app) return;

12
runtime/vue3/page/App.vue
View File

@ -3,23 +3,27 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, inject, nextTick, reactive } from 'vue'; import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
import Core from '@tmagic/core'; import Core from '@tmagic/core';
import type { ChangeEvent } from '@tmagic/data-source'; import type { ChangeEvent } from '@tmagic/data-source';
import type { MNode } from '@tmagic/schema'; import type { MNode } from '@tmagic/schema';
import { replaceChildNode } from '@tmagic/utils'; import { isPage, replaceChildNode } from '@tmagic/utils';
export default defineComponent({ export default defineComponent({
name: 'App', name: 'App',
setup() { setup() {
const app = inject<Core | undefined>('app'); const app = inject<Core | undefined>('app');
const pageConfig = reactive(app?.page?.data || {}); const pageConfig = ref(app?.page?.data || {});
app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => { app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
nodes.forEach((node) => { nodes.forEach((node) => {
replaceChildNode(reactive(node), [pageConfig as MNode]); if (isPage(node)) {
pageConfig.value = node;
} else {
replaceChildNode(reactive(node), [pageConfig.value as MNode]);
}
}); });
if (!app) return; if (!app) return;