hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: clicking tag to edit

This commit is contained in:
hypercross 2026-03-01 10:53:17 +08:00
parent abaee79198
commit 1cd85adff9
1 changed files with 12 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/md-commander/TrackerView.tsx
View File

@ -34,10 +34,10 @@ export const TrackerView: Component<TrackerViewProps> = (props) => {
return `${name}=${val}`; return `${name}=${val}`;
}; };
const handleAttributeClick = (e: MouseEvent, index: number, attrName: string, attr: TrackerAttribute) => { const handleTagClick = (e: MouseEvent, index: number) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const rect = (e.target as HTMLElement).getBoundingClientRect(); const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
setEditingItem({ setEditingItem({
index, index,
position: { position: {
@ -76,32 +76,23 @@ export const TrackerView: Component<TrackerViewProps> = (props) => {
{/* 第一行：tag#id.class + 操作按钮 */} {/* 第一行：tag#id.class + 操作按钮 */}
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-2 flex-1 min-w-0"> <div class="flex items-center gap-2 flex-1 min-w-0">
<span class="font-bold text-gray-800 whitespace-nowrap">{item.tag}</span> <button
class="font-bold text-gray-800 whitespace-nowrap hover:text-blue-600 hover:underline cursor-pointer transition-colors"
title="点击编辑属性"
onClick={(e) => handleTagClick(e, index())}
>
{item.tag}
</button>
<Show when={item.id}> <Show when={item.id}>
<span class="text-xs text-purple-600 font-mono whitespace-nowrap">#{item.id}</span> <span class="text-xs text-purple-600 font-mono whitespace-nowrap">#{item.id}</span>
</Show> </Show>
<Show when={item.classes.length > 0}> <Show when={item.classes.length > 0}>
<span class="text-xs text-blue-600 font-mono whitespace-nowrap">.{item.classes.join(".")}</span> <span class="text-xs text-blue-600 font-mono whitespace-nowrap">.{item.classes.join(".")}</span>
</Show> </Show>
{/* 属性链接 - 可点击编辑 */} {/* 属性简写显示 */}
<Show when={Object.keys(item.attributes).length > 0}> <Show when={Object.keys(item.attributes).length > 0}>
<span class="text-xs font-mono whitespace-nowrap truncate"> <span class="text-xs text-gray-500 font-mono whitespace-nowrap truncate">
[ [{Object.entries(item.attributes).map(([k, v]) => formatAttributeShort(k, v)).join(" ")}]
<For each={Object.entries(item.attributes)}>
{([name, attr], attrIndex) => (
<>
<Show when={attrIndex() > 0}> </Show>
<button
class="text-gray-500 hover:text-blue-600 hover:underline cursor-pointer transition-colors"
title={`点击编辑 ${name}`}
onClick={(e) => handleAttributeClick(e, index(), name, attr)}
>
{name}={formatAttributeValue(attr)}
</button>
</>
)}
</For>
]
</span> </span>
</Show> </Show>
</div> </div>