From 81638c248ebf1a993f0311c372bb19f02c6bbbc4 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Sat, 6 Sep 2025 11:22:59 +0800
Subject: [PATCH] use one getUserColor func

---
 .../collaboration/components/user-cursors.tsx        | 10 +---------
 .../workflow/collaboration/utils/user-color.ts       | 12 ++++++++++++
 web/app/components/workflow/header/online-users.tsx  | 10 +---------
 3 files changed, 14 insertions(+), 18 deletions(-)
 create mode 100644 web/app/components/workflow/collaboration/utils/user-color.ts

diff --git a/web/app/components/workflow/collaboration/components/user-cursors.tsx b/web/app/components/workflow/collaboration/components/user-cursors.tsx
index 799972b0b8..f0a827306e 100644
--- a/web/app/components/workflow/collaboration/components/user-cursors.tsx
+++ b/web/app/components/workflow/collaboration/components/user-cursors.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { CursorPosition, OnlineUser } from '@/app/components/workflow/collaboration/types'
+import { getUserColor } from '../utils/user-color'
 
 type UserCursorsProps = {
   cursors: Record<string, CursorPosition>
@@ -7,15 +8,6 @@ type UserCursorsProps = {
   onlineUsers: OnlineUser[]
 }
 
-const getUserColor = (id: string) => {
-  const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16']
-  const hash = id.split('').reduce((a, b) => {
-    a = ((a << 5) - a) + b.charCodeAt(0)
-    return a & a
-  }, 0)
-  return colors[Math.abs(hash) % colors.length]
-}
-
 const UserCursors: FC<UserCursorsProps> = ({
   cursors,
   myUserId,
diff --git a/web/app/components/workflow/collaboration/utils/user-color.ts b/web/app/components/workflow/collaboration/utils/user-color.ts
new file mode 100644
index 0000000000..ecdba509b5
--- /dev/null
+++ b/web/app/components/workflow/collaboration/utils/user-color.ts
@@ -0,0 +1,12 @@
+/**
+ * Generate a consistent color for a user based on their ID
+ * Used for cursor colors and avatar backgrounds
+ */
+export const getUserColor = (id: string): string => {
+  const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16']
+  const hash = id.split('').reduce((a, b) => {
+    a = ((a << 5) - a) + b.charCodeAt(0)
+    return a & a
+  }, 0)
+  return colors[Math.abs(hash) % colors.length]
+}
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index a48ae40934..ecccd3cb5b 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -4,15 +4,7 @@ import { useCollaboration } from '../collaboration/hooks/use-collaboration'
 import { useStore } from '../store'
 import cn from '@/utils/classnames'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/solid/arrows'
-
-const getUserColor = (id: string) => {
-  const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16']
-  const hash = id.split('').reduce((a, b) => {
-    a = ((a << 5) - a) + b.charCodeAt(0)
-    return a & a
-  }, 0)
-  return colors[Math.abs(hash) % colors.length]
-}
+import { getUserColor } from '../collaboration/utils/user-color'
 
 const OnlineUsers = () => {
   const appId = useStore(s => s.appId)