merge: integrate coding default page

# Conflicts: # src/components/layout/Sidebar.tsx # tests/unit/coding-chat-panel.test.tsx
2026-09-07 10:10:34 +08:00
parent 39d7b7e2a1 ce90f57ce7
commit a91c7e3b86
12 changed files with 487 additions and 36 deletions
--- a/src/pages/Chat/CodingChatPanel.tsx
+++ b/src/pages/Chat/CodingChatPanel.tsx
@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  Bot,
+  ChevronRight,
  CircleAlert,
+  FolderKanban,
+  Plus,
  RefreshCw,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -33,6 +35,7 @@ import type {
 } from '@/types/coding-conversation';
 import type {
  CodingConversationMetadata,
+  CodingProjectSummary,
 } from '@/types/coding-project';
 import { CodingComposer } from './CodingComposer';
 import { CodingChangesSummary } from './CodingChangesSummary';
@@ -40,10 +43,13 @@ import { CodingConversationSidebar } from './CodingConversationSidebar';
 import { CodingConversationHeader } from './CodingConversationHeader';
 import { CodingConversationTimeline } from './CodingConversationTimeline';
 import { CodingInteractionPanel } from './CodingInteractionPanel';
+import { CodingWelcomeHero } from './CodingWelcomeHero';
 import { createLocalConversationSnapshot } from './coding-chat-snapshot';

 export interface CodingChatPanelProps {
  navigationDraft?: string;
+  onCreateProject?(): void;
+  onOpenProject?(projectId: string): void;
  onOpenProjectSettings?(): void;
 }

@@ -107,10 +113,24 @@ function acceptedPromptCount(
  )).length;
 }

+const PROJECT_DATE_FORMATTER = new Intl.DateTimeFormat('zh-CN', {
+  month: 'short',
+  day: 'numeric',
+});
+
+function projectLastOpenedLabel(project: CodingProjectSummary): string {
+  const timestamp = Date.parse(project.lastOpenedAt);
+  if (!Number.isFinite(timestamp)) return '本地项目';
+  return `最近打开 ${PROJECT_DATE_FORMATTER.format(timestamp)}`;
+}
+
 export function CodingChatPanel({
  navigationDraft,
+  onCreateProject,
+  onOpenProject,
  onOpenProjectSettings,
 }: CodingChatPanelProps) {
+  const projects = useCodingWorkspaceStore((state) => state.projects);
  const activeProject = useCodingWorkspaceStore((state) => state.activeProject);
  const config = useCodingWorkspaceStore((state) => state.config);
  const conversations = useCodingWorkspaceStore((state) => state.conversations);
@@ -592,18 +612,76 @@ export function CodingChatPanel({

  if (!activeProject && workspaceLoadState !== 'loading') {
    return (
-      <section className="flex min-h-0 flex-1 items-center justify-center bg-background p-6" data-testid="coding-chat-empty-project">
-        <div className="max-w-md text-center">
-          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-surface-subtle shadow-[0_0_0_1px_rgba(0,0,0,0.06)]">
-            <Bot className="h-5 w-5 text-muted-foreground" aria-hidden="true" />
-          </div>
-          <h1 className="mt-4 text-balance text-lg font-semibold">先选择一个编程项目</h1>
-          <p className="mt-2 text-pretty text-sm leading-6 text-muted-foreground">
-            项目与智能体配置从本地读取，打开输入框不会提前启动 Pi 运行实例。
-          </p>
-          <Button className="mt-5 min-h-10 rounded-xl" onClick={onOpenProjectSettings}>
-            打开项目设置
+      <section
+        className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-background px-4 pb-3 pt-4 text-foreground sm:px-6 sm:pb-5"
+        data-testid="coding-chat-empty-project"
+      >
+        <CodingWelcomeHero className="min-h-[18rem] flex-1 pb-8 pt-6 sm:pb-12" />
+
+        <div className="mx-auto w-full max-w-[52rem] shrink-0 pb-1">
+          {workspaceError ? (
+            <div className="mb-2 flex min-h-10 items-center gap-2 rounded-xl bg-destructive/5 px-3 py-2 text-xs text-destructive">
+              <CircleAlert className="h-4 w-4 shrink-0" aria-hidden="true" />
+              <p className="min-w-0 flex-1 text-pretty" role="alert">{workspaceError}</p>
+              <Button
+                type="button"
+                variant="ghost"
+                className="min-h-8 shrink-0 rounded-lg px-2.5 text-destructive"
+                onClick={() => void loadWorkspace().catch(() => undefined)}
+              >
+                <RefreshCw className="mr-1.5 h-4 w-4" aria-hidden="true" />
+                刷新
+              </Button>
+            </div>
+          ) : null}
+
+          <Button
+            type="button"
+            data-testid="coding-start-project-button"
+            className="mx-auto flex h-12 min-w-44 rounded-xl border border-brand/20 bg-brand px-7 text-[15px] font-semibold text-primary-foreground shadow-[0_10px_24px_rgba(190,68,24,0.18)] transition-[transform,box-shadow,background-color] duration-200 hover:-translate-y-0.5 hover:bg-brand-hover hover:shadow-[0_14px_30px_rgba(190,68,24,0.22)] active:translate-y-0"
+            onClick={onCreateProject}
+            disabled={!onCreateProject}
+          >
+            <Plus className="mr-2 h-4.5 w-4.5" aria-hidden="true" />
+            新增项目
          </Button>
+
+          {projects.length > 0 ? (
+            <section className="mt-7" aria-label="项目列表">
+              <div
+                className="flex gap-3 overflow-x-auto pb-2"
+                data-testid="coding-existing-projects"
+              >
+                {projects.map((project) => (
+                  <button
+                    type="button"
+                    key={project.id}
+                    data-testid={`coding-existing-project-${project.id}`}
+                    aria-label={`进入项目 ${project.name}`}
+                    className="motion-press group/project-card flex min-h-[6.75rem] w-64 shrink-0 flex-col justify-between rounded-2xl bg-surface-subtle p-4 text-left shadow-[0_8px_22px_rgba(35,43,56,0.055)] ring-1 ring-foreground/[0.055] transition-[transform,box-shadow,background-color] duration-200 hover:-translate-y-0.5 hover:bg-white hover:shadow-[0_14px_30px_rgba(35,43,56,0.09)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 focus-visible:ring-offset-2"
+                    onClick={() => onOpenProject?.(project.id)}
+                    disabled={!onOpenProject}
+                  >
+                    <span className="flex items-start justify-between gap-4">
+                      <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-white text-brand shadow-[0_0_0_1px_rgba(35,43,56,0.06)] group-hover/project-card:bg-brand-soft">
+                        <FolderKanban className="h-4 w-4" aria-hidden="true" />
+                      </span>
+                      <ChevronRight className="mt-1 h-4 w-4 text-muted-foreground/55 transition-[transform,color] duration-200 group-hover/project-card:translate-x-0.5 group-hover/project-card:text-foreground" aria-hidden="true" />
+                    </span>
+                    <span className="mt-4 min-w-0">
+                      <span className="block truncate text-sm font-semibold text-foreground">{project.name}</span>
+                      <time
+                        dateTime={project.lastOpenedAt}
+                        className="mt-1 block text-xs text-muted-foreground"
+                      >
+                        {projectLastOpenedLabel(project)}
+                      </time>
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </section>
+          ) : null}
        </div>
      </section>
    );
--- a/src/pages/Chat/CodingConversationTimeline.tsx
+++ b/src/pages/Chat/CodingConversationTimeline.tsx
@@ -11,7 +11,6 @@ import {
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
-  Bot,
  BookOpen,
  Check,
  CheckCircle2,
@@ -64,6 +63,7 @@ import type {
  SubagentDetailsV1,
 } from '../../../shared/coding-conversation-contracts';
 import { CodingAttachmentPreview } from './CodingAttachmentPreview';
+import { CodingWelcomeHero } from './CodingWelcomeHero';

 const EMPTY_NODES: ConversationNode[] = [];
 const IDLE_RUN: ConversationRunState = { status: 'idle' };
@@ -1610,7 +1610,10 @@ export const CodingConversationTimeline = memo(function CodingConversationTimeli
        if (element.scrollTop <= 48) loadEarlier();
      }}
    >
-      <div className="mx-auto flex w-full max-w-[50rem] flex-col gap-8">
+      <div className={cn(
+        'mx-auto flex w-full max-w-[50rem] flex-col gap-8',
+        nodes.length === 0 && 'min-h-full',
+      )}>
        {windowStart > 0 && (
          <Button
            type="button"
@@ -1632,15 +1635,10 @@ export const CodingConversationTimeline = memo(function CodingConversationTimeli
          />
        ))}
        {nodes.length === 0 && (
-          <div className="mx-auto flex max-w-md flex-col items-center px-6 py-16 text-center">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-subtle">
-              <Bot className="h-4.5 w-4.5 text-muted-foreground" aria-hidden="true" />
-            </div>
-            <h2 className="mt-4 text-balance text-base font-semibold">开始一条对话</h2>
-            <p className="mt-1.5 text-pretty text-sm leading-6 text-muted-foreground">
-              Pi 会连续展示思考和工具进度，处理完成后自动收纳过程并给出结论。
-            </p>
-          </div>
+          <CodingWelcomeHero
+            headingLevel="h2"
+            className="min-h-[18rem] flex-1 px-6 pb-12 pt-6 sm:pb-16"
+          />
        )}
      </div>
    </div>
--- a/src/pages/Chat/CodingWelcomeHero.tsx
+++ b/src/pages/Chat/CodingWelcomeHero.tsx
@@ -0,0 +1,29 @@
+import makeloreMark from '@/assets/logo.svg';
+import { cn } from '@/lib/utils';
+
+export function CodingWelcomeHero({
+  className,
+  headingLevel = 'h1',
+}: {
+  className?: string;
+  headingLevel?: 'h1' | 'h2';
+}) {
+  const Heading = headingLevel;
+
+  return (
+    <div
+      data-testid="coding-welcome-hero"
+      className={cn('flex flex-col items-center justify-center text-center', className)}
+    >
+      <img
+        src={makeloreMark}
+        alt="麦洛 M 标识"
+        className="h-auto w-12 select-none sm:w-[3.25rem]"
+        draggable={false}
+      />
+      <Heading className="mt-6 max-w-2xl text-balance text-[clamp(1.65rem,2.45vw,2.1rem)] font-medium leading-[1.28] tracking-[-0.04em] text-foreground">
+        你想让麦洛和你一起构建什么？
+      </Heading>
+    </div>
+  );
+}
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -1,5 +1,9 @@
 import { CodingChatPanel } from './CodingChatPanel';
 import { useNavigate } from 'react-router-dom';
+import {
+  requestCodingProjectCreation,
+  requestCodingProjectOpen,
+} from '@/lib/coding-project-entry';

 function getNavigationDraft(state: unknown): string | undefined {
  if (!state || typeof state !== 'object') return undefined;
@@ -24,6 +28,8 @@ export function Chat() {
    <div data-testid="chat-operation-page" className="flex h-[calc(100%_+_3rem)] min-h-0 -m-6 overflow-hidden bg-background">
      <CodingChatPanel
        navigationDraft={navigationDraft}
+        onCreateProject={requestCodingProjectCreation}
+        onOpenProject={requestCodingProjectOpen}
        onOpenProjectSettings={() => navigate('/project-config')}
      />
    </div>