Skip to content

docs(frontend): add interactive architecture map - #931

Open
huyanxius wants to merge 3 commits into
1024XEngineer:mainfrom
huyanxius:docs/frontend-architecture-map
Open

docs(frontend): add interactive architecture map#931
huyanxius wants to merge 3 commits into
1024XEngineer:mainfrom
huyanxius:docs/frontend-architecture-map

Conversation

@huyanxius

Copy link
Copy Markdown
Collaborator

新增一份以实际代码为依据的 Windup 前端架构与创作链路图,让结项交付同时留下可直接阅读、可追溯源码、可重新生成的前端技术地图。

Why

整体架构与内部服务图正在 #926 中补充,但前端拥有的节点编排、任务终态收口和资产交付边界仍散落在代码与模块说明中。历史 #134 保存的是早期设计说明,其中 WorkflowRun、Revision、路由与实现范围已经过期,也无法承担当前结项版本的事实说明。

这份文档需要同时说明三个容易被误解的边界:Quick Start 与 Workflow Editor 共用 Controller 和 WorkflowRun;后端任务终态仍需浏览器完成流程收口;两种入口的动作发布适配目前尚未完全合流。

Changes

  • 增加可直接打开的独立 HTML 查看器,提供全景、双入口合流、状态闭环和资产交付四种阅读视图。
  • 增加亮/暗主题、节点关系聚焦、源码详情抽屉以及 SVG / PNG 导出能力。
  • 增加人可读架构 JSON、确定性渲染器和维护说明,并从前端 README 暴露入口。

Implementation

  • JSON 固定到 992dadf,记录 21 个架构节点、21 条关系与 48 个源码锚点;查看器中的源码链接使用该 revision,避免后续行号漂移。
  • 渲染器校验重复 ID、未知连接端点、缺少几何路径和无效阅读视图,再把同一份 JSON 嵌入独立 HTML。
  • 图中保留 Quick Start 的 service 内发布适配与 Workflow Editor 的 CharacterAssetPublisher 两条路径,不把共享生成编排描述为尚未实现的端到端统一。

Verification

  • frontend/node_modules/.bin/oxfmt --check frontend/README.md frontend/docs/architecture/README.md frontend/docs/architecture/windup-frontend.architecture.json frontend/docs/architecture/render.mjs frontend/docs/architecture/windup-frontend.html:格式通过。
  • cd frontend && npx oxlint docs/architecture/render.mjs:无 lint 错误。
  • node --check frontend/docs/architecture/render.mjs:语法通过。
  • node frontend/docs/architecture/render.mjs:重复生成后 HTML SHA-256 保持 8a6b48f55ba6b71b92727a24809ddb6e9855225feb424afe09c385b7be831385,嵌入数据与源 JSON 一致。
  • jq + git cat-file -e 源码锚点审计:48 / 48 有效,0 失败。
  • 本地浏览器:21 个节点、21 条关系;亮/暗主题、状态聚焦、源码抽屉与 390×844 窄屏首次打开均正常,控制台 0 错误。
  • npm run typechecknpm run test:coveragenpm run build:Not run(仅新增独立文档与查看器,不修改应用运行代码;按影响面未扩大到产品全量门禁)。

Scope

  • 本 PR 不修改产品代码、API 契约、部署配置或后端服务拓扑。
  • 本 PR 不恢复旧设计文档,也不把架构图扩展为 React 组件目录清单。
  • 按用户明确要求,本 PR 不附截图;截图未作为提交或 PR 的阻塞项。

Related Issues

Closes #930

Refs #926

Historical context: #134

Frontend orchestration and delivery boundaries were only scattered across code and module notes.

Add a validated JSON source, deterministic renderer, and standalone interactive viewer with focused views and source anchors.

Preserve the shared workflow core, browser finalization loop, and separate publication adapters as explicit handoff facts.
The architecture artifact needs a stable reading guide and regeneration contract.

Document each focused view, the truthful publication split, renderer commands, and validation behavior.

Keep the map maintainable without turning it into a stale component inventory or backend topology.
Frontend contributors need a discoverable path to the final architecture handoff.

Link the interactive map and its maintenance guide from the frontend README.

Make the as-built diagram reachable without changing product code or runtime behavior.
@vercel

vercel Bot commented Aug 29, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
windup Ready Ready Preview Aug 29, 2026 11:43am

@codecov

codecov Bot commented Aug 29, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

Impacted file tree graph

@@            Coverage Diff             @@
##             main     #931      +/-   ##
==========================================
+ Coverage   86.12%   91.27%   +5.14%     
==========================================
  Files         306      193     -113     
  Lines       24037    13204   -10833     
  Branches     3646        0    -3646     
==========================================
- Hits        20703    12052    -8651     
+ Misses       2360     1152    -1208     
+ Partials      974        0     -974     
Flag Coverage Δ
backend 91.27% <ø> (ø)
frontend ?

Flags with carried forward coverage won't be shown. Click here to find out more.
see 113 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@fennoai fennoai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

本次完整检查了前端架构图的 README 入口、JSON 源文件、渲染器和生成的独立 HTML。未发现由本 PR 引入且满足可定位、可复现和可修复标准的正确性、可靠性或安全性问题。

已验证:node --check frontend/docs/architecture/render.mjsnpx oxlint docs/architecture/render.mjs、架构节点/连线/视图几何约束、48 个源码锚点在固定 revision 992dadf 中有效,以及独立 HTML 在 Chromium headless 下可加载并初始化。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Documentation]: Add an as-built frontend architecture map

1 participant