docs: explain page window and scrolling example callers

examples/workspace.endor

@@ -4,6 +4,7 @@
 
 // 把标签、大数值、说明和色条纵向组合，参数控制文字与强调颜色。
 function metric(label: Text, value: Text, note: Text, color: Text): View {
+    // 由顶层 statistics 连续调用三次，每次返回新的容器和文字；value 是展示字符串，不在这里解析或累计任务数。
     return ui.column(0, 6,
         ui.text(label, 1, "#637082"),
         ui.text(value, 2, "#243047"),
@@ -14,6 +15,7 @@ function metric(label: Text, value: Text, note: Text, color: Text): View {
 
 // 生成项目标题和状态，再用两个相邻矩形表示已完成/剩余长度；filled/remaining 是逻辑像素。
 function project(name: Text, state: Text, detail: Text, filled: Number, remaining: Number, color: Text): View {
+    // 顶层 projects 为三组演示数据调用，state 只是状态文案，不是 ui.state 托管状态对象。
     // 项目名和状态横排，状态颜色与进度前景相同。
     let caption = ui.row(0, 12,
         ui.text(name, 1, "#243047"),
@@ -24,6 +26,7 @@ function project(name: Text, state: Text, detail: Text, filled: Number, remainin
         ui.rect(filled, 6, 3, color),
         ui.rect(remaining, 6, 3, "#E5EAF2")
     )
+    // caption/progress 是本次函数调用的局部视觉对象，返回根通过子项关系保留它们，不需要放到全局逐个挂载。
     return ui.column(0, 6,
         caption,
         ui.text(detail, 1, "#637082"),
@@ -33,7 +36,9 @@ function project(name: Text, state: Text, detail: Text, filled: Number, remainin
 
 // 组合小圆点、时间戳、标题与说明；spacer 仅作视觉对齐，不代表真实事件时间线。
 function activity(time: Text, title: Text, detail: Text, color: Text): View {
+    // 由 timeline 的三次普通调用构造记录，time 是固定字符串；没有时钟读取、排序或后续自动推进。
     let dot = ui.column(0, 0, ui.spacer(7), ui.rect(6, 6, 3, color))
+    // stamp 把小圆点列与时间文字横排；上方 spacer 给圆点增加局部纵向留白，不是一个全局坐标。
     let stamp = ui.row(0, 8, dot, ui.text(time, 1, "#8490A0"))
     return ui.column(0, 4,
         stamp,
@@ -72,6 +77,7 @@ let timeline = ui.column(0, 14,
 )
 
 let body = ui.row(0, 20, projects, timeline)
+// body 只建立两个已构造子树的组合关系，页面尚未 render，不会在构造这一行单独发布一帧。
 
 // 底部提示以细色块和文字组合，明确说明页面还未接业务交互。
 let note = ui.row(0, 12,