init: 初始化项目

apps/designer/.gitignore

@@ -0,0 +1,9 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/dist
+.swc

apps/designer/.umirc.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "umi";
+
+export default defineConfig({
+  favicons: [
+    '/favicon.ico'
+  ],
+  styles: [
+    '//at.alicdn.com/t/c/font_4676747_6irkb8qcd4b.css'
+  ],
+  plugins: [
+    require.resolve('@umijs/plugins/dist/unocss')
+  ],
+  unocss: {
+    watch: ['src/**/*.tsx']
+  },
+  routes: [
+    { path: "/", component: "home" },
+    { path: "/flow", component: "flow" },
+  ],
+  npmClient: 'pnpm',
+});

apps/designer/package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "author": "liaojiaxing <851982890@qq.com>",
+  "scripts": {
+    "dev": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi setup",
+    "setup": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@antv/x6": "^2.18.1",
+    "@repo/ui": "workspace:*",
+    "@unocss/cli": "^0.62.3",
+    "umi": "^4.3.18",
+    "unocss": "^0.62.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^5.0.3"
+  }
+}

apps/designer/src/assets/icon/icon-bpmn.svg

@@ -0,0 +1,63 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_25183_49287)">
+<g filter="url(#filter0_d_25183_49287)">
+<path d="M4.25124 10.0944C4.25058 6.30569 7.32136 3.23438 11.11 3.23438H24.4544C25.9268 3.23438 27.3602 3.70809 28.5427 4.58551L32.973 7.87274C34.717 9.1668 35.7455 11.2101 35.7459 13.3816L35.7487 29.6476C35.7494 33.4363 32.6786 36.5076 28.8899 36.5076H11.1158C7.32715 36.5076 4.2553 33.4363 4.25464 29.6476L4.25124 10.0944Z" fill="white" stroke="#E9EDF2" stroke-width="0.5"/>
+<path d="M34.6341 11.1472L26.2154 4.34375L11.0346 4.34375C8.08958 4.34375 5.70256 6.73119 5.70308 9.67623L5.70523 22.0327L34.636 22.0327L34.6341 11.1472Z" fill="url(#paint0_linear_25183_49287)" fill-opacity="0.7"/>
+<path d="M34.5706 11.8268L26.1518 4.50003L7 4.5L7.00568 33.1566L29.2424 33.1566C32.1875 33.1566 34.5746 30.7691 34.5739 27.824L34.5706 11.8268Z" fill="url(#paint1_linear_25183_49287)" fill-opacity="0.7"/>
+<g filter="url(#filter1_d_25183_49287)">
+<path d="M28.1618 5.2676L34.634 11.1472L34.6344 13.1883C34.0054 11.5128 32.5054 10.3193 30.7316 10.0829L30.1811 10.0096C29.147 9.87177 28.2673 9.18735 27.8795 8.21884L27.4842 7.23153C26.8548 5.65965 25.4213 4.55364 23.7412 4.34375L25.771 4.34375C26.655 4.34375 27.5074 4.67312 28.1618 5.2676Z" fill="white"/>
+</g>
+</g>
+<g filter="url(#filter2_b_25183_49287)">
+<path d="M27.2601 20.0008C27.2601 24.0105 24.0096 27.261 19.9999 27.261C15.9902 27.261 12.7396 24.0105 12.7396 20.0008C12.7396 15.9911 15.9902 12.7406 19.9999 12.7406C24.0096 12.7406 27.2601 15.9911 27.2601 20.0008Z" stroke="#067BEF" stroke-width="2.2"/>
+</g>
+<g filter="url(#filter3_b_25183_49287)">
+<ellipse cx="20.0001" cy="20.002" rx="3.68951" ry="3.68951" fill="#067BEF"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_25183_49287" x="2.00146" y="0.984375" width="37.9971" height="39.7734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_49287"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_49287" result="shape"/>
+</filter>
+<filter id="filter1_d_25183_49287" x="18.4087" y="0.788762" width="21.558" height="19.5087" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.77749"/>
+<feGaussianBlur stdDeviation="2.66624"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_49287"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_49287" result="shape"/>
+</filter>
+<filter id="filter2_b_25183_49287" x="-6.36035" y="-6.35938" width="52.7202" height="52.7188" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_49287"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_49287" result="shape"/>
+</filter>
+<filter id="filter3_b_25183_49287" x="-1.68945" y="-1.6875" width="43.3789" height="43.3828" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_49287"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_49287" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_25183_49287" x1="28.8467" y1="3.6634" x2="27.3441" y2="11.8012" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25183_49287" x1="36.6128" y1="11.9838" x2="24.2437" y2="15.2888" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_25183_49287">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/designer/src/assets/icon/icon-er.svg

@@ -0,0 +1,84 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_25183_54528)">
+<g filter="url(#filter0_d_25183_54528)">
+<path d="M4.25124 10.0944C4.25058 6.30569 7.32136 3.23438 11.11 3.23438H24.4544C25.9268 3.23438 27.3602 3.70809 28.5427 4.58551L32.973 7.87274C34.717 9.1668 35.7455 11.2101 35.7459 13.3816L35.7487 29.6476C35.7494 33.4363 32.6786 36.5076 28.8899 36.5076H11.1158C7.32715 36.5076 4.2553 33.4363 4.25464 29.6476L4.25124 10.0944Z" fill="white" stroke="#E9EDF2" stroke-width="0.5"/>
+<path d="M34.6341 11.1472L26.2154 4.34375L11.0346 4.34375C8.08958 4.34375 5.70256 6.73119 5.70308 9.67623L5.70523 22.0327L34.636 22.0327L34.6341 11.1472Z" fill="url(#paint0_linear_25183_54528)" fill-opacity="0.7"/>
+<path d="M34.5706 11.8268L26.1518 4.50003L7 4.5L7.00568 33.1566L29.2424 33.1566C32.1875 33.1566 34.5746 30.7691 34.5739 27.824L34.5706 11.8268Z" fill="url(#paint1_linear_25183_54528)" fill-opacity="0.7"/>
+<g filter="url(#filter1_d_25183_54528)">
+<path d="M28.1618 5.2676L34.634 11.1472L34.6344 13.1883C34.0054 11.5128 32.5054 10.3193 30.7316 10.0829L30.1811 10.0096C29.147 9.87177 28.2673 9.18735 27.8795 8.21884L27.4842 7.23153C26.8548 5.65965 25.4213 4.55364 23.7412 4.34375L25.771 4.34375C26.655 4.34375 27.5074 4.67312 28.1618 5.2676Z" fill="white"/>
+</g>
+</g>
+<line x1="19.9835" y1="16.2575" x2="27.1284" y2="20.9859" stroke="#90BEFC" stroke-width="1.2"/>
+<line x1="19.9291" y1="16.1406" x2="19.9291" y2="23.6944" stroke="#90BEFC" stroke-width="1.2"/>
+<line x1="19.4027" y1="16.6023" x2="12.9606" y2="21.9487" stroke="#90BEFC" stroke-width="1.2"/>
+<g filter="url(#filter2_b_25183_54528)">
+<rect x="24.1733" y="17.625" width="8.97149" height="4.82892" rx="2.41446" transform="rotate(180 24.1733 17.625)" fill="#067BEF"/>
+</g>
+<g filter="url(#filter3_b_25183_54528)">
+<ellipse cx="13.2027" cy="21.8552" rx="3.01572" ry="1.94111" fill="#067BEF"/>
+</g>
+<g filter="url(#filter4_b_25183_54528)">
+<ellipse cx="26.7975" cy="21.8552" rx="3.01572" ry="1.94111" fill="#067BEF"/>
+</g>
+<g filter="url(#filter5_b_25183_54528)">
+<ellipse cx="19.9999" cy="24.9674" rx="3.46916" ry="2.23298" fill="#90BEFC"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_25183_54528" x="2.00146" y="0.984375" width="37.9971" height="39.7734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_54528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_54528" result="shape"/>
+</filter>
+<filter id="filter1_d_25183_54528" x="18.4087" y="0.788762" width="21.558" height="19.5087" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.77749"/>
+<feGaussianBlur stdDeviation="2.66624"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_54528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_54528" result="shape"/>
+</filter>
+<filter id="filter2_b_25183_54528" x="-6.39834" y="-8.80313" width="52.1717" height="48.0281" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="10.8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_54528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_54528" result="shape"/>
+</filter>
+<filter id="filter3_b_25183_54528" x="-11.413" y="-1.68594" width="49.2313" height="47.0828" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="10.8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_54528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_54528" result="shape"/>
+</filter>
+<filter id="filter4_b_25183_54528" x="2.18174" y="-1.68594" width="49.2313" height="47.0828" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="10.8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_54528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_54528" result="shape"/>
+</filter>
+<filter id="filter5_b_25183_54528" x="14.1308" y="20.3344" width="11.7385" height="9.26875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_54528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_54528" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_25183_54528" x1="28.8467" y1="3.6634" x2="27.3441" y2="11.8012" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25183_54528" x1="36.6128" y1="11.9838" x2="24.2437" y2="15.2888" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_25183_54528">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/designer/src/assets/icon/icon-flow.svg

@@ -0,0 +1,77 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_25183_53966)">
+<g filter="url(#filter1_i_25183_53966)">
+<rect x="12.1357" y="10.6328" width="15.8642" height="15.8642" rx="3.35589" fill="#39A0FF"/>
+</g>
+<g filter="url(#filter2_i_25183_53966)">
+<rect x="4" y="2.5" width="21.7498" height="23.9997" rx="4" fill="#F2F6FF"/>
+</g>
+<g filter="url(#filter3_i_25183_53966)">
+<rect x="7.75" y="7" width="8.2499" height="6.10162" rx="3.05081" fill="url(#paint0_linear_25183_53966)"/>
+</g>
+<path d="M12.25 13V17.4999C12.25 18.3284 12.9216 18.9999 13.75 18.9999H14.7499" stroke="#158FFF" stroke-opacity="0.4"/>
+<g filter="url(#filter4_i_25183_53966)">
+<path d="M17.6024 15.2485C17.9758 14.9312 18.5242 14.9312 18.8976 15.2485L21.9495 17.842C22.4194 18.2413 22.4194 18.9667 21.9495 19.366L18.8976 21.9595C18.5242 22.2768 17.9758 22.2768 17.6024 21.9595L14.5505 19.366C14.0806 18.9667 14.0806 18.2413 14.5505 17.842L17.6024 15.2485Z" fill="url(#paint1_linear_25183_53966)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_25183_53966" x="0" y="0.5" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.118277 0 0 0 0 0.428854 0 0 0 0 0.71652 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_53966"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_53966" result="shape"/>
+</filter>
+<filter id="filter1_i_25183_53966" x="11.7607" y="10.6328" width="16.2393" height="15.8672" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.374996"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_53966"/>
+</filter>
+<filter id="filter2_i_25183_53966" x="4" y="2.5" width="23.7495" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_53966"/>
+</filter>
+<filter id="filter3_i_25183_53966" x="7.75" y="7" width="8.55" height="6.40156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feGaussianBlur stdDeviation="0.15"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_53966"/>
+</filter>
+<filter id="filter4_i_25183_53966" x="14.1982" y="15.0078" width="8.40352" height="7.4875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feGaussianBlur stdDeviation="0.15"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_53966"/>
+</filter>
+<linearGradient id="paint0_linear_25183_53966" x1="7.80942" y1="6.46816" x2="12.531" y2="14.0934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#39A0FF"/>
+<stop offset="1" stop-color="#0085FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25183_53966" x1="18.6837" y1="13.6403" x2="17.9232" y2="22.2232" gradientUnits="userSpaceOnUse">
+<stop stop-color="#39A0FF"/>
+<stop offset="1" stop-color="#0085FF"/>
+</linearGradient>
+</defs>
+</svg>

apps/designer/src/assets/icon/icon-mind.svg

@@ -0,0 +1,98 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_25183_19582)">
+<g filter="url(#filter1_i_25183_19582)">
+<rect x="12.1357" y="10.6328" width="15.8644" height="15.8644" rx="4.47458" fill="url(#paint0_linear_25183_19582)"/>
+</g>
+<g filter="url(#filter2_i_25183_19582)">
+<rect x="4" y="2.5" width="21.75" height="24" rx="4" fill="#F2FFFC"/>
+</g>
+<path d="M16.7624 19.544C13.1678 19.544 10.2539 17.3585 10.2539 14.6626C10.2539 11.9667 13.1678 9.78125 16.7624 9.78125" stroke="#31C47B" stroke-opacity="0.4"/>
+<g filter="url(#filter3_i_25183_19582)">
+<rect x="7" y="11.8125" width="6.50847" height="6.1017" rx="3" fill="url(#paint1_linear_25183_19582)"/>
+</g>
+<g filter="url(#filter4_i_25183_19582)">
+<rect x="15.9492" y="7.75" width="5.69491" height="4.0678" rx="2.0339" fill="url(#paint2_linear_25183_19582)"/>
+</g>
+<g filter="url(#filter5_i_25183_19582)">
+<rect x="15.9492" y="17.5156" width="5.69491" height="4.0678" rx="2.0339" fill="url(#paint3_linear_25183_19582)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_25183_19582" x="0" y="0.5" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.174008 0 0 0 0 0.660596 0 0 0 0 0.422267 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_19582"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_19582" result="shape"/>
+</filter>
+<filter id="filter1_i_25183_19582" x="11.6357" y="10.6328" width="16.3643" height="15.8672" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.5"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_19582"/>
+</filter>
+<filter id="filter2_i_25183_19582" x="4" y="2.5" width="23.75" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_19582"/>
+</filter>
+<filter id="filter3_i_25183_19582" x="7" y="11.8125" width="7.0083" height="6.60156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_19582"/>
+</filter>
+<filter id="filter4_i_25183_19582" x="15.9492" y="7.75" width="6.19482" height="4.57031" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_19582"/>
+</filter>
+<filter id="filter5_i_25183_19582" x="15.9492" y="17.5156" width="6.19482" height="4.57031" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_25183_19582"/>
+</filter>
+<linearGradient id="paint0_linear_25183_19582" x1="15.25" y1="12.25" x2="25.375" y2="26.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2DBD76"/>
+<stop offset="1" stop-color="#35CD82"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25183_19582" x1="8.27764" y1="12.4345" x2="12.0831" y2="18.1473" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2DBD76"/>
+<stop offset="1" stop-color="#35CD82"/>
+</linearGradient>
+<linearGradient id="paint2_linear_25183_19582" x1="17.0672" y1="8.16466" x2="19.2862" y2="12.537" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2DBD76"/>
+<stop offset="1" stop-color="#35CD82"/>
+</linearGradient>
+<linearGradient id="paint3_linear_25183_19582" x1="17.0672" y1="17.9303" x2="19.2862" y2="22.3026" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2DBD76"/>
+<stop offset="1" stop-color="#35CD82"/>
+</linearGradient>
+</defs>
+</svg>

apps/designer/src/assets/icon/icon-net.svg

@@ -0,0 +1,84 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_25183_37603)">
+<g filter="url(#filter0_d_25183_37603)">
+<path d="M4.25124 10.0944C4.25058 6.30569 7.32136 3.23438 11.11 3.23438H24.4544C25.9268 3.23438 27.3602 3.70809 28.5427 4.58551L32.973 7.87274C34.717 9.1668 35.7455 11.2101 35.7459 13.3816L35.7487 29.6476C35.7494 33.4363 32.6786 36.5076 28.8899 36.5076H11.1158C7.32715 36.5076 4.2553 33.4363 4.25464 29.6476L4.25124 10.0944Z" fill="white" stroke="#E9EDF2" stroke-width="0.5"/>
+<path d="M34.6341 11.1472L26.2154 4.34375L11.0346 4.34375C8.08958 4.34375 5.70256 6.73119 5.70308 9.67623L5.70523 22.0327L34.636 22.0327L34.6341 11.1472Z" fill="url(#paint0_linear_25183_37603)" fill-opacity="0.7"/>
+<path d="M34.5706 11.8268L26.1518 4.50003L7 4.5L7.00568 33.1566L29.2424 33.1566C32.1875 33.1566 34.5746 30.7691 34.5739 27.824L34.5706 11.8268Z" fill="url(#paint1_linear_25183_37603)" fill-opacity="0.7"/>
+<g filter="url(#filter1_d_25183_37603)">
+<path d="M28.1618 5.2676L34.634 11.1472L34.6344 13.1883C34.0054 11.5128 32.5054 10.3193 30.7316 10.0829L30.1811 10.0096C29.147 9.87177 28.2673 9.18735 27.8795 8.21884L27.4842 7.23153C26.8548 5.65965 25.4213 4.55364 23.7412 4.34375L25.771 4.34375C26.655 4.34375 27.5074 4.67312 28.1618 5.2676Z" fill="white"/>
+</g>
+</g>
+<line x1="18.2654" y1="22.5353" x2="16.5092" y2="25.9028" stroke="#90BEFC" stroke-width="1.2"/>
+<line x1="22.647" y1="19.8614" x2="26.1206" y2="20.0003" stroke="#90BEFC" stroke-width="1.2"/>
+<line x1="15.7852" y1="15.3412" x2="17.334" y2="17.3895" stroke="#90BEFC" stroke-width="1.2"/>
+<g filter="url(#filter2_b_25183_37603)">
+<circle cx="19.3069" cy="19.7034" r="4.00023" fill="#90BEFC"/>
+</g>
+<g filter="url(#filter3_b_25183_37603)">
+<circle cx="14.5075" cy="13.8347" r="2.44405" fill="#067BEF"/>
+</g>
+<g filter="url(#filter4_b_25183_37603)">
+<ellipse cx="27.3029" cy="20.1941" rx="2.44405" ry="2.44405" fill="#067BEF"/>
+</g>
+<g filter="url(#filter5_b_25183_37603)">
+<ellipse cx="15.9773" cy="26.78" rx="2.44405" ry="2.44405" fill="#067BEF"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_25183_37603" x="2.00146" y="0.984375" width="37.9971" height="39.7734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_37603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_37603" result="shape"/>
+</filter>
+<filter id="filter1_d_25183_37603" x="18.4087" y="0.788762" width="21.558" height="19.5087" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.77749"/>
+<feGaussianBlur stdDeviation="2.66624"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_37603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_37603" result="shape"/>
+</filter>
+<filter id="filter2_b_25183_37603" x="-2.69336" y="-2.29688" width="44.0005" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_37603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_37603" result="shape"/>
+</filter>
+<filter id="filter3_b_25183_37603" x="-5.93652" y="-6.60938" width="40.8882" height="40.8906" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_37603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_37603" result="shape"/>
+</filter>
+<filter id="filter4_b_25183_37603" x="6.85889" y="-0.25" width="40.8882" height="40.8906" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_37603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_37603" result="shape"/>
+</filter>
+<filter id="filter5_b_25183_37603" x="-4.4668" y="6.33594" width="40.8882" height="40.8906" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_37603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_37603" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_25183_37603" x1="28.8467" y1="3.6634" x2="27.3441" y2="11.8012" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25183_37603" x1="36.6128" y1="11.9838" x2="24.2437" y2="15.2888" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_25183_37603">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/designer/src/assets/icon/icon-swimlane.svg

@@ -0,0 +1,81 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_25183_36732)">
+<g filter="url(#filter0_d_25183_36732)">
+<path d="M4.25124 10.0944C4.25058 6.30569 7.32136 3.23438 11.11 3.23438H24.4544C25.9268 3.23438 27.3602 3.70809 28.5427 4.58551L32.973 7.87274C34.717 9.1668 35.7455 11.2101 35.7459 13.3816L35.7487 29.6476C35.7494 33.4363 32.6786 36.5076 28.8899 36.5076H11.1158C7.32715 36.5076 4.2553 33.4363 4.25464 29.6476L4.25124 10.0944Z" fill="white" stroke="#E9EDF2" stroke-width="0.5"/>
+<path d="M34.6341 11.1472L26.2154 4.34375L11.0346 4.34375C8.08958 4.34375 5.70256 6.73119 5.70308 9.67623L5.70523 22.0327L34.636 22.0327L34.6341 11.1472Z" fill="url(#paint0_linear_25183_36732)" fill-opacity="0.7"/>
+<path d="M34.5706 11.8268L26.1518 4.50003L7 4.5L7.00568 33.1566L29.2424 33.1566C32.1875 33.1566 34.5746 30.7691 34.5739 27.824L34.5706 11.8268Z" fill="url(#paint1_linear_25183_36732)" fill-opacity="0.7"/>
+<g filter="url(#filter1_d_25183_36732)">
+<path d="M28.1618 5.2676L34.634 11.1472L34.6344 13.1883C34.0054 11.5128 32.5054 10.3193 30.7316 10.0829L30.1811 10.0096C29.147 9.87177 28.2673 9.18735 27.8795 8.21884L27.4842 7.23153C26.8548 5.65965 25.4213 4.55364 23.7412 4.34375L25.771 4.34375C26.655 4.34375 27.5074 4.67312 28.1618 5.2676Z" fill="white"/>
+</g>
+</g>
+<g filter="url(#filter2_b_25183_36732)">
+<path d="M11.1123 16.0234V13.9963C11.1123 12.8917 12.0077 11.9963 13.1123 11.9963H26.8872C27.9918 11.9963 28.8872 12.8917 28.8872 13.9963V16.0234H11.1123Z" fill="#067BEF"/>
+</g>
+<g filter="url(#filter3_b_25183_36732)">
+<path d="M11.1123 17.3359H15.556V28.0009H13.1123C12.0077 28.0009 11.1123 27.1055 11.1123 26.0009V17.3359Z" fill="#067BEF"/>
+</g>
+<g filter="url(#filter4_b_25183_36732)">
+<rect x="16.9966" y="17.3359" width="11.8907" height="4.81173" fill="#90BEFC"/>
+</g>
+<g filter="url(#filter5_b_25183_36732)">
+<path d="M16.9966 23.5547H28.8873V25.9984C28.8873 27.103 27.9918 27.9984 26.8873 27.9984H16.9966V23.5547Z" fill="#067BEF"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_25183_36732" x="2.00146" y="0.984375" width="37.9971" height="39.7734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_36732"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_36732" result="shape"/>
+</filter>
+<filter id="filter1_d_25183_36732" x="18.4087" y="0.788762" width="21.558" height="19.5087" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.77749"/>
+<feGaussianBlur stdDeviation="2.66624"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_36732"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_36732" result="shape"/>
+</filter>
+<filter id="filter2_b_25183_36732" x="-10.4877" y="-9.6" width="60.9749" height="47.2234" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="10.8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_36732"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_36732" result="shape"/>
+</filter>
+<filter id="filter3_b_25183_36732" x="-10.4877" y="-4.26406" width="47.6438" height="53.8641" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="10.8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_36732"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_36732" result="shape"/>
+</filter>
+<filter id="filter4_b_25183_36732" x="-4.60342" y="-4.26406" width="55.0906" height="48.0125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="10.8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_36732"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_36732" result="shape"/>
+</filter>
+<filter id="filter5_b_25183_36732" x="-4.60342" y="1.95469" width="55.0906" height="47.6453" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="10.8"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_36732"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_36732" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_25183_36732" x1="28.8467" y1="3.6634" x2="27.3441" y2="11.8012" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25183_36732" x1="36.6128" y1="11.9838" x2="24.2437" y2="15.2888" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_25183_36732">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/designer/src/assets/icon/icon-uml.svg

@@ -0,0 +1,76 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_25183_19936)">
+<g filter="url(#filter0_d_25183_19936)">
+<path d="M4.25124 10.0944C4.25058 6.30569 7.32136 3.23438 11.11 3.23438H24.4544C25.9268 3.23438 27.3602 3.70809 28.5427 4.58551L32.973 7.87274C34.717 9.1668 35.7455 11.2101 35.7459 13.3816L35.7487 29.6476C35.7494 33.4363 32.6786 36.5076 28.8899 36.5076H11.1158C7.32715 36.5076 4.2553 33.4363 4.25464 29.6476L4.25124 10.0944Z" fill="white" stroke="#E9EDF2" stroke-width="0.5"/>
+<path d="M34.6341 11.1472L26.2154 4.34375L11.0346 4.34375C8.08958 4.34375 5.70256 6.73119 5.70308 9.67623L5.70523 22.0327L34.636 22.0327L34.6341 11.1472Z" fill="url(#paint0_linear_25183_19936)" fill-opacity="0.7"/>
+<path d="M34.5706 11.8268L26.1518 4.50003L7 4.5L7.00568 33.1566L29.2424 33.1566C32.1875 33.1566 34.5746 30.7691 34.5739 27.824L34.5706 11.8268Z" fill="url(#paint1_linear_25183_19936)" fill-opacity="0.7"/>
+<g filter="url(#filter1_d_25183_19936)">
+<path d="M28.1618 5.2676L34.634 11.1472L34.6344 13.1883C34.0054 11.5128 32.5054 10.3193 30.7316 10.0829L30.1811 10.0096C29.147 9.87177 28.2673 9.18735 27.8795 8.21884L27.4842 7.23153C26.8548 5.65965 25.4213 4.55364 23.7412 4.34375L25.771 4.34375C26.655 4.34375 27.5074 4.67312 28.1618 5.2676Z" fill="white"/>
+</g>
+</g>
+<g filter="url(#filter2_b_25183_19936)">
+<rect x="14.6089" y="23.6562" width="3.55499" height="10.665" rx="0.533248" transform="rotate(180 14.6089 23.6562)" fill="#067BEF"/>
+</g>
+<g filter="url(#filter3_b_25183_19936)">
+<rect x="21.6572" y="25.4453" width="3.55499" height="10.665" rx="0.533248" transform="rotate(180 21.6572 25.4453)" fill="#90BEFC"/>
+</g>
+<g filter="url(#filter4_b_25183_19936)">
+<rect x="28.9468" y="27.0156" width="3.55499" height="10.665" rx="0.533248" transform="rotate(180 28.9468 27.0156)" fill="#067BEF"/>
+</g>
+<path d="M14.6089 17.9219L17.5005 17.9219" stroke="#90BEFC" stroke-width="0.888747"/>
+<path d="M21.6631 20.2109L24.8519 20.2109" stroke="#90BEFC" stroke-width="0.888747"/>
+<path d="M15.8203 15.9922L17.6593 17.8312L15.8203 19.6701" stroke="#90BEFC" stroke-width="0.888747" stroke-linejoin="round"/>
+<path d="M23.1191 18.4219L24.9581 20.2609L23.1191 22.0998" stroke="#90BEFC" stroke-width="0.888747" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_25183_19936" x="2.00146" y="0.984375" width="37.9971" height="39.7734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_19936"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_19936" result="shape"/>
+</filter>
+<filter id="filter1_d_25183_19936" x="18.4087" y="0.788762" width="21.558" height="19.5087" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.77749"/>
+<feGaussianBlur stdDeviation="2.66624"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_19936"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_19936" result="shape"/>
+</filter>
+<filter id="filter2_b_25183_19936" x="-8.14322" y="-6.20475" width="41.949" height="49.0579" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9.59847"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_19936"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_19936" result="shape"/>
+</filter>
+<filter id="filter3_b_25183_19936" x="-1.09488" y="-4.41569" width="41.949" height="49.0579" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9.59847"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_19936"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_19936" result="shape"/>
+</filter>
+<filter id="filter4_b_25183_19936" x="6.19467" y="-2.84537" width="41.949" height="49.0579" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9.59847"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_19936"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_19936" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_25183_19936" x1="28.8467" y1="3.6634" x2="27.3441" y2="11.8012" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25183_19936" x1="36.6128" y1="11.9838" x2="24.2437" y2="15.2888" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_25183_19936">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/designer/src/assets/icon/icon-we.svg

@@ -0,0 +1,63 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_25183_54033)">
+<g filter="url(#filter0_d_25183_54033)">
+<path d="M4.25124 10.0944C4.25058 6.30569 7.32136 3.23438 11.11 3.23438H24.4544C25.9268 3.23438 27.3602 3.70809 28.5427 4.58551L32.973 7.87274C34.717 9.1668 35.7455 11.2101 35.7459 13.3816L35.7487 29.6476C35.7494 33.4363 32.6786 36.5076 28.8899 36.5076H11.1158C7.32715 36.5076 4.2553 33.4363 4.25464 29.6476L4.25124 10.0944Z" fill="white" stroke="#E9EDF2" stroke-width="0.5"/>
+<path d="M34.6341 11.1472L26.2154 4.34375L11.0346 4.34375C8.08958 4.34375 5.70256 6.73119 5.70308 9.67623L5.70523 22.0327L34.636 22.0327L34.6341 11.1472Z" fill="url(#paint0_linear_25183_54033)" fill-opacity="0.7"/>
+<path d="M34.5706 11.8268L26.1518 4.50003L7 4.5L7.00568 33.1566L29.2424 33.1566C32.1875 33.1566 34.5746 30.7691 34.5739 27.824L34.5706 11.8268Z" fill="url(#paint1_linear_25183_54033)" fill-opacity="0.7"/>
+<g filter="url(#filter1_d_25183_54033)">
+<path d="M28.1618 5.2676L34.634 11.1472L34.6344 13.1883C34.0054 11.5128 32.5054 10.3193 30.7316 10.0829L30.1811 10.0096C29.147 9.87177 28.2673 9.18735 27.8795 8.21884L27.4842 7.23153C26.8548 5.65965 25.4213 4.55364 23.7412 4.34375L25.771 4.34375C26.655 4.34375 27.5074 4.67312 28.1618 5.2676Z" fill="white"/>
+</g>
+</g>
+<g filter="url(#filter2_b_25183_54033)">
+<ellipse cx="23.4965" cy="20.0038" rx="5.70691" ry="5.70691" fill="#377AFA"/>
+</g>
+<g filter="url(#filter3_b_25183_54033)">
+<ellipse cx="16.5028" cy="20.0038" rx="5.70691" ry="5.70691" fill="#90BEFC"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_25183_54033" x="2.00146" y="0.984375" width="37.9971" height="39.7734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_54033"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_54033" result="shape"/>
+</filter>
+<filter id="filter1_d_25183_54033" x="18.4087" y="0.788762" width="21.558" height="19.5087" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.77749"/>
+<feGaussianBlur stdDeviation="2.66624"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25183_54033"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25183_54033" result="shape"/>
+</filter>
+<filter id="filter2_b_25183_54033" x="-0.210449" y="-3.70312" width="47.4136" height="47.4141" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="9"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_54033"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_54033" result="shape"/>
+</filter>
+<filter id="filter3_b_25183_54033" x="8.7959" y="12.2969" width="15.4136" height="15.4141" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_25183_54033"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_25183_54033" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_25183_54033" x1="28.8467" y1="3.6634" x2="27.3441" y2="11.8012" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25183_54033" x1="36.6128" y1="11.9838" x2="24.2437" y2="15.2888" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_25183_54033">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/designer/src/global.less

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px
+}
+
+::-webkit-scrollbar-thumb {
+  border: 2px solid #fff;
+  border-radius: 6px;
+  background-color: #c6c6c6
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #999
+}
+
+
+@background-color: #f6f7f8;

apps/designer/src/layouts/index.tsx

@@ -0,0 +1,8 @@
+import { Outlet } from 'umi';
+import './index.less';
+
+export default function Layout() {
+  return (
+    <Outlet />
+  );
+}

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Config() {
+  return (
+    <div>
+      配置项
+    </div>
+  )
+}

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

@@ -0,0 +1,11 @@
+@import url(~@/global.less);
+
+.leftPanel {
+  width: 224px;
+  background: @background-color;
+}
+.designLayout {
+  flex: 1;
+  background: #eaecee;
+  overflow: auto;
+}

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

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { Flex, Tabs } from "antd";
+import styles from "./index.less";
+import { Graph } from "@antv/x6";
+export default function Content() {
+  useEffect(() => {
+    const graph = new Graph({
+      container: document.getElementById("graph-container")!,
+      width: 1575,
+      height: 900,
+      grid: {
+        visible: true,
+        type: "mesh",
+        args: {
+          color: "#ddd", // 网格线颜色
+          thickness: 1, // 网格线宽度
+        },
+      },
+      background: {
+        color: '#F2F7FA',
+      },
+      interacting: {
+        edgeLabelMovable: false,
+        nodeMovable: false,
+        edgeMovable: false,
+      },
+    });
+  }, []);
+
+  return (
+    <Flex className="h-full">
+      <div className={styles.leftPanel}>
+        <Tabs centered>
+          <Tabs.TabPane key="1" tab="图形库">
+            图形库
+          </Tabs.TabPane>
+          <Tabs.TabPane key="2" tab="风格">
+            风格
+          </Tabs.TabPane>
+        </Tabs>
+      </div>
+      <div className={styles.designLayout}>
+        <div id="graph-container"></div>
+      </div>
+    </Flex>
+  );
+}

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Footer() {
+  return (
+    <div className='h-24px bg-white'>
+      底部工具
+    </div>
+  )
+}

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

@@ -0,0 +1,649 @@
+import { DownloadOutlined, LeftOutlined } from "@ant-design/icons";
+import { Button, Input, Dropdown, MenuProps, Tooltip } from "antd";
+import React, { useState } from "react";
+import logo from "@/assets/logo.png";
+
+const getIcon = (icon: string) => {
+  return <img src={icon} className="size-16px" />;
+};
+
+const menuData: {
+  key: string;
+  label: string;
+  type: "group";
+  children: MenuProps["items"];
+}[] = [
+  {
+    key: "1",
+    label: "文件",
+    type: "group",
+    children: [
+      {
+        key: "1-1",
+        label: "新建",
+        children: [
+          {
+            key: "1-1-1",
+            label: "流程图",
+            icon: getIcon(require("@/assets/icon/icon-flow.svg").default),
+          },
+          {
+            key: "1-1-2",
+            label: "思维导图",
+            icon: getIcon(require("@/assets/icon/icon-mind.svg").default),
+          },
+          {
+            key: "1-1-3",
+
+            label: "UML",
+            icon: getIcon(require("@/assets/icon/icon-uml.svg").default),
+          },
+          {
+            key: "1-1-4",
+
+            label: "网络拓扑图",
+            icon: getIcon(require("@/assets/icon/icon-net.svg").default),
+          },
+          {
+            key: "1-1-5",
+
+            label: "组织结构图",
+            icon: getIcon(require("@/assets/icon/icon-flow.svg").default),
+          },
+          {
+            key: "1-1-6",
+            label: "BPMN",
+            icon: getIcon(require("@/assets/icon/icon-bpmn.svg").default),
+          },
+        ],
+      },
+      {
+        key: "1-2",
+        label: "重命名",
+      },
+      {
+        key: "1-3",
+        label: "预览",
+      },
+      {
+        key: "1-4",
+        label: (
+          <div className="flex justify-between">
+            <span>保存</span>
+            <span>Ctrl+S</span>
+          </div>
+        ),
+      },
+      {
+        key: "1-5",
+        label: "克隆",
+      },
+      {
+        key: "1-6",
+        type: "divider",
+      },
+      {
+        key: "1-7",
+        label: "导出为",
+        children: [
+          {
+            key: "1-7-1",
+
+            label: "JPG",
+          },
+          {
+            key: "1-7-2",
+
+            label: "PNG",
+          },
+        ],
+      },
+      {
+        key: "1-8",
+        type: "divider",
+      },
+      {
+        key: "1-9",
+        label: "历史记录",
+      },
+      {
+        key: "1-0",
+        label: (
+          <div className="flex justify-between">
+            <span>打印</span>
+            <span>Ctrl+P</span>
+          </div>
+        ),
+      },
+      {
+        key: "1-11",
+        label: "关闭",
+      },
+    ],
+  },
+  {
+    key: "2",
+    type: "group",
+    label: "编辑",
+    children: [
+      {
+        key: "2-0",
+        label: (
+          <div className="flex justify-between">
+            <span>撤销</span>
+            <span>Ctrl+Z</span>
+          </div>
+        ),
+      },
+      {
+        key: "2-1",
+        label: (
+          <div className="flex justify-between">
+            <span>恢复</span>
+            <span>Ctrl+Y</span>
+          </div>
+        ),
+      },
+      {
+        key: "2-2",
+        type: "divider",
+      },
+      {
+        key: "2-3",
+        label: (
+          <div className="flex justify-between">
+            <span>剪切</span>
+            <span>Ctrl+X</span>
+          </div>
+        ),
+      },
+      {
+        key: "2-4",
+        label: (
+          <div className="flex justify-between">
+            <span>复制</span>
+            <span>Ctrl+C</span>
+          </div>
+        ),
+      },
+      {
+        key: "2-5",
+        label: (
+          <div className="flex justify-between">
+            <span>粘贴</span>
+            <span>Ctrl+V</span>
+          </div>
+        ),
+      },
+      {
+        key: "2-6",
+        label: (
+          <div className="flex justify-between">
+            <span>格式刷</span>
+            <span>Ctrl+Shift+C</span>
+          </div>
+        ),
+      },
+      {
+        key: "2-7",
+        label: "默认样式",
+      },
+      {
+        key: "2-8",
+        type: "divider",
+      },
+      {
+        key: "2-9",
+        label: (
+          <div className="flex justify-between">
+            <span>查找</span>
+            <span>Ctrl+F</span>
+          </div>
+        ),
+      },
+      {
+        key: "2-10",
+        label: (
+          <div className="flex justify-between">
+            <span>替换</span>
+            <span>Ctrl+H</span>
+          </div>
+        ),
+      },
+      {
+        key: "2-11",
+        type: "divider",
+      },
+      {
+        key: "2-12",
+        label: (
+          <div className="flex justify-between">
+            <span>删除</span>
+            <span>Delete/Backspace</span>
+          </div>
+        ),
+      },
+    ],
+  },
+  {
+    key: "3",
+    type: "group",
+    label: "选择",
+    children: [
+      {
+        key: "3-1",
+        label: (
+          <div className="flex justify-between">
+            <span>全选</span>
+            <span>Ctrl+A</span>
+          </div>
+        ),
+      },
+      {
+        key: "3-2",
+        type: "divider",
+      },
+      {
+        key: "3-3",
+        label: "框选部分选中数据",
+      },
+      {
+        key: "3-4",
+        label: "框选全部选中图形",
+      },
+    ],
+  },
+  {
+    key: "4",
+    type: "group",
+    label: "视图",
+    children: [
+      {
+        key: "4-1",
+        label: (
+          <div className="flex justify-between">
+            <span>放大</span>
+            <span>Ctrl+(+)</span>
+          </div>
+        ),
+      },
+      {
+        key: "4-2",
+        label: (
+          <div className="flex justify-between">
+            <span>缩小</span>
+            <span>Ctrl+(+)</span>
+          </div>
+        ),
+      },
+      {
+        key: "4-3",
+        type: "divider",
+      },
+      {
+        key: "4-4",
+        label: "50%",
+      },
+      {
+        key: "4-5",
+        label: "75%",
+      },
+      {
+        key: "4-6",
+        label: "100%",
+      },
+      {
+        key: "4-7",
+        label: "150%",
+      },
+      {
+        key: "4-8",
+        label: "200%",
+      },
+      {
+        key: "4-9",
+        type: "divider",
+      },
+      {
+        key: "4-10",
+        label: (
+          <div className="flex justify-between">
+            <span>重置视图</span>
+            <span>Ctrl+0</span>
+          </div>
+        ),
+      },
+    ],
+  },
+  {
+    key: "5",
+    type: "group",
+    label: "插入",
+    children: [
+      {
+        key: "5-1",
+        label: (
+          <div className="flex justify-between">
+            <span>文本</span>
+            <span>T</span>
+          </div>
+        ),
+      },
+      {
+        key: "5-2",
+        label: (
+          <div className="flex justify-between">
+            <span>图片</span>
+            <span>I</span>
+          </div>
+        ),
+      },
+      {
+        key: "5-3",
+        label: "代码块",
+      },
+      {
+        key: "5-4",
+        label: (
+          <div className="flex justify-between">
+            <span>连线</span>
+            <span>L</span>
+          </div>
+        ),
+      },
+      {
+        key: "5-5",
+        type: "divider",
+      },
+      {
+        key: "5-6",
+        label: "数据属性",
+      },
+      {
+        key: "5-7",
+        label: (
+          <div className="flex justify-between">
+            <span>评论</span>
+            <span>Alt+Ctrl+M</span>
+          </div>
+        ),
+      },
+    ],
+  },
+  {
+    key: "6",
+    type: "group",
+    label: "画布",
+    children: [
+      {
+        key: "6-1",
+        label: "画布大小",
+      },
+      {
+        key: "6-2",
+        label: "背景颜色",
+      },
+      {
+        key: "6-3",
+        label: "显示网格",
+      },
+      {
+        key: "6-4",
+        label: "网格大小",
+        children: [
+          {
+            key: "6-4-1",
+
+            label: "小",
+          },
+          {
+            key: "6-4-2",
+
+            label: "正常",
+          },
+          {
+            key: "6-4-3",
+
+            label: "大",
+          },
+          {
+            key: "6-4-4",
+
+            label: "很大",
+          },
+          {
+            key: "6-4-5",
+
+            label: "自定义",
+          },
+        ],
+      },
+      {
+        key: "6-5",
+        type: "divider",
+      },
+      {
+        key: "6-6",
+        label: "显示跨线",
+      },
+      {
+        key: "6-7",
+        label: "显示打印分割线",
+      },
+      {
+        key: "6-8",
+        label: "水印设置",
+      },
+      {
+        key: "6-9",
+        label: "风格设置",
+      },
+    ],
+  },
+  {
+    key: "7",
+    type: "group",
+    label: "排列",
+    children: [
+      {
+        key: "7-1",
+        label: "置于顶层",
+      },
+      {
+        key: "7-2",
+        label: "置于底层",
+      },
+      {
+        key: "7-3",
+        label: "上移一层",
+      },
+      {
+        key: "7-4",
+        label: "下移一层",
+      },
+      {
+        key: "7-5",
+        type: "divider",
+      },
+      {
+        key: "7-6",
+        label: "分布对齐",
+        children: [
+          {
+            key: "7-6-1",
+            label: (
+              <div className="flex justify-between">
+                <span>左对齐</span>
+                <span>Alt+L</span>
+              </div>
+            ),
+          },
+          {
+            key: "7-6-2",
+            label: (
+              <div className="flex justify-between">
+                <span>居中对齐</span>
+                <span>Alt+C</span>
+              </div>
+            ),
+          },
+          {
+            key: "7-6-3",
+            label: (
+              <div className="flex justify-between">
+                <span>右对齐</span>
+                <span>Alt+R</span>
+              </div>
+            ),
+          },
+          {
+            key: "7-6-4",
+            type: "divider",
+          },
+          {
+            key: "7-6-5",
+            label: (
+              <div className="flex justify-between">
+                <span>顶端对齐</span>
+                <span>Alt+T</span>
+              </div>
+            ),
+          },
+          {
+            key: "7-6-6",
+            label: (
+              <div className="flex justify-between">
+                <span>垂直居中对齐</span>
+                <span>Alt+M</span>
+              </div>
+            ),
+          },
+          {
+            key: "7-6-8",
+            label: (
+              <div className="flex justify-between">
+                <span>底端对齐</span>
+                <span>Alt+B</span>
+              </div>
+            ),
+          },
+          {
+            key: "7-6-9",
+            type: "divider",
+          },
+          {
+            key: "7-6-10",
+            label: (
+              <div className="flex justify-between">
+                <span>水平平均分布</span>
+                <span>Alt+H</span>
+              </div>
+            ),
+          },
+          {
+            key: "7-6-11",
+            label: (
+              <div className="flex justify-between">
+                <span>垂直平均分布</span>
+                <span>Alt+V</span>
+              </div>
+            ),
+          },
+        ],
+      },
+      {
+        key: "7-7",
+        label: "匹配大小",
+        children: [
+          {
+            key: "7-7-1",
+
+            label: "宽度",
+          },
+          {
+            key: "7-7-2",
+
+            label: "高度",
+          },
+          {
+            key: "7-7-3",
+
+            label: "宽高匹配",
+          },
+        ],
+      },
+      {
+        key: "7-8",
+        type: "divider",
+      },
+      {
+        key: "7-9",
+        label: (
+          <div className="flex justify-between">
+            <span>组合</span>
+            <span>Alt+G</span>
+          </div>
+        ),
+      },
+      {
+        key: "7-10",
+        label: (
+          <div className="flex justify-between">
+            <span>取消组合</span>
+            <span>Alt+Shift+G</span>
+          </div>
+        ),
+      },
+      {
+        key: "7-11",
+        type: "divider",
+      },
+      {
+        key: "7-12",
+        label: "锁定",
+      },
+      {
+        key: "7-13",
+        label: "取消锁定",
+      },
+    ],
+  },
+];
+export default function MenuBar() {
+  const [name, setName] = useState("新建流程图");
+  return (
+    <div className="w-full px-8px flex justify-between items-center">
+      <div className="menu-left flex items-center">
+        <Button type="text" icon={<LeftOutlined />}></Button>
+        <div className="w-40px h-40px mx-8px">
+          <img className="w-40px" src={logo} />
+        </div>
+        <div className="flex flex-col leading-32px">
+          <div>
+            <Input className="text-16px" value={name} variant="borderless" />
+          </div>
+          <div>
+            {menuData.map((item) => {
+              return (
+                <Dropdown
+                  key={item.key}
+                  menu={{ items: item.children, style: { width: 200} }}
+                  placement="bottomLeft"
+                >
+                  <Button type="text" size="small">{item.label}</Button>
+                </Dropdown>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <div>
+        <Dropdown menu={{ items: []}}>
+          <Tooltip title='导出为'>
+            <Button type="text" icon={<DownloadOutlined />}></Button>
+          </Tooltip>
+        </Dropdown>
+      </div>
+    </div>
+  );
+}

apps/designer/src/pages/flow/components/ToolBar/index.less

@@ -0,0 +1,11 @@
+.toolBar {
+  position: relative;
+  background-color: #f6f7f8;
+  border-top: 1px solid #dfe2e5;
+  height: 40px;
+  line-height: 40px;
+  font-size: 12px;
+  min-width: 650px;
+  border-bottom: 1px solid #dfe2e5;
+  padding: 0 8px;
+}

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

@@ -0,0 +1,189 @@
+import React from "react";
+import styles from "./index.less";
+import { Button, Divider, Dropdown, InputNumber, Tooltip } from "antd";
+import {
+  AlignCenterOutlined,
+  BoldOutlined,
+  CaretDownOutlined,
+  ColumnHeightOutlined,
+  ItalicOutlined,
+  UnderlineOutlined,
+} from "@ant-design/icons";
+
+export default function ToolBar() {
+  return (
+    <div className={styles.toolBar}>
+      <div className="flex justify-between items-center">
+        <div className="h-40px flex items-center">
+          <Tooltip placement="bottom" title="撤销">
+            <Button type="text" icon={<i className="iconfont icon-undo"></i>} />
+          </Tooltip>
+
+          <Tooltip placement="bottom" title="恢复">
+            <Button
+              type="text"
+              icon={<i className="iconfont icon-redo"></i>}
+              disabled
+            />
+          </Tooltip>
+
+          <Tooltip placement="bottom" title="格式刷">
+            <Button
+              type="text"
+              icon={<i className="iconfont icon-geshishua"></i>}
+              disabled
+            />
+          </Tooltip>
+
+          <Tooltip placement="bottom" title="美化">
+            <Button
+              type="text"
+              icon={<i className="iconfont icon-mofabang"></i>}
+            />
+          </Tooltip>
+
+          <Divider type="vertical" />
+
+          <Dropdown menu={{ items: [] }}>
+            <Tooltip placement="bottom" title="字体">
+              <Button type="text" className="w-90px">
+                <span className="font-">微软雅黑</span>
+                <CaretDownOutlined />
+              </Button>
+            </Tooltip>
+          </Dropdown>
+
+          <Tooltip placement="bottom" title="字体大小">
+            <InputNumber
+              value="14"
+              className="w-70px"
+              variant="filled"
+              formatter={(value) => `${value}px`}
+            />
+          </Tooltip>
+
+          <Tooltip placement="bottom" title="字体加粗">
+            <Button type="text" icon={<BoldOutlined />} />
+          </Tooltip>
+
+          <Tooltip placement="bottom" title="字体倾斜">
+            <Button type="text" icon={<ItalicOutlined />} />
+          </Tooltip>
+
+          <Tooltip placement="bottom" title="下划线">
+            <Button type="text" icon={<UnderlineOutlined />} />
+          </Tooltip>
+
+          <Tooltip placement="bottom" title="字体颜色">
+            <Button
+              type="text"
+              icon={
+                <div className="flex flex-col">
+                  <span className="iconfont icon-A text-13px"></span>
+                  <span
+                    className="w-16px h-2px border-1px border-#ff0"
+                    style={{ background: "#000" }}
+                  ></span>
+                </div>
+              }
+            />
+          </Tooltip>
+
+          <Dropdown menu={{ items: [] }}>
+            <Tooltip placement="bottom" title="文本行高">
+              <Button type="text" className="w-50px">
+                <ColumnHeightOutlined />
+                <CaretDownOutlined className="text-12px" />
+              </Button>
+            </Tooltip>
+          </Dropdown>
+
+          <Dropdown menu={{ items: [] }}>
+            <Tooltip placement="bottom" title="文本对齐">
+              <Button type="text" className="w-50px">
+                <AlignCenterOutlined />
+                <CaretDownOutlined className="text-12px" />
+              </Button>
+            </Tooltip>
+          </Dropdown>
+          <Divider type="vertical" />
+          <Tooltip placement="bottom" title="颜色填充">
+            <Button
+              type="text"
+              icon={
+                <div className="flex flex-col">
+                  <span className="iconfont icon-paint-bucket text-13px"></span>
+                  <span
+                    className="w-16px h-2px border-1px border-#ff0"
+                    style={{ background: "#000" }}
+                  ></span>
+                </div>
+              }
+            />
+          </Tooltip>
+
+          <Tooltip placement="bottom" title="连线颜色">
+            <Button
+              type="text"
+              icon={
+                <div className="flex flex-col">
+                  <span className="iconfont icon-bi text-13px"></span>
+                  <span
+                    className="w-16px h-2px border-1px border-#ff0"
+                    style={{ background: "#000" }}
+                  ></span>
+                </div>
+              }
+            />
+          </Tooltip>
+
+          <Dropdown menu={{ items: [] }}>
+            <Tooltip placement="bottom" title="连线宽度">
+              <Button type="text" className="w-50px">
+                <i className="iconfont icon-xiankuan"></i>
+                <CaretDownOutlined className="text-12px" />
+              </Button>
+            </Tooltip>
+          </Dropdown>
+
+          <Dropdown menu={{ items: [] }}>
+            <Tooltip placement="bottom" title="连线样式">
+              <Button type="text" className="w-50px">
+                <i className="iconfont icon-jixianyangshi-line"></i>
+                <CaretDownOutlined className="text-12px" />
+              </Button>
+            </Tooltip>
+          </Dropdown>
+
+          <Dropdown menu={{ items: [] }}>
+            <Tooltip placement="bottom" title="连线类型">
+              <Button type="text" className="w-50px">
+                <i className="iconfont icon-lianxian"></i>
+                <CaretDownOutlined className="text-12px" />
+              </Button>
+            </Tooltip>
+          </Dropdown>
+          <Divider type="vertical" />
+
+          <Dropdown menu={{ items: [] }}>
+            <Tooltip placement="bottom" title="图层排列">
+              <Button type="text" className="w-50px">
+                <i className="iconfont icon-zhiding1"></i>
+                <CaretDownOutlined className="text-12px" />
+              </Button>
+            </Tooltip>
+          </Dropdown>
+
+          <Dropdown menu={{ items: [] }}>
+            <Tooltip placement="bottom" title="宽高匹配">
+              <Button type="text" className="w-50px">
+                <i className="iconfont icon-kuandu"></i>
+                <CaretDownOutlined className="text-12px" />
+              </Button>
+            </Tooltip>
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/designer/src/pages/flow/index.less

@@ -0,0 +1,26 @@
+@import url(~@/global.less);
+
+.layout {
+  height: 100vh;
+  width: 100vw;
+}
+
+.header {
+  padding: 8px 16px 8px 0;
+  background-color: @background-color;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content {
+  background: #eaecee;
+}
+
+.contentCenter {
+  height: calc(100% - 24px);
+}
+
+.config {
+  background-color: @background-color !important;
+}

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

@@ -0,0 +1,35 @@
+import { Layout } from 'antd';
+import MenuBar from './components/MenuBar';
+import ToolBar from './components/ToolBar';
+import Footer from './components/Footer';
+import Config from './components/Config';
+import Content from './components/Content';
+import styles from './index.less';
+export default function HomePage() {
+  return (
+    <Layout className={styles.layout}>
+      {/* 菜单栏 */}
+      <Layout.Header className={styles.header}>
+        <MenuBar />
+      </Layout.Header>
+
+      {/* 工具栏 */}
+      <ToolBar/>
+
+      <Layout.Content className={styles.content}>
+        <Layout className='h-full'>
+          <Layout.Content className={styles.content}>
+            <div className={styles.contentCenter}>
+              <Content/>
+            </div>
+            <Footer/>
+          </Layout.Content>
+          {/* 右侧配置表单 */}
+          <Layout.Sider className={styles.config}>
+            <Config/>
+          </Layout.Sider>
+        </Layout>
+      </Layout.Content>
+    </Layout>
+  );
+}

apps/designer/src/pages/home/index.tsx

@@ -0,0 +1,327 @@
+import {
+  ProductOutlined,
+  ClockCircleOutlined,
+  MenuOutlined,
+  AppstoreOutlined,
+} from "@ant-design/icons";
+import type { ProSettings } from "@ant-design/pro-components";
+import {
+  PageContainer,
+  ProCard,
+  ProConfigProvider,
+  ProLayout,
+  AppListProps,
+} from "@ant-design/pro-components";
+import { css } from "@emotion/css";
+import { Space, Input, Button, Row, Col, Card } from "antd";
+import { ConfigProvider, Divider } from "antd";
+import { useState } from "react";
+import { history } from 'umi';
+import logo from "@/assets/logo.png";
+
+const MenuCard = () => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <Divider
+        style={{
+          height: "1.5em",
+        }}
+        type="vertical"
+      />
+    </div>
+  );
+};
+
+const basicGraph = [
+  {
+    id: "1",
+    title: "流程图",
+    subtitle: "图形化表单方式",
+    color: "#dfecff",
+    icon: require("@/assets/icon/icon-flow.svg").default,
+  },
+  {
+    id: "2",
+    title: "思维导图",
+    subtitle: "结构化表单方式",
+    color: "#dff4ea",
+    icon: require("@/assets/icon/icon-mind.svg").default,
+  },
+];
+
+const appList = [
+  {
+    id: "1",
+    title: "UML",
+    icon: require("@/assets/icon/icon-uml.svg").default,
+  },
+  {
+    id: "2",
+    title: "E-R图",
+    icon: require("@/assets/icon/icon-er.svg").default,
+  },
+  {
+    id: "3",
+    title: "泳道图",
+    icon: require("@/assets/icon/icon-swimlane.svg").default,
+  },
+  {
+    id: "4",
+    title: "BPMN",
+    icon: require("@/assets/icon/icon-bpmn.svg").default,
+  },
+  {
+    id: "5",
+    title: "韦恩图",
+    icon: require("@/assets/icon/icon-we.svg").default,
+  },
+  {
+    id: "6",
+    title: "网络拓扑图",
+    icon: require("@/assets/icon/icon-net.svg").default,
+  },
+];
+
+const handleMenuClick = (item: any) => {
+  console.log("click", item);
+  history.push('/flow');
+};
+
+const renderBasicItem = (props: {
+  title: string;
+  subtitle: string;
+  color: string;
+  id: string;
+  icon: string;
+}) => {
+  return (
+    <div
+      key={props.id}
+      className={css`
+        width: 136px;
+        height: 60px;
+        padding: 8px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-top: 8px;
+        background: ${props.color};
+        &:hover {
+          background: ${props.color + "70"};
+        }
+      `}
+      onClick={() => handleMenuClick(props)}
+    >
+      <img src={props.icon} className="w-32px h-33px" />
+      <div className="flex flex-col justify-center ml-4px">
+        <div className="text-14px">{props.title}</div>
+        <div className="text-12px text-#9aa5b8">{props.subtitle}</div>
+      </div>
+    </div>
+  );
+};
+
+const renderProItem = (props: { id: string; title: string; icon: string }) => {
+  return (
+    <div
+      key={props.id}
+      className="w-66px h-70px flex flex-col items-center justify-center mt-8px rounded-lg hover:bg-#f3f5f9 cursor-pointer"
+      onClick={() => handleMenuClick(props)}
+    >
+      <img src={props.icon} className="size-40px" />
+      <span className="text-12px">{props.title}</span>
+    </div>
+  );
+};
+
+const renderAppList = (_props: AppListProps) => {
+  return (
+    <div className="w-460px">
+      <div className="color-#6c7d8f text-xs">基础图形</div>
+      <Space>{basicGraph.map((item) => renderBasicItem(item))}</Space>
+      <div className="color-#6c7d8f text-xs mt-8px">专业图形</div>
+      <Space>{appList.map((item) => renderProItem(item))}</Space>
+    </div>
+  );
+};
+
+export default () => {
+  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
+    fixSiderbar: false,
+    layout: "mix",
+    splitMenus: true,
+  });
+
+  const [pathname, setPathname] = useState("/");
+  if (typeof document === "undefined") {
+    return <div />;
+  }
+
+  const handleToEdit = () => {
+    history.push('/flow')
+  }
+  
+  return (
+    <div
+      id="test-pro-layout"
+      style={{
+        height: "100vh",
+        overflow: "auto",
+      }}
+    >
+      <ProConfigProvider hashed={false}>
+        <ConfigProvider
+          getTargetContainer={() => {
+            return document.getElementById("test-pro-layout") || document.body;
+          }}
+        >
+          <ProLayout
+            prefixCls="shalu"
+            logo={logo}
+            title="系统设计"
+            bgLayoutImgList={[
+              {
+                src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
+                left: 85,
+                bottom: 100,
+                height: "303px",
+              },
+              {
+                src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
+                bottom: -68,
+                right: -45,
+                height: "303px",
+              },
+              {
+                src: "https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png",
+                bottom: 0,
+                left: 0,
+                width: "331px",
+              },
+            ]}
+            route={{
+              path: "/",
+              routes: [
+                {
+                  path: "/welcome",
+                  name: "最近",
+                  icon: <ClockCircleOutlined />,
+                },
+                {
+                  path: "/flow",
+                  name: "模版",
+                  icon: <ProductOutlined />,
+                },
+              ],
+            }}
+            appList={[
+              {
+                icon: "",
+                title: "应用占位",
+              },
+            ]}
+            appListRender={renderAppList}
+            location={{
+              pathname,
+            }}
+            token={{
+              header: {
+                colorBgMenuItemSelected: "rgba(0,0,0,0.04)",
+              },
+            }}
+            siderMenuType="group"
+            menu={{
+              collapsedShowGroupTitle: true,
+            }}
+            actionsRender={(props) => {
+              if (props.isMobile) return [];
+              if (typeof window === "undefined") return [];
+              return [
+              ];
+            }}
+            headerTitleRender={(logo, title, _) => {
+              const defaultDom = (
+                <a>
+                  {logo}
+                  {title}
+                </a>
+              );
+              if (typeof window === "undefined") return defaultDom;
+              if (document.body.clientWidth < 1400) {
+                return defaultDom;
+              }
+              if (_.isMobile) return defaultDom;
+              return (
+                <>
+                  {defaultDom}
+                  <MenuCard />
+                </>
+              );
+            }}
+            menuItemRender={(item, dom) => (
+              <div
+                onClick={() => {
+                  setPathname(item.path || "/welcome");
+                }}
+              >
+                {dom}
+              </div>
+            )}
+            {...settings}
+          >
+            <PageContainer
+              extra={[
+                <Button key="1" onClick={() => {}} icon={false ? <MenuOutlined/> : <AppstoreOutlined/>}/>,
+              ]}
+              subTitle="流程设计器"
+              footer={[]}
+            >
+              <ProCard
+                style={{
+                  height: "calc(100vh - 140px)",
+                  minHeight: 800,
+                }}
+              >
+                <Row gutter={[8, 16]}>
+                  {new Array(10).fill(0).map((item) => {
+                    return (
+                      <Col xs={8} sm={8} md={6} lg={6} xl={4} xxl={3}>
+                        <Card
+                          hoverable
+                          boxShadow
+                          cover={
+                            <img
+                              style={{height: 200, objectFit: 'cover'}}
+                              alt="example"
+                              src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
+                            />
+                          }
+                          onClick={() => handleToEdit()}
+                        >
+                          <Card.Meta
+                            title={
+                              <>
+                                xx流程图
+                              </>
+                            }
+                            description="更新于：2024.09.06"
+                          />
+                        </Card>
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </ProCard>
+            </PageContainer>
+          </ProLayout>
+        </ConfigProvider>
+      </ProConfigProvider>
+    </div>
+  );
+};

apps/designer/src/pages/mindmap/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function MindMap() {
+  return (
+    <div>
+      思维导图
+    </div>
+  )
+}

apps/designer/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}

apps/designer/typings.d.ts

@@ -0,0 +1,2 @@
+import 'umi/typings';
+declare module '@emotion/css';

apps/designer/unocss.config.ts

@@ -0,0 +1,9 @@
+import {defineConfig, presetAttributify, presetUno} from 'unocss';
+
+export function createConfig({strict = true, dev = true} = {}) {
+  return defineConfig({
+    envMode: dev ? 'dev' : 'build', presets: [presetAttributify({strict}), presetUno()],
+  });
+}
+
+export default createConfig();

apps/web/.eslintrc.js

@@ -1,9 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  root: true,
-  extends: ["@repo/eslint-config/next.js"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
-};

apps/web/.gitignore

@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# env files (can opt-in for commiting if needed)
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

apps/web/README.md

@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/web/app/globals.css

@@ -1,39 +0,0 @@
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

apps/web/app/layout.tsx

@@ -1,31 +0,0 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
-
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
-      </body>
-    </html>
-  );
-}

apps/web/app/page.module.css

@@ -1,188 +0,0 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-synthesis: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  font-family: var(--font-geist-sans);
-  border: 1px solid transparent;
-  transition: background 0.2s, color 0.2s, border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
-}
-
-button.secondary {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  font-family: var(--font-geist-sans);
-  border: 1px solid transparent;
-  transition: background 0.2s, color 0.2s, border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-  background: transparent;
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
-}
-
-.footer {
-  font-family: var(--font-geist-sans);
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.footer img {
-  flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}

apps/web/app/page.tsx

@@ -1,99 +0,0 @@
-import Image from "next/image";
-import { Button } from "@repo/ui/button";
-import styles from "./page.module.css";
-
-export default function Home() {
-  return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol>
-          <li>
-            Get started by editing <code>app/page.tsx</code>
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
-        </div>
-        <Button appName="web" className={styles.secondary}>
-          Open alert
-        </Button>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file-text.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}

apps/web/next.config.mjs

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;

apps/web/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "web",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbo",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@repo/ui": "workspace:*",
-    "next": "14.2.6",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
-  "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.6",
-    "typescript": "^5"
-  }
-}

apps/web/public/vercel.svg

@@ -1,10 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_977_547)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 3L18.5 17H2.5L10.5 3Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_977_547">
-<rect width="16" height="16" fill="white" transform="translate(2.5 2)"/>
-</clipPath>
-</defs>
-</svg>

apps/web/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "extends": "@repo/typescript-config/nextjs.json",
-  "compilerOptions": {
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    "next.config.mjs",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": ["node_modules"]
-}

package.json

@@ -8,6 +8,7 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
+    "@umijs/plugins": "^4.3.18",
     "prettier": "^3.2.5",
     "turbo": "^2.1.1",
     "typescript": "^5.4.5"
@@ -15,5 +16,14 @@
   "packageManager": "pnpm@8.15.6",
   "engines": {
     "node": ">=18"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.4.0",
+    "@ant-design/pro-components": "^2.7.15",
+    "@emotion/css": "^11.13.0",
+    "@unocss/cli": "^0.62.3",
+    "antd": "^5.20.5",
+    "axios": "^1.7.7",
+    "unocss": "^0.62.3"
   }
 }