新增: 批注/备注/对齐分布/形状扩充/video 元素——编辑器能力增强

src/styles/editor.css

@@ -72,7 +72,7 @@
 }
 .canvas-frame {
   position: relative;
-  width: min(100%, calc((100vh - 54px - 56px) * 16 / 9));
+  width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
   max-width: 100%;
   aspect-ratio: 16 / 9;
   box-shadow: var(--shadow-md); border-radius: 4px; overflow: hidden;
@@ -83,7 +83,78 @@
   width: 1280px; height: 720px;
   transform-origin: top left;
 }
-.canvas-status { margin-top: 10px; font-size: 12px; color: var(--ui-muted); }
+.canvas-footer {
+  margin-top: 10px;
+  flex: none;
+  width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.canvas-status { font-size: 12px; color: var(--ui-muted); flex: none; }
+.note-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 13px;
+  background: transparent;
+  color: var(--ui-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background .15s, color .15s, border-color .15s;
+}
+.note-toggle:hover {
+  background: var(--ui-primary-soft);
+  color: var(--ui-primary);
+}
+.note-toggle.active {
+  color: var(--ui-primary);
+  border-color: var(--ui-border);
+  background: var(--ui-panel);
+}
+.note-toggle-icon { font-size: 13px; line-height: 1; }
+.note-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--ui-primary);
+}
+.canvas-note {
+  margin-top: 8px;
+  flex: none;
+  /* 与 .canvas-frame 同宽，保持对齐 */
+  width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
+  max-width: 100%;
+}
+.canvas-note-input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  min-height: 44px;
+  max-height: 120px;
+  padding: 8px 12px;
+  border: 1px solid var(--ui-border);
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--ui-text);
+  background: var(--ui-panel);
+  font-family: inherit;
+  outline: none;
+  transition: border-color .15s, box-shadow .15s;
+}
+.canvas-note-input:focus {
+  border-color: var(--ui-primary);
+  box-shadow: 0 0 0 3px var(--ui-primary-soft);
+}
+.canvas-note-input::placeholder {
+  color: var(--ui-muted);
+}
 
 /* ---------- 画布元素 ---------- */
 .el { position: absolute; overflow: hidden; }
@@ -107,7 +178,41 @@
 .el-stat .num { font-weight: 800; line-height: 1; }
 .el-stat .label { margin-top: .35em; text-align: center; }
 .el-shape { width: 100%; height: 100%; }
+/* 形状文字层：覆盖在图形上方、居中；颜色默认白（形状为填充色底），字号/粗斜继承 style。
+   padding 稍大：clip-path 多边形（箭头/星形等）边缘收窄，文字留出安全区 */
+.el-shape-text {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8% 12%;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  word-break: break-word;
+  text-align: center;
+  outline: none;
+}
+/* rect/椭圆这类满幅形状，文字安全区可以小 */
+.el[data-type="shape"][data-shape="rect"] > .el-shape-text,
+.el[data-type="shape"][data-shape="circle"] > .el-shape-text,
+.el[data-type="shape"][data-shape="ellipse"] > .el-shape-text {
+  padding: 6px 10px;
+}
+/* 空形状不显示文字占位：装饰形状（分隔条/小三角）保持纯净，
+   加文字的引导由属性面板「内容」输入框承担 */
 .el-image { width: 100%; height: 100%; object-fit: cover; }
+.el-video { width: 100%; height: 100%; background: #000; border-radius: 8px; display: block; }
+/* 视频缩略图降级：不加载视频，poster 静态图 / 黑底▶占位 */
+.el-video-thumb {
+  width: 100%; height: 100%;
+  background: #0f172a;
+  border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  overflow: hidden;
+}
+.el-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.el-video-thumb-play { color: rgba(255,255,255,.75); font-size: 28px; }
 /* 空图片元素占位（未填 content 时不渲染裂图） */
 .el-image-empty {
   width: 100%; height: 100%;