Skip to content

feat(character-detail): rebuild the asset page layout - #945

Closed
huyanxius wants to merge 4 commits into
mainfrom
ui/character-detail-layout-v2
Closed

huyanxius wants to merge 4 commits into
mainfrom
ui/character-detail-layout-v2

Conversation

@huyanxius

Copy link
Copy Markdown
Collaborator

角色资产详情页改成左右两栏,导出入口收进菜单,四向母版按九宫格摆。

Why

顶部三个导出入口错落成三行;四向母版平分整行把动作列表挤出首屏;header 的 overflow-hidden 会裁掉页面内的浮层;Cocos 相关配色写死在主题体系外,明暗两套要各维护一份。

Changes

  • 母版与规格进左栏,动作列表进右栏并留在首屏
  • 顶部留「导出 ▾」「完美像素化」「在预览台打开」,Cocos 两条路径收进菜单
  • 导出相关配色改用 app-* token
  • 四向母版按方位摆进九宫格,Quick Start 首帧盘跟随
  • header 去掉 overflow-hidden
  • 删去与盘面重复的规格项,母版缺方向才提示

Implementation

  • ExportButtonlayout="menu",复用 productPopoverClassuseProductPopoverMotion
  • 基础类不再输出 padding、边框色和非 pill 圆角,改由调用方 className 给,playtest-export-page 同步补尺寸
  • getDirectionGridLayout('four-way') 改九格布局,这是共享表,Quick Start 跟随
  • 测试锁住顶部三个控件同高同圆角带图标、菜单三项带图标

Verification

  • npm run format:check
  • npm run lint
  • npm run typecheck
  • npm run test:coverage:90 files / 1391 tests
  • npm run build

Scope

  • 不含导出与 Cocos 导入的行为改动
  • ExportPanel 内的硬编码色不在本页路径上,未一并处理

Related Issues

Closes #944

…grid

四向原本排成 2×2 方阵,读不出方位。改成和八向同一张九宫格:北在上中、南在下中、西在左中、东在右中,四角与中心留空。
…grid

四向改九宫格后空位从 0 个变成 5 个,原来每个空位画一个虚线框,盘面会碎成一片。空位改为不画边框、不进可访问树。
…rdcoded colors

三个导出入口原本竖排,嵌进调用方的横排按钮组后会错落成三行。新增 layout="menu",只露一个「导出」按钮,资产包与 Cocos 两条路径进二级菜单,每项都带图标。

Cocos 按钮与导入反馈的 sky/amber/emerald/rose 硬编码色改用 app-* token,一套值同时覆盖明暗主题,不再需要 dark: 分支。

基础类不再输出 padding、边框色和非 pill 圆角:它们和调用方 className 里的同类 utility 撞车,谁生效取决于 CSS 产出顺序而不是拼接顺序。playtest 工具栏同步补上尺寸。
母版与规格转为左栏,动作列表进右栏并留在首屏;原来母版按视口平分整行,每格接近 900px。

标题缩略图从 absolute 悬空收回正常流,header 随之去掉 overflow-hidden —— 那个属性会裁掉 header 内的任何浮层,导出菜单第一项就被它切掉。

顶部操作行统一成设计系统的控件:次级操作用 chrome 变体,重量只留给「在预览台打开」。承载块统一为同一种底色与圆角,不再各挑各的。

删掉重复信息:方位盘已经画出几向,规格里不再重复「4 个方位」「4/4 已备齐」,母版齐备时不占行,只在缺方向时点名。
@vercel

vercel Bot commented Sep 18, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated
windup Ready Ready Preview Sep 18, 2026 4:57pm UTC

@codecov

codecov Bot commented Sep 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

Impacted file tree graph

@@           Coverage Diff           @@
##             main     #945   +/-   ##
=======================================
  Coverage   91.27%   91.27%           
=======================================
  Files         193      193           
  Lines       13204    13204           
=======================================
  Hits        12052    12052           
  Misses       1152     1152           
Flag Coverage Δ
backend 91.27% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

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

已完整检查本 PR 的角色详情页布局、导出菜单、四向/八向方向网格及相关调用方。未发现满足报告门槛的新增正确性、兼容性或可维护性问题。

验证:定向测试 4 个文件共 179 项通过;npm run typechecknpm run lintnpm run format:check 通过;固定 SHA diff 通过 git diff --check

@huyanxius

Copy link
Copy Markdown
Collaborator Author

分支误推到主仓库,按 CONTRIBUTING 改从 fork 重开:见新 PR

@huyanxius huyanxius closed this Sep 18, 2026
@huyanxius
huyanxius deleted the ui/character-detail-layout-v2 branch September 18, 2026 17:10

This branch was successfully deployed

1 active deployment
Preview 8676e9dd Deployed Sep 18, 2026 by vercel[bot]
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.

[Feature]: Rework character detail page layout

1 participant