#统一工具栏

#概述

这是一个重要的用户体验改进计划，旨在将 Tachybase 的编辑模式升级为类似飞书等现代化协作工具的所见即所得编辑模式，通过统一工具栏提供一致的操作入口和更好的交互体验。

#当前痛点

在当前的编辑模式中，存在以下问题：

1. 操作分散：工具栏（toolbar）、初始化器（initializer）、设置器（settings）三个功能分散在不同的位置，增加了用户的学习成本
2. UI 入侵性强：编辑操作往往会干扰卡片本身的 UI 展示，影响用户体验
3. 布局调整不便：缺乏直观的拖拽布局能力，调整页面结构需要多步操作
4. 编辑与预览分离：用户难以在编辑过程中直观地看到最终效果

#改进方案

#核心设计理念

采用非入侵式编辑的设计理念，让编辑功能服务于内容，而不是干扰内容的展示。

#主要特性

#1. 统一的卡片工具栏

在每个卡片的上方提供一个统一的工具栏，融合原有的三个功能模块，并扩展更多实用功能：

工具栏包含的功能：

• 卡片标题：可直接编辑的卡片名称，点击即可修改
• 工具栏（Toolbar）：提供快速操作按钮，如复制、删除、移动等
• 初始化器（Initializer）：快速添加新的内容块或组件
• 设置器（Settings）：配置当前卡片的各种属性和参数
• 调试工具：用于开发调试的辅助功能，如查看 Schema、日志等
• 更多操作：通过下拉菜单访问更多功能

视觉设计：

UI 团队已制定了完整的视觉规范，工具栏采用现代化的设计风格：

┌─────────────────────────────────────────────────────────────────────┐
│  [✏️卡片名称] [📋] [✂️] [🗑️] [➕] [⚙️] [🐛] [⋮更多]              │ ← 统一工具栏
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│                        卡片内容区域                                   │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

• 悬停激活：鼠标悬停在卡片上时显示工具栏
• 半透明背景：工具栏采用轻微的半透明效果，减少视觉干扰
• 图标化设计：所有操作均使用直观的图标表示
• 响应式布局：根据卡片宽度自动调整工具栏显示

优势：

• 统一操作入口：所有编辑操作（包括拖拽、配置、调试等）集中在工具栏，提供一致的交互体验
• 不阻碍 UI 展示：工具栏位于卡片外部，不干扰原有内容的展示
• 上下文感知：根据卡片类型动态显示相关功能
• 专业视觉设计：提升整体品质感和易用性

#2. 工具栏集成的拖拽能力

原有的拖拽功能现在统一集成到工具栏中，通过工具栏按钮进行操作：

• 拖拽移动：点击工具栏的拖拽图标，激活拖动模式调整卡片位置
• 拖拽调整大小：通过工具栏的尺寸调整按钮，精确控制卡片大小
• 视觉反馈：提供清晰的拖拽预览和落点提示

这种设计将拖拽能力整合到统一的工具栏中，使所有编辑操作都有一致的入口，降低用户的认知负担。

#3. 非入侵式编辑

设计原则：

• 悬浮显示：工具栏在鼠标悬停或选中时才显示，平时隐藏
• 最小化干扰：工具栏使用半透明设计，不遮挡关键内容
• 保持原貌：编辑状态下，卡片内容与最终展示完全一致
• 快速切换：提供快捷键快速进入/退出编辑模式

卡片内部字段的缩略工具栏：

对于卡片内部的各个字段和组件，采用更为精简的缩略工具栏设计：

┌─────────────────────────────────────────┐
│  下拉复选框                    [📋] [🗑️]│ ← 仅显示最常用的 2 个图标
├─────────────────────────────────────────┤
│  [请选择...  ▼]                         │
└─────────────────────────────────────────┘

缩略工具栏的特点：

• 最多显示 2 个图标：只展示最常用的操作（如复制、删除）
• 更多操作下拉菜单：点击"更多"图标（⋮）展开完整的操作列表
• 上下文相关：根据字段类型动态显示最相关的操作
• 轻量化设计：占用空间极小，对原有 UI 的干扰降到最低

┌─────────────────────────────────────────┐
│  单行文本               [📋] [⋮更多 ▼]  │ ← 点击"更多"展开菜单
├─────────────────────────────────────────┤
│  [输入文本...]                           │
└─────────────────────────────────────────┘
                                    ↓
                            ┌──────────────┐
                            │ 📋 复制       │
                            │ ✂️ 剪切       │
                            │ 🗑️ 删除       │
                            │ ⚙️ 设置       │
                            │ 🔄 替换       │
                            │ 📏 调整宽度    │
                            └──────────────┘

实际界面效果：

下图展示了实际的表单编辑界面，可以看到：

• 顶部的统一工具栏包含了卡片标题、各种操作图标
• 各个字段右侧都有缩略工具栏，显示最常用的操作图标
• 界面简洁清晰，编辑工具不干扰内容展示

这种设计既保证了编辑功能的完整性，又最大程度地保持了原有界面的简洁性。

#4. 所见即所得的编辑体验

参考飞书、Notion 等现代化编辑器的交互：

• 实时预览：任何修改立即在界面上反映
• 行内编辑：直接在内容上进行编辑，无需弹窗
• 智能提示：输入时提供智能建议和自动完成
• 快速格式化：支持 Markdown 快捷语法和富文本工具栏

#技术实现要点

#前端架构

1. 组件化设计

   • 抽象统一的 CardToolbar 组件
   • 实现可插拔的工具栏插件系统
   • 提供标准化的工具栏 API

2. 拖拽系统

   • 基于 HTML5 Drag and Drop API
   • 实现拖拽事件的统一管理
   • 提供拖拽状态的全局 Store

3. UI Schema 增强

   • 扩展 Schema 协议，支持新的编辑模式
   • 保持向后兼容性
   • 提供迁移工具辅助升级

#接口设计要求

统一工具栏的接口设计将围绕三个核心目标展开，具体的接口定义将在实际实现阶段确定：

#1. 定义新的统一接口

目标： 为开发者提供简洁、易用的新接口，降低接入成本。

要求：

• 提供统一的工具栏项注册机制
• 支持工具栏的灵活配置和扩展
• 提供清晰的 API 设计，包括注册、配置、控制等功能
• 支持可见性控制、禁用状态、优先级排序等常用特性
• 提供上下文感知能力，根据卡片类型动态显示相关功能

#2. 保持向后兼容性

目标： 确保原有逻辑零迁移成本，平滑过渡到新的统一工具栏。

要求：

• 无需修改代码：现有使用 SchemaToolbar、SchemaInitializer、SchemaSettings 的代码无需任何修改
• 自动适配机制：系统自动识别原有配置并适配到新工具栏
• 功能完整保留：所有原有功能在新工具栏中完整保留，不丢失任何能力
• 渐进式升级路径：开发者可以选择合适的时机逐步迁移到新接口，没有强制要求
• 双模式并存：在过渡期内，新旧接口可以同时使用，互不干扰

#3. 优化云组件接入体验

目标： 简化云组件的接入流程，提供更好的开发体验。

要求：

• 零配置接入：云组件可通过简单配置自动出现在工具栏中
• 热加载支持：云组件更新后自动刷新工具栏，无需重启应用
• 统一管理机制：云组件的工具栏项与本地组件使用相同的管理机制
• 版本兼容处理：自动处理不同版本云组件的接口差异
• 一键注册能力：提供便捷的注册方式，减少配置代码

#4. 开发者工具支持

为了帮助开发者更好地使用新接口，将提供配套的开发工具：

迁移工具：

• 自动分析现有代码，识别旧接口使用情况
• 生成迁移建议和新接口代码
• 提供详细的迁移指南和最佳实践
• 保留原有代码作为注释，便于对比和回退

文档和示例：

• 提供完整的 API 文档
• 提供丰富的使用示例和最佳实践
• 提供从旧接口到新接口的迁移指南

#交互优化

1. 性能优化

   • 使用虚拟滚动处理大量卡片
   • 实现工具栏的懒加载
   • 优化拖拽过程的渲染性能

2. 可访问性

   • 支持键盘快捷键操作
   • 提供屏幕阅读器支持
   • 确保色彩对比度符合标准

#预期收益

#用户体验提升

• 更一致的操作入口：所有编辑功能统一在工具栏中，提供一致的交互体验
• 更好的交互体验：符合现代化编辑器的使用习惯，直观易用
• 不阻碍原有 UI 展示：非入侵式设计让用户专注于内容本身，编辑工具不干扰界面呈现

#开发者友好

• 简化概念理解：不需要理解 Toolbar、Initializer、Settings 等多种分散的概念，只需理解统一工具栏
• 统一的 API：提供简洁易用的新接口，简化插件开发，降低扩展难度
• 零迁移成本：原有逻辑无需修改，自动适配到新工具栏，完全向后兼容
• 更好的可维护性：功能模块化，便于后续迭代
• 云组件友好：优化云组件接入体验，零配置即可接入，支持热加载
• 标准化接口：促进生态发展，鼓励社区贡献

#产品竞争力

• 对标一流产品：编辑体验向 Notion、飞书等看齐
• 差异化优势：结合 Tachybase 的灵活性，提供更强大的定制能力
• 吸引新用户：现代化的编辑体验降低用户迁移门槛

#兼容性说明

为确保平稳过渡，我们将：

1. 保持向后兼容：现有的编辑模式继续可用
2. 渐进式迁移：提供迁移工具和详细文档
3. 配置选项：允许用户在新旧模式间切换
4. 充分测试：确保不影响现有功能

#参考案例

• 飞书文档：行内编辑、拖拽布局
• Notion：块级编辑、统一工具栏
• 语雀：所见即所得、快捷操作
• Craft：非入侵式设计、优雅的交互

#总结

这个改进计划将为 Tachybase 带来质的飞跃，通过现代化的编辑体验，我们能够：

• 显著降低用户的学习和使用成本
• 提升产品的整体竞争力
• 为未来的功能扩展奠定良好基础

我们期待这个改进能够让 Tachybase 成为更加易用、强大的低代码平台。

#相关资源

• UI Schema 设计协议
• Schema 工具栏开发
• Schema 设置器开发
• Schema 初始化器开发