feat(editor): 使一个大组件的内部模块能单独进行属性配置，并提供一个game示例

packages/editor/src/components/TreeNode.vue

@@ -154,6 +154,12 @@ const expandHandler = () => {
 };
 
 const nodeClickHandler = (event: MouseEvent) => {
+  const { data, parent } = props;
+  if (data.comInnerModule) {
+    data[data.comInnerModule] = parent?.[data.comInnerModule];
+    data.parentId = parent?.id;
+    data.type = parent?.type;
+  }
   treeEmit?.('node-click', event, props.data);
 };
 </script>

packages/editor/src/layouts/props-panel/PropsPanel.vue

@@ -100,7 +100,7 @@ const values = ref<FormValue>({});
 const curFormConfig = ref<any>([]);
 const node = computed(() => editorService.get('node'));
 const nodes = computed(() => editorService.get('nodes'));
-
+let innerModuleEditingInfo: { name: string; parentId: string; id: string } | null = null;
 const styleFormConfig = [
   {
     tabPosition: 'right',
@@ -116,7 +116,36 @@ const init = async () => {
 
   const type = node.value.type || (node.value.items ? 'container' : 'text');
   curFormConfig.value = await propsService.getPropsConfig(type);
-  values.value = node.value;
+  innerModuleEditingInfo = null;
+  if (node.value.comInnerModule) {
+    // 从左侧点击进入子模块配置
+    innerModuleEditingInfo = {
+      name: node.value.comInnerModule,
+      parentId: node.value.parentId,
+      id: String(node.value.id),
+    };
+  }
+
+  if (innerModuleEditingInfo) {
+    const { name } = innerModuleEditingInfo;
+    const curFormConfigItems = curFormConfig.value[0].items;
+    const { length } = curFormConfigItems;
+    for (let i = 0; i < length; i++) {
+      if (curFormConfigItems[i].title !== '属性') {
+        continue;
+      }
+      const len2 = curFormConfigItems[i].items.length;
+      for (let j = 0; j < len2; j++) {
+        if (curFormConfigItems[i].items[j].name === name) {
+          curFormConfigItems[i].items = curFormConfigItems[i].items[j].items;
+          break;
+        }
+      }
+    }
+    values.value = node.value[name] || {};
+  } else {
+    values.value = node.value;
+  }
 };
 
 watchEffect(init);
@@ -128,6 +157,10 @@ onBeforeUnmount(() => {
 
 const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
   try {
+    if (innerModuleEditingInfo !== null) {
+      v._innerModuleEditingInfo = innerModuleEditingInfo;
+      v.id = innerModuleEditingInfo.id;
+    }
     if (!v.id) {
       v.id = values.value.id;
     }

packages/editor/src/services/editor.ts

@@ -519,14 +519,31 @@ class Editor extends BaseService {
 
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
-    const info = this.getNodeInfo(config.id, false);
+    let info = this.getNodeInfo(config.id, false);
 
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 
-    const node = toRaw(info.node);
-
-    let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
+    let node = toRaw(info.node);
+    let tempConfig = config;
+    if (config._innerModuleEditingInfo) {
+      // 如果是组件内嵌模块的属性修改，则找到组件node进行修改（只能是组件内一层的结构 -- 只找了一个parent）
+      const moduleKey = config._innerModuleEditingInfo.name;
+      const parentNode = toRaw(info.parent);
+
+      const nodeSubModule = (node as any)[moduleKey];
+      if (nodeSubModule) {
+        const newObj: Record<string, any> = {};
+        Object.keys(nodeSubModule).forEach((key) => {
+          newObj[key] = (config as any)[key];
+        });
+        (parentNode as any)[moduleKey] = newObj;
+        tempConfig = parentNode!;
+        node = toRaw(info.parent)!;
+        info = this.getNodeInfo(parentNode!.id, true);
+      }
+    }
 
+    let newConfig = await this.toggleFixedPosition(toRaw(tempConfig), node, root);
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key, object: any, source: any) => {
       if (typeof srcValue === 'undefined' && Object.hasOwn(source, key)) {
         return '';
@@ -542,6 +559,14 @@ class Editor extends BaseService {
     });
 
     if (!newConfig.type) throw new Error('配置缺少type值');
+    if (config._innerModuleEditingInfo) {
+      // 如果是组件内嵌模块的属性修改, 不做后面的更新
+      return {
+        oldNode: node,
+        newNode: newConfig,
+        changeRecords,
+      };
+    }
 
     if (newConfig.type === NodeType.ROOT) {
       this.set('root', newConfig as MApp);

vue-components/game/package.json

@@ -0,0 +1,36 @@
+{
+  "version": "0.2.0",
+  "name": "@tmagic/vue-game",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
+    "vue-demi": "^0.14.10"
+  },
+  "peerDependencies": {
+    "@tmagic/core": "workspace:^",
+    "@tmagic/vue-runtime-help": "workspace:^",
+    "@vue/composition-api": ">=1.7.2",
+    "typescript": "catalog:",
+    "vue": ">=2.6.0 || >=3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    },
+
+    "typescript": {
+      "optional": true
+    }
+  }
+}

vue-components/game/src/event.ts

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

vue-components/game/src/formConfig.ts

@@ -0,0 +1,43 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  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 { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
+  {
+    text: '游戏级别',
+    name: 'level',
+    type: 'select',
+    placeholder: '请选择级别',
+    options: [
+      { text: '简单', value: 1 },
+      { text: '困难', value: 2 },
+    ],
+  },
+  {
+    name: 'prizeDialog',
+    type: 'hide',
+    items: [
+      {
+        text: '奖品名称',
+        name: 'prizeName',
+        type: 'data-source-input',
+      },
+    ],
+  },
+]);

vue-components/game/src/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  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 Game from './index.vue';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+export { default as event } from './event';
+
+export default Game;