Skip to content

fix: 优化控制台侧边栏载入速度并统一主区域右侧淡入划入 - #3

Merged
xiaolfeng merged 3 commits into
masterfrom
fix/preview-somthing-bug
Sep 22, 2026
Merged

xiaolfeng merged 3 commits into
masterfrom
fix/preview-somthing-bug

Conversation

@xiaolfeng

Copy link
Copy Markdown
Owner

变更背景

当前控制台管理界面的载入动效存在两个体验问题:

  1. 侧边栏载入迟缓:sidebarStaggerContainer 延迟与交错间隔过长,子项达 14 个节点,整体展开耗时约 1.55s,界面呈现拖沓感。
  2. Main 区域动画方向冲突:顶栏与页面标题 PageHeader(采用 staggerItemLeft,从左向右划入)与主内容卡片/表格(采用 staggerItem,从右向左划入)方向相反,造成视线割裂。

核心变更

  1. 侧边栏动画大幅提速:

    • sidebarStaggerContainer:delayChildren 缩减至 0.03s,staggerChildren 缩减至 0.025s。
    • sidebarItem:duration 优化至 0.22s,位移调整为 x: -10px。
    • 整体侧边栏入场总耗时由 ~1.55s 缩短至 ~360ms(提速约 76%),轻快敏捷。
  2. 顶栏 Header 直接纯淡入:

    • web/src/routes/console.tsx:移除 headerVariants 的水平位移 x,仅保留 opacity: 0 -> 1 平滑淡入,视觉更加沉稳。
  3. Main 内容区域统一右侧淡入划入:

    • web/src/components/page-header.tsx:统一使用 staggerItem(右侧淡入划入 x: 20px -> 0)。
    • components/src/motion/index.ts:将 staggerItemLeft 的位移统一设为右侧滑入(x: 20),确保全域一致性。
    • web/src/routes/interact/thank.tsx:统一组件变体为 staggerItem。

验证与测试

  • 交互走查:通过 /local:lumina-preview 制作高保真动效样例并经视觉评审核对。
  • 前端组件测试:pnpm --filter @lumina/components test(55 test files, 287 passed)。
  • 前端控制台测试:pnpm --filter web test(34 test files, 162 passed)。
  • 静态类型检查与生产构建:pnpm --filter @lumina/components build 与 pnpm --filter web build 均编译无误。
  • 全量后端质量门:make check(版本连续性规则测试 + gofmt + go vet + go test -race)全部通过。

原因: Pin 队列两条缺陷约束——Q-01/Q-02(问答进度)与 S-01/Q-03(Pages 展示态)
内容:
- 问答: computeSessionProgress 补 skipped 桶,四桶之和恒等于 total;
  进度条改多色段(已答 lagoon/跳过琥珀/已取消红),紧凑读数收敛为
  「已答/总计」,明细移入 Hover/点击聚焦的 Tooltip 卡片
- 预览: Pages 展示态悬浮卡片按登录态隔离,未登录仅保留可渲染页面与
  高级资源切换视图,隐藏版本列表、设为生效、Fork 与控制台跳转入口;
  展开动效由 zoom-in-95 改为 slide-in-from-top-2 自上而下流动
影响: 仅 web 前端;SessionProgress 新增 skipped 字段,消费方均经
computeSessionProgress 构造,无手写字面量
原因: 原 pin_consume 读取即原子出队并标记已消费,导致 Agent 无法在不改变 pending 状态的前提下审阅队首正文并进行技术决策
内容:
- 持久层: PinRepo 新增 GetOldestPending 纯只读查询队首 pending 记录
- 业务层: PinLogic 新增 PeekOldestPending 供消费前审阅且无副作用
- 工具层: pin_peek 支持 project_name 参数以只读预览队首待处理约束;pin_list 补齐正文展示;pin_consume 明确为决策处理完毕后的显式消费闭环
- 测试层: 补齐 Logic 与 MCP 端到端全链路生命周期测试用例
影响: 仅扩展 Pin 模块读取能力,不破坏现有精确 ID 消费与 FIFO 原子出队契约
- 侧边栏:大幅缩短延迟与交错间隔,提速 76%
- 顶栏:将 Header 导航栏调整为直接纯淡入,移除水平位移
- 主区域:统一 PageHeader 与主内容为从右向左淡入划入,消除方向冲突
@xiaolfeng
xiaolfeng merged commit 34e8228 into master Sep 22, 2026
2 checks passed
@xiaolfeng
xiaolfeng deleted the fix/preview-somthing-bug branch September 22, 2026 17:53
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