diff --git a/src/components/Inspector.vue b/src/components/Inspector.vue index 5d86420..0a6af85 100644 --- a/src/components/Inspector.vue +++ b/src/components/Inspector.vue @@ -4,7 +4,7 @@ import { ActiveSelection, Rect } from "fabric"; import type { FabricObject } from "fabric"; import { useEditor, layerKindOf } from "@/editor/useEditor"; import { commit } from "@/editor/useHistory"; -import type { TransformValues } from "@/types"; +import type { LayerKind, TransformValues } from "@/types"; import { IconAngle, IconRadius, IconOpacity, IconLinked, IconUnlinked } from "@/ui/icons"; /** @@ -21,6 +21,10 @@ import { IconAngle, IconRadius, IconOpacity, IconLinked, IconUnlinked } from "@/ * 版式照 Figma 的设计面板收窄:没有分组标题,字段是「图标/字母 + 无边框输入框」 * 的胶囊,两列一行铺开。右栏总高有限,标题行越少留给下面工具分组的越多。 * + * **没选中任何东西时这里只有一句提示**(用户 2026-09-05 的要求:右栏只显示 + * 当前选中对象相关的东西)。画板尺寸挪去顶栏的「画布编辑」下拉了, + * 不再在这里做只读回显。 + * * 两条容易做错的语义(任务书点名,见文件末尾的纯函数区): * 1. W/H 是缩放后的**实际占位尺寸** = 原始尺寸 × scale,不是 `getScaledWidth()`—— * 后者会把 `strokeWidth`(默认 1,即使 stroke 为 null)也算进去,导致 @@ -30,7 +34,7 @@ import { IconAngle, IconRadius, IconOpacity, IconLinked, IconUnlinked } from "@/ * 要 `left - width*scale/2` 换算,不能直接拿 `obj.left`。 */ -const { activeObject, revision, size, getCanvas, bumpRevision } = useEditor(); +const { activeObject, revision, getCanvas, bumpRevision } = useEditor(); /** 当前选中的单个对象。多选(ActiveSelection)或没选时返回 null。 */ function singleObject(): FabricObject | null { @@ -77,13 +81,22 @@ const values = computed(() => { const headline = computed(() => { void revision.value; const obj = singleObject(); - if (obj) { - const kind = layerKindOf(obj); - return kind === "image" ? "图片" : kind === "text" ? "文字" : kind === "rect" ? "矩形" : "对象"; - } - return activeObject.value ? "多选" : "画板"; + if (obj) return KIND_LABEL[layerKindOf(obj)]; + return activeObject.value ? "多选" : ""; }); +const KIND_LABEL: Record = { + background: "背景", + image: "图片", + text: "文字", + rect: "矩形", + line: "直线", + arrow: "箭头", + ellipse: "圆形", + polygon: "多边形", + other: "对象", +}; + /** * 宽高比例锁(Figma 设计面板 W/H 之间那个链条)。 * @@ -292,7 +305,7 @@ function normalizeAngle(angle: number): number { diff --git a/src/components/ToolPanels.vue b/src/components/ToolPanels.vue index 40c6f3d..41911a9 100644 --- a/src/components/ToolPanels.vue +++ b/src/components/ToolPanels.vue @@ -1,12 +1,10 @@