### 🎨 几何图形画布编辑器

你现在是一位资深前端工程师，精通 Canvas/SVG 绘图、图形变换数学（平移、旋转、缩放）与交互设计。你的任务是设计并实现一个面向教师教学示范的 2D 几何图形画布编辑器网页，需完整覆盖以下功能模块：

**一、入口页**
- 页面上展示「平移」与「旋转」两张可点击卡片。
- 用户点击任一卡片后，跳转进入图形编辑页面（两张卡片进入的是同一个编辑页，仅在初始提示或默认选中工具上有所区分）。

**二、编辑页布局**
- 上方为画布区域，占据页面主体高度（建议 ≥ 70% 视口高度），带浅色网格背景与坐标参考线。
- 下方为图形素材区，横向排列可拖拽的平面图形：等腰三角形、等边三角形、直线、矩形、圆。

**三、拖拽添加图形**
- 支持鼠标按住底部图形，拖动至画布上方，画布需实时高亮提示可放置区域。
- 松开鼠标左键后，图形以拖放落点为中心被创建在画布中，并立即进入选中状态。
- 支持同一图形多次拖入；支持选中、移动、删除（如 Delete 键或删除按钮）。

**四、属性编辑面板**
- 图形被选中后，在其附近（或画布侧边固定面板）出现编辑控件，随图形类型显示对应属性：
  - 直线：长度、旋转、粗细、颜色
  - 三角形（等腰 / 等边）：边长、旋转、填充色、描边色、描边粗细
  - 矩形：宽、高、旋转、填充色、描边色、描边粗细
  - 圆：半径、旋转（或起始角）、填充色、描边色、描边粗细
- 数值类属性以输入框 + 滑块组合呈现，拖动时画布实时更新。

**五、旋转交互（核心）**
- 用户选择「旋转」项后，进入旋转模式：在图形上或图形旁生成一个可拖拽的基点（旋转中心），基点旁显示旋转标识（如双向弧形箭头图标）。
- 按住鼠标左键拖动该标识或图形外的旋转控制点，即可围绕基点旋转图形，角度实时更新。
- 旋转过程中实时显示角度数值，角度以水平线为 0° 基准，逆时针为正、顺时针为负，输出格式如 `45°` / `-120°`。
- 松开鼠标后角度确定，同时可手动输入精确角度值；基点位置可由用户自行拖动调整。

**六、输出约束**
- 技术栈：HTML + CSS + 原生 JavaScript（或 Canvas API / SVG），单文件即可运行，不依赖构建工具。
- 代码结构：按「数据模型（图形对象）—渲染层—交互层—属性面板」分层组织，注释使用中文。
- 语言风格：界面文案为简体中文，风格简洁、面向教学场景，字号与控件尺寸适配课堂投屏。
- 篇幅：给出完整可运行的代码，并附关键实现思路说明（不超过 300 字）。

**七、质量标准**
- 拖拽、旋转、属性修改必须流畅无卡顿，操作响应延迟低于 100ms。
- 旋转角度计算准确，任意基点位置下角度显示误差不超过 1°。
- 图形变换后不出现形变、闪烁或坐标漂移。
- 交互反馈清晰：选中态、悬停态、拖拽态均有明显视觉区分。
- 界面干净有序，符合教师课堂演示的直观性要求，无需查阅说明即可上手。

**示例引导**
示例输入：用户将「等腰三角形」拖入画布，选中后点击「旋转」，拖动旋转标识绕基点转动。
期望输出：三角形实时绕基点旋转，旁边浮层显示 `旋转角度：37°`，属性面板中「旋转」输入框同步显示 37。