fix(canvas): replace native frame options with a custom menu

src/components/canvas/frame-node.tsx

@@ -4,9 +4,9 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { NodeToolbar, Position, useViewport, type NodeProps } from "@xyflow/react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import type { CanvasNode } from "@/lib/canvas";
-import type { FrameLabelMode } from "@/lib/canvas-elements";
 import { NodeEditing, TransformableNode } from "./transformable-node";
 import { FrameFeedback } from "./frame-feedback";
+import { FrameLabelMenu } from "./frame-label-menu";
 import styles from "./canvas.module.css";
 
 export function FrameNode(props: NodeProps<CanvasNode>) {
@@ -34,9 +34,7 @@ export function FrameNode(props: NodeProps<CanvasNode>) {
         onPointerDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()} onDoubleClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
         <input className={styles.frameNameInput} aria-label="分区名称" value={title} maxLength={300} onChange={(event) => setTitle(event.target.value)} onBlur={() => { if (cancelBlur.current) cancelBlur.current = false; else saveTitle(); }}
           onKeyDown={(event) => { if (event.key === "Enter" && !event.nativeEvent.isComposing) { event.currentTarget.blur(); } if (event.key === "Escape") { cancelBlur.current = true; setTitle(data.title); event.currentTarget.blur(); } }} />
-        <select aria-label="分区名称显示模式" value={mode} onChange={(event) => editing.frame(id, { labelMode: event.target.value as FrameLabelMode })}>
-          <option value="hidden">隐藏名称</option><option value="fixed">固定字号</option><option value="scaled">随画布缩放</option>
-        </select>
+        <FrameLabelMenu value={mode} change={(labelMode) => editing.frame(id, { labelMode })} />
         <span className={styles.frameMemberCount}>{count} 项内容</span>
       </motion.div>}</AnimatePresence>
     </NodeToolbar>