Skip to content

Latest commit

 

History

History
55 lines (45 loc) · 1.47 KB

File metadata and controls

55 lines (45 loc) · 1.47 KB

HoloGraph 功能增强计划

1. OOBE(首次引导体验)系统

组件设计

  • src/components/OOBE/ - OOBE 引导组件目录
    • index.tsx - 主 OOBE 容器组件
    • steps.tsx - 引导步骤定义
    • WelcomeStep.tsx - 欢迎页面
    • DemoStep.tsx - 示例项目介绍
    • SettingsStep.tsx - 初始设置
    • styles.module.css - 样式

功能特性

  • 首次启动自动显示
  • 支持从设置页面重新打开
  • 步骤导航(上一步/下一步/跳过)
  • 进度指示器
  • 动画过渡效果
  • 键盘快捷键支持(ESC关闭,方向键导航)

2. 欢迎/示例占位项目

数据结构

  • 预设示例图数据
  • 包含多种节点类型演示
  • 展示核心功能(对话、分支、AI响应)

示例内容

  1. 欢迎使用 HoloGraph - 介绍性节点
  2. 对话示例 - 展示对话流程
  3. 分支示例 - 展示分支功能
  4. AI 集成 - 展示 AI 节点

3. 工具栏 UI 升级

设计方向

  • 现代化图标按钮
  • 分组工具栏
  • 悬停提示和快捷键显示
  • 响应式布局
  • 暗色主题优化

工具栏分组

  1. 文件操作 - 新建、打开、保存、导入/导出
  2. 视图控制 - 缩放、适应视图、全屏
  3. 节点操作 - 添加节点、AI生成、分支
  4. 布局工具 - 自动布局、网格对齐
  5. 显示选项 - 标签、动画、LOD指示器

视觉风格

  • 玻璃拟态效果
  • 精致的悬停状态
  • 图标 + 文字组合
  • 分隔线和分组标题