suzmii
082d8d62de
- 新增「信息」动作：排在「@引用」之后、「编辑标签」之前，点开非模态信息浮层，再点一次即收起（aria-pressed 反映开合） - 新增只读字段组件 ResourceInfoFieldsView（ResourceInfoPanelView.tsx），运行页签的「信息展示」与画布浮层共用，字段清单只在 resolveResourceInfoFieldRows 单点定义 - 字段口径：名称 / 路径 / 类型 + 只读分类与标签（分类取画布栏目口径，标签为空时给「暂无标签」），刻意不含来源任务、资产 ID 等 manifest 内部标识 - 浮层 chrome 与快速编辑浮层同族（同一锚点、同档圆角与阴影），样式落在 resourceCanvasChrome.css；关闭入口三处：动作按钮、面板关闭按钮、画布浮层统一的 Esc / 点边界外 - 关闭判据收口：resolveResourceCanvasQuickEditDismissOpen 更名为 resolveResourceCanvasFloatingPanelDismissOpen、参数改为 isFloatingPanelOpen，宿主把「快速编辑开」与「信息开」合成一个布尔 - .game-resource-info-panel 补进 RESOURCE_CANVAS_INTERACTION_SELECTOR，否则点在只读字段值上会被判成点画布空白而清掉选中 - 换选 / 清空选中 / 切项目时信息浮层自动收起：在选中派生处按 selectedResourceId 收口，不在每个重置点各补一行 - 测试：新增 resourceCanvasInfoModel 三条与「信息面板在画布浮层与运行页签里渲染同一份只读字段」（工具条顺序、开合、关闭按钮只收面板、点画布以外收起、Esc 连工具条一起收、运行页签字段逐行相同）；resourceCanvasFloatingDismiss 的判据用例与交互选择器夹具改为浮层通用口径 - resourceCanvasChrome.css 的字段排版收在浮层选择器下，不跨上下文改运行页签的字号与列宽 - decision-log 新增一条：记录这次对 Issue #309 C3「取消资源详情面板」的有意局部回退（只回退「看信息」，不恢复可编辑详情面板与全屏编辑路由），并登记需要同步的 C3 引用位置
82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import { Info, X } from 'lucide-react';
|
|
|
|
import {
|
|
resolveResourceInfoFieldRows,
|
|
resolveResourceInfoPanelStyle,
|
|
type ResourceInfoPanelAnchor,
|
|
} from '../../features/resource-canvas/resourceCanvasInfoModel';
|
|
import type { ProjectResource } from './resourceProjectionModel';
|
|
|
|
/**
|
|
* 只读资源信息字段。运行页签的「信息展示」与画布上的信息浮层共用这一份，
|
|
* 字段清单只在 `resolveResourceInfoFieldRows` 里定义，两处不会各说一套。
|
|
*/
|
|
export function ResourceInfoFieldsView({
|
|
resource,
|
|
}: {
|
|
resource: ProjectResource;
|
|
}) {
|
|
return (
|
|
<dl className="game-resource-info-fields">
|
|
{resolveResourceInfoFieldRows(resource).map((row) => (
|
|
<div key={row.label}>
|
|
<dt>{row.label}</dt>
|
|
<dd>{row.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
);
|
|
}
|
|
|
|
export type ResourceInfoPanelViewProps = ResourceInfoPanelAnchor & {
|
|
resource: ProjectResource;
|
|
onClose: () => void;
|
|
};
|
|
|
|
/**
|
|
* 画布上的信息浮层：贴着选中资源卡，非模态。
|
|
*
|
|
* 关闭时机（Esc / 点边界外）由宿主复用 `useImageCanvasFloatingOptionDismiss` 接管，
|
|
* 这里只负责渲染，所以面板本身不注册任何 document 监听。
|
|
*/
|
|
export function ResourceInfoPanelView({
|
|
resource,
|
|
sourceLayer,
|
|
viewport,
|
|
canvasSize,
|
|
onClose,
|
|
}: ResourceInfoPanelViewProps) {
|
|
const style = resolveResourceInfoPanelStyle({
|
|
sourceLayer,
|
|
viewport,
|
|
canvasSize,
|
|
});
|
|
if (!style) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section
|
|
className="game-resource-info-panel"
|
|
role="dialog"
|
|
aria-label="资源信息"
|
|
style={style}
|
|
>
|
|
<header className="game-resource-info-panel__header">
|
|
<Info size={14} aria-hidden="true" />
|
|
<strong>信息</strong>
|
|
<button
|
|
type="button"
|
|
className="game-resource-info-panel__close"
|
|
aria-label="关闭信息面板"
|
|
title="关闭"
|
|
onClick={onClose}
|
|
>
|
|
<X size={14} aria-hidden="true" />
|
|
</button>
|
|
</header>
|
|
<ResourceInfoFieldsView resource={resource} />
|
|
</section>
|
|
);
|
|
}
|