feat(vue-components,react-components): 增加点击事件，使用组件状态hook

pnpm-lock.yaml

@@ -635,12 +635,12 @@ importers:
 
   react-components/button:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -660,15 +660,12 @@ importers:
 
   react-components/container:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
-      '@tmagic/utils':
-        specifier: workspace:^
-        version: link:../../packages/utils
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -688,12 +685,12 @@ importers:
 
   react-components/img:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -713,15 +710,12 @@ importers:
 
   react-components/iterator-container:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
-      '@tmagic/utils':
-        specifier: workspace:^
-        version: link:../../packages/utils
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -741,12 +735,12 @@ importers:
 
   react-components/overlay:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -766,15 +760,12 @@ importers:
 
   react-components/page:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
-      '@tmagic/utils':
-        specifier: workspace:^
-        version: link:../../packages/utils
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -794,15 +785,12 @@ importers:
 
   react-components/page-fragment:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
-      '@tmagic/utils':
-        specifier: workspace:^
-        version: link:../../packages/utils
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -822,12 +810,12 @@ importers:
 
   react-components/page-fragment-container:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -847,12 +835,12 @@ importers:
 
   react-components/qrcode:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
       qrcode:
         specifier: ^1.5.0
         version: 1.5.4
@@ -878,12 +866,12 @@ importers:
 
   react-components/text:
     dependencies:
+      '@tmagic/core':
+        specifier: workspace:^
+        version: link:../../packages/core
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
       react:
         specifier: '>=18.3.1'
         version: 18.3.1
@@ -907,8 +895,8 @@ importers:
         specifier: 1.5.9
         version: 1.5.9(typescript@5.7.3)
       '@tmagic/react-runtime-help':
-        specifier: 0.0.4
+        specifier: 0.1.0
-        version: 0.0.4(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3)
+        version: 0.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3)
       '@tmagic/stage':
         specifier: 1.5.9
         version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3)
@@ -1024,8 +1012,8 @@ importers:
         specifier: 1.5.9
         version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3)
       '@tmagic/vue-runtime-help':
-        specifier: ^1.0.0
+        specifier: ^1.1.0
-        version: 1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16)
+        version: 1.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16)
       axios:
         specifier: ^0.25.0
         version: 0.25.0
@@ -1073,8 +1061,8 @@ importers:
         specifier: 1.5.9
         version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3)
       '@tmagic/vue-runtime-help':
-        specifier: ^1.0.0
+        specifier: ^1.1.0
-        version: 1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+        version: 1.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
       axios:
         specifier: ^0.25.0
         version: 0.25.0
@@ -2857,8 +2845,8 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/react-runtime-help@0.0.4':
+  '@tmagic/react-runtime-help@0.1.0':
-    resolution: {integrity: sha512-H6WnitSMQUjZ4ArkO/a70l0GIqmTP+n+416PIvbCEVaVb5M8cBk72h3rTvwVp3CGFptLo/OYooyw7hO1ofVmCw==}
+    resolution: {integrity: sha512-R9WFs45RkJryLQJvITgJOWaAT5Bp38WOCIlcSsq60m5vy+0iLPF7zJYDhihG2uIdIlEQrbN7KqndxAqkyBi9Gw==}
     engines: {node: '>=18'}
     peerDependencies:
       '@tmagic/core': '>=1.5.0'
@@ -2973,8 +2961,8 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/vue-runtime-help@1.0.0':
+  '@tmagic/vue-runtime-help@1.1.0':
-    resolution: {integrity: sha512-dRNW56m7t9e+fDHVOgONz8xBI60rgCY+gxekyVP3oBq0JU8Sviuv8KVhM2YiMiTja6C/xTwBENSQLocYLV2UOw==}
+    resolution: {integrity: sha512-iN2gkn5BGSchMYm0ItesgDFi8er4wbKeUdVVGl2G32ebDSpU9jM9iYpav0uxpjTbLqypQTrArtUpj1Uhy/gI3Q==}
     engines: {node: '>=18'}
     peerDependencies:
       '@tmagic/core': '>=1.5.0'
@@ -8438,7 +8426,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.3
 
-  '@tmagic/react-runtime-help@0.0.4(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3)':
+  '@tmagic/react-runtime-help@0.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3)':
     dependencies:
       lodash-es: 4.17.21
       react: 18.3.1
@@ -8561,7 +8549,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.3
 
-  '@tmagic/vue-runtime-help@1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16)':
+  '@tmagic/vue-runtime-help@1.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16)':
     dependencies:
       vue: 2.7.16
       vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@2.7.16))(vue@2.7.16)
@@ -8571,7 +8559,7 @@ snapshots:
       '@vue/composition-api': 1.7.2(vue@2.7.16)
       typescript: 5.7.3
 
-  '@tmagic/vue-runtime-help@1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))':
+  '@tmagic/vue-runtime-help@1.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       vue: 3.5.13(typescript@5.7.3)
       vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))

react-components/button/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-button",
   "type": "module",
   "main": "src/index.ts",
@@ -14,16 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/button/src/Button.tsx

@@ -18,8 +18,9 @@
 
 import React from 'react';
 
+import type { Id, MComponent } from '@tmagic/core';
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MComponent } from '@tmagic/schema';
 
 interface ButtonSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -35,6 +36,7 @@ interface ButtonProps {
   containerIndex: number;
   iteratorIndex?: number[];
   iteratorContainerId?: Id[];
+  onClick: any;
 }
 
 const Page: React.FC<ButtonProps> = ({
@@ -46,10 +48,16 @@ const Page: React.FC<ButtonProps> = ({
   iteratorIndex,
   iteratorContainerId,
 }) => {
-  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
+  const { app, node } = useApp({ config, iteratorIndex, iteratorContainerId });
 
   if (!app) return null;
 
+  const clickHandler = () => {
+    if (node && app) {
+      app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+    }
+  };
+
   return (
     <button
       className={className}
@@ -58,6 +66,7 @@ const Page: React.FC<ButtonProps> = ({
       data-tmagic-container-index={containerIndex}
       data-tmagic-iterator-index={iteratorIndex}
       data-tmagic-iterator-container-id={iteratorContainerId}
+      onClick={clickHandler}
     >
       {config.text || ''}
     </button>

react-components/button/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

react-components/container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,17 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/utils": "workspace:^",
+    "@tmagic/core": "workspace:^",
-    "@tmagic/schema": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/container/src/Component.tsx

@@ -0,0 +1,66 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useContext } from 'react';
+
+import type TMagicApp from '@tmagic/core';
+import type { Id, MComponent } from '@tmagic/core';
+import { IS_DSL_NODE_KEY } from '@tmagic/core';
+import { AppContent, useComponentStatus, useNode } from '@tmagic/react-runtime-help';
+
+interface ComponentProps {
+  config: Omit<MComponent, 'id'>;
+  index: number;
+  iteratorIndex: number[];
+  iteratorContainerId: Id[];
+}
+
+const Container: React.FC<ComponentProps> = (props) => {
+  const app: TMagicApp | undefined = useContext(AppContent);
+
+  const node = useNode(props);
+  const MagicUiComp = app?.resolveComponent(props.config.type || 'container');
+
+  if (!MagicUiComp) return null;
+
+  if (typeof props.config.display === 'function' && props.config.display({ app, node }) === false) {
+    return null;
+  }
+
+  const { style, className } = useComponentStatus(props);
+
+  return (
+    <MagicUiComp
+      data-tmagic-id={`${props.config.id || ''}`}
+      data-container-index={props.index}
+      data-tmagic-iterator-index={props.iteratorIndex}
+      data-tmagic-iterator-container-id={props.iteratorContainerId}
+      containerIndex={props.index}
+      iteratorIndex={props.iteratorIndex}
+      iteratorContainerId={props.iteratorContainerId}
+      key={props.config.id ?? props.index}
+      config={{ ...props.config, [IS_DSL_NODE_KEY]: true }}
+      className={className}
+      style={style}
+    ></MagicUiComp>
+  );
+};
+
+Container.displayName = 'magic-ui-container-item';
+
+export default Container;

react-components/container/src/Container.tsx

@@ -18,9 +18,11 @@
 
 import React from 'react';
 
+import type { Id, MContainer, MNode } from '@tmagic/core';
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MContainer, MNode } from '@tmagic/schema';
+
-import { IS_DSL_NODE_KEY } from '@tmagic/utils';
+import Component from './Component';
 
 interface ContainerSchema extends Omit<MContainer, 'id'> {
   id?: Id;
@@ -28,71 +30,53 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
 }
 
 interface ContainerProps {
+  id?: Id;
   config: ContainerSchema;
   className: string;
   style: Record<string, any>;
-  id: string;
   containerIndex: number;
   iteratorIndex: number[];
   iteratorContainerId: Id[];
 }
 
 const Container: React.FC<ContainerProps> = ({
-  config,
   id,
-  style,
+  config,
   className,
   containerIndex,
+  style,
   iteratorIndex,
   iteratorContainerId,
 }) => {
-  const { app, display } = useApp({ config });
+  const { app, node } = useApp({ config });
 
   if (!app) return null;
 
-  const classNames = config[IS_DSL_NODE_KEY] ? [] : ['magic-ui-container'];
+  const clickHandler = () => {
-  if (config.layout) {
+    if (node && app) {
-    classNames.push(`magic-layout-${config.layout}`);
+      app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-  }
-  if (className) {
-    classNames.push(className);
     }
+  };
 
   return (
     <div
-      data-tmagic-id={`${id || ''}`}
+      data-tmagic-id={`${id || config.id || ''}`}
       data-container-index={containerIndex}
       data-tmagic-iterator-index={iteratorIndex}
       data-tmagic-iterator-container-id={iteratorContainerId}
-      className={classNames.join(' ')}
+      className={className}
-      style={config[IS_DSL_NODE_KEY] ? style : app.transformStyle(config.style || {})}
+      style={style}
+      onClick={clickHandler}
     >
-      {config.items?.map((item: MNode, index: number) => {
+      {config.items?.map((item: MNode, index: number) => (
-        // eslint-disable-next-line @typescript-eslint/naming-convention
+        <Component
-        const MagicUiComp = app.resolveComponent(item.type || 'container');
+          key={item.id ?? index}
-
+          config={item}
-        if (!MagicUiComp) return null;
+          index={index}
-
-        if (!display(item)) return null;
-
-        const itemClassName = [`magic-ui-${item.type}`];
-        if (item.className) {
-          itemClassName.push(item.className);
-        }
-
-        return (
-          <MagicUiComp
-            id={`${item.id || ''}`}
-            containerIndex={index}
           iteratorIndex={iteratorIndex}
           iteratorContainerId={iteratorContainerId}
-            key={item.id ?? index}
+        />
-            config={{ ...item, [IS_DSL_NODE_KEY]: true }}
+      ))}
-            className={itemClassName.join(' ')}
-            style={app.transformStyle(item.style || {})}
-          ></MagicUiComp>
-        );
-      })}
     </div>
   );
 };

react-components/container/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

react-components/container/src/formConfig.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { getElById } from '@tmagic/utils';
+import { getElById } from '@tmagic/core';
 
 export default [
   {

react-components/img/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.1.0",
   "name": "@tmagic/react-img",
   "type": "module",
   "main": "src/index.ts",
@@ -14,16 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/img/src/Img.tsx

@@ -18,8 +18,8 @@
 
 import React from 'react';
 
+import type { Id, MComponent } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MComponent } from '@tmagic/schema';
 
 interface ImgSchema extends Omit<MComponent, 'id'> {
   id?: Id;

react-components/img/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

react-components/iterator-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-iterator-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,17 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/utils": "workspace:^",
+    "@tmagic/core": "workspace:^",
-    "@tmagic/schema": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/iterator-container/src/IteratorContainer.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 
-import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
+import {
+  COMMON_EVENT_PREFIX,
+  type Id,
+  type IteratorContainer as TMagicIteratorContainer,
+  type MIteratorContainer,
+  type MNode,
+} from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MIteratorContainer, MNode } from '@tmagic/schema';
 
 interface IteratorContainerSchema extends Omit<MIteratorContainer, 'id'> {
   id?: Id;
@@ -36,7 +41,7 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
   iteratorIndex,
   iteratorContainerId,
 }) => {
-  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
+  const { app, node } = useApp({ config, iteratorIndex, iteratorContainerId });
 
   let { iteratorData = [] } = config;
   const { itemConfig, dsField, items } = config;
@@ -81,6 +86,12 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
     };
   });
 
+  const clickHandler = () => {
+    if (node && app) {
+      app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+    }
+  };
+
   return (
     <div
       className={className}
@@ -89,6 +100,7 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
       data-container-index={containerIndex}
       data-iterator-index={iteratorIndex}
       data-iterator-container-id={iteratorContainerId}
+      onClick={clickHandler}
     >
       {configs.map((config: any, index: number) => (
         <MagicUiComp

react-components/iterator-container/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

react-components/iterator-container/src/formConfig.ts

@@ -15,8 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { NODE_CONDS_KEY } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';
-import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 export default [
   {

react-components/overlay/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-overlay",
   "type": "module",
   "main": "src/index.ts",
@@ -14,16 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/overlay/src/Overlay.tsx

@@ -18,8 +18,8 @@
 
 import React, { useEffect, useState } from 'react';
 
+import { type Id, IS_DSL_NODE_KEY, type MComponent, type MContainer, type MNode, type MPage } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 
 interface OverlayProps {
   config: MComponent;
@@ -93,11 +93,11 @@ const Overlay: React.FC<OverlayProps> = ({
 
   return (
     <MagicUiComp
-      id={id}
+      data-tmagic-id={`${id || config.id || ''}`}
       containerIndex={containerIndex}
       iteratorIndex={iteratorIndex}
       iteratorContainerId={iteratorContainerId}
-      config={config}
+      config={{ ...config, [IS_DSL_NODE_KEY]: false }}
       className={className}
       style={style}
     ></MagicUiComp>

react-components/page-fragment-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-page-fragment-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,16 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/page-fragment-container/src/PageFragmentContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import { type Id, IS_DSL_NODE_KEY, type MComponent, type MNode } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MComponent, MNode } from '@tmagic/schema';
 
 interface PageFragmentContainerProps {
   config: MComponent;
@@ -59,14 +59,14 @@ const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({
 
   return (
     <div
-      data-tmagic-id={`${id || ''}`}
+      data-tmagic-id={`${id || config.id || ''}`}
       data-container-index={containerIndex}
       data-tmagic-iterator-index={iteratorIndex}
       data-tmagic-iterator-container-id={iteratorContainerId}
       className={classNames.join(' ')}
       style={style}
     >
-      <MagicUiContainer config={containerConfig}></MagicUiContainer>
+      <MagicUiContainer config={{ ...containerConfig, [IS_DSL_NODE_KEY]: false }}></MagicUiContainer>
     </div>
   );
 };

react-components/page-fragment/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-page-fragment",
   "type": "module",
   "main": "src/index.ts",
@@ -14,17 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/utils": "workspace:^",
+    "@tmagic/core": "workspace:^",
-    "@tmagic/schema": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/page-fragment/src/PageFragment.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { MPageFragment } from '@tmagic/schema';
 
 interface PageFragmentProps {
   config: MPageFragment;
@@ -21,7 +21,13 @@ const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
     classNames.push(config.className);
   }
 
-  return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
+  return (
+    <MagicUiComp
+      config={{ ...config, [IS_DSL_NODE_KEY]: false }}
+      id={config.id}
+      className={classNames.join(' ')}
+    ></MagicUiComp>
+  );
 };
 
 PageFragment.displayName = 'magic-ui-page-fragment';

react-components/page-fragment/src/formConfig.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { getElById } from '@tmagic/utils';
+import { getElById } from '@tmagic/core';
 
 export default [
   {

react-components/page/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-page",
   "type": "module",
   "main": "src/index.ts",
@@ -14,17 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/utils": "workspace:^",
+    "@tmagic/core": "workspace:^",
-    "@tmagic/schema": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/page/src/Page.tsx

@@ -18,8 +18,9 @@
 
 import React from 'react';
 
-import { useApp } from '@tmagic/react-runtime-help';
+import type { MPage } from '@tmagic/core';
-import type { MPage } from '@tmagic/schema';
+import { IS_DSL_NODE_KEY } from '@tmagic/core';
+import { useApp, useComponentStatus } from '@tmagic/react-runtime-help';
 
 interface PageProps {
   config: MPage;
@@ -27,7 +28,7 @@ interface PageProps {
 
 const Page: React.FC<PageProps> = ({ config }) => {
   const { app } = useApp({
-    config,
+    config: { ...config, [IS_DSL_NODE_KEY]: true },
     methods: {
       refresh: () => window.location.reload(),
     },
@@ -37,12 +38,16 @@ const Page: React.FC<PageProps> = ({ config }) => {
 
   const MagicUiComp = app.resolveComponent('container');
 
-  const classNames = ['magic-ui-page'];
+  const { style, className } = useComponentStatus({ config });
-  if (config.className) {
-    classNames.push(config.className);
-  }
 
-  return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
+  return (
+    <MagicUiComp
+      config={{ ...config, [IS_DSL_NODE_KEY]: false }}
+      id={config.id}
+      className={className}
+      style={style}
+    ></MagicUiComp>
+  );
 };
 
 Page.displayName = 'magic-ui-page';

react-components/page/src/formConfig.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { getElById } from '@tmagic/utils';
+import { getElById } from '@tmagic/core';
 
 export default [
   {

react-components/qrcode/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-qrcode",
   "type": "module",
   "main": "src/index.ts",
@@ -17,16 +17,13 @@
     "qrcode": "^1.5.0"
   },
   "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/qrcode/src/QrCode.tsx

@@ -19,6 +19,7 @@
 import React, { useEffect, useState } from 'react';
 import QRCode from 'qrcode';
 
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
 import type { Id, MComponent } from '@tmagic/schema';
 
@@ -47,7 +48,7 @@ const QrCode: React.FC<QrCodeProps> = ({
   iteratorIndex,
   iteratorContainerId,
 }) => {
-  const { app } = useApp({ config });
+  const { app, node } = useApp({ config });
 
   if (!app) return null;
 
@@ -60,6 +61,12 @@ const QrCode: React.FC<QrCodeProps> = ({
     });
   }, [config.url]);
 
+  const clickHandler = () => {
+    if (node && app) {
+      app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+    }
+  };
+
   return (
     <img
       className={className}
@@ -69,6 +76,7 @@ const QrCode: React.FC<QrCodeProps> = ({
       data-tmagic-iterator-index={iteratorIndex}
       data-tmagic-iterator-container-id={iteratorContainerId}
       src={imgSrc}
+      onClick={clickHandler}
     />
   );
 };

react-components/qrcode/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

react-components/text/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
   "name": "@tmagic/react-text",
   "type": "module",
   "main": "src/index.ts",
@@ -14,16 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

react-components/text/src/Text.tsx

@@ -18,8 +18,9 @@
 
 import React from 'react';
 
+import type { Id, MComponent } from '@tmagic/core';
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MComponent } from '@tmagic/schema';
 
 interface TextSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -46,18 +47,25 @@ const Text: React.FC<TextProps> = ({
   iteratorIndex,
   iteratorContainerId,
 }) => {
-  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
+  const { app, node } = useApp({ config, iteratorIndex, iteratorContainerId });
 
   if (!app) return null;
 
+  const clickHandler = () => {
+    if (node && app) {
+      app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+    }
+  };
+
   return (
     <p
       className={className}
       style={style}
-      data-tmagic-id={id}
+      data-tmagic-id={`${id || config.id || ''}`}
       data-tmagic-container-index={containerIndex}
       data-tmagic-iterator-index={iteratorIndex}
       data-tmagic-iterator-container-id={iteratorContainerId}
+      onClick={clickHandler}
     >
       {config.text}
     </p>

react-components/text/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

vue-components/button/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.5",
+  "version": "0.1.1",
   "name": "@tmagic/vue-button",
   "type": "module",
   "main": "src/index.ts",

vue-components/button/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

vue-components/button/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <button>
+  <button @click="clickHandler">
     <slot>
       {{ config?.text || '' }}
     </slot>
@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue-demi';
+import { defineComponent, inject, type PropType } from 'vue-demi';
 
-import type { Id, MComponent } from '@tmagic/core';
+import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { useApp } from '@tmagic/vue-runtime-help';
+import { useApp, useComponentStatus } from '@tmagic/vue-runtime-help';
 
 interface ButtonSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -28,6 +28,7 @@ export default defineComponent({
     },
     iteratorIndex: Array as PropType<number[]>,
     iteratorContainerId: Array as PropType<Id[]>,
+    containerIndex: Number,
     model: {
       type: Object,
       default: () => ({}),
@@ -35,12 +36,21 @@ export default defineComponent({
   },
 
   setup(props) {
-    useApp({
+    const { setStatus } = inject<ReturnType<typeof useComponentStatus>>('componentStatusStore')!;
-      config: props.config,
+
-      methods: {},
+    setStatus('disabled');
-      iteratorContainerId: props.iteratorContainerId,
+
-      iteratorIndex: props.iteratorIndex,
+    const { app, node } = useApp(props);
-    });
+
+    const clickHandler = () => {
+      if (app && node) {
+        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+      }
+    };
+
+    return {
+      clickHandler,
+    };
   },
 });
 </script>

vue-components/container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
+  "version": "1.1.0",
   "name": "@tmagic/vue-container",
   "type": "module",
   "main": "src/index.ts",

vue-components/container/src/Component.ts

@@ -1,13 +1,15 @@
-import { defineComponent, h, inject, type PropType } from 'vue-demi';
+import { defineComponent, h, inject, type PropType, provide, resolveDirective, withDirectives } from 'vue-demi';
 
 import type TMagicApp from '@tmagic/core';
-import { Id, IS_DSL_NODE_KEY, MComponent, toLine } from '@tmagic/core';
+import { Id, IS_DSL_NODE_KEY, MComponent } from '@tmagic/core';
-import { useComponent, type UserRenderFunction } from '@tmagic/vue-runtime-help';
+import { useComponent, useComponentStatus, useNode, type UserRenderFunction } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
+  name: 'tmagic-container-item',
+
   props: {
     config: {
-      type: Object as PropType<MComponent>,
+      type: Object as PropType<Omit<MComponent, 'id'>>,
       required: true,
     },
     index: Number,
@@ -22,21 +24,55 @@ export default defineComponent({
   },
 
   setup(props) {
-    const userRender = inject<UserRenderFunction>('userRender', ({ h, type, props, attrs, style, className }) =>
+    const userRender = inject<UserRenderFunction>(
-      h(type, { ...props, ...attrs, style, class: className }),
+      'userRender',
+      ({ h, type, props = {}, attrs = {}, style, className, on, directives = [] }) => {
+        const options: Record<string, any> = {
+          ...props,
+          ...attrs,
+          style,
+          class: className,
+        };
+        if (on) {
+          for (const [key, handler] of Object.entries(on)) {
+            options[`on${key[0].toLocaleUpperCase()}${key.substring(1)}`] = handler;
+          }
+        }
+
+        if (directives.length) {
+          return withDirectives(
+            h(type, options),
+            directives.map((directive) => [resolveDirective(directive.name), directive.value, directive.modifiers]),
+          );
+        }
+
+        return h(type, options);
+      },
     );
 
     const app = inject<TMagicApp>('app');
+    const node = useNode(props);
 
-    return () =>
+    const componentStatusStore = useComponentStatus(props);
-      userRender({
+
+    provide('componentStatusStore', componentStatusStore);
+
+    const { style, className } = componentStatusStore;
+
+    return () => {
+      if (props.config.visible === false) return null;
+      if (props.config.condResult === false) return null;
+
+      if (typeof props.config.display === 'function' && props.config.display({ app, node }) === false) {
+        return null;
+      }
+
+      return userRender({
         h,
         config: props.config,
         type: useComponent({ componentType: props.config.type, app }),
-        style: app?.transformStyle(props.config.style || {}),
+        style: style.value,
-        className: props.config.className
+        className: className.value,
-          ? `${props.config.className} magic-ui-${toLine(props.config.type)}`
-          : `magic-ui-${toLine(props.config.type)}`,
         props: {
           config: { ...props.config, [IS_DSL_NODE_KEY]: true },
           containerIndex: props.index,
@@ -45,10 +81,11 @@ export default defineComponent({
         },
         attrs: {
           'data-tmagic-id': props.config.id,
-          'data-tmagic-iterator-index': props.iteratorIndex,
+          'data-tmagic-iterator-index': props.iteratorIndex.join(',') || undefined,
-          'data-tmagic-iterator-container-id': props.iteratorContainerId,
+          'data-tmagic-iterator-container-id': props.iteratorContainerId.join(',') || undefined,
           'data-container-index': props.index,
         },
       });
+    };
   },
 });

vue-components/container/src/Container.vue

@@ -1,10 +1,8 @@
 <template>
-  <div v-if="display(config)" :class="className" :style="style">
+  <div @click="clickHandler">
     <slot>
-      <template v-for="(item, index) in config.items">
+      <template v-for="(item, index) in config.items" :key="item.id">
         <ItemComponent
-          v-if="display(item)"
-          :key="item.id"
           :config="item"
           :index="index"
           :iterator-index="iteratorIndex"
@@ -16,11 +14,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue-demi';
+import { defineComponent, inject, type PropType } from 'vue-demi';
 
-import type { Id, MContainer } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import { IS_DSL_NODE_KEY } from '@tmagic/core';
+import { COMMON_EVENT_PREFIX, type Id, type MContainer } from '@tmagic/core';
-import { useApp } from '@tmagic/vue-runtime-help';
+import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 import ItemComponent from './Component';
 
@@ -45,6 +43,7 @@ export default defineComponent({
       type: Array as PropType<Id[]>,
       default: () => [],
     },
+    containerIndex: Number,
     model: {
       type: Object,
       default: () => ({}),
@@ -54,37 +53,18 @@ export default defineComponent({
   components: { ItemComponent },
 
   setup(props) {
-    const { display, app } = useApp({
+    const app = inject<TMagicApp>('app');
-      config: props.config,
+    const node = useNode(props, app);
-      iteratorContainerId: props.iteratorContainerId,
+    registerNodeHooks(node);
-      iteratorIndex: props.iteratorIndex,
-      methods: {},
-    });
 
-    const className = computed(() => {
+    const clickHandler = () => {
-      const list = ['magic-ui-container'];
+      if (app && node) {
-      if (props.config.layout) {
+        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-        list.push(`magic-layout-${props.config.layout}`);
       }
-      if (props.config.className) {
+    };
-        list.push(props.config.className);
-      }
-      return list.join(' ');
-    });
-
-    const style = computed(() => {
-      if (props.config[IS_DSL_NODE_KEY]) {
-        return {};
-      }
-      return app?.transformStyle(props.config.style || {});
-    });
 
     return {
-      app,
+      clickHandler,
-      className,
-      style,
-
-      display,
     };
   },
 });

vue-components/container/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

vue-components/img/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.6",
+  "version": "0.1.0",
   "name": "@tmagic/vue-img",
   "type": "module",
   "main": "src/index.ts",

vue-components/img/src/index.vue

@@ -6,7 +6,7 @@
 import { defineComponent, type PropType } from 'vue-demi';
 
 import type { Id, MComponent } from '@tmagic/core';
-import { useApp } from '@tmagic/vue-runtime-help';
+import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface ImgSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -25,6 +25,7 @@ export default defineComponent({
     },
     iteratorIndex: Array as PropType<number[]>,
     iteratorContainerId: Array as PropType<Id[]>,
+    containerIndex: Number,
     model: {
       type: Object,
       default: () => ({}),
@@ -36,12 +37,8 @@ export default defineComponent({
       if (props.config.url) window.location.href = props.config.url;
     };
 
-    useApp({
+    const node = useNode(props);
-      config: props.config,
+    registerNodeHooks(node);
-      iteratorContainerId: props.iteratorContainerId,
-      iteratorIndex: props.iteratorIndex,
-      methods: {},
-    });
 
     return {
       clickHandler,

vue-components/iterator-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.6",
+  "version": "0.1.0",
   "name": "@tmagic/vue-iterator-container",
   "type": "module",
   "main": "src/index.ts",

vue-components/iterator-container/src/IteratorContainer.vue

@@ -1,21 +1,31 @@
 <template>
-  <div>
+  <div @click="clickHandler">
-    <component
+    <IteratorItem
-      :is="containerComponent"
       v-for="(item, index) in configs"
-      :iterator-index="[...(iteratorIndex || []), index]"
-      :iterator-container-id="[...(iteratorContainerId || []), config.id]"
       :key="index"
       :config="item"
-    ></component>
+      :iterator-index="[...(iteratorIndex || []), index]"
+      :iterator-container-id="
+        config.id ? [...(iteratorContainerId || []), config.id] : [...(iteratorContainerId || [])]
+      "
+    ></IteratorItem>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, watch } from 'vue-demi';
+import { computed, defineComponent, inject, type PropType, watch } from 'vue-demi';
 
-import type { Id, IteratorContainer as TMagicIteratorContainer, MIteratorContainer, MNode } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import { useApp, useComponent } from '@tmagic/vue-runtime-help';
+import {
+  COMMON_EVENT_PREFIX,
+  type Id,
+  type IteratorContainer as TMagicIteratorContainer,
+  type MIteratorContainer,
+  type MNode,
+} from '@tmagic/core';
+import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+
+import IteratorItem from './IteratorItem.vue';
 
 interface IteratorContainerSchema extends Omit<MIteratorContainer, 'id'> {
   id?: Id;
@@ -33,6 +43,8 @@ interface IteratorItemSchema {
 export default defineComponent({
   name: 'tmagic-iterator-container',
 
+  components: { IteratorItem },
+
   props: {
     config: {
       type: Object as PropType<IteratorContainerSchema>,
@@ -40,6 +52,7 @@ export default defineComponent({
     },
     iteratorIndex: Array as PropType<number[]>,
     iteratorContainerId: Array as PropType<Id[]>,
+    containerIndex: Number,
     model: {
       type: Object,
       default: () => ({}),
@@ -47,14 +60,9 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { app } = useApp({
+    const app = inject<TMagicApp>('app');
-      config: props.config,
+    const node = useNode(props, app);
-      iteratorContainerId: props.iteratorContainerId,
+    registerNodeHooks(node);
-      iteratorIndex: props.iteratorIndex,
-      methods: {},
-    });
-
-    const containerComponent = useComponent({ componentType: 'container', app });
 
     const configs = computed<IteratorItemSchema[]>(() => {
       let { iteratorData = [] } = props.config;
@@ -117,9 +125,15 @@ export default defineComponent({
       },
     );
 
+    const clickHandler = () => {
+      if (app && node) {
+        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+      }
+    };
+
     return {
       configs,
-      containerComponent,
+      clickHandler,
     };
   },
 });

vue-components/iterator-container/src/IteratorItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <component
+    :is="containerComponent"
+    :style="style"
+    :class="className"
+    :config="config"
+    :iterator-index="iteratorIndex"
+    :iterator-container-id="iteratorContainerId"
+  ></component>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, type PropType } from 'vue-demi';
+
+import type TMagicApp from '@tmagic/core';
+import type { Id } from '@tmagic/core';
+import { useComponent, useComponentStatus } from '@tmagic/vue-runtime-help';
+
+import { IteratorItemSchema } from './type';
+
+export default defineComponent({
+  name: 'tmagic-iterator-container-item',
+
+  props: {
+    config: {
+      type: Object as PropType<IteratorItemSchema>,
+      required: true,
+    },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
+    containerIndex: Number,
+    index: Number,
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(props) {
+    const app = inject<TMagicApp>('app');
+
+    const containerComponent = useComponent({ componentType: 'container', app });
+
+    const { style, className } = useComponentStatus(props);
+
+    return {
+      style,
+      className,
+      containerComponent,
+    };
+  },
+});
+</script>

vue-components/iterator-container/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

vue-components/iterator-container/src/type.ts

@@ -0,0 +1,9 @@
+import type { MNode } from '@tmagic/core';
+
+export interface IteratorItemSchema {
+  items: MNode[];
+  condResult: boolean;
+  style: {
+    [key: string]: any;
+  };
+}

vue-components/overlay/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.1.0",
   "name": "@tmagic/vue-overlay",
   "type": "module",
   "main": "src/index.ts",

vue-components/overlay/src/index.vue

@@ -1,14 +1,15 @@
 <template>
-  <component v-if="visible" :is="containerComponent" :config="{ items: config.items }">
+  <component v-if="visible" :is="containerComponent" :config="{ items: config.items, [IS_DSL_NODE_KEY]: false }">
     <slot></slot>
   </component>
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeUnmount, type PropType, ref } from 'vue-demi';
+import { defineComponent, inject, onBeforeUnmount, type PropType, ref } from 'vue-demi';
 
-import type { Id, MContainer, MNode, MPage } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import { useApp, useComponent } from '@tmagic/vue-runtime-help';
+import { type Id, IS_DSL_NODE_KEY, type MContainer, type MNode, type MPage } from '@tmagic/core';
+import { registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
 
 interface OverlaySchema extends Omit<MContainer, 'id'> {
   id?: Id;
@@ -25,6 +26,7 @@ export default defineComponent({
     },
     iteratorIndex: Array as PropType<number[]>,
     iteratorContainerId: Array as PropType<Id[]>,
+    containerIndex: Number,
     model: {
       type: Object,
       default: () => ({}),
@@ -34,23 +36,18 @@ export default defineComponent({
   setup(props) {
     const visible = ref(false);
 
-    const { app, node } = useApp({
+    const app = inject<TMagicApp>('app');
-      config: props.config,
+    const containerComponent = useComponent({ componentType: 'container', app });
-      iteratorContainerId: props.iteratorContainerId,
+
-      iteratorIndex: props.iteratorIndex,
+    const openOverlay = () => {
-      methods: {
-        openOverlay() {
       visible.value = true;
       app?.emit('overlay:open', node);
-        },
+    };
-        closeOverlay() {
+
+    const closeOverlay = () => {
       visible.value = false;
       app?.emit('overlay:close', node);
-        },
+    };
-      },
-    });
-
-    const containerComponent = useComponent({ componentType: 'container', app });
 
     const editorSelectHandler = (
       info: {
@@ -61,9 +58,9 @@ export default defineComponent({
       path: MNode[],
     ) => {
       if (path.find((node: MNode) => node.id === props.config.id)) {
-        node?.instance.openOverlay();
+        openOverlay();
       } else {
-        node?.instance.closeOverlay();
+        closeOverlay();
       }
     };
 
@@ -73,9 +70,16 @@ export default defineComponent({
       app?.page?.off('editor:select', editorSelectHandler);
     });
 
+    const node = useNode(props, app);
+    registerNodeHooks(node, {
+      openOverlay,
+      closeOverlay,
+    });
+
     return {
       containerComponent,
       visible,
+      IS_DSL_NODE_KEY,
     };
   },
 });

vue-components/page-fragment-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.5",
+  "version": "0.1.0",
   "name": "@tmagic/vue-page-fragment-container",
   "type": "module",
   "main": "src/index.ts",

vue-components/page-fragment-container/src/PageFragmentContainer.vue

@@ -11,10 +11,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue-demi';
+import { computed, defineComponent, inject, type PropType } from 'vue-demi';
 
-import { type Id, type MComponent, type MNode, NodeType } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import { useApp, useComponent } from '@tmagic/vue-runtime-help';
+import { cloneDeep, type Id, IS_DSL_NODE_KEY, type MComponent, NodeType, traverseNode } from '@tmagic/core';
+import { registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
   name: 'tmagic-page-fragment-container',
@@ -26,6 +27,7 @@ export default defineComponent({
     },
     iteratorIndex: Array as PropType<number[]>,
     iteratorContainerId: Array as PropType<Id[]>,
+    containerIndex: Number,
     model: {
       type: Object,
       default: () => ({}),
@@ -33,12 +35,9 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { app } = useApp({
+    const app = inject<TMagicApp>('app');
-      config: props.config,
+    const node = useNode(props, app);
-      methods: {},
+    registerNodeHooks(node);
-      iteratorContainerId: props.iteratorContainerId,
-      iteratorIndex: props.iteratorIndex,
-    });
 
     const containerComponent = useComponent({ componentType: 'container', app });
 
@@ -47,25 +46,15 @@ export default defineComponent({
     const containerConfig = computed(() => {
       if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
 
-      const { id, type, items, ...others } = fragment.value;
-      const itemsWithoutId = items.map((item: MNode) => {
-        const { id, ...otherConfig } = item;
-        return {
-          ...otherConfig,
-        };
-      });
-
       if (app?.platform === 'editor') {
-        return {
+        const fragmentConfigWithoutId = cloneDeep(fragment.value);
-          ...others,
+        traverseNode(fragmentConfigWithoutId, (node) => {
-          items: itemsWithoutId,
+          node.id = '';
-        };
+        });
+        return { ...fragmentConfigWithoutId, [IS_DSL_NODE_KEY]: false };
       }
 
-      return {
+      return { ...fragment.value, [IS_DSL_NODE_KEY]: false };
-        ...others,
-        items,
-      };
     });
 
     return {

vue-components/page-fragment/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.5",
+  "version": "0.1.0",
   "name": "@tmagic/vue-page-fragment",
   "type": "module",
   "main": "src/index.ts",

vue-components/page-fragment/src/PageFragment.vue

@@ -1,18 +1,19 @@
 <template>
   <component
     :is="containerComponent"
-    class="magic-ui-page-fragment"
+    :class="className"
+    :style="style"
     :data-tmagic-id="config.id"
-    :config="config"
+    :config="{ ...config, [IS_DSL_NODE_KEY]: false }"
-    :style="app?.transformStyle(config.style || {})"
   ></component>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue-demi';
+import { defineComponent, inject, type PropType } from 'vue-demi';
 
-import type { MPageFragment } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import { useApp, useComponent } from '@tmagic/vue-runtime-help';
+import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core';
+import { registerNodeHooks, useComponent, useComponentStatus, useNode } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
   name: 'tmagic-page-fragment',
@@ -29,16 +30,17 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { app } = useApp({
+    const app = inject<TMagicApp>('app');
-      config: props.config,
+    const node = useNode(props, app);
-      methods: {},
+    registerNodeHooks(node);
-    });
 
     const containerComponent = useComponent({ componentType: 'container', app });
-
+    const { style, className } = useComponentStatus(props);
     return {
-      app,
+      style,
+      className,
       containerComponent,
+      IS_DSL_NODE_KEY,
     };
   },
 });

vue-components/page/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.7",
+  "version": "0.1.0",
   "name": "@tmagic/vue-page",
   "type": "module",
   "main": "src/index.ts",

vue-components/page/src/index.vue

@@ -1,12 +1,19 @@
 <template>
-  <component :is="containerComponent" class="magic-ui-page" :data-tmagic-id="config.id" :config="config"></component>
+  <component
+    :is="containerComponent"
+    :class="className"
+    :style="style"
+    :data-tmagic-id="config.id"
+    :config="{ ...config, [IS_DSL_NODE_KEY]: false }"
+  ></component>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue-demi';
+import { defineComponent, inject, nextTick, type PropType, watch } from 'vue-demi';
 
-import { asyncLoadCss, asyncLoadJs, type MPage } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import { useApp, useComponent } from '@tmagic/vue-runtime-help';
+import { asyncLoadCss, asyncLoadJs, IS_DSL_NODE_KEY, type MPage } from '@tmagic/core';
+import { useComponent, useComponentStatus, useNode } from '@tmagic/vue-runtime-help';
 
 const createCss = (config: MPage) => {
   if (config.cssFile) {
@@ -45,14 +52,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const refresh = () => {
+    const app = inject<TMagicApp>('app');
-      window.location.reload();
-    };
-
-    const { app } = useApp({
-      config: props.config,
-      methods: { refresh },
-    });
 
     if (app?.jsEngine === 'browser') {
       createCss(props.config);
@@ -61,8 +61,39 @@ export default defineComponent({
 
     const containerComponent = useComponent({ componentType: 'container', app });
 
+    const { style, className } = useComponentStatus(props);
+
+    const refresh = () => {
+      window.location.reload();
+    };
+
+    watch(
+      () => props.config,
+      async (config, preConfig) => {
+        const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
+
+        if (config.id !== preConfig?.id) {
+          node?.registerMethod({ refresh });
+          node?.emit('created');
+        }
+        await nextTick();
+
+        if (config.id !== preConfig?.id) {
+          node?.emit('mounted');
+          const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
+          preNode?.emit('destroy');
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
     return {
+      style,
+      className,
       containerComponent,
+      IS_DSL_NODE_KEY,
     };
   },
 });

vue-components/qrcode/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.1.0",
   "name": "@tmagic/vue-qrcode",
   "type": "module",
   "main": "src/index.ts",

vue-components/qrcode/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

vue-components/qrcode/src/index.vue

@@ -1,13 +1,14 @@
 <template>
-  <img :src="imgUrl" />
+  <img :src="imgUrl" @click="clickHandler" />
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref, watch } from 'vue-demi';
+import { defineComponent, inject, type PropType, ref, watch } from 'vue-demi';
 import QRCode from 'qrcode';
 
-import type { Id, MComponent } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import { useApp } from '@tmagic/vue-runtime-help';
+import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
+import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface QrCodeSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -25,6 +26,7 @@ export default defineComponent({
     },
     iteratorIndex: Array as PropType<number[]>,
     iteratorContainerId: Array as PropType<Id[]>,
+    containerIndex: Number,
     model: {
       type: Object,
       default: () => ({}),
@@ -47,15 +49,19 @@ export default defineComponent({
       },
     );
 
-    useApp({
+    const app = inject<TMagicApp>('app');
-      config: props.config,
+    const node = useNode(props);
-      methods: {},
+    registerNodeHooks(node);
-      iteratorContainerId: props.iteratorContainerId,
+
-      iteratorIndex: props.iteratorIndex,
+    const clickHandler = () => {
-    });
+      if (app && node) {
+        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+      }
+    };
 
     return {
       imgUrl,
+      clickHandler,
     };
   },
 });

vue-components/text/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.1.0",
   "name": "@tmagic/vue-text",
   "type": "module",
   "main": "src/index.ts",

vue-components/text/src/event.ts

@@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
   methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };

vue-components/text/src/index.vue

@@ -1,12 +1,15 @@
 <template>
-  <p>{{ config.text }}</p>
+  <p @click="clickHandler">
+    <slot>{{ config.text }}</slot>
+  </p>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue-demi';
+import { defineComponent, inject, type PropType } from 'vue-demi';
 
-import type { Id, MComponent } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import { useApp } from '@tmagic/vue-runtime-help';
+import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
+import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface TextSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -24,6 +27,7 @@ export default defineComponent({
     },
     iteratorIndex: Array as PropType<number[]>,
     iteratorContainerId: Array as PropType<Id[]>,
+    containerIndex: Number,
     model: {
       type: Object,
       default: () => ({}),
@@ -31,12 +35,19 @@ export default defineComponent({
   },
 
   setup(props) {
-    useApp({
+    const app = inject<TMagicApp>('app');
-      config: props.config,
+    const node = useNode(props);
-      methods: {},
+    registerNodeHooks(node);
-      iteratorContainerId: props.iteratorContainerId,
+
-      iteratorIndex: props.iteratorIndex,
+    const clickHandler = () => {
-    });
+      if (app && node) {
+        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+      }
+    };
+
+    return {
+      clickHandler,
+    };
   },
 });
 </script>