Merge pull request #2759 from KiGamji/fix-group-colors

fix(ui): use distinct color palette for group tags

web/src/helpers/render.jsx

@@ -602,6 +602,34 @@ export function stringToColor(str) {
   return colors[i];
 }
 
+// High-contrast color palette for group tags (avoids similar blue/teal shades)
+const groupColors = [
+  'red',
+  'orange',
+  'yellow',
+  'lime',
+  'green',
+  'cyan',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'pink',
+  'amber',
+  'grey',
+];
+
+export function groupToColor(str) {
+  // Use a better hash algorithm for more even distribution
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash = hash & hash;
+  }
+  hash = Math.abs(hash);
+  return groupColors[hash % groupColors.length];
+}
+
 // 渲染带有模型图标的标签
 export function renderModelTag(modelName, options = {}) {
   const {
@@ -670,7 +698,7 @@ export function renderGroup(group) {
     <span key={group}>
       {groups.map((group) => (
         <Tag
-          color={tagColors[group] || stringToColor(group)}
+          color={tagColors[group] || groupToColor(group)}
           key={group}
           shape='circle'
           onClick={async (event) => {