Skip to content

feat(theme): 新增月之暗面主题并适配网页宠物缩放 - #15

Merged
yororoA merged 4 commits into
mainfrom
feat/dark-side-theme
Oct 18, 2026
Merged

yororoA merged 4 commits into
mainfrom
feat/dark-side-theme

Conversation

@yororoA

@yororoA yororoA commented Oct 18, 2026 •

Copy link
Copy Markdown
Owner

变更内容

  • 新增 Pink Floyd《The Dark Side of the Moon》风格的「月之暗面」主题
  • 覆盖首页、文章、片刻、归档、导航、Tab、弹层及登录页
  • 加入棱镜光路、六色光谱、唱片封套、星点背景与月蚀登录动画
  • 主题选择器与首页共用棱镜组件,保持视觉一致
  • 完善中、英、日、德四语种主题文案
  • 支持深浅色、窄屏及“减少动态效果”设置
  • 网页宠物跟随浏览器及触控缩放同步调整大小
  • 使用引擎原生缩放,保持拖拽、碰撞与运动边界正确

验证

  • ESLint 通过
  • TypeScript 检查通过
  • Next.js 生产构建通过
  • 已验证 1440px、390px、320px 页面表现
  • 已验证宠物在 0.75×、1×、1.5× 及触控缩放下的尺寸变化
  • 已验证宠物关闭重开后的缩放比例与监听器清理

Summary by Sourcery

Introduce the Dark Side theme as a fully integrated visual system and make the web mascot responsive to browser and touch zoom.

New Features:

  • Add the fourth “Dark Side” theme with prism, spectrum, record-sleeve, starlight, navigation, dialog, and login eclipse experiences across the site.
  • Provide localized theme copy and theme-picker support for Chinese, English, Japanese, and German.
  • Synchronize the web mascot’s size with browser pixel density and visual viewport zoom while preserving its interaction behavior.

Enhancements:

  • Support light and dark variants, narrow layouts, reduced-motion preferences, accessibility states, and graceful fallbacks for the new theme’s visual effects.
  • Reuse shared prism visuals between the homepage, navigation, article records, branding, and theme selection for a consistent presentation.
  • Improve tab semantics by adding button types and pressed-state accessibility attributes.

Build:

  • Allow local development requests from 127.0.0.1.

Documentation:

  • Document the Dark Side theme’s visual direction, interaction rules, implementation areas, and validation coverage.

Tests:

  • Add and document responsive, accessibility, reduced-motion, navigation, login, theme persistence, and mascot zoom validation for the new experience.

Introduce the prism palette, continuous optical home composition, record sleeves, radial navigation, content layouts and login sequence. Cover shared controls, editors, chat, overlays, responsive layouts and reduced-motion navigation; document the design and browser checks.
Share physical record artwork across article surfaces, strengthen navigation and tab states, and add a gentle starfield. Replace the repeated homepage login art with a separate eclipse renderer, retaining cancellation, reduced-motion and static fallback behavior.
新增棱镜光学组件复用至主题选择器,更新多语言站点文案,添加本地开发允许的IP地址
新增页面缩放计算逻辑,根据设备像素比和视口缩放动态调整吉祥物的尺寸,同时添加缩放相关的事件监听和清理逻辑,确保在页面缩放时吉祥物显示正确且性能稳定。
@sourcery-ai

sourcery-ai Bot commented Oct 18, 2026

Copy link
Copy Markdown

Sorry @yororoA, you've used your own review budget of 250,000 diff characters for the last 7 days.

You can request another review in 4 days and 16 hours by commenting @sourcery-ai review. Upgrade to get a review now.

@vercel

vercel Bot commented Oct 18, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated
ark Ready Ready Preview Oct 18, 2026 1:40pm UTC

@yororoA
yororoA merged commit 02af5b6 into main Oct 18, 2026
5 checks passed
@sourcery-ai

sourcery-ai Bot commented Oct 18, 2026

Copy link
Copy Markdown

Reviewer's Guide

本 PR 通过根级主题属性和共享组件复用新增第四套“月之暗面”主题,覆盖全站布局、首页棱镜场景、唱片封套、导航、弹层及独立月蚀登录流程;同时新增光谱页面转场、四语言文案、明暗色与 reduced-motion 适配,并将网页宠物改为基于设备/视口缩放的引擎原生动态比例调整。

Sequence diagram for the Prism page transition

sequenceDiagram
  participant User
  participant NavLink
  participant PrismEffects
  participant Router
  participant Page

  User->>NavLink: Click pathname link
  NavLink->>PrismEffects: Dispatch P3R_WIPE_EVENT
  PrismEffects->>PrismEffects: Draw spectrum shutter
  PrismEffects->>Router: navigate()
  Router-->>Page: Route becomes ready
  PrismEffects->>PrismEffects: Draw spectrum reveal
  PrismEffects-->>User: Show destination page

  alt Reduced motion, hidden page, or Canvas unavailable
    PrismEffects->>Router: fallback()
    Router-->>Page: Native navigation
  end
Loading

Sequence diagram for the Prism login eclipse flow

sequenceDiagram
  participant User
  participant Login
  participant ConnectionStore
  participant PrismSequence
  participant PrismEclipse
  participant Destination

  User->>Login: Submit authentication
  Login->>ConnectionStore: begin()
  ConnectionStore->>PrismSequence: pending connection state
  PrismSequence->>PrismEclipse: Render eclipse canvas
  PrismEclipse-->>PrismSequence: Totality reached
  PrismSequence->>ConnectionStore: onCovered()
  ConnectionStore-->>Destination: Commit authenticated route
  Destination-->>PrismSequence: pageReady
  PrismSequence->>PrismEclipse: Reveal circular aperture
  PrismSequence-->>User: Show destination

  alt Error or cancel
    PrismSequence-->>User: Return to login
  end

  alt Reduced motion or Canvas unavailable
    PrismSequence->>PrismSequence: Skip visual sequence
    PrismSequence-->>User: Preserve native connection flow
  end
Loading

File-Level Changes

Change Details Files
新增并接入第四套“月之暗面 / Dark Side”主题,以根级主题属性切换实现全站视觉、布局和交互适配。
  • 扩展主题类型、持久化启动脚本、明暗色令牌及四语言文案。
  • 新增棱镜 SVG 场景、星点背景、品牌标识、唱片封套和首页/导航组件。
  • 为首页、文章、片刻、归档、登录、弹层、Tab、表单及聊天等共享页面增加主题样式覆盖。
  • 主题选择器复用棱镜组件,并保持内容组件跨主题挂载。
.uicraft.md
docs/prism-theme.md
src/lib/appearance.ts
src/lib/prism-copy.ts
src/styles/appearance.scss
src/components/blog/_theme-ui.scss
src/components/blog/_prism-ui.scss
src/components/blog/blog-shell.tsx
src/components/blog/home.tsx
src/components/blog/articles.tsx
src/components/blog/shared.tsx
src/components/blog/prism-navigation.tsx
src/components/blog/prism-navigation.module.scss
src/components/blog/prism-record.tsx
src/components/blog/prism-record.module.scss
src/components/appearance/prism-scene.tsx
src/components/appearance/prism-scene.module.scss
src/components/appearance/prism-stars.tsx
src/components/appearance/prism-stars.module.scss
src/components/brand/prism-logo.tsx
src/components/brand/prism-logo.module.scss
src/components/appearance/theme-picker.tsx
src/components/appearance/theme-picker.module.scss
实现月之暗面主题的导航、页面转场、弹层和登录月蚀动画,并兼容可访问性与减少动态效果设置。
  • 在根布局挂载主题转场层,仅对站内 pathname 导航执行光谱遮场并提供超时、取消、页面隐藏和原生导航兜底。
  • 新增独立 Canvas 月蚀登录序列,覆盖 pending、success、error、慢路由、跳过及 Canvas 不可用回退。
  • 为全屏导航使用原生 dialog、焦点恢复、键盘方向键/Home/End/Escape 和移动端两列布局。
  • 为弹层、登录页和 Tab 增加光缝、分段选中态、聚焦样式及 reduced-motion 规则。
src/app/layout.tsx
src/app/login/page.tsx
src/app/login/login.module.scss
src/app/login/components/components.module.scss
src/app/login/components/declaration.tsx
src/components/appearance/prism-effects.tsx
src/components/appearance/prism-effects.module.scss
src/components/appearance/prism-connection-sequence.tsx
src/components/appearance/prism-connection.module.scss
src/components/appearance/prism-eclipse.tsx
src/components/appearance/rain-connection-boundary.tsx
src/components/appearance/rain-connection-store.ts
src/components/blog/prism-navigation.tsx
src/components/blog/prism-navigation.module.scss
src/components/arks/tabs/index.tsx
src/components/arks/tabs/tabs.module.scss
src/styles/_prism-motion.scss
调整网页宠物缩放机制,使其根据设备像素比、视口缩放和触控缩放实时同步,并使用引擎原生配置保持运动行为一致。
  • 记录基准 devicePixelRatio,按 viewport scale 计算并限制页面缩放范围。
  • 通过 MascotEngine 原生配置更新各宠物包比例,保留拖拽、碰撞和边界计算所需的引擎状态。
  • 监听窗口及 visualViewport resize,并在卸载或关闭重开时清理 RAF 与监听器。
  • 为新主题同步调整宠物按钮视觉样式。
src/components/mascot/web-mascot.tsx
src/components/mascot/web-mascot.module.scss
补充本地开发来源配置及通用交互语义改进。
  • 允许 127.0.0.1 作为开发来源。
  • 为通用 Tab 按钮补充 button 类型和 aria-pressed 状态。
  • 在声明文本中补充月之暗面主题的参考与原创实现说明。
next.config.ts
src/components/arks/tabs/index.tsx
src/app/login/components/declaration.tsx

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@yororoA
yororoA deleted the feat/dark-side-theme branch October 18, 2026 13:40

This branch was successfully deployed

1 active deployment
Preview — 6263efd7 Deployed Oct 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.

1 participant