feat: methods sync

Author: ztygod

packages/canvas/container/src/CanvasContainer.vue

@@ -475,6 +475,7 @@ export default {
           moveUpSharedNode,
           updateStyleNode,
           updatePropsNode,
+          updateMethodNode,
           remoteStates
         } = useCollabSchema({
           roomId: 'schema-yjs',
@@ -489,6 +490,7 @@ export default {
           moveUpSharedNode,
           updateStyleNode,
           updatePropsNode,
+          updateMethodNode,
           remoteStates
         })
 

packages/multi-person-collaboration/src/composables/useCollabSchema.ts

@@ -1,7 +1,14 @@
 import { useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { onUnmounted, toRaw } from 'vue'
 import { SchemaManager } from '../services/schemaManager'
-import { POSITION, type Node, type PositionType, type RootNode, type UserAwareness } from '../type'
+import {
+  POSITION,
+  type Node,
+  type PositionType,
+  type RootNode,
+  type UpdateMethodsOperation,
+  type UserAwareness
+} from '../type'
 import { useYjs } from './useYjs'
 import { PORT } from '../config'
 import { useAwareness } from './useAwareness'
@@ -79,10 +86,15 @@ export function useCollabSchema(options: UseCollabSchemaOptions) {
   }
 
   // settings， 修改节点属性
-  const updatePropsNode = (newProps: Record<any, any>, nodeId: string, overwrite: boolean) => {
+  const updatePropsNode = (newProps: Record<string, any>, nodeId: string, overwrite: boolean) => {
     schemaModel.updatedNodeProps(newProps, nodeId, overwrite)
   }
 
+  // 根节点保存 methods
+  const updateMethodNode = (operation: UpdateMethodsOperation) => {
+    schemaModel.updatedNodeMethods(operation)
+  }
+
   // 用户信息同步 方法
   const updateUserSelection = (selectedNode: any) => {
     updateLocalStateField('selection', selectedNode)
@@ -117,6 +129,7 @@ export function useCollabSchema(options: UseCollabSchemaOptions) {
     moveUpSharedNode,
     moveDownSharedNode,
     updateStyleNode,
-    updatePropsNode
+    updatePropsNode,
+    updateMethodNode
   }
 }

packages/multi-person-collaboration/src/models/NodeSchemaModel.ts

@@ -1,6 +1,14 @@
 import * as Y from 'yjs'
 import { useCanvas } from '@opentiny/tiny-engine-meta-register'
-import { type NodeSchema, type Node, type PositionType, POSITION, type InsertOptions, type PageSchema } from '../type'
+import {
+  type NodeSchema,
+  type Node,
+  type PositionType,
+  POSITION,
+  type InsertOptions,
+  type PageSchema,
+  type UpdateMethodsOperation
+} from '../type'
 import { OperationHandler } from '../operation/operationHandler '
 
 /**
@@ -78,6 +86,11 @@ export class NodeSchemaModel {
     this.operationHandler.updatedProps({ newProps, nodeId, overwrite })
   }
 
+  // methods， 添加或者更新事件
+  public updatedNodeMethods(operation: UpdateMethodsOperation) {
+    this.operationHandler.updatedMethods(operation)
+  }
+
   // insert 操作
   private insert(parentId: string, newNodeData: Node, position: string, referTargetNodeId?: string) {
     this.operationHandler.insert({

packages/multi-person-collaboration/src/operation/operationHandler .ts

@@ -4,6 +4,7 @@ import type {
   Node,
   NodeOperation,
   PageSchema,
+  UpdateMethodsOperation,
   UpdatePropsOperation,
   UpdateStyleOperation
 } from '../type'
@@ -214,6 +215,26 @@ export class OperationHandler {
     node.set('props', yNewProps)
   }
 
+  // 添加 或 更新 methods
+  public updatedMethods(operation: UpdateMethodsOperation) {
+    const methods = operation.methods
+
+    if (operation.type === 'root') {
+      // 根节点直接设置 methods 不需要 id
+      this.yMap.set('methods', methods)
+    } else if (operation.type === 'node') {
+      const { nodeId, methodsName, methods } = operation
+      const node = this.getYNode(nodeId)
+      if (node) {
+        const nodeProps = node.get('props')
+        nodeProps.set(methodsName, {
+          methods,
+          meta: { nodeId }
+        })
+      }
+    }
+  }
+
   // 重建整个映射（刷新后可以手动调用）
   public rebuildYNodeMap(rootSchema: PageSchema) {
     this.yNodeMap.clear()

packages/multi-person-collaboration/src/services/schemaManager.ts

@@ -3,7 +3,7 @@ import * as Y from 'yjs'
 import { NodeSchemaModel } from '../models/NodeSchemaModel'
 import { DocManager } from './docManager'
 import type { RootNode } from '../type'
-import { fromYjs, toYjs } from '../utils'
+import { fromYjs, sanitizeSchema, toYjs } from '../utils'
 import { toRaw } from 'vue'
 import type { YjsProvider } from './providerManager'
 import { IGNORE_OBSERVER_ORIGIN, ROOT_SCHEMA_MAP } from '../config'
@@ -25,6 +25,14 @@ type DiffPatch =
   | { type: 'style-update'; path: (string | number)[]; css: string }
   | { type: 'class-add'; path: (string | number)[]; nodeId: string; className: string }
   | { type: 'props-update'; path: (string | number)[]; props: Record<any, any>; meta: Record<any, any> }
+  | { type: 'methods-add-root'; path: (string | number)[]; methods: Record<string, any> }
+  | {
+      type: 'methods-add-node'
+      path: (string | number)[]
+      methods: Record<string, any>
+      methodsName: string
+      nodeId: string
+    }
 
 /**
  * SchemaManager 类，负责管理 Yjs 中的 NodeSchema 文档
@@ -90,8 +98,14 @@ export class SchemaManager {
             console.log(`[${docName}] Initial sync complete. Applying full schema to UI.`)
 
             // 安全时间点，用 Yjs 的权威数据完全覆盖 UI
-            const remoteSchema = fromYjs(yMap)
-            useCanvas().importSchema(remoteSchema)
+            const rawRemoteSchema = fromYjs(yMap)
+
+            // 净化 schema
+            const INTERNAL_YJS_KEYS = ['meta'] // 定义需要过滤的键
+            const cleanSchema = sanitizeSchema(rawRemoteSchema, INTERNAL_YJS_KEYS)
+
+            // 使用干净的 schema 来覆盖 UI
+            useCanvas().importSchema(cleanSchema)
 
             // 标记初始同步已完成
             this.initialSyncDone.set(docName, true)
@@ -102,7 +116,7 @@ export class SchemaManager {
       // 冷启动：第一次启动，远端无数据 -> 用本地初始化
       if (yMap.size === 0) {
         ydoc.transact(() => {
-          toYjs(yMap!, pageSchema)
+          toYjs(yMap!, toRaw(useCanvas().getPageSchema()))
         }, IGNORE_OBSERVER_ORIGIN)
       }
     } else {
@@ -191,7 +205,6 @@ export class SchemaManager {
       | { yRoot: Y.Map<any>; cb: (events: Y.YEvent<any>[], tr: Y.Transaction) => void }
       | undefined
 
-    // 判断时也使用正确的大小写
     if (prev?.yRoot && prev?.cb) {
       try {
         prev.yRoot.unobserveDeep(prev.cb)
@@ -239,6 +252,7 @@ export class SchemaManager {
         // Map 变更
         if (event.target instanceof Y.Map) {
           const yMapNode = event.target
+          const regex = /^on[A-Z][A-Za-z]*$/
 
           event.changes.keys.forEach((change, key) => {
             // 软删除
@@ -283,16 +297,37 @@ export class SchemaManager {
               // Props 属性更新同步逻辑
               if (change.action === 'add' || change.action === 'update') {
                 const newProps = yMapNode.get('props').toJSON()
-                const meta = newProps.meta // meta 包含操作的 nodeId 和 overwrite
-
-                delete newProps.meta // 删除元数据，保持 props 不被污染
+                const { meta, ...cleanProps } = newProps
                 patches.push({
                   type: 'props-update',
                   path: event.path,
-                  props: newProps,
+                  props: cleanProps,
                   meta
                 })
               }
+            } else if (key === 'methods') {
+              // 根节点添加 事件函数
+              if (change.action === 'add' || change.action === 'update') {
+                const newMethods = yMapNode.get('methods')
+                patches.push({
+                  type: 'methods-add-root',
+                  path: event.path,
+                  methods: newMethods
+                })
+              }
+            } else if (regex.test(key)) {
+              // 先判断非根节点 添加时间函数
+              if (change.action === 'add' || change.action === 'update') {
+                const newObj = yMapNode.get(key)
+                const { meta, methods } = newObj
+                patches.push({
+                  type: 'methods-add-node',
+                  path: event.path,
+                  methods,
+                  methodsName: key,
+                  nodeId: meta.nodeId
+                })
+              }
             }
           })
         }
@@ -413,10 +448,9 @@ export class SchemaManager {
           break
         }
         case 'style-update': {
-          const { updateSchema } = useCanvas()
           const strStyle = patch.css
 
-          updateSchema({ css: strStyle })
+          useCanvas().updateSchema({ css: strStyle })
           break
         }
         case 'props-update': {
@@ -431,6 +465,19 @@ export class SchemaManager {
           })
           break
         }
+        case 'methods-add-root': {
+          const { methods } = patch
+          useCanvas().updateSchema({ methods })
+          break
+        }
+        case 'methods-add-node': {
+          const { methods, methodsName, nodeId } = patch
+          const targetNode = useCanvas().getNode(nodeId, false)
+
+          targetNode[methodsName] = methods
+          useMessage().publish({ topic: 'schemaChange', data: {} })
+          break
+        }
         default:
           break
       }

packages/multi-person-collaboration/src/type.ts

@@ -97,11 +97,15 @@ export interface UpdateStyleOperation {
 }
 
 export interface UpdatePropsOperation {
-  newProps: Record<string, string>
+  newProps: Record<string, any>
   nodeId: string
   overwrite: boolean
 }
 
+export type UpdateMethodsOperation =
+  | { type: 'root'; methods: Record<string, any> }
+  | { type: 'node'; nodeId: string; methodsName: string; methods: Record<string, any>; params: any }
+
 export interface UserAwareness {
   id?: string | number
   name: string

packages/multi-person-collaboration/src/utils/index.ts

@@ -84,3 +84,37 @@ export const getValueByPath = (obj: any, path: (string | number)[]): any => {
     return acc[key]
   }, obj)
 }
+
+/**
+ * 递归地净化一个从 Yjs 转换而来的 schema 对象。
+ * 它会移除所有内部使用的键（如事件总线、元数据等）。
+ *
+ * @param schema - 从 fromYjs() 得到的原始 schema 对象。
+ * @param keysToFilter - 一个包含需要被移除的键名的数组。
+ * @returns 一个只包含纯 UI 数据的、干净的 schema 对象。
+ */
+export function sanitizeSchema(schema: any, keysToFilter: string[]): any {
+  // 如果输入不是对象或为 null，直接返回
+  if (typeof schema !== 'object' || schema === null) {
+    return schema
+  }
+
+  // 如果是数组，则递归地净化数组中的每一个元素
+  if (Array.isArray(schema)) {
+    return schema.map((item) => sanitizeSchema(item, keysToFilter))
+  }
+
+  // 如果是对象，则创建一个新对象，并过滤掉不需要的键
+  const sanitizedObject: { [key: string]: any } = {}
+  for (const key in schema) {
+    // 检查当前键是否在过滤列表中
+    if (keysToFilter.includes(key)) {
+      continue // 跳过这个内部键
+    }
+
+    // 递归地净化子属性
+    sanitizedObject[key] = sanitizeSchema(schema[key], keysToFilter)
+  }
+
+  return sanitizedObject
+}

packages/plugins/script/src/js/method.ts

@@ -17,7 +17,7 @@ import { string2Ast, ast2String, insertName, formatString } from '@opentiny/tiny
 import { constants } from '@opentiny/tiny-engine-utils'
 import { lint } from '@opentiny/tiny-engine-common/js/linter'
 import { isFunction } from '@opentiny/vue-renderless/grid/static'
-import { useCollabMonaco } from '@opentiny/tiny-engine-multi-person-collaboration'
+import { useRealtimeCollab } from '@opentiny/tiny-engine-meta-register'
 
 const { SCHEMA_DATA_TYPE } = constants
 
@@ -90,6 +90,12 @@ export const saveMethod = ({ name, content }) => {
   }
 
   useCanvas().updateSchema({ methods: { ...methods, [name]: methodItem } })
+
+  // 多人协作，同步 methods
+  useRealtimeCollab().updateMethodNode({
+    type: 'root',
+    methods: { ...methods, [name]: methodItem }
+  })
 }
 
 const saveMethods = async () => {
@@ -231,19 +237,6 @@ export default ({ emit }) => {
       state.script = getScriptString()
       monaco.value?.focus()
       window.dispatchEvent(new Event('resize'))
-      const currentUser = {
-        id: 2,
-        name: 'Bob',
-        color: '#ff0000ff',
-        avatarUrl: 'https://i.pravatar.cc/150?img=2'
-      }
-      // 代码的协同编辑
-      useCollabMonaco({
-        currentUser,
-        editorRef: monaco,
-        roomId: 'page-js-Yjs',
-        fieldName: 'page-js'
-      })
     })
   })
 

packages/settings/events/src/components/BindEventsDialog.vue

@@ -43,9 +43,10 @@ import {
   META_APP
 } from '@opentiny/tiny-engine-meta-register'
 import { Button, DialogBox, TinyAlert } from '@opentiny/vue'
-import { nextTick, provide, reactive, ref } from 'vue'
+import { nextTick, provide, reactive, ref, toRaw } from 'vue'
 import MagicString from 'magic-string'
 import meta from '../../meta'
+import { useRealtimeCollab } from '@opentiny/tiny-engine-meta-register'
 
 const dialogVisible = ref(false)
 
@@ -125,6 +126,14 @@ export default {
       nodeProps[eventName].value = `this.${name}`
 
       useHistory().addHistory()
+
+      // 多人协作， 同步methods
+      useRealtimeCollab().updateMethodNode({
+        type: 'node',
+        nodeId: pageState?.currentSchema?.id,
+        methodsName: eventName,
+        methods: toRaw(nodeProps[eventName])
+      })
     }
 
     const resetTipError = () => {