@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/design/canvas/panels/controls/pattern-params.tsx

@@ -27,6 +27,13 @@ const TEXTURE_LABELS: Record<PatternTextureId, () => string> = {
   wave: m.canvas_patternTexture_wave,
 }
 
+/** 图片填充 URL 协议守卫：仅放行 http(s) 与 data:image（预设纹理为 data:image/svg+xml）。
+ * 任意字符串入库会让协作文档其他成员的浏览器向任意 URL 发起图片请求
+ * （IP/追踪面），非法 URL 也只表现为静默加载失败。 */
+function isPaintableImageUrl(url: string): boolean {
+  return /^https?:\/\//i.test(url) || /^data:image\//i.test(url)
+}
+
 export function PatternTexturePicker({
   url,
   disabled = false,
@@ -149,8 +156,12 @@ export function ImagePaintFields({
 
   const commitUrl = (): void => {
     const next = urlDraft.trim()
-    if (next.length > 0 && next !== value.url) onChange({ ...value, url: next })
-    else setUrlDraft(value.url)
+    // 轻量协议校验：不合法时回退原值（协作文档场景防任意 URL 图片请求）
+    if (next.length > 0 && next !== value.url && isPaintableImageUrl(next)) {
+      onChange({ ...value, url: next })
+    } else {
+      setUrlDraft(value.url)
+    }
   }
 
   return (

package/src/components/design/canvas/panels/controls/pointer-drag.ts

@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { useCallback, useEffect, useRef } from "react"
+
+/**
+ * document 级指针拖拽会话（pointerId 过滤 + window blur 兜底）。
+ *
+ * 统一 number-drag-input / gradient-editor 两处手写实现：监听挂载/卸载、
+ * 拖拽自然结束（pointerup / pointercancel / blur）回调、以及组件卸载时的
+ * 强制中断（只清理监听，不再触发提交——此前卸载后监听滞留至下次 pointerup，
+ * 还会用冻结草稿向已卸载组件提交一次）。
+ */
+export type PointerDragStart = (opts: {
+  pointerId: number
+  onMove: (ev: PointerEvent) => void
+  /** 拖拽自然结束时调用一次 */
+  onEnd: () => void
+  /** 组件卸载导致的中断：仅清理，不提交（可选） */
+  onCancel?: () => void
+}) => void
+
+type DragSession = { stop: (cancelled: boolean) => void }
+
+export function usePointerDrag(): PointerDragStart {
+  const sessionRef = useRef<DragSession | null>(null)
+
+  useEffect(() => {
+    return () => {
+      sessionRef.current?.stop(true)
+      sessionRef.current = null
+    }
+  }, [])
+
+  return useCallback<PointerDragStart>((opts) => {
+    const { pointerId, onMove, onEnd, onCancel } = opts
+    let stopped = false
+    const docMove = (ev: PointerEvent): void => {
+      if (ev.pointerId !== pointerId) return
+      onMove(ev)
+    }
+    const stop = (cancelled: boolean): void => {
+      if (stopped) return
+      stopped = true
+      sessionRef.current = null
+      document.removeEventListener("pointermove", docMove)
+      document.removeEventListener("pointerup", docUp)
+      document.removeEventListener("pointercancel", docUp)
+      window.removeEventListener("blur", onBlur)
+      if (cancelled) onCancel?.()
+      else onEnd()
+    }
+    const docUp = (ev: PointerEvent): void => {
+      if (ev.pointerId !== pointerId) return
+      stop(false)
+    }
+    // 拖出窗口外释放时 pointerup 可能不触发，用 window blur 兜底
+    const onBlur = (): void => stop(false)
+    document.addEventListener("pointermove", docMove)
+    document.addEventListener("pointerup", docUp)
+    document.addEventListener("pointercancel", docUp)
+    window.addEventListener("blur", onBlur)
+    sessionRef.current = { stop }
+  }, [])
+}

package/src/components/design/canvas/panels/controls/shader-picker-utils.ts

@@ -56,7 +56,7 @@ export function presetPreviewBackground(def: ShaderPresetDef): string {
     case "swirl":
       return `conic-gradient(from 0deg at 50% 50%, ${c0}, ${c1}, ${c2 ?? c0}, ${c3 ?? c1}, ${c0})`
     case "paper-texture":
-      return `repeating-linear-gradient(45deg, ${c2} 0 1px, transparent 1px 4px), linear-gradient(120deg, ${c1}, ${c0})`
+      return `repeating-linear-gradient(45deg, ${c2 ?? c0} 0 1px, transparent 1px 4px), linear-gradient(120deg, ${c1}, ${c0})`
     case "halftone-dots":
       return `radial-gradient(${c0} 0 26%, transparent 27%) 0 0 / 7px 7px, ${c1}`
     default:

package/src/components/design/canvas/panels/controls/shader-picker.tsx

@@ -173,7 +173,9 @@ function numOf(value: unknown, fallback: number): number {
   return typeof value === "number" && Number.isFinite(value) ? value : fallback
 }
 
-function isColorString(value: unknown): value is string {
+// shader 上下文只需要 hex 字面色（props 缩略/色板选择器输入口径），与 paints.ts
+// 支持 rgba/oklch 等现代色型的 isColorString 同名异义——显式改名区分，防误用
+function isHexColorString(value: unknown): value is string {
   return typeof value === "string" && /^#[0-9a-fA-F]{3,8}$/.test(value)
 }
 
@@ -333,7 +335,7 @@ function BusinessParams({
     .map(([key, v]) => (
       <ShaderColorList
         key={key}
-        colors={(v as unknown[]).filter(isColorString)}
+        colors={(v as unknown[]).filter(isHexColorString)}
         max={colorListMax}
         disabled={mixed}
         onChange={(colors) => emitProps({ colors }, false)}
@@ -342,7 +344,7 @@ function BusinessParams({
     ))
 
   const colorNodes = entries.flatMap(([key, v]) => {
-    if (key === "colors" || !isColorString(v)) return []
+    if (key === "colors" || !isHexColorString(v)) return []
     return [
       <div key={key} role="group" aria-label={paramLabel(key)} className="flex items-center gap-1.5">
         <span className="w-16 shrink-0 truncate text-[10px] text-muted-foreground">{paramLabel(key)}</span>
@@ -396,7 +398,7 @@ function BusinessParams({
     ))
 
   const enumNodes = entries
-    .filter(([key, v]) => typeof v === "string" && !isColorString(v) && ENUM_OPTIONS[def.id]?.[key])
+    .filter(([key, v]) => typeof v === "string" && !isHexColorString(v) && ENUM_OPTIONS[def.id]?.[key])
     .map(([key, v]) => {
       const options = ENUM_OPTIONS[def.id][key]
       const current = options.includes(v as string) ? (v as string) : options[0]
@@ -426,6 +428,26 @@ function BusinessParams({
       )
     })
 
+  // 防御性兜底：既非颜色也非已登记枚举的 string 参数（新增预设 defaultProps
+  // 扩展时可能出现）——提供通用文本输入，避免参数静默不可见不可调
+  const textNodes = entries
+    .filter(([key, v]) => typeof v === "string" && !isHexColorString(v) && !ENUM_OPTIONS[def.id]?.[key])
+    .map(([key, v]) => (
+      <div key={key} className="flex h-7 items-center gap-1.5 rounded-md bg-muted/50 px-2">
+        <span className="w-16 shrink-0 truncate text-[10px] text-muted-foreground">{paramLabel(key)}</span>
+        <input
+          aria-label={paramLabel(key)}
+          type="text"
+          value={v as string}
+          disabled={mixed}
+          spellCheck={false}
+          onChange={(e) => emitProps({ [key]: e.target.value }, true)}
+          onBlur={(e) => emitProps({ [key]: e.target.value }, false)}
+          className="h-full min-w-0 flex-1 bg-transparent text-right text-xs outline-none select-text"
+        />
+      </div>
+    ))
+
   return (
     <div className="flex flex-col gap-1">
       {colorListNode}
@@ -433,6 +455,7 @@ function BusinessParams({
       <div className="grid grid-cols-2 gap-1">{numberNodes}</div>
       {booleanNodes}
       {enumNodes}
+      {textNodes}
     </div>
   )
 }

package/src/components/design/canvas/panels/controls/use-pointer-drag.ts

@@ -0,0 +1,84 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { useCallback, useEffect, useRef } from "react"
+
+/**
+ * document 级指针拖拽生命周期公共底座（number-drag-input / gradient-editor 等
+ * 拖拽数值控件共用）。
+ *
+ * 统一三件套，避免各控件手写漂移：
+ * ① pointerId 过滤（多指触控/异源指针事件不串扰）
+ * ② window blur 兜底（拖出窗口外释放时 pointerup 可能不派发）
+ * ③ 组件卸载清理——拖拽中途面板被卸载时移除 document 监听且不再回调 onEnd
+ *   （旧的两份手写实现分别存在「卸载后仍以冻结草稿提交一次」与「监听滞留至
+ *   下次 pointerup」缺陷）。
+ *
+ * 回调经 ref 每次渲染刷新，document 监听闭包始终调用最新实现；同一时刻仅
+ * 允许一个拖拽会话（活动会话未结束时 startDrag 为 no-op，由消费方状态守卫
+ * 双保险）。
+ */
+export type PointerDragHandlers = {
+  /** 拖拽移动（已按 pointerId 过滤），收指针 client 坐标 */
+  onMove?: (clientX: number, clientY: number) => void
+  /** 拖拽结束（pointerup / pointercancel / window blur）。组件卸载不回调 */
+  onEnd?: () => void
+}
+
+export function usePointerDrag({ onMove, onEnd }: PointerDragHandlers) {
+  // 稳定化回调：监听闭包经 ref 转发，消费方无需 useMemo/useCallback 包裹
+  const handlersRef = useRef({ onMove, onEnd })
+  handlersRef.current = { onMove, onEnd }
+  // 活动会话的清理函数：卸载 effect 据此统一摘除监听
+  const cleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    const cleanup = cleanupRef
+    return () => {
+      cleanup.current?.()
+      cleanup.current = null
+    }
+  }, [])
+
+  const startDrag = useCallback((e: { pointerId: number }): void => {
+    if (cleanupRef.current) return // 已有拖拽进行中
+    const pointerId = e.pointerId
+    let ended = false
+
+    const onDocMove = (ev: PointerEvent): void => {
+      if (ev.pointerId !== pointerId) return
+      handlersRef.current.onMove?.(ev.clientX, ev.clientY)
+    }
+    const onDocUp = (ev: PointerEvent): void => {
+      if (ev.pointerId !== pointerId) return
+      endSession()
+    }
+    const endSession = (): void => {
+      if (ended) return
+      ended = true
+      detachListeners()
+      cleanupRef.current = null
+      handlersRef.current.onEnd?.()
+    }
+    // 拖出窗口外释放时 pointerup 可能不触发，用 window blur 兜底
+    const onBlur = (): void => endSession()
+
+    function detachListeners(): void {
+      document.removeEventListener("pointermove", onDocMove)
+      document.removeEventListener("pointerup", onDocUp)
+      document.removeEventListener("pointercancel", onDocUp)
+      window.removeEventListener("blur", onBlur)
+    }
+
+    document.addEventListener("pointermove", onDocMove)
+    document.addEventListener("pointerup", onDocUp)
+    document.addEventListener("pointercancel", onDocUp)
+    window.addEventListener("blur", onBlur)
+    // 卸载路径仅摘除监听，不回调 onEnd（组件已销毁，不得再 setState/commit）
+    cleanupRef.current = () => {
+      ended = true
+      detachListeners()
+    }
+  }, [])
+
+  return { startDrag }
+}

package/src/components/design/canvas/panels/frame-property-panel.tsx

@@ -15,13 +15,12 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { m } from "@/paraglide/messages.js";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
-  SquareRoundCorner,
   Lock,
   LockOpen,
   X,
@@ -47,6 +46,7 @@ import { useCanvasSnapshot, useCanvasStore } from "../react/canvas-hooks"
 import { ColorPaintPicker } from "./controls/color-paint-picker";
 import { NumberDragInput } from "./controls/number-drag-input";
 import { CollapsibleSection } from "./fields/collapsible-section";
+import { CORNER_ICON_ITEMS } from "./panel-data";
 
 const FRAME_PRESET_LABELS: Record<FramePresetKind, () => string> = {
   desktop: m.canvas_frame_desktop,
@@ -57,14 +57,14 @@ const FRAME_PRESET_LABELS: Record<FramePresetKind, () => string> = {
 
 const FRAME_PRESET_ORDER: FramePresetKind[] = ["desktop", "tablet", "mobile", "custom"];
 
-// 圆角图标默认是右上角圆角：
-// TL=-90°（逆时针） TR=0° BR=+90°（顺时针） BL=180°
-const CORNER_ICONS = [
-  <SquareRoundCorner className="-rotate-90" />,
-  <SquareRoundCorner />,
-  <SquareRoundCorner className="rotate-90" />,
-  <SquareRoundCorner className="rotate-180" />,
-];
+// 圆角图标单一来源是 panel-data 的 CORNER_ICON_ITEMS（icon 存组件引用 + 角位
+// 旋转类），此处按 slot 渲染为 ReactNode——避免同一组常量两处维护漂移。
+// 角位语义：TL=-90°（逆时针） TR=0° BR=+90°（顺时针） BL=180°
+function CornerIcon({ slot }: { slot: 0 | 1 | 2 | 3 }): ReactNode {
+  const item = CORNER_ICON_ITEMS[slot];
+  const Icon = item.icon;
+  return <Icon className={item.className} />;
+}
 
 const round = (value: number): number => Math.round(value);
 
@@ -117,9 +117,13 @@ export function FramePropertyPanel({ node, className }: FramePropertyPanelProps)
   };
 
   // 画板颜色：从 fills 数组的第一个 solid paint 读取（style-mapper 从 fills 生成 style.fill 渲染）
-  const firstPaint = node.fills?.find((p) => p.type === "solid" && p.visible) ?? node.fills?.[0];
-  const fill = firstPaint?.type === "solid" ? firstPaint.color : "#ffffff";
-  const fillOpacity = typeof firstPaint?.opacity === "number" ? firstPaint.opacity : 1;
+  // 首层非 solid（渐变/图片/着色器）时取色器曾呈 #ffffff 假状态且改动静默无效
+  //（firstSolidIdx === -1 命中 i===0 分支但 paint 非 solid 原样保留）——改为提示走填充列表
+  const fills = node.fills ?? [];
+  const firstSolidPaint = fills.find((p) => p.type === "solid" && p.visible);
+  const nonSolidOnly = fills.length > 0 && !firstSolidPaint;
+  const fill = firstSolidPaint?.type === "solid" ? firstSolidPaint.color : "#ffffff";
+  const fillOpacity = typeof firstSolidPaint?.opacity === "number" ? firstSolidPaint.opacity : 1;
 
   return (
     // h-full 锁定面板高度（两处宿主均为 flex 布局）：其余小节固定，仅快速调整内部滚动
@@ -199,25 +203,29 @@ export function FramePropertyPanel({ node, className }: FramePropertyPanelProps)
 
       <CollapsibleSection title={m.canvas_fills()} className="shrink-0">
         <div className="flex items-center gap-2">
-          <ColorPaintPicker
-            color={fill}
-            opacity={fillOpacity}
-            onChange={(color, opacity) => {
-              // 写 fills 数组（渲染真源）；style.fill 会被 style-mapper 从 fills 覆盖，写它无效
-              const existing = node.fills ?? [];
-              const firstSolidIdx = existing.findIndex((p) => p.type === "solid" && p.visible);
-              const nextPaints: NodePaint[] = existing.length
-                ? existing.map((p, i) =>
-                    i === firstSolidIdx || (firstSolidIdx === -1 && i === 0)
-                      ? p.type === "solid"
-                        ? { ...p, color, opacity }
-                        : p
-                      : p,
-                  )
-                : [createPaint({ color, opacity })];
-              patch({ fills: nextPaints, style: { fill: color } });
-            }}
-          />
+          {nonSolidOnly ? (
+            <span className="text-xs text-muted-foreground">{m.canvas_fillNotSolid()}</span>
+          ) : (
+            <ColorPaintPicker
+              color={fill}
+              opacity={fillOpacity}
+              onChange={(color, opacity) => {
+                // 写 fills 数组（渲染真源）；style.fill 会被 style-mapper 从 fills 覆盖，写它无效
+                const existing = node.fills ?? [];
+                const firstSolidIdx = existing.findIndex((p) => p.type === "solid" && p.visible);
+                const nextPaints: NodePaint[] = existing.length
+                  ? existing.map((p, i) =>
+                      i === firstSolidIdx || (firstSolidIdx === -1 && i === 0)
+                        ? p.type === "solid"
+                          ? { ...p, color, opacity }
+                          : p
+                        : p,
+                    )
+                  : [createPaint({ color, opacity })];
+                patch({ fills: nextPaints });
+              }}
+            />
+          )}
         </div>
       </CollapsibleSection>
 
@@ -225,17 +233,25 @@ export function FramePropertyPanel({ node, className }: FramePropertyPanelProps)
           title={m.canvas_corners()}
           className="shrink-0"
           actions={
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className={cn("size-6 rounded-md", cornerLinked && "text-primary")}
-              aria-label={cornerLinked ? m.canvas_cornerUnlock() : m.canvas_cornerLock()}
-              title={cornerLinked ? m.canvas_cornerUnlock() : m.canvas_cornerLock()}
-              onClick={() => setCornerLinked((v) => !v)}
-            >
-              {cornerLinked ? <Lock className="size-3" /> : <LockOpen className="size-3" />}
-            </Button>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className={cn("size-6 rounded-md", cornerLinked && "text-primary")}
+                    aria-label={cornerLinked ? m.canvas_cornerUnlock() : m.canvas_cornerLock()}
+                    onClick={() => setCornerLinked((v) => !v)}
+                  />
+                }
+              >
+                {cornerLinked ? <Lock className="size-3" /> : <LockOpen className="size-3" />}
+              </TooltipTrigger>
+              <TooltipContent side="top">
+                {cornerLinked ? m.canvas_cornerUnlock() : m.canvas_cornerLock()}
+              </TooltipContent>
+            </Tooltip>
           }
         >
           <div className="grid grid-cols-2 gap-2">
@@ -254,7 +270,7 @@ export function FramePropertyPanel({ node, className }: FramePropertyPanelProps)
                 min={0}
                 max={200}
                 step={1}
-                icon={CORNER_ICONS[slot]}
+                icon={<CornerIcon slot={slot} />}
                 onChange={(value) => previewCorner(slot, value)}
                 onCommit={(value) => {
                   if (cornerLinked) {

package/src/components/design/canvas/panels/layer-panel.tsx

@@ -42,23 +42,6 @@ import { buildLayerEntries, layerNodeName, type LayerEntry } from "./layer-model
 
 import { useCanvasSnapshot, useCanvasStore } from "../react/canvas-hooks"
 
-const TYPE_LABELS: Record<string, () => string> = {
-  frame: m.canvas_typeName_frame,
-  rect: m.canvas_toolRect,
-  ellipse: m.canvas_toolEllipse,
-  line: m.canvas_toolLine,
-  arrow: m.canvas_toolArrow,
-  "pen-path": m.canvas_toolPen,
-  path: m.canvas_typeName_path,
-  polygon: m.canvas_typeName_polygon,
-  star: m.canvas_typeName_star,
-  text: m.canvas_toolText,
-  button: m.canvas_componentButton,
-  input: m.canvas_componentInput,
-  card: m.canvas_componentCard,
-  group: m.canvas_layers,
-}
-
 const TYPE_ICONS: Record<string, ComponentType<{ className?: string }>> = {
   rect: Square,
   ellipse: Circle,
@@ -162,7 +145,6 @@ export function LayerPanel({ className }: LayerPanelProps) {
               key={entry.id}
               entry={entry}
               selected={selected.has(entry.id)}
-              data-layer-id={entry.id}
               editing={editingId === entry.id}
               draft={draft}
               onSelect={() => selectNode(entry.id)}
@@ -225,6 +207,9 @@ function LayerRow({
         hidden && "opacity-50",
       )}
       style={{ paddingLeft: 4 + depth * 14 }}
+      // 选中项自动滚动定位的查询锚点（LayerPanel useEffect 消费）；此前该属性
+      // 被误挂在调用方 JSX 上（LayerRow 不透传），DOM 中不存在，滚动静默失效
+      data-layer-id={entry.id}
       onClick={onSelect}
       onDoubleClick={onRename}
     >

package/src/components/design/canvas/panels/paint-lists-panel.tsx

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { m } from "@/paraglide/messages.js";
+import { toast } from "@/components/ui/toast";
 import {
   Select,
   SelectContent,
@@ -163,12 +164,20 @@ export function PaintListsPanel({
             if (!leaf) return;
             void (async () => {
               // FS-7.2：导出前对节点 shader paint（填充 + 描边层）固定静态帧，
-              // 导出结束恢复动画（F3：无配对恢复导致画布停帧）
-              await withShaderStaticFrames(
-                node.id,
-                [...(node.fills ?? []), ...(node.strokes ?? []).map((stroke) => stroke.paint)],
-                () => exportNode(leaf, preset, typeNameOf(node.type)),
-              );
+              // 导出结束恢复动画（withShaderStaticFrames 以 finally 保证恢复，
+              // F3：无配对恢复导致画布停帧）；导出失败（资源加载/编码）不吞成
+              // unhandled rejection，给 toast 反馈
+              try {
+                await withShaderStaticFrames(
+                  node.id,
+                  [...(node.fills ?? []), ...(node.strokes ?? []).map((stroke) => stroke.paint)],
+                  () => exportNode(leaf, preset, typeNameOf(node.type)),
+                );
+              } catch (err) {
+                toast.error(m.canvas_exportFailed(), {
+                  description: err instanceof Error ? err.message : undefined,
+                });
+              }
             })();
           }}
           onDelete={() => deleteItem("exports", index)}

package/src/components/design/canvas/panels/panel-data.ts

@@ -8,7 +8,7 @@
 import type { AlignDir } from "../document/align"
 import type { BooleanOp } from "@/design-engine/engine/boolean-ops"
 import type { AnchorPointType } from "@/design-engine/engine/path-anchors"
-import type { ExportPreset } from "../document/style/paints"
+import type { ConstraintMode, ExportPreset } from "../document/style/paints"
 import type { LucideIcon } from "lucide-react"
 import {
   AlignCenter,
@@ -230,8 +230,6 @@ export const CORNER_ICON_ITEMS: Array<{ icon: LucideIcon; className: string }> =
 
 // ===== 布局约束 =====
 
-import type { ConstraintMode } from "../document/style/paints"
-
 export function modeLabel(mode: ConstraintMode): string {
   if (mode === "min") return m.canvas_constraint_min()
   if (mode === "center") return m.canvas_constraint_center()

package/src/components/design/canvas/panels/property-panel.tsx

@@ -151,17 +151,25 @@ export function PropertyPanel({ className }: PropertyPanelProps) {
         const isCorners = section.id === "corners";
         const linked = isCorners && cornerLinked;
         const sectionActions = isCorners ? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className={cn("size-6 rounded-md", linked && "text-primary")}
-            aria-label={linked ? m.canvas_cornerUnlock() : m.canvas_cornerLock()}
-            title={linked ? m.canvas_cornerUnlock() : m.canvas_cornerLock()}
-            onClick={() => setCornerLinked((v) => !v)}
-          >
-            {linked ? <Lock className="size-3" /> : <LockOpen className="size-3" />}
-          </Button>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className={cn("size-6 rounded-md", linked && "text-primary")}
+                  aria-label={linked ? m.canvas_cornerUnlock() : m.canvas_cornerLock()}
+                  onClick={() => setCornerLinked((v) => !v)}
+                />
+              }
+            >
+              {linked ? <Lock className="size-3" /> : <LockOpen className="size-3" />}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {linked ? m.canvas_cornerUnlock() : m.canvas_cornerLock()}
+            </TooltipContent>
+          </Tooltip>
         ) : undefined;
         return (
           <CollapsibleSection

package/src/components/design/canvas/panels/toolbar.tsx

@@ -133,9 +133,9 @@ export function formatToolHotkey(hotkey: Hotkey, platform: "mac" | "windows" | "
   return formatForDisplay(hotkey, { platform, separatorToken: " " })
 }
 
-type DrawingHostRef = { current: HTMLElement | null }
-
-export function useCanvasDrawing(hostRef: DrawingHostRef, shapeVariant?: string | null) {
+// 监听均挂 document/window（不依赖 host 容器），hostRef 参数从未被函数体引用——
+// 已移除死参数；调用方 CanvasToolbar 的 hostRef 仍被 useCanvasCursor 消费
+export function useCanvasDrawing(shapeVariant?: string | null) {
   const snapshot = useCanvasSnapshot()
   const { setTool } = useTool()
   const controllerRef = useRef<ToolController | null>(null)
@@ -605,7 +605,7 @@ export function CanvasToolbar({ className }: CanvasToolbarProps) {
   const platform = useHotkeyPlatform()
   const { panMode } = usePanMode()
   const [shapeVariant, setShapeVariant] = useState<string | null>(null)
-  useCanvasDrawing(hostRef, shapeVariant)
+  useCanvasDrawing(shapeVariant)
   useCanvasCursor(hostRef)
 
   // 工具变化后清理不再匹配的变体（绘制完成自动回 select / 热键切换工具）

package/src/components/design/canvas/panels/transform-layout-panel.tsx

@@ -198,6 +198,9 @@ export function TransformLayoutPanel({
   const pathEdit = engine?.getPathEditInfo?.() ?? null;
   if (pathEdit && pathEdit.nodeId === node.id) {
     const info = pathEdit;
+    // 提取局部常量：anchorInfo 非空并不在类型上保证 selected 非空（删除锚点
+    // 按钮单独判 selected === null），局部判空收窄后闭包内不再需要非空断言
+    const selectedAnchor = info.selected;
     const anchorInfo = engine?.getSelectedAnchorInfo?.() ?? null;
     return (
       <div className="flex flex-col gap-2">
@@ -243,7 +246,7 @@ export function TransformLayoutPanel({
             <SquareRoundCorner className="size-3.5" />
           </ToolbarButton>
         </div>
-        {anchorInfo && (
+        {anchorInfo && selectedAnchor !== null && (
           <>
             <div className="flex items-center justify-between gap-2">
               <span className="shrink-0 text-[10px] text-muted-foreground">
@@ -272,9 +275,9 @@ export function TransformLayoutPanel({
                 max={10000}
                 step={1}
                 icon={<span className="text-xs font-medium">X</span>}
-                onChange={(x) => engine?.movePathAnchor(info.selected!, x, anchorInfo.y)}
+                onChange={(x) => engine?.movePathAnchor(selectedAnchor, x, anchorInfo.y)}
                 onCommit={(x) => {
-                  engine?.movePathAnchor(info.selected!, x, anchorInfo.y);
+                  engine?.movePathAnchor(selectedAnchor, x, anchorInfo.y);
                   commit(() => undefined);
                 }}
               />
@@ -285,23 +288,26 @@ export function TransformLayoutPanel({
                 max={10000}
                 step={1}
                 icon={<span className="text-xs font-medium">Y</span>}
-                onChange={(y) => engine?.movePathAnchor(info.selected!, anchorInfo.x, y)}
+                onChange={(y) => engine?.movePathAnchor(selectedAnchor, anchorInfo.x, y)}
                 onCommit={(y) => {
-                  engine?.movePathAnchor(info.selected!, anchorInfo.x, y);
+                  engine?.movePathAnchor(selectedAnchor, anchorInfo.x, y);
                   commit(() => undefined);
                 }}
               />
             </div>
             {anchorInfo.handle && (
               <div className="grid grid-cols-2 gap-2">
+                {/* 手柄长度/角度由画布拖拽编辑（暂无面板写入通道）：禁用态展示
+                    数值，避免「可输入但无效果」的假输入误导用户 */}
                 <NumberDragInput
                   label={m.canvas_pathHandleLength()}
                   value={round(anchorInfo.handle.length)}
                   min={0}
                   max={5000}
                   step={1}
+                  disabled
                   onChange={() => undefined}
-                  onCommit={() => commit(() => undefined)}
+                  onCommit={() => undefined}
                 />
                 <NumberDragInput
                   label={m.canvas_pathHandleAngle()}
@@ -310,8 +316,9 @@ export function TransformLayoutPanel({
                   max={180}
                   step={1}
                   unit="°"
+                  disabled
                   onChange={() => undefined}
-                  onCommit={() => commit(() => undefined)}
+                  onCommit={() => undefined}
                 />
               </div>
             )}