323 lines
11 KiB
Markdown
323 lines
11 KiB
Markdown
|
```markdown
|
|||
|
|
# 阶段 1：Wolai 核心页面树 + BlockNote 编辑器（最大程度克隆 Wolai UI 与交互）
|
|||
|
|
|
|||
|
|
**目标**：4-6 天内（AI 助手单人 8-12 小时）完成一个视觉与交互 95% 接近真实 Wolai（光模式）的核心编辑体验。
|
|||
|
|
**验收标准**（可直接写 Cypress 测试）：
|
|||
|
|
- 左侧 240px 树状侧边栏无限嵌套、可拖拽排序/嵌套、实时同步
|
|||
|
|
- 主编辑区 BlockNote 块编辑器（斜杠命令、Tab 缩进、拖拽柄、子页面块渲染为蓝色链接）
|
|||
|
|
- 顶部面包屑完整（≡ 展开侧边栏 + 路径跳转 + 星标/分享/更多）
|
|||
|
|
- 底部固定 AI 工具栏（发送/魔力中心/?/AI 按钮）
|
|||
|
|
- 暗黑模式自动适配、<768px 侧边栏折叠、首屏加载 <1.2s
|
|||
|
|
- 所有颜色/圆角/间距/字体 100% 按 ui_react.md 规范（Inter 字体、#2563eb 主蓝、hover #f5f5f5）
|
|||
|
|
|
|||
|
|
**本阶段只做阶段 1 内容**，不提前实现思维导图、OCR、AI 聊天侧边栏。
|
|||
|
|
|
|||
|
|
## 1. 颜色与全局样式（必须先做，Wolai 克隆关键）
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
// src/app/globals.css （在现有 Tailwind 基础上追加）
|
|||
|
|
@import url('https://rsms.me/inter/inter.css');
|
|||
|
|
|
|||
|
|
@layer base {
|
|||
|
|
html {
|
|||
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@layer components {
|
|||
|
|
.wolai-hover {
|
|||
|
|
@apply hover:bg-gray-50 transition-colors duration-150;
|
|||
|
|
}
|
|||
|
|
.wolai-selected {
|
|||
|
|
@apply bg-blue-50 border-l-2 border-blue-500;
|
|||
|
|
}
|
|||
|
|
.wolai-blue {
|
|||
|
|
@apply text-[#2563eb] hover:underline cursor-pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
// tailwind.config.ts 追加 Wolai 精确色值
|
|||
|
|
theme: {
|
|||
|
|
extend: {
|
|||
|
|
colors: {
|
|||
|
|
wolai: {
|
|||
|
|
blue: '#2563eb',
|
|||
|
|
hover: '#f5f5f5',
|
|||
|
|
border: '#eeeeee',
|
|||
|
|
text: '#333333',
|
|||
|
|
muted: '#666666',
|
|||
|
|
light: '#999999',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
borderRadius: {
|
|||
|
|
wolai: '4px',
|
|||
|
|
},
|
|||
|
|
spacing: {
|
|||
|
|
wolai: '8px',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 2. 整体布局组件（严格两栏 + 面包屑 + 底部栏）
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// src/app/(app)/layout.tsx
|
|||
|
|
import { Sidebar } from '@/components/sidebar/Sidebar';
|
|||
|
|
import { Breadcrumb } from '@/components/Breadcrumb';
|
|||
|
|
import { BottomToolbar } from '@/components/BottomToolbar';
|
|||
|
|
import { MobileSidebarTrigger } from '@/components/MobileSidebarTrigger';
|
|||
|
|
|
|||
|
|
export default function AppLayout({ children }: { children: React.ReactNode }) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex h-screen bg-white dark:bg-black">
|
|||
|
|
{/* 左侧侧边栏 - 响应式折叠 */}
|
|||
|
|
<Sidebar />
|
|||
|
|
|
|||
|
|
<div className="flex-1 flex flex-col min-w-0">
|
|||
|
|
{/* 顶部面包屑 40px */}
|
|||
|
|
<header className="h-10 border-b border-[#eeeeee] flex items-center px-4 gap-4">
|
|||
|
|
<MobileSidebarTrigger />
|
|||
|
|
<Breadcrumb />
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
{/* 主内容区 */}
|
|||
|
|
<main className="flex-1 overflow-hidden">{children}</main>
|
|||
|
|
|
|||
|
|
{/* 底部固定工具栏 */}
|
|||
|
|
<BottomToolbar />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 3. 递归树状侧边栏（240px 精确复刻）
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// src/components/sidebar/Sidebar.tsx
|
|||
|
|
'use client';
|
|||
|
|
import { useEffect, useState } from 'react';
|
|||
|
|
import { supabase } from '@/lib/supabase/client';
|
|||
|
|
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'; // 推荐比 react-dnd 更轻量
|
|||
|
|
|
|||
|
|
interface PageNode {
|
|||
|
|
id: string;
|
|||
|
|
title: string;
|
|||
|
|
children: PageNode[];
|
|||
|
|
hasChildren: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function Sidebar() {
|
|||
|
|
const [pages, setPages] = useState<PageNode[]>([]);
|
|||
|
|
const [openIds, setOpenIds] = useState<Set<string>>(new Set());
|
|||
|
|
|
|||
|
|
// 递归 CTE 查询所有层级（一次性拉取用户全部页面树）
|
|||
|
|
const fetchTree = async () => {
|
|||
|
|
const { data } = await supabase.rpc('get_documents_tree', { userId);
|
|||
|
|
setPages(data || []);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 拖拽结束 → 调用 Supabase function 更新 parent_id 和排序
|
|||
|
|
const onDragEnd = async (result: any) => { /* 实现 parent_id 与顺序更新 */ };
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="w-60 border-r border-[#eeeeee] flex flex-col">
|
|||
|
|
{/* 搜索区 */}
|
|||
|
|
<div className="p-2">
|
|||
|
|
<input className="w-full px-2 py-1 text-sm border-b border-gray-300 focus:border-[#2563eb] outline-none" placeholder="搜索..." />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 树 */}
|
|||
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
|||
|
|
<Droppable droppableId="sidebar">
|
|||
|
|
{(provided) => (
|
|||
|
|
<div {...provided.droppableProps} ref={provided.innerRef} className="flex-1 overflow-y-auto">
|
|||
|
|
{pages.map((page, index) => (
|
|||
|
|
<SidebarItem key={page.id} page={page} index={index} depth={0} openIds={openIds} setOpenIds={setOpenIds} />
|
|||
|
|
))}
|
|||
|
|
{provided.placeholder}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Droppable>
|
|||
|
|
</DragDropContext>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// SidebarItem 递归组件（缩进 16px，> 展开箭头，hover 显示拖拽柄）
|
|||
|
|
const SidebarItem = ({ page, index, depth }: { page: PageNode; index: number; depth: number }) => {
|
|||
|
|
const hasChildren = page.children.length > 0;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Draggable draggableId={page.id} index={index}>
|
|||
|
|
{(provided) => (
|
|||
|
|
<div
|
|||
|
|
ref={provided.innerRef}
|
|||
|
|
{...provided.draggableProps}
|
|||
|
|
className="flex items-center gap-1 py-0.5 pl-[calc(var(--depth)*16px + 8px)] wolai-hover"
|
|||
|
|
>
|
|||
|
|
{/* 展开箭头 + 拖拽柄（hover 显示） */}
|
|||
|
|
<div className="w-5 opacity-0 group-hover:opacity-100" {...provided.dragHandleProps}>⋮⋮</div>
|
|||
|
|
{hasChildren && <button>></button>}
|
|||
|
|
|
|||
|
|
<div className="flex-1 text-sm text-[#333] truncate">{page.title || '未命名'}</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Draggable>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> Supabase RPC 函数（SQL Editor 执行）：
|
|||
|
|
```sql
|
|||
|
|
create or replace function get_documents_tree(user_id uuid)
|
|||
|
|
returns table (id uuid, title text, parent_id uuid, depth integer, path text[])
|
|||
|
|
language sql as $$
|
|||
|
|
with recursive tree as (
|
|||
|
|
select d.id, d.title, d.parent_id, 0 as depth, array[d.id] as path
|
|||
|
|
from documents d
|
|||
|
|
where d.parent_id is null and d.user_id = user_id
|
|||
|
|
|
|||
|
|
union all
|
|||
|
|
|
|||
|
|
select d.id, d.title, d.parent_id, t.depth + 1, t.path || d.id
|
|||
|
|
from documents d
|
|||
|
|
join tree t on d.parent_id = t.id
|
|||
|
|
where d.user_id = user_id
|
|||
|
|
)
|
|||
|
|
select id, title, parent_id, depth
|
|||
|
|
from tree
|
|||
|
|
order by path;
|
|||
|
|
$$;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 4. BlockNote 编辑器页面（/documents/[id]/page.tsx）
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// src/app/(app)/documents/[id]/page.tsx
|
|||
|
|
import { BlockNoteEditor } from '@/components/editor/BlockNoteEditor';
|
|||
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|||
|
|
|
|||
|
|
export default async function DocumentPage({ params }: { params: { id: string } }) {
|
|||
|
|
const supabase = createSupabaseServer();
|
|||
|
|
const { data: doc } = await supabase
|
|||
|
|
.from('documents')
|
|||
|
|
.select('title, content')
|
|||
|
|
.eq('id', params.id)
|
|||
|
|
.single();
|
|||
|
|
|
|||
|
|
if (!doc) return <div>404</div>;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col h-full">
|
|||
|
|
{/* 标题 */}
|
|||
|
|
<h1 className="text-3xl font-bold px-12 pt-8 pb-2">{doc.title}</h1>
|
|||
|
|
|
|||
|
|
{/* BlockNote 编辑器（高度占满） */}
|
|||
|
|
<div className="flex-1 overflow-y-auto px-12">
|
|||
|
|
<BlockNoteEditor documentId={params.id} initialContent={doc.content} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// src/components/editor/BlockNoteEditor.tsx （核心克隆点）
|
|||
|
|
'use client';
|
|||
|
|
import { BlockNoteView, useCreateBlockNote } from '@blocknote/react';
|
|||
|
|
import { useEffect, useRef } from 'react';
|
|||
|
|
import * as Y from 'yjs';
|
|||
|
|
import { HocuspocusProvider } from '@hocuspocus/provider';
|
|||
|
|
|
|||
|
|
export function BlockNoteEditor({ documentId, initialContent }: { documentId: string; initialContent: any }) {
|
|||
|
|
const editor = useCreateBlockNote({
|
|||
|
|
initialContent,
|
|||
|
|
// 自定义斜杠命令菜单样式与 Wolai 一致（圆角 4px，浅灰背景）
|
|||
|
|
slashMenuTheme: { item: 'px-3 py-1.5 text-sm wolai-hover' },
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 实时协作（Hocuspocus + Supabase Realtime）
|
|||
|
|
useEffect(() => {
|
|||
|
|
const ydoc = new Y.Doc();
|
|||
|
|
const provider = new HocuspocusProvider({
|
|||
|
|
url: `${process.env.NEXT_PUBLIC_SUPABASE_URL}/realtime/v1`,
|
|||
|
|
name: `document.${documentId}`,
|
|||
|
|
token: 'your-supabase-anon-key', // 实际用 JWT
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 绑定 BlockNote → Yjs
|
|||
|
|
// ... 官方示例代码
|
|||
|
|
|
|||
|
|
// 防抖 800ms 保存到 Supabase documents.content
|
|||
|
|
const debounceSave = debounce(async (content) => {
|
|||
|
|
await fetch('/api/documents/save', {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: JSON.stringify({ id: documentId, content }),
|
|||
|
|
});
|
|||
|
|
}, 800);
|
|||
|
|
|
|||
|
|
editor.onEditorContentChange(() => debounceSave(editor.document));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<BlockNoteView
|
|||
|
|
editor={editor}
|
|||
|
|
theme="light"
|
|||
|
|
className="wolai-editor" // 自定义 CSS 实现 Wolai 精确间距
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 自定义 CSS 让 BlockNote 100% Wolai 风格 */
|
|||
|
|
.wolai-editor {
|
|||
|
|
--bn-colors-editor-text: #333333;
|
|||
|
|
--bn-colors-editor-background: #ffffff;
|
|||
|
|
--bn-radii: 4px;
|
|||
|
|
--bn-spacing: 8px;
|
|||
|
|
|
|||
|
|
.bn-block-outer { padding: 2px 8px; }
|
|||
|
|
.bn-block-group:hover .bn-drag-handle { opacity: 1; } /* 左侧拖拽柄 hover 显示 */
|
|||
|
|
.bn-inline-content a { color: #2563eb; text-decoration: underline; }
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 5. 面包屑 + 底部工具栏（精确像素级克隆）
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// src/components/Breadcrumb.tsx （路径链接可点，≡ 展开侧边栏）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// src/components/BottomToolbar.tsx
|
|||
|
|
<div className="fixed bottom-0 left-60 right-0 h-12 bg-white border-t border-[#eeeeee] flex items-center justify-end px-8 gap-4">
|
|||
|
|
<button className="text-sm text-gray-500">发送</button>
|
|||
|
|
<button className="w-8 h-8 rounded-full bg-[#2563eb] text-white flex items-center justify-center">AI</button>
|
|||
|
|
<button className="text-gray-500">?</button>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 6. 交给 AI 编码助手的完整 Prompt（直接复制）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
你现在是一个顶级 Next.js + BlockNote 专家。仓库已完成阶段0（Next.js15 App Router + Supabase + shadcn + 数据库表）。
|
|||
|
|
请严格按照 ui_react.md 文档实现 Wolai 克隆：
|
|||
|
|
1. 实现递归侧边栏 Sidebar（宽度 240px，缩进 16px，拖拽用 @hello-pangea/dnd，hover 显示拖拽柄，支持无限嵌套，颜色 #333/#666/#999）
|
|||
|
|
2. 实现 /documents/[id]/page.tsx 使用 BlockNoteView，标题 24px 粗体，内容区 px-12，块间距 8px，左侧拖拽柄 hover 显示，子页面块渲染为蓝色可点链接
|
|||
|
|
3. 实现顶部面包屑（高度 40px，≡ 触发侧边栏，路径链接可跳转，右侧星标/分享/更多）
|
|||
|
|
4. 实现固定底部工具栏（AI 按钮蓝色圆形 32px）
|
|||
|
|
5. 所有圆角 4px、间距 8px 基准、Inter 字体、hover #f5f5f5、选中左侧蓝边
|
|||
|
|
6. 实时协作用 @hocuspocus/provider + Supabase Realtime，800ms 防抖保存到 documents.content JSONB
|
|||
|
|
7. 移动端 <768px 侧边栏隐藏，用 ≡ 按钮展开 Drawer
|
|||
|
|
8. 完全使用 Server Components + Server Actions，首屏 skeleton 加载
|
|||
|
|
请输出完整代码文件列表与代码，不要省略任何细节。
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**阶段 1 到此结束**。执行完后运行 `pnpm dev` 应该看到一个几乎一模一样的 Wolai 界面（除思维导图外），拖拽、嵌套、实时保存全部正常。
|
|||
|
|
下一步再做阶段 2（斜杠命令增强 + 嵌入块 + 模板）。存为 `PHASE_1_WOLAI_CORE_UI.md`
|
|||
|
|
```
|