From 6ebd5ab1845f98347ca37d5a35d4f1c5064e0697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E5=AE=9A?= <wending.lwd@alibaba-inc.com>
Date: Sun, 27 Apr 2025 15:01:10 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E7=94=A8=E7=9F=A9=E5=BD=A2?=
 =?UTF-8?q?=E6=9D=A5=E5=B1=95=E7=A4=BA=E5=AE=8C=E6=95=B4=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/render/node/nodeCooperate.js     | 65 ++++++++++++++-----
 1 file changed, 48 insertions(+), 17 deletions(-)

diff --git a/simple-mind-map/src/core/render/node/nodeCooperate.js b/simple-mind-map/src/core/render/node/nodeCooperate.js
index 433c1be3..3a30c6c0 100644
--- a/simple-mind-map/src/core/render/node/nodeCooperate.js
+++ b/simple-mind-map/src/core/render/node/nodeCooperate.js
@@ -1,4 +1,4 @@
-import { Circle, G, Text, Image } from '@svgdotjs/svg.js'
+import { Circle, G, Text, Image, Rect } from '@svgdotjs/svg.js'
 import { generateColorByContent } from '../../../utils/index'
 
 // 协同相关功能
@@ -16,23 +16,54 @@ function createTextAvatar(item) {
   const { avatarSize, fontSize } = this.mindMap.opt.cooperateStyle
   const g = new G()
   const str = item.isMore ? item.name : String(item.name)[0]
-  // 圆
-  const circle = new Circle().size(avatarSize, avatarSize)
-  circle.fill({
-    color: item.color || generateColorByContent(str)
-  })
-  // 文本
-  const text = new Text()
-    .text(str)
-    .fill({
-      color: '#fff'
+  
+  if (item.useRect) {
+    // 计算文本宽度
+    const textWidth = str.length * fontSize * 0.6 // 估算文本宽度
+    const rectWidth = Math.max(avatarSize, textWidth + fontSize) // 确保最小宽度为avatarSize
+    const rectHeight = avatarSize
+    
+    // 创建矩形
+    const rect = new Rect()
+      .size(rectWidth, rectHeight)
+      .radius(rectHeight / 2) // 圆角矩形
+      .fill({
+        color: item.color || generateColorByContent(str)
+      })
+    
+    // 文本
+    const text = new Text()
+      .text(str)
+      .fill({
+        color: '#fff'
+      })
+      .css({
+        'font-size': fontSize + 'px'
+      })
+      .dx(-textWidth / 2)
+      .dy((rectHeight - fontSize) / 2)
+    
+    g.add(rect).add(text)
+  } else {
+    // 原有的圆形显示逻辑
+    const circle = new Circle().size(avatarSize, avatarSize)
+    circle.fill({
+      color: item.color || generateColorByContent(str)
     })
-    .css({
-      'font-size': fontSize + 'px'
-    })
-    .dx(-fontSize / 2)
-    .dy((avatarSize - fontSize) / 2)
-  g.add(circle).add(text)
+    // 文本
+    const text = new Text()
+      .text(str)
+      .fill({
+        color: '#fff'
+      })
+      .css({
+        'font-size': fontSize + 'px'
+      })
+      .dx(-fontSize / 2)
+      .dy((avatarSize - fontSize) / 2)
+    g.add(circle).add(text)
+  }
+  
   return g
 }
 

From 01f7be4c7944016bf76669dde2c9e65f56294cb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E5=AE=9A?= <wending.lwd@alibaba-inc.com>
Date: Sun, 27 Apr 2025 15:30:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E5=9E=82=E7=9B=B4=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/render/node/nodeCooperate.js          | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/simple-mind-map/src/core/render/node/nodeCooperate.js b/simple-mind-map/src/core/render/node/nodeCooperate.js
index 3a30c6c0..3fb89f6f 100644
--- a/simple-mind-map/src/core/render/node/nodeCooperate.js
+++ b/simple-mind-map/src/core/render/node/nodeCooperate.js
@@ -15,12 +15,14 @@ function createUserListNode() {
 function createTextAvatar(item) {
   const { avatarSize, fontSize } = this.mindMap.opt.cooperateStyle
   const g = new G()
-  const str = item.isMore ? item.name : String(item.name)[0]
+  let str = item.isMore ? item.name : String(item.name)[0]
   
   if (item.useRect) {
+    str = String(item.name)
     // 计算文本宽度
     const textWidth = str.length * fontSize * 0.6 // 估算文本宽度
-    const rectWidth = Math.max(avatarSize, textWidth + fontSize) // 确保最小宽度为avatarSize
+    const padding = fontSize // 左右边距
+    const rectWidth = Math.max(avatarSize, textWidth + padding * 2) // 确保最小宽度为avatarSize，并添加左右边距
     const rectHeight = avatarSize
     
     // 创建矩形
@@ -38,10 +40,12 @@ function createTextAvatar(item) {
         color: '#fff'
       })
       .css({
-        'font-size': fontSize + 'px'
+        'font-size': fontSize + 'px',
+        'text-anchor': 'middle',
+        'dominant-baseline': 'central'
       })
-      .dx(-textWidth / 2)
-      .dy((rectHeight - fontSize) / 2)
+      .attr('x', rectWidth / 2)
+      .attr('y', rectHeight / 2)
     
     g.add(rect).add(text)
   } else {