完善客户端模块与工作区能力

src/components/layout/ImageWorkspaceSidebar.tsx

@@ -1,5 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
+  ChevronDown,
+  ChevronRight,
   FolderKanban,
   Loader2,
   MessageSquareText,
@@ -23,7 +25,10 @@ import { IMAGE_WORKSPACE_CREATE_PROJECT_EVENT } from '@/lib/image-workspace';
 import { cn } from '@/lib/utils';
 import { useImageWorkspaceStore } from '@/stores/image-workspace';
 import { useAuthStore } from '@/stores/auth';
-import type { DesignWorkspaceSummary } from '../../../shared/image-workspace';
+import type {
+  DesignConversationSummary,
+  DesignWorkspaceSummary,
+} from '../../../shared/image-workspace';
 
 type ImageWorkspaceSidebarProps = {
   sidebarCollapsed: boolean;
@@ -33,6 +38,39 @@ type ProjectDialogState =
   | { mode: 'create'; project: null }
   | { mode: 'rename'; project: DesignWorkspaceSummary };
 
+const VISIBLE_CONVERSATION_LIMIT = 5;
+const CONVERSATION_PREVIEW_LIMIT = 28;
+const PROJECT_ACTION_BUTTON_CLASS = 'flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground pointer-events-none opacity-0 transition-[opacity,background-color,color,transform] group-hover/project:pointer-events-auto group-hover/project:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100';
+
+function conversationTimestamp(conversation: DesignConversationSummary): number {
+  const timestamp = Date.parse(conversation.updatedAt);
+  return Number.isFinite(timestamp) ? timestamp : 0;
+}
+
+function formatConversationTime(timestamp: number): string {
+  if (!timestamp) return '';
+  const date = new Date(timestamp);
+  const now = new Date();
+  if (date.toDateString() === now.toDateString()) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+  return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' });
+}
+
+function compactConversationPreview(preview: string): string {
+  const characters = Array.from(preview);
+  return characters.length > CONVERSATION_PREVIEW_LIMIT
+    ? `${characters.slice(0, CONVERSATION_PREVIEW_LIMIT - 1).join('')}…`
+    : preview;
+}
+
+function conversationPreview(conversation: DesignConversationSummary): string {
+  return conversation.latestMessagePreview?.trim()
+    || conversation.brief.summary.trim()
+    || conversation.title.trim()
+    || '新会话';
+}
+
 export function ImageWorkspaceSidebar({ sidebarCollapsed }: ImageWorkspaceSidebarProps) {
   const authenticated = useAuthStore((state) => state.isAuthenticated());
   const navigate = useNavigate();
@@ -50,6 +88,8 @@ export function ImageWorkspaceSidebar({ sidebarCollapsed }: ImageWorkspaceSideba
   const selectProject = useImageWorkspaceStore((state) => state.selectProject);
   const selectConversation = useImageWorkspaceStore((state) => state.selectConversation);
   const [projectsOpen, setProjectsOpen] = useState(true);
+  const [expandedProjectIds, setExpandedProjectIds] = useState<Record<string, boolean>>({});
+  const [expandedConversationLists, setExpandedConversationLists] = useState<Record<string, boolean>>({});
   const [dialog, setDialog] = useState<ProjectDialogState | null>(null);
   const [projectName, setProjectName] = useState('');
   const [dialogError, setDialogError] = useState<string | null>(null);
@@ -59,6 +99,15 @@ export function ImageWorkspaceSidebar({ sidebarCollapsed }: ImageWorkspaceSideba
     if (status === 'idle' || (status === 'auth-required' && authenticated)) void load();
   }, [authenticated, load, status]);
 
+  useEffect(() => {
+    if (!activeWorkspaceId) return;
+    setExpandedProjectIds((current) => (
+      current[activeWorkspaceId] === true
+        ? current
+        : { ...current, [activeWorkspaceId]: true }
+    ));
+  }, [activeWorkspaceId]);
+
   useEffect(() => {
     const openCreateDialog = () => {
       setProjectName('');
@@ -111,10 +160,27 @@ export function ImageWorkspaceSidebar({ sidebarCollapsed }: ImageWorkspaceSideba
   };
 
   const handleSelectProject = (workspaceId: string) => {
+    setExpandedProjectIds((current) => ({ ...current, [workspaceId]: true }));
     void selectProject(workspaceId);
     navigate('/image-canvas');
   };
 
+  const handleToggleProject = (workspaceId: string) => {
+    if (workspaceId !== activeWorkspaceId) {
+      handleSelectProject(workspaceId);
+      return;
+    }
+    setExpandedProjectIds((current) => ({
+      ...current,
+      [workspaceId]: !(current[workspaceId] ?? true),
+    }));
+  };
+
+  const handleSelectConversation = (conversationId: string) => {
+    void selectConversation(conversationId);
+    navigate('/image-canvas');
+  };
+
   const handleCreateConversation = async () => {
     try {
       await createConversation();
@@ -124,8 +190,15 @@ export function ImageWorkspaceSidebar({ sidebarCollapsed }: ImageWorkspaceSideba
     }
   };
 
+  const activeProjectConversations = useMemo(() => {
+    if (!workspace || workspace.workspaceId !== activeWorkspaceId) return [];
+    return [...workspace.conversations].sort(
+      (left, right) => conversationTimestamp(right) - conversationTimestamp(left),
+    );
+  }, [activeWorkspaceId, workspace]);
+
   return (
-    <div data-testid="sidebar-image-workspace" className="min-h-0 space-y-1">
+    <div data-testid="sidebar-image-workspace" className="min-h-0 space-y-1 font-sans">
       <Button
         type="button"
         variant="ghost"
@@ -206,6 +279,43 @@ export function ImageWorkspaceSidebar({ sidebarCollapsed }: ImageWorkspaceSideba
 
             {status === 'ready' ? bootstrap?.workspaces.map((project) => {
               const active = project.workspaceId === activeWorkspaceId;
+              const projectExpanded = expandedProjectIds[project.workspaceId] ?? active;
+              const projectConversationsOpen = active && projectExpanded;
+              const conversations = active ? activeProjectConversations : [];
+              const visibleConversations = conversations.slice(0, VISIBLE_CONVERSATION_LIMIT);
+              const hiddenConversations = conversations.slice(VISIBLE_CONVERSATION_LIMIT);
+              const moreConversationsOpen = expandedConversationLists[project.workspaceId]
+                ?? hiddenConversations.some((conversation) => (
+                  conversation.conversationId === activeConversationId
+                ));
+              const renderConversation = (conversation: DesignConversationSummary) => {
+                const fullPreview = conversationPreview(conversation);
+                const selected = conversation.conversationId === activeConversationId;
+                return (
+                  <button
+                    key={conversation.conversationId}
+                    type="button"
+                    data-testid={`sidebar-image-conversation-${conversation.conversationId}`}
+                    aria-current={selected ? 'page' : undefined}
+                    title={`${conversation.title}：${fullPreview}`}
+                    className={cn(
+                      'group/image-conversation flex w-full min-w-0 items-center gap-1.5 rounded-lg px-1.5 py-1.5 text-left transition-[background-color,color,transform] active:scale-[0.985]',
+                      selected
+                        ? 'bg-background text-foreground shadow-soft'
+                        : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',
+                    )}
+                    onClick={() => handleSelectConversation(conversation.conversationId)}
+                  >
+                    <MessageSquareText className="h-3.5 w-3.5 shrink-0" />
+                    <span className="min-w-0 flex-1 truncate text-[11px] font-medium leading-4">
+                      {compactConversationPreview(fullPreview)}
+                    </span>
+                    <span className="shrink-0 whitespace-nowrap text-[10px] text-muted-foreground">
+                      {formatConversationTime(conversationTimestamp(conversation)) || '刚刚'}
+                    </span>
+                  </button>
+                );
+              };
               return (
                 <section
                   key={project.workspaceId}
@@ -217,7 +327,10 @@ export function ImageWorkspaceSidebar({ sidebarCollapsed }: ImageWorkspaceSideba
                       : 'border-transparent bg-transparent hover:border-border/70 hover:bg-surface-subtle',
                   )}
                 >
-                  <div className="flex min-w-0 items-center gap-1">
+                  <div
+                    className="relative flex min-h-9 min-w-0 items-center"
+                    data-testid={`sidebar-image-project-header-${project.workspaceId}`}
+                  >
                     <button
                       type="button"
                       aria-current={active ? 'page' : undefined}
@@ -227,74 +340,96 @@ export function ImageWorkspaceSidebar({ sidebarCollapsed }: ImageWorkspaceSideba
                       <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-surface-input text-foreground">
                         <FolderKanban className="h-3.5 w-3.5" />
                       </span>
-                      <span className="min-w-0 flex-1">
-                        <span className="block truncate text-sm font-medium">{project.title}</span>
-                        <span className="block truncate text-[10px] font-medium text-muted-foreground">
-                          {project.conversationCount} 个会话
-                        </span>
-                      </span>
-                    </button>
-                    <button
-                      type="button"
-                      aria-label={`重命名 ${project.title}`}
-                      className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-background hover:text-foreground group-hover/project:opacity-100 focus:opacity-100"
-                      onClick={() => openRenameDialog(project)}
-                    >
-                      <Pencil className="h-3.5 w-3.5" />
+                      <span className="min-w-0 flex-1 truncate text-sm font-semibold">{project.title}</span>
                     </button>
+                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center gap-1">
+                      <button
+                        type="button"
+                        aria-label={projectExpanded ? `收起 ${project.title} 的会话` : `展开 ${project.title} 的会话`}
+                        title={projectExpanded ? `收起 ${project.title} 的会话` : `展开 ${project.title} 的会话`}
+                        aria-expanded={active ? projectExpanded : undefined}
+                        className={cn(PROJECT_ACTION_BUTTON_CLASS, 'hover:bg-background hover:text-foreground active:scale-[0.96]')}
+                        onClick={() => handleToggleProject(project.workspaceId)}
+                      >
+                        <ChevronDown
+                          data-testid={`sidebar-image-project-toggle-icon-${project.workspaceId}`}
+                          className={cn('h-3.5 w-3.5 transition-transform duration-200 ease-out', projectExpanded && 'rotate-180')}
+                        />
+                      </button>
+                      <button
+                        type="button"
+                        aria-label={`重命名 ${project.title}`}
+                        className={cn(PROJECT_ACTION_BUTTON_CLASS, 'hover:bg-background hover:text-foreground active:scale-[0.96]')}
+                        onClick={() => openRenameDialog(project)}
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                      </button>
+                      <button
+                        type="button"
+                        aria-label="新建设计会话"
+                        title="新建设计会话"
+                        aria-busy={creatingConversation}
+                        className={cn(PROJECT_ACTION_BUTTON_CLASS, 'hover:bg-background hover:text-brand active:scale-[0.96]')}
+                        disabled={creatingConversation || !workspace || workspace.workspaceId !== project.workspaceId}
+                        onClick={() => void handleCreateConversation()}
+                      >
+                        {creatingConversation
+                          ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                          : <Plus className="h-3.5 w-3.5" />}
+                      </button>
+                    </div>
                   </div>
-                  {active ? (
-                    <div className="mt-1 border-t border-brand/15 pt-1.5">
-                      <div className="flex min-h-10 items-center justify-between gap-2 px-1">
-                        <span className="text-[10px] font-semibold text-muted-foreground">设计会话</span>
+                  <DisclosureContent
+                    open={projectConversationsOpen}
+                    data-testid={`sidebar-image-conversations-${project.workspaceId}`}
+                    innerClassName={cn('px-1', projectConversationsOpen ? 'pb-1 pt-1' : 'h-0')}
+                  >
+                    <section aria-label={`${project.title}的会话列表`}>
+                      {workspace?.workspaceId !== project.workspaceId ? (
+                        <div role="status" className="flex items-center gap-2 px-1.5 py-2 text-[10px] text-muted-foreground">
+                          <Loader2 className="h-3 w-3 animate-spin text-brand" />
+                          正在读取历史会话
+                        </div>
+                      ) : conversations.length === 0 ? (
                         <button
                           type="button"
-                          aria-label="新建设计会话"
-                          title="新建设计会话"
-                          aria-busy={creatingConversation}
-                          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-[background-color,color,transform] hover:bg-background hover:text-brand active:scale-[0.96]"
+                          className="mt-1 flex w-full items-center gap-2 rounded-lg border border-dashed border-border/80 px-2 py-2 text-left text-[10px] text-muted-foreground hover:bg-background"
                           disabled={creatingConversation}
                           onClick={() => void handleCreateConversation()}
                         >
-                          {creatingConversation
-                            ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                            : <Plus className="h-3.5 w-3.5" />}
+                          <Plus className="h-3.5 w-3.5" />开始一条新对话
                         </button>
-                      </div>
-                      <div className="space-y-0.5 pb-1">
-                        {workspace?.workspaceId === project.workspaceId
-                          ? workspace.conversations.slice(0, 6).map((conversation) => {
-                              const selected = conversation.conversationId === activeConversationId;
-                              return (
-                                <button
-                                  key={conversation.conversationId}
-                                  type="button"
-                                  data-testid={`sidebar-image-conversation-${conversation.conversationId}`}
-                                  aria-current={selected ? 'page' : undefined}
-                                  className={cn(
-                                    'flex min-h-10 w-full items-center gap-2 rounded-lg px-2 text-left transition-[background-color,color,transform] active:scale-[0.96]',
-                                    selected
-                                      ? 'bg-background text-foreground shadow-soft'
-                                      : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',
-                                  )}
-                                  onClick={() => void selectConversation(conversation.conversationId)}
-                                >
-                                  <MessageSquareText className="h-3.5 w-3.5 shrink-0" />
-                                  <span className="min-w-0 flex-1">
-                                    <span className="block truncate text-[11px] font-semibold">
-                                      {conversation.title}
-                                    </span>
-                                    <span className="block truncate text-[10px]">
-                                      {conversation.brief.summary}
-                                    </span>
-                                  </span>
-                                </button>
-                              );
-                            })
-                          : null}
-                      </div>
-                    </div>
-                  ) : null}
+                      ) : (
+                        <div className="mt-0.5 space-y-0.5">
+                          {visibleConversations.map(renderConversation)}
+                          {hiddenConversations.length > 0 ? (
+                            <div className="pt-1">
+                              <button
+                                type="button"
+                                className="flex w-full items-center justify-between px-1.5 py-1 text-left text-[10px] font-semibold text-muted-foreground"
+                                aria-expanded={moreConversationsOpen}
+                                onClick={() => setExpandedConversationLists((current) => ({
+                                  ...current,
+                                  [project.workspaceId]: !moreConversationsOpen,
+                                }))}
+                              >
+                                <span>更多会话（{hiddenConversations.length}）</span>
+                                <ChevronRight className={cn('h-3.5 w-3.5 transition-transform duration-200 ease-out', moreConversationsOpen && 'rotate-90')} />
+                              </button>
+                              <DisclosureContent
+                                open={moreConversationsOpen}
+                                data-testid={`sidebar-image-more-conversations-${project.workspaceId}`}
+                                className="mt-0.5"
+                                innerClassName="space-y-0.5"
+                              >
+                                {hiddenConversations.map(renderConversation)}
+                              </DisclosureContent>
+                            </div>
+                          ) : null}
+                        </div>
+                      )}
+                    </section>
+                  </DisclosureContent>
                 </section>
               );
             }) : null}