lix/mnote

Files

T

liaibo c70ff52869 chore: init monorepo snapshot

2025-11-23 10:55:04 +08:00

11 KiB

Raw Blame History

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 开发适配版）

核心设计原则（必须遵循）

极简主义：纯白底色 + 浅灰分隔线，无多余装饰，聚焦内容与嵌套结构；
统一视觉语言：圆角 4px、间距 8px 基准、字体 Inter（无衬线）；
交互一致性：hover 效果统一（浅灰背景）、点击反馈（蓝色边框）、快捷键与 Wolai 对齐（如 / 命令、Ctrl+K 搜索）；
层级清晰：通过字体大小（标题 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. 块组件（通用模板）

// 块组件通用结构，按此实现所有块类型
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. 思维导图块组件（特殊块类型）

// 导图块组件，集成 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）

// 全局搜索面板
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（绿色）	保存成功

交互规范

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

交付物要求

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

11 KiB Raw Blame History Unescape Escape