164 lines
11 KiB
Markdown
164 lines
11 KiB
Markdown
### 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) |