← 返回开发时间线

聊天站 v0.3.0:工作区 - UI/UX 与节点阅读体验收束

ChatNotes v0.3.0 完成一轮工作区 UI/UX 收束:保留本地优先的项目与节点模型,将主要阅读体验从无限画布调整为更适合连续阅读的宽幅卡片视图,并统一侧栏与内容区的暖米色视觉语言。

2026-08-12

聊天站视觉

ChatNotes v0.3.0 完成一轮工作区 UI/UX 收束:保留本地优先的项目与节点模型,将主要阅读体验从无限画布调整为更适合连续阅读的宽幅卡片视图,并统一侧栏与内容区的暖米色视觉语言。

工作区与节点体验

  • 移除无限画布的视觉负担,改为居中的项目阅读卡片;卡片宽度、留白和输入区在不同窗口宽度下保持稳定呼吸感。
  • 折叠卡片直接使用问题作为标题,保留节点之间的导航辨识度;展开后继续显示问答正文和 Markdown 内容。
  • 侧栏收束为自适应宽度的操作按钮、项目分组和项目卡片,去除冗余分割线与独立底色。
  • 新增文件夹、项目移动、归档/恢复、永久删除以及 JSON 导入/导出;导出入口并入左上操作区。
  • 当前版本暂不引入云端项目、账户和设置等未实现 UX;节点拓扑数据结构继续为后续知识图谱视图保留扩展空间。

发布验证

  • ChatNotes 发布提交:60a562f feat(v0.3.0): 收束工作区 UI 与节点阅读体验
  • ChatNotes 已创建标签 v0.3.0
  • npm run lintnpm run test:unit(77 个测试)和 npm run build 均通过,git diff --check 通过。
  • 构建仍有 vinext 对动态 API 路由无法静态分类的既有提示,不影响本次构建完成。

UI 设计图留档

以下图片记录 ChatNotes v0.3.0 的暖米色侧栏、宽幅项目卡片、问题标题卡片与节点继续提问区域。

ChatNotes v0.3.0 UI 设计图 1

交互态 UI 留档

补充 v0.3.0 在实际工作区中的几个关键状态:创建项目后的空根节点、项目操作菜单、收起侧栏,以及新建文件夹对话框。

ChatNotes v0.3.0 创建项目后的空根节点 ChatNotes v0.3.0 项目操作菜单展开状态 ChatNotes v0.3.0 侧栏收起状态 ChatNotes v0.3.0 新建文件夹对话框