From ca48d818cc0c6e7c9a50fa21eb7f9a03ec485582 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Sun, 1 Mar 2026 10:13:40 +0800
Subject: [PATCH] refactor: display

---
 src/components/md-commander/TrackerView.tsx   | 73 +++++++------------
 .../md-commander/utils/emmetParser.ts         |  4 +-
 2 files changed, 27 insertions(+), 50 deletions(-)

diff --git a/src/components/md-commander/TrackerView.tsx b/src/components/md-commander/TrackerView.tsx
index 332ab39..b27eb5c 100644
--- a/src/components/md-commander/TrackerView.tsx
+++ b/src/components/md-commander/TrackerView.tsx
@@ -22,6 +22,11 @@ export const TrackerView: Component<TrackerViewProps> = (props) => {
     return String(attr.value);
   };
 
+  const formatAttributeShort = (name: string, attr: TrackerAttribute): string => {
+    const val = formatAttributeValue(attr);
+    return `${name}=${val}`;
+  };
+
   return (
     <div class="tracker-view flex-1 overflow-auto p-3 bg-white">
       <Show
@@ -30,35 +35,44 @@ export const TrackerView: Component<TrackerViewProps> = (props) => {
           <div class="text-gray-400 text-center py-8">暂无追踪项目</div>
         }
       >
-        <div class="space-y-4">
+        <div class="space-y-2">
           <For each={props.items()}>
             {(item, index) => (
-              <div class="border border-gray-200 rounded-lg p-3 bg-gray-50">
-                {/* 头部：tag、id 和操作按钮 */}
-                <div class="flex items-center justify-between mb-2">
-                  <div class="flex items-center gap-2">
-                    <span class="font-bold text-gray-800">{item.tag}</span>
+              <div class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+                {/* 第一行：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>
                     <Show when={item.id}>
-                      <span class="text-xs text-purple-600 font-mono">#{item.id}</span>
+                      <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 text-gray-500 font-mono whitespace-nowrap truncate">
+                        [{Object.entries(item.attributes).map(([k, v]) => formatAttributeShort(k, v)).join(" ")}]
+                      </span>
                     </Show>
                   </div>
-                  <div class="flex items-center gap-1">
+                  <div class="flex items-center gap-1 flex-shrink-0 ml-2">
                     <button
-                      class="p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded"
+                      class="p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded text-xs"
                       title="上移"
                       onClick={() => props.onMoveUp?.(index())}
                     >
                       ↑
                     </button>
                     <button
-                      class="p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded"
+                      class="p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded text-xs"
                       title="下移"
                       onClick={() => props.onMoveDown?.(index())}
                     >
                       ↓
                     </button>
                     <button
-                      class="p-1 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded"
+                      class="p-1 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded text-xs"
                       title="移除"
                       onClick={() => props.onRemove?.(index())}
                     >
@@ -66,43 +80,6 @@ export const TrackerView: Component<TrackerViewProps> = (props) => {
                     </button>
                   </div>
                 </div>
-
-                {/* Classes */}
-                <Show when={item.classes.length > 0}>
-                  <div class="flex flex-wrap gap-1 mb-2">
-                    <Index each={item.classes}>
-                      {(cls) => (
-                        <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">
-                          {cls()}
-                          <button
-                            class="hover:text-red-600"
-                            onClick={() => props.onRemoveClass?.(index(), cls())}
-                            title="移除类"
-                          >
-                            ×
-                          </button>
-                        </span>
-                      )}
-                    </Index>
-                  </div>
-                </Show>
-
-                {/* Attributes */}
-                <div class="grid grid-cols-2 gap-2">
-                  <For each={Object.values(item.attributes)}>
-                    {(attr: TrackerAttribute) => (
-                      <div
-                        class="flex items-center justify-between px-2 py-1 bg-white rounded border border-gray-200 cursor-pointer hover:border-blue-400"
-                        onClick={() => props.onEditAttribute?.(index(), attr.name, attr)}
-                      >
-                        <span class="text-xs text-gray-600">{attr.name}</span>
-                        <span class="text-sm font-mono text-gray-800">
-                          {formatAttributeValue(attr)}
-                        </span>
-                      </div>
-                    )}
-                  </For>
-                </div>
               </div>
             )}
           </For>
diff --git a/src/components/md-commander/utils/emmetParser.ts b/src/components/md-commander/utils/emmetParser.ts
index 5090962..cfb51dc 100644
--- a/src/components/md-commander/utils/emmetParser.ts
+++ b/src/components/md-commander/utils/emmetParser.ts
@@ -69,8 +69,8 @@ export function parseEmmet(input: string): ParsedEmmet {
 function parseAttributes(attrString: string): Record<string, TrackerAttribute> {
   const attributes: Record<string, TrackerAttribute> = {};
   
-  // 匹配键值对：key=value 或 key="value with spaces"
-  const regex = /(\w+)=(?:"([^"]*)"|'([^']*)'|([^\s]+))/g;
+  // 匹配键值对：使用,分隔
+  const regex = /(\w+)=(?:"([^"]*)"|'([^']*)'|([^,]+))/g;
   let match: RegExpExecArray | null;
 
   while ((match = regex.exec(attrString)) !== null) {