Skip to content

feat: Adjust button alignment format & Change to a 3D model#16

Merged
Aliothmoon merged 2 commits intomainfrom
style/hero-mobile-layout
Jan 30, 2026
Merged

feat: Adjust button alignment format & Change to a 3D model#16
Aliothmoon merged 2 commits intomainfrom
style/hero-mobile-layout

Conversation

@Aliothmoon
Copy link
Collaborator

@Aliothmoon Aliothmoon commented Jan 30, 2026

  • 调整一下下载按钮对齐格式
  • 修复顶部内容重叠问题
  • 换个3D模型

Summary by Sourcery

将自定义的基于粒子的 hero 3D 模型替换为 GLTF relay 模型,并增强 hero 区域的布局和视觉效果。

New Features:

  • 在 hero canvas 中加载并渲染新的基于 GLTF 的 relay 3D 模型,包含主题化材质、灯光设置以及后期处理特效。

Bug Fixes:

  • 通过优雅处理非 OK 响应,防止在获取最新 GitHub 发布版本时发生崩溃。
  • 调整 hero 区域间距以及右侧模型容器高度,避免在不同视口上顶部内容出现重叠。

Enhancements:

  • 为 3D 组件引入共享的主题颜色常量,并根据明/暗模式优化全息场动画与不透明度。
  • 优化 hero 标题渐变工具的使用方式,并将 HUD 叠加层重组为一个独立组件以提升清晰度。
  • 重新设计 hero 下载区域布局,使用虚线边框和分行堆叠的布局方式,以更好地对齐并突出主下载按钮、“更多选项”和镜像下载按钮。

Build:

  • 为 3D 视觉特效新增 @react-three/postprocessingpostprocessingbaseline-browser-mapping 依赖。
Original summary in English

Summary by Sourcery

Replace the custom particle-based hero 3D model with a GLTF relay model and enhance the hero section layout and visuals.

New Features:

  • Load and render a new GLTF-based relay 3D model with themed materials, lighting setup, and postprocessing effects in the hero canvas.

Bug Fixes:

  • Prevent crashes when fetching the latest GitHub release by handling non-OK responses gracefully.
  • Adjust hero section spacing and right-side model container height to avoid content overlapping at the top on various viewports.

Enhancements:

  • Introduce shared theme color constants for 3D components and refine holographic field animations and opacity based on light/dark mode.
  • Refine hero title gradient utility usage and reorganize HUD overlay into a dedicated component for clarity.
  • Rework hero download area layout with dashed borders and stacked rows to better align and emphasize primary, more options, and mirror download buttons.

Build:

  • Add @react-three/postprocessing, postprocessing, and baseline-browser-mapping dependencies for 3D visual effects.

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey - 我发现了两个问题,并留下了一些整体反馈:

  • Hero 标题的类名从 bg-gradient-to-r 改成了 bg-linear-to-r;除非你添加了自定义的 Tailwind 工具类,否则这不会产生任何效果,并且大概率应该保持为 bg-gradient-to-r(或其他合法的渐变类)。
  • RelayModel 中,克隆出来的 GLTF 场景以及其克隆材质从未被释放,这可能会随着时间推移导致内存泄漏;建议在清理(cleanup)效果中遍历 clonedScene,在合适的地方释放几何体和材质。
  • 新增到 package.json 中的 baseline-browser-mapping 依赖在 diff 里似乎并未被使用;如果在其他地方也不需要,建议移除以避免不必要的包体积膨胀。
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The `Hero` title class was changed from `bg-gradient-to-r` to `bg-linear-to-r`; unless you’ve added a custom Tailwind utility, this will have no effect and should likely remain `bg-gradient-to-r` (or another valid gradient class).
- In `RelayModel`, the cloned GLTF scene and its cloned materials are never disposed, which could lead to memory leaks over time; consider traversing `clonedScene` in a cleanup effect and disposing geometries/materials where appropriate.
- The new `baseline-browser-mapping` dependency added to `package.json` does not appear to be used in the diff; if it’s not required elsewhere, it should be removed to avoid unnecessary bundle bloat.

## Individual Comments

### Comment 1
<location> `app/components/hero/InteractiveModelOptimized.tsx:135-136` </location>
<code_context>
     return () => {
-      Object.values(geometries).forEach((geo) => geo.dispose());
-      Object.values(materials).forEach((mat) => mat.dispose());
+      geometries.outer.dispose();
+      geometries.inner.dispose();
     };
-  }, [geometries, materials]);
</code_context>

<issue_to_address>
**issue (bug_risk):** The base cylinder geometry is never disposed, which can lead to a small memory leak.

In `OptimizedHoloField`’s cleanup effect, `geometries.base` is also created in the `useMemo` and used in JSX but is never disposed. Please dispose it as well (e.g., add `geometries.base.dispose()` alongside `outer` and `inner`) so GPU memory stays bounded.
</issue_to_address>

### Comment 2
<location> `app/components/Hero.tsx:304` </location>
<code_context>

               <div className="text-left text-[2.5rem] leading-[0.9] tracking-tighter select-none sm:text-[3rem] md:text-[3rem] lg:text-[5rem]">
-                <span className="block bg-gradient-to-r from-[#d4a017] via-[#c49102] to-black bg-clip-text text-transparent dark:from-[#FFD000] dark:via-[#FFD000] dark:to-white">
+                <span className="block bg-linear-to-r from-[#d4a017] via-[#c49102] to-black bg-clip-text text-transparent dark:from-[#FFD000] dark:via-[#FFD000] dark:to-white">
                   {t("hero.title")}
                 </span>
</code_context>

<issue_to_address>
**issue (bug_risk):** The `bg-linear-to-r` class name looks like a typo and likely breaks the gradient.

`bg-linear-to-r` isn’t a standard Tailwind class (the built‑in gradient utility is `bg-gradient-to-r`), so this will drop the gradient on the hero title unless you’ve added a matching custom utility. If this wasn’t intentional in your Tailwind config, please switch back to `bg-gradient-to-r`.
</issue_to_address>

Sourcery 对开源项目免费 —— 如果你觉得我们的评论有帮助,欢迎分享 ✨
帮我变得更有用!请对每条评论点 👍 或 👎,我会根据这些反馈改进你的代码审查体验。
Original comment in English

Hey - I've found 2 issues, and left some high level feedback:

  • The Hero title class was changed from bg-gradient-to-r to bg-linear-to-r; unless you’ve added a custom Tailwind utility, this will have no effect and should likely remain bg-gradient-to-r (or another valid gradient class).
  • In RelayModel, the cloned GLTF scene and its cloned materials are never disposed, which could lead to memory leaks over time; consider traversing clonedScene in a cleanup effect and disposing geometries/materials where appropriate.
  • The new baseline-browser-mapping dependency added to package.json does not appear to be used in the diff; if it’s not required elsewhere, it should be removed to avoid unnecessary bundle bloat.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The `Hero` title class was changed from `bg-gradient-to-r` to `bg-linear-to-r`; unless you’ve added a custom Tailwind utility, this will have no effect and should likely remain `bg-gradient-to-r` (or another valid gradient class).
- In `RelayModel`, the cloned GLTF scene and its cloned materials are never disposed, which could lead to memory leaks over time; consider traversing `clonedScene` in a cleanup effect and disposing geometries/materials where appropriate.
- The new `baseline-browser-mapping` dependency added to `package.json` does not appear to be used in the diff; if it’s not required elsewhere, it should be removed to avoid unnecessary bundle bloat.

## Individual Comments

### Comment 1
<location> `app/components/hero/InteractiveModelOptimized.tsx:135-136` </location>
<code_context>
     return () => {
-      Object.values(geometries).forEach((geo) => geo.dispose());
-      Object.values(materials).forEach((mat) => mat.dispose());
+      geometries.outer.dispose();
+      geometries.inner.dispose();
     };
-  }, [geometries, materials]);
</code_context>

<issue_to_address>
**issue (bug_risk):** The base cylinder geometry is never disposed, which can lead to a small memory leak.

In `OptimizedHoloField`’s cleanup effect, `geometries.base` is also created in the `useMemo` and used in JSX but is never disposed. Please dispose it as well (e.g., add `geometries.base.dispose()` alongside `outer` and `inner`) so GPU memory stays bounded.
</issue_to_address>

### Comment 2
<location> `app/components/Hero.tsx:304` </location>
<code_context>

               <div className="text-left text-[2.5rem] leading-[0.9] tracking-tighter select-none sm:text-[3rem] md:text-[3rem] lg:text-[5rem]">
-                <span className="block bg-gradient-to-r from-[#d4a017] via-[#c49102] to-black bg-clip-text text-transparent dark:from-[#FFD000] dark:via-[#FFD000] dark:to-white">
+                <span className="block bg-linear-to-r from-[#d4a017] via-[#c49102] to-black bg-clip-text text-transparent dark:from-[#FFD000] dark:via-[#FFD000] dark:to-white">
                   {t("hero.title")}
                 </span>
</code_context>

<issue_to_address>
**issue (bug_risk):** The `bg-linear-to-r` class name looks like a typo and likely breaks the gradient.

`bg-linear-to-r` isn’t a standard Tailwind class (the built‑in gradient utility is `bg-gradient-to-r`), so this will drop the gradient on the hero title unless you’ve added a matching custom utility. If this wasn’t intentional in your Tailwind config, please switch back to `bg-gradient-to-r`.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment on lines +135 to +136
geometries.outer.dispose();
geometries.inner.dispose();
Copy link

Choose a reason for hiding this comment

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

issue (bug_risk): 基础圆柱体几何体从未被释放,这可能会导致轻微的内存泄漏。

OptimizedHoloField 的清理(cleanup)效果里,geometries.base 同样是在 useMemo 中创建并在 JSX 中使用的,但从未被释放。请一并释放它(例如在 outerinner 旁边增加 geometries.base.dispose()),以确保 GPU 内存保持可控。

Original comment in English

issue (bug_risk): The base cylinder geometry is never disposed, which can lead to a small memory leak.

In OptimizedHoloField’s cleanup effect, geometries.base is also created in the useMemo and used in JSX but is never disposed. Please dispose it as well (e.g., add geometries.base.dispose() alongside outer and inner) so GPU memory stays bounded.


<div className="text-left text-[2.5rem] leading-[0.9] tracking-tighter select-none sm:text-[3rem] md:text-[3rem] lg:text-[5rem]">
<span className="block bg-gradient-to-r from-[#d4a017] via-[#c49102] to-black bg-clip-text text-transparent dark:from-[#FFD000] dark:via-[#FFD000] dark:to-white">
<span className="block bg-linear-to-r from-[#d4a017] via-[#c49102] to-black bg-clip-text text-transparent dark:from-[#FFD000] dark:via-[#FFD000] dark:to-white">
Copy link

Choose a reason for hiding this comment

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

issue (bug_risk): bg-linear-to-r 类名看起来像是拼写错误,很可能会破坏渐变效果。

bg-linear-to-r 不是标准的 Tailwind 类名(内置的渐变工具类是 bg-gradient-to-r),因此除非你添加了对应的自定义工具类,否则这会让 hero 标题上的渐变效果失效。如果这不是你在 Tailwind 配置中刻意为之,建议改回 bg-gradient-to-r

Original comment in English

issue (bug_risk): The bg-linear-to-r class name looks like a typo and likely breaks the gradient.

bg-linear-to-r isn’t a standard Tailwind class (the built‑in gradient utility is bg-gradient-to-r), so this will drop the gradient on the hero title unless you’ve added a matching custom utility. If this wasn’t intentional in your Tailwind config, please switch back to bg-gradient-to-r.

@Aliothmoon
Copy link
Collaborator Author

image

@Aliothmoon Aliothmoon merged commit 74f733c into main Jan 30, 2026
3 checks passed
@Aliothmoon Aliothmoon deleted the style/hero-mobile-layout branch January 30, 2026 20:55
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