feat: props 多人协作同步

Author: ztygod

packages/canvas/container/src/CanvasContainer.vue

@@ -474,6 +474,7 @@ export default {
           moveDownSharedNode,
           moveUpSharedNode,
           updateStyleNode,
+          updatePropsNode,
           remoteStates
         } = useCollabSchema({
           roomId: 'schema-yjs',
@@ -487,6 +488,7 @@ export default {
           moveDownSharedNode,
           moveUpSharedNode,
           updateStyleNode,
+          updatePropsNode,
           remoteStates
         })
 

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

@@ -78,6 +78,11 @@ export function useCollabSchema(options: UseCollabSchemaOptions) {
     schemaModel.updatedNodeCss(styleStr, nodeId, className)
   }
 
+  // settings， 修改节点属性
+  const updatePropsNode = (newProps: Record<any, any>, nodeId: string, overwrite: boolean) => {
+    schemaModel.updatedNodeProps(newProps, nodeId, overwrite)
+  }
+
   // 用户信息同步 方法
   const updateUserSelection = (selectedNode: any) => {
     updateLocalStateField('selection', selectedNode)
@@ -111,6 +116,7 @@ export function useCollabSchema(options: UseCollabSchemaOptions) {
     deleteSharedNode,
     moveUpSharedNode,
     moveDownSharedNode,
-    updateStyleNode
+    updateStyleNode,
+    updatePropsNode
   }
 }

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

@@ -70,7 +70,12 @@ export class NodeSchemaModel {
 
   // canvas 内，更新节点样式
   public updatedNodeCss(strStyle: string, nodeId: string, className: string) {
-    this.operationHandler.updatedStyle(strStyle, nodeId, className)
+    this.operationHandler.updatedStyle({ strStyle, nodeId, className })
+  }
+
+  // settings，更新节点属性
+  public updatedNodeProps(newProps: Record<any, any>, nodeId: string, overwrite: boolean) {
+    this.operationHandler.updatedProps({ newProps, nodeId, overwrite })
   }
 
   // insert 操作

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

@@ -1,4 +1,12 @@
-import type { DeleteOperation, MoveOperation, Node, NodeOperation, PageSchema } from '../type'
+import type {
+  DeleteOperation,
+  MoveOperation,
+  Node,
+  NodeOperation,
+  PageSchema,
+  UpdatePropsOperation,
+  UpdateStyleOperation
+} from '../type'
 import * as Y from 'yjs'
 import { toYjs } from '../utils'
 import { DocManager } from '../services/docManager'
@@ -154,7 +162,8 @@ export class OperationHandler {
   }
 
   // 修改节点样式
-  public updatedStyle(strStyle: string, nodeId: string, className: string) {
+  public updatedStyle(operation: UpdateStyleOperation) {
+    const { strStyle, nodeId, className } = operation
     // 添加样式
     this.yMap.set('css', strStyle)
 
@@ -165,6 +174,46 @@ export class OperationHandler {
     Object.assign(this.rootSchema, { css: strStyle })
   }
 
+  // 修改节点属性
+  public updatedProps(operation: UpdatePropsOperation) {
+    const { newProps, nodeId, overwrite } = operation
+    let node = this.getYNode(nodeId)
+
+    if (!node) {
+      node = this.yMap
+    }
+
+    const yNewProps = new Y.Map<any>() // 新的 props
+    const propsMap = node.get('props') as Y.Map<any> // 旧的 props
+
+    if (overwrite) {
+      // 覆盖模式
+      for (const [k, v] of Object.entries(newProps || {})) {
+        yNewProps.set(k, v)
+      }
+    } else {
+      // 先复制旧的
+      if (propsMap) {
+        propsMap.forEach((val, key) => {
+          yNewProps.set(key, val)
+        })
+      }
+
+      // 再合并新的
+      for (const [k, v] of Object.entries(newProps) || {}) {
+        yNewProps.set(k, v)
+      }
+    }
+
+    // 元数据，用于补丁操作
+    const meta = new Y.Map<any>()
+    meta.set('nodeId', nodeId)
+    meta.set('overwrite', overwrite)
+
+    yNewProps.set('meta', meta)
+    node.set('props', yNewProps)
+  }
+
   // 重建整个映射（刷新后可以手动调用）
   public rebuildYNodeMap(rootSchema: PageSchema) {
     this.yNodeMap.clear()

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

@@ -24,6 +24,7 @@ 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> }
 
 /**
  * SchemaManager 类，负责管理 Yjs 中的 NodeSchema 文档
@@ -278,6 +279,20 @@ export class SchemaManager {
                   css: newCss
                 })
               }
+            } else if (key === 'props') {
+              // 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 不被污染
+                patches.push({
+                  type: 'props-update',
+                  path: event.path,
+                  props: newProps,
+                  meta
+                })
+              }
             }
           })
         }
@@ -404,6 +419,18 @@ export class SchemaManager {
           updateSchema({ css: strStyle })
           break
         }
+        case 'props-update': {
+          const { props: newProps, meta } = patch
+          const { nodeId, overwrite } = meta
+
+          useCanvas().operateNode({
+            type: 'changeProps',
+            id: nodeId || '',
+            value: { props: newProps },
+            option: { overwrite }
+          })
+          break
+        }
         default:
           break
       }

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

@@ -90,6 +90,18 @@ export interface MoveOperation {
   direction: 'up' | 'down'
 }
 
+export interface UpdateStyleOperation {
+  strStyle: string
+  nodeId: string
+  className: string
+}
+
+export interface UpdatePropsOperation {
+  newProps: Record<string, string>
+  nodeId: string
+  overwrite: boolean
+}
+
 export interface UserAwareness {
   id?: string | number
   name: string

packages/settings/props/src/composable/useProperties.ts

@@ -13,7 +13,7 @@
 /* metaService: engine.service.properties.useProperties */
 import { toRaw, shallowReactive, ref } from 'vue'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { useCanvas, useMaterial, useTranslate } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useMaterial, useTranslate, useRealtimeCollab } from '@opentiny/tiny-engine-meta-register'
 import type { Property, Schema } from '@opentiny/tiny-engine-plugin-materials'
 
 const { COMPONENT_NAME } = constants
@@ -142,6 +142,9 @@ const setProp = (name: string, value: unknown, type?: unknown) => {
     option: { overwrite }
   })
 
+  // 多人协作，属性同步
+  useRealtimeCollab().updatePropsNode(newProps, properties.schema.id || '', overwrite)
+
   propsUpdateKey.value++
 }