| 示例 | 展示内容 |

|---|---|

| [`examples/showcase/`](examples/showcase/) | **综合演示（推荐先看）** —— 全部能力一屏尽览 |

| [`examples/hello/`](examples/hello/) | 最小应用 —— 8 行 `run-app` |

| [`examples/counter/`](examples/counter/) | JS↔Racket 桥接 —— `fetch` 调用 Racket 状态 |

| [`examples/webview-demo.rkt`](examples/webview-demo.rkt) | WebView 生命周期：加载、导航、关闭、验证 API |

| 示例 | 一句话 | 展示的能力 |

|---|---|---|

| [`showcase/`](showcase/) | **一屏看尽全部能力（推荐先看）** | 宏路由全形态（类型校验/400/:path/500）、SSE 事件流 + 后端错误回流（on-error）、系统功能（剪贴板/通知/Finder/窗口控制）、Agent 验证（title/url/capture + 截图回传）、API token（401 演示）、更新检查、托盘、单实例 |

| [`hello/`](hello/) | 8 行最小应用 | run-app 一键入口、静态页面 |

| [`counter/`](counter/) | JS↔Racket 桥接主打 | define-api-routes、SSE 广播驱动 UI、api.js 生成客户端、模块可组合（provide api/bus） |

| [`webview-demo.rkt`](webview-demo.rkt) | WebView 生命周期 | 加载/导航/关闭/on-close/验证 API 实时打印、看门狗 |

| [`agent-verify.rkt`](agent-verify.rkt) | 无人值守验证 | agent 工作流：轮询断言 + 截图 + 退出码 |

| [`tray-demo.rkt`](tray-demo.rkt) | 跨平台托盘 | make-tray/菜单/tooltip 动态更新 |

racket examples/showcase/main.rkt # 综合演示（单实例锁定）

racket examples/counter/main.rkt # 桥接 + 事件

racket examples/hello/main.rkt # 最小应用

所有示例均可 `raco glaze build` 打包为独立应用。

#lang racket/base

(require racket/file

racket/runtime-path

glaze)

(define-runtime-path public "public")

(define bus (make-event-bus))

(define wv-box (box #f))

(define wide? (box #f))

(define hits (box 0))

(void (thread (lambda ()

(let loop ()

(sleep 1)

(bus-broadcast! bus 'tick (hasheq 'now (current-inexact-milliseconds)))

(loop)))))

(define (report-error! exn uri)

(bus-broadcast! bus 'backend-error

(hasheq 'uri uri 'message (exn-message exn))))

(define-api-routes api

;; typed params with defaults; bad input -> 400 naming the parameter

[(POST "api/add")

(add [a exact-integer?] [b exact-integer? 1])

(begin (set-box! hits (add1 (unbox hits)))

(hasheq 'sum (+ a b) 'hits (unbox hits)))]

;; :path params arrive as plain arguments

[(GET "api/echo/:msg")

(echo msg)

(hasheq 'echo msg 'len (string-length msg))]

;; handler exceptions -> 500 + the on-error hook (see run-app below)

[(POST "api/boom")

(boom)

(raise-user-error 'showcase "boom: 数据处理故意失败 (演示 500 + 错误上报)")]

;; system integration

[(POST "api/clip-write")

(clip-write text)

(hasheq 'ok (clipboard-set! text))]

[(POST "api/clip-read")

(clip-read)

(hasheq 'text (clipboard-get))]

[(POST "api/notify")

(do-notify title body)

(hasheq 'ok (notify! title body #:subtitle "showcase"))]

[(POST "api/reveal")

(do-reveal)

(hasheq 'ok (reveal-path (path->string (find-system-path 'run-file))))]

;; window controls (handle arrives via #:on-ready)

[(POST "api/win-title")

(win-title n)

(let ([t (format "Showcase ~a" n)])

(and (unbox wv-box) (webview-set-title! (unbox wv-box) t))

(hasheq 'title t))]

[(POST "api/win-size")

(win-size)

(let* ([w? (not (unbox wide?))])

(set-box! wide? w?)

(and (unbox wv-box)

(webview-set-size! (unbox wv-box) (if w? 1080 860) (if w? 700 560)))

(hasheq 'size (if w? "1080x700" "860x560")))]

;; verification APIs: the agent workflow, on demand

[(POST "api/self-check")

(self-check)

(let* ([wv (unbox wv-box)]

[shot (and wv (webview-capture! wv (build-path public "shots" "latest.png")))]

[pass? (and wv

(equal? (webview-title wv) "Glaze Showcase")

shot

(>= (file-size shot) 5000))])

(hasheq 'ok (and pass? #t)

'title (and wv (webview-title wv))

'url (and wv (webview-url wv))

'shot-bytes (and shot (file-size shot))))]

;; update check against a local manifest (v99 > current)

[(POST "api/check-update")

(check-update-now)

(let ([info (check-update "http://127.0.0.1:18952/manifest.json"

#:current-version "0.3.0")])

(hasheq 'found (and info #t) 'info info))]

;; token-guarded secret (guarded by #:api-token below)

[(POST "api/secret")

(secret)

(hasheq 'secret "the cake is a lie")])

(call-with-output-file (build-path public "manifest.json")

(lambda (o)

(write-bytes (string->bytes/utf-8

"{\"version\":\"99.0.0\",\"url\":\"https://example.com/99\",\"notes\":\"showcase manifest\"}") o))

#:exists 'replace)

(module+ main

(unless (single-instance? "glaze-showcase")

(displayln "[showcase] another instance is running; exiting")

(exit 1))

;; tray: About re-focuses the window, Quit exits

(define tray

(make-tray #:icon #f

#:tooltip "Glaze Showcase"

#:menu (list

(make-menu-item "关于 / About"

#:action (lambda ()

(and (unbox wv-box)

(webview-set-title!

(unbox wv-box)

"Glaze Showcase"))))

(menu-separator)

(make-menu-item "退出 / Quit"

#:action (lambda () (exit 0))))))

(run-app

#:public-dir public

#:api api

#:events bus

#:api-token "showcase-demo-token"

#:title "Glaze Showcase"

#:width 860 #:height 560

#:port 18952

#:on-error report-error!

#:on-ready (lambda (wv url) (when wv (set-box! wv-box wv)))))

<meta charset="utf-8">

<title>Glaze Showcase</title>

:root{--bg:#F4F3EE;--ink:#2d2a26;--sub:#6b675f;--acc:#C15F3C;--line:#e2ded4}

*{box-sizing:border-box}

body{font-family:-apple-system,sans-serif;background:var(--bg);color:var(--ink);margin:0;height:100vh;display:flex;flex-direction:column}

header{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px}

header h1{font-size:16px;margin:0} header em{color:var(--acc);font-style:normal;font-weight:800}

header .sp{flex:1} #tick{font-size:11px;color:var(--sub);font-family:ui-monospace,Menlo,monospace}

nav{display:flex;border-bottom:1px solid var(--line);background:#efede7}

nav div{padding:8px 14px;font-size:13px;cursor:pointer;color:var(--sub)}

nav div.on{color:var(--ink);border-bottom:2px solid var(--acc);font-weight:700}

main{flex:1;overflow:auto;padding:16px}

.tab{display:none}.tab.on{display:block}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}

button{background:var(--acc);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}

button.alt{background:#d8d4c8;color:var(--ink)}

input{padding:8px 10px;border:1px solid #c9c4b8;border-radius:8px;font-size:13px;width:110px}

.log{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:12px ui-monospace,Menlo,monospace;

color:#4a463f;min-height:70px;max-height:180px;overflow:auto;white-space:pre-wrap;margin-top:10px}

.err{color:#b3402a}.ok{color:#5d7f5b}

.note{font-size:12px;color:var(--sub);margin:6px 0}

img.shot{max-width:100%;border:1px solid var(--line);border-radius:10px;margin-top:10px;background:#fff}

.big{font-size:34px;font-weight:800;color:var(--acc)}

<header><h1>Glaze <em>Showcase</em></h1><span class="note">每个标签都是真实后端调用</span>

<span class="sp"></span><span id="tick">SSE 未连接</span></header>

<nav id="nav">

<div class="on" data-t="bridge">桥接 · 宏路由</div>

<div data-t="events">事件 · SSE</div>

<div data-t="sys">系统功能</div>

<div data-t="verify">验证 · Agent</div>

<div data-t="secure">安全 · 更新</div>

<section class="tab on" id="bridge">

<div class="row"><input id="a" value="17"> + <input id="b" value="25">

<button onclick="doAdd()">求和（类型校验）</button>

<button class="alt" onclick="doAdd(true)">传错误类型 → 400</button></div>

<div class="row"><input id="msg" value="hello-glaze" style="width:180px">

<button class="alt" onclick="doEcho()">:path 参数 echo</button></div>

<div class="row"><button class="alt" onclick="doBoom()">触发 500（看错误回流）</button></div>

<div class="note">错误会被后端 on-error 捕获并经 SSE 推回本页（见“事件”标签与下方日志）</div>

<div class="log" id="blog"></div>

<section class="tab" id="events">

<div class="row"><button onclick="glaze.api.add({a:1,b:1}).then(()=>log('elog','一次后端广播已触发（见右上角时钟与系统通知）'))">后端推一条事件</button>

<button class="alt" onclick="glaze.api.notify({title:'Showcase',body:'SSE 事件驱动'})">同时发通知</button></div>

<div class="note">右上角时间戳由后端 1Hz 广播驱动；下面是原始事件流：</div>

<div class="log" id="elog"></div>

<section class="tab" id="sys">

<div class="row"><input id="cliptext" value="showcase 剪贴板" style="width:200px">

<button onclick="glaze.api.clipWrite({text:cli()}).then(r=>log('slog','剪贴板写入 '+r.ok))">写剪贴板</button>

<button class="alt" onclick="glaze.api.clipRead().then(r=>log('slog','剪贴板内容: '+JSON.stringify(r.text)))">读剪贴板</button></div>

<div class="row"><button onclick="glaze.api.notify({title:'Showcase',body:'系统通知来了'}).then(()=>log('slog','通知已发送（看右上角）'))">系统通知</button>

<button class="alt" onclick="glaze.api.reveal().then(r=>log('slog','Finder 定位 '+r.ok))">Finder 定位</button></div>

<div class="row"><button class="alt" onclick="glaze.api.winTitle({n:Date.now()%1000|0}).then(r=>log('slog','标题 → '+r.title))">改窗口标题</button>

<button class="alt" onclick="glaze.api.winSize().then(r=>log('slog','尺寸 → '+r.size))">窗口宽度切换</button></div>

<div class="log" id="slog"></div>

<section class="tab" id="verify">

<div class="row"><button onclick="doCheck()">运行 Agent 自检</button>

<span class="note">title / url / capture 三项断言 + 截图回传</span></div>

<div class="log" id="vlog"></div>

<img class="shot" id="shot" style="display:none">

<section class="tab" id="secure">

<div class="row"><button onclick="glaze.api.secret().then(r=>log('glog','token 路由（cookie 自动授权）: '+JSON.stringify(r)),

e=>log('glog','失败: '+e.message))">调受 token 保护的路由</button>

<button class="alt" onclick="fetch('/api/secret',{method:'POST'}).then(r=>log('glog','不带 token 直调 → HTTP '+r.status+'（401 = 守卫生效）'))">不带 token 直调 → 401</button></div>

<div class="row"><button class="alt" onclick="glaze.api.checkUpdate().then(r=>log('glog','更新检查: '+JSON.stringify(r)))">检查更新（本地 manifest v99）</button></div>

<div class="log" id="glog"></div>

<script src="/glaze/api.js"></script>

const logs={blog:'#2d2a26',elog:'#2d2a26',slog:'#2d2a26',vlog:'#2d2a26',glog:'#2d2a26'};

function log(id,msg){const el=document.getElementById(id);el.textContent+='▸ '+msg+'\n';el.scrollTop=el.scrollHeight;}

const cli=()=>document.getElementById('cliptext').value;

async function doAdd(bad){

const a=bad?'不是数字':+document.getElementById('a').value;

const b=+document.getElementById('b').value;

try{const r=await glaze.api.add({a,b});log('blog','a+b = '+r.sum+'（第 '+r.hits+' 次调用）');}

catch(e){log('blog','400: '+e.message);}

async function doEcho(){const r=await glaze.api.echo(document.getElementById('msg').value);

log('blog',`:path echo → ${JSON.stringify(r.echo)} (len=${r.len})`);}

async function doBoom(){

try{await glaze.api.boom();}catch(e){log('blog','500 已返回: '+e.message.slice(0,60)+'…');}

async function doCheck(){

const r=await glaze.api.selfCheck();

log('vlog',`title=${JSON.stringify(r.title)} url=${r.url}`);

log('vlog',`capture=${r.shotBytes} bytes → 全部通过: ${r.ok}`);

const img=document.getElementById('shot');img.style.display='block';

img.src='/shots/latest.png?'+Date.now();

if(!e.target.dataset.t)return;

document.querySelectorAll('nav div').forEach(d=>d.classList.toggle('on',d===e.target));

document.querySelectorAll('.tab').forEach(t=>t.classList.toggle('on',t.id===e.target.dataset.t));

glaze.on('tick',d=>{document.getElementById('tick').textContent='SSE · '+new Date(d.now).toLocaleTimeString();});

{"version":"99.0.0","url":"https://example.com/99","notes":"showcase manifest"}

"api-macros.rkt"

"events.rkt"

"sys/main.rkt"

"update.rkt"

"browser.rkt"

"assets.rkt"

"build.rkt"

"webview/main.rkt")

(provide (all-from-out "server.rkt" "api.rkt" "api-macros.rkt" "events.rkt"

"browser.rkt" "assets.rkt" "build.rkt" "sys/main.rkt"

"update.rkt")

(all-from-out "app.rkt")

(all-from-out "tray/main.rkt")

(all-from-out "webview/main.rkt"))

"\n};\n"))

(define (js-camel seg first-lower?)

(define parts (filter non-empty-string? (string-split seg "-")))

(apply string-append

(for/list ([p (in-list parts)] [i (in-naturals)])

(if (and (zero? i) first-lower? (regexp-match? #rx"^[a-z]" p))

p

(string-append (string-upcase (substring p 0 1)) (substring p 1))))))

(define (route->js-name segments)

(define drop-api

(if (and (pair? segments) (string=? (first segments) "api"))

(for/list ([seg (in-list drop-api)] [i (in-naturals)])

(cond

[(param? seg) (string-titlecase (param-id seg))]

[(zero? i) (js-camel seg #t)]

[else (js-camel seg #f)]))))