From 1cd85adff9de99e47039414bc472a4861f9b039b Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Sun, 1 Mar 2026 10:53:17 +0800
Subject: [PATCH] refactor: clicking tag to edit

---
 src/components/md-commander/TrackerView.tsx | 33 ++++++++-------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/components/md-commander/TrackerView.tsx b/src/components/md-commander/TrackerView.tsx
index 41bab29..ec136d1 100644
--- a/src/components/md-commander/TrackerView.tsx
+++ b/src/components/md-commander/TrackerView.tsx
@@ -34,10 +34,10 @@ export const TrackerView: Component<TrackerViewProps> = (props) => {
     return `${name}=${val}`;
   };
 
-  const handleAttributeClick = (e: MouseEvent, index: number, attrName: string, attr: TrackerAttribute) => {
+  const handleTagClick = (e: MouseEvent, index: number) => {
     e.preventDefault();
     e.stopPropagation();
-    const rect = (e.target as HTMLElement).getBoundingClientRect();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
     setEditingItem({
       index,
       position: {
@@ -76,32 +76,23 @@ export const TrackerView: Component<TrackerViewProps> = (props) => {
                 {/* 第一行：tag#id.class + 操作按钮 */}
                 <div class="flex items-center justify-between">
                   <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}>
                       <span class="text-xs text-purple-600 font-mono whitespace-nowrap">#{item.id}</span>
                     </Show>
                     <Show when={item.classes.length > 0}>
                       <span class="text-xs text-blue-600 font-mono whitespace-nowrap">.{item.classes.join(".")}</span>
                     </Show>
-                    {/* 属性链接 - 可点击编辑 */}
+                    {/* 属性简写显示 */}
                     <Show when={Object.keys(item.attributes).length > 0}>
-                      <span class="text-xs font-mono whitespace-nowrap truncate">
-                        [
-                        <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 class="text-xs text-gray-500 font-mono whitespace-nowrap truncate">
+                        [{Object.entries(item.attributes).map(([k, v]) => formatAttributeShort(k, v)).join(" ")}]
                       </span>
                     </Show>
                   </div>