// 静态工作台组合示例：所有指标、进度与活动记录均为演示数据，不读取任务系统或网络。
// 辅助函数返回视觉子树，最后统一 Page.render；它们是普通 Endor 函数，不是宿主特殊组件语法。
// 将整个文件作为完整输入提交；这里没有实时指标提供方，全部数据由下面的常量生成。

// 把标签、大数值、说明和色条纵向组合，参数控制文字与强调颜色。
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"),
        ui.text(note, 1, "#637082"),
        ui.rect(160, 4, 2, color)
    )
}

// 生成项目标题和状态，再用两个相邻矩形表示已完成/剩余长度；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"),
        ui.text(state, 1, color)
    )
    // 两块矩形间 gap=0 合成连续条，条宽由调用方传入的演示数值决定。
    let progress = ui.row(0, 0,
        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"),
        progress
    )
}

// 组合小圆点、时间戳、标题与说明；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,
        ui.text(title, 1, "#243047"),
        ui.text(detail, 1, "#637082")
    )
}

// 头部三个文本使用字号/颜色层级，后续 statistics 复用 metric 返回三组指标。
let heading = ui.column(0, 6,
    ui.text("ENDOR STUDIO / WORKSPACE", 1, "#5263D6"),
    ui.text("项目工作台", 2, "#243047"),
    ui.text("把想法组织成对象，把对象组合成界面。", 1, "#637082")
)

let statistics = ui.row(0, 20,
    metric("活跃任务", "24", "本周新增 6 项", "#6574E8"),
    metric("已完成", "18", "持续推进中", "#299C82"),
    metric("页面草稿", "08", "等待下一次灵感", "#D9A34A")
)

// 纵向复用 project，示例名称与比例是常量，不做进度计算或持久化。
let projects = ui.column(0, 14,
    ui.text("项目进度", 1, "#243047"),
    project("Aster", "进行中", "语言解析 / 编译 / 执行", 240, 60, "#6574E8"),
    project("Tessera", "构建中", "桌面界面 / 布局 / 开发工具", 186, 114, "#299C82"),
    project("设计文档", "草稿", "Block / Page / 对象模型", 108, 192, "#D9A34A")
)

// 三条 activity 组成静态活动区，再与项目区横排成 body。
let timeline = ui.column(0, 14,
    ui.text("最近活动", 1, "#243047"),
    activity("10:24", "更新字体", "中英文混排预览", "#6574E8"),
    activity("09:48", "组织界面", "用函数组合不同区块", "#299C82"),
    activity("09:12", "记录想法", "准备下一版页面设计", "#D9A34A")
)

let body = ui.row(0, 20, projects, timeline)
// body 只建立两个已构造子树的组合关系，页面尚未 render，不会在构造这一行单独发布一帧。

// 底部提示以细色块和文字组合，明确说明页面还未接业务交互。
let note = ui.row(0, 12,
    ui.rect(4, 46, 2, "#6574E8"),
    ui.column(0, 6,
        ui.text("下一步：让对象参与交互", 1, "#243047"),
        ui.text("当前展示为静态示例，进度条和活动记录均为演示数据。", 1, "#637082")
    )
)

// 最终根统一设置 24px padding 与20px间距；创建辅助子树本身不会提前发布页面。
let page = ui.page()
page.render(ui.column(24, 20,
    heading,
    statistics,
    ui.rect(520, 1, 0, "#DFE5EE"),
    body,
    note,
    ui.text("DEMO DATA / 函数组合 / 中文字体 / 嵌套布局", 1, "#8490A0")
))