Skip to content

feat(home): add the first screen on the current architecture - #91

Open
huyanxius wants to merge 9 commits into
1024XEngineer:mainfrom
huyanxius:feat/home-first-screen
Open

feat(home): add the first screen on the current architecture#91
huyanxius wants to merge 9 commits into
1024XEngineer:mainfrom
huyanxius:feat/home-first-screen

Conversation

@huyanxius

@huyanxius huyanxius commented Aug 3, 2026

Copy link
Copy Markdown
Collaborator

实现根路由 / 的首屏页面,替换 #70 留下的占位组件。

Closes #92

Why

#70 落地了模块骨架,八个路由页面全是占位外壳,根路由渲染的是一块虚线卡片。这意味着打开站点后没有任何界面说明可以从哪里开始——两条制作路径(快速开始、从已有项目继续)都只能靠手工输入 URL 抵达。产品缺的是承载这两个入口的落地页,本 PR 补上它。

Change Description

  • 根路由渲染首屏页面,提供「快速开始」与「从项目开始」两个入口,分别跳转 /quick-start/projects
  • 首屏源码 3 个文件 / +342 行,测试 2 个文件 / +51 行,全部落在 pages/home/;另加品牌图标 public/windup-mark.svg
  • app 层 26 行改动:AppShell 移除 max-w-5xl 居中容器、仅保留顶栏,站名由 span 改为指向 /Linkapp.tsx 的路由表新增一层用于声明外壳边界。
  • 同步 frontend/README.mdfrontend-architecture-v3.md:其中「本阶段只提交模块边界与接口」「页面是占位外壳」「无测试文件」三处表述在本 PR 后不再成立。

Implementation Approach

  • pages/home/ 三个文件分工:index.tsx 页面、choice-card.tsx 入口卡片、brand-bird.tsx 品牌点阵(Canvas 采样 public/windup-mark.svgprefers-reduced-motion 下不启动动画)。页面不依赖 entitiesfeatures,入口卡片只承载路由跳转。
  • 两个组件保留在页面目录内、不下沉 shared/uishared/README.md 禁止「只被单个页面使用、却以复用名义提前抽出」的代码,二者目前仅首屏使用。
  • 外壳边界由组件内 pathname 判断改为路由表声明:新增 AppShellRouteAppShell + Outlet),在 app.tsx 中包裹需要顶栏的八条路由,根路由置于其外,AppShell 本身不再感知路由。

Screenshots

Before — 根路由渲染 #70 留下的占位卡片:

before

After — 首屏,两个入口分别通向 /quick-start/projects

after

可交互预览:https://windup-git-fork-huyanxius-feat-home-fi-748191-huyan-s-projects1.vercel.app

Testing

本地执行了 CI 工作流中的全部步骤:

  • npm run format:check — 通过(40 个文件)
  • npm run lint — 通过,无告警
  • npm run typecheck — 通过
  • npm run test — 通过(2 个文件 / 2 个用例)
  • npm run build — 通过(241.02 kB,86ms)

浏览器手工核对:首屏满幅无顶栏;/projects 与未匹配路由带顶栏;从 /projects 点击站名返回 /

Follow-ups

  • brand-bird.tsx 的绘制逻辑无测试覆盖:jsdom 下 getContext('2d') 返回 null,组件随即返回,测试只验证 canvas 元素挂载。
  • 同一组件的 requestAnimationFrame 常驻,页面隐藏时不暂停。
  • 首屏大标题使用 font-serif,映射到系统默认衬线族,跨平台观感不一致。
  • 首屏三段制作路径是 WORKFLOW_STEP_ORDER 八步的粗粒度概括,硬编码于页面文案,已在代码注释与架构文档标注;若要消除这处重复,需在 entitiesfeatures 建立阶段映射。

Related

首屏要的是 Windup 标记化成活的点阵,不是一张平铺的 logo。

新增一个 canvas 组件,把标记采样成点,用两道错开的光波扫过;prefers-reduced-motion 下停在静态帧。

标记本身放进 public/,采样器在运行时读它。
根路由此前是一块虚线占位,产品没有承载两种开始方式的入口面。

首屏由主标题、三段制作路径和右侧卡片面板构成;卡片组件只接收展示文案与目标路由,不持有业务状态。

快速开始与项目工作台从落地页可直接进入。
外壳该不该出现是路由决策,写进外壳组件会随页面增多长成一串 pathname 特判。

AppShell 保持原样,新增 AppShellRoute 承载 Outlet;路由表把根路由留在外面,其余页面收进外壳这一层。

新增页面要不要外壳看一眼路由表就知道,外壳自身不再读 pathname。
首屏是进入快速开始与项目工作台的唯一入口,这里静默回退会让落地页失去去处。

补两个 jsdom 测试:断言两个入口链接指向各自路由、标题与品牌画布渲染到位,以及卡片按 props 渲染出单个可跳转链接。

两个文件跑在现有 vitest 配置下。
外壳除了顶栏还把每个页面夹在 max-w-5xl 里,屏幕两侧空掉一大片,页面只剩中间一条。

删掉限宽和内边距,main 占满宽度;宽度和留白交给页面自己定。

外壳现在只负责顶栏。
首屏不带这条顶栏,进到其余页面后界面上没有任何回首页的入口,只能改地址栏。

顶栏里的站名从 span 换成指向根路由的 Link,并补上 hover 反馈。

其余页面现在都能点站名回到首屏。
README 与架构文档还写着「本阶段只提交模块边界与接口」「页面是占位外壳」「无测试文件」,首页落地后这三句都不成立了。

改成描述现状:只有首页是真实现、其余七个路由仍是占位;并补记外壳边界画在路由表上、宽度与留白归页面自己管这两条。

文档与代码重新对上,评审不必再猜哪句还算数。
@vercel

vercel Bot commented Aug 3, 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 3, 2026 12:50pm

@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.

Review found one layout regression in the app shell change. I could not run local validation because vitest and tsc from node_modules/.bin returned Permission denied in this checkout.

Comment thread frontend/src/app/layout/index.tsx
huyanxius added a commit to huyanxius/Windup that referenced this pull request Aug 3, 2026
huyanxius added a commit to huyanxius/Windup that referenced this pull request Aug 3, 2026
外壳不再统一施加宽度与留白之后,内容页需要一个共同的居中容器,否则每个页面各写一套 max-w 数值,日后无从统一。

新增 `shared/ui/page-container`:最大宽度 1280px,左右 24px、上下 32px;只提供一种尺寸,出现第二种真实需求时再加参数。

它不含任何业务语义,符合 shared 的收录判据;页面按需套用,不套即满幅。
外壳的居中容器删除后,七个占位页直接贴到视口左上角,丢掉了原有的页边距与可读宽度。

七个页面各自套上 PageContainer 恢复留白;满幅的首屏不套。

这七个文件是同一次机械替换,拆开提交会出现一部分页面贴边、一部分不贴边的中间状态。
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.

feat: 实现根路由首屏页面(Refs #58)

1 participant