fix: .

public/icons/chuang.svg

@@ -1,3 +1,7 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 14H26V13H32V19H0V13H6V14ZM6 17V18H26V17H6ZM6 16H26V15H6V16Z" fill="black"/>
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 13.5H6.5V18.5H0.5L0.5 13.5Z" stroke="black"/>
+<path d="M26 13.5H32V18.5H26L26 13.5Z" stroke="black"/>
+<path d="M6.5 14.5L26 14.5" stroke="black"/>
+<path d="M6.63379 16.5L26.1338 16.5" stroke="black"/>
+<path d="M6.63379 18.5L26.1338 18.5" stroke="black"/>
 </svg>

public/icons/loudao.svg

@@ -1,3 +1,19 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 30H2V2H30V30ZM3 29H14V27H3V29ZM15 29H17V3H15V29ZM18 24V29H29V24H18ZM3 26H14V24H3V26ZM18 21V23H29V21H18ZM3 23H14V21H3V23ZM18 18V20H29V18H18ZM3 20H14V18H3V20ZM18 15V17H29V15H18ZM3 17H14V15H3V17ZM18 12V14H29V12H18ZM3 14H14V12H3V14ZM18 9V11H29V9H18ZM3 11H14V9H3V11ZM18 6V8H29V6H18ZM3 8H14V3H3V8ZM18 5H29V3H18V5Z" fill="black"/>
+<path d="M2.5 2.5L29.5 2.5V29.5H2.5V2.5Z" stroke="black"/>
+<path d="M14.5 2.5V29.5" stroke="black"/>
+<path d="M17.5 2.5V29.5" stroke="black"/>
+<path d="M17.6337 5.5H29.6337" stroke="black"/>
+<path d="M17.6337 8.5H29.6337" stroke="black"/>
+<path d="M17.6337 11.5H29.6337" stroke="black"/>
+<path d="M17.6337 14.5H29.6337" stroke="black"/>
+<path d="M17.6337 17.5H29.6337" stroke="black"/>
+<path d="M17.6337 20.5H29.6337" stroke="black"/>
+<path d="M17.6337 23.5H29.6337" stroke="black"/>
+<path d="M2.49994 8.5H14.4999" stroke="black"/>
+<path d="M2.49994 11.5H14.4999" stroke="black"/>
+<path d="M2.49994 14.5H14.4999" stroke="black"/>
+<path d="M2.49994 17.5H14.4999" stroke="black"/>
+<path d="M2.49994 20.5H14.4999" stroke="black"/>
+<path d="M2.49994 23.5H14.4999" stroke="black"/>
+<path d="M2.49994 26.5H14.4999" stroke="black"/>
 </svg>

public/icons/luodichuang.svg

@@ -1,15 +1,19 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 14H7V15H6V16H26V13H32V19H26V17H6V18H7V19H0V13H6V14Z" fill="black"/>
-<path d="M10 19H8V18H10V19Z" fill="black"/>
-<path d="M13 19H11V18H13V19Z" fill="black"/>
-<path d="M16 19H14V18H16V19Z" fill="black"/>
-<path d="M19 19H17V18H19V19Z" fill="black"/>
-<path d="M22 19H20V18H22V19Z" fill="black"/>
-<path d="M25 19H23V18H25V19Z" fill="black"/>
-<path d="M10 15H8V14H10V15Z" fill="black"/>
-<path d="M13 15H11V14H13V15Z" fill="black"/>
-<path d="M16 15H14V14H16V15Z" fill="black"/>
-<path d="M19 15H17V14H19V15Z" fill="black"/>
-<path d="M22 15H20V14H22V15Z" fill="black"/>
-<path d="M25 15H23V14H25V15Z" fill="black"/>
+<path d="M0.5 13.5H5.5V18.5H0.5L0.5 13.5Z" stroke="black"/>
+<path d="M26.5 13.5H31.5V18.5H26.5L26.5 13.5Z" stroke="black"/>
+<path d="M5.5 16.5H26.5" stroke="black"/>
+<path d="M5.5 18.5H7" stroke="black"/>
+<path d="M8 18.5H10" stroke="black"/>
+<path d="M11 18.5H13" stroke="black"/>
+<path d="M14 18.5H16" stroke="black"/>
+<path d="M17 18.5H19" stroke="black"/>
+<path d="M20 18.5H22" stroke="black"/>
+<path d="M23 18.5H25" stroke="black"/>
+<path d="M5.5 14.5H7" stroke="black"/>
+<path d="M8 14.5H10" stroke="black"/>
+<path d="M11 14.5H13" stroke="black"/>
+<path d="M14 14.5H16" stroke="black"/>
+<path d="M17 14.5H19" stroke="black"/>
+<path d="M20 14.5H22" stroke="black"/>
+<path d="M23 14.5H25" stroke="black"/>
 </svg>

public/icons/men.svg

@@ -1,3 +1,6 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.6934 9.10552C14.7979 6.69092 19.2421 5.66348 25.0107 6.00005H27V19H32V25H26V21H24V6.95513C18.9215 6.79206 15.0279 7.77807 12.3066 9.89458C9.40522 12.1513 7.3048 15.2111 6 19.085V25H0V19H5.00195C5.00196 18.9477 5.00791 18.8943 5.02539 18.8418C6.38912 14.7506 8.61318 11.5012 11.6934 9.10552ZM25 20H26V7.00005H25V20Z" fill="black"/>
+<path d="M5.5 19.5C5.5 19.5 7.78572 12 12.5 9C17.2143 5.99996 24.5 6.5 24.5 6.5" stroke="black"/>
+<path d="M0.5 19.5H5.5V24.5H0.5L0.5 19.5Z" stroke="black"/>
+<path d="M26.5 19.5H31.5V24.5H26.5L26.5 19.5Z" stroke="black"/>
+<path d="M24.5 6.5H26.5V20.5H24.5L24.5 6.5Z" stroke="black"/>
 </svg>

public/icons/men_l.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.5 19.5C26.5 19.5 24.2143 12 19.5 9C14.7857 5.99996 7.5 6.5 7.5 6.5" stroke="black"/>
+<path d="M31.5 19.5H26.5V24.5H31.5L31.5 19.5Z" stroke="black"/>
+<path d="M5.5 19.5H0.5V24.5H5.5L5.5 19.5Z" stroke="black"/>
+<path d="M7.5 6.5H5.5V20.5H7.5L7.5 6.5Z" stroke="black"/>
+</svg>

public/icons/piaochuang.svg

@@ -1,3 +1,7 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M28 18H31V24H1V18H4V8H28V18ZM7 23H25V11H7V23ZM5 18H6V10H26V18H27V9H5V18Z" fill="#000000"/>
+<path d="M4.5 18.5V8.5H27.5V18.5" stroke="black"/>
+<path d="M6.5 18.5V10.5H25.5V18.5" stroke="black"/>
+<path d="M1.5 18.5H6.5V23.5H1.5L1.5 18.5Z" stroke="black"/>
+<path d="M25.5 18.5H30.5V23.5H25.5L25.5 18.5Z" stroke="black"/>
+<path d="M6.5 23.5H25.5" stroke="black"/>
 </svg>

public/icons/shuangkaimen.svg

@@ -1,3 +1,7 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M27 6V19H32V25H26V21H24V7C20.6219 7 17.5683 10.7476 16.4881 15.6085C16.3721 16.1305 15.6279 16.1305 15.5119 15.6085C14.4317 10.7476 11.3781 7 8 7V21H6V25H0V19H5V6H8C11.4106 6 14.3809 9.06895 15.8843 13.2894L16 13.626L16.0132 13.5857C17.4486 9.31052 20.3762 6.14339 23.768 6.00474L24 6H27ZM26 20V7H25V20H26ZM7.001 7H6.001V20H7.001V7Z" fill="black"/>
+<path d="M0.5 19.5H5.5V24.5H0.5L0.5 19.5Z" stroke="black"/>
+<path d="M26.5 19.5H31.5V24.5H26.5L26.5 19.5Z" stroke="black"/>
+<path d="M24.5 6.5H26.5V20.5H24.5L24.5 6.5Z" stroke="black"/>
+<path d="M5.5 6.5H7.5V20.5H5.5L5.5 6.5Z" stroke="black"/>
+<path d="M7.5 6.50176C7.5 6.50176 10.6667 6.50176 13.5 9.50176C16.3333 12.5018 16 15.5018 16 15.5018C16 15.5018 15.5 12.6782 18.5 9.50176C21.5 6.3253 24.5 6.50176 24.5 6.50176" stroke="black"/>
 </svg>

public/icons/yakou.svg

@@ -1,11 +1,14 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.9971 18H8.99707V17H10.9971V18Z" fill="black"/>
-<path d="M14.9971 18H12.9971V17H14.9971V18Z" fill="black"/>
-<path d="M18.9971 18H16.9971V17H18.9971V18Z" fill="black"/>
-<path d="M22.9971 18H20.9971V17H22.9971V18Z" fill="black"/>
-<path d="M10.9971 15H8.99707V14H10.9971V15Z" fill="black"/>
-<path d="M14.9971 15H12.9971V14H14.9971V15Z" fill="black"/>
-<path d="M18.9971 15H16.9971V14H18.9971V15Z" fill="black"/>
-<path d="M22.9971 15H20.9971V14H22.9971V15Z" fill="black"/>
-<path d="M28 13H32V19H28V21H4V19H0V13H4V11H28V13ZM5 13H7V19H5V20H27V19H25V13H27V12H5V13Z" fill="black"/>
+<path d="M0.5 13.5H6.5V18.5H0.5L0.5 13.5Z" stroke="black"/>
+<path d="M25.5 13.5L31.5 13.5V18.5L25.5 18.5L25.5 13.5Z" stroke="black"/>
+<path d="M27.5 13.5L27.4999 11.5L4.5 11.5002L4.50007 13.5002" stroke="black"/>
+<path d="M4.49982 18.5L4.49989 20.5L27.4998 20.4997L27.4998 18.4997" stroke="black"/>
+<path d="M9 14.5H11" stroke="black"/>
+<path d="M13 14.5H15" stroke="black"/>
+<path d="M17 14.5H19" stroke="black"/>
+<path d="M21 14.5H23" stroke="black"/>
+<path d="M9 17.5H11" stroke="black"/>
+<path d="M13 17.5H15" stroke="black"/>
+<path d="M17 17.5H19" stroke="black"/>
+<path d="M21 17.5H23" stroke="black"/>
 </svg>

public/icons/yandao.svg

@@ -1,4 +1,5 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M28 28H4V4H28V28ZM5 27H26.4844L22.1865 9.81152L5 5.51465V27ZM23.0127 8.9873L27 24.9365V5H7.0625L23.0127 8.9873Z" fill="black"/>
-<path d="M30 30H2V2H30V30ZM3 29H29V3H3V29Z" fill="black"/>
+<path d="M4.5 4.5L22.5 9.5L27.5 27.5" stroke="black"/>
+<path d="M2.5 2.5L29.5 2.5V29.5H2.5V2.5Z" stroke="black"/>
+<path d="M4.5 4.5H27.5L27.5 27.5H4.50001L4.5 4.5Z" stroke="black"/>
 </svg>

public/icons/yimen.svg

@@ -1,3 +1,6 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M32 19H13V16H6V19H0V13H19V16H26V13H32V19ZM14 18H26V17H14V18ZM6 15H18V14H6V15Z" fill="black"/>
+<path d="M0.5 13.5H5.5V18.5H0.5L0.5 13.5Z" stroke="black"/>
+<path d="M26.5 13.5H31.5V18.5H26.5L26.5 13.5Z" stroke="black"/>
+<path d="M13.4999 16.5H26.5L26.5001 18.5H13.5L13.4999 16.5Z" stroke="black"/>
+<path d="M5.5 13.5H18.5001L18.5002 15.5H5.50007L5.5 13.5Z" stroke="black"/>
 </svg>

public/icons/zhuzi.svg

@@ -1,3 +1,5 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 30H2V2H30V30ZM3.70703 29H28.293L16 16.707L3.70703 29ZM16.707 16L29 28.293V3.70703L16.707 16ZM3 28.293L15.293 16L3 3.70703V28.293ZM16 15.293L28.293 3H3.70703L16 15.293Z" fill="black"/>
+<path d="M2.5 2.5L29.5 29.5" stroke="black"/>
+<path d="M29.5 2.5L2.5 29.5" stroke="black"/>
+<path d="M2.5 2.5L29.5 2.5V29.5H2.5V2.5Z" stroke="black"/>
 </svg>

src/core/components/line/attach-view.ts

@@ -69,22 +69,37 @@ export const extendLinesOverlap = (
   type ResultJoin = ReturnType<typeof getExtendPolygons>;
   const joins = ref<ResultJoin[]>([]);
 
-  const updateJoins = (points: LineData["points"]) => {
-
-    
-    watch(getJoinLine(data, line1, points[1].id), (joinLines, _, onCleanup) => {
-      for (let j = 0; j < joinLines.length; j++) {
-        const key = [points[0].id, points[1].id, joinLines[j].points[1].id];
-        if (has(key)) continue;
-        set(key);
-        const polygons = getExtendPolygons({ ...line1, points }, joinLines[j]);
-        joins.value.push(polygons);
-        onCleanup(() => {
-          const ndx = joins.value.indexOf(polygons);
-          ~ndx && joins.value.splice(ndx, 1);
-        });
-      }
+  const updateJoins = (rev = false) => {
+    const points = computed(() => {
+      const pointIds = rev ? [line1.b, line1.a] : [line1.a, line1.b]
+      return pointIds.map(
+        (id) => data.points.find((item) => item.id === id)!
+      )
     });
+
+    watch(
+      () => getJoinLine(data, line1, points.value[1].id),
+      (joinLines) => {
+        for (let j = 0; j < joinLines.length; j++) {
+          const key = [points.value[0].id, points.value[1].id, joinLines[j].points[1].id];
+          if (has(key)) continue;
+          set(key);
+          watchEffect((onCleanup) => {
+            console.log(points.value)
+            const polygons = getExtendPolygons(
+              { ...line1, points: points.value },
+              joinLines[j]
+            );
+            joins.value.push(polygons);
+            onCleanup(() => {
+              const ndx = joins.value.indexOf(polygons);
+              ~ndx && joins.value.splice(ndx, 1);
+            });
+          });
+        }
+      },
+      { immediate: true }
+    );
   };
 
   const stopWatch = watch(
@@ -93,13 +108,8 @@ export const extendLinesOverlap = (
       if (!data.lines.includes(line1)) {
         return stopWatch();
       }
-
-      const points = [line1.a, line1.b].map(
-        (id) => data.points.find((item) => item.id === id)!
-      );
-      const groupPoints = [[...points], [...points].reverse()];
-      updateJoins(groupPoints[0]);
-      updateJoins(groupPoints[1]);
+      updateJoins(false);
+      updateJoins(true);
     },
     { immediate: true }
   );