feat: 添加风格面板内容

apps/designer/src/pages/flow/components/Content/StyleConfig.tsx

@@ -0,0 +1,203 @@
+import { Row, Col } from "antd";
+import React from "react";
+
+const themeData = [
+  {
+    id: 1,
+    img: require("@/assets/image/theme/1.svg").default,
+    pageStyle: {
+      
+    },
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 2,
+    img: require("@/assets/image/theme/2.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 3,
+    img: require("@/assets/image/theme/3.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 4,
+    img: require("@/assets/image/theme/4.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 5,
+    img: require("@/assets/image/theme/5.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 6,
+    img: require("@/assets/image/theme/6.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 7,
+    img: require("@/assets/image/theme/7.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 8,
+    img: require("@/assets/image/theme/8.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 9,
+    img: require("@/assets/image/theme/9.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 10,
+    img: require("@/assets/image/theme/10.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 11,
+    img: require("@/assets/image/theme/11.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 12,
+    img: require("@/assets/image/theme/12.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 13,
+    img: require("@/assets/image/theme/13.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 14,
+    img: require("@/assets/image/theme/14.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 15,
+    img: require("@/assets/image/theme/15.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 16,
+    img: require("@/assets/image/theme/16.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 17,
+    img: require("@/assets/image/theme/17.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 18,
+    img: require("@/assets/image/theme/18.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 19,
+    img: require("@/assets/image/theme/19.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 20,
+    img: require("@/assets/image/theme/20.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 21,
+    img: require("@/assets/image/theme/21.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 22,
+    img: require("@/assets/image/theme/22.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 23,
+    img: require("@/assets/image/theme/23.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 24,
+    img: require("@/assets/image/theme/24.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 25,
+    img: require("@/assets/image/theme/25.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+  {
+    id: 26,
+    img: require("@/assets/image/theme/26.svg").default,
+    pageStyle: {},
+    nodeStyle: {},
+    edgeStyle: {},
+  },
+];
+
+export default function StyleConfig() {
+  return (
+    <Row justify="space-between" gutter={[8, 16]} className="px-16px">
+      {themeData.map((item) => (
+        <Col key={item.id} xs={12} sm={12} md={12} lg={12} xl={12} xxl={12}>
+          <div className="w-86px h-86px rounded-8px border border-solid border-1px border-#d9e2ed hover:border-#067bef active:border-#067bef cursor-pointer">
+            <img className="w-86px h-86px" src={item.img} />
+          </div>
+        </Col>
+      ))}
+    </Row>
+  );
+}

apps/designer/src/pages/flow/components/Content/index.tsx

@@ -8,6 +8,7 @@ import Libary from "../Libary";
 import { useModel } from "umi";
 import { BaseEdge } from '@/components/Edge';
 import { edgeMenu } from "@/utils/contentMenu";
+import StyleConfig from "./StyleConfig";
 export default function Content() {
   const stageRef = useRef<HTMLDivElement | null>(null);
   const { initGraph } = useModel("graphModel");
@@ -142,7 +143,7 @@ export default function Content() {
             {
               key: "2",
               label: "风格",
-              children: <div>风格面板</div>,
+              children: <StyleConfig/>,
             },
           ]}
         />

package.json

@@ -35,6 +35,7 @@
     "ahooks": "^3.8.1",
     "antd": "^5.20.5",
     "axios": "^1.7.7",
+    "codemirror": "^6.0.1",
     "insert-css": "^2.0.0",
     "lodash-es": "^4.17.21",
     "umi": "^4.3.18",

pnpm-lock.yaml

@@ -59,6 +59,9 @@ importers:
       axios:
         specifier: ^1.7.7
         version: 1.7.7
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.1)
       insert-css:
         specifier: ^2.0.0
         version: 2.0.0
@@ -1280,6 +1283,68 @@ packages:
       reactcss: 1.2.3(react@18.3.1)
       tinycolor2: 1.6.0
 
+  /@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.1):
+    resolution: {integrity: sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@codemirror/commands@6.6.2:
+    resolution: {integrity: sha512-Fq7eWOl1Rcbrfn6jD8FPCj9Auaxdm5nIK5RYOeW7ughnd/rY5AmPg6b+CfsG39ZHdwiwe8lde3q8uR7CF5S0yQ==}
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@codemirror/language@6.10.3:
+    resolution: {integrity: sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+    dev: false
+
+  /@codemirror/lint@6.8.2:
+    resolution: {integrity: sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      crelt: 1.0.6
+    dev: false
+
+  /@codemirror/search@6.5.6:
+    resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      crelt: 1.0.6
+    dev: false
+
+  /@codemirror/state@6.4.1:
+    resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
+    dev: false
+
+  /@codemirror/view@6.34.1:
+    resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+    dev: false
+
   /@cspotcode/source-map-support@0.8.1:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -2652,6 +2717,22 @@ packages:
       '@jridgewell/sourcemap-codec': 1.5.0
     dev: true
 
+  /@lezer/common@1.2.1:
+    resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
+    dev: false
+
+  /@lezer/highlight@1.2.1:
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+    dependencies:
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@lezer/lr@1.4.2:
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+    dependencies:
+      '@lezer/common': 1.2.1
+    dev: false
+
   /@loadable/component@5.15.2(react@18.3.1):
     resolution: {integrity: sha512-ryFAZOX5P2vFkUdzaAtTG88IGnr9qxSdvLRvJySXcUA4B4xVWurUNADu3AnKPksxOZajljqTrDEDcYjeL4lvLw==}
     engines: {node: '>=8'}
@@ -6081,6 +6162,20 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
+  /codemirror@6.0.1(@lezer/common@1.2.1):
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.1)
+      '@codemirror/commands': 6.6.2
+      '@codemirror/language': 6.10.3
+      '@codemirror/lint': 6.8.2
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+    transitivePeerDependencies:
+      - '@lezer/common'
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -6301,6 +6396,10 @@ packages:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
     dev: true
 
+  /crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+    dev: false
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -13088,6 +13187,10 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  /style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+    dev: false
+
   /style-search@0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
     dev: false
@@ -14090,6 +14193,10 @@ packages:
     resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==}
     dev: false
 
+  /w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+    dev: false
+
   /walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
     dependencies: