diff --git a/business-css/frontend/package.json b/business-css/frontend/package.json
index 7b20367..00fd84e 100644
--- a/business-css/frontend/package.json
+++ b/business-css/frontend/package.json
@@ -10,6 +10,8 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
+    "@antv/g6": "^5.0.51",
+    "@antv/x6": "^3.1.4",
     "@element-plus/icons-vue": "^2.0.10",
     "@types/js-cookie": "^3.0.2",
     "@vueuse/core": "^9.1.1",
@@ -20,6 +22,7 @@
     "default-passive-events": "^2.0.0",
     "echarts": "^5.2.2",
     "element-plus": "^2.2.27",
+    "insert-css": "^2.0.0",
     "js-base64": "^3.7.5",
     "js-cookie": "^3.0.1",
     "jsencrypt": "^3.3.2",
diff --git a/business-css/frontend/src/assets/x6/add.png b/business-css/frontend/src/assets/x6/add.png
new file mode 100644
index 0000000..6de722d
Binary files /dev/null and b/business-css/frontend/src/assets/x6/add.png differ
diff --git a/business-css/frontend/src/assets/x6/change.png b/business-css/frontend/src/assets/x6/change.png
new file mode 100644
index 0000000..0e9e23d
Binary files /dev/null and b/business-css/frontend/src/assets/x6/change.png differ
diff --git a/business-css/frontend/src/assets/x6/copy.png b/business-css/frontend/src/assets/x6/copy.png
new file mode 100644
index 0000000..f7e2c46
Binary files /dev/null and b/business-css/frontend/src/assets/x6/copy.png differ
diff --git a/business-css/frontend/src/assets/x6/del.png b/business-css/frontend/src/assets/x6/del.png
new file mode 100644
index 0000000..ce41118
Binary files /dev/null and b/business-css/frontend/src/assets/x6/del.png differ
diff --git a/business-css/frontend/src/assets/x6/display.png b/business-css/frontend/src/assets/x6/display.png
new file mode 100644
index 0000000..a3aac24
Binary files /dev/null and b/business-css/frontend/src/assets/x6/display.png differ
diff --git a/business-css/frontend/src/assets/x6/hide.png b/business-css/frontend/src/assets/x6/hide.png
new file mode 100644
index 0000000..fb4d6df
Binary files /dev/null and b/business-css/frontend/src/assets/x6/hide.png differ
diff --git a/business-css/frontend/src/assets/x6/history.png b/business-css/frontend/src/assets/x6/history.png
new file mode 100644
index 0000000..58e7ab6
Binary files /dev/null and b/business-css/frontend/src/assets/x6/history.png differ
diff --git a/business-css/frontend/src/assets/x6/info.png b/business-css/frontend/src/assets/x6/info.png
new file mode 100644
index 0000000..6167cd1
Binary files /dev/null and b/business-css/frontend/src/assets/x6/info.png differ
diff --git a/business-css/frontend/src/assets/x6/magnify.png b/business-css/frontend/src/assets/x6/magnify.png
new file mode 100644
index 0000000..b808189
Binary files /dev/null and b/business-css/frontend/src/assets/x6/magnify.png differ
diff --git a/business-css/frontend/src/assets/x6/material.png b/business-css/frontend/src/assets/x6/material.png
new file mode 100644
index 0000000..143f817
Binary files /dev/null and b/business-css/frontend/src/assets/x6/material.png differ
diff --git a/business-css/frontend/src/assets/x6/redo.png b/business-css/frontend/src/assets/x6/redo.png
new file mode 100644
index 0000000..efda01e
Binary files /dev/null and b/business-css/frontend/src/assets/x6/redo.png differ
diff --git a/business-css/frontend/src/assets/x6/reduce.png b/business-css/frontend/src/assets/x6/reduce.png
new file mode 100644
index 0000000..ddf1681
Binary files /dev/null and b/business-css/frontend/src/assets/x6/reduce.png differ
diff --git a/business-css/frontend/src/assets/x6/return.png b/business-css/frontend/src/assets/x6/return.png
new file mode 100644
index 0000000..ba35be4
Binary files /dev/null and b/business-css/frontend/src/assets/x6/return.png differ
diff --git a/business-css/frontend/src/assets/x6/revoke.png b/business-css/frontend/src/assets/x6/revoke.png
new file mode 100644
index 0000000..875c119
Binary files /dev/null and b/business-css/frontend/src/assets/x6/revoke.png differ
diff --git a/business-css/frontend/src/assets/x6/save.png b/business-css/frontend/src/assets/x6/save.png
new file mode 100644
index 0000000..40a3bc1
Binary files /dev/null and b/business-css/frontend/src/assets/x6/save.png differ
diff --git a/business-css/frontend/src/components/antvg6/GraphCanvas.vue b/business-css/frontend/src/components/antvg6/GraphCanvas.vue
new file mode 100644
index 0000000..200c4b9
--- /dev/null
+++ b/business-css/frontend/src/components/antvg6/GraphCanvas.vue
@@ -0,0 +1,244 @@
+<!-- components/GraphCanvas.vue -->
+<script setup lang="ts">
+import { onMounted, ref, onBeforeUnmount } from 'vue';
+import { Graph, registerNode, Brush } from '@antv/g6';
+import { NodeItem, NodeType } from '@/types/graph';
+ 
+// 定义图形映射名称
+const NODE_LABEL_MAP: Record<NodeType, string> = {
+  cylinder_slot: '圆柱槽',
+  flat_slot: '扁平槽',
+  ring_slot: '环形槽',
+  tube_slot: '管形槽',
+  bar_stock: '棒料',
+  tapered_head: '锥形头',
+  monk_ring_slot: '僧帽环形槽',
+};
+ 
+// 自定义 G6 节点：根据 type 渲染不同形状和颜色
+const registerCustomNode = () => {
+  registerNode(
+    'custom-mechanical-node',
+    {
+      draw: (cfg, group) => {
+        const type = cfg?.type as NodeType;
+        let shape, color;
+ 
+        // 根据类型设置外观
+        switch (type) {
+          case 'cylinder_slot':
+            shape = group!.addShape('ellipse', {
+              attrs: {
+                x: 0,
+                y: 0,
+                rx: 40,
+                ry: 20,
+                fill: '#ffeaa7',
+                stroke: '#fab1a0',
+                lineWidth: 1.5,
+              },
+            });
+            break;
+          case 'flat_slot':
+            shape = group!.addShape('rect', {
+              attrs: {
+                x: -50,
+                y: -15,
+                width: 100,
+                height: 30,
+                fill: '#fdcb6e',
+                stroke: '#e17055',
+                radius: 4,
+                lineWidth: 1.5,
+              },
+            });
+            break;
+          case 'ring_slot':
+            shape = group!.addShape('circle', {
+              attrs: {
+                x: 0,
+                y: 0,
+                r: 30,
+                fill: '#a29bfe',
+                stroke: '#6c5ce7',
+                lineWidth: 2,
+                shadowBlur: 4,
+                shadowColor: 'rgba(108, 92, 231, 0.3)',
+              },
+            });
+            break;
+          case 'tube_slot':
+            shape = group!.addShape('path', {
+              attrs: {
+                path:
+                  'M -40 -20 L 40 -20 C 50 -20 50 20 40 20 L -40 20 C -50 20 -50 -20 -40 -20 Z M -30 -10 L 30 -10 L 30 10 L -30 10 Z',
+                fill: '#7bed9f',
+                stroke: '#00b894',
+                lineWidth: 1,
+              },
+            });
+            break;
+          case 'bar_stock':
+            shape = group!.addShape('rect', {
+              attrs: {
+                x: -45,
+                y: -10,
+                width: 90,
+                height: 20,
+                fill: '#fab1a0',
+                stroke: '#d63031',
+                lineWidth: 1.2,
+              },
+            });
+            break;
+          case 'tapered_head':
+            shape = group!.addShape('path', {
+              attrs: {
+                path: 'M -40 20 L 0 -25 L 40 20 L 20 20 L 0 -5 L -20 20 Z',
+                fill: '#fd79a8',
+                stroke: '#e84393',
+                lineWidth: 1.5,
+              },
+            });
+            break;
+          case 'monk_ring_slot':
+            shape = group!.addShape('path', {
+              attrs: {
+                path:
+                  'M -35 20 C -35 10, -25 -25, 0 -25 C 25 -25, 35 10, 35 20 C 35 20, 25 -10, 0 -10 C -25 -10, -35 20, -35 20 Z',
+                fill: '#6c5ce7',
+                stroke: '#55efc4',
+                lineWidth: 2,
+              },
+            });
+            break;
+          default:
+            shape = group!.addShape('circle', {
+              attrs: {
+                x: 0,
+                y: 0,
+                r: 20,
+                fill: '#ccc',
+                stroke: '#999',
+              },
+            });
+        }
+ 
+        // 添加文字标签
+        group!.addShape('text', {
+          attrs: {
+            text: NODE_LABEL_MAP[type] || '未知',
+            x: 0,
+            y: 40,
+            fontSize: 12,
+            textAlign: 'center',
+            textBaseline: 'middle',
+            fill: '#555',
+          },
+        });
+ 
+        return shape!;
+      },
+    },
+    'single-shape'
+  );
+};
+ 
+let graph: Graph | null = null;
+const container = ref<HTMLDivElement>();
+ 
+onMounted(() => {
+  if (!container.value) return;
+ 
+  // 注册自定义节点
+  registerCustomNode();
+ 
+  // 初始化 G6 图实例
+  graph = new Graph({
+    container: container.value!,
+    width: container.value.offsetWidth,
+    height: container.value.offsetHeight,
+    fitView: true,
+    fitViewPadding: 40,
+ 
+    // 默认节点配置
+    defaultNode: {
+      shape: 'custom-mechanical-node',
+      size: [80, 40],
+    },
+ 
+    // 交互模式
+    modes: {
+      default: [
+        'drag-canvas',   // 拖动画布
+        'zoom-canvas',   // 缩放 
+        'drag-node',     // 拖动节点
+      ],
+    },
+ 
+    // 启用 Brush 插件实现框选
+    plugins: [
+      new Brush({
+        brushType: 'rect', // 矩形框选
+        onSelect: (items) => {
+          console.log('Selected items:', items.map((i) => i.getModel()));
+        },
+        onDeselect: () => {
+          console.log('Deselected all');
+        },
+      })
+        brushType: 'rect', // 矩形框选
+        onSelect: (items) => {
+          console.log('Selected items:', items.map((i) => i.getModel()));
+        },
+        onDeselect: () => {
+          console.log('Deselected all');
+        },
+      }),
+    ],
+  });
+ 
+  // 初始空图
+  graph.data({ nodes: [], edges: [] });
+  graph.render();
+});
+ 
+onBeforeUnmount(() => {
+  if (graph) {
+    graph.destroy();
+    graph = null;
+  }
+});
+ 
+// 接收拖入事件
+defineExpose({
+  addNodeAtPosition(type: NodeType, x: number, y: number) {
+    if (!graph) return;
+ 
+    const modelId = `${type}_${Date.now()}`;
+    const nodeModel = {
+      id: modelId,
+      shape: 'custom-mechanical-node',
+      x,
+      y,
+      type: type,
+    };
+ 
+    graph.addItem('node', nodeModel);
+  },
+});
+</script>
+ 
+<template>
+  <div class="graph-container" ref="container"></div>
+</template>
+ 
+<style scoped>
+.graph-container {
+  flex: 1;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #f0f2f5;
+  position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/business-css/frontend/src/components/antvg6/LeftPanel.vue b/business-css/frontend/src/components/antvg6/LeftPanel.vue
new file mode 100644
index 0000000..ea26b44
--- /dev/null
+++ b/business-css/frontend/src/components/antvg6/LeftPanel.vue
@@ -0,0 +1,101 @@
+<!-- components/LeftPanel.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+import { NodeItem, NodeType } from '@/types/graph';
+ 
+const emit = defineEmits<{
+  (e: 'drag-start', nodeType: NodeType): void;
+  (e: 'drag-end'): void;
+}>();
+ 
+const nodes: NodeItem[] = [
+  { type: 'cylinder_slot', label: '圆柱槽' },
+  { type: 'flat_slot', label: '扁平槽' },
+  { type: 'ring_slot', label: '环形槽' },
+  { type: 'tube_slot', label: '管形槽' },
+  { type: 'bar_stock', label: '棒料' },
+  { type: 'tapered_head', label: '锥形头' },
+  { type: 'monk_ring_slot', label: '僧帽环形槽' },
+];
+ 
+const handleDragStart = (e: DragEvent, type: NodeType) => {
+  if (!e.dataTransfer) return;
+  e.dataTransfer.setData('text/plain', type);
+  emit('drag-start', type);
+};
+</script>
+ 
+<template>
+  <div class="left-panel">
+    <h3 class="panel-title">图形元件库</h3>
+    <div class="node-list">
+      <div
+        v-for="node in nodes"
+        :key="node.type"
+        class="node-item"
+        draggable 
+        @dragstart="handleDragStart($event, node.type)"
+      >
+        <span class="icon">⚙️</span>
+        <span class="label">{{ node.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+ 
+<style scoped>
+.left-panel {
+  width: 200px;
+  height: 100vh;
+  background-color: #f7f9fc;
+  border-right: 1px solid #ddd;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+ 
+.panel-title {
+  padding: 16px;
+  font-size: 18px;
+  color: #1a1a1a;
+  border-bottom: 1px solid #eee;
+  margin: 0;
+  background-color: #ffffff;
+}
+ 
+.node-list {
+  padding: 8px;
+  flex: 1;
+}
+ 
+.node-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  cursor: grab;
+  user-select: none;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+ 
+.node-item:hover {
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+ 
+.icon {
+  font-size: 16px;
+}
+ 
+.label {
+  font-size: 14px;
+  color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/business-css/frontend/src/components/antvg6/index.vue b/business-css/frontend/src/components/antvg6/index.vue
new file mode 100644
index 0000000..19c6fb6
--- /dev/null
+++ b/business-css/frontend/src/components/antvg6/index.vue
@@ -0,0 +1,414 @@
+<!-- AntV G6 Graph Component -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Graph,NodeEvent  } from '@antv/g6';
+
+const container = ref<HTMLElement | null>(null);
+let graph: Graph | null = null;
+// Device types data
+const deviceTypes = [
+  { id: 'device1', name: '圆柱槽', icon: '🟢',
+    img: 'http://localhost:3000/dev-api/avatar/1.png'
+   },
+  { id: 'device2', name: '扁平槽', icon: '🔵',
+    img: 'http://localhost:3000/dev-api/avatar/2.png'
+   },
+  { id: 'device3', name: '环形槽', icon: '🟢',
+    img: 'http://localhost:3000/dev-api/avatar/3.png'
+   }, 
+  { id: 'device4', name: '管束槽', icon: '🟢',
+    img: 'http://localhost:3000/dev-api/avatar/4.png'
+   }, 
+  { id: 'device5', name: '萃取柱', icon: '🟦',
+    img: 'http://localhost:3000/dev-api/avatar/5.png'
+   },
+  { id: 'device6', name: '流化床', icon: '🟦',
+    img: 'http://localhost:3000/dev-api/avatar/6.png'
+   },
+  { id: 'device7', name: '锥底环形槽', icon: '🟦',
+    img: 'http://localhost:3000/dev-api/avatar/7.png'
+   },
+];
+const data = {
+  nodes: [
+  ],
+  edges: [
+  ],
+};
+
+// Drag and drop functions
+const handleDragStart = (event: DragEvent, device: any) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/json', JSON.stringify(device));
+    event.dataTransfer.effectAllowed = 'copy';
+  }
+};
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'copy';
+  }
+};
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault();
+  if (!graph || !event.dataTransfer || !container.value) return;
+  
+  let newNode = null;
+  
+  try {
+    const deviceData = JSON.parse(event.dataTransfer.getData('application/json'));
+    let imgUrl = deviceData.img;
+ 
+    // Calculate coordinates relative to graph container
+    const rect = container.value.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    // const point = graph.getPointByClient(event.clientX, event.clientY);
+    // const x = point.x;
+    // const y = point.y;
+     const nodeId = 'node1-' + Date.now();
+    graph.addNodeData([
+      {
+        type: 'image',
+        id: nodeId,
+        img: imgUrl, // 图片地址
+         data: { label: '自定义图片1', status: 'online' },
+          style: {
+            x: x,
+            y: y,
+            size: 60,
+            src: imgUrl, // 图片地址
+            labelText: '111111111111',
+          },
+        },
+    ]);
+    graph.draw();
+  } catch (error) {
+    console.error('Error handling drop:', error);
+    console.error('Graph instance:', graph);
+    if (newNode) {
+      console.error('New node:', JSON.stringify(newNode, null, 2));
+    }
+  }
+};
+const dragelement = ref('');
+function setDragElement(type: string) {
+  dragelement.value = type;
+}
+const dragLineData = ref([{
+    stroke: '#333',
+    lineWidth: 2,
+    endArrow: false,
+    endArrowType: '',
+    endArrowSize: 10,
+  },{
+    stroke: '#333',
+    lineWidth: 2,
+    endArrow: true,
+    endArrowType: 'vee',
+    endArrowSize: 10,
+  },{
+    startArrow: true,
+    startArrowType: 'vee',
+    startArrowSize: 10,
+    endArrow: true,
+    endArrowType: 'vee',
+    endArrowSize: 10,
+    stroke: '#333',
+    lineWidth: 2
+  },{
+      stroke: '#333',
+      lineWidth: 2,
+      lineDash: [5, 5],
+  },{
+    stroke: '#333',
+    lineWidth: 2,
+    lineDash: [5, 5],
+    endArrow: true,
+    endArrowType: 'vee',
+    endArrowSize: 10,
+  },{
+    startArrow: true,
+    startArrowType: 'vee',
+    startArrowSize: 10,
+    lineDash: [5, 5],
+    endArrow: true,
+    endArrowType: 'vee',
+    endArrowSize: 10,
+    stroke: '#333',
+    lineWidth: 2
+  }]);
+const dragLine:any = ref({
+stroke: '#333',
+lineWidth: 2,
+lineDash: [5, 5],
+});
+const dragLineType = ref('实线');
+function setDragLineStyle(index: any, type: string) {
+  dragLine.value = dragLineData.value[index];
+  dragLineType.value = type;
+  //  graph.updateBehavior({
+  //   key: 'create-edge',
+  //   style: (edgeData:any) => {
+  //   debugger
+  //       return {
+  //         ...dragLine.value
+  //       };
+     
+  //   }
+  // });
+}
+onMounted(() => {
+  if (container.value) {
+    // Create G6 graph instance with data in constructor - G6 v4 compatible
+    graph = new Graph({
+      container: container.value,
+      width: container.value.offsetWidth,
+      height: container.value.offsetHeight,
+      node: {
+        type: 'image',
+        style: {
+          size: 80,
+          labelText: (d) => '',
+          src: (d: any) => d.img
+        },
+      },
+      edge: {
+        type: 'line',
+         style: (datum) => {
+      // 正确的动态样式配置方式
+          return dragLine.value
+        },
+        // style: {
+        //   lineDash: function (datum) {
+        //     if (dragLineType.value === '虚线' || dragLineType.value === '单箭头虚线' || dragLineType.value === '双箭头虚线') {
+        //       return [5, 5];
+        //     }
+        //     return [];
+        //   },
+        // }
+      },
+      behaviors: [
+        // 'drag-canvas',     // 允许拖拽画布
+        // 'zoom-canvas',     // 允许缩放画布
+        {
+          type: 'drag-element',
+          enable: (event:any) => {
+            // 只有当拖拽目标是节点且其id不为'fixedNode'时才允许拖拽
+            return dragelement.value === 'drag-element' ;
+          },
+        },    // 允许拖拽节点
+        {
+          type: 'create-edge',
+          trigger: 'drag',
+          enable: (event:any) => {
+            // 动态判断是否允许创建边
+            // 例如：只有按住 Shift 键时才允许连线
+            return dragelement.value === '' ;
+          },
+          // style:  dragLine.value,
+          style: (edgeData:any) => {
+            debugger
+        // 动态设置虚线还是实线
+        const baseStyle = dragLine.value;
+        if (edgeData.data && edgeData.data.isDashed) {
+          return {
+            ...baseStyle,
+            lineDash: [5, 5], // 虚线
+          };
+        } else {
+          return {
+            ...baseStyle,
+            lineDash: [], // 实线
+          };
+        }
+      },
+        },
+      ],
+      
+      data: data // Pass data directly in constructor
+    });
+
+    graph.on(NodeEvent.CLICK, (evt) => {
+      debugger
+        const { target } = evt;
+        const nodeId = target.id;
+        
+        // 在控制台输出点击的节点信息
+        console.log(`节点 ${nodeId} 被点击了`);
+        
+        // 获取节点数据
+        const nodeData = graph.getNodeData(nodeId);
+        console.log('节点数据:', nodeData);
+        
+        // 设置节点选中状态
+        graph.setElementState(nodeId, 'selected', true);
+      });
+    // Just render, no need for separate data() call
+  }
+});
+
+</script>
+ 
+<template>
+  <div class="app-layout">
+    <!-- Left Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-section">
+        <h3>设备</h3>
+        <div 
+          v-for="device in deviceTypes" 
+          :key="device.id"
+          class="device-item"
+          draggable="true"
+          @dragstart="handleDragStart($event, device)"
+        >
+          <div class="device-icon">
+            <img :src="device.img" alt="设备图标" style="width: 40px; height: 40px;">
+          </div>
+          <div class="device-name">{{ device.name }}</div>
+        </div>
+      </div>
+      
+      <div class="sidebar-section">
+        <h3>链接</h3>
+       
+         <div class="device-item" @click="setDragElement('drag-element')">
+            <div class="device-icon">↔️</div>
+            <div class="device-name">移动</div>
+          </div>
+        <div class="device-item" @click="setDragElement('')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">不移动</div>
+        </div>
+        <div class="device-item" @click="setDragLineStyle(0,'实线')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">实线</div>
+        </div>
+        <div class="device-item"  @click="setDragLineStyle(1,'单箭头实线')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">单箭头实线</div>
+        </div>
+        <div class="device-item" @click="setDragLineStyle(2,'双箭头实线')">
+          <div class="device-icon">⇄</div>
+          <div class="device-name">双箭头实线</div>
+        </div>
+        <div class="device-item" @click="setDragLineStyle(3,'虚线')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">虚线</div>
+        </div>
+         <div class="device-item"  @click="setDragLineStyle(4,'单箭头虚线')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">单箭头虚线</div>
+        </div>
+        <div class="device-item" @click="setDragLineStyle(5,'双箭头虚线')">
+          <div class="device-icon">⇄</div>
+          <div class="device-name">双箭头虚线</div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Graph Container -->
+    <div 
+      class="graph-container" 
+      ref="container"
+      @dragover="handleDragOver"
+      @drop="handleDrop"
+    ></div>
+  </div>
+</template>
+ 
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+ 
+.app-layout {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  font-family: 'Segoe UI', sans-serif;
+}
+ 
+/* Sidebar Styles */
+.sidebar {
+  width: 200px;
+  background-color: #ffffff;
+  border-right: 1px solid #e0e0e0;
+  overflow-y: auto;
+  padding: 16px;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+ 
+.sidebar-section {
+  margin-bottom: 24px;
+}
+ 
+.sidebar-section h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+ 
+.device-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 8px;
+  background-color: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  cursor: grab;
+  transition: all 0.2s ease;
+}
+ 
+.device-item:hover {
+  background-color: #f0f5ff;
+  border-color: #1890ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
+}
+ 
+.device-item:active {
+  cursor: grabbing;
+}
+ 
+.device-icon {
+  font-size: 24px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+ 
+.device-name {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+}
+ 
+/* Graph Container Styles */
+.graph-container {
+  flex: 1;
+  position: relative;
+  background-color: #fafafa;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+ 
+/* Drag and drop visual feedback */
+.graph-container.drag-over {
+  background-color: #e6f7ff;
+  border: 2px dashed #1890ff;
+}
+</style>
\ No newline at end of file
diff --git a/business-css/frontend/src/components/antvx6/index.vue b/business-css/frontend/src/components/antvx6/index.vue
new file mode 100644
index 0000000..9196d6e
--- /dev/null
+++ b/business-css/frontend/src/components/antvx6/index.vue
@@ -0,0 +1,1086 @@
+<!-- AntV G6 Graph Component -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import {  ElMessage } from "element-plus";
+import {
+  Clipboard,
+  Graph,
+  History,
+  Keyboard,
+  Selection,
+  Shape,
+  Snapline,
+  Stencil,
+  Transform
+} from '@antv/x6'
+// @ts-ignore
+import insertCss from 'insert-css'
+import { updateProjects} from "@/api/business/project";
+
+const emit = defineEmits([ 'closeAntvx6']);
+const props = defineProps({
+  projectInfo: {
+    required: false,
+    type: Object,
+    default: {}
+  },
+})
+const projectInfo:any = ref(props.projectInfo)
+const isDisplay = ref(true) // 是否显示
+// 为了协助代码演示
+let graph: Graph
+let currentArrowStyle = 'single' // 默认单箭头
+let currentLineStyle = 'solid' // 默认实线
+
+// 设置箭头样式
+// function setArrowStyle(style: 'single' | 'double' | 'none', lineStyle: 'solid' | 'dashed' = 'solid') {
+//   currentArrowStyle = style
+//   currentLineStyle = lineStyle
+//   // 重新配置连接线
+//   graph.options.connecting.createEdge = () => {
+//     const edge = new Shape.Edge({
+//       attrs: {
+//         line: {
+//           stroke: '#A2B1C3',
+//           strokeWidth: 2,
+//           strokeDasharray: lineStyle === 'dashed' ? 5 : 0,
+//           targetMarker: style === 'none' ? null : {
+//             name: 'block',
+//             width: 12,
+//             height: 8,
+//           },
+//           sourceMarker: style === 'double' ? {
+//             name: 'block',
+//             width: 12,
+//             height: 8,
+//           } : null,
+//         },
+//       },
+//       zIndex: 0,
+//     })
+//     return edge
+//   }
+// }
+
+onMounted(() => {
+  preWork()
+  // #region 初始化画布 
+  graph = new Graph({
+    container: document.getElementById('graph-container') as HTMLElement,
+    grid: true,
+    mousewheel: {
+      enabled: true,
+      zoomAtMousePosition: true,
+      modifiers: 'ctrl',
+      minScale: 0.5,
+      maxScale: 3,
+    },
+    connecting: {
+      router: 'manhattan',
+      connector: {
+        name: 'rounded',
+        args: {
+          radius: 8,
+        },
+      },
+      anchor: 'center',
+      connectionPoint: 'anchor',
+      allowBlank: false,
+      snap: {
+        radius: 20,
+      },
+      createEdge() {
+        return new Shape.Edge({
+          attrs: {
+            line: {
+              stroke: '#A2B1C3',
+              strokeWidth: 2,
+              strokeDasharray: 0,
+              targetMarker: {
+                name: 'block',
+                width: 12,
+                height: 8,
+              },
+              sourceMarker: null,
+            },
+          },
+          zIndex: 0,
+        })
+      },
+      validateConnection({ targetMagnet }) {
+        return !!targetMagnet
+      },
+    },
+    highlighting: {
+      magnetAdsorbed: {
+        name: 'stroke',
+        args: {
+          attrs: {
+            fill: '#5F95FF',
+            stroke: '#5F95FF',
+          },
+        },
+      },
+    },
+  })
+  // #endregion
+
+  // #region 使用插件
+  graph
+    .use(
+      new Transform({
+        resizing: false, // 通过拖拽边缘调整节点大小
+        rotating: true, // 允许旋转节点
+        // scaling 不是 Transform 插件的有效配置项，已移除
+      }),
+    )
+    .use(
+      new Selection({
+        rubberband: true,
+        showNodeSelectionBox: true,
+      }),
+    )
+    .use(new Snapline())
+    .use(new Keyboard())
+    .use(new Clipboard())
+    .use(new History())
+  // #endregion
+
+  // #region 初始化 stencil
+  const stencil = new Stencil({
+    title: '',
+    target: graph,
+    stencilGraphWidth: 300,
+    stencilGraphHeight: 180,
+    stencilGraphOptions: { panning: false },
+    collapsable: false,
+    groups: [
+    //    {
+    //   title: '基础流程图',
+    //   name: 'group1',
+    // },
+      {
+        collapsable: false,
+        title: '设备',
+        name: 'group2',
+        graphHeight: 550,
+        layoutOptions: {
+          rowHeight: 120,
+        },
+      },
+      {
+        collapsable: false,
+        title: '管线',
+        name: 'group3',
+        graphHeight: 400,
+        layoutOptions: {
+          rowHeight: 80,
+        },
+      },
+    ],
+    layoutOptions: {
+      columns: 2,
+      columnWidth: 140,
+      rowHeight: 100,
+    },
+  })
+graph.on('node:contextmenu', ({ e, node }) => {
+    selectedNode.value = node
+  e.preventDefault()
+  // 显示自定义上下文菜单，包含箭头样式选项
+  const pos = node.position?.() || { x: 0, y: 0 }
+  showContextMenu(pos.x, pos.y)
+})
+function showContextMenu(x: number, y: number) {
+left.value = x + 260
+top.value = y - 50
+
+isMenuShow.value = true
+  // 创建并显示上下文菜单
+  // 包含箭头样式选项
+}
+  // 监听Stencil内部的Dnd事件
+  stencil.on('dnd:start', (args:any) => {
+    console.log('Stencil节点开始拖拽', args)
+  })
+
+  stencil.on('dnd:drag', (args:any) => {
+    console.log('Stencil节点拖拽中', args)
+  })
+
+  stencil.on('dnd:end', (args:any) => {
+    console.log('Stencil节点结束拖拽', args)
+  })
+  document
+    .getElementById('stencil')
+    ?.appendChild(stencil.container as HTMLElement)
+
+    // 监听Graph中节点创建事件
+graph.on('node:added', (args) => {
+  console.log('节点已添加到画布', args)
+  const { node } = args
+  
+  // 检查是否是管线节点
+  if (node.data && node.data.lineStyle) {
+    // 应用管线样式到连接线
+    const lineStyle = node.data.lineStyle
+    graph.options.connecting.createEdge = () => {
+      return new Shape.Edge({
+        attrs: {
+          line: {
+            stroke: '#A2B1C3',
+            strokeWidth: 2,
+            strokeDasharray: lineStyle.strokeDasharray,
+            targetMarker: lineStyle.targetMarker,
+            sourceMarker: lineStyle.sourceMarker
+          }
+        },
+        zIndex: 0
+      })
+    }
+    // 移除管线节点，因为它只是一个样式选择器
+    setTimeout(() => {
+      graph.removeNode(node)
+    }, 100)
+  } else {
+    // 设置固定大小
+    node.size(160, 160)
+    // 去掉背景节点
+    node.attr('body/fill', 'none')
+    // 图片居中
+    node.attr('image/refX', 0)
+    node.attr('image/refY', 0)
+    node.attr('image/width', 160)      // 修改宽度
+    node.attr('image/height', 160)     // 修改高度
+    // 删除节点上的文字
+    node.attr('text/text', '')
+    node.attr('label/text', '')
+  }
+
+})
+  // #endregion
+
+  // #region 快捷键与事件
+  graph.bindKey(['meta+c', 'ctrl+c'], () => { 
+    const cells = graph.getSelectedCells()
+    if (cells.length) {
+      graph.copy(cells)
+    }
+    return false
+  })
+  graph.bindKey(['meta+x', 'ctrl+x'], () => {
+    const cells = graph.getSelectedCells()
+    if (cells.length) {
+      graph.cut(cells)
+    }
+    return false
+  })
+  graph.bindKey(['meta+v', 'ctrl+v'], () => {
+    if (!graph.isClipboardEmpty()) {
+      const cells = graph.paste({ offset: 32 })
+      graph.cleanSelection()
+      graph.select(cells)
+    }
+    return false
+  })
+
+  // undo redo
+  graph.bindKey(['meta+z', 'ctrl+z'], () => {
+    if (graph.canUndo()) {
+      graph.undo()
+    }
+    return false
+  })
+  graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
+    if (graph.canRedo()) {
+      graph.redo()
+    }
+    return false
+  })
+
+  // select all
+  graph.bindKey(['meta+a', 'ctrl+a'], () => {
+    const nodes = graph.getNodes()
+    if (nodes) {
+      graph.select(nodes)
+    }
+  })
+
+  // delete
+  graph.bindKey('backspace', () => {
+    debugger
+    const cells = graph.getSelectedCells()
+    if (cells.length) {
+      graph.removeCells(cells)
+    }
+  })
+
+  // zoom
+  graph.bindKey(['ctrl+1', 'meta+1'], () => {
+    const zoom = graph.zoom()
+    if (zoom < 1.5) {
+      graph.zoom(0.1)
+    }
+  })
+  graph.bindKey(['ctrl+2', 'meta+2'], () => {
+    const zoom = graph.zoom()
+    if (zoom > 0.5) {
+      graph.zoom(-0.1)
+    }
+  })
+
+  // 控制连接桩显示/隐藏
+  const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
+    for (let i = 0, len = ports.length; i < len; i += 1) {
+      ports[i].style.visibility = show ? 'visible' : 'hidden'
+    }
+  }
+  graph.on('node:mouseenter', () => {
+    const container = document.getElementById('graph-container') as HTMLElement
+    const ports = container.querySelectorAll(
+      '.x6-port-body',
+    ) as NodeListOf<SVGElement>
+    showPorts(ports, true)
+  })
+  graph.on('node:mouseleave', () => {
+    const container = document.getElementById('graph-container') as HTMLElement
+    const ports = container.querySelectorAll(
+      '.x6-port-body',
+    ) as NodeListOf<SVGElement>
+    showPorts(ports, false)
+  })
+  // #endregion
+
+  // #region 初始化图形
+  const ports = {
+    groups: {
+      top: {
+        position: 'top',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            fill: '#fff',
+            style: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+      right: {
+        position: 'right',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            fill: '#fff',
+            style: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+      bottom: {
+        position: 'bottom',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            fill: '#fff',
+            style: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+      left: {
+        position: 'left',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            fill: '#fff',
+            style: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+    },
+    items: [
+      {
+        group: 'top',
+      },
+      {
+        group: 'right',
+      },
+      {
+        group: 'bottom',
+      },
+      {
+        group: 'left',
+      },
+    ],
+  }
+  Graph.registerNode(
+    'custom-image',
+    {
+      inherit: 'rect',
+      width: 130,
+      height: 100,
+      markup: [
+        {
+          tagName: 'rect',
+          selector: 'body',
+        },
+        {
+          tagName: 'image',
+        },
+        {
+          tagName: 'text',
+          selector: 'label',
+        },
+      ],
+      attrs: {
+        body: {
+          stroke: 'transparent',
+          fill: '#f8f8f8',
+        },
+        image: {
+          width: 62,
+          height:84,
+          refX: 35,
+          refY: 0,
+        },
+        label: {
+          refX: 45,
+          refY: 80,
+          textAnchor: 'start',
+          textVerticalAnchor: 'top',
+          fontSize: 14,
+          fill: '#000',
+        },
+      },
+      ports: { ...ports },
+    },
+    true,
+  )
+
+// stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
+
+   const imageShapes = [
+    {
+      label: '圆柱槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/1.png',
+    },
+    {
+      label: '扁平槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/2.png',
+    },
+    {
+      label: '环形槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/3.png',
+    },
+    {
+      label: '管束槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/4.png',
+    },
+    {
+      label: '萃取柱',
+      image:
+        'http://localhost:3000/dev-api/avatar/5.png',
+    },
+    {
+      label: '流化床',
+      image:
+        'http://localhost:3000/dev-api/avatar/6.png',
+    },{
+      label: '锥底环形槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/7.png',
+    },
+  ]
+  const imageNodes = imageShapes.map((item) =>
+    graph.createNode({
+      shape: 'custom-image',
+      label: item.label,
+      attrs: {
+        image: {
+          'xlink:href': item.image,
+        },
+      },
+    }),
+  )
+  stencil.load(imageNodes, 'group2')
+  
+  // 创建管线节点
+  const lineShapes = [
+    {
+      label: '实线',
+      image:
+        'http://localhost:3000/dev-api/avatar/21.png',
+      targetMarker: null,
+      sourceMarker: null,
+      strokeDasharray: 0
+    },
+    {
+      label: '单箭头实线',
+      image:
+        'http://localhost:3000/dev-api/avatar/22.png',
+      targetMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      sourceMarker: null,
+      strokeDasharray: 0
+    },
+    {
+      label: '双箭头实线',
+      image:
+        'http://localhost:3000/dev-api/avatar/23.png',
+      targetMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      sourceMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      strokeDasharray: 0
+    },
+    {
+      label: '虚线',
+      image:
+        'http://localhost:3000/dev-api/avatar/24.png',
+      targetMarker: null,
+      sourceMarker: null,
+      strokeDasharray: 5
+    },
+    {
+      label: '单箭头虚线',
+      image:
+        'http://localhost:3000/dev-api/avatar/25.png',
+      targetMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      sourceMarker: null,
+      strokeDasharray: 5
+    },
+    {
+      label: '双箭头虚线',
+      image:
+        'http://localhost:3000/dev-api/avatar/26.png',
+      targetMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      sourceMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      strokeDasharray: 5
+    }
+  ]
+  
+  const lineNodes = lineShapes.map((item) => {
+    // 创建一个临时的边作为管线节点的视觉表示
+//  shape: 'custom-image',
+//       label: item.label,
+//       attrs: {
+//         image: {
+//           'xlink:href': item.image,
+//         },
+//       },
+    // 创建一个节点来显示管线样式
+    const node = graph.createNode({
+      shape: 'custom-image',
+      label: item.label,
+      width: 120,
+      height: 60,
+      attrs: {
+        image: {
+          'xlink:href': item.image,
+        },
+        body: {
+          stroke: 'transparent',
+          fill: 'transparent'
+        },
+        label: {
+          text: item.label,
+          refX: 60,
+          refY: 50,
+          textAnchor: 'middle',
+          fontSize: 12,
+          fill: '#666'
+        }
+      },
+      data: {
+        lineStyle: {
+          strokeDasharray: item.strokeDasharray,
+          targetMarker: item.targetMarker,
+          sourceMarker: item.sourceMarker
+        }
+      }
+    })
+    
+    return node
+  })
+  
+  stencil.load(lineNodes, 'group3')
+  // #endregion
+})
+
+function preWork() {
+  // 这里协助演示的代码，在实际项目中根据实际情况进行调整
+  const container = document.getElementById('container') as HTMLElement
+  const stencilContainer = document.createElement('div')
+  stencilContainer.id = 'stencil'
+  const graphContainer = document.createElement('div')
+  graphContainer.id = 'graph-container'
+  container.appendChild(stencilContainer)
+  container.appendChild(graphContainer)
+
+  insertCss(`
+    #container {
+      display: flex;
+      border: 1px solid #dfe3e8;
+      width: 100vw;
+      height: calc(100vh - 60px);
+    }
+    #stencil {
+      width: 300px;
+      height: 100%;
+      position: relative;
+      border-right: 1px solid #dfe3e8;
+    }
+    .x6-widget-stencil-content{
+      top:0px !important;
+    }
+      .x6-widget-stencil-title{
+      display: none;
+      }
+    #graph-container {
+      width: calc(100% - 180px);
+      height: 100%;
+    }
+    .x6-widget-stencil  {
+      background-color: #fff;
+    }
+    .x6-widget-stencil-title {
+      background-color: #fff;
+    }
+    .x6-widget-stencil-group-title {
+      background-color: #fff !important;
+    }
+    .x6-widget-transform {
+      margin: -1px 0 0 -1px;
+      padding: 0px;
+      border: 1px solid #239edd;
+    }
+    .x6-widget-transform > div {
+      border: 1px solid #239edd;
+    }
+    .x6-widget-transform > div:hover {
+      background-color: #3dafe4;
+    }
+    .x6-widget-transform-active-handle {
+      background-color: #3dafe4;
+    }
+    .x6-widget-transform-resize {
+      border-radius: 0;
+    }
+    .x6-widget-selection-inner {
+      border: 1px solid #239edd;
+    }
+    .x6-widget-selection-box {
+      opacity: 0;
+    }
+  `)
+}
+const left = ref(0) 
+const top = ref(0) 
+const isMenuShow = ref(false)
+const selectedNode:any = ref(null)
+function deleteNode() { // 删除节点
+  graph.removeNode(selectedNode.value)
+   isMenuShow.value = false
+}
+function copyNode() { // 复制节点
+  if (selectedNode.value) {
+    try {
+      // 获取当前节点的位置
+      const position = selectedNode.value.position()
+      // 创建新节点，使用节点的原始数据
+      const newNode = selectedNode.value.clone()
+      // 设置新位置（偏移50px）
+      newNode.position(position.x + 50, position.y + 50)
+      // 添加到画布
+      graph.addNode(newNode)
+       isMenuShow.value = false 
+    } catch (error) {
+      console.error('节点复制失败:', error)
+    }
+  }
+}
+
+
+function closeAntvx6() {
+  emit('closeAntvx6')
+}
+function saveDesign() { // 保存设计
+  try {
+    // 获取画布内容并转换为JSON
+    const designData = graph.toJSON()
+    console.log('designData', designData)
+    const topology = {
+      projectId: projectInfo.value.projectId,
+      name: projectInfo.value.name,
+      devices:[],
+      pipelines:[],
+      systemboundaries:[],
+      globalDisplay:{
+        device:{
+          showProperties:[]
+        },
+        material:{
+          showProperties:[]
+        },
+        designData:designData
+      }
+    }
+    // 添加保存信息
+    const saveData = {
+      id: projectInfo.value.projectId,
+      topology: JSON.stringify(topology)
+    }
+    updateProjects(saveData).then((res:any) => {
+      if(res.code === 200 || res.code === 200){
+        ElMessage.success('保存成功')
+      }
+    });
+    // 打印到控制台
+    console.log('保存的设计数据:', saveData)
+    
+    // 返回保存的数据
+    return saveData
+  } catch (error) {
+    console.error('保存设计失败:', error)
+    return null
+  }
+}
+</script>
+ 
+<template>
+  <div class="app-layout" @click="isMenuShow = false">
+    <!-- <div class="toolbar">
+      <div class="style-group">
+        <h4>实线</h4>
+        <button @click="setArrowStyle('single', 'solid')">单箭头</button>
+        <button @click="setArrowStyle('double', 'solid')">双箭头</button>
+        <button @click="setArrowStyle('none', 'solid')">无箭头</button>
+      </div>
+      <div class="style-group">
+        <h4>虚线</h4>
+        <button @click="setArrowStyle('single', 'dashed')">单箭头虚线</button>
+        <button @click="setArrowStyle('double', 'dashed')">双箭头虚线</button>
+        <button @click="setArrowStyle('none', 'dashed')">无箭头虚线</button>
+      </div>
+    </div> -->
+    <div class="antvx6-header">
+      <div class="header-left-box">
+        <div class="return-icon-box" @click="closeAntvx6">
+          <img src="@/assets/x6/return.png" alt="图标" title="返回工作台" style="cursor: pointer;">
+        </div>
+        <div class="project-name">{{ projectInfo.name }}</div>
+        <div class="return-icon-box">
+          <img src="@/assets/x6/add.png" alt="图标" title="新增模拟分析" style="cursor: pointer;">
+        </div>
+        <div class="return-icon-box">
+          <img src="@/assets/x6/history.png" alt="图标" title="历史模拟分析" style="cursor: pointer;">
+        </div>
+      </div>
+      <div class="header-content-box">
+        <div class="operation-icon-box">
+          <img src="@/assets/x6/revoke.png">
+          <div class="operation-icon-text">撤销</div>
+        </div>
+        <div class="operation-icon-box">
+          <img src="@/assets/x6/redo.png">
+          <div class="operation-icon-text">重做</div>
+        </div>
+        <div class="operation-icon-box">
+          <img src="@/assets/x6/magnify.png">
+          <div class="operation-icon-text">放大</div>
+        </div>
+        <div class="operation-icon-box">
+          <img src="@/assets/x6/reduce.png">
+          <div class="operation-icon-text">缩小</div>
+        </div>
+        <div class="operation-icon-box" @click="isDisplay = !isDisplay">
+          <img v-if="isDisplay" src="@/assets/x6/display.png">
+          <img v-else src="@/assets/x6/hide.png">
+          <div class="operation-icon-text">显示</div>
+        </div>
+        <div class="operation-icon-box" @click="saveDesign">
+          <img src="@/assets/x6/save.png">
+          <div class="operation-icon-text">保存</div>
+        </div>
+      </div>
+      <div class="header-left-box"></div>
+    </div>
+    <div id="container" style="position: relative;">
+        <div class="context-menu" v-if="isMenuShow"
+    :style="{left: left +'px', top: top+'px'}">
+      <img src="@/assets/x6/info.png" alt="图标" title="设备信息" style="cursor: pointer;">
+      <img src="@/assets/x6/material.png" alt="图标" title="物料信息"  style="cursor: pointer;">
+      <img src="@/assets/x6/change.png" alt="图标" title="变动设置"  style="cursor: pointer;">
+      <img src="@/assets/x6/copy.png" alt="图标" title="复制"  style="cursor: pointer;" @click="copyNode">
+      <img src="@/assets/x6/del.png" alt="图标" title="删除"  style="cursor: pointer;"
+      @click="deleteNode">
+  </div>
+    </div>
+  
+  </div>
+</template>
+ 
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+ 
+.app-layout {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.toolbar {
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.style-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-right: 20px;
+}
+
+.style-group h4 {
+  margin: 0 0 5px 0;
+  font-size: 14px;
+  color: #333;
+  font-weight: 600;
+}
+
+.toolbar button {
+  padding: 8px 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s;
+  white-space: nowrap;
+}
+
+.toolbar button:hover {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.toolbar button:active {
+  background-color: #f0f0f0;
+}
+ 
+/* Sidebar Styles */
+.sidebar {
+  width: 200px;
+  background-color: #ffffff;
+  border-right: 1px solid #e0e0e0;
+  overflow-y: auto;
+  padding: 16px;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+ 
+.sidebar-section {
+  margin-bottom: 24px;
+}
+ 
+.sidebar-section h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+ 
+.device-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 8px;
+  background-color: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  cursor: grab;
+  transition: all 0.2s ease;
+}
+ 
+.device-item:hover {
+  background-color: #f0f5ff;
+  border-color: #1890ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
+}
+ 
+.device-item:active {
+  cursor: grabbing;
+}
+ 
+.device-icon {
+  font-size: 24px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+ 
+.device-name {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+}
+ 
+/* Graph Container Styles */
+.graph-container {
+  flex: 1;
+  position: relative;
+  background-color: #fafafa;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+ 
+/* Drag and drop visual feedback */
+.graph-container.drag-over {
+  background-color: #e6f7ff;
+  border: 2px dashed #1890ff;
+}
+.context-menu{
+  position: absolute;
+  z-index: 9999;
+  background-color: #fff;
+  border: 1px solid #dfe3e8;
+  border-radius: 4px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
+  width: 240px;
+  height: 40px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+</style>
+<style>
+  .x6-widget-stencil-content{
+    top:0px !important;
+  }
+  .antvx6-header{
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  .header-left-box{
+    width: 400px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+  }
+  .header-content-box{
+     display: flex;
+    align-items: center;
+  }
+  .return-icon-box {
+    width: 30px;
+    height: 30px;
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    cursor: pointer;
+    margin-right: 10px;
+  }
+  .return-icon-box:hover{
+    background-color: #eeeeee;
+    border-radius: 4px;
+  }
+  .antvx6-header .project-name{
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 16px;
+    color: #333333;
+    margin-right: 10px;
+  }
+ .antvx6-header .operation-icon-box{
+    width: 46px;
+    height: 46px;
+    display:flex;
+    align-content:center;
+    justify-content: center;
+    flex-wrap: wrap; 
+    cursor: pointer;
+    margin-right: 20px;
+    font-family: '微软雅黑';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 12px;
+    color: #4B4B4B;
+    padding-top: 5px;
+  }
+ .antvx6-header .operation-icon-box:hover{
+    background-color: #eeeeee;
+    border-radius: 4px;
+  }
+  .operation-icon-text{
+    width: 100%;
+    text-align: center;
+    padding-top: 5px;
+  }
+</style>
\ No newline at end of file
diff --git a/business-css/frontend/src/types/graph.ts b/business-css/frontend/src/types/graph.ts
new file mode 100644
index 0000000..2eecf41
--- /dev/null
+++ b/business-css/frontend/src/types/graph.ts
@@ -0,0 +1,15 @@
+// types/graph.ts
+export type NodeType =
+  | 'cylinder_slot'
+  | 'flat_slot'
+  | 'ring_slot'
+  | 'tube_slot'
+  | 'bar_stock'
+  | 'tapered_head'
+  | 'monk_ring_slot';
+ 
+export interface NodeItem {
+  type: NodeType;
+  label: string;
+  icon?: string; // 可选图标字符或SVG路径
+}
\ No newline at end of file
diff --git a/business-css/frontend/src/views/business/project/index.vue b/business-css/frontend/src/views/business/project/index.vue
index 7f0291e..cb7350f 100644
--- a/business-css/frontend/src/views/business/project/index.vue
+++ b/business-css/frontend/src/views/business/project/index.vue
@@ -10,6 +10,8 @@ import { ElForm, ElMessage, ElMessageBox } from "element-plus";
 import { searchProjectsLsit,addProjects,updateProjects,deleteProjects,deleteBatchProjects} from "@/api/business/project";
 import Page from '@/components/Pagination/page.vue'
 import ScenarioModel from '@/views/component/scenario/index.vue'
+import Antvx6 from '@/components/antvx6/index.vue'
+const isShowAntvx6 = ref(false); // 是否展示分析设计弹窗
 const isScenario = ref(false) //是否展示历史模拟场景
 // 搜索框
 const queryParams = ref({
@@ -111,12 +113,16 @@ const rules = ref({
   code: [{ required: true, message: "请输入项目编码", trigger: "blur" }],
 });
 //修改项目
-function editClick(row: any) {
+function editClick(row: any) { // 打开修改项目弹窗
   title.value = "修改项目";
   info.value = JSON.parse(JSON.stringify(row));
   dialogVisible.value = true;
 }
-function simulationClick(row: any) {
+function designClick(row: any) { // 打开分析设计
+  info.value = JSON.parse(JSON.stringify(row));
+  isShowAntvx6.value = true;
+}
+function simulationClick(row: any) { // 打开模拟分析
   info.value = JSON.parse(JSON.stringify(row));
   isScenario.value = true;
 }
@@ -185,6 +191,12 @@ function dateFormat(row: any) {
 onMounted(() => {
   gettableData();
 });
+
+// 关闭分析设计弹窗
+function closeAntvx6() {
+  gettableData();
+  isShowAntvx6.value = false;
+}
 </script>
 
 <template>
@@ -224,7 +236,7 @@ onMounted(() => {
               <img  src="@/assets/table/edit.png" alt="" title="修改"
                 @click="editClick(scope.row)" style="cursor: pointer; ">
               <img  src="@/assets/table/design.png" alt="" title="分析设计"
-               style="cursor: pointer; ">
+               style="cursor: pointer; " @click="designClick(scope.row)">
               <img  src="@/assets/table/simulation.png" alt="" title="模拟分析"
               @click="simulationClick(scope.row)"
                 style="cursor: pointer; ">
@@ -237,9 +249,7 @@ onMounted(() => {
         </el-table-column>
       </el-table>
       <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="gettableData()" ></Page>
-
     </div>
-
     <el-dialog v-model="dialogVisible" :close-on-click-modal="false"
     :modal="false" draggable :before-close="handleClose" :title="title"
       append-to-body width="620px" height="600px">
@@ -267,7 +277,9 @@ onMounted(() => {
       <ScenarioModel v-if="isScenario"  :projectInfo="info" ref="Scenario" />
     </el-dialog>
 
-   
+    <div v-if="isShowAntvx6" style="position: fixed;top: 0px;left: 10px; width: 100vw;height: 100vh;background-color: #fff;z-index: 9999;">
+      <Antvx6 ref="antvx6" v-if="isShowAntvx6" :projectInfo="info"   @closeAntvx6="closeAntvx6"/>
+    </div>
   </div>
 </template>
 
diff --git a/business-css/frontend/types/graph.ts b/business-css/frontend/types/graph.ts
new file mode 100644
index 0000000..2eecf41
--- /dev/null
+++ b/business-css/frontend/types/graph.ts
@@ -0,0 +1,15 @@
+// types/graph.ts
+export type NodeType =
+  | 'cylinder_slot'
+  | 'flat_slot'
+  | 'ring_slot'
+  | 'tube_slot'
+  | 'bar_stock'
+  | 'tapered_head'
+  | 'monk_ring_slot';
+ 
+export interface NodeItem {
+  type: NodeType;
+  label: string;
+  icon?: string; // 可选图标字符或SVG路径
+}
\ No newline at end of file