Part 3:专业生产力工具、Data & 移动端与多设备
第四部分:专业生产力工具
第二十四章 Editor 编辑器交互
#XAzGqBUuHQLX text { white-space: pre; }#XAzGqBUuHQLX .fb0 { stroke: var(--N900-FG, 0.15); }#XAzGqBUuHQLX .fb0 {stroke: rgba(31,35,41, 0.15)}#XAzGqBUuHQLX .fx0 { stroke-miterlimit: 10; }#XAzGqBUuHQLX .fx0 {stroke-miterlimit: 10}#XAzGqBUuHQLX .fa1 { fill: rgb(187, 191, 196); }#XAzGqBUuHQLX .fa1 {fill: rgb(187, 191, 196)}#XAzGqBUuHQLX .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#XAzGqBUuHQLX .fx1 {font-style: normal}#XAzGqBUuHQLX .fx2 { text-anchor: middle; }#XAzGqBUuHQLX .fx2 {text-anchor: middle}#XAzGqBUuHQLX .fx3 { dominant-baseline: central; }#XAzGqBUuHQLX .fx3 {dominant-baseline: central}#XAzGqBUuHQLX .fx4 { stroke: none; }#XAzGqBUuHQLX .fx4 {stroke: none}#XAzGqBUuHQLX .fc0 { fill: var(--text-caption); }#XAzGqBUuHQLX .fc0 {fill: #646a73}#XAzGqBUuHQLX .fa2 { fill: var(--text-link-disabled); }#XAzGqBUuHQLX .fa2 {fill: rgb(187, 191, 196)}#XAzGqBUuHQLX .fa3 { fill: rgb(255, 240, 245); }#XAzGqBUuHQLX .fa3 {fill: rgb(255, 240, 245)}#XAzGqBUuHQLX .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#XAzGqBUuHQLX .fx5 {font-style: normal}#XAzGqBUuHQLX .fx6 { text-anchor: start; }#XAzGqBUuHQLX .fx6 {text-anchor: start}#XAzGqBUuHQLX .fx7 { dominant-baseline: alphabetic; }#XAzGqBUuHQLX .fx7 {dominant-baseline: alphabetic}#XAzGqBUuHQLX .fc1 { fill: rgb(233, 30, 99); }#XAzGqBUuHQLX .fc1 {fill: rgb(233, 30, 99)}#XAzGqBUuHQLX .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#XAzGqBUuHQLX .fx8 {font-style: normal}#XAzGqBUuHQLX .fc2 { fill: rgb(51, 51, 51); }#XAzGqBUuHQLX .fc2 {fill: rgb(51, 51, 51)}#XAzGqBUuHQLX .fb1 { fill: var(--N900-FG, 0.15); }#XAzGqBUuHQLX .fb1 {fill: rgba(31,35,41, 0.15)}#XAzGqBUuHQLX .fb2 { fill: rgb(240, 240, 240); }#XAzGqBUuHQLX .fb2 {fill: rgb(240, 240, 240)}#XAzGqBUuHQLX .fa4 { fill: var(--bg-body); }#XAzGqBUuHQLX .fa4 {fill: #fff}ABCD1234567891011术语效果说明AI 描述话术场景Slash CommandBubble MenuBlock EditorBlock HandleBlock InsertBlock DuplicateMarkdown ShortcutMentionInline CodeAutosave/ 命令浮动工具栏块编辑Block 把手插入 Block复制 BlockMarkdown 快捷输入@ 提及行内代码自动保存输入 / 后显示可搜索命令菜单。选中文字后在附近显示格式工具栏。内容由独立 Block 构成,可单独操作。Hover 左侧显示拖动 Handle。Hover Block 间隙显示 + 按钮。菜单支持 Duplicate。输入 #、-、``` 后自动转换格式。输入 @ 后搜索用户或资源。选中文字切换为 Code 格式。编辑停止 800ms 后自动保存。Notion编辑器Notion编辑器文档文档编辑器文档DocsWorkspace
第二十五章 Keyboard 键盘交互
#fTdByAdRSDni text { white-space: pre; }#fTdByAdRSDni .fb0 { stroke: var(--N900-FG, 0.15); }#fTdByAdRSDni .fb0 {stroke: rgba(31,35,41, 0.15)}#fTdByAdRSDni .fx0 { stroke-miterlimit: 10; }#fTdByAdRSDni .fx0 {stroke-miterlimit: 10}#fTdByAdRSDni .fa1 { fill: rgb(187, 191, 196); }#fTdByAdRSDni .fa1 {fill: rgb(187, 191, 196)}#fTdByAdRSDni .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#fTdByAdRSDni .fx1 {font-style: normal}#fTdByAdRSDni .fx2 { text-anchor: middle; }#fTdByAdRSDni .fx2 {text-anchor: middle}#fTdByAdRSDni .fx3 { dominant-baseline: central; }#fTdByAdRSDni .fx3 {dominant-baseline: central}#fTdByAdRSDni .fx4 { stroke: none; }#fTdByAdRSDni .fx4 {stroke: none}#fTdByAdRSDni .fc0 { fill: var(--text-caption); }#fTdByAdRSDni .fc0 {fill: #646a73}#fTdByAdRSDni .fa2 { fill: var(--text-link-disabled); }#fTdByAdRSDni .fa2 {fill: rgb(187, 191, 196)}#fTdByAdRSDni .fa3 { fill: rgb(255, 240, 245); }#fTdByAdRSDni .fa3 {fill: rgb(255, 240, 245)}#fTdByAdRSDni .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#fTdByAdRSDni .fx5 {font-style: normal}#fTdByAdRSDni .fx6 { text-anchor: start; }#fTdByAdRSDni .fx6 {text-anchor: start}#fTdByAdRSDni .fx7 { dominant-baseline: alphabetic; }#fTdByAdRSDni .fx7 {dominant-baseline: alphabetic}#fTdByAdRSDni .fc1 { fill: rgb(233, 30, 99); }#fTdByAdRSDni .fc1 {fill: rgb(233, 30, 99)}#fTdByAdRSDni .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#fTdByAdRSDni .fx8 {font-style: normal}#fTdByAdRSDni .fc2 { fill: rgb(51, 51, 51); }#fTdByAdRSDni .fc2 {fill: rgb(51, 51, 51)}#fTdByAdRSDni .fb1 { fill: var(--N900-FG, 0.15); }#fTdByAdRSDni .fb1 {fill: rgba(31,35,41, 0.15)}#fTdByAdRSDni .fb2 { fill: rgb(240, 240, 240); }#fTdByAdRSDni .fb2 {fill: rgb(240, 240, 240)}#fTdByAdRSDni .fa4 { fill: var(--bg-body); }#fTdByAdRSDni .fa4 {fill: #fff}ABCD123456789术语效果说明AI 描述话术场景ShortcutCmd/Ctrl+KEscapeEnterArrow NavigationShift SelectDeleteUndo Shortcut快捷键命令搜索退出确认方向键导航连续多选删除快捷键撤销为高频操作提供键盘 Shortcut。快捷键打开 Command Palette。Esc 关闭 Modal、Popover 等临时层。Enter 执行当前主要操作。列表或菜单支持上下键切换。Shift 点击选择连续范围。选中对象后 Delete 执行删除并确认。Cmd/Ctrl+Z 撤销操作。工具软件SaaS全站FormMenu文件Canvas编辑器
第二十六章 Undo / Redo
#pbKsSDIybBqT text { white-space: pre; }#pbKsSDIybBqT .fb0 { stroke: var(--N900-FG, 0.15); }#pbKsSDIybBqT .fb0 {stroke: rgba(31,35,41, 0.15)}#pbKsSDIybBqT .fx0 { stroke-miterlimit: 10; }#pbKsSDIybBqT .fx0 {stroke-miterlimit: 10}#pbKsSDIybBqT .fa1 { fill: rgb(187, 191, 196); }#pbKsSDIybBqT .fa1 {fill: rgb(187, 191, 196)}#pbKsSDIybBqT .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#pbKsSDIybBqT .fx1 {font-style: normal}#pbKsSDIybBqT .fx2 { text-anchor: middle; }#pbKsSDIybBqT .fx2 {text-anchor: middle}#pbKsSDIybBqT .fx3 { dominant-baseline: central; }#pbKsSDIybBqT .fx3 {dominant-baseline: central}#pbKsSDIybBqT .fx4 { stroke: none; }#pbKsSDIybBqT .fx4 {stroke: none}#pbKsSDIybBqT .fc0 { fill: var(--text-caption); }#pbKsSDIybBqT .fc0 {fill: #646a73}#pbKsSDIybBqT .fa2 { fill: var(--text-link-disabled); }#pbKsSDIybBqT .fa2 {fill: rgb(187, 191, 196)}#pbKsSDIybBqT .fa3 { fill: rgb(255, 240, 245); }#pbKsSDIybBqT .fa3 {fill: rgb(255, 240, 245)}#pbKsSDIybBqT .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#pbKsSDIybBqT .fx5 {font-style: normal}#pbKsSDIybBqT .fx6 { text-anchor: start; }#pbKsSDIybBqT .fx6 {text-anchor: start}#pbKsSDIybBqT .fx7 { dominant-baseline: alphabetic; }#pbKsSDIybBqT .fx7 {dominant-baseline: alphabetic}#pbKsSDIybBqT .fc1 { fill: rgb(233, 30, 99); }#pbKsSDIybBqT .fc1 {fill: rgb(233, 30, 99)}#pbKsSDIybBqT .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#pbKsSDIybBqT .fx8 {font-style: normal}#pbKsSDIybBqT .fc2 { fill: rgb(51, 51, 51); }#pbKsSDIybBqT .fc2 {fill: rgb(51, 51, 51)}#pbKsSDIybBqT .fb1 { fill: var(--N900-FG, 0.15); }#pbKsSDIybBqT .fb1 {fill: rgba(31,35,41, 0.15)}#pbKsSDIybBqT .fb2 { fill: rgb(240, 240, 240); }#pbKsSDIybBqT .fb2 {fill: rgb(240, 240, 240)}#pbKsSDIybBqT .fa4 { fill: var(--bg-body); }#pbKsSDIybBqT .fa4 {fill: #fff}ABCD1234567术语效果说明AI 描述话术场景UndoRedoUndo ToastSoft DeleteRestoreAction History撤销重做Toast 撤销软删除恢复操作历史保存用户最近操作并支持 Cmd/Ctrl+Z。使用 Cmd/Ctrl+Shift+Z 恢复操作。删除后显示“已删除 / 撤销”。删除内容先进入回收站。回收站中支持恢复项目。提供最近操作记录。编辑器EditorGmail 类文件SaaSWorkspace
第三十五章 Collaboration 实时协作
#VgkADXzSHzkN text { white-space: pre; }#VgkADXzSHzkN .fb0 { stroke: var(--N900-FG, 0.15); }#VgkADXzSHzkN .fb0 {stroke: rgba(31,35,41, 0.15)}#VgkADXzSHzkN .fx0 { stroke-miterlimit: 10; }#VgkADXzSHzkN .fx0 {stroke-miterlimit: 10}#VgkADXzSHzkN .fa1 { fill: rgb(187, 191, 196); }#VgkADXzSHzkN .fa1 {fill: rgb(187, 191, 196)}#VgkADXzSHzkN .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#VgkADXzSHzkN .fx1 {font-style: normal}#VgkADXzSHzkN .fx2 { text-anchor: middle; }#VgkADXzSHzkN .fx2 {text-anchor: middle}#VgkADXzSHzkN .fx3 { dominant-baseline: central; }#VgkADXzSHzkN .fx3 {dominant-baseline: central}#VgkADXzSHzkN .fx4 { stroke: none; }#VgkADXzSHzkN .fx4 {stroke: none}#VgkADXzSHzkN .fc0 { fill: var(--text-caption); }#VgkADXzSHzkN .fc0 {fill: #646a73}#VgkADXzSHzkN .fa2 { fill: var(--text-link-disabled); }#VgkADXzSHzkN .fa2 {fill: rgb(187, 191, 196)}#VgkADXzSHzkN .fa3 { fill: rgb(255, 240, 245); }#VgkADXzSHzkN .fa3 {fill: rgb(255, 240, 245)}#VgkADXzSHzkN .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#VgkADXzSHzkN .fx5 {font-style: normal}#VgkADXzSHzkN .fx6 { text-anchor: start; }#VgkADXzSHzkN .fx6 {text-anchor: start}#VgkADXzSHzkN .fx7 { dominant-baseline: alphabetic; }#VgkADXzSHzkN .fx7 {dominant-baseline: alphabetic}#VgkADXzSHzkN .fc1 { fill: rgb(233, 30, 99); }#VgkADXzSHzkN .fc1 {fill: rgb(233, 30, 99)}#VgkADXzSHzkN .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#VgkADXzSHzkN .fx8 {font-style: normal}#VgkADXzSHzkN .fc2 { fill: rgb(51, 51, 51); }#VgkADXzSHzkN .fc2 {fill: rgb(51, 51, 51)}#VgkADXzSHzkN .fb1 { fill: var(--N900-FG, 0.15); }#VgkADXzSHzkN .fb1 {fill: rgba(31,35,41, 0.15)}#VgkADXzSHzkN .fb2 { fill: rgb(240, 240, 240); }#VgkADXzSHzkN .fb2 {fill: rgb(240, 240, 240)}#VgkADXzSHzkN .fa4 { fill: var(--bg-body); }#VgkADXzSHzkN .fa4 {fill: #fff}ABCD12345678术语效果说明AI 描述话术场景PresenceLive CursorSelection PresenceTyping PresenceConflict StateSync StateVersion History在线成员实时光标协作者选区正在输入编辑冲突同步状态版本历史显示当前正在页面中的协作者头像。显示其他用户的光标位置和姓名。其他人的当前选区显示对应标记。显示其他用户正在编辑。同时修改时提供冲突处理。显示 Saving / Saved / Sync Failed。支持查看历史版本并恢复。DocsFigma 类编辑器文档DocsWorkspaceDocs
第三十六章 Canvas 无限画布
这是 AI Workflow / Agent Builder 的重要部分。
#JkwmKZFCGaNn text { white-space: pre; }#JkwmKZFCGaNn .fb0 { stroke: var(--N900-FG, 0.15); }#JkwmKZFCGaNn .fb0 {stroke: rgba(31,35,41, 0.15)}#JkwmKZFCGaNn .fx0 { stroke-miterlimit: 10; }#JkwmKZFCGaNn .fx0 {stroke-miterlimit: 10}#JkwmKZFCGaNn .fa1 { fill: rgb(187, 191, 196); }#JkwmKZFCGaNn .fa1 {fill: rgb(187, 191, 196)}#JkwmKZFCGaNn .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#JkwmKZFCGaNn .fx1 {font-style: normal}#JkwmKZFCGaNn .fx2 { text-anchor: middle; }#JkwmKZFCGaNn .fx2 {text-anchor: middle}#JkwmKZFCGaNn .fx3 { dominant-baseline: central; }#JkwmKZFCGaNn .fx3 {dominant-baseline: central}#JkwmKZFCGaNn .fx4 { stroke: none; }#JkwmKZFCGaNn .fx4 {stroke: none}#JkwmKZFCGaNn .fc0 { fill: var(--text-caption); }#JkwmKZFCGaNn .fc0 {fill: #646a73}#JkwmKZFCGaNn .fa2 { fill: var(--text-link-disabled); }#JkwmKZFCGaNn .fa2 {fill: rgb(187, 191, 196)}#JkwmKZFCGaNn .fa3 { fill: rgb(255, 240, 245); }#JkwmKZFCGaNn .fa3 {fill: rgb(255, 240, 245)}#JkwmKZFCGaNn .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#JkwmKZFCGaNn .fx5 {font-style: normal}#JkwmKZFCGaNn .fx6 { text-anchor: start; }#JkwmKZFCGaNn .fx6 {text-anchor: start}#JkwmKZFCGaNn .fx7 { dominant-baseline: alphabetic; }#JkwmKZFCGaNn .fx7 {dominant-baseline: alphabetic}#JkwmKZFCGaNn .fc1 { fill: rgb(233, 30, 99); }#JkwmKZFCGaNn .fc1 {fill: rgb(233, 30, 99)}#JkwmKZFCGaNn .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#JkwmKZFCGaNn .fx8 {font-style: normal}#JkwmKZFCGaNn .fc2 { fill: rgb(51, 51, 51); }#JkwmKZFCGaNn .fc2 {fill: rgb(51, 51, 51)}#JkwmKZFCGaNn .fb1 { fill: var(--N900-FG, 0.15); }#JkwmKZFCGaNn .fb1 {fill: rgba(31,35,41, 0.15)}#JkwmKZFCGaNn .fb2 { fill: rgb(240, 240, 240); }#JkwmKZFCGaNn .fb2 {fill: rgb(240, 240, 240)}#JkwmKZFCGaNn .fa4 { fill: var(--bg-body); }#JkwmKZFCGaNn .fa4 {fill: #fff}ABCD12345678910术语效果说明AI 描述话术场景PanZoomZoom to FitMinimapGridSnap GridMulti SelectAlignment GuideAuto Layout平移画布缩放适配全部小地图网格网格吸附框选对齐线自动布局按住空白区域拖动整个 Canvas。鼠标滚轮或触控板缩放 Canvas。点击按钮自动将所有节点居中显示。右下角显示整个工作区缩略图。Canvas 背景显示轻量网格辅助定位。节点移动时自动吸附网格。拖出选区框选择多个节点。节点靠近同一位置时显示参考线。点击后自动整理节点层级和间距。WorkflowWorkflowCanvasWorkflowBuilderWorkflowCanvasBuilderAgent
第三十七章 Workflow Node 节点交互
第五十五章 Terminal / Console 终端交互
非常适合 Vibe Coding。
第五十六章 Log / Activity 操作记录
第八十章 Presence / 多人状态强化
第五部分:Dashboard / Data
第三十二章 Dashboard 数据看板
第三十三章 Chart 图表交互
第三十四章 Realtime 实时数据
第五十八章 Map / 地图类交互
如果手册追求“维度广”,地图也应该存在。
第六部分:移动端与多设备
第二十七章 Onboarding 新手引导
第二十八章 Responsive 响应式交互
第二十九章 Mobile 手势
第三十章 Carousel 轮播
第三十一章 Media 媒体交互
第九十五章 Responsive Container / 容器级响应式
比单纯 Breakpoint 更现代。
第九十六章 Viewport / 可视区域行为