[FEATURE] Add color picker for relationships

src/components/EditorCanvas/Canvas.jsx

@@ -8,6 +8,7 @@ import {
   gridSize,
   gridCircleRadius,
   minAreaSize,
+  defaultBlue,
 } from "../../data/constants";
 import { Toast } from "@douyinfe/semi-ui";
 import Table from "./Table";
@@ -624,6 +625,7 @@ export default function Canvas() {
       deleteConstraint: Constraint.NONE,
       name: `fk_${startTableName}_${startField.name}_${endTableName}`,
       id: nanoid(),
+      color: defaultBlue
     };
     delete newRelationship.startX;
     delete newRelationship.startY;

src/components/EditorCanvas/Relationship.jsx

@@ -1,5 +1,10 @@
 import { useMemo, useRef, useState, useEffect } from "react";
-import { Cardinality, ObjectType, Tab } from "../../data/constants";
+import {
+  Cardinality,
+  defaultBlue,
+  ObjectType,
+  Tab,
+} from "../../data/constants";
 import { calcPath } from "../../utils/calcPath";
 import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
 import { useTranslation } from "react-i18next";
@@ -127,6 +132,7 @@ export default function Relationship({ data }) {
           className="relationship-path"
           fill="none"
           cursor="pointer"
+          style={{ stroke: data.color ?? defaultBlue }}
         />
         {settings.showRelationshipLabels && (
           <text
@@ -147,11 +153,13 @@ export default function Relationship({ data }) {
               x={cardinalityStartX}
               y={cardinalityStartY}
               text={cardinalityStart}
+              color={data.color}
             />
             <CardinalityLabel
               x={cardinalityEndX}
               y={cardinalityEndY}
               text={cardinalityEnd}
+              color={data.color}
             />
           </>
         )}
@@ -181,7 +189,7 @@ export default function Relationship({ data }) {
   );
 }
 
-function CardinalityLabel({ x, y, text, r = 12, padding = 14 }) {
+function CardinalityLabel({ x, y, text, r = 12, padding = 14 , color = "grey"}) {
   const [textWidth, setTextWidth] = useState(0);
   const textRef = useRef(null);
 
@@ -201,7 +209,7 @@ function CardinalityLabel({ x, y, text, r = 12, padding = 14 }) {
         ry={r}
         width={textWidth + padding}
         height={r * 2}
-        fill="grey"
+        fill={color}
         className="group-hover:fill-sky-600"
       />
       <text

src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx

@@ -17,11 +17,13 @@ import {
   Constraint,
   Action,
   ObjectType,
+  defaultBlue,
 } from "../../../data/constants";
 import { useDiagram, useLayout, useUndoRedo } from "../../../hooks";
 import i18n from "../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
+import ColorPicker from "../ColorPicker.jsx";
 
 const columns = [
   {
@@ -40,6 +42,8 @@ export default function RelationshipInfo({ data }) {
   const { t } = useTranslation();
   const { layout } = useLayout();
   const [editField, setEditField] = useState({});
+  const initialColorRef = useRef(data.color ?? defaultBlue);
+
 
   const relValues = useMemo(() => {
     const { fields: startTableFields, name: startTableName } = tables.find(
@@ -141,6 +145,41 @@ export default function RelationshipInfo({ data }) {
     updateRelationship(data.id, { [undoKey]: value });
   };
 
+  const handleColorPick = (color) => {
+    setUndoStack((prev) => {
+      let undoColor = initialColorRef.current;
+      const lastColorChange = prev.findLast(
+        (e) =>
+          e.element === ObjectType.RELATIONSHIP &&
+          e.rid === data.id &&
+          e.action === Action.EDIT &&
+          e.redo?.color,
+      );
+      if (lastColorChange) {
+        undoColor = lastColorChange.redo.color;
+      }
+
+      if (color === undoColor) return prev;
+
+      const newStack = [
+        ...prev,
+        {
+          action: Action.EDIT,
+          element: ObjectType.RELATIONSHIP,
+          rid: data.id,
+          undo: { color: undoColor },
+          redo: { color: color },
+          message: t("edit_relationship", {
+            refName: data.name,
+            extra: "[color]",
+          }),
+        },
+      ];
+      return newStack;
+    });
+    setRedoStack([]);
+  };
+
   return (
     <>
       <div className="flex items-center mb-2.5">
@@ -173,6 +212,15 @@ export default function RelationshipInfo({ data }) {
             setRedoStack([]);
           }}
         />
+        <div className="ms-2">
+          <ColorPicker
+          usePopover={true}
+          readOnly={layout.readOnly}
+          value={data.color ?? defaultBlue}
+          onChange={(color) => updateRelationship(data.id, { color })}
+          onColorPick={(color) => handleColorPick(color)}
+          />
+        </div>
       </div>
       <div className="flex justify-between items-center mb-3">
         <div className="me-3">