Skip to content

统一资源库首页与全站设计图鉴体验 - #56

Merged
Xiiiing merged 7 commits into
mainfrom
codex/editorial-atlas
Oct 27, 2026
Merged

Xiiiing merged 7 commits into
mainfrom
codex/editorial-atlas

Conversation

@Xiiiing

@Xiiiing Xiiiing commented Oct 26, 2026 •

Copy link
Copy Markdown
Owner

原有资源浏览入口重复,页面介绍、筛选层级和卡片说明占用过多空间,常用分类不够直接。本次将首页统一为资源库,并整理全站宿主界面的视觉与交互。

  • 主导航为资源库、设计指导、资源导航,收藏保持独立快捷入口。移除独立发现页,Logo 和默认首页直接进入资源库;旧 #discover 链接原位转入 #explore 并保留查询条件、合集、语言及主题参数。
  • 资源库移除装饰副标和重复介绍。类型恢复连贯的分段按钮底板,用途分类使用紧凑胶囊与实心选中态,统一间距、计数和触控尺寸。用途分类常显,主题合集及其他分面放在“更多筛选”中。
  • 普通列表宽屏四列、16px 列间距,卡片名称与来源同行,简介一行、最多两个标签。保留卡片内交互,收藏常显,复制及详情放入键盘/触屏可操作的更多菜单。
  • 设计指导与资源导航同步移除英文副标及介绍段落,使用简短标题、常显类型按钮、用途胶囊和内置提交按钮的搜索框;保留计数、零结果状态、URL、历史恢复及键盘/触屏操作。两页类型切换复用资源库的弹性选中指示块,连续切换、焦点及尺寸保持稳定,并尊重减少动效偏好。内容卡片同步宽屏四列、16px 间距与内边距,简介最多两行。
  • 详情保留稳定画布、设备切换、全屏和历史恢复,提示词与来源可折叠;指导、导航、收藏及组合器采用共享规则。组合器按项目需求、方法与参考、交付要求分组,保留编辑、草稿、复制与导出。
  • 保留资源标识、收藏键、草稿格式、交付协议、旧类型路由及筛选语义。来源/使用说明按需加载,启动脚本 gzip 为 187,848 字节,低于原有 190,000 字节预算。
  • 未修改收录演示、服务端 API 或依赖版本;未包含本地 21st-submissions/。

验证

  • npm run check:目录/类型检查和 21 项单元测试通过。

  • npm test:当前生产构建及 189 项浏览器测试全部通过(Chromium 171、Firefox 9、WebKit 9)。包括类型选中指示块的实际动画帧、连续切换、标签几何稳定、键盘/触屏、滚动、减少动效、零结果禁用及历史恢复。

  • npm run test:dev:隔离开发环境更新流程通过。

  • 实测默认首页、旧发现页链接、合集入口、搜索、多条件筛选、卡片内交互、收藏、详情返回、设备/全屏、指导阅读及组合器编辑导出。

  • 1440/1024/768/390px × 中英文 × 明暗主题 × 7 个入口,共 112 组布局检查;另有 110%/125% 原生缩放的 12 组检查。覆盖键盘、触屏及减少动效,无横向溢出,详情说明开关保持画布几何稳定。

  • WebKit 使用临时解压的发行版运行库。系统缓存预检无法识别临时库,因此运行时关闭 Playwright 环境预检;浏览器实际执行全部测试,未跳过断言。

  • 另外实测 390px 深色、减少动效下两页的触屏筛选、收藏、详情及返回恢复。

截图与证据

类型切换录屏:设计指导、资源导航。

当前设计规则、首页及内容工具前后截图、移动端深色截图和复现方法;当前构建指纹与尺寸/缩放证据。

筛选按钮调整前 当前筛选按钮
前 后

本 PR 完整覆盖最终约定的全站改版范围,按经过验证的阶段保留真实提交。

Closes #55

@Xiiiing Xiiiing changed the title 统一全站编辑式设计图鉴的视觉与浏览体验 统一资源库首页与全站设计图鉴体验 Oct 27, 2026
@Xiiiing
Xiiiing merged commit 1188c6b into main Oct 27, 2026
1 check failed
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.

统一全站编辑式设计图鉴的视觉与信息层级

1 participant