perf(views): 优化“无监测点房间”控件样式

src/views/EnvArea/Graphics.vue

@@ -183,11 +183,11 @@ const assetsChange = () => {
       .space-item-no-monitor {
         height: 140px;
         background: repeating-linear-gradient(
-          -45deg,
+          -60deg,
           #f1f1f1,
-          #f1f1f1 6px,
-          #d4d8d7 6px,
-          #d4d8d7 12px
+          #f1f1f1 7px,
+          #d4d8d7 7px,
+          #d4d8d7 14px
         );
         border-radius: 12px;
         cursor: pointer;

src/views/EnvArea/pens/monitorNoRoom.ts

@@ -12,8 +12,9 @@ export function monitorNoRoom(ctx: CanvasRenderingContext2D, pen: Pen): void {
   ctx.save();
 
   // 条纹参数
-  const stripeSpacing = 12;
+  const stripeSpacing = 14; // 垂直方向间距
   const stripeColor = "#d4d8d7";
+  const stripeAngle = 120; // 角度调整为120度
 
   // 1. 绘制灰色背景
   ctx.beginPath();
@@ -26,25 +27,41 @@ export function monitorNoRoom(ctx: CanvasRenderingContext2D, pen: Pen): void {
   ctx.roundRect(rectX, rectY, rectWidth, rectHeight, radius);
   ctx.clip();
 
-  // 3. 计算斜线参数（修正方向算法）
-  const diagonal = Math.sqrt(rectWidth ** 2 + rectHeight ** 2);
-  const bStep = stripeSpacing * Math.sqrt(2); // 修正步长算法
+  // 3. 计算斜线参数
+  const angleRad = (stripeAngle * Math.PI) / 180;
+  const slope = Math.tan(angleRad); // tan(120°) = -√3 ≈ -1.732
 
-  // 4. 动态计算绘制范围（解决窄矩形问题）
-  const startB = rectY - rectX - diagonal * 2; // 扩展起始位置
-  const endB = rectY + rectHeight + rectX + diagonal * 2; // 扩展结束位置
+  // 计算实际步长（根据垂直间距换算）
+  const bStep = Math.abs(stripeSpacing / Math.cos(angleRad)); // 保持步长为正数
 
-  // 5. 绘制斜线（修正坐标计算）
+  // 4. 动态计算绘制范围
+  const diagonal = Math.hypot(rectWidth, rectHeight);
+  const offset = diagonal * 2; // 扩展绘制范围的安全值
+
+  // 计算截距范围（考虑坐标系方向和负斜率）
+  const minB = rectY - slope * (rectX + rectWidth + offset) - offset;
+  const maxB = rectY + rectHeight - slope * (rectX - offset) + offset;
+
+  // 5. 绘制斜线条纹
   ctx.strokeStyle = stripeColor;
-  ctx.lineWidth = 6;
+  ctx.lineWidth = 7;
+
+  // 调整绘制顺序确保覆盖
+  const startB = Math.min(minB, maxB);
+  const endB = Math.max(minB, maxB);
 
   for (let b = startB; b <= endB; b += bStep) {
     ctx.beginPath();
-    ctx.moveTo(rectX - diagonal, -(rectX - diagonal) + b);
-    ctx.lineTo(
-      rectX + rectWidth + diagonal,
-      -(rectX + rectWidth + diagonal) + b
-    );
+
+    // 计算线段起点终点（考虑负斜率）
+    const startX = rectX - offset;
+    const startY = slope * startX + b;
+
+    const endX = rectX + rectWidth + offset;
+    const endY = slope * endX + b;
+
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
     ctx.stroke();
   }