# 添加规则方格子四个角点

## 实现目标

在画布上添加有规则的点，类似方格子但只展示四个角上的点，支持缩放、拖动交互，并适配亮色和暗色主题。

## 实现步骤

### 1. 修改.scene-container的背景样式

* 将当前的随机装饰点替换为规则的方格子四个角点

* 使用CSS radial-gradient创建点效果

* 通过多个渐变层组合实现四个角的点

* 设置合适的background-size控制方格大小

### 2. 适配亮色主题

* 为亮色主题设置合适的点颜色和大小

* 确保点与背景对比度适中

### 3. 适配暗色主题

* 为暗色主题单独设置点颜色

* 保持与暗色背景的良好对比度

### 4. 确保交互兼容性

* 点网格应随画布缩放和拖动保持正确位置

* 不影响现有卡片元素的交互

## 技术实现

通过修改CSS样式，使用多个radial-gradient层和background-position属性来创建规则的方格子四个角点。具体实现如下：

```css
/* 亮色主题 */
.scene-container {
  background: 
    /* 背景渐变 */
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(243, 244, 246, 0.9) 100%),
    /* 方格子四个角点 */
    radial-gradient(circle at 0 0, rgba(107, 70, 193, 0.3) 2px, transparent 3px),
    radial-gradient(circle at 100% 0, rgba(107, 70, 193, 0.3) 2px, transparent 3px),
    radial-gradient(circle at 0 100%, rgba(107, 70, 193, 0.3) 2px, transparent 3px),
    radial-gradient(circle at 100% 100%, rgba(107, 70, 193, 0.3) 2px, transparent 3px);
  background-size: 100% 100%, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
  background-position: center center, 0 0, 0 0, 0 0, 0 0;
}

/* 暗色主题 */
html.dark .scene-container {
  background: 
    /* 背景渐变 */
    radial-gradient(ellipse at center, rgba(31, 41, 55, 0.9) 0%, rgba(17, 24, 39, 0.9) 100%),
    /* 方格子四个角点 */
    radial-gradient(circle at 0 0, rgba(167, 139, 250, 0.4) 2px, transparent 3px),
    radial-gradient(circle at 100% 0, rgba(167, 139, 250, 0.4) 2px, transparent 3px),
    radial-gradient(circle at 0 100%, rgba(167, 139, 250, 0.4) 2px, transparent 3px),
    radial-gradient(circle at 100% 100%, rgba(167, 139, 250, 0.4) 2px, transparent 3px);
  background-size: 100% 100%, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
  background-position: center center, 0 0, 0 0, 0 0, 0 0;
}
```

## 预期效果

* 画布上出现规则排列的方格子，每个方格的四个角上有一个点

* 方格大小为50px x 50px，点大小为2px

* 点的颜色适配当前主题

* 缩放和拖动画布时，点网格保持正确的位置关系

* 不影响现有卡片元素的交互