Add 3 guided tour steps: notes/bookmarks, settings, QR code

sanbuphy · claude · sanbuphy · commit e519650af602 · 2026-05-27T13:56:21.000+08:00
- Add data-tour attributes to Sidebar for notes-saved, settings, walkinglabs
- Insert tour steps between "5 Learning Paths" and "Runnable Notebooks"
- Covers: note/bookmark management, theme/font settings, community QR code

Co-Authored-By: Claude Opus 4.7 &lt;noreply@anthropic.com&gt;
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -8,6 +8,7 @@ import Welcome from './components/Welcome.jsx'
 import GuidedTour from './components/GuidedTour.jsx'
 import SettingsPanel from './components/SettingsPanel.jsx'
 import ChangelogModal from './components/ChangelogModal.jsx'
+import WalkingLabsModal from './components/WalkingLabsModal.jsx'
 import { SettingsProvider } from './context/SettingsContext.jsx'
 import useSettings from './hooks/useSettings.js'
 import useTheme from './hooks/useTheme.js'
@@ -97,6 +98,7 @@ function AppContent() {
   const [tourStepIndex, setTourStepIndex] = useState(0)
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [changelogOpen, setChangelogOpen] = useState(false)
+  const [walkingLabsOpen, setWalkingLabsOpen] = useState(false)
 
   const { settings, updateSettings } = useSettings()
   const { resolvedTheme, toggleTheme } = useTheme(settings.theme)
@@ -120,7 +122,7 @@ function AppContent() {
       const nextId = getInitialNotebookId()
       if (nextId === NOTES_SENTINEL) return
       setCurrentId((prev) => {
-        if (prev === NOTES_SENTINEL) return prev
+        if (prev === nextId) return prev
         return nextId
       })
       if (nextId && window.location.hash !== `#${nextId}`) {
@@ -190,6 +192,21 @@ function AppContent() {
         title: '5 大学习路径',
         body: '这里是整套课程的地图：基础、训练、推理、前沿、评测与部署。每张卡片概括一个阶段要解决的问题，点击后会定位到对应学习路径，方便你从全局选择下一步。',
       },
+      {
+        target: '[data-tour="notes-saved"]',
+        title: '笔记与收藏',
+        body: '阅读时可以随时收藏 Notebook、选中文字添加笔记或高亮标记。所有内容在这里统一管理，支持导出备份和导入恢复，换浏览器也不会丢失。',
+      },
+      {
+        target: '[data-tour="settings"]',
+        title: '个性化设置',
+        body: '点击齿轮图标打开设置面板，可以切换浅色/深色/跟随系统主题，调整正文字号大小。设置会自动保存到本地，下次打开时保持不变。',
+      },
+      {
+        target: '[data-tour="walkinglabs"]',
+        title: '扫码加入社群',
+        body: '点击左上角的「...」按钮，会展开 WalkingLabs 社群二维码。扫码可以加入学习交流群，和其他读者一起讨论问题、分享学习心得。',
+      },
       {
         target: '[data-tour="notebooks"]',
         title: '精选可运行 Notebook',
@@ -202,10 +219,20 @@ function AppContent() {
         title: '一键运行',
         body: '顶部按钮可以把当前 Notebook 打开到 ModelScope、百度星河社区或 Colab，在线运行代码，无需本地配置。',
       },
+      {
+        target: '.viewer-title-row',
+        title: '收藏与笔记',
+        body: '点击标题旁的星标可收藏当前 Notebook。所有收藏和笔记在左侧边栏「笔记与收藏」中统一管理，支持导出和导入备份。',
+      },
+      {
+        target: '.viewer-body',
+        title: '选中文字即可操作',
+        body: '阅读时选中任意文字，会弹出工具栏：复制内容、添加笔记（引用原文 + 你的想法）、黄色高亮标记重点，还能生成精美的分享卡片。',
+      },
       {
         target: '.toc',
         title: '右侧大纲导航',
-        body: '右侧大纲对应每个学习环节，点击可快速跳转。推荐阅读顺序：先看直觉理解，再看手算验证，然后运行代码，最后观察输出。',
+        body: '右侧大纲对应每个学习环节，点击可快速跳转。大纲上的蓝色圆点表示该章节有笔记。推荐阅读顺序：先看直觉理解，再看手算验证，然后运行代码，最后观察输出。',
       },
       {
         target: '.code_cell',
@@ -239,6 +266,21 @@ function AppContent() {
         title: '5 Learning Paths',
         body: 'This is the course map: Foundation, Training, Inference, Frontiers, and Eval & Deploy. Each card summarizes one stage, and clicking a card takes you to that learning path so you can choose the next step from the full curriculum.',
       },
+      {
+        target: '[data-tour="notes-saved"]',
+        title: 'Notes & Bookmarks',
+        body: 'Bookmark any notebook, highlight text, or add notes while reading. Everything is managed here — export and import backups so you never lose your work across browsers.',
+      },
+      {
+        target: '[data-tour="settings"]',
+        title: 'Personalization',
+        body: 'Click the gear icon to open settings. Switch between light, dark, and system themes, or adjust the reading font size. Preferences are saved automatically.',
+      },
+      {
+        target: '[data-tour="walkinglabs"]',
+        title: 'Join the Community',
+        body: 'Click the "..." button in the top-left corner to reveal the WalkingLabs community QR code. Scan to join the discussion group and connect with other learners.',
+      },
       {
         target: '[data-tour="notebooks"]',
         title: 'Runnable Notebooks',
@@ -251,10 +293,20 @@ function AppContent() {
         title: 'One-Click Run',
         body: 'The top buttons open the current notebook in ModelScope, Baidu Xinghe, or Google Colab. Run code online without any local setup.',
       },
+      {
+        target: '.viewer-title-row',
+        title: 'Bookmarks & Notes',
+        body: 'Click the star next to the title to bookmark. All bookmarks and notes are managed in the sidebar under "Notes & Saved", with export and import support.',
+      },
+      {
+        target: '.viewer-body',
+        title: 'Select Text to Annotate',
+        body: 'Select any text while reading to bring up a toolbar: copy content, add a note (with quote + your thoughts), highlight key points in yellow, or generate a shareable card image.',
+      },
       {
         target: '.toc',
         title: 'Table of Contents',
-        body: 'The right sidebar outlines each section. Click to jump. Recommended order: read the intuition first, then hand calculation, then run code, then observe outputs.',
+        body: 'The right sidebar outlines each section. Blue dots mark sections with notes. Recommended order: read the intuition first, then hand calculation, then run code, then observe outputs.',
       },
       {
         target: '.code_cell',
@@ -335,8 +387,10 @@ function AppContent() {
         onOpenNotes={handleOpenNotes}
         onOpenSettings={() => setSettingsOpen(true)}
         onOpenChangelog={() => setChangelogOpen(true)}
+        onOpenWalkingLabs={() => setWalkingLabsOpen(true)}
         bookmarks={nbm.bookmarks}
         notes={nbm.notes}
+        notebooksWithNotes={nbm.notebooksWithNotes}
         isOpen={sidebarOpen}
         onClose={() => setSidebarOpen(false)}
       />
@@ -347,6 +401,7 @@ function AppContent() {
             catalog={catalog}
             bookmarks={nbm.bookmarks}
             notes={nbm.notes}
+            notebooksWithNotes={nbm.notebooksWithNotes}
             getSectionNotes={nbm.getSectionNotes}
             exportData={nbm.exportData}
             importFile={nbm.importFile}
@@ -398,6 +453,12 @@ function AppContent() {
         lang={lang}
         commits={CHANGELOG_COMMITS}
       />
+
+      <WalkingLabsModal
+        isOpen={walkingLabsOpen}
+        onClose={() => setWalkingLabsOpen(false)}
+        lang={lang}
+      />
     </div>
   )
 }
diff --git a/web/src/components/Sidebar.jsx b/web/src/components/Sidebar.jsx
@@ -6,7 +6,10 @@ import {
   Github,
   GraduationCap,
   History,
+  Ellipsis,
   Settings,
+  Star,
+  StickyNote,
   Sun,
   Moon,
   X,
@@ -52,7 +55,24 @@ function buildSidebarSections(catalog) {
     .filter(Boolean)
 }
 
-export default function Sidebar({ catalog, currentId, lang, onLanguageChange, onSelect, onHome, onStartTour, onOpenNotes, onOpenSettings, onOpenChangelog, bookmarks = {}, notes = {}, isOpen, onClose }) {
+export default function Sidebar({
+  catalog,
+  currentId,
+  lang,
+  onLanguageChange,
+  onSelect,
+  onHome,
+  onStartTour,
+  onOpenNotes,
+  onOpenSettings,
+  onOpenChangelog,
+  onOpenWalkingLabs,
+  bookmarks = {},
+  notes = {},
+  notebooksWithNotes = new Set(),
+  isOpen,
+  onClose,
+}) {
   const { resolvedTheme, toggleTheme } = useSettingsContext()
   const [searchQuery, setSearchQuery] = useState('')
   const [filterMode, setFilterMode] = useState('all')
@@ -82,7 +102,7 @@ export default function Sidebar({ catalog, currentId, lang, onLanguageChange, on
     ...section,
     lessons: section.lessons.filter(lesson => {
       if (filterMode === 'bookmarked') return !!bookmarks[lesson.id]
-      if (filterMode === 'noted') return Object.keys(notes).some(k => k.startsWith(lesson.id + '::'))
+      if (filterMode === 'noted') return notebooksWithNotes.has(lesson.id)
       if (!searchQuery) return true
       return lesson.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
         lesson.num.includes(searchQuery)
@@ -91,7 +111,7 @@ export default function Sidebar({ catalog, currentId, lang, onLanguageChange, on
 
   const inFilterMode = filterMode !== 'all'
   const hasBookmarks = Object.keys(bookmarks).length > 0
-  const hasNotes = Object.keys(notes).length > 0
+  const hasNotes = notebooksWithNotes.size > 0
 
   return (
     <aside className={`w-64 h-screen max-h-screen border-r flex flex-col justify-between shrink-0 md:sticky md:top-0 z-30 transition-transform duration-300 ${
@@ -111,9 +131,26 @@ export default function Sidebar({ catalog, currentId, lang, onLanguageChange, on
               <span className="brand-line brand-line-sub">Notebook</span>
             </span>
           </button>
-          <button onClick={onClose} className="md:hidden text-[var(--text-muted)] hover:text-[var(--text-secondary)] p-1 rounded-lg">
-            <X className="w-5 h-5" />
-          </button>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => onOpenWalkingLabs?.()}
+              data-tour="walkinglabs"
+              className="sidebar-header-icon"
+              title={lang === 'zh' ? '更多' : 'More'}
+              aria-label={
+                lang === 'zh' ? '打开 WalkingLabs 介绍' : 'Open WalkingLabs intro'
+              }
+            >
+              <Ellipsis className="w-5 h-5" />
+            </button>
+            <button
+              onClick={onClose}
+              className="md:hidden text-[var(--text-muted)] hover:text-[var(--text-secondary)] p-1 rounded-lg"
+              aria-label={lang === 'zh' ? '关闭侧栏' : 'Close sidebar'}
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
         </div>
 
         {/* Language toggle */}
@@ -146,17 +183,19 @@ export default function Sidebar({ catalog, currentId, lang, onLanguageChange, on
         <button
           onClick={() => setFilterMode('all')}
           className={`sidebar-filter-tab ${filterMode === 'all' ? 'active' : ''}`}
-        >{lang === 'zh' ? '全部' : 'All'}</button>
+        >{lang === 'zh' ? '课程' : 'Courses'}</button>
         <button
           onClick={() => setFilterMode('bookmarked')}
-          className={`sidebar-filter-tab ${filterMode === 'bookmarked' ? 'active' : ''}`}
+          className={`sidebar-filter-tab sidebar-filter-tab-icon ${filterMode === 'bookmarked' ? 'active' : ''}`}
           disabled={!hasBookmarks}
-        >{lang === 'zh' ? '已收藏' : 'Saved'}</button>
+          title={lang === 'zh' ? '已收藏' : 'Saved'}
+        ><BookMarked className="w-3.5 h-3.5" /></button>
         <button
           onClick={() => setFilterMode('noted')}
-          className={`sidebar-filter-tab ${filterMode === 'noted' ? 'active' : ''}`}
+          className={`sidebar-filter-tab sidebar-filter-tab-icon ${filterMode === 'noted' ? 'active' : ''}`}
           disabled={!hasNotes}
-        >{lang === 'zh' ? '有笔记' : 'Noted'}</button>
+          title={lang === 'zh' ? '有笔记' : 'Noted'}
+        ><StickyNote className="w-3.5 h-3.5" /></button>
       </div>
 
       {/* Lessons list */}
@@ -183,7 +222,7 @@ export default function Sidebar({ catalog, currentId, lang, onLanguageChange, on
                 {section.lessons.map((lesson) => {
                   const isSelected = currentId === lesson.id
                   const isBm = !!bookmarks[lesson.id]
-                  const hasNote = Object.keys(notes).some(k => k.startsWith(lesson.id + '::'))
+                  const hasNote = notebooksWithNotes.has(lesson.id)
                   return (
                     <button
                       key={lesson.id}
@@ -206,7 +245,6 @@ export default function Sidebar({ catalog, currentId, lang, onLanguageChange, on
                       </div>
                       <div className="flex items-center gap-1 shrink-0 ml-1">
                         {isBm && <span className="sidebar-item-star" title={lang === 'zh' ? '已收藏' : 'Bookmarked'}>&#9733;</span>}
-                        {hasNote && <span className="sidebar-item-note-dot" title={lang === 'zh' ? '有笔记' : 'Has notes'}>&#183;</span>}
                       </div>
                     </button>
                   )
@@ -229,6 +267,7 @@ export default function Sidebar({ catalog, currentId, lang, onLanguageChange, on
           </button>
           <button
             onClick={() => onOpenNotes?.()}
+            data-tour="notes-saved"
             className="w-full text-left flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors"
           >
             <BookMarked className="w-3.5 h-3.5" />
@@ -256,6 +295,7 @@ export default function Sidebar({ catalog, currentId, lang, onLanguageChange, on
             </button>
             <button
               onClick={() => onOpenSettings?.()}
+              data-tour="settings"
               className="p-1.5 rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors"
               title={lang === 'zh' ? '设置' : 'Settings'}
             >
