feat: refine mindspace asset card actions

src/components/MessageList.tsx

@@ -39,14 +39,6 @@ function CheckIcon() {
   );
 }
 
-function ToolSpinnerIcon() {
-  return (
-    <span className="tool-badge-spinner" aria-hidden="true">
-      <span />
-    </span>
-  );
-}
-
 function ToolDoneIcon() {
   return (
     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -61,6 +53,16 @@ function ToolDoneIcon() {
   );
 }
 
+function resolveToolCallName(
+  tool: Extract<Message['content'][number], { type: 'toolRequest' }>,
+): string {
+  const toolCall = tool.toolCall as {
+    functionName?: string;
+    value?: { name?: string };
+  };
+  return String(toolCall.functionName ?? toolCall.value?.name ?? '').trim();
+}
+
 function ToolBadge({ message }: { message: Message }) {
   const tools = message.content.filter((c) => c.type === 'toolRequest' || c.type === 'toolResponse');
   if (tools.length === 0) return null;
@@ -72,7 +74,7 @@ function ToolBadge({ message }: { message: Message }) {
     <div className="tool-badges">
       {tools.map((tool, i) => {
         const isRequest = tool.type === 'toolRequest';
-        const toolName = isRequest ? String(tool.toolCall.functionName ?? '').trim() : '';
+        const toolName = isRequest ? resolveToolCallName(tool) : '';
 
         let label: string;
         if (isRequest && !toolName) {
@@ -86,7 +88,7 @@ function ToolBadge({ message }: { message: Message }) {
             key={`${message.id}-${i}`}
             className={`tool-badge${isRequest ? ' is-pending' : ' is-complete'}`}
           >
-            {isRequest ? <ToolSpinnerIcon /> : <ToolDoneIcon />}
+            {!isRequest ? <ToolDoneIcon /> : null}
             <span>{label}</span>
           </span>
         );

src/components/MindSpaceView.tsx

@@ -486,6 +486,7 @@ export function MindSpaceView({
   const [assetFilter, setAssetFilter] = useState<AssetFilter>('all');
   const [imagePage, setImagePage] = useState(0);
   const [previewAssetId, setPreviewAssetId] = useState<string | null>(null);
+  const [openAssetMenuId, setOpenAssetMenuId] = useState<string | null>(null);
   const [editingAssetId, setEditingAssetId] = useState<string | null>(null);
   const [cleanupOpen, setCleanupOpen] = useState(false);
   const [cleanupItems, setCleanupItems] = useState<MindSpaceCleanupItem[]>([]);
@@ -561,6 +562,18 @@ export function MindSpaceView({
     void bindMindSpacePageLiveEdit(selectedPageId, session.id).catch(() => {});
   }, [selectedPageId, session?.id, previewMode, pageFullscreenPreviewOpen]);
 
+  useEffect(() => {
+    if (!openAssetMenuId) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (target.closest('.mindspace-item-actions')) return;
+      setOpenAssetMenuId(null);
+    };
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => document.removeEventListener('pointerdown', handlePointerDown);
+  }, [openAssetMenuId]);
+
   const mindspaceChatContext = useMemo(() => {
     if (!space) return null;
     return buildMindSpaceChatContext({
@@ -1392,68 +1405,140 @@ export function MindSpaceView({
   );
   const previewAssetFrame = previewAsset ? buildAssetPreviewFrameConfig(previewAsset) : null;
 
-  const renderAssetActions = (asset: MindSpaceAsset) => (
-    <div className="mindspace-item-actions">
-      {isPreviewableAsset(asset) && (
-        <button type="button" onClick={() => setPreviewAssetId(asset.id)}>
-          预览
-        </button>
-      )}
-      {isWorkAsset(asset) && (
-        <button
-          type="button"
-          onClick={() => void openAssetEditor(asset)}
-          disabled={editingAssetId === asset.id}
-        >
-          {editingAssetId === asset.id ? '打开中…' : '编辑'}
-        </button>
-      )}
-      {asset.sourcePageId && (
-        <button type="button" onClick={() => showPage(asset.sourcePageId!, true)}>
-          发布到广场
-        </button>
-      )}
-      {asset.publicUrl && (
-        <a
-          className="mindspace-asset-share"
-          href={asset.publicUrl}
-          target="_blank"
-          rel="noreferrer"
-        >
-          公网图
-        </a>
-      )}
-      {asset.status === 'ready' && asset.scanStatus !== 'blocked' ? (
-        <button
-          type="button"
-          className="mindspace-asset-share"
-          onClick={() => setSharePayload(buildAssetSharePayload(asset, selectedCategory?.code))}
-        >
-          分享
-        </button>
-      ) : (
-        <span className="mindspace-asset-blocked">暂不可用</span>
-      )}
-      {pendingDeleteId === asset.id ? (
-        <>
+  const renderAssetActions = (asset: MindSpaceAsset) => {
+    const shareReady = asset.status === 'ready' && asset.scanStatus !== 'blocked';
+    const menuOpen = openAssetMenuId === asset.id;
+
+    return (
+      <div className="mindspace-item-actions">
+        {isWorkAsset(asset) ? (
           <button
             type="button"
-            className="mindspace-delete-confirm"
-            onClick={() => void removeAsset(asset.id)}
+            className="mindspace-item-action is-primary"
+            onClick={() => void openAssetEditor(asset)}
+            disabled={editingAssetId === asset.id}
           >
-            确认删除
+            {editingAssetId === asset.id ? '打开中…' : '编辑'}
           </button>
-          <button type="button" onClick={() => setPendingDeleteId(null)}>
-            取消
+        ) : isPreviewableAsset(asset) ? (
+          <button
+            type="button"
+            className="mindspace-item-action is-primary"
+            onClick={() => setPreviewAssetId(asset.id)}
+          >
+            预览
           </button>
-        </>
-      ) : (
-        <button type="button" onClick={() => setPendingDeleteId(asset.id)}>
-          删除
-        </button>
-      )}
-    </div>
-  );
+        ) : (
+          <span className="mindspace-asset-blocked">暂不可预览</span>
+        )}
+
+        {shareReady ? (
+          <button
+            type="button"
+            className="mindspace-asset-share mindspace-item-action"
+            onClick={() => setSharePayload(buildAssetSharePayload(asset, selectedCategory?.code))}
+          >
+            分享
+          </button>
+        ) : (
+          <span className="mindspace-asset-blocked">暂不可分享</span>
+        )}
+
+        <div className={`mindspace-item-more${menuOpen ? ' is-open' : ''}`}>
+          <button
+            type="button"
+            className="mindspace-item-more-trigger"
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
+            aria-label={`${asset.displayName} 更多操作`}
+            onClick={() => setOpenAssetMenuId((current) => (current === asset.id ? null : asset.id))}
+          >
+            ···
+          </button>
+          {menuOpen && (
+            <div className="mindspace-item-more-menu" role="menu" aria-label="更多操作">
+              {isPreviewableAsset(asset) && !isWorkAsset(asset) && (
+                <button
+                  type="button"
+                  className="mindspace-item-more-entry"
+                  role="menuitem"
+                  onClick={() => {
+                    setPreviewAssetId(asset.id);
+                    setOpenAssetMenuId(null);
+                  }}
+                >
+                  预览
+                </button>
+              )}
+              {asset.sourcePageId && (
+                <button
+                  type="button"
+                  className="mindspace-item-more-entry"
+                  role="menuitem"
+                  onClick={() => {
+                    showPage(asset.sourcePageId!, true);
+                    setOpenAssetMenuId(null);
+                  }}
+                >
+                  发布到广场
+                </button>
+              )}
+              {asset.publicUrl && (
+                <a
+                  className="mindspace-item-more-entry"
+                  role="menuitem"
+                  href={asset.publicUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={() => setOpenAssetMenuId(null)}
+                >
+                  打开公网图
+                </a>
+              )}
+              {pendingDeleteId === asset.id ? (
+                <>
+                  <button
+                    type="button"
+                    className="mindspace-item-more-entry is-danger"
+                    role="menuitem"
+                    onClick={() => {
+                      void removeAsset(asset.id);
+                      setOpenAssetMenuId(null);
+                    }}
+                  >
+                    确认删除
+                  </button>
+                  <button
+                    type="button"
+                    className="mindspace-item-more-entry"
+                    role="menuitem"
+                    onClick={() => {
+                      setPendingDeleteId(null);
+                      setOpenAssetMenuId(null);
+                    }}
+                  >
+                    取消删除
+                  </button>
+                </>
+              ) : (
+                <button
+                  type="button"
+                  className="mindspace-item-more-entry is-danger"
+                  role="menuitem"
+                  onClick={() => {
+                    setPendingDeleteId(asset.id);
+                    setOpenAssetMenuId(null);
+                  }}
+                >
+                  删除
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
 
   const createPage = async () => {
     if (!newPageTitle.trim() || !newPageContent.trim()) return;
@@ -2280,45 +2365,49 @@ export function MindSpaceView({
                                 />
                                 <span>选择</span>
                               </label>
-                              <button
-                                type="button"
-                                className="mindspace-item-card-main"
-                                onClick={() => {
-                                  if (isWorkAsset(asset)) {
-                                    void openAssetEditor(asset);
-                                    return;
-                                  }
-                                  if (isPreviewableAsset(asset)) setPreviewAssetId(asset.id);
-                                }}
-                              >
-                                {isWorkAsset(asset) ? (
-                                  <div className="mindspace-item-cover">
-                                    {isPreviewableAsset(asset) ? (
-                                      <WorkCover
-                                        thumbnailUrl={`/api/mindspace/v1/assets/${asset.id}/thumbnail?v=${asset.updatedAt}`}
-                                        previewAsset={asset}
-                                        fallbackLabel={assetIcon(asset)}
-                                        title={asset.displayName}
-                                      />
-                                    ) : (
-                                      <span>{assetIcon(asset)}</span>
-                                    )}
-                                  </div>
-                                ) : (
-                                  <div className="mindspace-item-icon">{assetIcon(asset)}</div>
-                                )}
-                                <div className="mindspace-item-copy">
+                              <div className="mindspace-item-card-frame">
+                                <div className="mindspace-item-card-head">
                                   <span className="mindspace-item-badge">
                                     {assetSourceLabel(asset)}
                                   </span>
-                                  <h3>{asset.displayName}</h3>
-                                  <p>
-                                    {formatBytes(asset.sizeBytes)} ·{' '}
-                                    {new Date(asset.updatedAt).toLocaleDateString()}
-                                  </p>
                                 </div>
-                              </button>
-                              {renderAssetActions(asset)}
+                                <button
+                                  type="button"
+                                  className="mindspace-item-card-main"
+                                  onClick={() => {
+                                    if (isWorkAsset(asset)) {
+                                      void openAssetEditor(asset);
+                                      return;
+                                    }
+                                    if (isPreviewableAsset(asset)) setPreviewAssetId(asset.id);
+                                  }}
+                                >
+                                  {isWorkAsset(asset) ? (
+                                    <div className="mindspace-item-cover">
+                                      {isPreviewableAsset(asset) ? (
+                                        <WorkCover
+                                          thumbnailUrl={`/api/mindspace/v1/assets/${asset.id}/thumbnail?v=${asset.updatedAt}`}
+                                          previewAsset={asset}
+                                          fallbackLabel={assetIcon(asset)}
+                                          title={asset.displayName}
+                                        />
+                                      ) : (
+                                        <span>{assetIcon(asset)}</span>
+                                      )}
+                                    </div>
+                                  ) : (
+                                    <div className="mindspace-item-icon">{assetIcon(asset)}</div>
+                                  )}
+                                  <div className="mindspace-item-copy">
+                                    <h3>{asset.displayName}</h3>
+                                    <p>
+                                      {formatBytes(asset.sizeBytes)} ·{' '}
+                                      {new Date(asset.updatedAt).toLocaleDateString()}
+                                    </p>
+                                  </div>
+                                </button>
+                                {renderAssetActions(asset)}
+                              </div>
                             </article>
                           ))}
                         </div>