### Wolai UI 设计指南（React 适配版）

Wolai 是一个块式笔记工具，以简约、嵌套页面和实时协作著称。基于提供的截图和 Wolai 特征，本设计指南对原 ui.md 进行重写，调整为两栏布局（左侧树状侧边栏 + 主编辑区），添加面包屑导航、底部 AI 工具栏，并确保页面与文本块混合嵌套。组件使用 React 语法（兼容 Next.js），样式基于 Tailwind CSS。核心原则强调极简主义，匹配 Wolai 的白底黑字风格，支持多级嵌套和拖拽逻辑。

- **关键调整**：去除右侧面板（截图中未见，转为可选折叠）；强调树状侧边栏的无限嵌套；主区支持文本与子页面混合块；底部集成 AI 按钮；颜色方案优化为 Wolai-like（浅灰 hover，蓝色 accents）。
- **兼容性**：设计支持响应式（侧边栏可折叠），快捷键对齐 Wolai（/ 命令、Tab 缩进）。
- **不确定性**：Wolai UI 可能有区域变体（如暗模式），本设计基于截图假设光模式；若有争议（如 AI 集成深度），可进一步验证官方更新。

#### 布局概述
整体为两栏：左侧 240px 树状目录，主区自适应。顶部面包屑，底部工具栏。使用 Flex 布局确保响应式。

#### 颜色与字体
- 字体：Inter (sans-serif)，标题 18px，正文 14px。
- 颜色：主蓝 #2563eb，背景 #ffffff，hover #f5f5f5，文本 #333333。

---

# Wolai 风格 UI 设计图（React 开发适配版）

## 核心设计原则（必须遵循）
1. **极简主义**：纯白底色 + 浅灰分隔线，无多余装饰，聚焦内容与嵌套结构；
2. **统一视觉语言**：圆角 4px、间距 8px 基准、字体 Inter（无衬线）；
3. **交互一致性**：hover 效果统一（浅灰背景）、点击反馈（蓝色边框）、快捷键与 Wolai 对齐（如 / 命令、Ctrl+K 搜索）；
4. **层级清晰**：通过字体大小（标题 18px/正文 14px/辅助 12px）、颜色（深灰 #333/中灰 #666/浅灰 #999）区分；支持页面与文本块混合嵌套。

## 整体布局设计（两栏结构 + 面包屑 + 底部工具栏）
### 1. 顶部面包屑导航（高度 40px）
| 区域          | 元素                          | 样式细节                                                                 | 交互逻辑                                                                 |
|---------------|-------------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------|
| 左侧路径区    | ≡ 图标 + 路径链接（个人空间 > 后端选择） | 图标 16px 灰色，路径文字 14px 深灰，间距 8px，hover 蓝色下划线             | 点击路径链接跳转父级；≡ 展开侧边栏（如果折叠）                            |
| 中间操作区    | ↑ 图标 + 星标/分享/更多 (...) | 图标 16px，间距 12px，默认灰色，hover 浅灰背景                            | ↑ 跳转上级；星标：切换收藏状态；分享：弹出共享菜单；更多：导出/删除       |
| 右侧用户区    | 用户头像 + 通知铃铛           | 头像圆形（28px），铃铛 16px，间距 16px                                    | 头像：弹出账号菜单；铃铛：显示通知列表                                    |

### 2. 左侧树状侧边栏（宽度 240px，可折叠）
| 区域          | 元素                          | 样式细节                                                                 | 交互逻辑                                                                 |
|---------------|-------------------------------|--------------------------------------------------------------------------|
| 顶部搜索区    | 搜索输入框 + △ 多选/信封/...  | 输入框 14px 无边框（聚焦底部灰线），图标 16px 灰色，间距 8px              | Ctrl+K 全局搜索；点击图标切换视图（多选/消息等）                         |
| 树状列表      | 嵌套页面项（图标 + 标题 + 子项） | 图标 16px（如红/绿圆点），标题 14px，子项缩进 16px，展开箭头 >，选中蓝色边框 | 点击展开/折叠；拖拽重排序或嵌套；右键菜单（重命名/删除/移动）             |
| 底部功能区    | 回收站 + 设置                 | 图标 + 文字 12px 浅灰，间距 8px                                           | 回收站：查看删除项；设置：应用配置                                        |

### 3. 主编辑区（自适应宽度）
| 区域          | 元素                          | 样式细节                                                                 | 交互逻辑                                                                 |
|---------------|-------------------------------|--------------------------------------------------------------------------|
| 标题区        | 大标题（后端选择） + 子标题（AipexBase） | 标题 24px 粗体，子标题 16px，间距 8px，无边框（编辑时显示灰线）           | 点击编辑标题；支持实时保存                                                |
| 块编辑区      | 块容器（文本/列表/代码/子页面） | 块间距 8px，padding 8px；hover 显示左侧拖拽柄；内容 14px 行高 1.6         | / 命令插入块；Tab 缩进成子块；拖拽重排序；子页面块渲染为嵌套链接          |
| 底部工具栏    | 发送/魔力中心 + ? + AI 按钮   | 按钮圆形 32px，AI 蓝色，间距 12px，固定底部                               | AI：弹出问答面板；?：帮助；魔力中心：扩展功能                             |

## 核心组件详细设计（React 复刻关键）
### 1. 块组件（通用模板）
```jsx
// 块组件通用结构，按此实现所有块类型
import React from 'react';
import { useDrag, useDrop } from 'react-dnd';

const Block = ({ type, content, isSelected, onUpdate, onDelete }) => {
  const [{ isDragging }, drag] = useDrag({ type: 'BLOCK', item: { id: content.id } });
  const [{ isOver }, drop] = useDrop({ accept: 'BLOCK', drop: (item) => onUpdate(item.id, content.id) });

  return (
    <div ref={drop} className={`flex items-start p-2 m-1 rounded ${isSelected ? 'bg-blue-50 border-l-2 border-blue-500' : ''} ${isOver ? 'bg-gray-100' : ''} hover:bg-gray-50 cursor-text`}>
      {/* 左侧工具栏 */}
      <div className="flex flex-col gap-1 mr-2 hidden group-hover:flex">
        <svg className="w-4 h-4 text-gray-500 cursor-grab" ref={drag}>/* drag icon */</svg>
        <svg className="w-4 h-4 text-gray-500 cursor-pointer" onClick={onDelete}>/* delete icon */</svg>
      </div>
      {/* 块内容 */}
      {type === 'text' && <p className="flex-1 text-sm leading-6 text-gray-800">{content.text}</p>}
      {type === 'page' && <div className="flex-1 text-sm text-blue-600 underline">{content.title} (嵌套页面)</div>}
      {/* 右侧动作 */}
      {type === 'mindmap' && <svg className="w-4 h-4 text-gray-500">/* settings icon */</svg>}
    </div>
  );
};

export default Block;
```

### 2. 思维导图块组件（特殊块类型）
```jsx
// 导图块组件，集成 React Flow
import React from 'react';
import ReactFlow from 'react-flow-renderer';

const MindMapBlock = ({ nodes, edges, onNodesChange }) => {
  return (
    <div className="bg-gray-50 rounded p-4 m-1">
      <div className="flex gap-2 mb-3">
        <button className="px-2 py-1 text-xs bg-white border border-gray-200 rounded hover:bg-gray-50">曲线分支</button>
        <button className="px-2 py-1 text-xs bg-white border border-gray-200 rounded hover:bg-gray-50">直角分支</button>
      </div>
      <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} fitView className="h-96" />
    </div>
  );
};

export default MindMapBlock;
```

### 3. 全局搜索面板（快捷键 Ctrl+K）
```jsx
// 全局搜索面板
import React, { useState } from 'react';

const SearchPanel = ({ onClose, results }) => {
  const [query, setQuery] = useState('');

  return (
    <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] bg-white rounded-lg shadow-xl p-4 z-50">
      <div className="flex items-center border border-gray-200 rounded p-2 mb-4">
        <svg className="w-4 h-4 text-gray-500 mr-2">/* search icon */</svg>
        <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="搜索笔记、块、导图节点..." className="flex-1 outline-none text-sm" autoFocus />
      </div>
      <div className="flex gap-4 mb-4 border-b pb-2">
        <div className="text-sm text-blue-600 border-b-2 border-blue-600">全部</div>
        <div className="text-sm text-gray-600">笔记</div>
        {/* 其他标签 */}
      </div>
      <div className="max-h-96 overflow-y-auto">
        {results.map((result) => (
          <div key={result.id} className="p-2 rounded hover:bg-gray-50 cursor-pointer">
            <p className="text-sm font-semibold">{result.title}</p>
            <p className="text-xs text-gray-600 truncate">{result.preview}</p>
            <p className="text-xs text-gray-400">{result.source}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SearchPanel;
```

## 颜色规范
| 颜色类型      | 色值                          | 应用场景                                                                 |
|---------------|-------------------------------|--------------------------------------------------------------------------|
| 主色          | #2563eb（蓝色）               | 选中边框、链接、AI 按钮                                                  |
| 背景色        | #ffffff（白色）、#f5f5f5（hover） | 页面/块背景                                                              |
| 文本色        | #333333（深灰）、#666666（中灰） | 正文/辅助                                                                |
| 边框色        | #eeeeee（浅灰）               | 分隔线/输入框                                                            |
| 危险色        | #ef4444（红色）               | 删除                                                                     |
| 成功色        | #10b981（绿色）               | 保存成功                                                                 |

## 交互规范
1. **Hover 反馈**：可交互元素 hover 背景 #f5f5f5；
2. **选中反馈**：左侧蓝色边框 + 浅蓝背景；
3. **点击反馈**：按钮短暂深色；
4. **快捷键**：/ 块菜单、Ctrl+K 搜索、Tab 缩进；
5. **动画**：面板淡入 0.2s、拖拽跟随；
6. **加载**：蓝色 spinner 16px。

## 交付物要求
1. 实现核心页面（两栏布局、编辑区、搜索面板）；
2. 组件（块、导图、搜索）；
3. 遵循规范，直接集成 Next.js；
4. 支持响应式（<768px 侧边栏折叠）；
5. 代码完整（Tailwind + React）。

### 关键引用
- [Design System Components](https://www.uxpin.com/studio/blog/design-system-components/)
- [React Clone Components](https://www.dhiwise.com/post/building-reusable-ui-component-with-react-clone-element)
- [Cloning Interfaces in React](https://blog.openreplay.com/clone-website-react-app-open-lovable/)
- [UI Design Systems](https://designsystemsrepo.com/design-systems/)
- [React Component Cloning](https://stackoverflow.com/questions/76492080/cloning-functional-components-in-react)