1107 Commits

Author SHA1 Message Date
xfy
c1530956b0 style(system): 数据导出 tab 卡片宽度与其它 tab 对齐
ExportTab 根容器带了 max-w-2xl 把卡片限宽在 672px,而 DbStatusTab /
ServerStatusTab / SqlConsoleTab / BackupTab 都不限宽填满 max-w-7xl
内容区。去掉 max-w-2xl 让数据导出卡片与其它 tab 宽度一致。内部表单
输入用 w-full,加宽后自然拉伸,无空白。
2026-07-13 14:23:14 +08:00
xfy
2e40836480 fix(system): 备份/恢复任务轮询永不启动导致按钮卡死在 loading
点击「创建备份」后接口返回 task id,但按钮一直转圈、列表不刷新。
根因是 AGENTS.md 踩坑记录里的「Reactive hooks 不追踪普通 props/snapshot」:

进度轮询 use_future 在挂载时把 active_task_id 快照进 _task_id_for_poll
(彼时为 None),use_future 只运行一次即 return;用户点击后 create_backup
返回 task id 并 active_task_id.set(Some(id)),但 future 已结束、永不重跑
→ 轮询不启动 → busy 永远 true。恢复确认 use_future 有同样的快照陷阱
(_pending_for_confirm),导致点「恢复」连确认框都不弹。

改用与 DbStatusTab 自动刷新一致的长生命周期 loop 模式:use_future 只跑
一次,内部 loop 每轮迭代读 active_task_id() / pending_restore() 信号,
空闲时 200ms yield 呼吸。这样信号更新在下一轮迭代即被感知,无需依赖
ReactiveContext 对挂载期快照的订阅。
2026-07-13 13:56:22 +08:00
xfy
cf14aae17f style(ui): 统一 admin 分页按钮为圆角胶囊样式
admin 分页的上一页/下一页按钮原先用 rounded-sm 方角实心(灰黑底
+ font-mono),与本页其它操作按钮(BTN_OUTLINE 等圆角胶囊)风格
不一致。改为与描边按钮同族的 rounded-full 胶囊,hover 走主题强调
色,禁用态同步圆角。

因三个 admin 列表页(posts / posts_trash / comments)共用
Pagination 组件的 admin variant,此改动一次性统一全部后台分页。
2026-07-13 13:38:50 +08:00
xfy
093940a0d7 fix(theme): skip editor set_theme during VT animation to prevent direct jump
主题切换时,可运行代码块(CodeMirror + xterm)整体瞬切,不受 VT 圆形展开动画
控制——圆形还没展开到代码块,代码块就整体变色了。

根因(真实页面逐帧像素采样 + 事件追踪确认):
ThemeToggle::onclick 先调 __startThemeTransition(同步截 OLD 快照,VT 回调异步),
再调 theme.set(next)。theme.set 触发 Dioxus use_effect → set_theme,这个调用
在 OLD 快照截取后、VT 回调执行前的时间窗内,直接改了实时 DOM 的编辑器背景。
VT 动画播的是伪元素快照(::view-transition-old/new),但实时 DOM 的改动会穿透
伪元素,表现为代码块在圆形展开到达前就整体瞬切。

上一个提交(theme-change 事件)已在 VT 回调内同步 setTheme(进入 NEW 快照),
但 use_effect 的冗余 set_theme 仍在动画期间改实时 DOM,抵消了快照内的正确状态。

修复:CodeMirror + xterm 的 use_effect 在 is-theme-transitioning 期间跳过
set_theme 调用。VT 事件已在快照前同步换肤;动画结束后 is-theme-transitioning
被移除,use_effect 会因 resolved 信号变化重跑,做幂等兜底同步(覆盖非 VT 场景:
系统偏好变化、初始挂载)。

验证(scripts/vt-editor-sweep.mjs,真实 Dioxus 点击路径):
- 修复前:编辑器整体瞬切(t=111ms 全部变 dark,无渐变)
- 修复后:编辑器从右向左被圆形逐步揭示(t=228ms 右侧先 dark,t=313ms 左侧 dark,
  中间点显示圆形边缘抗锯齿色),与页面其他部分同步
2026-07-13 13:33:33 +08:00
xfy
f984c0c3e7 fix(theme): clear animate-page-enter transform during VT to fix code block coverage
主题切换的圆形展开 VT 动画对可运行代码块不生效:代码块直接瞬切,而非被
圆形展开揭示。上一个提交(theme-change 事件同步 setTheme)只解决了快照时序
问题,但真实环境仍不生效。

根因(真实页面逐帧截图 + 像素采样确认):article.post-single 的 animate-page-enter
入场动画用 transform: translateY/scale,因 animation-fill-mode: both 在动画结束后
保留计算值。transform: none 被浏览器序列化为 matrix(1,0,0,1,0,0),仍是「非 none」
的 transform,创建堆叠上下文(stack context)。::view-transition-old/new(root) 顶层
伪元素无法正确覆盖堆叠上下文内部的 CodeMirror/xterm——圆形展开扫过代码块区域时,
伪元素被穿透,代码块的实时 DOM 变化(use_effect 驱动的 setTheme)直接可见,表现为
「直接瞬切,不受 VT 动画控制」。

修复:在 is-theme-transitioning 期间用 !important 清除 .animate-page-enter 的
transform。is-theme-transitioning 在 startViewTransition 之前添加,OLD/NEW 快照
均含此 class,故两快照 transform 都被清为 none,一致,不影响动画效果。

验证:
- scripts/vt-real-page-sampler.mjs + vt-xterm-real-sampler.mjs:Playwright 驱动
  真实 dx serve 页面,逐帧截图 + 像素采样
- 修复前:代码块在圆形边界外已变 dark(直接瞬切);修复后:代码块随圆形展开
  同步变色(lag 与几何距离一致,非瞬切)
- 像素追踪:editor 在 t=266ms 变色(圆形到达),bg 在 t=362ms 变色(圆形到达更远点),
  时序与圆形几何一致,证明两者都通过 VT 动画变色
2026-07-13 12:02:30 +08:00
xfy
bbb77954e9 fix(theme): sync CodeMirror/xterm theme in VT callback for circular-expand animation
主题切换的圆形展开 VT 动画对可运行代码块不生效:圆形扫过 CodeMirror/xterm
区域时看不到颜色变化,动画结束后才瞬切。

根因(逐帧像素验证确认):VT 回调只 toggle .dark class,但 CodeMirror 背景
由 catppuccin Extension 注入(.cm-editor 的 EditorView.theme 规则),xterm
背景由 .xterm-scrollable-element 的 inline background-color 注入——两者都
不随 .dark 翻转。set_theme 由 Dioxus use_effect 在 theme.set() 之后异步触发,
晚于 NEW 快照捕获,导致 OLD/NEW 快照在编辑器区域同色,圆形展开无可揭示的变化。

修复:在 VT 回调内(NEW 快照捕获前)同步 dispatch 'yggdrasil:theme-change'
CustomEvent,CodeMirror/xterm 各自的 index.ts 在模块加载时订阅并遍历
_instances 同步调 setTheme。事件先于 applyDarkClass dispatch,确保编辑器换肤
+ class 翻转被同一个 getComputedStyle reflow 捕获进 NEW 快照。

与现有 Dioxus use_effect 幂等共存:setTheme 对相同主题是 no-op(CodeMirror
Compartment.reconfigure + xterm options.theme = 均幂等),use_effect 作兜底
覆盖初始挂载 / 非 VT 场景。

验证:
- yggdrasil-core 测试扩展:断言 VT 回调 / 降级路径 / applyResolvedTheme 都
  dispatch 事件,且事件先于 dark class 翻转
- scripts/vt-theme-sampler.mjs(Playwright 逐帧像素采样):修复前 xterm 比
  等距的 cssvar 探针晚 100ms 变色(bug);修复后同帧变色(lag=0ms)

改动文件:
- libs/yggdrasil-core/src/theme-transition.ts: THEME_CHANGE_EVENT 常量 +
  notifyThemeChange 辅助函数,VT 回调 / 降级路径 / applyResolvedTheme 三处 dispatch
- libs/codemirror-editor/src/index.ts: 订阅事件,forEach _instances.setTheme
- libs/xterm-terminal/src/index.ts: 同样模式
- libs/yggdrasil-core/src/theme-transition.test.ts: 3 个新用例
- public/xterm/terminal.js: 重建产物(含事件订阅)
- scripts/vt-theme-{harness,sampler}: 逐帧像素验证工具(throwaway,可作回归)
2026-07-13 11:20:08 +08:00
xfy
e50941ef24 fix(runner): propagate duration_ms through SSE done event
The SSE streaming path hardcoded '耗时: -' because duration_ms was
never threaded through:

- docker.rs: OutputChunk::Done now carries duration_ms, computed from
  start_container to wait completion via Instant::elapsed
- sse.rs: DonePayload gains duration_ms, serialized into the done event
- runner.rs: WASM done callback formats the real duration instead of '-'

The polling fallback path already had correct duration via ExecResult;
only the SSE path was missing it.
2026-07-13 10:09:15 +08:00
xfy
aa2d7f3f2d fix(runner): use python -u for unbuffered stdout streaming
Python defaults to 4KB block buffering when stdout is a pipe (not a
TTY). Docker attach uses pipes, so print() output accumulated in the
buffer and only flushed when the process exited — the 3-second
sleep(1) loop appeared as a single dump at the end.

python -u (equivalent to PYTHONUNBUFFERED=1) forces line-level
flushing, so each print() is immediately written to the pipe and
picked up by the concurrent log reader → SSE → xterm.js.

Node/Go/Rust already line-buffer to pipes, so only Python needed the
flag. stdout/stderr separation is preserved (no TTY merge).
2026-07-13 10:03:58 +08:00
xfy
2059a55e11 fix(runner): make wait_container concurrent with log reading
run_in_container_stream was sequentially awaiting wait_container before
reading the log stream. wait_container blocks until the container
exits, so by the time the log loop ran, all output was already buffered
in the attach stream and got drained near-instantly — appearing as a
one-shot dump instead of streaming.

Now uses tokio::select! to run log_reader and wait_with_timeout
concurrently:

- log_reader: drains the attach stream, pushing each chunk via tx
  immediately as it arrives
- wait_with_timeout: waits for container exit (with timeout, kills on
  timeout)

Whichever finishes first wins; the survivor is drained/handled. When
wait completes, any tail bytes still in the stream are flushed before
sending the Done chunk.

This is the root cause of the streaming not working — a sleep(1) loop
now streams line-by-line instead of dumping all at once after exit.
2026-07-13 09:59:03 +08:00
xfy
9191d07200 fix(ui): hide output area until first run; show skeleton while waiting
The output area was always visible (empty terminal container shown on
page load). Now it only appears after the user clicks Run, with three
states:

- Not run: output area hidden entirely (show_output = false)
- Running, no output yet: skeleton screen placeholder
  (running && !has_output)
- Output received: skeleton gone, xterm renders streamed content

Two new signals drive this:
- show_output: set true on Run click, controls output area visibility
- has_output: set true on first stdout/stderr chunk (SSE) or writeAll
  (polling fallback), dismisses the skeleton

xterm mount effect now reads show_output, so it retries after the
container div enters the DOM (when show_output flips true).
2026-07-13 09:49:57 +08:00
xfy
e347776dcd fix(ui): align xterm terminal background with --color-paper-code-block
xterm.js terminal background was Catppuccin Base (#eff1f5 / #1e1e2e),
but the project's code-block background CSS variable uses Catppuccin
Surface0 (#dce0e8 light / #313244 dark). The mismatch left the output
area visibly lighter (light mode) / darker (dark mode) than the
surrounding container.
2026-07-13 09:43:01 +08:00
xfy
6f4385221a test(libs): add xterm-terminal smoke tests
4 tests covering XtermOptions construction/setters and TerminalInstance
mount/onReady/writeAll/clear/destroy lifecycle under happy-dom.
2026-07-10 11:59:38 +08:00
xfy
7d153e50f4 feat(ui): CodeRunner switches to SSE + xterm.js streaming output
WASM path: start_exec_stream → EventSource SSE → xterm.js terminal.
stdout/stderr events write to the terminal in real time; done event
sets exit status and closes the connection. Falls back to polling
get_exec_result (writeAll) if EventSource creation fails.

Server path (placeholder, component runs client-side): retains the
original polling logic so both targets compile.

- xterm.js terminal mounted via xterm_bridge (mirrors CodeMirror mount
  pattern: use_effect + TerminalHandle + use_drop)
- run_code split into #[cfg(wasm32)] (SSE) and #[cfg(not)] (polling)
- output area: <pre> replaced with xterm container div
- poll_result / start_sse helpers in WASM-only sse_consumer module
- term_handle declared at component scope (cfg-gated) so the WASM
  run_code closure can capture it

Note: dx check reports use_resolved_theme-in-closure for the new xterm
effects, same as the pre-existing CodeMirror effects (lines 145, 177).
This is an existing project-wide pattern; cargo build on both targets
and cargo clippy pass clean.
2026-07-10 11:58:25 +08:00
xfy
60138ed6e1 feat(api): add SSE endpoint /api/exec/stream
GET /api/exec/stream?task_id=X — pops the mpsc Receiver from
EXEC_STREAMS (one-shot, prevents duplicate consumers), wraps it in
ReceiverStream, maps OutputChunk → SSE Event (stdout/stderr/done).
keep_alive every 15s prevents reverse-proxy idle timeouts.

Route registration: dedicated sse_route with csrf_middleware but NO
TimeoutLayer (SSE is a long-lived connection; the 30s app-route timeout
would kill it). Auth + rate limit already enforced in start_exec_stream.

main.rs merge order: upload(300s) → export(120s) → sse(no timeout) →
app(30s) → static(none).
2026-07-10 11:48:26 +08:00
xfy
1e556aa125 feat(runner): add SSE task registry and streaming executor
progress.rs:
- EXEC_STREAMS DashMap: SSE handler pops rx by task_id (one-shot)
- StreamEntry wraps rx + created_at for TTL-based GC
- gc_old_tasks now cleans both EXEC_TASKS and EXEC_STREAMS

execute.rs:
- validate_exec_request: extracted shared whitelist + size check
- check_rate_limit_for_user: extracted shared admin-aware rate limit
- start_exec refactored to use both helpers (behavior unchanged)
- start_exec_stream: new server fn, same validation chain, spawns
  run_in_container_stream(tx) + writes EXEC_TASKS for polling fallback
2026-07-10 11:45:20 +08:00
xfy
832dd756b9 feat(runner): add streaming execution path in docker.rs
run_in_container_stream: same container lifecycle + ContainerGuard
cleanup as run_in_container, but pushes output chunks to an mpsc
Sender as the log stream is read, instead of buffering until the
container exits. Also retains a full buffer for the caller to write
back to EXEC_TASKS (polling fallback path).

- OutputChunk enum: Stdout/Stderr/Done{exit_code,oom_killed,timed_out}
- client disconnect detection: tx.send fails → stops pushing but
  continues draining the log stream so the container exits cleanly
- Done chunk carries terminal status for the SSE done event
- timeout/inspect/OOM logic identical to run_in_container
- run_in_container and its 4 tests left untouched
2026-07-10 11:41:37 +08:00
xfy
7d75c5dac9 feat(bridge): add xterm_bridge.rs wasm-bindgen bindings
Mirrors codemirror_bridge.rs: Reflect::get + unchecked_into for the
IIFE object literal window.XtermTerminal, XtermOptions as wasm-bindgen
extern type (TS class survives erasure), TerminalHandle with Drop →
destroy(). WASM-only (pub mod wasm gated on target_arch = wasm32).

Dioxus.toml: register /xterm/terminal.{css,js} in both prod and dev
resource arrays. CSS is emitted as a separate file by vite lib mode
(cssCodeSplit:false still extracts one CSS file for IIFE).
2026-07-10 11:39:24 +08:00
xfy
246d8a6d67 feat(libs): add xterm-terminal IIFE library (xterm.js 6.0)
New pnpm workspace package @yggdrasil/xterm-terminal, output to
public/xterm/. Output-only terminal (disableStdin) for streaming
container stdout/stderr via SSE.

- @xterm/xterm@^6.0.0 + @xterm/addon-fit@^0.11.0 (released same day,
  2025-12-22; 0.10.0's peerDependency is ^5.0.0 and incompatible)
- convertEol: containers emit \n, xterm needs \r\n
- stderr wrapped in ANSI red for visual distinction
- Catppuccin Latte/Mocha themes matching project highlight.css
- Mirrors codemirror-editor IIFE pattern: object literal default export,
  XtermOptions as class (survives TS erasure for wasm-bindgen)
- css.d.ts declares *.css module for tsc side-effect import
2026-07-10 11:37:04 +08:00
xfy
26f7465943 feat(deps): add tokio-stream for SSE streaming
- tokio-stream 0.1 (sync feature) wraps mpsc::Receiver into a Stream
  for the upcoming axum SSE handler; axum::response::sse ships with
  axum 0.8 already so no extra dep needed there
- web-sys features: add EventSource + MessageEvent so the WASM frontend
  can consume SSE via the native EventSource API
2026-07-10 11:33:07 +08:00
xfy
d537c641c4 chore: add backups to dockerignore 2026-07-10 11:27:44 +08:00
xfy
8c88e82acd fix(docker): make server build arch-aware for multi-arch buildx
Cross-compiling x86_64-unknown-linux-musl from an arm64 buildx leg breaks
ring: cc-rs emits -m64 for the x86_64 target but hands it to Debian's
arm64 musl-gcc (shipped for host arch only), whose cc1 has no -m64 →
'cc1: error: unrecognized command-line option "-m64"'.

Each buildx platform leg now builds its own native musl target
(amd64→x86_64, arm64→aarch64) so musl-gcc and the target always match —
no cross-compiler, no QEMU for the compile step. The built binary is
staged at an arch-independent path so the scratch runtime stage can COPY
it without knowing which target was used.

Makefile gains a docker-multiarch target (buildx --platform
linux/amd64,linux/arm64 --push); 'make docker' now uses buildx --load
for local single-arch testing.
2026-07-10 11:26:03 +08:00
xfy
914562a9e5 feat(docker): route all build downloads through China mirrors
Container内无法访问宿主机的 127.0.0.1:10808 代理(Docker Desktop NAT),
官方源在容器内要么被透明代理截断(NOSPLIT)、要么限速到 16 KB/s。把
所有网络下载源换成国内镜像,实测在容器内:

  - Debian apt   -> TUNA         3.9 MB/s (apt-get update 3s)
  - Node.js 22   -> npmmirror    二进制 mirror,200
  - npm/pnpm     -> npmmirror    registry.npmmirror.com,200
  - Rust/rustup  -> rsproxy.cn   200
  - crates.io    -> rsproxy      sparse index,200
  - Tailwind v4  -> gh-proxy.com 430 KB/s(106MB 完整下载,vs 代理 16KB/s)

镜像地址全部提为 ARG(默认国内源),需要时可 --build-arg 切回官方。
GitHub release 二进制不进宿主代理(大文件限速),单独走国内 GitHub 反代
CDN;GH_PROXY 置空可回退直连。
2026-07-10 10:35:06 +08:00
xfy
0a5dd9c67a fix(docker): use HTTPS Debian mirrors to bypass transparent HTTP interception
A transparent HTTP proxy on the build host (http_proxy=127.0.0.1:10808)
truncates apt's plain-HTTP downloads to a 2578-byte HTML error page, which
apt rejects with 'Clearsigned file isn't valid, got NOSPLIT'. curl/wget
inside the same container fetch the full 151074-byte InRelease fine, and
HTTPS apt sources work — so switch the builder's Debian sources to HTTPS.

Proven by: apt-get update over HTTPS fetched 9264 kB successfully (4m27s
through the throttled proxy); plain HTTP failed with NOSPLIT every time.
2026-07-10 09:41:48 +08:00
xfy
81682eb70e fix(post): 修复 hash 锚点跳转失效
内容异步加载(use_server_future)导致骨架屏阶段标题 DOM 缺失,浏览器原生
fragment-scroll 找不到目标留在顶部;刷新页面也因 SSR 出的是骨架屏而失效。

- 新增 __scrollToHash 全局入口(yggdrasil-core):内容挂载后解码
  location.hash(CJK 百分号编码 → 原始字符)并 scrollIntoView
- PostContent use_effect 末尾复用 invoke_optional_global 调用,标题
  DOM 已就绪时补一次滚动
- 标题加 scroll-margin-top: 6rem,避开 80px sticky header

点击 TOC/标题 hashtag 由原生 anchor + scroll-margin-top 覆盖,无需 JS。
2026-07-10 00:21:08 +08:00
xfy
3baa0a87ba fix(ui): --font-sans 补齐 CJK sans 字体栈
Tailwind v4 默认 --font-sans(ui-sans-serif, system-ui, sans-serif)不含中文字体。
后台 AdminLayout 根容器声明 font-sans 后,绕过 body 里精心配置的
'Noto Sans SC'/'PingFang SC'/'Microsoft YaHei' 栈,中文 fallback 到系统衬线体,
导致 /admin/* 页面中文(标题、列表项等)渲染成衬线体。

在 @theme 重定义 --font-sans,对齐 body 字体栈,根治全项目任何 font-sans 用法。
--default-font-family 指向 --font-sans,顺带强化 body 默认字体。
2026-07-09 23:37:16 +08:00
xfy
1584e01425 chore(deps): update all cargo and pnpm dependencies to latest versions 2026-07-09 18:12:54 +08:00
xfy
ecd5b441a0 fix(code-runner): 补齐可运行块上方间距
上一提交只加了 mb(下间距),但上间距仍缺失:PostContent 把每个 HTML
片段包在独立 <div> 里(post_content.rs:162),代码块前的段落成了该 div
的 :last-child,命中 .md-content p:last-child { margin-bottom:0 },
margin 折叠后上方间距归零。

把 mb 改成 my,var() 取同样的 --content-gap-paper(20px),由 CodeRunner
自身的 margin-top 保证上间距,不再依赖上方段落的 margin 是否被 :last-child
规则清零。
2026-07-09 18:03:30 +08:00
xfy
a4297355b5 refactor(router): downcast ServerFnError in ErrorLayout and improve fallback styling 2026-07-09 17:36:38 +08:00
xfy
6492e3c902 fix(code-runner): 可运行代码块与正文之间缺少间距
CodeRunner 根 div 没有任何垂直外边距,而普通代码块经 .md-content pre
规则带 margin-bottom: var(--content-gap-paper)(20px)。可运行块根元素是
div 而非 pre,该规则不生效,导致可运行块紧贴其后正文——上方靠前段落
margin 折叠勉强可见,下方完全无间距。

给根 div 加 mb-[var(--content-gap-paper)](沿用组件既有的 var() 任意值
写法),与普通代码块、段落保持一致的 20px 间距。
2026-07-09 17:36:22 +08:00
xfy
8cf34769e5 feat(not_found): commit HTTP 404 status code during SSR 2026-07-09 17:33:19 +08:00
xfy
1b38162ca4 feat(post_detail): propagate NotFound and other load errors to ErrorBoundary 2026-07-09 17:31:49 +08:00
xfy
37e8f51fac feat(router): wrap public routes in ErrorLayout with ErrorBoundary 2026-07-09 17:29:47 +08:00
xfy
b5a64f8dcf fix(post): 上下篇切换后可运行代码块消失
承接前两轮修复:路由重跑(79978aa)、正文更新(f86cb48)后,翻页时文章正文
正确切换了,但可运行代码块(CodeRunner)消失——容器 div 还在,CodeMirror
编辑器没挂载。

根因:上下篇切换(/post/rust → /post/go)时 PostContent 组件被复用(仅重渲染,
非重新挂载)。其内部 CodeRunner 用片段索引作 key(runner-{i}),而两篇文章的
代码块索引恰好相同(都是 1/3/5),keyed diff 按相同 key 复用 CodeRunner 实例。
复用的实例保留 use_hook/use_effect 状态:挂载 use_effect 的「防重复 init」守卫
(editor_handle.is_some())阻止 CodeMirror 挂载到新的(已替换的)DOM 容器,
而旧 CodeMirror 还绑定在被销毁的 rust DOM 上。同时 PostContent 自身的 use_effect
(__initPostContent 复制按钮 / 灯箱初始化)也不重跑,新文章交互脚本不初始化。

曾尝试直接给 PostContent 加 key=post.slug,无效:Dioxus 的 key diff
(diff_keyed_children)只在「兄弟节点列表」里生效,对单个非列表元素的 key
变化走 diff_non_keyed 路径、按位置复用,不触发 remount(经 use_hook 探针确认:
翻页后 CodeRunner 函数体执行了但 use_hook 从未重新执行)。

修复:把 PostContent 包进单元素 keyed 列表(for + iter::once + key=slug),
使其进入 keyed diff 路径——slug 变化时旧实例移除、新实例创建,连带 CodeRunner
重新挂载、交互脚本重新初始化。

验证(headless chromium,rust↔go 各含3个代码块):
- 修复前:翻页后容器在、CodeMirror 挂载数=0(红灯)
- 修复后:CodeMirror 挂载数=3,骨架屏清零;prev/next 双向 + SSR 首屏均正常
2026-07-09 17:12:48 +08:00
xfy
2498cd9c0b docs(pitfall): 记录反应式 hook 不追踪普通 prop 的陷阱
将本轮三轮调试(commits 79978aa / 1c56fd8 / f86cb48)踩到的同一 Dioxus 0.7
陷阱写入 Pitfall Log,避免后续重复踩坑:

use_server_future / use_resource / use_memo 只在闭包内读取的 signal 变化时
重跑/重算(经 ReactiveContext 订阅)。普通组件 prop(String/i32 等非 signal)
被 move 进闭包后是冻结快照,读取它不建立订阅——prop 变化时 hook 不刷新,
组件虽重渲染但 hook 永久保留首次值。

该陷阱只在「同路由变体间导航」(/post/a → /post/b)触发:复用组件实例、仅
更新 props;跨变体导航会新挂载组件、hook 首次运行,掩盖问题。

记录两个真实案例(路由取数 use_server_future、正文解析 use_memo)的根因与
修复,给出判断规则(signal 依赖安全 / prop 依赖会静默过期 / prop 派生值
优先内联而非 use_memo),并标注 CommentSection 依赖 article key remount
才安全的潜在隐患。
2026-07-09 16:43:33 +08:00
xfy
f86cb48efe fix(post): 上下篇切换后正文内容不更新
承接 fix(post) 的路由重跑修复:标题/描述更新后,正文仍停留在旧文章。

根因:PostContent 用 use_memo 缓存 split_content_fragments 的结果,但 memo
依赖 ReactiveContext 追踪闭包内读取的 signal 才会重算。content_html 是普通
String prop,读取它不建立订阅——memo 永久缓存首次解析结果。上下篇切换时
content_html prop 已是新文章的 HTML,但 memo 返回旧 fragments,dangerous_inner_html
收到旧 html 字符串,diff 判断属性值未变 → 不生成 setAttribute 编辑 → 正文 DOM
停在旧文章。

标题/描述之所以正常更新:它们直接读 post(来自 use_server_future 的 Resource,
是 signal),不走 memo。

修复:去掉 use_memo,直接在 render 内调用 split_content_fragments(纯函数,
符合渲染纯净性)。每次渲染用当前 content_html 重新解析,diff 收到新 html →
正文 DOM 正确更新。

验证(headless chromium):
- 修复前:/post/rust 点 Next,标题变「写文章页面改为左右布局」,正文仍是
  rust 的「第一步:定义世界」(红灯,复现)
- 修复后:正文随之变为「问题」(绿灯);prev 方向同样通过;首次 SSR 正常
2026-07-09 16:39:41 +08:00
xfy
1c56fd8ec1 fix(home,tags): 同变体路由分页/切标签后列表不更新
延续上一个 commit(fix(post))发现的同类 bug,统一修复 home 和 tags:

- home: /page/1 → /page/2(同 Route::HomePage 变体)后文章列表不更新
- tags: /tags/a → /tags/b(同 Route::TagDetail 变体)后标签下文章不更新

根因完全一致:use_server_future 闭包内读取的 current_page / tag 是普通 prop
(i32 / String),move 进闭包后成为冻结快照,不建立反应式订阅,同变体导航
复用组件实例时 future 不重跑。

注意 / → /page/2(Route::Home → Route::HomePage,跨变体)不受影响,因为跨
变体会新挂载组件、future 首次运行;只有同变体间的 prop 变化才触发 bug。

修复:闭包内通过 router().current::<Route>() 读取当前 page/tag 建立订阅。
Home(/ 路由,Route::Home 变体无 page 字段)调用 HomePosts 时走兜底分支用
传入的 current_page。

验证(headless chromium,本地设 APP_BASE_URL 绕过 CSRF 403):
- home 修复前:/page/1 点下一页,URL 变 /page/2,首篇仍是 page1 内容(复现)
- home 修复后:首篇随分页变为 page2 内容
- tags 因数据库无多文章标签,无法端到端验证;代码模式与 home 一致且编译通过
2026-07-09 16:22:08 +08:00
xfy
79978aa4a4 fix(post): 修复上/下一篇导航后文章内容不更新
点击文章底部的上一篇/下一篇后,URL 正确变化为 /post/<new-slug>,但页面
内容仍停留在旧文章,只有刷新浏览器才生效。

根因:use_server_future(内部即 use_resource)依赖 ReactiveContext 追踪
闭包内读取的 signal 来决定重跑时机。但 PostDetail 的 slug 是路由宏注入的
普通 String prop,move 进闭包后成为冻结快照,读取它不建立任何反应式订阅。
同一 Route::PostDetail 变体间的导航(/post/a -> /post/b)会复用组件实例、
仅更新 props,而 use_server_future 的 task 只在首次 hook 时创建一次,因此
永远不会重跑。

此前 commit 225bb24 把 slug_signal 镜像 + render 期 set 改成直接读 prop,
消除了反模式,但也丢掉了唯一能触发重跑的订阅源(slug_signal 的读取),
反而引入了这个 bug。

修复:在闭包内通过 dioxus::router::router().current::<Route>() 读取当前
slug。current() 内部调用 subscribe_to_current_context(),在 use_server_future
的 ReactiveContext 中注册订阅,路由变化即触发重跑。render body 保持纯净。

验证(headless chromium,本地需设 APP_BASE_URL 绕过 CSRF 403):
- 修复前:点 Next 后 URL 变 /post/1783580058,标题仍为旧文章(复现 bug)
- 修复后:URL 变,标题随之变为新文章
2026-07-09 15:34:25 +08:00
xfy
6a3ac038da refactor(write): 摘要字段移至右侧栏
摘要从左栏(标题下方)移到右栏侧边栏,作为独立分节位于标签与封面图之间,
与链接/标签/封面统一为带边框输入框的分节式布局。骨架屏同步更新。
2026-07-09 14:45:15 +08:00
xfy
19b47b11a4 style(admin): 缩小后台菜单左右边距
aside 容器 p-6 → p-4,菜单整体向两侧收紧
2026-07-09 14:36:57 +08:00
xfy
6e12b33769 fix(write): 彻底修复骨架屏高度不撑满
骨架屏在两条渲染路径都被高度链断裂卡住,内容只占页面 40-50%,
底部大片空白。

根因:高度链在两处父容器断裂,导致骨架屏无法引用到确定高度:
1. 未登录态(admin_layout):骨架屏被包在 div.p-10.animate-pulse,
   该 div 是普通块级元素,无 flex-1 不撑满 main、非 flex 容器使
   骨架屏 flex-1 无效、无 h-full。SSR 初始态走这条。
2. 登录态(write.rs 覆盖层):absolute inset-0 虽撑满,但非 flex
   容器,骨架屏 flex-1 无意义;改 h-full 又遇 height:100% 在
   非显式高度父容器下解析不可靠的经典坑。

修复:统一让两条路径的父容器都成为 flex flex-col,骨架屏根用
flex-1(比 height:100% 可靠,不依赖父显式 height):
- admin_layout 包裹层: p-10.animate-pulse → flex-1.min-h-0.
  flex.flex-col.animate-pulse(去掉对 write 不合适的 p-10,
  非 write 页面 padding 由 main_class 自带)
- write.rs 覆盖层: absolute inset-0 → absolute inset-0 flex flex-col
- write_skeleton 根: h-full → flex-1
2026-07-09 14:29:34 +08:00
xfy
e6ce87b315 fix(write): 修复骨架屏高度不足
骨架屏被放在 write.rs 的 absolute inset-0 覆盖层里,但根容器
用了 flex-1——在非 flex 父层里 flex-1 无效,导致骨架屏不撑满
高度,编辑器区域被压缩,底部留出大片空白。

改 flex-1 为 h-full,让骨架屏根撑满覆盖层高度,内部 flex
flex-col 再正常分配编辑器 flex-1 的高度。
2026-07-09 14:20:58 +08:00
xfy
1716976d91 refactor(write): 骨架屏同步为左右两栏布局
骨架屏原为单列结构(顶部标题+元信息 → 编辑器 → 底栏),
与重构后的页面布局脱节。重写为镜像真实页面:

- 两栏容器:左 flex-1 + 右 w-80 border-l
- 左栏:标题 + 摘要 + 编辑器(flex-1 撑满,含工具栏+正文行)
- 右栏:链接/标签/封面三节(p-6 + border-b 分隔线)
- 底栏:px-6 border-t,圆角按钮占位

这样加载瞬间骨架屏与真实内容对齐,不会出现布局跳变。
2026-07-09 14:11:48 +08:00
xfy
aba2aa2105 style(write): 移除右侧栏背景,回归透明
侧边栏不再用 paper-entry 整栏底色,改为透明(与左栏共用
paper-theme 底),靠 border-l 和节间分隔线划分区域。
同步:输入框改回 paper-entry 底 + 实色边框,封面图拖拽区
也改回 paper-entry,保持与透明侧栏的层次对比。
2026-07-09 14:08:00 +08:00
xfy
abc130eae7 refactor(write): 重新设计右侧栏为分节式轻量布局
原「卡片套卡片」结构(slug+标签包在一个重卡片里、封面图独立卡片)
层级冗余、视觉笨重。改为分节式(section)布局:

- 侧边栏整体用 paper-entry 底色,与左栏 paper-theme 形成层次区分
- 链接/标签/封面图三节用细分隔线 border-b 分隔,而非独立卡片
- 标题改用 uppercase 小标签 + tracking-wide,更专业紧凑
- 输入框改用 paper-theme 底 + 透明边框,聚焦时显主色边框
- 封面图拖拽区底色改 paper-theme,与侧边栏背景对比清晰

移除不再使用的 META_LABEL_CLASS 常量。
2026-07-09 14:03:07 +08:00
xfy
9b39e972e7 style(admin): 收紧后台所有页面左右边距 px-10 → px-6
px-10(40px) 偏宽,收紧到 px-6(24px) 更紧凑。
- admin_layout 的 main_class: 影响 dashboard/comments/posts/
  posts_trash/runner/system 等所有非 write 页面
- write 页面左栏内容区 + 底栏,保持与其它页面一致对齐
2026-07-09 13:52:29 +08:00
xfy
012c21532d refactor(write): 移除「撰写新文章/内容编辑器」页头条
页头条占用了顶部垂直空间且与左侧栏的标题输入框语义重复,
直接移除,让写作区从顶部开始,编辑器获得更多高度。
2026-07-09 13:50:46 +08:00
xfy
7b678481c6 refactor(write): 写文章页改为左右两栏布局,编辑器自适应高度
原单列布局把编辑器挤到折叠线以下、又被元信息卡片压缩(h-[60vh]),
显得太矮。改为左右两栏:

- 左栏(主写作区): 标题 + 摘要 + 编辑器,编辑器改为 flex-1 撑满
  剩余高度(内部 .tiptap-editor/.ProseMirror 已是 height:100%)。
- 右栏(侧边栏, w-80): Slug + 标签 + 封面卡片纵向堆叠,独立滚动。
- 页头条提到两栏之上,底栏(取消/状态/发布)不变,仍横跨两列贴底。

#tiptap-editor 容器 id 保持不变,tiptap_bridge 按 id 挂载不受影响。
所有信号/server function/状态逻辑零改动,纯结构样式调整。
2026-07-09 13:40:37 +08:00
xfy
e8fc255b19 fix(code-runner): 文章页运行结果添加最大高度与滚动
输出区原本无高度限制,大量 stdout 会撑开整个卡片/文章页。加 max-h-80
(320px) 与 overflow-auto,超出后垂直滚动。overflow-x-auto 升级为
overflow-auto 以同时支持垂直滚动。与编辑器内 resultArea 的 300px 上限
保持一致。
2026-07-09 13:28:04 +08:00
xfy
1521414cad fix(code-runner): 修复编辑器内运行结果不换行
resultArea 挂在 ProseMirror 可编辑文档树内部,浏览器对 contenteditable
子树强制 white-space 折叠(computed 为 collapse),CSS 的 white-space:
pre-wrap 被覆盖,导致 textContent 里的 \n 与行首空格被吞、多行输出挤成一行。

改用 <br> 显式渲染换行、\u00A0 替换空格/制表符以保留对齐——二者均不依赖
white-space。createTextNode 避免 stdout 含 HTML 标签时的注入。
2026-07-09 13:25:59 +08:00
xfy
88558d73d3 fix(markdown): update unsupported-lang test to use ruby
上一个提交为 code runner 加了 Rust 支持,rust 进入语言白名单后,
render_markdown_runnable_marker_on_unsupported_lang_ignored 里的
rust 用例失效(现在 rust 确实会挂 data-runnable)。改用确实不在
白名单的 ruby 作为不支持语言的样本。
2026-07-09 11:50:57 +08:00