1. Demo 简介
**是什么:**智汇笔记(ZhiHui Notes)是一款基于 Web 的 AI 智能知识管理应用,融合笔记记录、AI 对话、知识洞察和 NFC 工具于一体,帮助用户高效管理、检索和利用知识。
**面向谁:**面向学生、研究人员、知识工作者等需要频繁记录、整理和回顾知识的用户群体。
主要功能:
-
智能笔记管理:支持创建、编辑、收藏笔记,自动分类(技术学习/工作记录/灵感想法/读书笔记等),标签系统便于检索
-
AI 对话助手:基于笔记内容的 AI 问答,支持引用来源溯源,让知识真正"活"起来
-
知识洞察面板:可视化展示笔记统计、标签分布、学习趋势,帮助用户发现知识盲区
-
每日回顾:智能推荐每日待回顾笔记,强化记忆巩固
-
多语言支持:简体中文 / 繁體中文 / English 三语切换
-
深色模式:护眼暗色主题,适配不同使用场景
-
响应式设计:完美适配桌面端和移动端
2. Demo 创作思路
**灵感来源:**在日常学习和工作中,我发现知识管理存在几个核心痛点——笔记散落在各处、难以检索和关联、学过的内容容易遗忘。市面上的笔记工具要么功能单一,要么过于复杂,缺乏 AI 辅助的智能化体验。
想解决的问题:
-
知识碎片化——笔记缺乏统一管理和智能关联
-
检索效率低——传统关键词搜索无法理解语义
-
知识遗忘曲线——没有有效的回顾和巩固机制
-
多语言场景——国际化用户需要灵活的语言切换
**为什么做这个方向:**选择「学习工作」赛道,是因为知识管理是学生和职场人的刚需场景。通过 AI 赋能笔记管理,让知识从"记录"走向"理解"再到"应用",实现真正的智能化知识工作流。
3. Demo 体验地址
Demo 展示页: https://bin100k.github.io/ai-notes-trae/demo.html
在线体验:https://bin100k.github.io/ai-notes-trae/
(基于 GitHub Pages 部署,打开即可体验全部功能)
4. TRAE 实践过程
本项目完全使用 TRAE Work 完成,从零开始构建。以下是关键开发步骤:
步骤一:项目初始化与技术选型
使用 TRAE Work 创建 React + TypeScript + Vite 项目,选择 Tailwind CSS 4 作为样式方案。通过自然语言描述需求,让 AI 自动生成项目骨架和核心组件结构。
步骤二:核心功能开发
通过多轮对话逐步完善功能模块:
-
笔记 CRUD 操作 + localStorage 持久化
-
i18n 国际化系统(三语言支持)
-
AI 对话组件(模拟 AI 问答 + 来源引用)
-
知识洞察可视化面板
-
NFC 工具模块
-
每日回顾弹窗
-
响应式布局适配
步骤三:UI 精细打磨
通过反复对话迭代 UI 细节:
-
将语言切换从侧边栏移入设置面板(避免界面冗余)
-
深色模式与浅色模式的色彩体系优化
-
移动端导航栏适配
步骤四:构建修复与部署
开发过程中遇到一个关键问题:index.html 中的 <script> 标签错误指向了旧的编译产物,导致 Vite 只处理了 5 个模块而非完整的 1778 个。通过 TRAE Work 的调试能力快速定位并修复了根因,最终成功构建并部署到 GitHub Pages。
开发关键步骤截图
**截图1:**修复 index.html 构建问题 + 将语言切换迁移到设置面板(30分钟调试 + 6分钟 UI 迭代)

**截图2:**AI 与用户的有趣对话——关于语言切换位置的讨论,展示了 TRAE Work 的自然语言交互能力

**截图3:**AI 智能解析物理论文并自动创建笔记(2分钟完成),展示 AI 辅助知识录入能力

关键任务 Session ID
Session 1(项目构建修复 + UI 迭代):
2011419916377760:ba68ffc31fbb952cd236e41bb2f7fe07_6a3263f7a88bdb311cea8eda.6a33e2cba88bdb311ceaa966.6a33e2cba88bdb311ceaa964:TRAE Work CN.0.1.20.no_sid.no_ppe.T(2026/6/18 20:21:31)
Session 2(初始项目创建与核心功能开发):
2011419916377760:ba68ffc31fbb952cd236e41bb2f7fe07_6a3263f7a88bdb311cea8eda.6a33e2cba88bdb311ceaa966.6a33e2cba88bdb311ceaa963:TRAE Work CN.0.1.20.no_sid.no_ppe.T(2026/6/18 18:30:00)
Session 3(GitHub Pages 部署):
2011419916377760:ba68ffc31fbb952cd236e41bb2f7fe07_6a3263f7a88bdb311cea8eda.6a33e2cba88bdb311ceaa965.6a33e2cba88bdb311ceaa964:TRAE Work CN.0.1.20.no_sid.no_ppe.T(2026/6/18 20:45:00)
报名帖地址: