fix

@@ -65,6 +65,11 @@ const router = createRouter({
       name: 'edge-arrow',
       component: () => import('../views/edge/arrow.vue')
     },
+    {
+      path: '/theme',
+      name: 'theme',
+      component: () => import('../views/theme/index.vue')
+    },
   ]
 })
 

 <!--
  * @Date: 2025-03-10 14:37:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-12 15:31:05
+ * @LastEditTime: 2025-03-12 16:29:56
  * @FilePath: /logic-flow2/src/views/home.vue
  * @Description: 文件描述
 -->
@@ -17,6 +17,7 @@
   <el-button type="primary" @click="goTo('edge-custom')">edge-custom</el-button>
   <el-button type="primary" @click="goTo('edge-text')">edge-text</el-button>
   <el-button type="primary" @click="goTo('edge-arrow')">edge-arrow</el-button>
+  <el-button type="primary" @click="goTo('theme')">theme</el-button>
 </template>
 
 <script setup>

+/*
+ * @Date: 2025-03-12 17:05:09
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-12 17:06:34
+ * @FilePath: /logic-flow2/src/views/theme/customEdge.js
+ * @Description: 文件描述
+ */
+import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core';
+
+class CustomEdgeModel extends PolylineEdgeModel {
+  // 始终显示锚点
+  getEdgeStyle() {
+    const style = super.getEdgeStyle();
+    return {
+      ...style,
+      hideAnchor: false  // 强制显示锚点
+    };
+  }
+}
+
+class CustomEdge extends PolylineEdge {
+  // 可选：自定义锚点渲染方式
+  getEndArrow() {
+    // 保持原有箭头逻辑
+    return super.getEndArrow();
+  }
+}
+
+export default {
+  type: 'custom-edge',
+  model: CustomEdgeModel,
+  view: CustomEdge,
+}

+<!--
+ * @Date: 2025-03-10 16:52:35
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-12 18:00:09
+ * @FilePath: /logic-flow2/src/views/theme/index.vue
+ * @Description: 主题 Theme
+-->
+<template>
+  <div class="container">
+    <div ref="container" class="flow-container"></div>
+  </div>
+</template>
+
+<script setup>
+import LogicFlow from "@logicflow/core";
+import CustomEdge from "./CustomEdge";
+
+const container = ref(null);
+let lf = null;
+
+onMounted(() => {
+  // 方法1：new LogicFlow时作为配置传入
+  const config = {
+    domId: "app",
+    width: 1000,
+    height: 800,
+    style: {
+      // 设置默认主题样式
+      // rect: { ... }, // 矩形样式
+      // circle: { ... }, // 圆形样式
+      // nodeText: { ... }, // 节点文本样式
+      // edgeText: { ... }, // 边文本样式
+      // anchor: { ... }, // 锚点样式
+      // ...,
+    },
+  };
+
+  // 方法2： 调用LogicFlow的setTheme方法
+  // lf.setTheme({ // 设置默认主题样式
+  //   rect: {...}, // 矩形样式
+  //   circle: {...}, // 圆形样式
+  //   nodeText: {...}, // 节点文本样式
+  //   edgeText: {...}, // 边文本样式
+  //   anchor: {...}, // 锚点样式
+  //   ...
+  // })
+
+  lf = new LogicFlow({
+    container: container.value,
+    grid: true,
+  });
+
+  lf.setTheme({
+    rect: {
+      fill: "#FFFFFF",
+      stroke: "rgba(68, 83, 130, 0.25)",
+      strokeWidth: 1,
+      anchorShow: true, // 强制显示锚点
+      anchorHoverShow: true, // 保持 hover 效果
+    },
+    circle: {
+      // 新增圆形节点配置
+      anchorShow: true, // 强制显示锚点
+      anchorHoverShow: true,
+    },
+    anchor: {
+      stroke: "#4d53e8",
+      fill: "#4d53e8",
+      r: 3,
+      show: true, // 新增：全局显示锚点
+      hover: {
+        fill: "#949494",
+        fillOpacity: 0.5,
+        stroke: "#949494",
+        r: 10,
+      },
+    },
+  });
+
+  lf.register(CustomEdge);
+
+  // 使用自定义连线类型
+  lf.setDefaultEdgeType("custom-edge");
+
+  lf.render({
+    nodes: [
+      { id: "node1", type: "rect", x: 200, y: 100 },
+      { id: "node2", type: "circle", x: 400, y: 100 },
+      { id: '7', type: 'html', x: 600, y: 320 },
+    ],
+    edges: [
+      { id: "edge1", sourceNodeId: "node1", targetNodeId: "node2", type: "custom-edge" },
+    ],
+  });
+
+  lf.on("node:render", (node) => {
+    const { nodeConfig } = node;
+    // 设定锚点
+    nodeConfig.anchors = [
+      { x: 0.5, y: 0 }, // 上部中间
+      { x: 0.5, y: 1 }, // 下部中间
+    ];
+    // 也可以设置其他锚点
+  });
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.flow-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+</style>